/* ==========================================================================
   CVAx Design System — v0.3.0

   v0.3.0 replaced the colour scheme and made it swappable.
   The brief's section 18 recommendation — navy #0B2545 rail, brand #1D5FA8,
   blue-grey canvas — was implemented faithfully in v0.1 and v0.2 and read as
   cold and heavy. Three compounding faults: a very saturated near-black navy
   slab butted against white; a cool blue-grey canvas, so nothing anywhere was
   warm; and an accent too close to the rail in hue and value to separate from
   it, which is why the active navigation item never popped.

   Every colour is now a token, and the rail makes no assumption about being
   dark, so the whole theme swaps from one block. Four themes ship and the
   institution picks. Every foreground/background pair in all four is measured
   at AA or better for small text.

   Still enforced from docs/UX-DESIGN-LAW.md:
     L9  Semantic colour STRICTLY for state, never decoration.
     L9  Tuned for data density and for Portuguese. Nothing fixed-width.
     L10 Feedback always; decorative animation almost never.
   No build step: this file is the source and the served artefact.
   ========================================================================== */

/* ==========================================================================
   THEME-INVARIANT TOKENS — DR-002 condition 1
   --------------------------------------------------------------------------
   These are defined ONCE, here, and MUST NOT appear in any [data-theme]
   block. A theme may change the furniture; it may never change the meaning.
   A theme that altered the protection-state colour would be a
   customer-protection defect, not a cosmetic one.

   Enforced by tests/Unit/DesignTokensTest.php, which fails the suite if any
   theme block redefines a token listed below.
   ========================================================================== */
:root {
  /* state — the only colours that carry meaning */
  --teal: #0F7A6E; --teal-lift: #17A194; --teal-ink: #0B5E55;
  --amber: #C07010; --amber-ink: #8A4E06; --warn-soft: #F2DDBB;
  --crit: #B3261E; --crit-lift: #C2322A; --crit-ink: #8E1B15;

  --ok-bg:   #E6F4F1; --ok-line:   #A6D5CD;
  --warn-bg: #FCF3E5; --warn-line: #E9CFA3;
  --crit-bg: #FCEBE9; --crit-line: #EDBAB5;
  --info-bg: #EAF1FB; --info-line: #B9CFEA;
}

/* ==========================================================================
   THEME: claro (default) — all-light, white rail
   Also the fallback palette, so a document with no data-theme still renders.
   ========================================================================== */
:root,
[data-theme="claro"] {
  /* accent */
  --brand:      #1857C4;
  --brand-lift: #2A6BDA;
  --brand-hi:   #3376E2;
  --brand-lo:   #14479E;
  --brand-ink:  #14479E;
  --on-brand-dim: #DCE8FB;

  /* neutrals — warm-neutral rather than blue-grey. Most of the fix is here. */
  --canvas:      #F6F7F6;
  --canvas-deep: #EDEEEC;
  --surface:     #FFFFFF;
  --sunken:      #F3F4F2;
  --border:      #E3E4E1;
  --border-firm: #C8CAC6;
  --ink:         #191C1F;
  --ink-2:       #474C52;
  --ink-3:       #6A7077;

  /* navigation rail — no white-overlay assumptions, so a light rail works */
  --rail-1: #FFFFFF; --rail-2: #FDFDFD;
  --rail-ink: #191C1F; --rail-ink-dim: #6A7077;
  --rail-hover: #F3F4F2; --rail-line: #E3E4E1; --rail-chip: #EDEEEC;
  --rail-active-1: #EDF3FE; --rail-active-2: #E4EDFC;
  --rail-active-ink: #14479E; --rail-active-glow: rgba(24,87,196,.18);
  --rail-edge: inset -1px 0 0 #E3E4E1;
  --rail-logo-1: #2A6BDA; --rail-logo-2: #1857C4;

  /* sign-in splash and toasts */
  --auth-1: #1B2027; --auth-2: #12161B; --auth-glow: #2B3440;
  --auth-ink: #D6D9DD; --auth-ink-dim: #9BA2AA;
  --toast-1: #2A3038; --toast-2: #1B2027;

  --shadow-rgb: 25, 28, 31;
  --backdrop: rgba(25,28,31,.42);

  /* State tints are theme-invariant and live in the block above. */

  /* ---- type -------------------------------------------------------------- */
  --font: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: "Cascadia Mono", ui-monospace, Consolas, "Roboto Mono", monospace;

  --fs-11: 0.6875rem; --fs-12: 0.75rem;  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;  --fs-15: 0.9375rem; --fs-17: 1.0625rem;
  --fs-20: 1.25rem;   --fs-26: 1.625rem;  --fs-34: 2.125rem;

  --s1: 4px; --s2: 6px; --s3: 8px; --s4: 12px;
  --s5: 16px; --s6: 20px; --s7: 26px; --s8: 34px; --s9: 44px;

  --r-xs: 4px; --r-sm: 7px; --r: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px;

  --e1: 0 1px 2px rgba(var(--shadow-rgb),.05), 0 1px 3px rgba(var(--shadow-rgb),.04);
  --e2: 0 1px 2px rgba(var(--shadow-rgb),.05), 0 6px 16px -6px rgba(var(--shadow-rgb),.14);
  --e3: 0 2px 8px rgba(var(--shadow-rgb),.10), 0 24px 56px -16px rgba(var(--shadow-rgb),.28);
  --inset-hi: inset 0 1px 0 rgba(255,255,255,.14);

  --ease: cubic-bezier(.32,.72,0,1);
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 110ms; --dur: 190ms; --dur-slow: 300ms;

  --nav-w: 258px;
}

/* --------------------------------------------------------------------------
   THEME: grafite — a neutral charcoal rail. Keeps a dark rail for hierarchy
   but drops the saturated navy that read as heavy.
   -------------------------------------------------------------------------- */
[data-theme="grafite"] {
  --brand: #2461CE; --brand-lift: #3376E2; --brand-hi: #3F81EA;
  --brand-lo: #1B4FAC; --brand-ink: #1B4FAC;
  --rail-1: #262A2F; --rail-2: #1D2125;
  --rail-ink: #E6E8EA; --rail-ink-dim: #A2A9B0;
  --rail-hover: #32373D; --rail-line: #383D43; --rail-chip: #32373D;
  --rail-active-1: #2F6FE0; --rail-active-2: #2461CE;
  --rail-active-ink: #FFFFFF; --rail-active-glow: rgba(36,97,206,.55);
  --rail-edge: inset -1px 0 0 rgba(255,255,255,.07);
  --rail-logo-1: #3376E2; --rail-logo-2: #2461CE;
  --auth-1: #262A2F; --auth-2: #16191C; --auth-glow: #343A41;
  --auth-ink: #DDE0E3; --auth-ink-dim: #A2A9B0;
}

/* --------------------------------------------------------------------------
   THEME: marinho — the brief's navy direction, corrected. Navy desaturated
   and lifted, canvas warmed, accent brightened enough to actually separate.
   -------------------------------------------------------------------------- */
[data-theme="marinho"] {
  --brand: #1F60B0; --brand-lift: #2C74C9; --brand-hi: #3782D8;
  --brand-lo: #174C8D; --brand-ink: #174C8D;
  --canvas: #F7F7F5; --canvas-deep: #EEEEEA; --sunken: #F4F4F1;
  --border: #E2E3DE; --border-firm: #C7C9C2;
  --ink: #17202B; --ink-2: #45525F; --ink-3: #68737F;
  --rail-1: #16324F; --rail-2: #102539;
  --rail-ink: #D6E2EE; --rail-ink-dim: #9FB3C7;
  --rail-hover: #21405F; --rail-line: #294A6B; --rail-chip: #21405F;
  --rail-active-1: #2C74C9; --rail-active-2: #1F60B0;
  --rail-active-ink: #FFFFFF; --rail-active-glow: rgba(31,96,176,.55);
  --rail-edge: inset -1px 0 0 rgba(255,255,255,.08);
  --rail-logo-1: #2C74C9; --rail-logo-2: #1F60B0;
  --auth-1: #16324F; --auth-2: #0C1D2E; --auth-glow: #1E4570;
  --auth-ink: #D6E2EE; --auth-ink-dim: #9FB3C7;
  --shadow-rgb: 23, 32, 43;
}

/* --------------------------------------------------------------------------
   THEME: areia — a warm dark rail. Removes the coldness completely while
   keeping a dark rail for hierarchy and blue for action.
   -------------------------------------------------------------------------- */
[data-theme="areia"] {
  --canvas: #F8F7F4; --canvas-deep: #EFEDE8; --sunken: #F5F4F0;
  --border: #E5E2DB; --border-firm: #CAC6BC;
  --ink: #211F1B; --ink-2: #4C4840; --ink-3: #6E6A62;
  --rail-1: #3A362F; --rail-2: #2B2823;
  --rail-ink: #EAE6DE; --rail-ink-dim: #ADA69A;
  --rail-hover: #494339; --rail-line: #4C463C; --rail-chip: #494339;
  --rail-active-1: #1F63D2; --rail-active-2: #1857C4;
  --rail-active-ink: #FFFFFF; --rail-active-glow: rgba(24,87,196,.5);
  --rail-edge: inset -1px 0 0 rgba(255,255,255,.08);
  --rail-logo-1: #2A6BDA; --rail-logo-2: #1857C4;
  --auth-1: #3A362F; --auth-2: #24211C; --auth-glow: #4A4439;
  --auth-ink: #EAE6DE; --auth-ink-dim: #ADA69A;
  --shadow-rgb: 33, 31, 27;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-14);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: color-mix(in srgb, var(--brand) 20%, transparent); }

.num, td.num, .tabular { font-variant-numeric: tabular-nums; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--fs-26); letter-spacing: -0.022em; line-height: 1.2; }
h2 { font-size: var(--fs-17); letter-spacing: -0.012em; }
h3 { font-size: var(--fs-14); letter-spacing: -0.006em; }
p  { margin: 0; }
a  { color: var(--brand-ink); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

.skiplink {
  position: fixed; top: var(--s3); left: var(--s3); z-index: 200;
  transform: translateY(-200%);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-firm); border-radius: var(--r-sm);
  padding: var(--s3) var(--s5); box-shadow: var(--e3);
  font-size: var(--fs-13); font-weight: 600;
  transition: transform var(--dur) var(--ease);
}
.skiplink:focus { transform: translateY(0); text-decoration: none; }

.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-11);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3);
}

/* ==========================================================================
   App shell
   ========================================================================== */
.shell { display: grid; grid-template-columns: var(--nav-w) 1fr; min-height: 100%; }

.sidebar {
  background: linear-gradient(177deg, var(--rail-1) 0%, var(--rail-2) 100%);
  color: var(--rail-ink);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  box-shadow: var(--rail-edge);
  scrollbar-width: thin; scrollbar-color: var(--rail-ink-dim) transparent;
}
.brandmark { display: flex; align-items: center; gap: var(--s4); padding: var(--s6) var(--s6) var(--s5); }
.brandmark .logo {
  width: 32px; height: 32px; border-radius: var(--r-sm); flex: none;
  background: linear-gradient(180deg, var(--rail-logo-1), var(--rail-logo-2));
  color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: var(--fs-13); letter-spacing: -0.03em;
  box-shadow: 0 2px 8px -2px var(--rail-active-glow), var(--inset-hi);
}
.brandmark .wordmark { color: var(--rail-ink); font-weight: 600; font-size: var(--fs-17); letter-spacing: -0.02em; display: block; }
.brandmark .inst { display: block; font-size: var(--fs-11); color: var(--rail-ink-dim); font-weight: 400; letter-spacing: 0; }

.navsearch { padding: 0 var(--s5) var(--s5); }
.navsearch button {
  width: 100%; display: flex; align-items: center; gap: var(--s3);
  background: var(--rail-hover); border: 1px solid var(--rail-line);
  color: var(--rail-ink-dim); border-radius: var(--r);
  padding: var(--s3) var(--s4); font: inherit; font-size: var(--fs-13);
  cursor: pointer; text-align: left;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.navsearch button:hover { background: var(--rail-chip); color: var(--rail-ink); }
.navsearch button:active { transform: scale(.985); }
.navsearch .kbd-hint { margin-left: auto; }

nav.groups { padding: 0 var(--s4) var(--s7); }
.navgroup { border: 0; margin: 0 0 var(--s1); }
.navgroup > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--rail-ink-dim);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.navgroup > summary::-webkit-details-marker { display: none; }
.navgroup > summary:hover { color: var(--rail-ink); background: var(--rail-hover); }
.navgroup > summary .caret { margin-left: auto; font-size: 8px; opacity: .75; transition: transform var(--dur) var(--ease); }
.navgroup[open] > summary .caret { transform: rotate(90deg); }
.navgroup ul { list-style: none; margin: var(--s1) 0 var(--s4); padding: 0 0 0 var(--s2); display: flex; flex-direction: column; gap: 2px; }
.navgroup a {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r-sm);
  color: var(--rail-ink); font-size: var(--fs-13); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.navgroup a:hover { background: var(--rail-hover); color: var(--rail-ink); text-decoration: none; transform: translateX(2px); }
.navgroup a[aria-current="page"] {
  background: linear-gradient(180deg, var(--rail-active-1), var(--rail-active-2));
  color: var(--rail-active-ink); font-weight: 600;
  box-shadow: 0 2px 10px -3px var(--rail-active-glow);
}
.navgroup a .count {
  margin-left: auto; font-size: var(--fs-11); color: var(--rail-ink-dim);
  font-variant-numeric: tabular-nums; font-family: var(--font-mono);
  background: var(--rail-chip); border-radius: var(--r-pill); padding: 1px 7px;
}
.navgroup a[aria-current="page"] .count { color: var(--rail-active-ink); background: rgba(255,255,255,.22); }

.sidefoot { margin-top: auto; padding: var(--s5) var(--s6); border-top: 1px solid var(--rail-line); }

.main { display: flex; flex-direction: column; min-width: 0; background: var(--canvas); }
.topbar {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s7);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
}
.topbar .crumbs { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-13); color: var(--ink-3); min-width: 0; }
.topbar .crumbs b { color: var(--ink); font-weight: 600; }
.topbar .spacer { margin-left: auto; }
.content { padding: var(--s7); display: flex; flex-direction: column; gap: var(--s7); max-width: 1440px; }
.page-head { display: flex; align-items: flex-start; gap: var(--s6); flex-wrap: wrap; }
.page-head .lede { color: var(--ink-2); max-width: 70ch; font-size: var(--fs-15); }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .content { padding: var(--s5); gap: var(--s6); }
  .topbar { padding: var(--s4) var(--s5); }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font: inherit; font-size: var(--fs-13); font-weight: 500;
  padding: var(--s3) var(--s5); min-height: 36px;
  border-radius: var(--r-sm); border: 1px solid var(--border-firm);
  background: var(--surface); color: var(--ink); cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--e1);
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--sunken); box-shadow: var(--e2); }
.btn:active { transform: scale(.975); box-shadow: var(--e1); }
.btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

.btn-primary {
  background: linear-gradient(180deg, var(--brand-lift), var(--brand));
  border-color: var(--brand-lo); color: #fff;
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb),.10), 0 6px 16px -8px var(--rail-active-glow), var(--inset-hi);
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--brand-hi), var(--brand));
  box-shadow: 0 2px 4px rgba(var(--shadow-rgb),.12), 0 10px 22px -8px var(--rail-active-glow), var(--inset-hi);
}
.btn-quiet { border-color: transparent; background: transparent; color: var(--ink-2); box-shadow: none; }
.btn-quiet:hover { background: var(--canvas-deep); color: var(--ink); box-shadow: none; }
.btn-danger {
  background: linear-gradient(180deg, var(--crit-lift), var(--crit)); border-color: var(--crit-ink); color: #fff;
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb),.10), 0 6px 16px -8px rgba(179,38,30,.45), var(--inset-hi);
}
.btn-sm { min-height: 28px; padding: 3px var(--s4); font-size: var(--fs-12); border-radius: var(--r-xs); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

.kbd {
  font-family: var(--font-mono); font-size: var(--fs-11);
  border: 1px solid var(--border-firm); border-bottom-width: 2px;
  background: linear-gradient(180deg, var(--surface), var(--sunken)); color: var(--ink-2);
  border-radius: var(--r-xs); padding: 1px 6px; white-space: nowrap;
}
.kbd-hint { font-family: var(--font-mono); font-size: var(--fs-11); color: inherit; opacity: .85; }

/* ==========================================================================
   Cards and widgets
   ========================================================================== */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--e1); }
.card-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s5) var(--s6); border-bottom: 1px solid var(--border); }
.card-head h3 { flex: 1; min-width: 0; }
.card-body { padding: var(--s6); }
.card-body.tight { padding: var(--s5); }

.widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: var(--s5); }
.widget {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s2);
  box-shadow: var(--e1);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.widget:hover { box-shadow: var(--e2); transform: translateY(-1px); }
.widget .wlabel { font-size: var(--fs-12); color: var(--ink-3); }
.widget .wvalue { font-size: var(--fs-26); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.024em; }
.widget .wfoot { font-size: var(--fs-12); color: var(--ink-3); display: flex; align-items: center; gap: var(--s2); margin-top: auto; }
.widget a.wdrill { font-size: var(--fs-12); }

/* ==========================================================================
   Chips, badges, status
   ========================================================================== */
.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-12); border-radius: var(--r-pill);
  padding: 3px var(--s4); border: 1px solid var(--border);
  background: var(--sunken); color: var(--ink-2); white-space: nowrap;
}
.chip-ok   { background: var(--ok-bg);   border-color: var(--ok-line);   color: var(--teal-ink); }
.chip-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--amber-ink); }
.chip-crit { background: var(--crit-bg); border-color: var(--crit-line); color: var(--crit-ink); }
.chip-info { background: var(--info-bg); border-color: var(--info-line); color: var(--brand-ink); }
.chip .glyph { font-size: 10px; line-height: 1; }
.chip-selectable { cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.chip-selectable:hover { border-color: var(--border-firm); }
.chip-selectable:active { transform: scale(.96); }
.chip-selectable[aria-pressed="true"] { background: linear-gradient(180deg, var(--brand-lift), var(--brand)); border-color: var(--brand-lo); color: #fff; }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.dot-ok { background: var(--teal); } .dot-warn { background: var(--amber); }
.dot-crit { background: var(--crit); } .dot-idle { background: var(--ink-3); }

.sla {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font-mono); font-size: var(--fs-12);
  padding: 3px var(--s4); border-radius: var(--r-pill); border: 1px solid;
  font-variant-numeric: tabular-nums;
}
.sla-ok     { background: var(--ok-bg);   border-color: var(--ok-line);   color: var(--teal-ink); }
.sla-soon   { background: var(--warn-bg); border-color: var(--warn-line); color: var(--amber-ink); }
.sla-breach { background: var(--crit-bg); border-color: var(--crit-line); color: var(--crit-ink); font-weight: 600; }

.syncpill {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-size: var(--fs-12); padding: var(--s3) var(--s5);
  border-radius: var(--r-pill); border: 1px solid var(--border-firm);
  background: var(--surface); box-shadow: var(--e1);
}
.syncpill.busy { background: var(--info-bg); border-color: var(--info-line); color: var(--brand-ink); }
.syncpill.done { background: var(--ok-bg); border-color: var(--ok-line); color: var(--teal-ink); }
.syncpill.stale { background: var(--warn-bg); border-color: var(--warn-line); color: var(--amber-ink); }
.syncpill .spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Customer State Banner (L4). Fails CLOSED.
   ========================================================================== */
.statebanner {
  display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap;
  padding: var(--s4) var(--s6); border-radius: var(--r);
  border: 1px solid var(--border); border-left: 4px solid var(--ink-3);
  background: var(--surface); font-size: var(--fs-13); box-shadow: var(--e1);
}
.statebanner .sb-seg { display: flex; align-items: center; gap: var(--s3); }
.statebanner .sb-key { font-size: var(--fs-11); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.07em; }
.statebanner .sb-val { font-weight: 600; }
.statebanner .sb-next { margin-left: auto; display: flex; align-items: center; gap: var(--s4); }
.statebanner--clear     { border-left-color: var(--teal); }
.statebanner--watch     { border-left-color: var(--amber); background: linear-gradient(90deg, var(--warn-bg), var(--surface) 70%); }
.statebanner--protected { border-left-color: var(--crit); background: linear-gradient(90deg, var(--crit-bg), var(--surface) 70%); }
.statebanner--unknown   { border-left-color: var(--crit); background: var(--crit-bg); border-color: var(--crit-line); }
.statebanner--unknown .sb-val { color: var(--crit-ink); }

/* ==========================================================================
   Reconciliation bar (L5)
   ========================================================================== */
.recon { display: flex; flex-direction: column; gap: var(--s3); }
.recon-figs { display: flex; gap: var(--s8); flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.recon-figs div { display: flex; flex-direction: column; gap: 2px; }
.recon-figs .rk { font-size: var(--fs-11); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.07em; }
.recon-figs .rv { font-size: var(--fs-20); font-weight: 600; letter-spacing: -0.018em; }
.recon-figs .rv.gap-short { color: var(--amber-ink); }
.recon-figs .rv.gap-none { color: var(--teal-ink); }
.recon-track { height: 10px; border-radius: var(--r-pill); background: var(--canvas-deep); overflow: hidden; display: flex; box-shadow: inset 0 1px 2px rgba(var(--shadow-rgb),.08); }
.recon-track .met { background: linear-gradient(180deg, var(--teal-lift), var(--teal)); transition: width var(--dur-slow) var(--ease); }
.recon-track .short { background: repeating-linear-gradient(135deg, var(--warn-line) 0 6px, var(--warn-soft) 6px 12px); }
.recon-note { font-size: var(--fs-12); color: var(--ink-2); }

/* ==========================================================================
   Data table
   ========================================================================== */
.tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); box-shadow: var(--e1); }
table.data { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-13); }
table.data thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--sunken); color: var(--ink-2);
  font-size: var(--fs-11); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  text-align: left; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.data thead th.sortable { cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
table.data thead th.sortable:hover { background: var(--canvas-deep); color: var(--ink); }
table.data thead th[aria-sort] { color: var(--ink); }
table.data thead th .sortmark { font-size: 9px; margin-left: var(--s1); }
table.data tbody td { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); vertical-align: top; }
table.data tbody tr { transition: background var(--dur-fast) var(--ease-out); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--info-bg); }
table.data tbody tr[aria-selected="true"] { background: var(--info-bg); box-shadow: inset 3px 0 0 var(--brand); }
table.data td.right, table.data th.right { text-align: right; }
.cell-strong { font-weight: 600; }
.cell-mute { color: var(--ink-3); }

/* ==========================================================================
   Work inbox row
   ========================================================================== */
.queue { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); overflow: hidden; box-shadow: var(--e1); }
.qrow {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s5);
  padding: var(--s5) var(--s6); border-bottom: 1px solid var(--border);
  cursor: pointer; background: none; border-left: 3px solid transparent;
  text-align: left; font: inherit; color: inherit; width: 100%;
  transition: background var(--dur-fast) var(--ease-out), border-left-color var(--dur-fast) var(--ease-out);
}
.qrow:last-child { border-bottom: 0; }
.qrow:hover { background: var(--sunken); }
.qrow[aria-current="true"] { background: var(--info-bg); border-left-color: var(--brand); }
.qrow .qrank { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-3); padding-top: 2px; font-variant-numeric: tabular-nums; }
.qrow .qbody { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qrow .qtitle { font-weight: 600; font-size: var(--fs-15); letter-spacing: -0.008em; }
.qrow .qmeta { display: flex; gap: var(--s5); flex-wrap: wrap; font-size: var(--fs-12); color: var(--ink-3); }
.qrow .qside { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2); }

/* ==========================================================================
   Fields and type-ahead picker
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.field > label { font-size: var(--fs-12); font-weight: 600; color: var(--ink-2); }
.field .hint { font-size: var(--fs-12); color: var(--ink-3); }
.field .err { font-size: var(--fs-12); color: var(--crit-ink); display: flex; align-items: center; gap: var(--s2); }
.input, .select, .textarea {
  font: inherit; font-size: var(--fs-13); color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-firm);
  border-radius: var(--r-sm); padding: var(--s3) var(--s4); min-height: 36px; width: 100%;
  box-shadow: inset 0 1px 2px rgba(var(--shadow-rgb),.04);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--brand); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}
.textarea { min-height: 76px; resize: vertical; }
.input::placeholder { color: var(--ink-3); }
.input[aria-invalid="true"] { border-color: var(--crit); background: var(--crit-bg); }

.picker { position: relative; }
.picker-list {
  position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 6px);
  background: var(--surface); border: 1px solid var(--border-firm); border-radius: var(--r);
  box-shadow: var(--e3); max-height: 280px; overflow-y: auto; padding: var(--s2);
  animation: pop var(--dur) var(--ease);
}
.picker-list[hidden] { display: none !important; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.99); } to { opacity: 1; transform: none; } }
.picker-opt {
  display: flex; align-items: baseline; gap: var(--s4); width: 100%;
  padding: var(--s3) var(--s4); border: 0; border-radius: var(--r-sm);
  background: none; font: inherit; font-size: var(--fs-13); text-align: left; cursor: pointer; color: var(--ink);
  transition: background var(--dur-fast) var(--ease-out);
}
.picker-opt:hover, .picker-opt[aria-selected="true"] { background: var(--info-bg); }
.picker-opt .code { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-3); }
.picker-opt .freq { margin-left: auto; font-size: var(--fs-11); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.picker-add { border-top: 1px solid var(--border); margin-top: var(--s2); padding-top: var(--s2); }

/* ==========================================================================
   Fast-capture surface (L1)
   ========================================================================== */
.fastcapture { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); box-shadow: var(--e2); overflow: hidden; }
.fastcapture .fc-head { display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s6); background: var(--sunken); border-bottom: 1px solid var(--border); }
.fastcapture .fc-head h3 { flex: 1; }
.fastcapture .fc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: var(--s5) var(--s6); padding: var(--s6); }
.fastcapture .fc-span { grid-column: 1 / -1; }
.fastcapture .fc-foot { display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s6); border-top: 1px solid var(--border); background: var(--sunken); flex-wrap: wrap; }
.fastcapture .fc-foot .hintrow { font-size: var(--fs-12); color: var(--ink-3); display: flex; gap: var(--s5); flex-wrap: wrap; }

/* ==========================================================================
   Wizard shell (L1)
   ========================================================================== */
.wizard { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); overflow: hidden; box-shadow: var(--e1); }
.wsteps { display: flex; border-bottom: 1px solid var(--border); background: var(--sunken); overflow-x: auto; }
.wstep { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s6); font-size: var(--fs-13); color: var(--ink-3); white-space: nowrap; border-right: 1px solid var(--border); }
.wstep .wnum { width: 22px; height: 22px; border-radius: 50%; background: var(--border); color: var(--ink-2); display: grid; place-items: center; font-size: var(--fs-11); font-weight: 700; flex: none; }
.wstep[aria-current="step"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--brand); }
.wstep[aria-current="step"] .wnum { background: linear-gradient(180deg, var(--brand-lift), var(--brand)); color: #fff; box-shadow: var(--inset-hi); }
.wstep[data-done="true"] .wnum { background: linear-gradient(180deg, var(--teal-lift), var(--teal)); color: #fff; }
.wbody { padding: var(--s7); display: flex; flex-direction: column; gap: var(--s6); }
.wfoot { display: flex; gap: var(--s3); padding: var(--s5) var(--s7); border-top: 1px solid var(--border); background: var(--sunken); }
.wfoot .spacer { margin-left: auto; }

/* ==========================================================================
   Callouts and blank states
   ========================================================================== */
.callout {
  display: flex; gap: var(--s5); padding: var(--s5) var(--s6);
  border-radius: var(--r); border: 1px solid var(--border); border-left-width: 4px;
  background: var(--surface); font-size: var(--fs-13); box-shadow: var(--e1);
}
.callout .co-body { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.callout strong { font-weight: 600; }
.callout-info { border-left-color: var(--brand); background: var(--info-bg); border-color: var(--info-line); }
.callout-ok   { border-left-color: var(--teal); background: var(--ok-bg); border-color: var(--ok-line); color: var(--teal-ink); }
.callout-warn { border-left-color: var(--amber); background: var(--warn-bg); border-color: var(--warn-line); color: var(--amber-ink); }
.callout-crit { border-left-color: var(--crit); background: var(--crit-bg); border-color: var(--crit-line); color: var(--crit-ink); }

.blankstate {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s5);
  padding: var(--s9) var(--s7); border: 1px dashed var(--border-firm);
  border-radius: var(--r-lg); background: var(--surface);
}
.blankstate h3 { font-size: var(--fs-17); }
.blankstate p { color: var(--ink-2); max-width: 60ch; }

/* ==========================================================================
   Toast
   ========================================================================== */
.toasts { position: fixed; z-index: 60; right: var(--s7); bottom: calc(var(--s7) + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: var(--s3); }
.toast {
  display: flex; align-items: center; gap: var(--s4);
  background: linear-gradient(180deg, var(--toast-1), var(--toast-2)); color: #fff;
  padding: var(--s4) var(--s6); border-radius: var(--r-pill);
  box-shadow: var(--e3), var(--inset-hi); font-size: var(--fs-13);
  animation: toastin var(--dur) var(--ease);
}
@keyframes toastin { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.toast .dot { box-shadow: 0 0 0 3px rgba(255,255,255,.16); }

/* ==========================================================================
   Dialogs
   ========================================================================== */
dialog.modal {
  border: 1px solid var(--border-firm); border-radius: var(--r-lg); padding: 0;
  max-width: 540px; width: calc(100% - 32px); box-shadow: var(--e3);
  background: var(--surface); color: var(--ink);
}
dialog.modal[open], dialog.palette[open] { animation: dlgin var(--dur) var(--ease); }
@keyframes dlgin { from { opacity: 0; transform: translateY(8px) scale(.975); } to { opacity: 1; transform: none; } }
dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(3px); }
dialog.modal .m-head { padding: var(--s6); border-bottom: 1px solid var(--border); }
dialog.modal .m-body { padding: var(--s6); display: flex; flex-direction: column; gap: var(--s5); }
dialog.modal .m-foot { padding: var(--s5) var(--s6); border-top: 1px solid var(--border); background: var(--sunken); display: flex; gap: var(--s3); }
dialog.modal .m-foot .spacer { margin-left: auto; }

dialog.palette {
  border: 1px solid var(--border-firm); padding: 0; width: min(660px, calc(100% - 32px));
  border-radius: var(--r-lg); box-shadow: var(--e3); background: var(--surface); color: var(--ink); margin-top: 11vh;
}
.pal-input { display: flex; align-items: center; gap: var(--s4); padding: var(--s5) var(--s6); border-bottom: 1px solid var(--border); }
.pal-input input { font: inherit; font-size: var(--fs-17); border: 0; outline: 0; width: 100%; background: transparent; color: var(--ink); letter-spacing: -0.01em; }
.pal-results { max-height: 46vh; overflow-y: auto; padding: var(--s3); }
.pal-sec { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); padding: var(--s4) var(--s3) var(--s2); }
.pal-item {
  display: flex; align-items: center; gap: var(--s4); width: 100%;
  padding: var(--s3) var(--s4); border: 0; border-radius: var(--r-sm);
  background: none; font: inherit; font-size: var(--fs-13); text-align: left; cursor: pointer; color: var(--ink);
  transition: background var(--dur-fast) var(--ease-out);
}
.pal-item[aria-selected="true"] { background: linear-gradient(180deg, var(--brand-lift), var(--brand)); color: #fff; box-shadow: var(--inset-hi); }
.pal-item[aria-selected="true"] .pal-kind { color: var(--on-brand-dim); }
.pal-item .pal-kind { margin-left: auto; font-size: var(--fs-11); color: var(--ink-3); }
.pal-foot { display: flex; gap: var(--s6); padding: var(--s4) var(--s6); border-top: 1px solid var(--border); background: var(--sunken); font-size: var(--fs-11); color: var(--ink-3); flex-wrap: wrap; }
.pal-empty { padding: var(--s7); color: var(--ink-2); font-size: var(--fs-13); }

/* ==========================================================================
   Sign-in
   ========================================================================== */
.authpage { min-height: 100%; display: grid; grid-template-columns: 1.05fr 1fr; }
.authpanel {
  background:
    radial-gradient(1000px 520px at 12% -10%, var(--auth-glow) 0%, transparent 62%),
    linear-gradient(170deg, var(--auth-1), var(--auth-2));
  color: var(--auth-ink); padding: var(--s9) var(--s8);
  display: flex; flex-direction: column; gap: var(--s7); justify-content: center;
}
.authpanel .brandmark .wordmark { color: #fff; }
.authpanel .brandmark .inst { color: var(--auth-ink-dim); }
.authpanel h2 { color: #fff; font-size: var(--fs-34); letter-spacing: -0.03em; line-height: 1.15; max-width: 24ch; }
.authpanel .props { display: flex; flex-direction: column; gap: var(--s5); margin: 0; padding: 0; list-style: none; max-width: 44ch; }
.authpanel .props li { display: flex; gap: var(--s4); font-size: var(--fs-14); line-height: 1.45; }
.authpanel .props .tick {
  color: #fff; flex: none; font-weight: 700; font-size: 11px;
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px;
  background: linear-gradient(180deg, var(--teal-lift), var(--teal)); box-shadow: var(--inset-hi);
}
.authpanel .eyebrow { color: var(--auth-ink-dim); }
.authform { display: grid; place-items: center; padding: var(--s9) var(--s7); background: var(--canvas); }
.authform .authbox { width: min(376px, 100%); display: flex; flex-direction: column; gap: var(--s6); }
.authform form { display: flex; flex-direction: column; gap: var(--s5); }
.authcard-head { display: flex; flex-direction: column; gap: var(--s2); }
@media (max-width: 860px) { .authpage { grid-template-columns: 1fr; } .authpanel { display: none; } }

/* ==========================================================================
   Theme picker (evaluation control, shown while the theme is being chosen)
   ========================================================================== */
.themepick { display: flex; align-items: center; gap: var(--s2); }
.themepick .sw {
  width: 26px; height: 26px; border-radius: var(--r-sm); cursor: pointer;
  border: 2px solid transparent; padding: 0; overflow: hidden;
  box-shadow: var(--e1); transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  display: grid; grid-template-rows: 1fr 1fr;
}
.themepick .sw:hover { transform: translateY(-1px) scale(1.06); }
.themepick .sw[aria-pressed="true"] { border-color: var(--brand); }
.themepick .sw span { display: block; }

/* ==========================================================================
   Styleguide scaffolding
   ========================================================================== */
.sg-sec { display: flex; flex-direction: column; gap: var(--s5); }
.sg-sec > header { display: flex; align-items: baseline; gap: var(--s5); flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: var(--s4); }
.sg-sec > header h2 { flex: none; }
.sg-sec > header .law { font-size: var(--fs-12); color: var(--ink-3); max-width: 78ch; }
.sg-demo { display: flex; flex-direction: column; gap: var(--s5); }
.sg-inline { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }
.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); gap: var(--s4); }
.swatch { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--surface); box-shadow: var(--e1); }
.swatch .sw-chip { height: 52px; }
.swatch .sw-meta { padding: var(--s3) var(--s4); display: flex; flex-direction: column; }
.swatch .sw-name { font-size: var(--fs-12); font-weight: 600; }
.swatch .sw-hex { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-3); }
.typescale { display: flex; flex-direction: column; gap: var(--s4); }
.typescale div { display: flex; align-items: baseline; gap: var(--s6); }
.typescale .tsl { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-3); width: 56px; flex: none; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s6); }

/* Portuguese pressure test */
.long-test .btn, .long-test .chip, .long-test .navgroup a { outline: 1px dashed var(--amber); outline-offset: 2px; }