/* css/setup-sheet.css — the setup sheet, laid out as the car.
 *
 * ONE stylesheet for ONE renderer (api/setup-sheet.php). The same markup is shown on the beta
 * Car page, which links this file, and in the standalone shareable sheet, which inlines it.
 * A second copy of either is how the gearbox ended up with two shapes.
 *
 * The tokens below default to the beta palette, so the shared sheet and the in-app sheet look
 * like the same document. A host that wants different colours redefines the tokens; it must not
 * restyle .ss-* rules directly, or the two drift.
 */
.ss {
  --ss-page:   #f7f1e7;
  --ss-panel:  #ffffff;
  --ss-axle:   #faf6ef;
  --ss-ink:    #1f1f1f;
  --ss-muted:  #6e6860;
  --ss-line:   #d9d1c4;
  --ss-flag:   #8c4b14;
  --ss-radius: 10px;
  color: var(--ss-ink);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  line-height: 1.45;
}

/* ── header: one version token, one context line, what was fitted ──────────────────────── */
.ss-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ss-head h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.ss-state {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--ss-line); border-radius: 999px; padding: 3px 8px; color: var(--ss-muted);
  white-space: nowrap;
}
.ss-ctx { font-size: 12px; color: var(--ss-muted); margin-top: 2px; }
.ss-fitted {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px;
  border: 1px solid var(--ss-line); border-radius: var(--ss-radius); padding: 8px 12px; background: var(--ss-panel);
  font-size: 12px;
}
.ss-fitted .k { color: var(--ss-muted); margin-right: 5px; }
.ss-fitted .unresolved { color: var(--ss-flag); }
.ss-review { margin-top: 8px; font-size: 12.5px; }
.ss-review .k {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ss-muted); margin-right: 8px;
}

/* ── the car ───────────────────────────────────────────────────────────────────────────── */
.ss-orient {
  text-align: center; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ss-muted); margin: 14px 0 6px;
}
/* The centre column carries the axle's own settings AND everything the two sides agree on, so it is
   no longer a narrow strip; it lays its rows out in two columns from 1100px up, which keeps the sheet
   about as tall as it was while the corner cards shed their duplicated rows (David, 26 Sep). */
.ss-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 0.85fr) minmax(0, 1fr);
  gap: 12px; align-items: start;
}
@media (min-width: 1100px) {
  .ss-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr) minmax(0, 1fr); }
  .ss-axle-panel .ss-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
}
.ss-corner, .ss-axle-panel {
  border: 1px solid var(--ss-line); border-radius: var(--ss-radius); padding: 12px 14px;
}
.ss-corner { background: var(--ss-panel); }
.ss-axle-panel { background: var(--ss-axle); }
.ss-corner h3, .ss-axle-panel h3 {
  margin: 0 0 8px; font-size: 13px; font-weight: 700;
  padding-bottom: 6px; border-bottom: 1px solid var(--ss-line);
}
.ss-corner h3 .pos { color: var(--ss-muted); font-weight: 600; }

/* a corner row is label left, value right; an axle row stacks so long values are not squeezed */
.ss-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 3px 0; border-bottom: 1px solid var(--ss-line);
}
.ss-row:last-child { border-bottom: 0; }
.ss-l { font-size: 11.5px; color: var(--ss-muted); }
.ss-v { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.ss-v.derived { font-weight: 600; color: var(--ss-muted); }
/* a field the record HAS but nobody has filled in: present, so it can be asked for, but out of the
   way until someone wants the whole form (.ss-all on the sheet root). */
.ss-empty { display: none; }
.ss-all .ss-empty { display: flex; }
.ss-all .ss-empty .ss-l, .ss-all .ss-empty .ss-v { opacity: .55; font-weight: 400; }
.ss-all .ss-axle-panel .ss-empty { display: flex; }
.ss-axle-panel .ss-row { flex-direction: column; align-items: stretch; gap: 1px; padding: 5px 0; }
.ss-axle-panel .ss-v { text-align: left; }
/* a value carrying a qualification: the mark points at the note below, never at a changed number */
.ss-flag { color: var(--ss-flag); font-weight: 800; }

/* ── derived figures: modest readouts, not dashboard tiles ─────────────────────────────── */
.ss-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ss-line);
}
.ss-strip .k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ss-muted); }
.ss-strip .v { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── the qualifications, next to nothing they can be mistaken for ──────────────────────── */
.ss-notes { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ss-line); }
.ss-note { font-size: 12.5px; color: var(--ss-ink); margin-top: 6px; }
.ss-note .k {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ss-muted); margin-right: 6px;
}
.ss-note.warn .k { color: var(--ss-flag); }
.ss-conv { font-size: 12px; color: var(--ss-muted); margin-top: 10px; }

/* ── narrow: the axle group goes ABOVE its pair; the two wheels stay side by side ───────── */
@media (max-width: 760px) {
  .ss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-axle-panel { grid-column: 1 / -1; }
  /* front axle, then FL beside FR; rear axle, then RL beside RR */
  .ss-front { order: 1; } .ss-fl { order: 2; } .ss-fr { order: 3; }
  .ss-rear  { order: 4; } .ss-rl { order: 5; } .ss-rr { order: 6; }
  .ss-axle-panel .ss-row { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .ss-axle-panel .ss-v { text-align: right; }
  .ss-corner, .ss-axle-panel { padding: 10px 11px; }
  .ss-l { font-size: 11px; }
}

/* ── print: the sheet is the page ──────────────────────────────────────────────────────────
 *
 * On paper this was most of a second page with half of the first one blank (David, 27 Sep: "the
 * print setup sheet is nowhere near as good as the web version"). Two causes, both of them the
 * screen design being right for a screen:
 *
 *  - the axle panel stacks its label above its value, and its two-column layout only starts at
 *    1100px, so the middle column became a tower and the grid row grew to match it — leaving a
 *    hand's width of white beside FL and FR;
 *  - cards, radii, fills and 12-14px padding, which cost paper and print as grey boxes.
 *
 * So for print the panels become ruled blocks rather than cards, every row is label-left /
 * value-right, and the axle lays its rows in two columns at any width. The target is ONE A4 page
 * for a normal setup, dense enough to read at arm's length on the garage wall.
 */
@media print {
  @page { size: A4 portrait; margin: 10mm; }
  .ss { font-size: 10px; line-height: 1.32; }
  .ss-no-print { display: none !important; }
  .ss-empty { display: none !important; }   /* paper shows what was recorded, never a list of blanks */

  /* ink, not fills: a hairline round each block reads better than a tinted card */
  .ss-corner, .ss-axle-panel {
    background: none; border: 1px solid #000; border-radius: 0; padding: 5px 7px;
    break-inside: avoid;
  }
  .ss-corner h3, .ss-axle-panel h3 { font-size: 10.5px; margin: 0 0 4px; padding-bottom: 3px; border-bottom: 1px solid #000; }
  /* An A4 content box is 718px, under the 760px narrow breakpoint, so print was getting the phone
     layout — the axle above its pair. Paper is paper: the sheet keeps the car's shape, FL / front
     axle / FR over RL / rear axle / RR, which is the whole reason it is laid out this way. */
  .ss-grid { gap: 7px; grid-template-columns: minmax(0, .93fr) minmax(0, 1.5fr) minmax(0, .93fr); }
  .ss-axle-panel { grid-column: auto; }
  .ss-fl, .ss-front, .ss-fr, .ss-rl, .ss-rear, .ss-rr { order: 0; }
  .ss-orient { margin: 8px 0 4px; }

  /* the axle stops being a tower: one line per reading, two columns of them */
  .ss-axle-panel .ss-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .ss-axle-panel .ss-row { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 8px; padding: 1.5px 0; }
  .ss-axle-panel .ss-v { text-align: right; }
  .ss-row { padding: 1.5px 0; border-bottom: 1px solid #d5d5d5; }
  /* a reading never breaks across lines: "4 mm" split after the 4 reads as two numbers */
  .ss-v { white-space: nowrap; }
  .ss-l { font-size: 9.5px; }
  .ss-axle-panel .ss-l { font-size: 9px; }   /* the axle carries the longest labels in the narrowest cells */

  /* the header and the readouts give the car back its page */
  .ss-head h2 { font-size: 15px; }
  .ss-ctx { font-size: 10px; }
  .ss-fitted { padding: 4px 7px; margin-top: 6px; gap: 3px 14px; font-size: 10px; border-color: #000; border-radius: 0; background: none; }
  .ss-strip { margin-top: 8px; padding-top: 7px; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); border-top: 1px solid #000; }
  .ss-strip .v { font-size: 12px; }
  .ss-strip .k, .ss-note .k, .ss-review .k { font-size: 8.5px; }
  .ss-notes { margin-top: 8px; padding-top: 7px; border-top: 1px solid #000; break-inside: auto; }
  .ss-note { font-size: 10px; margin-top: 3px; }
  .ss-conv { font-size: 9px; margin-top: 6px; }
  /* the car is one picture: never split a row of it across a page */
  .ss-grid { break-inside: avoid; }
}