/* Restyle 1b, "the full sheet" (2026-11-03): the whole page is one engineering
   drawing. Paper on a grey desk, ink-blue lines, a condensed headline face and a
   mono face for everything else. The 3D page adds its own rules in 3d/styles.css.
   Layout: .sheet > .in is a CSS grid with named areas; on phones (max-width 640px)
   the same items stack in one column and the revision table moves under the board. */

/* Vendored fonts (public/vendor/fonts/README.md), latin subsets only. */
@font-face { font-family: 'Barlow Condensed'; font-weight: 500; font-display: swap; src: url(vendor/fonts/barlow-condensed-500.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url(vendor/fonts/barlow-condensed-700.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url(vendor/fonts/ibm-plex-mono-400.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-display: swap; src: url(vendor/fonts/ibm-plex-mono-600.woff2) format('woff2'); }
@font-face { font-family: 'Caveat'; font-weight: 600; font-display: swap; src: url(vendor/fonts/caveat-600.woff2) format('woff2'); }

:root {
  --ink: #1c2733;        /* lines and text */
  --paper: #fdfcf9;      /* the sheet */
  --desk: #d7d9d6;       /* the page behind the sheet */
  --line: #8e9aa6;       /* table rules */
  --faint: #c9d0d6;      /* lighter rules, slider tracks */
  --muted: #4b5866;      /* captions and secondary text */
  --acc: #0f6e8c;        /* teal: good grades, the signature */
  --acc2: #c8472f;       /* red: difficulty word, poor grades; also the true-centre marker in render.js */
  --hilite: #e4f0f4;     /* the current revision row, your register row */
  --head: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --sig: 'Caveat', 'Segoe Script', cursive;
}
* { box-sizing: border-box; }
html { background: var(--desk); }
body {
  margin: 0;
  padding: 24px 12px 32px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
}
button { font: inherit; color: inherit; cursor: pointer; }
table { border-collapse: collapse; font-variant-numeric: tabular-nums; }

/* ---- the sheet ---- */
.sheet {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.sheet::before { /* the inner frame */
  content: "";
  position: absolute;
  inset: 14px;
  border: 1.5px solid var(--ink);
  pointer-events: none;
}
/* Zone letters along the frame, decoration only. */
.zones {
  position: absolute;
  display: flex;
  justify-content: space-around;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--muted);
  pointer-events: none;
}
.zones-top { left: 14px; right: 14px; top: 2px; }
.zones-bottom { left: 14px; right: 14px; bottom: 2px; }
.zones-left { top: 14px; bottom: 14px; left: 4px; flex-direction: column; }
.zones-right { top: 14px; bottom: 14px; right: 4px; flex-direction: column; }

.in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name rev"
    "label tabs"
    "drawing drawing"
    "report report"
    "foot foot";
  gap: 14px;
  align-items: start;
}
.name { grid-area: name; }
.rev { grid-area: rev; }
.viewbar-label { grid-area: label; }
.viewbar-right { grid-area: tabs; }
.drawing { grid-area: drawing; }
.report { grid-area: report; }
.foot { grid-area: foot; }

/* ---- masthead ---- */
.name h1 {
  margin: 0;
  font-family: var(--head);
  font-weight: 700;
  font-size: 44px;
  line-height: 0.9;
  letter-spacing: 0.5px;
}
.name small {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--acc);
}

/* ---- tables with a caption and ink border (revisions, parts, report, register) ---- */
.cap, caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 3px;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--muted);
}
.rev {
  min-width: 250px;
  border: 1px solid var(--ink);
  font-size: 10px;
}
.rev th, .rev td {
  padding: 3px 7px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}
.rev th { font-weight: 400; font-size: 9px; letter-spacing: 1px; color: var(--muted); }
.rev th:last-child, .rev td:last-child { border-right: 0; }
.rev tbody tr:last-child td { border-bottom: 0; }
.rev tr.cur td { background: var(--hilite); }
.rev tr.pend td { color: var(--faint); }
/* After round 3 the rows are the review buttons. */
.rev tr.pick { cursor: pointer; }
.rev tr.pick:hover td { background: #eef3f5; }
.rev tr.pick.cur td { background: var(--hilite); }
.rev tr.pick:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.pass { color: var(--acc); }
.fail { color: var(--acc2); }

/* ---- view bar: round label left, tabs right ---- */
.viewbar-label, .viewbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-size: 11px;
  letter-spacing: 1px;
}
.viewbar-right { justify-content: flex-end; }
.round-label em { font-style: normal; font-weight: 600; color: var(--acc2); }
.tabs { display: inline-flex; align-items: center; gap: 4px; }
.tabs .tabs-word { margin-right: 4px; }
.tab, .switch {
  padding: 2px 10px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 11px;
  line-height: 1.4;
}
.tab:hover, .switch:hover { background: #eef3f5; }
.tab.on, .switch[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
/* The TILT switch sits at the top right of the inspection report, in its heading row. */
.inspection .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.inspection .head .switch { margin-top: -3px; }

/* ---- the drawing: board (or views) with dimension lines, and the side column ---- */
.drawing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 18px;
  align-items: start;
}
.dim { position: relative; padding: 22px 0 0 24px; }
/* Dimension lines: a box whose top and two side borders draw the line and its end ticks. */
.dim::before { content: ""; position: absolute; top: 6px; left: 24px; right: 0; height: 6px; border: 1px solid var(--ink); border-bottom: 0; }
.dim::after { content: ""; position: absolute; left: 6px; top: 22px; bottom: 0; width: 6px; border: 1px solid var(--ink); border-right: 0; }
.dim-label {
  position: absolute;
  z-index: 1;
  padding: 0 4px;
  font-size: 9px;
  color: var(--muted);
  background: var(--paper);
}
.dim-top { top: 0; left: calc(50% + 12px); translate: -50% 0; }
.dim-left { left: -2px; top: calc(50% + 11px); rotate: -90deg; }
.board-wrap { display: block; width: 100%; }
#board {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  outline: 1px solid var(--ink);
  background: #fff;
  cursor: crosshair;
  touch-action: manipulation;
}
#board.played { cursor: not-allowed; }
.confirm {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
}
.confirm:hover { background: #2e3f50; }
.confirm[hidden] { display: none; }

.side { display: grid; gap: 14px; }
/* Material schedule (2D) and parts list (3D): a bordered list with a swatch per row. */
.sched { border: 1px solid var(--ink); font-size: 10.5px; }
.sched-head, .sched-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 4px 6px;
  border-bottom: 1px solid var(--line);
}
.sched-head { font-size: 9px; letter-spacing: 1px; color: var(--muted); }
.sched-row:last-child { border-bottom: 0; }
.sched-row .num { text-align: right; }
.swatch { display: inline-block; width: 22px; height: 11px; border: 1px solid var(--ink); vertical-align: -1px; }
.notes { font-size: 10px; line-height: 1.5; color: var(--muted); text-transform: uppercase; }
.notes b { display: block; margin-bottom: 2px; font-weight: 600; letter-spacing: 1px; color: var(--ink); }
/* Drawing convention: the numbers sit in their own column and a wrapped note lines up
   with its first word (hanging indent), so the numbers stay in a clean column. */
.notes ol { margin: 0; padding: 0; list-style: none; counter-reset: note; }
.notes li { position: relative; padding-left: 2em; counter-increment: note; }
.notes li::before { content: counter(note) "."; position: absolute; left: 0; }

/* ---- after round 3: inspection report and register ---- */
.report {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--ink);
}
.report[hidden] { display: none; }
.report > div { min-width: 0; padding: 10px 12px; }
.report > div:first-child { border-right: 1px solid var(--ink); }
.report h2 { margin: 0 0 6px; font-size: 9px; font-weight: 400; letter-spacing: 2px; color: var(--muted); }
.report table { width: 100%; font-size: 10.5px; }
.report th, .report td { padding: 3px 5px; border-bottom: 1px solid var(--faint); text-align: left; }
.report th { font-weight: 400; font-size: 9px; letter-spacing: 1px; color: var(--muted); }
.report tr:last-child td { border-bottom: 0; }
.report .num, .report th.num { text-align: right; white-space: nowrap; }
.report .stat { margin: 8px 0 0; font-size: 10px; color: var(--muted); }
.report .stat + .stat { margin-top: 2px; }
.report .col-name { overflow-wrap: anywhere; }
.report .anonymous { color: var(--muted); font-style: italic; }
.report tr.you td { background: var(--hilite); font-weight: 600; }
.report .gap-row td { padding: 1px; text-align: center; color: var(--muted); }
.muted { color: var(--muted); }

/* Histogram of everyone's totals, folded away by default: 10 bars, the tallest 60 px. */
.dist { margin-top: 10px; font-size: 10px; }
.dist h2 { margin: 0; }
.histogram { padding: 8px 2px 0; }
.histo-bars, .histo-labels { display: flex; gap: 4px; }
.histo-bars { height: 60px; align-items: flex-end; border-bottom: 1px solid var(--line); }
.histo-slot { flex: 1; }
.histo-bar { background: var(--acc); }
.histo-bar.empty { background: none; }
.histo-label { flex: 1; margin-top: 3px; font-size: 8px; color: var(--muted); white-space: nowrap; text-align: center; }

/* ---- foot: actions and the title block ---- */
.foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 10px; }
.btn {
  padding: 6px 12px;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
}
.btn:hover { background: #2e3f50; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: #eef3f5; }
.share-msg { color: var(--muted); }
.share-text { margin: 0; width: 100%; font: inherit; font-size: 10px; white-space: pre-wrap; }

.title {
  display: grid;
  grid-template-columns: repeat(4, auto);
  min-width: 330px;
  overflow: hidden; /* clips the outer cell rules (box-shadow below) */
  border: 1.5px solid var(--ink);
  font-size: 9.5px;
}
.title > div {
  padding: 4px 8px;
  box-shadow: 1px 1px 0 0 var(--line); /* a right and a bottom rule per cell */
  white-space: nowrap;
}
.title .wide { grid-column: span 2; }
.title b { display: block; font-size: 8px; font-weight: 400; letter-spacing: 1px; color: var(--muted); }
.title .big { font-family: var(--head); font-weight: 700; font-size: 26px; line-height: 1; }
.title .sig { font-family: var(--sig); font-size: 18px; line-height: 1; color: var(--acc); }
/* DRAWN BY is a button: click it to set or change the name. */
.name-btn {
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px dotted var(--acc);
}
.name-btn:hover { color: var(--ink); }
.name-btn small { font-family: var(--mono); font-size: 8px; color: var(--muted); margin-left: 4px; }
.nickname-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-family: var(--mono); font-size: 10px; }
.nickname-input {
  width: 9em;
  padding: 2px 4px;
  font: inherit;
  font-size: 10px;
  border: 1px solid var(--line);
  background: #fff;
}
.nickname-save { padding: 2px 8px; font-size: 9px; letter-spacing: 1px; color: var(--paper); background: var(--ink); border: 1px solid var(--ink); }
.link-btn { padding: 0; font-size: 9px; color: var(--muted); background: none; border: 0; text-decoration: underline; }
.link-btn:hover { color: var(--ink); }

/* ---- under the sheet ---- */
.colophon {
  max-width: 900px;
  margin: 12px auto 0;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--muted);
  text-align: center;
}
.colophon a { color: inherit; }
.start-over { margin: 0 0 0 12px; }

/* Things only one layout shows. */
@media (min-width: 641px) { .phone-only { display: none !important; } }
.name small .desk-only { display: inline; }

/* ---- phones: outer border only, board at full width, one column ---- */
@media (max-width: 640px) {
  body { padding: 8px 0 24px; font-size: 12px; }
  .sheet { padding: 12px; border-left: 0; border-right: 0; box-shadow: none; }
  .sheet::before, .zones { display: none; }
  .desk-only { display: none !important; }
  .in {
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name tabs"
      "label label"
      "drawing drawing"
      "rev rev"
      "report report"
      "foot foot";
    align-items: center;
  }
  .name h1 { font-size: 26px; }
  .name small { margin-top: 2px; font-size: 9px; }
  .viewbar-right { border: 0; min-height: 0; padding: 0; justify-content: flex-end; }
  .viewbar-label { flex-wrap: wrap; justify-content: space-between; font-size: 11px; }
  .drawing { grid-template-columns: 1fr; gap: 10px; }
  .dim { padding: 18px 0 0; }
  .dim::before { left: 0; }
  .dim::after, .dim-left { display: none; }
  .dim-top { left: 50%; }
  .confirm { padding: 10px 16px; font-size: 12px; }
  .sched { font-size: 12px; }
  .sched-head { display: none; }
  .sched-rows { display: grid; grid-template-columns: 1fr 1fr; }
  .sched-row { padding: 5px 8px; border-bottom: 1px solid var(--line); }
  .sched-row:nth-child(odd) { border-right: 1px solid var(--line); }
  .sched-row:last-child, .sched-row:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  .notes { font-size: 11px; }
  .rev { width: 100%; min-width: 0; font-size: 12px; }
  .rev th, .rev td { padding: 5px 7px; white-space: normal; }
  .report { grid-template-columns: 1fr; }
  .report > div:first-child { border-right: 0; border-bottom: 1px solid var(--ink); }
  .report table { font-size: 12px; }
  .report th, .report td { padding: 4px 5px; }
  .report .stat, .dist { font-size: 11px; }
  .histo-label { font-size: 9px; }
  .foot { grid-template-columns: 1fr; gap: 10px; }
  .actions { font-size: 12px; }
  .btn { width: 100%; padding: 10px 16px; font-size: 12px; }
  .title { grid-template-columns: 1fr 1fr; min-width: 0; font-size: 11px; }
  .title > div { white-space: normal; }
  .title .wide { grid-column: span 1; }
  .title b { font-size: 9px; }
  .title .big { font-size: 22px; }
  .nickname-input { font-size: 12px; width: 10em; }
  .nickname-save, .link-btn { font-size: 11px; }
}