:root {
  color-scheme: light dark;
  --paper: #faf9f7;
  --ink: #1a1a1a;
  --muted: #5a574f;
  --accent: #8a4b00;
  --line: #d9d6d0;
  --card: #fff;
  /* Spacing scale: every margin, gap and block padding between elements uses one of these. */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14141a;
    --ink: #e8e6e1;
    --muted: #a8a49b;
    --accent: #f0a35a;
    --line: #32323c;
    --card: #1b1b22;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: var(--space-5) var(--space-3) var(--space-6);
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--accent); }
main { max-width: 46rem; margin: 0 auto; }
h1 { font-size: 1.9rem; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: var(--space-5) 0 var(--space-2); }
.topbar { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-1); }
.picker { margin: 0; display: flex; align-items: center; gap: var(--space-2); font-size: .85rem; color: var(--muted); }
.picker label { font-weight: 400; margin: 0; }
select {
  font: inherit; font-size: .9rem; padding: .35rem .5rem; min-height: 2.25rem;
  color: inherit; background: var(--card);
  border: 1px solid var(--line); border-radius: .3rem;
}
.lede { color: var(--muted); margin: 0 0 var(--space-5); }
label { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.hint { color: var(--muted); font-size: .9rem; margin: 0 0 var(--space-2); }
textarea {
  width: 100%; min-height: 7rem; padding: .75rem;
  font: inherit; color: inherit; background: var(--card);
  border: 1px solid var(--line); border-radius: .4rem; resize: vertical;
}
select, textarea { border-color: var(--muted); }
textarea::placeholder { color: var(--muted); opacity: 1; }
.row { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); flex-wrap: wrap; }
button {
  font: inherit; font-weight: 600; padding: .6rem 1.2rem; min-height: 2.75rem;
  color: var(--paper); background: var(--ink);
  border: 0; border-radius: .4rem; cursor: pointer;
}
button[disabled], button[aria-disabled="true"] { background: var(--muted); cursor: default; }
.count { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.count.over { color: var(--accent); font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.promise { margin: var(--space-5) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.promise a { color: inherit; }
#out { margin-top: var(--space-5); }
#out:empty { margin: 0; }
.banner {
  padding: var(--space-3); border: 1px solid var(--line); border-inline-start: 4px solid var(--accent);
  border-radius: .3rem; background: var(--card); margin-bottom: var(--space-4);
}
.banner p { margin: var(--space-2) 0 0; color: var(--muted); }
.banner strong { color: var(--ink); }
ul.findings { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
li.finding {
  padding: var(--space-3); background: var(--card);
  border: 1px solid var(--line); border-inline-start: 4px solid var(--line); border-radius: .3rem;
}
li.finding.lead { border-inline-start-color: var(--accent); }
li.finding h2 { margin: 0 0 var(--space-1); font-size: 1.05rem; }
li.finding p { margin: 0; color: var(--muted); }
li.finding p.fix {
  margin-top: var(--space-2); padding-inline-start: .75rem; color: var(--ink);
  border-inline-start: 2px solid var(--accent);
}
blockquote.echo {
  margin: var(--space-3) 0 0; padding: .6rem .9rem; border-inline-start: 3px solid var(--line);
  color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere;
}
details { margin-top: var(--space-4); color: var(--muted); font-size: .9rem; }
summary { cursor: pointer; padding: .3rem 0; }
dl.factors { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); margin: var(--space-2) 0 0; }
dt { font-weight: 600; color: var(--ink); }
dd { margin: 0; font-variant-numeric: tabular-nums; }
footer { max-width: 46rem; margin: var(--space-6) auto 0; padding-top: var(--space-3); border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
footer a { color: inherit; }
footer .support { display: flex; width: fit-content; align-items: center; gap: var(--space-1); margin-top: var(--space-2); padding: var(--space-1) var(--space-3); border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); text-decoration: none; }
footer .support:hover { background: var(--accent); color: var(--paper); }

[hidden] { display: none !important; }
::selection { background: var(--ink); color: var(--paper); }
textarea, input { caret-color: var(--accent); }
button:not([disabled], [aria-disabled="true"]):hover { filter: brightness(.88); }
.mode-picker { display: flex; gap: var(--space-2); margin: 0 0 var(--space-4); flex-wrap: wrap; }
.mode-picker button { background: transparent; color: var(--muted); border: 1px solid var(--muted); }
.mode-picker button[aria-pressed="true"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.mode-picker button:disabled { opacity: .65; }
.drop-zone { padding: var(--space-3); border: 2px dashed var(--line); border-radius: .5rem; }
.drop-zone.dragging { border-color: var(--accent); background: var(--card); }
.drop-hint { margin: var(--space-2) 0 0; font-weight: 600; color: var(--accent); }
.drop-zone button:disabled { opacity: .65; cursor: default; }
#file-export:not(:empty) + #file-progress:not(:empty) { margin-top: var(--space-3); }
.file-action .hint { margin: var(--space-2) 0 0; }
.file-name { margin: var(--space-4) 0; }
.file-name label { font-size: .9rem; }
.file-name input { width: 100%; max-width: 24rem; padding: .55rem .7rem; font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--muted); border-radius: .3rem; }
.file-summary { font-weight: 600; margin: var(--space-3) 0 0; }
#file-export .prompt-panel { border-top: 0; margin-top: 0; padding-top: 0; }
.file-details { margin-top: var(--space-5); padding-top: var(--space-2); border-top: 1px solid var(--line); color: var(--ink); font-size: 1rem; }
.file-details > summary { font-weight: 600; padding: .6rem 0; }
#file-source { min-height: 13rem; }
.file-error { color: var(--accent); }
.file-report { margin-top: var(--space-5); }
.file-report > h2 { margin-top: 0; }
.coverage { font-weight: 600; font-variant-numeric: tabular-nums; }
button.secondary { color: var(--ink); background: var(--paper); border: 1px solid var(--muted); }
.unit-list { margin-top: var(--space-4); }
/* An option, not a heading. The box sits on the first line of a wrapped label; one line still fills the 2.75rem target. */
.unit-filter { display: flex; align-items: flex-start; gap: var(--space-2); min-height: 2.75rem; padding-block: calc((2.75rem - 1lh) / 2); margin: 0; font-weight: 400; cursor: pointer; }
.unit-filter input { flex: none; width: 1.25rem; height: 1.25rem; margin: calc((1.55rem - 1.25rem) / 2) 0 0; accent-color: var(--accent); cursor: pointer; }
/* Set apart from the intake box and close to the primary action it changes. */
.file-option { margin: var(--space-4) 0 var(--space-2); }
/* A group of options with a question for its legend, styled like the field labels. */
.file-readers { border: 0; padding: 0; min-width: 0; }
.file-readers legend { padding: 0; font-weight: 600; margin-bottom: var(--space-2); }
.instruction-unit { border-top: 1px solid var(--line); margin-top: 0; padding: var(--space-1) 0; }
.instruction-unit > summary { padding: .75rem 0; color: var(--ink); }
.unit-location { font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--muted); margin-inline-end: var(--space-2); }
.unit-state { font-size: .8rem; font-weight: 600; }
.unit-state.flagged { color: var(--accent); }
.unit-title { display: block; margin-top: var(--space-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-headlines { display: block; margin-top: var(--space-2); padding-inline-start: .75rem; border-inline-start: 2px solid var(--accent); }
.unit-headline { display: block; font-size: .9rem; }
.unit-next { display: block; font-size: .85rem; color: var(--muted); margin-bottom: var(--space-1); }
.unit-content { padding: 0 0 var(--space-3); }
.source-excerpt { white-space: pre-wrap; overflow-wrap: anywhere; font: .85rem/1.6 ui-monospace, Consolas, monospace; color: var(--ink); background: var(--card); padding: .8rem; border: 1px solid var(--line); border-radius: .3rem; }
.unit-content .findings { gap: .75rem; }
.unit-content li.finding { background: transparent; border: 0; border-radius: 0; padding: var(--space-2) 0; }
.prompt-panel:empty { display: none; }
.prompt-panel { border-top: 1px solid var(--line); margin-top: var(--space-5); padding-top: var(--space-3); }
.prompt-panel h2 { margin: 0 0 var(--space-2); }
.prompt-panel > button { margin-top: var(--space-2); }
.copy-status { margin-top: var(--space-2); }
.prompt-preview { margin-top: var(--space-2); }
.prompt-text { min-height: 18rem; font: .85rem/1.55 ui-monospace, Consolas, monospace; }
.factors dd { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .mode-picker button { flex: 1 1 9rem; }
  .file-report .row > button, .file-action > button { width: 100%; }
  dl.factors { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.table-scroll { overflow-x: auto; margin: var(--space-3) 0; }
.table-scroll table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.table-scroll caption { text-align: start; font-weight: 600; margin-bottom: var(--space-2); }
.table-scroll th, .table-scroll td { padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.table-scroll thead th { color: var(--muted); font-weight: 600; }
@media (max-width: 480px) { .table-scroll table { font-size: .8rem; } .table-scroll th, .table-scroll td { padding: var(--space-1); } }