/* Built from design-systems/kerbside/tokens.json. Do not edit here. */
.kb-app {
  --kb-color-asphalt-950: #101316;
  --kb-color-asphalt-900: #171B1F;
  --kb-color-asphalt-800: #22272C;
  --kb-color-asphalt-700: #2F353B;
  --kb-color-asphalt-600: #454C54;
  --kb-color-asphalt-500: #5F6770;
  --kb-color-asphalt-400: #8A929B;
  --kb-color-asphalt-300: #B7BDC3;
  --kb-color-asphalt-200: #D9DDE1;
  --kb-color-asphalt-100: #ECEEF0;
  --kb-color-asphalt-50: #F6F7F8;
  --kb-color-white: #FFFFFF;
  --kb-color-kerb-400: #FFD23F;
  --kb-color-kerb-500: #F5C000;
  --kb-color-go-600: #0B7A3B;
  --kb-color-go-400: #46C47A;
  --kb-color-stop-600: #C2271D;
  --kb-color-stop-400: #FF7A6E;
  --kb-color-sign-600: #1A5FD6;
  --kb-color-sign-300: #8DB6FF;
  --kb-font-family-text: "Atkinson Hyperlegible Next", system-ui, -apple-system, Roboto, sans-serif;
  --kb-font-size-caption: 13px;
  --kb-font-size-footnote: 15px;
  --kb-font-size-body: 17px;
  --kb-font-size-title: 22px;
  --kb-font-size-price: 34px;
  --kb-font-weight-regular: 400;
  --kb-font-weight-medium: 560;
  --kb-font-weight-bold: 720;
  --kb-space-1: 4px;
  --kb-space-2: 8px;
  --kb-space-3: 12px;
  --kb-space-4: 16px;
  --kb-space-5: 20px;
  --kb-space-6: 24px;
  --kb-space-8: 32px;
  --kb-radius-sheet: 24px;
  --kb-radius-card: 16px;
  --kb-radius-button: 14px;
  --kb-radius-inner: 8px;
  --kb-radius-pill: 999px;
  --kb-size-target: 48px;
  --kb-size-action: 56px;
  --kb-duration-quick: 160ms;
  --kb-duration-sheet: 240ms;
  --kb-duration-undo: 5000ms;
  --kb-color-canvas: var(--kb-color-asphalt-100);
  --kb-color-surface: var(--kb-color-white);
  --kb-color-sunken: var(--kb-color-asphalt-50);
  --kb-color-text: var(--kb-color-asphalt-900);
  --kb-color-text-muted: var(--kb-color-asphalt-600);
  --kb-color-line: var(--kb-color-asphalt-200);
  --kb-color-firm: var(--kb-color-asphalt-900);
  --kb-color-estimate: var(--kb-color-asphalt-500);
  --kb-color-kerb-road: var(--kb-color-asphalt-900);
  --kb-color-kerb-line: var(--kb-color-kerb-400);
  --kb-color-action: var(--kb-color-asphalt-900);
  --kb-color-action-text: var(--kb-color-kerb-400);
  --kb-color-go: var(--kb-color-go-600);
  --kb-color-stop: var(--kb-color-stop-600);
  --kb-color-focus: var(--kb-color-sign-600);
  --kb-color-map-land: var(--kb-color-asphalt-100);
  --kb-color-map-road: var(--kb-color-white);
  --kb-color-map-route: var(--kb-color-asphalt-900);
  --kb-color-scrim: rgba(16, 19, 22, 0.45);
  --kb-component-button-primary-bg: var(--kb-color-action);
  --kb-component-button-primary-text: var(--kb-color-action-text);
  --kb-component-button-height: var(--kb-size-action);
  --kb-component-button-radius: var(--kb-radius-button);
  --kb-component-option-firm-border: var(--kb-color-firm);
  --kb-component-option-estimate-border: var(--kb-color-estimate);
  --kb-component-option-radius: var(--kb-radius-card);
  --kb-component-pick-kerb-road: var(--kb-color-kerb-road);
  --kb-component-pick-kerb-line: var(--kb-color-kerb-line);
  --kb-component-pick-price-size: var(--kb-font-size-price);
  --kb-component-sheet-bg: var(--kb-color-surface);
  --kb-component-sheet-radius: var(--kb-radius-sheet);
  --kb-component-undo-duration: var(--kb-duration-undo);
}
.kb-app[data-theme="dark"] {
  --kb-color-canvas: var(--kb-color-asphalt-950);
  --kb-color-surface: var(--kb-color-asphalt-900);
  --kb-color-sunken: var(--kb-color-asphalt-800);
  --kb-color-text: var(--kb-color-asphalt-50);
  --kb-color-text-muted: var(--kb-color-asphalt-300);
  --kb-color-line: var(--kb-color-asphalt-700);
  --kb-color-firm: var(--kb-color-asphalt-50);
  --kb-color-estimate: var(--kb-color-asphalt-400);
  --kb-color-kerb-road: var(--kb-color-asphalt-950);
  --kb-color-kerb-line: var(--kb-color-kerb-400);
  --kb-color-action: var(--kb-color-kerb-400);
  --kb-color-action-text: var(--kb-color-asphalt-950);
  --kb-color-go: var(--kb-color-go-400);
  --kb-color-stop: var(--kb-color-stop-400);
  --kb-color-focus: var(--kb-color-sign-300);
  --kb-color-map-land: var(--kb-color-asphalt-900);
  --kb-color-map-road: var(--kb-color-asphalt-700);
  --kb-color-map-route: var(--kb-color-kerb-400);
  --kb-color-scrim: rgba(0, 0, 0, 0.6);
}
@media (prefers-color-scheme: dark) {
.kb-app:not([data-theme="light"]) {
  --kb-color-canvas: var(--kb-color-asphalt-950);
  --kb-color-surface: var(--kb-color-asphalt-900);
  --kb-color-sunken: var(--kb-color-asphalt-800);
  --kb-color-text: var(--kb-color-asphalt-50);
  --kb-color-text-muted: var(--kb-color-asphalt-300);
  --kb-color-line: var(--kb-color-asphalt-700);
  --kb-color-firm: var(--kb-color-asphalt-50);
  --kb-color-estimate: var(--kb-color-asphalt-400);
  --kb-color-kerb-road: var(--kb-color-asphalt-950);
  --kb-color-kerb-line: var(--kb-color-kerb-400);
  --kb-color-action: var(--kb-color-kerb-400);
  --kb-color-action-text: var(--kb-color-asphalt-950);
  --kb-color-go: var(--kb-color-go-400);
  --kb-color-stop: var(--kb-color-stop-400);
  --kb-color-focus: var(--kb-color-sign-300);
  --kb-color-map-land: var(--kb-color-asphalt-900);
  --kb-color-map-road: var(--kb-color-asphalt-700);
  --kb-color-map-route: var(--kb-color-kerb-400);
  --kb-color-scrim: rgba(0, 0, 0, 0.6);
}
}
/* Kerbside components. Every value comes from a token in tokens.json (built into the custom properties above this file).
   Layout is written for one phone screen; .kb-large scales the type the way iOS Dynamic Type does. */
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 200 800; font-display: swap; src: url(/assets/fonts/atkinson-next-latin.woff2) format("woff2"); }

.kb-app {
  --kb-scale: 1;
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--kb-color-canvas); color: var(--kb-color-text);
  font-family: var(--kb-font-family-text); font-size: calc(var(--kb-font-size-body) * var(--kb-scale)); line-height: 1.35;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; text-wrap: pretty;
}
.kb-app.kb-large { --kb-scale: 1.3; }
.kb-app *, .kb-app *::before, .kb-app *::after { box-sizing: border-box; }
.kb-app :focus-visible { outline: 3px solid var(--kb-color-focus); outline-offset: 2px; }
/* resets have no specificity, so every component rule below wins without fighting them */
.kb-app :where(h2, h3, p) { margin: 0; }
.kb-app :where(button) { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* system chrome, drawn plainly so it reads as a phone without copying any real one */
.kb-status { flex: none; display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 28px; font-size: 15px; font-weight: var(--kb-font-weight-bold); }
.kb-status .kb-sig { width: 46px; height: 12px; background: linear-gradient(90deg, currentColor 0 22px, transparent 22px 26px, currentColor 26px 46px); border-radius: 3px; opacity: .85; }
.kb-homebar { flex: none; height: 22px; display: grid; place-items: center; }
.kb-homebar::before { content: ""; width: 134px; height: 5px; border-radius: 3px; background: var(--kb-color-text); opacity: .85; }
.kb-screen { position: relative; flex: 1; min-height: 0; overflow: hidden auto; overscroll-behavior: contain; }
.kb-view { min-height: 100%; display: flex; flex-direction: column; }
.kb-view > h2:focus, .kb-sheet h2:focus, .kb-head h2:focus { outline: none; }

/* home screen */
.kb-home { padding: 28px 24px 16px; }
.kb-home-k { font-size: calc(var(--kb-font-size-footnote) * var(--kb-scale)); color: var(--kb-color-text-muted); margin-bottom: 20px; }
.kb-icons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 12px; }
.kb-icon { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; min-height: var(--kb-size-target); padding: 0; border: 0; background: none; font-size: calc(var(--kb-font-size-caption) * var(--kb-scale)); }
.kb-glyph { position: relative; width: 60px; height: 60px; border-radius: 15px; display: grid; place-items: center; font-weight: var(--kb-font-weight-bold); font-size: 26px; color: #FFFFFF; }
.kb-glyph.rook { background: #3C5A99; } .kb-glyph.tally { background: #7A3E6E; } .kb-glyph.lark { background: #1F6F78; }
.kb-glyph.cab { background: #171B1F; color: #FFD23F; font-size: 15px; letter-spacing: .04em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.kb-glyph.kerb { background: var(--kb-color-kerb-road); }
.kb-glyph.kerb::before, .kb-glyph.kerb::after { content: ""; position: absolute; left: 10px; right: 10px; height: 5px; border-radius: 3px; background: var(--kb-color-kerb-line); }
.kb-glyph.kerb::before { top: 22px; } .kb-glyph.kerb::after { top: 33px; }
.kb-icon .kb-seen { position: absolute; right: -6px; top: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--kb-color-surface); color: var(--kb-color-text); font-size: 12px; display: grid; place-items: center; box-shadow: 0 0 0 1.5px var(--kb-color-text); }
.kb-dock { margin-top: auto; padding: 14px; border-radius: 28px; background: var(--kb-color-sunken); display: flex; justify-content: center; }
.kb-dock .kb-icon { width: auto; }

/* other ride apps, drawn as plain wireframes so they are clearly not real products */
.kb-other { background: var(--kb-color-surface); }
.kb-other-top { padding: 16px 20px; color: #FFFFFF; font-weight: var(--kb-font-weight-bold); font-size: calc(var(--kb-font-size-title) * var(--kb-scale)); }
.kb-other-top.rook { background: #3C5A99; } .kb-other-top.tally { background: #7A3E6E; } .kb-other-top.lark { background: #1F6F78; } .kb-other-top.cab { background: #171B1F; color: #FFD23F; }
.kb-other-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.kb-field { border-radius: var(--kb-radius-inner); background: var(--kb-color-sunken); padding: 12px 14px; }
.kb-field small { display: block; font-size: calc(var(--kb-font-size-caption) * var(--kb-scale)); color: var(--kb-color-text-muted); }
.kb-skel { height: 64px; border-radius: var(--kb-radius-inner); background: var(--kb-color-sunken); }
.kb-quote { border: 1.5px solid var(--kb-color-firm); border-radius: var(--kb-radius-card); padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }
.kb-quote.est { border-style: dashed; border-color: var(--kb-color-estimate); }
.kb-quote b { font-size: calc(var(--kb-font-size-title) * var(--kb-scale)); }
.kb-quote span { color: var(--kb-color-text-muted); font-size: calc(var(--kb-font-size-footnote) * var(--kb-scale)); }
.kb-banner { border-radius: var(--kb-radius-inner); padding: 10px 12px; background: var(--kb-color-sunken); font-size: calc(var(--kb-font-size-footnote) * var(--kb-scale)); }
.kb-banner.warn { box-shadow: inset 4px 0 0 var(--kb-color-stop); }

/* the map, abstract on purpose: no real map tiles */
.kb-map { flex: none; height: 110px; background: var(--kb-color-map-land); }
.kb-map svg { display: block; width: 100%; height: 100%; }
.kb-map .road { stroke: var(--kb-color-map-road); }
.kb-map .route { stroke: var(--kb-color-map-route); }
.kb-map .pin { fill: var(--kb-color-map-route); }
.kb-map .pinhole { fill: var(--kb-color-map-land); }
.kb-map text { fill: var(--kb-color-text-muted); font: 600 11px var(--kb-font-family-text); }

/* the bottom sheet over the map: the layout people already know from ride apps */
.kb-sheet { position: relative; z-index: 1; flex: 1; margin-top: -20px; background: var(--kb-component-sheet-bg); border-radius: var(--kb-radius-sheet) var(--kb-radius-sheet) 0 0; padding: 8px 16px 0; box-shadow: 0 -1px 0 var(--kb-color-line), 0 -10px 30px rgba(16, 19, 22, .14); display: flex; flex-direction: column; gap: 10px; }
.kb-grab { width: 40px; height: 5px; border-radius: 3px; background: var(--kb-color-line); margin: 0 auto 2px; }
.kb-sheet h2, .kb-head h2, .kb-h { font-size: calc(var(--kb-font-size-title) * var(--kb-scale)); font-weight: var(--kb-font-weight-bold); letter-spacing: -.01em; line-height: 1.2; }
.kb-from.warn { color: var(--kb-color-stop); font-weight: var(--kb-font-weight-medium); }
.kb-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; }
.kb-title .kb-link { align-self: center; }
.kb-from { font-size: calc(var(--kb-font-size-footnote) * var(--kb-scale)); color: var(--kb-color-text-muted); margin-top: -10px; }

/* choice chips */
.kb-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.kb-chip { flex: none; min-height: 44px; padding: 0 16px; border-radius: var(--kb-radius-pill); border: 1.5px solid var(--kb-color-line); background: var(--kb-color-surface); font-weight: var(--kb-font-weight-medium); font-size: calc(var(--kb-font-size-footnote) * var(--kb-scale)); }
.kb-chip[aria-pressed="true"], .kb-chip.is-on { background: var(--kb-color-text); color: var(--kb-color-surface); border-color: var(--kb-color-text); }

/* the pick, marked with the kerb line: the app's one memorable element */
.kb-pick { position: relative; display: flex; border-radius: var(--kb-radius-card); background: var(--kb-color-surface); border: 1.5px solid var(--kb-color-firm); overflow: hidden; }
.kb-pick.est { border-style: dashed; border-color: var(--kb-color-estimate); }
.kb-kerb { flex: none; width: 18px; background: var(--kb-component-pick-kerb-road); position: relative; }
.kb-kerb::before, .kb-kerb::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: var(--kb-component-pick-kerb-line); }
.kb-kerb::before { left: 5px; } .kb-kerb::after { left: 11px; }
.kb-pick-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kb-pick-k { font-size: calc(var(--kb-font-size-caption) * var(--kb-scale)); color: var(--kb-color-text-muted); font-weight: var(--kb-font-weight-medium); }
.kb-pick-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; }
.kb-pick h3, .kb-pick .kb-h3 { font-size: calc(var(--kb-font-size-title) * var(--kb-scale)); font-weight: var(--kb-font-weight-bold); }
.kb-price { font-size: calc(var(--kb-component-pick-price-size) * var(--kb-scale)); font-weight: var(--kb-font-weight-bold); letter-spacing: -.02em; line-height: 1.1; }
.kb-price.small { font-size: calc(var(--kb-font-size-title) * var(--kb-scale)); letter-spacing: -.01em; }
.kb-kind { font-size: calc(var(--kb-font-size-caption) * var(--kb-scale)); color: var(--kb-color-text-muted); }
.kb-pick-time { font-size: calc(var(--kb-font-size-footnote) * var(--kb-scale)); }
.kb-why { font-size: calc(var(--kb-font-size-footnote) * var(--kb-scale)); color: var(--kb-color-text-muted); border-top: 1px solid var(--kb-color-line); padding-top: 8px; margin-top: 4px; }

.kb-links { display: flex; justify-content: space-between; gap: 8px; margin: -4px 0; }
.kb-link { align-self: flex-start; min-height: var(--kb-size-target); padding: 0 2px; border: 0; background: none; font-weight: var(--kb-font-weight-medium); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.kb-rule { display: flex; align-items: center; gap: 12px; border-radius: var(--kb-radius-card); background: var(--kb-color-sunken); padding: 6px 6px 6px 14px; font-size: calc(var(--kb-font-size-footnote) * var(--kb-scale)); }
.kb-rule p { flex: 1; }
.kb-rule button { flex: none; min-height: var(--kb-size-target); min-width: var(--kb-size-target); padding: 0 14px; border-radius: var(--kb-radius-button); border: 1.5px solid var(--kb-color-line); background: var(--kb-color-surface); font-weight: var(--kb-font-weight-medium); }
.kb-next { font-size: calc(var(--kb-font-size-footnote) * var(--kb-scale)); }
.kb-next.is-ask { box-shadow: inset 3px 0 0 var(--kb-color-text); padding-left: 10px; }

/* the one main action, pinned where a thumb reaches */
.kb-actionbar { position: sticky; bottom: 0; margin: auto -16px 0; padding: 10px 16px 14px; background: var(--kb-component-sheet-bg); box-shadow: 0 -1px 0 var(--kb-color-line); display: flex; flex-direction: column; gap: 8px; }
.kb-actionbar .kb-next { font-size: calc(var(--kb-font-size-caption) * var(--kb-scale) + 1px); }
.kb-primary { width: 100%; min-height: var(--kb-component-button-height); border: 0; border-radius: var(--kb-component-button-radius); background: var(--kb-component-button-primary-bg); color: var(--kb-component-button-primary-text); font-weight: var(--kb-font-weight-bold); font-size: calc(var(--kb-font-size-body) * var(--kb-scale)); }
.kb-primary:disabled, .kb-primary.is-off { opacity: .45; cursor: not-allowed; }
.kb-secondary { width: 100%; min-height: var(--kb-component-button-height); border-radius: var(--kb-component-button-radius); border: 1.5px solid var(--kb-color-text); background: transparent; font-weight: var(--kb-font-weight-bold); font-size: calc(var(--kb-font-size-body) * var(--kb-scale)); }
.kb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* screens with a header and a back button */
.kb-head { display: flex; align-items: center; gap: 8px; padding: 4px 8px 8px; }
.kb-back { min-height: var(--kb-size-target); min-width: var(--kb-size-target); padding: 0 10px; border: 0; background: none; font-weight: var(--kb-font-weight-medium); }
.kb-page { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.kb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kb-opt { border: 1.5px solid var(--kb-component-option-firm-border); border-radius: var(--kb-component-option-radius); background: var(--kb-color-surface); padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
.kb-opt.est { border-style: dashed; border-color: var(--kb-component-option-estimate-border); }
.kb-opt.is-pick { box-shadow: inset 6px 0 0 var(--kb-color-kerb-road), inset 9px 0 0 var(--kb-color-kerb-line), inset 12px 0 0 var(--kb-color-kerb-road), inset 15px 0 0 var(--kb-color-kerb-line), inset 18px 0 0 var(--kb-color-kerb-road); padding-left: 30px; }
.kb-opt h3, .kb-opt .kb-h3 { font-size: calc(var(--kb-font-size-body) * var(--kb-scale)); font-weight: var(--kb-font-weight-bold); }
.kb-opt .p { text-align: right; font-weight: var(--kb-font-weight-bold); }
.kb-opt .m { grid-column: 1 / -1; font-size: calc(var(--kb-font-size-footnote) * var(--kb-scale)); color: var(--kb-color-text-muted); }
.kb-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--kb-radius-pill); font-size: calc(var(--kb-font-size-caption) * var(--kb-scale)); font-weight: var(--kb-font-weight-medium); background: var(--kb-color-sunken); vertical-align: 2px; }
.kb-foot { font-size: calc(var(--kb-font-size-footnote) * var(--kb-scale)); color: var(--kb-color-text-muted); }

/* rules: switch and steppers, sized for one thumb */
.kb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--kb-color-line); }
.kb-row p small { display: block; color: var(--kb-color-text-muted); font-size: calc(var(--kb-font-size-footnote) * var(--kb-scale)); }
.kb-switch { flex: none; position: relative; width: 60px; min-height: var(--kb-size-target); border: 0; background: none; padding: 0; }
.kb-switch::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 30px; margin-top: -15px; border-radius: 15px; background: var(--kb-color-line); transition: background var(--kb-duration-quick); }
.kb-switch::after { content: ""; position: absolute; left: 7px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--kb-duration-quick) ease-out; }
.kb-switch[aria-checked="true"]::before, .kb-switch.is-on::before { background: var(--kb-color-go); }
.kb-switch[aria-checked="true"]::after, .kb-switch.is-on::after { transform: translateX(22px); }
.kb-step { flex: none; display: flex; align-items: center; border-radius: var(--kb-radius-button); border: 1.5px solid var(--kb-color-line); }
.kb-step button { min-width: var(--kb-size-target); min-height: var(--kb-size-target); border: 0; background: none; font-size: 22px; font-weight: var(--kb-font-weight-bold); }
.kb-step button:disabled { opacity: .3; cursor: not-allowed; }
.kb-step output { min-width: 4.2em; text-align: center; font-weight: var(--kb-font-weight-bold); }
.kb-fixed { opacity: .9; }
.kb-fixed .kb-kind { white-space: nowrap; }
.kb-preview { border-radius: var(--kb-radius-card); background: var(--kb-color-sunken); padding: 12px 14px; font-size: calc(var(--kb-font-size-footnote) * var(--kb-scale)); }

/* undo bar, ask sheet and the system dialog */
.kb-overlay { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; background: var(--kb-color-scrim); }
.kb-overlay.center { justify-content: center; padding: 24px; }
.kb-bottom { background: var(--kb-color-surface); border-radius: var(--kb-radius-sheet) var(--kb-radius-sheet) 0 0; padding: 20px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.kb-bottom h2, .kb-bottom .kb-h { font-size: calc(var(--kb-font-size-title) * var(--kb-scale)); line-height: 1.2; }
.kb-count { font-weight: var(--kb-font-weight-bold); }
.kb-bar { height: 6px; border-radius: 3px; background: var(--kb-color-sunken); overflow: hidden; }
.kb-bar span { display: block; height: 100%; width: 100%; background: var(--kb-color-text); transform-origin: left; }
.kb-alert { background: var(--kb-color-surface); border-radius: 18px; padding: 18px 16px 8px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.kb-alert h2 { font-size: calc(var(--kb-font-size-body) * var(--kb-scale)); font-weight: var(--kb-font-weight-bold); }
.kb-alert p { font-size: calc(var(--kb-font-size-footnote) * var(--kb-scale)); color: var(--kb-color-text-muted); }
.kb-alert .kb-pair { margin-top: 8px; border-top: 1px solid var(--kb-color-line); padding-top: 6px; gap: 6px; }
.kb-alert .kb-pair button { min-height: var(--kb-size-target); border: 0; background: none; font-weight: var(--kb-font-weight-medium); color: var(--kb-color-focus); }
.kb-alert .kb-pair button + button { font-weight: var(--kb-font-weight-bold); }

/* booked and the lock screen */
.kb-big { font-size: calc(var(--kb-font-size-price) * var(--kb-scale)); font-weight: var(--kb-font-weight-bold); letter-spacing: -.02em; line-height: 1.1; }
.kb-record { border-radius: var(--kb-radius-card); border: 1.5px solid var(--kb-color-line); padding: 12px 14px; font-size: calc(var(--kb-font-size-footnote) * var(--kb-scale)); }
.kb-record b { display: block; margin-bottom: 2px; }
.kb-lock { background: var(--kb-color-kerb-road); color: #F6F7F8; padding: 40px 14px 16px; }
.kb-lock-time { text-align: center; font-size: 72px; font-weight: var(--kb-font-weight-bold); letter-spacing: -.03em; line-height: 1; }
.kb-lock-day { text-align: center; margin: 6px 0 auto; }
.kb-live { margin-top: auto; width: 100%; border: 0; text-align: left; color: #F6F7F8; border-radius: 22px; background: rgba(246, 247, 248, .12); padding: 14px; display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; }
.kb-live .kb-glyph { width: 36px; height: 36px; border-radius: 9px; }
.kb-live .kb-glyph.kerb::before { top: 12px; left: 6px; right: 6px; height: 3px; } .kb-live .kb-glyph.kerb::after { top: 19px; left: 6px; right: 6px; height: 3px; }
.kb-live b { font-size: 26px; display: block; line-height: 1.1; }
.kb-live .kb-bar { grid-column: 1 / -1; background: rgba(246, 247, 248, .2); }
.kb-live .kb-bar span { background: #FFD23F; }

/* numbered notes on the screen, matching the list beside the phone */
.kb-mark { position: absolute; z-index: 4; right: 8px; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: #C8102E; color: #FFFFFF; font: 700 13px/24px var(--kb-font-family-text); text-align: center; pointer-events: none; }
[data-note] { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  /* only what the rider caused moves: sheets rise from the bottom edge they belong to; screens swap without a fade */
  .kb-overlay > .kb-bottom { animation: kb-up var(--kb-duration-sheet) ease-out; }
  .kb-overlay > .kb-alert { animation: kb-pop var(--kb-duration-quick) ease-out; }
  .kb-bar span { transition: transform 1s linear; }
  .kb-primary:active, .kb-secondary:active, .kb-chip:active { transform: scale(.98); }
  @keyframes kb-up { from { transform: translateY(100%); } }
  @keyframes kb-pop { from { transform: scale(.96); } }
}
@media (forced-colors: active) {
  .kb-chip[aria-pressed="true"], .kb-switch[aria-checked="true"]::before { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .kb-kerb, .kb-kerb::before, .kb-kerb::after { forced-color-adjust: none; }
  .kb-opt.is-pick { border: 4px double CanvasText; }
}

/* ------------------------------------------------------------------ static screens for the case study figures
   The same components, drawn without behaviour. .kbf-phone shrinks a 390 by 780 screen to fit a column. */
.kbf-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 28px; }
.kbf-item { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 281px; max-width: 100%; }
.kbf-phone { width: 281px; padding: 7px; border-radius: 40px; background: #14202E; }
.kbf-phone .kb-app { width: 390px; height: 780px; zoom: .6846; border-radius: 48px; }
.kbf-cap { font-size: 0.875rem; line-height: 1.45; color: var(--muted); text-align: center; margin: 0; }
.kbf-cap b { color: var(--ink); }
.kb-app b, .kb-app strong { color: inherit; }
.kbf .kb-screen { overflow: hidden; }
.kbf .kb-primary, .kbf .kb-secondary { display: grid; place-items: center; }
.kbf .kb-chip { display: inline-grid; place-items: center; }
.kbf .kb-link { display: inline-flex; align-items: center; }
.kbf .kb-icon { cursor: default; }
.kbf .kb-step span { display: grid; place-items: center; min-width: var(--kb-size-target); min-height: var(--kb-size-target); font-size: 22px; font-weight: var(--kb-font-weight-bold); }
.kbf .kb-switch { display: block; }
.kbf .kb-back { display: inline-flex; align-items: center; }
.kbf .kb-mark { right: 6px; top: 6px; zoom: 1.4; }
.kbf .kb-mark.out { top: -12px; right: -4px; }
.kbf .kb-mark.mid { top: 50%; right: auto; left: 78px; margin-top: -12px; }

/* the design system figure: tokens drawn from tokens.json, and the same parts in both themes */
.kbs-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 10px; }
.kbs-sw { border: 1px solid var(--rule); font-size: 0.8125rem; line-height: 1.35; color: var(--body); }
.kbs-sw i { display: block; height: 44px; border-bottom: 1px solid var(--rule); }
.kbs-sw span { display: block; padding: 6px 8px 8px; }
.kbs-sw b { display: block; color: var(--ink); }
.kbs-themes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 40.0625em) { .kbs-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kbs-themes .kb-app { border-radius: 20px; padding: 14px; gap: 10px; height: auto; }
.kbs-themes .kb-app > p { font-size: 13px; color: var(--kb-color-text-muted); }
.kbs-type p { margin: 0 0 6px; font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; }
.kbs-type small { font-variant-numeric: normal; font-family: var(--sans); color: var(--muted); font-size: 0.8125rem; margin-left: 8px; }

/* long case studies: the browser skips laying out phone figures until they are near the screen */
.kbf-row, .obf-row { content-visibility: auto; contain-intrinsic-size: auto 640px; }