/* The shared visual system. Surface, type, color and motion apply to every workspace view.
   Evidence overlays and chart series retain their distinct scientific encodings. */
/* Type: Fraunces (display: wordmark, page titles, large figures; the SOFT axis rounds its terminals like the emblem's
   cells) and Bricolage Grotesque (interface text; its optical-size axis keeps small table text calm). Self-hosted,
   OFL 1.1, see fonts/LICENSE.md. */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-var.woff2') format('woff2-variations'), url('fonts/fraunces-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolage-grotesque-var.woff2') format('woff2-variations'),
    url('fonts/bricolage-grotesque-var.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg: #f2f5f1;
  --sf: #fffefa;
  --sf2: #f6f8f4;
  --ink: #203c38;
  --mut: #58675f; /* >= 5:1 on every light surface, including --bl and the wash */
  --ln: #d8e1d8;
  --ln2: #e7ece4;
  --hema: #28665b;
  --bl: #e4eee7;
  --eos: #a74163;
  --eosl: #f8eaf0;
  --amb: #875d22;
  --ambl: #faf0df;
  --grn: #2c7055;
  --grnl: #e5f1e9;
  --s1: var(--hema);
  --s2: var(--eos);
  --s3: var(--amb);
  --paper: var(--bg);
  --inkd: #203c38;
  --font: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', sans-serif;
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --display-axes: 'SOFT' 100, 'WONK' 0;
  --radius: 18px;
  --glass: #fffefab8;
  --glass-edge: #ffffffdf;
  --glass-shadow: 0 4px 24px #244b3c0a, inset 0 1px 0 var(--glass-edge);
  --on-accent: #fffefa;
  --wash: #cbded16b;
  --rose-wash: #ecdde349;
  --shadow: 0 3px 16px #244b3c06;
  --spring: cubic-bezier(.22, 1.15, .36, 1);
  --ln-ctl: #7f8f88; /* form-control edges: >= 3:1 against the page (--ln is a divider, not a control boundary) */
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2358675f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme: light;
}
:root[data-theme='dark'] {
  --bg: #101e1d;
  --sf: #182b28;
  --sf2: #1d322e;
  --ink: #e7f0e8;
  --mut: #a4b8ac;
  --ln: #344a42;
  --ln2: #2a4038;
  --hema: #a1d7be;
  --bl: #263f34;
  --eos: #f0a4be;
  --eosl: #412c36;
  --amb: #e5bc7a;
  --ambl: #3c3325;
  --grn: #9ad4b2;
  --grnl: #263e32;
  --glass: #1a3029cc;
  --glass-edge: #b8e1c822;
  --on-accent: #15372d;
  --wash: #396c5130;
  --rose-wash: #8d50691c;
  --shadow: 0 3px 16px #0000000d;
  --ln-ctl: #6b8577;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a4b8ac' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #101e1d;
    --sf: #182b28;
    --sf2: #1d322e;
    --ink: #e7f0e8;
    --mut: #a4b8ac;
    --ln: #344a42;
    --ln2: #2a4038;
    --hema: #a1d7be;
    --bl: #263f34;
    --eos: #f0a4be;
    --eosl: #412c36;
    --amb: #e5bc7a;
    --ambl: #3c3325;
    --grn: #9ad4b2;
    --grnl: #263e32;
    --glass: #1a3029cc;
    --glass-edge: #b8e1c822;
    --on-accent: #15372d;
    --wash: #396c5130;
    --rose-wash: #8d50691c;
    --shadow: 0 3px 16px #0000000d;
    --ln-ctl: #6b8577;
    --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a4b8ac' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
body {
  background: radial-gradient(ellipse at 8% 0, var(--wash), transparent 48%),
    radial-gradient(ellipse at 95% 18%, var(--rose-wash), transparent 38%), var(--bg);
  background-attachment: fixed;
  font-size: 13px;
  line-height: 1.55;
}
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s; }
button:active:not(:disabled) { transform: translateY(1px); }
:focus-visible { outline: 2px solid var(--hema); outline-offset: 4px; }
html { scroll-padding-top: calc(var(--stick, 96px) + 16px); }
.workspace { margin-left: 0; min-height: calc(100vh - 94px); }

/* A single, floating navigation pill; the optical lens is a persistent moving surface. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(155px, 1fr) auto minmax(155px, 1fr);
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 22px 32px 18px;
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  border-bottom: 1px solid color-mix(in srgb, var(--ln) 65%, transparent);
}
.masthead .brand {
  display: flex;
  align-items: center;
  justify-self: start;
  padding: 0;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font: 600 27px/1 var(--display);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 96;
  letter-spacing: -.6px;
}
.masthead .brand img { width: 44px; height: 44px; object-fit: contain; }
.glass-nav {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 5px;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--ln);
  border-radius: 999px;
  background: var(--glass);
  box-shadow: var(--glass-shadow), 0 8px 30px #244b3c08;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.glass-nav::-webkit-scrollbar { display: none; }
.glass-nav button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  min-height: 40px;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--mut);
  font-size: 12px;
  font-weight: 600;
  box-shadow: none;
  white-space: nowrap;
}
@media (hover: hover) {
  .glass-nav button:hover { color: var(--ink); background: color-mix(in srgb, var(--bl) 60%, transparent); }
}
.glass-nav button[aria-current='page'] { color: var(--on-accent); background: transparent; box-shadow: none; }
.glass-nav .nav-s { display: none; } /* the short label (phones) */
.glass-nav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav-lens, .tab-lens {
  position: absolute;
  z-index: 0;
  top: 5px;
  bottom: 5px;
  left: 0;
  pointer-events: none;
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--hema) 85%, white), var(--hema));
  box-shadow: inset 0 1px 1px #ffffff55, inset 0 -1px 1px #00000018, 0 3px 9px #173e3020;
}
/* until glass.js has placed the lens (first paint, before the module runs) the current item carries its own fill */
.glass-nav:not([data-lens]) button[aria-current='page'] { background: var(--hema); }
.glass-nav .nav-count { min-width: 20px; padding: 1px 5px; margin: 0; font-size: 10px; color: var(--hema); background: var(--bl); box-shadow: none; }
.glass-nav .nav-count:empty { display: none; }
/* counts change while the page is open: tabular digits and a floor width keep the pill from shifting */
.glass-nav .nav-count { font-variant-numeric: tabular-nums; text-align: center; }
.glass-nav #queue-count { min-width: 28px; }
.glass-nav [aria-current='page'] .nav-count { background: color-mix(in srgb, var(--inkd) 30%, transparent); color: var(--on-accent); }
:root[data-theme='dark'] .glass-nav [aria-current='page'] .nav-count { background: color-mix(in srgb, var(--on-accent) 14%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .glass-nav [aria-current='page'] .nav-count { background: color-mix(in srgb, var(--on-accent) 14%, transparent); }
}
.glass-nav .nav-count.live, .glass-nav .nav-count.unread { background: var(--eosl); color: var(--eos); }
.masthead-tools { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.workspace-tag { font-size: 11px; letter-spacing: .4px; color: var(--mut); white-space: nowrap; }
.theme-toggle { display: grid; place-items: center; width: 36px; height: 36px; padding: 8px; border: 1px solid var(--ln); border-radius: 50%; background: var(--glass); box-shadow: var(--glass-shadow); }
@media (hover: hover) {
  .theme-toggle:hover { background: var(--bl); transform: rotate(-12deg); }
}
.theme-toggle svg { width: 16px; height: 16px; stroke: var(--hema); stroke-width: 1.5; fill: none; stroke-linecap: round; }
/* the icon names the theme the button switches to */
.theme-toggle .i-sun, :root[data-theme='dark'] .theme-toggle .i-moon { display: none; }
:root[data-theme='dark'] .theme-toggle .i-sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle .i-moon { display: none; }
  :root:not([data-theme='light']) .theme-toggle .i-sun { display: block; }
}
:root.theme-switching *, :root.theme-switching *::before, :root.theme-switching *::after { transition: none !important; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; animation-timing-function: ease-out; }

/* Utility and replay controls use the same surfaces, without competing with the navigation. */
.workspace-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 32px 0; max-width: 1664px; margin: auto; }
.data-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 0; margin: 0; border: 0; background: none; color: var(--mut); }
.data-status b { font-size: 11px; font-weight: 500; }
.data-status > span:last-child { font-size: 11px; color: var(--mut); margin: 0; }
.status-dot { width: 5px; height: 5px; margin: 0; background: var(--amb); }
.data-status[data-state='ready'] .status-dot { background: var(--grn); }
.kbd-help { color: var(--mut); margin: 0; font-size: 11px; line-height: 1.5; }
.kbd-help kbd { color: var(--mut); background: var(--sf); border-color: var(--ln-ctl); font-size: 11px; }
.topbar { position: relative; top: auto; min-height: 62px; margin: 0 auto; max-width: 1664px; padding: 12px 32px; background: transparent; border: 0; flex-wrap: wrap; gap: 12px; }
.tb-title { flex: 1 1 180px; }
.tb-title h1 { font-size: 14px; color: var(--ink); }
.tb-desc { color: var(--mut); font-size: 11px; }
.replay { flex: 0 1 auto; flex-wrap: wrap; }
.replay-state { font-size: 11px; }
.replay-state b { font-size: 11px; }
.inject { flex-wrap: wrap; }
.inject-label { display: inline; font-size: 10px; }
.rb { padding: 7px 10px; min-height: 32px; font-size: 11px; border-radius: 9px; background: var(--glass); }
.rb.primary, :root .btn.p { background: var(--hema); border-color: var(--hema); color: var(--on-accent); }
.rb.primary:hover:not(:disabled), :root .btn.p:hover:not(:disabled) { background: color-mix(in srgb, var(--hema) 88%, var(--ink)); }
.tb-right { gap: 10px; }
.clock { font-size: 11px; font-weight: 500; }
#connection { font-size: 10px; }
#connection::before { width: 5px; height: 5px; margin-right: 5px; }
#connection[data-quiet] { font-size: 0; } /* steadily connected: the dot alone (app.js) */
#connection[data-quiet]::before { margin-right: 0; }
.notice { padding: 8px 32px; border-block: 1px solid var(--ln2); background: color-mix(in srgb, var(--sf) 42%, transparent); font-size: 12px; white-space: nowrap; }
.notice [data-testid='banner-research'] { color: var(--mut); font-weight: 600; }
.wrap { max-width: 1664px; padding: 26px 32px 0; }
.quiet { font-size: 10px; border-top: 1px solid var(--ln); padding: 20px 0; margin-top: 32px; }

/* Worklist: the human task leads; live evidence and uncertainty are in plain sight. */
.wl-summary { border-radius: var(--radius); padding: 18px 20px; background: var(--glass); box-shadow: var(--glass-shadow); gap: 22px; }
.comp-head [data-testid='open-count'] { font-family: var(--display); font-weight: 500; font-size: 30px; }
.comp-bar { height: 6px; margin-block: 12px; border-radius: 10px; }
.comp-bar i { transition: flex-grow .25s ease-out; } /* the rows are patched in place, so arrivals now ease the bar */
.seg-t1 { background: var(--eos); }
.seg-t2 { background: color-mix(in srgb, var(--eos) 52%, var(--sf)); }
.seg-t3 { background: color-mix(in srgb, var(--amb) 60%, var(--sf)); }
.seg-t4 { background: color-mix(in srgb, var(--mut) 30%, var(--sf)); }
.next-btn { min-width: 205px; border-radius: 13px; padding: 11px 17px; }
.held-hint { font-size: 10px; margin: 12px 2px 18px; }
.wl-toolbar { gap: 9px; padding: 0; margin-bottom: 16px; }
.seg, .search, .sel select, .tog { border-radius: 10px; background-color: var(--glass); border-color: var(--ln-ctl); }
.seg { padding: 3px; gap: 2px; }
.seg button { border-radius: 7px; min-height: 29px; padding: 5px 10px; font-size: 11px; border: 0; }
.seg button[aria-pressed='true'] { background: var(--bl); color: var(--hema); box-shadow: 0 1px 3px #244b3c08; }
.search { min-height: 37px; }
.search input { font-size: 11px; }
.sel select { min-height: 37px; font-size: 11px; }
.tog { font-size: 11px; min-height: 37px; padding-inline: 9px 11px; } /* the same height as its neighbours */
.how { margin-left: 0; }
.wl-table-wrap { border-radius: 16px; box-shadow: var(--shadow); }
#app[data-replay-busy='true'] .wl-table-wrap { cursor: progress; opacity: .65; }
#app[data-replay-busy='true'] .wl-table tr.row { pointer-events: none; }
.wl-table thead th { height: 39px; font-size: 10px; letter-spacing: .25px; background: var(--sf2); }
.wl-table tr.row td { padding-block: 12px; font-size: 12px; }
.wl-table tr.grp th { background: var(--sf2); height: 34px; font-size: 11px; top: calc(var(--stick, 0px) + 39px); }
.wl-table tr.row td.c-set { overflow: visible; white-space: normal; }
.c-set .chips { flex-wrap: wrap; gap: 3px; }
.wl-table .chip { font-size: 10px; padding: 2px 6px; border-radius: 5px; }
.wl-table th.c-case { width: 178px; }
.wl-table th.c-lane { width: 115px; }
.wl-table th.c-p { width: 118px; }
.wl-table th.c-set { width: 150px; }
.wl-table th.c-next { width: 145px; }
.wl-table th.c-wait { width: 118px; }
.wl-table .cid { font-weight: 600; }
.wl-table td.c-p { text-overflow: clip; }
.wl-table td.c-p .mbar { width: 28px; }
@media (hover: hover) {
  tr.row:hover { background: var(--sf2); }
}
@media (hover: none) {
  /* touch: a tapped row keeps no hover fill (flow.css sets one for pointers) */
  .wl-table tr.row:hover { background: transparent; }
}

/* Case review and secondary screens share the same typography and surface scale. */
.card { border-radius: var(--radius); background: var(--sf); border-color: var(--ln); box-shadow: var(--shadow); }
.card h2, .cv .card h2, .mx h2 { color: var(--ink); font-family: var(--font); letter-spacing: -.25px; }
.card-h { border-color: var(--ln2); }
.btn { border-radius: 10px; padding: 7px 12px; min-height: 34px; font-size: 12px; }
.cv-header { border-radius: 20px; padding: 22px; }
.cv .cv-id h2 { font-family: var(--display); font-weight: 500; font-size: 26px !important; letter-spacing: -.7px; }
.cv-glance { background: var(--sf2); border-radius: 13px; padding: 12px 16px; }
.cv .tabs { position: relative; isolation: isolate; display: flex; width: fit-content; max-width: 100%; gap: 3px; margin: 18px 0 0; padding: 5px; border: 1px solid var(--ln); border-radius: 999px; background: var(--glass); overflow-x: auto; scrollbar-width: none; }
.cv .tabs button { position: relative; z-index: 1; flex: none; background: transparent; border: 0; border-radius: 999px; padding: 9px 17px; color: var(--mut); font-size: 12px; white-space: nowrap; }
.cv .tabs button[aria-selected='true'] { color: var(--on-accent); background: transparent; }
.cv .tabs .tab-n { background: var(--bl); color: var(--hema); }
.cv .tabs [aria-selected='true'] .tab-n { background: color-mix(in srgb, var(--on-accent) 18%, transparent); color: var(--on-accent); }
.cv .tab-lens { transition: none; }
.cv .cv-main { min-width: 0; }
.ai-card::before { height: 2px; background: linear-gradient(90deg, var(--hema), color-mix(in srgb, var(--hema) 20%, transparent)); }
.ai-mark { background: var(--hema); border-radius: 50%; width: 13px; height: 13px; box-shadow: 0 0 0 4px var(--bl); }
.ai-tabpanel { max-width: none; }
/* the plain-language card spans the panel so its edges line up with the case header; the text keeps a reading measure */
.ai-tabpanel .ai-card { max-width: none; margin-inline: 0; padding: 24px; }
.ai-tabpanel .ai-md { max-width: 100ch; }
.ai-md { font-size: 14px; }
.ai-foot { max-width: 100ch; }
.casebar { border-radius: 12px; background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.mock, .offline, .simbanner, .flag, .verdict { border-radius: 12px; }
.empty-state { border-radius: var(--radius); }
.empty-state h2 { font-family: var(--display); font-size: 25px; font-weight: 400; }
.toasts { z-index: 60; }
.toast-item { border-radius: 16px; box-shadow: var(--glass-shadow), 0 8px 28px #173e301a; }

@media (max-width: 1479px) {
  /* the brand and the theme button flank a centred nav; the workspace tag would push the nav out of its pill */
  .masthead { grid-template-columns: minmax(160px, 1fr) auto minmax(36px, 1fr); }
  .workspace-tag { display: none; }
}
@media (max-width: 1270px) {
  .masthead { gap: 12px; grid-template-columns: minmax(150px, 1fr) auto minmax(36px, 1fr); padding-inline: 24px; }
  .glass-nav { justify-self: center; }
  .glass-nav button { padding-inline: 12px; font-size: 11px; }
  .wl-table th.c-case { width: 155px; }
  .wl-table th.c-lane { width: 100px; }
}
@media (min-width: 1101px) {
  .wl-table th.c-lane, .wl-table tr.row td.c-lane { visibility: visible; font-size: 11px; padding-inline: 10px; }
  .wl-table .lane-inline { display: none; }
}
@media (max-width: 1180px) {
  /* labels only: every destination stays visible in one row down to tablet portrait */
  .glass-nav svg { display: none; }
}
@media (max-width: 1100px) {
  /* stacked rows: the group note wraps under the tier name instead of being cut off at a fixed height */
  .wl-table tr.grp th { top: var(--stick, 0px); height: auto; padding-block: 7px; }
  .wl-table tr.row td { padding-block: 0; }
}
@media (max-width: 1000px) {
  /* minmax(0, …): the nav row's full width must not widen the brand column (WebKit then scrolled the page sideways
     at 641–760 px); the nav scrolls inside its pill instead */
  .masthead { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 16px 24px 14px; }
  .glass-nav { grid-column: 1 / -1; grid-row: 2; width: fit-content; justify-self: center; }
  .masthead-tools { grid-column: 2; grid-row: 1; }
  .workspace-tag { display: inline; }
  .workspace-status, .topbar, .notice { padding-inline: 24px; }
  .wrap { padding-inline: 24px; }
  .topbar { gap: 12px; }
  .replay { order: 3; width: 100%; justify-content: space-between; }
  /* the frozen-section buttons take their own row; the divider would otherwise start a wrapped line */
  .inject { flex-basis: 100%; padding-left: 0; border-left: 0; }
  .tb-right { margin-left: auto; }
  .kbd-help { display: none; }
}
@media (max-width: 640px) {
  .masthead { gap: 12px; padding: 12px 16px; }
  .masthead .brand { font-size: 22px; }
  .masthead .brand img { width: 36px; height: 36px; }
  .workspace-tag { font-size: 11px; }
  .masthead-tools { gap: 10px; }
  .glass-nav { width: 100%; justify-self: stretch; }
  .glass-nav button { min-height: 39px; padding-inline: 12px; font-size: 11px; }
  .workspace-status { padding: 10px 16px 0; }
  .data-status > span:last-child { font-size: 11px; }
  .topbar { padding: 12px 16px; min-height: 0; }
  .tb-title { flex-basis: 140px; }
  .tb-right { display: flex; }
  .clock { display: none; }
  .replay { display: flex; flex-wrap: wrap; gap: 10px; }
  .replay-state { width: auto; flex: 1 1 auto; }
  .replay-btns { flex: none; }
  .inject { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border: 0; padding: 0; gap: 6px; }
  .inject-label { grid-column: 1 / -1; font-size: 10px; }
  .inject .rb { font-size: 10px; padding: 7px; justify-content: center; }
  .notice { padding: 7px 16px; font-size: 12px; }
  .wrap { padding: 22px 16px 0; }
  .wl-summary { padding: 16px; gap: 14px; }
  .next-btn { min-width: 0; }
  .wl-table tr.row td { padding-block: 0; }
  .wl-table tr.row { padding-block: 14px; }
  .wl-table th.c-case, .wl-table th.c-lane { width: auto; }
  .held-hint { font-size: 10px; }
  .cv-header { padding: 16px; }
  .cv .tabs { width: 100%; }
  .cv .tabs button { padding: 9px 11px; font-size: 11px; }
  .cv .cv-id h2 { font-size: 23px !important; }
  .ai-tabpanel .ai-card { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Type system: one display face with the emblem's soft terminals, one interface face. Figures stay tabular. */
body { font-family: var(--font); font-optical-sizing: auto; font-feature-settings: 'ss01'; }
h1, .mx-section-head h2, .cv .cv-id h2, .empty-state h2, .big, .bigp { font-family: var(--display); font-variation-settings: var(--display-axes); }
h1 { font-weight: 480; letter-spacing: -.02em; }
table, .num, time, [role=timer] { font-variant-numeric: tabular-nums; }
/* Badges inside display headings keep the interface face. */
h1 .tier, h2 .tier, h1 .pill, h2 .pill, h2 .chip { font-family: var(--font); font-variation-settings: normal; letter-spacing: 0; }
/* Phones: a compact wordmark so the masthead keeps one line per item. */
@media (max-width: 640px) {
  .masthead .brand { font-size: 21px; gap: 8px; }
  .masthead .brand img { width: 32px; height: 32px; }
}

/* Focus rings inside clipped containers (the nav pill, segmented controls) sit inside the control so they are not cut
   off; on the filled current destination the ring takes the text colour. */
.glass-nav button:focus-visible, .wl-toolbar .seg button:focus-visible, .leg:focus-visible { outline-offset: -3px; }
.glass-nav button[aria-current='page']:focus-visible { outline-color: var(--on-accent); }

/* Navigation that does not fit (phones) scrolls; a soft edge shows there is more in that direction. */
.glass-nav[data-fade='end'] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.glass-nav[data-fade='start'] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.glass-nav[data-fade='both'] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }

/* The workspace keeps at least a screen of height, so the footer is never on screen while a page loads and then
   pushed away by the content (the largest first-load layout shift). */
#app { min-height: calc(100vh - var(--stick, 96px)); }
:root[data-route='tcga'] .replay { display: none; }
/* the shortcut hint only where the shortcuts act (worklist, case, TCGA list); hidden, not removed, so nothing moves */
:is(:root[data-route='surgeon'], :root[data-route='oncologist'], :root[data-route='metrics'], :root[data-route='spotcheck']) .kbd-help { visibility: hidden; }

/* Worklist table: the legacy 740 px table minimum clipped the right-hand cells on 761–790 px screens. */
.tblw .wl-table { min-width: 0; }
.wl-table .cid { white-space: normal; line-height: 1.25; color: inherit; text-decoration: none; }
@media (hover: hover) {
  .wl-table a.cid:hover { text-decoration: underline; text-underline-offset: 2px; }
}
.cid-x { font-size: 11.5px; font-weight: 500; color: var(--mut); }
@media (min-width: 1361px) {
  .wl-table th.c-case { width: 212px; } /* a derived case id (BACH_0225_FSIM_resample3) on one line */
}
@media (min-width: 761px) {
  /* the whole toolbar on one line at 1280 px; the flag menu still lists its options in full */
  .wl-toolbar .search { width: 200px; }
  .wl-toolbar .sel select { width: 164px; }
}
@media (min-width: 1101px) {
  /* the frozen-section variant sits under the lane instead of being truncated to one letter */
  .wl-table tr.row td.c-lane { white-space: normal; line-height: 1.25; }
  .wl-table td.c-lane .variant { display: block; margin: 1px 0 0; font-size: 11px; }
}

/* What is narrowing the worklist, above it, each removable on its own. */
.wl-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: -6px 0 14px; font-size: 12px; color: var(--mut); }
.wl-active-n { margin-right: 2px; }
.wl-active-n b { color: var(--ink); font-weight: 650; }
.fchip { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 2px 4px 2px 10px; border: 1px solid color-mix(in srgb, var(--hema) 32%, var(--ln)); border-radius: 999px; background: var(--bl); color: var(--hema); font-size: 12px; font-weight: 600; }
.fchip span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 14px; line-height: 1; }
@media (hover: hover) {
  .fchip:hover span { background: color-mix(in srgb, var(--hema) 16%, transparent); }
}
.wl-active .linkbtn { font-size: 12px; margin-left: 2px; }

/* Loading placeholders in the shape of the worklist (no false "empty queue" or 0 count while it loads). */
.sk { display: block; height: 10px; flex: none; border-radius: 5px; background: linear-gradient(90deg, var(--ln2) 30%, color-mix(in srgb, var(--ln2) 35%, var(--sf)) 50%, var(--ln2) 70%) 0 0 / 300% 100%; animation: sk-shimmer 1.6s ease-in-out infinite; }
@keyframes sk-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.wl-loading .comp-head { align-items: center; flex-wrap: nowrap; gap: 14px; min-height: 36px; }
.wl-loading .comp-head .sk:last-child { flex: 0 1 auto; }
.wl-loading .sk-num { height: 26px; border-radius: 7px; }
.wl-loading .comp-legend { gap: 8px 18px; margin: 4px 0 0; min-height: 26px; align-items: center; }
.sk-btn { display: block; width: 205px; height: 52px; border-radius: 13px; background: color-mix(in srgb, var(--hema) 14%, var(--sf)); }
.wl-loading .wl-toolbar { min-height: 37px; }
.sk-ctl { height: 37px; border-radius: 10px; }
.sk-head { height: 39px; background: var(--sf2); border-bottom: 1px solid var(--ln); }
.sk-row { display: flex; align-items: center; gap: 24px; height: 41px; padding: 0 14px; border-bottom: 1px solid var(--ln2); }
.sk-row:last-child { border-bottom: 0; }
.sk-row .sk-sq { height: 22px; border-radius: 5px; }
.sk-row .sk:nth-child(3) { flex: 0 1 auto; }
.sk-row .sk-end { margin-left: auto; }
@media (max-width: 760px) {
  .sk-btn { width: 100%; }
  .wl-loading .wl-toolbar .sk:first-child { width: 100% !important; }
  .wl-loading .wl-toolbar .sk:not(:first-child) { display: none; }
  .sk-row .sk:nth-child(2) { width: 90px !important; }
}

@media (min-width: 761px) {
  /* notifications bottom right (the old offset assumed a side rail that no longer exists) */
  .toasts { left: auto; right: 24px; bottom: 24px; }
  /* the prioritisation popover opens rightward when the toolbar has wrapped it to the left edge (app.js) */
  .how-pop[data-ui-side='left'] { left: 0; right: auto; }
}

/* One select look in every engine: WebKit otherwise draws the native macOS control (about 20 px tall, padding and
   radius ignored). :root lifts the rule above the per-view "background:" shorthands that would erase the chevron. */
:root select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 28px;
  background-image: var(--chev);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
}

/* 200% zoom or a landscape phone: the sticky masthead would take a third of the height, so it scrolls away. */
@media (max-height: 560px) {
  .masthead { position: static; }
}

/* Replay status: each part keeps one width whatever its text (running / paused / ready, the clock, the speed), so the
   controls beside it do not shift; the first paint ("Checking simulator…") already has the final width. */
.replay-state b { min-width: 81px; }
.replay-state .rs-t { min-width: 50px; font-variant-numeric: tabular-nums; }
.replay-state .rs-x { min-width: 26px; font-variant-numeric: tabular-nums; }
.replay-state .rs-x:empty { display: none; } /* no speed while the replay clock is held */
@media (min-width: 761px) {
  #sim { min-width: 188px; }
}
/* A case opened directly: the case bar's place is kept from the first paint (case.css gives it its final height). */
:root[data-route='case'] #casebar[hidden]:not([data-off]) { display: flex; visibility: hidden; min-height: 51px; }
@media (max-width: 760px) {
  :root[data-route='case'] #casebar[hidden]:not([data-off]) { min-height: 88px; }
}

/* ---- Phones, tablets and touch screens --------------------------------------------------------------------------------- */
/* Phones and short landscape screens: the replay and frozen-section controls fold behind one button that reads the replay
   state ("Replay running +4:02"), so the first screen reaches the worklist. The button is not displayed elsewhere. */
.replay-toggle, .fold-note { display: none; }
.rt-chev { width: 10px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.replay-toggle[aria-expanded='true'] .rt-chev { transform: rotate(180deg); }
.replay-toggle[data-state='running'] .rs-dot { background: var(--grn); animation: pq-live 1.6s ease-in-out infinite; }
.replay-toggle[data-state='paused'] .rs-dot { background: var(--amb); }
@media (max-width: 640px), (max-width: 1000px) and (max-height: 500px) {
  .topbar { flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-block: 8px; }
  .tb-title { flex: 1 1 0; min-width: 0; }
  .tb-title h1 { overflow: hidden; text-overflow: ellipsis; }
  .replay-toggle {
    display: inline-flex;
    order: 1;
    flex: none;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--ln);
    border-radius: 999px;
    background: var(--glass);
    box-shadow: var(--glass-shadow);
    color: var(--mut);
    font-size: 12px;
    white-space: nowrap;
  }
  .replay-toggle b { min-width: 86px; color: var(--ink); font-weight: 600; text-align: left; }
  .replay-toggle .rs-t { min-width: 50px; color: var(--ink); font-variant-numeric: tabular-nums; text-align: left; }
  .replay-toggle .rs-t:empty { display: none; }
  .replay-toggle[hidden], :root[data-route='tcga'] .replay-toggle { display: none; }
  .tb-right { order: 2; }
  #connection:not([data-state='offline']) { font-size: 0; } /* the dot; "Reconnecting" stays spelled out */
  #connection::before { margin-right: 0; }
  #connection[data-state='offline']::before { margin-right: 5px; }
  .fold-note { display: inline; }
  /* the open controls: one panel under the title row */
  .replay {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    margin: 0;
    padding: 10px;
    gap: 8px;
    justify-content: flex-start;
    border: 1px solid var(--ln2);
    border-radius: 14px;
    background: color-mix(in srgb, var(--sf) 60%, transparent);
  }
  .replay-toggle[aria-expanded='false'] ~ .replay { display: none; }
  .replay .replay-state { display: none; } /* the button above already reads it */
  @media (max-width: 374px) {
    /* the narrowest phones: the button names the state, the open panel adds the replay clock and speed */
    .replay-toggle .rs-t { display: none; }
    .replay .replay-state { display: inline-flex; flex-basis: 100%; }
    .inject .rb { flex-direction: column; gap: 0; padding: 4px; line-height: 1.15; }
  }
  @media (max-width: 640px) {
    /* portrait phones: Start or Pause and Reset share the panel width */
    .replay-btns { flex: 1 1 auto; }
    .replay-btns .rb { flex: 1 1 0; justify-content: center; }
  }
  /* one line of data status, the detail cut short rather than wrapped */
  .workspace-status { padding-top: 8px; }
  .data-status { flex-wrap: nowrap; min-width: 0; }
  .data-status b { white-space: nowrap; }
  .data-status > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .notice { padding-block: 6px; }
  .wrap { padding-top: 14px; }
}
/* Tablets and phones: frozen sections are sent from the worklist and the operating-room board, and the data status is
   shown with the worklist; on the other pages neither takes a row of the first screen. */
@media (max-width: 1000px) {
  :root:not([data-route='worklist']):not([data-route='surgeon']) .inject { display: none; }
  :root:not([data-route='worklist']) .workspace-status { display: none; }
}
/* Phones: all six destinations in a 3 × 2 grid with short labels (the accessible names stay the full ones). The brand
   row scrolls away and only the navigation stays pinned (app.js syncStick sets --mast-hide). */
@media (max-width: 640px) {
  .masthead { top: calc(-1 * var(--mast-hide, 0px)); gap: 8px 12px; padding: 10px 16px; background: color-mix(in srgb, var(--bg) 92%, transparent); }
  .glass-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 4px; border-radius: 24px; overflow: visible; }
  .glass-nav button { justify-content: center; min-width: 0; padding-inline: 6px; gap: 5px; font-size: 12px; }
  .glass-nav .nav-l { display: none; }
  .glass-nav .nav-s { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .glass-nav .nav-count, .glass-nav #queue-count { min-width: 20px; padding-inline: 4px; }
}
/* Short landscape screens (phones on their side): brand, navigation and theme button share one row, with short labels. */
@media (max-width: 1000px) and (max-height: 500px) {
  .masthead { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 8px 20px; }
  .glass-nav { display: flex; grid-column: 2; grid-row: 1; justify-self: center; width: fit-content; padding: 5px; border-radius: 999px; overflow-x: auto; }
  .masthead-tools { grid-column: 3; grid-row: 1; }
  .workspace-tag { display: none; }
  .glass-nav button { padding-inline: 11px; font-size: 12px; }
  .glass-nav .nav-l { display: none; }
  .glass-nav .nav-s { display: inline; }
  .masthead .brand { font-size: 21px; }
  .masthead .brand img { width: 32px; height: 32px; }
}
/* See-through headers: opaque when the viewer asks for less transparency, or when the browser cannot blur behind them. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead, .mx-nav { background: var(--bg); }
}
@media (prefers-reduced-transparency: reduce) {
  .masthead, .mx-nav { background: var(--bg); }
}

/* Touch screens: controls are at least 44 px tall (a floor; the !important lifts it above per-view compact sizes), and
   text fields use 16 px so iOS does not zoom into a focused field. Desktop pointers keep the compact sizes. */
@media (pointer: coarse) {
  .btn:not(.cb-next), .rb, .seg button, .leg, .fchip, .mx-nav button, .mx-nav a, .glass-nav button, .replay-toggle { min-height: 44px !important; }
  .theme-toggle { width: 44px; height: 44px; }
  /* the worklist toolbar keeps one row height: a segmented control is its 44 px buttons plus a 1 px border */
  .wl-toolbar .seg { padding: 0; }
  .wl-toolbar .seg button { border-radius: 0; }
  .wl-toolbar .search, .wl-toolbar .sel select, .wl-toolbar .tog { min-height: 46px; }
  input, select, textarea { font-size: 16px !important; }
}
/* Keyboard shortcut hints (N, /, J and K) only where there is a keyboard to use them. */
@media (hover: none) and (pointer: coarse) {
  .kbd-help, button kbd, .search kbd { display: none !important; }
}
/* The case bar keeps the height reserved for it from the first paint (51 px, 88 px on phones; case.css): on touch screens
   its Back and Next buttons get a 44 px hit area without growing, and on the narrowest phones its position text is
   shortened so the bar keeps two rows. */
@media (max-width: 420px) {
  .cb-more { display: none; } /* "Case 3 of 24 open" stays on the back button's line */
}
@media (pointer: coarse) {
  .cb-back, .cb-next { position: relative; }
  .cb-back::after, .cb-next::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
}
/* Phones: the search field is the last control above the list it filters, so when it is focused (app.js scrolls it under
   the pinned navigation) the matching cases sit between it and the on-screen keyboard. */
@media (max-width: 760px) {
  .wl-toolbar .search { order: 1; }
}