/* Slipway panels: the two side panels and everything drawn inside them, the start card, the level-of-detail
   strip, the honeycomb picker and the help. Every value comes from tokens.css; shared controls are in base.css. */

/* ------------------------------------------------------------------ stage: the start card sits on the left, the rest is free for the view */
.stage__top { grid-row: 1; flex-wrap: wrap; gap: var(--s-3); }
.stage__mid { grid-row: 2; }
.stage__bottom { grid-row: 3; }
.stage__top:empty, .stage__top:not(:has(> :not([hidden]))) { display: none; }
.stage__mid { display: flex; justify-items: stretch; align-items: center; gap: var(--s-6); }
.stage__mid > .free { flex: 1 1 0; align-self: stretch; min-width: 0; pointer-events: none; }
.start { flex: none; width: min(100%, 27.5rem); max-height: 100%; overflow: auto; align-items: flex-start; gap: var(--s-4); padding: var(--s-6); text-align: left; }
.start .dropzone__icon { margin-bottom: var(--s-2); }
.start h1 { margin-top: 0; }
.start .dropzone__lead { margin-top: calc(var(--s-3) * -1); }
.start .dropzone__actions { align-self: stretch; justify-content: flex-start; }
.start .dropzone__actions .btn { flex: 1; }
.start__examples { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); color: var(--ink-3); font-size: var(--fs-small); }
.start__examples .textlink { font-size: var(--fs-control); color: var(--ink); }
.start__hint { align-self: stretch; }
.start .formats { padding: var(--s-4) 0; }
.start .formats > div { align-items: flex-start; }
.start .formats dt { padding-top: var(--s-1); }
.start__error, .start__busy { align-self: stretch; }
.start__error .notice b { overflow-wrap: anywhere; }
.start__error .notice small { display: block; margin-top: var(--s-2); color: var(--ink-3); font: 400 var(--fs-small)/var(--lh-snug) var(--font-num); overflow-wrap: anywhere; }
.start__busy { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: var(--hair) solid var(--cold-line); border-radius: var(--r-2); background: var(--cold-wash); }
.start__busy .loading { color: var(--ink); overflow-wrap: anywhere; }
.app[data-screen="empty"] .tools [data-layer="dimensions"] { display: none; }

/* ------------------------------------------------------------------ panels */
.panel { display: flex; flex-direction: column; align-self: start; min-height: 0; max-height: 100%; overflow: hidden; }
.panel--left { grid-column: 1; grid-row: 2 / 4; width: var(--w-left); }
.panel--right { grid-column: 3; grid-row: 2 / 4; width: var(--w-right); }
.panel__view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.panel__head { display: flex; align-items: center; gap: var(--s-3); flex: none; min-height: var(--h-head); padding: 0 var(--s-2) 0 var(--s-4); border-bottom: var(--hair) solid var(--line); }
.panel__head > .icon { color: var(--ink-3); }
.panel__head h2 { font: 600 var(--fs-small)/1 var(--font-label); letter-spacing: var(--track-caps); text-transform: uppercase; }
.panel__hint { margin-left: auto; color: var(--ink-3); font-size: var(--fs-small); white-space: nowrap; }
.panel__head > .iconbtn { margin-left: auto; }
.panel__hint + .iconbtn { margin-left: 0; }
.panel__body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.panel__body > * { flex-shrink: 0; }
.panel__foot { flex: none; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); border-top: var(--hair) solid var(--line-strong); background: var(--hull); }
.panel__foot--row { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); }
.group { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); }
.group + .group, .headline + .group { border-top: var(--hair) solid var(--line); }
.group__title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); color: var(--ink-2); }
.group__title .num { color: var(--ink-2); letter-spacing: 0; }
.group__aside { color: var(--ink-3); font: 400 var(--fs-small)/var(--lh-tight) var(--font-ui); letter-spacing: 0; text-transform: none; }
.row__under { margin-top: calc(var(--s-2) * -1); padding-left: calc(var(--w-label) + var(--s-3)); }

/* one sentence that says where you are, one line that says what to do next */
.headline { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) var(--s-4) var(--s-4); }
.headline h3 { font: 600 var(--fs-title)/var(--lh-tight) var(--font-ui); text-wrap: balance; }
.headline p { color: var(--ink-2); font-size: var(--fs-control); line-height: var(--lh-snug); }
.headline--ok h3 { color: var(--cold-strong); }
.headline--bad h3 { color: var(--hot); }
.headline__row { display: flex; align-items: center; gap: var(--s-4); }
.headline__mark { display: grid; place-items: center; flex: none; width: var(--h-control-lg); height: var(--h-control-lg); border: var(--hair) solid var(--cold-line); border-radius: var(--r-2); background: var(--cold-wash); color: var(--cold); }
.headline--bad .headline__mark { border-color: var(--hot-line); background: var(--hot-wash); color: var(--hot); }

/* a folded panel: a rail with the key facts */
.panel__rail { display: none; flex-direction: column; align-items: center; gap: var(--s-4); padding: var(--s-2) 0 var(--s-5); }
.rail__body { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.rail__label { writing-mode: vertical-rl; font: 600 var(--fs-label)/1 var(--font-label); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); }
.rail__body > .icon { color: var(--ink-3); }
.rail__count { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); padding: var(--s-2) var(--s-1); border: var(--hair) solid var(--warm-line); border-radius: var(--r-1); color: var(--warm); font: 500 var(--fs-label)/1 var(--font-num); }
.rail__dots { display: flex; flex-direction: column; gap: var(--s-1); }
.rail__dots i { display: block; width: var(--chip); height: var(--chip); border-radius: var(--r-1); background: var(--c); box-shadow: inset 0 0 0 var(--hair) var(--line-strong); }
.panel.is-folded { width: var(--w-rail); }
.panel.is-folded .panel__view { display: none !important; }
.panel.is-folded .panel__rail { display: flex; }

.tabs { display: flex; gap: var(--s-1); margin-left: calc(var(--s-3) * -1); }
.tabs__tab { display: inline-flex; align-items: center; gap: var(--s-3); height: var(--h-control); padding: 0 var(--s-3); border: var(--hair) solid transparent; border-radius: var(--r-2); background: transparent; color: var(--ink-3); font: 600 var(--fs-small)/1 var(--font-label); letter-spacing: var(--track-caps); text-transform: uppercase; }
.tabs__tab:hover { background: var(--hull-raise-2); color: var(--ink); }
.tabs__tab[aria-selected="true"] { color: var(--ink); background: var(--hull-raise); border-color: var(--line-control); }
.tabs__count { min-width: 1.5em; padding: var(--s-1) var(--s-2); border-radius: var(--r-2); background: var(--warm-wash); color: var(--warm); font: 600 var(--fs-small)/1 var(--font-num); letter-spacing: 0; text-align: center; }

/* ------------------------------------------------------------------ facts about a file */
.ident { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.ident__name { font: 600 var(--fs-lead)/var(--lh-tight) var(--font-ui); overflow-wrap: anywhere; }
.ident__sub { color: var(--ink-3); font-size: var(--fs-small); overflow-wrap: anywhere; }
.kv dd.num { font-size: var(--fs-control); }
.checks, .notices { display: flex; flex-direction: column; gap: var(--s-3); }
.checks .status > .spinner { margin-top: var(--s-1); }
.notices:empty { display: none; }
.notice__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-3); }
.notice__step { color: var(--ink-3); font-size: var(--fs-small); }

/* colours of a model */
.colours { display: flex; flex-direction: column; }
.colour { display: grid; grid-template-columns: var(--chip) minmax(0, 1fr) auto var(--h-mini); align-items: center; column-gap: var(--s-3); padding: var(--s-2) 0; border-bottom: var(--hair) solid var(--line); }
.colour:last-child { border-bottom: 0; }
.colour__chip { width: var(--chip); height: var(--swatch); border-radius: var(--r-1); background: var(--c); box-shadow: inset 0 0 0 var(--hair) var(--line-strong); }
.colour__text { display: flex; flex-direction: column; min-width: 0; }
.colour__name { font-weight: 500; line-height: var(--lh-snug); overflow-wrap: anywhere; }
.colour__sub { color: var(--ink-3); font-size: var(--fs-small); line-height: var(--lh-snug); }
.colour__count { color: var(--ink-2); font-size: var(--fs-small); white-space: nowrap; text-align: right; }
.colour.is-off .colour__chip, .colour.is-off .colour__text, .colour.is-off .colour__count { opacity: var(--o-disabled); }

/* honeycombs of a blueprint: game name first, litres first */
.mats { display: flex; flex-direction: column; }
.mat { display: grid; grid-template-columns: var(--swatch) minmax(0, 1fr) auto; column-gap: var(--s-3); row-gap: var(--s-2); align-items: start; padding: var(--s-3) 0; border-bottom: var(--hair) solid var(--line); }
.mat__swatch { width: var(--swatch); height: var(--swatch); border-radius: var(--r-1); object-fit: cover; box-shadow: 0 0 0 var(--hair) var(--line-strong); background: var(--c); }
.mat__name { display: flex; flex-direction: column; min-width: 0; }
.mat__name b { font-weight: 500; line-height: var(--lh-snug); overflow-wrap: anywhere; }
.mat__name span { color: var(--ink-3); font: 400 var(--fs-label)/var(--lh-snug) var(--font-num); overflow-wrap: anywhere; }
.mat__nums { grid-column: 2 / -1; display: flex; flex-direction: column; }
.mat__litres { color: var(--ink); font: 500 var(--fs-control)/var(--lh-snug) var(--font-num); white-space: nowrap; }
.mat__sub { color: var(--ink-3); font: 400 var(--fs-label)/var(--lh-snug) var(--font-num); white-space: nowrap; }
.mat__share { grid-column: 2 / -1; display: flex; align-items: center; gap: var(--s-3); color: var(--ink-3); font: 400 var(--fs-label)/1 var(--font-num); }
.mat__share i { flex: 1; height: var(--h-bar-s); border-radius: var(--r-1); background: linear-gradient(to right, var(--ink-2) var(--p), var(--line-strong) var(--p)); }
.mat__from { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: var(--s-2); color: var(--ink-3); font-size: var(--fs-small); line-height: var(--lh-snug); }
.mat__from .chip__dot { display: inline-block; vertical-align: -2px; margin-right: var(--s-2); }
.mat.is-off .mat__swatch, .mat.is-off .mat__name, .mat.is-off .mat__nums, .mat.is-off .mat__share { opacity: var(--o-disabled); }
.mat__tools { display: flex; gap: var(--s-2); }
/* the honeycomb that is chosen to take the place of this one */
.mat__to { grid-column: 2 / -1; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border: var(--hair) solid var(--warm-line); border-radius: var(--r-1); background: var(--warm-wash); font-size: var(--fs-small); line-height: var(--lh-snug); }
.mat__to > .icon { flex: none; color: var(--warm); }
.mat__dot { flex: none; width: var(--chip); height: var(--chip); border-radius: var(--r-1); object-fit: cover; box-shadow: 0 0 0 var(--hair) var(--line-strong); background: var(--c); }
.mat__toname { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.mat__toname b { font-weight: 500; overflow-wrap: anywhere; }
.mat__toname span { color: var(--ink-3); font: 400 var(--fs-label)/var(--lh-snug) var(--font-num); overflow-wrap: anywhere; }
.mat.is-switched .mat__name b { text-decoration: line-through; text-decoration-color: var(--ink-3); }
.mats__total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s-3); padding: var(--s-3) 0 0 calc(var(--swatch) + var(--s-3)); }
.mats__total b { font-weight: 600; }

/* elements of a blueprint: one line for each kind, with what shows or hides it in the 3D view */
.elements { display: flex; flex-direction: column; max-height: var(--h-list-l); margin-inline: calc(var(--s-4) * -1); padding-inline: var(--s-4); overflow: auto; }
.ekind { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-3); min-height: calc(var(--h-mini) + var(--s-2) * 2 + var(--hair)); padding: var(--s-2) 0; border-bottom: var(--hair) solid var(--line); font-size: var(--fs-small); line-height: var(--lh-snug); }
/* a long name is cut with an ellipsis, and the whole of it is in the tooltip of the line */
.ekind__text { display: flex; align-items: baseline; gap: var(--s-3); min-width: 0; }
.ekind__text b { flex: 0 1 auto; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ekind__count { flex: none; color: var(--ink-3); white-space: nowrap; }
.ekind__none { color: var(--ink-3); font-size: var(--fs-label); white-space: nowrap; }
.ekind.is-off .ekind__text, .ekind.is-none .ekind__text { opacity: var(--o-disabled); }
.ekind[data-hl]:hover b { color: var(--warm-strong); }

/* a line of these lists (a colour of the model, a honeycomb, a kind of element) lights what it names in the 3D view
   while it is pointed at. The line shows it: a raised ground from one edge of the panel to the other, and a stripe
   at its left. The cursor is the arrow over the whole of a line, its words included: nothing is typed there. */
.colour, .mat, .ekind { cursor: default; }
.colour[data-hl], .mat[data-hl], .ekind[data-hl] { position: relative; isolation: isolate; }
.colour[data-hl]::before, .mat[data-hl]::before, .ekind[data-hl]::before {
  content: ""; position: absolute; z-index: -1; inset: 0 calc(var(--s-4) * -1); border-left: var(--stripe) solid transparent;
  pointer-events: none; transition: background var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.colour[data-hl]:hover::before, .mat[data-hl]:hover::before { background: var(--hull-raise-2); border-left-color: var(--cold); }
/* the elements are lit in the warm colour, and so is their line */
.ekind[data-hl]:hover::before { background: var(--hull-raise-2); border-left-color: var(--warm); }
.mat[data-hl]:hover .mat__swatch, .colour[data-hl]:hover .colour__chip { box-shadow: 0 0 0 var(--hair) var(--line-bright); }
.ebar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.ebar .btn { flex: none; }
/* the kinds of element a notice names */
.notice__kinds { display: flex; flex-direction: column; margin-top: var(--s-1); font-size: var(--fs-small); line-height: var(--lh-snug); }
.notice__kinds li { display: flex; justify-content: space-between; gap: var(--s-3); }
.notice__kinds li span:first-child { min-width: 0; overflow-wrap: anywhere; }
.notice__kinds li .num { flex: none; color: var(--ink-2); white-space: nowrap; }

/* the honeycombs chosen to be switched, in the Actions panel */
.swaps { display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-small); line-height: var(--lh-snug); }
.swaps li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s-3); }
.swaps li span { color: var(--ink-2); overflow-wrap: anywhere; }
.swaps li b { font-weight: 500; overflow-wrap: anywhere; }
.swaps li .icon { color: var(--warm); }

/* ------------------------------------------------------------------ conversion options */
.fitcard { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: var(--hair) solid var(--line-strong); border-radius: var(--r-2); background: var(--hull-sunk); }
.fitcard[data-state="over"], .fitcard[data-state="error"] { border-color: var(--hot-line); background: var(--hot-wash); }
.fitcard__nums { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.fitcard__nums > div { display: flex; flex-direction: column; gap: var(--s-1); }
.fitcard__main { color: var(--ink); font-size: var(--fs-control); white-space: nowrap; }
.meter { display: flex; flex-direction: column; gap: var(--s-2); }
.meter__track { position: relative; height: var(--h-bar); background: var(--line-strong); border-radius: var(--r-1); }
.meter__fill, .meter__over { position: absolute; top: 0; bottom: 0; border-radius: var(--r-1); }
.meter__fill { left: 0; width: var(--p, 0%); background: var(--cold); }
.meter__over { left: var(--limit, 100%); width: calc(100% - var(--limit, 100%)); background: var(--hot); }
.meter__limit { position: absolute; left: calc(var(--limit, 100%) - var(--hair)); top: calc(var(--s-2) * -1); bottom: calc(var(--s-2) * -1); width: var(--stripe); background: var(--ink); }
.meter__legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s-3); color: var(--ink-3); font-size: var(--fs-small); }
.meter__legend .num { color: var(--ink); }
.fitcard .status b { font-weight: 600; color: var(--ink); }
.fitcard[data-state="over"] .status, .fitcard[data-state="error"] .status { color: var(--ink); }

/* two plans of the model in the build zone, from above and from the front (drawn by js/ui/right.js) */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.plan { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.plan svg { width: 100%; aspect-ratio: 1; border: var(--hair) solid var(--line-strong); border-radius: var(--r-1); background: var(--hull); }
.plan svg * { vector-effect: non-scaling-stroke; }
.plan__grid { fill: none; stroke: var(--line-control); stroke-width: var(--hair); stroke-dasharray: var(--s-1) var(--s-2); }
.plan__pad { fill: var(--cold-wash); }
.plan__zone { fill: none; stroke: var(--cold); stroke-width: var(--hair); }
.plan__model { fill: var(--ink-2); }
.plan__model--out { fill: var(--hot); }
.plan__model--box { opacity: var(--o-muted); }
.plan__bounds { fill: none; stroke: var(--ink-3); stroke-width: var(--hair); stroke-dasharray: var(--s-2) var(--s-2); }
/* the core unit: a cross with a dark edge, because it lies on the model */
.plan__core { fill: none; stroke: var(--warm); stroke-width: var(--stripe); }
.plan__core--under { stroke: var(--hull); stroke-width: calc(var(--stripe) * 3); }
.fitcard .textlink { align-self: flex-start; }
.plan figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-3); color: var(--ink-3); font-size: var(--fs-small); line-height: var(--lh-snug); }
.plan figcaption b { color: var(--ink-2); font: 600 var(--fs-label)/var(--lh-snug) var(--font-label); letter-spacing: var(--track-caps); text-transform: uppercase; }
.plan figcaption .num { color: var(--ink); white-space: nowrap; }
.plan figcaption small { font-size: var(--fs-label); white-space: nowrap; }
.turns { display: flex; gap: var(--s-2); }
/* three numbers side by side, each with the letter of its axis (the place of the core unit) */
.xyz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.xyz__field { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.xyz__field > span { color: var(--ink-3); font: 600 var(--fs-small)/1 var(--font-num); }
.xyz__field .input { min-width: 0; width: 100%; text-align: right; }
#core-move[aria-pressed="true"] { border-color: var(--warm-line); background: var(--warm-wash); color: var(--warm-strong); }
.launch { display: flex; align-items: center; gap: var(--s-4); }
.launch .btn { flex: 1; }
.launch__note { color: var(--ink-3); font-size: var(--fs-small); line-height: var(--lh-snug); }
.launch__note:empty { display: none; }
.lockline { display: flex; align-items: flex-start; gap: var(--s-3); min-width: 0; color: var(--ink-3); font-size: var(--fs-small); line-height: var(--lh-snug); }
.lockline .icon { margin-top: var(--s-1); }

/* the button that shows the chosen honeycomb and opens the picker */
.pickbtn { display: grid; grid-template-columns: var(--swatch-l) minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); width: 100%; padding: var(--s-3); border: var(--hair) solid var(--line-control); border-radius: var(--r-2); background: var(--hull-sunk); text-align: left; transition: background var(--t-1) var(--ease), border-color var(--t-1) var(--ease); }
.pickbtn:hover { border-color: var(--line-bright); background: var(--hull-raise); }
.pickbtn img, .pickbtn .pickbtn__none { width: var(--swatch-l); height: var(--swatch-l); border-radius: var(--r-1); object-fit: cover; background: var(--c, var(--hull-raise-2)); box-shadow: 0 0 0 var(--hair) var(--line-strong); }
.pickbtn b { display: block; font-weight: 600; line-height: var(--lh-snug); overflow-wrap: anywhere; }
.pickbtn small { display: block; color: var(--ink-3); font: 400 var(--fs-label)/var(--lh-snug) var(--font-num); overflow-wrap: anywhere; }
.pickbtn > .icon { color: var(--ink-3); }

/* ------------------------------------------------------------------ result */
.figures { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: var(--s-3) var(--s-4); }
.figures > div { display: flex; flex-direction: column; gap: var(--s-1); }
.figures dt { color: var(--ink-3); font: 500 var(--fs-small)/var(--lh-tight) var(--font-ui); }
.figures dd { font: 400 var(--fs-lead)/var(--lh-tight) var(--font-num); white-space: nowrap; }
.downloads { display: flex; flex-direction: column; gap: var(--s-3); }
.timebar { display: flex; gap: var(--hair); height: var(--h-switch); }
.timebar span { display: grid; place-items: center; flex: var(--w) 1 0; min-width: var(--stripe); overflow: hidden; background: var(--line-strong); color: var(--ink-2); font: 400 var(--fs-label)/1 var(--font-num); white-space: nowrap; }
.timebar span:first-child { border-radius: var(--r-1) 0 0 var(--r-1); }
.timebar span:last-child { border-radius: 0 var(--r-1) var(--r-1) 0; }
.timebar .is-long { background: var(--cold); color: var(--ink-inverse); font-weight: 700; }
.filetree { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3) var(--s-4); border: var(--hair) solid var(--line-strong); border-radius: var(--r-2); background: var(--hull-sunk); font: 400 var(--fs-small)/var(--lh-snug) var(--font-num); }
.filetree li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s-4); overflow-wrap: anywhere; }
.filetree li span { color: var(--ink-3); white-space: nowrap; }

/* ------------------------------------------------------------------ level of detail: cells of each level, and the choice of the level shown */
.lod .seg--cap .seg__face { min-width: 4.25rem; }
.lod .seg--cap small + small { color: var(--ink-3); }
.lod.is-busy .seg { opacity: var(--o-soft); }

/* ------------------------------------------------------------------ honeycomb picker */
.picker { width: min(34rem, calc(100vw - var(--gutter) * 2)); max-height: min(34rem, calc(100vh - var(--gutter) * 2)); }
.picker__search { flex: none; padding: var(--s-3) var(--s-4); border-bottom: var(--hair) solid var(--line); }
.picker__search .search { display: flex; }
.picker__list { position: relative; flex: 1 1 auto; min-height: 12rem; height: 24rem; overflow: auto; }
.picker__space { position: relative; }
.picker__item { position: absolute; left: 0; display: grid; grid-template-columns: var(--swatch-l) minmax(0, 1fr); align-items: center; gap: var(--s-3); width: 50%; height: var(--pick-h, 60px); padding: 0 var(--s-3) 0 var(--s-4); border-left: var(--stripe) solid transparent; cursor: pointer; }
.picker__item:nth-child(even) { }
.picker__item img, .picker__item .picker__chip { width: var(--swatch-l); height: var(--swatch-l); border-radius: var(--r-1); object-fit: cover; background: var(--c); box-shadow: 0 0 0 var(--hair) var(--line-strong); }
.picker__item b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 500; font-size: var(--fs-control); line-height: var(--lh-tight); }
.picker__item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font: 400 var(--fs-label)/var(--lh-snug) var(--font-num); }
.picker__item:hover { background: var(--hull-raise); }
.picker__item.is-active { background: var(--hull-raise-2); border-left-color: var(--ink); }
.picker__item[aria-selected="true"] { background: var(--cold-wash); border-left-color: var(--cold); }
.picker__item[aria-selected="true"] b { color: var(--cold-strong); }
.picker__empty { padding: var(--s-6) var(--s-5); color: var(--ink-3); text-align: center; }

/* ------------------------------------------------------------------ help */
.help { top: calc(var(--gutter) + var(--h-top) + var(--s-3)); right: var(--gutter); width: min(40rem, calc(100vw - var(--gutter) * 2)); max-height: min(42rem, calc(100vh - var(--gutter) * 3 - var(--h-top))); }
.help .popover__body { display: flex; flex-direction: column; gap: var(--s-5); }
.help h4 { margin-bottom: var(--s-2); font: 600 var(--fs-body)/var(--lh-tight) var(--font-ui); }
.help p, .help li { color: var(--ink-2); font-size: var(--fs-control); line-height: var(--lh-body); }
.help ol { display: flex; flex-direction: column; gap: var(--s-1); padding-left: var(--s-5); list-style: decimal; }
.help .keys { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); font-size: var(--fs-control); color: var(--ink-2); }
.help .keys dt { white-space: nowrap; }
.help .keys + p, .help .tablewrap + p, .help ol + p { margin-top: var(--s-3); }

/* ------------------------------------------------------------------ small pieces */
.brand { border: 0; background: transparent; cursor: pointer; }
.files .chip { max-width: 22rem; }
.files .chip__text { overflow: hidden; text-overflow: ellipsis; }
.link .btn { margin-left: var(--s-2); }
.dragveil__box span { font-size: var(--fs-control); }
.toast { bottom: calc(var(--gutter) * 2 + var(--h-log-head) + var(--h-top) + var(--s-5)); pointer-events: auto; }
.seq__kicker .spinner { margin-right: var(--s-1); }
.seq.is-waiting .seq__kicker { color: var(--warm); }
.tools .seg__face { padding: 0 var(--s-3); }
kbd { font-family: var(--font-num); }

/* ------------------------------------------------------------------ narrow and short windows */
@media (max-width: 1279px) {
  .start { width: min(100%, 23rem); padding: var(--s-5); }
  .lod .viewmode__note { display: none; }
  .lod .seg--cap .seg__face { min-width: 3.4rem; }
  .files .chip { max-width: 12rem; }
}
@media (max-width: 1099px) {
  .lod > .label, .viewmode > .label { display: none; }
}
@media (max-height: 760px) {
  .start .start__hint, .start .dropzone__icon { display: none; }
  .start { gap: var(--s-3); }
}