/* Enclerk.com — Fluent design system
   Layered acrylic surfaces under a single teal light source.
   Depth encodes hierarchy: base < list < selected < dialog. */

/* The display face is linked from the head by ensureDisplayFont() in
   public/js/api.js, not imported here: an @import is only found once this
   sheet has downloaded, which put the font's stylesheet and then the font
   file on the end of that chain, two round trips before the text settled. */

:root {
  /* light */
  --bg: #F3F5F4;
  --bg-deep: #E9EDEB;
  --ink: #14201D;
  --ink-2: #4A5955;
  /* The quietest ink still has to reach 4.5:1 on the page, on a white
   * card and on the darkest scheme wash (it labels the detail rows).
   * #7A8985 was 3.3:1; docs/accessibility-audit.md has the table and
   * test/accessibility.test.js recomputes it. */
  --ink-3: #616D6A;
  --line: rgba(20,32,29,.10);
  --line-strong: rgba(20,32,29,.18);

  --accent: #0E7C6B;
  --accent-ink: #0B6658;
  --accent-wash: #D9F0EB;
  --accent-glow: rgba(14,124,107,.22);
  --on-accent: #FFFFFF;

  /* Status colours are text on the page, on a card and on their own wash,
   * and the amber and red are also a background under white text (the
   * filter counts), so each has to pass 4.5:1 both ways. */
  --amber: #966319; --amber-wash: #FBF0DC;
  --red: #B23A32;   --red-wash: #FAE3E1;
  --green: #1D794B; --green-wash: #DDF1E5;

  --acrylic: rgba(255,255,255,.62);
  --acrylic-strong: rgba(255,255,255,.82);
  --acrylic-border: rgba(255,255,255,.55);

  --e1: 0 1px 2px rgba(20,32,29,.06), 0 2px 8px rgba(20,32,29,.05);
  --e2: 0 2px 6px rgba(20,32,29,.07), 0 12px 32px rgba(20,32,29,.09);
  --e3: 0 8px 24px rgba(20,32,29,.12), 0 32px 80px rgba(20,32,29,.16);

  --r-lg: 20px; --r: 14px; --r-sm: 10px;
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

[data-theme="dark"] {
  --bg: #0F1917;
  --bg-deep: #0A1210;
  --ink: #E6EEEC;
  --ink-2: #A9B8B4;
  --ink-3: #909F9C;   /* 4.5:1 on the lightest dark surface, a lifted detail row */
  --line: rgba(230,238,236,.10);
  --line-strong: rgba(230,238,236,.18);

  --accent: #2FB39B;
  --accent-ink: #5CCBB6;
  --accent-wash: rgba(47,179,155,.16);
  --accent-glow: rgba(47,179,155,.20);
  --on-accent: #06201B;

  --amber: #E0A84A; --amber-wash: rgba(224,168,74,.16);
  --red: #E4776E;   --red-wash: rgba(228,119,110,.16);
  --green: #5CC48F; --green-wash: rgba(92,196,143,.16);

  --acrylic: rgba(22,34,31,.58);
  --acrylic-strong: rgba(22,34,31,.82);
  --acrylic-border: rgba(255,255,255,.08);

  --e1: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.3);
  --e2: 0 2px 6px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45);
  --e3: 0 8px 24px rgba(0,0,0,.5), 0 32px 80px rgba(0,0,0,.6);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0; min-height: 100vh;
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background .3s ease, color .3s ease;
}

/* The single light source. One bloom, upper-left, everything else quiet. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 700px at 8% -10%, var(--accent-glow), transparent 60%),
    radial-gradient(700px 500px at 100% 110%, rgba(14,124,107,.07), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-deep));
}

h1, h2, h3, .display {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.012em;
  color: var(--ink); margin: 0;
}
h1 { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.2rem); line-height: 1.15; }
h2 { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); line-height: 1.25; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .75em; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
/* An action that reads as a link: a real button, styled like the text
 * around it. Replaces <a href="#" onclick>, which is a link to nowhere. */
.link-like, button.link-like {
  display: inline; margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
  font: inherit; color: var(--accent-ink); text-decoration: underline; cursor: pointer;
}
button.link-like:hover, button.link-like:active { background: none; box-shadow: none; filter: none; transform: none; text-decoration: underline; }
.muted { color: var(--ink-2); font-size: 13.5px; }
.small { font-size: 12.5px; }
/* The quiet colour is for text. A small button keeps its own colours,
   or Approve reads as teal on teal. */
.small:not(button):not(.btn) { color: var(--ink-3); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- Acrylic surfaces ---------- */
.acrylic, .card, .panel-card, .file-row, .tl-stat, .stat, .req-item.active, .modal {
  background: var(--acrylic);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--acrylic-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), var(--e1);
}
[data-theme="dark"] .acrylic, [data-theme="dark"] .card, [data-theme="dark"] .panel-card,
[data-theme="dark"] .file-row, [data-theme="dark"] .tl-stat, [data-theme="dark"] .stat,
[data-theme="dark"] .req-item.active, [data-theme="dark"] .modal {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--e1);
}
.card, .panel-card { border-radius: var(--r-lg); margin-bottom: 16px; }
.card { padding: 22px 24px; }
.panel-card { overflow: hidden; }
.panel-card > .body { padding: 20px 24px; }
.panel-card h2 { margin-bottom: 4px; }
.panel-card .hint { font-size: 13.5px; color: var(--ink-2); margin: 0 0 14px; }

/* ---------- Demo website banner ----------
   Drawn by applyDemoBanner() in agency.js on a site created from a CSV
   import. Sticky above the sticky header, which is pushed down by the
   banner's height so the two never overlap. A fixed red rather than the
   theme's --red: it has to read as a warning on every colour scheme, in
   both modes, with white text on it. */
.demo-banner {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 4px 12px; min-height: 30px; padding: 4px clamp(14px, 3vw, 28px);
  background: #C0392B; color: #FFFFFF;
  font-size: 12.5px; line-height: 1.3; text-align: center;
}
.demo-banner strong {
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
[data-theme="dark"] .demo-banner { background: #A93226; }
/* On a phone the label alone fits on one line; the sentence would wrap the
   banner taller than the offset the header allows for. */
@media (max-width: 640px) { .demo-banner span { display: none; } }
html.demo-site header.app, html.demo-site .topbar { top: var(--site-banner-h, 30px); }
/* The unverified banner's line may carry a link to the Verification tab
   (on the admin page); it reads in white like the rest of the strip. */
.demo-banner .link-like, .demo-banner button.link-like {
  color: #FFFFFF; text-decoration: underline; font: inherit; margin-left: 6px; padding: 0;
}

/* ---------- Top bar ---------- */
header.app, .topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 0 clamp(14px, 3vw, 28px); height: 60px;
  background: var(--acrylic-strong);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
/* The identity block on the left and the person's own tools on the right.
   The left side is allowed to shrink, so a long agency name truncates
   rather than pushing "Sign out" off the edge. */
header.app > :first-child { display: flex; min-width: 0; }
header.app > .who { flex-shrink: 0; }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; color: var(--ink); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(145deg, var(--accent), var(--accent-ink));
  box-shadow: 0 4px 14px var(--accent-glow);
  display: grid; place-items: center; color: var(--on-accent);
}
.brand .mark svg { width: 17px; height: 17px; }
/* An uploaded logo replaces the generated mark. No gradient or glow behind
   it — an agency's seal on a coloured tile looks like a mistake — and the
   image is contained rather than cropped, so a wide wordmark still reads. */
.brand .mark-logo {
  background: none; box-shadow: none; width: auto; max-width: 168px;
  height: 30px; border-radius: 0;
}
.brand .mark-logo img { max-height: 30px; max-width: 168px; object-fit: contain; display: block; }
/* Two lines beside the mark: the name, and one quiet line of context under
   it (the portal's name for the public; the role and departments for
   staff). Both truncate rather than wrap, so a reviewer for four
   departments never pushes the header to two rows. */
.brand .text { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.2; }
.brand .name {
  font-family: var(--font-display); font-weight: 600; font-size: 16.5px; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand .name em { font-style: normal; color: var(--accent-ink); }
.brand .brand-sub {
  display: block; margin-top: 1px; font-size: 11.5px; font-weight: 500; letter-spacing: .01em;
  color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand .brand-sub .scope { font-weight: 400; color: var(--ink-2); }
.brand .brand-sub .scope:not(:empty)::before { content: '·'; margin: 0 6px; color: var(--ink-3); }
header.app a, .topbar a { color: var(--accent-ink); }
/* A page's own tools in the header (the redaction tool's How to redact and
   Shortcuts) are buttons, since neither goes anywhere: they read as links. */
header.app .who button.link-like { text-decoration: none; }
header.app .who button.link-like:hover { text-decoration: underline; }
.topbar .right, header.app .who {
  display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--ink-2);
}

.theme-toggle {
  width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--acrylic); color: var(--ink-2); cursor: pointer;
  display: grid; place-items: center; transition: background .15s, color .15s, transform .15s;
}
.theme-toggle:hover { background: var(--accent-wash); color: var(--accent-ink); }
.theme-toggle:active { transform: scale(.95); }
.theme-toggle svg { width: 18px; height: 18px; }

/* ---------- The account menu (mountAccount in public/js/api.js) ----------
   One button in the corner, 38px high so the bar stays 60px, and its menu
   under it. The menu is positioned against the button's own box, never
   fixed: the bar's backdrop filter makes it the containing block. Every
   state the rules above give a plain button is set again on these classes,
   so none of them shows through. */
header.app .who .account { position: relative; display: inline-flex; align-items: center; gap: 8px; }
/* The product button beside the name (productSwitchHtml in api.js): the
   product this page is in, and behind it the way to the person's work in
   each of their products. A <details>, with the browser's own marker put
   away and a caret drawn as the account button's is. */
.product-switch { position: relative; }
.product-switch > summary {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; box-sizing: border-box; list-style: none;
  border: 1px solid var(--line); border-radius: 19px; background: var(--acrylic); color: var(--ink);
  font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.product-switch > summary::-webkit-details-marker { display: none; }
.product-switch > summary:hover, .product-switch[open] > summary { background: var(--accent-wash); color: var(--accent-ink); }
.product-switch > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.product-switch-list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70;
  display: flex; flex-direction: column; width: min(280px, calc(100vw - 24px)); padding: 6px; box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg); box-shadow: var(--e2); text-align: left;
}
header.app .who .product-switch-list a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
header.app .who .product-switch-list a:hover,
header.app .who .product-switch-list a:focus-visible,
header.app .who .product-switch-list a[aria-current='page'] { background: var(--accent-wash); color: var(--accent-ink); }
.product-switch-list .sub-line { display: block; font-weight: 400; }
/* On a phone the bar has no room for it; the menu under the name lists the
   same work. */
@media (max-width: 640px) { .product-switch { display: none; } }
.account-btn, .account-btn:hover, .account-btn:active {
  display: inline-flex; align-items: center; gap: 8px; width: auto; height: 38px; min-height: 0; margin: 0; padding: 0 12px 0 4px;
  border: 1px solid var(--line); border-radius: 19px; background: var(--acrylic); color: var(--ink);
  font: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  cursor: pointer; box-shadow: none; transform: none; filter: none;
}
.account-btn:hover, .account-btn[aria-expanded="true"] { background: var(--accent-wash); color: var(--accent-ink); }
.account-initials {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--accent), var(--accent-ink)); color: var(--on-accent);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.account-name { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-away { padding: 1px 7px; border-radius: 99px; background: var(--amber-wash); color: var(--amber); font-size: 11.5px; font-weight: 700; }
.account-caret { width: 0; height: 0; flex: none; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .7; }
.account-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70;
  display: flex; flex-direction: column; width: min(300px, calc(100vw - 24px)); padding: 6px; box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg); color: var(--ink); box-shadow: var(--e2);
  text-align: left;
}
.account-menu[hidden] { display: none; }
.account-head { display: flex; flex-direction: column; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.account-head-name { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.account-head-role { font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
.account-rule { height: 1px; margin: 4px 0; background: var(--line); }
header.app .who .account-menu .account-item,
header.app .who .account-menu button.account-item,
header.app .who .account-menu button.account-item:hover,
header.app .who .account-menu button.account-item:active {
  display: block; width: 100%; min-height: 0; margin: 0; padding: 8px 10px; box-sizing: border-box;
  border: 0; border-radius: 8px; background: none; color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; text-align: left; text-decoration: none;
  cursor: pointer; box-shadow: none; transform: none; filter: none;
}
header.app .who .account-menu .account-item:hover,
header.app .who .account-menu .account-item:focus-visible { background: var(--accent-wash); color: var(--accent-ink); text-decoration: none; }
@media (max-width: 480px) {
  .account-btn, .account-btn:hover, .account-btn:active { gap: 4px; padding: 0 8px 0 3px; }
  /* Out of sight, still read out: the button keeps its name. */
  .account-name { position: absolute; width: 1px; height: 1px; max-width: none; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
}
/* On a phone the person's own tools (a reply count, their name, Sign out,
   the theme) came to more than the screen. They sit closer, and a long
   name gives way first. */
@media (max-width: 480px) {
  header.app { gap: 8px; padding: 0 12px; }
  header.app > :first-child { min-width: 30px; }   /* the agency's mark stays whole */
  header.app .who { gap: 6px; font-size: 13px; }
  .theme-toggle { width: 34px; height: 34px; }
}

/* ---------- Layout ---------- */
.wrap { max-width: 980px; margin: 0 auto; padding: clamp(18px, 3vw, 32px) clamp(14px, 3vw, 24px) 64px; }
.layout { display: grid; grid-template-columns: 400px 1fr; min-height: calc(100vh - 60px); }
.list-pane {
  border-right: 1px solid var(--line); max-height: calc(100vh - 60px); overflow-y: auto;
  background: transparent;
}
.detail-pane { padding: clamp(18px, 3vw, 30px) clamp(16px, 3vw, 34px) 70px; overflow-y: auto; max-height: calc(100vh - 60px); }
@media (max-width: 920px) {
  .layout { grid-template-columns: 1fr; }
  .list-pane { border-right: 0; max-height: none; }
  .list-pane.hide-mobile, .detail-pane.hide-mobile { display: none; }
  .detail-pane { max-height: none; }
}

/* ---------- Request list ---------- */
.list-head { padding: 22px 20px 8px; }
.list-head h1 { margin-bottom: 2px; }
.list-head .sub { font-size: 13px; color: var(--ink-2); }
.search {
  width: 100%; margin: 14px 0 6px; padding: 10px 13px 10px 38px;
  border: 1px solid var(--line); border-radius: 12px; font: inherit; font-size: 14px;
  color: var(--ink); background: var(--acrylic);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23616D6A' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 16px; background-position: 13px center;
}
.search:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }
.search:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.seg { display: flex; gap: 3px; padding: 3px; margin: 8px 20px 4px; background: var(--bg-deep); border-radius: 12px; border: 1px solid var(--line); }
.seg button {
  flex: 1; border: 0; background: transparent; padding: 7px 4px; border-radius: 9px;
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink-2); cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.seg button:hover { color: var(--ink); }
.seg button.active { background: var(--acrylic-strong); color: var(--ink); box-shadow: var(--e1); }

.req-list { list-style: none; margin: 8px 0 0; padding: 0 12px 28px; }
.req-item {
  padding: 13px 14px; border-radius: var(--r); cursor: pointer; margin-bottom: 6px;
  border: 1px solid transparent; transition: background .15s, transform .15s, box-shadow .15s;
}
.req-item:hover { background: var(--acrylic); }
.req-item.active { box-shadow: var(--e2); transform: translateY(-1px); }
.req-item .row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.req-item .rid { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; }
.req-item .desc {
  font-size: 13px; color: var(--ink-2); margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.req-item .row2 { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.empty { padding: 34px 20px; text-align: center; color: var(--ink-3); font-size: 14px; }

/* ---------- Pills / badges ---------- */
.pill, .badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .005em; white-space: nowrap; line-height: 1.4;
}
.pill.neutral, .badge.neutral { background: var(--bg-deep); color: var(--ink-2); border: 1px solid var(--line); }
.pill.ok, .badge.ok { background: var(--green-wash); color: var(--green); }
.pill.warn, .badge.warn { background: var(--amber-wash); color: var(--amber); }
.pill.danger, .badge.danger, .badge.overdue { background: var(--red-wash); color: var(--red); }
.pill.info, .badge.info { background: var(--accent-wash); color: var(--accent-ink); }

/* ---------- Detail ---------- */
.detail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 68vh; color: var(--ink-3); text-align: center; }
.detail-empty svg { opacity: .35; margin-bottom: 14px; }
.back-link { display: none; background: none; border: 0; color: var(--accent-ink); font: inherit; font-size: 14px; cursor: pointer; padding: 0 0 12px; }
@media (max-width: 920px) { .back-link { display: block; } }
.det-head { margin-bottom: 18px; }
.det-head h1 { margin-bottom: 8px; }
.det-head .meta { font-size: 13.5px; color: var(--ink-2); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.disclosure > summary {
  list-style: none; cursor: pointer; padding: 16px 22px; display: flex; align-items: center; gap: 12px;
  user-select: none; transition: background .15s;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary:hover { background: var(--accent-wash); }
.disclosure > summary .chev { transition: transform .2s ease; color: var(--ink-3); flex-shrink: 0; }
.disclosure[open] > summary .chev { transform: rotate(90deg); color: var(--accent-ink); }
.disclosure > summary .title { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.disclosure > summary .sum { font-size: 13px; color: var(--ink-2); margin-left: auto; text-align: right; }
.disclosure .content { padding: 6px 22px 22px; border-top: 1px solid var(--line); }

.stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.stat, .tl-stat { border-radius: var(--r); padding: 12px 16px; min-width: 112px; }
.stat .k, .tl-stat .k { font-size: 12px; color: var(--ink-3); }
.stat .v, .tl-stat .v { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-top: 2px; letter-spacing: -.01em; }
.stat.danger .v, .tl-stat.danger .v { color: var(--red); }
.stat.warn .v, .tl-stat.warn .v { color: var(--amber); }

/* ---------- Timeline ---------- */
.track { position: relative; padding-left: 26px; margin-top: 6px; }
.track::before { content:''; position:absolute; left:8px; top:10px; bottom:10px; width:2px; background: var(--line-strong); }
.step { position: relative; padding: 7px 0; }
.step::before { content:''; position:absolute; left:-22px; top:12px; width:11px; height:11px; border-radius:50%; background: var(--bg); border:2px solid var(--line-strong); }
.step.done::before { background: var(--green); border-color: var(--green); }
.step.current::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-wash); }
.step .lab { font-size: 14px; font-weight: 500; }
.step .when { font-size: 12.5px; color: var(--ink-3); }
.history { margin-top: 6px; max-height: 320px; overflow-y: auto; }
.hist-row { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.hist-row:last-child { border-bottom: 0; }
.hist-row .t { font-size: 12px; color: var(--ink-3); }

/* ---------- Files ---------- */
.file-row { border-radius: var(--r); padding: 11px 14px; margin-bottom: 8px; }
.file-row .fname { font-weight: 600; font-size: 14px; }
.file-row .attrs, .file-attrs { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink-2); margin: 5px 0; }
.file-row .btn-row { margin-top: 8px; }
.file-row .attrs b, .file-attrs strong { font-weight: 600; color: var(--ink); }

/* ---------- Forms ---------- */
label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; color: var(--ink); }
label.inline { display: flex; align-items: center; gap: 8px; font-weight: 400; }
label.inline input { width: auto; margin: 0; }
input, textarea, select {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--line-strong); border-radius: 11px;
  background: var(--acrylic-strong); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }
/* Keyboard focus draws a solid ring as well as the pale wash. This rule
 * outranks the page-wide :focus-visible one (which would also round the
 * corners to 6px), so the ring follows the field's own radius. Never put
 * outline:none on a :focus rule; the wash alone is far below 3:1. */
input:not([type="checkbox"]):not([type="radio"]):focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 11px;
}
textarea { min-height: 96px; resize: vertical; }
select[multiple] { padding: 6px; }
input[type="checkbox"] { width: auto; accent-color: var(--accent); }
::placeholder { color: var(--ink-3); }

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 18px; border: 0; border-radius: 11px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600;
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 6px 18px var(--accent-glow);
  transition: transform .15s, box-shadow .15s, background .15s, filter .15s;
  margin-top: 0;
}
/* `display` on a button beats the hidden attribute's own rule, so a button a
   page hides (one this person may not use) stayed on the screen. */
button[hidden], .btn[hidden] { display: none; }
button:hover, .btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 10px 26px var(--accent-glow); }
button:active, .btn:active { transform: translateY(0); filter: brightness(.97); }
button:disabled, .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
button.secondary, .btn.secondary { background: var(--acrylic-strong); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: var(--e1); }
button.secondary:hover, .btn.secondary:hover { background: var(--accent-wash); color: var(--accent-ink); border-color: transparent; }
button.danger, .btn.danger { background: var(--red-wash); color: var(--red); box-shadow: none; }
button.danger:hover, .btn.danger:hover { background: var(--red); color: #fff; }
button.ghost, .btn.ghost { background: transparent; color: var(--accent-ink); box-shadow: none; padding: 6px 8px; }
.btn.sm, button.sm { padding: 6px 12px; font-size: 13px; border-radius: 9px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.row, .field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > *, .field-row > * { flex: 1; min-width: 180px; }
.card > button, .card > .btn-row { margin-top: 14px; }
.card button + button { margin-left: 6px; }

nav.tabs { display: flex; gap: 4px; margin-bottom: 18px; padding: 4px; background: var(--bg-deep); border: 1px solid var(--line); border-radius: 14px; overflow-x: auto; }
nav.tabs button { flex: 1 0 auto; background: transparent; color: var(--ink-2); box-shadow: none; padding: 8px 14px; border-radius: 10px; font-weight: 500; }
nav.tabs button:hover { transform: none; filter: none; color: var(--ink); background: var(--acrylic); }
nav.tabs button.active { background: var(--acrylic-strong); color: var(--accent-ink); box-shadow: var(--e1); }

.msg { font-size: 13px; margin-top: 10px; }
.msg.error, .error { color: var(--red); font-size: 13px; margin-top: 8px; }
.msg.ok, .success { color: var(--green); font-size: 13px; margin-top: 8px; }
.note { background: var(--amber-wash); border: 1px solid transparent; border-radius: var(--r); padding: 12px 14px; font-size: 13.5px; margin: 10px 0; }
.note.info { background: var(--accent-wash); }

/* ---- The agency admin page: seats, the logo, the built-in reminders ---- */
.seat-count { font-size: 13px; font-weight: 500; color: var(--ink-3); margin-left: 6px; letter-spacing: 0; }
.seat-count.full { color: var(--amber); }
.logo-current { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.logo-current img { max-height: 56px; max-width: 220px; object-fit: contain; background: var(--bg-deep); border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.builtin-choice { margin-top: 12px; }

.letter, .letter-html {
  background: var(--acrylic-strong); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 18px; margin: 0 0 12px; font-size: 14px; line-height: 1.65; overflow-wrap: break-word;
  white-space: normal; font-family: var(--font-body);
}
pre.letter { white-space: pre-wrap; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-weight: 600; font-size: 12.5px; color: var(--ink-2); padding: 9px 10px; border-bottom: 1px solid var(--line-strong); }
td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--accent-wash); }

/* ---------- Toast ---------- */
.toast-host { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: var(--acrylic-strong); color: var(--ink); padding: 11px 17px; border-radius: 12px;
  font-size: 14px; max-width: 440px; border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: var(--e3); opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s;
}
.toast.in { opacity: 1; transform: translateY(0); }
.toast-error { border-color: var(--red); color: var(--red); }
.toast-ok { border-color: var(--green); color: var(--green); }
.spinner { width: 18px; height: 18px; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Landing ---------- */
.landing { max-width: 1060px; margin: 0 auto; padding: clamp(28px, 6vw, 72px) clamp(16px, 4vw, 32px) 80px; }
.landing-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 860px) { .landing-grid { grid-template-columns: 1fr; } }
.landing h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.3rem); line-height: 1.08; margin-bottom: 16px; }
.lede { font-size: clamp(1rem, .95rem + .4vw, 1.15rem); color: var(--ink-2); max-width: 44ch; margin-bottom: 26px; }
.facts { display: grid; gap: 10px; margin-top: 10px; }
.fact { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.fact:last-child { border-bottom: 1px solid var(--line); }
.fact .ico { width: 34px; height: 34px; border-radius: 10px; background: var(--accent-wash); color: var(--accent-ink); display: grid; place-items: center; }
.fact .ico svg { width: 17px; height: 17px; }
.fact b { display: block; font-weight: 600; }
.fact span { font-size: 13.5px; color: var(--ink-2); }

.docket {
  border-radius: 24px; padding: clamp(20px, 3vw, 30px);
  background: var(--acrylic-strong);
  -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid var(--acrylic-border); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), var(--e3);
  position: relative;
}
[data-theme="dark"] .docket { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--e3); }
.docket::before {
  content: ''; position: absolute; inset: -1px; border-radius: 25px; pointer-events: none;
  background: linear-gradient(135deg, var(--accent-glow), transparent 45%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
.docket h2 { margin-bottom: 4px; }
.docket .muted { margin-bottom: 8px; }
.docket-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 6px; color: var(--ink-3); font-size: 12.5px; }
.docket-divider::before, .docket-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.footer { margin-top: 40px; font-size: 12.5px; color: var(--ink-3); display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Platform landing (marketing to agencies) ---------- */
.landing section { scroll-margin-top: 80px; }
.hero-center { text-align: center; max-width: 780px; margin: 0 auto clamp(34px, 5vw, 60px); }
.hero-center h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.5rem); line-height: 1.08; margin-bottom: 18px; }
.hero-center .lede { margin: 0 auto 4px; max-width: 62ch; }
.hero-cta { justify-content: center; margin-top: 24px; }

.feature-3, .steps-3 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin-bottom: clamp(30px, 4vw, 48px);
}
.feature, .step-tile {
  padding: 18px 20px; border-radius: var(--r-lg);
  background: var(--acrylic); border: 1px solid var(--acrylic-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), var(--e1);
}
[data-theme="dark"] .feature, [data-theme="dark"] .step-tile {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), var(--e1);
}
.feature .ico {
  width: 36px; height: 36px; border-radius: 10px; margin-bottom: 10px;
  background: var(--accent-wash); color: var(--accent-ink);
  display: grid; place-items: center;
}
.feature .ico svg { width: 18px; height: 18px; }
.feature b, .step-tile b { display: block; font-weight: 600; margin-bottom: 4px; }
.feature > span:last-child, .step-tile > span:last-child {
  font-size: 13.5px; color: var(--ink-2); line-height: 1.5;
}
.steps-strip h2, #plans > h2 { text-align: center; margin-bottom: 14px; }
.step-tile .step-num { margin-bottom: 8px; }
.plans-note { text-align: center; max-width: 68ch; margin: 0 auto 20px; font-size: 13.5px; }

.plans {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px; align-items: stretch; margin-bottom: clamp(30px, 4vw, 48px);
}
.plan-card {
  position: relative; display: flex; flex-direction: column;
  padding: 22px 22px 20px; border-radius: var(--r-lg);
  background: var(--acrylic-strong); border: 1px solid var(--acrylic-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), var(--e1);
}
[data-theme="dark"] .plan-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--e1); }
.plan-card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--e2); }
.plan-flag {
  position: absolute; top: -11px; left: 20px;
  background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 10px; border-radius: 999px;
}
.plan-price { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin: 4px 0 2px; }
.plan-seats { list-style: none; margin: 10px 0 16px; padding: 0; flex: 1; }
.plan-seats li {
  font-size: 13.5px; color: var(--ink-2); padding: 5px 0 5px 22px; position: relative;
  border-top: 1px solid var(--line);
}
.plan-seats li:first-child { border-top: 0; }
.plan-seats li::before { content: '✓'; position: absolute; left: 2px; color: var(--accent-ink); font-weight: 700; }
.plan-card button { width: 100%; }

.grid-2 {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 28px); margin-bottom: clamp(26px, 4vw, 44px); align-items: start;
}
@media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; } }
.signin-narrow { max-width: 420px; margin: 0 auto; }

/* ---------- Session expired ---------- */
.expired-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.expired-card { border-radius: 24px; max-width: 440px; width: 100%; padding: 40px 34px; text-align: center; }
.expired-icon { width: 66px; height: 66px; margin: 0 auto 20px; border-radius: 50%; background: var(--accent-wash); display: grid; place-items: center; }
.expired-card h1 { margin-bottom: 10px; }
.expired-card p { color: var(--ink-2); line-height: 1.55; margin: 0 0 10px; font-size: 15px; }
.expired-card .fine { font-size: 13px; color: var(--ink-3); margin-top: 18px; }
.expired-card button { width: 100%; padding: 13px; font-size: 15px; margin-top: 22px; }
@keyframes sweep { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }
.hand { transform-origin: 32px 32px; animation: sweep 8s linear infinite; }

/* ---------- Modal overrides for theme ---------- */
.modal-backdrop { background: rgba(10,18,16,.42); }
.modal { border-radius: 22px; color: var(--ink); box-shadow: var(--e3); font-family: var(--font-body); }
.modal-head h2 { font-family: var(--font-display); }
.modal-text { color: var(--ink-2); }
.modal-label { color: var(--ink); }
.modal-input, .rt-select { background: var(--acrylic-strong); color: var(--ink); border-color: var(--line-strong); }
.modal-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }
.modal-hint { color: var(--ink-3); }
.modal-fold { border-top-color: var(--line); }
.modal-fold-btn { color: var(--ink); }
.modal-fold-btn::before { color: var(--ink-3); }
.modal-fold-btn:hover { color: var(--accent-ink); }
.modal-actions { border-top-color: var(--line); }
.modal-actions .btn { background: var(--accent); color: var(--on-accent); }
.modal-actions .btn.secondary { background: var(--acrylic-strong); color: var(--ink); border: 1px solid var(--line-strong); }
.modal-actions .btn.danger { background: var(--red); color: #fff; }
.rt-toolbar { background: var(--bg-deep); border-color: var(--line-strong); }
.rt-btn { color: var(--ink); }
.rt-btn:hover { background: var(--accent-wash); }
.rt-btn:active { background: var(--accent-wash); }
.preview-image-wrap { background: var(--bg-deep); }
.rt-editor { background: var(--acrylic-strong); color: var(--ink); border-color: var(--line-strong); }
.rt-editor:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }
.rt-sep { background: var(--line-strong); }

.req-mark { color: var(--red); font-weight: 700; }
label.sublabel { margin: 0 0 5px; font-size: 12px; color: var(--ink-2); font-weight: 500; }
#dateToWrap { transition: opacity .15s; }

.reason-check { align-items: flex-start; margin: 10px 0; gap: 10px; }
.reason-check input { margin-top: 3px; }
.reason-check span { font-size: 13.5px; line-height: 1.45; color: var(--ink); }

/* ---- Searchable checklist (replaces native multi-selects) ---- */
.checklist { border: 1px solid var(--line-strong); border-radius: 11px; overflow: hidden; background: var(--acrylic-strong); }
.checklist-search {
  width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 9px 12px; font-size: 13.5px; background: transparent;
}
.checklist-search:focus { box-shadow: none; border-bottom-color: var(--accent); }
/* A search and a filter side by side over the list (renderChecklist's
 * options), wrapping onto two rows on a narrow screen. The focus ring is
 * drawn inside the box, which clips anything outside it. */
.checklist-tools { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.checklist-tools .checklist-search { flex: 1 1 14em; width: auto; min-width: 0; border-bottom: 0; }
.checklist-group {
  flex: 0 1 auto; width: auto; max-width: 100%; border: 0; border-left: 1px solid var(--line);
  border-radius: 0; padding: 9px 12px; font-size: 13.5px;
}
.checklist-tools .checklist-search:focus, .checklist-group:focus { box-shadow: inset 0 -2px 0 var(--accent); }
.checklist-tools input.checklist-search:focus-visible, .checklist-tools select.checklist-group:focus-visible {
  outline-offset: -2px; border-radius: 0;
}
.checklist-list { max-height: 190px; overflow-y: auto; padding: 4px; }
.checklist-item {
  display: flex; align-items: flex-start; gap: 9px; padding: 7px 8px; border-radius: 8px;
  cursor: pointer; font-weight: 400; margin: 0;
}
.checklist-item:hover { background: var(--accent-wash); }
.checklist-item input { width: auto; margin: 2px 0 0; accent-color: var(--accent); }
.checklist-item-label { font-size: 13.5px; color: var(--ink); line-height: 1.4; }
.checklist-item-hint { display: block; font-size: 12px; color: var(--ink-3); }
.checklist-empty { padding: 12px; margin: 0; }
.checklist-count { font-size: 12px; color: var(--ink-2); margin-top: 6px; }

.field-hint { font-size: 12px; color: var(--ink-3); margin: 5px 0 0; }
.field-error { font-size: 12.5px; color: var(--red); margin: 5px 0 0; min-height: 0; }
.field-error:empty { display: none; }
/* A group of fields that is one question (a date range) is a fieldset;
 * the browser's box around it is not wanted. */
fieldset.form-grid, fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
button .spinner { width: 14px; height: 14px; border-width: 2px; vertical-align: -2px; margin-right: 4px; border-color: rgba(255,255,255,.4); border-top-color: #fff; }
button.secondary .spinner { border-color: var(--line-strong); border-top-color: var(--ink); }

.tabs-config { margin-top: -10px; }
.tabs-group-label {
  font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: none;
  padding: 0 10px; display: flex; align-items: center; white-space: nowrap;
}

/* ---- Drag-and-drop upload ---- */
.drop-zone {
  border: 2px dashed var(--line-strong); border-radius: 14px;
  padding: 28px 20px; text-align: center; cursor: pointer;
  color: var(--ink-2); transition: border-color .15s, background .15s;
}
.drop-zone:hover, .drop-zone.drag-over { border-color: var(--accent); background: var(--accent-wash); }
/* The file input inside the zone is visually hidden, so when it has focus
 * the zone itself shows the ring. */
.drop-zone:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.drop-zone svg { opacity: .55; margin-bottom: 8px; }
.drop-zone p { margin: 2px 0; }
/* The two ways in, files or a whole folder, read as one sentence. */
.drop-zone p label { display: inline; margin: 0; font-size: inherit; color: inherit; cursor: pointer; }
.drop-zone p label strong { text-decoration: underline; text-underline-offset: 2px; }
.file-queue-list { margin-top: 10px; }
.file-queue-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 9px; margin-bottom: 6px; font-size: 13.5px;
}
.file-queue-item .fname { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Request detail as an overlay ----
   A centered sheet floating above a dimmed queue. Deliberately the same
   pattern at every width for now; a dedicated mobile treatment can come
   later. Narrow screens just tighten the margins rather than switching
   to a different layout. */
.detail-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 18, 16, .42);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 24px;
  opacity: 0; transition: opacity .18s ease;
  overflow-y: auto;
}
.detail-overlay.in { opacity: 1; }
.detail-overlay[hidden] { display: none; }

.detail-sheet {
  background: var(--acrylic-strong);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid var(--acrylic-border);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), var(--e3);
  width: 100%; max-width: 780px;
  transform: translateY(14px) scale(.985);
  transition: transform .22s cubic-bezier(.2,.8,.3,1);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 80px);
}
[data-theme="dark"] .detail-sheet { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--e3); }
.detail-overlay.in .detail-sheet { transform: translateY(0) scale(1); }

.detail-sheet-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 22px 26px 14px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 2;
  background: inherit; border-radius: 22px 22px 0 0;
}
.detail-sheet-head .titles { flex: 1; min-width: 0; }
.detail-sheet-head h2 { margin: 0 0 4px; }
.detail-close {
  flex-shrink: 0; width: 34px; height: 34px; padding: 0;
  border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--acrylic); color: var(--ink-2);
  display: grid; place-items: center; box-shadow: none;
}
.detail-close:hover { background: var(--red-wash); color: var(--red); transform: none; filter: none; }
.detail-close svg { width: 16px; height: 16px; }

.detail-sheet-body { padding: 4px 26px 26px; overflow-y: auto; }

/* Narrow screens keep the same overlay pattern — just less wasted margin. */
@media (max-width: 720px) {
  .detail-overlay { padding: 16px 10px; }
  .detail-sheet { max-height: calc(100vh - 32px); }
  .detail-sheet-head { padding: 18px 18px 12px; flex-wrap: wrap; }
  /* The header's buttons take a row of their own above the title, so five
     of them do not squeeze the request number to a word a line. */
  .detail-sheet-head .head-tools { order: -1; flex: 1 1 100%; justify-content: flex-end; }
  /* The next-step button takes a full row of its own under the arrows,
     More options and the close button, which fit one row together. */
  .detail-sheet-head .head-tools #sheetCta { order: 1; flex: 1 1 100%; }
  .detail-sheet-body { padding: 4px 18px 22px; }
}

/* Under a long list, how much of it is drawn and the way to more: the
   reviewer's queue and files, the custodian's sent files, the admin's
   requests. */
.more-rows { margin: 10px 0 0; font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.file-filter { display: block; width: 100%; max-width: 480px; margin: 0 0 10px; }
/* The row that heads a folder's files on the reviewer's step 2, and the
   folder headings over a requester's records. */
.folder-row td { background: var(--surface-2, rgba(127, 127, 127, 0.08)); }
.folder-row .folder-toggle { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; overflow-wrap: anywhere; text-align: left; }
.folder-row .sub-line { display: inline; margin-left: 8px; }
.folder-head { margin: 16px 0 6px; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.reviewer-order-folded { line-height: 1.6; }

/* ---- Request description: handles 5 words or 500 ----
   The queue is for scanning, so descriptions there are always clamped to two
   lines. In the open request, short descriptions show whole (truncating them
   would be a pointless click) and only long ones collapse behind a toggle. */

/* Queue cell — always clamped */
.desc-cell {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 42ch; line-height: 1.45;
}

/* Open request: the text is set as a quotation, because gathering and
   reviewing exactly what it asks for is the whole job on both pages. A
   label names it, curly quotes bracket it (generated by CSS, so the copy
   button and the word count see only the requester's words), and it sits
   on an accent rule so the eye lands there first. */
.req-desc-block { margin: 0 0 4px; }
.req-desc-kicker {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 6px;
}
.req-desc {
  white-space: pre-wrap;          /* keep the requester's own line breaks/lists */
  max-width: 70ch;                /* comfortable measure for long prose */
  line-height: 1.65;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  padding: 12px 16px 12px 18px;
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: rgba(14,124,107,.07);
}
[data-theme="dark"] .req-desc { background: rgba(47,179,155,.10); }
.req-desc p { margin: 0 0 .7em; }
.req-desc::before, .req-desc::after {
  color: var(--accent-ink); font-weight: 700;
}
.req-desc::before { content: '\201C'; }
.req-desc::after { content: '\201D'; }
/* Nothing to quote: no empty pair of marks. */
.req-desc.empty::before, .req-desc.empty::after { content: none; }

/* Collapsed state: fade out rather than a hard cut, which reads as "there's
   more" instead of looking like a rendering bug. The closing quote waits for
   the full text. */
.req-desc.clamped {
  max-height: 7.4em; overflow: hidden; position: relative;
}
.req-desc.clamped::after {
  /* Fades into the tinted block behind it. The block's wash is translucent
     over a translucent sheet, so this uses an opaque approximation of the
     two together — a transparent gradient stop would leave the text visible
     through the fade. */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4em;
  background: linear-gradient(to bottom, rgba(232,240,238,0), rgba(232,240,238,.97));
  pointer-events: none;
}
[data-theme="dark"] .req-desc.clamped::after {
  background: linear-gradient(to bottom, rgba(23,45,40,0), rgba(23,45,40,.97));
}

/* Expanded long text gets its own scroll so the controls below stay reachable. */
.req-desc.expanded {
  max-height: 44vh; overflow-y: auto;
}

.req-desc-tools {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px;
}
.req-desc-toggle, .req-desc-copy {
  background: transparent; color: var(--accent-ink); border: 0; box-shadow: none;
  padding: 4px 0; font-size: 13px; font-weight: 600; cursor: pointer;
}
.req-desc-toggle:hover, .req-desc-copy:hover {
  transform: none; filter: none; text-decoration: underline;
}
.req-desc-copy { color: var(--ink-2); font-weight: 500; }
.req-desc-len { font-size: 12px; color: var(--ink-3); }

/* Reviewer's request sheet is wider than the custodian's — it carries far
   more inside it (assignments, files, extension reasons, the letter editor). */
.detail-sheet-wide { max-width: 940px; }

/* Reviewer request table: IDs and dates never break mid-value — a wrapped
   "PRA-2026-\n00002" reads as two things. The department under the ID and
   the range between two dates may still wrap as whole units. */
.id-cell { white-space: nowrap; }
.id-cell .small { white-space: normal; }
.nowrap { white-space: nowrap; }

/* The correspondence editor inline in step 3. The 260px the letter editor
   needs would leave a quick "can you clarify?" note floating in an empty
   slab, so it starts smaller and grows as the message does. */
#sec-respond .rt-editor { min-height: 130px; border-radius: 10px; }

/* Search + segmented filter sit inside the list card now that the reviewer
   uses a full-width table rather than a sidebar. */
.card > .search { width: 100%; margin: 10px 0 12px; }
.card > .seg { margin-bottom: 14px; }
.card > .sub { margin-top: -4px; font-size: 13px; }

/* ---- Next-action banner ----
   Tells the reviewer what this request needs, rather than making them work
   it out from eight equally-weighted sections. */
.disclosure.current { border-color: var(--accent-line, var(--line-strong)); }
.disclosure.current > summary { box-shadow: inset 3px 0 0 var(--accent); }
.disclosure > summary .sum.next {
  display: inline-flex; align-items: center; gap: 12px; color: var(--ink); flex-wrap: wrap; justify-content: flex-end;
}
.disclosure > summary .sum.next strong { font-weight: 600; }
.disclosure > summary .sum.next .btn { margin: -5px 0; }

/* ---- Draft response card ---- */
.draft-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.draft-status .draft-close { margin-left: auto; }
.draft-preview {
  font-size: 13.5px; line-height: 1.55; margin: 0 0 10px;
  padding-left: 10px; border-left: 2px solid var(--line-strong);
}

/* ---- History section ---- */
.hist-heading {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); margin: 20px 0 8px;
}

/* ---- Bulk actions ---- */
.bulk-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--accent-wash); border: 1px solid var(--line-strong);
  border-radius: 11px; padding: 9px 14px; margin-bottom: 12px; font-size: 13.5px;
}
.bulk-bar span { font-weight: 600; margin-right: 4px; }
th.cb-col, td.cb-col { width: 34px; padding-right: 0; }
td.cb-col input, th.cb-col input { width: auto; margin: 0; accent-color: var(--accent); }
tr.row-selected { background: var(--accent-wash); }

/* ---- Compact request facts ----
   The same hairline figure strip the admin dashboard uses (see .figure-strip
   below), with smaller figures. "Extend deadline" is its last cell rather than
   a link trailing the row. */
.req-facts { margin: 14px 0 0; }
.req-facts .is-danger .v { color: var(--red); }
.req-facts .is-warn .v { color: var(--amber, #a4690b); }
.inline-link { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.inline-link:hover { text-decoration: underline; }

/* ---- File row actions ---- */
.file-actions .more-btn { padding: 5px 10px; font-size: 15px; line-height: 1; letter-spacing: 1px; }

/* ---- Numbered reviewer steps ---- */
.step-num {
  display: inline-grid; place-items: center; width: 21px; height: 21px;
  border-radius: 50%; font-size: 11.5px; font-weight: 700; margin-right: 9px;
  border: 1.5px solid var(--line-strong); color: var(--ink-3); background: transparent;
  flex-shrink: 0; vertical-align: 1px;
}
.step-num.current { border-color: var(--accent); background: var(--accent); color: #fff; }
/* A finished step shows the tick instead of its number: font-size 0 hides
   the digit, and the ::after brings its own size back. */
.step-num.done {
  border-color: var(--accent); background: var(--accent-wash); color: var(--accent-ink);
  font-size: 0;
}
.step-num.done::after { content: '\2713'; font-size: 12px; }
h2 > .step-num { vertical-align: 0; }

/* ---- Correspondence thread ---- */
.corr-thread { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.corr-msg { border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; max-width: 88%; }
.corr-msg.outbound { align-self: flex-end; background: var(--accent-wash); border-color: var(--accent-line, var(--line-strong)); }
.corr-msg.inbound { align-self: flex-start; background: var(--acrylic); }
/* Unread mail has to be findable at a glance in a long thread: a coloured
   left edge scans far faster than a full border, and the tinted background
   separates it from everything already read. */
/* The quiet pulse on arrival, once, so a message landing while the reviewer
   is already looking at the thread doesn't appear silently; the keyframes
   and the reduced-motion override are below, beside each other. */
.corr-msg.unread {
  border-color: var(--accent);
  border-left: 4px solid var(--accent);
  background: var(--accent-wash);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  animation: corrArrive .9s ease-out 1;
}
.corr-msg.unread .corr-meta strong { color: var(--accent-ink); }
[data-theme="dark"] .corr-msg.unread { box-shadow: none; }

/* The pulse itself, and the preference that turns it off. */
@keyframes corrArrive {
  from { background: var(--accent); }
  to   { background: var(--accent-wash); }
}
@media (prefers-reduced-motion: reduce) { .corr-msg.unread { animation: none; } }
.corr-meta { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-size: 12px; margin-bottom: 5px; }
.corr-body { font-size: 14px; line-height: 1.55; }
.corr-body p { margin: 0 0 .5em; }
.corr-body p:last-child { margin-bottom: 0; }

/* A sent letter in the thread: full width with a document edge, so the
   formal letters and the chat around them read as one conversation while
   staying visually distinct. Placed after .outbound so it wins the tie. */
.corr-msg.corr-letter {
  max-width: 100%; align-self: stretch;
  background: var(--acrylic-strong); border-color: var(--line-strong);
  border-left: 3px solid var(--accent);
}
.corr-letter .corr-body.folded { max-height: 9em; overflow: hidden; position: relative; }
.corr-letter .corr-body.folded::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2em;
  background: linear-gradient(to bottom, rgba(248,249,248,0), rgba(248,249,248,.97));
  pointer-events: none;
}
[data-theme="dark"] .corr-letter .corr-body.folded::after {
  background: linear-gradient(to bottom, rgba(20,30,27,0), rgba(20,30,27,.97));
}
.corr-fold-toggle {
  background: transparent; border: 0; box-shadow: none; padding: 4px 0 0;
  color: var(--accent-ink); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.corr-fold-toggle:hover { transform: none; filter: none; text-decoration: underline; box-shadow: none; }

/* System notes in the thread (deadline extensions): dated facts, not prose. */
.corr-note { align-self: center; text-align: center; font-size: 12.5px; color: var(--ink-3); padding: 2px 8px; }

/* The composer belongs to the thread it feeds. */
.corr-compose { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.rt-editor:empty::before { content: attr(data-placeholder); color: var(--ink-3); pointer-events: none; }

/* ---- Agency identity ---- */
.agency-card h2 { margin-top: 0; margin-bottom: 6px; }
.agency-card p { margin: 4px 0; }
main.landing .agency-card {
  margin-top: clamp(24px, 4vw, 40px); padding: 20px 24px;
  background: var(--acrylic); border: 1px solid var(--acrylic-border);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), var(--e1);
}
[data-theme="dark"] main.landing .agency-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), var(--e1);
}

/* The staff sign-in on an agency's front page: present, but folded away —
   almost everyone on that page is a member of the public. */
.staff-fold { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 6px; }
.staff-fold > summary {
  cursor: pointer; list-style: none; user-select: none;
  padding: 8px 0 2px; font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.staff-fold > summary::-webkit-details-marker { display: none; }
.staff-fold > summary::before { content: '▸ '; color: var(--ink-3); }
.staff-fold[open] > summary::before { content: '▾ '; }
.staff-fold > summary:hover { color: var(--accent-ink); }

/* ---- Requester: row details, onboarding, actions ---- */
.row-actions { white-space: nowrap; }
.row-actions button { margin-right: 4px; }
tr.detail-row td { background: var(--accent-wash); }
.req-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 22px; padding: 6px 2px; font-size: 13.5px; }
.req-details .k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }

/* The requester's progress view under an opened row: the stage track on
   the left, notes and history on the right. */
.progress-block { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 10px 32px;
  margin-top: 14px; padding: 14px 2px 4px; border-top: 1px solid var(--line); font-size: 13.5px; }
@media (max-width: 720px) { .progress-block { grid-template-columns: 1fr; } }
.progress-block .k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.progress-summary { margin: 0 0 4px; font-weight: 500; }
.progress-note { padding: 10px 12px; border-radius: 10px; background: var(--accent-wash); margin-bottom: 10px; }
.progress-note.attn { border-left: 3px solid var(--red); }
.progress-events { max-height: 240px; }
.progress-events .t { display: block; font-size: 12px; color: var(--ink-3); }

.onboarding { padding: 32px 24px; text-align: left; }
.onboarding .lead { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.tip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px; margin: 18px 0; }
.tip { border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; }
.tip.good { border-left: 3px solid var(--green, #2e7d32); }
.tip.poor { border-left: 3px solid var(--amber, #a4690b); }
.tip p { margin: 6px 0; font-size: 13.5px; }
.tip-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.tip-list { margin: 0 0 18px; padding-left: 20px; color: var(--ink-2); font-size: 13.5px; }
.tip-list li { margin-bottom: 4px; }

/* ---- Requester details, folded into the request card ---- */
.req-who { margin-top: 12px; }
.req-who > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--accent-ink);
  list-style: none; padding: 2px 0;
}
.req-who > summary::-webkit-details-marker { display: none; }
.req-who > summary::before { content: '▸ '; }
.req-who[open] > summary::before { content: '▾ '; }
.req-who-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px 20px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2);
}
.req-who-grid .wide { grid-column: 1 / -1; }
.req-who-grid .k { font-weight: 600; color: var(--ink-3); margin-right: 5px; }
/* Correcting what is recorded, under the details themselves. */
.req-who-edit { margin: 8px 0 0; font-size: 13px; }

/* ---- Sub-headings inside a step ---- */
.sub-head {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); margin: 22px 0 8px;
}
.sub-head:first-child { margin-top: 4px; }

/* ---- Agency provisioning ---- */
.ok-text { color: var(--green, #1f7a4d); font-weight: 600; }
.error-text { color: var(--red); font-weight: 600; }
input[type="color"] { height: 38px; padding: 3px; cursor: pointer; }

/* ---- Colour-scheme swatches ----
   These had no styling at all, so the base `button` rule painted every one of
   them as a teal primary button: the five schemes were five identical teal
   pills, the three colour chips inside each were empty inline spans measuring
   0x0, and `.selected` changed nothing you could see. You could not tell which
   scheme an agency was on, or what any of them looked like.

   So the swatch has to answer both questions on sight: the chips show the
   scheme, and the selected one is marked three ways over — ring, fill, and a
   tick — because a single accent ring is exactly what disappears against the
   accent-coloured chips of the Evergreen scheme it sits around. */
.swatch-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 2px; }

.swatch {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch;
  gap: 7px; width: 104px; padding: 9px; position: relative;
  background: var(--acrylic); color: var(--ink-2);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  box-shadow: none; font-weight: 500;
}
.swatch:hover {
  filter: none; transform: translateY(-1px);
  border-color: var(--accent); color: var(--ink); box-shadow: var(--e1);
}
.swatch:active { transform: translateY(0); }
.swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The scheme itself: accent, accent ink, accent wash, side by side. */
.swatch-colours {
  display: flex; height: 26px; border-radius: 7px; overflow: hidden;
  border: 1px solid var(--line);
}
.swatch-colours span { flex: 1 1 0; min-width: 0; }

.swatch-name { font-size: 12px; line-height: 1.2; text-align: center; }

/* Selected: a ring, a filled ground, a heavier name, and a tick in the
   corner. Any one of these can be lost — the ring against a teal scheme, the
   fill for someone who does not see the difference — so it is marked in ways
   that do not fail together. */
.swatch.selected {
  border-color: var(--accent); background: var(--accent-wash);
  color: var(--accent-ink); font-weight: 700;
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.swatch.selected .swatch-name { font-weight: 700; }
.swatch.selected::after {
  content: '✓'; position: absolute; top: -8px; right: -8px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.swatch.selected:hover { transform: none; }

/* ---- Callout ----
   A consequence worth stopping to read, rather than another grey hint below a
   field. Used where a setting trades safety for convenience. */
.callout {
  border-left: 3px solid var(--line-strong); background: var(--bg-deep);
  padding: 12px 15px; margin-top: 14px; border-radius: var(--r-sm);
  font-size: 14px; line-height: 1.5; color: var(--ink-2);
}
.callout strong { display: block; color: var(--ink); margin-bottom: 3px; }
.callout.warn { border-left-color: var(--amber); background: var(--amber-wash); }
.callout.warn strong { color: var(--amber); }

/* ---- Per-agency settings tabs ---- */
.ad-field { margin-bottom: 12px; }
#agencyDetail .tabs { margin-bottom: 18px; }

/* ---- Custodian outcome cards ----
   Three mutually exclusive answers, all visible at once. A dropdown hid two
   of them, which for an untrained custodian meant the default won by being
   the only thing on screen. */
.outcome-choices { display: grid; gap: 8px; margin-top: 10px; }
.outcome-choice {
  display: flex; gap: 11px; align-items: flex-start; padding: 11px 14px; margin: 0;
  border: 1px solid var(--line-strong); border-radius: 12px; cursor: pointer;
  background: var(--acrylic); font-weight: 400;
  transition: border-color .15s, background .15s;
}
.outcome-choice:hover { background: var(--accent-wash); }
.outcome-choice input { width: auto; margin: 3px 0 0; accent-color: var(--accent); flex-shrink: 0; }
.outcome-choice strong { display: block; font-size: 14px; }
.outcome-choice .small { display: block; margin-top: 1px; }
.outcome-choice:has(input:checked) {
  border-color: var(--accent); background: var(--accent-wash);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* ---- Folded add-forms on the admin's setup tabs ----
   The roster is what an admin comes to look at; the blank form for adding
   one more account or letter waits behind this instead of dominating. */
.add-fold { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 4px; }
.add-fold > summary {
  cursor: pointer; list-style: none; user-select: none;
  padding: 8px 0; font-size: 13.5px; font-weight: 600; color: var(--accent-ink);
}
.add-fold > summary::-webkit-details-marker { display: none; }
.add-fold > summary:hover { text-decoration: underline; }
.add-fold[open] > summary { color: var(--ink); }

/* A row just added, saved or brought back, lit once as it is scrolled to,
   so a new line landing at the foot of a long list is seen. */
@keyframes rowAdded {
  from { background: var(--accent-wash); }
  to   { background: transparent; }
}
.row-added > td { animation: rowAdded 1.8s ease-out 1; }

/* First lines of a letter or template in a list; the whole text lives in
   its Edit dialog. */
.body-preview {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 13px; line-height: 1.5; white-space: pre-wrap; margin: 6px 0 2px;
}

/* ======================================================================
   Refinements across the tenant pages.

   One toolbar row, fewer columns, numbers right-aligned, status as a dot.
   Every queue on the site is the same table inside the same card; every
   figure is the same hairline strip; every irreversible button carries the
   sentence that says what it does beside it, not in a dialog after it.
   ====================================================================== */

/* ---- Page head: the title on the left, its tools on the right ---- */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
}
.page-head h1, .page-head h2 { margin: 0; }
.page-head h1 .count { font-size: 16px; color: var(--ink-3); font-weight: 500; margin-left: 6px; }
.page-head h2 .count { font-size: 14px; color: var(--ink-3); font-weight: 500; margin-left: 6px; }
.page-head .tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-sub { font-size: 13px; color: var(--ink-2); margin: -6px 0 14px; max-width: 74ch; }
.page-head .search { width: 230px; margin: 0; padding: 8px 12px 8px 34px; font-size: 13px; border-radius: 10px; background-position: 12px center; background-size: 15px; }

/* Segmented filter that sits in the page head, with counts on the tabs. */
.seg.compact { margin: 0; gap: 2px; border-radius: 11px; }
.seg.compact button { flex: 0 0 auto; padding: 6px 13px; }
.seg .count {
  display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 3px; border-radius: 999px;
  font-size: 11px; line-height: 16px; text-align: center; color: var(--ink-3); font-weight: 500;
}
.seg .count.warn { background: var(--amber); color: #fff; font-weight: 600; }
.seg .count.danger { background: var(--red); color: #fff; font-weight: 600; }

/* ---- The queue table, in a card ----
   Hairline rows, uppercase column labels, and a 3px edge column that marks
   the rows needing attention. Rows are the click target; occasional actions
   live behind a single "more" button at the end of the row. */
.table-card {
  background: var(--acrylic); border: 1px solid var(--acrylic-border); border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), var(--e1);
  overflow: auto; margin-bottom: 16px;
}
[data-theme="dark"] .table-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--e1); }
.table-card table { font-size: 13.5px; }
.table-card th {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
  padding: 11px 10px; background: var(--acrylic-strong); white-space: nowrap;
}
.table-card td { padding: 9px 10px; vertical-align: top; }
.table-card th:first-child, .table-card td:first-child { padding-left: 12px; }
.table-card th:last-child, .table-card td:last-child { padding-right: 12px; }
.table-card th.edge, .table-card td.edge { width: 3px; padding: 0; }
.table-card td.edge.accent { background: var(--accent); }
.table-card td.edge.amber { background: var(--amber); }
.table-card td.edge.red { background: var(--red); }
.table-card tr.attn td { background: var(--accent-wash); }
/* A label over each run of rows in the reviewer's queue, saying why they
   are in that order. */
.table-card tr.group-row td {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); padding: 14px 10px 4px; border-bottom: 0;
}
.table-card tr.group-row td:first-child { padding-left: 12px; }
.table-card tr.group-row.overdue td { color: var(--red); }
.table-card tbody tr.clickable { cursor: pointer; }
.table-card tbody tr:last-child td { border-bottom: 0; }
.table-card .desc-cell { max-width: none; color: var(--ink-2); }
.table-card .empty { padding: 28px 20px; }
th.num, td.num { text-align: right; }
.tnum { font-variant-numeric: tabular-nums; }
.sub-line { font-size: 12px; color: var(--ink-3); margin-top: 2px; white-space: normal; }
td.menu-cell { width: 44px; text-align: right; white-space: nowrap; }
/* The heading a cell carries for itself, drawn only where the table's own
   headings are hidden: a row stacked into a block on a phone turns the
   switch on, and nowhere else does. The label is written on the cell as
   data-label, so the markup says it once and reads the same in either
   stylesheet. It reaches every td[data-label] on the sheet, so a page that
   labels cells of its own and prints them from its own ::before has to turn
   the switch on for them as well: the display comes from here whatever the
   page's own rule says about content, since each property cascades for
   itself. No page on this sheet does; the plan table on platform.html, which
   is Broadsheet, is the one that does. */
td[data-label]::before {
  content: attr(data-label) ": ";
  display: var(--cell-label, none);
  color: var(--ink-3); font-weight: 600;
}
.row-menu {
  background: transparent; box-shadow: none; color: var(--ink-3);
  padding: 2px 8px; font-size: 16px; line-height: 1; letter-spacing: 1px; border-radius: 7px;
}
.row-menu:hover { background: var(--accent-wash); color: var(--accent-ink); transform: none; filter: none; box-shadow: none; }

/* Status as a dot beside its label. The dot carries the colour so the word
   can stay legible; a filled pill per row was the loudest thing on screen. */
.status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.status-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--ink-3)); flex-shrink: 0; }
.status-dot.info { --dot: var(--accent); color: var(--accent-ink); font-weight: 600; }
.status-dot.ok { --dot: var(--green); }
.status-dot.warn { --dot: var(--amber); color: var(--amber); font-weight: 600; }
.status-dot.danger { --dot: var(--red); color: var(--red); font-weight: 600; }
.status-dot.neutral { color: var(--ink-3); }

/* Two-line due cell: what is left in bold, the date underneath. */
.due-cell { display: inline-block; text-align: right; }
/* "12 days left" and its date stay on one line each; beside a long
   description the column was squeezed to a word a line. */
.due-cell b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.due-cell .sub-line { white-space: nowrap; }
.due-cell.danger b { color: var(--red); }
.due-cell.warn b { color: var(--amber); }
.due-cell .done { color: var(--ink-3); }
.records-ready { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--accent-ink); }
.records-ready svg { width: 13px; height: 13px; }
.flag-line { font-size: 12px; font-weight: 600; margin-top: 2px; }
/* Where a meeting stands (lib/meetings/progress.js): a dot for each of its
   five steps, filled when done, ringed when it is the one in hand. */
.stage-steps { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
.stage-step { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); background: transparent; }
.stage-step.done { background: var(--accent); box-shadow: none; }
.stage-step.now { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 3px var(--accent-wash); }
/* One meeting's page (public/js/meetingpagepanel.js): its five steps in a row, and what is known of it. */
ol.stage-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
ol.stage-list li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-3); }
ol.stage-list li.done { color: var(--ink-2); }
ol.stage-list li.now { color: var(--ink); font-weight: 600; }
.mg-facts { display: flex; flex-wrap: wrap; gap: 14px 40px; }
.mg-fact { display: flex; flex-direction: column; min-width: 180px; }
.mg-fact .mg-k { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.mg-fact .mg-v { font-size: 15px; font-weight: 600; }
/* The path of an agenda item across the top of its page (trackOf in
   lib/meetings/workflow.js): a numbered stop for its submitter, each approver
   and the agenda, joined by a line. A stop that is done carries a tick, the
   one in hand is filled and ringed, one sent back is red, one passed over is
   faint. On a phone the stops run down the page instead of across it. */
ol.item-track { list-style: none; margin: 0; padding: 4px 0 0; display: flex; counter-reset: stop; }
ol.item-track li { flex: 1 1 0; min-width: 0; position: relative; padding: 36px 6px 0; text-align: center; font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
ol.item-track li::before { counter-increment: stop; content: counter(stop); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; line-height: 28px;
  border-radius: 50%; font-weight: 600; font-size: 12.5px; text-align: center; background: var(--bg); color: var(--ink-3); box-shadow: inset 0 0 0 2px var(--line-strong); z-index: 1; }
ol.item-track li::after { content: ''; position: absolute; top: 13px; right: calc(50% + 14px); width: calc(100% - 28px); height: 2px; background: var(--line-strong); }
ol.item-track li:first-child::after { display: none; }
ol.item-track li .t { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
ol.item-track li .w, ol.item-track li .s { display: block; }
ol.item-track li.done::before { content: '\2713'; background: var(--green); color: #fff; box-shadow: none; }
ol.item-track li.done::after, ol.item-track li.current::after { background: var(--green); }
ol.item-track li.current::before { background: var(--accent); color: #fff; box-shadow: 0 0 0 5px var(--accent-wash); }
ol.item-track li.current .t { color: var(--ink); }
ol.item-track li.current .s { color: var(--accent-ink); font-weight: 600; }
ol.item-track li.rejected::before { content: '!'; background: var(--red); color: #fff; box-shadow: none; }
ol.item-track li.skipped { opacity: .55; }
@media (max-width: 720px) {
  ol.item-track { display: block; }
  ol.item-track li { text-align: left; padding: 3px 0 16px 40px; min-height: 30px; }
  ol.item-track li::before { left: 0; transform: none; }
  ol.item-track li::after { top: auto; bottom: calc(100% - 1px); right: auto; left: 13px; width: 2px; height: calc(100% - 28px); }
}
/* Which meeting an item is going to, said once and plainly. */
.going-to { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.going-to .k { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.going-to .v { font-size: 16px; font-weight: 600; }
.going-to .v.none { color: var(--amber); }
/* The one thing to do next, above everything else on the page. */
.next-card { border-left: 4px solid var(--accent); }
.next-card.done { border-left-color: var(--green); }
.next-card.attn { border-left-color: var(--red); }
.next-card h2 { margin: 0 0 4px; font-size: 17px; }
.next-card p { margin: 0 0 10px; }
/* The checklist: a circle for what is still wanted and a tick for what is
   done, and a line not yet done is a link to its box. */
.next-card ul.todo { list-style: none; margin: 0 0 12px; padding: 0; }
.next-card ul.todo li { position: relative; margin: 3px 0; padding-left: 24px; }
.next-card ul.todo li::before { content: '\25CB'; position: absolute; left: 3px; top: 0; color: var(--ink-3); }
.next-card ul.todo li.todo-done { color: var(--ink-3); }
.next-card ul.todo li.todo-done::before { content: '\2713'; color: var(--green); font-weight: 700; }
/* Who sent an item back and what they wrote, on the card at the top. */
.next-card .sent-back-note { padding: 8px 12px; border-left: 3px solid var(--red); background: var(--acrylic-strong); border-radius: 0 8px 8px 0; }
/* The steps of a draft, as a plain list of who approves it and in what order. */
ol.plain-steps { margin: 0 0 12px; padding-left: 22px; }
ol.plain-steps li { margin: 4px 0; }
/* The way back from an open item to the list, which is put away meanwhile. */
.back-bar { margin: 0 0 8px; }
td.nowrap { white-space: nowrap; }
/* A button that reads as a link and wraps keeps its lines at the left, as a link would. */
td button.link-like, .todo button.link-like { text-align: left; }
/* An item's sections: shorter to start with and growing with the words, so
   five empty boxes do not make a page of scrolling. */
.item-section .rt-editor { min-height: 110px; max-height: none; }
.item-section .field-hint { margin: 0 0 8px; }
/* The bar that stays at the foot of the window while an item is edited:
   whether it is saved, Save, and Send for approval. It scrolls away with the
   sections it belongs to once the page has moved past them. */
.save-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 14px; margin: 14px 0; background: var(--acrylic-strong); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--e1); }
.save-bar .save-state { font-size: 12.5px; color: var(--ink-3); }
.save-bar .save-state.warn { color: var(--amber); font-weight: 600; }
.save-bar .save-state.danger { color: var(--red); font-weight: 600; }
.save-bar .btn-row { margin: 0; }
/* One item waiting on somebody, on My work: what it is, where it stands,
   what earlier approvers wrote, and the decision at its foot. */
.mw-item { padding: 18px 22px; }
.mw-item + .mw-item { margin-top: 12px; }
.mw-item-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; }
.mw-item-head h3 { margin: 0; font-size: 16px; }
.mw-item-head h3 a { text-decoration: none; }
.mw-item-head h3 a:hover { text-decoration: underline; }
.mw-item .mw-title { margin: 6px 0 0; font-size: 14.5px; }
.mw-item .mw-summary { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-2); }
.mw-item .mw-facts { margin-top: 8px; }
.mw-item .mw-said { margin: 8px 0 0; padding: 6px 12px; border-left: 3px solid var(--line-strong); font-size: 13px; }
.mw-item .mw-decide { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
/* One step waiting on somebody: its tick, what is asked, and how long it has
   been there. Set apart so several in a row stay readable. */
.mw-step { padding: 4px 0; }
.mw-step + .mw-step { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.mw-step .btn-row { margin-top: 8px; align-items: center; }
/* The path an item takes, in one line: who has approved it, who has it now,
   and who comes after. The same stops as the item's own page draws. */
ol.order-line { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 4px; font-size: 12.5px; color: var(--ink-3); }
ol.order-line li + li::before { content: '\203A'; margin-right: 6px; color: var(--ink-3); }
ol.order-line li.done { color: var(--ink-2); }
ol.order-line li.done .tick { color: var(--green); font-weight: 700; }
ol.order-line li.current { color: var(--ink); font-weight: 600; }
ol.order-line li.rejected { color: var(--red); }
/* What a person keeps for themselves, folded behind one line until asked for. */
.mw-fold-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
/* An item read by someone who cannot change it: its facts as a list and its
   sections as text, rather than a form with every box greyed out. */
dl.item-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
dl.item-facts dt { font-size: 12px; color: var(--ink-3); font-weight: 600; }
dl.item-facts dd { margin: 0; }
dl.item-facts dd.lead { font-size: 15px; font-weight: 600; }
.item-read h3 { margin: 0 0 8px; font-size: 15px; }
.rt-read { line-height: 1.55; overflow-wrap: anywhere; }
.rt-read > :first-child { margin-top: 0; }
.rt-read > :last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  dl.item-facts { grid-template-columns: 1fr; gap: 2px; }
  dl.item-facts dd { margin-bottom: 8px; }
}
/* The heading of an open item: its number and name, and under them one line
   saying where it stands, what kind it is and whose it is. */
.item-head { align-items: flex-start; }
.item-head h1 { margin-bottom: 6px; overflow-wrap: anywhere; }
.item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0 0 14px; font-size: 13.5px; color: var(--ink-2); }
.item-meta .status-dot { font-size: 13.5px; font-weight: 600; }
/* Approval and History, folded until asked for: a line that says how much
   is behind it, and the card under it when opened. The browser's own marker
   is the sign that it opens. */
.item-fold { margin-top: 14px; }
.item-fold > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 16px; border: 1px solid var(--acrylic-border); border-radius: 14px; background: var(--acrylic); cursor: pointer; list-style-position: inside; }
.item-fold > summary:hover { background: var(--acrylic-strong); }
.item-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.item-fold[open] > summary { border-radius: 14px 14px 0 0; border-bottom-color: transparent; }
.item-fold .fold-title { font-weight: 650; font-size: 15px; color: var(--ink); }
.item-fold .fold-line { font-size: 13.5px; color: var(--ink-2); }
.item-fold > .card { margin: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
/* The staff report, in the editor on the item's own page: a card with no
   padding of its own, the editor's bar at its top and the editor under it,
   tall enough to write in and never taller than the window. The History
   panel opens over the card, not over the page. */
.office-embed { position: relative; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
/* One waiting to be mounted (a claim's memorandum, #cpMemo) takes no room. */
.office-embed[hidden] { display: none; }
.office-embed .office-bar { border-radius: 0; }
.office-embed .office-name h3 { margin: 0; font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.office-frame.embedded { flex: none; height: min(82vh, 900px); min-height: 420px; }
.office-embed .office-drawer { position: absolute; z-index: 6; }
.office-embed #oeMsg:not(:empty) { padding: 7px clamp(12px, 2vw, 20px); font-size: 13.5px; border-bottom: 1px solid var(--line); }
.office-embed #oeMsg.err { background: var(--red-wash); color: var(--red); }
/* The bar at the foot, where the editor has a place of its own on the page:
   the bar sticks within the whole item, not within the last of its parts. */
#lfBarSlot { position: sticky; bottom: 0; z-index: 5; }
#lfBarSlot .save-bar { position: static; }
/* The recommendation as the staff report gives it, on the item's card. */
.rec-line { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--acrylic); }
.rec-line .k { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.rec-line .field-hint { margin: 8px 0 0; }
.item-read .rec-line { margin-top: 0; }
/* An item still written in its boxes, offered the move to a Word document. */
.move-report { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--accent-wash); }
.move-report p { margin: 0 0 10px; max-width: 72ch; }
.move-report .btn-row { margin: 0; }
/* A numbered heading for each part of the item's page. */
h2 .part-num { display: inline-block; width: 24px; height: 24px; line-height: 24px; border-radius: 50%; text-align: center; font-size: 12.5px; background: var(--accent-wash); color: var(--accent-ink); margin-right: 8px; vertical-align: 2px; }
/* A document's row: what it is, and the one thing most people want of it. */
.doc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.doc-row:first-child { border-top: 0; }
.doc-row .doc-main { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.doc-row .doc-kind { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--accent-wash); color: var(--accent-ink); margin-right: 8px; }
.doc-row .doc-kind.pdf { background: var(--acrylic-strong); color: var(--ink-2); }
/* The Word document editor (public/docedit.html): a sheet of paper on the
   page's ground, each paragraph a box of its own. */
/* The embedded document editor's page (public/docedit.html,
   public/js/officeeditor.js): one slim bar, and the editor has the rest of
   the window, its whole width. The page itself never scrolls, so the
   editor's scroll bar is the only one; on a phone, where the bar wraps to
   several lines, the page scrolls and the editor keeps most of a screen. */
body.office-page { height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.office-shell { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.office-bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px clamp(12px, 2vw, 20px); background: var(--acrylic-strong); border-bottom: 1px solid var(--line); }
.office-bar .grow { flex: 1 1 auto; }
.office-bar button, .office-bar .btn { padding: 7px 14px; font-size: 13.5px; }
.office-back { font-size: 13.5px; font-weight: 600; white-space: nowrap; padding-right: 10px; border-right: 1px solid var(--line-strong); }
.office-name { min-width: 0; flex: 0 1 auto; display: flex; flex-direction: column; line-height: 1.25; }
.office-name h1 { margin: 0; font-family: var(--font-body); font-size: 15.5px; font-weight: 650; letter-spacing: 0; overflow-wrap: anywhere; }
.office-bar span.office-status.small { color: var(--ink-2); }
.office-status { padding: 2px 10px; border-radius: 999px; background: var(--bg-deep); white-space: nowrap; }
.office-status:empty { display: none; }
.office-notice { flex: none; padding: 7px clamp(12px, 2vw, 20px); background: var(--amber-wash); border-bottom: 1px solid var(--line); font-size: 13.5px; }
.office-notice[hidden] { display: none; }
.office-notice p { margin: 0; }
.office-notice button { margin-left: 8px; }
.office-shell > #oeMsg { flex: none; }
.office-shell > #oeMsg:not(:empty) { padding: 7px clamp(12px, 2vw, 20px); font-size: 13.5px; border-bottom: 1px solid var(--line); }
.office-shell > #oeMsg.err { background: var(--red-wash); color: var(--red); }
.office-frame { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.office-frame > div, .office-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
/* While the editor opens, a line over its frame; when it has not opened in
   time, what to do about it, under the bar (officeeditor.js, stalled). */
.office-wait { position: absolute; left: 50%; top: 38%; transform: translateX(-50%); z-index: 1; margin: 0; padding: 8px 16px; display: flex; align-items: center; gap: 8px; border-radius: 999px; background: var(--bg); box-shadow: var(--e2); font-size: 13.5px; pointer-events: none; }
.office-wait[hidden] { display: none; }
.office-stall { flex: none; padding: 12px clamp(12px, 2vw, 20px); background: var(--amber-wash); border-bottom: 1px solid var(--line); font-size: 14px; }
.office-stall[hidden] { display: none; }
.office-stall p { margin: 0 0 8px; max-width: 70ch; }
.office-stall .btn-row { margin: 0; }
.office-gone { margin: 24px clamp(12px, 3vw, 28px); max-width: 640px; }
/* History, at the side, over the editor. */
.office-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(440px, 100vw); overflow-y: auto; padding: 16px 18px 24px; background: var(--bg); border-left: 1px solid var(--line-strong); box-shadow: var(--e3); }
.office-drawer[hidden] { display: none; }
.office-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.office-drawer-head h2 { margin: 0; }
.hist-list { list-style: none; margin: 12px 0 0; padding: 0; }
.hist-row { padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.hist-row details { margin-top: 4px; }
.hist-row details p { margin: 2px 0 0 12px; }
@media (max-width: 700px), (max-height: 480px) {
  body.office-page { height: auto; min-height: 100vh; overflow: auto; }
  .office-frame { flex: none; height: 82vh; min-height: 360px; }
  /* The way back and the name on lines of their own, then the buttons. */
  .office-back { border-right: 0; flex: 1 1 100%; order: -2; }
  .office-name { flex: 1 1 100%; order: -1; }
  .office-bar .grow { display: none; }
}
.doc-sheet { max-width: 8.5in; margin: 0 auto; padding: clamp(18px, 6vw, 0.9in); background: #fff; color: #111; border-radius: 6px; box-shadow: var(--e2); font: 12pt/1.45 Calibri, Arial, sans-serif; }
.doc-sheet .dp { margin: 0 0 8pt; min-height: 1.3em; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 3px; outline-offset: 3px; }
.doc-sheet .dp[contenteditable='true']:hover { background: #f4f8fb; }
.doc-sheet .dp[contenteditable='true']:focus-visible { outline: 2px solid var(--accent); background: #fff; }
.doc-sheet .dp.locked { background: repeating-linear-gradient(135deg, #f3f3f3 0 8px, #fafafa 8px 16px); color: #555; cursor: not-allowed; padding: 2px 4px; }
.doc-sheet .dp.title { font-size: 20pt; font-weight: 700; text-align: center; }
.doc-sheet .dp.heading1 { font-size: 15pt; font-weight: 700; margin-top: 14pt; }
.doc-sheet .dp.heading2 { font-size: 13pt; font-weight: 700; margin-top: 10pt; }
.doc-sheet .dp.heading3 { font-size: 12pt; font-weight: 700; margin-top: 8pt; }
.doc-sheet .dp.list { margin-left: 22pt; display: list-item; list-style: disc; }
.doc-sheet table.dt { width: 100%; border-collapse: collapse; margin: 0 0 8pt; }
.doc-sheet table.dt td { border: 1px solid #bbb; padding: 4px 6px; vertical-align: top; }
.doc-sheet table.dt td .dp { margin-bottom: 3pt; }
.doc-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; margin: 0 auto 14px; max-width: 8.5in; background: var(--acrylic-strong); backdrop-filter: blur(14px); border-radius: 12px; box-shadow: var(--e1); }
.doc-bar .grow { flex: 1 1 auto; }
.doc-bar button.tool { min-width: 38px; padding: 6px 10px; }
.doc-bar button.tool[aria-pressed='true'] { background: var(--accent); color: #fff; }
/* The bar across the pages of one product (drawProductNav in api.js). */
nav.product-nav { display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; padding: 6px clamp(14px, 3vw, 28px); border-bottom: 1px solid var(--line); background: var(--acrylic); }
nav.product-nav a { padding: 6px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
nav.product-nav a:hover { color: var(--ink); background: var(--acrylic-strong); }
nav.product-nav a[aria-current='page'] { color: var(--accent-ink); background: var(--acrylic-strong); box-shadow: var(--e1); }
nav.product-nav .product-nav-name { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-right: 8px; }
.flag-line.danger { color: var(--red); }
.flag-line.warn { color: var(--amber); }
/* ---- Phones ----
   Three things ran past a phone's edge. The Requests filter's four buttons
   could neither wrap nor shrink, so the reviewer's page was wider than the
   screen: below 520px the tools take the full width and the buttons share
   it. A list table scrolled sideways inside its card, so a phone saw the
   first column or two and nothing said more was there: below 560px the
   main lists (.stack-on-phone) turn each row into one block, and a cell
   carrying data-label prints that label before its value, since the column
   headings are gone. And the tab bar wrapped into four or five rows with
   "Setup" stranded at the end of one of them: below 560px each group of
   tabs takes a row of its own, headed by its name. */
@media (max-width: 520px) {
  .page-head .tools { width: 100%; }
  .page-head .tools .seg.compact { width: 100%; overflow-x: auto; }
  .page-head .tools .seg.compact button { flex: 1 1 auto; padding: 6px 8px; }
  .page-head .search { width: 100%; }
}
@media (max-width: 560px) {
  .table-card.stack-on-phone table, .table-card.stack-on-phone tbody,
  .table-card.stack-on-phone tr, .table-card.stack-on-phone td { display: block; }
  .table-card.stack-on-phone thead { display: none; }
  .table-card.stack-on-phone tr { position: relative; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .table-card.stack-on-phone tbody tr:last-child { border-bottom: 0; }
  .table-card.stack-on-phone tr.attn { background: var(--accent-wash); }
  .table-card.stack-on-phone td { padding: 2px 0; border: 0; text-align: left; width: auto; }
  .table-card.stack-on-phone td.edge { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; padding: 0; }
  .table-card.stack-on-phone td.menu-cell { position: absolute; right: 8px; top: 6px; }
  /* The notices' buttons are several: under the row, not over its corner. */
  .table-card.stack-on-phone.cp-notices-table td.menu-cell { position: static; padding-top: 6px; }
  .table-card.stack-on-phone td.cb-col { position: absolute; left: 12px; top: 13px; }
  .table-card.stack-on-phone.with-cb tr { padding-left: 40px; }
  .table-card.stack-on-phone.with-cb tr.group-row { padding-left: 14px; }
  .table-card.stack-on-phone .due-cell { text-align: left; }
  .table-card.stack-on-phone .due-cell .sub-line { display: inline; margin-left: 6px; }
  /* "Open work: 3": the cell's own label, turned on by the switch below. A
     labelled cell with nothing in it says nothing at all. */
  .table-card.stack-on-phone td[data-label] { --cell-label: inline; }
  .table-card.stack-on-phone td[data-label]:empty { display: none; }
  /* A cell held on one line, such as the address a message went to, has a
     whole line to itself once the row is a block: holding it can only push
     the card sideways, so it wraps, and a long address breaks where it must. */
  .table-card.stack-on-phone td.nowrap { white-space: normal; overflow-wrap: anywhere; }
  /* Each group of tabs on its own row, its name above the buttons it names,
     so "Setup" can never end up alone at the end of the row before. The
     rule between groups is decoration for one long row and goes. */
  nav.tabs.single .tab-group { flex: 1 0 100%; }
  nav.tabs .tabs-group-label { flex: 1 0 100%; padding: 6px 4px 0; }
  nav.tabs .tabs-divider { display: none; }
}

/* A flag that opens what it flags, such as a reply waiting. */
button.flag-line.link-like { display: block; color: var(--red); font-size: 12px; font-weight: 600; text-align: left; }
.pill button.link-like { color: inherit; }

/* ---- Hairline figure strip ----
   Replaces the row of stat cards: same numbers, a third of the height, and
   nothing competing with the table underneath. */
.figure-strip {
  display: flex; align-items: stretch; flex-wrap: wrap;
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
  margin-bottom: 18px;
}
.figure-strip > div { flex: 1; min-width: 112px; padding: 12px 16px; border-left: 1px solid var(--line); }
.figure-strip > div:first-child { border-left: 0; padding-left: 0; }
.figure-strip > div:last-child { padding-right: 0; }
.figure-strip .k {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; white-space: nowrap;
}
.figure-strip .v {
  font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.figure-strip .danger .v { color: var(--red); }
.figure-strip .warn .v { color: var(--amber); }
.figure-strip .ok .v { color: var(--green); }
.figure-strip .v .muted { font-weight: 400; font-size: 13px; color: var(--ink-3); }
.figure-strip.small > div { padding: 10px 16px; min-width: 96px; }
.figure-strip.small .k { font-size: 10.5px; }
.figure-strip.small .v { font-family: var(--font-body); font-size: 15px; letter-spacing: 0; }
.figure-strip .cell-link { display: flex; align-items: flex-end; }
/* The cell holds a button now, not a link ("Extend deadline…"); .link-like
   takes the font from what is around it, so the size is set here as before. */
.figure-strip .cell-link a,
.figure-strip .cell-link button.link-like { font-size: 13px; font-weight: 600; }

/* ---- A boxed fact ----
   For the one instruction a page turns on, e.g. the range a custodian must
   search. Kicker, value, and a note on why it matters. */
.fact-box {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding: 11px 15px; border-radius: 11px;
  background: var(--accent-wash); border: 1px solid var(--line-strong);
}
.fact-box .k { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; }
.fact-box .v { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fact-box .why { margin-left: auto; font-size: 12.5px; color: var(--ink-2); text-align: right; max-width: 30ch; }

/* ---- Action line ----
   The button and the sentence describing what it will do, side by side, so
   the consequence reads as part of the action rather than a footnote. */
.action-line {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-strong);
}
.action-line .action-note { flex: 1; min-width: 220px; font-size: 13px; color: var(--ink-2); margin: 0; }
.action-line .action-note b { color: var(--ink); }
.action-line .btn-row { margin: 0; }

/* The consequence of sending, on the screen beside the button rather than
   in a dialog after clicking it. */
.consequence {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 16px; padding: 13px 16px; border-radius: 12px;
  background: var(--accent-wash); border: 1px solid var(--line-strong); border-left: 3px solid var(--accent);
}
.consequence .text { flex: 1; min-width: 240px; }
.consequence .text strong { display: block; font-size: 14px; }
.consequence .text span { font-size: 12.5px; color: var(--ink-2); }
.consequence .btn-row { margin: 0; flex: none; }

/* A warning that belongs directly above the thing it is about. */
.notice-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 11px 15px; border-radius: 12px; font-size: 13.5px;
  background: var(--amber-wash); border: 1px solid var(--line-strong); border-left: 3px solid var(--amber);
}
.notice-bar .text { flex: 1; min-width: 220px; }
.notice-bar .text span { color: var(--ink-2); }

/* ---- Sheet header: status on the right, occasional actions behind a menu ---- */
.detail-sheet-head .head-status { flex-shrink: 0; padding-top: 6px; }
.detail-sheet-head .head-tools { display: flex; align-items: flex-start; gap: 8px; flex-shrink: 0; }
.detail-close.detail-menu { width: auto; padding: 0 12px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.detail-close.detail-nav svg { width: 14px; height: 14px; }
.detail-close.detail-nav:hover { background: var(--accent-wash); color: var(--accent-ink); }
.detail-close.detail-nav:disabled { opacity: .35; cursor: default; }
.detail-close.detail-nav:disabled:hover { background: var(--acrylic); color: var(--ink-2); }
.detail-sheet-head .head-tools { flex-wrap: wrap; justify-content: flex-end; }
.detail-sheet-head .head-tools #sheetCta { height: 34px; white-space: nowrap; }
/* The next-step button and the arrows are hidden on the letter screen and
   when nothing applies; the button rules above would otherwise still draw them. */
.detail-sheet-head .head-tools [hidden] { display: none; }
.detail-close.detail-menu:hover { background: var(--accent-wash); color: var(--accent-ink); }
.sheet-back {
  background: transparent; border: 0; box-shadow: none; padding: 0;
  color: var(--accent-ink); font-weight: 600; font-size: 13.5px; cursor: pointer;
}
.sheet-back:hover { text-decoration: underline; transform: none; filter: none; box-shadow: none; }
.sheet-intro { font-size: 13.5px; color: var(--ink-2); margin: 0 0 16px; max-width: 72ch; }
.sheet-head-row { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.sheet-head-row .spacer { flex: 1; }
.sheet-head-row .ref { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

header.app .who .pill { margin-right: 2px; }

/* ---- One toolbar row for the agency admin ----
   The day's work with no label, then the Setup and Settings groups. */
nav.tabs.single { flex-wrap: wrap; overflow: visible; gap: 2px; }
nav.tabs.single button { flex: 0 0 auto; padding: 7px 14px; font-size: 13px; }
nav.tabs .tabs-divider { width: 1px; height: 20px; background: var(--line-strong); margin: 0 8px; align-self: center; }
/* A named group of tabs: a group with a name to a screen reader, and a plain
   run of buttons on screen. */
nav.tabs .tab-group { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }

/* A filter with its label beside it, where the box alone says nothing: the
   audit trail's two dates read "mm/dd/yyyy" twice without them. */
.filter-bar .filter-field { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; }
.filter-bar .filter-field label { margin: 0; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.filter-bar .filter-field input { flex: 0 1 150px; }

/* The Needs attention filters, above the requests table. */
.attention-filters { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---- Forms laid out in rows rather than a stack ---- */
.form-grid { display: grid; gap: 14px; margin-top: 18px; }
.form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-grid.dates { grid-template-columns: 1fr 1fr auto; align-items: end; }
.form-grid label { margin-top: 0; }
.form-grid .inline-check { display: flex; align-items: center; gap: 9px; padding-bottom: 11px; font-weight: 400; font-size: 13.5px; margin: 0; }
.form-grid .inline-check input { width: auto; margin: 0; accent-color: var(--accent); }
/* The seven working-day boxes on Hours and closed days, in one wrapping row. */
fieldset.cal-days { display: flex; flex-wrap: wrap; gap: 4px 20px; border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
fieldset.cal-days legend { font-weight: 600; font-size: 13.5px; margin-bottom: 6px; padding: 0; }
fieldset.cal-days .inline-check { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 13.5px; margin: 0; }
fieldset.cal-days .inline-check input { width: auto; margin: 0; accent-color: var(--accent); }
@media (max-width: 640px) {
  .form-grid.cols-2, .form-grid.cols-3, .form-grid.dates { grid-template-columns: 1fr; }
  .form-grid .inline-check { padding-bottom: 0; }
}
.form-block { margin-top: 18px; }
.form-block > label:first-child { margin-top: 0; }
.form-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.form-section-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.form-section-head .sub-head { margin: 0; }
.form-section-head .summary { font-size: 12.5px; color: var(--ink-2); }
.form-section-head a { font-size: 12.5px; font-weight: 600; }
.form-grid .sublabel { font-size: 12px; color: var(--ink-2); font-weight: 500; margin: 0 0 5px; }
.dimmed { opacity: .45; }

/* Queued file rows: a quiet cross rather than a labelled button per file. */
.file-queue-item .remove-x { background: transparent; box-shadow: none; color: var(--ink-3); padding: 2px 7px; font-size: 14px; line-height: 1; }
.file-queue-item .remove-x:hover { background: var(--red-wash); color: var(--red); transform: none; filter: none; }

/* The letter editor inline on the response screen: toolbar and editor in
   one 10px-cornered box, the same toolbar the dialog uses. */
.letter-editor .rt-editor { min-height: 230px; max-height: none; border-radius: 0 0 10px 10px; }
.letter-editor .rt-toolbar { border-radius: 10px 10px 0 0; }

/* ---- Landing page ----
   The agency's own details sit inside the sign-in card, so a member of the
   public reads who they are dealing with beside the thing they came to do. */
.docket .agency-card { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); line-height: 1.65; }
.docket .agency-card .k { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.docket .agency-card h2 { display: none; }
.docket .agency-card p { margin: 0; font-size: 12.5px; }
.docket .agency-card p.small { font-size: 12px; margin-top: 5px; }
.docket .agency-card a { font-weight: 600; }
.landing .legal { margin-top: 26px; font-size: 12px; color: var(--ink-3); }

/* ---- Interstitials: the sign-in link and the timeout ---- */
.interstitial { min-height: calc(100vh - 60px); display: flex; align-items: flex-start; justify-content: center; padding: 44px 24px; text-align: center; }
.interstitial .inner { max-width: 440px; }
.interstitial .icon { width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 50%; background: var(--accent-wash); color: var(--accent-ink); display: grid; place-items: center; }
.interstitial .icon svg { width: 24px; height: 24px; }
.interstitial h1 { font-size: 24px; margin-bottom: 8px; }
.interstitial p { font-size: 14px; color: var(--ink-2); max-width: 34ch; margin: 0 auto; line-height: 1.6; }
.interstitial .progress { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 20px; font-size: 13px; color: var(--ink-3); }
.interstitial .progress .spinner { width: 16px; height: 16px; }
.interstitial .fine { font-size: 12.5px; color: var(--ink-3); margin: 26px auto 0; max-width: 36ch; padding-top: 16px; border-top: 1px solid var(--line); }
/* A link inside grey fine print cannot be told apart by colour alone. */
.interstitial .fine a { text-decoration: underline; }
/* A form inside an interstitial (the passcode reset) reads left to right
   like every other form, under the centred heading. */
.interstitial .form { text-align: left; margin-top: 22px; }
.interstitial .form .btn-row { justify-content: center; }
.forgot-line { margin-top: 12px; }
.forgot-line a { color: var(--ink-2); text-decoration: underline; }
.interstitial .error, .interstitial .muted { max-width: 40ch; margin: 8px auto 0; }
main.landing .docket .agency-card {
  margin-top: 18px; padding: 16px 0 0; background: none; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; box-shadow: none;
}
.range-strong { font-weight: 600; }

/* Filters as one toolbar row above a table (the audit trail). */
.filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filter-bar input, .filter-bar select { width: auto; flex: 1 1 140px; padding: 8px 12px; font-size: 13px; border-radius: 10px; }
.filter-bar .search { flex: 2 1 220px; margin: 0; padding-left: 34px; background-position: 12px center; background-size: 15px; }
.filter-bar button { flex: none; }

/* A row's frequent action beside its menu. */
td.menu-cell { width: auto; }
td.menu-cell .btn.sm { margin-right: 4px; vertical-align: middle; }
.flag-inline { font-weight: 600; }
.flag-inline.danger { color: var(--red); }
.card.add-fold, .card > .add-fold { margin-top: 0; border-top: 0; padding-top: 0; }
.card > .add-fold > summary { padding: 0 0 2px; }
.card > .add-fold[open] > summary { padding-bottom: 8px; }

/* ---- Colour scheme cards ----
   Each of the ten schemes is a card: a picture of the reviewer queue in that
   scheme (drawn by schemePickerHtml in theme.js), the three colours as a
   strip, the name, and a line on where it suits. The selected one is marked
   three ways over, as before. */
.swatch-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.swatch { width: auto; text-align: left; gap: 8px; padding: 10px; }
.swatch-colours { height: 10px; }
.swatch-name { text-align: left; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.swatch-note { font-size: 12px; line-height: 1.45; color: var(--ink-2); font-weight: 400; }
.swatch.selected .swatch-note { color: var(--ink-2); font-weight: 400; }

/* ---- Accessibility ----------------------------------------------------- */

/* Read by screen readers, invisible to everyone else: the live region that
 * repeats what a toast shows. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* A queue row reached by keyboard shows where focus is. Mouse clicks do
 * not draw it. */
tr.clickable:focus-visible {
  outline: 2px solid var(--accent, #0f766e);
  outline-offset: -2px;
}

/* The new-passcode page (reset-passcode.html): the Show button beside its
   box, and the advice and the count left-aligned under it. */
.pw-row { display: flex; gap: 8px; align-items: center; }
.pw-row input { flex: 1; min-width: 0; }
.interstitial .form .field-hint { text-align: left; }
.interstitial .form .pw-count { font-variant-numeric: tabular-nums; }
/* The signed-out page carries the agency's header now; the card still
   fits the window beneath it. */
header.app + .expired-wrap { min-height: calc(100vh - 64px); }

/* The reviewer's queue: the unread-reply alert opens the requests with a
   reply waiting, and a reviewer who covers several departments can look at
   one at a time. */
button.pill { border: 0; cursor: pointer; font: inherit; }
.page-head .dept-filter { width: auto; min-width: 11rem; }
/* Beside a letter: the paragraph insert above it, and whom it goes to. */
.letter-tools { display: flex; gap: 8px; margin: 6px 0 8px; }
.consequence .to-line { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-3); }
/* The date a custodian is asked to report by, beside the Assign button. */
.report-by-row { margin-top: 10px; max-width: 22rem; }
.report-by-row input[type="date"] { width: auto; }

/* The page could not reach the server (requireLogin in public/js/api.js).
   Nobody is signed out over a network failure, so the page stays where it
   is and this bar sits above it with the way to try again. */
.unreachable {
  position: fixed; top: 0; left: 0; right: 0; z-index: 950;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 10px clamp(14px, 3vw, 28px);
  background: var(--amber-wash); color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  font-size: 13.5px; line-height: 1.4; text-align: center;
}
.unreachable p { margin: 0; }

/* ---------- Print ----------
   A determination letter and the record of a request are printed for a file
   or for a counter. What prints is the document, not the application around
   it: the header, the theme toggle, the buttons and the banners go; the ink
   is black on white whatever the screen was showing; the acrylic surfaces
   lose the blur and the shadows, which print as grey mud; and a letter is
   kept whole on one sheet where it fits. */
@media print {
  :root, [data-theme="dark"] {
    color-scheme: light;
    --bg: #FFFFFF; --bg-deep: #FFFFFF;
    --ink: #000000; --ink-2: #1A1A1A; --ink-3: #333333;
    --line: #BBBBBB; --line-strong: #888888;
    --accent: #000000; --accent-ink: #000000; --accent-wash: #FFFFFF;
    --acrylic: #FFFFFF; --acrylic-strong: #FFFFFF; --acrylic-border: #BBBBBB;
    --e1: none; --e2: none; --e3: none;
  }
  html, body { background: #FFFFFF; color: #000000; }
  header.app, .topbar, #toggle, .theme-toggle, .tools, .btn, .btn-row,
  .demo-banner, .unreachable, .toast-host, .drop-zone, .seg,
  button:not(.link-like) { display: none !important; }
  .wrap { max-width: none; width: auto; padding: 0; }
  .acrylic, .card, .panel-card, .file-row, .tl-stat, .stat, .req-item.active, .modal {
    background: #FFFFFF; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-color: #BBBBBB;
  }
  .letter, .letter-html {
    background: #FFFFFF; border-color: #888888; box-shadow: none;
    break-inside: avoid; page-break-inside: avoid;
  }
  a[href] { color: #000000; text-decoration: underline; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; page-break-inside: avoid; }
}

/* ---- Responsibility (docs/reviewer-responsibility.md) ----
   Who holds a request: the queue's column, the sheet's line, the order of
   responsibility on the Departments tab, and the reviewer's own absence. */
.flag-inline.warn { color: var(--amber); }

.responsible-line { margin-top: 3px; font-size: 13px; }
.responsible-line b { font-weight: 600; color: var(--ink); }
.responsible-line .link-like { margin-left: 6px; }
ol.reviewer-order { margin: 0; padding-left: 1.4em; }
ol.reviewer-order li { margin: 2px 0; }
ol.reviewer-order .link-like.sm { font-size: 12px; margin-left: 8px; }
ol.reviewer-order .link-like.sm:disabled { opacity: .45; text-decoration: none; cursor: default; }

/* The agenda builder (public/js/agendapanel.js): files waiting on the left,
   the sections with their items on the right, one column on a phone. */
.agenda-columns { display: grid; grid-template-columns: minmax(230px, 300px) 1fr; gap: 16px; align-items: start; }
.agenda-columns .card { margin: 0 0 12px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card-head h2, .card-head h3 { margin: 0 0 6px; }
.card-head .tools { display: flex; gap: 8px; flex-wrap: wrap; }
ul.plain-list, ol.agenda-items { list-style: none; margin: 0; padding: 0; }
ul.plain-list > li { margin: 0 0 8px; }
.agenda-offered { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: grab; }
.agenda-item { padding: 8px 10px; margin: 0 0 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-deep); cursor: grab; }
.agenda-item.locked { cursor: default; border-style: dashed; }
.agenda-item p { margin: 4px 0 0 2.6em; }
.agenda-item-head { display: flex; align-items: baseline; gap: 10px; }
.agenda-number { min-width: 2.2em; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.agenda-title { flex: 1 1 auto; font-weight: 600; overflow-wrap: anywhere; }
.agenda-title .badge { margin-left: 6px; }
.agenda-empty { padding: 6px 2px; }
/* Moving a part of the agenda: the handle it is dragged by, the two arrows
   that move it a place at a time, and the outline on what would take a drop. */
.drag-handle { display: inline-block; cursor: grab; color: var(--ink-3); letter-spacing: -2px; padding-right: 8px; user-select: none; }
.agenda-item-head .drag-handle { align-self: center; }
.move-arrows { display: inline-flex; gap: 2px; flex: none; }
.move-btn { letter-spacing: 0; padding: 2px 7px; }
.move-btn:disabled { opacity: .3; }
.agenda-section.drop-here, .agenda-item.drop-here { outline: 2px dashed var(--accent); outline-offset: 2px; }
/* A section with nothing in it is one line, still a drop target. */
.agenda-section.empty { padding: 10px 18px 10px; }
.agenda-section.empty .card-head h3 { font-size: 15px; margin: 0; }
.agenda-section.empty .agenda-items { min-height: 8px; }
/* The first agenda in four steps on the clerk's desk, and the strip at the
   top of Setup: numbered steps, the done ones ticked, the one in hand marked. */
ol.guide-steps { list-style: none; margin: 0; padding: 0; counter-reset: guide; }
ol.guide-steps li { position: relative; padding: 10px 0 10px 42px; }
ol.guide-steps li + li { border-top: 1px solid var(--line); }
ol.guide-steps li::before { counter-increment: guide; content: counter(guide); position: absolute; left: 0; top: 10px; width: 28px; height: 28px; line-height: 28px; border-radius: 50%; text-align: center; font-size: 12.5px; font-weight: 700; background: var(--acrylic-strong); border: 1px solid var(--line-strong); color: var(--ink-2); }
ol.guide-steps li.done::before { content: '\2713'; background: var(--green); border-color: var(--green); color: #fff; }
ol.guide-steps li.now::before { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-wash); }
ol.guide-steps li.todo { color: var(--ink-3); }
ol.guide-steps li.todo b { color: var(--ink-2); }
ol.setup-steps { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; counter-reset: setup; font-size: 13px; }
ol.setup-steps li { display: flex; align-items: center; gap: 8px; }
ol.setup-steps li::before { counter-increment: setup; content: counter(setup); flex: 0 0 22px; width: 22px; height: 22px; line-height: 22px; border-radius: 50%; text-align: center; font-size: 11.5px; font-weight: 700; background: var(--acrylic-strong); border: 1px solid var(--line-strong); color: var(--ink-2); }
ol.setup-steps li.done::before { content: '\2713'; background: var(--green); border-color: var(--green); color: #fff; }
button.small, .btn.small { padding: 5px 10px; font-size: 12.5px; }
@media (max-width: 760px) {
  .agenda-columns { grid-template-columns: 1fr; }
  .agenda-item p { margin-left: 0; }
}

/* The minutes page (public/js/minutespanel.js): a motion under its item, and
   the words written up of an item. */
.minute-motion { margin: 8px 0 0 2.6em; padding: 8px 10px; border-left: 3px solid var(--line); }
.minute-motion p { margin: 4px 0 0; }
.minute-text p { margin: 4px 0 0 2.6em; }
/* Find, in the bar across the Meetings pages (public/js/api.js). */
.product-find { position: relative; margin-left: auto; }
.product-find input { width: 260px; max-width: 100%; }
.product-find-list { position: absolute; right: 0; top: calc(100% + 4px); width: 340px; max-width: calc(100vw - 32px); max-height: 60vh; overflow: auto; z-index: 70;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-sm); box-shadow: var(--e2); padding: 4px 0; text-align: left; }
.product-find-group { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px 10px 2px; }
.product-find-row { display: block; width: 100%; text-align: left; background: none; border: 0; color: inherit; padding: 6px 10px; cursor: pointer; font: inherit; }
.product-find-row.at, .product-find-row:hover { background: var(--accent-wash); }
@media (max-width: 760px) { .product-find { margin: 6px 0 0; width: 100%; } .product-find input { width: 100%; } .product-find-list { width: 100%; } }
/* The meeting in progress (public/js/minutespanel.js): the agenda down the
   left, the item in hand large on the right; one column on a phone. */
.live-grid { display: grid; grid-template-columns: minmax(200px, 1fr) 3fr; gap: 16px; align-items: start; }
.live-list ul { margin: 0; padding: 0; list-style: none; }
.live-list li { padding: 4px 6px; border-radius: 4px; }
.live-list li button.link-like { display: block; width: 100%; text-align: left; }
.live-list li.now { background: var(--accent-wash); font-weight: 600; }
.live-item h2 { font-size: 1.5rem; margin: 4px 0 8px; }
.live-item .minute-motion, .live-item .minute-text p { margin-left: 0; }
.live-roll { flex-wrap: wrap; }
@media (max-width: 760px) { .live-grid { grid-template-columns: 1fr; } .live-list { order: 2; } }
@media (max-width: 760px) { .minute-motion, .minute-text p { margin-left: 0; } }

/* Reports on legislative files (public/js/filereportspanel.js). */
.form-grid.report-filters { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 0; }
fieldset.inline-checks { border: 1px solid var(--line); border-radius: 10px; margin: 12px 0 0; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
fieldset.inline-checks legend { padding: 0 6px; font-size: 12.5px; color: var(--ink-2); }
/* ---- Government claims (public/js/claimspanel.js) ------------------------
   The clocks of a claim as cards, the §910 checklist, the history. */
.cp-dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.cp-date { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.cp-date.warn { border-color: var(--amber); }
.cp-date.danger { border-color: var(--red); }
/* A clock that is done, or one that has passed or was met: dimmed and last (lib/claims/progress.js sorts them). */
.cp-date.done, .cp-date.past { opacity: .62; }
.cp-date.done .cp-date-when strong { text-decoration: line-through; text-decoration-color: var(--ink-3); }
/* A card that is one line until it holds something: the rarer steps of a claim. */
details.cp-fold > summary { cursor: pointer; list-style: none; }
details.cp-fold > summary::-webkit-details-marker { display: none; }
details.cp-fold > summary::before { content: '\25B8'; display: inline-block; width: 16px; color: var(--ink-3); }
details.cp-fold[open] > summary::before { content: '\25BE'; }
.cp-period input[type="search"] { width: auto; min-width: 16em; }
.cp-date-when strong { font-size: 1.05em; }
.cp-date details { margin-top: 6px; }
.cp-date summary { cursor: pointer; }
.cp-checklist { list-style: none; padding: 0; margin: 8px 0 0; }
.cp-checklist li { padding: 4px 0; }
.cp-checklist li.missing > span:first-child { color: var(--red); }
.cp-checklist li.present > span:first-child { color: var(--green, var(--ink-3)); }
.cp-history { list-style: none; padding: 0; margin: 8px 0 0; }
.cp-history li { padding: 4px 0; border-top: 1px solid var(--line); }
.cp-prose { white-space: pre-wrap; }
.cp-period { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 8px 0; }
.cp-period input[type="date"] { width: auto; }
.cp-measures dd .small { display: block; }
/* The claims desk opens on the active claims: its heading over the two
   lists, and a stage the claim never reaches drawn as a faint dot. */
.cp-claims-head { margin: 6px 0 10px; }
.cp-claims-head h2 { margin: 0; }
.stage-step.skipped { opacity: .35; }
/* The two lists share their columns, so one reads down into the other. */
.cp-desk-table table { table-layout: fixed; }
.cp-desk-table th:nth-child(1) { width: 26%; }
.cp-desk-table th:nth-child(2) { width: 24%; }
.cp-desk-table th:nth-child(3) { width: 29%; }
.cp-desk-table td .btn { text-align: left; line-height: 1.3; }
/* The notices on a claim's page: "Where it stands" says in sentences what
   to do with a prepared notice, so it has the room, and the buttons at the
   right wrap under each other rather than widen their column. */
.cp-notices-table table { table-layout: fixed; }
.cp-notices-table th:nth-child(1) { width: 19%; }
.cp-notices-table th:nth-child(2) { width: 43%; }
.cp-notices-table th:nth-child(3) { width: 14%; }
.cp-notices-table td.menu-cell { white-space: normal; text-align: left; }
.cp-notices-table td.menu-cell .btn, .cp-notices-table td.menu-cell button { margin: 2px 4px 2px 0; text-align: left; line-height: 1.3; }
/* A claim's page: the stage and the step at the head of "What happens
   next", the day it is due by, and the clocks still running as a strip
   whose labels are whole sentences. */
/* Each stop of the claim's track is a button that opens its stage below,
   drawn as the plain words of the stop, never as a button. */
#cpTrack li .track-stop, #spTrack li .track-stop { display: block; width: 100%; min-height: 0; margin: 0; padding: 0; background: none; border: 0; border-radius: 8px; box-shadow: none; font: inherit; color: inherit; text-align: inherit; line-height: inherit; cursor: pointer; }
#cpTrack li .track-stop:hover, #spTrack li .track-stop:hover { filter: none; transform: none; box-shadow: none; background: var(--accent-wash); }
#cpTrack li .track-stop:hover .t, #spTrack li .track-stop:hover .t { text-decoration: underline; }
#cpTrack li .track-stop:active, #spTrack li .track-stop:active { transform: none; filter: none; }
/* Said once at the top of the attorney's office's stage. */
.cp-only { margin: 0 0 12px; }
.next-card .cp-next-step { font-size: 18px; font-weight: 600; line-height: 1.35; margin: 0 0 8px; }
.next-card .cp-when { margin: 10px 0 12px; }
.next-card .cp-when.danger strong { color: var(--red); }
.next-card .cp-when.warn strong { color: var(--amber); }
.next-card .cp-just { color: var(--green); margin: 0 0 8px; font-size: 13px; }
.cp-track-card { padding: 18px 20px 14px; }
.figure-strip.cp-clocks { margin: 8px 0 10px; }
.figure-strip.cp-clocks > div { min-width: 150px; }
.figure-strip.cp-clocks .k { white-space: normal; text-transform: none; letter-spacing: 0; font-size: 12px; }
.cp-every-date > summary { cursor: pointer; }
/* The seven stages as numbered sections that fold (.disclosure, as on the
   Records sheet): what was done in each, ticked, and the parts of its work
   drawn flat inside it rather than as cards within a card. */
.cp-stages-head { margin: 26px 0 4px; }
details.cp-stage.skipped > summary .title { color: var(--ink-3); font-weight: 500; }
details.cp-stage .content .card,
details.cp-stage .content details.cp-fold {
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0; padding: 16px 0 8px;
}
details.cp-stage .content > .card:first-child,
#cpLookedAbove > .card:first-child { border-top: 0; padding-top: 12px; }
details.cp-stage .content h3 { font-size: 16px; margin: 0 0 6px; }
details.cp-stage .content h4 { font-size: 14px; margin: 14px 0 4px; }
ul.cp-done { list-style: none; padding: 0; margin: 14px 0 10px; }
ul.cp-done li { position: relative; padding: 3px 0 3px 24px; }
ul.cp-done li::before { content: '\2713'; position: absolute; left: 3px; top: 3px; color: var(--green); font-weight: 700; }
.cp-not-part { margin: 14px 0 4px; }
/* On a phone the track runs down the page (ol.item-track), so what happens
   next is put above it, and the track says who does a stage only for the
   one in hand. */
@media (max-width: 720px) {
  .cp-top { display: flex; flex-direction: column; }
  .cp-top > #cpNext { order: -1; }
  #cpTrack li { padding-bottom: 10px; min-height: 28px; }
  #cpTrack li:not(.current) .w { display: none; }
}
@media (max-width: 600px) {
  details.cp-stage > summary { flex-wrap: wrap; padding: 14px 16px; row-gap: 4px; }
  details.cp-stage > summary .title { flex: 1 1 0; min-width: 0; }
  details.cp-stage > summary .sum,
  details.cp-stage > summary .sum.next { flex-basis: 100%; margin-left: 0; text-align: left; justify-content: flex-start; }
  details.cp-stage .content { padding: 6px 16px 18px; }
  .cp-track-card { padding: 16px; }
}

/* ---- A guided tour (public/js/tour.js): a spotlight on one part of the
   page and a card beside it. The redaction tool's "How to redact" and the
   demonstration site's tours (public/js/demo.js) both draw with it. ---- */
.tour { position: fixed; inset: 0; z-index: 70; }
.tour[hidden] { display: none; }
.tour-spot { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(0,0,0,.55); transition: left .25s, top .25s, width .25s, height .25s; pointer-events: none; }
.tour-card { position: fixed; width: min(380px, calc(100vw - 32px)); background: var(--bg, #fff); color: var(--ink, #111); border-radius: 12px; padding: 16px 18px; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.tour-card h2 { margin: 2px 0 6px; font-size: 1.05rem; }
.tour-card p { margin: 0 0 12px; line-height: 1.45; }
.tour-card .acts { display: flex; gap: 8px; align-items: center; }
.tour-card .acts .link-like { margin-right: auto; padding: 0; }
@media (prefers-reduced-motion: reduce) { .tour-spot { transition: none; } }
@media (max-width: 800px) { .tour-card { left: 16px !important; right: 16px; bottom: 16px; top: auto !important; width: auto; } }

/* ---- The demonstration bar (public/js/demo.js), under the red Demo
   website strip: who the visitor is trying the site as, and the way to
   another role. It is not sticky: it scrolls away with the page, and the
   header sticks under the red strip alone. ---- */
.demo-bar { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; justify-content: space-between; padding: 6px 16px; background: var(--bg, #fff); border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 20px; }
.demo-bar-acts { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.demo-bar .link-like, .demo-bar button.link-like { color: var(--accent); font-size: 13.5px; padding: 0; }
/* Which step of its story the person is, and the way on to the next. */
.demo-bar-step { color: var(--ink-2, inherit); }
.demo-bar-acts { align-items: center; }
.demo-bar .demo-next, .demo-bar .demo-next:hover, .demo-bar .demo-next:active {
  display: inline-block; width: auto; min-height: 0; margin: 0; padding: 4px 14px; border: 0; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 600; line-height: 20px; text-decoration: none;
  white-space: nowrap; cursor: pointer; transform: none; box-shadow: none;
}
.demo-bar .demo-next:hover { filter: brightness(1.08); }
.demo-bar .demo-next:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Start the tour, on the right edge of a page that has one. The ring is
   there until the tour of that page has been taken once. */
.demo-tour-tab, .demo-tour-tab:hover, .demo-tour-tab:active {
  position: fixed; right: 0; top: 38%; z-index: 45; width: auto; min-height: 0; margin: 0; padding: 9px 14px 9px 16px;
  border: 0; border-radius: 999px 0 0 999px; background: var(--accent); color: #fff;
  font-size: 13.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; box-shadow: var(--e2); cursor: pointer; transform: none;
}
.demo-tour-tab:hover { filter: brightness(1.08); }
.demo-tour-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.demo-tour-tab.fresh { box-shadow: 0 0 0 4px var(--accent-wash), var(--e2); }
@media print { .demo-bar, .tour, .demo-tour-tab { display: none; } }

/* ---- The phone's page for pages on paper (public/claimphone.html,
   public/meetingphone.html, public/js/phonescan.js): one
   column at a phone's width, big buttons for a thumb, a small picture of
   each page. The QR code in the clerk's dialog (public/js/claimspanel.js)
   sits on white whatever the theme, since a camera reads dark on light. ---- */
.phonescan main.wrap { max-width: 480px; }
.phonescan .ph-big { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: 8px 0; box-sizing: border-box; }
.phonescan .ph-pages { margin: 12px 0; padding: 0; }
.phonescan .ph-page { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.phonescan .ph-thumb { width: 72px; height: 96px; object-fit: contain; flex: none; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.phonescan .ph-none { display: block; }
.phonescan .ph-page-body { min-width: 0; flex: 1; }
.phonescan .ph-page-body .btn-row { margin: 6px 0 0; flex-wrap: wrap; }
.cp-qr { display: flex; justify-content: center; padding: 12px; background: #fff; border-radius: 8px; }
.cp-qr svg { width: min(260px, 70vw); height: auto; }

/* ---- Subpoenas (public/js/subpoenaspanel.js) ---------------------------
   The twins of the Government claims rules above, one block: the clocks of
   a subpoena as cards, the desk's two lists, a subpoena's page with its
   track, "What happens next" and the seven stages that fold, the records
   table and the phone's code. */
.sp-dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.sp-date { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.sp-date.warn { border-color: var(--amber); }
.sp-date.danger { border-color: var(--red); }
.sp-date.done, .sp-date.past { opacity: .62; }
.sp-date details { margin-top: 6px; }
.sp-date summary { cursor: pointer; }
.sp-desk-table table { table-layout: fixed; }
.sp-desk-table th:nth-child(1) { width: 16%; }
.sp-desk-table th:nth-child(2) { width: 26%; }
.sp-desk-table th:nth-child(3) { width: 12%; }
.sp-desk-table td .btn { text-align: left; line-height: 1.3; }
.sp-records-table table { table-layout: fixed; }
.sp-records-table th:nth-child(1) { width: 40%; }
.sp-records-table td.menu-cell { white-space: normal; text-align: left; }
.next-card .sp-kicker { font-size: 12.5px; color: var(--ink-2); margin: 0 0 4px; }
.next-card .sp-next-step { font-size: 18px; font-weight: 600; line-height: 1.35; margin: 0 0 8px; }
.next-card .sp-when { margin: 10px 0 12px; }
.next-card .sp-when.danger strong { color: var(--red); }
.next-card .sp-when.warn strong { color: var(--amber); }
.next-card .sp-just { color: var(--green); margin: 0 0 8px; font-size: 13px; }
.sp-track-card { padding: 18px 20px 14px; }
.sp-stages-head { margin: 26px 0 4px; }
details.sp-stage.skipped > summary .title { color: var(--ink-3); font-weight: 500; }
details.sp-stage .content .card {
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0; padding: 16px 0 8px;
}
details.sp-stage .content > .card:first-child { border-top: 0; padding-top: 12px; }
details.sp-stage .content h3 { font-size: 16px; margin: 0 0 6px; }
/* The attorney's review of a subpoena (subpoenaspanel.js, Phase D): a question to a fieldset, Yes and No side by side. */
.sp-review .sp-question { margin: 14px 0; }
.sp-yesno { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0; }
.sp-yesno label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; }
.sp-yesno input[type="radio"] { width: auto; display: inline-block; margin: 0; }
.sp-grounds { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 10px; }
.sp-chosen textarea { margin-top: 4px; }
.sp-qr { display: flex; justify-content: center; padding: 12px; background: #fff; border-radius: 8px; }
.sp-qr svg { width: min(260px, 70vw); height: auto; }
/* On a phone what happens next goes above the track, as on a claim's page. */
@media (max-width: 720px) {
  .sp-top { display: flex; flex-direction: column; }
  .sp-top > #spNext { order: -1; }
}
@media (max-width: 600px) {
  details.sp-stage > summary { flex-wrap: wrap; padding: 14px 16px; row-gap: 4px; }
  details.sp-stage > summary .title { flex: 1 1 0; min-width: 0; }
  details.sp-stage .content { padding: 6px 16px 18px; }
  .sp-track-card { padding: 16px; }
}

/* ---------- Your profile (public/js/profilepanel.js) ----------
   A list of the sections at the left and every section on one page at the
   right, so a link to one (#away) lands on it and nothing is hidden. On a
   narrow screen the list is a row above them. */
.settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-nav { position: sticky; top: calc(60px + var(--site-banner-h, 0px) + 16px); display: flex; flex-direction: column; gap: 2px; }
.settings-nav a { padding: 8px 12px; border-radius: 8px; color: var(--ink-2); font-size: 14px; }
.settings-nav a:hover { background: var(--accent-wash); color: var(--accent-ink); text-decoration: none; }
.settings-section { scroll-margin-top: calc(60px + var(--site-banner-h, 0px) + 16px); }
.settings-section h2 { margin-bottom: 10px; }
.settings-section h3 { margin: 16px 0 6px; }
.settings-section .count { margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.settings-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0 0 12px; }
.settings-facts dt { color: var(--ink-3); font-size: 12.5px; }
.settings-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .settings { grid-template-columns: 1fr; gap: 12px; }
  .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; }
}