/* The local stylesheet of the ACME City demonstration interface.
   Visual system ported from the approved mockup, in the app's own stack:
   system font stack only, no external font, script or image.

   Tokens: mockup colours as --bg/--surface/... plus aliases for the
   legacy names (--ink, --paper, --panel, --line, --current, --submitted,
   --proposed, --issued, --denied, --accepted, --radius) so every existing
   class keeps working. Colour is never the only signal: every pill and
   badge carries text. Light is the default on every page: the setting of
   the device is never followed. The dark theme applies only under
   [data-theme="dark"], which the staff frame sets when the reader asks for
   it. */

:root {
  color-scheme: light;
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #eef2f5;
  --line: #dde3e9;
  --line-soft: #e9edf1;
  --fg: #142230;
  --fg-2: #4a5b6b;
  --fg-3: #7a8896;
  --accent: #1f5f8b;
  --accent-fg: #ffffff;
  --accent-soft: #e3eef6;
  --ok: #1d7a4c;  --ok-soft: #e1f3e9;
  --warn: #a5650b; --warn-soft: #fbf0dc;
  --bad: #b3372f;  --bad-soft: #fbe6e3;
  --info: #5b4fbf; --info-soft: #ecebfb;
  --muse: #7a3fb8; --muse-soft: #f1e8fb;
  --shadow: 0 1px 2px rgba(20,34,48,.06), 0 4px 14px rgba(20,34,48,.05);
  --f-display: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-body: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  /* The sticky bars of the frame.  The sidebar stands in its own column and
     the top bar over the content, so neither covers the other; both sit at
     the top of the viewport, at one named offset.  A bar that must stack
     under the top bar takes --top-bar-h instead. */
  --sticky-top: 0px;
  --top-bar-h: 61px;
  /* legacy aliases */
  --ink: var(--fg);
  --ink-soft: var(--fg-2);
  --paper: var(--bg);
  --panel: var(--surface);
  --current: var(--accent);
  --submitted: var(--warn);
  --proposed: var(--muse);
  --issued: var(--ok);
  --denied: var(--bad);
  --accepted: var(--ok);
  --radius: var(--r-md);
  /* Stacking scale, lowest first. One list for the whole interface: a
     layer paints above every layer listed before it. The open persona
     menu is last, so on a phone or a tablet it stays above a toast, the
     help chat sheet, a detail drawer and the guided tour.
       2  --z-sticky-bar     an in-page sticky bar
      20  --z-header         the sticky top bar, while the menu is closed
      25  --z-mobile-nav     the bottom bar
      26  --z-nav-more       the More tools panel
      40  --z-toast          a toast
      45  --z-city-toast     a City toast
      50  --z-scrim          a modal scrim
      58  --z-help-launcher  the Ask launcher
      59  --z-help-sheet     the help chat sheet
      60  --z-drawer         a detail drawer, and the skip link
      65  --z-feedback-panel the panel of the last action
      70  --z-popover        an information popover
      80  --z-tour           the guided tour
      90  --z-persona-menu   the open persona menu
     The top bar is its own stacking context (it is sticky, and the blur
     holds the menu in). While the menu is open the bar takes
     --z-persona-menu, which is what lets the menu paint above the layers
     that live outside the bar. A focused skip link on the City website
     uses 100 and stays off the screen until it is focused. */
  --z-sticky-bar: 2;
  --z-header: 20;
  --z-mobile-nav: 25;
  --z-nav-more: 26;
  --z-toast: 40;
  --z-city-toast: 45;
  --z-scrim: 50;
  --z-help-launcher: 58;
  --z-help-sheet: 59;
  --z-drawer: 60;
  --z-feedback-panel: 65;
  --z-popover: 70;
  --z-tour: 80;
  --z-persona-menu: 90;
}
/* The setting of the device is never followed: the interface is light
   everywhere unless the reader asks for the dark mode of the staff frame. */
:root[data-theme="dark"] {
  --bg: #0d141b; --surface: #141d26; --surface-2: #1a2531; --line: #263342; --line-soft: #1f2b37;
  --fg: #e6edf3; --fg-2: #a7b4c1; --fg-3: #74828f;
  --accent: #5aa7dc; --accent-fg: #0b1620; --accent-soft: #16304a;
  --ok: #4cc488; --ok-soft: #10301f; --warn: #e3a44a; --warn-soft: #33250f;
  --bad: #f0786d; --bad-soft: #3a1714; --info: #a59cf5; --info-soft: #221f45;
  --muse: #c79af5; --muse-soft: #2c1a40;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Nothing of the page may push the document sideways on a phone. */
html, body { height: 100%; overflow-x: clip; }
body {
  background: var(--bg); color: var(--fg);
  font: 14px/1.5 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--f-display); margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.6rem; }
h2 { font-size: 1.02rem; font-weight: 600; margin: 0 0 0.5rem; }
h3 { font-size: .9rem; font-weight: 600; margin: 0.8rem 0 0.35rem; }
p { margin: 0.35rem 0; }
button { font: inherit; color: inherit; }
.mono { font-family: var(--f-mono); font-size: .86em; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--fg-2); font-size: 0.875rem; }
.faint { color: var(--fg-3); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--panel);
  padding: 0.5rem 0.8rem; border: 2px solid var(--accent); z-index: var(--z-drawer);
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ---------- Shell ---------- */
.public-demo-notice {
  margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--accent-soft); color: var(--fg); font-size: 0.92rem;
}
.shell { display: grid; grid-template-columns: 232px minmax(0,1fr); min-height: 100%; }
.side {
  position: sticky; top: var(--sticky-top); height: 100vh; background: var(--surface);
  border-right: 1px solid var(--line); display: flex; flex-direction: column;
  gap: 18px; padding: 18px 14px; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px; background: var(--accent);
  color: var(--accent-fg); display: grid; place-items: center;
  font: 700 .8rem var(--f-display); letter-spacing: .02em;
}
.brand-mark a { color: inherit; text-decoration: none; }
.brand b { display: block; font: 600 .95rem var(--f-display); }
.brand b a { color: var(--fg); text-decoration: none; }
.brand span { font-size: .72rem; color: var(--fg-3); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-label { font-size: .64rem; letter-spacing: normal; color: var(--fg-2); padding: 10px 8px 4px; }
.nav a, .nav .nav-disabled {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 8px; border-radius: 8px; color: var(--fg-2);
  text-align: left; font-weight: 500; text-decoration: none; font-size: .86rem;
}
.nav a svg, .nav .nav-disabled svg { width: 17px; height: 17px; flex: none; }
.nav a:hover { background: var(--surface-2); color: var(--fg); }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
/* A screen that cannot be opened yet: a fill of its own and ink that still
   reads, instead of a faded copy of a live link. */
.nav .nav-disabled { background: var(--surface-2); color: var(--fg-2); opacity: 1; cursor: not-allowed; }
.nav .count {
  margin-left: auto; font: 500 .7rem var(--f-mono); background: var(--surface-2);
  color: var(--fg-2); border-radius: 99px; padding: 0 7px; line-height: 18px;
}
.nav a[aria-current="page"] .count { background: var(--accent); color: var(--accent-fg); }
/* legacy nav classes kept for compatibility */
/* (only for a bare .app-nav; the sidebar .nav.app-nav keeps its own layout) */
.app-nav:not(.nav) { background: var(--panel); border-bottom: 1px solid var(--line); padding: 0.4rem 0.9rem; }
.app-nav:not(.nav) ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin: 0; padding: 0; }
.app-nav:not(.nav) a { display: inline-block; padding: 0.25rem 0.1rem; text-decoration: none; border-bottom: 2px solid transparent; }
.app-nav:not(.nav) a[aria-current="page"] { border-bottom-color: var(--accent); font-weight: 700; }
.app-header {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
  justify-content: space-between; padding: 0.7rem 0.9rem;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.app-title { font-weight: 700; margin: 0; }
.app-title a { text-decoration: none; color: var(--ink); }

.main { min-width: 0; display: flex; flex-direction: column; }
.top {
  position: sticky; top: var(--sticky-top); z-index: var(--z-header);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 22px;
}
/* The open menu has to leave the bar's stacking context, or a drawer, the
   chat sheet or the tour paints over it. The bar takes the menu's layer
   only while the menu is open. */
.top:has(.account-menu[open]) {
  z-index: var(--z-persona-menu);
  overflow: visible;
}
/* The breadcrumb of the staff frame is one line.  A long last crumb truncates
   with an ellipsis instead of wrapping, and the trail never pushes the page
   wider.  The trail itself is the shared one of ui-patterns.css; the frame
   writes its own separator. */
.crumbs { display: flex; gap: 6px; align-items: center; font-size: .82rem; color: var(--fg-3); flex: 1 1 0; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; --crumb-sep: "/"; }
.crumbs b { color: var(--fg); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; min-width: 0; }
.seg {
  display: inline-flex; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 99px; padding: 3px; gap: 2px; align-items: center;
}
.seg form { display: contents; }
.seg-btn {
  border: 0; background: transparent; border-radius: 99px; padding: 4px 11px;
  font-size: .78rem; font-weight: 500; color: var(--fg-2); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.seg-btn:hover { color: var(--fg); }
.seg-btn[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: var(--shadow); }
.seg .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--fg-2);
}
.icon-btn:hover { color: var(--fg); border-color: var(--fg-3); }
.icon-btn svg { width: 16px; height: 16px; }
.persona { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.persona-current { font-size: 0.86rem; margin: 0; }
.persona-form label { font-size: 0.82rem; }

.content, main {
  padding: 22px 22px 60px; display: flex; flex-direction: column; gap: 18px;
  max-width: 1320px; width: 100%; margin: 0 auto;
}
main { padding-top: 0.9rem; }
.page-head { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.page-head .sub { color: var(--fg-2); margin-top: 4px; max-width: 64ch; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Primitives ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.card-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0; flex-wrap: wrap; }
.card-h .right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.card-b { padding: 14px 16px 16px; }
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 14px 16px 16px; margin: 0 0 0.85rem;
  box-shadow: var(--shadow);
}
.panel-error { border-color: var(--denied); background: var(--bad-soft); }

.btn {
  display: inline-flex; align-items: center; gap: 7px; border-radius: 99px;
  padding: 7px 14px; font-size: .82rem; font-weight: 600; border: 1px solid var(--line);
  background: var(--surface); color: var(--fg); cursor: pointer;
  transition: transform .12s ease, background .12s, border-color .12s; white-space: nowrap;
  text-decoration: none;
}
.btn:hover { border-color: var(--fg-3); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--fg-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--fg); }
.btn.muse { background: var(--muse-soft); border-color: transparent; color: var(--muse); }
.btn.sm { padding: 4px 10px; font-size: .75rem; }
.btn[disabled] { opacity: 1; background: var(--surface-2); border-color: var(--line); color: var(--fg-2); cursor: not-allowed; transform: none; }
/* legacy .button maps onto the pill look */
.button {
  display: inline-flex; align-items: center; gap: 7px; font: inherit;
  padding: 7px 14px; border: 1px solid var(--accent); border-radius: 99px;
  background: var(--surface); color: var(--accent); cursor: pointer; text-decoration: none;
  font-size: .82rem; font-weight: 600;
}
.button:hover { background: var(--accent-soft); }
.button-primary { background: var(--accent); color: var(--accent-fg); }
.button-primary:hover { background: var(--accent); filter: brightness(1.07); }
.button-quiet { border-color: var(--line); color: var(--fg-2); }
/* A control that cannot be used now says so with a fill and an ink of its
   own, not with a faded copy of a live button.  The attribute stays, and the
   reason beside it stays. */
.button[disabled], .btn.primary[disabled], .btn.muse[disabled], .btn.ghost[disabled] {
  opacity: 1; background: var(--surface-2); border-color: var(--line);
  color: var(--fg-2); cursor: not-allowed; transform: none;
}

.pill {
  display: inline-flex; align-items: center; flex-shrink: 0; gap: 5px; height: 20px; padding: 0 8px;
  border-radius: 99px; font-size: .7rem; font-weight: 600; letter-spacing: .01em;
  line-height: 1; white-space: nowrap; overflow-wrap: normal; background: var(--surface-2); color: var(--fg-2);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.pill.plain::before { display: none; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.info { background: var(--accent-soft); color: var(--accent); }
.pill.muse { background: var(--muse-soft); color: var(--muse); }
.pill.live::before { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }

/* A badge is a status pill of the second kind.  It has the same box as a
   pill: one crisp line, one height, one size, on every screen. */
.badge {
  display: inline-flex; align-items: center; flex-shrink: 0; gap: 5px; height: 20px; padding: 0 8px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2);
  color: var(--fg-2); font-size: .7rem; font-weight: 600; line-height: 1;
  white-space: nowrap; overflow-wrap: normal;
}
.badge-current { background: var(--accent-soft); border-color: var(--current); color: var(--current); }
.badge-submitted { background: var(--warn-soft); border-color: var(--submitted); color: var(--submitted); }
.badge-proposed { background: var(--muse-soft); border-color: var(--proposed); color: var(--proposed); }
.badge-issued { background: var(--ok-soft); border-color: var(--issued); color: var(--issued); }
.badge-supporting { background: var(--ok-soft); border-color: var(--accepted); color: var(--accepted); }
.badge-conflicting, .badge-blocking, .badge-denied, .badge-rejected, .badge-synchronization_failed {
  background: var(--bad-soft); border-color: var(--denied); color: var(--denied);
}
.badge-approved, .badge-accepted, .badge-settled, .badge-published, .badge-source_acknowledged,
.badge-registry_committed, .badge-closed, .badge-pass, .badge-passed, .badge-succeeded {
  background: var(--ok-soft); border-color: var(--accepted); color: var(--accepted);
}
.badge-mode-live { background: var(--accent-soft); border-color: var(--current); color: var(--current); }
.badge-mode-replay { background: var(--warn-soft); border-color: var(--submitted); color: var(--submitted); }
.badge-mode-cached { background: var(--info-soft); border-color: var(--info); color: var(--info); }
.badge-live { background: var(--accent-soft); border-color: var(--current); color: var(--current); }
.badge-replay { background: var(--warn-soft); border-color: var(--submitted); color: var(--submitted); }
.badge-cached { background: var(--info-soft); border-color: var(--info); color: var(--info); }

/* A status pill is one crisp line.  The column that holds it is as wide as
   the pill needs, so the word never breaks; on a phone the table scrolls
   inside its own region instead of wrapping the pill. */
td:has(> .pill), td:has(> .badge), td:has(> .ops-badge) { min-width: max-content; white-space: nowrap; }

/* KPI strip */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.kpi { padding: 14px 16px; display: grid; gap: 4px; }
.kpi .k { font-size: .68rem; letter-spacing: normal; color: var(--fg-2); display: flex; align-items: center; gap: 6px; }
.kpi .v { font: 600 1.7rem/1.1 var(--f-display); font-variant-numeric: tabular-nums; }
.kpi .s { font-size: .76rem; color: var(--fg-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Table */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
th {
  text-align: left; font-size: .66rem; letter-spacing: normal;
  color: var(--fg-2); font-weight: 600; padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.tbl-wrap th { white-space: nowrap; }
td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tr.row { cursor: pointer; transition: background .12s; }
tr.row:hover td { background: var(--surface-2); }
tr:last-child td { border-bottom: 0; }
.ref { font: 500 .78rem var(--f-mono); color: var(--accent); }
.t1 { font-weight: 600; }
.t2 { font-size: .76rem; color: var(--fg-3); }
.mini-steps { display: inline-flex; gap: 3px; vertical-align: middle; }
.mini-steps i { width: 14px; height: 5px; border-radius: 3px; background: var(--line); }
.mini-steps i.d { background: var(--ok); }
.mini-steps i.c { background: var(--accent); }
.mini-steps i.b { background: var(--bad); }
.age { font: 500 .76rem var(--f-mono); padding: 1px 7px; border-radius: 6px; background: var(--surface-2); color: var(--fg-2); }
.age.old { background: var(--warn-soft); color: var(--warn); }
.age.over { background: var(--bad-soft); color: var(--bad); }
.age.at { background: var(--warn-soft); color: var(--warn); }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.search {
  flex: 1 1 220px; display: flex; align-items: center; gap: 8px; background: var(--surface-2);
  border: 1px solid transparent; border-radius: 99px; padding: 6px 12px; color: var(--fg-2); min-width: 0;
}
.search input { border: 0; background: transparent; outline: 0; color: var(--fg); font: inherit; width: 100%; min-width: 0; }
.search:focus-within { border-color: var(--accent); }
.chip {
  border: 1px solid var(--line); background: var(--surface); border-radius: 99px;
  padding: 4px 11px; font-size: .76rem; font-weight: 500; color: var(--fg-2); cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* Legacy data-table keeps its test-targeted class, styled as the mockup table */
.data-table { width: 100%; border-collapse: collapse; margin: 0.4rem 0 0.6rem; font-size: 0.875rem; }
.panel { overflow-x: auto; }
section.panel, .card { min-width: 0; }
main > *, .ws-main > * { min-width: 0; }
.data-table th, .data-table td {
  border: 0; border-bottom: 1px solid var(--line-soft); padding: 11px 12px;
  text-align: left; vertical-align: top; overflow-wrap: anywhere; text-transform: none; letter-spacing: normal;
}
.data-table thead th {
  background: transparent; font-size: .66rem; letter-spacing: normal;
  color: var(--fg-2); font-weight: 600; border-bottom: 1px solid var(--line);
}
.tbl-wrap .data-table thead th { white-space: nowrap; }
.data-table tbody th { font-size: 0.875rem; color: var(--fg); font-weight: 600; }

/* Case progress pipeline */
.pipe { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0; position: relative; }
.step { position: relative; padding: 0 10px 0 0; display: grid; gap: 6px; }
.step .bar { height: 6px; border-radius: 99px; background: var(--line); position: relative; }
.step.done .bar { background: var(--ok); }
.step.current .bar { background: linear-gradient(90deg, var(--accent) 55%, var(--line) 55%); }
.step.blocked .bar { background: var(--bad); }
.step .node { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.step .ic {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--fg-2); flex: none;
}
.step .ic svg { width: 14px; height: 14px; }
.step.done .ic { background: var(--ok-soft); color: var(--ok); }
.step.current .ic { background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.step.blocked .ic { background: var(--bad-soft); color: var(--bad); }
.step .lbl { font-weight: 600; font-size: .84rem; }
.step .val { font-size: .76rem; color: var(--fg-2); padding-left: 34px; }
.step .who { font-size: .7rem; color: var(--fg-3); padding-left: 34px; }

/* Workspace: one column. Decision actions sit on the Review tab. */
.ws { display: block; }
.ws-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* Facts */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px 18px; }
.fact .k { font-size: .66rem; letter-spacing: normal; color: var(--fg-2); }
.fact .v { font-weight: 500; margin-top: 2px; overflow-wrap: anywhere; }
.facts-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px 18px; }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding: 0 12px; overflow-x: auto; }
.tabs button, .tabs a, .tabs [role="tab"] {
  border: 0; background: transparent; padding: 11px 10px; font-size: .82rem; font-weight: 600;
  color: var(--fg-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; text-decoration: none;
}
.tabs button[aria-selected="true"], .tabs a[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.tabs .n { font: 500 .68rem var(--f-mono); background: var(--surface-2); border-radius: 99px; padding: 0 6px; color: var(--fg-2); }

/* Agent pipeline: columns of nodes, arrows are dependencies */
.pipe-cols { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.pipe-col { flex: 1 1 180px; min-width: 0; display: grid; gap: 8px; align-content: start; }
.pipe-node {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 11px; display: grid;
  gap: 4px; background: var(--surface);
}
.pipe-node .lbl { font-weight: 600; font-size: .82rem; }
.pipe-node .s { font-size: .74rem; color: var(--fg-2); }
.pipe-arrow { align-self: center; color: var(--fg-3); font-size: 1.1rem; }

/* Sidebar agent status */
.agent-status {
  margin: 0 12px 10px; padding: 8px 10px; border-radius: var(--r-md);
  background: var(--surface-2); color: var(--fg-2); font-size: .74rem; line-height: 1.35;
}

/* Muse run */
.run { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; align-items: stretch; }
.rnode {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 11px; display: grid;
  gap: 6px; background: var(--surface); position: relative;
  transition: border-color .25s, background .25s, opacity .25s;
}
.rnode .h { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: .8rem; }
.rnode .h .st { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--fg-2); }
.rnode .h .st svg { width: 11px; height: 11px; }
.rnode .d { font-size: .74rem; color: var(--fg-2); }
.rnode .m { font: 500 .7rem var(--f-mono); color: var(--fg-3); }
.rnode.ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.rnode.ok .st { background: var(--ok); color: var(--surface); }
.rnode.muse { border-color: color-mix(in srgb, var(--muse) 50%, var(--line)); background: color-mix(in srgb, var(--muse-soft) 55%, var(--surface)); }
.rnode.muse.ok .st { background: var(--muse); }
.rnode.pending { opacity: .45; }
.rnode.running { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.rnode.running .st { background: var(--accent-soft); color: var(--accent); }
.rnode.running .st svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.rnode:not(:last-child)::after { content: ""; position: absolute; right: -10px; top: 50%; width: 10px; height: 2px; background: var(--line); }

/* The step graph of an agent: a column of cards per dependency level. */
.agent-progress { margin: 0 0 0.6rem; }
.agent-progress-status { margin: 0 0 0.5rem; font-size: .82rem; color: var(--fg-2); }
.agent-dag { display: flex; align-items: stretch; gap: 8px; flex-wrap: nowrap; overflow-x: auto; }
.agent-dag-col { flex: 1 0 170px; min-width: 170px; display: grid; gap: 8px; align-content: start; }
.agent-dag-node .agent-dag-label { font-weight: 600; font-size: .8rem; }
.agent-dag-state { margin: 0; font-size: .66rem; font-weight: 700; letter-spacing: normal; }
.agent-dag-note { margin: 0; }
.agent-dag .rnode::after { display: none; }
.agent-dag-arrow { flex: 0 0 auto; align-self: center; color: var(--fg-3); font-size: 1.1rem; }
.agent-dag-legend { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--fg-3); }
.agent-dag-dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* The clear state is the one the run strip already has; the other states
   are named here, and every state names itself in words as well. */
.agent-dag-node.ok .agent-dag-state { color: var(--ok); }
.agent-dag-node.warn {
  border-color: color-mix(in srgb, var(--warn) 55%, var(--line));
  background: color-mix(in srgb, var(--warn-soft) 45%, var(--surface));
}
.agent-dag-node.warn .st { background: var(--warn); color: var(--surface); }
.agent-dag-node.warn .agent-dag-state { color: var(--warn); }
.agent-dag-node.block {
  border-color: color-mix(in srgb, var(--bad) 55%, var(--line));
  background: color-mix(in srgb, var(--bad-soft) 45%, var(--surface));
}
.agent-dag-node.block .st { background: var(--bad); color: var(--surface); }
.agent-dag-node.block .agent-dag-state { color: var(--bad); }
.agent-dag-node.idle { border-color: var(--line); background: var(--surface-2); }
.agent-dag-node.idle .st { background: var(--surface-2); color: var(--fg-2); }
.agent-dag-node.idle .agent-dag-state { color: var(--fg-3); }
.agent-dag-node.pending .agent-dag-state { color: var(--fg-3); }
.agent-dag-node.running .agent-dag-state { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  /* A reader who asked for less motion gets a dot, not a spinner. */
  .agent-dag-node.running .st svg { display: none; }
  .agent-dag-node.running .st::after {
    content: ""; display: block; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  }
}
.checks { display: flex; flex-wrap: wrap; gap: 4px; }
.run-meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .76rem; color: var(--fg-2);
  padding-top: 12px; margin-top: 12px; border-top: 1px dashed var(--line);
}
.run-meta b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Extracted fields */
.fields { display: grid; gap: 8px; }
.fld {
  display: grid; grid-template-columns: 180px minmax(0,1fr) auto; gap: 12px; align-items: center;
  padding: 9px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface);
}
.fld .k { font: 500 .76rem var(--f-mono); color: var(--fg-2); }
.fld .v { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.fld .cite { font: 500 .7rem var(--f-mono); color: var(--fg-3); }

/* Blocker / finding cards */
.issues { display: grid; gap: 10px; }
.issue {
  display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 12px; align-items: start;
  padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface);
}
.issue .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
.issue .ic svg { width: 16px; height: 16px; }
.issue.bad .ic { background: var(--bad-soft); color: var(--bad); }
.issue.warn .ic { background: var(--warn-soft); color: var(--warn); }
.issue.ok .ic { background: var(--ok-soft); color: var(--ok); }
.issue .t { font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.issue .d { color: var(--fg-2); font-size: .82rem; margin-top: 3px; }
.issue .fix { font-size: .78rem; margin-top: 6px; color: var(--fg); }
.issue .fix b {
  color: var(--fg-2); font-weight: 600;
  font-size: .64rem; letter-spacing: normal; margin-right: 6px;
}

/* Action rail */
.act { display: grid; gap: 8px; }
.act-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: var(--r-md); border: 1px solid var(--line-soft);
}
.act-row .t { font-weight: 600; font-size: .82rem; }
.act-row .d { font-size: .72rem; color: var(--fg-3); }
.act-row .go { margin-left: auto; }
.act-row.denied { background: var(--surface-2); }
.act-row.denied .t { color: var(--fg-2); }
.lock { font-size: 0.875rem; color: var(--fg-3); display: flex; gap: 5px; align-items: center; }
.lock svg { width: 12px; height: 12px; }
.writes { font: 500 .68rem var(--f-mono); color: var(--fg-3); }

/* Action "Next actions" rows */
.action {
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  padding: 0.4rem 0.6rem; margin: 0.4rem 0; background: var(--surface);
}
.action summary { cursor: pointer; font-weight: 600; }
.act-card { padding: 9px 10px; }
.act-summary {
  display: flex; align-items: center; gap: 10px; list-style: none;
}
.act-summary::-webkit-details-marker { display: none; }
.act-main { display: grid; gap: 1px; min-width: 0; }
.act-title { font-weight: 600; font-size: .82rem; }
.act-sub { font-size: .72rem; color: var(--fg-3); font-weight: 400; }
.act-open { margin-left: auto; flex: none; }
.action:not([open]) .act-open { }
details.action:not([open]) > .action-form,
details.action:not([open]) > .action-description,
details.action:not([open]) > .action-version { }
.act-summary:has(.act-denied) { flex-wrap: wrap; }
.act-denied { flex-basis: 100%; text-align: left; margin-top: 4px; }
.action[data-permitted="false"] { background: var(--surface-2); }
.action[data-permitted="true"] summary .act-open { }
.action-label { margin-right: 0.4rem; }
.action-destination, .action-description, .action-version, .action-denied {
  font-size: 0.85rem; color: var(--fg-2);
}
.action-form-card { border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 10px 12px; background: var(--surface); }
.checks-outcome { margin: 0.75rem 0; }
.checks-result-list {
  list-style: none; margin: 0.4rem 0 0.6rem; padding: 0;
  display: grid; gap: 0.35rem;
}
.checks-result-list li, .checks-last-run { overflow-wrap: anywhere; }
.checks-next {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.6rem 0;
}
.checks-last-run { margin: 0.2rem 0 0.8rem; }
.ws-section {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  margin: 0.6rem 0;
  background: var(--surface);
  min-width: 0;
}
.ws-section > summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  list-style: none;
  padding: 0.65rem 0.75rem;
  overflow-wrap: anywhere;
}
.ws-section > summary::-webkit-details-marker { display: none; }
.ws-section > summary::marker { content: ""; }
.ws-section > summary::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--fg-2);
  border-bottom: 2px solid var(--fg-2);
  transform: rotate(-45deg);
  flex: none;
}
.ws-section[open] > summary::before { transform: rotate(45deg); }
.ws-section > summary h2 {
  margin: 0;
  min-width: 0;
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}
.ws-section > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ws-section-body { padding: 0 0.75rem 0.75rem; overflow-wrap: anywhere; }
.page-head-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; width: 100%; }

/* Timeline */
.tl { display: grid; gap: 0; position: relative; }
.tl-i { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; padding-bottom: 14px; position: relative; }
.tl-i::before { content: ""; position: absolute; left: 10px; top: 20px; bottom: 0; width: 2px; background: var(--line-soft); }
.tl-i:last-child::before { display: none; }
.tl-dot {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--fg-2);
}
.tl-dot svg { width: 11px; height: 11px; }
.tl-dot.ok { background: var(--ok-soft); color: var(--ok); }
.tl-dot.muse { background: var(--muse-soft); color: var(--muse); }
.tl-dot.acc { background: var(--accent-soft); color: var(--accent); }
.tl-i .a { font-weight: 600; font-size: .82rem; }
.tl-i .m { font-size: .72rem; color: var(--fg-3); }

/* Value bands */
.band { border-left: 3px solid var(--line); padding: 2px 0 2px 10px; }
.band.submitted { border-color: var(--warn); }
.band.proposed { border-color: var(--muse); }
.band.current { border-color: var(--accent); }
.band.issued { border-color: var(--ok); }
.value-band { border-left: 5px solid var(--line); padding: 0.3rem 0.5rem; margin: 0.4rem 0; background: var(--surface-2); }
.value-current { border-left-color: var(--current); }
.value-submitted { border-left-color: var(--submitted); }
.value-proposed { border-left-color: var(--proposed); }
.value-issued { border-left-color: var(--issued); }

/* Applicant tracker */
.hero-track { padding: 22px; display: grid; gap: 18px; }
.track { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 6px; }
.tstep { display: grid; gap: 8px; text-align: left; }
.tstep .b { height: 8px; border-radius: 99px; background: var(--line); }
.tstep.done .b { background: var(--ok); }
.tstep.current .b { background: var(--accent); }
.tstep.blocked .b { background: var(--warn); }
.tstep .l { font-weight: 600; font-size: .82rem; }
.tstep .s { font-size: .72rem; color: var(--fg-3); }
.tstep.current .l { color: var(--accent); }
.next-box { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: var(--r-md); background: var(--accent-soft); }
.next-box .ic {
  width: 34px; height: 34px; border-radius: 10px; background: var(--accent);
  color: var(--accent-fg); display: grid; place-items: center; flex: none;
}
.next-box .ic svg { width: 17px; height: 17px; }

/* Steward evidence */
.ev { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ev-col h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ev-item {
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line-soft);
  margin-bottom: 6px; font-size: .82rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.ev-item.sup { box-shadow: inset 3px 0 0 var(--ok); }
.ev-item.con { box-shadow: inset 3px 0 0 var(--bad); }
.ev-item .src { margin-left: auto; font: 500 .68rem var(--f-mono); color: var(--fg-3); }
.score { display: flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--fg-2); flex-wrap: wrap; }
.meter { flex: 1; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; max-width: 220px; min-width: 80px; }
.meter i { display: block; height: 100%; background: var(--fg-3); border-radius: 99px; }
.proposal { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 0.6rem; background: var(--surface); }

/* Fee */
.fee { display: grid; gap: 6px; }
.fee-row { display: flex; justify-content: space-between; font-size: .84rem; font-variant-numeric: tabular-nums; gap: 12px; }
.fee-row.tot { border-top: 1px solid var(--line); padding-top: 8px; font-weight: 700; }
.alloc { height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; display: flex; }
.alloc i { background: var(--ok); display: block; height: 100%; }

.notice {
  display: flex; gap: 10px; align-items: center; font-size: 0.875rem; color: var(--fg-2);
  padding: 8px 12px; border-radius: 99px; background: var(--surface-2); width: fit-content; max-width: 100%;
}
.notice svg { width: 14px; height: 14px; flex: none; }
.toast {
  position: fixed; right: 18px; top: 64px; max-width: calc(100vw - 36px); background: var(--fg); color: var(--bg);
  padding: 10px 14px; border-radius: 12px; font-size: .82rem; font-weight: 500;
  box-shadow: var(--shadow); display: flex; gap: 8px; align-items: center; z-index: var(--z-toast);
  transform: translateY(-12px); opacity: 0; transition: .2s ease; pointer-events: none;
}
.toast.on { transform: none; opacity: 1; }

.grid2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; }
.mobile-nav { display: none; }
.item { display: flex; gap: 10px; align-items: center; min-width: 0; }
.type-ic { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; flex: none; }
.type-ic.line { display: grid; place-items: center; background: var(--surface-2); color: var(--fg-2); }
.type-ic.line svg { width: 16px; height: 16px; }
.scrim {
  position: fixed; inset: 0; z-index: var(--z-scrim);
  background: color-mix(in srgb, var(--fg) 38%, transparent);
  display: grid; place-items: center; padding: 16px;
}
.modal {
  width: min(560px, 100%); max-height: 100%; overflow: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
}
.modal-h { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
.modal-h .icon-btn { margin-left: auto; width: 30px; height: 30px; }
.modal-b { padding: 16px 18px; display: grid; gap: 14px; }
.modal-f { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px 16px; flex-wrap: wrap; }
.fieldset { display: grid; gap: 6px; }
.fieldset label { font-size: .78rem; font-weight: 600; }
.fieldset .hint { font-size: .72rem; color: var(--fg-3); }
.inp {
  width: 100%; border: 1px solid var(--line); background: var(--surface); color: var(--fg);
  border-radius: 10px; padding: 9px 12px; font: inherit;
}
.inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
textarea.inp { resize: vertical; min-height: 64px; }
.icongen {
  display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 14px; align-items: center;
  padding: 12px; border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--muse) 45%, var(--line));
  background: color-mix(in srgb, var(--muse-soft) 45%, var(--surface));
}
.icon-preview {
  width: 96px; height: 96px; border-radius: 18px; background: var(--surface);
  border: 1px solid var(--line); display: grid; place-items: center; color: var(--fg-2); overflow: hidden;
}
.icon-preview img { width: 100%; height: 100%; object-fit: cover; }
.icon-preview svg { width: 26px; height: 26px; }
.icon-preview.busy svg { animation: spin 1s linear infinite; color: var(--muse); }
.icongen .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.history-thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.history-thumbs img, .history-thumbs button img { width: 30px; height: 30px; border-radius: 8px; }
.history-thumbs [aria-pressed="true"] img { outline: 2px solid var(--muse); outline-offset: 1px; }
.history { display: flex; gap: 6px; }
.history img { width: 30px; height: 30px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; }
.history img[aria-pressed="true"] { border-color: var(--muse); }

/* The last action.  The box around it belongs to the notices of the policy
   screens; the sentence, the message and the detail list behind one
   disclosure are shared with the panel of the last action. */
.feedback {
  border: 1px solid var(--accepted); border-left-width: 6px; background: var(--ok-soft);
  border-radius: var(--radius); padding: 0.6rem 0.8rem; margin: 0.8rem 0.9rem 0;
}
.feedback-denied { border-color: var(--denied); background: var(--bad-soft); }
.feedback-title { font-size: 0.9rem; margin: 0 0 0.2rem; }
.feedback-message { font-weight: 600; }
/* The detail list of the last action sits behind one disclosure. */
.feedback-more { margin: 0.4rem 0 0; }
.feedback-more > summary { cursor: pointer; font-size: 0.82rem; color: var(--fg-2); }
.feedback-more > summary:hover { color: var(--fg); }
.feedback-detail, .responsibility-grid, .pair-list {
  display: grid; grid-template-columns: 1fr; gap: 0.2rem 0.8rem; margin: 0.35rem 0 0;
}
.feedback-detail dt, .responsibility-grid dt, .pair-list dt {
  font-size: 0.76rem; letter-spacing: normal; color: var(--fg-2);
}
.feedback-detail dd, .responsibility-grid dd, .pair-list dd { margin: 0 0 0.35rem; }
@media (min-width: 720px) {
  .responsibility-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .feedback-detail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.issue-list, .denied-list, .alias-list, .run-list, .persona-list {
  margin: 0.3rem 0; padding-left: 1.1rem; font-size: 0.88rem;
}
.run-list { list-style: none; padding-left: 0; }
.run-list li {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.35rem 0.5rem; margin-bottom: 0.35rem; background: var(--surface);
}
.run-response, .run-replay, .run-error, .run-model, .run-versions {
  margin-left: 0.35rem; font-size: 0.82rem; color: var(--fg-2);
}
.filters, .action-form { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 0.15rem; margin: 0.35rem 0; min-width: 12rem; flex: 1 1 12rem; }
.field label { font-size: 0.8rem; color: var(--fg-2); }
input, select, textarea {
  font: inherit; color: inherit; padding: 0.25rem 0.35rem;
  border: 1px solid var(--line); border-radius: 4px; background: var(--surface); max-width: 100%;
}
textarea { min-height: 3rem; font-family: var(--f-mono); font-size: 0.85rem; }

.app-footer { padding: 0.8rem 0.9rem 1.4rem; color: var(--fg-2); font-size: 0.8rem; max-width: 1200px; margin: 0 auto; }
.tab-panel[hidden] { display: none; }
.icon-card-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

@media (max-width: 520px) { .icongen { grid-template-columns: minmax(0,1fr); justify-items: start; } }
@media (max-width: 1100px) {
  .facts, .facts-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .run { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rnode::after { display: none; }
}
@media (max-width: 860px) {
  /* nav-more-boot.js and app.js use this same width for More tools. */
  .shell { grid-template-columns: minmax(0,1fr); }
  .side { display: none; }
  .mobile-nav {
    display: flex; position: fixed; inset: auto 0 0; z-index: var(--z-mobile-nav); background: var(--surface);
    border-top: 1px solid var(--line); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    overflow-x: auto; gap: 2px;
  }
  .mobile-nav a, .mobile-nav .nav-disabled {
    flex: 1 0 auto; display: grid; justify-items: center; gap: 2px; padding: 5px 8px;
    border-radius: 8px; font-size: .64rem; color: var(--fg-3); text-decoration: none;
  }
  .mobile-nav svg { width: 18px; height: 18px; }
  .mobile-nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
  .mobile-nav .nav-disabled { background: var(--surface-2); color: var(--fg-2); opacity: 1; cursor: not-allowed; }
  .content, main { padding-bottom: 96px; padding-left: 16px; padding-right: 16px; }
  .top { padding-left: 16px; padding-right: 16px; }
  .kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pipe, .track { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .grid2, .ev { grid-template-columns: minmax(0,1fr); }
  .fld { grid-template-columns: minmax(0,1fr); gap: 4px; }
  .seg-btn .lbl-long { display: none; }
}
@media (max-width: 520px) {
  .run { grid-template-columns: minmax(0,1fr); }
  .facts, .facts-grid { grid-template-columns: minmax(0,1fr); }
  .crumbs { display: none; }
  .top { flex-wrap: nowrap; overflow: visible; }
  .seg { flex: none; }
  .seg-btn .lbl-long { display: none; }
  .seg-btn { padding: 4px 7px; }
  body { font-size: 14px; }
  main { padding: 0.6rem; padding-bottom: 96px; }
  .data-table { font-size: 0.875rem; }
  .data-table th, .data-table td { padding: 0.25rem 0.3rem; }
  .field { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Property master: Property card, property record, town map ---- */
.prop-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .prop-grid { grid-template-columns: 1fr; } }
.prop-facts { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; }
.prop-facts dt { color: var(--ink-2, #55616d); font-size: .82rem; }
.prop-facts dd { margin: 0; }
.prop-map svg, .map-wrap svg { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2, #f6f8fa); }
.gis-parcel path { fill: var(--surface, #fff); stroke: var(--ink-2, #55616d); stroke-width: 1; }
.gis-parcel.is-subject path { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 3; }
.gis-parcel.is-candidate path { fill: var(--warn-soft); stroke: var(--warn); stroke-width: 2; stroke-dasharray: 5 3; }
.gis-parcel.is-picked path { stroke: var(--accent); stroke-width: 3; }
.gis-parcel:hover path { fill: var(--accent-soft); }
/* Building pictures: every lot draws its picture at the same inset under one
   outline, so the five zoning pictures sit together as one town. */
.gis-parcel .gis-building { pointer-events: none; }
.gis-parcel path.gis-lot { fill: none; }
.gis-parcel.is-subject path.gis-lot { fill: var(--accent-soft); fill-opacity: .35; }
.gis-parcel.is-candidate path.gis-lot { fill: var(--warn-soft); fill-opacity: .35; }
.gis-parcel:hover path.gis-lot { fill: var(--accent-soft); fill-opacity: .3; }
.gis-street path { fill: none; stroke: var(--line); stroke-width: 6; stroke-linecap: round; }
/* The town map and the parcel inset read as one aerial neighbourhood: lawn
   ground, a light sidewalk band and asphalt.  The colours stand for the
   pictures, so they stay the same in both themes. */
.gis-svg { --map-lawn: #425123; --map-sidewalk: #989787; --map-asphalt: #5f6468; --map-label: #f4f4f1; }
.gis-ground { fill: var(--map-lawn); }
.gis-street path.gis-sidewalk { stroke: var(--map-sidewalk); stroke-width: 20; stroke-linecap: butt; }
.gis-street path.gis-asphalt { stroke: var(--map-asphalt); stroke-width: 13; stroke-linecap: butt; }
.gis-street-name { font-size: 9px; font-weight: 600; letter-spacing: .02em; fill: var(--ink-2, #55616d); pointer-events: none; }
.gis-svg .gis-street-name { fill: var(--map-label); }
.gis-point.gis-address circle { fill: var(--accent); }
.gis-point.gis-submitted path { stroke: var(--bad); stroke-width: 2.5; fill: none; }
.gis-point.gis-candidate path { fill: var(--warn); stroke: var(--ink, #1b2630); stroke-width: 1; }
.gis-marker circle { fill: var(--surface, #fff); stroke: var(--ink, #1b2630); stroke-width: 1.5; }
.gis-marker.st-approved circle, .gis-marker.st-issued circle { fill: var(--ok-soft); stroke: var(--ok); }
.gis-marker.st-denied circle { fill: var(--bad-soft); stroke: var(--bad); }
.gis-marker.st-needs_information circle, .gis-marker.st-submitted circle { fill: var(--warn-soft); stroke: var(--warn); }
.gis-marker.st-ready_for_review circle, .gis-marker.st-under_review circle { fill: var(--accent-soft); stroke: var(--accent); }
.gis-marker text { fill: var(--ink, #1b2630); font-weight: 700; }
.gis-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; margin: 10px 0 0; font-size: .84rem; }
.gis-key { display: inline-block; min-width: 1.4em; text-align: center; border: 1.5px solid var(--ink, #1b2630); border-radius: 50%; font-weight: 700; font-size: .75rem; }
.gis-key-point { border: 0; }
.map-wrap { position: relative; }
.map-tools { display: flex; gap: 8px; margin-bottom: 8px; }
.map-card { margin-top: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.map-card[hidden], .map-tools[hidden] { display: none; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 14px; }
tr.is-current th, tr.is-subject th { background: var(--accent-soft); }

/* ---- Applicant portal ---- */
.type-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.type-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; text-decoration: none; color: inherit; }
.type-card:hover, .type-card:focus-visible { border-color: var(--accent); }
.type-card .type-ic { width: 40px; height: 40px; }
.portal-form fieldset.panel { border: 1px solid var(--line); border-radius: 10px; margin: 12px 0; }
.portal-form .field { display: grid; gap: 4px; max-width: 520px; }
/* The bar of the form sticks under the top bar of the frame, never under
   it: the two stack instead of covering one another. */
.completeness { padding: 12px 16px; margin: 12px 0; border-left: 5px solid var(--warn); position: sticky; top: var(--top-bar-h); z-index: var(--z-sticky-bar); background: var(--surface); }
.completeness.ok { border-left-color: var(--ok); }
.doc-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.doc-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; }
.doc-row.is-over { border-color: var(--accent); background: var(--accent-soft); }
.did-you-mean { min-height: 1.4em; }
.form-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }

/* Required markers and guarded-button explanations. */
.req-star { color: var(--danger, #b3261e); font-weight: 700; margin-left: 0.15em; }
.required-legend { margin: 0.25rem 0; }
.portal-form .field.needed > input, .portal-form .field.needed > select, .portal-form .field.needed > textarea { border-left: 3px solid var(--warn, #b26a00); }
.doc-row.needed .doc-label { border-left: 3px solid var(--warn, #b26a00); padding-left: 0.4rem; }
.needs-list { margin: 0.6rem 0; }
.needs-list ul { margin: 0.3rem 0 0 1.1rem; padding: 0; }
.guard-reason { margin: 0.3rem 0 0; font-size: 0.85rem; }
.optional-tag { color: var(--fg-2); font-weight: 400; margin-left: 0.25em; }
.error-summary { border: 3px solid var(--danger, #b3261e); padding: 0.75rem 1rem; margin: 0.75rem 0; border-radius: 6px; }
.error-summary h2 { margin: 0 0 0.3rem; font-size: 1.1rem; color: var(--danger, #b3261e); }
.error-summary ul { margin: 0.3rem 0 0 1.1rem; padding: 0; }
.field-error { color: var(--danger, #b3261e); font-weight: 600; font-size: 0.85rem; }
.needs-status { margin: 0.4rem 0; }

/* The account chip in the top bar is the demo persona switcher: it names the
   persona that acts and its menu offers the five personas.  The chip is one
   line: the dot and the role stand together, centred.  The name of the
   person (the applicant) or the department of the persona is not in the chip:
   it is the first line of the menu the chip opens, and the tooltip of the
   chip. */
.account-menu { position: relative; flex: none; }
.account-trigger {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  min-width: 40px; min-height: 40px; box-sizing: border-box;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface-2);
  font-size: .82rem; font-weight: 600; color: var(--fg);
}
.account-trigger::-webkit-details-marker { display: none; }
.account-trigger::after {
  content: ""; width: 0; height: 0; margin-left: 2px; opacity: .55;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor;
}
.account-trigger .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.account-panel {
  /* Fixed, and right-aligned to the screen, so the bar cannot clip it and a
     long menu cannot hang off the left edge. Top stays automatic: that is
     the static position under the chip, whether the bar (it blurs, so it
     holds fixed descendants) or the viewport is the containing block. The
     width is a share of the screen, never the width of the screen, so the
     page cannot scroll sideways on a phone. */
  position: fixed; right: 8px; left: auto; z-index: var(--z-persona-menu);
  box-sizing: border-box; width: min(14rem, calc(100% - 16px)); min-width: 0;
  max-width: calc(100% - 16px);
  max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px; box-shadow: var(--shadow);
}
/* The name of the person, or the department of the persona: the first line of
   the menu, above its items. */
.account-person { margin: 0 0 2px; font-size: .95rem; font-weight: 600; overflow-wrap: anywhere; }
.account-line { margin: 0 0 8px; font-size: .82rem; }
.account-switch-label { margin: 0 0 4px; font-size: .74rem; font-weight: 700; color: var(--fg-2); }
.account-personas { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.account-personas form { margin: 0; }
.account-persona {
  width: 100%; text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 1px; cursor: pointer;
  min-width: 40px; min-height: 40px; box-sizing: border-box;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2); color: var(--fg); font: inherit; font-size: .85rem; font-weight: 600;
}
.account-persona span { font-weight: 400; font-size: .74rem; color: var(--fg-2); }
.account-persona:hover { background: var(--accent-soft); }
.account-persona[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
.account-persona:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
/* The tour and the dark mode: the other entries of the menu of the chip. */
.account-extras { display: grid; gap: 4px; margin: 0 0 10px; }
.account-action {
  width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  cursor: pointer; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2); color: var(--fg); font: inherit; font-size: .85rem; font-weight: 600;
}
.account-action:hover { background: var(--accent-soft); }
.account-action:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.account-action-state { font-weight: 400; font-size: .74rem; color: var(--fg-2); }
@media (max-width: 760px) { .toast { top: 56px; } }

/* ---- What-if (policy 2): padding, callouts and narrow-screen fit ---- */
.policy-screen section.card, .policy-screen article.card { padding: 14px 16px; margin: 14px 0; }
.policy-screen select, .policy-screen input:not([type="hidden"]):not([type="checkbox"]) { max-width: 100%; box-sizing: border-box; }
.policy-screen .callout { border-left: 4px solid var(--warn); background: var(--warn-soft); padding: 8px 12px; border-radius: 6px; }
.policy-screen .inline-form { display: inline; }
.policy-screen details { margin: 8px 0; }
.policy-screen fieldset { border: 1px solid var(--line); border-radius: 6px; margin: 8px 0; min-width: 0; }
.policy-screen .lock { flex-direction: column; align-items: flex-start; font-size: 0.875rem; color: var(--fg-2); margin-top: 6px; }
.policy-screen .field { margin: 6px 0; }
.policy-screen .field label { display: block; font-weight: 600; }
.policy-screen .page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.policy-screen ul.policy-suggestions { list-style: none; padding: 0; }
.policy-screen ul.policy-suggestions li { margin: 8px 0; }
.policy-screen .mono { overflow-wrap: anywhere; }
.policy-screen .btn, .policy-screen .button { white-space: normal; text-align: left; max-width: 100%; }
.policy-screen .inline-form { display: inline-block; max-width: 100%; }
.policy-screen h1, .policy-screen h2, .policy-screen li, .policy-screen p { overflow-wrap: anywhere; }

/* Parity phase 3c: operations screens (dashboard, audit log, support, checks) */
.ops-chart { width: 100%; max-width: 560px; height: auto; display: block; }
.ops-chart .chart-bar { fill: var(--accent); }
.ops-chart .chart-label, .ops-chart .chart-value { font: 12px var(--f-body); fill: var(--fg); }
.ops-figures { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin: .6rem 0 1rem; }
.ops-figure { padding: 14px 16px; display: grid; gap: 4px; }
.ops-figure .k { font-size: .7rem; letter-spacing: normal; color: var(--fg-2); }
.ops-figure .v { font: 600 1.6rem/1.1 var(--f-display); font-variant-numeric: tabular-nums; }
.ops-figure .d { font-size: .78rem; color: var(--fg-2); }
.ops-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.ops-badge { display: inline-flex; align-items: center; flex-shrink: 0; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: .7rem; font-weight: 600; line-height: 1; border: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; overflow-wrap: normal; }
.ops-badge.person { background: var(--accent-soft); color: var(--accent); }
.ops-badge.agent { background: var(--muse-soft); color: var(--muse); }
.ops-badge.system { background: var(--surface-2); color: var(--fg-2); }
.ops-badge.pass { background: var(--ok-soft); color: var(--ok); }
.ops-badge.fail { background: var(--bad-soft); color: var(--bad); }
.ops-badge.not_applicable { background: var(--warn-soft); color: var(--warn); }
.ops-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: .4rem 0 1rem; }
.ops-filters label { display: grid; gap: 2px; font-size: .8rem; }
.ops-request { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; margin: 10px 0; }
.ops-request.is-focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.ops-pager { display: flex; gap: 12px; align-items: center; margin: .6rem 0; }
@media (max-width: 720px) { .ops-figures { grid-template-columns: repeat(1, minmax(0,1fr)); } }
/* ------------------------------------------------ Data Steward screens */
.nowrap { white-space: nowrap; }
/* The crumb a page carries in its content: one line, truncated, never wider
   than the page. */
.crumb { margin: 0 0 6px; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.source-summary { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 12px; font-size: .84rem; color: var(--fg-2); }
.source-summary b { color: var(--fg); font-weight: 600; margin-right: 4px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip { text-decoration: none; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.chip .n, .tabs .n { font: 500 .68rem var(--f-mono); }
.tabs a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }
.tabs a:focus-visible, .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.issue-filters, .master-tabs, .profile-tabs, .source-filters { margin-bottom: 10px; }
.alias-line { font-size: .78rem; }
.record-line { font-size: .76rem; }
.pager { display: flex; gap: 14px; align-items: center; padding: 8px 4px; font-size: .84rem; }
.pill.nowrap, .badge-synthetic { white-space: nowrap; }
.data-table th[scope="row"] { font-weight: 600; }
.issue-table td, .issue-table th { vertical-align: top; }
.plain-list { margin: 0 0 .8rem; padding-left: 1.1rem; font-size: .88rem; }
.case-questions { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.case-questions > li { min-width: 0; }
.case-questions h2 { font-size: 1rem; margin: 0 0 8px; }
.case-confirmation { margin: 8px 0; padding: 10px 14px; border-radius: var(--r-md, 8px); background: var(--ok-soft); color: var(--fg); border: 1px solid var(--ok); }
.candidate, .evidence-block { border: 1px solid var(--line); border-radius: var(--r-md, 8px); padding: 10px 12px; margin: 0 0 10px; min-width: 0; }
.candidate h3, .evidence-block h3 { margin: 0 0 6px; font-size: .95rem; }
.result { font-weight: 600; }
.result-agrees { color: var(--ok); }
.result-conflicts { color: var(--bad); }
.result-no_comparison { color: var(--fg-2); font-style: italic; }
.score-line { font-size: .84rem; color: var(--fg-2); margin: 8px 0 0; }
.action-with-preview { border-top: 1px solid var(--line); padding: 10px 0; }
.preview { background: var(--surface-2); border-radius: var(--r-md, 8px); padding: 8px 12px; margin-bottom: 8px; }
.preview h3 { margin: 0 0 4px; font-size: .88rem; }
.preview dl { margin: 0; display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 4px 12px; font-size: .84rem; }
.preview dt { color: var(--fg-2); }
.preview dd { margin: 0; overflow-wrap: anywhere; }
.guard-reason { margin: 4px 0 0; font-size: .84rem; color: var(--fg-2); }
.timeline-list { margin: 8px 0; padding-left: 1.1rem; font-size: .86rem; }
.req-legend { margin: 4px 0; }
@media (max-width: 640px) {
  .preview dl { grid-template-columns: 1fr; }
  .source-summary { flex-direction: column; }
  .data-table th, .data-table td { overflow-wrap: anywhere; }
  .nowrap { white-space: nowrap; }
}

/* Demo scenario clock label in the top bar. */
.demo-date { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; font-size: 12px; color: var(--fg-2); white-space: nowrap; text-overflow: ellipsis; }
.demo-date .info-tip { cursor: help; }

/* The landing: one short line, the five personas in one row on a desktop and
   the video behind a title card below them. */
.landing-line { margin: 0 0 1rem; color: var(--fg-2); max-width: 70ch; }
.landing-links { margin: 0.75rem 0 0; }
/* The landing holds the cards; it is not a card itself.  One card level on
   the page: the persona cards and the path cards stand on the page, not in
   a box inside a box. */
.landing { background: transparent; border: 0; border-radius: 0; box-shadow: none; }

/* Persona selector: one card per persona.  The card names the persona and
   holds one short line about the job; the sentences that say who they are,
   what they do and where to start are the hover text and the accessible
   description of the card. */
.persona-cards { list-style: none; padding-left: 0; display: grid; gap: 0.75rem; font-size: 0.92rem; }
@media (min-width: 720px) { .persona-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .persona-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.persona-card {
  display: grid; gap: 0.4rem; justify-items: start; align-content: start; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 0.75rem;
}
.persona-icon { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.persona-text { display: grid; gap: 0.35rem; min-width: 0; }
.persona-name { font-size: 1.05rem; margin: 0; min-height: 3em; }
/* One sentence on the card.  Five cards share the row, so the sentence wraps
   inside the card; it stays one sentence and does not break a word. */
.persona-line {
  margin: 0; color: var(--fg-2); font-size: 0.86rem; line-height: 1.35;
  overflow-wrap: normal; text-wrap: pretty; min-height: calc(1.35em * 3);
}
.persona-text p { margin: 0; }
.persona-text form { margin-top: 0.25rem; }

/* The video title card on the landing.  The player sits inside a disclosure,
   so nothing of the video loads until the card is opened. */
.video-title-summary {
  display: flex; align-items: center; gap: 0.6rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); padding: 0.6rem 0.8rem;
}
.video-title-summary:hover { border-color: var(--accent); }
.video-title-summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.video-title-text { display: grid; gap: 0.1rem; }
.video-title-note { color: var(--fg-2); font-size: 0.9rem; }

/* The Incoming list on the Agents screen. */
.agent-inbox .card-b > .lock { margin-top: 0; }
.agent-inbox .action-form { margin: 0; }