/* ==========================================================================
   DIST-17 — App shell + screen layout
   ========================================================================== */

.app {
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr;
  height: 100vh;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Topbar. One row, 44px. Brand left, global search centre (the single most
   used control in the app), context + account right.
   -------------------------------------------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: 0 var(--s-4) 0 var(--s-5);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line-2);
  z-index: var(--z-topbar);
  position: relative;
}
.brand { display: flex; align-items: center; gap: var(--s-4); flex: none; }
.brand__mark {
  width: 24px; height: 24px;
  border-radius: var(--r-sm);
  background: linear-gradient(150deg, var(--c-accent), #0f3a72);
  color: #fff;
  display: grid; place-content: center;
  font-size: var(--t-micro); font-weight: 800; letter-spacing: -.02em;
}
.brand__name { font-size: var(--t-sm); font-weight: 700; letter-spacing: var(--tr-tight); }
.brand__env {
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-accent-3); background: var(--c-accent-soft);
  border: 1px solid var(--c-accent-line);
  padding: 1px 4px; border-radius: var(--r-xs);
}

.gsearch {
  position: relative;
  flex: 0 1 420px;
  margin-left: var(--s-4);
}
.gsearch .ctl { width: 100%; padding-left: 28px; background: var(--c-surface-2); }
.gsearch .ctl:hover { background: var(--c-surface); }
.gsearch__ico { position: absolute; left: var(--s-4); top: 50%; transform: translateY(-50%); color: var(--c-ink-4); pointer-events: none; display: flex; }
.gsearch__hint {
  position: absolute; right: var(--s-3); top: 50%; transform: translateY(-50%);
  display: flex; gap: 2px; pointer-events: none;
}
.kbd {
  font-family: var(--f-mono); font-size: var(--t-micro);
  color: var(--c-ink-4); background: var(--c-surface-3);
  border: 1px solid var(--c-line); border-bottom-width: 2px;
  padding: 1px 4px; border-radius: var(--r-xs); line-height: 1.2;
}

.topbar__sp { flex: 1 1 auto; }
.topbar__ctx {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-xs); color: var(--c-ink-3);
  padding-right: var(--s-4);
  border-right: 1px solid var(--c-line);
  margin-right: var(--s-2);
}
.topbar__ctx b { color: var(--c-ink); font-weight: 600; }

/* Scope bar — the single most load-bearing control in the app. It sits left
   of search so the current scope is always visible, and it advertises its own
   state: a narrowed scope is tinted, so you cannot misread a district number
   as a national one. */
.scopebar {
  display: flex; align-items: center; gap: var(--s-3);
  height: 30px; padding: 0 var(--s-2) 0 var(--s-3);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  color: var(--c-ink-2);
  flex: none; max-width: 260px;
  transition: background .12s ease, border-color .12s ease;
}
.scopebar:hover { background: var(--c-surface-3); border-color: var(--c-line); }
.scopebar__ico { display: flex; color: var(--c-ink-4); }
.scopebar__meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; }
.scopebar__lbl {
  font-size: 8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--c-ink-4);
}
.scopebar__val {
  font-size: var(--t-xs); font-weight: 600; color: var(--c-ink);
  max-width: 176px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scopebar__chev { display: flex; color: var(--c-ink-4); }
.scopebar[data-on="true"] {
  border-color: var(--c-accent-line);
  background: var(--c-accent-soft);
}
.scopebar[data-on="true"] .scopebar__ico,
.scopebar[data-on="true"] .scopebar__val { color: var(--c-accent-2); }

/* Scope picker */
.scopepick {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px));
  background: var(--c-surface);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  display: flex; flex-direction: column;
  max-height: min(640px, calc(100vh - 64px));
  overflow: hidden;
}
.scopepick__hd {
  display: flex; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--c-line-2);
}
.scopepick__t { font-size: var(--t-md); font-weight: 700; letter-spacing: var(--tr-tight); }
.scopepick__d { font-size: var(--t-xs); color: var(--c-ink-3); margin-top: 2px; }
.scopepick__crumbs {
  display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap;
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--c-line-2);
  background: var(--c-surface-2);
}
.scopecrumb {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--t-xs); color: var(--c-ink-3);
  padding: 3px 5px; border-radius: var(--r-xs);
}
.scopecrumb:hover { background: var(--c-surface-3); color: var(--c-ink); }
.scopecrumb svg { color: var(--c-ink-4); }
.scopecrumb--on { color: var(--c-ink); font-weight: 600; }
.scopecrumb--on svg { color: var(--c-accent-2); }
.scopepick__lbl {
  font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--c-ink-4); padding: var(--s-4) var(--s-5) var(--s-2);
}
.scopepick__list { flex: 1; overflow-y: auto; padding: 0 var(--s-3) var(--s-3); }
.scopepick__ft {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--c-line-2);
  background: var(--c-surface-2);
  font-size: var(--t-xs);
}
.scopeopt {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  padding: var(--s-3); border-radius: var(--r-sm);
  text-align: left; color: var(--c-ink-2);
  transition: background .1s ease;
}
.scopeopt:hover { background: var(--c-surface-3); }
.scopeopt__ic { display: flex; color: var(--c-ink-4); }
.scopeopt__nm { font-size: var(--t-sm); color: var(--c-ink); font-weight: 500; }
.scopeopt__meta { font-size: 10px; color: var(--c-ink-3); }
.scopeopt__n {
  margin-left: auto; font-size: var(--t-xs); color: var(--c-ink-3);
  font-family: var(--f-mono);
}
.scopeopt svg:last-child { color: var(--c-ink-4); flex: none; }
.scopeopt--all { color: var(--s-bad-text); font-size: var(--t-xs); }
.scopeopt--all svg { color: var(--s-bad-text); }

/* Settings rows */
.setrow {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-4) var(--s-5);
}
.setrow--sub { padding: var(--s-3) var(--s-5); }
.setrow__t { min-width: 0; flex: 1; }
.setrow__l { font-size: var(--t-sm); font-weight: 600; color: var(--c-ink); }
.setrow__h { font-size: var(--t-xs); color: var(--c-ink-3); margin-top: 3px; line-height: 1.5; }
.setrow__a { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.setrow__v { font-size: var(--t-sm); color: var(--c-ink-2); flex: none; text-align: right; }
.setgroup { border-bottom: 1px solid var(--c-line-2); }
.setgroup:last-child { border-bottom: 0; }
.setgroup__hd {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  background: var(--c-surface-2);
  font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--c-ink-3);
}
.callout {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4);
  border-radius: var(--r-sm);
  font-size: var(--t-xs); line-height: 1.6;
  color: var(--c-ink-2);
}
.callout svg { flex: none; margin-top: 2px; }
.callout--warn { background: var(--s-warn-bg); border: 1px solid var(--s-warn-line); }
.callout--warn > svg { color: var(--s-warn-text); }
.callout--warn b { color: var(--s-warn-text); }
.kpi--static { cursor: default; }
button.kpi--static:hover { border-color: var(--c-line-2); box-shadow: none; }

/* --------------------------------------------------------------------------
   Lock screen. Sits above everything, including toasts and drawers, and
   deliberately blurs the app behind it: a locked screen should not be a
   readable page with a form on top.
   -------------------------------------------------------------------------- */
#lockscreen {
  position: fixed; inset: 0; z-index: 200;
}
#lockscreen[hidden] { display: none; }
.lockwall {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: var(--s-6);
  overflow: auto;
}
.lockwall__bg {
  position: absolute; inset: 0;
  background: rgba(240, 243, 246, .82);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
}
[data-density="compact"] .lockwall__bg { background: rgba(238, 241, 245, .88); }

.lockcard {
  position: relative;
  width: min(384px, 100%);
  background: var(--c-surface);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 64px -20px rgba(15, 21, 28, .34), 0 2px 8px rgba(15, 21, 28, .08);
  padding: var(--s-7) var(--s-6) var(--s-5);
  text-align: center;
}
.lockcard.is-shake { animation: lockshake .4s cubic-bezier(.36, .07, .19, .97); }
@keyframes lockshake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

.lockcard__mark {
  width: 40px; height: 40px; margin: 0 auto var(--s-4);
  border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--c-accent), #0f3a72);
  color: #fff; display: grid; place-content: center;
  font-size: var(--t-sm); font-weight: 800; letter-spacing: -.02em;
}
.lockcard__t { font-size: var(--t-md); font-weight: 700; letter-spacing: var(--tr-tight); }
.lockcard__d { font-size: var(--t-xs); color: var(--c-ink-3); margin-top: 2px; }

.lockcard__who {
  display: flex; align-items: center; gap: var(--s-3);
  margin: var(--s-5) 0 var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  text-align: left;
}
.lockcard__wname { font-size: var(--t-sm); font-weight: 600; }
.lockcard__wrole { font-size: 10px; color: var(--c-ink-3); }

.lockcard__note {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-size: var(--t-xs); color: var(--c-ink-3);
  margin-bottom: var(--s-4);
}
.lockcard__nonote {
  display: flex; align-items: flex-start; gap: var(--s-2); text-align: left;
  font-size: var(--t-xs); color: var(--c-ink-3); line-height: 1.5;
  background: var(--s-warn-bg); border: 1px solid var(--s-warn-line);
  border-radius: var(--r-sm); padding: var(--s-3);
  margin-bottom: var(--s-4);
}
.lockcard__nonote svg { flex: none; margin-top: 1px; color: var(--s-warn-text); }

.lockcard__form { display: grid; gap: var(--s-3); text-align: left; }
.lockcard__lbl {
  display: block; font-size: var(--t-xs); font-weight: 600;
  color: var(--c-ink-2); margin-bottom: var(--s-2);
}
.lockpin {
  width: 100%; height: 44px;
  font-family: var(--f-mono); font-size: var(--t-xl); font-weight: 600;
  letter-spacing: .5em; text-indent: .5em; text-align: center;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  color: var(--c-ink);
}
.lockpin:focus { outline: none; border-color: var(--c-accent); box-shadow: var(--ring); }
.lockpin[aria-invalid="true"] { border-color: var(--s-bad-bar); box-shadow: 0 0 0 3px rgba(217, 58, 43, .18); }
.lockcard__err {
  font-size: var(--t-xs); color: var(--s-bad-text);
  min-height: 15px; text-align: center;
}
.lockcard__alt { margin-top: var(--s-3); }
.lockcard__setpin { margin-top: var(--s-4); display: block; width: 100%; }
.linkbtn {
  font-size: var(--t-xs); color: var(--c-accent-2);
  text-decoration: underline; text-underline-offset: 2px;
}
.linkbtn:hover { color: var(--c-accent); }

.lockcard__ft {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-6); padding-top: var(--s-4);
  border-top: 1px solid var(--c-line-2);
  font-size: 10px; color: var(--c-ink-4);
}
.lockcard__tz { font-family: var(--f-mono); white-space: nowrap; }

.iconbtn {
  width: 28px; height: 28px;
  display: grid; place-content: center;
  border-radius: var(--r-sm);
  color: var(--c-ink-2);
  position: relative;
  transition: background .12s ease;
}
.iconbtn:hover { background: var(--c-surface-3); }
.iconbtn__dot {
  position: absolute; top: 3px; right: 3px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--s-bad-bar);
  border: 1.5px solid var(--c-surface);
}

.userchip {
  display: flex; align-items: center; gap: var(--s-3);
  height: 30px; padding: 0 var(--s-3) 0 var(--s-2);
  border-radius: var(--r-sm);
  transition: background .12s ease;
}
.userchip:hover { background: var(--c-surface-3); }
.userchip__meta { text-align: left; line-height: 1.2; }
.userchip__n { font-size: var(--t-xs); font-weight: 600; }
.userchip__r { font-size: 10px; color: var(--c-ink-3); }

/* --------------------------------------------------------------------------
   Body: nav + main
   -------------------------------------------------------------------------- */
.shell { display: grid; grid-template-columns: var(--nav-w) 1fr; min-height: 0; }
.shell[data-nav="collapsed"] { grid-template-columns: var(--nav-w-collapsed) 1fr; }

.nav {
  background: var(--c-surface);
  border-right: 1px solid var(--c-line-2);
  display: flex; flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s-3) var(--s-3) var(--s-4);
  gap: var(--s-1);
}
.nav__group {
  padding: var(--s-5) var(--s-3) var(--s-2);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: var(--tr-wide);
  text-transform: uppercase; color: var(--c-ink-4);
}
.nav__i {
  display: flex; align-items: center; gap: var(--s-4);
  height: 28px;
  padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  color: var(--c-ink-2);
  font-size: var(--t-sm);
  font-weight: 500;
  width: 100%;
  text-align: left;
  position: relative;
  transition: background .1s ease, color .1s ease;
}
.nav__i:hover { background: var(--c-surface-3); color: var(--c-ink); }
.nav__i svg { flex: none; color: var(--c-ink-4); transition: color .1s ease; }
.nav__i:hover svg { color: var(--c-ink-2); }
.nav__i[aria-current="page"] {
  background: var(--c-accent-soft);
  color: var(--c-accent-3);
  font-weight: 600;
}
.nav__i[aria-current="page"] svg { color: var(--c-accent); }
.nav__i[aria-current="page"]::before {
  content: ""; position: absolute; left: calc(-1 * var(--s-3)); left: -12px;
  top: 4px; bottom: 4px; width: 3px;
  background: var(--c-accent); border-radius: 0 var(--r-pill) var(--r-pill) 0;
}
.nav__n {
  margin-left: auto;
  font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 600;
  color: var(--c-ink-3);
  background: var(--c-surface-3);
  padding: 1px 5px; border-radius: var(--r-pill);
  min-width: 17px; text-align: center;
}
.nav__i[aria-current="page"] .nav__n { background: var(--c-surface); color: var(--c-accent-3); }
.nav__n--alert { background: var(--s-bad-bg) !important; color: var(--s-bad-text) !important; }

.shell[data-nav="collapsed"] .nav { padding: var(--s-3) var(--s-2); align-items: center; }
.shell[data-nav="collapsed"] .nav__i { width: 32px; justify-content: center; padding: 0; }
.shell[data-nav="collapsed"] .nav__i span,
.shell[data-nav="collapsed"] .nav__group,
.shell[data-nav="collapsed"] .nav__n { display: none; }
.shell[data-nav="collapsed"] .nav__sep { width: 20px; }

.nav__sep { height: 1px; background: var(--c-line); margin: var(--s-4) var(--s-2); }
.nav__ft { margin-top: auto; padding: var(--s-3) var(--s-2) 0; }

/* --------------------------------------------------------------------------
   Main region
   -------------------------------------------------------------------------- */
.main {
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--c-canvas);
}

.page { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.page--scroll { overflow-y: auto; }

.pagehd {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5) var(--s-6) var(--s-4);
  flex: none;
  flex-wrap: wrap;
}
.pagehd__t { font-size: var(--t-lg); font-weight: 600; letter-spacing: var(--tr-tight); }
.pagehd__d { font-size: var(--t-xs); color: var(--c-ink-3); margin-top: 1px; }
.pagehd__acts { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.pagebody { padding: 0 var(--s-6) var(--s-6); display: flex; flex-direction: column; gap: var(--gap); flex: 1 1 auto; min-height: 0; }

/* --- Dashboard grid ---------------------------------------------------- */
.grid-dash {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
/* The strips carry both the base class and a modifier, so the modifiers are
 * written as compound selectors: at equal specificity the later rule wins, and
 * that would let a base rule inside a wider media query undo a modifier. */
.grid-dash.grid-dash--kpi { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* Four risk ratios. Declared as a class, not an inline style: an inline
 * grid-template-columns wins over the media query below and so can never
 * collapse on a narrow window. */
.grid-dash.grid-dash--risk { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gd-2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--gap); }
.gd-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
/* Named for the ratio they actually produce: 2 parts then 1 part. The wide
 * data table goes first and keeps its natural column widths. */
.gd-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap); }
/* The mirror: narrow summary first, wide table second. */
.gd-1-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--gap); }
/* The KPI strip holds six cards. auto-fit fits five of them between ~1240px
 * and ~1600px, which strands the sixth card alone on a second row. Pin the
 * count to divisors of six instead so the strip is always 6, 3 or 2 wide. */
@media (max-width: 1599px) {
  .grid-dash.grid-dash--kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1240px) {
  .gd-2, .gd-3, .gd-2-1, .gd-1-2 { grid-template-columns: minmax(0, 1fr); }
  .grid-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Three across beats two: dropping the KPI strip to a single pair of
   * columns turns a compact strip into three very wide, very tall cards. */
  .grid-dash.grid-dash--risk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .grid-dash.grid-dash--kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-dash.grid-dash--risk { grid-template-columns: minmax(0, 1fr); }
}

/* --- Bars list (barsH) ------------------------------------------------- */
.bh { display: flex; flex-direction: column; gap: var(--s-3); }
.bh__r { display: grid; grid-template-columns: 96px 1fr 68px; align-items: center; gap: var(--s-4); }
.bh__l { font-size: var(--t-xs); color: var(--c-ink-2); display: flex; flex-direction: column; }
.bh__sub { font-size: 10px; color: var(--c-ink-4); font-family: var(--f-mono); }
.bh__track { height: 8px; background: var(--c-surface-3); border-radius: var(--r-pill); overflow: hidden; }
.bh__fill { display: block; height: 100%; border-radius: var(--r-pill); }
.bh__v { font-size: var(--t-xs); font-weight: 600; text-align: right; color: var(--c-ink); }

/* --- Composition bar --------------------------------------------------- */
.compbar { display: flex; width: 100%; border-radius: var(--r-pill); overflow: hidden; gap: 1px; }
.compbar__s { display: block; height: 100%; }
.compbar__s:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.compbar__s:last-child { border-radius: 0 var(--r-pill) var(--r-pill) 0; }

/* --- Donut ------------------------------------------------------------- */
.donut { position: relative; display: grid; place-items: center; }
.donut__c { position: absolute; text-align: center; line-height: 1.15; }
.donut__v { font-size: var(--t-md); font-weight: 700; letter-spacing: -.02em; }
.donut__l { font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); }
.donut__s { font-size: 10px; color: var(--c-ink-3); }

/* --- Legend ------------------------------------------------------------ */
.legend { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }
/* Toggle row: the switch is 30x17, so the label carries the hit target. */
.switchrow { min-height: 24px; cursor: pointer; align-items: center; }
.legend__i { display: flex; align-items: center; gap: var(--s-3); min-height: 24px; font-size: var(--t-xs); color: var(--c-ink-2); }
.legend__sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.legend__n { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--c-ink-3); }

/* --- Simple data list (branch table on dashboard, league tables) --------- */
.dl { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.dl th {
  text-align: left; font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  color: var(--c-ink-3); padding: 0 var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--c-line-2);
  white-space: nowrap;
}
.dl th:first-child, .dl td:first-child { padding-left: 0; }
.dl th:last-child, .dl td:last-child { padding-right: 0; }
.dl td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-line); vertical-align: middle; }
.dl tbody tr:last-child td { border-bottom: 0; }
.dl tbody tr { transition: background .1s ease; }
.dl tbody tr:hover { background: var(--c-surface-2); }
.dl--click tbody tr { cursor: pointer; }
.dl .r { text-align: right; }
.dl tfoot td { font-weight: 700; border-top: 1px solid var(--c-line-3); border-bottom: 0; background: var(--c-surface-2); }

/* --- Exception list ---------------------------------------------------- */
.exc { display: flex; flex-direction: column; }
.exc__i {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--t-sm);
  text-align: left; width: 100%;
  transition: background .1s ease;
}
.exc__i:last-child { border-bottom: 0; }
.exc__i:hover { background: var(--c-surface-2); }
.exc__ico { width: 22px; height: 22px; border-radius: var(--r-sm); display: grid; place-content: center; flex: none; }
.exc__ico--bad  { background: var(--s-bad-bg);  color: var(--s-bad-text); }
.exc__ico--warn { background: var(--s-warn-bg); color: var(--s-warn-text); }
.exc__ico--info { background: var(--s-info-bg); color: var(--s-info-text); }
.exc__ico--promise { background: var(--s-promise-bg); color: var(--s-promise-text); }
.exc__t { font-weight: 500; }
.exc__d { font-size: var(--t-xs); color: var(--c-ink-3); }
.exc__v { margin-left: auto; text-align: right; }

/* --- Command palette --------------------------------------------------- */
.cmdk {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: start center;
  padding-top: 12vh;
  background: rgba(15, 21, 28, 0.34);
  animation: fade .12s ease;
}
.cmdk__box {
  width: min(620px, 92vw);
  background: var(--c-surface);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow: hidden;
  animation: cmdkIn .16s cubic-bezier(.32,.72,0,1);
}
@keyframes cmdkIn { from { opacity: 0; transform: translateY(-8px) scale(.99) } to { opacity: 1; transform: none } }
.cmdk__in {
  display: flex; align-items: center; gap: var(--s-4);
  padding: 0 var(--s-5); height: 46px;
  border-bottom: 1px solid var(--c-line);
}
.cmdk__in input { flex: 1; border: 0; background: none; font-size: var(--t-md); height: 100%; }
.cmdk__in input:focus-visible { outline: none; }
.cmdk__list { max-height: 340px; overflow-y: auto; padding: var(--s-2); }
.cmdk__g { padding: var(--s-3) var(--s-3) var(--s-2); font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-ink-4); }
.cmdk__i {
  display: flex; align-items: center; gap: var(--s-4);
  width: 100%; height: 32px; padding: 0 var(--s-3);
  border-radius: var(--r-sm); font-size: var(--t-sm);
  text-align: left; color: var(--c-ink);
}
.cmdk__i[data-on="true"] { background: var(--c-accent-soft); }
.cmdk__i svg { color: var(--c-ink-4); flex: none; }
.cmdk__i[data-on="true"] svg { color: var(--c-accent); }
.cmdk__sub { margin-left: auto; font-size: var(--t-xs); color: var(--c-ink-3); }
.cmdk__ft {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--c-line);
  background: var(--c-surface-2);
  font-size: 10px; color: var(--c-ink-3);
}
.cmdk__ft span { display: flex; align-items: center; gap: 4px; }

/* --------------------------------------------------------------------------
   Account 360
   -------------------------------------------------------------------------- */
.a360__hd {
  display: flex; align-items: flex-start; gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  flex: none; flex-wrap: wrap;
}
.a360__id { min-width: 0; }
.a360__name { font-size: var(--t-xl); font-weight: 700; letter-spacing: var(--tr-tight); display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.a360__meta { display: flex; align-items: center; gap: var(--s-4); margin-top: 3px; font-size: var(--t-xs); color: var(--c-ink-3); flex-wrap: wrap; }
.a360__meta b { color: var(--c-ink-2); font-weight: 600; }
.a360__acts { margin-left: auto; display: flex; gap: var(--s-3); flex-wrap: wrap; }

.fin {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  flex: none;
}
.fin__c {
  padding: var(--s-4) var(--s-5);
  border-right: 1px solid var(--c-line);
  min-width: 0;
}
.fin__c:last-child { border-right: 0; }
.fin__l { font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-ink-3); display: flex; align-items: center; gap: var(--s-2); }
.fin__v { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--t-lg); font-weight: 600; letter-spacing: -.02em; margin-top: 3px; }
.fin__s { font-size: 10px; color: var(--c-ink-3); margin-top: 1px; }
.fin__c--bad .fin__v  { color: var(--s-bad-text); }
.fin__c--ok .fin__v   { color: var(--s-ok-text); }
.fin__c--warn .fin__v { color: var(--s-warn-text); }

.tabpane { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--gap); flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* --- Activity / audit log rows ---------------------------------------- */
.logrow {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-line);
}
.logrow:last-child { border-bottom: 0; }

/* --------------------------------------------------------------------------
   Mobile collector surface — a device frame on the desktop canvas.
   -------------------------------------------------------------------------- */
.stage {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 300px 1fr 300px;
  gap: var(--s-8);
  padding: var(--s-8) var(--s-6) var(--s-9);
  min-height: 0;
  overflow: auto;
}
.stage__note { font-size: var(--t-xs); color: var(--c-ink-3); line-height: 1.55; }
.stage__note h4 { font-size: var(--t-sm); font-weight: 600; color: var(--c-ink); margin: 0 0 var(--s-2); }
.stage__note ul { display: flex; flex-direction: column; gap: var(--s-3); }
.stage__note li { display: flex; gap: var(--s-3); }
.stage__note li::before { content: "—"; color: var(--c-ink-4); flex: none; }

.phone {
  width: 344px; height: 692px;
  margin: 0 auto;
  background: #10161d;
  border-radius: 34px;
  padding: 9px;
  box-shadow: 0 0 0 1.5px #2b3540, var(--sh-3);
  position: relative;
  flex: none;
}
.phone__screen {
  width: 100%; height: 100%;
  background: var(--c-surface);
  border-radius: 26px;
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
}
.phone__notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 104px; height: 20px; background: #10161d; border-radius: 0 0 12px 12px; z-index: 5;
}
.ph-status {
  height: 26px; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--s-5) 0 var(--s-6);
  font-size: 10px; font-weight: 600;
  background: var(--c-surface);
}
.ph-hd { flex: none; padding: var(--s-3) var(--s-5) var(--s-4); border-bottom: 1px solid var(--c-line); background: var(--c-surface); }
.ph-hd__t { font-size: var(--t-md); font-weight: 700; letter-spacing: var(--tr-tight); }
.ph-bd { flex: 1 1 auto; overflow-y: auto; background: var(--c-canvas); padding: var(--s-4) 0; }
.ph-ft {
  flex: none; border-top: 1px solid var(--c-line);
  background: var(--c-surface);
  padding: var(--s-3) var(--s-5) var(--s-5);
  display: flex; gap: var(--s-3);
  padding-bottom: 18px;
}
.ph-tabbar {
  flex: none; display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--c-line); background: var(--c-surface);
  padding: 5px 0 8px;
}
.ph-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 9px; color: var(--c-ink-4); font-weight: 500; }
.ph-tab[aria-current="page"] { color: var(--c-accent); }
.ph-tab__dot { position: absolute; top: 4px; right: 50%; margin-right: -14px; width: 6px; height: 6px; border-radius: 50%; background: var(--s-bad-bar); }

.mcard {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  margin: 0 var(--s-4) var(--s-3);
  overflow: hidden;
}
.mcard__t { padding: var(--s-4); display: flex; align-items: flex-start; gap: var(--s-3); }
.mcard__n { font-size: var(--t-sm); font-weight: 600; }
.mcard__s { font-size: 10px; color: var(--c-ink-3); }
.mcard__amt { display: flex; gap: var(--s-5); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--c-line); background: var(--c-surface-2); }
.mcard__amt > div { flex: 1; min-width: 0; }
.mcard__lbl { font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); font-weight: 600; }
.mcard__v { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--t-sm); font-weight: 600; }
.mcard__acts { display: flex; border-top: 1px solid var(--c-line); }
.mcard__act {
  flex: 1; height: 38px;
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-size: var(--t-xs); font-weight: 600; color: var(--c-ink-2);
  border-right: 1px solid var(--c-line);
}
.mcard__act:last-child { border-right: 0; }
.mcard__act:active { background: var(--c-surface-3); }
.mcard__act--pri { color: var(--c-accent); }
.mcard__act--bad { color: var(--s-bad-text); }

.pseg { display: flex; margin: 0 var(--s-4) var(--s-4); background: var(--c-surface-3); border-radius: var(--r-md); padding: 2px; gap: 2px; }
.pseg button {
  flex: 1; height: 26px; border-radius: var(--r-xs);
  font-size: var(--t-xs); font-weight: 500; color: var(--c-ink-2);
}
.pseg button[aria-pressed="true"] { background: var(--c-surface); color: var(--c-ink); font-weight: 600; box-shadow: var(--sh-1); }

.ph-sheet {
  position: absolute; inset: 0; z-index: 6;
  background: var(--c-surface);
  display: flex; flex-direction: column;
  animation: sheetIn .22s cubic-bezier(.32,.72,0,1);
}
@keyframes sheetIn { from { transform: translateY(100%) } to { transform: none } }
.ph-sheet__grab { width: 34px; height: 4px; border-radius: var(--r-pill); background: var(--c-line-3); margin: var(--s-3) auto var(--s-2); flex: none; }

.offline {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-5);
  background: var(--s-warn-bg); color: var(--s-warn-text);
  font-size: var(--t-xs); font-weight: 600; flex: none;
  border-bottom: 1px solid var(--s-warn-line);
}

/* --------------------------------------------------------------------------
   Placeholder screens (built for structure, not yet detailed)
   -------------------------------------------------------------------------- */
.ph-list { display: flex; flex-direction: column; }
.ph-row {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface);
}
.ph-row__t { font-size: var(--t-sm); font-weight: 600; }
.ph-row__d { font-size: var(--t-xs); color: var(--c-ink-3); }

/* ---- Column-group header row: the band that labels Identity / Contract /
   Balances / Collection / Ownership above the real header row. ------------- */
.grid tbody tr.colgroup-row th,
.grid tr.colgroup-row th {
  background: var(--c-surface-3);
  height: 22px;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-ink-3);
  text-align: center;
  border-bottom: 1px solid var(--c-line);
  border-top: 0;
  padding: 0 var(--s-4);
  white-space: nowrap;
}
.grid tr.colgroup-row th.colgroup-start { text-align: left; padding-left: var(--s-5); }
.grid tr.colgroup-row th + th { border-left: 1px solid var(--c-line-2); }

/* ---- Organisation name under the brand mark. Truncates hard: the brand
   block must never push the scope control off the topbar. ------------------ */
.brand__org {
  font-size: 10px;
  color: var(--c-ink-4);
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}