/* Shared design tokens. Colors occur only in this block and its dark scheme. */
:root {
  color-scheme: light;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-small: 0.875rem;
  --text-body: 1rem;
  --text-h3: 1.0625rem;
  --text-large: 1.25rem;
  --text-title: 1.875rem;
  --line-body: 1.55;
  --line-heading: 1.25;
  --letter-brand: -0.01em;
  --letter-caps: 0.04em;
  --weight-normal: 400;
  --weight-medium: 550;
  --weight-strong: 650;
  --weight-title: 700;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --page-width: 56rem;
  --control-height: 2.75rem;
  --textarea-height: 8rem;
  --border-width: 1px;
  --drop-width: 2px;
  --focus-width: 3px;
  --radius: 0.75rem;
  --radius-control: 0.5rem;
  --radius-pill: 999px;
  --disabled-opacity: 0.45;
  --motion: 120ms;
  --page: #f6f6f3;
  --surface: #ffffff;
  --surface-sunken: #f0f1ee;
  --field: #ffffff;
  --text: #17191c;
  --muted: #545b63;
  --border: #d9dcd8;
  --border-strong: #868d95;
  --accent: #1f4fd1;
  --accent-hover: #183fa8;
  --on-accent: #ffffff;
  --focus: #1f4fd1;
  --focus-halo: #1f4fd133;
  --shadow: 0 1px 2px #17191c0f, 0 4px 16px #17191c0a;
  --status-received: #3c596d;
  --status-action: #825000;
  --status-reviewing: #614390;
  --status-decided: #165e50;
  --status-closed: #545b63;
  --status-appeal: #863c62;
  --severity-error: #a1293b;
  --severity-warning: #825000;
  --severity-success: #165e50;
  --rule-passed: #165e50;
  --rule-denies: #a1293b;
  --rule-not-fired: #1f4fd1;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #121417;
    --surface: #1b1e22;
    --surface-sunken: #16191c;
    --field: #121417;
    --text: #eceef0;
    --muted: #a9b0b8;
    --border: #33383e;
    --border-strong: #7a828b;
    --accent: #8fb0ff;
    --accent-hover: #b5cbff;
    --on-accent: #0c1424;
    --focus: #8fb0ff;
    --focus-halo: #8fb0ff40;
    --shadow: 0 1px 2px #00000040, 0 4px 16px #00000033;
    --status-received: #a9cce7;
    --status-action: #f0c473;
    --status-reviewing: #ceb3f0;
    --status-decided: #86d8bd;
    --status-closed: #a9b0b8;
    --status-appeal: #f0b3d1;
    --severity-error: #ffa7b3;
    --severity-warning: #f0c473;
    --severity-success: #86d8bd;
    --rule-passed: #86d8bd;
    --rule-denies: #ffa7b3;
    --rule-not-fired: #8fb0ff;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0ms; }
}

/* Shell: one column, 16px gutters on a phone, a header and a quiet footer. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--page);
  color: var(--text);
  accent-color: var(--accent);
  font: var(--weight-normal) var(--text-body)/var(--line-body) var(--font-body);
  overflow-wrap: break-word;
}
a { color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: var(--border-width); }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; }
code { font-family: var(--font-mono); font-size: var(--text-small); overflow-wrap: anywhere; }
.shell { width: 100%; max-width: var(--page-width); margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 40rem) {
  .shell { padding-inline: var(--space-6); }
}
.site-header { background: var(--surface); border-bottom: var(--border-width) solid var(--border); }
.site-header .shell { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); padding-block: var(--space-4); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-large); font-weight: var(--weight-title); letter-spacing: var(--letter-brand); color: var(--text); }
.brand::before { content: ""; width: 0.875rem; height: 0.875rem; border-radius: 0.25rem; background: var(--accent); }
.site-header nav { margin-inline-start: auto; }
.site-header nav ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; padding: 0; margin: 0; }
.site-header nav a { font-weight: var(--weight-medium); text-decoration: none; }
.site-header nav a:hover { text-decoration: underline; }
main.shell { flex: 1; padding-block: var(--space-8) var(--space-12); }
main.shell:focus { outline: none; }
.site-footer { color: var(--muted); font-size: var(--text-small); padding-block: var(--space-5); border-top: var(--border-width) solid var(--border); }
.skip-link { position: fixed; z-index: 1; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); transform: translateY(-200%); padding: var(--space-2) var(--space-4); background: var(--surface); border: var(--border-width) solid var(--focus); border-radius: var(--radius-control); transition: transform var(--motion); }
.skip-link:focus { transform: translateY(0); }

/* One typographic scale. */
h1, h2, h3 { line-height: var(--line-heading); color: var(--text); }
h1 { margin-block: 0 var(--space-3); font-size: var(--text-title); font-weight: var(--weight-title); letter-spacing: var(--letter-brand); overflow-wrap: anywhere; }
h2 { margin-block: 0 var(--space-4); font-size: var(--text-large); font-weight: var(--weight-strong); }
h3 { margin-block: var(--space-5) var(--space-2); font-size: var(--text-h3); font-weight: var(--weight-strong); }
p { margin-block: 0 var(--space-4); }
ul, ol { margin-block: 0 var(--space-4); padding-inline-start: var(--space-6); }
dl { margin: 0; }
dt { font-weight: var(--weight-strong); margin-top: var(--space-4); }
dt:first-child { margin-top: 0; }
dd { margin: var(--space-1) 0 0; color: var(--muted); }
dd > p { margin-bottom: var(--space-1); }
/* Claim facts and benefits share a compact, readable label/value rhythm. */
.panel > dl { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); margin-block: var(--space-3) var(--space-5); font-variant-numeric: tabular-nums; }
.panel > dl > dt, .panel > dl > dd { margin: 0; padding-block: var(--space-3); border-bottom: var(--border-width) solid var(--border); overflow-wrap: anywhere; }
.panel > dl > dt { padding-inline-end: var(--space-4); }
.panel > dl > dd { color: var(--text); }
.panel > dl > dt:nth-last-child(2), .panel > dl > dd:last-child { border-bottom: 0; }
@media (min-width: 40rem) {
  .panel > dl { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

.muted, .eyebrow, .empty-state { color: var(--muted); }
.eyebrow { margin-bottom: var(--space-1); font-size: var(--text-small); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--letter-caps); }
.empty-state { margin: 0; padding: var(--space-5); text-align: center; background: var(--surface-sunken); border-radius: var(--radius-control); }
@media (max-width: 40rem) {
  h1 { font-size: 1.5rem; }
}

/* Cards. */
.page-heading { margin-bottom: var(--space-6); }
.page-heading > p { color: var(--muted); }
.page-heading > :last-child { margin-bottom: 0; }
.panel, main > article { background: var(--surface); padding: var(--space-5) var(--space-4); border: var(--border-width) solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
@media (min-width: 40rem) {
  .panel, main > article { padding: var(--space-6) var(--space-8); }
}
.panel > :last-child, main > article > :last-child { margin-bottom: 0; }
main > .panel ~ .panel { margin-top: var(--space-6); }
.claim-sections { display: grid; gap: var(--space-6); }

/* Forms: a label above its full-width control, help text beneath. */
form[data-document-upload] { display: grid; gap: var(--space-6); }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; margin-bottom: var(--space-2); font-size: var(--text-h3); font-weight: var(--weight-strong); }
label { display: block; margin-block: var(--space-4) var(--space-2); font-weight: var(--weight-medium); }
h2 + label, legend + label, p > label { margin-top: 0; }
input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]), select, textarea {
  display: block;
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--text);
  background: var(--field);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-control);
  transition: border-color var(--motion), box-shadow var(--motion);
}
textarea { min-height: var(--textarea-height); resize: vertical; }
select {
  appearance: none;
  padding-inline-end: var(--space-8);
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 1.125rem) 50%, calc(100% - 0.8125rem) 50%;
  background-size: 0.3125rem 0.3125rem;
  background-repeat: no-repeat;
}
input:hover, select:hover, textarea:hover { border-color: var(--text); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 var(--focus-width) var(--focus-halo); }
input[type="checkbox"], input[type="radio"] { width: 1.125rem; height: 1.125rem; margin: 0.2em 0 0; flex: none; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; box-shadow: none; }
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { display: flex; align-items: flex-start; gap: var(--space-3); font-weight: var(--weight-normal); }
[id$="-help"], .hint { margin-block: var(--space-2) 0; color: var(--muted); font-size: var(--text-small); }
:disabled, fieldset:disabled * { cursor: not-allowed; }
fieldset:disabled input, fieldset:disabled select, fieldset:disabled textarea, input:disabled, select:disabled, textarea:disabled { opacity: var(--disabled-opacity); }

/* Buttons: primary filled, secondary outlined, disabled visibly so. */
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-5);
  font: inherit;
  font-weight: var(--weight-strong);
  line-height: var(--line-heading);
  text-align: center;
  text-decoration: none;
  color: var(--on-accent);
  background: var(--accent);
  border: var(--border-width) solid var(--accent);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background-color var(--motion), border-color var(--motion), color var(--motion);
}
button:hover:not(:disabled), .button:hover { color: var(--on-accent); background: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none; }
.button--secondary { color: var(--accent); background: var(--surface); border-color: var(--accent); }
.button--secondary:hover:not(:disabled) { color: var(--accent-hover); background: var(--focus-halo); border-color: var(--accent-hover); }
button:disabled, fieldset:disabled button { opacity: var(--disabled-opacity); cursor: not-allowed; }
form button, fieldset > button { margin-top: var(--space-5); }
form[data-document-upload] > button { margin-top: 0; justify-self: start; }
@media (max-width: 30rem) {
  form button, .panel > .button { width: 100%; }
  form[data-document-upload] > button { justify-self: stretch; }
}

/* Answer choices sit side by side. */
.choices { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.choices > form button { margin-top: 0; }

/* The document drop pad: a dashed target, a button-like file picker. */
.document-drop { position: relative; border: var(--drop-width) dashed var(--border-strong); box-shadow: none; }
.document-drop > p:first-of-type { color: var(--muted); }
.file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; }
.file-button { display: inline-flex; margin-block: 0 var(--space-4); }
.document-drop:has(.file-input:focus-visible) .file-button { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; }
.upload-status { margin-bottom: var(--space-3); }
.upload-progress { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
/* Empty, it takes no room but stays in the accessibility tree, so its first row is announced. */
.upload-progress:empty { margin: 0; }
.upload-progress > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding-block: var(--space-3); border-bottom: var(--border-width) solid var(--border); }
.upload-progress > li:last-child { border-bottom: 0; }
.upload-progress label { flex: 1 1 14rem; margin: 0; overflow-wrap: anywhere; }
.read-documents { margin-top: 0; }
progress { flex: 1 1 8rem; height: 0.5rem; accent-color: var(--accent); }

/* htmx indicators stay in the stylesheet; no injected inline style. */
.htmx-indicator { opacity: 0; transition: opacity var(--motion); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* Status badges. */
.status { display: inline-flex; align-items: center; padding: 0.125rem var(--space-3); border: var(--border-width) solid currentColor; border-radius: var(--radius-pill); background: color-mix(in srgb, currentColor 9%, transparent); font-size: var(--text-small); font-weight: var(--weight-strong); line-height: var(--line-body); white-space: nowrap; }
.status--received { color: var(--status-received); }
.status--action { color: var(--status-action); }
.status--reviewing { color: var(--status-reviewing); }
.status--decided { color: var(--status-decided); }
.status--closed { color: var(--status-closed); }
.status--appeal { color: var(--status-appeal); }

/* Lists of rows: timelines, requests, questions. */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline > li { padding-block: var(--space-4); border-bottom: var(--border-width) solid var(--border); }
.timeline > li:first-child { padding-top: 0; }
.timeline > li:last-child { border-bottom: 0; padding-bottom: 0; }
.timeline-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.timeline-row > time, .timeline > li time { color: var(--muted); font-size: var(--text-small); }
.timeline-row > details { flex-basis: 100%; }
.timeline > li > h2 { margin-bottom: var(--space-1); font-size: var(--text-h3); }
main > .timeline { background: var(--surface); padding: var(--space-5) var(--space-4); border: var(--border-width) solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
@media (min-width: 40rem) {
  main > .timeline { padding: var(--space-6) var(--space-8); }
}
details { margin-top: var(--space-2); }
details ol { margin: var(--space-2) 0 0; }
details > section { margin-top: var(--space-3); padding-inline-start: var(--space-4); border-inline-start: var(--drop-width) solid var(--border); }
details > section > h3 { margin-top: 0; }
summary { cursor: pointer; color: var(--accent); font-weight: var(--weight-medium); }
.requests, .panel > ul:not(.routing-boxes), .panel > ol { list-style: none; padding: 0; }
.requests > li, .panel > ul:not(.routing-boxes) > li, .panel > ol > li { padding-block: var(--space-4); border-bottom: var(--border-width) solid var(--border); }
.requests > li:first-child, .panel > ul:not(.routing-boxes) > li:first-child, .panel > ol > li:first-child { padding-top: 0; }
.requests > li:last-child, .panel > ul:not(.routing-boxes) > li:last-child, .panel > ol > li:last-child { border-bottom: 0; padding-bottom: 0; }
.requests > li > :last-child, .panel > ul > li > :last-child, .panel > ol > li > :last-child { margin-bottom: 0; }
.disposition { margin-top: var(--space-4); padding: var(--space-4); background: var(--surface-sunken); border: var(--border-width) solid var(--border); border-radius: var(--radius-control); }
.disposition > label:first-of-type { margin-top: 0; }
.disposition button { margin-top: var(--space-4); }

/* Tables keep column relationships and scroll inside their own region on a phone. */
.table-scroll { overflow-x: auto; background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel .table-scroll { border: 0; border-radius: 0; box-shadow: none; }
table { width: 100%; border-collapse: collapse; }
caption { text-align: start; font-weight: var(--weight-strong); padding: var(--space-4); }
.panel caption { padding-inline: 0; }
th, td { text-align: start; vertical-align: top; padding: var(--space-3) var(--space-4); border-top: var(--border-width) solid var(--border); }
thead th { color: var(--muted); font-size: var(--text-small); font-weight: var(--weight-strong); text-transform: uppercase; letter-spacing: var(--letter-caps); white-space: nowrap; background: var(--surface-sunken); }
tbody tr:hover { background: var(--surface-sunken); }
td a { font-weight: var(--weight-medium); }
td > p { margin: 0; }

/* The rules a rung evaluated: each row coloured by its standing. */
.rule > th { border-inline-start: 0.375rem solid var(--rule-not-fired); }
.rule--passed > th { border-inline-start-color: var(--rule-passed); }
.rule--denies > th { border-inline-start-color: var(--rule-denies); }
.rule--passed { background: color-mix(in srgb, var(--rule-passed) 10%, transparent); }
.rule--denies { background: color-mix(in srgb, var(--rule-denies) 10%, transparent); }
.rule--not_fired, .rule--held { background: color-mix(in srgb, var(--rule-not-fired) 5%, transparent); }
.referral { font-weight: var(--weight-medium); }
.round + .round { margin-top: var(--space-6); padding-top: var(--space-6); border-top: var(--border-width) solid var(--border); }
.answers { padding-inline-start: var(--space-5); }

/* Review routes. */
.routing-boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--space-3); list-style: none; padding: 0; }
.routing-person { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border: var(--border-width) solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
.routing-person span { font-size: var(--text-small); color: var(--muted); }
.routing-person-assigned { border-color: var(--accent); box-shadow: inset 0 0 0 var(--border-width) var(--accent); }