/* =====================================================================================================
   VANDO - DESIGN RULES (design A: frosted panes, a journal's type)
   One file, read top to bottom. Loaded last: it re-themes approved.css / workbench.css / vehicle-step.css through
   their own colour names and overrides their shapes, so every screen - old or new - follows the same rules:

   PANES      Every control floats over the van on a frosted pane: hairline edge, soft shadow, no bright rim.
   CHOSEN     A chosen option is a raised white chip (a lighter pane in the dark) with a thin accent ring where it sits
              among other options. Never a black block, never an underline.
   ACTIONS    The one main action on a screen: an accent pill, words centred, as wide as its words, 40 tall.
              Other buttons: outlined pills of the same height. Buttons that hold a picture are rounded cards (18).
   CLOSE      Every sheet, page and menu closes with the same plain × in its top right - a symbol, not a button.
   SECTIONS   A section that opens and closes: its title on the left, one chevron at the far right, padded from its frame.
   COLOURS    Colour choices are exact circles (40 x 40), ringed so dark ones show on dark panes.
   FIELDS     Soft rounded wells with a hairline; when typing a soft accent glow - never a heavy frame.
   TYPE       Seven levels only (see TYPE below). The book serif is for titles and for names of things you own.
   ALIGNMENT  Inside a card everything starts on one left line; pictures sit centred in their places.
   ===================================================================================================== */

/* ---------- 1. colours ---------- */
:root{
  /* the older sheets' own names, re-pointed so every screen follows the appearance */
  --ink:#25221d;--muted:#675e52;--paper:#fbf8f2;--panel:rgba(255,253,248,.84);--line:rgba(40,34,26,.12);--green:#955432;--mint:rgba(149,84,50,.12);
  /* panes and accents */
  --g:rgba(255,253,248,.7);--gs:rgba(255,253,248,.84);--rim:rgba(40,34,26,.07);--mut:#675e52;--acc:#955432;--on-acc:#fffaf4;
  --chip:rgba(255,255,255,.5);--field:rgba(255,255,255,.72);--on:#ffffff;
  --on-sh:0 1px 0 rgba(255,255,255,.9) inset,0 2px 4px rgba(60,44,24,.14),0 6px 14px -6px rgba(60,44,24,.28);
  --sh:0 10px 28px -12px rgba(60,44,24,.28),0 1px 3px rgba(60,44,24,.06);--blur:blur(20px) saturate(1.3);
  --serif:'Cormorant Garamond',Georgia,serif;--sans:Inter,ui-sans-serif,system-ui,sans-serif;--spring:cubic-bezier(.2,.95,.25,1.06);
  /* TYPE - every word belongs to exactly one of these seven levels; there is no eighth
     1 brand  serif 600 25            "Vando" only
     2 title  serif 500 28            the heading of a sheet or page ("Your van", "My designs")
     3 name   serif 600 18            a van's or a design's name ("Toyota Hiace", "Weekend bed")
     4 head   sans 600 15             a section you can open or close ("Colours", "Trip settings")
     5 body   sans 400 14 / tap 500   sentences / anything you can tap: buttons, choices, menu rows, fields
     6 meta   sans 400 12.5 muted     facts under a name: when, size, how many
     7 label  sans 600 10 caps muted  small labels over a group or a field ("BODY", "NAME", the van at top left) */
  --t-brand:600 25px/1 var(--serif);--t-title:500 28px/1.1 var(--serif);--t-name:600 18px/1.2 var(--serif);--t-head:600 15px/1.3 var(--sans);
  --t-body:400 14px/1.45 var(--sans);--t-tap:500 14px/1.3 var(--sans);--t-meta:400 12.5px/1.4 var(--sans);--t-label:600 10px/1.3 var(--sans);
}
html[data-theme=dark]{
  --ink:#f1ece3;--muted:#bdb6ab;--paper:#1c2023;--panel:rgba(22,26,28,.86);--line:rgba(255,255,255,.12);--green:#d9a07f;--mint:rgba(217,160,127,.16);
  --g:rgba(26,30,32,.72);--gs:rgba(22,26,28,.86);--rim:rgba(255,255,255,.07);--mut:#bdb6ab;--acc:#d9a07f;--on-acc:#1b1f21;
  --chip:rgba(255,255,255,.06);--field:rgba(255,255,255,.07);--on:rgba(255,255,255,.16);
  --on-sh:0 1px 0 rgba(255,255,255,.14) inset,0 6px 14px -6px rgba(0,0,0,.6);--sh:0 10px 28px -12px rgba(0,0,0,.6);
}
/* at night and in the golden hour the light panes thicken so their words stay readable over a dark scene */
html[data-mood=night]:not([data-theme=dark]){--g:rgba(255,253,248,.78);--gs:rgba(255,253,248,.92)}
html[data-mood=evening]:not([data-theme=dark]){--g:rgba(255,253,248,.66)}
html[data-theme=dark] body{background:#121517}
html[data-theme=dark] .stage{background:radial-gradient(120% 90% at 45% 45%,#2b3033 0%,#171a1c 55%,#0e1011 100%)!important}
svg{flex:none}

/* ---------- 2. panes ---------- */
.chrome-actions,#layers-toggle,.mood-current,.panel-toggle,#nav,.stage>aside,.more-menu,.layers,.category-tray{
  background:var(--g)!important;border:1px solid var(--rim)!important;box-shadow:var(--sh)!important;
  -webkit-backdrop-filter:var(--blur)!important;backdrop-filter:var(--blur)!important;color:var(--ink)!important;
  transition:background-color .6s ease,border-color .6s ease,color .6s ease,transform .45s var(--spring)}
.stage>aside,.more-menu{background:var(--gs)!important}
#layers-toggle:active,.mood-current:active,.panel-toggle:active,#nav button:active,.chrome-actions>button:active{transform:scale(.94)}

/* ---------- 3. the design, top left: type, not a button ---------- */
.frameless-brand{background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;width:auto!important;height:auto!important;border-radius:0!important;display:block!important;color:var(--ink)!important;transition:color 1.6s ease}
.frameless-brand span{display:none}
.frameless-brand::after{content:"Vando";font:var(--t-brand);letter-spacing:0}
.view-title{display:block!important;pointer-events:none}
.view-title #view-kicker,.view-title small{display:none!important}
.view-title strong{display:block!important;margin:0!important;font:var(--t-label)!important;letter-spacing:.16em!important;text-transform:uppercase;color:var(--mut)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color 1.6s ease}
html[data-mood=night] .frameless-brand{color:#f1ece3!important}
html[data-mood=night] .view-title strong{color:#b9b2a6!important}

/* ---------- 4. undo, redo, more: one small pane, three icons of one size and weight ---------- */
.chrome-actions{display:flex!important;gap:0!important;padding:2px!important;border-radius:999px!important}
.chrome-actions>button{width:42px!important;height:42px!important;border-radius:50%!important;display:grid!important;place-items:center;background:transparent!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:var(--ink)!important;padding:0!important}
.chrome-actions>button:disabled{opacity:.35}
.chrome-actions .ca-icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#more-toggle .ca-icon circle{fill:currentColor;stroke:none}

/* ---------- 5. view tools on the left: round, icon only ---------- */
#layers-toggle{width:42px!important;height:42px!important;min-width:0!important;min-height:0!important;max-height:42px!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center}
#layers-toggle span{display:none!important}
#layers-toggle svg{margin:0!important;width:20px;height:20px}
.mood-switch{position:absolute;z-index:30;display:block;padding:0;border:0;background:none;box-shadow:none}
.mood-switch[hidden]{display:none}
.mood-switch .mood-current{width:42px;height:42px;border-radius:50%!important;display:grid;place-items:center;padding:0;cursor:pointer}
.mood-current svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mood-label{display:none!important}

/* layers: one sideways row growing out of the layers button, centred on it; small pictures only (the picture is the
   item); the picked one stands up as a raised tile with hide and lock stacked inside its right edge */
.layers{left:64px!important;right:auto!important;width:auto!important;min-width:0!important;max-width:calc(100% - 78px)!important;height:58px!important;min-height:58px!important;max-height:none!important;padding:0 6px!important;border-radius:22px!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-start!important;gap:6px!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x proximity;scrollbar-width:none;background:var(--g)!important}
.layers::-webkit-scrollbar{display:none}
.layers[hidden]{display:none!important}
.layers header,.layers h3{display:none!important}
.layers:has(> p){height:42px!important;min-height:42px!important;padding:0 14px!important}
.layers>p,.layers .fine{margin:0!important;font:var(--t-tap)!important;color:var(--ink)!important;white-space:nowrap;line-height:42px}
.layers .layer-row{position:relative;flex:none!important;width:48px!important;height:48px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;border-radius:12px;scroll-snap-align:start}
.layers .layer-name{display:flex!important;align-items:center!important;justify-content:center!important;width:48px!important;height:48px!important;padding:0!important;margin:0!important;background:none!important;border:0!important}
.layers .layer-name img,.layers .layer-name i{display:block;width:44px!important;height:44px!important;border-radius:10px!important;object-fit:contain!important;background:transparent!important;box-shadow:none!important;margin:0!important}
.layers .layer-name span{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important}
.layers .layer-row .layer-icon{display:none!important}
/* a picture still being drawn: a soft breathing tile, never the browser's empty broken-image frame */
img[data-thumb]:not([src]),img[data-thumb][src=""]{visibility:hidden}
.layers .layer-name:has(img:not([src])){border-radius:10px!important;background:var(--line)!important;animation:vp-wait 1.4s ease-in-out infinite alternate}
@keyframes vp-wait{from{opacity:.45}to{opacity:1}}
.layers .layer-row.is-hidden .layer-name img{opacity:.35}
.layers .layer-row.active{width:auto!important;height:48px!important;display:grid!important;grid-template-columns:48px 24px;grid-template-rows:22px 22px;align-content:center;column-gap:0;padding:0 3px 0 0!important;background:var(--on)!important;border-radius:12px!important;box-shadow:var(--on-sh)!important;transform:translateY(-1px)}
.layers .layer-row.active .layer-name{grid-row:1/3}
.layers .layer-row.active .layer-icon{display:grid!important;place-items:center;position:static!important;width:22px!important;height:22px!important;min-height:0!important;padding:0!important;border:0!important;border-radius:7px!important;background:none!important;box-shadow:none!important;color:var(--ink)!important}
.layers .layer-row.active .layer-icon svg{width:14px!important;height:14px!important;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 6. the five steps: one dock ---------- */
#nav{border-radius:999px!important;padding:5px!important;gap:2px!important;display:flex!important;align-items:center}
#nav::before,#nav::after,#nav button::before,#nav button::after{display:none!important}
#nav button{flex:none!important;width:auto!important;min-width:48px!important;height:48px!important;min-height:0!important;max-height:48px!important;display:flex!important;flex-direction:row!important;align-items:center;justify-content:center;gap:8px;padding:0 12px!important;border-radius:999px!important;background:transparent!important;color:color-mix(in srgb,var(--ink) 62%,transparent)!important;border:0!important;box-shadow:none!important;font:var(--t-tap)!important;transition:background-color .35s ease,color .35s ease,padding .45s var(--spring)}
#nav button i{display:grid;place-items:center;margin:0!important;width:auto!important;height:auto!important;background:none!important;color:inherit!important}
#nav button svg{width:20px!important;height:20px!important}
#nav button span{width:auto!important;height:auto!important;position:static!important;overflow:visible!important;clip-path:none!important;white-space:nowrap;font:inherit!important;margin:0!important}
#nav button.active{padding:0 18px 0 14px!important;background:var(--on)!important;box-shadow:var(--on-sh)!important;color:var(--acc)!important;font-weight:600!important}
#nav button.active i{color:var(--acc)!important}

/* ---------- 7. the sheet: tools of the open step ---------- */
.stage>aside{transition:transform .62s var(--spring),background-color .6s ease,opacity .3s ease!important}
/* the sheet: words always fade in at the top edge and out at the bottom edge, the same every time,
   and fade away softly around the × (and the pin on a computer) so they never run under it */
#panel-content{--close-clear:44px 36px at calc(100% - 27px) 23px;color:var(--ink);padding-bottom:30px!important;
  -webkit-mask-image:linear-gradient(transparent 0,#000 26px,#000 calc(100% - 26px),transparent),radial-gradient(var(--close-clear),transparent 62%,#000 100%);
  mask-image:linear-gradient(transparent 0,#000 26px,#000 calc(100% - 26px),transparent),radial-gradient(var(--close-clear),transparent 62%,#000 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
html[data-input=mouse] #panel-content{--close-clear:80px 42px at calc(100% - 57px) 36px}
.panel-chrome strong{color:var(--ink)!important}
#panel-pin,.panel-edge-close{color:var(--ink)!important;background:var(--gs)!important;border:1px solid var(--rim)!important}
/* CLOSE - one plain × everywhere */
#panel-close,.mm-close,.garage-dialog .garage-close{background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;width:36px!important;height:36px!important;min-height:0!important;padding:0!important;display:grid!important;place-items:center;font:300 26px/1 var(--sans)!important;color:var(--ink)!important;border-radius:0!important;outline:none!important}
/* the grip sits in the exact middle: its touch area is the same width either side of the × */
html[data-input=touch] .sheet-handle{left:60px!important;right:60px!important}
html[data-input=touch] .sheet-handle::before{background:var(--mut)!important;opacity:.35}

/* ---------- 8. inside every sheet and page ---------- */
/* cards and sections */
#panel-content .control-section,#panel-content .mini-control,#panel-content .vehicle-card,#panel-content .card,#panel-content details,#panel-content .notice,#panel-content .your-van,#panel-content .version,#panel-content section.inspector{
  background:var(--chip)!important;border:1px solid var(--line)!important;border-radius:18px!important;color:var(--ink)!important;box-shadow:none!important}
/* SECTIONS - title left, one chevron at the far right, never touching the frame, no browser triangle */
#panel-content details>summary{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px;list-style:none!important;cursor:pointer}
#panel-content details>summary::-webkit-details-marker{display:none!important}
#panel-content details>summary::marker{content:""!important}
#panel-content details:not(.control-section):not(.mini-control)>summary{padding:14px 16px!important;min-height:0!important}
#panel-content details:not(.control-section):not(.mini-control)>summary::after{content:"";width:8px;height:8px;margin-right:4px;border-right:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:rotate(45deg) translateY(-2px);transition:transform .25s ease;flex:none}
#panel-content details[open]:not(.control-section):not(.mini-control)>summary::after{transform:rotate(-135deg) translate(-2px,0)}
#panel-content details:not(.control-section):not(.mini-control)>summary>svg,#panel-content details:not(.control-section):not(.mini-control)>summary .chev{display:none!important}
/* ALIGNMENT - a group label inside a card starts on the card's own left line */
#panel-content section>h2{margin-left:0!important;margin-right:0!important}
#panel-content h2{margin:14px 16px 8px!important}
#panel-content details>label,#panel-content .control-section>label{display:flex!important;flex-direction:row!important;align-items:center;justify-content:space-between;gap:12px;margin:10px 16px 14px!important;padding:0!important;text-align:left!important}

/* ACTIONS - outlined pills by default; the main action is an accent pill; picture buttons are rounded cards */
#panel-content button:not([style*="--"]):not(.md-card):not(.md-primary):not(.change-van):not(.primary),.garage-dialog button:not(.chip):not(.garage-close):not(.primary),.mm-foot button{
  border-radius:999px!important;border:1px solid var(--line)!important;background:transparent!important;color:var(--ink)!important;font-family:var(--sans)!important;box-shadow:none!important}
#panel-content .change-van,#panel-content .md-primary,#panel-content button.primary,#panel-content .primary>button,#panel-content button[type=submit],.mm-save .mm-primary,.garage-dialog .primary{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;width:auto!important;min-width:0!important;height:40px!important;min-height:0!important;padding:0 20px!important;
  background:var(--acc)!important;color:var(--on-acc)!important;border:0!important;border-radius:999px!important;box-shadow:0 6px 16px -8px color-mix(in srgb,var(--acc) 80%,transparent)!important}
#panel-content button:has(img):not(.z1):not(.z2):not(.z3):not(.z4):not(.z5):not(.z6),#panel-content button:has(.thumb-frame):not(.z1):not(.z2):not(.z3):not(.z4):not(.z5):not(.z6),.garage-dialog button.van-card:not(.z1):not(.z2):not(.z3){border-radius:18px!important}
/* rows of actions: one height, one line, wrapping neatly, no stray margins */
#panel-content .action-row,#panel-content .export-grid{display:flex!important;flex-wrap:wrap!important;gap:8px!important;align-items:center!important}
#panel-content .action-row>*{margin:0!important}
#panel-content .action-row>button,#panel-content .action-row>a{height:40px!important;min-height:0!important;padding:0 16px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;line-height:1!important}
#panel-content .export-grid>button{width:100%!important;height:40px!important;min-height:0!important}
/* CHOSEN */
#nav button.active,.more-menu .more-views button.active,.more-menu .more-views button[aria-pressed=true],.mm-seg button[aria-pressed=true],
#panel-content .choice-grid button.active,#panel-content .surface-grid button.active,#panel-content button[aria-pressed=true]:not([style*="--"]),
.garage-dialog .chip.active,.roof-visibility-actions [aria-pressed=true]{
  background:var(--on)!important;color:var(--ink)!important;border-color:transparent!important;box-shadow:var(--on-sh)!important;font-weight:600!important}
#panel-content .choice-grid button.active,#panel-content .surface-grid button.active{outline:1.5px solid var(--acc)!important;outline-offset:-1.5px}
/* a row of choices: each as wide as its words plus the same room either side, sharing out the line */
#panel-content .choice-grid{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
#panel-content .choice-grid button{flex:1 1 auto!important;width:auto!important;white-space:nowrap!important;padding:0 12px!important;min-width:0}
#panel-content .surface-grid button{white-space:nowrap!important;padding:0 8px!important;min-width:0}
/* COLOURS - exact circles */
#panel-content .colour-tools{align-items:center!important;align-content:start!important}
#panel-content .colour-tools>button,#panel-content .colour-tools>.custom-colour{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;max-height:40px!important;aspect-ratio:1/1!important;padding:0!important;flex:none!important;align-self:center!important;justify-self:center!important;border-radius:50%!important;border:0!important;box-shadow:inset 0 0 0 1px var(--line),0 0 0 1px var(--line)!important}
html[data-theme=dark] #panel-content .colour-tools>button,html[data-theme=dark] #panel-content .colour-tools>.custom-colour{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 0 0 1px rgba(255,255,255,.22)!important}
#panel-content .colour-tools>button.active,#panel-content .colour-tools>.custom-colour.active{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--acc)!important}
#panel-content .colour-tools .custom-colour span{display:none!important}
#panel-content input[type=color]{width:34px!important;height:34px!important;padding:0!important;overflow:hidden;-webkit-appearance:none;appearance:none;border:0!important;border-radius:50%!important;box-shadow:inset 0 0 0 1px var(--line),0 0 0 1px var(--line)!important;vertical-align:middle}
#panel-content input[type=color]::-webkit-color-swatch-wrapper{padding:0}#panel-content input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}
/* FIELDS */
#panel-content input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),#panel-content select,#panel-content textarea,.garage-dialog .garage-search{
  background:var(--field)!important;border:1px solid var(--line)!important;border-radius:14px!important;color:var(--ink)!important;padding:10px 12px!important;box-shadow:none!important;outline:none!important}
#panel-content input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):focus,#panel-content textarea:focus{border-color:color-mix(in srgb,var(--acc) 70%,transparent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent)!important}
#panel-content input::placeholder,.garage-dialog input::placeholder{color:var(--mut)}
.garage-dialog .garage-search input{background:transparent!important;border:0!important;box-shadow:none!important;outline:none!important;padding:10px 8px!important}
/* choosing a file: our own button in the app's words, not the browser's control in its own language */
#panel-content label.file-pick{position:relative;display:grid!important;gap:8px}
#panel-content label.file-pick input[type=file]{position:absolute!important;inset:0!important;opacity:0!important;cursor:pointer;width:100%!important;height:100%!important}
#panel-content label.file-pick .file-btn{display:inline-flex;align-items:center;justify-content:center;justify-self:start;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);font:var(--t-tap);letter-spacing:0;text-transform:none;color:var(--ink)}
/* pictures don't glare in the dark */
html[data-theme=dark] #panel-content img,html[data-theme=dark] .category-tray img,html[data-theme=dark] .garage-dialog img{filter:brightness(.9) contrast(1.02);border-radius:12px}
html[data-theme=dark] .garage-dialog .garage-grid img,html[data-theme=dark] #panel-content .your-van img{background:rgba(255,255,255,.82)}

/* the van card: picture, then name and facts on one line each, the change button under them */
#panel-content .your-van{display:grid!important;grid-template-columns:auto 1fr;align-items:center;column-gap:12px;padding:10px!important}
#panel-content .your-van .van-text{min-width:0}
#panel-content .your-van .van-text small{display:block}
/* earlier versions: the design's name, then when; a one-line Restore */
#panel-content .version{display:flex!important;align-items:center;gap:10px}
#panel-content .version>div{min-width:0;flex:1}
#panel-content .version button{white-space:nowrap;flex:none;padding:0 14px!important;height:34px}
/* links in power & water: a plain × to remove one; no dead space under the chips */
#panel-content button.link-remove:not(.z1):not(.z2):not(.z3):not(.z4):not(.z5):not(.z6){border:0!important;background:none!important;box-shadow:none!important;width:30px!important;height:30px!important;min-height:0!important;padding:0!important;border-radius:0!important;font:300 16px/1 var(--sans)!important;color:var(--mut)!important}
#panel-content details.link-all{border-radius:16px!important}
#panel-content details.link-all>ul{padding:0 16px 10px!important;margin:0!important}
/* the selected item: its size as three quiet read-outs; a note about what it rests on in the accent tint; Remove is a plain pill in red, not underlined */
#panel-content .dimension-readout span{padding:8px 6px!important;border:1px solid var(--line)!important;border-radius:12px!important;background:var(--field)!important;font:var(--t-meta)!important;color:var(--ink)!important;letter-spacing:0!important}
#panel-content .support-note{padding:10px 12px!important;border:0!important;border-radius:12px!important;background:color-mix(in srgb,var(--acc) 10%,transparent)!important;color:var(--ink)!important}
#panel-content .danger-text{text-decoration:none!important;color:#b4442f!important}
html[data-theme=dark] #panel-content .danger-text{color:#ee9a86!important}
.garage-example{color:var(--acc)!important;font:var(--t-tap)!important}
/* the trip verdict: a soft tinted card in the theme, never a hard coloured slab */
#panel-content .trip-verdict{border-radius:16px!important;padding:14px 16px!important}
html[data-theme=dark] #panel-content .trip-verdict.warn{background:rgba(230,190,90,.14)!important;color:#ecd39a!important}
html[data-theme=dark] #panel-content .trip-verdict.bad{background:rgba(230,120,100,.15)!important;color:#f1b2a4!important}
html[data-theme=dark] #panel-content .trip-verdict.good{background:rgba(120,190,150,.15)!important;color:#a9dcbc!important}
#panel-content .trip-verdict p{color:inherit!important}
#panel-content .link-card{background:var(--chip)!important;border:1px solid var(--line)!important;border-radius:18px!important;color:var(--ink)!important}
#panel-content .link-card .link-open-title{margin-bottom:0!important}
#panel-content .link-card .action-row{margin-top:12px!important}
/* trip: the buttons share out their lines; three small numbers side by side, the two sliders full width with the value at the right */
#panel-content .journey-actions>button,#panel-content .inspector .action-row>button{flex:1 1 auto!important}
#panel-content .trip-numbers{grid-template-columns:repeat(3,minmax(0,1fr))!important}
#panel-content label.percent-field{display:grid!important;grid-template-columns:1fr auto;align-items:center;gap:8px 12px;margin-top:14px!important}
#panel-content label.percent-field input{grid-column:1/-1;width:100%}
#panel-content label.percent-field output{font:var(--t-meta)!important;letter-spacing:0!important;color:var(--ink)!important}
/* a section inside a section is a plain row under a line, never a box in a box */
#panel-content details details{background:none!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;margin-top:8px!important}
#panel-content details details>summary{padding:14px 4px!important}
/* My designs */
#panel-content .md-back{display:none!important}
.md-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.md-note{margin:0 0 14px}
.md-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#panel-content .md-card{display:grid;gap:3px;padding:8px 8px 10px!important;border-radius:18px!important;border:1px solid var(--line)!important;background:var(--chip)!important;text-align:left;color:var(--ink)!important}
.md-thumb{position:relative;display:block;height:84px;border-radius:12px;background:#fff center/cover no-repeat;margin-bottom:6px}
.md-card b,.md-card small{padding:0 4px}
.md-empty{padding:18px 4px 6px;text-align:left}.md-empty p:first-child{margin:0 0 4px!important}
#panel-content .name-form{display:grid;gap:10px;background:none!important;border:0!important;padding:4px 2px!important}
#panel-content .name-form label{display:grid;gap:8px}
#panel-content .name-form~*{display:none!important}

/* ---------- 9. the furniture row (step 2) ---------- */
.category-tray button{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--ink)!important;justify-content:flex-start!important}
.category-tray img{background:transparent!important}
.category-tray span{color:var(--ink)!important}
.category-tray .tray-search{display:flex!important;flex-direction:column;align-items:center}
.category-tray .tray-search-icon{display:grid;place-items:center;width:66px;height:50px;flex:none}
.category-tray .tray-search-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}

/* ---------- 10. choose a van: a large pane, not another app ---------- */
.garage-dialog{background:var(--gs)!important;color:var(--ink)!important;border:1px solid var(--rim)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.garage-dialog .chip{background:var(--chip)!important;border:1px solid var(--line)!important;color:var(--ink)!important}
.garage-dialog .chip span{color:var(--mut)!important;font:var(--t-meta)!important;letter-spacing:0!important}
/* TAGS on a picture ("Popular", "Your van", "Open now"): one small pill, level 6 type */
.nowrap{white-space:nowrap}
/* (a tag sits on a light picture in both themes, so it keeps light colours) */
.garage-dialog .van-flag,.md-flag{position:absolute;top:8px;left:8px;padding:2px 10px;border-radius:999px;font:var(--t-meta)!important;font-style:normal!important;background:rgba(255,255,255,.94)!important;color:#a8643f!important;border:1px solid rgba(40,34,26,.12)!important}
.garage-dialog .van-flag:not(.quiet){background:#a8643f!important;color:#fff!important;border-color:transparent!important}
.garage-dialog .van-card{border-radius:18px!important;border:1px solid var(--line)!important;background:var(--chip)!important;padding:10px 10px 12px!important;text-align:left!important;color:var(--ink)!important}
.garage-dialog .van-card.selected{border-color:var(--acc)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 25%,transparent)!important}

/* ---------- 11. the menu ---------- */
.more-menu{padding:14px 18px 12px!important;border-radius:26px!important;display:flex;flex-direction:column;gap:0!important;min-width:300px}
.more-menu[hidden]{display:none!important}
.more-menu>button{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--ink)!important;text-align:left}
.mm-close{position:absolute;top:10px;right:12px;cursor:pointer}
.mm-head{padding-right:34px}
.mm-cap{display:block;margin:14px 0 8px}
.mm-head .mm-cap{margin:0 0 4px}
.mm-save{display:flex;gap:8px;margin:12px 0 6px}
.mm-save button{flex:1;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:7px;height:44px;border-radius:999px!important;border:1px solid var(--line)!important;background:transparent!important;color:var(--ink)!important}
.more-menu svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.more-menu .mm-row{display:flex!important;align-items:center;gap:12px;width:100%;padding:12px 2px!important;border-top:1px solid var(--line)!important;min-height:0!important;height:auto!important}
.mm-row>svg:last-child{margin-left:auto;color:var(--mut)}
#mm-count{margin-left:auto;font:var(--t-meta);color:var(--mut)}#mm-count+svg{margin-left:6px!important}
.more-menu .more-views,.mm-seg{display:flex!important;padding:3px;border-radius:999px;background:var(--line);gap:2px}
.more-menu .more-views button,.mm-seg button{flex:1;height:34px;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;padding:0!important;border-radius:999px!important;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--mut)!important}
.mm-foot{display:flex;gap:16px;margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}
.mm-foot button{display:flex!important;align-items:center;gap:6px;padding:4px 0!important;border:0!important;white-space:nowrap}

/* ---------- 12. TYPE - applied ---------- */
/* 2 title */
#panel-content>h1,#panel-content .my-designs h2,#panel-content .name-form b,#panel-content section>h1,.garage-dialog h1,.garage-dialog .garage-head h2{font:var(--t-title)!important;letter-spacing:0!important;color:var(--ink)!important;text-transform:none!important;margin:0 0 6px!important}
/* 3 name */
.mm-head strong,#panel-content .your-van b,#panel-content .md-card b,#panel-content .version b,.garage-dialog .van-card b,.garage-dialog .garage-grid strong,#panel-content .md-empty p:first-child{display:block;font:var(--t-name)!important;letter-spacing:0!important;color:var(--ink)!important}
/* 4 head */
#panel-content .catalogue-card strong,#panel-content .trip-verdict strong,#panel-content .family-tile b,#panel-content .control-section>summary,#panel-content .mini-control>summary,#panel-content details>summary{font:var(--t-head)!important;letter-spacing:0!important;color:var(--ink)!important;text-transform:none!important}
#panel-content .control-section>summary span,#panel-content details>summary span{font:inherit!important}
/* 5 body / tap */
#panel-content p,#panel-content li,#panel-content .lead,.md-note{font:var(--t-body)!important;letter-spacing:0!important}
#panel-content label:not(:has(input:not([type=checkbox]):not([type=radio]))):not(:has(select)):not(.z1):not(.z2){font:var(--t-body)!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink)!important}
#panel-content button,#panel-content input,#panel-content select,.more-menu .mm-row,.mm-save button,.mm-seg button,.more-menu .more-views button,.category-tray span,.garage-dialog button,.garage-dialog .chip,.garage-dialog input{font:var(--t-tap)!important;letter-spacing:0!important;text-transform:none!important}
/* 6 meta */
.garage-dialog .garage-region>span,#panel-content .link-legend,.garage-dialog .van-note,#panel-content small,#panel-content .fine,#panel-content .muted,#panel-content .lead,.mm-head small,.md-card small,.md-note,.garage-dialog .van-card small,.garage-dialog .van-size,.garage-dialog p,.mm-foot button{font:var(--t-meta)!important;letter-spacing:0!important;color:var(--mut)!important;text-transform:none!important}
#panel-content .lead{font:var(--t-body)!important}
#panel-content p b,#panel-content p strong,#panel-content li b,#panel-content li strong{font-weight:600!important}
#panel-content .link-pill{font:var(--t-meta)!important;letter-spacing:0!important}
html[data-theme=dark] #panel-content .link-pill.open{background:color-mix(in srgb,var(--acc) 22%,transparent)!important;color:var(--acc)!important}
html[data-theme=dark] #panel-content .link-pill.ok{background:rgba(120,190,150,.18)!important;color:#9fd4b3!important}
/* 7 label: group labels, field labels, the line above a title (which keeps the accent colour - it is part of the heading) */
.view-title strong,#panel-content .eyebrow,#panel-content h2:not(.my-designs h2),.mm-cap,.garage-dialog .eyebrow,
#panel-content label:has(input:not([type=checkbox]):not([type=radio])):not(.z1):not(.z2):not(.z3),#panel-content label:has(select):not(.z1):not(.z2):not(.z3){font:var(--t-label)!important;letter-spacing:.16em!important;text-transform:uppercase!important;color:var(--mut)!important}
#panel-content .eyebrow,.mm-head .mm-cap,.garage-dialog .eyebrow{color:var(--acc)!important}
#panel-content label:has(input) input:not([type=range]),#panel-content label:has(select) select,#panel-content label .file-btn{font:var(--t-tap)!important;letter-spacing:0!important;text-transform:none!important}
#panel-content label.search-field{display:grid!important;gap:8px}

/* ---------- 13. motion: nothing just appears ---------- */
@keyframes vp-pop{from{opacity:0;transform:translateY(16px) scale(.94);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.more-menu:not([hidden]){animation:vp-pop .55s var(--spring) both;transform-origin:top right}
.layers:not([hidden]){animation:vp-pop .55s var(--spring) both;transform-origin:top left}
@keyframes vp-sheet{from{opacity:.4;transform:translateY(60px) scale(.97);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
.shell.panel-open .stage>aside{animation:vp-sheet .7s var(--spring) both}
@keyframes vp-dock{from{opacity:0;transform:translate(-50%,30px) scale(.9)}to{opacity:1;transform:translate(-50%,0)}}
html[data-input=touch] #nav{animation:vp-dock .8s var(--spring) .15s both}
#nav button.active{animation:vp-press .45s var(--spring)}
@keyframes vp-press{from{transform:scale(.86)}to{transform:none}}
/* the hour turning: a band of the new light sweeps across the screen as the sun moves */
#viewport::after{content:"";position:absolute;inset:-10% -60%;z-index:1;pointer-events:none;opacity:0;transform:translateX(-70%) skewX(-18deg)}
html.mood-shift #viewport::after{animation:vp-wash 2.2s cubic-bezier(.65,0,.35,1) both}
@keyframes vp-wash{0%{opacity:0;transform:translateX(-70%) skewX(-18deg)}35%{opacity:.75}100%{opacity:0;transform:translateX(70%) skewX(-18deg)}}
html[data-wash-to=morning] #viewport::after{background:linear-gradient(90deg,transparent,rgba(255,214,170,.55) 45%,rgba(190,215,250,.35) 55%,transparent)}
html[data-wash-to=day] #viewport::after{background:linear-gradient(90deg,transparent,rgba(255,250,235,.6) 45%,rgba(255,240,200,.35) 55%,transparent)}
html[data-wash-to=evening] #viewport::after{background:linear-gradient(90deg,transparent,rgba(255,150,80,.55) 45%,rgba(150,90,170,.35) 55%,transparent)}
html[data-wash-to=night] #viewport::after{background:linear-gradient(90deg,transparent,rgba(40,60,120,.6) 45%,rgba(10,15,40,.45) 55%,transparent)}
@media (prefers-reduced-motion:reduce){.more-menu,.layers,.stage>aside,#nav,#nav button,#viewport::after{animation:none!important}}

/* ---------- 14. layout: phones ---------- */
@media (max-width:760px){
  html[data-input=touch] .shell{--mobile-nav-height:58px}
  html[data-input=touch] .frameless-brand{left:20px!important;top:calc(max(14px,env(safe-area-inset-top)) + 4px)!important}
  html[data-input=touch] .view-title{z-index:26;left:20px!important;right:160px!important;top:calc(max(14px,env(safe-area-inset-top)) + 35px)!important;max-width:none!important}
  html[data-input=touch] .chrome-actions{top:max(14px,env(safe-area-inset-top))!important;right:14px!important}
  html[data-input=touch] #redo{display:grid!important}
  html[data-input=touch] #layers-toggle{left:14px!important;top:calc(max(14px,env(safe-area-inset-top)) + 108px)!important}
  html[data-input=touch] .layers{top:calc(max(14px,env(safe-area-inset-top)) + 100px)!important;bottom:auto!important}
  html[data-input=touch] .layers:has(> p){top:calc(max(14px,env(safe-area-inset-top)) + 108px)!important}
  html[data-input=touch] .mood-switch{left:14px;top:calc(max(14px,env(safe-area-inset-top)) + 158px)}
  html[data-input=touch] #nav{left:50%!important;right:auto!important;transform:translateX(-50%);width:auto!important;height:58px!important;bottom:max(14px,env(safe-area-inset-bottom))!important}
  html[data-input=touch] #nav button:not(.active) .nav-short,html[data-input=touch] #nav button .nav-full{display:none!important}
  html[data-input=touch] #nav button.active .nav-short{display:inline!important}
  html[data-input=touch] #mobile-nav-toggle{display:none!important}
  html[data-input=touch] .stage>aside{left:12px!important;right:12px!important;border-radius:30px!important}
  /* the 3D picture runs behind the sheet: no second background behind the glass */
  html[data-input=touch] #viewport,html[data-input=touch] .shell.panel-open #viewport,html[data-input=touch] .shell.mobile-nav-open #viewport{top:0!important;bottom:0!important}
  /* the tools: one round symbol above the dock; tapping it raises the sheet, lowering the sheet brings it back */
  html[data-input=touch] .shell .panel-toggle,html[data-input=touch] .shell.mobile-nav-open .panel-toggle{left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:46px!important;height:46px!important;min-width:0!important;min-height:0!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 70px)!important}
  html[data-input=touch] .shell .panel-toggle #panel-toggle-label{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important}
  html[data-input=touch] .shell .panel-toggle .panel-toggle-icon{display:grid!important;place-items:center;margin:0!important}
  html[data-input=touch] .shell .panel-toggle svg{width:20px;height:20px}
  html[data-input=touch] .shell.panel-open .panel-toggle{opacity:0!important;pointer-events:none!important}
  html[data-input=touch] .more-menu{position:absolute!important;left:10px!important;right:10px!important;top:auto!important;bottom:max(10px,env(safe-area-inset-bottom))!important;width:auto!important;max-height:calc(100% - 90px);overflow:auto;border-radius:30px!important;z-index:60!important;transform-origin:bottom center!important}
  html[data-input=touch] .garage-dialog{width:calc(100vw - 20px)!important;height:calc(100% - 20px)!important;border-radius:28px!important}
}

/* ---------- 15. layout: computers ---------- */
@media (min-width:761px){
  html[data-input=mouse] .frameless-brand{left:30px!important;top:26px!important}
  html[data-input=mouse] .view-title{left:30px!important;top:58px!important}
  html[data-input=mouse] #nav{left:50%!important;right:auto!important;top:24px!important;transform:translateX(-50%);width:auto!important;height:auto!important;bottom:auto!important}
  html[data-input=mouse] #nav .nav-full{display:inline!important}html[data-input=mouse] #nav .nav-short{display:none!important}
  html[data-input=mouse] .chrome-actions{top:24px!important;right:26px!important}
  html[data-input=mouse] #layers-toggle{left:26px!important;top:calc(50% - 46px)!important}
  /* computer: the layers are a column at the left edge, top to bottom, scrolling up and down; the view moves aside for it */
  html[data-input=mouse] .layers{left:80px!important;top:96px!important;bottom:auto!important;width:58px!important;max-width:none!important;height:auto!important;min-height:0!important;max-height:calc(100% - 192px)!important;padding:5px!important;flex-direction:column!important;overflow-x:hidden!important;overflow-y:auto!important;scroll-snap-type:y proximity}
  html[data-input=mouse] .layers .layer-row.active{width:48px!important;height:auto!important;grid-template-columns:24px 24px!important;grid-template-rows:48px 22px!important;padding:0 0 3px!important;transform:none!important}
  html[data-input=mouse] .layers .layer-row.active .layer-name{grid-row:1!important;grid-column:1/3!important}
  html[data-input=mouse] .layers:has(> p){width:auto!important;top:calc(50% - 46px)!important;flex-direction:row!important;padding:0 14px!important}
  html[data-input=mouse] .mood-switch{left:26px;top:calc(50% + 4px)}
  html[data-input=mouse] .stage>aside{top:96px!important;right:26px!important;bottom:auto!important;max-height:calc(100% - 122px)!important;border-radius:28px!important}
  html[data-input=mouse] .more-menu{position:absolute!important;top:78px!important;right:26px!important;left:auto!important;bottom:auto!important;width:360px!important;z-index:60!important}
}

/* ===== layout round (2026-10-05): layers with names, phone type, the drawer bar, the desktop view switch ===== */
/* layers: every row shows picture, name, hide and lock; a column on a computer, a list under the button on a phone */
.layers{height:auto!important;min-height:0!important;max-height:min(58vh,520px)!important;padding:8px!important;border-radius:18px!important;flex-direction:column!important;overflow:auto!important;scroll-snap-type:none!important}
.layers header{display:flex!important}.layers h3{display:block!important;margin:8px 6px 2px!important}
.layers .layer-row{width:auto!important;height:auto!important;display:flex!important;justify-content:flex-start!important;align-items:center!important;padding:2px 4px!important;gap:4px;scroll-snap-align:none}
.layers .layer-name{width:auto!important;height:44px!important;flex:1 1 auto!important;justify-content:flex-start!important;padding:0 6px!important;gap:10px!important}
.layers .layer-name img,.layers .layer-name i{width:36px!important;height:36px!important}
.layers .layer-name span{position:static!important;width:auto!important;height:auto!important;clip-path:none!important;overflow:hidden!important;text-overflow:ellipsis;white-space:nowrap;font:var(--t-tap)!important;color:var(--ink)}
.layers .layer-row .layer-icon{display:grid!important;place-items:center;position:static!important;width:36px!important;height:36px!important;min-height:0!important;padding:0!important;border:0!important;border-radius:9px!important;background:none!important}
.layers .layer-row .layer-icon svg{width:17px!important;height:17px!important;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.layers .layer-row.active{width:auto!important;height:auto!important;display:flex!important;grid-template-columns:none!important;grid-template-rows:none!important;padding:2px 4px!important;background:var(--on)!important;box-shadow:var(--on-sh)}
.layers .layer-row.active .layer-name{grid-row:auto!important;grid-column:auto!important}
@media (min-width:761px){html[data-input=mouse] .layers{width:256px!important;max-width:none!important;max-height:calc(100% - 192px)!important;flex-direction:column!important;padding:8px!important}html[data-input=mouse] .layers .layer-row.active{width:auto!important;grid-template-columns:none!important;grid-template-rows:none!important;padding:2px 4px!important}}
@media (max-width:760px){html[data-input=touch] .layers{left:12px!important;right:12px!important;width:auto!important;max-width:none!important;max-height:50vh!important;flex-direction:column!important}}
/* the step guide under each step title, with the way on */
.step-guide{margin:-6px 0 14px!important;font:var(--t-body)!important;color:var(--mut)!important;line-height:1.45}
.step-next{display:inline-block;margin:6px 0 0;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--on);color:var(--acc);font:var(--t-tap);box-shadow:var(--on-sh);cursor:pointer}
/* a computer shows the camera views beside the project actions; the phone keeps them in the ⋯ menu */
@media (min-width:761px){html[data-input=mouse] .view-tools{display:flex!important;position:absolute;z-index:26;top:calc(18px + env(safe-area-inset-top));right:176px;gap:2px;padding:4px;border-radius:999px;background:var(--gs);box-shadow:var(--sh);backdrop-filter:blur(14px)}
 html[data-input=mouse] .view-tools button{min-width:52px;height:34px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:var(--t-tap);cursor:pointer}
 html[data-input=mouse] .view-tools button.active{background:var(--on);box-shadow:var(--on-sh);color:var(--acc);font-weight:600}}
@media (max-width:760px){
 /* phone type: nothing smaller than 15 px in the panel, labels included */
 html[data-input=touch] #panel-content{font-size:16px}
 html[data-input=touch] .fine,html[data-input=touch] .vehicle-setup label,html[data-input=touch] .surface-guidance,html[data-input=touch] .gesture-note,html[data-input=touch] #panel-content label,html[data-input=touch] .object-list button small,html[data-input=touch] .load-space label small,html[data-input=touch] .step-guide{font-size:15px!important;line-height:1.4!important}
 html[data-input=touch] .choice-grid button,html[data-input=touch] .surface-grid button,html[data-input=touch] .exterior-add button,html[data-input=touch] .object-list button span,html[data-input=touch] .mini-control>summary,html[data-input=touch] .control-section>summary,html[data-input=touch] #panel-content button{font-size:15px!important}
 html[data-input=touch] #panel-content>.eyebrow{font-size:11px!important}
 html[data-input=touch] #nav button span{font-size:14px!important}
 html[data-input=touch] .category-tray span{font-size:14px!important}
 html[data-input=touch] #placement-feedback .gap-label{font-size:15px}
 html[data-input=touch] .layers .layer-name span{font-size:15px!important}
 /* tool buttons beside the van: 56 px, with their names */
 html[data-input=touch] .transform-tools button{width:56px!important;height:56px!important}
 html[data-input=touch] .transform-tools button::after{font-size:14px}
 /* the collapsed drawer: one full-width row above the step bar; pull it up to open the panel */
 html[data-input=touch] .shell:not(.panel-open) .panel-toggle{left:10px!important;right:10px!important;width:auto!important;transform:none!important;justify-content:space-between!important;min-height:52px!important;height:52px!important;border-radius:16px!important;padding:0 18px!important;touch-action:none;font:var(--t-head)!important}
 html[data-input=touch] .shell:not(.panel-open) .panel-toggle::after{content:'';width:10px;height:10px;border-left:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg) translate(2px,2px);margin-left:10px;flex:none}
}
.layers{align-items:stretch!important}.layers .layer-row{align-self:stretch}
/* the collapsed drawer bar reads as one row: icon, the step's name, and the pull-up chevron */
@media (max-width:760px){
 html[data-input=touch] .shell:not(.panel-open) .panel-toggle{flex-direction:row!important;align-items:center!important;gap:12px!important}
 html[data-input=touch] .shell:not(.panel-open) .panel-toggle #panel-toggle-label,html[data-input=touch] .shell:not(.panel-open) .panel-toggle span{position:static!important;display:inline!important;width:auto!important;height:auto!important;overflow:visible!important;clip-path:none!important;flex:1 1 auto;text-align:left;font:var(--t-head)!important;color:var(--ink)!important}
 html[data-input=touch] .shell:not(.panel-open) .panel-toggle svg{width:22px;height:22px;flex:none}
}
@media (max-width:760px){
 html[data-input=touch] .shell:not(.panel-open) .panel-toggle{display:flex!important;flex-wrap:nowrap!important;white-space:nowrap;line-height:1!important;padding:0 18px!important;overflow:hidden}
 html[data-input=touch] .shell:not(.panel-open) .panel-toggle #panel-toggle-label{display:block!important;flex:1 1 auto!important;min-width:0;overflow:hidden!important;text-overflow:ellipsis}
 html[data-input=touch] .shell:not(.panel-open) .panel-toggle .panel-toggle-icon{flex:none!important;width:24px!important;height:24px!important}
}

/* inside finishes: photo swatches per surface */
#panel-content .finish-surface{margin:12px 0 16px}
#panel-content .finish-head{display:flex!important;align-items:center;justify-content:space-between;gap:8px}
#panel-content .finish-head h3{margin:0;font-size:14px;font-weight:600;color:#2e3a34}
#panel-content .finish-head .colour-line{margin:0!important;font-size:12px}
#panel-content .finish-tiles{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;margin:8px 0}
#panel-content .finish-tile{display:flex!important;flex-direction:column;align-items:center;gap:5px;padding:6px 4px!important;min-height:0!important;height:auto!important;border-radius:12px!important;background:transparent!important;border:1.5px solid transparent!important;box-shadow:none!important;font-weight:500}
#panel-content .finish-tile .swatch{display:block;width:54px;height:54px;border-radius:11px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
#panel-content .finish-tile .swatch.slats::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 11px,rgba(22,17,12,.72) 11px 13px)}
#panel-content .finish-tile small{font-size:11px;line-height:1.15;text-align:center;color:#4b554f;white-space:normal}
#panel-content .finish-tile.active{border-color:#c96f4b!important;background:rgba(201,111,75,.08)!important}
#panel-content .finish-more>summary{font-size:12px;color:#6b7a72;cursor:pointer}

/* step 3: the connections picture */
#panel-content .link-diagram{overflow-x:auto;overflow-y:hidden;margin:10px -6px 6px;padding:2px 6px;-webkit-overflow-scrolling:touch}
#panel-content .link-diagram svg{display:block;max-width:none;font-family:inherit}
#panel-content .dg-lane{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;fill:#6b7a72}
#panel-content .dg-node{cursor:pointer}
#panel-content .dg-node rect{fill:#f7f9f5;stroke:#9fb0a6;stroke-width:1.2}
#panel-content .dg-node text{font-size:12px;fill:#243029}
#panel-content .dg-node.open rect{stroke:#ff7a1a;stroke-dasharray:4 3;fill:#fff7f0}
#panel-content .dg-node .dg-open-dot{fill:#ff7a1a}
#panel-content .dg-node.sel rect{stroke:#c96f4b;stroke-width:2.2;fill:#fff1ea}
#panel-content .dg-node.from rect{stroke:#2d6a45;stroke-width:2.4;fill:#eaf5ee}
#panel-content .dg-node:hover rect,#panel-content .dg-node:focus-visible rect{stroke:#243029}
/* step 5: each download says what it is */
#panel-content .export-item{display:flex!important;flex-direction:column;gap:3px;flex:1 1 46%;min-width:150px}
#panel-content .export-item small{font-size:11.5px;line-height:1.3;color:#5c6a63;padding:0 2px}

/* a phone: the gap labels only inform; the size pill is the one to tap */
html[data-input=touch] #placement-feedback .gap-label:not(.size){pointer-events:none!important}

/* picture tiles: roof kit and windows are chosen by picture, the way the catalogue is */
.tile-row{display:flex!important;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:thin}
.pick-tile{flex:0 0 auto!important;width:88px;min-height:0!important;display:flex!important;flex-direction:column;align-items:center;gap:4px;padding:6px 4px 7px!important;border:1px solid rgba(40,34,26,.14)!important;border-style:solid!important;border-radius:12px!important;background:rgba(250,251,243,.9)!important;color:var(--ink,#1d2b26)!important;cursor:pointer;font-size:11px!important;line-height:1.2}
.pick-tile img{width:74px;height:56px;object-fit:contain;display:block}
.pick-tile span{font-size:11px;line-height:1.2;text-align:center;white-space:normal;display:block}
.pick-tile:hover{background:#e2eddf!important}
.window-slot .tile-row{grid-column:1/-1}
.catalogue-entry .card-actions .info-button{min-height:34px;min-width:40px;border-radius:999px;font-weight:700;font-style:italic;font-family:Georgia,"Times New Roman",serif;font-size:15px}
#panel-content .library-hint{margin:10px 0 -8px}
/* while a piece is held on a phone the sheet handle steps aside: the Done button sits where it was */
html[data-input=touch][data-editing=true] .shell .panel-toggle{opacity:0!important;pointer-events:none!important}
/* the message line: readable in every theme, two lines at most, never a wall of text over the van */
.status-message{color:#243c34!important;font-size:13.5px!important;line-height:1.35!important;padding:10px 16px!important;max-width:min(520px,84%)!important}
html[data-theme=dark] .status-message{background:#2b302e!important;color:#f1efe8!important;border-color:#4b5652!important;box-shadow:0 8px 24px rgba(0,0,0,.45)!important}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) .status-message{background:#2b302e!important;color:#f1efe8!important;border-color:#4b5652!important}}
/* phone tools: a short word under each round button instead of a long label beside it; fine turning is the two-finger twist */
html[data-input=touch] .transform-tools{gap:10px!important}html[data-input=touch] .mode-tools,html[data-input=touch] .edit-actions{gap:22px!important}
html[data-input=touch] .transform-tools button{position:relative;width:52px!important;height:52px!important}
html[data-input=touch] .transform-tools button::after{content:attr(data-short)!important;right:auto!important;left:50%!important;top:calc(100% + 2px)!important;transform:translateX(-50%)!important;font-size:11px!important;line-height:1.1;padding:1px 6px!important;white-space:nowrap;max-width:76px;overflow:hidden;text-overflow:ellipsis}
html[data-input=touch] .transform-tools [data-transform]{display:none!important}
html[data-input=touch] .resize-handle[data-kind="axis"]{width:56px!important;height:46px!important}
/* handles stay tappable above the gap labels */
#resize-overlays{z-index:9!important}
/* phone tools sit above the step bar, captions included */
html[data-input=touch] .transform-tools{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 100px)!important}
html[data-input=touch] #placement-feedback .gap-label{font-size:13px!important;padding:4px 10px!important;min-height:0!important}
/* gap labels only while a piece is being moved or resized; at rest only its size (and any clash) shows */
html:not([data-dragging=true]) #placement-feedback .gap-label:not(.size):not(.clash):not(.editing){display:none!important}

/* ---- the object dock: everything for the selected piece sits in one fixed strip at the bottom of the view,
   so the picture of the van is never covered. A phone: just above the step bar; a desktop: bottom centre. */
.object-bar{position:absolute;z-index:12;left:50%;bottom:18px;transform:translateX(-50%);display:flex;flex-direction:column-reverse;align-items:stretch;gap:6px;pointer-events:auto;max-width:calc(100% - 24px)}
.object-bar[hidden]{display:none}
html[data-input=touch] .object-bar{left:10px;right:10px;transform:none;max-width:none;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 70px)}
.object-bar-main{display:flex;align-items:center;gap:2px;padding:4px 6px 4px 12px;border-radius:18px;background:rgba(255,253,248,.95);color:#1d2b26;box-shadow:0 10px 28px rgba(20,30,26,.22);border:1px solid rgba(40,34,26,.12);backdrop-filter:blur(14px);white-space:nowrap}
html[data-theme=dark] .object-bar-main{background:rgba(38,42,40,.95);color:#f1efe8;border-color:rgba(255,255,255,.1)}
.object-bar .object-name{display:flex;flex-direction:column;line-height:1.15;margin-right:auto;min-width:0;padding-right:8px}
.object-bar .object-name b{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.object-bar .object-name small{font-size:10.5px;opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.object-bar-main button,.object-bar-main .bar-colour{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:46px;height:44px;padding:0;border:0;border-radius:12px;background:transparent;color:inherit;font:inherit;cursor:pointer;box-shadow:none}
.object-bar-main button:hover,.object-bar-main .bar-colour:hover{background:rgba(40,77,70,.1)}
html[data-theme=dark] .object-bar-main button:hover,html[data-theme=dark] .object-bar-main .bar-colour:hover{background:rgba(255,255,255,.08)}
.object-bar-main button[aria-expanded=true]{background:rgba(40,77,70,.16)}
.object-bar-main svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.object-bar-main i{font-style:normal;font-size:10px;line-height:1;opacity:.82}
.bar-colour input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.bar-colour svg path:first-child{fill:currentColor;fill-opacity:.12}
.size-pop{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;padding:8px 12px;border-radius:16px;background:rgba(255,253,248,.97);color:#1d2b26;box-shadow:0 10px 28px rgba(20,30,26,.22);border:1px solid rgba(40,34,26,.12);backdrop-filter:blur(14px)}
html[data-theme=dark] .size-pop{background:rgba(38,42,40,.97);color:#f1efe8;border-color:rgba(255,255,255,.1)}
.size-pop[hidden]{display:none}
.stepper{display:grid;grid-template-columns:auto 32px 64px 32px;align-items:center;gap:4px;font-size:12.5px}
.stepper>span{opacity:.8;padding-right:4px}
.stepper output{text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.stepper button{width:32px;height:30px;padding:0;border-radius:9px;border:1px solid rgba(40,34,26,.18);background:rgba(255,255,255,.5);color:inherit;font-size:17px;line-height:1;cursor:pointer;box-shadow:none}
html[data-theme=dark] .stepper button{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
html[data-input=touch] .object-bar-main button,html[data-input=touch] .object-bar-main .bar-colour{width:50px;height:48px}
html[data-input=touch] .stepper{grid-template-columns:auto 38px 64px 38px}
html[data-input=touch] .stepper button{width:38px;height:36px}
html[data-input=touch] .size-pop{gap:4px 10px}
/* nothing else is drawn on the selected piece any more */
#resize-overlays,#lift-handle,#size-badge,#placement-feedback .gap-label,.plan-nudges{display:none!important}

/* a pinch or a double tap on a panel must never zoom the page: the canvas has its own gestures, the panels only scroll */
html[data-input=touch],html[data-input=touch] body{touch-action:pan-x pan-y}
html[data-input=touch] .panel,html[data-input=touch] .layers,html[data-input=touch] .garage-dialog,html[data-input=touch] .more-menu,html[data-input=touch] .category-tray,html[data-input=touch] #nav,html[data-input=touch] .object-bar{touch-action:pan-y}
/* the size steppers on a phone: two columns, so they cover less of the van */
html[data-input=touch] .size-pop{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:8px 10px}
html[data-input=touch] .size-pop[hidden]{display:none}
html[data-input=touch] .stepper{grid-template-columns:auto 30px 56px 30px;font-size:12px}

/* the 3D view is a window, not a page: nothing may scroll it (a focused button in the piece's bar once scrolled it 90 px) */
#viewport{overflow:clip!important}
/* figures always stand on the line: the book serif's old-style digits turned "L2 H1" into small, sunken numbers */
html{font-variant-numeric:lining-nums}

/* the garage's two choices sit on one line, the main one filled (it had been flattened to an outline and dropped a line) */
.garage-dialog .garage-actions{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.garage-dialog .garage-actions button{margin:0!important;height:42px!important}

/* =====================================================================================================
   AUDIT FIXES (2026-10-07). Every number here was measured: text >= 4.5:1, focus visible, touch >= 44 px.
   ===================================================================================================== */
:root{--bad-ink:#a3321f;--good-ink:#266b47;--warn-ink:#7a5a00;color-scheme:light}
html[data-theme=dark]{--bad-ink:#f2a395;--good-ink:#8fd3ad;--warn-ink:#e8c46a;color-scheme:dark}
/* cards drawn on the panel take the panel's own colours, so they read in the dark too (they stayed light: 1.1:1) */
#panel-content .check,.analysis-view .check{background:var(--chip)!important;border-top-color:var(--line)!important;border-right-color:var(--line)!important;border-bottom-color:var(--line)!important;color:var(--ink)}
#panel-content .check p,.analysis-view .check p,.check-level small{color:var(--mut)!important}
.day-card{background:var(--chip)!important;border-color:var(--line)!important;color:var(--ink)}
.day-card .day-bar{background:color-mix(in srgb,var(--ink) 12%,transparent)!important}
.trip-advice{background:color-mix(in srgb,#d4a23a 8%,var(--chip))!important;border-color:color-mix(in srgb,#d4a23a 35%,var(--line))!important;color:var(--ink)}
.result-verdict{background:var(--chip)!important;border-color:var(--line)!important;color:var(--ink)}
.result-verdict .trip-advice{background:var(--chip)!important}
.result-verdict.bad{background:color-mix(in srgb,#c0473a 9%,var(--chip))!important;border-color:color-mix(in srgb,#c0473a 35%,var(--line))!important}
.result-verdict.bad strong{color:var(--bad-ink)!important}
.result-verdict.warn{background:color-mix(in srgb,#d4a23a 10%,var(--chip))!important;border-color:color-mix(in srgb,#d4a23a 35%,var(--line))!important}
.result-verdict.warn strong{color:var(--warn-ink)!important}
.result-verdict.good strong{color:var(--good-ink)!important}
#panel-content .trip-verdict.bad{background:color-mix(in srgb,#c0473a 12%,var(--chip))!important;color:var(--bad-ink)!important}
#panel-content .trip-verdict.warn{background:color-mix(in srgb,#d4a23a 14%,var(--chip))!important;color:var(--warn-ink)!important}
#panel-content .trip-verdict.good{background:color-mix(in srgb,#4f8a6d 14%,var(--chip))!important;color:var(--good-ink)!important}
.supply-period{background:color-mix(in srgb,#d4a23a 7%,var(--chip))!important;border-color:color-mix(in srgb,#d4a23a 30%,var(--line))!important;color:var(--ink)}
.metric-strip div{background:var(--chip)!important;color:var(--ink)}
.metric-strip span,.summary-card span{color:var(--mut)!important}
.draft-notice{background:color-mix(in srgb,#d4a23a 14%,var(--chip))!important;border-color:color-mix(in srgb,#d4a23a 40%,var(--line))!important;color:var(--ink)}
.link-prompt{background:var(--chip)!important;color:var(--ink)}
.item-size div{background:var(--field)!important}
.item-size dt{color:var(--mut)!important}
.item-size dd{font:600 18px/1.1 var(--sans)!important;font-variant-numeric:tabular-nums;color:var(--ink)!important}
.layer-close{color:var(--ink)!important}
.layers h3{color:var(--mut)!important}
.layer-row.active{background:color-mix(in srgb,var(--acc) 14%,transparent)!important}
/* the trip results page and the credits follow the same panes, type and colours as every other surface */
.analysis-view{background:var(--gs)!important;border-color:var(--rim)!important;color:var(--ink)}
.analysis-view h1,.analysis-view h2{font:var(--t-title)!important;letter-spacing:0!important;color:var(--ink)!important}
.credits-dialog{background:var(--paper)!important;color:var(--ink)!important}
.credits-dialog h2{font:var(--t-title)!important;color:var(--ink)!important}
.credits-dialog h3{color:var(--mut)!important}
.credits-dialog li span{color:var(--mut)!important}
.credits-dialog a,.analysis-view a{color:var(--acc)}
.garage-bar b{font:var(--t-name)!important}
/* words over the 3D scene: the van's name stays readable on the lightest sand */
.view-title strong{color:color-mix(in srgb,var(--ink) 80%,transparent)!important}
/* the steps you are not on: 72% ink (62% measured 4.48:1) */
#nav button:not(.active){color:color-mix(in srgb,var(--ink) 72%,transparent)!important}
/* keyboard focus is always visible (the close crosses, the garage search, the tray and the colour well had none) */
:is(#app,body) :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--acc)!important;outline-offset:2px!important}
html :is(#panel-close,.mm-close,.garage-close,.layer-close):focus-visible{outline:2px solid var(--acc)!important;outline-offset:2px!important}
.garage-dialog .garage-search:focus-within{box-shadow:0 0 0 2px var(--acc)!important}
.category-tray button:focus-visible{outline:2px solid var(--acc)!important;outline-offset:-2px!important}
.bar-colour:focus-within{outline:2px solid var(--acc);outline-offset:2px;border-radius:12px}
/* the browser's own surfaces follow the palette */
::selection{background:color-mix(in srgb,var(--acc) 26%,transparent);color:var(--ink)}
input,textarea{caret-color:var(--acc)}
input[type=range],input[type=checkbox],input[type=radio]{accent-color:var(--acc)}
#panel-content,.layers,.garage-dialog,.more-menu,.analysis-view{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 28%,transparent) transparent}
/* a finger needs 44 px: the crosses, the top buttons, the Size steppers, the layer buttons, the menu and garage chips */
html[data-input=touch] :is(#panel-close,.mm-close,.layer-close){width:44px!important;height:44px!important}
html[data-input=touch] .garage-dialog .garage-close{width:44px!important;height:44px!important;min-width:44px!important}
html[data-input=touch] .chrome-actions>button,html[data-input=touch] #layers-toggle,html[data-input=touch] .mood-switch .mood-current{width:44px!important;height:44px!important;max-height:44px!important}
html[data-input=touch] .layers .layer-row button{min-width:44px!important;min-height:44px!important}
html[data-input=touch] .mm-seg button,html[data-input=touch] .more-menu .more-views button{height:44px!important}
html[data-input=touch] .mm-foot button{min-height:44px!important}
html[data-input=touch] .garage-dialog .chip{min-height:40px!important}
html[data-input=touch] #panel-content button:not(.van-card):not(.family-tile):not(.catalogue-card):not(.pick-tile):not([data-body-color]):not(.link-remove){min-height:44px}
/* Size on a phone: two columns, each a name over a full-size − value + (the buttons were 30-38 px) */
html[data-input=touch] .size-pop{display:grid!important;grid-template-columns:1fr 1fr;gap:6px 12px}
html[data-input=touch] .size-pop[hidden]{display:none!important}
html[data-input=touch] .stepper{grid-template-columns:44px 1fr 44px!important;grid-template-rows:auto 44px;row-gap:2px;font-size:12px}
html[data-input=touch] .stepper>span{grid-column:1/-1;padding:0 2px}
html[data-input=touch] .stepper button{width:44px!important;height:44px!important}
/* the trip results page in the dark: its toolbar and buttons take the panes' colours (they stayed light green) */
.analysis-toolbar{background:var(--gs)!important;box-shadow:0 1px var(--line)!important}
.analysis-toolbar button,.analysis-toolbar select,.analysis-view .result-verdict button,.analysis-view .action-row button{background:var(--field)!important;border:1px solid var(--line)!important;color:var(--ink)!important;border-radius:999px!important}
/* the link diagram's boxes follow the theme */
html[data-theme=dark] #panel-content .dg-node rect{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.28)}
html[data-theme=dark] #panel-content .dg-node text{fill:var(--ink)}
html[data-theme=dark] #panel-content .dg-node.open rect{fill:rgba(255,122,26,.12)}
html[data-theme=dark] #panel-content .dg-node.sel rect{fill:rgba(201,111,75,.22)}
html[data-theme=dark] #panel-content .dg-node.from rect{fill:rgba(45,106,69,.3)}
html[data-theme=dark] #panel-content .dg-node:hover rect,html[data-theme=dark] #panel-content .dg-node:focus-visible rect{stroke:var(--ink)}

/* ---- second contrast pass (2026-10-07): every text measured against the pixels really behind it, both themes, both devices ---- */
/* the door and seat settings kept a pale box of their own, so in the dark their words vanished (1.06:1) */
#panel-content .vehicle-setup{background:var(--chip)!important;border-color:var(--line)!important;color:var(--ink)}
#panel-content .vehicle-setup .fine,#panel-content .vehicle-setup h2,#panel-content .vehicle-setup .colour-line,#panel-content .vehicle-setup .setup-note{color:var(--mut)!important}
/* words that still carried a fixed colour from the first design: theme ink instead */
.surface-guidance{color:var(--mut)!important}
#panel-content .finish-head h3{color:var(--ink)!important}
.link-need{color:var(--warn-ink)!important}
/* the links list in Power (and the trip's event list): rows on the panel's own surface, not a pale wash */
.connection-row,.event-row{background:var(--chip)!important;border-color:var(--line)!important;color:var(--ink)}
.connection-row small,.event-row small{color:var(--mut)!important}
/* the garage: the "+" of the own-van card sits on a field in the dark, and counts in the chosen chip stay readable */
html[data-theme=dark] .van-card.own .own-icon{background:var(--field)!important}
html[data-theme=dark] .garage-dialog .chip.active span{color:color-mix(in srgb,var(--ink) 72%,transparent)!important}
/* trip results: folds, supply days and their tables use the same cards and ink as the panel */
.analysis-view .control-section,.analysis-view details{background:var(--chip)!important;border:1px solid var(--line)!important;border-radius:18px!important;color:var(--ink)!important;box-shadow:none!important}
.analysis-view .control-section>summary,.analysis-view details>summary{color:var(--ink)!important}
.analysis-view .section-body p,.analysis-view .section-body small,.analysis-view .section-body li{color:var(--mut)!important}
.analysis-view .supply-day[open]>summary{background:color-mix(in srgb,var(--ink) 6%,transparent)!important}
.analysis-view table th,.analysis-view table td{color:var(--ink)}
.analysis-view .eyebrow{color:var(--acc)!important}
/* "Show me" in the results' checks: the panel's pill, not the browser's grey box */
.analysis-view .check button{display:inline-flex;align-items:center;min-height:34px;padding:6px 14px!important;border:1px solid var(--line)!important;border-radius:999px!important;background:transparent!important;color:var(--ink)!important;font:500 13px/1.2 var(--sans)!important;cursor:pointer}
.analysis-view .check button:hover{background:var(--chip)!important}
/* a piece's picture still being drawn: only the picture breathes; its name is known and stays solid (the whole row pulsed to 45%) */
.layers .layer-name:has(img:not([src])){background:none!important;animation:none!important}
.layers .layer-name img[data-thumb]:not([src]){visibility:visible!important;background:var(--line)!important;animation:vp-wait 1.4s ease-in-out infinite alternate}
/* the layers list keeps its name and × at the top: only the rows scroll (on a phone the open list covers its own button,
   so a scrolled-away × left no way to close it) */
.layers,html[data-input] .layers{overflow:hidden!important;flex-direction:column!important}
.layers>header{flex:none}
.layers-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 28%,transparent) transparent;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%)}
/* the garage's finished designs: a short line of links under the welcome */
.garage-examples{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;margin:10px 0 0}
.garage-examples>span{font:var(--t-small,500 13px/1.4 var(--sans));color:var(--mut)}
.garage-examples .garage-example{margin:0!important;padding:4px 0!important;text-align:left}

/* steel ribs in the load-space card: a count (0-3) and a slider per rib, measured from the rear doors */
html #panel-content .load-space details.ribs label.rib-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"name out" "range range"!important;gap:2px 10px;align-items:center;margin:10px 0!important}
html #panel-content .load-space details.ribs label.rib-row>span{grid-area:name!important;font-size:.88rem;font-weight:500;color:var(--ink);text-transform:none!important;letter-spacing:normal!important}
html #panel-content .load-space details.ribs label.rib-row>output{grid-area:out!important;font-variant-numeric:tabular-nums;color:var(--mut);font-size:.88rem;text-transform:none!important;letter-spacing:normal!important}
html #panel-content .load-space details.ribs label.rib-row>input[type=range]{grid-area:range!important;width:100%!important;min-height:36px;accent-color:var(--acc);margin:0!important;padding:0!important;border:0!important;background:none!important}
html #panel-content .load-space details.ribs .rib-count-label{margin:8px 0 6px;font-weight:600;font-size:.88rem;color:var(--ink)}
html #panel-content .load-space details.ribs .choice-grid.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}

/* Step 1 as one flow: Look, Load space, Windows & roof. The jump buttons at the top of the panel follow the scroll; the parts below the van picker are greyed out (and cannot be used) until a van is chosen */
html #panel-content .flow-jump{display:flex;gap:6px;padding:6px 44px 8px 0;margin:0 0 4px}
html #panel-content .flow-jump>button{flex:1 1 0;min-height:40px;padding:0 6px;font-size:.84rem}
html #panel-content .flow-jump>button[aria-current="true"]{background:var(--acc)!important;border-color:var(--acc)!important;color:var(--on-acc)!important}
html #panel-content .flow-part{padding:6px 0 18px;scroll-margin-top:8px}
html #panel-content .flow-part+.flow-part{border-top:1px solid var(--line)}
html #panel-content h2.flow-title{font:600 1.05rem/1.3 var(--sans)!important;margin:10px 0 8px!important;color:var(--ink)!important;text-transform:none!important;letter-spacing:normal!important}
html #panel-content h3.flow-sub{font:600 .92rem/1.3 var(--sans)!important;margin:16px 0 8px!important;color:var(--ink)!important;text-transform:none!important;letter-spacing:normal!important}
html #panel-content .flow-label{font-size:.82rem;color:var(--mut);margin:10px 0 6px}
html #panel-content .flow-locked{opacity:.42;filter:saturate(.4);pointer-events:none;user-select:none}
html #panel-content .van-picker .make-chips{gap:6px!important}
html #panel-content .pick-vans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
html #panel-content .pick-vans>button.pick-van{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:1px;height:auto!important;min-height:0!important;padding:8px!important;border-radius:14px!important;text-align:left!important;white-space:normal!important}
html #panel-content .pick-vans .pick-photo{display:block;width:100%;aspect-ratio:16/9;margin-bottom:4px;border-radius:10px;background:var(--chip);overflow:hidden}
html #panel-content .pick-vans .pick-photo img{width:100%;height:100%;object-fit:contain}
html #panel-content .pick-vans b{font-size:.86rem;line-height:1.25;color:var(--ink)}
html #panel-content .pick-vans small{font-size:.74rem;line-height:1.3;color:var(--mut)}
html #panel-content .pick-vans>button.pick-van.active{outline:2px solid var(--acc)!important;outline-offset:-2px}
html #panel-content .paint-styles{gap:6px!important}
html #panel-content details.flow-more{margin-top:10px}
html #panel-content details.flow-more>summary{font-size:.86rem;font-weight:600;min-height:40px;display:flex;align-items:center;cursor:pointer}

/* a size: its number and unit, then a slider under them */
html #panel-content .load-space label{grid-template-areas:"name name" "input unit" "range range" "hint hint"!important}
html #panel-content .load-space label>input.ls-range{grid-area:range;width:100%;min-height:32px;margin:2px 0 0;padding:0;border:0;background:none;accent-color:var(--acc)}
html #panel-content .fixed-line{font-size:.86rem;color:var(--ink);margin:6px 0}
html #panel-content .finish-flow .choice-grid{gap:6px!important}
html #panel-content .fit-tiles{margin-bottom:6px}