/* The "current style" of the founder's workbench mock (decision D32): a navy menu, white panels, a blue primary, soft status pills, Inter at
   13.5 px with JetBrains Mono for numbers. One set of tokens (S3.6), then the controls, the sign-in page, the shell, the lists, the drawers,
   the dashboards, the Workbench and the administrator's screens. No rule below names a colour, a type size or a radius of its own. */

/* --- the tokens: each is defined once. light-dark() holds a token's two values; the theme follows the computer's light or dark setting,
   and data-theme="light" or "dark" on <html> fixes it. ----------------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;
  --page: light-dark(#F3F5F8, #0E1A28);
  --panel: light-dark(#FFFFFF, #152536);
  --panel-2: light-dark(#F8FAFC, #1A2D42);   /* table heads, a section's head, a chosen row */
  --sunk: light-dark(#E6EAF0, #1C2E42);      /* hovers, a track, a citation */
  --ink: light-dark(#0F172A, #F4EEDD);
  --ink-2: light-dark(#334155, #D5CFBE);
  --ink-3: light-dark(#5F6F86, #A4A89A);     /* muted text: the mock's #64748B made just dark enough for 4.5:1 on the page */
  --rule: light-dark(#E2E8F0, #2A3B50);
  --rule-strong: light-dark(#CBD5E1, #3F5473);
  --accent: #2563EB;
  --accent-hover: #1D4ED8;
  --accent-ink: #FFFFFF;                     /* text on the blue */
  --accent-text: light-dark(#2563EB, #7FA6F5); /* the blue as text or a line on a panel: lighter in the dark, so that it reads */
  --focus: light-dark(#2563EB, #7FA6F5);
  --sage: light-dark(#15803D, #86B081);  --sage-tint: light-dark(#DCFCE7, #243E26);
  --amber: light-dark(#B45309, #D6AA3B); --amber-tint: light-dark(#FEF3C7, #3B2E0F);
  --clay: light-dark(#B91C1C, #DA7D60);  --clay-tint: light-dark(#FEE2E2, #3B1D13);
  --grey: light-dark(#64748B, #9CA3AF);  --grey-tint: light-dark(#F1F5F9, #262B33); /* --grey marks (a dot), never text */
  /* the menu is navy in both themes, and so are its badges */
  --side: light-dark(#0F1B2D, #0B1522);
  --side-hover: #17263D;
  --side-ink: #C9D3E0;
  --side-mute: #8494AA;
  --side-line: #34465E;
  --side-strong: #FFFFFF;                    /* the menu's hover and focus */
  --count: #F59E0B;
  --count-ink: #0F172A;
  --count-alert: #B91C1C;
  --scrim: light-dark(rgba(15, 23, 42, 0.35), rgba(2, 6, 14, 0.6));

  --font-text: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace; /* case numbers, hashes, dates in tables */
  --font-mark: "Fraunces", Georgia, serif; /* the letter in the brand mark, nowhere else */
  /* the mock's type scale */
  --type-body: 13.5px;    /* the page's own text */
  --type-micro: 10px;     /* the uppercase labels: table heads, the menu's headings, a figure's name, a pipeline step */
  --type-pill: 10.5px;    /* status pills, a document's pages */
  --type-meta: 11px;      /* field labels, notes beside a heading, counts, citations, dates in a ladder */
  --type-note: 11.5px;    /* notes, hints, chips, small buttons, mono cells */
  --type-ui: 12px;        /* buttons, fields, secondary text */
  --type-table: 12.5px;   /* tables, tabs, a pipeline step's value */
  --type-nav: 13px;       /* the menu, a section's head, the case bar's values */
  --type-card: 14px;      /* a card's heading */
  --type-panel: 15px;     /* a panel's heading, the case number */
  --type-drawer: 18px;    /* a drawer's heading, the brand letter */
  --type-view: 22px;      /* a view's heading, a figure */
  --radius: 2px;          /* controls, chips, small boxes */
  --radius-card: 10px;    /* panels, cards, sections, the dropzone */
  --radius-pill: 999px;
  --radius-round: 50%;    /* dots */
  --pad-field: 7px 9px;
  --pad-button: 8px 12px;
  --pad-button-quiet: 7px 12px;
  --pad-button-small: 5px 10px;
  --touch: 44px;          /* the least height of a control a finger presses (phone width) */
  --icon: 16px;           /* an icon's side (app.js icon()) */
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--ink);
  font: 400 var(--type-body)/1.45 var(--font-text);
  font-variant-numeric: tabular-nums;
}

::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
input, select, textarea { caret-color: var(--accent); accent-color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
[hidden] { display: none !important; } /* a class that sets display would otherwise show what app.js has hidden */
.mono { font-family: var(--font-mono); font-size: var(--type-ui); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1, h2, h3 { margin: 0; font: 600 var(--type-card)/1.3 var(--font-text); letter-spacing: -0.01em; }
h2 { margin: 0 0 10px; }
.muted { margin: 6px 0 0; color: var(--ink-3); }

/* --- controls ---------------------------------------------------------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 4px; }
label { font-size: var(--type-meta); color: var(--ink-3); }
input, select, textarea {
  width: 100%;
  padding: var(--pad-field);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: var(--type-ui);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
input[readonly] { background: var(--panel-2); color: var(--ink-2); }
select:disabled, input:disabled { opacity: 0.6; cursor: not-allowed; }
textarea { resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; }
input[type="file"] { padding: 4px; }
input[type="file"]::file-selector-button { margin-right: 10px; padding: var(--pad-button-small); border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--panel); color: var(--ink-2); font: inherit; font-size: var(--type-note); cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: var(--panel-2); }
input[type="date"] { padding-block: 6px; } /* the browser adds 1 px above and below the date inside: this keeps it as tall as the other fields */

/* Every button is the blue primary unless it says otherwise: .quiet is the outlined one, .small the compact one. */
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--pad-button);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font: 500 var(--type-ui)/1.45 var(--font-text);
  text-decoration: none;
  cursor: pointer;
}
button:hover, .button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button:disabled { opacity: 0.55; cursor: not-allowed; }
button.quiet, .button.quiet {
  padding: var(--pad-button-quiet);
  border-color: var(--rule-strong);
  background: transparent;
  color: var(--ink-2);
  font-weight: 400;
}
button.quiet:hover, .button.quiet:hover { background: var(--panel-2); border-color: var(--rule-strong); }
button.small, .button.small, button.quiet.small, .button.quiet.small { padding: var(--pad-button-small); font-size: var(--type-note); }
button.wide { flex: 1; }
button.link { padding: 4px 6px; border: 0; background: transparent; color: var(--ink-2); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
button.link:hover { background: transparent; color: var(--clay); }

/* A callout: a tinted box with the mock's 3 px rule at its left. Amber says what happened, clay what is wrong or missing, sage what is done. */
.notice, .progress { margin: 0; padding: 10px 12px; border-left: 3px solid var(--amber); background: var(--amber-tint); color: var(--ink); font-size: var(--type-ui); }
.notice:has(> .problem) { border-left-color: var(--clay); background: var(--clay-tint); } /* app.js's say(): what went wrong, not what happened */
.warn-box, .checks, .chain-gap, .state-note.problem, .s-row blockquote, .panel[data-state="error"] .state-note {
  margin: 0; padding: 10px 12px; border: 0; border-left: 3px solid var(--clay); border-radius: 0; background: var(--clay-tint); color: var(--ink); font-size: var(--type-ui);
}
p.checks.ok, .reveal { margin: 0; padding: 10px 12px; border-left: 3px solid var(--sage); background: var(--sage-tint); color: var(--ink-2); font-size: var(--type-ui); }
.notice:empty { padding: 0; border: 0; } /* always in the page (a screen reader announces text put into it), with no box until it has text */
.card .notice:empty { margin-top: -16px; } /* ...and no gap of its own either */
.drawer .notice:empty { margin-top: -14px; }
.note-box { margin: 0; padding: 4px 10px; border-left: 2px solid var(--rule-strong); font-size: var(--type-note); color: var(--ink-3); }
.hint { margin: 0; font-size: var(--type-note); color: var(--ink-3); }

/* --- sign in and the new password: a card on its own page, with the same fields and buttons as everywhere else ------------------------ */

main.entry { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 32px 16px; }
body[data-view="app"] main.entry { display: none; }
main.entry:not(:has(form:not([hidden]))) .entry-brand { visibility: hidden; } /* before the script knows who is signed in, the brand does not flash alone */
.entry-brand { display: flex; align-items: center; gap: 10px; margin: 0; }
.card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
}
.card h1 { font-size: var(--type-view); }
.card .muted { margin-top: 6px; font-size: var(--type-ui); }

.brand-mark {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border-radius: var(--radius); background: var(--accent); color: var(--accent-ink);
  font: 600 var(--type-drawer)/1 var(--font-mark);
}
.brand-name { font: 600 var(--type-panel)/1.1 var(--font-text); letter-spacing: -0.01em; white-space: nowrap; }
.entry-brand .brand-name { color: var(--ink); }

/* --- the shell: the menu on the left (220 px, 64 px when collapsed) and one view on the right ------------------------------------------- */

.app { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; min-height: 100vh; }
.app.collapsed { grid-template-columns: 64px minmax(0, 1fr); }

.side {
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
  padding: 14px 12px;
  background: var(--side); color: var(--side-ink);
  scrollbar-color: var(--side-line) transparent;
}
.side .brand-name { color: var(--side-ink); font-size: var(--type-card); overflow: hidden; text-overflow: ellipsis; } /* the chamber's name whole beside the button (S3.21) */
.side-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-text { min-width: 0; }
.brand-sub { margin-top: 2px; font-size: var(--type-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--side-mute); white-space: nowrap; }
.side-body { flex: 1; display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.side-label { margin: 0 0 8px; font: 600 var(--type-micro)/1.45 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--side-mute); }
.side :focus-visible { outline-color: var(--side-strong); }

/* an icon (app.js icon()): a stroke in the colour of the text around it */
.icon { width: var(--icon); height: var(--icon); flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* a button that is only an icon (app.js iconButton(), and the menu's and the drawers' own): bordered on a panel, navy in the menu; the one
   that takes something out is borderless until it is pointed at, and goes clay then */
.icon-btn {
  width: 30px; height: 30px; flex: none; padding: 0;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: transparent; color: var(--ink-2);
}
.icon-btn:hover { background: var(--panel-2); border-color: var(--rule-strong); color: var(--ink); }
.icon-btn .word { display: none; }
.icon-btn.remove { border-color: transparent; color: var(--ink-3); }
.icon-btn.remove:hover { border-color: transparent; background: var(--clay-tint); color: var(--clay); }
.side .icon-btn { border-color: var(--side-line); color: var(--side-ink); }
.side .icon-btn:hover { background: var(--side-hover); border-color: var(--side-line); color: var(--side-strong); }

/* the keyboard's tooltip (app.js placeTip()) */
.tip { position: fixed; z-index: 60; max-width: 260px; padding: 4px 8px; border-radius: var(--radius); background: var(--ink); color: var(--page); font-size: var(--type-note); line-height: 1.4; pointer-events: none; }

.side nav a, .side-new {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: var(--side-ink); font-size: var(--type-nav); text-decoration: none;
}
.side nav a .label { flex: 1; min-width: 0; }
.side nav a:hover, .side-new:hover { background: var(--side-hover); }
.side nav a.active { background: var(--accent); color: var(--accent-ink); }
.side nav a[aria-disabled="true"] { cursor: not-allowed; }
.side nav a[aria-disabled="true"]:not(.active) { color: var(--side-mute); }
.side nav a[aria-disabled="true"]:not(.active):hover { background: transparent; }
.side-new { justify-content: center; background: var(--accent); color: var(--accent-ink); font-weight: 500; }
.side-new:hover { background: var(--accent-hover); }
.count { padding: 1px 6px; border-radius: var(--radius); background: var(--count); color: var(--count-ink); font-size: var(--type-meta); font-weight: 600; }
.count.alert { background: var(--count-alert); color: var(--side-strong); }

.recent a { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-left: 2px solid transparent; color: var(--side-ink); text-decoration: none; }
.recent a:hover { background: var(--side-hover); }
.recent a.on { border-left-color: var(--accent); background: var(--side-hover); }
.recent .n { font: 400 var(--type-ui) var(--font-mono); overflow: hidden; text-overflow: ellipsis; }
.recent .s { font-size: var(--type-meta); color: var(--side-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--side-line); font-size: var(--type-ui); color: var(--side-mute); }
.me { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--side-ink); }
.av { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); font-size: var(--type-meta); font-weight: 600; }
.me-text { min-width: 0; }
.me-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-sub { font-size: var(--type-micro); color: var(--side-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.logout { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--side-ink); font-weight: 400; }
button.logout:hover { background: none; color: var(--side-strong); }

/* collapsed: only the icons of the entries are left (each is named by its title and aria-label: app.js nameLinks()) */
.app.collapsed .side { align-items: center; padding: 14px 10px; }
.app.collapsed .side-top { flex-direction: column; }
.app.collapsed .brand-text, .app.collapsed .side-label, .app.collapsed .recent, .app.collapsed .me-text,
.app.collapsed button.logout, .app.collapsed .side nav a .label, .app.collapsed .side-new .label, .app.collapsed .count { display: none; }
.app.collapsed .side-body { align-items: center; }
.app.collapsed .side nav a, .app.collapsed .side-new { justify-content: center; padding: 8px 0; width: 44px; }

.content { grid-column: 2; min-width: 0; }
.content > .notice { margin: 14px 26px 0; }
.content > .notice:empty { display: none; }

/* Report an issue (S3.17): the menu's last entry since S3.21 (an icon and its words; the icon alone in the collapsed menu), and the
   dialog it opens (the browser's own modal, over the page's scrim colour) */
button.side-issue { align-self: stretch; justify-content: flex-start; gap: 8px; padding: 6px 0; border: 0; background: none; color: var(--side-mute); font-weight: 400; }
button.side-issue:hover { background: none; color: var(--side-strong); }
.app.collapsed .side-issue .label { display: none; }
.app.collapsed button.side-issue { justify-content: center; padding: 8px 0; }
dialog.dialog { width: min(520px, calc(100% - 32px)); padding: 20px 22px; border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--panel); color: var(--ink); }
dialog.dialog::backdrop { background: var(--scrim); }
dialog.dialog > form { display: flex; flex-direction: column; gap: 14px; }
dialog.dialog h2 { margin: 0; font-size: var(--type-drawer); }
dialog.dialog .notice:empty { margin-top: -14px; }
.issue-context { margin: 0; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel-2); color: var(--ink-2); font-size: var(--type-note); overflow-wrap: anywhere; }
.issue-context-label { display: block; margin-bottom: 2px; color: var(--ink-3); font-size: var(--type-micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.view { min-width: 0; padding: 22px 26px 30px; display: flex; flex-direction: column; gap: 18px; }
.view-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.view-head h1 { font-size: var(--type-view); line-height: 1.45; font-weight: 600; letter-spacing: -0.01em; }
.view-head h1:focus { outline: none; }
.view-head p { margin: 4px 0 0; max-width: 60ch; font-size: var(--type-ui); color: var(--ink-3); }

/* the chips above a list */
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
button.filter { padding: var(--pad-button-small); border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--page); color: var(--ink-2); font-size: var(--type-note); font-weight: 400; }
button.filter:hover { background: var(--sunk); border-color: var(--rule-strong); }
button.filter.on { border-color: var(--ink); background: var(--ink); color: var(--page); }
button.filter:disabled { opacity: 0.5; cursor: not-allowed; }

/* A panel is real content, loading, empty or an error. Loading is a quiet line; empty is the mock's dashed box (the dropzone's); an error
   is a clay callout with Try again under it. */
.panel { min-width: 0; }
.state-note { margin: 0; padding: 18px; border: 1px dashed var(--rule-strong); border-radius: var(--radius-card); background: var(--panel); color: var(--ink-3); font-size: var(--type-ui); }
.panel[data-state="loading"] > .state-note { padding: 4px 0; border: 0; background: transparent; }
.panel[data-state="error"] { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.panel[data-state="error"] .state-note { width: 100%; }

/* --- tables (every list, and the administrator's) ------------------------------------------------------------------------------------- */

table.cases { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--rule); font-size: var(--type-table); }
table.cases th { padding: 9px 12px; text-align: left; background: var(--panel-2); border-bottom: 1px solid var(--rule); color: var(--ink-3); font-size: var(--type-micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
table.cases td { padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
table.cases tbody tr:last-child td { border-bottom: 0; }
table.cases tbody tr[data-open] { cursor: pointer; }
table.cases tbody tr:hover, table.cases tbody tr.open { background: var(--panel-2); }
table.cases td.mono { font-size: var(--type-note); white-space: nowrap; }
table.cases td.muted { margin: 0; color: var(--ink-3); white-space: nowrap; }
table.cases td.nowrap { white-space: nowrap; }
table.cases a { color: var(--ink); font-weight: 500; text-decoration: none; text-underline-offset: 3px; }
table.cases a:hover { text-decoration: underline; }
table.cases a.button { text-decoration: none; }
table.cases td.act { text-align: right; white-space: nowrap; }
table.cases td button.link { padding: 0; text-align: left; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }

/* a status, as a soft pill: the tint says where the case stands */
.chip { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--grey-tint); color: var(--ink-3); font-size: var(--type-pill); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.chip.wait, .chip.draft, .chip.awaiting_approval, .chip.final_awaiting_approval { background: var(--amber-tint); color: var(--amber); }
.chip.ok, .chip.approved, .chip.final_approved, .chip.final_sent, .chip.completed { background: var(--sage-tint); color: var(--sage); }
.chip.bad, .chip.returned { background: var(--clay-tint); color: var(--clay); }

/* --- the dashboards (S3.3): the mock's figures, its two boxes and its table of offices ------------------------------------------------- */

.dash { display: flex; flex-direction: column; gap: 18px; }
.kpis { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--panel); }
.kpi .k { font-size: var(--type-micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.kpi .v { font: 500 var(--type-view)/1.2 var(--font-mono); }
.kpi .d { font-size: var(--type-meta); color: var(--ink-3); }
.kpi .d.late { color: var(--amber); font-weight: 600; }
.dash-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.dash-card h2 { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; font-size: var(--type-panel); }
.dash-card .state-note { padding: 12px; }
.bars, .feed { margin: 0; padding: 0; list-style: none; }
.bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr) 2.25rem; gap: 10px; align-items: center; font-size: var(--type-ui); }
.bar-row .track { height: 10px; background: var(--sunk); }
.bar-row .fill { display: block; height: 100%; background: var(--ink-2); }
.bar-row .fill.wait { background: var(--amber); }
.bar-row .n { font: 500 var(--type-ui) var(--font-mono); text-align: right; }
.bar-row .n.zero { font-weight: 400; color: var(--ink-3); }
.feed li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--rule-strong); font-size: var(--type-ui); }
.feed li:last-child { border-bottom: 0; }
.feed .what { min-width: 0; overflow-wrap: anywhere; }
.feed .when { flex: none; color: var(--ink-3); white-space: nowrap; }
.feed a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; white-space: nowrap; } /* a case number never breaks at its hyphens */
.feed a:hover { text-decoration-color: currentColor; }
table.offices tbody tr:hover { background: transparent; }
.routing { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.routing .sub { font-size: var(--type-meta); }

@media (min-width: 900px) {
  .dash-two { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .dash-two.alone { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) { /* the name and the count on one line, the bar under them */
  .bar-row { grid-template-columns: minmax(0, 1fr) 2.25rem; row-gap: 4px; }
  .bar-row .name { grid-area: 1 / 1; }
  .bar-row .n { grid-area: 1 / 2; }
  .bar-row .track { grid-area: 2 / 1 / 3 / 3; }
}

/* --- the drawers: New case, Add user, and the Workbench's ------------------------------------------------------------------------------- */

.scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); }
.drawer { position: fixed; top: 0; right: 0; z-index: 41; width: min(440px, 100%); height: 100dvh; overflow-y: auto; padding: 20px 22px; background: var(--panel); border-left: 1px solid var(--rule); }
.drawer > form { min-height: 100%; display: flex; flex-direction: column; gap: 14px; }
.drawer h2 { margin: 0; font-size: var(--type-drawer); }
.drawer h2:focus { outline: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.drawer-fields { display: flex; flex-direction: column; gap: 14px; min-width: 0; border: 0; margin: 0; padding: 0; }
.drawer-fields[disabled] { opacity: 1; } /* the docket is fixed once the case exists; it still reads as it did */
.drawer-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.drawer-actions .wide { min-width: 140px; }

/* choosing and sending files (the drawer and the case screen) */
.dropzone { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px; border: 1px dashed var(--rule-strong); border-radius: var(--radius-card); background: var(--page); text-align: center; font-size: var(--type-ui); color: var(--ink-3); }
.dropzone.over { border-color: var(--accent-text); background: var(--sunk); }
.dropzone p { margin: 0; }
.row { display: flex; flex-wrap: wrap; gap: 8px; }
.dropzone .row { justify-content: center; }
.stage { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
#new-stage { display: flex; flex-direction: column; gap: 10px; }
.stage > button, #new-stage > button { align-self: flex-start; }
.stage-note { margin: 0; font-size: var(--type-ui); color: var(--ink-3); }
.stage-note:empty { display: none; }
.stage-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.stage-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel); font-size: var(--type-ui); }
.stage-list .name { flex: 1 1 140px; overflow-wrap: anywhere; }
.stage-list .meta, .stage-list .status { font-size: var(--type-meta); color: var(--ink-3); }
.stage-list li.failed .status { flex-basis: 100%; }
.stage-list .icon-btn { margin-block: -4px; } /* the row is no taller for its button */
.stage-list li.done .status { color: var(--sage); }
.stage-list li.failed { border-color: var(--clay); }
.stage-list li.failed .status { color: var(--clay); }

/* --- cards: one look for every box with a heading (a pane, a dashboard card, a card of the Workbench's right column); a fieldset is no box -- */

.pane, .dash-card, .rail-card { min-width: 0; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px; border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--panel); }
.pane { display: block; }
.pane h2 { font-size: var(--type-panel); }
.case-line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.viewer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.viewer-bar input { width: 80px; }
iframe.pdf { display: block; width: 100%; height: 70vh; min-height: 420px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--panel); }

/* the report (S1.3): progress, the checks' flags, the versions, the text with its citation chips, the editor */
.report { display: flex; flex-direction: column; gap: 12px; }
.report .progress, .rail-card .progress { font-weight: 500; }
/* a running job's line, the report's and the opinion's (S3.21): it breathes, and a thin bar runs along its foot; the line is only there
   while a job runs, so nothing moves otherwise; and nothing moves for whoever asks for less motion */
@keyframes working { 50% { background: color-mix(in srgb, var(--amber-tint) 45%, var(--panel)); } }
@keyframes running-bar { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
p.progress { position: relative; overflow: hidden; animation: working 2.4s ease-in-out infinite; }
p.progress::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38%; height: 2px; background: var(--amber); animation: running-bar 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { p.progress { animation: none; } p.progress::after { display: none; } }
.report .row { align-items: center; }
/* the version control, "Edit all" and "Download Word" sit on the document's heading line (web/opinion.js documentPane); the select says
   what it is by itself, and who made the version is its tooltip */
.version-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; min-width: 0; }
.version-wrap { min-width: 0; display: inline-flex; }
select.version-pick { width: auto; max-width: 15rem; padding: 3px 5px; font-size: var(--type-note); }
.checks p { margin: 0; }
/* the checks' points, an accordion (S3.21, web/report.js flagBox): the red header with the count, open until it is folded */
details.checks > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; color: var(--ink-2); list-style: none; cursor: pointer; }
details.checks > summary::-webkit-details-marker { display: none; }
details.checks > summary::before { content: "▾"; width: 12px; flex: none; color: var(--clay); }
details.checks:not([open]) > summary::before { content: "▸"; }
details.checks > summary strong { color: var(--clay); }
.checks ul { margin: 6px 0 0; padding-left: 18px; }
.checks li { overflow-wrap: anywhere; }
.markdown { line-height: 1.6; overflow-wrap: anywhere; }
.markdown h3 { margin: 22px 0 8px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: var(--type-panel); }
.markdown h3:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.markdown h4, .markdown h5, .markdown h6 { margin: 14px 0 6px; font-family: var(--font-text); font-size: inherit; font-weight: 600; text-transform: none; letter-spacing: 0; }
.markdown p { margin: 0 0 10px; }
.markdown ul { margin: 0 0 10px; padding-left: 20px; }
.markdown li { margin: 2px 0; }
.markdown li.numbered { list-style: none; margin-left: -16px; }
.markdown li.nested { margin-left: 18px; }
.markdown hr { border: 0; border-top: 1px solid var(--rule); margin: 16px 0; }
.table-wrap { margin: 0 0 12px; overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: var(--type-table); }
.table-wrap th { padding: 6px 8px; text-align: left; vertical-align: bottom; background: var(--panel-2); border-bottom: 1px solid var(--rule); font-weight: 600; color: var(--ink-2); }
.table-wrap td { padding: 6px 8px; vertical-align: top; border-bottom: 1px solid var(--rule); overflow-wrap: normal; min-width: 80px; }
.table-wrap tr:last-child td { border-bottom: 0; }
.cite { display: inline-flex; align-items: center; gap: 3px; margin: 1px 0; padding: 0 6px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--sunk); color: var(--ink-2); font: 400 var(--type-meta)/1.6 var(--font-mono); white-space: nowrap; vertical-align: baseline; }
.cite .icon { width: 1.1em; height: 1.1em; } /* the page icon of a chip (S3.21), as tall as its number */
button.cite { cursor: pointer; }
button.cite:hover { background: var(--panel); border-color: var(--accent-text); color: var(--accent-text); }
.cite.broken { border-style: dashed; border-color: var(--clay); color: var(--clay); background: transparent; }
.report-form { display: flex; flex-direction: column; gap: 10px; }
textarea.report-text { min-height: 60vh; font: 400 var(--type-table)/1.5 var(--font-mono); }

/* the middle column's Report | Opinion switch, and the opinion panel (S2.2), which otherwise wears the report's classes */
.pane-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 4px; margin-bottom: 10px; }
.pane-head h2 { margin: 0 2px 0 0; }
.pane-tools { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: 4px; } /* takes what the line has left; when its own width does not fit, it goes to a line of its own */
.reading-toggle[aria-pressed="true"] { background: var(--sunk); border-color: var(--ink-2); color: var(--ink); }
a.icon-btn { display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); text-decoration: none; }
.switch { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.switch button { padding: var(--pad-button-small); border: 0; border-radius: 0; background: var(--panel); color: var(--ink-2); font-size: var(--type-note); font-weight: 400; }
.switch button + button { border-left: 1px solid var(--rule-strong); }
.switch button:hover { background: var(--panel-2); }
.switch button[aria-selected="true"] { background: var(--ink); color: var(--page); }
.switch button:focus-visible { outline-offset: -2px; }

/* the forms of the Case status card and the drawer, and the accepted 30-year flag of the report */
.strip-form { display: flex; flex-direction: column; gap: 8px; }
.checks .accepted { color: var(--sage); font-weight: 500; }
button.flag-link { display: block; width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; text-decoration: underline dotted var(--ink-3); text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
button.flag-link:hover { background: transparent; color: var(--clay); text-decoration-style: solid; text-decoration-color: currentColor; }
@keyframes landed { from { outline-color: var(--accent-text); } to { outline-color: transparent; } }
.sec.landed { outline: 2px solid transparent; outline-offset: 2px; animation: landed 1.6s ease-out; }
@keyframes line-landed { from { background: var(--amber-tint); } to { background: transparent; } }
.sec-body .landed { animation: line-landed 2.4s ease-out; } /* the line a citation's flag names (S3.19) */
@media (prefers-reduced-motion: reduce) { .sec.landed { animation: none; } .sec-body .landed { animation: none; background: var(--amber-tint); } }
.confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.confirm span { font-weight: 500; }
label.confirm { font-size: var(--type-ui); color: var(--ink-2); }

/* --- the Workbench (S3.9): the case bar, the pipeline strip, three columns, the drawer at the right -------------------------------------- */

#screen-case { padding: 0; gap: 0; }
#case-panel:not([data-state="real"]) { margin: 22px 26px 30px; }
/* two lines: the case number over the bank, office and property, and beside them the borrower, the reference, the date received and who
   opened the case, with the buttons at the right; where the line is too short the stats wrap */
.case-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 12px 22px; border-bottom: 1px solid var(--rule); }
.case-bar-rest { display: contents; }
.case-id { flex: 1.4 1 200px; min-width: 0; }
.case-id h1 { font: 500 var(--type-panel)/1.4 var(--font-mono); letter-spacing: 0; }
.case-id h1:focus { outline: none; }
.case-id .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 2px; font-size: var(--type-note); color: var(--ink-3); }
.case-id .meta b { color: var(--ink-2); font-weight: 500; }
.case-id .meta .part { white-space: nowrap; } /* the bank, "Branch: name" and the office each stay on one line (S1.13) */
.case-stat { flex: 1 1 110px; max-width: 20rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.case-stat .label { font-size: var(--type-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.case-stat .value { font-size: var(--type-nav); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-stat .value.mono { font-size: var(--type-ui); }
.case-stat .value.unknown { color: var(--ink-3); }
.case-actions { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.case-actions:empty { display: none; }

.workbench > .notice { margin: 12px 22px 0; }
.pipe { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 10px 22px 12px; border-bottom: 1px solid var(--rule); background: var(--panel); }
.pipe:empty { display: none; }
.pipe-step { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 0 14px 0 0; }
button.pipe-step { align-items: stretch; justify-content: flex-start; border: 0; border-radius: 0; background: transparent; color: inherit; font-weight: 400; text-align: left; }
button.pipe-step:hover { background: transparent; }
button.pipe-step:hover .v { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.pipe-step + .pipe-step { padding-left: 14px; border-left: 1px solid var(--rule); }
.pipe-step .label { display: flex; align-items: center; gap: 6px; overflow: hidden; color: var(--ink-3); font-size: var(--type-micro); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.pipe-step .dot { width: 6px; height: 6px; flex: none; border-radius: var(--radius-round); background: var(--rule-strong); }
.pipe-step.done .dot { background: var(--sage); }
.pipe-step.now .dot { background: var(--accent-text); }
.pipe-step.warn .dot { background: var(--amber); }
.pipe-step .v { overflow: hidden; color: var(--ink-3); font-size: var(--type-table); white-space: nowrap; text-overflow: ellipsis; } /* cut short as the mock does; the whole value is its title */
.pipe-step.done .v, .pipe-step.now .v { color: var(--ink); }
.pipe-step.warn .v { color: var(--amber); }

.wb { display: grid; grid-template-columns: 290px minmax(0, 1fr) 304px; } /* the right column 56 px narrower than before, and the report the wider for it (D49) */
.col { min-width: 0; padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.col.left { gap: 14px; padding: 14px; border-right: 1px solid var(--rule); }
.col.right { border-left: 1px solid var(--rule); }
.col h3 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 10px; font-size: var(--type-panel); }
.side-note { color: var(--ink-3); font-size: var(--type-meta); font-weight: 500; letter-spacing: 0; }

/* the documents: one line each, the name, the pages and size, and a dot for "cited by the newest report"; the one open in the drawer is
   the chosen row. The list shows ten documents, then scrolls on its own, whatever the window's height (S3.21) */
button.add-doc { padding: 3px 10px; border-color: var(--rule-strong); background: var(--panel); color: var(--ink-2); font-size: var(--type-meta); font-weight: 600; }
button.add-doc:hover { background: var(--sunk); border-color: var(--rule-strong); }
.docs-meta { margin: 4px 0 0; color: var(--ink-3); font-size: var(--type-meta); }
.docs-stale { margin: 6px 0 0; padding: 5px 10px; border-left: 3px solid var(--amber); background: var(--amber-tint); color: var(--ink); font-size: var(--type-note); } /* D48: regenerate the report */
.doc-list { max-height: 19.25rem; margin: 6px 0 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; list-style: none; display: flex; flex-direction: column; border-block: 1px solid var(--rule); }
.doc-row { display: flex; align-items: center; gap: 2px; }
.doc-row + .doc-row { border-top: 1px solid var(--rule); }
.doc-row .icon-btn { width: 26px; height: 26px; }
button.doc { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; justify-content: stretch; gap: 8px; padding: 6px 6px 6px 8px; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); font-weight: 400; text-align: left; }
button.doc:hover { background: var(--panel-2); }
button.doc[aria-current="true"] { background: var(--sunk); box-shadow: inset 2px 0 0 var(--ink-2); }
.doc .name { min-width: 0; display: flex; font-size: var(--type-ui); }
.doc .name .stem { min-width: 0; overflow: hidden; white-space: pre; text-overflow: ellipsis; } /* a name too long for its row is cut in the middle: its end stays */
.doc .name .tail { flex: none; white-space: pre; }
.doc .sub { color: var(--ink-3); font: 400 var(--type-pill) var(--font-mono); white-space: nowrap; }
.doc .dot { width: 8px; height: 8px; border-radius: var(--radius-round); background: var(--grey); opacity: 0.45; }
.doc .dot.cited { background: var(--sage); opacity: 1; }

/* the chain of title: a rule with a dot per link, a clay dot for a gap; the column is narrow, so a link is two lines: its year and
   document number, then what it is. A link that cites a page of a document opens it there. */
.chain { position: relative; margin: 8px 0 0; padding: 0 0 0 12px; list-style: none; }
.chain::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: var(--rule-strong); }
.chain-row { position: relative; }
.chain-row::before { content: ""; position: absolute; left: -12px; top: 8px; width: 10px; height: 10px; border: 2px solid var(--page); border-radius: var(--radius-round); background: var(--ink); }
.chain-row.gap::before { background: var(--clay); }
.chain-line { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "year num" "what what"; gap: 1px 8px; padding: 3px 6px 3px 4px; text-align: left; }
button.chain-line { border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); font-weight: 400; }
button.chain-line:hover { background: var(--panel-2); }
.chain-row .year, .chain-row .num { color: var(--ink-3); font: 400 var(--type-meta) var(--font-mono); white-space: nowrap; }
.chain-row .year { grid-area: year; }
.chain-row .num { grid-area: num; }
.chain-row .what { grid-area: what; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--type-ui); overflow-wrap: anywhere; } /* two lines at most; the whole is its title */
.chain-row.gap .what { color: var(--clay); }
.chain-gap, .col section > .state-note { margin-top: 8px; }
.chain-gap { padding: 5px 10px; font-size: var(--type-note); } /* one line: the chain stays in view */
.chain-gap b { color: var(--clay); font-weight: 600; }

/* the reading view (web/workbench.js): from 1101 px up, the documents column folds to a strip of two icons, so that the report takes its
   width; below that the columns are stacked and there is nothing to fold */
.strip { display: none; flex-direction: column; align-items: center; gap: 8px; }
.strip-btn { position: relative; width: 40px; flex-direction: column; gap: 2px; padding: 8px 0 5px; border: 1px solid var(--rule-strong); background: var(--panel); color: var(--ink-2); }
.strip-btn:hover { background: var(--panel-2); border-color: var(--rule-strong); color: var(--ink); }
.strip-n { font: 500 var(--type-meta) var(--font-mono); }
.strip-btn.warn { color: var(--clay); }
@media (min-width: 1101px) {
  .pane-head:has(> .reading-toggle) { position: relative; padding-right: 34px; } /* the button stays at the top right of the heading's line, whether the tools fit on it or go to a line of their own */
  .reading-toggle { position: absolute; top: 0; right: 0; }
  .wb.reading { grid-template-columns: 56px minmax(0, 1fr) 304px; }
  .wb.reading .col.left { align-items: center; padding-inline: 6px; }
  .wb.reading .col.left > section { display: none; }
  .wb.reading .strip { display: flex; }
}
@media (max-width: 1100px) { /* the columns are stacked: nothing to fold, and the list is part of the page, not a scroller inside it */
  .reading-toggle { display: none; }
  .doc-list { max-height: none; overflow-y: visible; }
}

/* the middle column: the document as the mock's sections */
.col.center .pane { padding: 0; border: 0; background: transparent; }
.sections { display: flex; flex-direction: column; gap: 10px; }
.sec, .sec-lead { overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--panel); }
.sec > summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--panel-2); font-size: var(--type-nav); list-style: none; cursor: pointer; }
.sec > summary:focus-visible { outline-offset: -2px; } /* inside the section's rounded box, which clips what is outside it */
.sec > summary::-webkit-details-marker { display: none; }
.sec > summary::before { content: "▸"; width: 10px; flex: none; color: var(--ink-3); }
.sec[open] > summary { border-bottom: 1px solid var(--rule); }
.sec[open] > summary::before { content: "▾"; }
.sec > summary .title { font-size: var(--type-card); font-weight: 600; }
.sec > summary .meta { margin-left: auto; color: var(--ink-3); font-size: var(--type-meta); white-space: nowrap; }
.sec > summary .meta.flagged { color: var(--clay); font-weight: 600; }
.sec > summary .meta.unread { color: var(--amber); font-weight: 500; } /* "3 not found", "not checked": nothing in it was found (S3.19) */
.sec-body, .sec-lead { padding: 12px 14px; }
.sec-body .markdown > :last-child, .sec-lead .markdown > :last-child { margin-bottom: 0; }
.sec .report-text { min-height: 12rem; } /* one section's box, not the whole document's (60vh above) */
.sec > summary .edit { white-space: nowrap; }
.sec > summary .note-btn { white-space: nowrap; }
/* the reviewer's notes for the opinion (S3.14): a section's under its heading line, the whole report's above section 1. With two buttons
   the heading's line is too short in the Workbench's middle column: the title keeps the first line with its mark, the buttons go below */
.sec > summary { flex-wrap: wrap; row-gap: 6px; }
.sec > summary .title { flex: 1 1 10rem; min-width: 0; }
.sec-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-left: auto; }
.sec-tools:empty { display: none; }
.sec-note { padding: 10px 14px 0; }
.note-whole { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.note-whole .sec-note { align-self: stretch; padding: 0; }
.note-form { display: flex; flex-direction: column; gap: 6px; }
.note-form label { color: var(--ink-2); font-size: var(--type-note); }
.notes-used { color: var(--ink-3); font-size: var(--type-note); white-space: nowrap; }

/* the right column: the generate card, the current draft, the case status ladder */
.rail-card { gap: 8px; }
.rail-card h3 { font-size: var(--type-card); }
.rail-card .sub { margin: 0 0 2px; color: var(--ink-3); font-size: var(--type-note); }
.rail-card .state-note { padding: 10px 12px; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--rule); font-size: var(--type-ui); }
.kv:last-child { border-bottom: 0; }
.kv b { font: 500 var(--type-note) var(--font-mono); text-align: right; }
.btn-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.btn-row > button { flex: 1; }
.status-ladder { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 4px 0 0; padding: 0 0 0 14px; list-style: none; }
.status-ladder::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px; background: var(--rule-strong); }
.s-row { position: relative; display: flex; align-items: flex-start; gap: 10px; color: var(--ink-3); font-size: var(--type-ui); }
.s-dot { position: absolute; left: -14px; top: 4px; width: 10px; height: 10px; border: 2px solid var(--rule-strong); border-radius: var(--radius-round); background: var(--panel); }
.s-row.done, .s-row.active, .s-row.returned { color: var(--ink); }
.s-row.done .s-dot { border-color: var(--sage); background: var(--sage); }
.s-row.active .s-dot { border-color: var(--accent-text); background: var(--accent-text); }
.s-row.returned .s-dot { border-color: var(--clay); background: var(--clay); }
.s-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.s-when { color: var(--ink-3); font: 400 var(--type-meta)/1.6 var(--font-mono); white-space: nowrap; }
.s-row.done .s-when { color: var(--ink-2); }
.s-row.active .s-when { color: var(--accent-text); font-weight: 600; }
.s-row blockquote { white-space: pre-wrap; overflow-wrap: anywhere; }
.s-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
input.s-date { width: auto; max-width: 160px; padding: 4px 8px; font: 400 var(--type-note) var(--font-mono); }
.s-extra { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; font-size: var(--type-ui); }
.s-extra p { margin: 0; }
.s-extra button.link { padding: 0; color: var(--ink-3); font-weight: 400; }
.status-forms:empty { display: none; }
/* the case's History under the ladder (S3.21, web/workbench.js historyList): newest first, what over who and when */
.history { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--rule); }
.history h4 { margin: 0; color: var(--ink-2); font-size: var(--type-ui); font-weight: 600; }
.history-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.history-list li { display: flex; flex-direction: column; gap: 1px; padding: 5px 0; border-bottom: 1px dashed var(--rule); font-size: var(--type-ui); overflow-wrap: anywhere; }
.history-list li:last-child { border-bottom: 0; }
.history-list .when { color: var(--ink-3); font-size: var(--type-meta); }
/* why the case waits for the principal (S3.19): the lifecycle's sentence and what this person can do; the approver's read-only line */
.s-waits, .review-note { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 10px 12px; border-left: 3px solid var(--amber); background: var(--amber-tint); color: var(--ink); font-size: var(--type-ui); }
.s-waits p { margin: 0; }
.review-note { margin: 12px 22px 0; }
.review-note[hidden] { display: none; }
table.cases .waits { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
table.cases .why { max-width: 34ch; margin: 0; color: var(--ink-2); font-size: var(--type-note); }

/* the drawer at the right: wider than the New case drawer, the document filling it */
.drawer.wide { width: min(560px, 100%); display: flex; flex-direction: column; gap: 14px; }
.drawer-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.drawer-body > form.strip-form { flex: 1; gap: 14px; }
.drawer-body .frame { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.drawer-body iframe.pdf { flex: 1; height: auto; min-height: 360px; }

/* --- the administrator's screens: the four tabs of the mock, Masters (templates), Config, Users, and the audit trail ---------------------- */

#audit-body, #users-body, #templates-body, #config-body, .stack { display: flex; flex-direction: column; gap: 16px; }
.pane > .panel { overflow-x: auto; }
.docket { display: flex; flex-direction: column; gap: 16px; max-width: 880px; }
fieldset { min-width: 0; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; border: 0; }
legend { margin-bottom: 14px; padding: 0; font-size: var(--type-card); font-weight: 600; }
.grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.audit-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.audit-filters > * { grid-column: 1 / -1; }
.audit-filters > .half { grid-column: auto; }
.audit-filters .actions { align-items: center; }
.trail { display: flex; flex-direction: column; gap: 12px; }
.trail td:is(:nth-child(1), :nth-child(3), :last-child) { white-space: nowrap; overflow-wrap: normal; } /* a time, a case number and an address are read whole */
table.cases.plain tbody tr { cursor: default; }
table.cases.plain tbody tr:hover { background: transparent; }
table.cases.plain tbody tr.open { background: var(--panel-2); }
table.cases.plain td { overflow-wrap: anywhere; vertical-align: top; }
.pairs { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.pair { font: 400 var(--type-note)/1.5 var(--font-mono); }
.pair .key { color: var(--ink-3); }
.pair .key::after { content: ":"; }
.sub { color: var(--ink-3); }
textarea.longtext { min-height: 220px; font: 400 var(--type-table)/1.5 var(--font-mono); white-space: pre-wrap; }
textarea.longtext[readonly] { background: var(--panel-2); }
.version { display: flex; flex-direction: column; gap: 12px; }
.version .button { align-self: flex-start; }

/* the Issues of the Audit & reports tab (S3.17): a row's Close with its note, its whole text under its first line, the closed ones folded */
.pane-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.pane-title h2 { margin: 0; }
.pane-title h2:focus { outline: none; } /* where the focus waits after a Close, as a view's heading does after a route */
.issue-close { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 14rem; white-space: normal; }
.issue-close textarea { min-height: 0; }
details.issue-text > summary { cursor: pointer; }
details.issue-text p, .issue-note { margin: 6px 0 0; white-space: pre-wrap; }
details.fold > summary { padding: 8px 0; color: var(--ink-2); font-size: var(--type-ui); cursor: pointer; }

.tabs-a { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--rule); }
.tabs-a a { display: flex; align-items: center; margin-bottom: -1px; padding: 8px 14px 10px; border-bottom: 2px solid transparent; color: var(--ink-3); font-size: var(--type-table); text-decoration: none; }
.view-head:has(+ .tabs-a) { padding-bottom: 0; border-bottom: 0; } /* the tabs' own rule is the line under the heading */
.tabs-a a:hover { color: var(--ink); }
.tabs-a a[aria-current="page"] { border-bottom-color: var(--ink); color: var(--ink); font-weight: 600; }
.block { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.block h2 { margin: 0; }
.block > .panel { overflow-x: auto; }
.branches { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; } /* a bank's branches, under its templates (S1.13) */
.branches h3 { font-size: var(--type-panel); }
.branches form.confirm input { flex: 1 1 160px; width: auto; max-width: 320px; }
.branches form.confirm select { width: auto; } /* the city beside the name (S3.22) */
.branches .city-pick { display: flex; align-items: center; gap: 8px; font-weight: normal; } /* the City label wraps with its select */
table.cases.admin form.confirm { max-width: 560px; } /* the name, the city and the two buttons on one line */
table.cases.plain.admin td { vertical-align: middle; }
table.cases.admin select { width: auto; min-width: 150px; max-width: 320px; }
table.cases.admin td.muted, table.cases.admin .chip { white-space: normal; } /* a sentence of explanation, and a long pill, wrap (the list tables' muted cells are dates and do not) */
table.cases.admin .confirm span { white-space: normal; } /* the question inherits nowrap from td.act */
table.cases.admin .confirm { max-width: 300px; justify-content: flex-end; } /* a question in a cell must not widen the column and squeeze the others */
label.check { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: var(--type-ui); color: var(--ink-2); }
.reveal { display: flex; flex-direction: column; gap: 8px; }
.reveal h3:focus { outline: none; }
.reveal .muted { margin: 0; color: var(--ink-2); }
.secret { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.secret code { flex: 1 1 200px; padding: 8px 10px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--panel); font: 500 var(--type-panel)/1.4 var(--font-mono); letter-spacing: 0.04em; overflow-wrap: anywhere; user-select: all; }

/* --- the phone and the small laptop: the mock's two breakpoints ------------------------------------------------------------------------- */

/* a table that does not fit becomes a card for each row */
@media (max-width: 719px) {
  table.cases thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.cases, table.cases tbody, table.cases tr, table.cases td { display: block; }
  table.cases tr { padding: 10px 12px; border-bottom: 1px solid var(--rule); }
  table.cases td { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; border: 0; }
  table.cases td::before { content: attr(data-label); flex: 0 0 96px; color: var(--ink-3); font: 400 var(--type-meta) var(--font-text); white-space: normal; }
  table.cases td.act { justify-content: flex-start; }
  table.cases td.act::before { display: none; }
  .row-actions { justify-content: flex-start; }
}
/* six columns need about a thousand pixels: below that the card layout carries on (the tables of the audit trail and the users) */
@media (min-width: 720px) and (max-width: 999px) {
  table.cases.plain thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.cases.plain, table.cases.plain tbody, table.cases.plain tr, table.cases.plain td { display: block; }
  table.cases.plain tr { padding: 10px 12px; border-bottom: 1px solid var(--rule); }
  table.cases.plain td { display: flex; gap: 10px; padding: 3px 0; border: 0; }
  table.cases.plain td::before { content: attr(data-label); flex: 0 0 110px; color: var(--ink-3); font: 400 var(--type-meta) var(--font-text); padding-top: 2px; }
}

@media (min-width: 720px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .grid .wide { grid-column: 1 / -1; }
  .audit-filters { grid-template-columns: repeat(3, 1fr); }
  .audit-filters > .field { grid-column: auto; }
}

@media (min-width: 1000px) {
  iframe.pdf { height: 78vh; }
  .audit-filters { grid-template-columns: repeat(5, 1fr); }
}

/* below 1100 px the menu is a block at the top of the page; its button opens and closes it */
@media (max-width: 1100px) {
  .app, .app.collapsed { grid-template-columns: 1fr; align-content: start; }
  .content { grid-column: 1; }
  .side, .app.collapsed .side { position: static; height: auto; overflow: visible; align-items: stretch; padding: 12px 16px; gap: 12px; }
  .app.collapsed .side-top { flex-direction: row; }
  .app.collapsed .brand-text { display: block; }
  .app.collapsed .side-body { display: none; }
  .side .icon-btn { width: auto; padding: 0 10px; } /* the menu's button then says its word beside the icon */
  .side .icon-btn .word { display: inline; font-size: var(--type-ui); }
  .side-body { gap: 14px; }
  .wb { grid-template-columns: 1fr; } /* the Workbench's columns stack: documents, the report, the status */
  .col.left, .col.right { border: 0; border-top: 1px solid var(--rule); }
  .pipe { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 12px; }
}

@media (max-width: 640px) {
  .view { padding: 16px; gap: 14px; }
  .content > .notice { margin: 12px 16px 0; }
  dialog.dialog { padding: 16px; }
  .card { padding: 20px; }
  .pane { padding: 12px; }
  .drawer { padding: 16px; }
  .case-bar { padding: 14px 16px; }
  .case-id { flex-basis: 100%; }
  .case-stat { flex-basis: 40%; }
  .case-actions { flex-basis: 100%; margin-left: 0; justify-content: flex-start; }
  #case-panel:not([data-state="real"]) { margin: 16px; }
  .workbench > .notice, .review-note { margin: 12px 16px 0; }
  .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 16px 12px; }
  .pipe-step + .pipe-step { padding-left: 0; border-left: 0; }
  .col { padding: 16px; }
  /* a finger, not a pointer: every control at least --touch high, the citations inside a sentence too (S3.19: the line grows with them) */
  input, select, textarea, button, .button, .side nav a, .side-new, .recent a, .tabs-a a, .sec > summary, button.logout { min-height: var(--touch); }
  .icon-btn { height: var(--touch); min-width: var(--touch); }
  .stage-list .icon-btn { margin-block: 0; }
  label.check, label.confirm { min-height: var(--touch); } /* a box is pressed through its label, which is the target */
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; min-height: 0; margin: 0; }
  button.cite { padding-inline: 8px; }
  table.cases td a:not(.button), .feed a { display: inline-flex; align-items: center; min-height: var(--touch); } /* a case number is a target too */
}
.view > .panel { overflow-x: auto; } /* a list wider than the window scrolls inside its panel, not the page */