/* ==== tokens: frozen with the approved board (docs/design/tokens.css). Any new token goes in all three blocks.
   D48 (round 6, the geometry chart): --frame (drawing ink and the fitting size), --you (the rider's own points and nothing else), their tints, --frame-dim for dimension lines, and --figure, the condensed face the size figures are set in. ==== */
:root{--paper:#F4F6F8;--card:#FFFFFF;--ink:#1B222B;--ink2:#4B5563;--ink3:#59616D;--rule:#D6DCE3;--rule2:#E8ECF0;--accent:#1F6F8B;--accent-ink:#FFFFFF;--accent-soft:#E3EFF4;
--ok:#2F7D4E;--ok-soft:#E4F2E9;--prob:#3B5F80;--prob-soft:#E6EDF5;--warn:#8A5A12;--warn-soft:#F8EEDB;--bad:#B23A31;--bad-soft:#F7E3E1;--bike1:#1B222B;--bike2:#1F6F8B;--bike3:#B8791E;--grid:#E1E6EB;--ghost:#9AA3AE;--scrim:rgba(10,14,18,.55);--shadow:rgba(0,0,0,.35);
--display:'Barlow Semi Condensed','Arial Narrow',Arial,sans-serif;--ui:'Barlow','Segoe UI',Helvetica,Arial,sans-serif;--mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;--frame:#1E4B8F;--frame-ink:#FFFFFF;--frame-tint:#E8EEF8;--frame-dim:#8FA6CC;--you:#C8461A;--you-tint:#FBEAE3;--figure:'Barlow Condensed','Arial Narrow',Arial,sans-serif;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--paper:#14181D;--card:#1B2026;--ink:#E4E8ED;--ink2:#A6AFBA;--ink3:#8B95A1;--rule:#2C343D;--rule2:#232A32;--accent:#5BA3BF;--accent-ink:#0F1418;--accent-soft:#1B2E37;
--ok:#7BC69A;--ok-soft:#1C2F25;--prob:#8FB3D6;--prob-soft:#1E2A38;--warn:#E0B060;--warn-soft:#33291A;--bad:#EF8B82;--bad-soft:#3A2220;--bike1:#E4E8ED;--bike2:#5BA3BF;--bike3:#E0B060;--grid:#242B33;--ghost:#6B7684;--scrim:rgba(0,0,0,.6);--shadow:rgba(0,0,0,.6);--frame:#8FB6F2;--frame-ink:#0F1720;--frame-tint:#182A42;--frame-dim:#4E6A96;--you:#F08A5B;--you-tint:#3A2419;--figure:'Barlow Condensed','Arial Narrow',Arial,sans-serif;}}
:root[data-theme="dark"]{--paper:#14181D;--card:#1B2026;--ink:#E4E8ED;--ink2:#A6AFBA;--ink3:#8B95A1;--rule:#2C343D;--rule2:#232A32;--accent:#5BA3BF;--accent-ink:#0F1418;--accent-soft:#1B2E37;
--ok:#7BC69A;--ok-soft:#1C2F25;--prob:#8FB3D6;--prob-soft:#1E2A38;--warn:#E0B060;--warn-soft:#33291A;--bad:#EF8B82;--bad-soft:#3A2220;--bike1:#E4E8ED;--bike2:#5BA3BF;--bike3:#E0B060;--grid:#242B33;--ghost:#6B7684;--scrim:rgba(0,0,0,.6);--shadow:rgba(0,0,0,.6);--frame:#8FB6F2;--frame-ink:#0F1720;--frame-tint:#182A42;--frame-dim:#4E6A96;--you:#F08A5B;--you-tint:#3A2419;--figure:'Barlow Condensed','Arial Narrow',Arial,sans-serif;}

/* ==== base: the board's shared classes, ported verbatim ==== */
*{box-sizing:border-box}
html{min-height:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
main{flex:1}
a{color:var(--accent)} a:hover{color:var(--ink)}
p{margin:0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.disp{font-family:var(--display)}
.pill{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:4px;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.prob{background:var(--prob-soft);color:var(--prob)} .pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.neutral{background:var(--rule2);color:var(--ink2)}
.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:4px;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.02em;border:1px solid var(--rule);background:var(--card);color:var(--ink);cursor:pointer;text-decoration:none;line-height:1;white-space:nowrap}
.btn:hover{color:var(--ink);border-color:var(--ink3)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:hover{color:var(--accent-ink);border-color:var(--accent);filter:brightness(1.08)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.lg{height:48px;font-size:16px}
.btn.google{height:48px;gap:10px;font-size:16px;width:100%}
.bt-btn-44{height:44px}
.btn:focus-visible,.bt-theme:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.label{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.card{background:var(--card);border:1px solid var(--rule);border-radius:4px}
.kv{display:flex;flex-direction:column;gap:2px}
.kv .k{font-family:var(--display);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.kv .v{font-family:var(--mono);font-size:13px;color:var(--ink)}
.note{font-size:12.5px;color:var(--ink2)}
.bt-note-lg{font-size:14px}
input,textarea,.field{height:40px;border:1px solid var(--rule);border-radius:4px;background:var(--card);color:var(--ink);padding:0 12px;font-family:var(--mono);font-size:14px;display:flex;align-items:center;width:100%}
input.text{font-family:var(--ui)}
input::placeholder,textarea::placeholder{color:var(--ink3);font-family:var(--ui)}
textarea{height:auto;min-height:80px;padding:10px 12px;font-family:var(--ui);resize:vertical;display:block}
.err{color:var(--bad);font-size:12.5px}
.tab{height:44px;display:flex;align-items:center;white-space:nowrap;padding:0 4px;font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink2);border-bottom:2px solid transparent}
.tab.on{color:var(--ink);border-bottom-color:var(--accent)}
table.geo{border-collapse:collapse;width:100%;font-size:13px} table.geo th{font-family:var(--display);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule);background:var(--paper)}
table.geo td{padding:8px 10px;border-bottom:1px solid var(--rule2);font-family:var(--mono);font-variant-numeric:tabular-nums}
table.geo td.t{font-family:var(--ui)}
.bt-inline-form{display:inline-flex;margin:0}
.bt-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* B9a (UX 14): the first thing in the document, out of sight until a keyboard reaches it, then a normal button over the header. */
.bt-skip{position:absolute;left:8px;top:-64px;z-index:60;height:40px;display:inline-flex;align-items:center;padding:0 16px;border-radius:4px;background:var(--accent);color:var(--accent-ink);font-family:var(--display);font-weight:600;text-decoration:none;transition:top .1s}
.bt-skip:focus{top:8px;color:var(--accent-ink)}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ==== nav (board: Landing, SignIn, Garage headers) ==== */
.bt-nav{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 32px;border-bottom:1px solid var(--rule);background:var(--card);gap:16px}
.bt-nav-left{display:flex;align-items:center;gap:28px;min-width:0}
.bt-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.bt-brand-word{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
/* Carl, 4 Sep 2026: the i's in the wordmark are the same colour as the rest of the word, in both themes. */
.bt-brand-word i{font-style:normal;color:inherit}
.bt-nav-links{display:flex;gap:4px}
.bt-nav-link{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:4px;font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink2);text-decoration:none}
.bt-nav-link:hover{color:var(--ink)}
.bt-nav-link.on{background:var(--accent-soft);color:var(--accent)}
.bt-nav-right{display:flex;align-items:center;gap:8px}
.bt-nav-who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px;margin-right:4px}
.bt-theme{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--rule);border-radius:4px;color:var(--ink2);background:var(--card);cursor:pointer;padding:0}

/* ==== footer (board: Landing) ==== */
.bt-footer{padding:20px 32px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.bt-footer-links{display:flex;gap:16px}
.bt-footer a{color:var(--ink2)} .bt-footer a:hover{color:var(--ink)}

/* ==== landing (board: Landing) ==== */
/* Visual round 1, finding 33: centred, the copy column floated in the middle of the taller example card and the section read as
   two blocks that had not agreed on a height. Their tops line up now, and the taller one sets the height on purpose. */

/* ==== sign in (board: SignIn) ==== */

.bt-alert{padding:16px;display:flex;flex-direction:column;gap:8px;border-color:var(--bad)}
.bt-alert .label{color:var(--bad)}
 

/* ==== garage (board: Garage) ==== */

.bt-flash{padding:12px 16px;border-color:var(--ok);background:var(--ok-soft)} .bt-flash .note{color:var(--ok)}

/* Visual round 1, finding 25: Positions and Saved comparisons stretched to the same height, so one saved comparison left about
   200 px of blank in the right card. The mismatch is normal, so each card is as tall as its own contents. */

.bt-empty{border-style:dashed}

h2.label{margin:0}

/* ==== bike form (board: Position, "From a bike that fits me") ==== */

   

/* ==== catalogue (board: Landing bikes grid, Bike page header and provenance card) ==== */

/* B11a (UX 42): "Bikes / Canyon", so the only way back to the catalogue is not the top nav. */

/* B11a (UX 42): the size the table is showing a cockpit for, marked in the geometry table as well as the chooser. */
table.geo tr.sel td{background:var(--accent-soft)}

 

.bt-geo-wrap{overflow-x:auto}

.bt-prewrap{white-space:pre-wrap}
select.text{font-family:var(--ui);height:40px;border:1px solid var(--rule);border-radius:4px;background:var(--card);color:var(--ink);padding:0 12px;font-size:14px;width:100%}

/* ==== prose (privacy) ==== */

/* ==== mobile (board: Mobile, 390 wide) ==== */
@media (max-width: 720px){
  .bt-nav{height:56px;padding:0 16px}
  .bt-brand-word{font-size:20px}
  .bt-nav-who{display:none}
  /* Visual round 1, finding 1: this hid the only Sign out control in the product, because the sign-out button is a .btn.ghost too.
     The direct-child selector drops "How it works" (a child of the bar) and leaves the button inside the sign-out form alone. */
  .bt-nav-right > .btn.ghost{display:none}
  .bt-nav-right .btn{padding:0 12px}
  .bt-nav-link span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  
  
  
  
  
  
  
  
  
  .bt-footer{padding:20px 16px}
}

/* ==== compare (board: Main / MainDark, S2 rows, S4 toggle, S13 chips; overlay comes with Batch 5) ==== */
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:4px;overflow:hidden;background:var(--card)}
.seg > a,.seg > div{height:40px;display:flex;align-items:center;white-space:nowrap;padding:0 16px;font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink2);border-right:1px solid var(--rule);text-decoration:none}
.seg > a:last-child,.seg > div:last-child{border-right:none} .seg > .on{background:var(--accent);color:var(--accent-ink)}

.bt-cmp-row{display:grid;grid-template-columns:200px 104px 180px minmax(140px,1fr) 150px;gap:12px}

.bt-cmp-row{align-items:start;padding:14px 16px;border-bottom:1px solid var(--rule2)}
.bt-cmp-row.sel{background:var(--accent-soft)}
/* The row is five fixed columns, about 830 mm of them plus the page's padding, so it does not fit a tablet or a small laptop
   any better than it fits a phone: /compare scrolled sideways everywhere from 721 to about 900 px. It stacks here for exactly
   the reason it stacks on a phone, and the column heads go with it because heads without columns are worse than neither. */
@media (min-width:721px) and (max-width:920px){
  
  .bt-cmp-row{grid-template-columns:minmax(0,1fr);gap:8px}
}

 

/* Visual round 1, finding 3: a bare 1fr track has an auto minimum, so the overlay's nowrap geometry table (549 px of
   min-content inside an overflow-x:auto wrapper) forced the whole compare page to 599 px on a 390 px phone and pushed the
   modal close button off the screen. Every single-column fallback in this file uses minmax(0,1fr) for the same reason. */

@media (max-width: 720px){
  
  
  
  .bt-cmp-row{grid-template-columns:minmax(0,1fr);gap:8px}
  
  /* Visual round 1, finding 29: the count used to run alongside the wrapped "Show every size" and the two read as one control. */
  
  
  .seg > a,.seg > div{height:44px;flex:1;justify-content:center}
  .seg{display:flex;width:100%}
}

/* ==== modal and quick compare (board: QuickCompare, S13; Expand chrome, D20) ==== */
.bt-scrim{position:fixed;inset:0;background:var(--scrim);z-index:40}
/* Visual round 1, finding 38: .card's --rule border and a box-shadow do almost no work on a dark ground (#1B2026 over a 60%
   scrim on a #14181D page), so the dialog had no edge at all. --ghost is the one token in the set that reads against both. */
.bt-modal{position:fixed;left:50%;top:60px;transform:translateX(-50%);width:1200px;max-width:calc(100% - 32px);max-height:calc(100vh - 80px);overflow:auto;display:flex;flex-direction:column;border:1px solid var(--ghost);box-shadow:0 24px 60px var(--shadow);z-index:41}
.bt-modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--rule);gap:16px;flex-wrap:wrap}
.bt-modal-h{font-family:var(--display);font-size:22px;font-weight:700;margin:0}
/* Visual round 2, finding 18: the dialog moves focus to its heading when it opens (B9b), and a rectangle around a 22 px title
   reads as an empty text field. The heading is not tabbable (tabindex -1) and nothing operates it, so it does not need a focus
   ring; every control inside the dialog keeps its own, and the dialog itself is what says where you are. */
[role="dialog"] .bt-modal-h:focus,[role="dialog"] .bt-modal-h:focus-visible{outline:none}
.bt-modal-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bt-modal-close{width:40px;padding:0;justify-content:center}
.bt-modal-body{padding:0 20px 8px}
.bt-modal-body2{padding:8px 20px 20px}
.bt-modal-body2 .label{margin:10px 0 6px;display:block}

   
.bt-expand{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid var(--rule);border-radius:4px;font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink2);background:var(--card);text-decoration:none}
.bt-expand:hover{color:var(--ink);border-color:var(--ink3)}

@media (max-width: 720px){
  .bt-modal{left:0;top:0;transform:none;width:100%;max-width:100%;max-height:100vh;border-radius:0}
  
}

/* ==== cockpit chooser (board: Bike, S7) and customise (board: Customise, S14) ==== */

 

.seg.small > a,.seg.small > div{height:32px;font-size:13px;padding:0 10px}
.btn.small{height:32px;font-size:13px}

 

.bt-js-hidden{display:none}

/* ==== position tabs (board: Position, PositionTabs) ==== */

/* ==== overlay (board: Overlay, Main right column, S5; D10) ==== */
.bt-ov{padding:16px;display:flex;flex-direction:column;gap:10px}
.bt-ov-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.bt-ov-svg{width:100%;height:auto;display:block}
.seg > button{height:40px;display:flex;align-items:center;white-space:nowrap;padding:0 16px;font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink2);border:0;border-right:1px solid var(--rule);background:transparent;cursor:pointer}
.seg > button:last-child{border-right:none} .seg > button.on{background:var(--accent);color:var(--accent-ink)}
.seg.small > button{height:32px;font-size:13px;padding:0 10px}
.bt-ov-legend{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.bt-ov-key{display:inline-flex;align-items:center;gap:6px;font-size:13px;background:none;border:0;padding:0;cursor:pointer;color:var(--ink);font-family:var(--ui)}
.bt-ov-key[aria-pressed="false"]{opacity:.45;text-decoration:line-through}
.bt-ov-swatch{width:18px;height:3px;display:inline-block}
.bt-ov-ring{width:14px;height:14px;border:2px solid var(--bad);border-radius:50%;display:inline-block}
.bt-est{font-family:var(--display);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--warn);margin-left:4px}
.bt-ov-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.bt-ov-bike.bt-hidden{display:none}

/* ==== overlay table never breaks a value (Carl, 29 Aug): numbers stay on one line and the table scrolls sideways instead ==== */
.bt-ov-table table.geo td,.bt-ov-table table.geo th{white-space:nowrap;padding:6px 8px}
.bt-ov-table table.geo td.t{white-space:normal;min-width:110px}
.bt-ov-controls{display:flex;gap:8px;align-items:center;flex-shrink:0}
.bt-modal .bt-ov{border:0}

/* ---- sharing (B6, D31): the share line under the position, and the landing's worked example card ---- */

/* B6a (M 10, NT 34, UX 36): the link itself on the page, selectable, for anyone who does not know where "copied" went. */
[data-share-done]:empty{display:none}

/* the garage's positions and saved comparisons (board S11): one row each, actions to the right */

/* ---- report a wrong number (B6, D32) ---- */
/* Visual round 1, finding 2: a bare max-width replaced .bt-form's own 100% cap, so /report and /request laid out at 776 px on a
   390 px phone, wider than the 720 px breakpoint, so none of the mobile rules fired. The width and the cap have to travel together. */

/* ---- add or correct a bike, the review queue (B7, D21, D22) ---- */

/* by bike type (D34): the position a row was solved on, under its pill */

/* the band's reasons as a tooltip on an info icon (Carl, 29 Aug): hover or focus shows them; the label carries them for screen readers.
   A17 (M 20): hover and focus do not exist on a touch screen, so a tap toggles .open, and a tooltip that would hang off the right edge is pinned from the right. */
.bt-tip{position:relative;display:inline-flex;align-items:center;vertical-align:middle;color:var(--ink3);cursor:help;margin-left:2px}
.bt-tip:hover,.bt-tip:focus-visible,.bt-tip.open{color:var(--accent)}
/* Visual round 1, finding 28: opening downwards put the tip on top of "Saddle could be off by" in its own row, and on the wide
   layout it spilled across the overlay card. It opens upwards now; .bt-tip-down is the fallback the script adds when there is no
   room above, and .bt-tip-right still pins it from the right when it would run past the rows column. */
.bt-tip-text{display:none;position:absolute;left:0;bottom:calc(100% + 6px);z-index:5;width:260px;max-width:calc(100vw - 40px);padding:8px 10px;border-radius:4px;background:var(--ink);color:var(--paper);font-family:var(--ui);font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.4;white-space:normal;box-shadow:0 4px 14px rgba(0,0,0,.18);opacity:0;visibility:hidden;transition:opacity .12s}
.bt-tip:hover .bt-tip-text,.bt-tip:focus-visible .bt-tip-text,.bt-tip:focus .bt-tip-text,.bt-tip.open .bt-tip-text{opacity:1;visibility:visible}
/* Shown means laid out: a closed tip is display:none so it cannot widen the page, which costs the fade and is worth it. */
.bt-tip:hover .bt-tip-text,.bt-tip:focus-visible .bt-tip-text,.bt-tip:focus .bt-tip-text,.bt-tip.open .bt-tip-text{display:block}
.bt-tip.bt-tip-right .bt-tip-text{left:auto;right:0}
.bt-tip.bt-tip-down .bt-tip-text{bottom:auto;top:calc(100% + 6px)}

/* ==== visual round 1 (docs/research/ux/05-visual.md): what a real browser found. One block, one class prefix per finding. ==== */

/* 26: a destructive action sat shoulder to shoulder with its neighbours (Delete beside Open and Copy link; Delete account 8 px
   from Export my data). CLAUDE.md asks for them apart, so a rule pushes the red one to the far end of its row. */

/* 10: the current catalogue version and the other versions were pixel-identical neutral pills with the underline removed, so the
   geometry on screen could have belonged to either. */

/* 12: overflow-x:auto gives an overlay scrollbar that only appears on hover, so the sliced columns read as absent rather than
   hidden. Styling the scrollbar at all is what makes a browser keep it on screen. */
.bt-geo-wrap{scrollbar-width:thin;scrollbar-color:var(--ghost) var(--rule2)}
.bt-geo-wrap::-webkit-scrollbar{height:10px}
.bt-geo-wrap::-webkit-scrollbar-track{background:var(--rule2);border-radius:5px}
.bt-geo-wrap::-webkit-scrollbar-thumb{background:var(--ghost);border-radius:5px}

/* 6: expanded, the drawing scaled to the modal's 1200 px width and ran 808 px tall inside an 820 px box, so the bottom bracket
   was below the fold in all four anchor states, including the one labelled BB. It is sized to the room instead. */
.bt-modal .bt-ov-svg{max-height:calc(100vh - 360px)}

/* 15: on a phone the four columns that answer the question were off the right edge of the scroll wrapper. Below 720 px each size
   is one card: the size, then the verdict, stem, spacers and hoods, then the maker's numbers, each labelled from its column head. */

@media (max-width:720px){
  
  
  
  
  
  
  
  /* 24 on a phone: the column heads that carry "not published" are hidden here, so a number the maker did not publish is left out
     of the card rather than shown as a label with nothing after it. */
  
}

/* 16: the "why" trigger measured 14 by 14 and the quick compare's remove "x" 6 by 18. The glyphs keep their size; a transparent
   pseudo-element gives each one a 44 px target without moving anything on the page. */
.bt-tip::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}

/* 23: the maker's words and the notes on the source had no measure, so a 1,440 px screen gave 180-character lines.
   Renamed from .bt-measure after round two gave the measuring guide's grid that same name: the cap silently held the guide's
   second column at 0 px. Two things called "measure"; the typographic one is the one that moved. */

/* 35: a monospace summary line broke between a label and its value on a phone ("band" then "bar +/-3"). */
.bt-nowrap{white-space:nowrap}

/* 14 and 21: the position tabs are submit buttons now, so they need the browser's chrome off; and wrapped across two rows they
   lost their underline, because the rule lived on the container. Below 720 px they stack full width, each carrying its own. */

/* 22: the sizes grid inherited the form's 760 px while 600 px of a 1,440 px screen sat empty, so a 1,422 px table scrolled
   sideways inside it. On a wide screen the card takes the page; the fields and the prose keep their measure. */

/* 29: "Show every size" changes how long the list is, not what is in it, so it sits past a rule and is not dressed as a chip. */

/* 34: the 404 and the rate-limit card sat at y=120 with 500 px of empty page under them, which read as truncated rather than
   deliberate. One card on an otherwise empty page is centred in what is left after the header and the footer. */

/* ---- the shortlist route (D36) ---- */
/* Ported from the approved artboards Shortlist, ShortlistPhone, Sizes, SizesDark, SizesPhone, BikeFull and Routes. Every value
   here is one of the frozen tokens or a measurement lifted from those boards; nothing new is invented and no token is added. */

/* Navigation (board Routes, and Carl's decision on the phone menu). Words on desktop; on a phone one labelled button. */
.bt-nav-second{font-family:var(--display);font-weight:600;font-size:14px;white-space:nowrap;text-decoration:none;color:var(--accent)}
.bt-nav-second:hover{color:var(--ink)}
.bt-nav-second.on{color:var(--ink)}
.bt-menu{display:none;position:relative}
.bt-menu-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 12px;border:1px solid var(--rule);border-radius:4px;background:var(--card);color:var(--ink);font-family:var(--display);font-weight:600;font-size:15px;cursor:pointer;list-style:none;white-space:nowrap}
.bt-menu-btn::-webkit-details-marker{display:none}
.bt-menu[open] .bt-menu-btn{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.bt-menu-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:50;min-width:220px;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);border-radius:4px;box-shadow:0 12px 32px var(--shadow);padding:6px}
.bt-menu-link{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:4px;font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink);text-decoration:none;background:none;border:0;width:100%;text-align:left;cursor:pointer}
.bt-menu-link:hover{background:var(--rule2);color:var(--ink)}
.bt-menu-link.on{background:var(--accent-soft);color:var(--accent)}
.bt-menu-form{margin:0}
.bt-menu-out{color:var(--ink2)}

/* The position strip that tops every screen of the route (boards Shortlist, Sizes, BikeFull). */

/* The picker (board Shortlist): the list on the left, the picks on the right, sticky while you scroll. */
.bt-sl{padding:24px 32px 36px;display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start}
.bt-sl-wide{margin:16px 32px}

/* The picks panel: it stays put as you scroll, because the count and the way out must never be scrolled away. */

/* The phone's foot bar: the count and the way out, always on screen while you pick (board ShortlistPhone). */

/* The two ways in when there is no position yet, and the footnotes. */

/* The answers (boards Sizes, SizesDark): three cards across, one per row on a phone. */
.bt-sz{padding:24px 32px 36px;display:flex;flex-direction:column;gap:20px}
.bt-sz-hoods{background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:10px 12px}
.bt-sz-empty{margin:24px 32px;padding:24px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.bt-sz-empty-h{font-size:24px;font-weight:700;margin:0}
.bt-sz-empty-actions{display:flex;gap:8px;flex-wrap:wrap}

/* One bike in full (board BikeFull): the ticket and the routes out on the left, the drawing on the right, the table under both. */

/* Phone (boards ShortlistPhone, SizesPhone): the answer above the fold, one card per row, 44 px targets, 16 px inputs. */
@media (max-width:1100px){
  .bt-sl{grid-template-columns:minmax(0,1fr)}
  
  
}
@media (max-width:720px){
  /* No icon-only navigation (Carl, 29 Aug): the links move into the labelled Menu button, which is the only nav on a phone. */
  .bt-nav-links,.bt-nav-second,.bt-nav-right > .bt-nav-signout,.bt-nav-right > .bt-nav-signin{display:none}
  .bt-menu{display:block}
  .bt-menu-panel{position:fixed;left:16px;right:16px;top:56px;min-width:0}
  
  
  .bt-sl, .bt-sz{padding-left:16px;padding-right:16px}
  .bt-sl-wide,.bt-sz-empty{margin-left:16px;margin-right:16px}
  
  
  /* 16 px so iOS does not zoom the page when a field takes focus (M 13). */
  
  
  
  
  
  
  
  .bt-sz-seg{width:100%}
  .bt-sz-seg > a{flex:1;justify-content:center;height:44px;padding:0 8px}
  .bt-sz-empty-actions .btn{flex:1 1 auto}
  
}

/* ---- round two: find, form, glossary, measure, phone compare ---- */
/* Ported from the approved boards: Find (S30), BikeForm (S31), Glossary (S32), MeasureGuide (S33), PhoneCompare (S34).
   One block, class-prefixed, tokens only, so it merges with the shortlist route's own block without touching it. */

/* --- S30: finding a bike. One box, one chip row, and a count that never lets a short list read as an empty one. --- */
.bt-find{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bt-find-box{display:flex;align-items:center;gap:10px;height:48px;width:420px;max-width:100%;padding:0 12px;border:1px solid var(--rule);border-radius:4px;background:var(--card)}
.bt-find-box:focus-within{border-color:var(--accent)}
.bt-find-icon{color:var(--ink3);flex-shrink:0}
/* 16 px so iOS does not zoom the page on focus (M 13). The border lives on the box, not the input inside it. */
.bt-find-input{flex:1;min-width:0;height:44px;border:0;background:transparent;padding:0;font-size:16px;font-family:var(--ui)}
.bt-find-input:focus{outline:none}
.bt-find-count{flex-shrink:0;white-space:nowrap}
.bt-find-go,.bt-find-clear{height:48px;flex-shrink:0}
.bt-find-line{color:var(--ink);font-weight:600}
.bt-find-makes{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.bt-find-empty{padding:24px;display:flex;flex-direction:column;gap:12px;max-width:720px}

/* --- S30 and S34: the compare page's bar, the box first and the chips under it. --- */
/* The bar is only a wrapper on a wide screen: the box and the chips sit on the page, as the board draws them. */

/* --- S31: the bike form in two groups, the picker in three boxes, and the frame drawing beside them. --- */

.bt-pick{padding:16px;display:flex;flex-direction:column;gap:12px}
.bt-pick-boxes{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start}
.bt-pick-boxes select.text{height:44px;font-size:16px}
.bt-pick-go{align-self:flex-start}

/* <details> is the disclosure: it opens with no script, and its summary is an affordance rather than a bare triangle. */

/* The marker sits beside the label, not on a line of its own: a column flex made the "+" its own flex item above the words. */

.bt-sharper{padding:8px 18px 18px;display:block}

.bt-diagram{padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.bt-diagram-svg{width:100%;height:auto;display:block}
/* "What's this?" is a link everywhere except inside the bike form, where it is a submit button; one look either way. */
.bt-what{background:none;border:0;padding:0;font:inherit;font-size:12.5px;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.bt-what:hover{color:var(--ink)}
button.bt-what{font-family:var(--ui)}

/* --- S32: the glossary, opened where the word is. --- */
.bt-gloss{width:620px}
.bt-gloss-list{display:flex;flex-direction:column}
.bt-gloss-entry{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-bottom:1px solid var(--rule2)}
.bt-gloss-entry:last-child{border-bottom:0}
.bt-gloss-entry.on{border-left:3px solid var(--accent);padding-left:12px}
.bt-gloss-term{font-size:16px;font-weight:700}
.bt-gloss-foot{padding:14px 20px;border-top:1px solid var(--rule);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bt-gloss-links{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;margin-top:4px}
.bt-gloss-page{max-width:80ch}
/* The scrim is a link on most pages and a submit button on the bike form, so it has to lose the browser's button chrome. */
button.bt-scrim{border:0;padding:0;cursor:pointer;display:block}

/* --- S33: the measuring guide's drawing and its three passes. --- */

/* --- S34: the second route on a phone. One document; the wide screen is the one that reorders. --- */
/* The answer, its build sheet and the drawing come first in the source, so a phone and a screen reader both get the answer
   before two hundred rows (M 2). Above 1100 px the CSS puts the side column back on the right, where the Main board draws it,
   and lifts the overlay to the top of it. Nothing on this page is rendered twice. */

.bt-top{margin-left:auto}

/* The form that holds the frame drawing takes the page on a wide screen, as the board draws it; its plain rows keep their
   measure. Same shape as the contribute form (visual round 1, finding 22). */

@media (max-width:720px){
  .bt-find-box{width:100%}
  .bt-find-go,.bt-find-clear{flex:1}
  .bt-find-makes{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  /* 44 px targets on a phone (M 12), and the chip row scrolls sideways rather than stacking into four lines. */
  
  
  /* M 15: the filters and the box stay in reach from anywhere in a list that has no end. */
  
  
  .bt-pick-boxes{flex-direction:column}
  
  .bt-pick-boxes select.text{height:48px}
  .bt-gloss{width:100%}
  
  .bt-top{margin-left:0;width:100%;height:48px}
  /* B2b (M 1): four columns in 350 px was thirty two-word lines per cell. One card per bike here; the table is the wide screen's. */
  
  
}

/* ==== round two (D37): the three doors, the switcher, my fit, and the layout passes ==== */
/* ==== home + navigation (slice home-nav; D37, and the D36 build decisions Carl settled on 29 Aug 2026) ====
   Ported from docs/design/round2/Main.dc.html, HomeDark.dc.html, HomePhone.dc.html, HomeIn.dc.html,
   MenuPhone.dc.html, Nav.dc.html and Routes.dc.html, board notes R1, R2 and R11a to R11j.
   Prefixes: .bt-door-* for the three doors, .bt-home-* for the rest of the landing. The navigation keeps its own
   .bt-nav-* and .bt-menu-* names, so everything in the last section is either an override of a rule that already
   exists in biketwins.css or a new .bt-nav-* name checked against it first.
   Tokens only, no new tokens, no colours. The signed-in position strip deliberately reuses .bt-sl-pos rather than
   restating it: it is the same component the shortlist route already draws, and one rule should own it. */

/* ---- the hero: one full-width column, which is what closes the 290 px hole the two-column hero left (V2 25) ---- */

/* Only the dark state (Features:Compare off) puts buttons in the hero: with two of the three doors leading nowhere, there
   are no doors, and the one thing that does work has to be reachable. */

/* ---- the three doors (R1): equal width, equal weight, each ending in one button ---- */

/* The door's own button. It is min-height rather than height and it may wrap, because the alternative to a button that
   wraps on a narrow card is a button whose words hang out of it. At every width above 720 px the three labels fit on one
   line, so nothing here wraps on a desktop. */

/* ---- the shared section frame: the worked example, how it works, the catalogue ---- */

/* ---- the worked example, below the doors as proof rather than as the only way in (R1) ---- */

/* ---- how it works: on the page signed in as well as signed out (R2) ---- */

/* ---- the catalogue shelf: the makes I hold, by how many, rather than six frames nobody has heard of (R1, UX 38) ---- */

/* ---- signed in and returning (HomeIn, R2): door one becomes the answers the rider already has ---- */

/* ---- the middle width: three doors and nine makes do not fit a laptop at the desktop scale ---- */

/* ---- the phone (HomePhone, MenuPhone): the same three doors stacked, 48 px controls ---- */

/* ==== navigation overrides (R11f to R11j) ==== */
/* Four words, no glyphs: two of the three icons were byte-identical, which is what made the destinations
   indistinguishable in the first place (M 5, V 4). The links carry text only now, so the gap is not needed. */
.bt-nav-link{gap:0}
@media (max-width:1100px){
  .bt-nav-left{gap:20px}
  .bt-nav-link{padding:0 8px;font-size:14px}
}

/* R11i (UX 37): the theme control is a labelled button. The site's theme is decided in the browser (a stamped
   data-theme, otherwise the system preference), so the label cannot be written on the server: both words are in the
   markup and the same three-way test the tokens use picks which one shows. The hidden word is display:none, so the
   button's accessible name is always exactly the word a reader can see. */
.bt-nav-theme{width:auto;gap:8px;padding:0 12px;font-family:var(--display);font-weight:600;font-size:15px}
.bt-nav-theme-light{display:none}
.bt-nav-theme-dark{display:inline}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .bt-nav-theme-dark{display:none}
  :root:not([data-theme="light"]) .bt-nav-theme-light{display:inline}
}
:root[data-theme="dark"] .bt-nav-theme-dark{display:none}
:root[data-theme="dark"] .bt-nav-theme-light{display:inline}

/* R11a, R11c, R11e: the phone menu in words, every route with a line saying what is behind it, rows at 56 px.
   The labelled Menu button and the details/summary panel are unchanged; only the rows inside it are new. */
.bt-nav-menu-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;font-size:17px}
.bt-nav-what{font-family:var(--ui);font-weight:400;font-size:12.5px;color:var(--ink2);text-align:right}
.bt-nav-menu-row.on .bt-nav-what{color:var(--accent)}
.bt-nav-menu-sep{height:1px;background:var(--rule);margin:6px 0}

@media (max-width:720px){
  /* The word goes, the button does not: it stays a 44 px target and keeps its name for anything that reads one. */
  .bt-nav-theme{width:44px;height:44px;padding:0;gap:0}
  .bt-nav-theme-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ==== the size switcher (slice switcher; D37 door one, and Carl's ask: "a quick way for them to add other sizes of the
   same bike or view the effect of other sizes / how much they don't fit") ====
   Ported from docs/design/round2/Switcher.dc.html (the anatomy, notes R5a to R5e) and from the switcher in use on
   Shortlist.dc.html, ShortlistDark.dc.html and ShortlistPhone.dc.html.
   Prefix: .bt-sw-. Every name in here was grepped against biketwins.css and the other round 2 blocks first; none of them
   existed. Tokens only, no new tokens, no colours of its own, no inline styles.
   It rides on the answers page's existing .bt-sz-card and on the bike page's .bt-bf-size, so it is written as a contained
   band rather than as the board's full-bleed strip: the two cards have different padding and a bleed would need a magic
   number matched to each of them. */

/* ---- the bar across the top of a card: what it is, every size, and the invitation (R5a) ---- */
.bt-sw-bar{display:flex;flex-direction:column;gap:8px;padding:10px 12px;background:var(--paper);border:1px solid var(--rule2);border-radius:4px}
.bt-sw-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.bt-sw-note{flex:1 1 auto;min-width:0}

/* A grid rather than a wrapping row: the card is 445 px in the three across grid and the board's fixed 74 px buttons left a
   ragged tail in it. auto-fill keeps every button the same width, fills the row, and leaves a short last row alone. */
.bt-sw-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px}

/* ---- one button, and the five states the board draws ---- */
.bt-sw-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:46px;padding:4px 6px;
  border:1px solid var(--rule);border-radius:4px;background:var(--card);
  font-family:var(--display);font-weight:600;font-size:15px;line-height:1.1;color:var(--ink2);text-align:center;text-decoration:none}
.bt-sw-btn:hover{border-color:var(--ink3)}
.bt-sw-size{white-space:nowrap}
/* R5d: the WORD does the work and the colour only reinforces it, because a pill colour was never going to carry a verdict
   on its own. The word wraps rather than being clipped when a card is narrow. */
.bt-sw-word{font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;line-height:1.15}

/* "Also works": fits or probably fits, but not my pick. */
.bt-sw-fits{border-color:var(--ok);color:var(--ink)}
.bt-sw-fits .bt-sw-word{color:var(--ok)}
/* "Close": solvable, with something I would rather you knew about. */
.bt-sw-close{border-color:var(--warn);color:var(--ink)}
.bt-sw-close .bt-sw-word{color:var(--warn)}
/* "No": cannot be made to work. Faded and dashed, and still pressable, because pressing it is how you find out why (R5c). */
.bt-sw-no{border-style:dashed;color:var(--ink3)}
.bt-sw-no .bt-sw-word{color:var(--ink3)}
/* "Your size": the size I would put you on. Filled, and the card opens on it, never on the smallest (R5b). */
.bt-sw-mine{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.bt-sw-mine .bt-sw-word{color:var(--accent-ink);opacity:.85}
.bt-sw-mine:hover{border-color:var(--accent);color:var(--accent-ink)}
/* "Showing": an ink ring ON TOP of whatever the size already was, so both facts stay readable at once - what it is, and
   that you are looking at it. */
.bt-sw-showing{box-shadow:inset 0 0 0 2px var(--ink);border-color:var(--ink)}

/* ---- the card head: the verdict, and the one destructive control, out of the button row (finding 20) ---- */
.bt-sw-head{display:flex;align-items:center;gap:8px;flex-shrink:0}
.bt-sw-off{width:36px;min-width:36px;height:36px;padding:0;color:var(--ink3)}
.bt-sw-off:hover{color:var(--bad);border-color:var(--bad)}

/* Finding 22: only the gravel card carried "Gravel position", so its rows sat 5 px below the other two. The line is
   reserved on every card of a page where any card needs it, which keeps the three in rhythm and costs nothing when none do. */
.bt-sw-pos{min-height:1.45em}

/* ---- which size is on screen, and the way back that names where it is going ---- */
.bt-sw-now{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.bt-sw-back{height:34px;font-size:13px;align-self:flex-start;gap:6px;margin-top:2px}
.bt-sw-back svg{flex-shrink:0}

/* ---- a size that cannot be made to work: the reason, in words, before the numbers ---- */
.bt-sw-stop{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:4px;background:var(--bad-soft);color:var(--ink)}
.bt-sw-stop > svg{flex-shrink:0;margin-top:3px}
.bt-sw-stop-h{font-size:16px;font-weight:700;line-height:1.2}
.bt-sw-stop-t{color:var(--ink);margin-top:3px}

/* ---- finding 24: on a phone "Change or measure it" sat between the two big numbers ---- */
/* .bt-sl-pos is a row with the numbers set to flex:1, so below 720 px the link took its own column beside a three line
   stack of numbers. These two modifiers sit on the same elements and turn it into a column; the link is already last in
   the markup, so it lands after both numbers with no reordering. */
@media (max-width:720px){
  .bt-sw-poshead{flex-direction:column;align-items:flex-start}
  .bt-sw-poschange{align-self:flex-start}
  /* Four to a row at 52 px tall on a phone, wrapping, so nothing scrolls sideways and no size is off the right edge
     (the complaint M 9 and V 15 make about the geometry table). */
  .bt-sw-list{grid-template-columns:repeat(auto-fill,minmax(66px,1fr))}
  .bt-sw-btn{min-height:52px}
}

/* ---- round two, slice: my fit (door three, "I have my numbers") ----
   Ported from docs/design/round2/MyFit.dc.html, MyFitResults.dc.html, MyFitPhone.dc.html and MyFitStates.dc.html,
   which answer finding 13 of docs/research/ux/06-visual-two.md: "the fit report tab opens with a catalogue picker
   its user does not need", and D37's third door: numbers alone, nothing to name, saving offered afterwards.
   Markup: src/BikeTwins.Web/Pages/Fit/Index.cshtml (route /fit).
   Prefix: .bt-fit-. Tokens only; no new tokens, no new colours, nothing outside this block.
   Every shared class the markup uses (.card, .btn, .note, .label, .err, .bt-page, .bt-form, .bt-fields, .bt-field,
   .bt-tabs, .tab, .bt-alert, .bt-btn-44, .mono) is used as it stands: the one thing this block must never do is give
   an existing name a second meaning, which is the mistake .bt-measure made and paid for. Three selectors reach an
   existing class from INSIDE a .bt-fit- container and only there (.bt-fit-flag .label, .bt-fit-flag-stop .label, and
   the .btn widths in the phone block); no rule outside those containers is touched. */

/* The page's own two shapes: the form column, and the answer, which is a strip plus a page. */

/* --- MyFit: the header, with the drawing beside it, because the whole form is four numbers about a picture --- */

/* The drawing is a wide card under the header, the picture beside what it is for, as the board draws it. It began life in a
   520 px right-hand column beside three lines of copy, which is a tall picture next to a short paragraph and about 300 px of
   empty page above the form. */

/* --- MyFitStates, "arrived here with nothing": an empty state that invites, three ways in, all three real --- */

/* --- the fields: a label, a box with its unit inside it, and what the number means underneath --- */

/* 44 px tall with 16 px inside, so a phone keypad opens and iOS does not zoom the page (M 12, M 13). Text rather
   than number: no spinner to collide with the unit, no browser bubble in a voice that is not this site's, and
   nothing on this form needs a minus key (M 3). The strict decimal binder is what actually reads it. */

/* "That looks like centimetres": the offer sits under the field it is about, with both answers side by side. */

/* --- MyFitStates: a blank that stops half the answer, and the front-of-the-bike answer that is offered instead --- */

/* --- the second tab's box: what those four figures come to, in the app's own two points --- */

/* --- MyFitResults: the position strip, the same shape the shortlist route already uses for the same job --- */

/* --- MyFitResults, and board Routes note 5: both ways on, side by side, the moment the numbers land --- */

/* --- MyFitStates, "afterwards, and only afterwards": the keep offer, and "no thanks" is a real answer --- */

/* ---- end: my fit ---- */

/* ==== slice: the picker's A to Z and make index (/shortlist) ====
   Ported from the approved board docs/design/round2/Picker.dc.html, notes R14a to R14e, which answers visual round 2
   finding 15: the page opened as a 16,978 px flat list of all 209 bikes with eight brand chips and "34 more".
   One block, prefix .bt-az-, tokens only, no new tokens and no new colours. Append after the round-two block. */

/* R14a: the search box is the first thing on the page, and the line that says what it takes sits under it rather than a
   whole row away. The box itself is unchanged (.bt-sl-search). */

/* R14b: the A to Z and the full alphabetical index of every make with its count. This is the default state of the page:
   before a search or a make there is no list of bikes at all. */

/* Three columns read DOWN, the way an index is read; a grid of the same width would read across the rows instead. */

@media (max-width:720px){
  /* 44 px targets (M 12). The letters wrap into rows rather than scrolling sideways, because the whole point of an A to Z
     is seeing the letter you want without hunting for it. */
  
  
  
  
  
}

/* ---- round two, slice: compare (door two, "What else fits") ----
   Ported from docs/design/round2/Compare.dc.html, notes R13a to R13j, which answer finding 11 of
   docs/research/ux/06-visual-two.md: "/compare still has no end, and it grew" (36,859 px, 207 rows, no pagination,
   no sticky column header, no way back to the top). Markup: src/BikeTwins.Web/Pages/Compare/Index.cshtml.
   Prefix: .bt-cx-. Tokens only; no new tokens, no new colours, nothing outside this block.
   Five selectors reach an existing class from INSIDE a .bt-cx- container (.bt-cmp-bar, .bt-cmp-find,
   .bt-cmp-filters, .bt-cmp-count, .bt-cmp-cols). They only re-place controls the board moved into the bar and make
   the column head stick; no existing rule is redefined outside these containers and no existing name is given a
   second meaning, which is the mistake .bt-measure made and paid for. */

/* R13a: the header is one band. What the page is, the position it solves against, and what you can do with that
   position; three cells that keep their own widths instead of three blocks whose heights disagreed. */

/* R13b, R13c, R13j: the bar is three rows. How the bikes are solved, what is listed, how much of the list is here.
   The riding preset is labelled apart from the Show chips because it changes what the numbers mean, not which rows
   appear (D34). The bar carries the card ground and the rule; its rows carry the spacing. */

/* The box, the chips and "solve with" sit on the rows now, so the row's padding is theirs. */

/* R13e: the count sentence is written from the rows the page renders and sits on a line of its own, reading from
   the left, rather than being pushed to the right-hand end of the chip row. */

/* R13b (finding 11): the column head stays on screen while the rows go past it. By row 30 the headings used to be
   5,000 px above the reader. It needs an opaque ground of its own or the rows show through it. Below 720 px the
   head is display:none already, so nothing here fights the phone layout. */

/* R13f: the foot of the list. One step more, and what a step is; the numbers in both come from FitRules. */

@media (max-width:720px){
  /* The bar carries three rows now, and three rows stuck to the top of a phone is most of the screen. The list is
     capped at FitRules.CompareDefaultMaxRows rows instead, which is the same answer to M 15 by a shorter route: the
     filters are a scroll away rather than a flick, and the foot of the list is reachable. */
  
  
  
  
  
  
  
  
  
  
}

/* ==== visual round two sweep (docs/research/ux/06-visual-two.md, findings 12, 14, 16, 19, 21, 23) ====
   No artboard: these are the findings the round 2 board does not draw, so there is nothing to port from
   docs/design/round2/*.dc.html. Tokens only, no new tokens, no new colours. Every class is prefixed .bt-fx-.
   One selector reaches an existing class, .bt-fx-tabs button.tab, because that finding IS a specificity loss
   on .bt-tabs button.tab and it cannot be beaten from outside it; the tab buttons' class attribute is pinned
   by PositionEntryTests, so they could not be renamed. Everything else is prefix-only.
   This block has to be appended at the END of biketwins.css: three of its rules win on order rather than on
   specificity (.bt-fx-tabs button.tab over .bt-tabs button.tab, .bt-fx-value over .bt-field). */

/* 12: on a phone /catalogue/{brand}/{bike} widened the layout viewport to 446 px, so the whole page rendered
   shrunk rather than overflowing visibly. Two causes, one shape: a box that cannot shrink (a grid with fixed
   tracks, a nowrap control) and a parent that lets it push, because a flex or grid item's automatic minimum
   size is its own content. Anything that cannot shrink scrolls inside its own box now, and the boxes around
   it are told they may (min-width:0). The scrollbar is styled for the same reason .bt-geo-wrap's is (round 1,
   finding 12): an overlay scrollbar only appears on hover, so the sliced content reads as absent. */

/* The cockpit chooser is five fixed tracks and needs about 990 px, which is wider than every screen between
   721 px and a laptop. Inside the scroller each row keeps its own width, so the selected row's background runs
   the whole way across instead of stopping at the fold. min-content is the sum of the tracks, never a guess. */

/* The collector's prose carries the maker's raw URLs and asset ids (MY25_Madone_SLR_Geometry_Lines), which
   have no space in them to break at, so one of them is wider than a 390 px phone on its own. */

/* 14: the shortlist card on My bikes. One row: what the list holds on the left, the way into it on the right. */

/* 19 (round 1 finding 21, unchanged): stacked on a phone, only the open tab had a rule under it. The cause is
   specificity, not a missing rule: .bt-tabs button.tab sets border-bottom:2px solid transparent (0,2,1) and
   outranks .bt-tabs .tab's 1 px rule (0,2,0), so the two closed tabs drew nothing at all. The nav carries
   .bt-fx-tabs so this selector ties at (0,2,1) and wins on order. The open tab keeps its accent because
   .bt-tabs button.tab.on is (0,3,1) and still outranks both. */
/* It is NOT opt-in through a class: the loss is in .bt-tabs itself, so an opt-in fix means the next page that grows a set of
   tabs quietly gets the bug back. The /fit route proved that within the hour, arriving with plain .bt-tabs. This block is
   appended last, so it ties at (0,2,1) and wins on order; the open tab keeps its accent at (0,3,1). */

/* 21: the share link was printed as loose monospace with word-break:break-all, so on a phone it broke mid
   number ("500.4,62 / 9.8"). A read-only input cannot break at all: one line, it scrolls, and it selects.
   The markup that renders it belongs to another slice, so this is the block for it and the change is reported. */
.bt-fx-share-url{flex:1 1 100%;min-width:0;height:32px;padding:0 8px;font-size:11.5px;color:var(--ink3);background:var(--paper);border-color:var(--rule2);text-overflow:ellipsis;cursor:text}
.bt-fx-share-url:focus{color:var(--ink);border-color:var(--accent)}
/* 16 px so iOS does not zoom the page when the field takes focus (M 13), and a full-size target, on the very screen the
   finding was measured on. This field replaced .bt-share-link and .bt-fit-link on all three pages: one object, one name. */
@media (max-width:720px){
  .bt-fx-share-url{height:44px;font-size:16px}
}

/* 23: "FRAME COVER: 6 mm, published" was a .field, a bordered 40 px box in the same column as three real
   selects, so it read as something you could type into. A label and a value, in the site's numbers face. */

/* The last sideways scroll on a phone, found by measuring rather than by eye: the overlay's anchor row (BB, Head tube top,
   Seat tube top, Ground) plus Expand is 367 px of buttons that neither wrapped nor shrank, so /compare ran 20 px off a 390 px
   screen. It wraps below the phone breakpoint and nothing else about it changes; the anchors themselves are D10. */
@media (max-width:720px){
  .bt-ov-controls{flex-wrap:wrap;flex-shrink:1}
}

/* And the last 20 px of it, which review 05 suspected and nobody had measured: the "why" tooltips. Each one is a 260 px box
   hanging off a 14 px trigger, and although it is hidden it still counts towards how wide the page is. Round 1 (A17) gave it a
   right-hand variant for triggers near the edge and the script picks that on a wide screen; on a phone every trigger is near
   the edge, so they are all anchored there from the start. A box that hangs off to the LEFT does not scroll the page. */
@media (max-width:720px){
  .bt-tip .bt-tip-text{left:auto;right:0}
}

/* The customise page's stop and its offer (Carl, 30 Aug: "not sure I quite understand this without some sort of visual
   indicator"). The stop borrows the switcher's block so the site has ONE way of saying "this does not work"; the offer is a
   line and a button, because "switch the riding toggle to Gravel" is an action and was written as a sentence. */

/* ==== end round two ==== */
/* ==== round four: where your hands land (D46), ported from docs/design/round4 (r4- became bt-gl-) ==== */
/* The row: glyph, two arrows with their numbers, the drop beside the drop of the position the row was solved for. */
.bt-gl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:center}
.bt-gl-glyph{grid-row:span 2;display:block;flex:none}
.bt-gl-dot.ok{fill:var(--ok)} .bt-gl-dot.prob{fill:var(--prob)} .bt-gl-dot.warn{fill:var(--warn)} .bt-gl-dot.bad{fill:var(--bad)}
.bt-gl-arrows{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;min-width:0}
.bt-gl-arrow{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink)}
.bt-gl-arrow svg{flex:none}
.bt-gl-arrow .bt-gl-w{font-family:var(--ui);font-size:12.5px;color:var(--ink2)}
.bt-gl-same{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink2)}
.bt-gl-drop{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:12.5px;color:var(--ink2)}
.bt-gl-drop .bt-gl-dv{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink)}
/* Said once, above the list: what the arrows mean and what the drop is measured between. */
.bt-gl-band{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:12px 16px;background:var(--accent-soft);border-left:3px solid var(--accent);font-size:13.5px;line-height:1.5;color:var(--ink)}
.bt-gl-band .bt-gl-arrow{font-family:var(--ui);font-size:13px}
.bt-gl-band .bt-gl-arrow .bt-gl-w{font-size:13px}
/* The card: the band's two numbers and the riding chip under the title, the glyph beside them, then three tiles and the gauge. */
.bt-gl-cardhead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.bt-gl-cardhead > div{min-width:0;display:flex;flex-direction:column;gap:6px}
.bt-gl-chip{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:3px;background:var(--accent-soft);color:var(--accent);font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;vertical-align:middle}
.bt-gl-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bt-gl-tile{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--rule);border-radius:4px;background:var(--paper);min-width:0}
.bt-gl-tile .bt-gl-tv{display:flex;align-items:center;gap:6px;font-family:var(--display);font-weight:700;font-size:24px;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.bt-gl-tile .bt-gl-tv .u{font-size:14px;font-weight:600;color:var(--ink2)}
.bt-gl-tile .bt-gl-tk{font-size:12px;color:var(--ink2);line-height:1.35}
.bt-gl-gauge{display:flex;gap:14px;align-items:flex-start}
.bt-gl-gauge svg{flex:none}
.bt-gl-gtext{font-family:var(--ui);font-size:10.5px}
.bt-gl-gbuild{font-family:var(--mono);font-size:11px;font-weight:600}
.bt-gl-gname{font-family:var(--ui);font-weight:400}
.bt-gl-gl{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--ink2);min-width:0}
/* The band's reasons, one press away, the summary saying how many are inside and whose they are (round 3 R44, round 4 words 4).
   The shut press carries a rule, the paper fill and the accent caret, because any one of them alone disappears in dark. */
.bt-gl-disc{border:1px solid var(--rule);border-radius:4px;background:var(--paper)}
.bt-gl-disc > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:13px;color:var(--ink);min-height:44px}
.bt-gl-disc > summary::-webkit-details-marker{display:none}
.bt-gl-caret{color:var(--accent);flex:none;transition:transform .12s}
.bt-gl-disc[open] > summary .bt-gl-caret{transform:rotate(90deg)}
.bt-gl-disc[open] > summary{border-bottom:1px solid var(--rule)}
.bt-gl-disc-in{padding:10px 12px;display:flex;flex-direction:column;gap:6px;background:var(--card);font-size:12.5px;color:var(--ink2)}
.bt-sz-hoods .bt-gl{margin-top:6px}
/* Between 1101 and 1439 px the list sits beside the 420 px overlay, so the five columns share about 770 px and the hands
   column is 140-odd px: the board's 1440 frame never showed it. The fixed columns give up a little each, the glyph goes
   above the arrows and the arrows stack, so nothing runs into "How sure". The expand dialog is full width and unaffected. */

@media (max-width:720px){
  .bt-gl-tiles{gap:6px}
  .bt-gl-tile{padding:8px 10px}
  .bt-gl-gauge{flex-direction:column;gap:6px}
}
@media (prefers-reduced-motion: reduce){.bt-gl-caret{transition:none}}
/* My shortlist as rows (Carl, 4 Sep: "there are no rows, just cards in columns"): the compare list's five columns, one row per
   picked bike, with the size switcher folded in under the bike's name as compact chips. The rows stack below 920 px with the
   compare rows, because they are the same rows. */
/* The heading and one sentence, the picker button beside them, then the riding toggle with its note alongside. */
/* D47 (round 5, direction B, Carl: "I like B"): My shortlist is a list on the left and the selected bike's card on the right,
   the pattern What else fits already uses. The list line is four cells (bike and its size chips, verdict, where the hands
   land, take it off); the card is the round 4 card with the size chips in it, sticky while the list scrolls. Below 1101 px
   the card comes first and the list under it, as on What else fits. */

/* Between 921 and 1100 px the list is full width but the five fixed columns still leave the hands column about 180 px, so the
   columns tighten the way they do beside the overlay (above) and the row keeps its shape. */
@media (min-width:921px) and (max-width:1100px){
  .bt-cmp-row{grid-template-columns:168px 96px 140px minmax(150px,1fr) 128px;gap:10px}
}
/* Below 921 px a row used to fold into one thin column 490 px tall: the pill, the position word, the links and the remove
   button each on their own line (Carl, 4 Sep: "preview view /sizes - looks awful"). It folds into a compact card instead:
   the name and its size chips full width, the verdict line inline, what changes beside where the hands land, and how sure
   as one line underneath. The same rows on What else fits fold the same way, because they are the same rows. */
@media (max-width:920px){
  .bt-cmp-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;align-items:start}
  .bt-cmp-row > :nth-child(1),.bt-cmp-row > :nth-child(2),.bt-cmp-row > :nth-child(5){grid-column:1 / -1}
  .bt-cmp-row > :nth-child(2){display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
  
  .bt-cmp-row > :nth-child(5){flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
  .bt-cmp-row > :nth-child(5) .note{flex:1 1 100%}
}
@media (max-width:480px){
  .bt-cmp-row > :nth-child(3),.bt-cmp-row > :nth-child(4){grid-column:1 / -1}
}
/* ==== end round four ==== */
/* ==== round six: the geometry chart (D48), ported from docs/design/round6 (r6- became bt-gc-). One block, one prefix. ====
   The world for My shortlist: chart paper (--card) on the page ground (--paper), drawing ink (--frame) for frames and the
   fitting size, the rider's colour (--you) for the rider's own points and nothing else, ash (--ink3) for a size that does not
   get there. Size figures in the condensed face (--figure); no pills, no mono, no cards inside cards. */
.bt-gc-pos{display:flex;align-items:center;justify-content:space-between;gap:16px 20px;flex-wrap:wrap;min-height:56px;padding:8px 32px;border-bottom:1px solid var(--rule);background:var(--card)}
.bt-gc-pos-l{display:flex;align-items:center;gap:8px 26px;flex-wrap:wrap;min-width:0}
.bt-gc-pos-src{font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink2)}
.bt-gc-pt{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.bt-gc-pt svg{flex:none}
.bt-gc-pt b{font-family:var(--figure);font-weight:700;font-size:22px;line-height:1;color:var(--ink);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.bt-gc-pt span{font-size:13px;color:var(--ink2)}
.bt-gc-pos-note{white-space:nowrap}
/* the strip's and the drawing's phone words: the same facts in fewer letters, swapped in by width, never both shown */
.bt-gc-short,.bt-gc-svg .bt-gc-lbl-short{display:none}
.bt-gc-pos-change{font-size:14px;font-weight:600;white-space:nowrap}
.bt-gc{display:flex;flex-direction:column;gap:16px;padding:22px 32px 36px;font-variant-numeric:tabular-nums}
/* the world's own press colours on this page: the drawing ink for the primary press and the toggle, the site chrome untouched */
.bt-gc .btn.primary{background:var(--frame);border-color:var(--frame);color:var(--frame-ink)}
.bt-gc .seg a.on{background:var(--frame);border-color:var(--frame);color:var(--frame-ink)}
.bt-gc a{color:var(--frame)} .bt-gc a:hover{color:var(--ink)}
/* the hands glyph, kept from round 4, in this page's colours: the fits disc in the drawing tint, the dot in the ink */
.bt-gc .bt-gl-glyph circle:first-of-type{fill:var(--frame-tint);stroke:var(--frame-dim)}
.bt-gc .bt-gl-dot,.bt-gc .bt-gl-dot.ok,.bt-gc .bt-gl-dot.prob{fill:var(--frame)} .bt-gc .bt-gl-dot.warn{fill:var(--you)} .bt-gc .bt-gl-dot.bad{fill:var(--ink3)}
.bt-gc .bt-gl-n,.bt-gc .bt-gl-dv{font-family:var(--ui);font-weight:500;font-size:13px}
.bt-gc .bt-gl-mark{stroke:var(--you)}
.bt-gc-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 20px;flex-wrap:wrap}
.bt-gc-h1{font-family:var(--display);font-size:28px;font-weight:700;margin:0;line-height:1.1}
.bt-gc-lede{font-size:14.5px;color:var(--ink2);margin:4px 0 0;max-width:62ch}
.bt-gc-title-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.bt-gc .btn.quiet{border-color:transparent;background:transparent;color:var(--frame)}
.bt-gc .btn.quiet:hover{color:var(--ink)}
/* the phone's strip of bikes: hidden where the list sits beside the sheet */
.bt-gc-strip{display:none;gap:6px;overflow-x:auto;margin:0 -16px;padding:0 16px 4px;scrollbar-width:thin}
.bt-gc-tab{flex:none;display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border:1px solid var(--rule);border-radius:3px;background:var(--card);color:var(--ink);text-decoration:none;white-space:nowrap}
.bt-gc-tab b{font-family:var(--figure);font-weight:700;font-size:20px;line-height:1}
.bt-gc-tab span{font-family:var(--display);font-weight:600;font-size:13px}
.bt-gc-tab.sel{background:var(--frame);border-color:var(--frame);color:var(--frame-ink)}
/* the chart: the index on the left, the sheet on the right */
.bt-gc-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;align-items:start}
.bt-gc-index{display:flex;flex-direction:column;gap:10px;min-width:0}
.bt-gc-key{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2);padding:0 2px}
.bt-gc-key .bt-gc-chip{height:20px;min-width:26px;font-size:11px;padding:0 6px}
.bt-gc-key-pair{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.bt-gc-list{overflow:hidden;border-radius:3px}
.bt-gc-row{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 14px;padding:12px 16px 12px 14px;border-bottom:1px solid var(--rule2);color:var(--ink);align-items:start}
.bt-gc-row:last-child{border-bottom:none}
.bt-gc-row:hover{background:var(--paper)}
.bt-gc-row.sel{background:var(--frame-tint);box-shadow:inset 0 0 0 1px var(--frame)}
.bt-gc-size{display:flex;flex-direction:column;align-items:flex-start;line-height:1;padding-top:2px}
.bt-gc-size b{font-family:var(--figure);font-weight:700;font-size:32px;letter-spacing:.01em;color:var(--ink)}
.bt-gc-row.sel .bt-gc-size b{color:var(--frame)}
.bt-gc-size span{font-family:var(--display);font-weight:600;font-size:12px;color:var(--ink3);margin-top:4px;white-space:nowrap}
.bt-gc-rowbody{display:flex;flex-direction:column;gap:7px;min-width:0}
.bt-gc-line1{display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap}
/* the whole row is the press: the name's link is stretched over the row; the chips and the glossary links sit above it */
.bt-gc-name{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.2;color:var(--ink);text-decoration:none}
.bt-gc-name::after{content:"";position:absolute;inset:0}
.bt-gc-name:hover{color:var(--frame)}
.bt-gc-name:focus-visible{outline:2px solid var(--frame);outline-offset:2px}
.bt-gc-cat{font-size:12.5px;color:var(--ink3);white-space:nowrap}
.bt-gc-verdict{margin-left:auto;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.02em;white-space:nowrap}
.bt-gc-verdict.ok,.bt-gc-verdict.prob{color:var(--frame)} .bt-gc-verdict.warn{color:var(--you)} .bt-gc-verdict.bad{color:var(--ink3)}
.bt-gc-stop{color:var(--ink2)}
.bt-gc-stop b{color:var(--ink)}
.bt-gc-sizes{display:flex;flex-wrap:wrap;gap:4px;position:relative;z-index:1}
/* every size the maker makes, in the maker's own short label; the fit is the shaded column */
.bt-gc-chip{display:inline-flex;align-items:center;justify-content:center;height:28px;min-width:36px;padding:0 8px;border-radius:3px;border:1px solid transparent;font-family:var(--display);font-weight:600;font-size:13px;line-height:1;white-space:nowrap;color:var(--ink3);text-decoration:none;position:relative;z-index:1}
.bt-gc-chip.bt-sw-mine{background:var(--frame);border-color:var(--frame);color:var(--frame-ink)}
.bt-gc-chip.bt-sw-fits{border-color:var(--frame);color:var(--frame)}
.bt-gc-chip.bt-sw-close{border-color:var(--you);color:var(--you)}
.bt-gc-chip.bt-sw-no{color:var(--ink3);text-decoration:line-through;text-decoration-color:var(--rule);text-decoration-thickness:1px}
.bt-gc-chip.bt-sw-showing{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--frame)}
a.bt-gc-chip:hover{border-color:var(--ink)}
.bt-gc-line3{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;min-width:0}
.bt-gc-line3 .bt-gl{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap}
.bt-gc-line3 .bt-gl-drop{display:none}
.bt-gc-line3 .bt-gl-arrow svg,.bt-gc-line3 .bt-gl-same svg{color:var(--frame)}
.bt-gc-within{margin-left:auto;font-size:13px;color:var(--ink2);white-space:nowrap}
.bt-gc-flag{color:var(--ink2)}
.bt-gc-foot{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:2px 2px 0}
.bt-gc-foot-lab{font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink2)}
.bt-gc-seg a{text-decoration:none}
.bt-gc-foot-note{flex:1 1 320px;max-width:62ch}
.bt-gc-foot-links{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;flex-basis:100%;font-weight:600}
.bt-gc-keep{display:inline}
/* the sheet: a drawing sheet with a title block, the size as the largest figure on the page */
.bt-gc-sheet{position:sticky;top:16px;display:flex;flex-direction:column;min-width:0;border-radius:3px;overflow:hidden}
.bt-gc-tb{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;padding:18px 22px 14px;align-items:end;border-bottom:1px solid var(--rule)}
.bt-gc-tb h2{font-family:var(--display);font-size:24px;font-weight:700;margin:0;line-height:1.1}
.bt-gc-tsub{font-size:13px;color:var(--ink2);margin-top:4px}
.bt-gc-tsize{display:flex;align-items:baseline;gap:10px;line-height:1}
.bt-gc-tsize b{font-family:var(--figure);font-weight:800;font-size:72px;letter-spacing:.01em;color:var(--frame)}
.bt-gc-tsize span{font-family:var(--display);font-weight:600;font-size:18px;color:var(--ink2)}
.bt-gc-plate{display:flex;align-items:baseline;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;padding:12px 22px;background:var(--frame);color:var(--frame-ink)}
.bt-gc-plate.warn{background:var(--you)}
.bt-gc-plate.bad{background:var(--ink3);color:var(--card)}
.bt-gc-plate b{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.01em}
.bt-gc-plate span{font-size:14px;opacity:.92}
.bt-gc-sheetstop{margin:12px 22px 0}
.bt-gc-draw{display:grid;grid-template-columns:minmax(0,1fr) 208px;gap:16px;padding:16px 22px 10px;align-items:start;border-bottom:1px solid var(--rule2)}
.bt-gc-drawing{min-width:0}
.bt-gc-svg{width:100%;height:auto;display:block}
.bt-gc-svg text{font-size:38px}
.bt-gc-svg .bt-gc-letter{font-family:var(--figure);font-weight:700;font-size:52px}
/* Round 8 (D51, the finish review of the bike sheet): SheetSvg renders the drawing twice, the phone's box first, cropped to the
   frame and the points with two-line labels and its marks scaled by SheetSvg.PhoneScale; below 720 px it takes over from the
   desk drawing that follows it, on every sheet that renders both (the bike sheet, My shortlist). Its lettering is sized in
   the drawing itself (the size its box was drawn around), so no text rule here touches it, and it is a phone's drawing: it
   stops growing at 420 px, where its lettering lands at the desk's 20 px, and sits centred where the screen is wider. */
.bt-gc-svg-phone{display:none;width:100%;max-width:420px;height:auto;margin:0 auto}
@media (max-width:720px){
  .bt-gc-svg-phone{display:block}
  .bt-gc-svg-phone + .bt-gc-svg{display:none}
}
.bt-gc-draw-cap{font-size:12px;color:var(--ink3);margin:4px 0 0}
.bt-gc-detail{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px dashed var(--rule);border-radius:3px}
.bt-gc-detail-h{font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink2)}
.bt-gc-detail-h b{color:var(--ink);font-size:14px}
.bt-gc-detail .bt-gl-glyph{margin:0 auto;display:block}
.bt-gc-detail-arrows{display:flex;flex-direction:column;gap:4px}
.bt-gc-detail-arrows .bt-gl-arrow svg,.bt-gc-detail-arrows .bt-gl-same svg{color:var(--frame)}
.bt-gc-detail-drop{font-size:12.5px;color:var(--ink2);line-height:1.4}
.bt-gc-detail-drop b{font-weight:500;color:var(--ink)}
/* Round 8 (D51, the finish review of the bike sheet): Detail A's two millimetre figures in the figure-point token (DESIGN.md:
   the condensed face, 700, 22 px), the word at note size beside each, on every sheet that renders the partial. The selector
   is one class deeper than each page's own .bt-gl-n rule, so the token holds on the bike sheet, My shortlist and What else fits. */
.bt-gc-detail .bt-gc-detail-arrows .bt-gl-arrow{gap:6px}
.bt-gc-detail .bt-gc-detail-arrows .bt-gl-arrow svg{width:16px;height:16px}
.bt-gc-detail .bt-gc-detail-arrows .bt-gl-n{font-family:var(--figure);font-weight:700;font-size:22px;letter-spacing:.01em;line-height:1;color:var(--ink)}
.bt-gc-detail .bt-gc-detail-arrows .bt-gl-w{font-family:var(--ui);font-weight:400;font-size:12.5px;color:var(--ink2)}
.bt-gc-spec{display:grid;grid-template-columns:110px minmax(0,1fr);margin:0;padding:6px 22px 8px;border-bottom:1px solid var(--rule2)}
.bt-gc-spec dt,.bt-gc-spec dd{margin:0;padding:7px 0;border-bottom:1px solid var(--rule2);font-size:14px;line-height:1.35}
.bt-gc-spec dt{font-family:var(--display);font-weight:600;color:var(--ink2);padding-right:10px}
.bt-gc-spec dd{color:var(--ink)}
.bt-gc-spec dt:last-of-type,.bt-gc-spec dd:last-of-type{border-bottom:none}
.bt-gc-order{margin:0;padding:14px 22px;font-family:var(--display);font-weight:600;font-size:16px;line-height:1.35;color:var(--ink);border-bottom:1px solid var(--rule2)}
.bt-gc-why{padding:10px 22px;border-bottom:1px solid var(--rule2)}
.bt-gc-why > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink)}
.bt-gc-why > summary::-webkit-details-marker{display:none}
.bt-gc-why .bt-gl-caret{color:var(--frame);flex:none;transition:transform .15s ease-out}
.bt-gc-why[open] .bt-gl-caret{transform:rotate(90deg)}
.bt-gc-why-list{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 14px;margin:10px 0 0 22px;font-size:13px;color:var(--ink2)}
.bt-gc-why-list dt,.bt-gc-why-list dd{margin:0}
.bt-gc-why-list b{font-weight:500;color:var(--ink)}
.bt-gc-why-foot{margin:8px 0 0 22px;font-size:12.5px;color:var(--ink2)}
.bt-gc-next{margin:0;padding:10px 22px;font-size:13.5px;color:var(--ink2);border-bottom:1px solid var(--rule2)}
.bt-gc-every{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;padding:12px 22px;border-bottom:1px solid var(--rule2)}
.bt-gc-every .bt-gc-sizes{gap:6px}
.bt-gc-lab{font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink2);margin-right:4px}
.bt-gc-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 22px}
.bt-gc-off{margin-left:auto}
.bt-gc .btn.bt-gc-remove{color:var(--ink3)}
.bt-gc-remove:hover{color:var(--bad)}
/* narrower desks: the sheet's detail drops under the drawing, the row's band wraps under the arrows */
@media (max-width:1280px){
  .bt-gc-draw{grid-template-columns:minmax(0,1fr)}
  .bt-gc-detail{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px}
  .bt-gc-detail-h{flex-basis:100%}
  .bt-gc-detail .bt-gl-glyph{margin:0}
  .bt-gc-within{margin-left:0;flex-basis:100%}
}
/* the phone and the narrow tablet: the strip, then the sheet, then the index; every chip 44 px */
@media (max-width:1100px){
  .bt-gc-grid{grid-template-columns:minmax(0,1fr)}
  .bt-gc-sheet{position:static;order:-1}
  .bt-gc-strip{display:flex}
  .bt-gc-tsize b{font-size:56px}
  .bt-gc-tb,.bt-gc-plate,.bt-gc-draw,.bt-gc-order,.bt-gc-why,.bt-gc-next,.bt-gc-every,.bt-gc-acts,.bt-gc-sheetstop{padding-left:16px;padding-right:16px}
  .bt-gc-spec{padding:4px 16px 6px;grid-template-columns:92px minmax(0,1fr)}
  .bt-gc-sheetstop{margin-left:16px;margin-right:16px}
  .bt-gc-chip{height:44px;min-width:44px;font-size:14px}
  .bt-gc-key .bt-gc-chip{height:20px;min-width:26px;font-size:11px}
  .bt-gc-row{grid-template-columns:64px minmax(0,1fr);padding:12px 12px}
  .bt-gc-verdict{margin-left:0;flex-basis:100%}
  .bt-gc{padding:16px 16px 24px}
  /* two lines: the source and the change link on the first, the two points on the second */
  .bt-gc-pos{display:grid;grid-template-columns:auto auto;justify-content:space-between;align-items:center;gap:6px 12px;padding:8px 16px 10px;min-height:0}
  .bt-gc-pos-l{display:contents}
  .bt-gc-pos-note{display:none}
  .bt-gc-long,.bt-gc-svg .bt-gc-lbl-long{display:none}
  .bt-gc-short{display:inline}
  .bt-gc-svg .bt-gc-lbl-short{display:block}
  .bt-gc-pos-change{order:1;font-size:13px}
  .bt-gc-pt{order:2}
  .bt-gc-svg text{font-size:64px}
  .bt-gc-svg .bt-gc-letter{font-size:80px}
  .bt-gc-off{margin-left:0;flex-basis:100%}
}
/* D49: the bar this bike is solved on, chosen on the sheet with the same chips as the sizes; every press is a form */
.bt-gc-bar{display:flex;flex-direction:column;gap:10px;padding:12px 22px;border-bottom:1px solid var(--rule2)}
.bt-gc-bar-head{display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap}
.bt-gc-bar-strip{display:flex;flex-wrap:wrap;gap:6px}
.bt-gc-bar-form{display:contents}
button.bt-gc-chip{cursor:pointer;background:transparent;font:inherit}
.bt-gc-barchip{height:auto;min-height:36px;padding:5px 10px;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.1;border-color:var(--rule);color:var(--ink)}
.bt-gc-barchip .bt-gc-barword{font-family:var(--ui);font-weight:400;font-size:11.5px;color:var(--ink3);letter-spacing:0}
.bt-gc-barchip.bt-sw-mine .bt-gc-barword{color:var(--frame-ink);opacity:.85}
.bt-gc-barchip:hover{border-color:var(--frame)}
.bt-gc-bar-forms{display:flex;flex-direction:column;gap:6px}
.bt-gc-bar-more > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink)}
.bt-gc-bar-more > summary::-webkit-details-marker{display:none}
.bt-gc-bar-more .bt-gl-caret{color:var(--frame);flex:none;transition:transform .15s ease-out}
.bt-gc-bar-more[open] .bt-gl-caret{transform:rotate(90deg)}
.bt-gc-bar-pick,.bt-gc-bar-custom{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:8px 0 4px 22px}
.bt-gc-bar-l{font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink2)}
.bt-gc-bar-unit{display:inline-flex;align-items:center;gap:6px}
.bt-gc-bar-unit input{width:92px}
.bt-gc-bar .text{width:auto;max-width:100%}
.bt-gc-bar-pick select{min-width:240px}
.bt-gc-bar-custom select{min-width:160px}
.bt-gc-bar-note{margin:0;max-width:70ch}
@media (max-width:1100px){
  .bt-gc-bar{padding-left:16px;padding-right:16px}
  .bt-gc-barchip{min-height:44px}
  .bt-gc-bar-pick,.bt-gc-bar-custom{margin-left:0}
  .bt-gc-bar-pick select,.bt-gc-bar-unit input,.bt-gc-bar-custom select{min-height:44px}
}
/* ==== end round six ==== */
/* ==== round seven: the home page as a drawing sheet, and the header as its border strip (D50), ported from docs/design/round7 (r7- became bt-hs-) ====
   The header rules override the incumbent .bt-nav / .bt-menu rules above by the same names, later in the file: the current
   route carries a rule in the drawing ink rather than a teal wash, the routes sit in the centre, nothing is a ghost button,
   and the phone panel tints the current row. The sheet's own classes are bt-hs-. */
.bt-nav{height:56px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.bt-nav-left{display:contents}
.bt-brand{justify-self:start}
.bt-nav-links{justify-self:center;gap:6px;height:56px}
.bt-nav-link{height:56px;padding:0 12px;border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--ink2)}
.bt-nav-link:hover{color:var(--ink)}
.bt-nav-link.on{background:transparent;color:var(--ink);border-bottom-color:var(--frame)}
.bt-nav-link:focus-visible{outline:2px solid var(--frame);outline-offset:-4px}
.bt-nav-right{justify-self:end;gap:10px}
.bt-nav-who{font-size:13px}
.bt-nav-signout .btn.ghost{border-color:transparent;background:transparent;color:var(--frame);font-family:var(--display);font-weight:600;font-size:14px;padding:0 6px}
.bt-nav-signout .btn.ghost:hover{color:var(--ink)}
.bt-nav-signin{height:40px}
.bt-nav-how{font-family:var(--display);font-weight:600;font-size:14px;color:var(--frame);text-decoration:none;padding:0 6px;height:40px;display:inline-flex;align-items:center}
.bt-nav-how:hover{color:var(--ink)}
.bt-theme{border-radius:3px}
.bt-theme:focus-visible,.bt-menu-btn:focus-visible,.bt-brand:focus-visible{outline:2px solid var(--frame);outline-offset:2px}
.bt-skip{background:var(--frame);color:var(--frame-ink)}
.bt-skip:focus{color:var(--frame-ink)}
.bt-menu-btn{border-radius:3px}
.bt-menu[open] .bt-menu-btn{background:var(--frame);color:var(--frame-ink);border-color:var(--frame)}
.bt-menu-panel{border-radius:3px}
.bt-menu-link{border-radius:3px}
.bt-menu-link.on{background:var(--frame-tint);color:var(--frame)}
.bt-menu-link.on .bt-nav-what{color:var(--frame)}
@media (max-width:720px){
  .bt-nav{display:flex;justify-content:space-between}
  .bt-nav-left{display:flex}
}
/* the sheet */
.bt-hs{display:flex;flex-direction:column;background:var(--card);min-height:calc(100vh - 118px)}
/* the sheet's grid: one square per 100 mm of the drawing's box (2560 mm across), offset so it meets the drawing's own axes, and it carries on under the drawing to the foot of the sheet */
.bt-hs-sheet{position:relative;flex:1 1 auto;overflow:hidden;border-bottom:1px solid var(--rule);background-color:var(--card);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:calc(100% / 25.6) calc(100% / 25.6);background-position:calc(100% / 25.6 * 0.2) calc(100% / 25.6 * 0.6)}
.bt-hs-svg{display:block;width:100%;height:auto}
.bt-hs-svg-phone{display:none}
.bt-hs-box rect{transition:stroke .15s ease-out}
.bt-hs-box:hover rect{stroke:var(--frame)}
.bt-hs-box:focus-visible{outline:none}
.bt-hs-box:focus-visible rect{stroke:var(--frame);stroke-width:5}
.bt-hs-title{position:absolute;right:32px;bottom:32px;width:420px;margin:0;background:var(--card);border:1px solid var(--rule);border-radius:3px;display:grid;grid-template-columns:auto minmax(0,1fr);font-size:13px}
.bt-hs-title > dt,.bt-hs-title > dd{margin:0;padding:8px 12px;border-bottom:1px solid var(--rule2);line-height:1.4}
.bt-hs-title > dt{font-family:var(--display);font-weight:600;color:var(--ink2);border-right:1px solid var(--rule2);white-space:nowrap}
.bt-hs-title > dt:last-of-type,.bt-hs-title > dd:last-of-type{border-bottom:none}
.bt-hs-title b{font-weight:500;color:var(--ink)}
.bt-hs-title .nowrap{white-space:nowrap}
.bt-hs-h1{font-family:var(--display);font-weight:600;font-size:13px;margin:0;line-height:1.4;color:var(--ink2);white-space:normal;max-width:9em}
.bt-hs-pt{font-family:var(--figure);font-weight:700;font-size:20px;color:var(--you);letter-spacing:.01em}
/* the three presses as words: the phone's version of the callouts, hidden where the drawing carries them */
.bt-hs-presses{display:none;flex-direction:column;gap:8px;padding:12px 16px}
.bt-hs-press{display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:var(--card);border:1px solid var(--rule);border-radius:3px;text-decoration:none;color:var(--ink)}
.bt-hs-press-h{display:flex;align-items:baseline;gap:10px}
.bt-hs-press-l{font-family:var(--figure);font-weight:700;font-size:26px;line-height:1;color:var(--frame)}
.bt-hs-press-t{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.15}
.bt-hs-press-p{font-size:13px;color:var(--ink2);line-height:1.4}
.bt-hs-press-a{font-family:var(--display);font-weight:600;font-size:14px;color:var(--frame)}
/* signed in: the list as small drawings under the sheet */
.bt-hs-list{padding:18px 32px 28px;display:flex;flex-direction:column;gap:12px;background:var(--paper)}
.bt-hs-list-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bt-hs-h2{font-family:var(--display);font-size:20px;font-weight:700;margin:0}
.bt-hs-list-acts{display:flex;gap:8px;flex-wrap:wrap}
.bt-hs-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.bt-hs-thumb{display:flex;flex-direction:column;gap:4px;padding:10px 12px 12px;background:var(--card);border:1px solid var(--rule);border-radius:3px;text-decoration:none;color:var(--ink);min-width:0}
.bt-hs-thumb:hover{border-color:var(--frame)}
.bt-hs-thumb-svg{display:block;width:100%;height:auto}
.bt-hs-thumb-s{font-family:var(--figure);font-weight:700;font-size:30px;line-height:1;color:var(--frame)}
.bt-hs-thumb-s span{font-family:var(--display);font-weight:600;font-size:12px;color:var(--ink3);margin-left:6px}
.bt-hs-thumb-n{font-family:var(--display);font-weight:600;font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-hs-thumb-v{font-size:12px;color:var(--ink2)}
.bt-hs-thumb-v.warn{color:var(--ink)} .bt-hs-thumb-v.bad{color:var(--ink3)}
.bt-hs-empty .bt-hs-list{max-width:70ch;padding:36px 32px 48px;gap:14px}
.bt-hs-empty .bt-hs-h1{font-size:28px;font-weight:700;color:var(--ink);max-width:none}
/* between 1101 and 1280 the callout boxes would run under 13 px, so the desk drawing keeps its letters and rings and the three presses sit as a row of words under it */
@media (max-width:1280px){
  .bt-hs-svg-desk .bt-hs-call{display:none}
  .bt-hs-presses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:12px 32px}
  .bt-hs-title{position:static;width:auto;margin:4px 32px 24px;border-radius:3px}
  .bt-hs-sheet{display:flex;flex-direction:column;border-bottom:none}
}
/* below 1100 the phone drawing (cropped, one-word labels, letters only) takes over and the presses stack */
@media (max-width:1100px){
  .bt-hs-svg-desk{display:none}
  .bt-hs-svg-phone{display:block}
  .bt-hs-presses{display:flex;padding:12px 16px}
  .bt-hs-title{margin:12px 16px 20px}
  .bt-hs-list{padding:12px 16px 24px}
}
/* the phone drawing's lettering, sized for the width it is shown at: a tablet keeps the desk's proportions, a phone gets legible words */
.bt-hs-svg-phone .bt-hs-lbl,.bt-hs-svg-phone .bt-hs-bb{font-size:34px}
.bt-hs-svg-phone .bt-hs-letter{font-size:56px}
@media (max-width:720px){
  .bt-hs-thumbs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bt-hs-svg-phone .bt-hs-lbl,.bt-hs-svg-phone .bt-hs-bb{font-size:60px}
  .bt-hs-svg-phone .bt-hs-letter{font-size:96px}
  .bt-nav-how{display:none}
}
/* ==== end round seven ==== */
/* ==== round eight, my fit: the drawing sheet as a form (D51), ported from docs/design/round8 (r8f- became bt-r8f-) ====
   The page is the home's drawing sheet (bt-hs-sheet, D50: the same gridded paper, the same box) with the form laid over the
   drawing: the two tabs as the world's segment top left, a group of figure boxes beside each of the rider's points, the bar
   reach under the bar clamp pair, the title block bottom right with the one press, and under the sheet one ruled row with the
   closed disclosure and the three ways to the numbers. Below 1100 px the boxes leave the paper and stack under the phone
   drawing, which carries the callout letters the groups repeat. Tokens only; the world's ink for every press and ring. */
.bt-r8f{display:flex;flex-direction:column;min-height:calc(100vh - 118px);background:var(--card);font-variant-numeric:tabular-nums}
/* the form is the flex item between the section and the sheet, so the sheet (flex:1 from bt-hs-sheet) can grow to the foot of the viewport */
.bt-r8f-form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.bt-r8f a{color:var(--frame)} .bt-r8f a:hover{color:var(--ink)}
.bt-r8f .btn{border-radius:3px}
.bt-r8f .btn.primary{background:var(--frame);border-color:var(--frame);color:var(--frame-ink)}
.bt-r8f .btn:focus-visible,.bt-r8f input:focus-visible,.bt-r8f a:focus-visible,.bt-r8f summary:focus-visible,.bt-r8f button:focus-visible{outline:2px solid var(--frame);outline-offset:2px}
/* the sheet: the home's gridded paper with the drawing on it; the form layer sits over the drawing by position alone */
.bt-r8f-sheet{position:relative;border-bottom:1px solid var(--rule)}
.bt-r8f-svg{display:block;width:100%;height:auto}
.bt-r8f-svg-phone{display:none}
/* the two tabs as the segment: each a submit, so a look at the other never throws away what was typed */
.bt-r8f-seg{position:absolute;left:32px;top:16px;z-index:1;display:inline-flex;border:1px solid var(--rule);border-radius:3px;overflow:hidden;background:var(--card)}
.bt-r8f-seg button{display:inline-flex;align-items:center;height:38px;padding:0 14px;margin:0;border:0;border-right:1px solid var(--rule);background:var(--card);font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink2);cursor:pointer;white-space:nowrap}
.bt-r8f-seg button:last-child{border-right:none}
.bt-r8f-seg button:hover{color:var(--ink)}
.bt-r8f-seg button.on{background:var(--frame);color:var(--frame-ink)}
.bt-r8f-seg button:focus-visible{outline-offset:-3px}
/* a group of boxes on the paper beside the point it measures: the position is the drawing's own (the page writes it as
   percentages of the box), the gap from the cross and the lift that puts the box row level with it are the stylesheet's */
.bt-r8f-group{position:absolute;z-index:1;display:flex;flex-direction:column;gap:6px;width:312px;margin:0;padding:0;border:0;min-width:0}
.bt-r8f-saddle{margin-right:44px;margin-top:-63px}
.bt-r8f-clamp{margin-left:44px;margin-top:-63px}
.bt-r8f-gl{display:flex;align-items:baseline;gap:8px;padding:0;margin:0;font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink);line-height:1.35}   /* the world's ink: the group name leads its two sentence-case labels */
.bt-r8f-letter{display:none;font-family:var(--figure);font-weight:700;font-size:26px;line-height:1;color:var(--frame)}
.bt-r8f-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bt-r8f-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.bt-r8f-label{font-family:var(--display);font-weight:500;font-size:13px;line-height:1.2;color:var(--ink2)}   /* sentence case in Slate, DESIGN.md's rule (the finish review); at 500 it sits under the group's 600 legend rather than beside it */
.bt-r8f-box{position:relative;display:flex;align-items:center}
.bt-r8f-input{height:40px;width:100%;padding:0 44px 0 12px;border:1px solid var(--rule);border-radius:3px;background:var(--card);color:var(--ink);font-family:var(--figure);font-weight:700;font-size:26px;letter-spacing:.01em;font-variant-numeric:tabular-nums;display:block}
.bt-r8f-input::placeholder{color:var(--ink3);font-weight:400;font-family:var(--figure);font-size:26px}   /* the board drew the placeholder in ghost; ghost is never text (DESIGN.md), so it takes the base placeholder's ash */
.bt-r8f-input:focus-visible{outline:none;border-color:var(--frame);box-shadow:0 0 0 2px var(--frame-tint)}
.bt-r8f-input[aria-invalid="true"]{border-color:var(--bad)}
.bt-r8f-unit{position:absolute;right:12px;top:0;height:100%;display:flex;align-items:center;font-size:12.5px;color:var(--ink3);pointer-events:none}
.bt-r8f-hint{font-size:12.5px;color:var(--ink2)}
.bt-r8f-reach{margin-top:10px}   /* the field takes the group's 312 px, so the hint under the box is one line as the board draws it (finish review 4 Sep, fix 1); the box itself stays 200 */
.bt-r8f-reach .bt-r8f-box{width:200px;max-width:100%}
.bt-r8f-reach .bt-r8f-fix{width:100%}
.bt-r8f-reach .bt-r8f-input::placeholder{font-family:var(--ui);font-size:15px}   /* the placeholder is words, not a figure */
.bt-r8f-reach .bt-r8f-input:placeholder-shown{font-family:var(--ui);font-size:15px;font-weight:400}   /* while empty the box's own metrics are the placeholder's, so the words and the unit share one centre line as the figure boxes do (finish review 4 Sep, fix 2) */
/* the centimetres offer: at most one box carries it (it is offered only where that one box times ten clears the whole form), so it may take the width of the pair */
.bt-r8f-fix{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border:1px solid var(--bad);border-radius:3px;background:var(--card);width:calc(200% + 12px);max-width:none}
.bt-r8f-pair > .bt-r8f-field:last-child .bt-r8f-fix{margin-left:calc(-100% - 12px)}
.bt-r8f-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* the title block: the world's ruled dl (D50) with the sheet's one press in a row that continues the block */
.bt-r8f-title{position:absolute;right:32px;bottom:32px;width:420px;z-index:1}
.bt-r8f-tb{margin:0;background:var(--card);border:1px solid var(--rule);border-radius:3px 3px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);font-size:13px}
.bt-r8f-tb > dt,.bt-r8f-tb > dd{margin:0;padding:8px 12px;border-bottom:1px solid var(--rule2);line-height:1.4;min-width:0}
.bt-r8f-tb > dt{font-family:var(--display);font-weight:600;color:var(--ink2);border-right:1px solid var(--rule2);white-space:nowrap}
.bt-r8f-tb b{font-weight:500;color:var(--ink)}
.bt-r8f-h1{font-family:var(--display);font-weight:600;font-size:13px;margin:0;line-height:1.4;color:var(--ink2);white-space:normal;max-width:9em}
.bt-r8f-pt{font-family:var(--figure);font-weight:700;font-size:20px;color:var(--you);letter-spacing:.01em}
.bt-r8f-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;background:var(--card);border:1px solid var(--rule);border-top:0;border-radius:0 0 3px 3px}
/* the ruled bands under the sheet: the alert that is not an answer, the flags that are questions, the report's preview, the answer's rows */
.bt-r8f-band{display:flex;flex-direction:column;gap:8px;padding:14px 32px;border-bottom:1px solid var(--rule)}
.bt-r8f-band p{max-width:72ch}
.bt-r8f-band-h{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink)}
.bt-r8f-alert .bt-r8f-band-h{color:var(--bad)}
.bt-r8f-stop .note{color:var(--ink)}
.bt-r8f-h2{font-family:var(--display);font-size:20px;font-weight:700;margin:0;line-height:1.2}
.bt-r8f-put{display:flex;gap:24px;flex-wrap:wrap;align-items:baseline}
.bt-r8f-put b{font-family:var(--figure);font-weight:700;font-size:22px;letter-spacing:.01em;color:var(--you)}
/* the ruled row under the sheet: the disclosure, closed, and the three ways to the numbers as presses */
.bt-r8f-ways{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 24px;align-items:start;padding:14px 32px;border-bottom:1px solid var(--rule)}
.bt-r8f-find{min-width:0}
.bt-r8f-find summary{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 0;font-family:var(--display);font-weight:600;font-size:15px;color:var(--frame);cursor:pointer;list-style:none;white-space:nowrap}
.bt-r8f-find summary::-webkit-details-marker{display:none}
.bt-r8f-find summary:hover{color:var(--ink)}
.bt-r8f-find summary svg{flex:none;transition:transform .15s ease-out}
.bt-r8f-find[open] summary svg{transform:rotate(90deg)}
.bt-r8f-find-body{display:grid;grid-template-columns:auto minmax(0,1fr);margin:6px 0 4px;border:1px solid var(--rule);border-radius:3px;font-size:13.5px;max-width:960px}
.bt-r8f-find-body > dt,.bt-r8f-find-body > dd{margin:0;padding:8px 12px;border-bottom:1px solid var(--rule2);line-height:1.45;min-width:0}
.bt-r8f-find-body > dt{font-family:var(--display);font-weight:600;color:var(--ink2);border-right:1px solid var(--rule2);white-space:nowrap}
.bt-r8f-find-body > dt:last-of-type,.bt-r8f-find-body > dd:last-of-type{border-bottom:none}
.bt-r8f-ways-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* the answer: the same sheet drawn from the answered numbers, the two ways on side by side, the keep offer last */
.bt-r8f-answer{min-height:0}
.bt-r8f-doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--rule)}
.bt-r8f-door{display:flex;flex-direction:column;gap:10px;padding:18px 32px 20px;min-width:0}
.bt-r8f-door + .bt-r8f-door{border-left:1px solid var(--rule)}
.bt-r8f-door-h{font-family:var(--display);font-size:22px;font-weight:700;line-height:1.1;margin:0}
.bt-r8f-door-you{font-size:15px;color:var(--ink);line-height:1.4;max-width:62ch}
.bt-r8f-door .note{max-width:62ch}
.bt-r8f-door-act{margin-top:auto;padding-top:4px}
.bt-r8f-share{height:44px;font-size:16px;font-family:var(--ui);border-radius:3px;max-width:720px}
.bt-r8f-keep-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bt-r8f-no{color:var(--ink3);border-color:transparent;background:transparent;margin-left:auto}
.bt-r8f-no:hover{color:var(--bad);border-color:transparent}
/* the phone drawing's lettering, sized for the width it is shown at, as the home's is */
.bt-r8f-svg-phone .bt-r8f-lbl,.bt-r8f-svg-phone .bt-r8f-bb{font-size:34px}
.bt-r8f-svg-phone .bt-r8f-letter-svg{font-size:56px}
/* below 1100 the phone drawing takes over (cropped, letters on the crosses), the boxes stack under it two by two at 44 px,
   the title block goes static with its press full width, and the row stacks */
@media (max-width:1100px){
  .bt-r8f-sheet{display:flex;flex-direction:column;background-image:none}
  .bt-r8f-svg-desk{display:none}
  .bt-r8f-svg-phone{display:block;order:1;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background-color:var(--card);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:calc(100% / 18) calc(100% / 18);background-position:calc(100% / 18 * 0.4) 0}
  .bt-r8f-seg{position:static;display:flex;margin:12px 16px;order:0}
  .bt-r8f-seg button{flex:auto;justify-content:center;height:44px;padding:0 10px}
  .bt-r8f-boxes{order:2;display:flex;flex-direction:column;gap:14px;padding:14px 16px 2px}
  .bt-r8f-group{position:static;width:auto;margin:0}
  .bt-r8f-letter{display:inline}
  .bt-r8f-input,.bt-r8f-fix .btn{height:44px}
  .bt-r8f-fix{width:100%}
  .bt-r8f-pair > .bt-r8f-field:last-child .bt-r8f-fix{margin-left:0}
  .bt-r8f-reach .bt-r8f-box{width:100%}
  .bt-r8f-title{position:static;width:auto;margin:14px 16px 16px;order:3}
  .bt-r8f-act .btn{flex:1}
  .bt-r8f-answer .bt-r8f-title{margin-top:0}
  .bt-r8f-band{padding:14px 16px}
  .bt-r8f-acts .btn{flex:1 1 auto}
  .bt-r8f-ways{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:16px 16px 20px}
  .bt-r8f-find summary{height:44px}
  .bt-r8f-find-body{grid-template-columns:minmax(0,1fr);max-width:none}
  .bt-r8f-find-body > dt{border-right:0;border-bottom:0;padding-bottom:0;white-space:normal}
  .bt-r8f-find-body > dt:last-of-type{border-bottom:0}
  .bt-r8f-ways-r{flex-direction:column;align-items:stretch;justify-content:flex-start}
  .bt-r8f-ways-r .btn{height:44px;justify-content:flex-start}
  .bt-r8f-doors{grid-template-columns:minmax(0,1fr)}
  .bt-r8f-door{padding:16px}
  .bt-r8f-door + .bt-r8f-door{border-left:0;border-top:1px solid var(--rule)}
  .bt-r8f-keep-acts .btn{flex:1 1 auto}
  .bt-r8f-no{margin-left:0}
}
@media (max-width:720px){
  .bt-r8f-svg-phone .bt-r8f-lbl,.bt-r8f-svg-phone .bt-r8f-bb{font-size:60px}
  .bt-r8f-svg-phone .bt-r8f-letter-svg{font-size:96px}
}
/* ==== end round eight, my fit ==== */
/* ==== round eight, admin: the ruled page for Carl's own tools (D51), ported from docs/design/round8 (r8- became bt-r8a-) ====
   No board (Carl, 4 Sep 2026: admin is in, "header and tokens only"). The five admin pages take the geometry chart's tokens
   and type in the plan's ruled-page shape: a title block at the top carrying the counts bound to the data, ruled sections,
   the world's table heads (r8-table), status words instead of pills, and the world's presses with the destructive ones apart
   and confirming with the consequence. Monospace stays only on the scraper's raw notes (.bt-r8a-raw), which are read
   character by character against the source page. Desk pages: 40 px controls, 44 px below 720 px. */
.bt-r8a{padding:20px 32px 32px;display:flex;flex-direction:column;gap:16px;max-width:1440px;width:100%;font-variant-numeric:tabular-nums}
.bt-r8a a{color:var(--frame)} .bt-r8a a:hover{color:var(--ink)}
.bt-r8a .btn{border-radius:3px}
.bt-r8a .btn.primary{background:var(--frame);border-color:var(--frame);color:var(--frame-ink)}
.bt-r8a .btn.primary[disabled]{opacity:.55;cursor:default}
.bt-r8a .btn.quiet{border-color:transparent;background:transparent;color:var(--frame)}
.bt-r8a .btn.quiet:hover{color:var(--ink)}
.bt-r8a .btn:focus-visible,.bt-r8a a:focus-visible,.bt-r8a input:focus-visible,.bt-r8a textarea:focus-visible{outline:2px solid var(--frame);outline-offset:2px}
/* the destructive press: apart at the far end of its row, ash until hovered, and its form or button confirms with the consequence */
.bt-r8a .btn.bt-r8a-off{color:var(--ink3);margin-left:auto}
.bt-r8a .btn.bt-r8a-off:hover{color:var(--bad)}
/* the title block: the page's name and one sentence on the left, the counts as a ruled list on the right */
.bt-r8a-title{display:grid;grid-template-columns:minmax(0,1fr) 520px;background:var(--card);border:1px solid var(--rule);border-radius:3px}
.bt-r8a-title-l{padding:18px 22px 20px;display:flex;flex-direction:column;gap:10px;border-right:1px solid var(--rule2);min-width:0}
.bt-r8a-h1{font-family:var(--display);font-size:28px;font-weight:700;line-height:1.1;letter-spacing:-.01em;margin:0;overflow-wrap:anywhere}
.bt-r8a-sub{font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink2);margin:-4px 0 0}
.bt-r8a-lede{font-size:15px;color:var(--ink2);max-width:72ch;margin:0;overflow-wrap:anywhere}
.bt-r8a-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.bt-r8a-acts > form{display:contents}
.bt-r8a-dl{display:grid;grid-template-columns:auto minmax(0,1fr);font-size:13px;align-content:start;margin:0}
.bt-r8a-dl > dt,.bt-r8a-dl > dd{margin:0;padding:8px 12px;border-bottom:1px solid var(--rule2);min-width:0;line-height:1.4;overflow-wrap:anywhere}
.bt-r8a-dl > dt{font-family:var(--display);font-weight:600;color:var(--ink2);border-right:1px solid var(--rule2);white-space:nowrap}
.bt-r8a-dl > dt:last-of-type,.bt-r8a-dl > dd:last-of-type{border-bottom:none}
.bt-r8a-dl b{font-weight:500;color:var(--ink)}
.bt-r8a-pt{font-family:var(--figure);font-weight:700;font-size:20px;color:var(--ink);letter-spacing:.01em;line-height:1;margin-right:4px}
/* the flash: what the last press did, one line on the drawing tint */
.bt-r8a-flash{padding:10px 14px;background:var(--frame-tint);border:1px solid var(--frame);border-radius:3px;font-size:14px;color:var(--ink)}
/* ruled sections: a head with the count in the figure face, then rows or a table */
.bt-r8a-sec{background:var(--card);border:1px solid var(--rule);border-radius:3px;min-width:0}
.bt-r8a-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:6px 12px;padding:10px 14px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.bt-r8a-sec-h h2{font-family:var(--display);font-size:15px;font-weight:700;margin:0}
.bt-r8a-n{font-family:var(--figure);font-size:18px;font-weight:700;margin-left:2px;letter-spacing:.01em}
.bt-r8a-sec-b{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.bt-r8a-rows{display:flex;flex-direction:column}
.bt-r8a-rows > *{padding:10px 14px;border-bottom:1px solid var(--rule2);margin:0}
.bt-r8a-rows > *:last-child{border-bottom:none}
.bt-r8a-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
/* tables with the world's heads (r8-table); a wide one scrolls inside its own section, never the page */
.bt-r8a-wrap{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--ghost) var(--rule2)}
.bt-r8a-table{width:100%;border-collapse:collapse;font-size:13.5px}
.bt-r8a-table th{text-align:left;font-family:var(--display);font-weight:600;font-size:12.5px;color:var(--ink3);padding:8px 10px;border-bottom:1px solid var(--rule);white-space:nowrap}
.bt-r8a-table td{padding:9px 10px;border-bottom:1px solid var(--rule2);vertical-align:top}
.bt-r8a-table tr:last-child td{border-bottom:none}
.bt-r8a-table td.n{text-align:right;font-family:var(--figure);font-size:17px;font-weight:600;letter-spacing:.01em;white-space:nowrap;line-height:1.2}
.bt-r8a-table th.n{text-align:right}
.bt-r8a-table td.t{white-space:normal;min-width:140px}
.bt-r8a-table td.w{white-space:nowrap}
.bt-r8a-table td .btn{margin:-6px 0}
.bt-r8a-table td form{margin:0;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.bt-r8a-name{font-family:var(--display);font-weight:600;font-size:14px}
/* status and check words: a word in its colour, never a pill. The finish review (4 September): the word carries the state, so the
   colours are the world's own (the Frame And You Rule, no third meaning colour): waiting on someone in Slate, approved and live
   in drawing ink, rejected or failed in stop red, skipped in ash */
.bt-r8a-status{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.02em;white-space:nowrap}
.bt-r8a-status.ok{color:var(--frame)} .bt-r8a-status.wait{color:var(--ink2)} .bt-r8a-status.bad{color:var(--bad)} .bt-r8a-status.neutral{color:var(--ink3)}
.bt-r8a-check{display:flex;gap:10px;align-items:baseline}
.bt-r8a-check .bt-r8a-status{flex:none;min-width:64px}
/* the scraper's raw notes: read character by character against the source page, so they keep the mono face */
.bt-r8a-raw{font-family:var(--mono);font-size:12px;color:var(--ink2);white-space:pre-wrap;overflow-wrap:anywhere}
.bt-r8a-table td.bt-r8a-raw{min-width:220px}
.bt-r8a-note{font-size:12.5px;color:var(--ink2);margin:0}
.bt-r8a-warn{color:var(--ink2);font-weight:600}
.bt-r8a-was{display:block;color:var(--ink);font-family:var(--ui);font-size:11.5px;font-weight:500;line-height:1.2;letter-spacing:0}
.bt-r8a-new{font-family:var(--display);font-size:11px;font-weight:600;color:var(--ink2);margin-left:4px}
/* the word that labels a bare figure once its table head has gone (the phone fold below): hidden on the desk */
.bt-r8a-unit{display:none;font-family:var(--ui);font-size:13px;font-weight:400;color:var(--ink2);margin-left:4px;letter-spacing:0}
/* the decision form and the request row's note: 40 px, the world's edges, the body face */
.bt-r8a-decide{display:flex;flex-direction:column;gap:10px}
.bt-r8a-decide textarea,.bt-r8a-in{border:1px solid var(--rule);border-radius:3px;background:var(--card);color:var(--ink);font-family:var(--ui);font-size:14px}
.bt-r8a-decide textarea{min-height:72px;padding:10px 12px;resize:vertical;width:100%}
.bt-r8a-in{height:40px;padding:0 12px;width:220px;max-width:100%}
.bt-r8a-form-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bt-r8a-empty{font-size:14px;color:var(--ink2);margin:0}
@media (max-width:920px){
  .bt-r8a-title{grid-template-columns:minmax(0,1fr)}
  .bt-r8a-title-l{border-right:none;border-bottom:1px solid var(--rule2)}
  .bt-r8a-two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .bt-r8a{padding:16px 16px 24px}
  .bt-r8a .btn,.bt-r8a-in{height:44px}
  .bt-r8a-table td .btn{margin:0}
  /* the finish review (4 September): on a phone a report and a listing needing a decision fold into a ruled row instead of a
     sideways-scrolling table, so the sentence reads at full width and Done or Reject is a 44 px press in reach */
  .bt-r8a-fold thead{display:none}
  .bt-r8a-fold,.bt-r8a-fold tbody{display:block}
  .bt-r8a-fold tr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:baseline;padding:10px 14px 12px;border-bottom:1px solid var(--rule2)}
  .bt-r8a-fold tr:last-child{border-bottom:none}
  .bt-r8a-fold td{display:block;padding:0;border-bottom:none;min-width:0}
  .bt-r8a-fold td.w{white-space:normal}
  .bt-r8a-fold td.n{text-align:left}
  .bt-r8a-fold td.t,.bt-r8a-fold td.bt-r8a-raw{min-width:0}
  .bt-r8a-fold td form{margin-top:4px}
  .bt-r8a-fold .bt-r8a-unit{display:inline}
  /* a report: when and bike on one line, the number, the sentence at full width, source and from, then Done */
  .bt-r8a-fold-report tr{grid-template-areas:"when bike" "num num" "what what" "src from" "done done"}
  .bt-r8a-fold-report td:nth-child(1){grid-area:when;color:var(--ink2)}
  .bt-r8a-fold-report td:nth-child(2){grid-area:bike}
  .bt-r8a-fold-report td:nth-child(3){grid-area:num;font-family:var(--display);font-weight:600}
  .bt-r8a-fold-report td:nth-child(4){grid-area:what}
  .bt-r8a-fold-report td:nth-child(5){grid-area:src}
  .bt-r8a-fold-report td:nth-child(6){grid-area:from;color:var(--ink2)}
  .bt-r8a-fold-report td:nth-child(7){grid-area:done}
  /* a listing needing a decision: brand and model on one line, kind and category with the size count, the raw notes at full width, then Reject */
  .bt-r8a-fold-review tr{grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"brand model model" "kind cat sizes" "notes notes notes" "off off off"}
  .bt-r8a-fold-review td:nth-child(1){grid-area:brand}
  .bt-r8a-fold-review td:nth-child(2){grid-area:model}
  .bt-r8a-fold-review td:nth-child(3){grid-area:kind;color:var(--ink2)}
  .bt-r8a-fold-review td:nth-child(4){grid-area:cat;color:var(--ink2)}
  .bt-r8a-fold-review td:nth-child(5){grid-area:sizes}
  .bt-r8a-fold-review td:nth-child(6){grid-area:notes}
  .bt-r8a-fold-review td:nth-child(7){grid-area:off}
  .bt-r8a-fold-review td.bt-r8a-raw:empty{display:none}   /* a listing with no note leaves no gap before Reject (the verdict pass) */
  .bt-r8a-fold-review tr:has(td.bt-r8a-raw:empty){grid-template-areas:"brand model model" "kind cat sizes" "off off off"}   /* and the notes row leaves the template too, or its two row gaps stay as a 9 px band */
}
/* ==== end round eight, admin ==== */
/* ==== round eight, ruled pages: the forms, the measuring sheet, the prose pages and the small sheets (D51), ported from docs/design/round8 (r8- became bt-r8r-) ====
   Slice 6 of round 8 (docs/plan/ux-round-8.md). No board of its own (Carl: canvas for new pages, screenshots for small
   changes); the shapes are the board's ruled page (BikePage, Picker, AllBikes and r8common's shared block) and the drawing
   sheet (Fit, the home page's bt-hs- block). One prefix, one block: the title block, the ruled section, the world's inputs
   with the unit inside the box, the figure-face geometry grid, the field error under its field, the small sheet for the
   sign-in family, and the measuring sheet on gridded chart paper. The old rules these pages wore (bt-signin-, bt-alert-,
   bt-form-, bt-field-, bt-contrib-, bt-measure-, bt-step-, bt-prose-, bt-gloss-, bt-report-) stay in the file untouched
   for the pages that still use them; the integrator prunes what is dead after every slice has merged. */
.bt-r8r{display:flex;flex-direction:column;gap:16px;padding:22px 32px 36px;font-variant-numeric:tabular-nums;min-width:0}
.bt-r8r a{color:var(--frame)} .bt-r8r a:hover{color:var(--ink)}
/* the world's own presses on these pages: the drawing ink for the primary, 3 px corners, 44 px tall (DESIGN.md, buttons) */
.bt-r8r .btn{height:44px;border-radius:3px}
.bt-r8r .btn.primary{background:var(--frame);border-color:var(--frame);color:var(--frame-ink)}
.bt-r8r .btn.quiet{border-color:transparent;background:transparent;color:var(--frame)} .bt-r8r .btn.quiet:hover{color:var(--ink)}
.bt-r8r .btn:focus-visible,.bt-r8r a:focus-visible,.bt-r8r summary:focus-visible,.bt-r8r select:focus-visible{outline:2px solid var(--frame);outline-offset:2px}
.bt-r8r ::selection{background:var(--frame-tint);color:var(--ink)}
/* the head: the page's name and its one sentence on the left, the title block on the right */
.bt-r8r-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px 32px;flex-wrap:wrap}
.bt-r8r-head-l{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1 1 420px;max-width:72ch}
.bt-r8r-h1{font-family:var(--display);font-size:28px;font-weight:700;line-height:1.1;margin:0;letter-spacing:-.01em;text-wrap:balance}
.bt-r8r-lede{font-size:15px;color:var(--ink2);margin:0;max-width:72ch;line-height:1.5}
.bt-r8r-links{margin:0;display:flex;gap:6px 14px;flex-wrap:wrap}
/* the title block (D50): keys and values in ruled cells, the counts bound to the catalogue, nothing typed */
.bt-r8r-tb{margin:0;width:520px;max-width:100%;background:var(--card);border:1px solid var(--rule);border-radius:3px;display:grid;grid-template-columns:auto minmax(0,1fr);font-size:13px;align-self:flex-start}
.bt-r8r-tb > dt,.bt-r8r-tb > dd{margin:0;padding:8px 12px;border-bottom:1px solid var(--rule2);line-height:1.4;min-width:0}
.bt-r8r-tb > dt{font-family:var(--display);font-weight:600;color:var(--ink2);border-right:1px solid var(--rule2);white-space:nowrap}
.bt-r8r-tb > dt:last-of-type,.bt-r8r-tb > dd:last-of-type{border-bottom:none}
.bt-r8r-tb b{font-weight:500;color:var(--ink)}
.bt-r8r-tb .nowrap{white-space:nowrap}
/* the ruled section: a chart-paper panel with a rule under its heading, its parts divided by hairlines */
.bt-r8r-sec{background:var(--card);border:1px solid var(--rule);border-radius:3px;min-width:0}
.bt-r8r-sec-h{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--rule)}
.bt-r8r-sec-h h2{font-family:var(--display);font-size:15px;font-weight:700;margin:0;line-height:1.2}
.bt-r8r-sec-h .note{margin:0;flex:1 1 200px}
.bt-r8r-sec-h .btn{margin-left:auto}
.bt-r8r-sec-b{padding:14px 14px 16px;display:flex;flex-direction:column;gap:14px}
.bt-r8r-sec-b > p{margin:0}
.bt-r8r-rows{display:flex;flex-direction:column}
.bt-r8r-rows > *{padding:10px 14px;border-bottom:1px solid var(--rule2)}
.bt-r8r-rows > *:last-child{border-bottom:none}
/* errors and what was sent: red is for errors (DESIGN.md, the ash rule), and it goes on the heading, never on a side border */
.bt-r8r-alert .bt-r8r-sec-h h2{color:var(--bad)}
.bt-r8r-alert .bt-r8r-sec-b{gap:6px;font-size:14px}
.bt-r8r-done .bt-r8r-sec-b{font-size:14px}
.bt-r8r-narrow{max-width:900px}
/* the form: the world's inputs (no mono), the label in sentence case above, the unit inside the box, the error under */
.bt-r8r-form{display:flex;flex-direction:column;gap:16px;min-width:0}
.bt-r8r-fields{display:flex;gap:14px 16px;flex-wrap:wrap;align-items:flex-start}
.bt-r8r-field{display:flex;flex-direction:column;gap:5px;min-width:0;width:220px;max-width:100%}
.bt-r8r-field.w120{width:120px} .bt-r8r-field.w200{width:200px} .bt-r8r-field.w300{width:300px} .bt-r8r-field.wide{flex:1 1 100%;width:100%}
.bt-r8r-label{font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink2);line-height:1.2}
.bt-r8r-box{display:flex;align-items:center;height:40px;box-shadow:inset 0 0 0 1px var(--rule);border-radius:3px;background:var(--card);color:var(--ink);padding:0 12px;gap:8px;min-width:0;transition:box-shadow .15s ease-out}
.bt-r8r-box:hover{box-shadow:inset 0 0 0 1px var(--ink3)}
.bt-r8r-box:focus-within{box-shadow:inset 0 0 0 1px var(--frame),0 0 0 2px var(--frame-tint)}
.bt-r8r-box > input,.bt-r8r-box > select{flex:1 1 auto;min-width:0;width:100%;height:100%;border:0;border-radius:0;background:transparent;padding:0;font-family:var(--ui);font-size:15px;color:var(--ink);caret-color:var(--frame)}
.bt-r8r-box > input:focus-visible,.bt-r8r-box > select:focus-visible{outline:none}
.bt-r8r-box > input::placeholder{color:var(--ink3);font-family:var(--ui)}
.bt-r8r-box > select{cursor:pointer}
.bt-r8r-box.fig > input{font-family:var(--figure);font-weight:700;font-size:24px;letter-spacing:.01em}
.bt-r8r-box.fig > input::placeholder{font-family:var(--ui);font-weight:400;font-size:15px;letter-spacing:0}
.bt-r8r-unit{font-size:12.5px;color:var(--ink3);white-space:nowrap;flex:none}
.bt-r8r-area{width:100%;min-height:120px;height:auto;padding:10px 12px;border:1px solid var(--rule);border-radius:3px;background:var(--card);color:var(--ink);font-family:var(--ui);font-size:15px;line-height:1.45;resize:vertical;display:block;caret-color:var(--frame);transition:border-color .15s ease-out,box-shadow .15s ease-out}
.bt-r8r-area.sm{min-height:72px}
.bt-r8r-area::placeholder{color:var(--ink3)}
.bt-r8r-area:hover{border-color:var(--ink3)}
.bt-r8r-area:focus-visible{outline:none;border-color:var(--frame);box-shadow:0 0 0 2px var(--frame-tint)}
.bt-r8r-fixed{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.2;color:var(--ink);padding:9px 0}
.bt-r8r-hint{font-size:12.5px;color:var(--ink2);margin:0}
.bt-r8r-err{font-size:12.5px;color:var(--bad);margin:0}
.bt-r8r-acts{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.bt-r8r-acts .note{margin:0;max-width:62ch}
.bt-r8r-acts form{margin:0;display:inline-flex}
/* the destructive press sits apart, at the far end, and is the one red control on its sheet */
.bt-r8r-danger-row{flex-basis:100%;display:flex;justify-content:flex-end;margin-top:4px;padding-top:12px;border-top:1px solid var(--rule2)}
.bt-r8r-danger{margin-left:auto;color:var(--bad);border-color:var(--bad)}
.bt-r8r-danger:hover{color:var(--bad);border-color:var(--bad);background:var(--bad-soft)}
/* the geometry grid on the contribute form: the cells are figure-face inputs, the unit sits in the head */
.bt-r8r-grid-wrap{overflow-x:auto;min-width:0;max-width:100%;scrollbar-width:thin;scrollbar-color:var(--ghost) var(--rule2)}
.bt-r8r-grid-wrap::-webkit-scrollbar{height:10px}
.bt-r8r-grid-wrap::-webkit-scrollbar-track{background:var(--rule2)}
.bt-r8r-grid-wrap::-webkit-scrollbar-thumb{background:var(--ghost);border-radius:5px}
.bt-r8r-grid{width:100%;border-collapse:collapse;font-size:13px}
.bt-r8r-grid th{text-align:left;font-family:var(--display);font-weight:600;font-size:13px;line-height:1.2;color:var(--ink2);padding:8px 6px 6px;border-bottom:1px solid var(--rule);white-space:nowrap;vertical-align:bottom}
.bt-r8r-grid th:first-child{padding-left:14px}
.bt-r8r-grid th span{display:block;font-family:var(--ui);font-weight:400;font-size:11.5px;color:var(--ink3);margin-top:1px}
.bt-r8r-grid td{padding:3px;border-bottom:1px solid var(--rule2)}
.bt-r8r-grid td:first-child{padding-left:11px}
.bt-r8r-grid tr:last-child td{border-bottom:none}
.bt-r8r-cell{display:block;width:76px;height:40px;padding:0 8px;border:1px solid var(--rule);border-radius:3px;background:var(--card);color:var(--ink);font-family:var(--figure);font-weight:600;font-size:17px;letter-spacing:.01em;text-align:right;font-variant-numeric:tabular-nums;caret-color:var(--frame);-moz-appearance:textfield}
.bt-r8r-cell::-webkit-outer-spin-button,.bt-r8r-cell::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bt-r8r-cell.lbl{width:96px;font-family:var(--display);font-weight:600;font-size:14px;text-align:left;letter-spacing:0}
.bt-r8r-cell:hover{border-color:var(--ink3)}
.bt-r8r-cell:focus-visible{outline:none;border-color:var(--frame);box-shadow:0 0 0 2px var(--frame-tint)}
.bt-r8r-paste > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--display);font-weight:600;font-size:14px;color:var(--frame)}
.bt-r8r-paste > summary::-webkit-details-marker{display:none}
.bt-r8r-paste > summary svg{flex:none;transition:transform .15s ease-out}
.bt-r8r-paste[open] > summary svg{transform:rotate(90deg)}
.bt-r8r-paste-b{display:flex;flex-direction:column;gap:10px;padding-top:6px}
/* the checks that ran: the word in its own column, the sentence beside it; a check that blocks is an error and says so in red */
.bt-r8r-check{display:grid;grid-template-columns:76px minmax(0,1fr);gap:0 12px;align-items:baseline;font-size:13.5px;color:var(--ink)}
.bt-r8r-check-w{font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink2);white-space:nowrap}
.bt-r8r-check-w.warn{color:var(--ink)} .bt-r8r-check-w.bad{color:var(--bad)}
/* prose pages: the world's type on ruled sections, the measure held at 70ch */
.bt-r8r-prose{display:flex;flex-direction:column;gap:10px;max-width:70ch;font-size:15px;line-height:1.55;color:var(--ink)}
.bt-r8r-prose p{margin:0}
.bt-r8r-prose .note{margin:0}
/* the glossary as the world's ruled definition rows (finish review, fix 3): the term in the key column, in the label face
   in Slate with a hairline to its right, the definition beside it; the anchors kept on the rows; the entry that was asked
   for is the shaded row (DESIGN.md); the list capped at 900 px like the prose pages */
.bt-r8r-gloss-list{margin:0;display:flex;flex-direction:column}
.bt-r8r-gloss-row{display:grid;grid-template-columns:200px minmax(0,1fr);border-bottom:1px solid var(--rule2);scroll-margin-top:16px}
.bt-r8r-gloss-row:last-child{border-bottom:0}
.bt-r8r-gloss-row.on{background:var(--frame-tint);box-shadow:inset 0 0 0 1px var(--frame)}
.bt-r8r-gloss-row > dt,.bt-r8r-gloss-row > dd{margin:0;padding:10px 14px;min-width:0;line-height:1.5;font-size:14px}
.bt-r8r-gloss-row > dt{font-family:var(--display);font-weight:600;color:var(--ink2);border-right:1px solid var(--rule2)}
.bt-r8r-gloss-row > dd{color:var(--ink)}
/* the measuring sheet: the drawing on gridded chart paper on the left, the passes as ruled sections beside it */
.bt-r8r-ms{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 28px;align-items:start}
.bt-r8r-sheet{position:sticky;top:16px;background:var(--card);border:1px solid var(--rule);border-radius:3px;overflow:hidden;min-width:0}
/* the sheet's two drawings (finish review, fix 2, the home sheet's answer, D50): the desk's with the points named in full;
   the phone's, one-word labels with its lettering set here at the size the width needs, in place of the desk's below 720 px */
.bt-r8r-svg{display:block;width:100%;height:auto}
.bt-r8r-svg-phone{display:none}
.bt-r8r-svg .bt-r8r-svg-w{font-size:34px}
.bt-r8r-svg .bt-r8r-svg-d{font-family:var(--figure);font-weight:700;font-size:38px;letter-spacing:.01em}
.bt-r8r-sheet-cap{padding:10px 16px 12px;border-top:1px solid var(--rule2);font-size:13px;color:var(--ink2);display:flex;flex-direction:column;gap:4px;line-height:1.45}
.bt-r8r-sheet-cap p{margin:0}
.bt-r8r-sheet-cap b{font-weight:500;color:var(--ink)}
.bt-r8r-passes{display:flex;flex-direction:column;gap:16px;min-width:0}
.bt-r8r-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.bt-r8r-body{font-size:14px;line-height:1.5;color:var(--ink);display:flex;flex-direction:column;gap:10px}
.bt-r8r-body p{margin:0}
.bt-r8r-body .bt-what{font-size:13px;color:var(--frame)}
/* the readings under each pass: ruled key and value rows, the figure in the figure face */
.bt-r8r-spec{display:grid;grid-template-columns:auto minmax(0,1fr);margin:0;border-top:1px solid var(--rule2)}
.bt-r8r-spec dt,.bt-r8r-spec dd{margin:0;padding:8px 14px;border-bottom:1px solid var(--rule2);font-size:13.5px;line-height:1.4;min-width:0}
.bt-r8r-spec dt{font-family:var(--display);font-weight:600;color:var(--ink2);padding-right:6px}
.bt-r8r-spec dd{color:var(--ink)}
.bt-r8r-spec dt:last-of-type,.bt-r8r-spec dd:last-of-type{border-bottom:none}
.bt-r8r-spec b{font-family:var(--figure);font-weight:700;font-size:20px;line-height:1;color:var(--ink);letter-spacing:.01em}
/* what comes out: the two points in the figure face, the rider's colour, the way the home sheet stamps them */
.bt-r8r-out{display:flex;gap:16px 32px;flex-wrap:wrap;padding:4px 0 2px}
.bt-r8r-out-pt{display:flex;flex-direction:column;gap:4px;min-width:0}
.bt-r8r-out-pt b{font-family:var(--figure);font-weight:800;font-size:44px;line-height:1;color:var(--you);letter-spacing:.01em;white-space:nowrap}
.bt-r8r-out-pt span{font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink2)}
/* the small sheet: one narrow card centred in what is left of the page, the title block at its head, one action at its foot */
.bt-r8r-small{align-items:center;justify-content:center;padding:40px 32px 48px;min-height:calc(100vh - 118px)}
.bt-r8r-card{width:460px;max-width:100%;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);border-radius:3px;overflow:hidden}
.bt-r8r-card .bt-r8r-tb{width:100%;border:0;border-bottom:1px solid var(--rule);border-radius:0;font-size:14px}
.bt-r8r-card .bt-r8r-tb > dt{white-space:normal;max-width:10em;padding:12px 14px}
.bt-r8r-card .bt-r8r-tb > dd{padding:12px 14px;line-height:1.45}
.bt-r8r-card .bt-r8r-tb > dt:last-of-type,.bt-r8r-card .bt-r8r-tb > dd:last-of-type{border-bottom:none}
.bt-r8r-h1s{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.2;margin:0;color:var(--ink);letter-spacing:-.01em}
.bt-r8r-band{padding:12px 14px;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.45}
.bt-r8r-band h2{font-family:var(--display);font-size:15px;font-weight:700;margin:0;line-height:1.2}
.bt-r8r-band p{margin:0}
.bt-r8r-band.bad h2{color:var(--bad)}
.bt-r8r-small-b{padding:14px 14px 16px;display:flex;flex-direction:column;gap:12px;font-size:14px;line-height:1.45}
.bt-r8r-small-b p{margin:0}
.bt-r8r-small-b form{display:flex;flex-direction:column;gap:8px;margin:0}
.bt-r8r-small-b .bt-r8r-field{width:100%}
.bt-r8r-small-b .btn{width:100%}
.bt-r8r-google{gap:10px}
.bt-r8r-or{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink2)}
.bt-r8r-or::before,.bt-r8r-or::after{content:"";flex:1;height:1px;background:var(--rule)}
.bt-r8r-card > .bt-r8r-acts{padding:12px 14px 14px;border-top:1px solid var(--rule2)}
.bt-r8r-card > .bt-r8r-acts.bt-r8r-acts-one .btn{width:100%}
.bt-r8r-ref{font-size:13px;color:var(--ink2);margin:0}
.bt-r8r-ref b{font-weight:500;color:var(--ink);word-break:break-all}
/* narrower desks and tablets: one column, the sheet first, 44 px inputs, the title block full width */
@media (max-width:1100px){
  .bt-r8r{padding:16px 16px 24px}
  .bt-r8r-ms{grid-template-columns:minmax(0,1fr)}
  .bt-r8r-sheet{position:static}
  .bt-r8r-tb{width:100%}
  .bt-r8r-box,.bt-r8r-cell{height:44px}
  .bt-r8r-cell{width:84px}
  .bt-r8r-out-pt b{font-size:40px}
  .bt-r8r-small{padding:24px 16px 32px;min-height:0}
}
/* the phone: every field full width, the destructive press on its own line at the foot, the check word above its sentence */
@media (max-width:720px){
  .bt-r8r-head{flex-direction:column}
  .bt-r8r-head-l{flex:0 0 auto}
  .bt-r8r-field,.bt-r8r-field.w120,.bt-r8r-field.w200,.bt-r8r-field.w300{width:100%}
  .bt-r8r-acts .btn{flex:1 1 auto}
  .bt-r8r-danger{margin-left:0;flex-basis:100%}
  .bt-r8r-check{grid-template-columns:minmax(0,1fr);gap:2px}
  .bt-r8r-sec-h .btn{margin-left:0;flex-basis:100%}
  .bt-r8r-card .bt-r8r-tb{grid-template-columns:minmax(0,1fr)}
  .bt-r8r-card .bt-r8r-tb > dt{border-right:0;border-bottom:0;padding-bottom:0;max-width:none}
  .bt-r8r-card .bt-r8r-tb > dd{padding-top:6px}
  .bt-r8r-card .bt-r8r-tb > dt:last-of-type{border-bottom:none}
  .bt-r8r-gloss-row{grid-template-columns:minmax(0,1fr)}
  .bt-r8r-gloss-row > dt{border-right:0;padding-bottom:0}
  .bt-r8r-gloss-row > dd{padding-top:4px}
  .bt-r8r-svg-desk{display:none}
  .bt-r8r-svg-phone{display:block}
  .bt-r8r-svg-phone .bt-r8r-svg-w{font-size:60px}
  .bt-r8r-svg-phone .bt-r8r-svg-d{font-size:68px}
}
/* ==== end round eight, ruled pages ==== */
/* ==== round eight, picker and All bikes: the ruled page (D51), ported from docs/design/round8 (r8p- became bt-r8p-) ====
   The picker (/shortlist) and All bikes (/catalogue) as the plan's third page shape: a title block at the top, ruled
   sections, the condensed face for figures, prose in the body face. One block, one prefix; tokens only, no new tokens.
   The shared r8- classes the slice needs (the title block, the section, the rows, the segment, the search box) are ported
   here under the slice's own prefix for the integrator to fold. Controls inside the page take the chart's 3 px corners and
   its Drawing Ink primary and focus ring, which the base block still has at 4 px and teal (DESIGN.md, not canonized). */
.bt-r8p-page{padding:20px 32px 32px;display:flex;flex-direction:column;gap:16px;width:100%;min-width:0}
.bt-r8p-page .btn{border-radius:3px}
.bt-r8p-page .btn.primary{background:var(--frame);color:var(--frame-ink);border-color:var(--frame)}
.bt-r8p-page .btn.primary:hover{color:var(--frame-ink);border-color:var(--frame)}
.bt-r8p-page .btn:focus-visible,.bt-r8p-page a:focus-visible,.bt-r8p-page input:focus-visible,.bt-r8p-page select:focus-visible,.bt-r8p-page button:focus-visible{outline:2px solid var(--frame);outline-offset:2px}
.bt-r8p-page input.text,.bt-r8p-page select.text{height:44px;border-radius:3px;font-size:15px}
.bt-r8p-note{font-size:12.5px;color:var(--ink2);margin:0;line-height:1.45}
.bt-r8p-note-lg{font-size:14px}
.bt-r8p-nowrap{white-space:nowrap}
.bt-r8p-h1{font-family:var(--display);font-size:28px;font-weight:700;line-height:1.1;letter-spacing:-.01em;margin:0}
.bt-r8p-h2{font-family:var(--display);font-size:18px;font-weight:700;line-height:1.2;margin:0}
.bt-r8p-lede{font-size:15px;color:var(--ink2);max-width:72ch;margin:0}
.bt-r8p-lab{font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink2)}
/* the alert and the flash: ruled panels in the page's own type, not the base block's cards */
.bt-r8p-alert,.bt-r8p-flash{padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.bt-r8p-alert{border-color:var(--bad)}
/* the title block (D50): the page's signature, full width at the top of a ruled page */
.bt-r8p-title{display:grid;grid-template-columns:minmax(0,1fr) 520px;background:var(--card);border:1px solid var(--rule);border-radius:3px}
.bt-r8p-title-l{padding:18px 22px 20px;display:flex;flex-direction:column;gap:10px;border-right:1px solid var(--rule2);min-width:0}
.bt-r8p-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.bt-r8p-dl{display:grid;grid-template-columns:auto minmax(0,1fr);font-size:13px;align-content:start;margin:0}
.bt-r8p-dl > dt,.bt-r8p-dl > dd{margin:0;padding:8px 12px;border-bottom:1px solid var(--rule2);min-width:0;line-height:1.4}
.bt-r8p-dl > dt{font-family:var(--display);font-weight:600;color:var(--ink2);border-right:1px solid var(--rule2);white-space:nowrap}
.bt-r8p-dl > dt:last-of-type,.bt-r8p-dl > dd:last-of-type{border-bottom:none}
.bt-r8p-dl b{font-weight:500;color:var(--ink)}
.bt-r8p-points{display:flex;align-items:baseline;gap:6px 16px;flex-wrap:wrap}
.bt-r8p-point{white-space:nowrap}
/* the rider's two points in the title block: the figure face in the rider's colour, and nothing else on the page is orange (DESIGN.md, the frame and you rule) */
.bt-r8p-pt{font-family:var(--figure);font-weight:700;font-size:20px;color:var(--you);letter-spacing:.01em}
/* the two columns: the list, and the picks sticky on the right */
.bt-r8p-cols{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:16px 28px;align-items:start}
.bt-r8p-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.bt-r8p-aside{position:sticky;top:16px}
/* the search: the box is the first control on the page, 44 px, the icon inside it */
.bt-r8p-search{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bt-r8p-box{flex:1 1 280px;display:flex;align-items:center;gap:10px;height:44px;padding:0 12px;border:1px solid var(--rule);border-radius:3px;background:var(--card);color:var(--ink2);font-size:15px;min-width:0}
.bt-r8p-box:focus-within{border-color:var(--frame)}
.bt-r8p-q{flex:1;min-width:0;height:42px;border:0;background:transparent;padding:0;font-size:16px;font-family:var(--ui);color:var(--ink)}
.bt-r8p-q:focus-visible{outline:none}
.bt-r8p-q::placeholder{color:var(--ink3)}
.bt-r8p-badge{white-space:nowrap}
.bt-r8p-matches{white-space:nowrap}
.bt-r8p-hint{max-width:76ch;margin-top:-4px}
/* the kinds: a segment whose figures are read off the catalogue, and the line where a Time trial button would have been */
.bt-r8p-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bt-r8p-seg{display:inline-flex;border:1px solid var(--rule);border-radius:3px;overflow:hidden;background:var(--card)}
.bt-r8p-seg a{display:inline-flex;align-items:center;height:40px;padding:0 14px;font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink2);border-right:1px solid var(--rule);text-decoration:none;white-space:nowrap}
.bt-r8p-seg a:last-child{border-right:none}
.bt-r8p-seg a:hover{color:var(--ink)}
.bt-r8p-seg a.on{background:var(--frame);color:var(--frame-ink)}
.bt-r8p-seg a b{font-family:var(--figure);font-weight:700;font-size:17px;margin-left:6px;letter-spacing:.01em}
.bt-r8p-seg a:focus-visible{outline-offset:-3px}
.bt-r8p-kinds{max-width:72ch}
/* the A to Z: the letters in the figure face */
.bt-r8p-az{display:flex;gap:4px;flex-wrap:wrap}
.bt-r8p-az a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:38px;border:1px solid var(--rule);border-radius:3px;background:var(--card);font-family:var(--figure);font-weight:700;font-size:18px;color:var(--ink);text-decoration:none}
.bt-r8p-az a:hover{border-color:var(--ink)}
.bt-r8p-az a.on{background:var(--frame);border-color:var(--frame);color:var(--frame-ink)}
/* a ruled section: chart paper, a rule, a head with the count at the right, rows divided by hairlines */
.bt-r8p-sec{background:var(--card);border:1px solid var(--rule);border-radius:3px;min-width:0}
.bt-r8p-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--rule)}
.bt-r8p-sec-h h2{font-family:var(--display);font-size:15px;font-weight:700;margin:0}
.bt-r8p-sec-h h2 a{color:var(--ink);text-decoration:none}
.bt-r8p-sec-h h2 a:hover{color:var(--frame)}
.bt-r8p-sec-b{padding:12px 14px;display:flex;flex-direction:column;gap:12px}
.bt-r8p-rows{display:flex;flex-direction:column}
.bt-r8p-list{display:flex;flex-direction:column;gap:12px}
.bt-r8p-list:empty{display:none}
.bt-r8p-scope{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding:2px 0}
.bt-r8p-scope .bt-r8p-note{max-width:70ch}
.bt-r8p-empty{padding:16px 14px 18px;display:flex;flex-direction:column;gap:10px}
.bt-r8p-ask{display:flex;gap:8px;flex-wrap:wrap}
.bt-r8p-ask .text{flex:1 1 200px;max-width:320px}
/* the index of makes: three columns read down, the count in the figure face at the right (D40) */
/* three columns read DOWN, the way an index is read; a grid of the same width would read across the rows instead */
.bt-r8p-index{column-count:3;column-gap:28px;padding:2px 14px 4px}
.bt-r8p-make{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:38px;border-bottom:1px solid var(--rule2);text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:600;font-size:15px;break-inside:avoid;-webkit-column-break-inside:avoid}
.bt-r8p-make:hover{color:var(--frame)}
.bt-r8p-make.on{color:var(--frame)}
.bt-r8p-make b{font-family:var(--figure);font-weight:700;font-size:18px;color:var(--ink2);letter-spacing:.01em}
.bt-r8p-make.on b{color:var(--frame)}
/* the picks on the right: the small drawing, the name, the size figure with the verdict word, and the quiet cross */
.bt-r8p-pick{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:0 12px;align-items:center;padding:7px 10px 7px 14px;border-bottom:1px solid var(--rule2)}
.bt-r8p-pick .bt-hs-thumb-svg{display:block;width:100%;height:auto}
/* the shared thumb's stroke is under a pixel at 120 px (88 px on a phone), so the frame greys and the two points go pink; the
   board's builder applied the thumb rule (DESIGN.md, 2.4 times the sheet stroke) by CSS in the same units, and so does the port:
   the frame reads as Drawing Ink and the rider's two marks as Rider Orange */
.bt-r8p-pick svg line{stroke-width:12}
.bt-r8p-pick svg g line{stroke-width:9}
.bt-r8p-pick svg g circle{stroke-width:7}
.bt-r8p-pick-blank{display:block;width:100%;height:40px}
.bt-r8p-pick-body{min-width:0}
.bt-r8p-pick-n{font-family:var(--display);font-weight:600;font-size:15px;line-height:1.2}
.bt-r8p-pick-s{display:flex;align-items:baseline;gap:8px;margin-top:3px;flex-wrap:wrap}
.bt-r8p-fig{font-family:var(--figure);font-weight:700;letter-spacing:.01em;line-height:1;color:var(--frame);font-size:30px}
.bt-r8p-verdict{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.02em;white-space:nowrap}
.bt-r8p-verdict.ok,.bt-r8p-verdict.prob{color:var(--frame)} .bt-r8p-verdict.warn{color:var(--you)} .bt-r8p-verdict.bad{color:var(--ink3)}
.bt-r8p-x{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);border:1px solid transparent;border-radius:3px;background:transparent;cursor:pointer;padding:0}
.bt-r8p-x:hover{border-color:var(--rule);color:var(--bad)}
.bt-r8p-aside-f{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px}
.bt-r8p-go{width:100%}
.bt-r8p-keep .btn{width:100%}
/* the rows on a kind, a letter or a make press, and the search's rows: the name, the kind, the size count in the figure face, the press */
.bt-r8p-row{display:grid;grid-template-columns:minmax(0,1fr) 170px 96px auto;gap:14px;align-items:center;min-height:52px;padding:6px 14px;border-bottom:1px solid var(--rule2)}
.bt-r8p-row:last-child,.bt-r8p-crow:last-child{border-bottom:none}
.bt-r8p-row.on{background:var(--frame-tint)}
.bt-r8p-meta{display:contents}
.bt-r8p-row-name{min-width:0}
.bt-r8p-name{font-family:var(--display);font-weight:700;font-size:16px;line-height:1.2}
.bt-r8p-name a{color:var(--ink);text-decoration:none}
.bt-r8p-name a:hover{color:var(--frame)}
.bt-r8p-cat{font-size:13px;color:var(--ink3)}
.bt-r8p-n{font-family:var(--figure);font-weight:700;font-size:20px;color:var(--ink);white-space:nowrap;letter-spacing:.01em}
.bt-r8p-n span{font-family:var(--display);font-weight:600;font-size:12px;color:var(--ink3);margin-left:5px;letter-spacing:0}
.bt-r8p-pick-btn{gap:6px;min-width:104px}
/* the catalogue's rows: the same, with where the numbers came from in place of the press */
.bt-r8p-crow{display:grid;grid-template-columns:minmax(0,1fr) 150px 96px 320px;gap:14px;align-items:center;min-height:44px;padding:5px 14px;border-bottom:1px solid var(--rule2)}
.bt-r8p-src{font-size:12.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-r8p-src b{font-weight:500;color:var(--ink)}
.bt-r8p-step{padding:14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bt-r8p-step .bt-r8p-note{max-width:70ch}
/* the phone's foot bar: hidden where the panel on the right is in view */
.bt-r8p-bar{display:none}
.bt-r8p-bar-count{font-family:var(--display);font-weight:700;font-size:15px}
/* the no-position sections: the two ways in, side by side, the form's boxes 44 px with their labels above */
.bt-r8p-mine{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px;align-items:start}
.bt-r8p-mine-form{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.bt-r8p-field{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1 1 220px}
.bt-r8p-field-s{flex:0 1 150px}
.bt-r8p-mine-form .bt-r8p-acts{margin-top:0}
@media (max-width:1280px){
  .bt-r8p-title{grid-template-columns:minmax(0,1fr) 440px}
  .bt-r8p-cols{grid-template-columns:minmax(0,1fr) 360px}
  .bt-r8p-pick{grid-template-columns:96px minmax(0,1fr) auto}
  .bt-r8p-crow{grid-template-columns:minmax(0,1fr) 140px 84px 260px}
}
@media (max-width:1100px){
  .bt-r8p-title{grid-template-columns:minmax(0,1fr)}
  .bt-r8p-title-l{border-right:none;border-bottom:1px solid var(--rule2)}
  .bt-r8p-index{column-count:2}
  .bt-r8p-crow{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .bt-r8p-crow .bt-r8p-meta{display:flex;align-items:baseline;gap:12px;grid-column:1}
  .bt-r8p-crow .bt-r8p-src{grid-column:1 / -1;white-space:normal}
}
@media (max-width:920px){
  .bt-r8p-cols{grid-template-columns:minmax(0,1fr)}
  .bt-r8p-aside{position:static}
  .bt-r8p-mine{grid-template-columns:minmax(0,1fr)}
  .bt-r8p-bar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -32px -32px;padding:10px 32px;background:var(--card);border-top:1px solid var(--rule)}
  .bt-r8p-bar-l{min-width:0}
  .bt-r8p-bar-l .bt-r8p-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bt-r8p-bar .btn{flex-shrink:0}
}
@media (max-width:720px){
  .bt-r8p-page{padding:12px 16px 24px;gap:12px}
  .bt-r8p-h1{font-size:24px}
  .bt-r8p-title-l{padding:14px 14px 16px}
  .bt-r8p-dl > dt,.bt-r8p-dl > dd{padding:7px 10px}
  .bt-r8p-search .btn{flex:1 1 auto}
  .bt-r8p-matches{flex:1 1 100%}
  .bt-r8p-seg a{height:44px;padding:0 12px;flex:1 1 auto;justify-content:center}
  .bt-r8p-seg{display:flex;width:100%}
  .bt-r8p-az a{width:44px;height:44px}
  .bt-r8p-index{column-count:2;column-gap:16px;padding:2px 10px 4px}
  .bt-r8p-make{min-height:44px}
  .bt-r8p-row{grid-template-columns:minmax(0,1fr) auto;row-gap:4px;padding:8px 12px}
  .bt-r8p-row .bt-r8p-meta{display:flex;align-items:baseline;gap:12px;grid-column:1}
  .bt-r8p-row .bt-r8p-pick-btn{grid-column:2;grid-row:1 / 3;align-self:center}
  .bt-r8p-crow{padding:8px 12px}
  .bt-r8p-pick{grid-template-columns:88px minmax(0,1fr) auto;padding:7px 8px 7px 12px}
  .bt-r8p-x{width:44px;height:44px}
  .bt-r8p-bar{margin:0 -16px -24px;padding:10px 16px}
  .bt-r8p-sec-h{flex-wrap:wrap}
  .bt-r8p-field-s{flex:1 1 120px}
}
/* ==== end round eight, picker and All bikes ==== */
/* ==== round eight, my bikes and the bike form: the ruled page whose title block is the rider, and the drawing sheet as a form (D51), ported from docs/design/round8 (r8m- became bt-r8m-; the shared r8- classes the slice needs are under the same prefix) ====
   One block, one prefix. The world's tokens only: chart paper (--card) on the page ground (--paper), the drawing ink (--frame)
   for the frame, the dimension ink (--frame-dim) for stack and reach, the rider's colour (--you) for the rider's own points and
   nothing else. No pills, no mono, no shadows, no cards inside cards. */
/* the page and the shared parts (r8-page, r8-h1, r8-h2, r8-lede, r8-sec, r8-rows, r8-tb, the world's presses) */
.bt-r8m-page{padding:20px 32px 32px;display:flex;flex-direction:column;gap:16px;width:100%;font-variant-numeric:tabular-nums}
.bt-r8m-page a{color:var(--frame)} .bt-r8m-page a:hover{color:var(--ink)}
.bt-r8m-page .btn{border-radius:3px}
.bt-r8m-page .btn.primary{background:var(--frame);border-color:var(--frame);color:var(--frame-ink)}
.bt-r8m-page .btn.quiet{border-color:transparent;background:transparent;color:var(--frame)}
.bt-r8m-page .btn.quiet:hover{color:var(--ink)}
.bt-r8m-page .btn:focus-visible,.bt-r8m-page a:focus-visible,.bt-r8m-page summary:focus-visible,.bt-r8m-page .bt-what:focus-visible{outline:2px solid var(--frame);outline-offset:2px}
.bt-r8m-page .note{margin:0}
.bt-r8m-page .note.lg{font-size:14px}
.bt-r8m-h1{font-family:var(--display);font-size:28px;font-weight:700;line-height:1.1;letter-spacing:-.01em;margin:0}
.bt-r8m-h2{font-family:var(--display);font-size:18px;font-weight:700;line-height:1.2;margin:0}
.bt-r8m-lede{font-size:15px;color:var(--ink2);max-width:72ch;margin:0}
.bt-r8m-sec{background:var(--card);border:1px solid var(--rule);border-radius:3px;margin:0}
.bt-r8m-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--rule)}
.bt-r8m-sec-h h2{font-family:var(--display);font-size:15px;font-weight:700;margin:0}
.bt-r8m-sec-b{padding:12px 14px;margin:0}
.bt-r8m-rows{display:flex;flex-direction:column}
.bt-r8m-rows > *{padding:10px 14px;border-bottom:1px solid var(--rule2)}
.bt-r8m-rows > *:last-child{border-bottom:none}
.bt-r8m-empty{font-size:14px;color:var(--ink2);max-width:60ch}
.bt-r8m-sec-link{font-family:var(--display);font-weight:600;font-size:14px;color:var(--frame);text-decoration:none}
.bt-r8m-flash{padding:10px 14px;font-size:14px;color:var(--ink)}
/* the title block: a ruled dl, the page's signature (D50); on the ruled page beside the heading, on the form's sheet under the drawing */
.bt-r8m-tb{background:var(--card);border:1px solid var(--rule);border-radius:3px;display:grid;grid-template-columns:auto minmax(0,1fr);font-size:13px;margin:0}
.bt-r8m-tb > dt,.bt-r8m-tb > dd{margin:0;padding:8px 12px;border-bottom:1px solid var(--rule2);min-width:0;line-height:1.4}
.bt-r8m-tb > dt{font-family:var(--display);font-weight:600;color:var(--ink2);border-right:1px solid var(--rule2);white-space:nowrap}
.bt-r8m-tb > dt:last-of-type,.bt-r8m-tb > dd:last-of-type{border-bottom:none}
.bt-r8m-tb b{font-weight:500;color:var(--ink)}
.bt-r8m-fig{font-family:var(--figure);font-weight:700;font-size:20px;line-height:1;color:var(--ink);letter-spacing:.01em}
.bt-r8m-you{color:var(--you)}
/* My bikes: the head is the heading and the one primary press beside the rider's title block */
.bt-r8m-head{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:28px;align-items:start}
.bt-r8m-head-l{display:flex;flex-direction:column;gap:10px;padding-top:4px;min-width:0}
.bt-r8m-head-acts{display:flex;gap:8px;margin-top:6px}
.bt-r8m-rider .bt-r8m-fig{font-size:22px}
/* the strip of bikes: one tile per bike, the drawing on top, the two points, the parts as ruled rows */
.bt-r8m-strip{display:flex;flex-direction:column;gap:10px}
.bt-r8m-strip-h{display:flex;align-items:baseline;justify-content:space-between;gap:6px 12px;flex-wrap:wrap}
.bt-r8m-empty-strip{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:16px 14px;background:var(--card);border:1px dashed var(--rule);border-radius:3px}
.bt-r8m-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:12px}
.bt-r8m-tile{display:flex;flex-direction:column;gap:0;background:var(--card);border:1px solid var(--rule);border-radius:3px;min-width:0}
.bt-r8m-tile.ref{border-color:var(--frame)}
.bt-r8m-draw{height:150px;padding:8px 10px 0;display:flex;align-items:center;justify-content:center}
.bt-r8m-draw svg{display:block;width:100%;height:100%}
.bt-r8m-draw-empty{margin:8px 10px 0;height:142px;border:1px dashed var(--rule);border-radius:3px}
.bt-r8m-tile-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 12px 0}
.bt-r8m-tile-n{font-family:var(--display);font-weight:700;font-size:15px;line-height:1.2;min-width:0;margin:0}
.bt-r8m-ref{font-family:var(--display);font-weight:600;font-size:13px;color:var(--frame);white-space:nowrap}
.bt-r8m-pts{display:flex;gap:16px;padding:8px 12px 10px;border-bottom:1px solid var(--rule2);margin:0}
.bt-r8m-tpt{display:flex;flex-direction:column;gap:2px;min-width:0}
.bt-r8m-tpt i{font-style:normal;font-family:var(--display);font-weight:600;font-size:12px;color:var(--ink3)}
.bt-r8m-tpt b{font-family:var(--figure);font-weight:700;font-size:22px;line-height:1;letter-spacing:.01em;color:var(--you);white-space:nowrap}
.bt-r8m-tpt b.none{color:var(--ink3);font-family:var(--ui);font-weight:400;font-size:13px;line-height:1.4}
.bt-r8m-spec{display:grid;grid-template-columns:auto minmax(0,1fr);font-size:13px;border-bottom:1px solid var(--rule2);margin:0}
.bt-r8m-spec > dt,.bt-r8m-spec > dd{margin:0;padding:5px 12px;border-bottom:1px solid var(--rule2);min-width:0}
.bt-r8m-spec > dt{font-family:var(--display);font-weight:600;color:var(--ink2);white-space:nowrap;padding-right:6px}
.bt-r8m-spec > dt:last-of-type,.bt-r8m-spec > dd:last-of-type{border-bottom:none}
.bt-r8m-nm{padding:8px 12px 0;font-size:12.5px;color:var(--ink2);line-height:1.4;flex:1 1 auto;margin:0}
.bt-r8m-nm b{font-weight:600;color:var(--ink)}
.bt-r8m-notes{flex:0 0 auto}
.bt-r8m-acts{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 12px 12px}
.bt-r8m-acts .btn{padding:0 12px}
.bt-r8m-acts .btn.quiet{padding:0 6px;font-size:14px}
.bt-r8m-strip-n{font-size:12.5px;color:var(--ink2);max-width:120ch;margin:0}
/* the shortlist row and the ruled sections */
.bt-r8m-short{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;padding:12px 14px}
.bt-r8m-short p{font-size:14px;color:var(--ink2);margin:0}
.bt-r8m-short b{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);margin-right:8px}
.bt-r8m-pos{display:grid;grid-template-columns:150px 150px minmax(0,1fr) auto;align-items:center;gap:4px 16px}
.bt-r8m-pos-n{font-family:var(--display);font-weight:700;font-size:15px}
.bt-r8m-pos-f{font-size:13px;color:var(--ink2)}
.bt-r8m-pos-p{display:flex;align-items:baseline;gap:6px 18px;flex-wrap:wrap;min-width:0}
.bt-r8m-pos-p span{display:inline-flex;align-items:baseline;gap:6px;font-size:12.5px;color:var(--ink3);white-space:nowrap}
.bt-r8m-pos-p b{font-family:var(--figure);font-weight:700;font-size:20px;line-height:1;letter-spacing:.01em;color:var(--you)}
.bt-r8m-pos-p b.same{font-family:var(--ui);font-weight:400;font-size:13px;color:var(--ink2)}
.bt-r8m-pos-p b.move{color:var(--ink)}
.bt-r8m-pos-p .bt-r8m-pos-cap{color:var(--ink2);white-space:normal}
.bt-r8m-nowrap{white-space:nowrap}
.bt-r8m-pos .btn{padding:0 12px}
.bt-r8m-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.bt-r8m-row{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}
.bt-r8m-row-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.bt-r8m-row-h{font-family:var(--display);font-weight:700;font-size:15px}
.bt-r8m-row-acts{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.bt-r8m-state{font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink2);margin-left:8px}
.bt-r8m-reply{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.bt-r8m-reply .bt-r8m-input{flex:1 1 220px}
.bt-r8m-danger-word{color:var(--ink3)} .bt-r8m-danger-word:hover{color:var(--bad)}
/* the account row: the safe presses, a rule, the consequence, then the one red press */
.bt-r8m-account{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding:12px 14px}
.bt-r8m-account-l{display:flex;flex-direction:column;gap:4px;min-width:0}
.bt-r8m-account-l p{font-size:14px;color:var(--ink2);margin:0}
.bt-r8m-account-l b{font-weight:500;color:var(--ink)}
.bt-r8m-account-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bt-r8m-split{width:1px;height:28px;background:var(--rule);margin:0 12px}
.bt-r8m-page .btn.bt-r8m-danger{color:var(--bad);border-color:var(--bad)}
.bt-r8m-danger-note{font-size:12.5px;color:var(--ink2);max-width:46ch;text-align:right}
.bt-r8m-danger-note b{color:var(--bad);font-weight:500}
/* the bike form: the drawing sheet as a form (r8-field, r8-label, r8-input, r8-select, r8-hint, r8-seg ported here) */
.bt-r8m-fhead{display:flex;flex-direction:column;gap:8px}
.bt-r8m-form-shell{display:flex;flex-direction:column;gap:16px}
.bt-r8m-tabs{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.bt-r8m-tabs .note{max-width:100ch}
.bt-r8m-seg{display:inline-flex;border:1px solid var(--rule);border-radius:3px;overflow:hidden;background:var(--card)}
.bt-r8m-seg .tab{height:38px;padding:0 14px;display:inline-flex;align-items:center;font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink2);border:0;border-right:1px solid var(--rule);background:transparent;cursor:pointer;white-space:nowrap}
.bt-r8m-seg .tab:last-child{border-right:none}
.bt-r8m-seg .tab.on{background:var(--frame);color:var(--frame-ink)}
.bt-r8m-seg .tab:focus-visible{outline:2px solid var(--frame);outline-offset:-4px}
.bt-r8m-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px;align-items:start}
.bt-r8m-form{display:flex;flex-direction:column;gap:16px;min-width:0}
.bt-r8m-side{position:sticky;top:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.bt-r8m-sec-note{font-size:12.5px;color:var(--ink2);text-align:right;max-width:52ch}
.bt-r8m-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 14px;padding:12px 14px}
.bt-r8m-fields.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.bt-r8m-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.bt-r8m-form > .bt-r8m-field{padding:0 2px}
.bt-r8m-label{font-family:var(--display);font-weight:600;font-size:13px;line-height:1.2;color:var(--ink2)}
.bt-r8m-input{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:1px solid var(--rule);border-radius:3px;background:var(--card);font-size:15px;color:var(--ink)}
.bt-r8m-input:focus-within{border-color:var(--frame);box-shadow:0 0 0 2px var(--frame-tint)}
.bt-r8m-input.bad{border-color:var(--bad)}
.bt-r8m-input input{flex:1 1 auto;min-width:0;width:auto;height:38px;padding:0;border:0;border-radius:0;background:transparent;font-family:var(--ui);font-size:15px;font-weight:500;color:var(--ink)}
.bt-r8m-input input:focus-visible{outline:none}
.bt-r8m-input input::placeholder{color:var(--ink3);font-weight:400}
.bt-r8m-unit{font-size:12.5px;color:var(--ink3);white-space:nowrap}
/* the select: the browser's own arrow goes (round 8 finish review) and the world's chevron, the same stroke as bt-r8m-caret turned
   down, sits in the box in the ink, drawn as a mask on the wrapper so it takes the theme's ink from the token rather than a colour typed in.
   The same rule belongs to every round-eight form's select (the ruled pages' boxes, the picker, the bike sheet's bar picks): one for the integrator. */
.bt-r8m-selwrap{position:relative;display:block;min-width:0}
.bt-r8m-selwrap::after{content:"";position:absolute;right:11px;top:50%;width:14px;height:14px;transform:translateY(-50%);background:var(--ink);pointer-events:none;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") center/contain no-repeat}
.bt-r8m-selwrap:has(.bt-r8m-select:disabled)::after{background:var(--ink3)}
.bt-r8m-select{appearance:none;-webkit-appearance:none;height:40px;padding:0 34px 0 12px;border:1px solid var(--rule);border-radius:3px;background:var(--card);font-family:var(--ui);font-size:15px;color:var(--ink);width:100%;min-width:0;cursor:pointer}
.bt-r8m-select:disabled{color:var(--ink3);cursor:default}
.bt-r8m-select:focus-visible{outline:none;border-color:var(--frame);box-shadow:0 0 0 2px var(--frame-tint)}
.bt-r8m-select.bad{border-color:var(--bad)}
.bt-r8m-hint{font-size:12.5px;color:var(--ink2)}
.bt-r8m-buys{color:var(--ink)}
.bt-r8m-page .bt-what{color:var(--frame);font-size:inherit;font-family:inherit}
.bt-r8m-page .bt-what:hover{color:var(--ink)}
.bt-r8m-go{align-self:flex-start;height:36px;padding:0 12px;font-size:14px}
.bt-r8m-hint-row{padding:0 14px 12px;font-size:12.5px;color:var(--ink2);max-width:100ch;margin:0}
.bt-r8m-hint-row.rule{border-top:1px solid var(--rule2);padding-top:10px}
/* the notes box grows with what is typed where the browser can (field-sizing) and carries no resize grip (round 8 finish review) */
.bt-r8m-area{display:block;width:100%;min-height:78px;padding:10px 12px;border:1px solid var(--rule);border-radius:3px;background:var(--card);font-family:var(--ui);font-size:15px;color:var(--ink);line-height:1.4;resize:none;field-sizing:content}
.bt-r8m-area::placeholder{color:var(--ink3)}
.bt-r8m-area:focus-visible{outline:none;border-color:var(--frame);box-shadow:0 0 0 2px var(--frame-tint)}
.bt-r8m-area.bad{border-color:var(--bad)}
.bt-r8m-more > summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:6px 10px;flex-wrap:wrap;padding:12px 14px}
.bt-r8m-more > summary::-webkit-details-marker{display:none}
.bt-r8m-more-h{font-family:var(--display);font-size:15px;font-weight:700;display:inline-flex;align-items:center;gap:8px}
.bt-r8m-more[open] > summary{border-bottom:1px solid var(--rule)}
.bt-r8m-caret{color:var(--frame);flex:none;transition:transform .15s ease-out}
.bt-r8m-more[open] .bt-r8m-caret,.bt-r8m-delete[open] .bt-r8m-caret{transform:rotate(90deg)}
.bt-r8m-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bt-r8m-actions .note{margin-left:4px;font-size:13px}
.bt-r8m-alert{padding:12px 14px;border-color:var(--bad);display:flex;flex-direction:column;gap:4px}
.bt-r8m-alert h2{font-family:var(--display);font-size:15px;font-weight:700;color:var(--bad);margin:0}
.bt-r8m-delete{margin-top:8px;padding-top:4px;border-top:1px solid var(--rule2)}
.bt-r8m-delete > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:40px}
.bt-r8m-delete > summary::-webkit-details-marker{display:none}
.bt-r8m-delete-w{font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink3);display:inline-flex;align-items:center;gap:6px}
.bt-r8m-delete > summary:hover .bt-r8m-delete-w{color:var(--bad)}
.bt-r8m-delete .bt-r8m-caret{color:currentColor}
.bt-r8m-delete-b{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:8px 0 4px}
/* the sheet: the drawing on chart paper, the caption under it, the title block under that */
.bt-r8m-sheet{background:var(--card);border:1px solid var(--rule);border-radius:3px;overflow:hidden}
.bt-r8m-svg{display:block;width:100%;height:auto}
/* the drawing is rendered twice, as the home sheet's is (D50): the desk one with the figures on the rider's points, the phone one with
   one-word labels and lettering sized for the width it is shown at (34 drawing units on a tablet, 60 below 720 px, DESIGN.md) */
.bt-r8m-svg-phone{display:none}
.bt-r8m-svg-phone .bt-r8m-lbl,.bt-r8m-svg-phone .bt-r8m-dim-lbl{font-size:34px}
.bt-r8m-draw-tall{height:280px;margin:10px}
.bt-r8m-cap{padding:8px 14px 12px;font-size:12.5px;color:var(--ink2);border-top:1px solid var(--rule2);margin:0}
.bt-r8m-side .bt-r8m-fig{font-size:22px}
.bt-r8m-dim{font-family:var(--figure);font-weight:700;font-size:17px;letter-spacing:.01em;color:var(--frame)}
/* narrower desks: the rider's title block goes under the heading; the form's column dissolves so the drawing goes ahead of the
   sections, under the measure line, and the title block to the foot after Save (round 8 finish review); the phone drawing takes over */
@media (max-width:1100px){
  .bt-r8m-head{grid-template-columns:minmax(0,1fr)}
  .bt-r8m-grid{grid-template-columns:minmax(0,1fr)}
  .bt-r8m-side{display:contents}
  .bt-r8m-sheet{order:-1}
  .bt-r8m-worked{order:1}
  .bt-r8m-svg-desk{display:none}
  .bt-r8m-svg-phone{display:block}
  .bt-r8m-pos{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"n f b" "p p p";gap:4px 12px}
  .bt-r8m-pos-n{grid-area:n} .bt-r8m-pos-f{grid-area:f} .bt-r8m-pos-p{grid-area:p} .bt-r8m-pos > .btn,.bt-r8m-pos > span:last-child{grid-area:b}
  .bt-r8m-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bt-r8m-fields.three{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:920px){
  .bt-r8m-two{grid-template-columns:minmax(0,1fr)}
  .bt-r8m-account{flex-direction:column;align-items:flex-start}
  .bt-r8m-danger-note{text-align:left;flex-basis:100%}
  .bt-r8m-sec-note{text-align:left;max-width:none;flex-basis:100%}
}
/* the phone: 16 px in from the sides, every control 44 px, the segment stacked with a rule under each tab, one tile per row */
@media (max-width:720px){
  .bt-r8m-page{padding:16px 16px 24px}
  .bt-r8m-grid{gap:16px}
  .bt-r8m-svg-phone .bt-r8m-lbl,.bt-r8m-svg-phone .bt-r8m-dim-lbl{font-size:60px}
  .bt-r8m-page .btn,.bt-r8m-input,.bt-r8m-select,.bt-r8m-go{height:44px}
  .bt-r8m-input input{height:42px}
  .bt-r8m-acts .btn.quiet{font-size:14px}
  .bt-r8m-tiles{grid-template-columns:minmax(0,1fr)}
  .bt-r8m-fields,.bt-r8m-fields.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bt-r8m-seg{display:flex;flex-direction:column;align-self:stretch}
  .bt-r8m-seg .tab{width:100%;height:44px;border-right:0;border-bottom:1px solid var(--rule);justify-content:flex-start}
  .bt-r8m-seg .tab:last-child{border-bottom:0}
  .bt-r8m-short{flex-direction:column;align-items:flex-start}
  .bt-r8m-account-r .bt-r8m-split{display:none}
  .bt-r8m-account-r{gap:8px 12px}
  .bt-r8m-tpt b{font-size:20px}
  .bt-r8m-pos-p b{font-size:18px}
  .bt-r8m-row-acts .bt-r8m-split{display:none}
  /* a word that is a press still takes a thumb on a phone */
  .bt-r8m-sec-link{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:480px){
  .bt-r8m-fields,.bt-r8m-fields.three{grid-template-columns:minmax(0,1fr)}
  .bt-r8m-head-acts .btn,.bt-r8m-empty-strip .btn{width:100%}
}
/* ==== end round eight, my bikes and the bike form ==== */
/* ==== round eight, one bike: the bike sheet, the bike page, and Customise retired into the sheet (D51), ported from docs/design/round8 (r8b- became bt-r8b-; the shared r8- shapes it needs are under the same prefix) ====
   The bike sheet is the D48 sheet at full width with the every-size table under it; the bike page is the ruled page: a title
   block, the geometry table as the main object with the frame drawn beside it, ruled sections. Chart paper on the page ground,
   the drawing ink for frames, the fitting size and every press, the rider's colour for the rider's points and "close", ash
   for a size that cannot get there. Size figures and numbers in the figure face; labels sentence case; no pills, no mono. */
.bt-r8b{display:flex;flex-direction:column;gap:16px;padding:20px 32px 32px;font-variant-numeric:tabular-nums;min-width:0}
.bt-r8b a{color:var(--frame)} .bt-r8b a:hover{color:var(--ink)}
.bt-r8b .btn.primary{background:var(--frame);border-color:var(--frame);color:var(--frame-ink)}
.bt-r8b .btn.quiet{border-color:transparent;background:transparent;color:var(--frame)} .bt-r8b .btn.quiet:hover{color:var(--ink)}
.bt-r8b .btn,.bt-r8b .seg{border-radius:3px}
.bt-r8b .seg a.on,.bt-r8b .seg button.on{background:var(--frame);border-color:var(--frame);color:var(--frame-ink)}
.bt-r8b .seg a{text-decoration:none}
.bt-r8b a:focus-visible,.bt-r8b button:focus-visible,.bt-r8b summary:focus-visible,.bt-r8b input:focus-visible,.bt-r8b select:focus-visible{outline:2px solid var(--frame);outline-offset:2px}
.bt-r8b-flash{padding:10px 14px;background:var(--card);border:1px solid var(--rule);border-radius:3px;font-size:14px}
/* the head: crumb, name, the line under it; on the bike page the call to action and the title block beside it */
.bt-r8b-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px 32px;flex-wrap:wrap}
.bt-r8b-head-l{flex:1 1 420px;min-width:0}
.bt-r8b-crumb{font-size:12.5px;color:var(--ink2);display:flex;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.bt-r8b-crumb a{text-decoration:none}
.bt-r8b-h1{font-family:var(--display);font-size:28px;font-weight:700;line-height:1.1;letter-spacing:-.01em;margin:0}
.bt-r8b-sub{font-size:14.5px;color:var(--ink2);margin:6px 0 0;max-width:72ch}
.bt-r8b-cta{display:flex;align-items:center;gap:10px 14px;margin-top:14px;font-size:14.5px;color:var(--ink);max-width:78ch;flex-wrap:wrap}
.bt-r8b-cta > span{flex:1 1 34ch}
.bt-r8b-links{margin:10px 0 0;font-size:12.5px;color:var(--ink2)}
/* the title block: a ruled dl, the page's signature (D50). On the ruled page at the top right; in the sheet head, the position */
.bt-r8b-tb{background:var(--card);border:1px solid var(--rule);border-radius:3px;display:grid;grid-template-columns:auto minmax(0,1fr);font-size:13px;margin:0;min-width:0}
.bt-r8b-tb > dt,.bt-r8b-tb > dd{margin:0;padding:8px 12px;border-bottom:1px solid var(--rule2);min-width:0;line-height:1.4;overflow-wrap:anywhere}
.bt-r8b-tb > dt{font-family:var(--display);font-weight:600;color:var(--ink2);border-right:1px solid var(--rule2);white-space:nowrap}
.bt-r8b-tb > dt:last-of-type,.bt-r8b-tb > dd:last-of-type{border-bottom:none}
.bt-r8b-tb b{font-weight:500;color:var(--ink)}
.bt-r8b-tb .bt-r8b-version-off{text-decoration:underline}
.bt-r8b-tbw{width:560px;flex:none}
.bt-r8b-postb{width:400px}
.bt-r8b-pt{font-family:var(--figure);font-weight:700;font-size:20px;color:var(--you);letter-spacing:.01em;line-height:1}
/* the sheet (D48) at full width */
.bt-r8b-sheet{display:flex;flex-direction:column;min-width:0;border-radius:3px;overflow:hidden;padding:0}
.bt-r8b-sh{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px 32px;align-items:center;padding:16px 22px;border-bottom:1px solid var(--rule)}
.bt-r8b-fig{display:flex;flex-direction:column;align-items:flex-start;line-height:1;white-space:nowrap}
.bt-r8b-fig b{font-family:var(--figure);font-weight:800;font-size:72px;color:var(--frame);letter-spacing:.01em;line-height:1}
.bt-r8b-fig span{font-family:var(--figure);font-weight:700;font-size:32px;color:var(--ink2);letter-spacing:.01em;margin-top:2px}
.bt-r8b-fig small{font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink3);margin-top:6px;white-space:normal}
.bt-r8b-verd{display:flex;flex-direction:column;gap:4px;min-width:0}
.bt-r8b-verd > b{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.1;letter-spacing:.01em}
.bt-r8b-verd > b.ok,.bt-r8b-verd > b.prob{color:var(--frame)} .bt-r8b-verd > b.warn{color:var(--you)} .bt-r8b-verd > b.bad{color:var(--ink3)}
.bt-r8b-band{font-size:14.5px;color:var(--ink)}
.bt-r8b-band b{font-family:var(--figure);font-size:19px;font-weight:700;letter-spacing:.01em}
.bt-r8b-stop{font-size:13px;color:var(--ink2);max-width:62ch} .bt-r8b-stop b{color:var(--ink)}
.bt-r8b-flag{font-size:12.5px;color:var(--ink2);max-width:62ch}
/* the body: the drawing left, Detail A and the spec right */
.bt-r8b-body{display:grid;grid-template-columns:minmax(0,1fr) 440px;border-bottom:1px solid var(--rule2)}
.bt-r8b-draw{padding:12px 16px 12px;border-right:1px solid var(--rule);min-width:0}
.bt-r8b-draw .bt-gc-svg{width:100%;height:auto;display:block}
.bt-r8b-draw .bt-gc-svg text{font-size:38px}
.bt-r8b-draw .bt-gc-svg .bt-gc-letter{font-family:var(--figure);font-weight:700;font-size:52px}
.bt-r8b-draw .bt-gc-svg .bt-gc-lbl-short{display:none}
.bt-r8b-cap{font-size:12.5px;color:var(--ink3);margin:6px 0 0;max-width:78ch}
/* the four-anchor switch and Export PNG, one segment under the drawing (board question 2) */
.bt-r8b-anchor{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-top:12px}
.bt-r8b-anchor .seg button{height:40px;padding:0 12px;font-family:var(--display);font-weight:600;font-size:14px}
.bt-r8b-anchor-note{flex-basis:100%;margin:0;font-size:12.5px;color:var(--ink2);max-width:78ch}
.bt-r8b-side{display:flex;flex-direction:column;min-width:0}
.bt-r8b-side .bt-gc-detail{margin:14px 16px 0;border:1px dashed var(--rule)}
.bt-r8b .bt-gl-glyph circle:first-of-type{fill:var(--frame-tint);stroke:var(--frame-dim)}
.bt-r8b .bt-gl-dot,.bt-r8b .bt-gl-dot.ok,.bt-r8b .bt-gl-dot.prob{fill:var(--frame)} .bt-r8b .bt-gl-dot.warn{fill:var(--you)} .bt-r8b .bt-gl-dot.bad{fill:var(--ink3)}
.bt-r8b .bt-gl-dv{font-family:var(--ui);font-weight:500;font-size:13px}
.bt-r8b .bt-gl-mark{stroke:var(--you)}
.bt-r8b .bt-gc-detail-arrows .bt-gl-arrow svg,.bt-r8b .bt-gc-detail-arrows .bt-gl-same svg{color:var(--frame)}
.bt-r8b-spec{display:grid;grid-template-columns:110px minmax(0,1fr);margin:8px 0 0;padding:6px 16px 8px}
.bt-r8b-spec dt,.bt-r8b-spec dd{margin:0;padding:7px 0;border-bottom:1px solid var(--rule2);font-size:14px;line-height:1.35;min-width:0}
.bt-r8b-spec dt{font-family:var(--display);font-weight:600;color:var(--ink2);padding-right:10px}
.bt-r8b-spec dd{color:var(--ink)}
.bt-r8b-spec dt:last-of-type,.bt-r8b-spec dd:last-of-type{border-bottom:none}
.bt-r8b-solved{display:block;font-size:12px;color:var(--ink3)}
/* the bar strip (D49): the stock bar, the listed bars, another bar, the generic two-piece with your own numbers */
.bt-r8b-bar{display:flex;flex-direction:column;gap:10px;padding:12px 22px 14px;border-bottom:1px solid var(--rule2)}
.bt-r8b-bar-head{display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap}
.bt-r8b-lab{font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink2)}
.bt-r8b-bar-head .bt-r8b-lab{font-size:15px;font-weight:700;color:var(--ink)}
.bt-r8b-bar-strip{display:flex;flex-wrap:wrap;gap:6px}
.bt-r8b-bar-form{display:contents}
.bt-r8b-chip{display:inline-flex;align-items:center;justify-content:center;height:32px;min-width:44px;padding:0 10px;border-radius:3px;border:1px solid transparent;font-family:var(--display);font-weight:600;font-size:15px;line-height:1;white-space:nowrap;color:var(--ink3);text-decoration:none;background:transparent;cursor:pointer}
.bt-r8b-chip.bt-sw-mine{background:var(--frame);border-color:var(--frame);color:var(--frame-ink)}
.bt-r8b-chip.bt-sw-fits{border-color:var(--frame);color:var(--frame)}
.bt-r8b-chip.bt-sw-close{border-color:var(--you);color:var(--you)}
.bt-r8b-chip.bt-sw-no{color:var(--ink3);text-decoration:line-through;text-decoration-color:var(--rule);text-decoration-thickness:1px}
.bt-r8b-chip.bt-sw-showing{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--frame)}
a.bt-r8b-chip:hover,button.bt-r8b-chip:hover{border-color:var(--ink)}
.bt-r8b-barchip{height:auto;min-height:40px;padding:5px 12px;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.2;border-color:var(--rule);color:var(--ink);font-size:14px;font:inherit;font-family:var(--display);font-weight:600}
.bt-r8b-barchip .bt-r8b-barword{font-family:var(--ui);font-weight:400;font-size:12px;color:var(--ink3);letter-spacing:0}
.bt-r8b-barchip.bt-sw-mine .bt-r8b-barword{color:var(--frame-ink);opacity:.85}
.bt-r8b-barchip:hover{border-color:var(--frame)}
.bt-r8b-bar-note{margin:0;max-width:70ch}
.bt-r8b-bar-forms{display:flex;flex-direction:column;gap:6px}
.bt-r8b-more > summary,.bt-r8b-why > summary,.bt-r8b-press > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:14px;color:var(--frame);min-height:40px}
.bt-r8b-more > summary::-webkit-details-marker,.bt-r8b-why > summary::-webkit-details-marker,.bt-r8b-press > summary::-webkit-details-marker{display:none}
.bt-r8b-more .bt-gl-caret,.bt-r8b-why .bt-gl-caret,.bt-r8b-press .bt-gl-caret{color:var(--frame);flex:none;transition:transform .15s ease-out}
.bt-r8b-more[open] > summary .bt-gl-caret,.bt-r8b-why[open] > summary .bt-gl-caret,.bt-r8b-press[open] > summary .bt-gl-caret{transform:rotate(90deg)}
.bt-r8b-pick,.bt-r8b-custom{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:4px 0 6px;padding:12px 14px;border:1px solid var(--rule2);border-radius:3px;background:var(--paper)}
.bt-r8b-bar-l{font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink2)}
.bt-r8b-bar-unit{display:inline-flex;align-items:center;gap:6px}
.bt-r8b-bar-unit input{width:92px}
.bt-r8b-bar .text{width:auto;max-width:100%;background:var(--card)}
.bt-r8b-pick select{min-width:240px;max-width:100%}
.bt-r8b-custom select{min-width:160px}
.bt-r8b-custom-note{flex-basis:100%;margin:0;max-width:78ch}
.bt-r8b-order{margin:0;padding:14px 22px;font-family:var(--display);font-weight:600;font-size:16px;line-height:1.35;color:var(--ink);border-bottom:1px solid var(--rule2)}
.bt-r8b-order b{font-family:var(--figure);font-size:19px;font-weight:700;letter-spacing:.01em}
.bt-r8b-why{padding:6px 22px;border-bottom:1px solid var(--rule2)}
.bt-r8b-why > summary{color:var(--ink);font-weight:600}
.bt-r8b-why-list{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 14px;margin:4px 0 0 22px;font-size:13px;color:var(--ink2)}
.bt-r8b-why-list dt,.bt-r8b-why-list dd{margin:0}
.bt-r8b-why-list b{font-weight:500;color:var(--ink)}
.bt-r8b-why-foot{margin:8px 0 6px 22px;font-size:12.5px;color:var(--ink2);max-width:78ch}
.bt-r8b-next{margin:0;padding:10px 22px;font-size:13.5px;color:var(--ink2);border-bottom:1px solid var(--rule2);max-width:none}
.bt-r8b-next:last-child{border-bottom:none}
/* every size, under the sheet: the chips switch the sheet, the riding segment sits here, the table carries every answer */
.bt-r8b-every,.bt-r8b-sec{padding:0;border-radius:3px;min-width:0}
.bt-r8b-every-h{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--rule)}
.bt-r8b-every-h h2,.bt-r8b-sec-h h2{font-family:var(--display);font-size:15px;font-weight:700;margin:0}
.bt-r8b-every-h h2{margin-right:auto}
.bt-r8b-sizes{display:flex;flex-wrap:wrap;gap:6px}
.bt-r8b-solve{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink2);min-width:0;max-width:100%}
.bt-r8b-solve .seg{flex:0 1 auto;min-width:0}
.bt-r8b-solve .seg a{height:38px;padding:0 14px;font-family:var(--display);font-weight:600;font-size:14px}
.bt-r8b-tw{overflow-x:auto;min-width:0;scrollbar-width:thin}
.bt-r8b-table{width:100%;border-collapse:collapse;font-size:13.5px}
.bt-r8b-table th{text-align:left;font-family:var(--display);font-weight:600;font-size:12.5px;color:var(--ink2);padding:8px 10px;border-bottom:1px solid var(--rule);white-space:nowrap;vertical-align:bottom}
.bt-r8b-table td{padding:9px 10px;border-bottom:1px solid var(--rule2);vertical-align:top}
.bt-r8b-table tr:last-child td{border-bottom:none}
.bt-r8b-table td.n,.bt-r8b-table th.n{text-align:right}
.bt-r8b-table td.n{font-family:var(--figure);font-size:17px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.bt-r8b-table tr.on td{background:var(--frame-tint)}
.bt-r8b-table td.w{white-space:nowrap}
.bt-r8b-table td.v{font-family:var(--display);font-weight:600;white-space:nowrap}
.bt-r8b-table td.v.ok,.bt-r8b-table td.v.prob{color:var(--frame)} .bt-r8b-table td.v.warn{color:var(--you)} .bt-r8b-table td.v.bad{color:var(--ink3)}
.bt-r8b-table td.v small{display:block;font-family:var(--ui);font-weight:400;font-size:12px;color:var(--ink3)}
.bt-r8b-table td.way{color:var(--ink2);font-size:13px;min-width:16ch}
.bt-r8b-blank{display:block;font-family:var(--ui);font-weight:400;font-size:11.5px;color:var(--ink3)}
.bt-r8b-size-link{text-decoration:none;color:var(--frame)}
.bt-r8b-table tr.on .bt-r8b-size-link{color:var(--frame)}
.bt-r8b-every-foot{margin:0;padding:10px 14px;font-size:13px;color:var(--ink2);max-width:none;border-top:1px solid var(--rule2)}
.bt-r8b-foot{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}
.bt-r8b-prov{font-size:13px;color:var(--ink2)} .bt-r8b-prov a{margin-left:10px}
.bt-r8b-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bt-r8b-off{margin-left:24px}
.bt-r8b .btn.bt-r8b-remove{color:var(--ink3)} .bt-r8b-remove:hover{color:var(--bad)}
/* signed out with no position: the three ways on, in the world */
.bt-r8b-empty{max-width:70ch;padding:28px 24px 30px;background:var(--card);border:1px solid var(--rule);border-radius:3px;display:flex;flex-direction:column;gap:12px}
.bt-r8b-empty-h{font-family:var(--display);font-size:22px;font-weight:700;margin:0;line-height:1.15}
.bt-r8b-empty-p{margin:0;font-size:14.5px;color:var(--ink2)}
.bt-r8b-empty-acts{display:flex;gap:8px;flex-wrap:wrap}
/* the bike page: the geometry table as the main object, the frame beside it, then the ruled sections */
.bt-r8b-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:6px 12px;padding:10px 14px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.bt-r8b-geo{display:grid;grid-template-columns:minmax(0,1fr) 560px}
.bt-r8b-geo-t{padding:0 0 4px;min-width:0}
.bt-r8b-geo-d{padding:12px 16px;border-left:1px solid var(--rule);min-width:0}
.bt-r8b-svg{display:block;width:100%;height:auto}
.bt-r8b-rows{display:flex;flex-direction:column}
.bt-r8b-rows > *{padding:10px 14px;border-bottom:1px solid var(--rule2)}
.bt-r8b-rows > *:last-child{border-bottom:none}
.bt-r8b-cock{display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(0,300px);gap:4px 16px;align-items:baseline}
.bt-r8b-cock .n{font-family:var(--display);font-weight:600;font-size:14.5px}
.bt-r8b-cock .s{font-size:13px;color:var(--ink2);overflow-wrap:anywhere}
.bt-r8b-cock .s b{font-family:var(--figure);font-weight:700;font-size:17px;color:var(--ink);letter-spacing:.01em}
.bt-r8b-k{font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink2)}
/* the geometry table's scroller on a narrow screen: a fade at the right edge and a line under it counting the columns off the edge */
.bt-r8b-geo-scroll{position:relative;min-width:0}
.bt-r8b-geo-more{display:none;margin:0;padding:6px 14px 8px;font-size:12.5px;color:var(--ink2)}
.bt-r8b-words{padding:12px 14px;font-size:14px;color:var(--ink);max-width:78ch;line-height:1.5;overflow-wrap:anywhere}
.bt-r8b-press{border-top:1px solid var(--rule2)}
.bt-r8b-press > summary{padding:0 14px}
.bt-r8b-src{padding:10px 14px;font-size:13px;color:var(--ink2);display:flex;flex-direction:column;gap:4px;max-width:90ch;overflow-wrap:anywhere;border-top:1px solid var(--rule2)}
/* narrower desks: the sheet's detail goes under the drawing, the title block under the name */
@media (max-width:1280px){
  .bt-r8b-body{grid-template-columns:minmax(0,1fr) 380px}
  .bt-r8b-tbw{width:100%;flex:1 1 100%}
  .bt-r8b-geo{grid-template-columns:minmax(0,1fr)}
  .bt-r8b-geo-d{border-left:none;border-top:1px solid var(--rule)}
}
/* the phone and the narrow tablet: one column everywhere, every chip and control 44 px, 16 px in from the sides */
@media (max-width:1100px){
  .bt-r8b{padding:16px 16px 24px}
  .bt-r8b-sh{grid-template-columns:minmax(0,1fr);gap:12px;padding:14px 16px}
  .bt-r8b-fig b{font-size:56px}
  .bt-r8b-postb{width:100%}
  .bt-r8b-body{grid-template-columns:minmax(0,1fr)}
  .bt-r8b-draw{border-right:none;border-bottom:1px solid var(--rule2);padding:12px 12px}
  /* the desk drawing is full width here, so its lettering grows a little and keeps its numbers; below 720 the phone drawing takes over (round six's bt-gc-svg-phone rules) */
  .bt-r8b-draw .bt-gc-svg text{font-size:44px}
  .bt-r8b-draw .bt-gc-svg .bt-gc-letter{font-size:60px}
  .bt-r8b-side .bt-gc-detail{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:12px 16px 0}
  .bt-r8b-side .bt-gc-detail-h{flex-basis:100%}
  .bt-r8b-side .bt-gc-detail .bt-gl-glyph{margin:0}
  .bt-r8b-spec{grid-template-columns:92px minmax(0,1fr)}
  .bt-r8b-bar,.bt-r8b-order,.bt-r8b-why,.bt-r8b-next{padding-left:16px;padding-right:16px}
  .bt-r8b-chip{height:44px;min-width:44px;font-size:15px}
  .bt-r8b-barchip{min-height:44px}
  .bt-r8b-anchor .seg button,.bt-r8b-solve .seg a{height:44px}
  .bt-r8b-pick select,.bt-r8b-bar-unit input,.bt-r8b-custom select{min-height:44px}
  .bt-r8b-why-list,.bt-r8b-why-foot{margin-left:0}
  .bt-r8b-every-h h2{flex-basis:100%;margin-right:0}
  .bt-r8b-off{margin-left:0;flex-basis:100%}
  .bt-r8b-cock{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .bt-r8b-head{flex-direction:column;gap:14px}
  .bt-r8b-head-l{flex-basis:auto}
  .bt-r8b-cta > span{flex-basis:100%}
  .bt-r8b-solve,.bt-r8b-anchor{flex-wrap:wrap}
  .bt-r8b-solve .seg,.bt-r8b-anchor .seg{max-width:100%;overflow-x:auto}
  .bt-r8b-why-list{grid-template-columns:minmax(0,1fr);gap:2px 0}
  .bt-r8b-why-list dd{margin:0 0 6px 12px}
  .bt-r8b-acts{flex-direction:column;align-items:stretch}
  .bt-r8b-acts .btn{width:100%}
  .bt-r8b-empty{padding:22px 16px 24px}
  /* the every-size table folds into ruled rows in the D46 amendment's shape (the finish review): the size figure and the verdict
     word on one line, stem, spacers and hoods labelled on the next, the "anything in the way" sentence full width, the maker's
     five numbers labelled on one line under it. The heads stay for a screen reader; the labels come from each cell's data-l. */
  /* the phone drawing takes over from the desk drawing (round six's bt-gc-svg-phone rules); said again here because this block's own .bt-r8b-draw .bt-gc-svg rule would otherwise keep the desk drawing on */
  .bt-r8b-draw .bt-gc-svg-phone + .bt-gc-svg{display:none}
  .bt-r8b-every-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bt-r8b-every-table,.bt-r8b-every-table tbody{display:block}
  .bt-r8b-every-table tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:10px 14px;border-bottom:1px solid var(--rule2)}
  .bt-r8b-every-table tr:last-child{border-bottom:none}
  .bt-r8b-every-table tr.on{background:var(--frame-tint)}
  .bt-r8b-every-table td,.bt-r8b-every-table td.n{display:block;padding:0;border:0;text-align:left;background:transparent;font-size:15px;white-space:nowrap}
  .bt-r8b-every-table td:first-child{font-size:22px}
  .bt-r8b-every-table td.v{flex:1 0 calc(100% - 120px);font-size:15px}   /* the verdict takes the rest of the size's line, so the parts start a new one */
  .bt-r8b-every-table td.v small{display:inline;margin-left:6px}
  .bt-r8b-every-table td.w{font-family:var(--figure);font-weight:600;font-size:15px;letter-spacing:.01em}
  .bt-r8b-every-table td:nth-child(5){flex:1 0 calc(100% - 260px);min-width:min(100%,160px);white-space:normal}   /* hoods close the parts' line, so the numbers start a new one; where the line cannot hold them they take the next */
  .bt-r8b-every-table td:nth-child(n+7){font-size:14px;letter-spacing:0}
  .bt-r8b-every-table td:nth-child(n+7)::before{font-size:11px}
  .bt-r8b-every-table td[data-u]::after{content:attr(data-u);font-family:var(--ui);font-weight:400;font-size:12.5px;color:var(--ink2);letter-spacing:0}
  .bt-r8b-every-table td.way{flex-basis:100%;white-space:normal;font-size:13px}   /* an empty sentence still takes its line, so the numbers never join the parts */
  .bt-r8b-every-table td.way:empty{margin-top:-4px}
  .bt-r8b-every-table td[data-l]::before{content:attr(data-l) " ";font-family:var(--ui);font-weight:400;font-size:12.5px;color:var(--ink2);letter-spacing:0}
  /* the bike page's geometry table: the columns off the right edge fade out, and the line under the table counts them */
  .bt-r8b-geo-scroll::after{content:"";position:absolute;top:0;right:0;bottom:0;width:48px;background:linear-gradient(90deg,transparent,var(--card));pointer-events:none}
  .bt-r8b-geo-more{display:block}
}
/* ==== end round eight, one bike ==== */
/* ==== round eight, what else fits: the answer page (D51), ported from docs/design/round8 (r8c- became bt-r8c-) ====
   /compare in the geometry chart world (D48): the position strip is My shortlist's (bt-gc-pos), the page is one grid so the
   sheet can come first in the document and sit at the right on a desk, every row leads with the size figure and carries the
   band, the verdict is a word, the sheet draws the selected size over the rider's own frame. The round-4 glance (bt-gl) is
   restyled here to the world's faces and colours: no monospace, no coloured side border, the arrows in the drawing ink. */
.bt-r8c-flash{margin:12px 32px 0;padding:12px 16px;border:1px solid var(--rule);border-radius:3px;background:var(--card);font-size:14px;color:var(--ink);display:flex;gap:6px 12px;flex-wrap:wrap;align-items:baseline}
.bt-r8c-flash.bt-alert{flex-direction:row;border-color:var(--bad)}
.bt-r8c-flash.bt-flash{border-color:var(--frame);background:var(--frame-tint)}
.bt-r8c-flash a{color:var(--frame)}
/* the strip: My shortlist's (D48) with the parts the position was read from beside it, in ash. The two wrappers (the
   source with the drop and setback, the two points) are rows on a phone and nothing on a desk, where the strip reads
   source, points, drop and setback, parts in one line. */
.bt-r8c-parts{color:var(--ink3);flex:1 1 200px;min-width:0;line-height:1.3;order:2}
.bt-r8c-srcline,.bt-r8c-pts{display:contents}
.bt-r8c-pos .bt-gc-pos-note{order:1}
.bt-r8c-pos{flex-wrap:nowrap}
.bt-r8c-pos .bt-gc-pos-l{flex:1 1 0;min-width:0}
/* the page: one grid, the sheet first in the document (B2a) and at the right on a desk */
.bt-r8c{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-areas:"head head" "ctl ctl" "list sheet";gap:16px 28px;align-items:start}
.bt-r8c-head{grid-area:head;display:flex;align-items:flex-end;justify-content:space-between;gap:16px 20px;flex-wrap:wrap}
.bt-r8c-ctl{grid-area:ctl;display:flex;flex-direction:column;gap:10px;min-width:0}
.bt-r8c-list{grid-area:list;display:flex;flex-direction:column;gap:12px;min-width:0}
/* The sheet is taller than a 900 px viewport, so it is pinned by its foot rather than its head (round 8 finish review):
   it sits at the top of its column on the first viewport, scrolls with the page until "Keep it on my shortlist" reaches
   the bottom of the window, and stays there for the rest of the list, so the press is on screen beside every row. The
   column is its own element because a sticky box is held inside its containing block, and a grid item's is the whole
   grid, not its area: without the column the sheet slid up over the controls at the top of the page. */
.bt-r8c-sheetcol{grid-area:sheet;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.bt-r8c-sheet{position:sticky;top:auto;bottom:16px}
.bt-r8c .bt-what{color:var(--frame)} .bt-r8c .bt-what:hover{color:var(--ink)}
/* save this comparison: one press, the name asked for on it, a disclosure so it works with scripting off */
.bt-r8c-save > summary{list-style:none;cursor:pointer;display:inline-flex}
.bt-r8c-save > summary::-webkit-details-marker{display:none}
.bt-r8c-save[open] > summary{background:var(--frame);border-color:var(--frame);color:var(--frame-ink)}
.bt-r8c-save-form{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap;justify-content:flex-end}
.bt-r8c-save-form .text{width:240px;height:44px}
/* the controls: two sentences and a count line */
.bt-r8c-ctl1,.bt-r8c-ctl2,.bt-r8c-ctl3{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;min-width:0}
.bt-r8c-barform{display:flex;align-items:center;gap:8px;margin:0}
.bt-r8c-on{font-size:13px;color:var(--ink2)}
.bt-r8c-bar{width:300px;height:40px;font-size:14px}
.bt-r8c-hint{color:var(--ink3);flex:1 1 320px;min-width:0}
.bt-r8c-find{display:flex;align-items:center;gap:8px;margin:0;flex-wrap:nowrap}
.bt-r8c-find-box{width:300px;height:40px}
.bt-r8c-find .bt-find-input{height:38px;font-size:14px}
.bt-r8c-find .bt-find-go,.bt-r8c-find .bt-find-clear{height:40px}
.bt-r8c-kinds a i{font-style:normal;font-family:var(--figure);font-weight:600;font-size:15px;margin-left:5px;color:var(--ink3);letter-spacing:.01em}
.bt-r8c-kinds a.on i{color:var(--frame-ink);opacity:.85}
.bt-r8c-everybtn{margin-left:auto}
.bt-r8c-count{margin:0;color:var(--ink2);font-size:12.5px}
.bt-r8c-how{margin-left:auto;font-size:13px;color:var(--ink2);min-width:0}
.bt-r8c-how > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-weight:600;color:var(--frame)}
.bt-r8c-how > summary::-webkit-details-marker{display:none}
.bt-r8c-how .bt-gl-caret{color:var(--frame);flex:none;transition:transform .15s ease-out}
.bt-r8c-how[open] .bt-gl-caret{transform:rotate(90deg)}
.bt-r8c-how[open]{flex-basis:100%}
.bt-r8c-how-in{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding:12px 14px;background:var(--card);border:1px solid var(--rule);border-radius:3px;max-width:72ch;line-height:1.5}
.bt-r8c-how-in p{margin:0}
.bt-r8c-band{padding:0;background:transparent;border-left:0;font-size:13px;color:var(--ink2)}
.bt-r8c-band .bt-gl-arrow svg{color:var(--frame)}
.bt-r8c-gloss{color:var(--ink2)}
/* the rows: the size figure leads (D48), the band on every row, the whole row is the press */
.bt-r8c-row{position:relative;display:grid;grid-template-columns:82px minmax(0,1fr);gap:0 14px;padding:11px 16px 11px 14px;border-bottom:1px solid var(--rule2);align-items:start;color:var(--ink)}
.bt-r8c-row:last-child{border-bottom:none}
.bt-r8c-row:hover{background:var(--paper)}
.bt-r8c-row.sel{background:var(--frame-tint);box-shadow:inset 0 0 0 1px var(--frame)}
.bt-r8c-size{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;line-height:1;padding-top:2px}
.bt-r8c-size b{font-family:var(--figure);font-weight:700;font-size:44px;letter-spacing:.01em;color:var(--frame)}
.bt-r8c-row.ref .bt-r8c-size b{color:var(--ink)}
.bt-r8c-size span{font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink3);white-space:nowrap}
.bt-r8c-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.bt-r8c-line1{display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap}
.bt-r8c-name{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.2;color:var(--ink);text-decoration:none}
.bt-r8c-name::after{content:"";position:absolute;inset:0}
.bt-r8c-name:hover{color:var(--frame)}
.bt-r8c-name:focus-visible{outline:2px solid var(--frame);outline-offset:2px}
.bt-r8c-cat{font-size:12.5px;color:var(--ink3);min-width:0}
.bt-r8c-pin,.bt-r8c-alt{color:var(--ink3)}
.bt-r8c-verdict{margin-left:auto;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.02em;white-space:nowrap}
.bt-r8c-verdict.ok,.bt-r8c-verdict.prob{color:var(--frame)} .bt-r8c-verdict.warn{color:var(--you)} .bt-r8c-verdict.bad{color:var(--ink3)}
.bt-r8c-line2{display:grid;grid-template-columns:168px minmax(0,1fr) auto;gap:4px 14px;align-items:center}
.bt-r8c-build{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--ink2);line-height:1.3}
.bt-r8c-build b{font-weight:500;color:var(--ink)}
.bt-r8c-build .note{color:var(--ink3)}
.bt-r8c-hands{min-width:0;font-size:13px;color:var(--ink2);display:flex;flex-direction:column;gap:3px}
.bt-r8c-hands .bt-gl{gap:3px 10px}
.bt-r8c-hands .bt-gl-arrows{gap:4px 10px}
.bt-r8c .bt-gl-arrow,.bt-r8c .bt-gl-drop .bt-gl-dv{font-family:var(--ui)}
.bt-r8c .bt-gl-arrow{color:var(--ink)} .bt-r8c .bt-gl-n{font-weight:500}
.bt-r8c .bt-gl-arrow svg,.bt-r8c .bt-gl-same svg{color:var(--frame)}
.bt-r8c .bt-gl-drop{gap:0 4px;color:var(--ink2)}
.bt-r8c .bt-gl-drop > span:first-child{text-transform:lowercase}
.bt-r8c .bt-gl-dv{font-weight:500;color:var(--ink)} .bt-r8c .bt-gl-dv::after{content:","}
.bt-r8c .bt-gl-glyph circle:first-of-type{fill:var(--frame-tint);stroke:var(--frame-dim)}
.bt-r8c .bt-gl-dot,.bt-r8c .bt-gl-dot.ok,.bt-r8c .bt-gl-dot.prob{fill:var(--frame)} .bt-r8c .bt-gl-dot.warn{fill:var(--you)} .bt-r8c .bt-gl-dot.bad{fill:var(--ink3)}
.bt-r8c .bt-gl-mark{stroke:var(--you)}
.bt-r8c-within{font-size:13px;color:var(--ink2);white-space:nowrap}
/* the band's two numbers in the figure face on every row and on the sheet's verdict line, as the board draws them */
.bt-r8c-within b{font-family:var(--figure);font-weight:600;font-size:16px;color:var(--ink);letter-spacing:.01em}
.bt-r8c-sh-verdict b{font-family:var(--figure);font-weight:600;font-size:17px;color:var(--ink);letter-spacing:.01em}
.bt-r8c-flag{color:var(--ink2)}
.bt-r8c-none{padding:20px 16px;display:flex;flex-direction:column;gap:10px}
.bt-r8c-none p{margin:0}
/* the step control under the rows (D39) */
.bt-r8c-step{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:4px 0}
.bt-r8c-step .note{margin-left:auto}
.bt-r8c-foot{margin:0;color:var(--ink3)}
/* the sheet (D48): the size as the largest figure, the drawing as the overlay, the spec as ruled rows */
.bt-r8c-sh-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 18px;align-items:center;padding:16px 22px 14px;border-bottom:1px solid var(--rule2)}
.bt-r8c-tsize{white-space:nowrap}
.bt-r8c-sh-t{min-width:0}
.bt-r8c-sh-t h2{font-family:var(--display);font-size:24px;font-weight:700;margin:0;line-height:1.1}
.bt-r8c-sh-sub{font-size:13px;color:var(--ink2);margin-top:4px}
.bt-r8c-sh-verdict{display:flex;align-items:baseline;gap:6px 10px;margin-top:8px;font-size:13.5px;color:var(--ink2);flex-wrap:wrap}
.bt-r8c-sh-verdict .bt-gc-verdict{font-size:17px;margin-left:0}
.bt-r8c-sheet .bt-r8c-flag{margin:8px 22px 0}
.bt-r8c-draw{border-bottom:1px solid var(--rule2)}
.bt-r8c-draw .bt-gc-draw-cap{padding:8px 22px;margin:0}
.bt-r8c-detail{display:flex;align-items:center;gap:16px;padding:12px 22px;border-bottom:1px solid var(--rule2);font-size:13.5px;color:var(--ink2)}
.bt-r8c-detail .bt-gl-glyph{flex:none}
.bt-r8c-detail-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.bt-r8c-detail-k{font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink2)}
.bt-r8c-detail-t .bt-gl-arrow,.bt-r8c-detail-t .bt-gl-same{color:var(--ink);display:inline-flex;align-items:center;gap:4px;font-size:14px}
.bt-r8c-detail-drop b{font-weight:500;color:var(--ink)}
.bt-r8c-spec{padding:6px 22px 8px}
/* the order line leads with the size, in the drawing ink, as the link that opens that size's sheet */
.bt-r8c-order a{color:var(--frame);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.bt-r8c-order a:hover{color:var(--ink)}
.bt-r8c-why-in{margin-top:10px}
.bt-r8c-why-h{display:block;font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink2);margin:8px 0 0 22px}
.bt-r8c-why .bt-gc-why-list{margin-top:4px}
.bt-r8c-vs{padding:12px 22px 14px;border-bottom:1px solid var(--rule2);min-width:0}
.bt-r8c-vs h3{font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink2);margin:0 0 6px}
.bt-r8c-table{width:100%;border-collapse:collapse;font-size:13px}
.bt-r8c-table th{text-align:left;font-family:var(--display);font-weight:600;font-size:12px;color:var(--ink3);padding:6px;border-bottom:1px solid var(--rule)}
.bt-r8c-table td{padding:7px 6px;border-bottom:1px solid var(--rule2);vertical-align:top}
.bt-r8c-vs-wide th,.bt-r8c-vs-wide td{white-space:nowrap}
.bt-r8c-vs-wide td:first-child{white-space:normal}
.bt-r8c-table tr:last-child td{border-bottom:none}
.bt-r8c-table td.n,.bt-r8c-table th.n{text-align:right}
.bt-r8c-table td.n{font-family:var(--figure);font-size:16px;font-weight:600;letter-spacing:.01em}
.bt-r8c-table td.n i{font-style:normal;font-family:var(--ui);font-weight:400;font-size:11px;color:var(--ink3);margin-left:3px}
.bt-r8c-table tr.mine td,.bt-r8c-table td.mine,.bt-r8c-table th.mine{background:var(--frame-tint)}
.bt-r8c-vs-tall{display:none}
.bt-r8c-keep{display:contents}
.bt-r8c-share-note{flex-basis:100%;margin:0}
/* signed out, or no position yet: a ruled page inviting the three ways in */
.bt-r8c-empty{display:block}
.bt-r8c-empty-in{max-width:70ch;display:flex;flex-direction:column;gap:12px;padding:12px 0 40px}
.bt-r8c-empty-h{font-family:var(--display);font-size:22px;font-weight:700;margin:0}
.bt-r8c-doors{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 16px;margin:8px 0 0;align-items:center}
.bt-r8c-doors dt{margin:0} .bt-r8c-doors dt b{font-family:var(--figure);font-weight:700;font-size:26px;color:var(--frame);line-height:1}
.bt-r8c-doors dd{margin:0;display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}
.bt-r8c-empty-acts{padding:0}
/* narrower desks: the two columns share the width, the band wraps under the arrows */
@media (max-width:1280px){
  .bt-r8c{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .bt-r8c-line2{grid-template-columns:150px minmax(0,1fr)}
  .bt-r8c-within{grid-column:1 / -1}
  .bt-r8c-hint{flex-basis:100%}
  .bt-r8c-how{margin-left:0}
}
/* the phone and the narrow tablet: the sheet first, then the controls, then the rows; every control 44 px */
@media (max-width:1100px){
  .bt-r8c{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "sheet" "ctl" "list";gap:12px}
  .bt-r8c-sheet{position:static}
  .bt-r8c-tsize b{font-size:56px}
  .bt-r8c-sh-head,.bt-r8c-detail,.bt-r8c-vs,.bt-r8c-acts,.bt-r8c-spec,.bt-r8c-why,.bt-r8c-next,.bt-r8c-order{padding-left:16px;padding-right:16px}
  .bt-r8c-draw .bt-gc-draw-cap{padding-left:16px;padding-right:16px}
  .bt-r8c-sheet .bt-r8c-flag{margin-left:16px;margin-right:16px}
  .bt-r8c-why-h{margin-left:0}
  .bt-r8c-vs-wide{display:none} .bt-r8c-vs-tall{display:table}
  .bt-r8c-ctl1,.bt-r8c-ctl2{flex-direction:column;align-items:stretch}
  .bt-r8c-ctl1 .seg,.bt-r8c-ctl2 .seg{display:flex;width:100%}
  .bt-r8c-ctl1 .seg a,.bt-r8c-ctl2 .seg a{flex:1 1 auto;justify-content:center;height:44px;padding:0 6px;font-size:13.5px}
  .bt-r8c-barform{width:100%} select.bt-r8c-bar{flex:1 1 auto;width:auto;min-width:0;height:44px}
  .bt-r8c-find{width:100%} .bt-r8c-find-box{flex:1 1 auto;width:auto;min-width:0;height:44px}
  .bt-r8c-find .bt-find-input{height:44px}
  .bt-r8c-find .bt-find-go,.bt-r8c-find .bt-find-clear{height:44px}
  .bt-r8c-how > summary,.bt-r8c-why > summary{min-height:44px;align-items:center}
  .bt-r8c-hint{flex-basis:auto}
  .bt-r8c-everybtn{margin-left:0;width:100%}
  /* the strip as the phone board draws it (round 8 finish review): the two points on one row (they share it at 390 and
     the second wraps under at 320), then the source with the drop and setback beside it and "Change it" at the strip's
     right, then the parts. The doubled class outranks the integration block's one-column strip under 400 px. */
  .bt-gc-pos.bt-r8c-pos{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:start}
  .bt-r8c-pts{display:flex;flex-wrap:wrap;gap:6px 16px;grid-column:1 / -1;grid-row:1;min-width:0}
  .bt-r8c-srcline{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;grid-column:1;grid-row:2;min-width:0}
  .bt-r8c-pos .bt-gc-pos-note{display:inline;white-space:normal}
  /* "Change it" is a 44 px press on a phone; the negative margins keep the strip's row at the text's height */
  .bt-r8c-pos .bt-gc-pos-change{grid-column:2;grid-row:2;justify-self:end;align-self:start;display:inline-flex;align-items:center;min-height:44px;margin:-12px 0}
  .bt-r8c-parts{grid-column:1 / -1;grid-row:3;white-space:normal}
  .bt-r8c-row{grid-template-columns:56px minmax(0,1fr);padding:10px 12px;gap:0 10px}
  .bt-r8c-size{flex-direction:column;align-items:flex-start;gap:3px}
  .bt-r8c-size b{font-size:36px}
  .bt-r8c-size span{font-size:11px;white-space:normal}
  /* the name line is two columns so the verdict word sits at the name's right on every row and the category line runs under both */
  .bt-r8c-line1{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:baseline}
  .bt-r8c-name{font-size:15px;grid-column:1;grid-row:1}
  .bt-r8c-cat{grid-column:1 / -1;grid-row:2}
  .bt-r8c-verdict{font-size:12.5px;grid-column:2;grid-row:1;margin-left:0}
  .bt-r8c-within b{font-size:15px}
  .bt-r8c-line2{grid-template-columns:124px minmax(0,1fr);gap:4px 8px;align-items:start}
  .bt-r8c-hands .bt-gl-glyph{display:none}
  .bt-r8c-hands .bt-gl{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
  .bt-r8c-within{white-space:normal}
  .bt-r8c-step{flex-direction:column;align-items:stretch}
  .bt-r8c-step .btn{width:100%} .bt-r8c-step .note{margin-left:0}
  .bt-r8c-head{flex-direction:column;align-items:stretch}
  .bt-r8c-save > summary{width:100%}
  .bt-r8c-save-form .text{flex:1 1 auto;width:auto}
  .bt-r8c-flash{margin:12px 16px 0}
  .bt-r8c-doors dd .btn{width:100%}
}
/* ==== end round eight, what else fits ==== */
/* ==== round eight, integration (D51): what the merged site showed when it was walked, fixed in one place rather than in seven blocks ==== */
/* Detail A's arrows were the last monospace on the sheets (a round-four rule): the figure face carries the number, the body face the word, as every other figure on the chart does. */
.bt-gl-arrow{font-family:var(--figure);font-weight:600;font-size:15px;letter-spacing:.01em}
.bt-gl-band .bt-gl-arrow{font-family:var(--figure);font-size:15px}
/* My shortlist's position strip kept its two points side by side down to 320 px, where the second ran past the edge; one column there. */
@media (max-width:400px){
  .bt-gc-pos{grid-template-columns:minmax(0,1fr)}
  .bt-gc-pos-change{white-space:normal}
}
/* The finish reviews (4 September, seven slices): form labels and table heads are sentence case in Slate everywhere (DESIGN.md's rule); each block now carries that in its own label rule. */
/* Two coloured side borders survived the prune on live classes (the hook's side-tab findings): the glance legend and the glossary's open entry take the world's tint instead. */
.bt-gl-band{border-left:0;background:var(--frame-tint)}
.bt-gloss-entry.on{border-left:0;background:var(--frame-tint)}
/* What else fits takes the bike sheet's phone drawing (the fix round): said here because its own block sizes .bt-gc-svg inside .bt-r8c-draw. */
@media (max-width:720px){
  .bt-r8c-draw .bt-gc-svg-phone{display:block}
  .bt-r8c-draw .bt-gc-svg-phone + .bt-gc-svg{display:none}
}
/* ==== end round eight, integration ==== */
/* ==== round nine, the reviewer's pages: the submission page with the chart beside the table, and the queue (D52), ported from docs/design/round9 (r9a- became bt-r9a-) ====
   The shell (the page, the title block, the ruled sections, the presses, the flash) is round eight's admin block (bt-r8a-), which
   the board draws byte for byte as r8-; only the shapes the board adds are here. The status word gains the ash tone for a row
   closed as the same as the catalogue (Carl's call 7: one word for one state, from SubmissionWords). The row strip under the
   chart is an SVG whose viewBox is the row at twice the chart's scale (the board positioned a 200 per cent image by hand per
   artboard; the offsets are data, and there are no inline styles), so its height follows the row and the orientation. */
.bt-r9a-status{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.02em;white-space:nowrap}
.bt-r9a-status.ok{color:var(--frame)} .bt-r9a-status.wait{color:var(--ink2)} .bt-r9a-status.bad{color:var(--bad)} .bt-r9a-status.ash{color:var(--ink3)}
/* the two columns: the chart sticky on the left, the table and the decision on the right */
.bt-r9a-cols{display:grid;grid-template-columns:580px minmax(0,1fr);gap:16px;align-items:start}
.bt-r9a-side{position:sticky;top:16px;display:flex;flex-direction:column;gap:16px;min-width:0}
.bt-r9a-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.bt-r9a-img{position:relative;border-bottom:1px solid var(--rule2);background:#fff}
.bt-r9a-img img{display:block;width:100%;height:auto}
.bt-r9a-marks{position:absolute;inset:0;width:100%;height:100%}
.bt-r9a-mark{fill:none;stroke:var(--ink3);stroke-width:8;stroke-dasharray:24 14}
.bt-r9a-hand{fill:none;stroke:var(--frame);stroke-width:10}
.bt-r9a-cap{padding:8px 14px;font-size:12.5px;color:var(--ink2);line-height:1.4;margin:0}
.bt-r9a-cap b{font-weight:600;color:var(--ink)}
.bt-r9a-stripwrap{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--ghost) var(--rule2);border-top:1px solid var(--rule2);border-bottom:1px solid var(--rule2);background:#fff}
.bt-r9a-strip{display:block;height:auto;min-width:100%}
.bt-r9a-strip .bt-r9a-mark{stroke-width:5;stroke-dasharray:16 10}
.bt-r9a-strip .bt-r9a-hand{stroke-width:6}
.bt-r9a-pdf{padding:12px 14px;font-size:14px;line-height:1.45;border-bottom:1px solid var(--rule2);margin:0}
.bt-r9a-src{font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.bt-r9a-src a{color:var(--frame)}
/* the checks: a word in its colour, the sentence, and the cells it points at as presses */
.bt-r9a-check{display:flex;gap:10px;align-items:baseline;font-size:13.5px;line-height:1.45}
.bt-r9a-check .bt-r9a-status{flex:none;min-width:64px}
.bt-r9a-cells{display:inline-flex;flex-wrap:wrap;gap:4px;vertical-align:middle;margin-left:4px}
.bt-r9a-cell{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 8px;border:1px solid var(--rule);border-radius:3px;background:var(--card);text-decoration:none;color:var(--ink);font-family:var(--figure);font-weight:600;font-size:15px;letter-spacing:.01em;white-space:nowrap}
.bt-r9a-cell span{font-family:var(--display);font-weight:600;font-size:12px;color:var(--ink3);letter-spacing:0}
.bt-r9a-cell:hover{border-color:var(--ink);color:var(--ink)}
/* the table: figures at 17 px, the mark under a cell at 11.5 px, the row under the hand as the shaded column; every cell is a press (a link, so it works with scripting off) */
.bt-r9a-wrap{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--ghost) var(--rule2)}
.bt-r9a-table{width:100%;border-collapse:collapse;font-size:13.5px}
.bt-r9a-table th{text-align:right;font-family:var(--display);font-weight:600;font-size:12.5px;color:var(--ink3);padding:8px 7px 7px;border-bottom:1px solid var(--rule);vertical-align:bottom;line-height:1.15}
.bt-r9a-table th:first-child{text-align:left}
.bt-r9a-table th i{display:block;font-family:var(--ui);font-style:normal;font-weight:400;font-size:11px;color:var(--ink3);margin-top:2px}
.bt-r9a-table th i.named{color:var(--ink2)}
.bt-r9a-table td{padding:7px 7px;border-bottom:1px solid var(--rule2);vertical-align:top}
.bt-r9a-table tr:last-child td{border-bottom:none}
.bt-r9a-table td.n{text-align:right;font-family:var(--figure);font-size:17px;font-weight:600;letter-spacing:.01em;white-space:nowrap;line-height:1.2;padding:0}
.bt-r9a-table td.n:hover{box-shadow:inset 0 0 0 1px var(--ghost)}
.bt-r8a .bt-r9a-press{display:block;padding:7px 7px;color:var(--ink);text-decoration:none;min-height:34px}
.bt-r8a .bt-r9a-table td.you .bt-r9a-press{color:var(--frame)}
.bt-r9a-table td.lbl{font-family:var(--display);font-weight:600;font-size:14px;white-space:nowrap}
.bt-r9a-table td.lbl i{display:block;font-style:normal;font-family:var(--ui);font-weight:400;font-size:11.5px;color:var(--ink2)}
.bt-r9a-table tr.cur td{background:var(--frame-tint)}
.bt-r9a-sub{display:block;font-family:var(--ui);font-size:11.5px;font-weight:400;color:var(--ink2);line-height:1.25;letter-spacing:0;white-space:nowrap;margin-top:1px}
.bt-r9a-sub.you{color:var(--frame);font-weight:500}
.bt-r9a-table td[data-r9a-mark="unchecked"] .bt-r9a-press{outline:1px dashed var(--ink3);outline-offset:-3px}
.bt-r9a-sub.unchecked{color:var(--ink)}
.bt-r9a-table td.open{padding:3px 4px 3px 7px}
.bt-r9a-cellbox{display:inline-flex;align-items:baseline;justify-content:flex-end;gap:4px;height:34px;min-width:66px;padding:0 6px 0 8px;border:1px solid var(--frame);border-radius:3px;background:var(--card);box-shadow:0 0 0 2px var(--frame-tint);font-family:var(--figure);font-weight:700;font-size:20px;letter-spacing:.01em;color:var(--ink);line-height:32px}
.bt-r9a-cellbox input{width:58px;height:32px;border:0;padding:0;margin:0;background:transparent;font-family:var(--figure);font-weight:700;font-size:20px;letter-spacing:.01em;color:var(--ink);text-align:right;line-height:32px;display:block}
.bt-r9a-cellbox input:focus-visible{outline:none}
.bt-r9a-cellbox .unit{font-family:var(--ui);font-weight:400;font-size:11.5px;color:var(--ink3);letter-spacing:0}
.bt-r9a-table tr.bt-r9a-editrow td{padding:0;background:var(--frame-tint)}
.bt-r9a-editor{display:flex;align-items:center;gap:14px;padding:10px 14px 12px;border-top:1px solid var(--rule);margin:0;position:sticky;left:0;width:calc(min(100vw, 1440px) - 662px);flex-wrap:wrap}
.bt-r9a-crop{display:block;width:auto;max-width:240px;height:80px;border:1px solid var(--rule);border-radius:3px;background:#fff;object-fit:contain}
.bt-r9a-editor-w{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.bt-r9a-editor-w b{font-family:var(--display);font-weight:700;font-size:14px;color:var(--ink)}
.bt-r9a-editor-w span{font-size:13px;color:var(--ink2);line-height:1.4}
.bt-r9a-editor .btn{flex:none}
.bt-r9a-legend{padding:10px 14px;font-size:12.5px;color:var(--ink2);border-top:1px solid var(--rule2);line-height:1.45;margin:0}
.bt-r9a-legend b{font-weight:600;color:var(--ink)}
.bt-r9a-legend .you{color:var(--frame);font-weight:600}
/* the decision: the corrections that go with Approve, in one sentence beside it */
.bt-r9a-goes{font-size:12.5px;color:var(--ink2);margin:0;flex-basis:100%}
.bt-r9a-goes b{font-weight:600;color:var(--ink)}
/* the queue */
.bt-r9a-qtable{width:100%;border-collapse:collapse;font-size:13.5px}
.bt-r9a-qtable th{text-align:left;font-family:var(--display);font-weight:600;font-size:12.5px;color:var(--ink3);padding:8px 10px;border-bottom:1px solid var(--rule);white-space:nowrap}
.bt-r9a-qtable td{padding:10px 10px;border-bottom:1px solid var(--rule2);vertical-align:top;line-height:1.4}
.bt-r9a-qtable tr:last-child td{border-bottom:none}
.bt-r9a-qtable td.w{white-space:nowrap}
.bt-r9a-qtable td .btn{margin:-6px 0}
.bt-r9a-qtable a.bt-r8a-name{color:var(--frame);text-decoration:none}
.bt-r9a-qtable a.bt-r8a-name:hover,.bt-r9a-qtable a.bt-r8a-name:focus-visible{text-decoration:underline}
.bt-r9a-qsrc{display:flex;flex-direction:column;gap:1px}
.bt-r9a-qsrc i{font-style:normal;font-size:12.5px;color:var(--ink2)}
.bt-r9a-qsrc i b{font-weight:600;color:var(--ink)}
@media (max-width:1100px){
  /* below the desk the chart sits above the table rather than beside it, and stops being sticky so the table can be read */
  .bt-r9a-cols{grid-template-columns:minmax(0,1fr)}
  .bt-r9a-side{position:static}
  .bt-r9a-editor{width:calc(100vw - 66px)}
}
@media (max-width:720px){
  /* the editor row spans the table, which scrolls sideways on a phone: the editor itself sticks to the visible width so the crop, the sentence and Save never hide behind the scroll */
  .bt-r9a-editor{width:calc(100vw - 34px);display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"crop words" "save leave";gap:10px 12px;align-items:center}
  .bt-r9a-editor .bt-r9a-crop{grid-area:crop;height:64px}
  .bt-r9a-editor .bt-r9a-editor-w{grid-area:words}
  .bt-r9a-editor .btn.primary{grid-area:save}
  .bt-r9a-editor a.btn{grid-area:leave;justify-self:start}
  .bt-r9a-cellbox{height:44px;line-height:42px}
  .bt-r9a-cellbox input{height:42px;line-height:42px}
  /* the queue folds into ruled rows, as the reports and the review list do: when and state on one line, the name, from and source, the checks, then Open */
  .bt-r9a-qfold thead{display:none}
  .bt-r9a-qfold,.bt-r9a-qfold tbody{display:block}
  .bt-r9a-qfold tr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:baseline;padding:10px 14px 12px;border-bottom:1px solid var(--rule2);grid-template-areas:"when state" "name name" "from src" "checks checks" "open open"}
  .bt-r9a-qfold tr:last-child{border-bottom:none}
  .bt-r9a-qfold td{display:block;padding:0;border-bottom:none;min-width:0}
  .bt-r9a-qfold td.w{white-space:normal}
  .bt-r9a-qfold td:nth-child(1){grid-area:when;color:var(--ink2)}
  .bt-r9a-qfold td:nth-child(2){grid-area:name}
  .bt-r9a-qfold td:nth-child(3){grid-area:from;color:var(--ink2)}
  .bt-r9a-qfold td:nth-child(4){grid-area:src}
  .bt-r9a-qfold td:nth-child(5){grid-area:checks}
  .bt-r9a-qfold td:nth-child(6){grid-area:state;justify-self:end}
  .bt-r9a-qfold td:nth-child(7){grid-area:open}
  .bt-r9a-qfold td .btn{margin:4px 0 0}
}
/* ==== end round nine, the reviewer's pages ==== */
/* ==== round nine, the rider's pages: read the chart (D52), ported from docs/design/round9 (r9c- became bt-r9c-) ====
   The contribute page source first (the three ways in as ruled rows), the reading state (the file, the wait line, the grid
   greyed), the check state (the chart sticky beside the grid, the row under the hand outlined and cut out as a strip, the
   grid in the chart's own column order with the maker's printed head over ours, a doubtful cell as a dashed ash box with the
   word "check" and the pixels it was read from under it, a corrected cell in drawing ink, the checks under the grid with their
   cells as links, the send counting the cells down), the phone's one size per screen with the stepper (Carl's call 2), the
   nothing-found state, and the two-number cell. Orange is nowhere: doubt is dashed ash, never a colour. One block, one prefix;
   the ruled page's shared parts (bt-r8r-) are inherited, not copied. */
.bt-r9c .bt-r8r-box.tall{height:44px}
.bt-r9c .bt-r8r-box.dashed{box-shadow:inset 0 0 0 1px transparent;border:1px dashed var(--ink3)}
.bt-r9c .bt-r8r-box.dashed:focus-within{border-color:var(--frame);box-shadow:0 0 0 2px var(--frame-tint)}
.bt-r9c-status{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.02em;color:var(--ink2)}
.bt-r9c-sec-note{text-align:right;max-width:56ch;flex:1 1 200px}
.bt-r9c-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 14px}
.bt-r9c-fields.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.bt-r9c-fields .bt-r8r-field{width:100%}
.bt-r9c-fields .span2{grid-column:span 2}
.bt-r9c-press{justify-content:flex-start}
.bt-r9c-press .btn{align-self:flex-start}
/* the three ways in, as ruled rows: the way's name and its sentence at the left, its boxes at the right */
.bt-r9c-way{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0 24px;padding:14px 14px;border-bottom:1px solid var(--rule2);align-items:start}
.bt-r9c-way:last-child{border-bottom:none}
.bt-r9c-way-l{display:flex;flex-direction:column;gap:4px;min-width:0}
.bt-r9c-way-l b{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink)}
.bt-r9c-way-l span{font-size:12.5px;color:var(--ink2)}
.bt-r9c-way-r{display:flex;flex-direction:column;gap:8px;min-width:0}
.bt-r9c-way-r > .note{margin:0}
.bt-r9c-drop{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--rule);border-radius:3px;background:var(--card);min-height:68px}
.bt-r9c-drop .note{margin:0;max-width:44ch}
.bt-r9c-filein{font-family:var(--ui);font-size:13px;color:var(--ink2);min-width:0;max-width:100%}
.bt-r9c-filein::file-selector-button{height:44px;padding:0 16px;margin-right:12px;border-radius:3px;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.02em;border:1px solid var(--rule);background:var(--card);color:var(--ink);cursor:pointer}
.bt-r9c-filein::file-selector-button:hover{border-color:var(--ink3)}
.bt-r9c-drop{position:relative}
.bt-r9c-pick{display:none}
.bt-r9c-drop.js .bt-r9c-pick{display:inline-flex;margin:0}
.bt-r9c-drop.js .bt-r9c-filein{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.bt-r9c-drop.js:focus-within .bt-r9c-pick{outline:2px solid var(--frame);outline-offset:2px}
.bt-r9c-picked{font-family:var(--ui);font-size:13px;color:var(--ink);word-break:break-all}
.bt-r9c-file{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 18px;align-items:start}
.bt-r9c-file + .bt-r9c-file{margin-top:10px;padding-top:10px;border-top:1px solid var(--rule2)}
.bt-r9c-thumb-l{display:block;line-height:0}
.bt-r9c-thumb{display:block;width:240px;height:auto;border:1px solid var(--rule);border-radius:3px;background:#fff}
.bt-r9c-thumb.sm{width:120px}
.bt-r9c-file-t{display:flex;flex-direction:column;gap:6px;min-width:0}
.bt-r9c-name{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink)}
.bt-r9c-file-t a{font-size:13px;word-break:break-all}
.bt-r9c-late-link{max-width:420px}
.bt-r9c-late-link .bt-r8r-hint{color:var(--dim)}
.bt-r9c-wait{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:15px;color:var(--ink)}
.bt-r9c .bt-r9c-wait .btn{height:40px}
.bt-r9c-msg{margin:0;font-size:15px;max-width:60ch;color:var(--ink)}
.bt-r9c-disc > summary .note{margin-left:2px;font-weight:400;font-family:var(--ui)}
.bt-r9c .btn.off{opacity:.55}
/* the grid: the chart's columns, the maker's head in the figure face over our name and the unit */
.bt-r9c-gridwrap{padding:0 14px 6px}
.bt-r9c-grid{border-collapse:collapse;table-layout:fixed;width:auto;min-width:100%}
.bt-r9c-grid th{text-align:left;vertical-align:top;padding:8px 3px 8px;border-bottom:1px solid var(--rule);width:60px;font-weight:600}
.bt-r9c-grid th.sz{width:58px;padding-left:0}
.bt-r9c-grid th.two{width:104px}
.bt-r9c-grid th i{display:block;font-style:normal;font-family:var(--figure);font-weight:700;font-size:18px;color:var(--ink);letter-spacing:.01em;line-height:1;min-height:18px}
.bt-r9c-grid th span{display:block;font-family:var(--display);font-weight:600;font-size:12px;color:var(--ink2);line-height:1.15;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-r9c-grid th em{display:block;font-style:normal;font-family:var(--ui);font-weight:400;font-size:11px;color:var(--ink3);margin-top:2px}
.bt-r9c-grid th.un span{white-space:normal}
.bt-r9c-grid th.nk i,.bt-r9c-grid th.nk span,.bt-r9c-grid th.nk em{color:var(--ink3)}
.bt-r9c-sel{display:block;width:100%;height:32px;padding:0 2px;border:1px dashed var(--ink3);border-radius:3px;background:var(--card);font-family:var(--display);font-weight:600;font-size:12.5px;color:var(--ink);margin-top:-2px;cursor:pointer}
.bt-r9c-sel:focus-visible{outline:2px solid var(--frame);outline-offset:2px}
.bt-r9c-grid td{vertical-align:top;padding:7px 3px 8px;border-bottom:1px solid var(--rule2)}
.bt-r9c-grid td.sz{padding-left:0}
.bt-r9c-grid tr.cur td{background:var(--frame-tint)}
.bt-r9c-grid tr:last-child td{border-bottom:none}
.bt-r9c-cell{display:block;width:54px;height:40px;padding:0 2px;border:1px solid var(--rule);border-radius:3px;background:var(--card);color:var(--ink);font-family:var(--figure);font-weight:600;font-size:16.5px;letter-spacing:0;text-align:right;line-height:1.2;font-variant-numeric:tabular-nums;caret-color:var(--frame);-moz-appearance:textfield}
.bt-r9c-cell::-webkit-outer-spin-button,.bt-r9c-cell::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bt-r9c-cell.lbl{width:54px;text-align:left;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:0}
.bt-r9c-cell:hover{border-color:var(--ink3)}
.bt-r9c-cell:focus-visible{outline:none;border-color:var(--frame);box-shadow:0 0 0 2px var(--frame-tint)}
.bt-r9c-cell.chk{border:1px dashed var(--ink3)}
.bt-r9c-cell.chk.focus{border:1px solid var(--frame);box-shadow:0 0 0 2px var(--frame-tint)}
.bt-r9c-cell.corr{color:var(--frame);font-weight:700}
.bt-r9c-grid span.bt-r9c-cell.nk,.bt-r9c-cell.nk{border:none;background:transparent;color:var(--ink3);font-weight:600;display:flex;align-items:center;justify-content:flex-end}
.bt-r9c-typed .bt-r9c-cell.lbl{width:70px}
.bt-r9c-typed th.sz{width:78px}
.bt-r9c-under{display:flex;flex-direction:column;gap:4px;width:54px;margin-top:4px}
.bt-r9c-under[hidden]{display:none}
.bt-r9c-grid th.two + td .bt-r9c-under,.bt-r9c-under:has(.bt-r9c-picks){width:96px}
.bt-r9c-word{font-family:var(--display);font-weight:600;font-size:11.5px;color:var(--ink3);line-height:1.15}
.bt-r9c-word.corr{color:var(--frame)}
.bt-r9c-read{font-size:11px;color:var(--ink3);line-height:1.2}
.bt-r9c-read b{font-family:var(--figure);font-weight:700;font-size:13px;color:var(--ink2);letter-spacing:.01em}
/* the crop a cell was read from: served at 2x by the crop endpoint, drawn no wider than its column (Carl's call 4); the row strip carries the legible view */
.bt-r9c-snip{display:block;max-width:54px;height:auto;border:1px solid var(--rule);border-radius:0;background:#fff}
.bt-r9c-keep{display:inline-flex;align-items:center;justify-content:center;height:28px;min-width:36px;padding:0 8px;border:1px solid var(--rule);border-radius:3px;background:var(--card);font-family:var(--display);font-weight:600;font-size:12.5px;color:var(--frame);cursor:pointer;letter-spacing:.02em}
.bt-r9c-keep:hover{border-color:var(--ink3);color:var(--ink)}
.bt-r9c-keep:focus-visible{outline:2px solid var(--frame);outline-offset:2px}
.bt-r9c-picks{display:flex;gap:6px;flex-wrap:wrap}
.bt-r9c-picks .bt-r9c-keep{font-family:var(--figure);font-weight:700;font-size:16px;letter-spacing:.01em}
.bt-r9c-plbl{display:none}
/* the chart beside the grid: sticky, the row under the hand outlined; under it that row closer, scrolling sideways in its own box */
.bt-r9c-two{display:grid;grid-template-columns:480px minmax(0,1fr);gap:0 24px;align-items:start;padding:12px 14px 14px}
.bt-r9c-two .bt-r9c-gridwrap{padding:0}
.bt-r9c-main{min-width:0}
.bt-r9c-side{position:sticky;top:16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.bt-r9c-img{overflow:hidden;border:1px solid var(--rule);border-radius:3px;background:#fff;line-height:0}
.bt-r9c-img svg{display:block;width:100%;height:auto}
.bt-r9c-outline{fill:none;stroke:var(--frame);stroke-width:2px}
.bt-r9c-outline.cell{stroke-width:2px;paint-order:stroke;stroke:var(--frame)}
.bt-r9c-strip{overflow-x:auto;min-width:0;max-width:100%;border:1px solid var(--rule);border-radius:3px;background:#fff;line-height:0;scrollbar-width:thin;scrollbar-color:var(--ghost) var(--rule2)}
.bt-r9c-strip svg{display:block}
.bt-r9c-cap{font-size:12.5px;color:var(--ink2);margin:0;line-height:1.45}
.bt-r9c-cap b{font-weight:500;color:var(--ink)}
.bt-r9c-cap-phone{display:none}
.bt-r9c-count{font-size:15px;color:var(--ink);padding:12px 14px 0;margin:0;line-height:1.45}
.bt-r9c-count b{font-family:var(--figure);font-weight:700;font-size:20px;letter-spacing:.01em;color:var(--ink)}
.bt-r9c-count .note{display:block;margin-top:4px}
.bt-r9c-greyed{opacity:.45}
.bt-r9c-gridnote{margin:8px 0 0}
/* the checks, live, under the grid: the glyph, the sentence with the cells it points at as links, the word in its colour */
.bt-r9c-checks{display:flex;flex-direction:column;margin-top:14px;border-top:1px solid var(--rule);padding-top:6px}
.bt-r9c-check{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--rule2);font-size:13.5px;color:var(--ink)}
.bt-r9c-check:last-child{border-bottom:none}
.bt-r9c-check > svg{color:var(--frame)}
.bt-r9c-check > svg[stroke-dasharray]{color:var(--ink3)}
.bt-r9c-check .w{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.02em;color:var(--frame);white-space:nowrap}
.bt-r9c-check .w.q{color:var(--ink2)}
.bt-r9c-check .w.bad{color:var(--bad)}
.bt-r9c-cell-link{white-space:nowrap}
.bt-r9c-send .note{max-width:60ch}
.bt-r9c-send-err{flex-basis:100%}
/* the phone's parts, off on a desk */
.bt-r9c-step,.bt-r9c-pacts{display:none}
/* narrower desks: the chart above the grid, the sticky view let go */
@media (max-width:1100px){
  .bt-r9c-two{grid-template-columns:minmax(0,1fr)}
  .bt-r9c-side{position:static}
  .bt-r9c-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .bt-r9c-way{grid-template-columns:minmax(0,1fr)}
  .bt-r9c-way-l{margin-bottom:8px}
}
/* the phone: one size per screen (Carl's call 2), the chart cropped to that row at the top, the stepper, the boxes in the chart's order with their crops at 2x, Next size as the primary */
@media (max-width:720px){
  .bt-r9c-fields,.bt-r9c-fields.two{grid-template-columns:minmax(0,1fr)}
  .bt-r9c-fields .span2{grid-column:auto}
  .bt-r9c-sec-note{text-align:left}
  .bt-r9c-thumb{width:100%;max-width:240px}
  .bt-r9c-file{grid-template-columns:minmax(0,1fr)}
  .bt-r9c-file .bt-r9c-thumb-l{margin-bottom:8px}
  .bt-r9c-count{font-size:14px;padding:12px 12px 0}
  .bt-r9c-two{display:flex;flex-direction:column;gap:12px;padding:12px 12px 16px}
  .bt-r9c-side,.bt-r9c-main{width:100%;max-width:100%}
  .bt-r9c-img{display:none}
  .bt-r9c-cap-desk{display:none}
  .bt-r9c-cap-phone{display:inline}
  .bt-r9c-step{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;align-items:center;margin-bottom:8px}
  .bt-r9c .bt-r9c-step .btn{width:44px;height:44px;padding:0}
  .bt-r9c-step-n{text-align:center;font-family:var(--figure);font-weight:700;font-size:32px;line-height:1;letter-spacing:.01em;color:var(--frame)}
  .bt-r9c-step-n span{display:block;font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink2);margin-top:4px;letter-spacing:0}
  .bt-r9c-gridwrap{overflow:visible}
  .bt-r9c-grid,.bt-r9c-grid tbody,.bt-r9c-grid tr,.bt-r9c-grid td{display:block;width:100%}
  .bt-r9c-grid thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bt-r9c-grid tr{display:none;border:1px solid var(--rule);border-radius:3px;background:var(--card)}
  .bt-r9c-grid tr.cur{display:block}
  .bt-r9c-grid tr.cur td{background:transparent}
  .bt-r9c-grid td,.bt-r9c-grid td.sz{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:6px 12px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--rule2)}
  .bt-r9c-grid td.nk{grid-template-columns:minmax(0,1fr) 112px}
  .bt-r9c-plbl{display:flex;flex-direction:column;gap:2px;min-width:0}
  .bt-r9c-plbl i{font-style:normal;font-family:var(--figure);font-weight:700;font-size:20px;color:var(--ink);letter-spacing:.01em;line-height:1}
  .bt-r9c-plbl > span{font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink2)}
  .bt-r9c-plbl > span em{font-style:normal;font-family:var(--ui);font-weight:400;font-size:12px;color:var(--ink3);margin-left:4px}
  .bt-r9c-plbl.nk i,.bt-r9c-plbl.nk > span{color:var(--ink3)}
  .bt-r9c-plbl .bt-r9c-sel{width:100%;height:40px;margin-top:4px;font-family:var(--display);font-weight:600;font-size:14px}
  .bt-r9c-grid td:has(.bt-r9c-plbl.un){grid-template-columns:minmax(0,1fr)}
  /* the check state on a phone: the head folds to the status row, the sources row to the file's name and link, so the first screen is the count line, the strip and the stepper (the CheckPhone board) */
  .bt-r9c[data-bt-r9c-state="check"] .bt-r8r-lede,.bt-r9c[data-bt-r9c-state="check"] .bt-r8r-links,.bt-r9c[data-bt-r9c-state="check"] .bt-r8r-tb > dt:not(.bt-r9c-tb-status),.bt-r9c[data-bt-r9c-state="check"] .bt-r8r-tb > dd:not(.bt-r9c-tb-status){display:none}
  .bt-r9c[data-bt-r9c-state="check"] .bt-r8r-tb > dt.bt-r9c-tb-status,.bt-r9c[data-bt-r9c-state="check"] .bt-r8r-tb > dd.bt-r9c-tb-status{border-bottom:none}
  .bt-r9c[data-bt-r9c-state="check"] .bt-r9c-ways .bt-r9c-sec-note,.bt-r9c[data-bt-r9c-state="check"] .bt-r9c-yours .bt-r9c-thumb-l,.bt-r9c[data-bt-r9c-state="check"] [data-bt-r9c-add]{display:none}
  .bt-r9c[data-bt-r9c-state="check"] .bt-r9c-yours .bt-r9c-file-t{flex-direction:row;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
  .bt-r9c-cell,.bt-r9c-cell.lbl,.bt-r9c-typed .bt-r9c-cell,.bt-r9c-typed .bt-r9c-cell.lbl{width:100%;height:44px;padding:0 10px;font-size:22px}
  .bt-r9c-cell.lbl{font-size:16px}
  .bt-r9c-grid span.bt-r9c-cell.nk{font-size:18px}
  .bt-r9c-under{grid-column:1 / -1;width:auto;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px 12px;align-items:center}
  .bt-r9c-under .bt-r9c-word,.bt-r9c-under .bt-r9c-read{font-size:12.5px}
  .bt-r9c-under .bt-r9c-read b{font-size:16px}
  .bt-r9c-snip{max-width:120px}
  .bt-r9c-keep{height:44px;padding:0 14px;font-size:15px}
  .bt-r9c-picks .bt-r9c-keep{font-size:20px;min-width:64px}
  .bt-r9c-pacts{display:flex;flex-direction:column;gap:8px;margin-top:12px}
  .bt-r9c .bt-r9c-pacts .btn{height:44px;width:100%}
  .bt-r9c-check{grid-template-columns:22px minmax(0,1fr);gap:4px 10px}
  .bt-r9c-check .w{grid-column:2}
  .bt-r9c .bt-r9c-drop .note{max-width:none}
}
/* ==== end round nine, the rider's pages ==== */