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

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,500;8..60,600&display=swap');

:root {
  /* light */
  --bg: #F3F5F4;
  --bg-deep: #E9EDEB;
  --ink: #14201D;
  --ink-2: #4A5955;
  --ink-3: #7A8985;
  --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;

  --amber: #B7791F; --amber-wash: #FBF0DC;
  --red: #B23A32;   --red-wash: #FAE3E1;
  --green: #1E7F4F; --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: #718380;
  --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; }
.muted { color: var(--ink-2); font-size: 13.5px; }
.small { font-size: 12.5px; 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;
}
.demo-banner span { opacity: .92; }
[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: 30px; }

/* ---------- 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); }
.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; }

/* ---------- 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='%237A8985' 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 { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }
.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 { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }
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;
}
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); }

.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-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); }
.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; }
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); }
.drop-zone svg { opacity: .55; margin-bottom: 8px; }
.drop-zone p { margin: 2px 0; }
.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; }
  .detail-sheet-body { padding: 4px 18px 22px; }
}

/* ---- 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 */
.req-desc-block { margin: 0 0 4px; }
.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: 14.5px;
}
.req-desc p { margin: 0 0 .7em; }

/* Collapsed state: fade out rather than a hard cut, which reads as "there's
   more" instead of looking like a rendering bug. */
.req-desc.clamped {
  max-height: 6.6em; overflow: hidden; position: relative;
}
.req-desc.clamped::after {
  /* Fades into the sheet behind it. The sheet is translucent, so this uses an
     opaque approximation of it rather than the acrylic variable — 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(248,249,248,0), rgba(248,249,248,.97));
  pointer-events: none;
}
[data-theme="dark"] .req-desc.clamped::after {
  background: linear-gradient(to bottom, rgba(20,30,27,0), rgba(20,30,27,.97));
}

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

.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. */
.next-action {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--accent-wash); border: 1px solid var(--accent-line, var(--line-strong));
  border-left: 3px solid var(--accent);
  border-radius: 12px; padding: 14px 16px; margin: 16px 0;
}
.next-action.waiting { background: var(--acrylic); border-left-color: var(--ink-3); }
.next-action .na-text { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }
.next-action .na-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent-ink);
}
.next-action.waiting .na-kicker { color: var(--ink-3); }
.next-action strong { font-size: 15px; }
.next-action .muted { font-size: 13px; }

/* ---- 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; }
.step-num.done { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-ink); }
.step-num.done::after { content: '\2713'; font-size: 12px; }
.step-num.done { font-size: 0; }
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. */
.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);
}
.corr-msg.unread .corr-meta strong { color: var(--accent-ink); }
[data-theme="dark"] .corr-msg.unread { box-shadow: none; }

/* A quiet pulse on arrival, once, so a message landing while the reviewer is
   already looking at the thread doesn't appear silently. Respects a reduced
   motion preference. */
@keyframes corrArrive {
  from { background: var(--accent); }
  to   { background: var(--accent-wash); }
}
.corr-msg.unread { animation: corrArrive .9s ease-out 1; }
@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; }

/* ---- 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); }

/* 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 .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); }
.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; }
.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; }
.due-cell b { font-variant-numeric: tabular-nums; }
.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; }
.flag-line.danger { color: var(--red); }
.flag-line.warn { color: var(--amber); }

/* ---- 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; }
.figure-strip .cell-link a { 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 { font-size: 16px; letter-spacing: 1px; font-weight: 600; }
.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 three working tabs, a divider, and the Setup group. */
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; }

/* ---- 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); }
@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); }
.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;
}