/* PLAN.md §7. Under 100 lines by budget, not by accident: past that, the
   layout is wrong for an audience reading numeric output on a phone in a pit.

   One stylesheet for three things: the free report, the paid dossier, and the
   pages in web/. §7 asks for exactly that -- "what the user sees free and what
   they get paid look like the same document" -- and one file is also the only
   way to keep that true, since a second copy drifts the first time either side
   is touched. The reports inline it; the pages link it.

   Inlined into the reports rather than linked. A report is fetched from S3
   through a presigned URL, and a relative <link> next to one resolves without
   the signature and 403s -- so a linked stylesheet would make the free report
   and the paid dossier render unstyled everywhere they are actually read. It
   also makes a downloaded report a single self-contained file, which is what a
   builder wants to keep. */

:root {
  --bg: #000;
  --fg: #e8e8e8;     /* not #fff: it glares on OLED */
  --dim: #8a8a8a;
  --rule: #2a2a2a;
  --accent: #6cb6ff;
  --warn: #e0b64a;
  --bad: #e06c6c;
}

html { background: var(--bg); }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, sans-serif;
  line-height: 1.55;
  max-width: 70ch;
  margin: 0 auto;
  padding: 2rem 1rem 6rem;
}

h1 { font-size: 1.4rem; margin: 0 0 0.2rem; }
h2 { font-size: 1.05rem; margin: 2.5rem 0 0.6rem; border-bottom: 1px solid var(--rule); padding-bottom: 0.3rem; }
h3 { font-size: 0.95rem; margin: 1.6rem 0 0.4rem; color: var(--dim); font-weight: 600; }

a { color: var(--accent); }

.sub { color: var(--dim); margin: 0 0 1.5rem; font-size: 0.9rem; }

/* A wide table scrolls inside itself rather than making the page scroll
   sideways. The parts table is four columns and does not fit 390 px, and §7
   asks that every page work on phone portrait -- which a table whose last
   column is off the right edge does not. */
.scroll { overflow-x: auto; }

/* Numbers and ids are read in columns and compared down the page. */
table { border-collapse: collapse; width: 100%; font-size: 0.85rem; margin: 0.5rem 0; }
th, td { border: 1px solid var(--rule); padding: 0.3rem 0.5rem; text-align: left; vertical-align: top; }
th { color: var(--dim); font-weight: 600; }
td.n, th.n { font-family: ui-monospace, monospace; text-align: right; white-space: nowrap; }
caption { color: var(--dim); font-size: 0.8rem; text-align: left; padding-bottom: 0.3rem; }

/* Key-value pairs, for the header blocks. Falls back to a plain list with CSS
   off, which is why it is a <dl> and not a two-column table. */
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 1rem; margin: 0.5rem 0; font-size: 0.85rem; }
dt { color: var(--dim); }
dd { margin: 0; font-family: ui-monospace, monospace; }

/* The sheet. A white drawing on a dark page, deliberately: it is an
   engineering projection, and inverting it would leave the STEP colours
   reading against the wrong ground. */
.sheet { background: #fff; border-radius: 2px; margin: 0.6rem 0; }
.sheet svg { display: block; width: 100%; height: auto; }

/* Selection. Every path carries data-part, so highlighting is a class on the
   paths of one part -- no second copy of the geometry, no overlay to keep in
   register with the drawing underneath it. */
.sheet path[data-part] { cursor: pointer; }
.sheet.picking path.dim { opacity: 0.18; }
.sheet path.pick { stroke: #c81e1e !important; stroke-width: 2.4 !important; opacity: 1 !important; }

/* The approach arrow, drawn per view into the group that says how it projects. */
.sheet .approach { stroke: #c81e1e; stroke-width: 2.2; fill: none; }
.sheet .approach-head { fill: #c81e1e; stroke: none; }

ul.notes { padding-left: 1.2rem; margin: 0.4rem 0; }
ul.notes li { margin: 0.2rem 0; }

.warn { color: var(--warn); }
.bad { color: var(--bad); }
.dim { color: var(--dim); }

/* Prose sections. Wider line-height than the tables; still one column. */
.prose p { margin: 0.6rem 0; }
.prose.absent { color: var(--dim); font-style: italic; }

/* Forms. Everything stacks: label above control, one per line, full width.
   A two-column form is a layout decision that buys nothing on a phone and
   costs a media query. */
label { display: block; margin: 0.9rem 0 0.2rem; color: var(--dim); font-size: 0.85rem; }
input, select, textarea, button {
  font: inherit; font-size: 0.9rem; width: 100%; box-sizing: border-box;
  background: #111; color: var(--fg); border: 1px solid var(--rule);
  border-radius: 2px; padding: 0.4rem 0.5rem;
}
textarea { min-height: 4rem; resize: vertical; }
select { font-family: ui-monospace, monospace; }

/* In a table cell a control is the cell: no label, no margin, no border of its
   own, because the cell already has one. */
td select, td input { margin: 0; border: none; background: transparent; padding: 0.15rem; }

button {
  margin-top: 1.5rem; padding: 0.6rem; cursor: pointer;
  background: var(--accent); color: #000; border: none; font-weight: 600;
}
button:disabled { background: var(--rule); color: var(--dim); cursor: not-allowed; }

/* The selected part's row, so the table and the drawing agree. */
tr.pick td { background: #1a0d0d; }

/* One status line, for polling pages and for why submit is disabled. */
.status { color: var(--dim); font-size: 0.85rem; margin: 0.6rem 0; }
.status.bad { color: var(--bad); }

/* The gate progress list. A plain list, no spinner: each gate is a line that
   says pending, passed or refused. */
ul.gates { list-style: none; padding: 0; font-family: ui-monospace, monospace; font-size: 0.85rem; }
ul.gates li::before { content: "\00b7\00a0"; color: var(--dim); }
ul.gates li.ok::before { content: "\2713\00a0"; color: var(--accent); }
ul.gates li.no::before { content: "\2717\00a0"; color: var(--bad); }

footer { margin-top: 4rem; border-top: 1px solid var(--rule); padding-top: 0.8rem; color: var(--dim); font-size: 0.8rem; }
footer code { word-break: break-all; }

@media (max-width: 40rem) {
  body { padding: 1rem 0.7rem 4rem; }
  table { font-size: 0.78rem; }
  dl { grid-template-columns: 1fr; gap: 0 0; }
  dt { margin-top: 0.4rem; }
}