/* Paddock Notes beta — visual direction from the v2 styleboard (no longer in betaspec/):
cream page, paper cards, thin quiet borders, four stage colours used as accents only. */
:root{--cream:#f7f1e7;--paper:#fffdf8;--ink:#1f1f1f;--muted:#6e6860;--line:#d9d1c4;--soft:#faf6ef;
--orange:#d98a3c;--green:#5d8c63;--blue:#4f81a8;--purple:#7867a5;--red:#b8483e;--orange-ink:#8c4b14;
/* ink variants: the same hue, dark enough to read as 10-12px text (measured against AA) */
--green-ink:#41654a;--blue-ink:#3c6285;}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-size:14px;line-height:1.45}
a{color:inherit}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 11px;width:100%}
textarea{resize:vertical;min-height:70px}
label{display:block;font-size:11px;color:var(--muted);letter-spacing:.14em;font-weight:800;text-transform:uppercase;margin:0 0 6px}
h1{font-size:28px;font-weight:800;letter-spacing:.04em;margin:0}
h2{font-size:18px;font-weight:800;margin:0}
h3{font-size:14px;margin:0 0 7px;letter-spacing:.07em;text-transform:uppercase}
.sub{font-size:14px;color:var(--muted);margin-top:6px}
.small{font-size:12px;color:var(--muted)}
.big{font-size:18px;font-weight:800}
.mono{font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace}
/* header */
.top{display:flex;align-items:center;gap:26px;padding:16px 28px;border-bottom:1px solid var(--line);background:var(--paper);flex-wrap:wrap}
.brand{font-weight:800;letter-spacing:.18em;font-size:16px;text-decoration:none}.brand span{font-weight:400}.brand em{font-style:normal;font-size:10px;letter-spacing:.2em;color:var(--orange);margin-left:8px;border:1px solid var(--orange);border-radius:999px;padding:2px 7px;vertical-align:middle}
.stages{display:flex;gap:4px}
.stages a{text-decoration:none;font-weight:800;font-size:13px;padding:8px 12px;border-radius:9px;display:flex;align-items:center;gap:7px}
.stages a.on{background:var(--soft);border:1px solid var(--line)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}.dot.orange{background:var(--orange)}.dot.green{background:var(--green)}.dot.blue{background:var(--blue)}.dot.purple{background:var(--purple)}
.secondary{display:flex;gap:16px;margin-left:auto;font-size:12px}.secondary a{color:var(--muted);text-decoration:none}.secondary a:hover{color:var(--ink)}
.who{font-size:12px;color:var(--muted)}
main{max-width:1180px;margin:0 auto;padding:30px 28px 70px}
main.wide{max-width:1800px} /* multi-pane pages (Review, Drive, Admin) use the screen; reading pages keep a measured line length */
main.wide-car{max-width:1480px} /* the Car page's grid tabs: wider than prose, narrower than a three-pane page */
.loading{color:var(--muted);padding:40px 0}
/* cards */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:26px}
.card{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:#fff;margin-top:12px}
.card.hl{border-left:4px solid var(--orange)}
.card.click{cursor:pointer}.card.click:hover{border-color:#b9ad98}
.row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
/* align-items:start — a card sizes to its own content. Prepare's empty Driver actions card was
stretching to match a 609px car-job note beside it, leaving a tall blank panel (design review). */
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}
@media (max-width:760px){.cards2,.cards3{grid-template-columns:1fr}.top{gap:12px}.secondary{margin-left:0;flex-wrap:wrap}main{padding:18px 14px 60px}h1{font-size:24px}}
.kicker{font-size:11px;color:var(--muted);letter-spacing:.16em;font-weight:800;margin-top:26px;text-transform:uppercase}
.kicker:first-child{margin-top:0}
/* ── The shared control vocabulary (26 Sep 2026 design review) ─────────────────────────────────
The same visual treatment for the same JOB, and different ones where the jobs differ:
status badge .pill a STATE. Never clickable, never hovers. Colour supplements its label.
category tag .tag what kind of thing this is; subordinate to the record's title.
primary .btn.primary the main task on the screen; one per task area.
secondary .btn edit, print, compare, save — bordered, shared height and radius.
row action .btn.sm / .rowact / .iconbtn the compact controls inside a table row.
inline action .linkbtn an action or a destination inside a row or a sentence; underlined.
filter chip .chip + .chip.on selectable, with an unmistakable filled selected state.
local tab .tab / .crtab ONE underline pattern and one selected emphasis.
The size scale: ~26px quiet row controls, 36px compact rows, 40px standard actions, 44px on a
touch pointer. ALL-CAPS stays on kickers, pills, tags and tab labels — it is the house voice;
ACTION labels are sentence case (David, 26 Sep: "keep the all caps text but agree on action
labels"). */
.pill{border:1px solid var(--line);border-radius:999px;padding:4px 9px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
cursor:default;user-select:none} /* a state is not a control: no pointer, no hover, no press */
.pill.orange{border-color:var(--orange);color:var(--orange-ink)}.pill.green{border-color:var(--green);color:var(--green-ink)}.pill.blue{border-color:var(--blue);color:var(--blue-ink)}.pill.purple{border-color:var(--purple);color:var(--purple)}.pill.red{border-color:var(--red);color:var(--red)}
.tag{font-size:10px;font-weight:800;letter-spacing:.06em;border:1px solid var(--line);border-radius:6px;padding:4px 7px;width:max-content;text-transform:uppercase;white-space:nowrap}
.btn{border:1px solid var(--line);border-radius:9px;padding:12px 14px;font-size:12px;font-weight:800;background:var(--paper);color:var(--ink);text-decoration:none;display:inline-block;line-height:1.2}
/* .btn.sm is the compact row action. It was used in nine places with no rule at all, so it rendered
full size (noted as not-done, 24 Sep) — which is why a row could hold three sizes of control. */
.btn.sm{padding:10px 12px}
/* The quiet row control: a WORD at the icon buttons' scale, for the actions a bin or a pencil would
misname — Set baseline, View sheet, Compare. Setup history was mixing 26px icon buttons with 17px
text links, "five competing treatments per row" (design review, 26 Sep). */
.rowact{display:inline-flex;align-items:center;height:26px;padding:0 9px;border:1px solid var(--line);border-radius:7px;
background:transparent;color:var(--muted);font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer}
.rowact:hover{background:var(--soft);color:var(--ink);border-color:var(--muted)}
.rowact.danger:hover{color:var(--red);border-color:var(--red)}
.btn.primary{border-color:var(--orange);color:var(--orange-ink);background:#fff8ee}
.btn.green{border-color:var(--green);color:var(--green)}.btn.purple{border-color:var(--purple);color:var(--purple)}
.btn.ghost{border-color:var(--line);color:var(--muted);background:transparent}.btn.danger{border-color:var(--red);color:var(--red)}
.btn:disabled{opacity:.5;cursor:default}
/* One rule for "you can click this" (14 Sep 2026): the .btn family is always FRAMED — primary loud, ghost quiet, never
bare text — and .linkbtn is the inline action inside a row or a sentence, always underlined so it cannot read as prose. */
.btn:hover:not(:disabled){background:var(--soft)}.btn.primary:hover:not(:disabled){background:#fff1dc}
.btn.ghost:hover:not(:disabled){color:var(--ink)}
.actions{display:flex;gap:7px;flex-wrap:wrap}
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:2px solid var(--line);margin:20px 0}
/* ── Additions to the control vocabulary, 7 Oct 2026 (David's UX readability review) ──────────
The September pass settled buttons, pills, chevrons and tabs. These are the gaps the Corners and
Review screens exposed, each named here so the next screen reuses rather than invents:
.cn-sess a SELECTABLE FILTER - a framed control with a real tick. Distinct from .pill and
.chip, which are STATUS and carry no click. A filter that looks like a status is
what sent ten session pills across five rows.
.cn-key a KEY that sits with the thing it explains, drawn as what is plotted (a dashed
rule reads as a dash). Statistical definitions still live in the disclosure.
.rv-dests a DESTINATION INDEX: where what survives can go, named with its count, above the
list it would otherwise hide behind.
.rv-acc-none a LABELLED EMPTY state - a destination with nothing in it still says so, because
it is somewhere you can add to, not a box with nothing in it.
longText() the one long-note treatment: previewed in a list, whole behind one disclosure, in
the corner-guide reading style. The record is never shortened.
CN_MIN_LABEL the floor for chart text AFTER scaling. A chart is drawn at the width it occupies,
so the nominal size is the rendered size; never scale a drawing to fit a column.
CHART COLOUR, and the one carve-out (David's ruling, 7 Oct). Red is CRITICAL and blue is WET in
the app's own language, and that holds everywhere a reader meets them. An ENGINEERING chart that
carries its own legend may use the instrument conventions instead - red for engine speed, blue for
power on the gearing chart - because those are what every dyno sheet uses and fighting them makes
the chart harder to read, not easier. The legend is the condition, not a nicety: without one the
reader has only the app's meanings to go on. Purple stays the REFERENCE on the Corners charts and
means nothing else there.
───────────────────────────────────────────────────────────────────────────────────────────── */
/* ONE local-tab pattern (7 Oct 2026), shared by .tab, .crtab and .gd-tabs a. The Sep 27 pass levelled
their heights and rule weights and left the type alone, so three treatments survived: 13px sentence
case here and on Car, 12px uppercase letter-spaced on Track Guides. Every other .tab already shouted
its label in the markup (UPCOMING, NEEDS REVIEW, the admin sections), so uppercase is what the
component has always been; it is now said once, in CSS, and the hand-cased labels are unaffected. */
.tab,.crtab,.gd-tabs a{display:inline-flex;align-items:center;gap:5px;box-sizing:border-box;height:39px;line-height:1;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:0 14px;border:none;background:none;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px;cursor:pointer}
.tab:hover,.crtab:hover,.gd-tabs a:hover{color:var(--ink)}
.tab.on,.crtab.on,.gd-tabs a.on{color:var(--ink);border-bottom-color:var(--orange)}
.tab:focus-visible,.crtab:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.stage-row{display:flex;gap:8px;margin:16px 0 8px}
.stage{flex:1;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-weight:800;font-size:12px;background:#fff;text-decoration:none;text-align:center;letter-spacing:.08em;opacity:.6}
.stage.on{opacity:1}.stage.orange{border-top:4px solid var(--orange)}.stage.green{border-top:4px solid var(--green)}.stage.blue{border-top:4px solid var(--blue)}.stage.purple{border-top:4px solid var(--purple)}
.flow{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:center}
.flow img{width:100%;max-width:300px;height:auto}
@media (max-width:760px){.flow{grid-template-columns:1fr}.flow img{max-width:240px;margin:0 auto}}
/* tables */
.table{border-top:1px solid var(--line);margin-top:10px}
/* Driver page (Oct 2026): the corner numbers across every event, one table per circuit · car · class */
.dr-tbl{width:100%;border-collapse:collapse;font-size:13px}
.dr-tbl th,.dr-tbl td{padding:4px 8px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.dr-tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
.dr-tbl th.num,.dr-tbl td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tr{display:grid;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12.5px;align-items:center}
.tr.head{font-size:10px;color:var(--muted);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.tr.hot{background:var(--soft)}
.corners .tr{grid-template-columns:1.2fr .55fr 2.6fr .7fr}
.corners .crit{color:var(--red);font-weight:800}
.delta{font-family:ui-monospace,Menlo,monospace;font-weight:800}
/* carry forward + plan */
.cf{display:grid;grid-template-columns:96px 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:10px;background:#fff}
@media (max-width:760px){.cf{grid-template-columns:1fr}}
.cf.done{opacity:.55}
.plan{border:2px solid var(--orange);border-radius:14px;padding:18px;margin-top:18px;background:#fff}
.planitem{display:grid;grid-template-columns:auto 1fr auto;gap:10px;background:var(--soft);border-radius:8px;padding:10px;margin-top:8px;font-size:13px;align-items:center}
/* A completed item is struck through; the controls that act on it are NOT. Fading and striking the
whole row made "Put back on the list" and the session links look disabled (UX review, 18). */
.planitem.done>.tag,.planitem.done>div:not(.actions):not(.planitem-act){opacity:.55;text-decoration:line-through}
.planitem.done .linkbtn,.planitem.done .btn,.planitem.done a,.planitem.done .pill{opacity:1;text-decoration:none}
.planitem.done .linkbtn,.planitem.done a{text-decoration:underline}
.check{display:flex;gap:9px;align-items:flex-start;font-size:13px;padding:5px 0}
.check input{width:auto;margin-top:3px}
.check.done>span,.check.done>label{opacity:.5;text-decoration:line-through}
.check.done .linkbtn,.check.done .btn,.check.done a{opacity:1;text-decoration:none}
.check.done .linkbtn,.check.done a{text-decoration:underline}
.inline{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.inline input,.inline select{width:auto;flex:1;min-width:140px}
.note{font-size:12px;color:var(--muted);margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.empty{font-size:13px;color:var(--muted);padding:12px 0}
.callout{border-left:4px solid var(--line);background:var(--soft);padding:10px 14px;border-radius:0 8px 8px 0;margin-top:10px;font-size:13px}
.callout.orange{border-left-color:var(--orange)}.callout.purple{border-left-color:var(--purple)}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px;background:#fff;display:inline-flex;gap:6px;align-items:center}
/* A filter chip is SELECTABLE, so its selected state is filled rather than a shade of border — the
one thing a person has to be able to see at a glance in a row of them. */
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:700}
.chip.on .small{color:var(--paper);opacity:.75}
/* Keyboard focus is visible on every control, not only the ones the browser happens to outline. */
.btn:focus-visible,.linkbtn:focus-visible,.iconbtn:focus-visible,.rowact:focus-visible,
.chip:focus-visible,.tab:focus-visible,.crtab:focus-visible,.crsec:focus-visible{
outline:2px solid var(--orange);outline-offset:2px;border-radius:7px}
.chip button{border:none;background:none;color:var(--muted);padding:0;font-size:14px;line-height:1}
/* HOME dashboard */
.hm{max-width:1160px;margin:0 auto}.hm-sec{margin-top:22px}.hm-sec:first-child{margin-top:0}
.hm-card{margin-top:10px}.hm-card.orange{border-left:4px solid var(--orange)}.hm-card.purple{border-left:4px solid var(--purple)}.hm-card.green{border-left:4px solid var(--green)}
.hm-card h3{margin:0 0 4px;font-size:17px}
.hm-count{display:inline-block;min-width:22px;text-align:center;border-radius:999px;padding:2px 7px;font-size:11px;background:var(--soft);color:var(--ink);margin-left:6px;letter-spacing:0}.hm-count.purple{background:var(--purple);color:#fff}
.hm-know .tr{grid-template-columns:minmax(0,1.6fr) minmax(0,1.1fr) minmax(0,.6fr) minmax(0,1fr) 116px}
.hm-pv{font-size:12.5px;padding:3px 0;display:flex;gap:8px;align-items:center}.hm-pv .tag{font-size:9px;padding:2px 5px}
.hm-rows{display:flex;flex-direction:column}
.hm-row{display:grid;grid-template-columns:auto 1.4fr 1fr 16px;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;font-size:13px}.hm-row:last-child{border-bottom:none}.hm-row:hover .hm-text{text-decoration:underline}
.hm-text{font-weight:600}.hm-ctx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hm-chev{color:var(--muted);font-size:18px;line-height:1}
.tag.orange{border-color:var(--orange);color:var(--orange-ink)}.tag.green{border-color:var(--green);color:var(--green-ink)}.tag.purple{border-color:var(--purple);color:var(--purple)}
.btn.ghost.on{background:var(--soft)}
@media (max-width:720px){.hm-grid{grid-template-columns:1fr}.hm-know .tr{grid-template-columns:1fr 1fr;row-gap:4px}.hm-know .tr.head{display:none}.hm-row{grid-template-columns:auto 1fr 16px}.hm-ctx{grid-column:2;white-space:normal}}
.ev-title{font-size:.55em;font-weight:600;letter-spacing:.04em;color:var(--muted);text-transform:none;margin-left:10px;vertical-align:middle}
.rv-chip{cursor:pointer}.rv-chip:hover{border-color:var(--purple)}
.linkbtn{background:none;border:none;padding:0;color:var(--blue);font-weight:800;font-size:12px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.linkbtn:hover{text-decoration-thickness:2px}
/* Row actions are a pencil and a bin, not the words "edit" and "delete" repeated down every row of
every table (David, 26 Sep). The word survives as the tooltip and the accessible name, so nothing
is lost to a screen reader; only a control that edits a row or destroys a record becomes an icon,
because an icon asserts what it does and "remove" that means detach is a different claim.
The glyph is a mask over currentColor, so there is one copy of each path in the whole app and the
colour follows the button's state rather than being baked into the artwork. */
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;
border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}
.iconbtn:hover{background:var(--soft);color:var(--ink);border-color:var(--muted)}
.iconbtn.danger:hover{color:var(--red);border-color:var(--red)}
.iconbtn::before{content:"";width:15px;height:15px;background:currentColor;
-webkit-mask:var(--ic) center/15px 15px no-repeat;mask:var(--ic) center/15px 15px no-repeat}
.ib-edit{--ic:url('data:image/svg+xml;utf8,')}
.ib-del{--ic:url('data:image/svg+xml;utf8,')}
/* A row that is a sentence with controls on the end needs its own spacing — .rv-out-a and
.cr-actions are flex and already carry a gap. */
.rv-line .iconbtn,.rv-line .linkbtn{margin-left:8px}
.iconbtn{vertical-align:middle}
/* Touch (26 Sep). The test is the POINTER, not the viewport — a phone held in landscape is wide and
still has a finger on it, and a narrow desktop window does not. A 26px icon and a 34px row action
are comfortable with a mouse and a miss with a thumb, so every control that can be tapped gets a
44px target. An inline .linkbtn inside a sentence is deliberately left alone: growing it would
space the prose out, so only the ones in an action row grow. */
@media (pointer:coarse){
.iconbtn{width:44px;height:44px;border-radius:9px}
.btn,.btn.sm{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.actions .linkbtn,.cr-actions .linkbtn,.rv-out-a .linkbtn,.rv-line .linkbtn,.tr .linkbtn,.card>.row .linkbtn,.card>.row .small .linkbtn{min-height:44px;display:inline-flex;align-items:center}
.crtab,.crsec,.rowact{min-height:44px;display:inline-flex;align-items:center}
.rowact{height:auto}
input,select,textarea{min-height:44px}
input[type=checkbox]{width:24px;height:24px}
.chip,.tab,.tabs a{min-height:44px;display:inline-flex;align-items:center}
}
.err{color:var(--red);font-size:12px;margin-top:8px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-size:13px;z-index:50}
pre.txt{white-space:pre-wrap;font:inherit;margin:0}
/* overflow menu (Cancel / Delete live here, not on the main surface) */
.more{position:relative;display:inline-block}
.menu{position:absolute;right:0;top:calc(100% + 4px);background:var(--paper);border:1px solid var(--line);border-radius:10px;min-width:260px;z-index:20;box-shadow:0 8px 24px rgba(0,0,0,.1);padding:6px}
.menu button{display:block;width:100%;text-align:left;background:none;border:none;padding:9px 10px;border-radius:7px;font-size:13px;font-weight:600}
.menu button:hover:not(:disabled){background:var(--soft)}
.menu button .small{display:block;font-weight:400;margin-top:2px}
.menu button.danger{color:var(--red)}.menu button:disabled{opacity:.55;cursor:default}
/* ADMIN — list / detail over the existing admin operations */
.ad-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px;margin-top:6px;align-items:start}
@media (max-width:900px){.ad-grid{grid-template-columns:1fr}}
.ad-list{border-right:1px solid var(--line);padding-right:14px}
.ad-search{margin-bottom:4px}
.ad-scroll{max-height:70vh;overflow:auto}
.ad-item{padding:8px 10px;border-radius:9px;cursor:pointer;border:1px solid transparent}
.ad-item:hover{background:var(--soft)}.ad-item.on{background:#fff;border-color:var(--line)}.ad-item.muted{opacity:.6}
.ad-detail h2{font-size:18px}
.ad-corner{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-top:8px;background:#fff}
.ad-corner.clash{border-color:var(--red)}
.ad-corner-h{display:flex;gap:6px;align-items:center}
.ad-corner-h input{padding:6px 9px}
.ad-corner-b{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.ad-corner-b select{padding:5px 8px;font-size:12px}
.ad-corner-b .chip{cursor:pointer;padding:2px 8px;font-size:11px;color:var(--muted)}
.ad-corner-b .chip.on{border-color:var(--ink);color:var(--ink);background:var(--soft)}
.ad-corner-b .chip.crit{border-color:var(--red);color:var(--red);font-weight:800}
.ad-adv{margin-top:18px;border-top:1px solid var(--line);padding-top:8px}
.tabs a.tab{text-decoration:none}
/* REVIEW — three working panes: what happened · inspect / clean · what survives */
@media (min-width:1001px){.rv-right{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;padding-bottom:20px}}
.rv-con.compact{padding:6px 0;cursor:pointer}.rv-con.compact .rv-con-t{font-size:12.5px}.rv-con.compact:hover{background:var(--soft)}
.rv-con.active{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;margin:6px 0}
.rv-dest{margin-top:8px;font-size:12.5px;font-weight:800;color:var(--green)}.rv-dest.pending{color:var(--red)}
/* The right rail is CAPPED, not proportional: it holds a summary box and a list of conclusions, and a
percentage gave it 612px of a 1800px page that its own content never filled, while the analysis in
the middle was squeezed. The corner rail on the Corners tab is names and one number, so it is
narrower again than the plan checklist's rows of prose. */
.rv-grid{display:grid;grid-template-columns:230px minmax(0,1fr) minmax(280px,300px);gap:18px;margin-top:14px;align-items:start}
.rv-grid.cn-grid{grid-template-columns:200px minmax(0,1fr) minmax(280px,300px)}
@media (min-width:1500px){.rv-grid{grid-template-columns:250px minmax(0,1fr) minmax(300px,330px);gap:26px}.rv-grid.cn-grid{grid-template-columns:210px minmax(0,1fr) minmax(300px,330px)}}
/* .rv-grid.cn-grid outranks a bare .rv-grid, so the stacked phone layout has to name it too */
@media (max-width:1000px){.rv-grid,.rv-grid.cn-grid{grid-template-columns:1fr}.rv-right{order:3}}
/* contextual guide editor: the current text is the editor, one stacked box per field */
.rv-gfield{margin-top:12px}.rv-gfield label{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rv-gfield textarea{font-size:13px;line-height:1.45;min-height:84px}.rv-gf-edited{display:none;font-size:10px;letter-spacing:.06em;color:var(--orange-ink)}
.rv-gfield.changed .rv-gf-edited{display:inline}.rv-gfield.changed textarea{border-color:var(--orange);background:#fffaf3}
.rv-left{border-right:1px solid var(--line);padding-right:10px}
.rv-left .kicker{margin-top:14px}.rv-left .kicker:first-child{margin-top:0}
.rv-nav-item{display:flex;gap:8px;align-items:flex-start;padding:6px 8px;border-radius:8px;font-size:12.5px;cursor:pointer;line-height:1.35}
.rv-nav-item:hover{background:var(--soft)}.rv-nav-item.on{background:#fff;border:1px solid var(--line);font-weight:600}
.rv-nav-item.muted{opacity:.6}
.rv-mark{flex:0 0 14px;color:var(--muted)}.rv-time{flex:0 0 40px;font-size:11.5px;color:var(--muted);padding-top:1px}
.rv-day{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800;margin:10px 0 2px 8px}
.rv-centre{min-width:0}
.rv-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}.rv-head h2{font-size:17px}
.rv-line{font-size:13px;padding:3px 0}.rv-line .small{display:inline-block;min-width:88px}
/* telemetry findings — a finding is a headline with its evidence UNDER it, not a label + value
row, so it cannot reuse .rv-line (whose .small is an 88px label column). */
.tl-f{font-size:13px;padding:6px 0}
.tl-f + .tl-f{border-top:1px solid var(--line)}
.tl-d{display:block;margin-top:3px;font-size:12px;color:var(--muted);line-height:1.5}
.tl-i{font-size:12px;color:var(--muted)}
.rv-corner{font-size:12.5px;padding:4px 0;border-bottom:1px solid var(--soft)}
.rv-add{margin-top:18px;border-top:1px dashed var(--line);padding-top:10px}
.rv-right{border-left:1px solid var(--line);padding-left:16px}
.rv-block{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff;margin-bottom:10px}
.rv-con{padding:8px 0;border-bottom:1px solid var(--soft)}.rv-con:last-child{border-bottom:none}
.rv-con-t{font-size:13px}.rv-con-m{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:4px}
.rv-con-a{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px}
.rv-acc{border-top:1px solid var(--line)}.rv-acc-h{display:flex;justify-content:space-between;padding:9px 2px;font-size:11px;letter-spacing:.14em;font-weight:800;cursor:pointer;text-transform:uppercase}
.rv-acc-b{padding:0 2px 10px}.rv-out{font-size:12.5px;padding:3px 0}
/* A list row opens in place to show what it carries and what can be done with it (24 Sep 2026). */
.rv-out-h{display:flex;gap:6px;align-items:flex-start;cursor:pointer;border-radius:6px;padding:2px 4px;margin:0 -4px}
.rv-out-h:hover{background:var(--soft)}
.rv-out-c{color:var(--muted);margin-top:4px}
.rv-out-t{flex:1 1 auto;min-width:0}
.rv-out-t.done{text-decoration:line-through;color:var(--muted)}
.rv-out.open{border-left:2px solid var(--line);padding-left:6px;margin:6px -0px 6px -8px}
.rv-out-b{padding:4px 0 2px 16px}
.rv-out-a{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.rv-outdone{margin-top:6px}.rv-outdone>summary{cursor:pointer;color:var(--muted)}
.rv-current{max-height:180px;overflow:auto;background:var(--soft);padding:8px 10px;border-radius:8px;font-size:12.5px}
.btn.ghost.danger{color:var(--red)}
/* pending: while a change saves, nothing in the page can start another one */
body.pending #view button,body.pending #view select,body.pending #view input[type=checkbox],body.pending #view .linkbtn,body.pending #view .tl-actions,body.pending #drawer-root button{pointer-events:none;opacity:.5}
body.pending .tl-card,body.pending .rv-con,body.pending .pc-item{opacity:.7}
#pending-pill{position:fixed;top:14px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.06em;z-index:80}
/* Prepare — per-corner knowledge from the full guide model */
.pk{margin:2px 0}.pk-l{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-width:96px;vertical-align:top}.pk-t{font-size:12.5px;white-space:pre-line}
.pk-cell .pk-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}.pk-cell.open .pk-t{display:block;-webkit-line-clamp:unset}
.pk-cell{cursor:pointer}.pk-cell .pk-full{display:none}.pk-cell.open .pk-full{display:block}.pk-cell.open .pk-preview{display:none}
.pk-preview{font-size:12.5px;line-height:1.4}.pk-more{font-size:10.5px;color:var(--purple);white-space:nowrap;font-weight:700}
.cue{font-size:10.5px;color:var(--muted);letter-spacing:.02em;font-weight:500;text-transform:none}.cue.warn{color:var(--orange)}.cue a{color:inherit}
.ck{border-top:1px solid var(--line);padding:8px 0 2px}.ck:first-of-type{border-top:none}
.qe-tt summary{cursor:pointer}
.qe-tyres{border-collapse:collapse;margin-top:6px}.qe-tyres th{font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--muted);text-align:center;padding:2px 4px}.qe-tyres tbody th{text-align:left;padding-right:8px}
.qe-tyres td{padding:2px 3px}.qe-tyres input{width:62px;padding:5px 6px;text-align:center}.qe-tyres .qe-tyres-gap{padding-left:14px}
/* a card's quick editor replaces the card's read-only goal, quote and setup lines while it is open (David's sketch, 16 Sep 2026) */
.tl-body:has(.qe) .tl-intent,.tl-body:has(.qe) .tl-quote,.tl-body:has(.qe) .tl-sc{display:none}
.qe-tp-row{display:flex;gap:6px;align-items:center;margin-top:4px}.qe-tp-row .small{min-width:36px}.qe-tp-row input{width:64px;padding:5px 7px;text-align:center}
/* DRIVE — the on-day ledger */
.drive-actions{display:flex;gap:7px;flex-wrap:wrap}
@media (max-width:760px){.drive-actions{position:sticky;top:0;z-index:15;background:var(--paper);padding:8px 0;margin:0 -4px;width:calc(100% + 8px);border-bottom:1px solid var(--line)}}
.tl-row.cancelled .tl-card{opacity:.6}
.tl-title.muted{text-decoration:line-through;font-weight:600}
.drive-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:26px;margin-top:6px;align-items:start}
@media (max-width:900px){.drive-grid{grid-template-columns:1fr}}
.tl{margin-top:10px;border-left:2px solid var(--line);padding-left:0}
.tl-day{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:18px 0 4px 16px}
.tl-row{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:start;margin:10px 0 0 0}
.tl-time{font-size:13px;font-weight:800;padding-top:12px;text-align:right;position:relative}
.tl-time::after{content:'';position:absolute;right:-16px;top:17px;width:9px;height:9px;border-radius:50%;background:var(--paper);border:2px solid var(--line)}
.tl-approx{color:var(--muted);font-weight:400;margin-left:2px}
.tl-card{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;border:1px solid var(--line);border-left-width:4px;border-radius:10px;padding:10px 14px;background:#fff}
.vbo-best{color:var(--green)}.vbo-gap{color:var(--red)}
.tl-card.click{cursor:pointer}.tl-card.click:hover{box-shadow:0 1px 6px rgba(0,0,0,.08)}
.tl-card.green{border-left-color:var(--green)}.tl-card.orange{border-left-color:var(--orange)}.tl-card.blue{border-left-color:var(--blue)}
.tl-card .tag.green{border-color:var(--green);color:var(--green-ink)}.tl-card .tag.orange{border-color:var(--orange);color:var(--orange-ink)}.tl-card .tag.blue{border-color:var(--blue);color:var(--blue-ink)}
.tl-title{font-weight:800;font-size:14px}
.tl-meta{font-size:12.5px;color:var(--muted);margin-top:3px}
.tl-intent{font-size:12.5px;margin-top:4px}
.tl-quote{font-size:13px;margin-top:6px;color:#3c3a36;font-style:italic}
.tl-text{font-size:13.5px}
.tl-actions{display:flex;gap:12px;align-items:center;margin-top:8px;flex-wrap:wrap}
.tl-link{width:auto;padding:3px 6px;font-size:11px;border-radius:6px}
.qe{border-top:1px dashed var(--line);margin-top:10px;padding-top:10px}
.qe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:760px){.qe-grid{grid-template-columns:1fr 1fr}.tl-row{grid-template-columns:50px 1fr}}
.plan-compact{padding:12px 14px}
.pc-item{display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:start;padding:6px 0;font-size:13px;border-bottom:1px solid var(--soft)}
.pc-item input[type=checkbox]{margin-top:3px!important}
.pc-item:not([draggable]){grid-template-columns:auto 1fr}
.pc-grip{cursor:grab;color:var(--muted);font-size:12px;letter-spacing:-2px;padding-top:2px;user-select:none}.pc-item[draggable]:active .pc-grip{cursor:grabbing}
.pc-item.drop-above{box-shadow:inset 0 2px 0 var(--blue)}.pc-item.drop-below{box-shadow:inset 0 -2px 0 var(--blue)}
.pc-arrows{display:none}
@media (hover:none){.pc-grip{display:none}.pc-arrows{display:flex;flex-direction:column;gap:2px}.pc-arrows .linkbtn{text-decoration:none;font-size:14px;line-height:1}}
/* the text gets the whole row; the runs that cover it sit underneath (16 Sep 2026 — as a fourth column they squeezed the text to a strip) */
.pc-line{display:flex;gap:8px;align-items:baseline}.pc-line .tag{flex:none;font-size:9px;padding:2px 5px}.pc-text{flex:1;min-width:0}.pc-del{flex:none}
.pc-extra{margin-top:2px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.pc-item input[type=checkbox]{width:auto;margin:0}
.pc-item.done .pc-text{opacity:.5;text-decoration:line-through}
.pc-item.done .linkbtn,.pc-item.done .btn,.pc-item.done a,.pc-item.allocated .linkbtn,.pc-item.allocated a{opacity:1}
.pc-text input{padding:4px 8px}
.focus{border-left:4px solid var(--green)}
.focus-item{font-weight:800;font-size:14px;padding:4px 0}
.drawer-bg{position:fixed;inset:0;background:rgba(31,31,31,.35);z-index:60}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--paper);border-left:1px solid var(--line);padding:26px;overflow:auto;z-index:61;box-shadow:-8px 0 30px rgba(0,0,0,.12)}
/* ── TRACK GUIDE (beta/guide.js) ─────────────────────────────────────────────── */
.gd .crumbs{margin-bottom:6px}.gd .crumbs a{color:var(--muted)}
.gd-head{align-items:flex-start}.gd-head h2{margin:0 0 4px}.gd-car select{font-weight:800;font-size:14px;padding:4px 8px}
.gd-tabs{display:flex;gap:2px;border-bottom:2px solid var(--line);margin:14px 0 6px;position:sticky;top:0;background:var(--paper);z-index:5;overflow-x:auto}
/* Track Guides' tabs are the shared .tab rule above; only not-wrapping is theirs. */
.gd-tabs a{white-space:nowrap;text-decoration:none}
.gd-sec{margin:18px 0 6px}.gd-sec h3{margin:0 0 8px}.gd-sec .row h3{margin:0}.gd-sec .row{margin-bottom:8px}
.gd-empty{padding:8px 0;color:var(--muted)}
.gd-filters{gap:8px;flex-wrap:wrap;margin:8px 0}.gd-filters label{display:inline-flex;gap:6px;align-items:center}.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* The events index carried its grid inline, so no media query could reach it and 300px of fixed
columns pushed the page 198px sideways on a phone (measured at 390px, 26 Sep). */
.ev-idx .tr{grid-template-columns:110px minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) 120px 80px}
.ev-idx .tr.click{cursor:pointer}
@media (max-width:720px){.ev-idx .tr{grid-template-columns:1fr 1fr;row-gap:4px}.ev-idx .tr.head{display:none}}
.gd-index .tr{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,.7fr) minmax(0,.8fr) 112px}
.gd-bench .tr{grid-template-columns:.6fr .8fr .8fr 1fr .9fr 1.6fr}.gd-bench input,.gd-bench select{width:100%}
.gd-hist .tr{grid-template-columns:.8fr 1.1fr 1.6fr 1fr 1.2fr .8fr 2.2fr;align-items:start}
.gd-learn{display:inline}.gd-learn+.small{display:inline} /* the KB / changed pill sits on the line it labels */
.gd-map{max-width:100%;max-height:420px;border:1px solid var(--line);border-radius:6px}
.gd-crit{display:block;border-left:4px solid #c0392b}
.gd-corner{border-top:3px solid var(--line);padding:6px 0 10px}.gd-corner.critical{border-top-color:#c0392b}
.gd-crow .chev{align-self:center;margin-right:2px}
.gd-crow{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;padding:8px 0;color:inherit;text-decoration:none}.gd-crow:not(.static):hover{background:rgba(0,0,0,.025)}
.gd-cname{font-size:20px;font-weight:900;letter-spacing:.02em;text-transform:uppercase}.gd-cname input{font:inherit;font-size:16px}
.gd-facts{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;font-weight:700;color:var(--orange-ink)}
.gd-cue{flex-basis:100%;font-size:13px;color:var(--muted)}.gd-cbody{padding:2px 0 6px}.gd-src{margin-top:10px;color:var(--muted)}
.gd-open{padding:4px 0}.gd-nums{display:inline-flex;gap:10px;flex-wrap:wrap}.gd-nums label{display:inline-flex;gap:4px;align-items:center}.gd-nums input{width:56px}
.gd textarea{width:100%;font:inherit;font-size:14px;line-height:1.45;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:#fff}
.gd .more{position:relative;display:inline-block}.gd .more summary{list-style:none;cursor:pointer}.gd .more summary::-webkit-details-marker{display:none}
.gd .more-menu{position:absolute;right:0;top:100%;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:8px 12px;z-index:6;white-space:nowrap}
.linkbtn.danger{color:#c0392b}
/* rich guide text — same rules as the classic read view */
/* Long-form guidance is READ, not scanned: 14px across a 1070px pane is a line nobody wants to
follow to the end (26 Sep). 16px, and the measure capped at about 70 characters — the paragraph
keeps its own width whatever the pane does, which is why this is a max-width and not a column. */
.gr-body{font-size:16px;line-height:1.55;max-width:70ch}
/* ONE disclosure: a chevron that turns, a labelled summary, and the long text in the corner-guide
reading style — 16px on a 70ch measure, which the review named as the pattern to reuse. A long
engineering note is previewed in the list and kept whole in here, never shortened in the record. */
/* One chevron for every expanding row — the Drive card, a Review output row, a guide corner and an
accordion were a 12px triangle, a 10px triangle and nothing at all. It points right when shut and
down when open, so the state is visible rather than implied (design review, 26 Sep). */
.chev{flex:none;width:9px;height:9px;display:inline-block;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(-45deg);transition:transform .12s;opacity:.65;margin-bottom:2px}
.open>.chev,.open .chev,[aria-expanded="true"] .chev,.open>*>.chev{transform:rotate(45deg)}
.disc{margin-top:4px}
.disc>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
font-size:12px;font-weight:700;color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.disc>summary::-webkit-details-marker{display:none}
.disc>summary::before{content:"";width:9px;height:9px;flex:none;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(-45deg) translate(-1px,-1px);transition:transform .12s}
.disc[open]>summary::before{transform:rotate(45deg) translate(-2px,-2px)}
.disc>summary:hover{text-decoration-thickness:2px}
.disc>summary:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:4px}
.disc-b{font-size:16px;line-height:1.55;max-width:70ch;white-space:pre-wrap;margin-top:8px;color:var(--ink)}
@media (pointer:coarse){.disc>summary{min-height:44px}}
.gr .gr-body p{margin:0 0 8px}.gr .gr-body b{font-weight:800}.gr .gr-no{color:#c0392b;font-weight:800}
.gr .gr-h{font-weight:800;margin:10px 0 2px}.gr .gr-li{padding-left:16px;position:relative}.gr .gr-li::before{content:"•";position:absolute;left:4px}
.gr .gr-stamp{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;color:var(--muted);margin:6px 0 2px}
.gr .gr-fact{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--muted);margin:4px 0 6px}
.gr .gr-callout{border-left:4px solid var(--line);background:rgba(0,0,0,.03);padding:8px 12px;margin:8px 0 10px;border-radius:0 4px 4px 0}
.gr .gr-callout .gr-cl{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px}
.gr .gr-callout.crit{border-left-color:#c0392b;background:rgba(192,57,43,.08)}.gr .gr-callout.crit .gr-cl{color:#c0392b}
.gr .gr-callout.wet{border-left-color:var(--blue);background:rgba(64,144,208,.10)}.gr .gr-callout.wet .gr-cl{color:var(--blue)}
.gr-fld{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:12px 0 4px;border-bottom:1px dotted var(--line)}
.gr-fld.racecraft{color:#6b3fa0}.gr-fld.carBehaviour{color:var(--orange-ink)}
.gr-pill-crit{display:inline-block;background:#c0392b;color:#fff;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border-radius:3px}
.gr-geo{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--muted)}
@media (max-width:720px){.gd-index .tr,.gd-bench .tr,.gd-hist .tr{grid-template-columns:1fr 1fr;row-gap:4px}.gd-index .tr.head,.gd-bench .tr.head,.gd-hist .tr.head{display:none}.gd-cname{font-size:17px}}
/* print: one document in the shape of a driver's own track notes — title, general notes, ONE Place | Notes | Min speed
table with every corner in circuit order, then strategy / operations / open questions / setup. Critical corners
carry a bold label and a heavy rule so they read in monochrome. No tabs, no history table, no UI. */
#gd-print{display:none}
@media print{
body.gd-printing > *:not(#gd-print){display:none!important}
body.gd-printing #gd-print{display:block;color:#000;background:#fff;font-size:10.5pt;line-height:1.35}
.gd-print-doc h1{font-size:20pt;font-weight:900;letter-spacing:.01em;margin:0 0 3pt}.gd-print-doc h1 .pd-car{font-weight:600;color:#333}
.gd-print-doc .pd-sub{font-size:9.5pt;color:#333;margin:0 0 2pt}
.gd-print-doc h2{font-size:11.5pt;font-weight:900;letter-spacing:.08em;text-transform:uppercase;border-bottom:1.5pt solid #000;margin:14pt 0 5pt;padding-bottom:2pt;break-after:avoid}
.gd-print-doc .pd-table{border-collapse:collapse;width:100%;margin:10pt 0 4pt;table-layout:fixed}
.gd-print-doc .pd-table thead{display:table-header-group}
.gd-print-doc .pd-table th{font-size:9pt;letter-spacing:.08em;text-transform:uppercase;text-align:left;padding:4pt 6pt;border-bottom:1.5pt solid #000;background:#eee;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.gd-print-doc .pd-table td{vertical-align:top;padding:6pt 6pt 7pt;border-bottom:.75pt solid #999}
.gd-print-doc .pd-table tr{break-inside:auto}
.gd-print-doc .pd-table tr.crit td{border-top:2pt solid #000;background:#f3f3f3;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.gd-print-doc .pd-c1{width:17%}.gd-print-doc .pd-c3{width:11%;text-align:center;font-weight:800;font-size:11pt}
.gd-print-doc .pd-place{font-size:12.5pt;font-weight:900;text-transform:uppercase}.gd-print-doc .pd-crit{font-size:8.5pt;font-weight:900;letter-spacing:.1em;margin-top:2pt}
.gd-print-doc .pd-meta{font-size:8.5pt;color:#333;margin-top:3pt}.gd-print-doc .pd-fld{font-size:8.5pt;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#333;margin:6pt 0 1pt;border-bottom:.5pt dotted #999}
.gd-print-doc .pd-empty{color:#666;font-style:italic}
.gd-print-doc .gr-body p{margin:0 0 4pt}.gd-print-doc .gr-body b{font-weight:800}.gd-print-doc .gr-no{font-weight:900;text-decoration:underline}
.gd-print-doc .gr-h{font-weight:900;margin:5pt 0 1pt}.gd-print-doc .gr-li{padding-left:12pt;position:relative}.gd-print-doc .gr-li::before{content:"•";position:absolute;left:2pt}
.gd-print-doc .gr-stamp{font-size:8pt;color:#666}.gd-print-doc .gr-fact{font-size:9.5pt;color:#333}
.gd-print-doc .gr-callout{border-left:2pt solid #000;padding:2pt 6pt;margin:4pt 0}.gd-print-doc .gr-callout .gr-cl1{font-weight:800}
.gd-print-doc .gr-callout.crit{border-left-width:3pt}.gd-print-doc .gr-callout .gr-cl{display:inline;font-weight:900;letter-spacing:.08em;text-transform:uppercase;font-size:9pt}
.gd-print-doc .pd-foot{margin-top:14pt;padding-top:4pt;border-top:.75pt solid #999;font-size:8.5pt;color:#666}
@page{size:auto;margin:14mm 14mm 16mm}}
.gd-corner{scroll-margin-top:64px}
.gd-filters{justify-content:flex-start}
.imp-banner{background:#e8741a;color:#fff;padding:8px 24px;font-size:13px}.imp-banner .linkbtn{color:#fff;text-decoration:underline;margin-left:8px}
/* ── CAR (beta/car.js): read-only projection of the classic Car tab ─────────────────── */
.cr-card{display:block;color:inherit;text-decoration:none}.cr-card h3{margin:0}.cr-thumb{width:64px;height:48px;object-fit:cover;border-radius:6px}
.cr-cue{margin-top:6px;color:var(--muted)}.cr-photo{width:96px;height:72px;object-fit:cover;border-radius:8px}
.cr-kv{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px solid var(--line);font-size:13px}.cr-kv .small{min-width:0}
.cr-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 24px}
/* Car page editors (Sep 2026): compact field grids for the setup version and dyno forms */
.cr-edit{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:8px}
.cr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 12px}.cr-grid label{margin:0 0 3px}.cr-grid input,.cr-grid select{padding:6px 9px;font-size:13px}
.cr-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.cr-grid4 input{padding:6px 9px;font-size:13px}
.cr-sec{margin-top:16px;font-size:11px;letter-spacing:.14em;font-weight:800;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:4px}
/* The setup form is laid out as the car (24 Sep 2026): a sub-heading per group of readings, and
four corner values as FL FR over RL RR rather than a row of four labelled boxes.
Then (27 Sep) three things that made it hard to read, none of them the fields themselves.
(1) Every block was pinned left by its own max-width, so nine of them stacked in a ~300px
ribbon down a 1250px pane — the form was three times longer than it needed to be and nothing
sat beside anything. They now flow across the pane and each one is bounded.
(2) A block's heading was SMALLER (10px) than the field labels under it (11px) and the same
weight, colour and case, so "CAMBER" did not read as the title of the four boxes beneath it —
the whole section arrived as one stream of uppercase. The title is now the larger of the two
and takes the ink colour, and the labels under it step back.
(3) Nothing separated one reading from the next. A rule under each title and a box around each
block does it; grouping alone never did.
Two calls inside that grid. Rows are EQUAL HEIGHT, because three different bottom edges in one
row is the same noise the boxes were meant to remove, and the fields sit at the top of each box
so the spare space under a short one never reads as a field that failed to render. And it is
auto-FIT rather than auto-fill: a section of two wide blocks (the anti-roll bars) leaves a track
no row ever occupies, which auto-fill keeps as a dangling empty column beside them. */
.cr-blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px;align-items:stretch;margin-top:6px}
.cr-block.boxed{border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px 14px}
.cr-block.wide{grid-column:span 2}
.cr-block.full{grid-column:1/-1}
/* Below two columns a span is not a span — it would add an implicit column and break the grid. */
@media(max-width:640px){.cr-block.wide,.cr-block.full{grid-column:auto}}
.cr-sub{margin-top:10px;margin-bottom:4px;font-size:11px;letter-spacing:.1em;font-weight:800;text-transform:uppercase;color:var(--ink)}
.cr-block .cr-sub{margin:0 0 9px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.cr-block label{font-size:10px;letter-spacing:.1em;color:var(--muted)}
/* Inside a block the box is the boundary, so the fields fill it instead of stopping short. */
.cr-block .cr-corners,.cr-block .cr-pair{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr))}
.cr-corners{display:grid;grid-template-columns:repeat(2,minmax(0,110px));gap:6px 10px;max-width:240px}
.cr-pair{display:grid;grid-template-columns:repeat(2,minmax(0,150px));gap:6px 12px;max-width:320px}
.cr-corners label,.cr-pair label{margin:0 0 3px}
.cr-corners input,.cr-corners select,.cr-pair input,.cr-pair select{padding:6px 9px;font-size:13px;width:100%;box-sizing:border-box}
.cr-calc{margin-top:5px;font-variant-numeric:tabular-nums;color:var(--muted)}
/* A section that can be edited says so with a framed button beside its heading. The edit link
used to sit INSIDE the kicker at 11px: present, and 23x17px halfway down a long page, which is
why gear ratios read as not editable at all (David, 24 Sep 2026). */
.cr-kick{display:flex;align-items:center;gap:12px;margin-top:26px;flex-wrap:wrap}
/* a principle is a standing truth with its reasoning under it — the rule reads first, in the
purple the classic tab gives it, and the detail sits beneath rather than beside */
.cr-prins{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.cr-prin{padding:9px 12px;background:var(--soft);border:1px solid var(--line);border-left:2px solid var(--purple);border-radius:0 8px 8px 0}
.cr-prin b{display:block;margin-bottom:3px}
.cr-prin .small{line-height:1.5}
/* The Setup view is the sheet (25 Sep 2026); css/setup-sheet.css owns everything inside .ss. */
.cr-sheet{padding:14px 16px}
/* A car is five places to work (25 Sep 2026): local destinations, each its own route. */
.crtabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:2px solid var(--line);margin:14px 0 16px}
/* .crtab's typography is the shared .tab rule above; only the count badge is its own. */
.crtab-n{font-size:11px;font-weight:800;background:var(--soft);border-radius:999px;padding:1px 6px;margin-left:4px;font-variant-numeric:tabular-nums}
.crtab.on .crtab-n{background:#fff8ee;color:var(--orange-ink)}
.btn.ghost.on{border-color:var(--orange);color:var(--orange-ink)}
/* A job: title and priority, its whole note when opened, finishing controls kept apart. */
.cr-job{border-bottom:1px solid var(--line)}
.cr-job:last-child{border-bottom:0}
.cr-job-h{display:flex;align-items:baseline;gap:8px;padding:7px 4px;cursor:pointer;border-radius:6px}
.cr-job-h:hover{background:var(--soft)}
.cr-job-c{flex:0 0 10px;color:var(--muted);font-size:10px}
.cr-job-t{flex:1 1 auto;min-width:0}
.cr-job.open .cr-job-t{font-weight:700}
.cr-job-b{padding:2px 4px 10px 22px}
/* The version editor: a section at a time, each showing how many of its settings have changed. */
/* The editor shows ONE section at a time, so this row is the only way to the rest of the setup.
It was transparent borders and muted text — a row of grey labels, not a row of controls — and the
selected one was the only thing that looked clickable. Every section is now a real control with
the selected one filled, and the row says what it is for (David, 27 Sep). */
.crsecs{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin:10px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.crsec-lab{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.crsec{border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:7px 10px;font-size:12px;font-weight:700;color:var(--ink);cursor:pointer}
.crsec:hover{background:var(--soft);border-color:var(--muted)}
.crsec.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.crsec.on .crsec-n{background:var(--paper);color:var(--ink)}
.crsec-n{font-size:10px;font-weight:800;background:var(--orange);color:#fff;border-radius:999px;padding:0 5px;margin-left:5px}
.cr-pane{min-height:120px}
/* Comparison and review-before-save share one table shape. */
.cr-cmp .tr{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)}
.cr-blank{color:var(--muted);font-style:italic}
.cr-frozen{font-size:11px;color:var(--muted)}
/* The tyres on the car, laid out AS the car — FL FR over RL RR, the setup sheet's own order, so
the two read the same way round. A corner with nothing recorded still has a box: the gap is the
information. */
.cr-tyre-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.cr-tyre{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff}
.cr-tyre.empty{background:var(--soft);border-style:dashed}
.cr-tyre-c{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.cr-tyre-c .small{letter-spacing:0;text-transform:none;font-weight:400}
.cr-tyre-n{font-size:13px}
.cr-tyre-pick{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;align-items:center;margin-top:8px}
@media (max-width:640px){.cr-tyre-grid{grid-template-columns:1fr}}
.cr-laps .tr{grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr)}
/* Printing the sheet prints the version ON SCREEN — the guide's mechanism, one print root.
The hide-everything rule has to EXCLUDE the print root (`:not(#cr-print-root)`) rather than rely on
a later rule out-specifying it: it carries !important, which no plain rule can beat, so the root was
being hidden along with the page and the sheet printed blank. And the pair belongs inside @media
print — outside it, a browser that never fires `afterprint` leaves the app itself blank on screen. */
#cr-print-root{display:none}
body.cr-printing #cr-print-root .ss-car{font-size:20px;font-weight:800;margin-bottom:10px}
@media print{
body.cr-printing>*:not(#cr-print-root){display:none!important}
body.cr-printing #cr-print-root{display:block;color:#000;background:#fff}
}
@page{size:A4 portrait;margin:12mm}
.cr-kick .kicker{margin-top:0}
.cr-chart{max-width:100%;height:auto;border:1px solid var(--line);border-radius:6px;background:#fff}
.cr-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
/* Each .tr is its OWN grid, so a track sized from content resolves differently row by row: the head's
action cell is empty, `auto` collapsed to 0 and the fr tracks took the space, putting the headings
up to 329px right of their values (measured, 26 Sep). Every track is now content-independent, so
all the rows of a table agree by construction. */
.cr-hist .tr{grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1.2fr) minmax(0,2fr) 272px}
.cr-dyno .tr{grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,2fr)}
@media (max-width:720px){.cr-hist .tr,.cr-dyno .tr{grid-template-columns:1fr 1fr;row-gap:4px}.cr-hist .tr.head,.cr-dyno .tr.head{display:none}}
/* Session page corner-notes grid (Sep 2026): one row per circuit corner, open to write */
.cn{margin-top:6px}.cn-row{border-top:1px solid var(--line);padding:6px 0}.cn-row summary{cursor:pointer;font-size:12.5px;list-style:none}.cn-row summary::-webkit-details-marker{display:none}
.cn-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}.cn-fields label{font-size:10px}@media(max-width:640px){.cn-fields{grid-template-columns:1fr 1fr}}
.gd-gap{color:var(--orange,#c2410c)}
/* the car, light and blurred, behind its card — a cue, never a distraction */
.cr-card,.cr-hero{position:relative;overflow:hidden;isolation:isolate}.cr-hero{padding:12px 14px;border-radius:12px}
.cr-bg{position:absolute;inset:-12px;background-size:cover;background-position:center;filter:blur(10px) saturate(.7);opacity:.14;z-index:-1;pointer-events:none}
.gd-lap{color:var(--green,#1a7f37)}
.pc-head{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:10px 0 2px}
.pc-item.allocated .pc-text{opacity:.6;text-decoration:line-through}
.rs-print{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
/* Session editor: the same sections as the read view, in the same order, so editing mirrors reading */
.ss-form .ss-fs{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--orange-ink,#9a3412);margin:16px 0 6px;padding-top:10px;border-top:1px solid var(--line)}
.ss-form .ss-fs:first-child{margin-top:0;padding-top:0;border-top:0}
.ss-form .ss-save{justify-content:flex-end;margin-top:14px;position:sticky;bottom:0;background:var(--paper);padding:10px 0;border-top:1px solid var(--line)}
#dr-print{display:none}
@media print{
body.dr-printing > *:not(#dr-print){display:none!important}
body.dr-printing #dr-print{display:block;color:#000;background:#fff;font-size:10pt;line-height:1.3}
.rs-doc h1{font-size:18pt;font-weight:900;margin:0 0 2pt}.rs-doc h1 .rs-car{font-weight:600;color:#333;font-size:13pt}
.rs-doc .rs-meta{font-size:9pt;color:#333;margin:0 0 4pt}
.rs-doc h2{font-size:10.5pt;font-weight:900;letter-spacing:.08em;text-transform:uppercase;border-bottom:1.5pt solid #000;margin:12pt 0 5pt;padding-bottom:2pt;break-after:avoid}
.rs-doc table{border-collapse:collapse;width:100%}
.rs-plan th{font-size:8.5pt;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:3pt 5pt;border-bottom:1pt solid #000}
.rs-plan td{padding:4pt 5pt;border-bottom:.5pt solid #999;font-size:9.5pt;vertical-align:top}
.rs-plan .rs-tick{width:16pt}.rs-plan td.rs-tick{border:.75pt solid #000;height:11pt}
.rs-sess{break-inside:avoid;border:1pt solid #000;border-radius:2pt;padding:5pt 6pt;margin:0 0 6pt}
.rs-sess .rs-h{display:flex;align-items:baseline;gap:6pt;border-bottom:.5pt solid #999;padding-bottom:2pt}
.rs-t{font-family:ui-monospace,Menlo,monospace;font-weight:900;font-size:11pt}
.rs-name{font-size:12pt;font-weight:900;text-transform:uppercase}
.rs-pill{font-size:7.5pt;font-weight:900;letter-spacing:.08em;text-transform:uppercase;border:.75pt solid #000;padding:0 3pt;border-radius:6pt}
.rs-sub{font-size:8.5pt;color:#333;margin-top:2pt}
.rs-goal{font-size:9.5pt;margin-top:3pt}
.rs-row{display:flex;gap:6pt;margin-top:5pt}.rs-bot{align-items:stretch}
.rs-f{flex:1 1 auto}
.rs-fl{display:block;font-size:7.5pt;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#333;margin-bottom:1pt}
.rs-fv{display:block;border:.75pt solid #000;border-radius:2pt;min-height:15pt;padding:2pt 3pt;font-size:10pt;font-weight:700}
/* tyres on their own row at a fixed width, notes full width beneath: side by side, long notes squashed the table (16 Sep 2026) */
.rs-tpwrap{width:62%}.rs-notes{flex:1 1 auto;width:100%}
.rs-tp td.rs-tt{background:#fafafa}
.rs-tp th{font-size:7.5pt;text-align:center;padding:1pt;border:.5pt solid #999}
.rs-tp tbody th{text-align:left;font-size:7.5pt;text-transform:uppercase;padding:1pt 3pt}
.rs-tp td{border:.75pt solid #000;height:14pt;width:20%;text-align:center;font-size:10pt;font-weight:700}
.rs-lines>div{border-bottom:.5pt solid #999;height:13pt}
.rs-notes .rs-lines,.rs-notes .rs-written{border:.75pt solid #000;border-radius:2pt;padding:2pt 3pt}
.rs-written{font-size:9pt;white-space:pre-wrap}
.rs-setup,.rs-mark{font-size:9.5pt;padding:3pt 0 3pt 2pt;border-left:2pt solid #000;padding-left:5pt;margin:0 0 5pt;break-inside:avoid}
.rs-mark{border-left-width:.75pt;color:#333}
@page{size:A4 portrait;margin:12mm 12mm 14mm}}
/* Sim practice on Prepare (15 Sep 2026): reads like the Drive timeline — a run, what it was for,
what it taught — but purple-keyed and plainly labelled, because none of it is track evidence. */
.sp-purpose{border:1px solid var(--line);border-left:4px solid var(--purple);border-radius:12px;padding:13px 16px;background:#fff;margin-top:12px}
.sp-purpose .sp-text{font-size:15px;font-weight:600;margin-top:3px}
.sp-purpose .sp-text.empty{font-weight:400;color:var(--muted);font-size:13px}
.sp-purpose .sp-text[onclick]{cursor:pointer}
.sp-prog{display:grid;grid-template-columns:1fr auto auto;gap:6px 14px;align-items:baseline;font-size:13px}
.sp-grp{font-weight:800}
.sp-delta{font-weight:800}.sp-delta.better{color:var(--green)}
.sp-caveat{font-size:12px;color:var(--muted);margin-top:10px;padding-top:9px;border-top:1px solid var(--soft)}
.sp-s{border:1px solid var(--line);border-radius:14px;background:#fff;margin-top:10px;padding:14px 16px}
.sp-h{display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:baseline}
.sp-date{font-weight:600;font-size:12px;color:var(--muted)}
.sp-name{font-size:14px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.sp-rig{font-size:12px;color:var(--muted);margin-top:2px}
.sp-lap{font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-size:16px;font-weight:800;text-align:right}
.sp-lap .u{font-size:9.5px;color:var(--muted);font-weight:600;letter-spacing:.08em;display:block;text-transform:uppercase}
.sp-body{margin-left:74px}
.sp-goal{font-size:13px;margin-top:8px}
.sp-quote{font-size:13px;margin-top:7px;padding-left:11px;border-left:2px solid var(--line);color:#3a3a3a}
.sp-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:11px;flex-wrap:wrap}
.sp-cap{margin-top:11px;padding-top:11px;border-top:1px solid var(--soft)}
.sp-fl{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.sp-find{border:1px solid var(--line);border-left:3px solid var(--purple);border-radius:10px;padding:11px 13px;margin-top:9px;background:var(--soft)}
.sp-find .sp-ft{font-size:13px;font-weight:600;margin-top:2px}
.sp-done{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-top:7px;flex-wrap:wrap}
.sp-done b{color:var(--ink);font-weight:600}
.cue.sim{border-color:var(--purple);color:var(--purple)}
.sp-cands{border:1px dashed var(--line);border-radius:12px;padding:13px 16px;margin-top:12px;background:var(--soft)}
.sp-cand{display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:13px;margin-top:6px}
@media (max-width:760px){.sp-prog{grid-template-columns:1fr}.sp-h{grid-template-columns:1fr}.sp-body{margin-left:0}.sp-lap{text-align:left}.sp-cand{grid-template-columns:1fr}}
/* Review's left pane: sim practice is listed but never selectable — selecting means "inspect this
evidence", and sim work is not evidence of the day. */
.rv-nav-item.rv-sim{padding:0}
.rv-simlink{display:block;padding:6px 8px;text-decoration:none;color:var(--muted);font-size:12px;border-left:2px solid var(--purple)}
.rv-simlink:hover{color:var(--ink);background:var(--soft)}
/* conditions class picker — Dry | Mixed | Wet as radio pills (David prefers no dropdowns) */
.cc-pick{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 2px}
.cc-opt{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer;background:#fff;text-transform:none;letter-spacing:0}
.cc-opt input{margin:0}
.cc-opt:has(input:checked){background:var(--soft);border-color:#222}
.cc-dry:has(input:checked){border-color:var(--green);color:var(--green)}
.cc-wet:has(input:checked){border-color:var(--blue);color:var(--blue)}
.cc-mixed:has(input:checked){border-color:var(--orange);color:var(--orange-ink)}
/* ── Drive type scale (17 Sep 2026) ── one system for timeline cards, the Event plan and the inline editors:
card title 15/600 · body and the driver's words 14/1.4 · supporting metadata 12 · times and measurements in the body
face with tabular numerals · card padding 12 · related lines 4 · groups 8 · cards 12. Colour is for states and the
lap delta only, always beside a label. */
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}
.k{font-size:12px;color:#6c665d;font-weight:400;letter-spacing:0;text-transform:none}
.drive-grid{grid-template-columns:minmax(0,65fr) minmax(0,35fr);gap:24px}
@media (max-width:900px){.drive-grid{grid-template-columns:1fr}}
.tl{margin-top:8px}
.tl-row{grid-template-columns:72px minmax(0,1fr);gap:12px;margin:12px 0 0}
.tl-time{font-size:13px;font-weight:600;line-height:1.25;padding-top:13px;font-variant-numeric:tabular-nums}
.tl-time::after{top:17px}
.tl-row.compact .tl-time{padding-top:9px}.tl-row.compact .tl-time::after{top:13px}
.tl-tsub,.tl-tu{display:block;font-size:11px;font-weight:400;color:#6c665d}
.tl-tu{font-size:12px;font-weight:600}
.tl-card{display:block;padding:12px;border-radius:10px}
.tl-card.compact{padding:8px 12px;border-left-width:2px}
.tl-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.tl-hl{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;min-width:0}
.tl-hl .tag,.tl-hl .pill{font-size:10px;padding:2px 6px;align-self:center;letter-spacing:.06em}
.tl-title{font-size:15px;font-weight:600;line-height:1.3}
.tl-title.muted{text-decoration:line-through;font-weight:600}
.tl-hact{display:flex;gap:14px;flex:none;align-items:baseline;flex-wrap:wrap;justify-content:flex-end}
.tl-hact .linkbtn,.tl-actions .linkbtn,.tl-plan .linkbtn,.tl-menu .linkbtn{font-size:13px;font-weight:600}
.tl-who{margin-top:4px}
.tl-view{margin-top:4px}
.tl-g{margin-top:8px}
.tl-g > * + *{margin-top:4px}
.tl-line{font-size:14px;line-height:1.4;color:var(--ink)}
.tl-sub{font-size:12px;line-height:1.4;color:#5f5a52}
.tl-text{font-size:14px;line-height:1.4;white-space:pre-line;font-style:normal;color:var(--ink);margin:0}
.tl-line b,.tl-text b,.tl-sub b{font-weight:600}
.tl-line .pill{font-size:10px;padding:2px 6px}
.mt-btn{font-size:12px!important;font-weight:600;margin-left:2px}
.vbo-best{color:inherit}.vbo-gap{color:var(--red);font-weight:600}
.tl-more > summary{font-size:12px;color:var(--blue);cursor:pointer;font-weight:600;width:max-content}
.tl-more > div{font-size:13px;line-height:1.4;margin-top:4px}
.tl-plan{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:14px}
.tl-plan .chip{font-size:13px;padding:2px 8px}
.tl-link{width:auto;max-width:100%;padding:5px 8px;font-size:13px;border-radius:6px}
.tl-actions{display:flex;gap:6px 14px;align-items:baseline;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px solid var(--soft)}
.tl-note{flex-wrap:nowrap;align-items:baseline}
.tl-ntext{font-size:14px;line-height:1.4;white-space:pre-line;min-width:0;overflow-wrap:anywhere}
.tl-menu{position:relative;flex:none}
.tl-menu .menu{min-width:140px}
.tl-card:has(.qe) .tl-view{display:none}
/* the editor: the card becoming editable */
.qe{border-top:1px solid var(--line);margin-top:8px;padding-top:12px}
.qe label{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:#5f5a52;margin:0 0 4px}
.qe label .k{font-weight:400}
.qe input:not([type=checkbox]):not([type=radio]):not([type=file]),.qe select{height:36px;padding:6px 10px;font-size:14px;border-radius:8px}
.qe textarea{font-size:14px;line-height:1.4;padding:8px 10px;field-sizing:content;min-height:96px;border-radius:8px}
.qe .qe-tyres input{height:32px!important;padding:4px 6px!important}
.qe-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 12px}
.qe-group + .qe-group{margin-top:12px;padding-top:12px;border-top:1px solid var(--soft)}
.qe-group > label:not(:first-child),.qe-group > .qe-grid + label{margin-top:8px}
.qe-save{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.qe .err:empty{display:none}
/* the Event plan */
.plan-wrap > summary{list-style:none;cursor:pointer;display:flex;gap:6px;align-items:baseline;margin-top:0}
.plan-wrap > summary::-webkit-details-marker{display:none}
.plan-wrap > summary::before{content:'▾';font-size:11px}
.plan-wrap:not([open]) > summary::before{content:'▸'}
.plan-compact{padding:12px}
.pc-item{font-size:14px;line-height:1.4;padding:8px 0;gap:8px}
.pc-head{font-size:11px;margin:12px 0 0;letter-spacing:.08em}
.pc-line .tag{font-size:10px;padding:1px 5px}
.pc-extra{font-size:13px;margin-top:4px;gap:4px 10px}
.pc-extra .linkbtn{font-size:13px;font-weight:600}
.pc-item.allocated .pc-text{opacity:1;text-decoration:none}
.pc-item.done .pc-text{opacity:.55;text-decoration:line-through}
.pc-ses{display:inline-flex;gap:4px;align-items:baseline}
.pc-add input,.pc-add select{height:36px;padding:6px 10px;font-size:14px}
@media (max-width:760px){.tl-row{grid-template-columns:56px minmax(0,1fr);gap:10px}.tl-head{flex-wrap:wrap}.tl-hact{justify-content:flex-start}.tl-time::after{display:none}}
.cc-opt{white-space:nowrap}
.photo-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.photo-strip a{display:flex;flex-direction:column;gap:2px;text-decoration:none;max-width:140px}
.photo-strip img{width:140px;height:96px;object-fit:cover;border-radius:6px;border:1px solid var(--line);background:var(--soft)}
@media (max-width:760px){.photo-strip a{max-width:104px}.photo-strip img{width:104px;height:72px}}
.gp-row{border-top:1px solid var(--soft);padding:8px 0}
.gp-row .gp-h{display:flex;gap:6px;align-items:baseline;font-size:14px;text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink);margin:0 0 4px}
.gp-row textarea{font-size:14px;line-height:1.4;padding:8px 10px;field-sizing:content}
.gp-row input[type=checkbox]{width:auto;flex:none;margin:0}
.gp-row .gp-h b{font-weight:600}
.rs-id{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:8pt;color:#555;margin-left:auto;padding-left:10px}
.day-totals{margin-top:8px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font-size:14px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.day-totals .k{font-size:12px}
/* ── Results at the right (22 Sep 2026, Option A) ── a completed run reads down the left and its data down the right,
in the same place on every card. The card is a container, so the panel drops under the narrative on a narrow card
rather than at a viewport width that says nothing about how wide this card actually is. */
.tl-card{container-type:inline-size}
.tl-2col{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;align-items:start}
.tl-narr{min-width:0}
@container (max-width:760px){.tl-2col{grid-template-columns:1fr}}
@supports not (container-type:inline-size){@media (max-width:1100px){.tl-2col{grid-template-columns:1fr}}}
.tl-res{border:1px solid var(--line);border-radius:8px;background:var(--soft);padding:12px;align-self:start}
.tl-res > * + *{margin-top:8px}
.rp-head .rp-lap{font-size:24px;font-weight:600;line-height:1.15;margin-top:2px}
.rp-delta{font-size:13px;color:var(--red);font-weight:600;margin-top:2px}
.rp-delta .k{font-weight:400;color:#6c665d}
.rp-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.rp-grid.rp-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rp-kv{display:flex;flex-direction:column;gap:1px;min-width:0}
.rp-kv b{font-size:14px;font-weight:600}
.rp-sec{border-top:1px solid var(--line);padding-top:8px}
.rp-cond{border-top:1px solid var(--line);padding-top:8px;font-size:13px;line-height:1.4}
.rp-cond .pill{font-size:10px;padding:2px 6px}
.tp-grid{border-collapse:collapse;margin-top:4px;font-variant-numeric:tabular-nums}
.tp-grid th,.tp-grid td{padding:2px 10px 2px 0;text-align:right;font-size:13px;font-weight:400}
.tp-grid thead th{font-size:12px;color:#6c665d;font-weight:600}
.tp-grid tbody th{text-align:left;font-size:12px;color:#6c665d;font-weight:600;padding-right:14px}
.tl-foot{margin-top:8px;padding-top:8px;border-top:1px solid var(--soft)}
.tl-att{display:flex;flex-wrap:wrap;gap:4px 10px}
.drive-grid.one{grid-template-columns:minmax(0,1fr)}
.plan-strip{margin-top:10px;border:1px solid var(--line);border-radius:10px;background:var(--paper);padding:8px 12px}
.plan-strip > summary{list-style:none;cursor:pointer;display:flex;gap:6px;align-items:baseline;margin-top:0}
.plan-strip > summary::-webkit-details-marker{display:none}
.plan-strip > summary::before{content:'▸';font-size:11px}
.plan-strip[open] > summary::before{content:'▾'}
.plan-strip .plan-compact{margin-top:4px;border:none;padding:0 0 4px}
.tl-att a{max-width:min(100%,300px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}
/* narrow card: the result comes first, then the account of the run (spec §9) */
@container (max-width:760px){.tl-2col{display:flex;flex-direction:column}.tl-2col .tl-res{order:-1;width:100%}.tl-2col .tl-narr{min-width:0;width:100%}}
/* named sections with their own rule (David, 22 Sep 2026) */
.tl-gh{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#6c665d;margin-bottom:4px}
.tl-narr .tl-g + .tl-g,.tl-view > .tl-g + .tl-g{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.tl-foot .tl-gh{margin-bottom:4px}
.pc-open{color:var(--red);font-weight:700}
.tl-hl-lap{margin-left:2px}
.tl-chev{color:#6c665d;margin-left:4px}
/* ── Three columns when a card is open (22 Sep 2026): the account, the result, the car ── */
.tl-2col.tl-3col{grid-template-columns:minmax(0,1fr) 250px 250px}
@container (max-width:900px){.tl-2col.tl-3col{grid-template-columns:minmax(0,1fr) 250px}}
@container (max-width:760px){.tl-2col.tl-3col{display:grid;grid-template-columns:1fr 1fr}.tl-2col.tl-3col .tl-narr{grid-column:1 / -1}.tl-2col.tl-3col .tl-res{order:0;width:auto}}
@container (max-width:540px){.tl-2col.tl-3col{grid-template-columns:1fr}}
.tl-res.mini{width:235px}
.tl-res.mini .rp-lap{font-size:22px}
.tl-car .cp-h{font-size:13px;font-weight:600;margin-bottom:2px}
.tl-car .cp-sec{border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
.tl-car .tl-gh{margin-bottom:6px}
.tc-grid-h{display:block;text-align:center;margin-top:4px}
.tc-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px}
.tc{border:1px solid var(--line);border-radius:6px;padding:6px;background:#fff}
.tc.empty{opacity:.6}
.tc-w{font-size:12px;font-weight:700;letter-spacing:.04em}
.tc-p{display:flex;gap:10px;margin-top:2px}
.tc-p > div,.tc-t > div{display:flex;flex-direction:column;line-height:1.2}
.tc-p b,.tc-t b{font-size:14px;font-weight:600}
.tc-t{display:flex;gap:8px;margin-top:4px;border-top:1px solid var(--soft);padding-top:4px}
.tc-t b{font-size:13px;font-weight:500}
.tc-r{margin-left:3px}
.tc-legend{display:block;margin-top:6px;line-height:1.35}
.tl-assist{border-left:2px solid var(--line);padding-left:8px}
.qe-att{display:flex;flex-direction:column;gap:6px}
.qe-att-r{display:grid;grid-template-columns:minmax(0,1.4fr) auto minmax(0,1fr);gap:8px;align-items:center}
.qe-att-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.qe-add input{max-width:240px}
.cp-h .linkbtn{font-size:13px;font-weight:600}
.cp-name{font-weight:400;color:#5f5a52}
@media (max-width:760px){.qe-att-r{grid-template-columns:1fr}}
.tl-att-i{display:inline-flex;gap:4px;align-items:baseline;max-width:100%}
.rp-lap{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rp-vmax{font-size:12px;font-weight:400;text-align:right;white-space:nowrap}
.rp-vmax b{font-size:14px;font-weight:600}
.rp-lap{flex-wrap:wrap}
.rp-lapv{min-width:0}
.tl-res.mini{width:250px}
.tl-res.mini .rp-vmax b{font-size:13px}
/* Documents on an event (23 Sep 2026) — the file is the authority, so its own link leads; the read
text sits under a provenance line, because a PDF's text is a transcription and a Word file's is not. */
.doc-row{border:1px solid var(--line);border-radius:9px;background:var(--paper);padding:10px 12px;margin-top:8px}
.doc-h{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;min-width:0}
.doc-h a{font-weight:600;text-decoration:underline;text-underline-offset:2px;min-width:0;overflow-wrap:anywhere}
.doc-h a:hover{text-decoration-thickness:2px}
.doc-h .tag{flex:none}
.doc-a{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-top:6px}
.doc-t{margin-top:8px}
.doc-t:empty{margin-top:0}
.doc-src{font-size:12px;color:var(--muted);padding-bottom:6px;border-bottom:1px solid var(--soft);margin-bottom:8px}
.doc-text{white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.5;
margin:0 0 6px;max-height:420px;overflow:auto;background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
/* an inline tick box reads as a sentence, not as a form field, so the uppercase label rules are undone */
label.chk{display:flex;gap:8px;align-items:flex-start;font-size:13px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink);line-height:1.4}
label.chk input{width:auto;flex:none;margin-top:2px}
/* ── Review checklist (23 Sep 2026) ────────────────────────────────────────────
The left column is a list of work that drains: TO REVIEW at the top with a live
count, COMPLETED and ALSO ON THE DAY collapsed beneath it. A row's box is the
tick; the row itself still opens it. Nothing is ever hidden, only folded. */
.rv-grouphead{display:flex;align-items:center;gap:8px;margin:14px 0 2px}
.rv-grouphead .kicker{margin:0}
.rv-count{font-size:11px;font-weight:800;line-height:1;padding:3px 6px;border-radius:999px;background:var(--soft);color:var(--muted);font-variant-numeric:tabular-nums}
.rv-count.hot{background:var(--purple);color:#fff}
.rv-group{margin-top:14px}
.rv-group>summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;padding:2px 0}
.rv-group>summary::-webkit-details-marker{display:none}
.rv-group>summary::after{content:'▸';color:var(--muted);font-size:10px;margin-left:auto}
.rv-group[open]>summary::after{content:'▾'}
.rv-group>summary .kicker{margin:0}
.rv-hint{padding:2px 8px 6px;line-height:1.35}
.rv-box{flex:0 0 14px;color:var(--muted);cursor:pointer;line-height:1.35;user-select:none}
.rv-box:hover{color:var(--ink)}
.rv-box.flat{cursor:default}
.rv-box.flat:hover{color:var(--muted)}
.rv-txt{flex:1 1 auto;min-width:0}
.rv-lens{margin-bottom:2px}
.rv-lens .rv-txt{font-weight:600}
/* the tick control on an evidence pane, above the conclusion box */
.rv-markbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}
.rv-markbar.done{color:var(--muted);font-size:13px}
/* the notes lens: one block per run, the one being filed against is marked */
.rv-notesblk{border-left:3px solid var(--line);padding:2px 0 8px 12px;margin-top:12px}
.rv-notesblk.on{border-left-color:var(--purple)}
.rv-notesblk h3{margin:0}
/* Gearing chart on the Car page — ratio-speed diagram computed from the stored components */
.cr-gx{display:block;width:100%;height:auto;margin:4px 0 10px}
.cr-gxt .tr{grid-template-columns:64px repeat(6,minmax(0,1fr))}
.cr-gxt .tr{grid-template-columns:54px repeat(8,minmax(0,1fr))}
/* the pickers: equal columns, controls bottom-aligned so a label that wraps to two lines
does not push its own select down out of line with the others */
.cr-gxc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:12px}
.cr-gxc>div{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.cr-gxc select{width:100%;min-width:0}
@media(max-width:820px){.cr-gxc{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cr-gxt .tr>div:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
/* ── Review → Corners (Oct 2026): every traversal of a corner as an observation ───────────── */
/* 06: a selectable filter is NOT a status pill. Framed controls with a real tick, on a grid so the
time, the name and the metadata line up down the columns instead of each control sizing itself. */
/* A driver who is drawn but not counted: their colour, their run count, and the tick that counts them.
The tick is a real control at a real size, not a line of text with a box in it. */
/* The G ball: one execution of mine against one of theirs, on the day's own hull. Fixed size rather
than fluid - a polar plot has no useful wide form, and at 230px every 15-degree bin is legible. */
.cn-gwrap{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:flex-start;margin:8px 0 4px}
.cn-gball{flex:0 0 auto;border:1px solid var(--line);border-radius:10px;background:#fff}
.cn-glegend{display:flex;flex-direction:column;gap:6px;min-width:200px;flex:1 1 220px;align-self:center}
.cn-comboscale{display:flex;justify-content:space-between;color:var(--muted);margin-top:1px}
.cn-glegend span{display:inline-flex;align-items:center;gap:6px}
.cn-glegend i{display:inline-block;width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.cn-glegend i.cn-dash,.cn-glegend i.cn-swatch-band{border-radius:2px;height:8px;width:12px}
.cn-gnote{color:var(--muted)}
.cn-gnote i{margin:0 3px 0 2px;vertical-align:-1px}
.cn-gspan{margin-top:6px}
.cn-lines{display:block;border:1px solid var(--line);border-radius:10px;background:#fff;margin:6px 0 2px}
/* The grip map (10 Oct 2026): the two ribbons' key is the red-to-green ramp the ribbons are coloured with. */
/* Prepare: laps here in other cars (12 Oct 2026) — one row per lap, grouped by car */
.prep-occar{margin-top:8px;padding-top:6px;border-top:1px solid var(--line)}.prep-occar:first-of-type{border-top:0}
.prep-ocrow{display:grid;grid-template-columns:90px minmax(0,1fr) minmax(0,1.2fr) 70px auto;gap:6px 12px;align-items:center;padding:3px 0}
@media (max-width:720px){.prep-ocrow{grid-template-columns:80px minmax(0,1fr) auto;row-gap:2px}.prep-ocrow > :nth-child(3),.prep-ocrow > :nth-child(4){grid-column:2 / span 2}}
.cn-gripbar{display:inline-block;width:56px;height:10px;border-radius:3px;background:linear-gradient(90deg,rgb(214,48,36),rgb(240,170,30),rgb(40,170,60));vertical-align:-1px;margin-right:6px}
@media (max-width:620px){.cn-gball{width:100%;height:auto}}
.cn-reffile{margin-top:2px}
.cn-reffile a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.cn-others{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin:4px 0 2px}
.cn-othertick{display:inline-flex;align-items:center;gap:7px;margin:0;min-height:32px;cursor:pointer;
font-size:12px;letter-spacing:0;text-transform:none;font-weight:700;color:var(--ink)}
.cn-othertick input{width:auto;margin:0;flex:0 0 auto}
.cn-dr{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--ink)}
.cn-dr i{display:inline-block;width:9px;height:9px;border-radius:50%}
.cn-warn{color:var(--orange-ink)}
.cn-sesshead{margin:8px 0 4px}
.cn-sessions{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:6px;margin-bottom:6px}
.cn-sess{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:start;text-align:left;
border:1px solid var(--line);border-radius:8px;background:#fff;padding:7px 9px;cursor:pointer;font:inherit;color:inherit;min-height:44px}
.cn-sess:hover:not(:disabled){border-color:var(--ink)}
.cn-sess.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.cn-sess.off{opacity:.5;cursor:not-allowed}
.cn-sess:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.cn-sessbox{font-size:15px;line-height:1.2;color:var(--muted)}
.cn-sess.on .cn-sessbox{color:var(--ink)}
.cn-sessmain{min-width:0;display:block}
.cn-sesstop{display:block;font-size:12.5px}
.cn-sess.on .cn-sesslabel{font-weight:700}
.cn-sessmain .small{display:block;font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.cn-quick{margin:2px 0 8px}.cn-pool{margin:6px 0}.cn-ref{margin:4px 0 10px}
.cn-refdot{display:inline-block;width:10px;height:3px;background:var(--purple);vertical-align:middle;margin-right:4px;border-radius:2px}
.cn-table .tr{grid-template-columns:minmax(0,2.2fr) repeat(6,minmax(0,1fr)) 110px;gap:8px}
/* The three gaps as one bar: the SPLIT is what says which kind of work a corner is, and three more
numeric columns would have said it at three times the width. */
.cn-split{display:flex;width:100%;height:10px;border-radius:3px;overflow:hidden;background:var(--soft)}
.cn-seg{display:block;height:10px}
.cn-seg-cg{background:var(--ink)} /* consistency gap - do what you already do. Ink, not blue: blue against green read as one colour on the bar (David, 12 Oct) */
.cn-seg-re{background:var(--green)} /* reach - you found it once */
.cn-seg-sk{background:var(--orange)} /* skill gap - you have never done it */
.gd-refpick .tr{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr) minmax(0,1.4fr) auto}.gd-refpick .tr>div.num{text-align:left}
.cn-seg-rf{background:var(--purple)} /* to the reference - Prepare's third segment: your best to the reference driver's best. Purple is the reference, as everywhere */
.cn-key .cn-seg{width:12px;border-radius:2px;flex:0 0 auto}
.cn-why{color:var(--muted);font-style:normal}
.cn-namecell{min-width:0}
.cn-find{overflow-wrap:break-word} /* the whole finding, wrapped - never an ellipsis the reader cannot open */
.cn-worst{color:var(--orange-ink)}
.cn-table .tr.click{cursor:pointer}.cn-table .tr.click:hover{background:var(--soft)}
.cn-table .tr>div.num{text-align:right;font-variant-numeric:tabular-nums}
.cn-table .tr.head>div{text-align:left;letter-spacing:.02em;font-size:11px;hyphens:manual;overflow-wrap:normal;word-break:normal}.cn-table .tr.head>div:nth-child(n+2):nth-child(-n+8){text-align:right}
/* 08: two questions, two labelled groups, each on its own grid so the values line up in columns
instead of reflowing 3/2/2 with a long basis line pushing the next metric around. */
.cn-statgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px 26px;margin:10px 0 8px}
@media (min-width:860px){.cn-statgrid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.cn-statgroup .kicker{margin:0 0 4px}
.cn-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px 18px;align-items:start}
.cn-stat{min-width:0}.cn-statv{font-size:22px;font-weight:700;line-height:1.1}
.cn-lead{margin-top:8px}
.cn-chart{display:block;width:100%;box-sizing:border-box;height:auto;margin:6px 0 2px;border:1px solid var(--line);border-radius:8px;background:#fff}
/* A key sits WITH the thing it explains. Swatches are drawn to match what is plotted - a dashed rule
reads as a dash - so the legend cannot quietly disagree with the chart (05, 13). */
.cn-key{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;margin:0 0 6px;color:var(--muted)}
.cn-key b{color:var(--ink);font-weight:700}
.cn-key span{display:inline-flex;align-items:center;gap:5px}
.cn-key i{display:inline-block;width:12px;flex:0 0 auto}
.cn-swatch-band{height:8px;background:#efe8db;border-radius:2px}
.cn-swatch-tick{height:12px;width:2px!important;background:var(--muted)}
.cn-swatch-dot{height:8px;width:8px!important;background:var(--ink);border-radius:50%}
.cn-swatch-short{height:8px;width:2px!important;background:var(--ink)}
.cn-swatch-ref{height:12px;width:2px!important;background:var(--purple)}
/* 17: the lap, its date and "conditions ?" ran together in one monospaced line and the unknown-
condition mark wrapped alone. Mono is for the lap TIME; the rest is body text on its own line. */
/* 11: the destinations, named with their counts, above the accordions that hold them. 15: an empty
destination says so - it is still somewhere you can add to, not an unlabelled empty box. */
/* 10: the corner analysis runs to ~3200px and the conclusion box is at the foot of it with no way
down. This is a jump, not a second editor - the box stays where the reading ends. */
.cn-jump{margin-left:auto}
.rv-dests{display:flex;flex-wrap:wrap;gap:4px 12px;padding:2px 0 8px}
.rv-dest{color:var(--muted)}
.rv-dest.has{color:var(--ink);font-weight:700}
.rv-dest .mono{font-size:11px}
.rv-acc-none{color:var(--muted);font-weight:400;font-style:normal;text-transform:none;letter-spacing:0}
.ss-vchange{margin-top:2px}
.hm-best .mono{font-size:15px;font-weight:700}
.hm-best .small{color:var(--muted);margin-top:1px}
.cn-collabel{display:flex;justify-content:space-between;gap:8px;color:var(--muted);padding:8px 8px 2px;border-bottom:1px solid var(--line);margin-bottom:2px}
.cn-legend i.cn-dash{border-radius:0}
.cn-legend i.cn-swatch-band{border-radius:2px;height:8px;width:12px} /* a band is a band, not a dot */
.cn-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:2px 0 6px}.cn-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin-right:5px}
.cn-fast .tr{grid-template-columns:minmax(140px,1.4fr) 72px 72px 72px minmax(0,1.4fr)}.cn-fast.hasref .tr{grid-template-columns:minmax(140px,1.4fr) 72px 72px 72px 80px minmax(0,1.4fr)}
.cn-fast .tr>div.num,.cn-ps .tr>div.num,.cn-prep .tr>div.num{text-align:right;font-variant-numeric:tabular-nums}
.cn-fast .tr.head>div:nth-child(n+2):nth-child(-n+5),.cn-ps .tr.head>div:nth-child(n+2),.cn-prep .tr.head>div:nth-child(n+2):nth-child(-n+7){text-align:right}
.cn-ps .tr{grid-template-columns:minmax(0,1.8fr) repeat(4,minmax(0,1fr))}
.cn-prep .tr{grid-template-columns:minmax(0,1.6fr) repeat(6,minmax(0,1fr)) 110px}
.cn-preds{margin-top:6px}.cn-pred{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;align-items:center;padding:5px 0;border-bottom:1px solid var(--soft);font-size:13px}
.cn-pred.little{color:var(--muted)}.cn-pred.little b{font-weight:500}
.cn-predbar{height:8px;background:var(--soft);border-radius:4px;overflow:hidden}.cn-predbar>div{height:100%;background:var(--ink);border-radius:4px}
.cn-pred.little .cn-predbar>div{background:var(--muted)}.cn-pred.little .cn-predbar>div{background:var(--line)}
/* 09: the same Chapel knowledge is 16px on a 70ch measure in Track Guides and was 14px here. A
driver's words read the same wherever they are shown, so this is the guide's own reading style -
capped by the measure, not by the pane. Every word, capital and line break is preserved by pre.txt. */
.cn-known,.cn-said{margin-top:10px}
.cn-known>.small,.cn-said>.small{color:var(--muted)}
.cn-known pre.txt,.cn-said pre.txt{margin-top:3px;font-size:16px;line-height:1.55;max-width:70ch}
@media (max-width:900px){.cn-table .tr{grid-template-columns:minmax(0,2fr) repeat(6,minmax(0,1fr))}.cn-stripcol{display:none}.cn-prep .tr{grid-template-columns:minmax(0,1.6fr) repeat(6,minmax(0,1fr))}}
@media (max-width:600px){.cn-table .tr,.cn-prep .tr{grid-template-columns:minmax(0,1.8fr) repeat(3,minmax(0,1fr))}.cn-table .tr>div:nth-child(n+5),.cn-prep .tr>div:nth-child(n+5){display:none}.cn-fast .tr,.cn-fast.hasref .tr{grid-template-columns:minmax(90px,1.2fr) 56px 56px minmax(0,1fr)}.cn-fast .tr>div:nth-child(4),.cn-fast.hasref .tr>div:nth-child(4),.cn-fast.hasref .tr>div:nth-child(5){display:none}.cn-pred{grid-template-columns:70px minmax(0,1fr)}}
/* Review sub-tabs and the Corners tab layout (7 Oct 2026) */
.rv-span{grid-column:1/-1}
.rv-tabs{margin:14px 0 2px}
.rv-tabs .tab.on{border-bottom-color:var(--purple)} /* Review's phase colour, not the generic orange */
.rv-cnstrip{padding-bottom:6px;border-bottom:1px solid var(--line)}
.rv-cnstrip .cn-chips{margin-top:2px}
.cn-left .rv-nav-item{justify-content:space-between}.cn-left .rv-nav-item .rv-txt{flex:1 1 auto}.cn-left .num{font-variant-numeric:tabular-nums}.cn-left .cn-pot{color:var(--ink);font-weight:700}
.cn-left .linkbtn.on{color:var(--ink);text-decoration-thickness:2px}
/* PREPARE — the Event Preparation Sheet (8 Oct 2026): mission and outstanding stay visible above a
two-column workspace, seven areas on the left and the one being worked on at the right. The left
column is navigation (the Review nav-item pattern), not seven completion workflows. */
.pm{border:2px solid var(--orange);border-radius:14px;padding:14px 18px;margin-top:14px;background:#fff}
.pm-text{font-size:18px;line-height:1.5;margin-top:8px;white-space:pre-wrap;overflow-wrap:anywhere;max-width:80ch}
.pm-text.empty{color:var(--muted);font-size:14px}
.pm-days{font-weight:800;color:var(--orange-ink);letter-spacing:.08em}
.pm textarea{width:100%;font-size:15px;line-height:1.45;margin-top:6px}
.po{border:1px solid var(--line);border-radius:14px;padding:12px 18px;margin-top:12px;background:#fff}
.po-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:4px 18px;margin-top:8px}
.po-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:start;padding:5px 0;font-size:13px;line-height:1.35}
.po-row input{width:auto;margin-top:2px}.po-row .po-text a{color:inherit;text-decoration:none}.po-row .po-text a:hover{text-decoration:underline}
.prep-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px;margin-top:16px;align-items:start}
@media (min-width:1500px){.prep-grid{grid-template-columns:250px minmax(0,1fr);gap:28px}}
.prep-nav{display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--line);padding-right:12px;position:sticky;top:12px}
.prep-nav-item{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:8px;text-decoration:none;color:inherit;border:1px solid transparent;line-height:1.3}
.prep-nav-item:hover{background:var(--soft)}
.prep-nav-item.on{background:#fff;border-color:var(--line);box-shadow:inset 3px 0 0 var(--orange)}
.pn-n{flex:0 0 18px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:1px}
.pn-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.pn-l{font-size:13.5px;font-weight:600}.prep-nav-item.on .pn-l{color:var(--orange-ink)}
.pn-s{font-size:11.5px;color:var(--muted)}
.prep-nav .crtab-n{align-self:center}
.prep-main{min-width:0}
.ps-head{align-items:flex-start;margin-bottom:4px}
.ps-title{font-size:20px;letter-spacing:.02em;margin:0}
.prep-main .kicker{margin-top:22px}
@media (max-width:1000px){
.prep-grid{grid-template-columns:1fr;gap:12px}
.prep-nav{flex-direction:row;overflow-x:auto;gap:6px;border-right:none;padding:0 0 8px;position:static;border-bottom:1px solid var(--line);scrollbar-width:thin}
.prep-nav-item{flex:0 0 auto;padding:6px 10px;border:1px solid var(--line)}
.prep-nav-item.on{box-shadow:none;border-color:var(--orange)}
.pn-s{display:none}.pn-n{display:none}
.po-grid{grid-template-columns:1fr}
}
@media (pointer:coarse){.prep-nav-item{min-height:44px}.po-row{min-height:44px;align-items:center}}
/* Preparation sheet, stages 2–3: one narrative per area, the forecast line in the header, the derived blocks. */
.pn{border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:10px;padding:10px 14px;margin-top:10px;background:#fff}
.pn-text{font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;max-width:70ch}
.pn-text.empty{color:var(--muted);font-size:13.5px}
.pn textarea{width:100%;font-size:14px;line-height:1.45;margin-top:4px}
.pm-fc{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:14.5px}
.pm-day{white-space:nowrap}.pm-fc-src{flex-basis:100%}
.table.kc .tr{grid-template-columns:150px 150px minmax(0,1fr)}
.table.ch .tr{grid-template-columns:minmax(0,1.4fr) 1fr 1fr}
@media (max-width:720px){.table.kc .tr,.table.ch .tr{grid-template-columns:1fr 1fr;row-gap:4px}.table.kc .tr.head,.table.ch .tr.head{display:none}.pm-day{white-space:normal}}
/* Snooze (8 Oct 2026): hide an open item from THIS event's sheet. A crescent, at the icon buttons' scale. */
.ib-snooze{--ic:url('data:image/svg+xml;utf8,')}
.po-row .iconbtn,.check .iconbtn{margin-left:auto;flex:0 0 auto}
.po-row{grid-template-columns:auto minmax(0,1fr) auto auto}
.po-asleep{opacity:.7}
/* Forecast icons (8 Oct 2026): the day's weather as a glyph, the word in the tooltip. */
.wx{width:24px;height:24px;vertical-align:-6px}
.wx-i{display:inline-block;margin-right:6px;color:var(--ink)}
.wx-n{white-space:nowrap;margin-left:10px}.wx-n .wx{width:16px;height:16px;vertical-align:-3px;margin-right:2px;color:var(--muted)}
.pm-day{display:inline-flex;align-items:center;gap:5px}.pm-day b{font-size:15px}
/* Click-to-edit text (8 Oct 2026): the mission and the area narratives change by clicking the words. */
.pm-text.editable,.pn-text.editable{cursor:text;border-radius:6px;margin-left:-6px;padding-left:6px;padding-right:6px}
.pm-text.editable:hover,.pn-text.editable:hover{background:var(--soft)}
.pm-text.editable:focus-visible,.pn-text.editable:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.cn-zoom{display:inline-flex;gap:2px;margin:0 4px}.cn-zoom .btn.on{background:var(--soft);color:var(--ink);border-color:var(--muted)}
/* ONE zoom control for every drawing that pans (10 Oct 2026): a glass, minus, the factor, plus, Fit. */
.tm-zoomctl{align-items:center;gap:4px;margin-left:auto}.tm-zoomctl .btn{min-width:30px;padding:0 9px}.tm-zoomctl .btn:disabled{opacity:.35;cursor:default}
.tm-zval{min-width:30px;text-align:center;font-variant-numeric:tabular-nums;color:var(--muted)}
.tm-mag{display:inline-block;width:15px;height:15px;background:currentColor;color:var(--muted);margin-right:2px;
--ic:url('data:image/svg+xml;utf8,');
-webkit-mask:var(--ic) center/15px 15px no-repeat;mask:var(--ic) center/15px 15px no-repeat}
.cn-grip,.cn-lines{max-height:420px}
/* TRACK MAP (Oct 2026): the layout drawn from our own GPS with the stored points on it. The wrap pans and zooms. */
.tm{margin-top:10px}.tm-wrap{border:1px solid var(--line);border-radius:12px;background:#fbf8f2;overflow:hidden;touch-action:none;cursor:grab;user-select:none}
.tm-wrap:active{cursor:grabbing}.tm-svg{display:block;max-height:560px}
.tm-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:6px 0 14px;align-items:center} /* the gap below keeps a drawing's legend off whatever key follows it */
.tm-dot{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:-1px;margin-right:6px}
.tm-tick{display:inline-block;width:3px;height:14px;background:var(--orange);vertical-align:-3px;margin:0 8px 0 4px}
.tm-from{margin-left:auto;color:var(--muted)}
@media (max-width:720px){.tm-svg{max-height:380px}.tm-legend{gap:4px 12px}.tm-from{margin-left:0;flex-basis:100%}}
/* The line on satellite imagery (Oct 2026). Leaflet owns the box; everything here is around it. */
.cn-map{height:460px;border:1px solid var(--line);border-radius:6px;background:#000;overflow:hidden}
.cn-map .leaflet-container{background:#000;font:inherit}
.cn-nudge{margin-top:6px;display:flex;flex-direction:column;gap:4px}
.cn-nudge .rowact.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cn-nudge .num{white-space:nowrap}
@media (max-width:760px){.cn-map{height:320px}}
/* A corner shared with a sibling layout, kept in step (Oct 2026). */
/* a sentence, not a field label - the house uppercase on