/* AllowID customer console.
   A business tool, not an operations screen. The platform-admin portal is dark
   and dense because it is read at three in the morning during an incident; this
   one is read in an office by somebody deciding who gets a role, so it is light,
   calmer and has room to breathe.

   No web font. The console makes no external request of any kind — the CSP
   forbids it — and a font that fails to load is a layout that shifts under
   somebody reading a confirmation. */

:root {
  --bg: #f6f7f9;      --panel: #ffffff;   --panel-2: #f0f2f5;
  --line: #dde1e7;    --ink: #1c2430;     --muted: #5f6b7c;
  --accent: #1f6feb;  --accent-ink: #ffffff;
  --ok: #16794a;      --warn: #8a5b00;    --bad: #b3261e;   --crit: #7a1710;
  --ok-bg: #e6f4ec;   --warn-bg: #fdf3e0; --bad-bg: #fdecea; --info-bg: #e8f1fe;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
       font: 15px/1.55 var(--sans); }
a { color: var(--accent); }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

header.top { background: var(--panel); border-bottom: 1px solid var(--line);
             position: sticky; top: 0; z-index: 10; }
header.top .bar { display: flex; align-items: center; gap: 1.25rem;
                  padding: .7rem 1.5rem; max-width: 1240px; margin: 0 auto; }
header.top .brand { font-weight: 650; white-space: nowrap; }
header.top .brand small { color: var(--muted); font-weight: 400; display: block;
                          font-size: 12px; }
header.top nav { display: flex; gap: 1.1rem; flex-wrap: wrap; flex: 1; }
header.top nav a { color: var(--ink); text-decoration: none; font-size: 14px;
                   padding-bottom: 3px; border-bottom: 2px solid transparent; }
header.top nav a.on { border-bottom-color: var(--accent); font-weight: 600; }
header.top .who { color: var(--muted); font-size: 12.5px; text-align: right;
                  white-space: nowrap; }

main { padding: 1.5rem; max-width: 1240px; margin: 0 auto; }
h1 { font-size: 22px; margin: 0 0 .3rem; font-weight: 650; }
h2 { font-size: 16px; margin: 2rem 0 .7rem; font-weight: 650; }
h3 { font-size: 12px; margin: 1.2rem 0 .4rem; font-weight: 650; color: var(--muted);
     text-transform: uppercase; letter-spacing: .07em; }
p.lede { color: var(--muted); margin: 0 0 1.4rem; max-width: 74ch; }
.muted { color: var(--muted); }
.note { font-size: 13px; color: var(--muted); max-width: 72ch; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
         padding: 1.1rem 1.25rem; margin-bottom: 1.1rem; }
.panel.tight { padding: .7rem .9rem; }
.grid { display: grid; gap: 1rem; }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid.c4 { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }

.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
        padding: .85rem 1rem; }
.stat .n { font: 650 26px/1.1 var(--mono); }
.stat .k { color: var(--muted); font-size: 12.5px; margin-top: .25rem; }
.stat.bad .n { color: var(--bad); }
.stat.ok  .n { color: var(--ok); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11px;
     text-transform: uppercase; letter-spacing: .06em; padding: .5rem .65rem;
     border-bottom: 2px solid var(--line); white-space: nowrap; }
td { padding: .55rem .65rem; border-bottom: 1px solid var(--line);
     vertical-align: top; }
tr:last-child td { border-bottom: none; }
td.n, th.n { text-align: right; font-family: var(--mono); }
code, .mono { font-family: var(--mono); font-size: 13px; }
.scroll { overflow-x: auto; }

/* Colour is never the only signal (guide 8 §4): every tag carries a word. */
.tag { display: inline-block; padding: .1rem .45rem; border-radius: 4px;
       font-size: 12px; border: 1px solid var(--line); color: var(--muted);
       background: var(--panel-2); white-space: nowrap; }
.tag.ok   { color: var(--ok);   background: var(--ok-bg);   border-color: #bfe0cd; }
.tag.warn { color: var(--warn); background: var(--warn-bg); border-color: #e8d3a4; }
.tag.bad  { color: var(--bad);  background: var(--bad-bg);  border-color: #f2c2be; }
.tag.crit { color: #fff; background: var(--crit); border-color: var(--crit); }
.tag.info { color: var(--accent); background: var(--info-bg); border-color: #c1d8fb; }

.banner { border-radius: 8px; padding: .85rem 1.1rem; margin-bottom: 1.1rem;
          border: 1px solid; font-size: 14px; }
/* Direct child only. A banner's heading is a leading <b>; the lines underneath
   emphasise a controller name or a number inline, and a bare rule would put each
   of those on its own line and break the sentence around it. */
.banner > b { display: block; margin-bottom: .25rem; }
.banner.bad  { background: var(--bad-bg);  border-color: #f0b7b2; color: #7a1710; }
.banner.warn { background: var(--warn-bg); border-color: #e5cb92; color: #6b4600; }
.banner.info { background: var(--info-bg); border-color: #bcd4fa; color: #10396f; }
.banner.ok   { background: var(--ok-bg);   border-color: #b6dcc6; color: #0e5c37; }

form.inline { display: flex; gap: .55rem; align-items: flex-end; flex-wrap: wrap; }
input[type=text], input[type=email], input[type=number], select, textarea {
  background: var(--panel); border: 1px solid #c3cad4; color: var(--ink);
  border-radius: 6px; padding: .45rem .6rem; font: 14px var(--sans); }
textarea { width: 100%; }
label { display: block; font-size: 12.5px; color: var(--muted); margin: .7rem 0 .2rem;
        font-weight: 600; }
button { background: var(--accent); color: var(--accent-ink); border: 0;
         border-radius: 6px; padding: .5rem .9rem; font: 600 14px var(--sans);
         cursor: pointer; }
button.quiet { background: var(--panel); color: var(--ink); border: 1px solid #c3cad4;
               font-weight: 500; }
button.danger { background: var(--bad); color: #fff; }
button[disabled] { opacity: .45; cursor: not-allowed; }
.actions { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }

/* The onboarding checklist (guide 8 §2). The current step is marked with a word
   as well as a colour, so it survives a monochrome screen and a screen reader. */
ol.checklist { list-style: none; padding: 0; margin: 0; counter-reset: step; }
ol.checklist li { position: relative; padding: .7rem .8rem .7rem 3rem;
                  border: 1px solid var(--line); border-radius: 8px;
                  margin-bottom: .5rem; background: var(--panel); }
ol.checklist li::before { counter-increment: step; content: counter(step);
  position: absolute; left: .8rem; top: .7rem; width: 1.6rem; height: 1.6rem;
  border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line);
  display: grid; place-items: center; font: 600 12px var(--mono); }
ol.checklist li.done { background: var(--ok-bg); border-color: #bfe0cd; }
ol.checklist li.done::before { content: "✓"; background: var(--ok); color: #fff;
                               border-color: var(--ok); }
ol.checklist li.now { border-color: var(--accent); box-shadow: 0 0 0 2px #dbe8fd; }
ol.checklist .what { font-weight: 600; }
ol.checklist .why { color: var(--muted); font-size: 13px; }

.qr { background: #fff; padding: .7rem; border: 1px solid var(--line);
      border-radius: 8px; width: 220px; }
.qr svg { width: 100%; height: auto; display: block; }
.auth { max-width: 560px; margin: 6vh auto; }

/* Secrets shown exactly once. Big, monospaced, selectable, and impossible to
   mistake for ordinary page furniture. */
.secrets { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
           gap: .5rem; margin: 1rem 0; }
.secrets code { display: block; background: var(--panel-2); border: 1px solid var(--line);
                border-radius: 6px; padding: .6rem .7rem; font-size: 15px;
                letter-spacing: .04em; text-align: center; user-select: all; }

.chart { width: 100%; height: auto; }
.chart .axis { stroke: var(--line); }
.chart .bar { fill: var(--accent); opacity: .8; }
.chart .tick { fill: var(--muted); font: 11px var(--mono); }

.bar-track { background: var(--panel-2); border: 1px solid var(--line);
             border-radius: 999px; height: 12px; overflow: hidden; }
.bar-fill { background: var(--accent); height: 100%; }
.bar-fill.over { background: var(--bad); }

pre.body { background: var(--panel-2); border: 1px solid var(--line);
           border-radius: 6px; padding: .8rem; white-space: pre-wrap;
           font: 13px/1.5 var(--mono); }
hr.rule { border: 0; border-top: 1px solid var(--line); margin: 1.4rem 0; }

/* The line against guide 2. Shown on every screen that could be mistaken for
   the site console, which is what guide 8 §1 asks for. */
.elsewhere { border-left: 3px solid var(--accent); background: var(--info-bg);
             padding: .7rem .9rem; border-radius: 0 6px 6px 0; font-size: 13.5px;
             color: #10396f; margin: 1rem 0; }

@media (max-width: 700px) {
  header.top .bar { flex-direction: column; align-items: flex-start; gap: .6rem; }
  header.top .who { text-align: left; }
  main { padding: 1rem; }
}