/* ============================================================================
   NIRMAN — institutional design system
   Monochrome-blue identity taken from the supplied artwork (#0F4099).
   No external fonts, no CDN, no external network requests.

   Token structure (do not break it):
     :root                                              → the LIGHT palette
     @media (prefers-color-scheme: dark) :root:not([data-theme="light"])
     :root[data-theme="dark"]                           → the explicit override
   Every colour is DEFINED in the bare :root block; the dark blocks only
   REDEFINE. Nothing has its only definition inside a media or [data-theme] block.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---- brand -------------------------------------------------------- */
  /* One primary hue. The saffron accent is retired: emphasis comes from
     weight, scale and the tint, never from a second colour. */
  --brand: #0F4099;            /* the primary fill — sidebar, primary button */
  --brand-deep: #0A2E6E;       /* pressed states, sidebar gradient depth */
  --brand-mid: #2B5CB0;        /* hover on a brand fill, secondary bars */
  --brand-ink: #0F4099;        /* brand used as TEXT or rule on a light surface */
  --brand-tint: #E9EEF9;       /* selected rows, quiet fills, active nav */
  --brand-tint-2: #DCE5F5;     /* the tint, one step down */
  --brand-tint-line: #C9D8F1;  /* border that belongs to a tint fill */
  --on-brand: #EFEFEF;         /* "reverse" — the ink used ON brand blue */

  /* ---- ground & surfaces -------------------------------------------- */
  --ground: #F3F3F3;           /* page background — the artwork's own ground */
  --surface: #FFFFFF;          /* cards, inputs */
  --surface-2: #FAFAFC;        /* row hover */
  --surface-3: #EFF0F3;        /* table head, quiet fills */

  --ink: #16202E;
  --ink-soft: #46536A;
  --ink-faint: #6B7788;
  --line: #DFE1E7;
  --line-strong: #C5C9D3;

  /* ---- semantic (never used as an accent) --------------------------- */
  --ok: #14663D;      --ok-bg: #E6F1EB;     --ok-line: #B4D6C3;
  --review: #92560A;  --review-bg: #F7F0E3; --review-line: #E3CFA7;
  --block: #96201A;   --block-bg: #F8E9E8;  --block-line: #E5BEBB;
  --info: var(--brand-ink);
  --info-bg: var(--brand-tint);
  --info-line: var(--brand-tint-line);

  /* ---- score ramp: one hue, six values ------------------------------ */
  --ramp-1: #061F4D;
  --ramp-2: #0A2E6E;
  --ramp-3: #0F4099;
  --ramp-4: #2B5CB0;
  --ramp-5: #6D93D2;
  --ramp-6: #A8C0E7;
  --ramp-rest: #DCE0E7;

  /* ---- chrome ------------------------------------------------------- */
  --sidebar-fg: #E8ECF6;
  --sidebar-fg-dim: #B7C6E4;
  --sidebar-line: rgba(239, 239, 239, .18);
  --nav-hover: rgba(239, 239, 239, .10);
  --nav-active: rgba(239, 239, 239, .22);
  --nav-edge: #EFEFEF;
  --backdrop: rgba(10, 46, 110, .58);
  --skel-a: #E4E6EB;
  --skel-b: #F4F5F8;

  /* ---- focus -------------------------------------------------------- */
  --focus: #0F4099;
  --focus-on-brand: #FFFFFF;

  /* ---- geometry ----------------------------------------------------- */
  /* ONE radius scale: --r-md for controls and inner rows, --r-lg for every
     card-like surface. Nothing invents its own. */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --topbar-h: 60px;         /* the height of the primary bar */
  --footer-h: 56px;         /* reserved so a fixed toast never sits on it */
  --wrap: 1440px;           /* one content measure, bar and page share it */

  /* ---- ONE spacing scale — every gap, pad and margin comes from here --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;   /* the default rhythm: between cards, inside a grid */
  --sp-5: 24px;   /* between sections / the page gutter */
  --sp-6: 40px;

  /* ---- ONE type scale — six sizes, nothing between them -------------- */
  --fs-xs: 11.5px;   /* uppercase micro-labels, chips, table heads */
  --fs-sm: 13px;     /* secondary prose, meta, buttons, table cells */
  --fs-base: 15px;   /* body */
  --fs-md: 17px;     /* h3, card titles */
  --fs-lg: 20px;     /* h2 */
  --fs-xl: 26px;     /* h1, stat value */

  /* ---- ONE shadow per elevation ------------------------------------- */
  --shadow-1: 0 1px 2px rgba(22, 32, 46, .06), 0 1px 3px rgba(22, 32, 46, .08);
  --shadow-2: 0 4px 12px rgba(22, 32, 46, .10), 0 1px 3px rgba(22, 32, 46, .06);
  --shadow-3: 0 12px 32px rgba(10, 46, 110, .20);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #17458F;
    --brand-deep: #0A2E6E;
    --brand-mid: #2C61BE;
    --brand-ink: #9EBCF3;
    --brand-tint: #16233B;
    --brand-tint-2: #1B2A45;
    --brand-tint-line: #27395D;
    --on-brand: #EFEFEF;

    --ground: #0E1218;
    --surface: #161B23;
    --surface-2: #1B212B;
    --surface-3: #1F2630;

    --ink: #E8EBF1;
    --ink-soft: #B2BBCB;
    --ink-faint: #8B94A5;
    --line: #29303B;
    --line-strong: #3A424F;

    --ok: #6FD09C;      --ok-bg: #12251C;     --ok-line: #23503A;
    --review: #E3B063;  --review-bg: #241C0F; --review-line: #4E3A17;
    --block: #F09B94;   --block-bg: #241312;  --block-line: #55231F;

    --ramp-1: #0A2E6E;
    --ramp-2: #14418F;
    --ramp-3: #2B5CB0;
    --ramp-4: #4D7BC9;
    --ramp-5: #7FA2DC;
    --ramp-6: #AFC5EA;
    --ramp-rest: #2A313C;

    --sidebar-fg: #E8ECF6;
    --sidebar-fg-dim: #A9BADD;
    --backdrop: rgba(0, 0, 0, .62);
    --skel-a: #1B212B;
    --skel-b: #242C38;

    --focus: #9EBCF3;
    --shadow-3: 0 12px 32px rgba(0, 0, 0, .55);
  }
}

:root[data-theme="dark"] {
  --brand: #17458F;
  --brand-deep: #0A2E6E;
  --brand-mid: #2C61BE;
  --brand-ink: #9EBCF3;
  --brand-tint: #16233B;
  --brand-tint-2: #1B2A45;
  --brand-tint-line: #27395D;
  --on-brand: #EFEFEF;

  --ground: #0E1218;
  --surface: #161B23;
  --surface-2: #1B212B;
  --surface-3: #1F2630;

  --ink: #E8EBF1;
  --ink-soft: #B2BBCB;
  --ink-faint: #8B94A5;
  --line: #29303B;
  --line-strong: #3A424F;

  --ok: #6FD09C;      --ok-bg: #12251C;     --ok-line: #23503A;
  --review: #E3B063;  --review-bg: #241C0F; --review-line: #4E3A17;
  --block: #F09B94;   --block-bg: #241312;  --block-line: #55231F;

  --ramp-1: #0A2E6E;
  --ramp-2: #14418F;
  --ramp-3: #2B5CB0;
  --ramp-4: #4D7BC9;
  --ramp-5: #7FA2DC;
  --ramp-6: #AFC5EA;
  --ramp-rest: #2A313C;

  --sidebar-fg: #E8ECF6;
  --sidebar-fg-dim: #A9BADD;
  --backdrop: rgba(0, 0, 0, .62);
  --skel-a: #1B212B;
  --skel-b: #242C38;

  --focus: #9EBCF3;
  --shadow-3: 0 12px 32px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; min-height: 100%; }
html { overflow-x: hidden; }

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--ink);
  background: var(--ground);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); color: var(--brand-ink); }
h3 { font-size: var(--fs-md); }
h4 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
p { margin: 0 0 var(--sp-2); }
a { color: var(--brand-ink); }
ul { margin: 0; padding-left: 18px; }

/* TASK 3.3 — one visible focus ring everywhere, in brand blue, with an offset
   that survives on the light ground AND on the blue sidebar (where the ring
   flips to the reverse colour so it does not disappear into the fill). */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}
.appbar :focus-visible,
.nav-panel :focus-visible,
.public-head :focus-visible,
.brand-panel :focus-visible,
.btn-primary:focus-visible,
.btn-accent:focus-visible,
.btn-ok:focus-visible {
  outline-color: var(--focus-on-brand);
  outline-offset: 3px;
}

/* TASK 3.4 — respect prefers-reduced-motion globally. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#skip-link:not(.sr-only) {
  position: fixed; left: 12px; top: 12px; z-index: 200;
  background: var(--brand); color: var(--on-brand);
  border: 1px solid var(--brand-deep); border-radius: var(--r-md);
  padding: 10px 14px; font: inherit; font-weight: 650; cursor: pointer;
}

/* ------------------------------------------------------------------ brand */

/* The monogram and the wordmark are INLINE svg (1.4 KB / 1.5 KB) with
   fill="currentColor", so they tint from `color` with no extra request. */
.mark-icon, .mark-word { display: block; flex: none; }
.mark-icon { width: 27px; height: auto; }
.mark-word { width: 92px; height: auto; }

/* The full lockup and the descriptor are ~31 KB each, so they stay external
   files. `currentColor` inside an <img> resolves to black, so the tint asset is
   painted through a mask instead: one request, still tintable, correct in both
   themes. @supports falls back to the literal-blue original. */
.brand-lockup {
  display: block;
  width: min(430px, 84vw);
  aspect-ratio: 391 / 85;
  background-color: var(--brand-ink);
  -webkit-mask: url("brand/nirman-full-tint.svg") no-repeat left center / contain;
  mask: url("brand/nirman-full-tint.svg") no-repeat left center / contain;
}
@supports not (mask-image: url("brand/nirman-full-tint.svg")) {
  .brand-lockup {
    background: url("brand/nirman-full.svg") no-repeat left center / contain;
  }
}

/* the lockup: monogram + wordmark, reverse-on-brand, no frame of its own */
.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  color: var(--on-brand);
  text-decoration: none;
  min-width: 0;
}
.brand-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.brand-name { font-weight: 750; font-size: var(--fs-md); letter-spacing: .09em; color: var(--on-brand); }
.brand-sub {
  font-size: var(--fs-xs); color: var(--sidebar-fg-dim);
  letter-spacing: .08em; text-transform: uppercase;
}
.brand.brand-plain { border: none; padding: 0; min-height: 0; }

/* legacy hook kept so nothing that still asks for a square mark breaks */
.brand-mark {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  color: var(--on-brand);
}

/* ------------------------------------------------------------------ shell */

/* A plain vertical flow: sticky bar, then <main>, then a real <footer>.
   No grid column is reserved for anything on the left any more. */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ------------------------------------------------------- the primary bar */
/*
 * ONE horizontal bar. Government staff read a row of labels; they do not go
 * hunting in a side drawer. So: brand at the left, the nav items as text
 * labels in the middle, who-you-are and Log out at the right — all of it
 * visible without a single click.
 */
.appbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--brand);
  color: var(--on-brand);
  border-bottom: 1px solid var(--brand-deep);
}
/* the shadow appears only once the page has actually scrolled */
.appbar.is-stuck { box-shadow: var(--shadow-2); }

.appbar-in {
  display: flex;
  align-items: stretch;
  gap: var(--sp-4);
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--sp-5);
  min-height: var(--topbar-h);
}
.appbar-in > .brand { padding: var(--sp-2) 0; }

/* The nav list scrolls sideways inside its own box when the labels outrun the
   bar. The scrollbar is hidden; the PAGE never scrolls sideways. */
.nav-inline { display: flex; min-width: 0; flex: 1 1 auto; }
.nav-scroll {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.nav-scroll::-webkit-scrollbar { display: none; height: 0; }
/* Only when the row really is wider than the bar: the ends fade, so a partly
   visible label reads as "there is more this way", not as a broken layout. */
.nav-scroll.is-scrollable {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px,
    #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px,
    #000 calc(100% - 22px), transparent 100%);
}
.nav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: stretch; gap: 2px;
}
.nav-list > li { display: flex; }
.nav-list a {
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px;
  color: var(--on-brand);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 550;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: background .12s ease;
}
.nav-list a svg { flex: none; opacity: .9; }
.nav-list a:hover { background: var(--nav-hover); }
/* The active item is unmistakable: a solid reverse-colour underline on the
   bar's own bottom edge, a lighter fill behind it, and more weight. */
.nav-list a[aria-current="page"] {
  background: var(--nav-active);
  border-bottom-color: var(--on-brand);
  font-weight: 650;
}
.nav-list a[aria-current="page"] svg { opacity: 1; }
/* The row is a clipping scroll box, so an outset ring would lose its top and
   bottom edges. Draw this one INSIDE the item instead — still 3px, still the
   reverse colour, but whole. */
.nav-list a:focus-visible { outline-offset: -3px; border-radius: 0; }

/* the collapsed control, below ~900px */
.nav-toggle {
  display: none;
  align-items: center; gap: var(--sp-2);
  align-self: center;
  flex: none;
  font: inherit; font-size: var(--fs-sm); font-weight: 650;
  min-height: 40px; padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid rgba(239, 239, 239, .55);
  background: rgba(239, 239, 239, .14);
  color: var(--on-brand);
  cursor: pointer;
}
.nav-toggle:hover { background: rgba(239, 239, 239, .24); border-color: var(--on-brand); }
.nav-toggle-bars {
  width: 16px; height: 11px; flex: none;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  position: relative;
}
.nav-toggle-bars::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  margin-top: -1px; height: 2px; background: currentColor;
}

/* the full-width panel BELOW the bar — not a side drawer */
.nav-panel { display: none; background: var(--brand-deep); }
.nav-panel > ul {
  list-style: none; margin: 0 auto; padding: var(--sp-2) var(--sp-3) var(--sp-3);
  max-width: var(--wrap);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.nav-panel a {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 54px; padding: 0 var(--sp-4);
  border-radius: var(--r-md);
  color: var(--on-brand); text-decoration: none;
  font-size: var(--fs-base); font-weight: 600;
  border: 1px solid rgba(239, 239, 239, .16);
}
.nav-panel a:hover { background: var(--nav-hover); }
.nav-panel a[aria-current="page"] {
  background: var(--nav-active);
  font-weight: 700;
  box-shadow: inset 4px 0 0 var(--on-brand);
}

/* who you are, and the way out — always at the right of the bar */
.appbar-end {
  display: flex; align-items: center; gap: var(--sp-2);
  flex: none; margin-left: auto;
}
.user-chip {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-md);
  background: rgba(239, 239, 239, .12);
  border: 1px solid rgba(239, 239, 239, .26);
  min-width: 0;
}
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--on-brand); color: var(--brand-deep);
  display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 750;
}
.user-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.user-name {
  font-size: var(--fs-sm); font-weight: 650; color: var(--on-brand);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 24ch;
}
.user-sub {
  font-size: var(--fs-xs); color: var(--sidebar-fg-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30ch;
}
/* a chrome button on the blue bar is quiet and reverse-coloured */
.appbar .btn {
  background: transparent;
  border-color: rgba(239, 239, 239, .55);
  color: var(--on-brand);
  white-space: nowrap;
}
.appbar .btn:hover:not(:disabled) {
  background: rgba(239, 239, 239, .18);
  border-color: var(--on-brand);
  color: #fff;
}

/* ----------------------------------------------------------- main + foot */

.view {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  /* a short screen still pushes the footer to the bottom of the viewport */
  min-height: calc(100vh - var(--topbar-h) - var(--footer-h) - var(--sp-6));
}

.page-foot {
  flex: none;
  background: var(--ground);
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: var(--fs-sm);
  text-align: center;
  padding: var(--sp-4) var(--sp-5);
  min-height: var(--footer-h);
  display: flex; align-items: center; justify-content: center;
}


/* ------------------------------------------------------------- primitives */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.card-head {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.card-head h2, .card-head h3 { flex: 1; min-width: 0; font-size: var(--fs-md); }
.card-body { padding: var(--sp-4); }
.card-body.tight { padding: 0; }

/* ONE composed unit: title, scope line, sub line and the actions all sit
   inside a single bordered block so they read as one header, not four
   things that happen to be stacked. */
.page-head {
  display: flex; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.page-head .grow { flex: 1 1 260px; min-width: 0; }
/* the action cluster keeps its own size but may still shrink and wrap, so a
   long chip can never push the page sideways at 360px */
.page-head > .row { flex: 0 1 auto; min-width: 0; max-width: 100%; align-items: center; }
.page-sub { color: var(--ink-soft); font-size: var(--fs-sm); margin-top: var(--sp-1); }

.grid { display: grid; gap: var(--sp-4); }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.grow { flex: 1; min-width: 0; }
.row.end { justify-content: flex-end; }
.mt { margin-top: var(--sp-4); }
.mb { margin-bottom: var(--sp-4); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: var(--fs-sm); font-weight: 620;
  padding: 9px 14px; min-height: 40px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink);
  cursor: pointer; text-decoration: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
/* A chrome button must not wrap into "Log / out"; a full-width button in a
   panel still may, or a long label would push the page sideways at 360px. */
.appbar .btn, .btn-sm { white-space: nowrap; }
.btn:hover:not(:disabled) { background: var(--brand-tint); border-color: var(--brand-mid); color: var(--brand-ink); }
.btn:active:not(:disabled) { background: var(--brand-tint-2); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn-primary:hover:not(:disabled) { background: var(--brand-mid); border-color: var(--brand-mid); color: #fff; }
.btn-primary:active:not(:disabled) { background: var(--brand-deep); border-color: var(--brand-deep); }
/* "accent" is no longer a second hue — it is the deep value of the one hue. */
.btn-accent { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--on-brand); }
.btn-accent:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-danger { background: var(--surface); border-color: var(--block); color: var(--block); }
.btn-danger:hover:not(:disabled) { background: var(--block-bg); border-color: var(--block); color: var(--block); }
.btn-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-ok:hover:not(:disabled) { background: var(--ok); border-color: var(--ok); filter: brightness(1.12); color: #fff; }
.btn-sm { min-height: 32px; padding: 5px 10px; font-size: var(--fs-sm); }
.btn-lg { min-height: 52px; font-size: var(--fs-md); padding: 12px 20px; }
.btn-block { width: 100%; }
.btn-quiet { background: transparent; border-color: var(--brand-tint-line); color: var(--brand-ink); }
.btn-quiet:hover:not(:disabled) { background: var(--brand-tint); border-color: var(--brand-mid); }
.btn-link {
  background: none; border: none; padding: 0; min-height: 0;
  color: var(--brand-ink); text-decoration: underline; cursor: pointer; font-size: var(--fs-sm);
}
.btn.is-pending { position: relative; }
.btn.is-copied { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }

/* forms */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.field > label, .label {
  font-size: var(--fs-sm); font-weight: 650; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .045em;
}
.hint { font-size: var(--fs-sm); color: var(--ink-faint); }
input[type="text"], input[type="password"], input[type="number"],
input[type="search"], select, textarea {
  font: inherit; font-size: var(--fs-base);
  padding: 10px 12px; min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  width: 100%;
}
textarea { min-height: 76px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--brand); }
input[disabled], select[disabled] { background: var(--surface-3); color: var(--ink-faint); }
.inline-fields { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.eng-row {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-3); margin-bottom: var(--sp-2); background: var(--surface-2);
}
.eng-row .field { margin-bottom: 0; }

.switch { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.switch input { width: 20px; height: 20px; accent-color: var(--brand); flex: none; }
.switch span { font-size: var(--fs-base); font-weight: 550; }

.filters {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
}
.filters .field { margin-bottom: 0; }

/* password field with a show/hide toggle inside it */
.pw-wrap { position: relative; display: flex; }
.pw-wrap input { padding-right: 76px; }
.pw-toggle {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  min-height: 34px; padding: 4px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface-3); color: var(--brand-ink);
  font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
}
.pw-toggle:hover { background: var(--brand-tint); border-color: var(--brand-mid); }

/* chips */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 680; letter-spacing: .02em;
  border: 1px solid transparent; white-space: nowrap;
}
.chip-ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.chip-review { background: var(--review-bg); color: var(--review); border-color: var(--review-line); }
.chip-block { background: var(--block-bg); color: var(--block); border-color: var(--block-line); }
.chip-info { background: var(--info-bg); color: var(--info); border-color: var(--info-line); }
.chip-neutral { background: var(--surface-3); color: var(--ink-soft); border-color: var(--line-strong); }
/* the old saffron "accent" chip, re-derived from the one hue */
.chip-accent { background: var(--brand-tint-2); color: var(--brand-ink); border-color: var(--brand-mid); }

.badge-count {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--brand); color: var(--on-brand);
  font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums;
}
.badge-count.zero { background: var(--surface-3); color: var(--ink-faint); }

/* key-value */
.kv { display: grid; gap: var(--sp-3) var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.kv-item { min-width: 0; }
.kv-key {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 700; margin-bottom: 2px;
}
.kv-val { font-size: var(--fs-base); font-weight: 570; word-break: break-word; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: var(--fs-sm); }

/* ------------------------------------------------------------ stat tiles */
/* A row of tiles wraps evenly and every tile in a row is the SAME height —
   `grid-auto-rows: 1fr` — so one long hint can never stretch the row. */
.stat-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
/* Equal heights matter only where a row holds more than one tile; on a phone
   the tiles are one per row and should size to their own content. */
@media (min-width: 460px) {
  .stat-grid { grid-auto-rows: 1fr; }
}
/* Once there is room, the tile COUNT picks the column count, so six tiles
   land 3 + 3 instead of 5 + 1 with a lone orphan on a second row.
   minmax(0, 1fr) can never overflow its track. */
@media (min-width: 1120px) {
  .stat-grid.c1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .stat-grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat-grid.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: var(--sp-3) var(--sp-4);
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.stat-label {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 700;
}
.stat-value {
  font-size: var(--fs-xl); font-weight: 720; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.stat-value.sm { font-size: var(--fs-md); line-height: 1.3; font-weight: 680; }
.stat-value.is-ok { color: var(--ok); }
.stat-value.is-review { color: var(--review); }
.stat-value.is-block { color: var(--block); }
/* A tile is a glance, not a paragraph: two lines, the rest on the title. */
.stat-hint {
  font-size: var(--fs-sm); color: var(--ink-soft);
  margin-top: auto; padding-top: var(--sp-1);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}

/* tables — TASK 3.2: every table gets tabular figures so money columns align */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table {
  border-collapse: collapse; width: 100%; min-width: 520px; font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
thead th {
  text-align: left; padding: 10px 12px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--line-strong);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft); font-weight: 750; white-space: nowrap;
}
tbody td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* progress */
.bar { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; position: relative; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.bar.accent > span { background: var(--brand-mid); }
.bar.ok > span { background: var(--ok); }
.bar-row { display: flex; align-items: center; gap: var(--sp-2); }
.bar-row .bar { flex: 1; }
.bar-label { font-size: var(--fs-sm); font-weight: 650; min-width: 118px; color: var(--ink-soft); }
.bar-val { font-size: var(--fs-sm); font-weight: 700; min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }

/* score component bar */
.score-bar {
  display: flex; height: 30px; border-radius: var(--r-md);
  overflow: hidden; border: 1px solid var(--line-strong); background: var(--surface-3);
}
.score-seg {
  display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: 700;
  overflow: hidden; white-space: nowrap;
  border-right: 1px solid rgba(239, 239, 239, .35);
  font-variant-numeric: tabular-nums;
}
.score-seg.rest { background: var(--ramp-rest); color: var(--ink-faint); }
.score-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-2); }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-soft); }
.swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.comp-row { border-bottom: 1px solid var(--line); padding: 14px 0; }
.comp-row:last-child { border-bottom: none; }
.comp-head { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.comp-title { font-weight: 680; font-size: var(--fs-base); flex: 1; min-width: 140px; }
.evidence { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; }
.evidence li {
  font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink-soft);
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 4px 8px; word-break: break-all;
}

/* alerts / callouts */
.alert {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  padding: 11px 13px; border-radius: var(--r-md);
  border: 1px solid; font-size: var(--fs-sm);
}
.alert-info { background: var(--info-bg); border-color: var(--info-line); color: var(--info); }
.alert-warn { background: var(--review-bg); border-color: var(--review-line); color: var(--review); }
.alert-error { background: var(--block-bg); border-color: var(--block-line); color: var(--block); }
.alert-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.alert strong { font-weight: 720; }
.alert-icon { font-weight: 800; flex: none; }

/* verdict panel (e-MB) */
.verdict { border-radius: var(--r-lg); padding: var(--sp-4); border: 1px solid; }
.verdict h3 { font-size: var(--fs-lg); display: flex; align-items: center; gap: var(--sp-2); }
.verdict-none { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.verdict-review { background: var(--review-bg); border-color: var(--review); color: var(--review); }
.verdict-block { background: var(--block-bg); border-color: var(--block); color: var(--block); }
.verdict ul { margin-top: var(--sp-2); }
.verdict li { margin-bottom: 4px; }

/* empty / skeleton */
.empty { text-align: center; padding: 40px 20px; color: var(--ink-soft); }
.empty-mark {
  width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand-ink);
  display: grid; place-items: center; font-size: var(--fs-lg); font-weight: 800;
}
.empty h3 { margin-bottom: 6px; }
.empty p { font-size: var(--fs-sm); max-width: 460px; margin: 0 auto; }

@keyframes shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
.skel {
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--skel-a) 8%, var(--skel-b) 20%, var(--skel-a) 33%);
  background-size: 840px 100%;
  animation: shimmer 1.3s linear infinite;
  height: 14px; margin-bottom: 10px;
}
.skel.tall { height: 88px; }
.skel.title { height: 26px; width: 46%; }
.skel.line-60 { width: 60%; }
.skel.line-80 { width: 80%; }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* toasts */
/* The toast region sits clear of the footer, so a sign-in toast on a short
   viewport never lands on top of the disclaimer or the page content. */
.toast-region {
  position: fixed; right: var(--sp-4); z-index: 120;
  bottom: calc(var(--footer-h) + var(--sp-3));
  display: flex; flex-direction: column; gap: var(--sp-2);
  max-width: min(420px, calc(100vw - 32px));
}
.toast {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--r-md); box-shadow: var(--shadow-3);
  padding: 12px 14px; display: flex; gap: var(--sp-2); align-items: flex-start;
}
.toast.error { border-left-color: var(--block); }
.toast.ok { border-left-color: var(--ok); }
.toast.warn { border-left-color: var(--review); }
.toast-body { flex: 1; min-width: 0; }
.toast-title { font-weight: 700; font-size: var(--fs-sm); margin-bottom: 2px; }
.toast-msg { font-size: var(--fs-sm); color: var(--ink-soft); word-break: break-word; }
.toast-x {
  background: none; border: none; cursor: pointer; font-size: var(--fs-md);
  color: var(--ink-faint); padding: 0 2px; line-height: 1;
}

/* tree */
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { margin-left: 14px; border-left: 1px dashed var(--line-strong); padding-left: 10px; }
.tree-node { margin: 2px 0; }
.tree-row { display: flex; align-items: center; gap: 6px; }
.tree-toggle {
  width: 26px; height: 26px; flex: none;
  border: 1px solid var(--line-strong); background: var(--surface);
  border-radius: var(--r-sm); cursor: pointer;
  font-size: var(--fs-sm); line-height: 1; color: var(--ink-soft);
  display: grid; place-items: center;
}
.tree-toggle.leaf { visibility: hidden; }
.tree-btn {
  flex: 1; text-align: left; background: none; border: 1px solid transparent;
  border-radius: var(--r-md); padding: 6px 9px; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); display: flex; align-items: center; gap: 8px;
  min-width: 0; color: var(--ink);
}
.tree-btn:hover { background: var(--surface-2); }
.tree-btn.is-active {
  background: var(--brand-tint); border-color: var(--brand-tint-line);
  font-weight: 650; box-shadow: inset 3px 0 0 var(--brand);
}
.tree-type {
  font-size: var(--fs-xs); letter-spacing: .06em; font-weight: 800;
  color: var(--brand-ink); background: var(--brand-tint); border: 1px solid var(--brand-tint-line);
  padding: 1px 5px; border-radius: 3px; flex: none;
}
.tree-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-you { flex: none; }
.tree-nums {
  flex: none; margin-left: auto;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.tree-count { font-size: var(--fs-xs); color: var(--ink-faint); white-space: nowrap; }
.tree-val {
  font-size: var(--fs-xs); font-weight: 750; color: var(--brand-ink); white-space: nowrap;
  background: var(--brand-tint); border: 1px solid var(--brand-tint-line);
  padding: 1px 7px; border-radius: 999px;
}
.tree-head {
  flex: none; white-space: nowrap;
  font-size: var(--fs-xs); color: var(--ink-faint);
  padding-left: 10px; border-left: 1px solid var(--line);
}
.tree-wrap { overflow-x: auto; }

/* unit rollup panel */
.roll-list { display: flex; flex-direction: column; gap: 2px; }
.roll-line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: var(--sp-2);
  padding: 7px 0; border-bottom: 1px dashed var(--line);
}
.roll-line:last-child { border-bottom: none; }
.roll-k { font-size: var(--fs-sm); color: var(--ink-soft); }
.roll-v { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.roll-h { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--ink-faint); }

/* the named officer a refusal routes to (API-CONTRACT v1.2 `escalation`) */
.escalate {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: var(--sp-2); padding: 9px 11px;
  border: 1px solid var(--brand-tint-line); border-left: 3px solid var(--brand);
  border-radius: var(--r-md); background: var(--brand-tint);
  font-size: var(--fs-sm); color: var(--ink); max-width: 420px;
}
.escalate > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.escalate-mark { flex: none; font-weight: 800; color: var(--brand-ink); }
.escalate-chain { font-size: var(--fs-xs); color: var(--ink-faint); word-break: break-word; }
.escalate-tail { display: block; margin-top: 4px; font-size: var(--fs-sm); color: var(--ink-soft); }

/* inline validation message under a form control */
.field-err { font-size: var(--fs-sm); font-weight: 600; color: var(--block); }
.field-err:empty { display: none; }
[aria-invalid="true"] { border-color: var(--block); }

/* ------------------------------------------------- figures & small prose */
/* Every display figure comes off the one type scale — nothing invents its own
   pixel size inline any more. */
.figure-lg {
  font-size: var(--fs-xl); font-weight: 720; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.figure-xl {
  font-size: calc(var(--fs-xl) * 1.3); font-weight: 760; line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.figure-den { font-size: var(--fs-md); font-weight: 600; color: var(--ink-faint); }
.prose-sm { font-size: var(--fs-sm); color: var(--ink-soft); }
.name-md { font-size: var(--fs-md); }
.chev { color: var(--ink-faint); font-size: var(--fs-lg); }

/* the org chain, inside the page header, as the header's quietest line */
.page-chain {
  display: block; margin-top: 2px;
  font-size: var(--fs-xs); color: var(--ink-faint);
  overflow-wrap: anywhere;
}

.link-strong { color: var(--brand-ink); font-weight: 650; text-decoration: none; }
.link-strong:hover { text-decoration: underline; }

.bill-pick { accent-color: var(--brand); }
.row-fail { background: var(--block-bg); }

/* ============================================================== sign-in */

.auth-page {
  min-height: 100vh;
  background: var(--ground);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px 56px;
}
.auth-inner {
  width: 100%; max-width: 1000px;
  display: grid; grid-template-columns: minmax(0, 1fr) 420px;
  gap: var(--sp-6); align-items: center;
}
.auth-hero { min-width: 0; }
.auth-hero .brand-lockup { margin-bottom: 26px; }
.auth-hero h1 {
  font-size: clamp(24px, 3.4vw, 34px); color: var(--brand-ink);
  letter-spacing: -.015em; margin-bottom: 10px;
}
.auth-hero p { color: var(--ink-soft); font-size: var(--fs-base); line-height: 1.6; max-width: 46ch; }
.auth-points { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.auth-points li { display: flex; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-soft); }
.auth-points .dot { color: var(--brand-ink); font-weight: 800; flex: none; }

.auth-card { padding: 24px 24px 22px; box-shadow: var(--shadow-2); }
.auth-card h2 { font-size: var(--fs-lg); color: var(--ink); }
.auth-card .field:last-of-type { margin-bottom: 10px; }
.auth-foot {
  margin-top: var(--sp-4); padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
/* the server's refusal, inline, next to the form — not only a toast */
.form-error {
  margin-bottom: var(--sp-4);
  display: flex; gap: 9px; align-items: flex-start;
  padding: 11px 12px; border-radius: var(--r-md);
  background: var(--block-bg); border: 1px solid var(--block-line);
  border-left: 4px solid var(--block);
  color: var(--block); font-size: var(--fs-sm);
}
.form-error:empty { display: none; }
.form-error strong { font-weight: 750; }

/* ================================================================= modal */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 140;
  background: var(--backdrop);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 28px 16px;
  overflow-y: auto;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  width: 100%; max-width: 720px;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 56px);
  min-width: 0;
}
.modal-head {
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; gap: var(--sp-3);
}
.modal-head .grow { flex: 1; min-width: 0; }
.modal-head h2 { font-size: var(--fs-lg); color: var(--brand-ink); }
.modal-x {
  flex: none; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); width: 34px; height: 34px; cursor: pointer;
  color: var(--ink-soft); font-size: var(--fs-base); line-height: 1;
}
.modal-x:hover { background: var(--brand-tint); border-color: var(--brand-mid); color: var(--brand-ink); }
.modal-tools { padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.modal-body { padding: 6px 18px 18px; overflow-y: auto; min-height: 0; }
.modal-foot {
  padding: 12px 18px; border-top: 1px solid var(--line);
  display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
  background: var(--surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* the demo log book */
.lb-group { margin-top: 16px; }
.lb-group-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding-bottom: 6px; margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.lb-group-head h3 {
  font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em;
  color: var(--brand-ink);
}
.lb-group-count { font-size: var(--fs-xs); color: var(--ink-faint); margin-left: auto; }
.lb-row {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px; margin-bottom: 8px; background: var(--surface);
}
.lb-row:hover { border-color: var(--brand-tint-line); background: var(--surface-2); }
.lb-top { display: flex; gap: var(--sp-2); align-items: flex-start; flex-wrap: wrap; }
.lb-id { flex: 1; min-width: 180px; }
.lb-name { font-weight: 700; font-size: var(--fs-base); }
.lb-where { font-size: var(--fs-sm); color: var(--ink-faint); margin-top: 2px; }
.lb-blurb {
  font-size: var(--fs-sm); color: var(--ink-soft); margin-top: var(--sp-2);
  padding-left: 10px; border-left: 3px solid var(--brand-tint-line);
}
.lb-creds { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: var(--sp-2); }
.lb-cred {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  background: var(--brand-tint); border: 1px solid var(--brand-tint-line);
  border-radius: var(--r-md); padding: 6px 6px 6px 10px;
}
.lb-cred-t {
  min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.25;
}
.lb-cred-k {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-ink);
}
.lb-cred-v {
  font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink);
  overflow-wrap: anywhere;
}
.copy-btn { flex: none; }
.lb-actions { margin-top: var(--sp-2); display: flex; gap: 8px; flex-wrap: wrap; }
.lb-empty { padding: 26px 10px; text-align: center; color: var(--ink-soft); font-size: var(--fs-sm); }

/* ================================================================ public */

.public-banner {
  background: var(--brand-tint); color: var(--brand-ink);
  border-bottom: 1px solid var(--brand-tint-line);
  padding: 9px 16px; font-size: var(--fs-sm); font-weight: 680;
  display: flex; align-items: center; gap: var(--sp-2); justify-content: center;
  text-align: center;
}
.public-head {
  background: linear-gradient(120deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: var(--on-brand); padding: 14px 18px;
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.public-head .brand-name { color: var(--on-brand); }
.public-head .brand-sub { color: var(--sidebar-fg-dim); }
.public-head .grow { flex: 1; }
.public-head a { color: var(--on-brand); font-size: var(--fs-sm); }
.public-body { padding: 20px 18px 60px; max-width: 1100px; margin: 0 auto; }
.photo-grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.photo-ref {
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  padding: 12px; background: var(--surface); text-align: center;
}
.photo-ref .ph-icon { font-size: var(--fs-xl); }
.photo-ref .ph-code { font-family: var(--mono); font-size: var(--fs-xs); word-break: break-all; color: var(--ink-soft); }

/* ================================================================== misc */

.breadcrumb { display: flex; gap: 6px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--ink-faint); margin-bottom: 8px; }
.breadcrumb a { color: var(--brand-ink); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.chain {
  font-size: var(--fs-sm); color: var(--ink-soft); font-family: var(--mono);
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 8px 10px; word-break: break-word;
}
.hoa { display: flex; gap: 4px; flex-wrap: wrap; font-family: var(--mono); font-size: var(--fs-sm); }
.hoa span {
  background: var(--surface-3); border: 1px solid var(--line-strong);
  padding: 2px 7px; border-radius: var(--r-sm);
}
.split-bar { display: flex; height: 22px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line-strong); }
.split-bar div { display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; color: var(--on-brand); font-variant-numeric: tabular-nums; }
.split-central { background: var(--brand-deep); }
.split-state { background: var(--brand-mid); }

.scope-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 4px; }
.scope-what { font-size: var(--fs-base); font-weight: 650; color: var(--ink); }
.scope-where {
  font-size: var(--fs-sm); font-weight: 650; color: var(--brand-ink);
  background: var(--brand-tint); border: 1px solid var(--brand-tint-line);
  padding: 2px 9px; border-radius: 999px;
}

.detail-grid { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }

.seg-card {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); overflow: hidden; background: var(--surface);
}
.seg-head {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: var(--surface-3); border: none; border-bottom: 1px solid var(--line);
  padding: 12px 14px; display: flex; gap: var(--sp-2); align-items: center; color: var(--ink);
}
.seg-head:hover { background: var(--brand-tint); }
.seg-head .grow { flex: 1; min-width: 0; }
.pkg-grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); padding: 12px; }
.pkg-card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px; background: var(--surface);
}
.pkg-card:hover { border-color: var(--brand-mid); background: var(--surface-2); }
.pkg-code { font-family: var(--mono); font-size: var(--fs-xs); color: var(--brand-ink); font-weight: 700; }

.work-card {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.work-card:last-child { border-bottom: none; }
.work-card:hover { background: var(--surface-2); }
.work-card .grow { flex: 1; min-width: 0; }
.work-title { display: block; font-weight: 650; font-size: var(--fs-base); }
.work-meta { display: block; font-size: var(--fs-sm); color: var(--ink-faint); margin-top: 3px; }
.work-amt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.queue-pos {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--brand); color: var(--on-brand); display: grid; place-items: center;
  font-weight: 750; font-size: var(--fs-base); font-variant-numeric: tabular-nums;
}
.queue-pos.paid { background: var(--ok); color: #fff; }
.queue-pos.hold { background: var(--review); color: #fff; }

.age-ok { color: var(--ok); font-weight: 700; }
.age-warn { color: var(--review); font-weight: 700; }
.age-bad { color: var(--block); font-weight: 750; }

.blocked-note {
  font-size: var(--fs-sm); color: var(--block); display: flex; gap: 5px; align-items: flex-start;
  margin-top: 6px; max-width: 320px;
}

.money { font-variant-numeric: tabular-nums; font-weight: 650; }
.tt { position: relative; display: inline-flex; }

/* a contractor's bid-eligibility verdict, stated on the tender row itself */
.verdict-line { display: block; margin-top: 6px; font-size: var(--fs-sm); font-weight: 600; }
.verdict.ok { color: var(--ok); }
.verdict.no { color: var(--block); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1100px) {
  /* give the label row the room it needs before anything has to collapse */
  .user-meta { display: none; }
  .appbar-in { gap: var(--sp-3); padding: 0 var(--sp-4); }
  .view { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
}

@media (max-width: 980px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .auth-inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); max-width: 520px; }
  .auth-page { align-items: flex-start; padding: var(--sp-5) var(--sp-4) var(--sp-6); }
}

/* Below ~900px the labels no longer fit on one line, so the nav collapses to
   a single "Menu" button that opens a full-width panel BELOW the bar. */
@media (max-width: 899px) {
  .nav-inline { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-panel.is-open { display: block; }
  /* Menu and the user chip stay grouped together at the right of the bar */
  .nav-toggle { margin-left: auto; }
  .appbar-end { margin-left: 0; }
}

/* The org chart is the one screen deep enough to overflow a phone. */
@media (max-width: 700px) {
  .tree ul { margin-left: var(--sp-2); padding-left: var(--sp-2); }
  .tree-btn { flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); }
  .tree-name { flex: 1 1 100%; white-space: normal; overflow-wrap: anywhere; }
  .tree-nums { margin-left: 0; }
  .tree-head { padding-left: 0; border-left: none; }
  .modal-backdrop { padding: var(--sp-3) var(--sp-2); }
  .modal { max-height: calc(100vh - 24px); }
}

/* Clamp the identity only where the bar genuinely runs out of room, so a full
   name reads in full on a desk monitor and degrades gracefully on a phone. */
@media (max-width: 1200px) {
  .user-name { max-width: 16ch; }
  .user-sub  { max-width: 20ch; }
}

@media (max-width: 460px) {
  /* the monogram alone carries the brand once the bar is this narrow */
  .appbar-in .mark-word { display: none; }
  .user-name, .user-sub { max-width: 10ch; }
}

@media (max-width: 420px) {
  h1 { font-size: var(--fs-lg); }
  .stat-value { font-size: var(--fs-lg); }
  .view { padding: var(--sp-3) var(--sp-3) var(--sp-5); }
  .card-body { padding: var(--sp-3); }
  .auth-card { padding: var(--sp-4) var(--sp-3); }
  .toast-region { left: var(--sp-2); right: var(--sp-2); max-width: none; }
  .bar-label { min-width: 92px; }
  .blocked-note, .escalate { max-width: none; }
  .lb-creds { grid-template-columns: minmax(0, 1fr); }
  .modal-head { padding: var(--sp-3); }
  .modal-tools, .modal-foot { padding: var(--sp-2) var(--sp-3); }
  .modal-body { padding: var(--sp-1) var(--sp-3) var(--sp-3); }
  .appbar-in { padding: 0 var(--sp-3); }
}


@media print {
  .appbar, .nav-panel, .toast-region, .modal-backdrop { display: none; }
  .view { min-height: 0; padding: 0; }
}

/* re-alerting an existing toast instead of stacking a duplicate */
@keyframes toast-bump { 0% { transform: none; } 35% { transform: translateX(-4px); } 70% { transform: translateX(3px); } 100% { transform: none; } }
.toast-bump { animation: toast-bump 320ms ease-out; }
@media (prefers-reduced-motion: reduce) { .toast-bump { animation: none; } }