/* AllowID customer console — the layer on top of the brand.
   ==========================================================================
   Loaded after /static/brand/brand.css, which carries the palette, Inter, and
   every primitive shared with the other three surfaces. This file is only what
   is true about THIS console.

   Light. Light Gray ground, white panels, Deep Navy ink, Primary Blue for
   anything actionable. The platform-admin portal is navy because it is read
   during an incident; this one is read in an office by somebody deciding who
   gets a role, and it should feel like the business tool it is.

   Standard density: --type-base 15px, the brand default.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

header.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
header.top .bar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: .7rem 1.5rem;
  max-width: 1240px;
  margin: 0 auto;
}

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: .94em;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
header.top nav a:hover { text-decoration: none; border-bottom-color: var(--line-strong); }
header.top nav a.on { border-bottom-color: var(--accent); font-weight: 600; }

header.top .who {
  color: var(--ink-muted);
  font-size: .84em;
  text-align: right;
  white-space: nowrap;
  line-height: 1.5;
}

main { padding: 1.5rem; max-width: 1240px; margin: 0 auto; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1 { font-size: 1.47em; margin: 0 0 .3rem; font-weight: 650; letter-spacing: -.012em; }
h2 { font-size: 1.07em; margin: 2rem 0 .7rem; font-weight: 650; }
h3 {
  font-size: .8em; margin: 1.2rem 0 .4rem; font-weight: 650;
  color: var(--ink-muted); text-transform: uppercase; letter-spacing: .07em;
}
p.lede { color: var(--ink-muted); margin: 0 0 1.4rem; max-width: 74ch; }
.note { font-size: .87em; color: var(--ink-muted); max-width: 72ch; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.panel { padding: 1.1rem 1.25rem; margin-bottom: 1.1rem; }
.panel.tight { padding: .7rem .9rem; }
.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(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: .85rem 1rem;
}
.stat .n { font: 650 1.73em/1.1 var(--font-mono); font-variant-numeric: tabular-nums; }
.stat .k { color: var(--ink-muted); font-size: .84em; margin-top: .25rem; }
.stat.bad .n { color: var(--bad); }
.stat.ok  .n { color: var(--ok); }

table { font-size: .94em; }
code, .mono { font-size: .87em; }

/* --------------------------------------------------------------------------
   The onboarding checklist (guide 8 §2)

   The current step is marked with a word as well as a colour and a ring, 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: var(--r-md);
  margin-bottom: .5rem;
  background: var(--surface);
}
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(--surface-2);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font: 600 .8em var(--font-mono);
}
ol.checklist li.done { background: var(--ok-bg); border-color: var(--ok-line); }
ol.checklist li.done::before {
  content: "✓"; background: var(--ok); color: var(--brand-white); border-color: var(--ok);
}
ol.checklist li.now { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
ol.checklist .what { font-weight: 600; }
ol.checklist .why { color: var(--ink-muted); font-size: .87em; }

/* --------------------------------------------------------------------------
   Secrets shown exactly once

   Big, monospaced, selectable, and impossible to mistake for ordinary page
   furniture — because if somebody scrolls past this one they are re-issuing.
   -------------------------------------------------------------------------- */

.secrets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .5rem;
  margin: 1rem 0;
}
.secrets code {
  display: block;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .6rem .7rem;
  font-size: 1em;
  letter-spacing: .04em;
  text-align: center;
  user-select: all;
}

/* --------------------------------------------------------------------------
   Plan and usage
   -------------------------------------------------------------------------- */

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

.auth { max-width: 560px; margin: 6vh auto; }

/* Signed out: the same header with nothing in it but the lockup. A sign-in
   screen is the one most often reached from a link in a message, and an
   unbranded one is the screen a phishing page imitates most cheaply. */
header.top.plain .bar { padding: .9rem 1.5rem; }
header.top.plain .brandmark img { width: 2em; height: 2em; }

/* --------------------------------------------------------------------------
   Small screens

   The console is a desk tool, but somebody approving a role from a phone in a
   corridor is a real Tuesday. The header stacks rather than scrolling
   sideways.
   -------------------------------------------------------------------------- */

@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; }
}