/* MDO email responder: small, desktop-first, usable on an occasional tablet.
   Status is always written in text; colour only reinforces it.
   S65: the approved Claude Design (7 October 2026) in Mountain Drop-offs' brand: warm page, white rounded
   cards, Roboto Light headings, one amber accent and a dark band for the header and the safety controls.
   Tokens follow docs/brand/brand.css and the design's Components sheet. */

@font-face { font-family: "Roboto"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/roboto-300-normal.dc070a3a1cd4.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/roboto-400-normal.f9788110cacc.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/roboto-400-italic.97b8de84f2e3.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/roboto-500-normal.7620f0d9a200.woff2") format("woff2"); }

:root {
  /* Brand tokens */
  --ink: #222222;
  --ink-soft: #4a4a4a;
  --muted: #737373;
  --line: #dedede;
  --paper: #ffffff;
  --warm: #f1efe9;
  --amber: #ffbb00;
  --amber-hover: #f0ad00;
  --amber-ink: #8a5b00;
  /* Design additions */
  --hairline: #ecebe6;
  --soft: #f7f6f2;
  --field-line: #8a8a8a;
  --dark-raised: #3a3a3a;
  --on-dark: #e9e9e9;
  --on-dark-muted: #b5b5b5;
  --disabled-bg: #ecebe6;
  --disabled-text: #8a8a8a;
  /* Status tones (text passes AA on its fill) */
  --good-bg: #e4eddf; --good-text: #2c5424; --good-dot: #3f7a35;
  --warn-bg: #ffe39a; --warn-text: #4d3300; --warn-dot: #8a5b00;
  --off-bg: #e8e6e0; --off-text: #4a4a4a; --off-dot: #8f8f8f;
  --error-bg: #f7dad4; --error-text: #8b2617; --error-dot: #c2412d;
  /* Layout */
  --page-max: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius-card: 20px;
  --radius-panel: 16px;
  --radius-field: 12px;
  --touch: 44px;
  font-size: 100%;
}

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

/* Hidden means hidden, whatever display a class gives the element. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--warm);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
strong, b { font-weight: 500; }
::selection { background: #ffe08a; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--amber-ink); }

code { font-family: ui-monospace, Menlo, monospace; font-size: 0.875em; overflow-wrap: anywhere; }

/* Visible keyboard focus everywhere, never removed: a 2px ink outline with an amber halo. The ink line
   shows on white and warm; the halo shows on dark. */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--amber);
}
main:focus { outline: none; box-shadow: none; }
/* Form fields always show focus. A date field's calendar button takes focus inside
   the field, where only :focus-within reaches the field itself. */
input:focus, input:focus-within, select:focus, textarea:focus, summary:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--amber);
}
/* Forced colours drop the halo, so the outline itself is thicker there. */
@media (forced-colors: active) {
  :focus-visible, input:focus, select:focus, textarea:focus { outline: 3px solid CanvasText; }
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -6rem;
  z-index: 50;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--amber);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.skip-link:focus { top: 8px; color: var(--ink); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Type */
h1, h2, h3, h4, h5 { margin: 0; }
p { margin: 0 0 0.75rem; }
h1 { font-size: clamp(34px, 4vw, 46px); font-weight: 300; line-height: 1.1; letter-spacing: -0.01em;
  margin-bottom: 14px; overflow-wrap: anywhere; }
main h1::before, .bar-above::before { content: ""; display: block; width: 32px; height: 4px; border-radius: 2px;
  background: var(--amber); margin-bottom: 16px; }
h2 { font-size: 24px; font-weight: 300; line-height: 1.25; margin: 0 0 16px; }
h3 { font-size: 16px; font-weight: 500; line-height: 1.4; margin: 20px 0 8px; }
h4 { font-size: 15px; font-weight: 500; margin: 16px 0 6px; }
h5 { font-size: 14px; font-weight: 500; margin: 12px 0 4px; }
.lead { max-width: 52rem; font-size: 17px; color: var(--ink-soft); margin-bottom: 24px; }
.help, .control-help { font-size: 14px; color: var(--ink-soft); }
.label-caps { font-size: 15px; font-weight: 500; letter-spacing: 0.6px; font-variant-caps: all-small-caps; color: var(--muted); }
/* Caps labels use small caps, never text-transform, so the words read by people and checks stay as written. */
.kicker { font-size: 15px; font-weight: 300; letter-spacing: 0.08em; font-variant-caps: all-small-caps; color: var(--amber);
  margin-bottom: 10px; }

/* Header: environment strip, dark band with logo, navigation and account. */
.site-header { background: var(--ink); color: var(--paper); }

.environment-banner {
  margin: 0;
  padding: 8px max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));
  background: var(--amber);
  color: var(--ink);
  font-size: 14px;
}
.environment-banner::before { content: "Environment"; display: inline-block; margin-right: 12px; font-size: 15px;
  font-weight: 500; letter-spacing: 0.6px; font-variant-caps: all-small-caps; }

.header-row {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
  min-height: 76px;
}

.product-name { margin: 0; flex: none; }
.product-name a { display: flex; align-items: center; gap: 16px; min-height: var(--touch); padding: 12px 0;
  color: var(--paper); text-decoration: none; }
.brand-logo { display: block; height: 36px; width: auto; }
.brand-title { padding-left: 16px; border-left: 1px solid var(--ink-soft); font-size: 16px; color: var(--on-dark);
  white-space: nowrap; line-height: 28px; }

.main-nav { flex: 1 1 auto; align-self: stretch; display: flex; }
.main-nav ul { display: flex; align-items: stretch; gap: 4px; margin: 0; padding: 0; list-style: none; }
.main-nav li { display: flex; }
.main-nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 14px;
  color: var(--on-dark-muted);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.main-nav a:hover { color: var(--paper); }
.main-nav a[aria-current="page"] { color: var(--paper); }
.main-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0; background: var(--amber); }

.account { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 0; font-size: 14px;
  color: var(--on-dark); }
.account-name { margin: 0; }
.account-name strong { color: var(--paper); }
.account form { margin: 0; }
.role-badge { display: inline-flex; align-items: center; height: 24px; margin-left: 10px; padding: 0 10px;
  border-radius: 999px; box-shadow: inset 0 0 0 1px var(--muted); color: var(--paper); font-size: 12px;
  font-weight: 500; letter-spacing: 0.4px; vertical-align: middle; }
.site-header .button { border-color: var(--ink-soft); color: var(--paper); text-decoration: none; font-size: 14px;
  padding: 0 16px; }
.site-header .button:hover { background: transparent; border-color: var(--paper); color: var(--paper); }

/* Page frame */
main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 40px var(--gutter) 56px;
}

.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.site-footer p { max-width: var(--page-max); margin: 0 auto; padding: 22px var(--gutter); }

/* Cards and panels */
.card, .status-panel, .decision {
  background: var(--paper);
  border-radius: var(--radius-card);
  padding: 28px;
}
.card > h2:first-child, .status-panel > h2:first-child, .decision > h3:first-child { margin-top: 0; }
.panel-soft { background: var(--soft); border-radius: var(--radius-panel); padding: 16px 20px; }
.panel-dark, .controls { background: var(--ink); color: var(--paper); border-radius: var(--radius-card); padding: 28px; }
.panel-dark h2, .controls h2 { color: var(--paper); }
.panel-dark a, .controls a { color: var(--paper); }
.panel-dark .help, .panel-dark .control-help, .controls .control-help { color: var(--on-dark-muted); }

section + section, main > * + section, .status-panel + section { margin-top: 24px; }

.section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  margin-bottom: 16px; }
.section-heading h2 { margin: 0; }
.heading-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; }

/* Buttons: pills only. One primary (amber) per area; default is the ink outline; quiet is text-weight. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--touch);
  min-width: var(--touch);
  padding: 0 22px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: var(--ink); color: var(--paper); }
.button-primary { border-color: var(--amber); background: var(--amber); color: var(--ink); }
.button-primary:hover { border-color: var(--amber-hover); background: var(--amber-hover); color: var(--ink); }
.button-quiet { padding: 0 12px; border-color: transparent; color: var(--ink-soft); text-decoration: underline;
  text-underline-offset: 3px; }
.button-quiet:hover { background: transparent; color: var(--ink); }
.button-small { padding: 0 16px; font-size: 14px; }
button[disabled], .button[disabled], .button[aria-disabled="true"] {
  border-color: var(--disabled-bg);
  background: var(--disabled-bg);
  color: var(--disabled-text);
  text-decoration: none;
  cursor: not-allowed;
}
.panel-dark .button, .controls .button { border-color: var(--paper); color: var(--paper); font-size: 14px; padding: 0 18px; }
.panel-dark .button:hover, .controls .button:hover { background: var(--paper); color: var(--ink); }
.panel-dark .button-primary { border-color: var(--amber); background: var(--amber); color: var(--ink); }
.panel-dark button[disabled], .controls button[disabled] { border-color: var(--dark-raised); background: var(--dark-raised);
  color: #8f8f8f; }

/* A disabled control always has its reason written next to it. */
.blocker { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--warn-text); }
.blocker::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--warn-dot); }

/* Control lists: the safety controls (_actions.html) and similar lists of one action and its help. */
.control-list, .scenario-list, .plain-list { margin: 0; padding-left: 0; list-style: none; }
.control-list { display: grid; gap: 14px; }
.control-list li, .scenario-list li { margin: 0; }
.control-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.control-list form { margin: 0; }
.control-help { margin: 0; }
/* Beside its button in a row only; in the column layouts (Approve panel, Decide column) it must not grow. */
.control-list li > .control-help { flex: 1 1 16rem; }
.scenario-list li { margin-bottom: 16px; }
.scenario-list .control-help { display: block; margin-top: 4px; }

/* Notices: information, needs attention, something failed. The mark sits next to written text. */
.notice, .messages {
  position: relative;
  margin: 0 0 16px;
  padding: 16px 20px 16px 56px;
  border-radius: var(--radius-panel);
  background: var(--soft);
  color: var(--ink);
  font-size: 15px;
}
.notice::before, .messages::before {
  content: "i";
  content: "i" / "";
  position: absolute;
  left: 20px;
  top: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
.notice > :last-child, .messages > :last-child { margin-bottom: 0; }
.notice p, .messages p { margin: 0 0 6px; }
.notice .button { margin-top: 10px; }
.messages { background: var(--paper); }
.notice-warning { background: var(--warn-bg); color: var(--warn-text); }
.notice-warning::before { content: "!"; content: "!" / ""; background: var(--warn-text); color: var(--warn-bg); }
.notice-warning a { color: var(--warn-text); font-weight: 500; }
.notice-error { background: var(--error-bg); color: var(--error-text); }
.notice-error::before { content: "×"; content: "×" / ""; background: var(--error-text); color: var(--error-bg); }
.notice-error a { color: var(--error-text); font-weight: 500; }
.notice-done::before { content: "✓"; content: "✓" / ""; background: #cfe3c8; color: var(--ink); }
.panel-dark .notice, .controls .notice { background: var(--dark-raised); color: var(--paper); }
.panel-dark .notice::before, .controls .notice::before { background: var(--amber); color: var(--ink); }

/* The office banner when something the office relies on is stopped or not working (S19). */
.office-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 28px;
  margin: 0 0 32px;
  padding: 24px 28px;
  border-radius: var(--radius-card);
  background: var(--ink);
  color: var(--paper);
}
.office-notice-body { flex: 1 1 420px; min-width: 0; }
.office-notice h2 { margin: 0 0 10px; font-size: 24px; }
.office-notice h2::before { content: ""; display: block; width: 32px; height: 4px; border-radius: 2px;
  background: var(--amber); margin-bottom: 14px; }
.office-notice ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; list-style: disc; color: var(--on-dark);
  font-size: 15px; }
.office-notice-fallback { flex: 1 1 280px; margin: 0; padding: 16px 18px; border-radius: 14px; background: var(--amber);
  color: var(--ink); font-size: 16px; }

/* Status list, tags, tables and summary counts */
.status-list { margin: 0; }
.status-list > div { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 4px 20px;
  padding: 12px 0; border-bottom: 1px solid var(--hairline); font-size: 15px; }
.status-list dt { color: var(--ink-soft); font-weight: 400; }
.status-list dd { margin: 0; overflow-wrap: anywhere; }

.status-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--ink);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  vertical-align: middle;
}
.status-tag::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.status-on { background: var(--good-bg); box-shadow: none; color: var(--good-text); }
.status-on::before { background: var(--good-dot); }
.status-warn { background: var(--warn-bg); box-shadow: none; color: var(--warn-text); }
.status-warn::before { background: var(--warn-dot); }
.status-off { background: var(--off-bg); box-shadow: none; color: var(--off-text); }
.status-off::before { background: var(--off-dot); }
.status-error { background: var(--error-bg); box-shadow: none; color: var(--error-text); }
.status-error::before { background: var(--error-dot); }
.status-detail { margin-left: 8px; font-size: 14px; color: var(--muted); }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; min-width: 100%; font-size: 15px; }
th { padding: 10px 12px; border-bottom: 1.5px solid var(--ink); text-align: left; vertical-align: bottom;
  font-size: 15px; font-weight: 500; letter-spacing: 0.6px; font-variant-caps: all-small-caps; color: var(--muted); }
td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
table.compact { min-width: 0; }
table.compact th, table.compact td { padding: 8px 16px 8px 0; }

.summary-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 0 0 24px;
  padding: 0; list-style: none; background: var(--paper); border-radius: var(--radius-card); overflow: hidden; }
.summary-counts li { box-shadow: inset -1px 0 0 var(--hairline), inset 0 -1px 0 var(--hairline); }
.summary-counts a { display: block; min-height: var(--touch); padding: 16px 18px; color: var(--ink); text-decoration: none; }

.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; font-size: 14px; color: var(--ink-soft); }

.empty-state { margin-top: 16px; padding: 36px 24px; border-top: 1.5px solid var(--ink); text-align: center; }
.empty-state::before { content: ""; display: block; width: 32px; height: 4px; margin: 0 auto 14px; border-radius: 2px;
  background: var(--line); }
.empty-title { margin: 0 0 6px; font-size: 18px; font-weight: 500; }
.empty-state p:not(.empty-title) { color: var(--ink-soft); font-size: 15px; }

.refresh-region[aria-busy="true"] { opacity: 0.75; }
.refresh-region + section { margin-top: 24px; }
.check-now { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.coverage-issues { margin: 4px 0 0; }
.reference { color: var(--muted); font-size: 13px; }

/* Disclosures: native details/summary with a chevron; they work without JavaScript. */
summary { list-style: none; cursor: pointer; }
/* Content of a closed disclosure takes no box at all (Chromium otherwise keeps one with empty text), so nothing
   hidden there counts as visible. */
details:not([open]) > :not(summary) { display: none; }
summary::-webkit-details-marker { display: none; }
.disclosure > summary, .history summary, .thread summary, .saved-text summary, .rated-text summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--touch);
  font-weight: 500;
}
.disclosure > summary::after, .history summary::after, .thread summary::after, .saved-text summary::after,
.rated-text summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
}
.disclosure[open] > summary::after, .history[open] summary::after, .thread[open] summary::after,
.saved-text[open] summary::after, .rated-text[open] summary::after { transform: rotate(225deg); }
.disclosure.card { padding: 0 28px; }
.disclosure.card > summary { padding: 18px 0; }
.disclosure.card[open] { padding-bottom: 24px; }
.disclosure > summary h2 { margin: 0; font-size: 18px; font-weight: 400; }
.summary-note { font-size: 14px; font-weight: 400; color: var(--ink-soft); }
/* A written Show/Hide instead of the chevron, where the design draws one. */
.summary-toggle { margin-left: auto; font-size: 14px; font-weight: 400; color: var(--ink-soft); text-decoration: underline;
  text-underline-offset: 3px; }
.disclosure > summary:has(.summary-toggle)::after { content: none; }
.disclosure[open] > summary .when-closed, .disclosure:not([open]) > summary .when-open { display: none; }

/* Form fields: label above, 44px fields, 12px radius, a border that passes 3:1. */
.field { margin-bottom: 16px; }
.field label, .field-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; }
.hint { font-weight: 400; color: var(--muted); }
.field input[type="text"], .field input[type="search"], .field input[type="date"], .field input[type="number"],
.field input[type="email"], .field input[type="time"], .field select, .field textarea, .input {
  width: 100%;
  min-height: var(--touch);
  padding: 0 14px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-field);
  background: var(--paper);
  font-size: 15px;
  font-weight: 400;
}
.field select { padding: 0 12px; }
.field textarea, textarea.input { padding: 12px 14px; resize: vertical; }
.field input[type="file"] { min-height: var(--touch); padding: 9px 12px; border: 1px dashed var(--field-line);
  border-radius: var(--radius-field); font-size: 14px; }
.field [aria-invalid="true"] { border: 2px solid var(--error-text); }
.errorlist, .field-error { margin: 6px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--error-text); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.field-check { display: flex; align-items: center; gap: 10px; min-height: var(--touch); margin-bottom: 8px; }
.field-check input { width: 1.5rem; height: 1.5rem; flex: none; margin: 0; accent-color: var(--ink); }
input[type="radio"], input[type="checkbox"] { accent-color: var(--ink); }
.filters { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 0 16px; align-items: end; padding: 16px 20px;
  border-radius: var(--radius-panel); background: var(--soft); margin-bottom: 16px; }
.filters .field { margin-bottom: 0; }
.field-action { align-self: end; }

fieldset { margin: 0 0 16px; padding: 14px 18px 16px; border: 1px solid var(--line); border-radius: var(--radius-panel); }
legend { padding: 0 6px; font-size: 14px; font-weight: 500; }

/* Review list (S16; S65 layout): counts as tiles, the list card beside Mailbox checks on desktop. The mailbox
   panel stays first in the page order (keyboard and "see above"); on desktop the grid places it on the right. */
.summary-counts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 28px; }
.summary-counts li { display: flex; flex-direction: column; }
.summary-counts a { flex: 1 0 auto; padding: 20px 22px; font-size: 14px; font-weight: 500; text-decoration: underline;
  text-decoration-color: var(--line); text-underline-offset: 3px; }
.summary-counts a:hover { background: #faf9f6; color: var(--ink); }
.summary-counts strong { display: inline-block; width: 100%; font-size: 34px; font-weight: 300; line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.summary-counts li:has(> .status-detail) a { flex: 0 0 auto; padding-bottom: 2px; }
.summary-counts .status-detail { display: block; flex: 1 0 auto; margin: 0; padding: 0 22px 20px; font-size: 13px; }

.review-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  grid-template-areas: "list aside"; gap: 24px; align-items: start; }
.review-layout > .review-main { grid-area: list; margin-top: 0; }
.review-layout > .review-aside { grid-area: aside; }
.review-main .section-heading { margin-bottom: 20px; }
.review-aside .status-panel h2 { margin-bottom: 14px; }
.review-aside .status-list > div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 11px 0; font-size: 14px; }
.review-aside .status-list dd { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.review-aside .status-detail { margin-left: 0; color: var(--muted); }
.review-aside .check-now { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 20px; }
.review-aside .check-now .button { width: 100%; }
.review-aside .status-panel > .control-help:last-child { margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--hairline); font-size: 13px; color: var(--muted); }
.list-count { margin-bottom: 8px; }
.review-list th:nth-child(1) { width: 38%; }
.review-list th:nth-child(2) { width: 17%; }
.review-list th:nth-child(3) { width: 20%; }
.review-list td:last-child { font-size: 14px; color: var(--ink-soft); }
.review-row:hover { background: #faf9f6; }
.review-list td:nth-child(3) .row-meta { margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
#review-items .empty-state { padding: 48px 24px; }

.status-problems .control-help { max-width: 48rem; margin-bottom: 14px; font-size: 15px; }
.status-problems .status-problem-item { padding: 14px 0; border-radius: 0; background: none;
  border-top: 1px solid var(--line); }
.status-problems .status-problem-item:last-child { border-bottom: 1px solid var(--line); }
.status-problem-item h3 { margin: 0 0 4px; font-size: 15px; }
.status-problem-item p { margin-bottom: 8px; font-size: 14px; color: var(--ink-soft); }
.status-problem-item form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.status-problem-item form .control-help { margin: 0; font-size: 14px; }

.view-tabs ul { display: flex; flex-wrap: nowrap; gap: 6px; margin: -8px -8px 12px; padding: 8px; overflow-x: auto;
  list-style: none; }
.view-tabs li { flex: none; }
.view-tabs a { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 14px; border-radius: 999px;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.view-tabs a:hover { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.view-tabs a[aria-current="page"] { background: var(--ink); box-shadow: none; color: var(--paper); }
.filters.review-filters { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
.review-filters .field-action .button { width: auto; }
.review-list td { vertical-align: top; }
.row-link { display: inline-block; min-height: var(--touch); padding: 0.6rem 0 0.2rem; color: var(--ink); font-weight: 500;
  text-decoration: none; overflow-wrap: anywhere; }
.row-link:hover { text-decoration: underline; }
.row-meta { display: block; color: var(--ink-soft); font-size: 14px; overflow-wrap: anywhere; }
.back-link { margin: 0 0 16px; }
.back-link a { display: inline-flex; align-items: center; min-height: var(--touch); font-size: 15px; font-weight: 500; }
.detail-status { margin-top: 0; }
.banner p { margin: 4px 0; }

/* Review drafts: exact saved text, editor, versions and approval (S11). */
.message-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 8px 0; }
.held-item table { margin: 8px 0 12px; }
.draft-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 8px 0; padding: 14px 16px;
  border-radius: var(--radius-field); background: var(--soft); }
.draft-editor, .draft-approve { margin-top: 12px; }
.draft-editor textarea { width: 100%; min-height: 10rem; padding: 12px 14px; border: 1px solid var(--field-line);
  border-radius: var(--radius-field); background: var(--paper); font-size: 15px; resize: vertical; }
.draft-editor .button-quiet { margin: 0 0 8px; }
.editor-state { margin: 4px 0 8px; font-size: 14px; font-weight: 500; }
.acknowledgements { margin: 8px 0; padding: 14px 18px; border-radius: var(--radius-panel); background: var(--warn-bg);
  color: var(--warn-text); }
.acknowledgements div { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; }
.conflict-versions h5 { margin: 12px 0 4px; }
.thread-message { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline); }
.thread-message.latest { border-left: 3px solid var(--amber); padding-left: 12px; }
.reject-form fieldset { margin: 8px 0 16px; }
.handled-form, .retry-form { margin: 12px 0; }
.operator-notes code { overflow-wrap: anywhere; }

/* S14 evidence: the weakest checks stand out without colour alone. */
.factor-weak { font-weight: 500; }
.confidence-index { font-weight: 500; }

/* S17: Your quality rating, feedback and usage summaries, spending controls and digest. */
.rating-panel { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.rating-form fieldset { margin: 0 0 12px; }
.rating-scale .scale { display: flex; flex-wrap: wrap; gap: 4px; }
.rating-scale .scale span, .rating-improve .choice { display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--touch); padding: 0 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--field-line);
  margin: 0 4px 4px 0; font-size: 14px; font-weight: 500; }
.rating-scale input, .rating-improve input, .rating-flags input { width: 1.25rem; height: 1.25rem; }
.rating-flags div { display: flex; gap: 8px; align-items: center; min-height: var(--touch); }
.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.period-form, .digest-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.period-form input, .period-form select, .digest-form input[type="text"], .spending-form input, .spending-form select,
.display-form input { min-height: var(--touch); padding: 0 14px; border: 1px solid var(--field-line);
  border-radius: var(--radius-field); background: var(--paper); font-size: 15px; }
.spending-form fieldset, .display-form fieldset { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
#digest-enabled, .spending-form input[type="checkbox"] { width: 1.5rem; height: 1.5rem; min-height: 0; padding: 0; }

/* S15: the caution positions and their preview. */
.caution-positions li { margin-bottom: 12px; }
.caution-positions label { font-weight: 400; }
.caution-positions .control-help { display: block; margin-left: 1.75rem; }
.caution-preview h4 { margin: 16px 0 4px; }
.caution-examples li { margin-bottom: 6px; }

/* Knowledge: entry list, decisions and history. */
.topic-heading { margin: 24px 0 8px; font-size: 16px; font-weight: 500; }
.entry-list { margin: 0; padding-left: 0; list-style: none; border-top: 1.5px solid var(--ink); }
.entry-list li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.entry-list a { display: inline-block; min-height: var(--touch); margin-right: 8px; padding: 0.6rem 0; color: var(--ink);
  font-weight: 500; }
.entry-meta { display: block; color: var(--ink-soft); font-size: 14px; }
.preserve { white-space: pre-line; }
.decision { margin: 0 0 24px; }
.decision h3 { margin-top: 0; }
.conditions li { margin-bottom: 12px; }
.inline-form { display: inline-block; margin: 8px 0 0; }
.inline-list li { display: inline-block; margin-right: 12px; }
.conflict-list { padding-left: 0; list-style: none; }
.conflict-list li { margin-bottom: 12px; padding: 14px 18px; border-radius: var(--radius-panel); background: var(--warn-bg);
  color: var(--warn-text); }
.conflict-list p { margin: 4px 0; }
.history { margin-top: 32px; }
.unsaved-warning { font-weight: 500; color: var(--error-text); }
.saved-answer { margin-top: 0; padding: 12px 16px; border-radius: var(--radius-field); background: var(--soft); }

/* Service health (S19) */
.diagnostics table { width: 100%; }

/* Sign in, access not granted and error pages: one dark card on the warm page. */
.auth-page { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px;
  padding: 24px var(--gutter) 32px; }
main.narrow { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; max-width: 40rem;
  padding: 0; }
main.auth-card { flex: 0 0 auto; margin: auto; max-width: 480px; padding: clamp(28px, 5vw, 44px);
  border-radius: var(--radius-card); background: var(--ink); color: var(--paper); }
.auth-card h1 { font-size: 32px; line-height: 1.15; color: var(--paper); }
.auth-card h1::before { content: none; }
/* align-self: the card is a flex column, which would stretch the image and centre the SVG artwork inside it. */
.auth-logo { display: block; align-self: flex-start; height: 52px; width: auto; margin-bottom: 36px; }
.auth-text { margin-bottom: 24px; font-size: 16px; font-weight: 300; color: var(--on-dark); }
.auth-card form, .auth-card p:has(> .button) { margin: 0; }
.auth-card .button { width: 100%; min-height: 48px; font-size: 16px; }
.auth-card .notice { margin-bottom: 20px; padding: 14px 16px 14px 50px; border-radius: 14px; background: var(--dark-raised);
  color: var(--paper); }
.auth-card .notice::before { left: 16px; top: 15px; width: 22px; height: 22px; font-size: 13px; }
.auth-card .notice-warning { background: var(--amber); color: var(--ink); }
.auth-card .notice-warning::before { background: var(--ink); color: var(--amber); }
.auth-card .reference { margin: 16px 0 0; color: var(--on-dark-muted); }
.auth-card .reference code { color: var(--on-dark); }
.auth-footer { margin: 0; text-align: center; font-size: 14px; color: var(--muted); }

/* Review detail (S65): heading block, notices, then the enquiry and draft beside staff-only evidence,
   rating, ownership and other actions. */
.back-link a { gap: 8px; color: var(--ink-soft); font-size: 14px; text-decoration: none; }
.back-link a::before { content: ""; width: 7px; height: 7px; border-left: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor; transform: rotate(45deg); }
.back-link a:hover { color: var(--ink); }
.review-detail h1 { font-size: clamp(30px, 3.6vw, 40px); line-height: 1.15; }
.detail-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 18px; }
.detail-status .status-detail { margin: 0; font-size: 15px; color: var(--ink-soft); }
.detail-facts { display: flex; flex-wrap: wrap; gap: 12px 36px; margin-bottom: 24px; }
.detail-facts > div { display: block; padding: 0; border: 0; }
.detail-facts dt { font-size: 15px; font-weight: 500; letter-spacing: 0.6px; font-variant-caps: all-small-caps; color: var(--muted); }
.detail-facts dd { margin-top: 2px; }
.detail-facts .status-detail { margin-left: 4px; }
.live-notices > .notice, .review-detail > .banner, .orphan-local { margin-bottom: 16px; }
.orphan-local h2 { font-size: 18px; font-weight: 500; margin-bottom: 6px; }

.detail-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.detail-main { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.detail-side { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.detail-layout section + section { margin-top: 0; }
.detail-side h2 { font-size: 22px; }

.thread-card .message { padding: 0; border-radius: 0; background: none; margin-bottom: 14px; }
.thread-card .message h3 { margin: 0 0 4px; font-size: 15px; }
.thread-card .message .control-help { margin-bottom: 10px; color: var(--muted); }
.thread-card .message-text { margin: 0 0 10px; padding: 20px 22px; border-radius: 14px; background: var(--soft);
  font-size: 16px; line-height: 1.6; }
.thread-card .newest-enquiry .message-text { box-shadow: inset 3px 0 0 var(--amber); }
.thread-card > .thread { margin-top: 14px; border-top: 1px solid var(--hairline); }
.thread-card .thread > summary { font-size: 15px; }
.thread-card .thread ol { display: flex; flex-direction: column; gap: 12px; padding-bottom: 6px; }
.thread-card .thread-message { margin: 0; padding: 2px 0 2px 16px; border: 0; border-left: 2px solid var(--line); }
.thread-card .thread-message.latest { border-left-color: var(--amber); }
.thread-card .thread-message .message-text { padding: 0; background: none; font-size: 15px; }
.plain-text-note { margin-top: 12px; font-size: 13px; color: var(--muted); }

.draft-intro { max-width: 680px; margin-bottom: 18px; font-size: 15px; }
.draft-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); column-gap: 28px;
  margin-bottom: 22px; }
.draft-facts > div { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 11px 0; }
.draft-facts dt { font-size: 14px; }
/* Block, not flex: a flex column would turn each inline element ("Open the <strong>Drafts</strong> folder")
   into its own line. Tags stay inline; details go under the value. */
.draft-facts .status-detail { display: block; margin: 4px 0 0; }
.draft-facts .plain-list { margin: 0; }

.save-status { margin-bottom: 20px; }
.conflict-versions { padding: 20px 22px; border-radius: var(--radius-panel); background: var(--warn-bg); color: var(--warn-text); }
.conflict-versions h3 { margin-top: 0; }
.conflict-versions .control-help { color: var(--warn-text); margin-bottom: 8px; }
.conflict-versions h4 { margin: 14px 0 6px; }
.conflict-versions .draft-text, .conflict-versions .version-observed { margin: 0; padding: 12px 16px; border-radius: 12px;
  background: var(--paper); color: var(--ink); font-size: 15px; }
.discard-kept { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.discard-kept .button { border-color: var(--ink); color: var(--ink); text-decoration: none; padding: 0 16px; font-size: 14px; }

.saved-panel { border: 1.5px solid var(--ink); border-radius: 18px; overflow: hidden; }
.saved-panel-body { padding: 20px 22px 22px; }
.saved-panel-body h3 { margin: 0 0 10px; font-size: 15px; font-weight: 500; letter-spacing: 0.6px; font-variant-caps: all-small-caps;
  color: var(--muted); }
.saved-panel-body h3 .hint { color: var(--muted); }
.saved-panel .saved-text { margin: 0; padding: 0; background: none; font-size: 16px; line-height: 1.6; }
.saved-panel-foot { padding: 18px 22px; border-top: 1px solid var(--line); background: var(--soft); }
.saved-panel-foot .draft-approve { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.saved-panel-foot h3 { margin: 0; font-size: 15px; }
.saved-panel-foot p { margin: 0; }
.saved-panel-foot .control-help { font-size: 15px; }
.send-blockers ul { margin: 6px 0 0; padding-left: 18px; font-size: 15px; color: var(--ink-soft); }
.acknowledgements { margin: 0; border: 0; }
.acknowledgements legend { float: left; width: 100%; padding: 0; margin-bottom: 6px; }
.acknowledgements div { clear: both; font-size: 15px; }
.acknowledgements input { width: 1.25rem; height: 1.25rem; margin: 2px 0 0; flex: none; }
.unsaved-warning { display: flex; align-items: center; gap: 8px; color: var(--warn-text); font-size: 15px; }
.unsaved-warning::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--warn-dot); }
.approve-row { display: flex; justify-content: flex-end; }

.editor-disclosure { margin-top: 20px; border-top: 1px solid var(--hairline); }
.editor-disclosure > summary { padding: 8px 0; }
.editor-disclosure .summary-title { font-size: 18px; font-weight: 400; }
.summary-hint { margin-left: auto; font-size: 14px; font-weight: 400; color: var(--ink-soft); }
.editor-disclosure .draft-editor { margin-top: 4px; }
.draft-editor .field { margin-bottom: 10px; }
.draft-editor textarea { font-size: 16px; line-height: 1.6; padding: 14px 16px; border-radius: 14px; }
.draft-editor textarea[readonly] { border-color: var(--line); background: var(--soft); color: var(--ink-soft); }
.draft-editor > .button { margin-right: 14px; }
.draft-editor > .control-help { display: inline; }

.evidence h2 .hint, .withheld-item h2 .hint { display: table; margin-top: 8px; padding: 2px 10px; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 500; letter-spacing: 0.4px; }
.evidence-main > div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 0; border: 0; }
.evidence-confidence { margin-bottom: 8px; padding: 18px 20px !important; border-radius: var(--radius-panel); background: var(--soft); }
.evidence-main dt { font-size: 15px; font-weight: 500; letter-spacing: 0.6px; font-variant-caps: all-small-caps; color: var(--muted); }
.evidence-confidence .confidence-index { font-size: 32px; font-weight: 300; line-height: 1.1; margin-right: 8px; }
.evidence-confidence .status-detail { margin-left: 0; font-size: 14px; color: var(--ink-soft); }
.evidence-factors { padding: 14px 0 !important; border-bottom: 1px solid var(--hairline) !important; }
.evidence-factors li { padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--hairline); }
.evidence-factors li:last-child { border-bottom: 0; }
/* Sources and conditions sit behind a disclosure inside their own row; the summary names the row, so its dt
   is kept for screen readers only. Language and the automatic-replies notice stay open. */
.evidence-main > .evidence-more-row { border-bottom: 1px solid var(--hairline); }
.evidence-more-row > dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evidence-more > summary { font-size: 15px; }
.evidence-more[open] { padding-bottom: 14px; font-size: 14px; }
.evidence-more li { margin-bottom: 6px; }
.evidence-more .status-detail { margin-left: 0; }
.evidence-language, .evidence-notices { padding: 12px 0 !important; border-bottom: 1px solid var(--hairline) !important;
  font-size: 14px; }
.evidence-language .status-detail, .evidence-notices .status-detail { display: block; }
.evidence-footnote { margin-top: 14px; font-size: 13px; color: var(--muted); }
.withheld-item .status-list > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.withheld-item .status-list dt { font-size: 15px; font-weight: 500; letter-spacing: 0.6px; font-variant-caps: all-small-caps; color: var(--muted); }
.withheld-item .status-detail { margin-left: 0; }
.withheld-item .suggest-entry { margin: 8px 12px 4px 0; }

.review-detail .rating-panel { margin-top: 0; padding-top: 28px; border-top: 0; }
.rating-panel > .control-help { margin-bottom: 18px; }
.rating-form fieldset { margin: 0 0 18px; padding: 0; border: 0; }
.rating-form legend { margin-bottom: 8px; padding: 0; }
.rating-versions > div { margin-bottom: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; font-size: 15px; }
.rating-versions input { width: 1.125rem; height: 1.125rem; margin: 0 8px 0 0; vertical-align: -2px; }
.rating-versions .status-detail { display: block; margin: 4px 0 0; }
.rated-text { margin: 6px 0 0 28px; }
.rated-text summary { min-height: var(--touch); font-size: 14px; font-weight: 400; color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 3px; }
.rated-text summary::after { content: none; }
.rating-scale .scale { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.rating-scale .scale span { position: relative; display: block; min-height: 0; margin: 0; padding: 0; box-shadow: none; }
.rating-scale .scale span:first-child { grid-column: span 2; }
/* The radio stays in place for focus and keyboard use; pointer clicks pass through to its label (for=). */
.rating-scale .scale input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0;
  pointer-events: none; }
.rating-scale .scale label { display: flex; align-items: center; justify-content: center; min-height: var(--touch); padding: 0 6px;
  border-radius: 8px; box-shadow: inset 0 0 0 1px var(--field-line); font-size: 14px; font-weight: 500; cursor: pointer; }
.rating-scale .scale input:checked + label { background: var(--ink); box-shadow: none; color: var(--paper); }
.rating-scale .scale input:focus-visible + label { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--amber); }
.rating-scale .control-help { margin-top: 8px; font-size: 13px; color: var(--muted); }
.rating-improve { padding: 16px !important; border-radius: 14px; background: var(--soft); }
.rating-improve legend { float: left; width: 100%; }
.rating-improve .choice { clear: both; background: var(--paper); }
.rating-flags div { font-size: 15px; }
.ratings-given { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.ratings-given h3 { margin: 0 0 8px; font-size: 15px; font-weight: 500; letter-spacing: 0.6px; font-variant-caps: all-small-caps; color: var(--muted); }
.ratings-given li, .ratings-given p { font-size: 14px; color: var(--ink-soft); margin-bottom: 8px; }

.ownership-card > p { font-size: 15px; color: var(--ink-soft); }
.ownership-card form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.ownership-card form .control-help { font-size: 14px; color: var(--muted); }
.held-steps { font-size: 14px; }
.held-steps caption { margin: 6px 0 4px; text-align: left; font-size: 15px; font-weight: 500; letter-spacing: 0.6px;
  font-variant-caps: all-small-caps; color: var(--muted); }
.held-steps .status-detail { display: block; margin: 2px 0 0; }

.other-actions { padding-top: 12px; padding-bottom: 12px; }
.other-actions h2 { margin: 0; padding: 12px 0 4px; font-size: 15px; font-weight: 500; letter-spacing: 0.6px;
  font-variant-caps: all-small-caps; color: var(--muted); }
.reject-disclosure { border-bottom: 1px solid var(--hairline); }
.reject-disclosure > summary { font-size: 15px; }
.reject-form fieldset { margin: 0; padding: 0 0 18px; border: 0; }
.reject-form legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.reject-form .control-help { margin-bottom: 12px; }
.handled-form, .other-actions .retry-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0;
  padding: 14px 0; }
.other-actions .retry-form { border-top: 1px solid var(--hairline); }
.operator-notes .control-help { font-size: 14px; }

/* Knowledge (S65): library page, entry page, add and import. */
.page-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px;
  margin-bottom: 24px; }
.page-heading h1 { margin-bottom: 0; }
.knowledge-progress { display: flex; flex-wrap: wrap; gap: 24px 40px; margin-bottom: 24px; }
.progress-main { flex: 1 1 380px; min-width: 0; }
.knowledge-progress > .status-list { flex: 1 1 420px; min-width: 0; }
.knowledge-progress .status-list > div { grid-template-columns: 150px minmax(0, 1fr); }
.knowledge-progress .status-detail { display: block; margin: 4px 0 0; }
#review-count { font-size: 15px; color: var(--ink-soft); }
#review-count strong { font-size: 32px; font-weight: 300; line-height: 1.1; color: var(--ink); }
.find-card { padding-bottom: 8px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.find-card + .entries-card { margin-top: 0; padding-top: 12px; border-top-left-radius: 0; border-top-right-radius: 0; }
.entries-card > h2 { margin-bottom: 6px; font-size: 15px; font-weight: 500; letter-spacing: 0.6px; font-variant-caps: all-small-caps;
  color: var(--muted); }
.entries-card > .control-help { margin-bottom: 4px; color: var(--muted); }
.topic-heading { padding-bottom: 8px; border-bottom: 1.5px solid var(--ink); }
.topic-heading .reference { font-size: 14px; font-weight: 400; }
.entry-list { border-top: 0; }
.entry-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; padding: 2px 4px 12px; }
.entry-list li:hover { background: #faf9f6; }
.entry-list a { flex: 1 1 320px; min-width: 0; margin: 0; text-decoration: none; }
.entry-list a:hover { text-decoration: underline; }
.entry-list .entry-meta { flex: 1 1 100%; color: var(--muted); }
.entry-meta strong { color: var(--ink); }
.knowledge-bottom { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; margin-top: 24px; }
.knowledge-bottom > section { margin-top: 0; }
.automatic-card { flex: 999 1 560px; min-width: 0; }
.export-card { flex: 1 1 320px; min-width: 0; }
.automatic-card h2, .export-card h2 { font-size: 22px; }
.automatic-card > .control-help { margin-bottom: 18px; max-width: 720px; font-size: 15px; }
.conditions { margin: 0; padding: 0; list-style: none; counter-reset: condition; }
.conditions > li { position: relative; margin: 0; padding: 14px 0 14px 44px; border-top: 1px solid var(--hairline);
  counter-increment: condition; }
.conditions > li::before { content: counter(condition); content: counter(condition) / ""; position: absolute; left: 0; top: 12px;
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 500; }
.conditions .status-tag { margin: 0 8px; }
.conditions .inline-form { display: block; margin-top: 10px; }
.automatic-footnote { margin: 0; padding-top: 14px; border-top: 1px solid var(--hairline); color: var(--muted); }
.export-card .control-list { display: flex; flex-wrap: wrap; gap: 10px; }
.export-card .control-list li { display: block; margin: 0; }

.entry-title { font-size: clamp(30px, 3.6vw, 40px); line-height: 1.15; }
.entry-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 20px; }
.entry-summary .status-detail { margin: 0; font-size: 15px; color: var(--ink-soft); }
main > section.notice h2 { font-size: 18px; font-weight: 500; margin-bottom: 6px; }
.entry-layout { margin-top: 8px; }
.entry-layout .card h2, .published-card h2 { font-size: 22px; }
.published-card .status-list > div { grid-template-columns: minmax(110px, 170px) minmax(0, 1fr); border-bottom-color: var(--dark-raised); }
.published-card dt { color: var(--on-dark-muted); font-size: 14px; }
.panel-dark .notice-warning { background: var(--amber); color: var(--ink); font-weight: 500; }
.panel-dark .notice-warning::before { background: var(--ink); color: var(--amber); }
.conflicts-card .conflict-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.conflicts-card .conflict-list li { margin: 0; background: var(--soft); color: var(--ink); }
.conflicts-card .conflict-list .reference { font-size: 15px; font-weight: 500; letter-spacing: 0.6px; font-variant-caps: all-small-caps;
  color: var(--muted); }
.field-narrow { max-width: 320px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.form-actions .control-help { margin: 0; }
.source-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 0;
  border-bottom: 1px solid var(--hairline); font-size: 15px; }
.translation-list li { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.translation-list p { margin: 4px 0 0; }
.translation-disclosure { margin-top: 8px; }
.history.card { margin-top: 0; padding: 0 28px; }
.history.card > summary { padding: 14px 0; font-size: 22px; font-weight: 300; }
.history.card[open] { padding-bottom: 24px; }
.event-list { margin-top: 16px; font-size: 14px; color: var(--ink-soft); }
.event-list li { margin-bottom: 6px; }

.entry-decide { display: flex; flex-direction: column; gap: 16px; }
.entry-decide > h2 { margin: 0; padding-left: 4px; font-size: 15px; font-weight: 500; letter-spacing: 0.6px;
  font-variant-caps: all-small-caps; color: var(--muted); }
.entry-decide .decision { margin: 0; padding: 24px; }
.entry-decide .decision h3 { margin: 0 0 10px; font-size: 20px; font-weight: 300; }
.entry-decide .decision p:not(.notice) { font-size: 14px; color: var(--ink-soft); }
.decision-primary { box-shadow: inset 0 0 0 1.5px var(--ink); }
.entry-decide .saved-answer-label { margin-bottom: 6px; font-size: 15px; font-weight: 500; letter-spacing: 0.6px;
  font-variant-caps: all-small-caps; color: var(--muted); }
.entry-decide .saved-answer { color: var(--ink); font-size: 15px; }
#approve-effect { font-size: 14px; }
.decision-group { padding: 4px 24px; border-radius: var(--radius-card); background: var(--paper); }
.secondary-decision + .secondary-decision { border-top: 1px solid var(--hairline); }
.secondary-decision > summary, .translation-disclosure > summary { font-size: 15px; }
/* The summary names the form inside a disclosure, so its h3 is kept for screen readers only. */
.secondary-decision .decision, .translation-disclosure .decision { margin: 0; padding: 0 0 16px; border-radius: 0;
  background: none; box-shadow: none; }
.secondary-decision .decision h3, .translation-disclosure .decision h3 { position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.reviewer-note { padding: 14px 18px; border-radius: var(--radius-panel); background: var(--paper); }
.form-card { max-width: 820px; }
.import-confirm { margin-top: 16px; padding: 20px; background: var(--soft); }

/* Settings (S65): a side menu with Mode and sending at a glance; Mode and the pause controls always open in the
   dark panel; every other section a card whose body is a disclosure toggled from the title row. */
.settings-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.settings-menu { flex: 0 1 260px; min-width: 0; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 12px; }
.settings-glance { margin: 0; padding: 14px 16px; border-radius: var(--radius-panel); background: var(--ink); color: var(--paper);
  font-size: 14px; }
.settings-glance > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.settings-glance dt { color: var(--on-dark-muted); }
.settings-glance dd { margin: 0; }
.settings-menu ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.settings-menu a { display: flex; align-items: center; min-height: var(--touch); padding: 0 12px; border-radius: 12px;
  color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.settings-menu a:hover { background: var(--paper); color: var(--ink); }
.settings-content { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.settings-content > * + section, .settings-content section + section { margin-top: 0; }
.settings-content > h2, .settings-content section h2 { scroll-margin-top: 24px; }

.mode-panel .status-list > div { border-bottom-color: var(--dark-raised); }
.mode-panel dt { color: var(--on-dark-muted); }
.mode-panel .status-detail { display: block; margin: 4px 0 0; color: var(--on-dark); font-size: 14px; }
.mode-panel > .control-help { margin-top: 18px; }
.mode-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.controls h2 { margin-bottom: 12px; font-size: 15px; font-weight: 500; letter-spacing: 0.6px; font-variant-caps: all-small-caps;
  color: var(--on-dark-muted); }
.controls .control-list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.controls .control-list li { flex-direction: column; align-items: stretch; gap: 12px; padding: 18px; border-radius: var(--radius-panel);
  background: #2e2e2e; }
.controls .control-list .button { width: 100%; }
.controls .control-help { flex: none; font-size: 13px; }

.settings-section { position: relative; padding: 18px 28px; }
.settings-section > h2 { margin: 0; padding: 6px 110px 6px 0; font-size: 22px; }
.settings-section > h2 .hint { font-size: 14px; }
.section-body > summary { position: absolute; top: 14px; right: 24px; gap: 10px; padding: 0 4px; font-size: 14px;
  font-weight: 400; color: var(--ink-soft); }
.section-body[open] { margin-top: 12px; padding-bottom: 10px; }
.section-body > .control-help { margin-bottom: 12px; font-size: 15px; }
.settings-section h3 { margin-top: 24px; }
.settings-section .status-detail { margin-left: 8px; }
.caution-positions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 0 0 14px; }
.caution-positions li { margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; }
.caution-positions li:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--ink); border-color: var(--ink); }
.caution-positions label { display: flex; align-items: center; gap: 10px; }
.caution-positions input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--ink); }
.caution-positions .control-help { margin: 6px 0 0; font-size: 14px; }
.caution-form fieldset { margin: 0; padding: 0; border: 0; }
.caution-form legend { margin-bottom: 10px; padding: 0; }
.caution-preview { margin-top: 18px; padding: 20px 22px; background: var(--soft); border-radius: var(--radius-panel); }
.caution-preview h3 { margin-top: 0; font-size: 15px; font-weight: 500; letter-spacing: 0.6px; font-variant-caps: all-small-caps;
  color: var(--muted); }
.caution-preview form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-list li { margin: 0; }
table.hours th { width: 9rem; font-variant-caps: normal; letter-spacing: 0; font-size: 15px; color: var(--ink-soft); font-weight: 400;
  border-bottom: 1px solid var(--line); }
.hours-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 14px; }
.hours-days legend { grid-column: 1 / -1; }
.choice-list label { display: flex; align-items: center; gap: 10px; min-height: var(--touch); font-size: 15px; }
.choice-list input[type="radio"], .choice-list input[type="checkbox"] { width: 1.125rem; height: 1.125rem; margin: 0; }
.field-row-3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.hours-editor .field input, .notice-editor .field input { width: 100%; min-height: var(--touch); padding: 0 14px;
  border: 1px solid var(--field-line); border-radius: var(--radius-field); background: var(--paper); font-size: 15px; }
.feedback-summary .summary-grid { margin-top: 8px; }
.period-form label, .spending-form label, .display-form label, .digest-form label { font-size: 14px; font-weight: 500; }
.period-form { padding: 16px; border-radius: var(--radius-panel); background: var(--soft); margin-bottom: 10px; }
.usage-totals > div, .spending-controls .status-list > div, .digest-settings .status-list > div { font-size: 15px; }
.spending-form fieldset, .display-form fieldset { padding: 14px 18px 16px; }

/* Operator pages (S65 rule 8: shared components, no special layout). */
.usage-detail-page section, main > section.diagnostics { margin-top: 24px; }
.diagnostics .status-list > div { grid-template-columns: minmax(160px, 260px) minmax(0, 1fr); }

/* Tablet (820px portrait): the header wraps onto two rows and cards tighten. */
@media (max-width: 60rem) {
  main { padding-top: 32px; }
  .card, .status-panel, .decision, .panel-dark, .controls { padding: 24px 20px; }
  .filters { grid-template-columns: 1fr 1fr; }
  .account { padding-top: 0; }
  .review-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "aside" "list"; }
  .settings-menu { position: static; flex: 1 1 100%; }
  .settings-menu ul { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; margin: -8px; padding: 8px; gap: 6px; }
  .settings-menu li { flex: none; }
  .settings-menu a { border-radius: 999px; background: var(--paper); white-space: nowrap; }
  .settings-glance { display: flex; flex-wrap: wrap; gap: 4px 24px; }
  .settings-section { padding: 16px 20px; }
  .section-body > summary { right: 16px; }
  .disclosure.card { padding: 0 20px; }
}

/* Narrow windows: stack labels over values and keep large targets. */
@media (max-width: 48rem) {
  .status-list > div { grid-template-columns: 1fr; }
  .status-detail { display: block; margin-left: 0; }
  .main-nav a { padding: 0 10px; }
  .main-nav a[aria-current="page"]::after { left: 10px; right: 10px; }
  .filters, .field-row, .review-filters { grid-template-columns: 1fr; }
  .summary-grid { grid-template-columns: 1fr; }
  .review-list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .review-list, .review-list tbody, .review-list tr, .review-list td { display: block; width: 100%; }
  .review-list tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .review-list td { border-bottom: 0; padding: 2px 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}