:root {
  --paper: #eee8d7;
  --ink: #172221;
  --teal: #1c5e5a;
  --red: #bb382f;
  --amber: #e1a436;
  --line: rgba(23, 34, 33, 0.32);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(rgba(238, 232, 215, 0.92), rgba(238, 232, 215, 0.92)),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(23, 34, 33, 0.08) 3px 4px),
    var(--paper);
  font-family: "Courier New", Courier, monospace;
}

.office-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 42px 0 80px; }
.office-header { max-width: 860px; }
.home-link {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: 18px;
  color: var(--ink);
  font: 700 .76rem/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.kicker, .plate-number { margin: 0 0 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.13em; }
h1 { margin: 0; max-width: 780px; font: 800 clamp(3rem, 9vw, 7.6rem)/0.81 Arial Black, Impact, sans-serif; letter-spacing: -0.075em; text-transform: uppercase; }
h2 { margin: 4px 0 8px; font: 800 clamp(1.35rem, 3vw, 2.1rem)/1 Arial Black, Impact, sans-serif; text-transform: uppercase; }
.invitation { max-width: 700px; margin: 30px 0 12px; font: italic 1.35rem/1.35 Georgia, serif; }
.boundary { max-width: 760px; padding-left: 15px; border-left: 7px solid var(--amber); line-height: 1.5; }

.intake, .pipeline, .receipt, .provenance { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px 34px; margin-top: 48px; padding: 24px; border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--teal); background: rgba(255,255,255,0.23); }
.stamp { display: inline-block; margin: 0 0 8px; padding: 5px 8px; color: var(--paper); background: var(--red); font-weight: 800; transform: rotate(-1deg); }
.file-control, .target-control, .effort-control { display: grid; gap: 8px; align-content: center; font-weight: 700; }
.file-control input { width: 100%; padding: 12px; border: 1px dashed var(--ink); background: rgba(255,255,255,0.35); font: inherit; }
.target-control input { accent-color: var(--teal); }
.effort-control select { min-height: 44px; padding: 8px 10px; border: 1px solid var(--ink); color: var(--ink); background: #f7f3e8; font: inherit; }
.effort-control small { font-weight: 400; line-height: 1.35; }
.output-control { display: grid; gap: 8px; margin: 0; padding: 12px; border: 1px solid var(--line); }
.output-control legend { padding: 0 6px; font-weight: 700; }
.output-control label { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start; padding: 7px 8px; cursor: pointer; }
.output-control label:has(input:checked) { background: rgba(28, 94, 90, 0.1); outline: 1px solid var(--teal); }
.output-control input { margin-top: 3px; accent-color: var(--teal); }
.output-control span { display: grid; gap: 3px; }
.output-control small { font-weight: 400; line-height: 1.35; }
.control-disabled { opacity: 0.48; }
button, .download { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 12px 16px; color: white; border: 0; background: var(--teal); font: 800 0.88rem/1 "Courier New", monospace; text-transform: uppercase; text-decoration: none; cursor: pointer; }
button:disabled { opacity: 0.42; cursor: not-allowed; }
.run-controls { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.cancel { background: var(--red); }
.status { margin: 0; padding: 12px 14px; border: 1px solid var(--line); background: rgba(255,255,255,0.3); line-height: 1.4; }
.mode-note { margin: 0; color: #27413f; font-size: 0.8rem; line-height: 1.45; }
.status[data-kind="error"] { border-color: var(--red); color: #761d19; }
.status[data-kind="ready"] { border-color: var(--teal); }

.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }
.comparison article { min-width: 0; padding: 12px; border: 1px solid var(--ink); background: #f7f3e8; }
canvas { display: block; width: 100%; height: auto; min-height: 120px; max-height: 520px; object-fit: contain; background: repeating-conic-gradient(#ddd 0 25%, #f7f7f7 0 50%) 0 / 20px 20px; }
.facts { min-height: 3em; margin: 12px 0 0; font-size: 0.78rem; line-height: 1.45; }
.receipt { grid-template-columns: 1fr 1fr; box-shadow: 8px 8px 0 var(--red); }
.provenance { grid-template-columns: 1fr 1.25fr; box-shadow: 8px 8px 0 var(--amber); }
.pipeline { grid-template-columns: minmax(220px, 0.7fr) 1.3fr; box-shadow: 8px 8px 0 var(--teal); }
.pipeline progress { width: 100%; height: 18px; margin-top: 18px; accent-color: var(--teal); }
.pipeline-stages { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; counter-reset: stage; }
.pipeline-stages li { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 9px 11px; border: 1px solid var(--line); background: rgba(255,255,255,0.27); counter-increment: stage; }
.pipeline-stages li::before { content: counter(stage, decimal-leading-zero); grid-row: 1 / 3; color: var(--teal); font-weight: 800; }
.pipeline-stages span { font-weight: 700; }
.pipeline-stages small { text-align: right; }
.pipeline-stages li[data-state="active"] { border-color: var(--amber); box-shadow: inset 5px 0 var(--amber); }
.pipeline-stages li[data-state="done"] { border-color: var(--teal); box-shadow: inset 5px 0 var(--teal); }
.pipeline-method { grid-column: 1 / -1; border-top: 1px dashed var(--line); }
.pipeline-method summary { padding: 14px 0 8px; color: var(--teal); font-weight: 800; cursor: pointer; }
.pipeline-method p { max-width: 920px; margin: 8px 0 0; line-height: 1.55; }
.pipeline-method a { color: inherit; font-weight: 800; }
.provenance p { line-height: 1.55; }
.provenance-copy { padding-left: 22px; border-left: 1px dashed var(--line); }
.source-link { display: inline-block; margin-top: 8px; color: #123f3c; font-weight: 800; text-underline-offset: 3px; }
.receipt-facts { display: grid; gap: 1px; margin: 0; background: var(--line); }
.receipt-facts div { padding: 10px 12px; background: var(--paper); }
.receipt-facts dt { margin-bottom: 4px; color: var(--teal); font-weight: 800; text-transform: uppercase; }
.receipt-facts dd { margin: 0; font-size: 0.78rem; line-height: 1.45; }
.search-log { grid-column: 1 / -1; margin: 0; padding-left: 3em; columns: 2; column-gap: 44px; font-size: 0.78rem; line-height: 1.7; }
.search-log li { break-inside: avoid; margin-bottom: 4px; }
.search-log .frontier-log { color: #123f3c; font-weight: 700; }
.download-shelf { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.receipt-download { color: var(--ink); outline: 2px solid var(--teal); outline-offset: -2px; background: transparent; }

@media (max-width: 720px) {
  .office-shell { width: min(100% - 20px, 1180px); padding-top: 24px; }
  .intake, .pipeline, .receipt, .provenance, .comparison { grid-template-columns: 1fr; }
  .provenance-copy { padding: 18px 0 0; border-top: 1px dashed var(--line); border-left: 0; }
  .run-controls { grid-template-columns: 1fr; }
  .download-shelf { justify-content: stretch; }
  .download { flex: 1 1 100%; }
  .search-log { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}