/* Exit, the product's look (ADR 0125; design/mockups/DESIGN-SPEC.md). Every app links this, then its own sheet.

   The values below are the Exit palette as a page has it before theme.js runs; theme.js then sets the same tokens from
   the deriver, and a customer's brand re-dresses the accent family only. An app colours nothing by hex: it names a
   token. Green marks the one thing to act on next in a view; a screen with six green things has no accent.

   Sections: tokens, base, type, controls, status, structure, the desktop shell, the phone shell. */

/* ---------------------------------------------------------------------------------------------------------- tokens */
:root{
  color-scheme:light;
  --ground:#F1F4F2;--surface:#FFFFFF;--surface-raised:#FFFFFF;--surface-sunken:#E6ECE9;--hover:#F7F9F8;
  --ink:#111614;--ink-2:#38413D;--ink-3:#5A6560;--rule:#D9DFDC;--rule-strong:#B9C2BE;
  --accent:#00804A;--accent-strong:#006B3E;--accent-ink:#FFFFFF;--accent-soft:#DDF3E7;--focus:#00804A;
  --night:#0E1311;--night-2:#1A211E;--night-line:#2C3531;--on-night-2:#A9B5AF;--signal:#35D07F;
  --good:#006B3E;--good-soft:#DDF3E7;--good-ink:#006B3E;--warning:#8A4B00;--warning-soft:#FFEFD6;--warning-ink:#8A4B00;
  --serious:#B3261E;--serious-soft:#FCE4E2;--serious-ink:#B3261E;--critical:#B3261E;--critical-soft:#FCE4E2;
  --critical-ink:#B3261E;--info:#1F5BB8;--info-soft:#E1EBFA;--info-ink:#1F5BB8;--paused:#4A5550;--paused-soft:#E6ECE9;
  --paused-ink:#4A5550;--warning-bar:#F2A516;
  --r-control:10px;--r-panel:16px;--r-data:0px;--r-pill:999px;--r-big:14px;
  --shadow-1:0 1px 2px rgba(17,22,20,.06);--shadow-2:0 1px 2px rgba(17,22,20,.06),0 12px 32px rgba(17,22,20,.10);
  /* The device's own font paints first; Red Hat arrives after (shared/fonts/fonts.css). Indian scripts are Noto. */
  --display:'Red Hat Display','Daiko Indic','Segoe UI',system-ui,-apple-system,sans-serif;
  --ui:'Red Hat Text','Daiko Indic','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'Red Hat Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}

/* ------------------------------------------------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
/* hidden means hidden: a class that sets display must not bring back an element the page has hidden. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 15px/1.5 var(--ui);-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale}
img,svg,video,canvas{max-width:100%}
svg.icon{display:inline-block;flex:none;vertical-align:middle}
a{color:var(--accent-strong);text-underline-offset:2px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
::selection{background:var(--accent-soft);color:var(--ink)}
hr{border:0;border-top:1px solid var(--rule);margin:16px 0}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}}

/* ------------------------------------------------------------------------------------------------------------ type */
h1,h2,h3,h4{margin:0;color:var(--ink);text-wrap:balance}
h1{font:700 28px/1.15 var(--display);letter-spacing:-.02em}
h2{font:700 18px/1.3 var(--display);letter-spacing:-.005em}
h3{font:700 15px/1.35 var(--ui)}
h4{font:600 14px/1.4 var(--ui)}
p{margin:0;text-wrap:pretty}
.lead{font-size:17px;color:var(--ink-2)}
.muted{color:var(--ink-2);margin:0}
.faint{color:var(--ink-3)}
.label,.eyebrow{font:600 12px/1.3 var(--ui);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow{font-family:var(--mono);font-weight:500;letter-spacing:.12em;color:var(--accent-strong)}
.mono,code,kbd,samp{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.data{font:500 13px/1.3 var(--mono);font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------------------------------------------- controls */
/* A button is secondary unless it is the next thing to do: `.primary` is the one green action in a view. `.quiet` is
   kept as the secondary's old name. Every target is at least 40px on a desk and 44px where a finger is likely. */
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button,.button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;
  border:1px solid var(--rule);border-radius:var(--r-control);background:var(--surface);color:var(--ink);
  font:600 14px/1.2 var(--ui);text-decoration:none;cursor:pointer;white-space:normal;text-align:center}
button:hover,.button:hover,.btn:hover{border-color:var(--rule-strong);background:var(--hover);color:var(--ink)}
button.primary,.button.primary,.btn.primary{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
button.primary:hover,.button.primary:hover,.btn.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong);
  color:var(--accent-ink)}
button.danger,.button.danger{border-color:var(--critical);background:var(--critical);color:var(--surface)}
button.danger:hover,.button.danger:hover{background:var(--ink);border-color:var(--ink);color:var(--surface)}
button.link,.link-button{min-height:0;padding:0;border:0;background:none;color:var(--accent-strong);font-weight:600;
  text-decoration:underline;text-underline-offset:2px}
button.link:hover,.link-button:hover{background:none;color:var(--ink)}
button:disabled,.button[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
button.big,.button.big{min-height:56px;padding:0 20px;border-radius:var(--r-big);font-size:18px}
.icon-btn{width:40px;min-width:40px;min-height:40px;padding:0;border-color:transparent;background:transparent;
  color:var(--ink-2);position:relative}
.icon-btn:hover{background:var(--ground);border-color:transparent}
.badge{position:absolute;top:3px;right:1px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);
  background:var(--accent-soft);color:var(--accent-strong);font:600 11px/18px var(--mono);text-align:center}

label{color:var(--ink);font-size:14px;font-weight:600}
input,select,textarea{min-height:40px;padding:8px 12px;border:1px solid var(--rule-strong);border-radius:var(--r-control);
  background:var(--surface);color:var(--ink);font-size:15px;font-weight:400;max-width:100%}
textarea{min-height:88px;line-height:1.45;resize:vertical}
/* A field picked from a list by name (place-picker.js) wears a select's chevron: as a bare box, a client, a vendor or
   the places a contract covers read as something to type an id into (money-vendors-24). */
input[list]{padding-right:34px;background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
input[list]::-webkit-calendar-picker-indicator{opacity:0}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
input[type=checkbox],input[type=radio]{min-height:0;width:18px;height:18px;padding:0;margin:0;accent-color:var(--accent)}
input[type=file]{padding:6px;border-style:dashed}
input.code{font:500 28px/1.2 var(--mono);letter-spacing:.3em;text-align:center}
/* A field: its label above, its input full width, a hint below in the caption colour. */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.field>.label{font-size:14px}
.field .hint{font-size:13px;color:var(--ink-3)}
.check{display:inline-flex;align-items:center;gap:8px;font-weight:500;min-height:40px}

/* Filter chips, 36px pills: the active one is filled with ink. */
.chip{min-height:36px;padding:0 14px;border-radius:var(--r-pill);font-weight:500;font-size:14px}
.chip[aria-pressed="true"],.chip.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
/* Tabs: an underline under the current one, a mono count beside each. */
.tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--rule)}
.tabs a,.tabs button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;margin-bottom:-1px;
  border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--ink-2);font:500 14px var(--ui);
  text-decoration:none}
.tabs a:hover,.tabs button:hover{background:none;color:var(--ink)}
.tabs [aria-current="page"],.tabs [aria-selected="true"]{border-bottom-color:var(--accent);color:var(--ink);font-weight:600}
.tabs .n{font:500 12px var(--mono);color:var(--ink-3)}
/* Simple or Full, and any other choice of two or three: a segmented control. */
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-control);background:var(--ground)}
.seg button{min-height:34px;border:0;border-radius:8px;background:transparent;color:var(--ink-2)}
.seg button[aria-checked="true"],.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);
  box-shadow:0 1px 3px rgba(17,22,20,.14)}

/* -------------------------------------------------------------------------------------------------------- status */
/* A status is a tinted pill with a dot and a word in mono capitals, never colour alone. */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);
  font:600 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  background:var(--paused-soft);color:var(--paused-ink)}
.pill::before{content:"";width:6px;height:6px;border-radius:var(--r-pill);background:currentColor;flex:none}
.pill.plain::before{display:none}
.pill.good,.s-good{background:var(--good-soft);color:var(--good-ink)}
.pill.warning,.s-warning{background:var(--warning-soft);color:var(--warning-ink)}
.pill.critical,.s-critical,.pill.serious{background:var(--critical-soft);color:var(--critical-ink)}
.pill.info,.s-info{background:var(--info-soft);color:var(--info-ink)}
.pill.paused,.s-paused{background:var(--paused-soft);color:var(--paused-ink)}
.count{display:inline-flex;align-items:center;padding:3px 9px;border-radius:var(--r-pill);background:var(--surface-sunken);
  color:var(--ink-2);font:600 13px/1.3 var(--mono);font-variant-numeric:tabular-nums}
.t-good{color:var(--good-ink)}.t-warning{color:var(--warning-ink)}.t-critical{color:var(--critical-ink)}
.t-info{color:var(--info-ink)}.t-paused{color:var(--paused-ink)}
/* A note: something the page says about itself, tinted by what it means. */
.note,.notice{padding:12px 14px;border-radius:var(--r-control);background:var(--ground);color:var(--ink);font-size:14px;
  line-height:1.45}
.note.good,.notice.good,.ok{background:var(--good-soft);color:var(--good-ink)}
.note.warning,.notice.warning{background:var(--warning-soft);color:var(--warning-ink)}
.note.critical,.notice.critical,[role="alert"].note{background:var(--critical-soft);color:var(--critical-ink)}
.note.info,.notice.info{background:var(--info-soft);color:var(--info-ink)}
/* How fresh an analytical figure is (G8): a quiet line while current, a warning once it is behind its bound. */
.d-fresh{margin:6px 0;font-size:13px;line-height:1.4;color:var(--ink-3)}
.d-fresh.behind{padding:8px 12px;border-radius:var(--r-control);border-left:3px solid var(--warning-bar);
  background:var(--warning-soft);color:var(--warning-ink);font-size:14px}
/* The signal strip: three to five facts on one line, a count each, the worst in its colour. */
.signal{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14px;color:var(--ink-2)}
.signal b{font:600 14px var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
/* A toast after an action, with its undo: dark, the one thing above the page. */
.toast{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:14px 18px;border-radius:12px;background:var(--night);
  border:1px solid var(--night-line);color:#FFFFFF;box-shadow:var(--shadow-2);font-size:14px}
.toast button{min-height:36px;border-color:var(--signal);background:transparent;color:var(--signal)}
.toast button:hover{background:var(--night-2);color:var(--signal);border-color:var(--signal)}

/* ------------------------------------------------------------------------------------------------------ structure */
/* A panel is a separate object: white, a hairline, 16px corners. Data inside it has no corners. */
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-panel)}
.panel.pad{padding:20px}
.panel:not(.pad)>h2:first-child{padding:16px 20px 0}
.panel-foot{padding:12px 20px;border-top:1px solid var(--rule);font-size:13px;font-weight:600}
.panel-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px}
.stack{display:flex;flex-direction:column;gap:16px}
.row-gap{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.list-plain{list-style:none;margin:0;padding:0}
.list-rows{list-style:none;margin:0;padding:0}
.list-rows>li{border-top:1px solid var(--rule)}
.list-rows>li:first-child{border-top:0}
.list-rows a.row{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 20px;color:var(--ink);text-decoration:none}
.list-rows a.row:hover{background:var(--hover)}
.empty{padding:28px 20px;color:var(--ink-2);text-align:left}
.empty b,.empty strong{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}

/* Tables: a white panel holding a 0-radius table, fog header, 48px rows, hairlines between rows, mono for figures.
   A table wider than its panel scrolls inside it, and says so: a soft shade at the edge that has more beyond it, gone
   once scrolled to that edge (the covers move with the table, the shades stay with the panel). A cut-off column with
   no cue reads as a broken page; tools/layout.mjs fails a table cut off, or one that scrolls on a desk. */
.table-wrap{background:linear-gradient(to right,var(--surface) 30%,transparent) left/40px 100% no-repeat local,
  linear-gradient(to left,var(--surface) 30%,transparent) right/40px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,color-mix(in srgb,var(--ink) 22%,transparent),transparent) left/14px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,color-mix(in srgb,var(--ink) 22%,transparent),transparent) right/14px 100% no-repeat scroll,
  var(--surface);
  overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);border-radius:var(--r-panel)}
table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
caption{caption-side:top;text-align:left;padding:12px 20px;color:var(--ink-2);font-size:13px}
th{background:var(--ground);padding:12px;text-align:left;vertical-align:bottom;font:600 11px/1.3 var(--ui);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
td{padding:12px;border-top:1px solid var(--rule);vertical-align:top}
tbody th{background:none;text-transform:none;letter-spacing:0;font:600 14px var(--ui);color:var(--ink);
  border-top:1px solid var(--rule);white-space:normal;vertical-align:top}
th:first-child,td:first-child{padding-left:20px}
th:last-child,td:last-child{padding-right:20px}
tbody tr:hover td{background:var(--hover)}
tr.current td,tr[aria-selected="true"] td{background:var(--accent-soft)}
td.mono,td .mono,td.data{font:500 13px var(--mono);color:var(--ink-2)}
td.num,th.num{text-align:right}

/* A dialog or popover, the other thing above the page. */
dialog{border:1px solid var(--rule);border-radius:var(--r-panel);padding:24px;background:var(--surface);color:var(--ink);
  box-shadow:var(--shadow-2);max-width:min(560px,calc(100vw - 32px))}
dialog::backdrop{background:rgba(14,19,17,.45)}
details>summary{cursor:pointer;font-weight:600}

/* --------------------------------------------------------------------------------------------------------- figures */
/* The measure tiles (ADR 0140, shared/figures.js): status first, the sites under each figure, one record to open.
   One panel's row split by hairlines (design/mockups Portfolio), never a row of bordered cards; the figure in Display
   with tabular numbers, beside its band's pill; bars in one neutral hue for magnitude and the status colours only
   where a band applies, each with its value in words; a hollow square for a meter or asset missing. A cell a row at a
   phone's width. */
.pill.hollow{background:transparent;box-shadow:inset 0 0 0 1px var(--rule-strong);color:var(--ink-3)}
.pill.hollow::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor;width:7px;height:7px}
.fg-panel{display:flex;flex-direction:column;gap:14px;min-width:0;padding:18px 20px 0;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r-panel);overflow:hidden}
.fg-panel .panel-head h2{margin:0}
.fg-panel .panel-head .meta{font-size:13px;color:var(--ink-3)}
.fg-panel>.fg-strip{margin:0 -20px}
.fg-headline{display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px 14px;border-radius:var(--r-control);
  background:var(--critical-soft);color:var(--critical-ink);font-size:14px;font-weight:500;line-height:1.45;
  overflow-wrap:anywhere}
.fg-headline.warning{background:var(--warning-soft);color:var(--warning-ink)}
.fg-headline.good{background:var(--good-soft);color:var(--good-ink)}
.fg-headline.info{background:var(--info-soft);color:var(--info-ink)}
.fg-headline svg{flex:none;margin-top:1px}
.fg-headline b{font-weight:700}
.fg-headline a{color:inherit;font-weight:700}
.fg-headline a:hover{color:var(--ink)}
.fg-headline .fg-rest{color:var(--ink-2);font-weight:400}
.fg-strip{display:flex;flex-wrap:wrap;overflow:hidden;border-top:1px solid var(--rule)}
.fg-cell{flex:1 1 230px;min-width:0;display:flex;flex-direction:column;gap:6px;padding:16px 20px 18px;
  box-shadow:-1px 0 0 var(--rule),0 -1px 0 var(--rule)}
.fg-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;min-height:24px}
.fg-label{margin:0;font:600 13px/1.3 var(--ui);color:var(--ink-2)}
.fg-fig{margin:2px 0 0;font:700 28px/1.1 var(--display);letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums}
.fg-fig .fg-of{margin:0 6px;font:500 15px var(--ui);letter-spacing:0;color:var(--ink-2)}
.fg-fig small{margin-left:8px;font:500 13px var(--mono);letter-spacing:0;color:var(--ink-3)}
.fg-fig .fg-unit{margin-left:3px;font:500 15px var(--ui);letter-spacing:0;color:var(--ink-2)}
.fg-fig.empty{font-size:20px;color:var(--ink-3)}
.fg-ctx{font-size:13px;line-height:1.45;color:var(--ink-2)}
.fg-delta{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;line-height:1.35;color:var(--ink-2)}
.fg-delta svg{flex:none}
.fg-delta.worse{color:var(--critical-ink)}.fg-delta.better{color:var(--good-ink)}
.fg-delta.worse span,.fg-delta.better span{color:var(--ink-2)}
.fg-delta.worse b{color:var(--critical-ink)}.fg-delta.better b{color:var(--good-ink)}.fg-delta.same b{color:var(--ink)}
.fg-sites{display:flex;flex-direction:column;gap:7px;margin:6px 0 0;padding:0;list-style:none}
.fg-srow{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(40px,1fr) auto;align-items:center;gap:8px;
  font-size:12.5px;line-height:1.3}
.fg-srow.units{grid-template-columns:minmax(0,7.5rem) minmax(0,1fr) auto}
.fg-srow.stack{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'nm v' 'viz viz';row-gap:4px}
.fg-srow.stack .fg-nm{grid-area:nm}.fg-srow.stack .fg-v{grid-area:v}.fg-srow.stack .fg-dots{grid-area:viz}
.fg-nm{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fg-v{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;font:500 12px var(--mono);
  font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.fg-v .pill{padding:1px 7px;font-size:10px}
.fg-track{position:relative;height:8px;border-radius:4px;background:var(--surface-sunken)}
.fg-track.empty{background:repeating-linear-gradient(135deg,var(--surface-sunken) 0 4px,transparent 4px 8px);
  box-shadow:inset 0 0 0 1px var(--rule)}
.fg-fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--ink-3)}
.fg-fill.good{background:var(--good)}.fg-fill.info{background:var(--info)}.fg-fill.warning{background:var(--warning-bar)}
.fg-fill.critical{background:var(--critical)}.fg-fill.paused{background:var(--paused)}
.fg-tick{position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:1px;background:var(--ink)}
.fg-dots{display:grid;gap:3px;justify-content:start}
.fg-dots i{width:8px;height:8px;border-radius:2px;background:var(--ink-3)}
.fg-dots i.off{background:transparent;box-shadow:inset 0 0 0 1.5px var(--warning)}
.fg-more{font-size:12px;color:var(--ink-3)}
.fg-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:2px 0 0;font-size:11.5px;color:var(--ink-3)}
.fg-key{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:2px;background:var(--ink-3);
  vertical-align:-1px}
.fg-key.off{background:transparent;box-shadow:inset 0 0 0 1.5px var(--warning)}
.fg-key.tick{width:2px;height:12px;border-radius:1px;background:var(--ink);vertical-align:-2px}
.fg-act{display:flex;align-items:flex-start;gap:8px;margin:auto 0 0;padding-top:10px;border-top:1px dashed var(--rule);
  font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.fg-act svg{flex:none;margin-top:1px;color:var(--ink-3)}
.fg-act.critical svg{color:var(--critical)}.fg-act.warning svg{color:var(--warning)}
.fg-act .fg-open{font-weight:600}
.fg-act span.fg-open{color:var(--ink)}
.fg-why{display:block;color:var(--ink-2)}
/* Counts that filter the list below them: one joined strip, a stripe on what is breached or at risk, the worst
   one's clock under each count, a zero recessive. A count of another kind stands apart behind a wider rule. */
.fg-counts{display:flex;flex-wrap:wrap;overflow:hidden;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r-panel)}
.fg-count{flex:1 1 132px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  gap:3px;min-height:88px;margin:0;padding:12px 14px;border:0;border-radius:0;background:var(--surface);
  box-shadow:-1px 0 0 var(--rule),0 -1px 0 var(--rule);color:var(--ink-2);font:500 13px/1.3 var(--ui);text-align:left;
  white-space:normal}
button.fg-count:hover{background:var(--hover);border-color:transparent;color:var(--ink-2)}
.fg-n{font:700 24px/1.1 var(--display);font-variant-numeric:tabular-nums lining-nums;color:var(--ink)}
.fg-l{font-size:13px;color:var(--ink-2)}
.fg-w{display:-webkit-box;max-width:100%;margin-top:auto;overflow:hidden;font:500 11.5px/1.35 var(--mono);
  color:var(--ink-3);-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.fg-count.critical .fg-n{color:var(--critical-ink)}.fg-count.warning .fg-n{color:var(--warning-ink)}
.fg-count.paused .fg-n{color:var(--paused-ink)}.fg-count.good .fg-n{color:var(--good-ink)}
.fg-count.critical{box-shadow:inset 0 3px 0 var(--critical),-1px 0 0 var(--rule),0 -1px 0 var(--rule)}
.fg-count.warning{box-shadow:inset 0 3px 0 var(--warning-bar),-1px 0 0 var(--rule),0 -1px 0 var(--rule)}
.fg-count.zero .fg-n{font-weight:500;color:var(--ink-3)}
.fg-count.apart{border-left:4px solid var(--ground)}
.fg-count[aria-pressed="true"],button.fg-count[aria-pressed="true"]:hover{background:var(--accent-soft);
  box-shadow:inset 0 0 0 2px var(--accent)}
/* A figure placed on its band: green, amber and red zones, the figure a dark mark on them. */
.fg-bandbar{display:inline-flex;flex-direction:column;gap:3px;width:100%;min-width:120px}
.fg-bullet{position:relative;display:block;height:12px}
.fg-z{position:absolute;top:2px;bottom:2px}
.fg-z.g{background:var(--good-soft);background:color-mix(in srgb,var(--good) 24%,transparent)}
.fg-z.a{background:var(--warning-soft);background:color-mix(in srgb,var(--warning-bar) 34%,transparent)}
.fg-z.r{background:var(--critical-soft);background:color-mix(in srgb,var(--critical) 22%,transparent)}
.fg-mark{position:absolute;top:-2px;bottom:-2px;width:3px;border-radius:2px;background:var(--ink)}
.fg-axis{display:flex;justify-content:space-between;font:500 10px var(--mono);color:var(--ink-3)}
@media (max-width:760px){
  .fg-panel{padding:16px 16px 0}
  .fg-panel>.fg-strip{margin:0 -16px}
  .fg-cell{flex-basis:100%;padding:14px 16px 16px}
  .fg-count{flex-basis:40%}
}

/* ---------------------------------------------------------------------------------------------- the desktop shell */
/* Built by shared/shell.js around the app's own #app: a top bar, the role-shaped sidebar, the content with its
   heading, and the footer with the attribution. At a phone's width the sidebar folds behind the Menu button. */
.d-shell{min-height:100vh;display:flex;flex-direction:column}
.d-top{height:60px;flex:none;display:flex;align-items:center;gap:16px;padding:0 20px;background:var(--surface);
  border-bottom:1px solid var(--rule)}
.d-logo{display:inline-flex;align-items:center;gap:9px;flex:none;color:var(--ink);text-decoration:none;min-height:40px}
.d-logo:hover{color:var(--ink)}
.d-logo b{font:800 20px/1 var(--display);letter-spacing:-.03em}
.d-logo img{height:26px;width:auto}
/* The company, then the site: a name in the body's type, never a code. It keeps its width, and the search box beside it
   gives way instead (a share of a pixel taken from the name still cut "Larkspur Plaza" to "Larkspur Plaz"), up to two
   fifths of the bar, past which the site's name ends in an ellipsis and says itself whole on hover. */
.d-place{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;max-width:40%;min-width:0;font-weight:600;font-size:14px;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-place .d-root{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:500;color:var(--ink-3)}
@media (max-width:1199px){.d-place{flex-shrink:1}}
.d-slot{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.d-slot .lang{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.d-slot .lang label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.d-slot .lang select{min-height:40px;padding:0 10px;font-weight:600;font-size:14px}
.d-slot>a{font-size:14px}
.d-icons{display:flex;align-items:center;gap:6px;flex:none}
.d-me{position:relative;flex:none}
.d-me>summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 6px;border-radius:var(--r-control);
  list-style:none;font-weight:600}
.d-me>summary::-webkit-details-marker{display:none}
.d-me>summary:hover{background:var(--ground)}
.d-avatar{width:34px;height:34px;flex:none;border-radius:var(--r-pill);background:var(--surface-sunken);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;font:700 13px var(--ui)}
.d-who{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.d-who small{font-weight:500;font-size:12px;color:var(--ink-3)}
.d-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:300px;padding:8px;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r-panel);box-shadow:var(--shadow-2);display:flex;flex-direction:column}
.d-menu .d-menu-who{padding:10px 12px 12px;border-bottom:1px solid var(--rule);margin-bottom:6px}
.d-menu a,.d-menu button{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:42px;padding:0 12px;
  border:0;border-radius:var(--r-control);background:none;color:var(--ink);font:500 14px var(--ui);text-decoration:none}
.d-menu a:hover,.d-menu button:hover{background:var(--ground);color:var(--ink)}
.d-body{flex:1;display:flex;align-items:stretch;min-height:0}
.d-nav{flex:0 0 248px;background:var(--surface);border-right:1px solid var(--rule);padding:16px 12px}
.d-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.d-nav a{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 12px;border-radius:var(--r-control);
  color:var(--ink-2);text-decoration:none;font-size:14px;font-weight:500}
.d-nav a:hover{background:var(--ground);color:var(--ink)}
.d-nav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent-strong);font-weight:600}
.d-nav .n{margin-left:auto;font:500 12px var(--mono);color:var(--ink-3)}
.d-nav a[aria-current="page"] .n{color:var(--accent-strong)}
.d-nav .d-all{margin-top:8px;padding-top:8px;border-top:1px solid var(--rule)}
.d-content{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:20px;padding:28px 32px 0}
.d-head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px 24px}
.d-head>div:first-child{flex:1 1 360px;min-width:0}
.d-head .d-title{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.d-head .d-sub{margin-top:6px;font-size:15px;color:var(--ink-2)}
.d-actions{display:flex;flex-wrap:wrap;gap:10px}
.d-content>main{display:flex;flex-direction:column;gap:20px;min-width:0}
.d-foot{margin-top:auto;padding:18px 0 20px;font-size:12px;color:var(--ink-3)}
.d-foot a{color:var(--ink-3)}
.d-foot a:hover{color:var(--ink)}
.d-menu-btn{display:none}
@media (max-width:760px){
  .d-top{gap:8px;padding:0 12px}
  .d-place,.d-who{display:none}
  .d-menu-btn{display:inline-flex}
  .d-body{flex-direction:column}
  .d-nav{flex:none;border-right:0;border-bottom:1px solid var(--rule);padding:8px 12px}
  .d-nav:not(.open){display:none}
  .d-content{padding:20px 16px 0}
  h1{font-size:24px}
}
@media print{.d-top,.d-nav,.d-foot{display:none}.d-content{padding:0}}
/* A screen that serves a phone and a desk, opened at a desk (shared/seat.js, ADR 0129): its column takes the content's
   width, and its passes, moves and requests are a wide list, a row each across the panel, the card the phone draws
   for a row opened beneath it. At a phone's width the row's cells stack. */
body[data-shell="seat"]>.p-bar{visibility:hidden}
.d-content>main.p-main{flex:none;max-width:none;margin:0;padding:0}
.d-content>main.p-main input,.d-content>main.p-main select,.d-content>main.p-main button{min-height:40px;font-size:15px}
.d-list{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r-panel);overflow:hidden}
.d-row{border-top:1px solid var(--rule)}
.d-row:first-child{border-top:0}
.d-row.ask{box-shadow:inset 3px 0 0 var(--accent)}
.d-row-main{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;min-height:56px;padding:12px 20px;font-size:14px}
.d-cell{flex:1 1 120px;min-width:0;display:flex;flex-direction:column;gap:2px;color:var(--ink-2);overflow-wrap:anywhere}
.d-cell.d-lead{flex:2 1 220px;color:var(--ink)}
.d-cell.d-lead>strong,.d-cell.d-lead>b{font-weight:600;font-size:15px}
.d-cell.act{flex:0 1 auto;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.d-cell .pill{align-self:flex-start}
.d-more{padding:0 20px 16px}
.d-more>*{border-radius:var(--r-panel);background:var(--ground)}
.d-more[hidden]{display:none}
.d-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:20px;align-items:start}
.d-grid>div{display:flex;flex-direction:column;gap:16px;min-width:0}
@media (max-width:1100px){.d-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.d-row-main{padding:12px 16px}.d-cell.act{justify-content:flex-start}}

/* ------------------------------------------------------------------------------------------------- the phone shell */
/* Frontline and resident screens: an app bar of 64px, the content scrolling, the one action docked at the bottom.
   One thing per screen, 17px text, 56px rows and buttons. */
.p-shell{min-height:100vh;display:flex;flex-direction:column;background:var(--ground);font-size:17px;line-height:1.45}
.p-bar{position:sticky;top:0;z-index:5;flex:none;min-height:64px;display:flex;align-items:center;gap:8px;
  padding:8px 12px 8px 16px;background:var(--surface);border-bottom:1px solid var(--rule)}
.p-bar .p-title{flex:1;min-width:0;font:700 18px/1.25 var(--ui);overflow:hidden;text-overflow:ellipsis}
.p-bar .p-title small{display:block;font:500 13px/1.3 var(--mono);color:var(--ink-3)}
/* Where the page is, under its title (shared/where.js): the flat or party, and the site. */
.p-bar .p-title .p-sub{display:block;margin-top:2px;font:500 15px/1.3 var(--ui);color:var(--ink-2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.p-bar .icon-btn{width:44px;min-width:44px;min-height:44px}
/* A customer's logo (theme.js) leads the bar at 24 px high; on the narrowest phones it keeps to a mark's width, so the
   page's title is not squeezed to three lines beside it. */
@media (max-width:400px){.p-bar>#daiko-logo{max-width:44px;object-fit:contain;object-position:left center}}
.sync{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:var(--r-pill);
  background:var(--good-soft);color:var(--good-ink);font:600 12px/1 var(--mono);letter-spacing:.06em;flex:none}
.sync::before{content:"";width:7px;height:7px;border-radius:var(--r-pill);background:currentColor}
.sync.off{background:var(--ink);color:var(--surface)}
.sync.queued{background:var(--warning-soft);color:var(--warning-ink)}
.lang-btn{min-height:44px;padding:0 10px;border:0;background:var(--ground);font-size:14px}
/* The compact language button (shared/lang-btn.js): a globe and the code; pressed, the languages by their own names. */
.lang-menu{position:relative;flex:none}
.lang-btn{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink)}
.lang-list{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:200px;margin:0;padding:6px;list-style:none;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-panel);box-shadow:var(--shadow-2)}
.lang-list[hidden]{display:none}
.lang-list button{width:100%;min-height:44px;justify-content:flex-start;border:0;background:none;font-size:16px}
.lang-list button[aria-current="true"]{color:var(--accent-strong);font-weight:700}
.p-main{flex:1;padding:20px 16px 24px;display:flex;flex-direction:column;gap:16px;width:100%;max-width:560px;
  margin:0 auto}
.p-dock{position:sticky;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--surface);
  border-top:1px solid var(--rule)}
.p-dock button,.p-dock .button{width:100%;min-height:56px;border-radius:var(--r-big);font-size:18px}
.p-tabs{position:sticky;bottom:0;display:flex;height:64px;background:var(--surface);border-top:1px solid var(--rule)}
.p-tabs a,.p-tabs button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:64px;border:0;border-radius:0;background:none;color:var(--ink-3);font:600 12px var(--ui);text-decoration:none}
.p-tabs [aria-current="page"],.p-tabs [aria-selected="true"]{color:var(--accent-strong)}
.p-card{display:block;background:var(--surface);border-radius:var(--r-panel);padding:16px;color:var(--ink);
  text-decoration:none}
/* The skip link, out of sight until a keyboard reaches it. */
.d-skip:focus{position:fixed !important;top:8px;left:8px;width:auto;height:auto;padding:10px 14px;margin:0;clip:auto;
  z-index:50;background:var(--surface);color:var(--ink);border-radius:var(--r-control);box-shadow:var(--shadow-2)}

/* ----------------------------------------------------------------- the desktop shell's search, bell and layout (D2) */
/* Search in the top bar (design/mockups Desk): what the person may read, by kind; folded behind an icon on a phone. */
.d-find{position:relative;flex:0 100 420px;min-width:0}
/* Search and the place give way before a screen's own controls do: the picker keeps its size, and on a desktop the
   slot keeps the width of everything in it (a customer's logo and the picker), so the picker sits beside the bell
   and never under it. A fixed share was not enough: with a logo beside it the picker overflowed the share and the
   bell and its count were drawn over "English (US)". */
.d-slot .lang,.d-slot .lang select{flex:none}
.d-slot:has(.lang){min-width:150px}
@media (min-width:761px){.d-slot{flex:1 0 auto}}
.d-find-open{display:none}
.d-find-box{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 10px;border:1px solid var(--rule-strong);
  border-radius:var(--r-control);background:var(--ground);color:var(--ink-3)}
.d-find-box:focus-within{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
.d-find-box input{flex:1;min-width:0;min-height:38px;padding:0;border:0;background:transparent;box-shadow:none !important}
.d-find-box input:focus-visible{outline:none}
.d-kbd{font:500 12px/1 var(--mono);padding:3px 6px;border:1px solid var(--rule);border-radius:6px;color:var(--ink-3)}
.d-find-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;max-height:min(70vh,520px);overflow:auto;
  padding:6px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-panel);box-shadow:var(--shadow-2)}
.d-find-head{padding:10px 10px 4px;font:600 11px/1.3 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.d-find-list a{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border-radius:var(--r-control);
  color:var(--ink);text-decoration:none}
.d-find-list a:hover,.d-find-list a[aria-selected="true"]{background:var(--accent-soft);color:var(--ink)}
.d-find-list .icon{color:var(--ink-3);flex:none}
.d-find-text{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.d-find-text small{color:var(--ink-3);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d-find-none{padding:12px 10px;color:var(--ink-2)}
/* The bell and what it opens: the newest messages, unread marked with a dot and in words for a screen reader. */
.d-bell{position:relative}
.d-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:min(380px,calc(100vw - 24px));background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r-panel);box-shadow:var(--shadow-2);overflow:hidden}
.d-pop-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;border-bottom:1px solid var(--rule)}
.d-pop .list-rows{max-height:min(60vh,440px);overflow:auto}
.d-pop .list-rows a.row{align-items:flex-start;padding:12px 16px;min-height:0;font-size:14px}
.d-pop .empty{padding:20px 16px}
.d-dot{width:8px;height:8px;margin-top:6px;flex:none;border-radius:var(--r-pill);background:transparent}
.d-pop li.unread .d-dot{background:var(--accent)}
.d-pop li.unread .d-bell-text{font-weight:600}
.d-bell-text{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.d-pop-foot{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 16px;
  border-top:1px solid var(--rule);font-weight:600;text-decoration:none}
/* Simple or Full, in the person's menu. */
.d-mode{padding:6px 12px 12px;border-bottom:1px solid var(--rule);margin-bottom:6px}
.d-mode .label{font-size:12px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.d-mode .seg{display:flex}
.d-mode .seg button{flex:1;justify-content:center;min-height:36px}
.d-mode p{margin-top:8px;font-size:12px;line-height:1.4}
/* Full: every screen under its kind's heading. */
.d-nav.full{overflow-y:auto}
.d-nav-head{margin:16px 12px 6px;font:600 11px/1.3 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
/* What each role sees, a dialog over the page. */
.d-roles{width:min(760px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 48px);overflow:auto}
.d-roles-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.d-roles-head h2{font-size:22px}
.d-role .panel-head{padding:0}
.d-role-list>li{display:flex;align-items:center;gap:8px;min-height:44px;padding:2px 0}
.d-role-name{flex:1;min-width:0}
/* Below a wide screen the search folds behind its icon, so the bar keeps room for a screen's own controls. */
@media (max-width:1100px){
  .d-find{flex:0 0 auto;position:static}
  .d-find-open{display:inline-flex}
  .d-find-box{display:none}
  .d-find.open .d-find-box{display:flex;position:absolute;left:12px;right:12px;top:66px;z-index:31;background:var(--surface)}
  .d-find.open .d-find-list{left:12px;right:12px;top:114px}
  .d-find:not(.open) .d-find-list{display:none}
  .d-kbd{display:none}
}
/* A phone's top bar fits its width (390 and down to 360): the wordmark folds to the mark, the language picker keeps a
   compact width, a customer's logo stands in for Daiko's mark, and the inbox shortcut gives way to the sidebar's own
   entry on the narrowest phones. */
@media (max-width:760px){
  .d-top{gap:6px;padding:0 8px}
  .d-logo b{display:none}
  .d-slot:has(.lang){min-width:0}
  .d-slot img{max-width:56px;height:auto;max-height:28px;object-fit:contain}
  .d-me{width:46px}
  .d-icons{gap:2px}
}
@media (max-width:400px){
  .d-icons a.icon-btn[href*="/inbox"]{display:none}
  .d-top:has(.d-slot img) .d-logo{display:none}
  .d-slot{gap:6px}
}
/* The screen's language picker, mirrored in the person's menu (shell.js drawLang): on a phone the menu holds it and the
   bar does not, since a bar of five things left it "Eng..." and the title "Che... in or out". */
.d-menu-lang{display:none;flex-direction:column;gap:6px;padding:6px 12px 12px;border-bottom:1px solid var(--rule);
  margin-bottom:6px}
.d-menu-lang select{width:100%}
@media (max-width:760px){
  .d-slot .lang{display:none}
  .d-menu-lang:not([hidden]){display:flex}
}
/* The person's menu is the shell's own: an app's rules for its own <details> (borders, negative margins, a flex body,
   a coloured summary) never reach it. */
.d-top details.d-me{margin:0;padding:0;border:0;background:none}
.d-top details.d-me>summary{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;padding:0 6px;
  color:var(--ink);font-weight:600;font-size:inherit}
.d-top details.d-me>.d-menu{display:block}
/* A status pill stays on one line where there is room; on a phone a long one wraps inside its box rather than pushing
   the page sideways. */
.pill{max-width:100%}
@media (max-width:760px){.pill{white-space:normal}}
/* Under a finger rather than a mouse, every control is a target a gloved or wet thumb can take: 44 px at the least
   (NFR-DEV-004; tools/frontline.mjs measures it on every frontline screen). */
@media (pointer:coarse){
  button,.button,.btn,input,select,.check,.chip,.seg button,.toast button,.d-mode .seg button{min-height:44px}
  .icon-btn,.p-bar .icon-btn{width:44px;min-width:44px;min-height:44px}
  .d-logo{min-width:44px;min-height:44px;justify-content:center}
  .d-menu a,.d-menu button,.d-find-box,.d-find-box input,.d-slot .lang select{min-height:44px}
  /* Lists of targets stacked edge to edge: 48 px each, so a thumb between two rows still lands on one. */
  .d-nav a,.lang-list button,.d-find-list a{min-height:48px}
  button.link,.link-button{min-height:44px}
  .panel-foot a{display:inline-flex;align-items:center;min-height:44px}
  summary{min-height:44px;padding-block:10px}
}