/* THE VETTA DESIGN SYSTEM (the main theme, 2026-11-14): web/system.css, loaded last by the map page and the Log.
   The owner: Roadbook was "flat, boring, uninspired and low contrast", tuned screen by screen. The main theme is now one
   system: colour from themes.js (graphite and white, one red), and shape and depth as tokens here, applied to every
   control by kind, so a new screen is right by construction. Other themes keep their own look (the tokens default flat).
   Keys and fields: --r-key. Cards and panels in a page: --r-card on the raised fill. Sheets: --r-sheet on their top
   corners, lifted by --elev-2. Floating things over the map: --elev-1. Lines between rows: the hair, never ink. */
:root { --r-key: 0px; --r-card: 0px; --r-sheet: 0px; --elev-1: none; --elev-2: none; }
[data-theme="roadbook"] { --r-key: 12px; --r-card: 16px; --r-sheet: 22px; --r-chip: 999px;
  --elev-1: 0 1px 2px rgb(16 18 24 / 0.08), 0 8px 24px -10px rgb(16 18 24 / 0.28);
  --elev-2: 0 -1px 0 rgb(16 18 24 / 0.05), 0 -14px 36px -16px rgb(16 18 24 / 0.32); }
[data-theme="roadbook"][data-mode="night"] { --elev-1: 0 0 0 1px rgb(255 255 255 / 0.07), 0 10px 26px -10px rgb(0 0 0 / 0.85);
  --elev-2: 0 0 0 1px rgb(255 255 255 / 0.06), 0 -18px 40px -14px rgb(0 0 0 / 0.9); }

/* keys: rounded, filled; the one solid ink key and the red record key keep their fills, the rest sit on the raised grey */
[data-theme="roadbook"] :is(.key, .ink-btn, .btn, .rec-key, .btn-start, .gear-key, .map-key, .edge-tab, label.plan-search, .switch, .detents, .chip,
  input[type="search"], input[type="text"], input[type="email"], input[type="number"], textarea, select) { border-radius: var(--r-key); }
/* the outline key (ink-btn, the secondary) becomes a raised fill; a key with a fill of its own (solid, on, pressed, the
   hazard plate's) keeps it */
[data-theme="roadbook"] .ink-btn:not(.solid):not(.on):not(.hz-btn):not([aria-pressed="true"]):not([aria-checked="true"]):not(.danger) { border-color: transparent; background: var(--raised); }
[data-theme="roadbook"] :is(.switch, .detents) > :is(button, [role="radio"]) { border-radius: calc(var(--r-key) - 3px); }
[data-theme="roadbook"] .chip:not(.on):not([aria-pressed="true"]):not([aria-checked="true"]) { border-color: transparent; background: var(--raised); }
[data-theme="roadbook"] #startDrive { border-radius: var(--r-key) 0 0 var(--r-key); }
[data-theme="roadbook"] #startMore { border-radius: 0 var(--r-key) var(--r-key) 0; }
[data-theme="roadbook"] :is(.btn-start, .rec-key) { box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
[data-theme="roadbook"] #startMore { box-shadow: inset 1.5px 0 0 rgb(0 0 0 / 0.18); }
[data-theme="roadbook"] :is(.map-key, .edge-tab, .gear-key) { box-shadow: var(--elev-1); border: 0; }

/* the three route levels: three raised tiles with a gap, the picked one solid ink */
[data-theme="roadbook"] .rc-levels { gap: 6px; }
/* the tiles' inner pad 8, not 10: the gaps take 12 px of the row, and "Long way" fits a mini on its side (CI 2026-11-14: 88/86) */
[data-theme="roadbook"] .rc-levels > button { border: 0; border-radius: var(--r-card); background: var(--raised); padding-left: 8px; padding-right: 8px; }
[data-theme="roadbook"] .rc-levels > button + button { margin-left: 0; }
[data-theme="roadbook"] .rc-levels > button.on { background: var(--panel-ink); }

/* cards: the raised fill, rounded, no outline */
[data-theme="roadbook"] #app :is(.theme-card, .loop-suggest, .nearby-chip, .feed-card, .people-sample-body, .nav-rows) { border-color: transparent; border-radius: var(--r-card); background: var(--raised); }
[data-theme="roadbook"] #app :is(.plan-chips, .deck-chips) .chip:not(.on):not([aria-pressed="true"]) { border-color: transparent; background: var(--raised); border-radius: var(--r-chip); }
[data-theme="roadbook"] .loop-suggest svg { border: 0; border-radius: 10px; background: var(--panel); }
[data-theme="roadbook"] .theme-card { overflow: hidden; }
[data-theme="roadbook"] .theme-card.in-use { box-shadow: 0 0 0 2px var(--panel-ink); }
[data-theme="roadbook"] .edge-panel { border: 0; border-radius: var(--r-card); box-shadow: var(--elev-1); }

/* the turn in the strip, read at arm's length: the road you turn onto in sentence case at 16 px, not 11 px caps */
[data-theme="roadbook"] .rb-box.now .rb-call b + span { font-size: 16px; font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.15; margin-top: 2px; }
[data-theme="roadbook"] .rb-box.now .rb-call b { font-size: 28px; }
[data-theme="roadbook"] .rb-box { border-left-color: var(--hair); border-left-width: 1px; }

/* sheets: rounded top corners, lifted off the map; their edges are depth, not a rule */
[data-theme="roadbook"] :is(.plan, .plan.routed) { border-top: 0; border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--elev-2); }
[data-theme="roadbook"] .tabbar { border-top: 1px solid var(--hair); }
[data-theme="roadbook"] .plan-foot { border-top-color: var(--hair); }

/* the Log (analysis.html): its index rows ruled by the hair; the first page's pencil drawing a raised card of its own */
[data-theme="roadbook"] table:is(.road-index, .fp-index) td { border-bottom-color: var(--hair); }
[data-theme="roadbook"] .fp-ghost { border: 0; border-radius: var(--r-card); background: var(--raised); padding: 4px 16px 6px; }
[data-theme="roadbook"] .fp-ghost .hero-score { border-bottom-color: var(--hair); }
[data-theme="roadbook"] .fp-digits i, [data-theme="roadbook"] .fp-ghost .stamp-d { border-radius: 10px; border-color: color-mix(in srgb, var(--panel-dim) 60%, transparent); }
/* the empty Log stands in the middle of the page (it hung at the top over a blank sheet), the head and line set big */
[data-theme="roadbook"] .first-page { min-height: 64vh; align-content: center; }
[data-theme="roadbook"] .fp-head { font-size: 30px; }
[data-theme="roadbook"] a.btn.fp-go { box-shadow: 0 6px 16px -8px rgb(0 0 0 / 0.35); }

/* the binnacle (instruments.js mountLine): the speed line a rounded track with the speed filled in ink, the minor ticks
   gone, the majors in the hair; Sight a raised pill beside the limit sign (not when short: its red word keeps the panel) */
[data-theme="roadbook"] .sl-base { stroke: var(--raised); stroke-width: 8; stroke-linecap: round; }
[data-theme="roadbook"] .sl-fill { stroke-width: 8; stroke-linecap: round; }
[data-theme="roadbook"] .sl-tick { stroke: transparent; }
[data-theme="roadbook"] .sl-tick.major { stroke: var(--hair); stroke-width: 2; }
[data-theme="roadbook"] .sl-tip circle { stroke: var(--panel); stroke-width: 2.5; }
[data-theme="roadbook"] .cluster-line .ro.ro-sight:not(.short) { background: var(--raised); border-radius: var(--r-key); padding: 6px 12px 7px; }

/* sheets over everything: What's new, Report a hazard, confirm sheets (.card-sheet) and the Garage's Settings (.side-pop):
   rounded top corners and depth instead of an ink rule */
[data-theme="roadbook"] .card-sheet { border-top: 0; border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--elev-2); }
[data-theme="roadbook"] .side-pop { border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--elev-2); }

/* Settings and every list of rows (.nav-rows): an inset grouped list. Each group of rows is one raised card, its rows
   parted by a line of the panel; the group's heading sits above it on the page, no rule */
[data-theme="roadbook"] .nav-rows { border: 0; background: none; }
[data-theme="roadbook"] #app .nav-rows { background: none; }
[data-theme="roadbook"] .nav-rows > .nav-row { background: var(--raised); border-top: 0; border-bottom: 1px solid var(--panel); padding-left: 14px; padding-right: 12px; }
[data-theme="roadbook"] .nav-rows > .nav-row:first-child, [data-theme="roadbook"] .nav-rows > .nav-group + .nav-row { border-top-left-radius: var(--r-card); border-top-right-radius: var(--r-card); }
[data-theme="roadbook"] .nav-rows > .nav-row:last-child, [data-theme="roadbook"] .nav-rows > .nav-row:has(+ .nav-group) { border-bottom: 0; border-bottom-left-radius: var(--r-card); border-bottom-right-radius: var(--r-card); }
[data-theme="roadbook"] .nav-rows > .nav-group { border: 0; padding-left: 4px; }

/* the Log's drive page and Stages: every box (corners, the timeline, the map, the lanes, cards) a raised rounded card,
   flat, instead of white paper with a shadow on white; the zoom keys and the readout rounded; the tags and the plan's
   avoid stamps raised pills, the one picked inked (no tilted stamp) */
[data-theme="roadbook"] .log-page :is(.dp-card, .seg, .dv-corner, .dv-time button, .card, .empty, .dv-map, .dv-lanes, .seg-map, .vote-map) { background: var(--raised); box-shadow: none; border-radius: var(--r-card); }
[data-theme="roadbook"] .log-page :is(.seg, .dv-corner).on { box-shadow: inset 0 0 0 2px var(--accent); }
[data-theme="roadbook"] .log-page :is(.dv-map, .dv-lanes, .seg-map, .vote-map) { overflow: hidden; }
[data-theme="roadbook"] .log-page .dv-plan { border-radius: calc(var(--r-card) - 6px); }
[data-theme="roadbook"] .log-page .dv-recenter { border: 0; border-radius: var(--r-chip); padding: 4px 12px; box-shadow: var(--elev-1); }
[data-theme="roadbook"] .log-page .dv-z { border-radius: var(--r-key); }
[data-theme="roadbook"] .log-page .dv-z:not(.on) { border-color: transparent; background: var(--raised); color: var(--panel-ink); }
[data-theme="roadbook"] .log-page .dv-read { border-radius: var(--r-card); overflow: hidden; }
[data-theme="roadbook"] .stamps > :is(button, .chip, .ink-btn) { border-color: transparent; background: var(--raised); border-radius: var(--r-chip); padding: 0 14px;
  letter-spacing: 0; text-transform: none; font-size: 14px; font-weight: 600; }
[data-theme="roadbook"] .stamps > :is(.on, [aria-checked="true"], [aria-pressed="true"]) { background: var(--panel-ink); color: var(--panel); transform: none; box-shadow: none; }

[data-theme="roadbook"] .log-page :is(button.btn, a.btn, label.btn):not(.solid):not(.on):not([aria-pressed="true"]):not(.danger) { border-color: transparent; background: var(--raised); }
/* red words on the raised grey: the one red holds 4.38:1 there by day, so they take a touch of the ink (--accent-raised),
   darker by day and lighter by night, and clear 4.5:1 (CI 2026-11-14) */
[data-theme="roadbook"] { --accent-raised: color-mix(in srgb, var(--accent) 85%, var(--panel-ink)); }
[data-theme="roadbook"] .nav-rows > .nav-row.danger { color: var(--accent-raised); }
/* the same red inside the Log's raised cards (a corner's number, a lost tenth): the cards hand their words the inked red */
[data-theme="roadbook"] .log-page :is(.dp-card, .seg, .dv-corner, .dv-time button, .card, .empty) { --signal: var(--accent-raised); --accent: var(--accent-raised); }