/* Self-contained federal styling.
 *
 * Uses U.S. Web Design System design tokens (the public federal color, type, and
 * spacing values) in a hand-written stylesheet rather than pulling the full USWDS
 * bundle — the prototype stays self-contained (no external CSS), which suits a
 * network that blocks outbound requests, and every rule here is explainable.
 * Base text 18px and 44px targets suit an older reviewer; status is never carried
 * by color alone (each state has a text label and a distinct left border).
 */

:root {
  --ink: #1b1b1b;
  --muted: #565c65;
  --primary: #005ea2;
  --primary-dark: #1a4480;
  --bg: #ffffff;
  --bg-subtle: #f0f0f0;
  --border: #dfe1e2;
  --ok-bg: #ecf3ec; --ok-line: #00a91c; --ok-ink: #446017;
  /* warn-ink is the USWDS gold darkened one step: the stock #8a7500 measures
     4.07:1 on the warn background, under the 4.5:1 AA bar at badge size. */
  --warn-bg: #faf3d1; --warn-line: #ffbe2e; --warn-ink: #6b5a00;
  --err-bg: #f4e3db; --err-line: #d54309; --err-ink: #8c2a08;
  --info-bg: #e7f6f8; --info-line: #009ec1; --info-ink: #07648d;
}

* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink); background: var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px; line-height: 1.5;
}
.container { max-width: 44rem; margin: 0 auto; padding: 0 1rem; }

.site-header { background: var(--primary-dark); color: #fff; padding: 0.75rem 0; }
.site-header .container { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.site-title { color: #fff; font-weight: 700; font-size: 1.25rem; text-decoration: none; }
.site-tag { color: #d9e8f6; font-size: 0.9rem; }
main.container { padding-top: 1.5rem; padding-bottom: 2rem; }
.site-footer { color: var(--muted); font-size: 0.9rem; border-top: 1px solid var(--border);
  margin-top: 2rem; padding-top: 1rem; padding-bottom: 2rem; }

h1 { font-size: 1.75rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.3rem; margin: 1.75rem 0 0.5rem; }
.lead { color: var(--muted); margin-top: 0; }
a { color: var(--primary); }
.back { display: inline-block; margin-bottom: 1rem; }
.batch-cta { margin-top: 1.25rem; }

/* form */
.card { border: 1px solid var(--border); border-radius: 0.25rem; padding: 1.25rem;
  background: var(--bg-subtle); }
label { display: block; font-weight: 600; margin: 1rem 0 0.25rem; }
label:first-child { margin-top: 0; }
input[type=text], input[type=file], select {
  width: 100%; min-height: 44px; font-size: 1rem; padding: 0.6rem; border: 1px solid #565c65;
  border-radius: 0.25rem; background: #fff;
}
.checkbox { display: flex; align-items: center; gap: 0.5rem; }
.checkbox input[type=checkbox] { width: 1.25rem; height: 1.25rem; }
input:focus, select:focus, button:focus, a:focus { outline: 0.25rem solid #2491ff; outline-offset: 2px; }
button {
  margin-top: 1.25rem; min-height: 44px; padding: 0.6rem 1.4rem; font-size: 1.05rem;
  font-weight: 600; color: #fff; background: var(--primary); border: 0;
  border-radius: 0.25rem; cursor: pointer;
}
button:hover { background: var(--primary-dark); }

/* submit-guard progress (upload forms). Hidden until the guard marks the form
   busy. Keyframes rather than a transition: an element revealed from
   display:none begins its animation on reveal, no reflow-ordering trick.
   The fill is duration-honest — a deployed single check measures 3.4-4.6 s,
   so it takes ~4 s to reach 90% and holds there until the response lands. */
.progress { display: none; margin-top: 1rem; }
form.is-busy .progress { display: block; }
.progress__track { height: 0.5rem; background: var(--border); border-radius: 999px;
  overflow: hidden; }
.progress__fill { height: 100%; width: 0; background: var(--primary); }
form.is-busy .progress__fill { animation: progress-fill 4s ease-out forwards; }
@keyframes progress-fill { from { width: 0; } to { width: 90%; } }
.progress__note { font-size: 0.85rem; color: var(--muted); margin: 0.4rem 0 0; }

/* alert (verdict banner) */
.alert { border-left: 0.5rem solid; padding: 1rem 1.25rem; margin: 0.5rem 0 1rem;
  border-radius: 0 0.25rem 0.25rem 0; }
.alert__heading { font-weight: 700; font-size: 1.2rem; margin: 0 0 0.25rem; }
.alert p { margin: 0; }
.alert--pass { background: var(--ok-bg); border-color: var(--ok-line); }
.alert--pass .alert__heading { color: var(--ok-ink); }
.alert--needs_review { background: var(--warn-bg); border-color: var(--warn-line); }
.alert--needs_review .alert__heading { color: var(--warn-ink); }
.alert--fail { background: var(--err-bg); border-color: var(--err-line); }
.alert--fail .alert__heading { color: var(--err-ink); }
.alert--info { background: var(--info-bg); border-color: var(--info-line); }
.alert--info .alert__heading { color: var(--info-ink); }

/* findings */
.findings { list-style: none; padding: 0; margin: 0; }
.finding { border: 1px solid var(--border); border-left: 0.375rem solid var(--border);
  border-radius: 0.25rem; padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
.finding--pass { border-left-color: var(--ok-line); }
.finding--needs_review { border-left-color: var(--warn-line); }
.finding--fail { border-left-color: var(--err-line); }
.finding--not_evaluable { border-left-color: var(--muted); }
.finding__head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.badge { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.15rem 0.5rem; border-radius: 0.25rem; border: 1px solid; white-space: nowrap; }
.badge--pass { color: var(--ok-ink); border-color: var(--ok-line); background: var(--ok-bg); }
.badge--needs_review { color: var(--warn-ink); border-color: var(--warn-line); background: var(--warn-bg); }
.badge--fail { color: var(--err-ink); border-color: var(--err-line); background: var(--err-bg); }
.badge--not_evaluable { color: var(--muted); border-color: var(--muted); background: var(--bg-subtle); }
.finding__title { font-weight: 600; }
.finding__cite { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.finding__detail { margin: 0.5rem 0 0; }

/* warning text differences */
.diff { margin-top: 0.75rem; padding: 0.75rem; background: var(--bg-subtle); border-radius: 0.25rem; }
.diff__label { font-weight: 600; margin: 0 0 0.4rem; }
.diff ul { margin: 0; padding-left: 1.25rem; }
.diff li { margin: 0.2rem 0; }
.diff .expected { text-decoration: line-through; }
.diff .found { text-decoration: underline; }

/* batch */
.hint { font-size: 0.85rem; color: var(--muted); margin: 0.4rem 0 0; }
.summary { font-weight: 600; margin: 0.25rem 0 1rem; }
.batch-controls { display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.filters { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.chip { min-height: 44px; padding: 0.35rem 0.85rem; font-size: 0.9rem; background: #fff;
  color: var(--primary); border: 1px solid var(--primary); border-radius: 999px; cursor: pointer; }
.chip--on { background: var(--primary); color: #fff; }
.csv-link { font-weight: 600; white-space: nowrap; }
table.results { width: 100%; border-collapse: collapse; }
table.results th, table.results td { text-align: left; padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border); vertical-align: top; }
table.results th { font-size: 0.85rem; color: var(--muted); }

/* collapsed preview of the uploaded label (single-label result) */
.label-preview { margin-top: 1.5rem; }
.label-preview summary { cursor: pointer; font-weight: 600; color: var(--primary);
  padding: 0.6rem 0; }
.label-preview__img { max-width: 100%; height: auto; margin-top: 0.5rem;
  border: 1px solid var(--border); border-radius: 0.25rem; }

.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; }