/* ═══════════════════════════════════════════════════════════
   THE TECHNICAL GUIDE — TWO STYLESHEETS IN ONE FILE

   The first half is the BENCH: the three columns, the bar, the
   inspector. It is part of the app and reads the app's tokens, so it
   follows the theme like every other screen.

   The second half is the PAGE, and it does not. Every colour on a
   sheet is a literal — #111827, #ffffff, #b45309 — because a guide
   laid out in the dark theme is still printed on white paper, and a
   var(--text) that resolves to near-white is a page of invisible
   type. That mistake has been made in this repository before; the
   rule that came out of it is that anything which ends on paper
   carries its own ink.

   The measuring host at the bottom is the same styles again at the
   same width, off-screen. It has to be: tgFlow() decides where a page
   breaks by asking the browser how tall a paragraph is, and an answer
   measured in different type is the wrong answer.
   ═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   THE BENCH
   ══════════════════════════════════════════════════════════════ */
.tg-wrap{display:flex;flex-direction:column;height:calc(100vh - 118px);min-height:460px}
@supports (height:100dvh){.tg-wrap{height:calc(100dvh - 118px)}}

.tg-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 10px;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);margin-bottom:10px;flex:0 0 auto;
}
.tg-bar .tg-name{
  flex:1 1 180px;min-width:120px;background:transparent;border:1px solid transparent;
  color:var(--bright);font:600 15px var(--font-display);padding:5px 8px;border-radius:8px;
}
.tg-bar .tg-name:hover{border-color:var(--border)}
.tg-bar .tg-name:focus{border-color:var(--gold-border);outline:none;background:var(--bg3)}
.tg-seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.tg-seg-b{
  background:transparent;border:0;color:var(--text2);font:600 11px var(--font-body);
  padding:6px 11px;cursor:pointer;letter-spacing:.04em;
}
.tg-seg-b.on{background:var(--gold);color:var(--on-accent)}
.tg-zoom{display:inline-flex;align-items:center;gap:2px;color:var(--text2);font-size:11px}
.tg-zoom span{min-width:40px;text-align:center;font-variant-numeric:tabular-nums}
.tg-chip{
  font-size:11px;color:var(--text3);padding:4px 8px;border-radius:999px;
  background:var(--bg3);border:1px solid var(--border);white-space:nowrap;
}

.tg-cols{display:grid;grid-template-columns:212px minmax(0,1fr) 292px;gap:10px;flex:1 1 auto;min-height:0}
.tg-side,.tg-insp{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  overflow-y:auto;overflow-x:hidden;padding:10px;min-height:0;
}
.tg-canvas{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  overflow:auto;min-height:0;padding:18px 10px;
}

/* ── the page list ──────────────────────────────────────────── */
.tg-side-hd{
  font:700 10px var(--font-body);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text3);padding:2px 4px 8px;
}
.tg-plist{display:flex;flex-direction:column;gap:3px}
.tg-pitem{
  display:grid;grid-template-columns:22px minmax(0,1fr);grid-template-rows:auto auto;
  gap:0 6px;padding:6px 7px;border-radius:8px;cursor:pointer;border:1px solid transparent;
}
.tg-pitem:hover{background:var(--bg3)}
.tg-pitem.on{background:var(--gold-bg);border-color:var(--gold-border)}
.tg-pitem.drag{opacity:.4}
.tg-pitem.over{border-color:var(--gold)}
.tg-pnum{
  grid-row:1/3;align-self:start;font:700 10px var(--font-body);color:var(--text3);
  background:var(--bg4);border-radius:5px;text-align:center;padding:3px 0;font-variant-numeric:tabular-nums;
}
.tg-ptitle{font-size:12px;color:var(--text);line-height:1.3;overflow-wrap:anywhere}
.tg-pkind{font-size:10px;color:var(--text3)}
.tg-side-act{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.tg-side-act .btn{flex:1 1 auto;justify-content:center}

/* ── the inspector ──────────────────────────────────────────── */
.tg-insp-card{
  background:var(--bg3);border:1px solid var(--border);border-radius:10px;
  padding:10px;margin-bottom:10px;
}
.tg-insp-hd{
  display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px;
  font:700 11px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--text2);
}
.tg-insp-sec{
  font:700 10px var(--font-body);letter-spacing:.09em;text-transform:uppercase;
  color:var(--text3);margin:12px 0 6px;
}
.tg-insp-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px}
.tg-mk{
  width:100%;min-height:270px;resize:vertical;background:var(--bg);color:var(--text);
  border:1px solid var(--border2);border-radius:8px;padding:9px 10px;
  font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.tg-mk:focus{outline:none;border-color:var(--gold-border)}
.tg-mk-hint{font-size:10.5px;color:var(--text3);margin-bottom:6px;line-height:1.5}
.tg-imgbox{
  aspect-ratio:16/10;border:1px dashed var(--border2);border-radius:8px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--bg);
  color:var(--text3);font-size:11px;
}
.tg-imgbox img{width:100%;height:100%;object-fit:cover}
.tg-addgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.tg-add{
  display:flex;align-items:center;gap:5px;padding:6px 7px;border-radius:7px;
  background:var(--bg);border:1px solid var(--border);color:var(--text2);
  font-size:10.5px;cursor:pointer;text-align:left;line-height:1.25;
}
.tg-add:hover{border-color:var(--gold-border);color:var(--text)}
.tg-add svg{flex:0 0 auto;width:13px;height:13px}

@media (max-width:1100px){
  .tg-cols{grid-template-columns:1fr;grid-template-rows:auto minmax(320px,1fr) auto}
  .tg-side{max-height:190px}
  .tg-insp{max-height:340px}
  .tg-wrap{height:auto;min-height:0}
}

/* ══════════════════════════════════════════════════════════════
   THE PAGE

   From here down, nothing reads a theme token. A sheet is white
   paper with dark ink on it in both themes, in the preview and on the
   printer, and that is not a preference.
   ══════════════════════════════════════════════════════════════ */
.tg-stage{
  --tg-zoom:.62;
  zoom:var(--tg-zoom);
  display:flex;flex-direction:column;align-items:center;gap:22px;
}

.tg-page{
  position:relative;background:#ffffff;color:#111827;flex:0 0 auto;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  /* A browser drops background colour by default — it reads a filled box
     as decoration — so a navy cover comes out of the printer as white
     paper with white lettering on it. This is the declaration that
     overrules that, and it inherits, so putting it on the sheet puts it
     on everything drawn inside the sheet. Outside @media print as well:
     a browser asked to "save as PDF" is printing, and so is the preview. */
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.tg-page.tg-edit{box-shadow:0 6px 26px rgba(0,0,0,.34);outline:1px solid rgba(0,0,0,.12)}
.tg-page.tg-edit.here{outline:2px solid #f59e0b}
.tg-trim{position:absolute;overflow:hidden}
/* A generated continuation carries a hair of a tab on the bench, so the
   difference between a page somebody made and a page the text needed is
   visible without counting. It is not printed. */
.tg-page.cont.tg-edit::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#cbd5e1;
}

/* ── crop marks ─────────────────────────────────────────────── */
.tg-marks{position:absolute;inset:0;pointer-events:none}
.tg-marks i{position:absolute;background:#000000;display:block}
/* The bleed shows on the bench as a faint tint outside the trim, so it
   is obvious which artwork actually runs off the edge. Never printed. */
.tg-page.marks.tg-edit{background:#fbfbfb}
.tg-page.marks.tg-edit .tg-trim{outline:1px dashed rgba(0,0,0,.16)}

/* ── frames ─────────────────────────────────────────────────── */
.tg-f{position:absolute}
.tg-f.free{cursor:move}
.tg-f.bleed{cursor:default}
.tg-page.tg-edit .tg-f{outline:1px solid transparent}
.tg-page.tg-edit .tg-f:hover{outline:1px dashed rgba(245,158,11,.55)}
.tg-page.tg-edit .tg-f.sel{outline:2px solid #f59e0b;outline-offset:1px}
.tg-page.tg-edit .tg-f.free.sel::after{
  content:'';position:absolute;right:-1px;bottom:-1px;width:14px;height:14px;
  background:#f59e0b;cursor:nwse-resize;border-radius:2px 0 0 0;
}
/* A frame whose words can be typed on where they sit says so with the
   cursor. See tgEditInPlace() — one click to select, the next to open. */
.tg-page.tg-edit .tg-f.txt{cursor:text}

/* ── typing on the sheet ────────────────────────────────────────
   The box that opens over a text frame. It is the frame's own face,
   size and leading — set on the element by tgTextStyle() — on paper
   the colour of a note, so it is obvious that this is the raw markup
   and not the finished page. No border: an outline, which is drawn
   outside the box and so does not move a single line of the text. */
.tg-inplace{
  position:absolute;z-index:60;margin:0;padding:0;border:0;resize:none;
  background:#fffdf3;color:#111827;
  outline:2px solid #f59e0b;outline-offset:2px;
  box-shadow:0 8px 26px rgba(0,0,0,.18);
  overflow:auto;white-space:pre-wrap;
}
.tg-inplace:focus{outline:2px solid #f59e0b}

.tg-f > .tg-img{width:100%;height:100%;display:block}
.tg-ph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:#f1f5f9;color:#94a3b8;font-size:12px;border:1px dashed #cbd5e1;
}
.tg-shape-rule{width:100%;height:100%}
.tg-shape-box{width:100%;height:100%;border:1px solid transparent;border-radius:3px}

/* ── running head and foot ──────────────────────────────────── */
.tg-run{
  position:absolute;left:74px;right:74px;top:52px;display:flex;justify-content:space-between;
  gap:14px;font-size:9.4px;letter-spacing:.07em;text-transform:uppercase;color:#9ca3af;
  padding-bottom:7px;border-bottom:.75px solid #e5e7eb;
}
.tg-run-r{color:#b45309;font-weight:600;text-align:right}
.tg-pfoot{
  position:absolute;left:74px;right:74px;bottom:42px;text-align:center;
  font-size:9.4px;color:#9ca3af;font-variant-numeric:tabular-nums;
}

/* ══════════════════════════════════════════════════════════════
   THE TYPE

   Ten point on fifteen and a half, in the app's own Inter, with
   Space Grotesk on the headings the way the rest of the product does
   it. Sizes are in page pixels: at 96 dpi 13.3 px is 10 pt, which is
   what a bilingual reference document set in a single wide column
   wants to be.
   ══════════════════════════════════════════════════════════════ */
/* ── ONE SIZE, AND EVERYTHING RELATIVE TO IT ────────────────────
   --tg-fs is the frame's own body size, set per frame by tgTextStyle().
   Every other size on the page is a multiple of it in calc(), so
   putting a chapter up to 12 pt takes its headings, its tables and its
   notes with it. Sized in pixels of their own they would not move, and
   a 12 pt chapter under a 25 px heading is not a bigger chapter, it is
   a broken one. */
.tg-body{
  font-size:var(--tg-fs,13.2px);
  line-height:var(--tg-lh,1.62);
  color:#1f2937;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
}
.tg-body p{margin:0 0 8px}
.tg-body p:last-child{margin-bottom:0}
.tg-body b,.tg-body strong{font-weight:650;color:#111827}
.tg-body i{font-style:italic}
.tg-body code{
  font:.92em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:#f3f4f6;padding:1px 4px;border-radius:3px;
}
.tg-url{color:#1d4ed8;word-break:break-all}

.tg-h1{
  font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;
  font-size:calc(var(--tg-fs,13.2px) * 1.894);line-height:1.16;color:#0b1220;
  margin:0 0 12px;padding-bottom:9px;border-bottom:2.5px solid #f59e0b;
}
.tg-h2{
  font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;
  font-size:calc(var(--tg-fs,13.2px) * 1.182);line-height:1.28;color:#0b1220;
  margin:17px 0 7px;letter-spacing:.005em;
}
.tg-h2:first-child{margin-top:0}
.tg-h3{
  font-family:'Inter',sans-serif;font-weight:700;
  font-size:calc(var(--tg-fs,13.2px) * .864);line-height:1.3;color:#b45309;
  margin:14px 0 5px;letter-spacing:.075em;text-transform:uppercase;
}
.tg-hr{border:0;border-top:.75px solid #e5e7eb;margin:12px 0}

.tg-list{margin:0 0 9px;padding-left:17px}
.tg-list li{margin:0 0 4px;padding-left:2px}
.tg-list li::marker{color:#b45309}

.tg-note{
  background:#fffbeb;border-left:3px solid #f59e0b;border-radius:0 5px 5px 0;
  padding:8px 11px;margin:9px 0;line-height:1.55;color:#3f3413;
  font-size:calc(var(--tg-fs,13.2px) * .939);
}

/* ── tables ─────────────────────────────────────────────────── */
.tg-tbl{
  width:100%;border-collapse:collapse;margin:8px 0 11px;line-height:1.42;
  font-size:calc(var(--tg-fs,13.2px) * .894);text-align:left;
}
.tg-tbl th{
  text-align:left;font:700 9.4px/1.3 'Inter',sans-serif;letter-spacing:.075em;
  text-transform:uppercase;color:#ffffff;background:#0b1220;
  padding:5.5px 8px;vertical-align:bottom;
}
.tg-tbl td{padding:5px 8px;border-bottom:.75px solid #e9ecf1;vertical-align:top;color:#1f2937}
.tg-tbl tbody tr:nth-child(even) td{background:#f8fafc}
.tg-tbl td[data-strong]{font-weight:650;color:#111827}
.tg-tbl .a-right{text-align:right;font-variant-numeric:tabular-nums}
.tg-tbl .a-center{text-align:center}
/* A key/value table — the venue-and-time blocks the guide is full of.
   No head, a quiet left column, and no zebra to make two lines of it
   look like a report. */
.tg-tbl.plain td{border-bottom:.75px solid #f1f3f7}
.tg-tbl.plain tbody tr:nth-child(even) td{background:transparent}
.tg-tbl.plain td.k{width:32%;color:#6b7280;font-weight:600}
.tg-tbl.tg-pts td{font-variant-numeric:tabular-nums}

/* ── THE ROADBOOK ───────────────────────────────────────────────
   Eleven columns on 646 points of paper, which is what a roadbook is:
   dense on purpose, read one line at a time at fifty kilometres an
   hour. The published CAC sheets set this at about seven point on A2;
   this is the same table on A4, so it is smaller again and every drop
   of padding is spent on the columns rather than between them.

   No zebra. A driver tracks ACROSS a line here, not down a column, and
   alternating bands are a lane guide for the wrong axis — they make
   the eye run down the times instead of out to the junction. The rules
   between rows do that job without pulling. */
.tg-tbl.tg-rb{font-size:8.4px;line-height:1.3;margin:6px 0 8px}
.tg-tbl.tg-rb th{padding:3px 4px;font-size:7.4px;letter-spacing:.05em;line-height:1.2}
.tg-tbl.tg-rb th span{display:block;font-weight:500;opacity:.72;letter-spacing:.02em}
.tg-tbl.tg-rb td{padding:2.6px 4px;border-bottom:.6px solid #eef1f5;vertical-align:top}
.tg-tbl.tg-rb tbody tr:nth-child(even) td{background:transparent}
.tg-tbl.tg-rb .a-c{text-align:center;font-variant-numeric:tabular-nums}
.tg-tbl.tg-rb .a-right{font-variant-numeric:tabular-nums}
/* The middle clock is the one the convoy is actually run on. */
.tg-tbl.tg-rb .tg-rb-mid{font-weight:650;color:#111827}
.tg-tbl.tg-rb .tg-rb-town{color:#0b1220}
.tg-tbl.tg-rb .tg-rb-town b{font-weight:650}
.tg-rb-sub{display:block;color:#6b7280;font-weight:400}
.tg-tbl.tg-rb .tg-rb-road{color:#111827}
.tg-rb-turn{display:block;color:#b45309;font-weight:600}
.tg-rb-evt{display:block;color:#4b5563;font-style:italic}
.tg-tbl.tg-rb .tg-rb-nr{color:#9ca3af}
/* A line with something ON it — a zone opening or closing, the
   neutralisation ending, the finish — is the line somebody is looking
   for, so it is the only one that carries a tint. */
.tg-tbl.tg-rb tr.tg-rb-ev td{background:#fffbeb}

.tg-fine{font-size:calc(var(--tg-fs,13.2px) * .788);line-height:1.5;color:#6b7280;margin:4px 0 8px}
.tg-empty{
  border:1px dashed #cbd5e1;border-radius:6px;padding:11px 13px;margin:8px 0;
  color:#94a3b8;font-size:11.6px;line-height:1.5;background:#fcfdfe;
}

/* ── contents ───────────────────────────────────────────────── */
.tg-toc{margin-top:4px}
.tg-toc-row{display:flex;align-items:baseline;gap:6px;padding:5.5px 0;border-bottom:.75px solid #f1f3f7}
.tg-toc-t{font-size:12.8px;color:#111827;font-weight:500}
.tg-toc-d{flex:1 1 auto;border-bottom:1.5px dotted #d1d5db;transform:translateY(-3px)}
.tg-toc-n{font-size:12px;color:#b45309;font-weight:700;font-variant-numeric:tabular-nums}

/* ── the day-by-day programme ───────────────────────────────── */
.tg-day{margin:0 0 11px;break-inside:avoid}
.tg-day-hd{
  display:flex;align-items:baseline;gap:9px;background:#0b1220;color:#fff;
  padding:5px 9px;border-radius:4px 4px 0 0;
}
.tg-day-n{font:700 9.4px 'Inter',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#f59e0b}
.tg-day-d{font-size:11.6px;font-weight:600}
.tg-day-rows{border:.75px solid #e9ecf1;border-top:0;border-radius:0 0 4px 4px}
.tg-day-row{display:flex;gap:10px;padding:4.5px 9px;border-bottom:.75px solid #f1f3f7;font-size:11.6px}
.tg-day-row:last-child{border-bottom:0}
.tg-day-row .tg-t{width:44px;font-weight:700;color:#b45309;font-variant-numeric:tabular-nums}
.tg-day-row .tg-n{flex:1 1 auto;color:#1f2937}
.tg-day-row .tg-k{color:#6b7280;font-variant-numeric:tabular-nums}
.tg-day-none{
  border:.75px solid #e9ecf1;border-top:0;border-radius:0 0 4px 4px;
  padding:5px 9px;font-size:11.2px;color:#9ca3af;
}

.tg-sun{display:flex;gap:22px;font-size:11.8px;color:#4b5563;padding:7px 0}
.tg-sun b{color:#111827;font-weight:650}

/* ── one race, one page ─────────────────────────────────────── */
.tg-race-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.tg-race-t{font:700 18.5px/1.2 'Space Grotesk','Inter',sans-serif;color:#0b1220}
.tg-race-c{display:flex;gap:4px;flex-wrap:wrap}
.tg-cat{
  font:700 9px 'Inter',sans-serif;letter-spacing:.06em;padding:2.5px 6px;border-radius:999px;
  background:var(--c,#94a3b8);color:#fff;
}
.tg-facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:.75px solid #e9ecf1;
  border-radius:5px;overflow:hidden;margin-bottom:11px;
}
.tg-fact{padding:6px 9px;border-right:.75px solid #f1f3f7;border-bottom:.75px solid #f1f3f7}
.tg-fact-k{
  display:block;font:700 8.6px 'Inter',sans-serif;letter-spacing:.085em;
  text-transform:uppercase;color:#9ca3af;margin-bottom:1.5px;
}
.tg-fact-v{display:block;font-size:12.4px;font-weight:600;color:#111827}

/* ── figures ────────────────────────────────────────────────── */
/* ── THE PRINT SHEET, INSIDE A PAGE ─────────────────────────────
   A course-print sheet is built at its own paper size — 794 px of A4,
   1123 of A3 — and the guide's column is neither. `zoom` rather than a
   transform, because the flow engine decides where the next block goes
   by asking how tall this one is, and a transform lies about that: a
   scaled sheet still reports its full height and the engine leaves a
   page of white under every plan.

   The sheet brings its own shadow and rounded corner from the print
   screen, where it sits on a dark canvas. On paper it is the artwork,
   so both come off. */
.tg-sheet{display:block;line-height:0}
.tg-sheet .cp-sheet{
  box-shadow:none!important;border-radius:0!important;margin:0!important;
  transform:none!important;
}
.tg-sheet-wait{
  display:flex;align-items:center;justify-content:center;
  border:1px dashed #cbd5e1;border-radius:6px;background:#fcfdfe;
  color:#94a3b8;font-size:11.5px;margin:9px 0 11px;
}
/* On paper a plan that never arrived is a fault, not a caption. It is
   never reached by the export — tgWarmSheets() runs first — so if one
   does print, it should be impossible to mistake for artwork. */
@media print{
  #tg-print-root .tg-sheet-wait{border-color:#dc2626;color:#dc2626}
}

.tg-fig{margin:9px 0 11px}
.tg-fig svg{display:block;width:100%;height:auto}
.tg-fig-cap{
  font-size:10.2px;color:#6b7280;text-align:center;margin-top:4px;
  letter-spacing:.02em;
}
.tg-course .tg-km{font:600 7.2px 'Inter',sans-serif;fill:#6b7280}
.tg-course .tg-end{font:700 8.4px 'Inter',sans-serif;fill:#111827;letter-spacing:.05em}
.tg-course .tg-scale{font:600 7.6px 'Inter',sans-serif;fill:#4b5563;text-anchor:middle}
/* The app's own elevation strip, on paper. It is drawn for a dark
   screen and reads its colours off CSS variables that mean nothing
   here, so the ones that would come out invisible are named again. */
.tg-prof{--text:#1f2937;--text2:#4b5563;--text3:#6b7280;--border:#e5e7eb;--bg2:#ffffff;--bg3:#f8fafc}
.tg-prof .rp-svg{max-height:190px}

.tg-partners{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;padding:6px 0}
.tg-partner{display:inline-flex;align-items:center;height:34px}
.tg-partner img{max-height:34px;max-width:118px;object-fit:contain}
.tg-partner span{font-size:11px;color:#6b7280;font-weight:600}

/* ── the cover ──────────────────────────────────────────────── */
.tg-cover{position:relative;width:100%;height:100%;background:#0b1220;overflow:hidden}
.tg-cover-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.tg-cover-art{width:100%;height:100%;object-fit:cover;display:block}
.tg-cover-wash{
  position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(11,18,32,.55) 0%,rgba(11,18,32,.9) 62%,#0b1220 100%);
}
.tg-cover-body{position:absolute;left:74px;right:74px;bottom:150px;color:#fff}
.tg-cover-logo{max-width:180px;max-height:96px;object-fit:contain;margin-bottom:26px;display:block}
.tg-cover-kicker{
  font:700 11px 'Inter',sans-serif;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tg-accent,#f59e0b);margin-bottom:12px;
}
.tg-cover-t{
  font:700 44px/1.06 'Space Grotesk','Inter',sans-serif;letter-spacing:-.015em;
  margin:0 0 14px;color:#fff;
}
.tg-cover-s{font-size:16px;color:#cbd5e1;font-weight:500}
.tg-cover-body::after{
  content:'';display:block;width:88px;height:4px;background:var(--tg-accent,#f59e0b);margin-top:24px;
}
.tg-cover-foot{
  position:absolute;left:74px;right:74px;bottom:62px;color:#64748b;
  font:600 10px 'Inter',sans-serif;letter-spacing:.16em;text-transform:uppercase;
}

/* ── THE READER ─────────────────────────────────────────────────
   The same sheets on a share link, scaled to whatever column the
   phone gives them. No bench furniture: nothing here is selectable,
   draggable or outlined. */
.tg-read{
  --tg-zoom:.6;
  zoom:var(--tg-zoom);
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.tg-read .tg-page{box-shadow:0 4px 18px rgba(0,0,0,.28)}

/* ══════════════════════════════════════════════════════════════
   MEASURING

   Off-screen, never display:none — an element with no layout has no
   height to report, which is the one thing this exists to ask. Same
   type, same width, same everything as the column it stands in for.
   ══════════════════════════════════════════════════════════════ */
.tg-measure{
  position:fixed;left:-30000px;top:0;z-index:-1;visibility:hidden;
  background:#fff;color:#1f2937;
}

/* ══════════════════════════════════════════════════════════════
   OUT

   Off-screen the rest of the time, for the same reason #print-root is:
   a hidden element has no layout and the pictures inside it are never
   fetched, so a guide printed from a display:none root comes out with
   the cover photograph and every partner logo missing.
   ══════════════════════════════════════════════════════════════ */
#tg-print-root{position:fixed;left:-30000px;top:0;z-index:-1;background:#fff}
#tg-print-root .tg-page{margin:0 auto}

@media print{
  body.tg-printing > *:not(#tg-print-root){display:none!important}
  /* display:block, because the app's body is a flex column: the print
     root as a flex item measures zero wide and the pages land on the
     paper only by starting at the left edge. */
  body.tg-printing{background:#fff!important;height:auto;overflow:visible;display:block;margin:0;padding:0}
  body.tg-printing #tg-print-root{
    position:static;left:auto;top:auto;z-index:auto;width:auto;display:block!important;
  }
  /* Every page ends its own sheet, and none of them is split across two.
     The last one does not, or a browser adds a blank leaf at the end. */
  #tg-print-root .tg-page{
    box-shadow:none;outline:0;break-after:page;page-break-after:always;
    break-inside:avoid;page-break-inside:avoid;
  }
  #tg-print-root .tg-page:last-child{break-after:auto;page-break-after:auto}
}

/* ── THE FOUR EXTRA INLINE MARKS ────────────────────────────────
   Underline, strike, small caps and a highlight. The highlight is a
   printed one — a wash of the house amber that a photocopier keeps as
   a tint rather than as a black band. */
.tg-body u{text-decoration:underline;text-underline-offset:.18em}
.tg-body s{text-decoration:line-through;color:#6b7280}
.tg-body mark{background:#fef3c7;color:inherit;padding:0 .12em;border-radius:2px}
.tg-sc{font-variant-caps:all-small-caps;letter-spacing:.045em}

/* A heading is never the frame's own weight — it is the heading's. But
   a frame set light or heavy should still read as one voice, so the
   body text follows the frame and the headings hold their own. */
.tg-body p,.tg-body li,.tg-body td{font-weight:inherit}

/* Two number fields side by side — size and line height belong together
   and each is four characters wide. */
.tg-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tg-two .field{margin:0}

/* ── THE MASTER PAGE ────────────────────────────────────────────
   Three slots and a logo, in one row. The middle slot is centred in
   the COLUMN rather than between its neighbours: a page number that
   drifts because the left slot got longer is a page number that is not
   where the eye reaches for it. */
.tg-band{
  position:absolute;display:flex;align-items:center;gap:10px;
  line-height:1.25;white-space:nowrap;
}
.tg-band-l{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tg-band-m{flex:0 0 auto;text-align:center}
.tg-band-r{flex:1 1 0;min-width:0;text-align:right;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.tg-band-logo{flex:0 0 auto;width:auto;object-fit:contain;display:block}
/* Nothing in a band is ever a link or selectable furniture — it is
   printed matter, and on the bench it must not swallow a click meant
   for the frame under it. */
.tg-band{pointer-events:none}

.tg-border{position:absolute;pointer-events:none}

/* ── THUMB TABS ─────────────────────────────────────────────────
   A block of colour on the outside edge with the chapter's name in it,
   set on its side. Nothing about it is interactive — it is printed
   matter, and on the bench it must not swallow a click meant for the
   frame beside it. */
.tg-tab{
  position:absolute;display:flex;align-items:center;justify-content:center;
  overflow:hidden;pointer-events:none;
}
.tg-tab span{
  color:#fff;font:700 9px 'Inter',sans-serif;letter-spacing:.09em;
  text-transform:uppercase;white-space:nowrap;
  /* Reading up the outside edge on a right-hand page, and down it on a
     left-hand one, so the words always run away from the spine. */
  transform:rotate(90deg);
}
.tg-tab.verso span{transform:rotate(-90deg)}

/* ── THE STYLE SHEET PANEL ──────────────────────────────────────
   Ten rows and eight columns of controls. Dense on purpose: seeing the
   whole sheet at once is the point of having one. */
.tg-ss-wrap{overflow-x:auto;margin-top:8px}
.tg-ss{width:100%;border-collapse:collapse;font-size:11px}
.tg-ss th{
  text-align:left;font:700 9.5px var(--font-body);letter-spacing:.06em;
  text-transform:uppercase;color:var(--text3);padding:0 4px 6px;white-space:nowrap;
}
.tg-ss tbody th{
  font:600 11px var(--font-body);letter-spacing:0;text-transform:none;
  color:var(--text);padding:4px 8px 4px 0;
}
.tg-ss td{padding:2px 3px}
.tg-ss input[type=number]{width:58px}
.tg-ss input[type=color]{width:34px;height:26px;padding:1px;border-radius:6px}
.tg-ss select{min-width:82px}
.tg-ss input,.tg-ss select{
  background:var(--bg);color:var(--text);border:1px solid var(--border2);
  border-radius:6px;padding:4px 5px;font-size:11px;
}
.tg-mini{display:flex;justify-content:center}

/* ── THE PREFLIGHT REPORT ───────────────────────────────────────
   Faults in red, checks in amber, notes quiet. The colour is the whole
   scan: somebody reads the red rows and stops. */
.tg-pf{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.tg-pf-row{
  display:flex;gap:8px;align-items:flex-start;padding:7px 9px;border-radius:8px;
  background:var(--bg3);border:1px solid var(--border);font-size:12.5px;line-height:1.45;
}
.tg-pf-row.fault{border-color:var(--red-border);background:var(--red-bg)}
.tg-pf-row.warn{border-color:var(--gold-border);background:var(--gold-bg)}
.tg-pf-i{flex:0 0 auto;margin-top:1px}
.tg-pf-row.fault .tg-pf-i{color:var(--red)}
.tg-pf-row.warn .tg-pf-i{color:var(--gold)}
.tg-pf-row.note .tg-pf-i{color:var(--text3)}
.tg-pf-t{flex:1 1 auto;min-width:0}
.tg-pf-w{display:block;font-size:11px;color:var(--text3);margin-top:2px}

/* The heat protocol's zone swatch and the zone table's dot. */
.tg-wbgt-dot,.tg-zone-dot{
  display:inline-block;width:8px;height:8px;border-radius:2px;
  margin-right:5px;vertical-align:baseline;
}
.tg-tbl.tg-wbgt td{vertical-align:top}