/* Gusta Home. Dark is the default; light follows data-theme="light" (theme.js).
   --gusta and --warn come from vendor/shared/gusta-tokens.css, linked first
   and never redefined here. The accent is blueprint blue: your tools,
   selection and the one primary. Where a size came from is drawn by line
   style and words, never by colour alone.

   The look: the plan is the whole screen, and the chrome floats over it as
   frosted glass. Every control is built from the same few tokens (one
   height per pointer, one radius, one spacing and type scale), so nothing
   sits half a pixel off its neighbour. The glass is tinted enough that text
   on it keeps 4.5:1 in both themes whatever the plan shows through. On a
   phone the panels stack below the plan instead (nothing may cover it). */

:root {
  color-scheme: dark;
  --bg: #0b1016;
  --paper: #0d131a;
  --surface: #151c24;
  --surface2: #1d2631;
  --surface3: #26313e;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #e8edf3;
  --text-dim: #a2afbd;
  --accent: #7eaeff;
  --accent-dim: #6396f0;
  --accent-bg: rgba(126, 174, 255, 0.15);
  --accent-ring: rgba(126, 174, 255, 0.45);
  --on-accent: #07142b;
  --danger: #ff8f86;
  --danger-bg: rgba(255, 143, 134, 0.12);
  --ok: #6fd98f;
  --wall: #cdd6e0;
  --wall-bg: #3a4655;
  --grid: rgba(126, 174, 255, 0.055);
  --grid-major: rgba(126, 174, 255, 0.10);
  --room-0: #29231d;
  --room-1: #1b2735;
  --room-2: #1e2821;
  /* Glass: a tint that holds contrast, a blur, a hairline and a soft lift. */
  --glass: rgba(18, 24, 32, 0.78);
  --glass-strong: rgba(18, 24, 32, 0.9);
  --scrim: rgba(4, 8, 12, 0.55);
  --glass-edge: rgba(255, 255, 255, 0.10);
  --glass-hi: rgba(255, 255, 255, 0.06);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
  --blur: saturate(1.5) blur(18px);
  /* One scale for everything. */
  --h: 34px;            /* every control's height with a mouse */
  --h-tool: 52px;
  --r: 10px;            /* controls */
  --r-panel: 16px;      /* panels */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --t-xs: 11px; --t-sm: 12.5px; --t-md: 14px; --t-lg: 16px;
  --font: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Where the floating chrome sits over the plan (desktop). */
  --inset-t: 76px; --inset-l: 88px; --inset-r: 372px; --inset-b: 60px;
  /* Where the plan's free area ends on the right: the dock, or the 3D beside the plan. */
  --plan-r: var(--inset-r);
}

/* The garden's colours are specimens of what they show, in both themes. */
:root { --light-on: #f3c76b; --light-on-edge: #b0802a; --g-lawn: #2c3d25; --g-terrace: #4a3d2c; --g-path: #3a3833; --g-bed: #4a3828; --g-water: #233b4a; --g-plant: #6f9a57; --g-line: #9fc386; --g-wood: #a08262; }

:root[data-theme='light'] {
  --light-on: #ffd98a; --light-on-edge: #a5701b;
  --g-lawn: #d6e7c2; --g-terrace: #e9d9bd; --g-path: #e8e4dc; --g-bed: #c7ab88; --g-water: #c4dfee; --g-plant: #8fb877; --g-line: #3d6b2f; --g-wood: #6b5236;
  color-scheme: light;
  --bg: #eef1f5;
  --paper: #f3f5f8;
  --surface: #ffffff;
  --surface2: #edf1f5;
  --surface3: #e2e8ef;
  --border: rgba(16, 28, 45, 0.10);
  --border-strong: rgba(16, 28, 45, 0.18);
  --text: #121b26;
  --text-dim: #4a5664;
  --accent: #1d5bc2;
  --accent-dim: #174a9f;
  --accent-bg: rgba(29, 91, 194, 0.10);
  --accent-ring: rgba(29, 91, 194, 0.35);
  --on-accent: #ffffff;
  --danger: #b3261e;
  --danger-bg: rgba(179, 38, 30, 0.08);
  --ok: #1d7a3a;
  --wall: #26313d;
  --wall-bg: #c6ced8;
  --grid: rgba(29, 91, 194, 0.06);
  --grid-major: rgba(29, 91, 194, 0.11);
  --room-0: #f4efe8;
  --room-1: #e8eef6;
  --room-2: #ecf1e9;
  --glass: rgba(255, 255, 255, 0.80);
  --glass-strong: rgba(255, 255, 255, 0.92);
  --scrim: rgba(20, 30, 45, 0.32);
  --glass-edge: rgba(16, 28, 45, 0.10);
  --glass-hi: rgba(255, 255, 255, 0.7);
  --shadow: 0 10px 30px rgba(20, 35, 60, 0.12), 0 2px 6px rgba(20, 35, 60, 0.08);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  touch-action: manipulation;   /* no double-tap zoom: a page zoomed by the browser cuts the editor off */
  margin: 0; background: var(--bg); color: var(--text);
  font: var(--t-md)/1.45 var(--font); -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
button, input, select { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: var(--t-sm); color: var(--text-dim); line-height: 1.4; }
a { color: var(--accent); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- glass ---------- */
.glass, .hdr, .rail, .dock, .optbar, .lenbar, .foot, .menu, .hint, .zoom, .concept-bar, .levels {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi);
}

/* ---------- controls: one height, one radius ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: var(--h); min-width: var(--h); padding: 0 var(--s3); border-radius: var(--r);
  border: 1px solid var(--border); background: var(--surface2); color: var(--text);
  font-size: var(--t-md); font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background 120ms, border-color 120ms, box-shadow 120ms;
}
.btn:hover { background: var(--surface3); border-color: var(--border-strong); }
.btn:active { transform: translateY(0.5px); }
.btn.icon { width: var(--h); padding: 0; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn[aria-disabled='true'], .btn:disabled { opacity: 0.42; cursor: default; }
.btn.primary { background: var(--accent); border-color: transparent; color: var(--on-accent); font-weight: 600; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 4px 14px var(--accent-bg); }
.btn.primary:hover { background: var(--accent-dim); }
.btn.quiet { background: transparent; }
.btn.quiet:hover { background: var(--surface2); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: var(--danger-bg); border-color: var(--danger); }

.seg { display: inline-flex; height: var(--h); padding: 2px; gap: 2px; border-radius: var(--r); background: var(--surface2); border: 1px solid var(--border); }
.seg button {
  height: calc(var(--h) - 6px); padding: 0 var(--s3); border: 0; border-radius: calc(var(--r) - 3px);
  background: transparent; color: var(--text-dim); font-size: var(--t-sm); font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap;
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed='true'] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 0 0 1px var(--accent-ring); }
:root[data-theme='light'] .seg button[aria-pressed='true'] { box-shadow: 0 1px 3px rgba(20, 35, 60, 0.12), inset 0 0 0 1px var(--accent-ring); }
.seg button[aria-disabled='true'] { opacity: 0.4; cursor: default; }

input[type='text'], input:not([type]), select, .m-field, .name-field {
  height: var(--h); border-radius: var(--r); border: 1px solid var(--border); background: var(--surface);
  color: var(--text); padding: 0 var(--s3); font-size: var(--t-md);
}
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
select { padding-right: var(--s5); }
input[type='range'] { accent-color: var(--accent); }
input[type='checkbox'] { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }

/* ---------- header ---------- */
.hdr { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s3); height: 56px; z-index: 30; }
.brand { display: flex; align-items: center; gap: var(--s2); color: var(--text); text-decoration: none; font-weight: 700; font-size: var(--t-lg); letter-spacing: -0.01em; margin-right: var(--s2); }
.brand i { font-style: normal; color: var(--accent); }
.mark { width: 28px; height: 28px; display: block; }
.spacer { flex: 1; }
.switcher select { min-width: 150px; max-width: 46vw; }
.lbl-short { display: none; }

/* ---------- tools ---------- */
.rail { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s2); z-index: 20; }
.tool {
  display: grid; place-items: center; align-content: center; gap: 3px; width: 60px; height: var(--h-tool); flex: none;
  border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--text-dim);
  font-size: var(--t-xs); font-weight: 500; line-height: 1; cursor: pointer; transition: background 120ms, color 120ms;
}
.tool svg { width: 20px; height: 20px; }
.tool:hover { color: var(--text); background: var(--surface2); }
.tool[aria-pressed='true'] { color: var(--accent); background: var(--accent-bg); border-color: var(--accent-ring); }

.optbar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s2) var(--s3); min-height: 50px; color: var(--text-dim); font-size: var(--t-sm); z-index: 20; }
.optbar b { color: var(--text); font-size: var(--t-md); font-weight: 600; }
.optnote { max-width: 62ch; }

/* ---------- the stage ---------- */
.stage {
  touch-action: none;   /* a pinch anywhere over the plan is the plan's, never the page's */
  position: relative; overflow: hidden;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}
#stage-svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; cursor: default; }
#stage-svg[data-tool='wall'], #stage-svg[data-tool='measure'] { cursor: crosshair; }
#stage-svg[data-trace='scale'] { cursor: crosshair; }
#stage-svg[data-trace='move'] { cursor: move; }
#stage-svg:focus { outline: none; }
:root[data-kbd] #stage-svg:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hint {
  position: absolute; z-index: 5; margin: 0; padding: 7px 14px; border-radius: 999px;
  color: var(--text); font-size: var(--t-sm); text-align: center; pointer-events: none; max-width: min(640px, calc(100% - 24px));
}
.hint:empty { display: none; }
.zoom { position: absolute; z-index: 5; display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: 14px; }
.zoom .btn { border: 0; background: transparent; width: var(--h); padding: 0; font-size: 18px; font-weight: 500; }
.zoom .btn:hover { background: var(--surface2); }
.zoom #zoom-fit { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.02em; }
.concept-bar { position: absolute; z-index: 5; padding: var(--s2) var(--s3); border-radius: 14px; display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; font-size: var(--t-sm); }
.concept-bar .warn { color: var(--warn); }

/* The floor tabs, floating over the plan. */
.levels { position: absolute; z-index: 5; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 14px; }
.levels button { height: calc(var(--h) - 2px); padding: 0 var(--s3); border: 0; border-radius: 10px; background: transparent; color: var(--text-dim); font-size: var(--t-sm); font-weight: 500; cursor: pointer; white-space: nowrap; }
.levels button:hover { color: var(--text); background: var(--surface2); }
.levels button[aria-pressed='true'] { color: var(--text); font-weight: 600; background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent-ring); }
.levels .add { width: calc(var(--h) - 2px); padding: 0; font-size: 18px; }
.levels .sep { width: 1px; align-self: stretch; margin: 6px 4px; background: var(--border-strong); }
/* ---------- the navigator: views, the floor stepper, the walls and the roof ---------- */
.levels { gap: 6px; padding: 5px; border-radius: 16px; }
.levels .nav-group { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 12px; background: var(--surface2); }
.levels .nav-btn { display: inline-grid; place-items: center; width: calc(var(--h) - 4px); height: calc(var(--h) - 4px); padding: 0; border-radius: 10px; color: var(--text-dim); }
.levels .nav-btn svg { width: 19px; height: 19px; }
.levels .nav-btn[aria-pressed='true'] { color: var(--accent); background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent-ring); }
.levels .nav-btn[aria-disabled='true'] { opacity: 0.35; }
.levels .nav-floor { display: inline-flex; align-items: center; gap: 8px; height: calc(var(--h) - 4px); padding: 0 10px; border-radius: 10px; color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); }
.levels .nav-floor-num { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 7px; background: var(--accent); color: var(--on-accent); font: 700 var(--t-sm)/1 var(--font); font-variant-numeric: tabular-nums; }
.levels .nav-floor-name { max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.nav-side { display: none; }
.floor-list { display: grid; gap: 1px; max-height: min(52svh, 420px); overflow-y: auto; overscroll-behavior: contain; }
.floor-list [role='menuitemradio'] { gap: var(--s3); }
.floor-list-num { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 6px; border-radius: 7px; background: var(--surface2); color: var(--text); font: 700 var(--t-sm)/1 var(--font); font-variant-numeric: tabular-nums; }
.floor-list [aria-checked='true'] .floor-list-num { background: var(--accent); color: var(--on-accent); }
.floor-pop { min-width: 210px; }
.menu .menu-head { margin: 6px var(--s3) 2px; font-size: var(--t-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.menu .menu-sep { height: 1px; margin: 4px 6px; background: var(--border); }
.menu [role='menuitemradio'][aria-checked='true'] { color: var(--accent); font-weight: 600; }
.menu [role='menuitemradio'][aria-checked='true']::after { content: '✓'; margin-left: auto; padding-left: var(--s3); }
.view3d-paper { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: multiply; opacity: 0.18; background-size: 256px 256px; }
body[data-view='plan'] .view3d-paper { display: none; }
.v3host { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
/* The panel's own bar, top left inside the 3D: what shows, and the way to the 3D alone. */
.v3bar { position: absolute; z-index: 3; top: var(--s2); left: var(--s2); right: var(--s2); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; pointer-events: none; }
.v3bar > * { pointer-events: auto; }
.v3bar .seg, .v3bar .btn { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-color: var(--glass-edge); box-shadow: var(--shadow); }
.v3bar #v3-full { margin-left: auto; }
.view3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; z-index: 1; }
body[data-view='3d'] #stage-svg, body[data-view='3d'] .zoom, body[data-view='3d'] .concept-bar { display: none; }
.slider { display: inline-flex; align-items: center; gap: var(--s2); height: var(--h); }
.slider input { width: 150px; }
.light-words { font-family: var(--mono); font-size: var(--t-sm); color: var(--text); min-width: 23ch; }

/* Bars under the plan: the length, a reading, the photo. */
.lenbar { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; padding: var(--s2) var(--s3); z-index: 20; }
.lenbar label, .lenbar b { font-weight: 600; font-size: var(--t-md); }
.lenbar input:not([type='range']) { width: 8.5em; font-family: var(--mono); font-size: 15px; border: 1.5px solid var(--accent); }
.lenbar .small { min-width: 0; }
#trace-opacity { width: 120px; }

/* ---------- menus ---------- */
.menu { position: fixed; z-index: 40; min-width: 240px; padding: 6px; border-radius: 14px; display: grid; gap: 1px; background: var(--glass-strong); }
.menu a { text-decoration: none; }
.menu button, .menu a { display: flex; align-items: center; height: var(--h); text-align: left; border: 0; background: transparent; color: var(--text); font-size: var(--t-md); padding: 0 var(--s3); border-radius: 8px; cursor: pointer; }
.menu a:hover, .menu a:focus-visible, .menu button:hover, .menu button:focus-visible { background: var(--accent-bg); outline: none; }
.menu .phone-only { display: none; }

/* ---------- the dock ---------- */
.dock { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2); overflow-y: auto; z-index: 20; }
.dock-handle { display: none; }   /* the sheet's handle: on a phone only */
.card { padding: var(--s3) var(--s3) var(--s4); display: grid; gap: var(--s3); border-radius: 12px; }
.card + .card { border-top: 1px solid var(--border); border-radius: 0 0 12px 12px; }
.card h2 { margin: 0; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.card p { margin: 0; }
.check, .caution, .export { border: 1px solid var(--border); background: var(--surface2); border-radius: 12px !important; }
/* No coloured outline round a card (Daniel: it reads as a highlight box).
   The icon and the coloured title say what kind of card it is; the fill is
   only a breath of that colour over the surface. */
.check { background: color-mix(in srgb, var(--gusta) 7%, var(--surface2)); }
.check h2, .caution h2 { color: var(--gusta); text-transform: none; letter-spacing: 0; font-size: var(--t-md); display: flex; gap: var(--s2); align-items: center; }
.caution { background: color-mix(in srgb, var(--warn) 6%, var(--surface2)); }
.caution h2 { color: var(--warn); }
/* A card's buttons stack at one width: two buttons of different lengths side by side read as a mistake. */
.check .row, .caution .row { display: grid; gap: var(--s2); }
.check .row .btn, .caution .row .btn { width: 100%; }
.warn-icon { width: 16px; height: 16px; flex: none; }
.warn-line { color: var(--warn); }
.light-box { display: grid; gap: var(--s2); }
.light-box .seg { justify-self: start; }
.light-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 4.5rem; gap: var(--s3); align-items: center; min-height: var(--h); }
.light-row input { width: 100%; margin: 0; }
.light-row > .small { font-size: var(--t-sm); }
.light-box .light-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); }
.light-box .light-presets button { padding: 0 var(--s2); }
.sizes-note { margin: 0; }
.light-read { font-family: var(--mono); font-size: var(--t-sm); text-align: right; }
.light-row.warmth input { accent-color: var(--light-on-edge); }
.room-block { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--border); }
.room-block h3 { margin: 0; font-size: var(--t-md); font-weight: 600; }
.room-block p { margin: 0; }
.movein { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--border); }
.movein h3 { margin: 0; font-size: var(--t-md); font-weight: 600; }
.movein .btn { justify-self: start; }
.movein-ok { color: var(--ok); margin: 0; }
.receipt { margin: 0; padding: var(--s2) var(--s3); border-radius: var(--r); background: var(--accent-bg); font-size: var(--t-sm); line-height: 1.5; }

/* The compass on the plan, and the place picker. */
.compass { position: absolute; z-index: 5; width: 56px; height: 56px; padding: 6px; border-radius: 50%; cursor: grab; touch-action: none;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-edge); box-shadow: var(--shadow); }
.compass svg { width: 100%; height: 100%; display: block; overflow: visible; }
.compass-ring { fill: none; stroke: var(--border-strong); stroke-width: 1.2; }
.compass-n { fill: var(--accent); }
.compass-s { fill: var(--text-dim); opacity: 0.5; }
.compass-letter { font: 700 6px var(--font); fill: var(--text); text-anchor: middle; }
body[data-view='3d'] .compass { display: none; }
.place-results { display: grid; gap: 2px; }
.place-results:empty { display: none; }
.place-result { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); height: var(--h); padding: 0 var(--s3);
  border: 0; border-radius: var(--r); background: var(--surface2); color: var(--text); text-align: left; cursor: pointer; }
.place-result:hover, .place-result:focus-visible { background: var(--accent-bg); }
.place-map { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r); display: block; touch-action: none; cursor: crosshair; border: 1px solid var(--border); }
.place-sea { fill: var(--g-water); }
.place-land { fill: var(--g-lawn); stroke: var(--g-line); stroke-linejoin: round; }
.place-grid { fill: none; stroke: var(--border-strong); }
.place-pin circle:first-child { fill: none; stroke: var(--accent); }
.place-pin circle:last-child { fill: var(--accent); }
.place-where { margin: 0; font-family: var(--mono); font-size: var(--t-sm); }

.gp-groups { display: grid; gap: var(--s3); }
.gp-group { display: grid; gap: var(--s1); }
.gp-name { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }

/* The finishes: a swatch that looks like the material, then its name and size. */
.pal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.pal-tile { display: grid; grid-template-rows: 44px auto auto; gap: 2px; padding: var(--s2); border-radius: var(--r);
  border: 1px solid var(--border); background: var(--surface2); color: var(--text); text-align: left; cursor: pointer; }
.pal-tile:hover { border-color: var(--border-strong); background: var(--surface3); }
.pal-tile[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-bg); }
.pal-swatch { display: block; width: 100%; height: 100%; min-height: 20px; border-radius: 6px; background-color: var(--swatch, #ccc); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.pal-wallpaper { background-image: repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 255, 255, 0.28) 7px 9px); }
.pal-tiles { background-image: linear-gradient(rgba(0, 0, 0, 0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.18) 1px, transparent 1px); background-size: 11px 11px; }
.pal-floor { background-image: repeating-linear-gradient(0deg, transparent 0 8px, rgba(0, 0, 0, 0.16) 8px 9px); }
.pal-paving { background-image: linear-gradient(rgba(0, 0, 0, 0.22) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.22) 1px, transparent 1px); background-size: 14px 9px; }
.pal-gravel { background-image: radial-gradient(rgba(0, 0, 0, 0.2) 1px, transparent 1.5px); background-size: 5px 5px; }
.pal-clear { background: repeating-linear-gradient(135deg, var(--surface) 0 6px, var(--surface3) 6px 12px); }
.qty-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.qty { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--s3); row-gap: 2px; align-items: start; }
.qty .pal-swatch { grid-row: span 2; width: 28px; height: 28px; }
.qty-head { display: flex; justify-content: space-between; gap: var(--s2); align-items: baseline; }
.qty-name { font-weight: 600; }
.qty-area { font-family: var(--mono); font-size: var(--t-sm); color: var(--text-dim); }
.qty-buy { display: grid; gap: 1px; }
.qty-row { display: flex; justify-content: space-between; gap: var(--s2); align-items: baseline; }
.qty-n { font-family: var(--mono); }
.qty-row .small { text-align: right; }
.qty-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.qty-prices { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s2); }
.qty-price { display: grid; gap: 2px; }
.qty-price .m-field { width: 100%; }
.qty-sub { grid-column: 2; margin: 2px 0 0; }
.qty-total { display: grid; gap: 4px; padding-top: var(--s3); border-top: 1px solid var(--border); }
.qty-total-row { font-weight: 700; }
.overlay .paint-hover { fill: var(--accent-bg); stroke: var(--accent); stroke-linejoin: round; }
.overlay .paint-hover.clear { fill: none; stroke: var(--danger); stroke-dasharray: 4 3; }
#stage-svg[data-tool='paint'] { cursor: cell; }

/* The catalogue: the rooms as chips, the pieces as tiles with their top view and size. */
.cat-tabs { display: flex; flex-wrap: wrap; gap: var(--s1); }
.cat-tabs button {
  height: calc(var(--h) - 6px); padding: 0 var(--s3); border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--text-dim); font-size: var(--t-sm); font-weight: 500; cursor: pointer;
}
.cat-tabs button:hover { color: var(--text); background: var(--surface2); }
.cat-tabs button[aria-pressed='true'] { color: var(--text); background: var(--surface); border-color: var(--accent-ring); font-weight: 600; }
.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.cat-tile {
  display: grid; grid-template-rows: 64px auto auto; gap: 2px; padding: var(--s2); border-radius: var(--r);
  border: 1px solid var(--border); background: var(--surface2); color: var(--text); text-align: left; cursor: pointer;
}
.cat-tile:hover { border-color: var(--border-strong); background: var(--surface3); }
.cat-tile[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-bg); }
.cat-tile svg { width: 100%; height: 64px; }
.cat-tile .piece-body { fill: var(--surface); stroke: var(--text-dim); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.cat-tile .piece-line { fill: none; stroke: var(--text-dim); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.cat-tile[aria-pressed='true'] .piece-body, .cat-tile[aria-pressed='true'] .piece-line { stroke: var(--accent); }
.cat-name { font-size: var(--t-sm); font-weight: 600; line-height: 1.25; }
.cat-size { font-size: var(--t-xs); color: var(--text-dim); font-family: var(--mono); }
#stage-svg[data-tool='furnish'] { cursor: copy; }

/* Label | field, on one grid in every card: the same left edge for every control, the same right edge. */
.field-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 4px var(--s3); align-items: center; }
.field-row > label { color: var(--text-dim); font-size: var(--t-sm); }
.field-row > .m-field { width: 100%; }
.field-row > .small, .field-row .m-read { grid-column: 2; margin-top: -2px; }
.field-row > .small:empty { display: none; }
.name-field { width: 100%; }
.kv { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s2) var(--s3); margin: 0; align-items: baseline; }
.kv dt { color: var(--text-dim); font-size: var(--t-sm); }
.kv dd { margin: 0; font-family: var(--mono); font-size: var(--t-md); }
.check-row { display: flex; gap: var(--s2); align-items: center; font-size: var(--t-sm); min-height: var(--h); }
.inspector-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
/* the buttons in a row share it evenly: never one wide and one narrow side by side */
.inspector-actions > button { flex: 1 1 0; white-space: nowrap; }
.ex-opts { display: grid; gap: var(--s2); }
.ex-row { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--s3); align-items: center; }
.ex-row > .small { margin: 0; }
.ex-row .seg { justify-self: start; }
.ex-actions { display: flex; gap: var(--s2); }
.ex-actions #ex-close { margin-left: auto; }
#ex-format { display: flex; width: 100%; }
#ex-format button { flex: 1; }

/* The measurement list: a settings list. The name, with where the size came from as a quiet line
   under it, and the size on the right across both; every row aligned with the card's own text. */
.measures, .worked { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.measure {
  display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; grid-template-areas: 'name value' 'source value' 'read read';
  column-gap: var(--s3); row-gap: 0; align-items: center;
  padding: var(--s2); margin-inline: calc(-1 * var(--s2)); border-radius: var(--r);
}
.measure:hover { background: var(--surface2); }
.measure.selected { background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent-ring); }
.measure .m-name { grid-area: name; font-size: var(--t-md); line-height: 1.3; align-self: end; }
.measure .m-right { display: contents; }
.measure .m-field { grid-area: value; width: 100%; }
.measure .m-read { grid-area: read; margin-top: 2px; }
.measure.off .m-name::after { content: ' (does not fit)'; color: var(--gusta); }
/* Where it came from: in the list, a select without a box, read as a line of text with a chevron. */
.m-source { height: var(--h); font-size: var(--t-sm); color: var(--text-dim); background: var(--surface2); }
.measure .m-source {
  grid-area: source; justify-self: start; align-self: start; width: auto;
  -webkit-appearance: none; appearance: none; height: 24px; padding: 0 18px 0 0; border: 0; border-radius: 4px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a2afbd' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 4px center / 9px 6px;
  color: var(--text-dim); font-size: var(--t-sm); cursor: pointer;
}
.measure .m-source:hover { color: var(--text); }
.measure .m-source:focus { box-shadow: 0 0 0 2px var(--accent-ring); border-color: transparent; }
.m-field { font-family: var(--mono); text-align: right; }
.m-field.assumed { color: var(--warn); }
.m-read { font-size: var(--t-sm); color: var(--text-dim); }
.m-read:empty { display: none; }
.m-read.bad { color: var(--danger); }
.worked li { display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--t-sm); }
.worked b { font-family: var(--mono); color: var(--warn); font-weight: 500; }

/* ---------- footer ---------- */
.foot { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s3); height: 36px; z-index: 20; font-size: var(--t-sm); }
.status { margin: 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foot .small { white-space: nowrap; }
.noscript { padding: 20px; }
.light-toggle, .dock-top .dock-status, .dock-report { display: none; }
.dock-top { display: contents; }
.foot-link { position: relative; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: var(--t-sm); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.foot-link .fb-dot { position: absolute; top: -2px; right: -8px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* ---------- feedback: a window on a desktop, a sheet from the bottom on a phone ---------- */
.fb-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--s4); background: var(--scrim); }
.fb-backdrop[hidden] { display: none; }
.fb-modal { width: min(460px, 100%); max-height: min(720px, calc(100svh - 32px)); overflow: auto; overscroll-behavior: contain;
  padding: var(--s4) var(--s5) var(--s5); border-radius: var(--r-panel); background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi); outline: none; }
.fb-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.fb-head h2 { margin: 0; font-size: var(--t-lg); font-weight: 650; }
.fb-close { margin-left: auto; }
.fb-tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r); background: var(--surface2); border: 1px solid var(--border); }
.fb-tab { height: calc(var(--h) - 6px); padding: 0 var(--s3); border: 0; border-radius: 8px; background: none; color: var(--text-dim); font: inherit; font-size: var(--t-sm); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.fb-tab[aria-selected='true'] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.fb-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-size: var(--t-xs); font-weight: 700; display: inline-grid; place-items: center; }
.fb-view { display: grid; gap: var(--s3); }
.fb-view[hidden] { display: none; }
.fb-lede, .fb-thanks, .fb-closed { margin: 0; color: var(--text-dim); font-size: var(--t-md); line-height: 1.45; }
.fb-thanks { color: var(--text); }
.fb-kinds { display: flex; flex-wrap: wrap; gap: var(--s2); }
.fb-kind { height: var(--h); padding: 0 var(--s3); border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface2); color: var(--text); font: inherit; font-size: var(--t-sm); cursor: pointer; }
.fb-kind[aria-checked='true'] { background: var(--accent-bg); border-color: var(--accent); font-weight: 600; }
.fb-kind.gusta[aria-checked='true'] { background: color-mix(in srgb, var(--gusta) 16%, transparent); border-color: var(--gusta); }
.fb-text { width: 100%; box-sizing: border-box; min-height: 96px; resize: vertical; padding: var(--s2) var(--s3); border-radius: var(--r); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-md); line-height: 1.45; }
.fb-text:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.fb-label { display: block; font-size: var(--t-sm); color: var(--text-dim); margin-bottom: 6px; }
.fb-label i { font-style: normal; opacity: 0.75; }
.fb-stars { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s2); }
.fb-star { height: var(--h); border-radius: var(--r); border: 1px solid var(--border-strong); background: var(--surface2); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.fb-star[aria-checked='true'] { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.fb-rate-ends { display: flex; justify-content: space-between; margin-top: 4px; font-size: var(--t-xs); color: var(--text-dim); }
.fb-details { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); color: var(--text); }
.fb-details input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.fb-peek { font-size: var(--t-sm); color: var(--text-dim); }
.fb-peek summary { cursor: pointer; color: var(--accent); }
.fb-peek ul { margin: var(--s2) 0 0; padding-left: 18px; font-family: var(--mono); font-size: var(--t-xs); line-height: 1.6; word-break: break-word; }
.fb-never { margin: 0; }
.fb-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--s2); }
.fb-status { margin: 0; min-height: 1em; }
.fb-status.is-error { color: var(--danger); }
.fb-inbox { gap: var(--s3); }
.fb-thread { display: grid; gap: var(--s2); padding: var(--s3); border-radius: var(--r); background: var(--surface); border: 1px solid var(--border); }
.fb-thread.unread { border-color: var(--accent-ring); }
.fb-subject { margin: 0; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.fb-bubble { display: grid; gap: 2px; }
.fb-bubble[data-author='support'] .fb-author { color: var(--accent); }
.fb-author { font-size: var(--t-sm); font-weight: 600; display: flex; gap: var(--s2); align-items: baseline; }
.fb-author small { font-weight: 400; color: var(--text-dim); }
.fb-bubble p { margin: 0; white-space: pre-wrap; font-size: var(--t-md); }
.fb-reply { display: grid; gap: var(--s2); }
.fb-reply-open { justify-self: start; }
.fb-reply-send { justify-self: end; }
@media (max-width: 760px) {
  .fb-backdrop { place-items: end stretch; padding: 0; }
  .fb-modal { width: 100%; max-height: 88svh; border-radius: var(--r-panel) var(--r-panel) 0 0; padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom)); }
}
@media (pointer: coarse) {
  .fb-text { font-size: 16px; }
  .fb-kind, .fb-star, .fb-tab, .fb-details { min-height: 44px; }
  .fb-peek summary { padding: 12px 0; }
  .foot-link { min-height: 44px; }
}

/* ---------- the plan's drawing ---------- */
.plan .room { stroke: none; }
.plan .room.tint0 { fill: var(--room-0); }
.plan .room.tint1 { fill: var(--room-1); }
.plan .room.tint2 { fill: var(--room-2); }
.plan .room.selected { fill: var(--accent-bg); }
.plan .room-name, .plan .room-area { pointer-events: none; }
.plan .room-name { font: 600 0.30px var(--font); fill: var(--text); text-anchor: middle; letter-spacing: 0.005px; paint-order: stroke; stroke: var(--paper); stroke-width: 0.07px; stroke-linejoin: round; }
.plan .finish { pointer-events: none; }
/* Over a finished floor: ink that reads on it, with only a hairline of halo (a full halo read as white text). */
.plan text.on-light { fill: #1c2228; stroke: rgba(255, 255, 255, 0.3); stroke-width: 0.02px; paint-order: stroke; }
.plan text.on-dark { fill: #f4f2ee; stroke: rgba(0, 0, 0, 0.3); stroke-width: 0.02px; paint-order: stroke; }
.plan .room-labels text.on-light { stroke: rgba(255, 255, 255, 0.5); stroke-width: 0.05px; stroke-linejoin: round; }
.plan .room-labels text.on-dark { stroke: rgba(0, 0, 0, 0.5); stroke-width: 0.05px; stroke-linejoin: round; }
.plan .finish-floor, .plan .finish-garden { opacity: 0.9; }
.plan .finish-wall { stroke: rgba(0, 0, 0, 0.25); stroke-width: 0.004; }
.plan .room-area { font: 0.23px var(--font); fill: var(--text-dim); text-anchor: middle; paint-order: stroke; stroke: var(--paper); stroke-width: 0.06px; stroke-linejoin: round; }
.plan .wall { fill: url(#hatch); stroke: var(--wall); stroke-width: 0.012; cursor: pointer; }
.plan .wall-bg { fill: var(--wall-bg); }
.plan .wall-hatch { stroke: var(--wall); stroke-width: 0.012; }
.plan .wall.selected { fill: var(--accent); stroke: var(--accent); }
.plan .wall.holds-up { stroke-width: 0.03; }
.plan .opening { cursor: pointer; }
.plan .opening-cut { fill: var(--paper); stroke: none; }
.plan .jamb, .plan .window-frame { fill: none; stroke: var(--wall); stroke-width: 0.014; }
.plan .window-glass { fill: none; stroke: var(--text-dim); stroke-width: 0.01; }
.plan .door-leaf { fill: none; stroke: var(--text); stroke-width: 0.025; stroke-linecap: round; }
.plan .door-arc { fill: none; stroke: var(--text-dim); stroke-width: 0.01; stroke-dasharray: 0.05 0.04; }
.plan .opening.selected .door-leaf, .plan .opening.selected .window-glass, .plan .opening.selected .jamb { stroke: var(--accent); }
.plan .opening.clash .door-arc { stroke: var(--warn); stroke-dasharray: none; stroke-width: 0.02; }
.plan .below-wall { fill: none; stroke: var(--text-dim); stroke-width: 0.01; stroke-dasharray: 0.06 0.05; opacity: 0.6; pointer-events: none; }
.plan .stair { cursor: pointer; }
.plan .platform { cursor: pointer; }
.plan .steps-run { fill: var(--g-path); stroke: var(--wall); stroke-width: 0.014; }
.plan .steps-nose { stroke: var(--wall); stroke-width: 0.008; }
.plan .steps-arrow { fill: none; stroke: var(--text); stroke-width: 0.012; stroke-dasharray: 0.06 0.04; }
.plan .platform-area { stroke: var(--wall); stroke-width: 0.014; }
.plan .platform.raised .platform-area { fill: var(--surface2); fill-opacity: 0.55; }
.plan .platform.sunken .platform-area { fill: var(--surface3); fill-opacity: 0.7; }
.plan .platform-step { fill: var(--surface2); stroke: var(--wall); stroke-width: 0.008; }
.plan .platform.selected .platform-area, .plan .platform.selected .platform-step { stroke: var(--accent); }
.plan .platform.selected .platform-area { fill: var(--accent-bg); fill-opacity: 1; }
.plan .platform-label { font: 500 0.2px var(--font); fill: var(--text-dim); text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: var(--paper); stroke-width: 0.05px; stroke-linejoin: round; }
.plan .stair-run { fill: var(--surface2); stroke: var(--wall); stroke-width: 0.014; }
.plan .stair-tread { stroke: var(--wall); stroke-width: 0.008; }
.plan .stair-arrow { fill: none; stroke: var(--text); stroke-width: 0.016; stroke-linecap: round; stroke-linejoin: round; }
.plan .stair.selected .stair-run { stroke: var(--accent); fill: var(--accent-bg); }
.plan .stair-hole { fill: var(--paper); stroke: var(--wall); stroke-width: 0.012; stroke-dasharray: 0.1 0.06; pointer-events: none; }
.plan .piece { cursor: pointer; }
.plan .piece-body { fill: var(--surface2); stroke: var(--text-dim); stroke-width: 0.012; }
.plan .piece-line { fill: none; stroke: var(--text-dim); stroke-width: 0.008; }
.plan .worktop { fill: none; stroke: var(--text); stroke-width: 0.02; pointer-events: none; }
.plan .triangle { fill: var(--accent-bg); stroke: var(--accent); stroke-width: 0.02; stroke-dasharray: 0.08 0.06; pointer-events: none; }
.plan .triangle.off { fill: none; stroke: var(--warn); }
.plan .piece.under .piece-body { fill: var(--surface3); fill-opacity: 0.55; stroke: var(--border-strong); }
.plan .piece.overhead .piece-body { fill: none; stroke-dasharray: 0.06 0.04; }
.plan .piece.light.on .piece-body { fill: var(--light-on); stroke: var(--light-on-edge); }
.plan .piece.light.on .piece-line { stroke: var(--light-on-edge); }
.plan .piece.selected .piece-body { fill: var(--accent-bg); stroke: var(--accent); stroke-width: 0.03; }
.plan .piece.clash .piece-body { stroke: var(--warn); stroke-width: 0.03; }
.overlay .piece-ghost .piece-body { fill: var(--accent-bg); stroke: var(--accent); stroke-width: 0.02; stroke-dasharray: 0.06 0.04; }
.overlay .piece-ghost .piece-line { fill: none; stroke: var(--accent); stroke-width: 0.01; }
.plan .wall.unsupported { stroke: var(--warn); stroke-width: 0.03; }
.plan .garden { cursor: pointer; }
.plan .g-lawn { fill: var(--g-lawn); }
.plan .g-terrace { fill: var(--g-terrace); stroke: var(--g-wood); stroke-width: 0.012; }
.plan .g-path { fill: var(--g-path); stroke: var(--text-dim); stroke-width: 0.008; }
.plan .g-bed { fill: var(--g-bed); }
.plan .g-water { fill: var(--g-water); stroke: var(--accent); stroke-width: 0.012; }
.plan .g-deck { fill: var(--g-wood); fill-opacity: 0.55; stroke: var(--g-wood); stroke-width: 0.02; }
.plan .g-retaining { fill: none; stroke: #8a8378; stroke-width: 0.25; stroke-linecap: butt; stroke-linejoin: round; }
.plan .g-well .well-ring { fill: var(--surface2); stroke: var(--text-dim); stroke-width: 0.02; }
.plan .g-well .well-cross { stroke: var(--text-dim); stroke-width: 0.02; }
.plan .g-height .spot { stroke: var(--text); stroke-width: 0.025; }
.plan .g-height .spot-hit { fill: transparent; }
.plan .g-height.src-traced .spot, .plan .g-height.src-assumed .spot { stroke-dasharray: 0.03 0.03; }
.plan .g-height.src-assumed .spot-label { fill: var(--warn); }
.plan .spot-label { font: 600 0.2px var(--mono); fill: var(--text); paint-order: stroke; stroke: var(--paper); stroke-width: 0.05px; }
.plan .contour { fill: none; stroke: var(--g-line); stroke-width: 0.012; opacity: 0.55; }
.plan .contour.whole { stroke-width: 0.024; opacity: 0.8; }
.plan .contour-label { font: 500 0.19px var(--mono); fill: var(--text-dim); text-anchor: middle; paint-order: stroke; stroke: var(--paper); stroke-width: 0.04px; }
.plan .g-plot { fill: none; stroke: var(--g-line); stroke-width: 0.03; stroke-dasharray: 0.3 0.1 0.05 0.1; }
.plan .g-fence { fill: none; stroke: var(--g-wood); stroke-width: 0.05; }
.plan .g-hedge { fill: none; stroke: var(--g-plant); stroke-width: 0.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.plan .g-tree .crown, .plan .g-shrub .crown { fill: var(--g-plant); fill-opacity: 0.55; stroke: var(--g-line); stroke-width: 0.02; }
.plan .trunk { fill: var(--g-wood); }
.plan .garden.selected, .plan .garden.selected .crown { stroke: var(--accent); stroke-width: 0.04; }
.plan .garden-label { font: 500 0.22px var(--font); fill: var(--text-dim); text-anchor: middle; pointer-events: none; }
.plan .dim { cursor: pointer; }
.plan .dim-line, .plan .dim-tick, .plan .dim-ext { fill: none; stroke: var(--text); stroke-width: 0.014; }
.plan .dim-ext { stroke-width: 0.008; opacity: 0.55; }
.plan .dim-text { font: 500 0.22px var(--mono); fill: var(--text); text-anchor: middle; paint-order: stroke; stroke: var(--paper); stroke-width: 0.08px; stroke-linejoin: round; }
.plan .dim.src-traced .dim-line { stroke-dasharray: 0.02 0.06; }
.plan .dim.src-assumed .dim-line { stroke: var(--warn); stroke-dasharray: 0.12 0.07; }
.plan .dim.src-assumed .dim-tick { stroke: var(--warn); }
.plan .dim.src-assumed .dim-text { fill: var(--warn); }
.plan .dim.src-proposed .dim-line { stroke: var(--accent); stroke-dasharray: 0.12 0.06; }
.plan .dim.src-proposed .dim-text { fill: var(--accent); }
.plan .dim.off .dim-line { stroke: var(--gusta); stroke-width: 0.03; }
.plan .dim.off .dim-text { fill: var(--gusta); font-weight: 700; }
.plan .dim.selected .dim-line { stroke: var(--accent); stroke-width: 0.03; }
.plan .dim.selected .dim-text { fill: var(--accent); }
.plan { width: 100%; height: 100%; }

/* Tool previews: the editor sizes them in screen pixels for the zoom. */
.overlay .guide { stroke: var(--accent); }
.overlay .preview-wall { stroke: var(--accent); stroke-opacity: 0.35; stroke-linecap: butt; }
.overlay .preview-centre { stroke: var(--accent); }
.overlay .preview-len { fill: var(--accent); font-family: var(--mono); font-weight: 600; text-anchor: middle; paint-order: stroke; stroke: var(--paper); stroke-linejoin: round; }
.overlay .snap { fill: none; stroke: var(--accent); }
.overlay .snap-node, .overlay .snap-wall { fill: var(--accent); fill-opacity: 0.25; }
.overlay .chain-start { fill: var(--accent); }
.overlay .handle { fill: var(--surface); stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.overlay .handle-hit { fill: transparent; cursor: grab; }
.overlay .grip { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.overlay .move-line { stroke: var(--accent); stroke-opacity: 0.45; stroke-linecap: round; pointer-events: none; }
.overlay .preview-len { pointer-events: none; }
.overlay .route { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.overlay .route-piece { fill: var(--accent-bg); stroke: var(--accent); }
.overlay .stuck { fill: none; stroke: var(--warn); }
.overlay .opening-ghost { fill: var(--accent); fill-opacity: 0.35; stroke: var(--accent); stroke-width: 0.01; }
.overlay .opening-ghost-leaf { stroke: var(--accent); }
.overlay .tape { stroke: var(--accent); }
.overlay .garden-draft { fill: none; stroke: var(--accent); }
.overlay .close-ring { fill: none; stroke: var(--accent); }
.overlay .ghost { stroke: var(--accent); stroke-opacity: 0.18; }
.overlay .ghost-arrow { stroke: var(--accent); }
.underlay image { pointer-events: none; }

/* ---------- desktop and iPad landscape: the plan full screen, the chrome floating ---------- */
@media (min-width: 761px) {
  body { overflow: hidden; }
  .stage { position: fixed; inset: 0; z-index: 0; }
  .hdr { position: fixed; top: 12px; left: 12px; right: 12px; border-radius: var(--r-panel); }
  .rail { position: fixed; left: 12px; top: var(--inset-t); border-radius: var(--r-panel); }
  .dock { position: fixed; right: 12px; top: var(--inset-t); bottom: var(--inset-b); width: 348px; border-radius: var(--r-panel); }
  .optbar { position: fixed; left: var(--inset-l); top: var(--inset-t); max-width: calc(100vw - var(--inset-l) - var(--inset-r)); border-radius: 14px; }
  .optbar.empty { display: none; }
  .lenbar { position: fixed; left: calc(var(--inset-l) + (100vw - var(--inset-l) - var(--plan-r)) / 2); transform: translateX(-50%); bottom: var(--inset-b); border-radius: 14px; max-width: calc(100vw - var(--inset-l) - var(--plan-r) - 24px); }
  .foot { position: fixed; left: 12px; right: var(--inset-r); bottom: 12px; border-radius: 12px; }
  .hint { top: calc(var(--inset-t) + 62px); left: calc(var(--inset-l) + (100% - var(--inset-l) - var(--plan-r)) / 2); transform: translateX(-50%); max-width: min(640px, calc(100vw - var(--inset-l) - var(--plan-r) - 120px)); }
  body:has(.optbar.empty) .hint { top: var(--inset-t); }
  .zoom { right: var(--plan-r); top: var(--inset-t); }
  body:has(.optbar:not(.empty)) .zoom { top: calc(var(--inset-t) + 62px); }
  .concept-bar { left: var(--inset-l); right: var(--plan-r); bottom: calc(var(--inset-b) + 64px); }
  /* Plan + 3D: the 3D takes the right half of the free area, a framed glass window on the plan. */
  body[data-view='both'] { --plan-r: calc(var(--inset-r) + (100vw - var(--inset-l) - var(--inset-r)) / 2 - 6px); }
  body[data-view='both'] .v3host {
    position: fixed; left: calc(100vw - var(--plan-r) + 12px); right: var(--inset-r); top: var(--inset-t); bottom: var(--inset-b);
    border-radius: var(--r-panel); border: 1px solid var(--glass-edge); box-shadow: var(--shadow);
  }
  body[data-view='both']:has(.optbar:not(.empty)) .v3host { top: calc(var(--inset-t) + 62px); }
  body[data-view='both'] .optbar { max-width: calc(100vw - var(--inset-l) - var(--inset-r)); }
  /* The plan is narrower side by side: the length bar sits above the floor tabs, not on them. */
  body[data-view='both'] .lenbar { bottom: calc(var(--inset-b) + 58px); }
  .levels { left: var(--inset-l); bottom: var(--inset-b); }
  .compass { right: var(--plan-r); bottom: var(--inset-b); }
  .work, .body { display: contents; }
}
/* A short desktop window: the dock stops above the footer and the rail scrolls. */
@media (min-width: 761px) and (max-height: 620px) {
  .rail { bottom: var(--inset-b); overflow-y: auto; }
}

/* ---------- touch: the suite's 44 px floor and 16 px fields ---------- */
@media (pointer: coarse) {
  :root { --h: 44px; --h-tool: 56px; }
  input, select, .m-field, .name-field, .lenbar input:not([type='range']) { font-size: 16px; }
  .check-row input { width: 22px; height: 22px; }
  .measure .m-source { height: 40px; }              /* the 44 px floor, the box still not drawn */
  .seg button { height: calc(var(--h) - 6px); }
  #trace-opacity { min-height: 44px; }
}

/* ---------- phone: the plan on top, the details below it, the tools at the bottom ---------- */
@media (max-width: 760px) {
  /* No frosted glass on a phone: a blur over the live 3D is redone by the GPU on every change of
     the layout, which is what made opening Gusta or the sheet stutter. The panels are solid. */
  :root { --blur: none; --glass: var(--surface); --glass-strong: var(--surface); }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-rows: auto 1fr auto; min-height: 100%; }
  .hdr { position: sticky; top: 0; border-radius: 0; border-width: 0 0 1px; height: auto; min-height: 56px; padding: 6px 8px; gap: 6px; box-shadow: none; }
  .brand span, .lbl-full, .foot #saved { display: none; }
  .lbl-short { display: inline; }
  .hdr .btn:not(.icon) { padding: 0 var(--s3); }
  .hdr #btn-file, .hdr #btn-export { width: var(--h); padding: 0; }
  .hdr .spacer { display: none; }
  .switcher { flex: 1; min-width: 0; }
  .switcher select { min-width: 0; max-width: none; width: 100%; text-overflow: ellipsis; padding: 0 4px 0 8px; }
  #btn-theme { display: none; }
  /* the header has no room for the word on a phone: the sparkle alone, still "Gusta" to a screen reader */
  .gusta-pill { width: var(--h); padding: 0; justify-content: center; }
  .gusta-pill-label { display: none; }
  .menu .phone-only { display: flex; }
  /* the plan takes what the sheet leaves, never less than a quarter of the screen */
  .body { display: grid; grid-template-rows: minmax(24svh, 1fr) minmax(0, var(--sheet, 40svh)); min-height: 0; }
  .body:has(.dock[data-sheet='min']) { --sheet: 44px; }
  .body:has(.dock[data-sheet='full']) { --sheet: 76svh; }
  .work { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; min-width: 0; grid-row: 1; }
  .work > .optbar { grid-row: 1; }
  .work > .stage { grid-row: 2; }
  .work > .lenbar { grid-row: 3; }
  .optbar { border-radius: 0; border-width: 0 0 1px; box-shadow: none; padding: 6px 10px; min-height: 0; }
  .optbar .optnote { display: none; }
  /* The 3D's controls are one row that scrolls sideways: wrapped, they took the picture's room. */
  body[data-view='3d'] .optbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  body[data-view='3d'] .optbar > * { flex: none; }
  body[data-view='3d'] .optbar .light-words { min-width: 0; }
  body[data-view='3d']:not(.light-open) .optbar { display: none; }
  body[data-view='3d'] .light-toggle { display: inline-flex; position: absolute; z-index: 5; right: 10px; top: 10px; background: var(--surface); }
  body.light-open .light-toggle { background: var(--surface); border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
  /* Gusta in the sheet reads like a chat: the talk scrolls, the box stays at the sheet's foot. */
  .dock .gusta-panel { display: flex; flex-direction: column; background: var(--surface); padding-bottom: 0; margin-bottom: calc(-1 * var(--s2)); }
  .dock .gusta-panel > .g-thread { order: 3; }
  .dock .gusta-panel > .g-footrow { order: 4; }
  .dock .gusta-panel > .g-precost { order: 5; }
  .dock .gusta-panel > .g-form { order: 6; position: sticky; bottom: calc(-1 * var(--s2)); z-index: 1; margin: 0 calc(-1 * var(--s3)); padding: var(--s2) var(--s3) var(--s3); background: var(--surface); border-top: 1px solid var(--border); }
  body[data-view='3d'] .hint { position: absolute; left: 10px; right: 64px; top: 10px; margin: 0; z-index: 4; transition: opacity 400ms; }
  body[data-view='3d'] .hint.faded { opacity: 0; pointer-events: none; }
  .slider input { width: 110px; }
  .optbar.empty { display: none; }
  .stage { display: flex; flex-direction: column; }
  .hint { position: static; transform: none; margin: 6px auto 0; flex: none; border-radius: 12px; padding: 5px 12px; font-size: var(--t-sm); line-height: 1.35; }
  .lenbar input:not([type='range']) { width: 5.5em; }
  /* Drawing a wall: the floor tabs and Fit step aside so the plan has the room (pinch still zooms). */
  body.drawing .levels, body.drawing .zoom { display: none; }
  #stage-svg { position: relative; inset: auto; flex: 1; min-height: 0; height: auto; }
  .zoom { right: 10px; bottom: 10px; padding: 3px; }
  .zoom #zoom-in, .zoom #zoom-out { display: none; }
  /* above the floor tabs, clear of the compass, so its Back to the real house is never behind them */
  .concept-bar { left: 10px; right: 68px; bottom: 74px; }
  .levels { left: 10px; bottom: 10px; max-width: calc(100% - 90px); overflow-x: auto; }
  .levels { max-width: calc(100% - 20px); }
  .levels .nav-floor-name { display: none; }      /* the number on a phone; the list has the names */
  .nav-side:not([hidden]) { display: flex; position: absolute; z-index: 5; right: 10px; bottom: 10px; padding: 5px; border-radius: 16px; background: var(--surface); border: 1px solid var(--glass-edge); box-shadow: var(--shadow); }
  .nav-side .nav-group { display: flex; flex-direction: column; gap: 2px; padding: 2px; border-radius: 12px; background: var(--surface2); }
  .nav-side .nav-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text-dim); }
  .nav-side .nav-btn svg { width: 20px; height: 20px; }
  .nav-side .nav-btn[aria-pressed='true'] { color: var(--accent); background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent-ring); }
  .nav-side .nav-btn[aria-disabled='true'] { opacity: 0.35; }
  .compass { right: 10px; bottom: 74px; width: 48px; height: 48px; padding: 5px; }
  body.drawing .compass { display: none; }
  .lenbar { border-radius: 0; border-width: 1px 0 0; box-shadow: none; }
  /* The dock is a sheet under the plan, never over it: collapsed (only its handle), half the
     screen (where it opens) or most of it to read a whole card; the handle is tapped or dragged. */
  .dock { grid-row: 2; border-radius: 16px 16px 0 0; border-width: 1px 0 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18); overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--s2) var(--s2); min-height: 0; }
  .dock[data-sheet='min'] { overflow: hidden; }
  .dock-handle { display: flex; position: sticky; top: 0; z-index: 2; width: 100%; height: 28px; margin: 0; padding: 0; flex: none; align-items: center; justify-content: center;
    border: 0; background: var(--surface); cursor: grab; touch-action: none; }
  .dock-grip { width: 40px; height: 5px; border-radius: 3px; background: var(--border-strong); }
  .dock.quiet #measures-card, .dock.quiet #thickness-card { display: none; }
  .rail {
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; flex-direction: row; justify-content: center; gap: var(--s1);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); border-radius: 0; border-width: 1px 0 0;
  }
  /* Eight tools share the row evenly, never under the 44 px floor, so every name has room. */
  .tool { width: auto; flex: 1 1 0; min-width: 44px; max-width: 64px; font-size: 10px; }
  .rail { overflow-x: auto; justify-content: safe center; gap: 0; padding-inline: 8px; }
  /* The footer's row is the plan's on a phone: the status line is shown in the sheet's top row,
     Feedback and Privacy are in the menu. #status stays in the page as the live region. */
  .foot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; border: 0; }
  .dock-top { display: flex; align-items: center; position: sticky; top: 0; z-index: 2; margin: 0 calc(-1 * var(--s2)); padding: 0 var(--s2); background: var(--surface); border-bottom: 1px solid var(--border); }
  .dock-top .dock-handle { position: relative; flex: 1; min-width: 0; justify-content: flex-start; gap: var(--s3); padding: 0 var(--s2); background: none; }
  .dock-top .dock-grip { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); }
  .dock-top .dock-status { display: block; min-width: 0; padding-top: 10px; font-size: var(--t-sm); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
  .dock-report:not([hidden]) { display: inline-flex; align-items: center; flex: none; padding-top: 6px; }
  .field-row { grid-template-columns: 6.5rem minmax(0, 1fr) auto; }
  /* A switch with more choices than the row has room for wraps, never spills past its edge. */
  .dock .seg { flex-wrap: wrap; height: auto; min-width: 0; max-width: 100%; }
  .dock .seg button { flex: 1 1 auto; min-width: 44px; padding-inline: var(--s2); }
}

/* A small phone: the house's name gets the logo's room, and below 380 px the tools are their icons
   (the tool in hand is named in the bar above the plan; each keeps its name for a screen reader). */
@media (max-width: 480px) {
  .hdr .brand { display: none; }
}
@media (max-width: 380px) {
  .tool .tool-name { display: none; }
  .tool { height: 48px; }
  .rail { padding-inline: 4px; }     /* eight 44 px tools in 360 px */
  /* five 44 px buttons and the house's name in 360 px */
  .hdr { gap: 4px; padding-inline: 4px; }
  .switcher select { padding-left: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: var(--surface); --glass-strong: var(--surface); --blur: none; }
}

/* The details' own switch (a raised or sunken floor): full width, even halves. */
.seg.seg-wide { display: flex; width: 100%; box-sizing: border-box; }
.seg.seg-wide > button { flex: 1 1 0; }

/* ---------- Gusta (roadmap step 5; SHELL.md: the pill, --gusta only on Gusta surfaces) ---------- */
.gusta-pill {
  display: inline-flex; align-items: center; gap: 6px; height: var(--h); padding: 0 var(--s3);
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface2); color: var(--text);
  font-size: var(--t-md); font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap;
}
.gusta-pill .gusta-sparkle { color: var(--gusta); width: 14px; height: 14px; flex: none; }
.gusta-pill:hover { border-color: var(--gusta-dim); }
.gusta-pill[aria-pressed='true'] { background: var(--gusta-bg); border-color: var(--gusta); }
/* while Gusta is open the dock is Gusta's: the other cards step aside */
.gusta-open .dock > .card:not(.gusta-panel):not(.acct-card) { display: none; }
.gusta-panel { background: color-mix(in srgb, var(--gusta) 5%, transparent); border-radius: 12px; }
.g-head { display: flex; align-items: center; gap: var(--s2); }
.g-head .gusta-sparkle { color: var(--gusta); width: 16px; height: 16px; flex: none; }
.g-head h2 { flex: 1; }
.g-lede { font-weight: 500; }
.g-chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.g-chip {
  height: calc(var(--h) - 6px); padding: 0 var(--s3); border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface2); color: var(--text); font-size: var(--t-sm); font-weight: 500; cursor: pointer; white-space: nowrap;
}
.g-chip:hover { border-color: var(--gusta-dim); }
.g-chip.fix { background: var(--gusta-bg); }
.g-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); }
.g-form input { width: 100%; min-width: 0; }
.g-form input:focus { border-color: var(--gusta-dim); box-shadow: none; }
.g-send.filled { background: var(--gusta); border-color: transparent; color: var(--on-gusta); font-weight: 600; }
.g-send.filled:hover { background: var(--gusta-dim); }
.g-thread { display: grid; gap: var(--s3); }
.g-thread:empty { display: none; }
.g-turn { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--border); }
.g-ask { justify-self: end; max-width: 90%; padding: 6px var(--s3); border-radius: 12px 12px 4px 12px; background: var(--surface3); }
.g-left { font-size: var(--t-sm); color: var(--text-dim); }
.g-options { display: grid; gap: var(--s2); }
.g-option { justify-content: flex-start; width: 100%; }
.g-option.picked { background: var(--gusta-bg); opacity: 1; }
.g-receipt { display: grid; gap: var(--s2); }
.g-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.g-row { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: var(--s2); }
.g-tick { color: var(--gusta); font-weight: 700; grid-row: span 2; }
.g-what { font-weight: 500; }
.g-why { grid-column: 2; }
.g-undo { width: 100%; }
.g-helpful { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: 0; }
.g-helpful-btn, .g-report { height: calc(var(--h) - 4px); padding: 0 var(--s3); }
.g-report { justify-self: start; }
.g-foot { padding-top: var(--s1); }

/* ---------- the account (SHELL.md: the chip is neutral, never the accent or the sparkle) ---------- */
.account-btn {
  display: inline-flex; align-items: center; gap: 6px; height: var(--h); padding: 0 var(--s3);
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface2); color: var(--text);
  font-size: var(--t-md); font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap;
}
.account-btn svg { width: 16px; height: 16px; flex: none; color: var(--text-dim); }
.account-btn:hover { border-color: var(--border-strong); }
.account-btn[aria-expanded='true'] { background: var(--surface3); }
.account-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.account-btn.signed-in .account-name { font-size: var(--t-sm); font-weight: 600; line-height: 1.1; }
.account-btn.signed-in .account-tokens { font-size: var(--t-xs); color: var(--text-dim); line-height: 1.1; }
.acct-head { display: flex; align-items: center; gap: var(--s2); }
.acct-head h2 { flex: 1; }
.acct-form { display: grid; gap: var(--s3); }
.acct-form .btn.quiet { justify-self: start; padding: 0; height: auto; color: var(--accent); }
.acct-status.bad { color: var(--danger); }
.acct-status:empty { display: none; }
/* on a phone the header has no room for the chip: the File menu's last row opens the account */
@media (max-width: 760px) { .account-btn { display: none; } }

/* the full Gusta's run: the cost before, the working line, Stop, the wall card, the checks */
.g-precost { margin-top: calc(-1 * var(--s2)); }
.g-footrow { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.g-signin { height: auto; padding: 0; color: var(--accent); font-size: var(--t-sm); }
.g-send.is-stop { background: transparent; border-color: var(--border-strong); color: var(--text); }
.g-working { display: flex; align-items: center; gap: var(--s2); color: var(--text-dim); font-size: var(--t-sm); }
.g-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--gusta); animation: g-spin 0.9s linear infinite; flex: none; }
@keyframes g-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .g-spin { animation: none; } }
.g-thinking-hint { display: block; font-size: var(--t-xs); }
.g-error { color: var(--danger); }
.g-cost { margin-top: calc(-1 * var(--s1)); }
.g-wall { display: grid; gap: var(--s2); padding: var(--s3); border-radius: 12px; background: color-mix(in srgb, var(--gusta) 7%, var(--surface2)); }
.g-wall-title { font-weight: 600; }
.g-wall-quote { font-style: italic; color: var(--text-dim); }
.g-wall-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.g-wall-actions > .btn { flex: 1 1 0; }
.g-wall-actions > .g-later { flex: 0 0 auto; }
.g-door.filled, .g-wall .is-primary { background: var(--gusta); border-color: transparent; color: var(--on-gusta); font-weight: 600; }
.g-askfull { justify-self: start; }
.g-checks-lead { margin-top: var(--s1); }
.g-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-sm); }
.g-check { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: var(--s2); }
.g-check.pass .g-mark { color: var(--accent); }
.g-check.fail .g-mark { color: var(--danger); }
.g-check.was .g-mark { color: var(--warn); }

/* ---------- the Gustalabs apps (the family's launcher, as in every Gusta app) ---------- */
.launcher-section { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--border); }
.launcher-grid { display: flex; flex-direction: column; gap: 4px; }
.launcher-card {
  display: flex; align-items: center; gap: var(--s3); width: 100%; padding: 8px 10px; border-radius: 10px;
  border: 1px solid transparent; background: transparent; color: var(--text); text-align: left; cursor: pointer;
}
.launcher-card:hover:not(:disabled) { background: var(--surface3); border-color: var(--border); }
.launcher-card.here { cursor: default; opacity: 0.7; }
.launcher-card.coming-soon { cursor: default; opacity: 0.55; }
.launcher-badge { margin-left: 6px; font-size: var(--t-xs); color: var(--text-dim); }
.launcher-mark { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }
.launcher-mark img { width: 34px; height: 34px; border-radius: 8px; }
.launcher-text { display: flex; flex-direction: column; min-width: 0; }
.launcher-name { font-size: var(--t-sm); font-weight: 600; }
.launcher-tagline { font-size: var(--t-xs); color: var(--text-dim); line-height: 1.3; }
.launcher-studio { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; }
.launcher-studio .launcher-name { font-weight: 500; }