/* Customer viewer — "Gallery" design system (2026-09-26 redesign).
 *
 * The kitchen is the exhibit; the interface is the frame. Principles:
 *  1. Full-bleed stage. No bars: the brand lockup and settings float over the scene, so the 3D render owns
 *     the whole viewport (desktop: beside the inspector panel; phone: above the bottom sheet).
 *  2. Few, quiet objects. Controls live in a handful of frosted CAPSULES (camera rail, tool dock, settings,
 *     language) instead of many separate boxes. Capsules take the studio's mood — paper glass in the light
 *     studio, obsidian glass in the dark one (the Studio toggle drives `data-theme`).
 *  3. The site's two colours (the website globals.css): INK is the one primary — the demo's "Start your
 *     project", "on" states (the text colour inverted) — and the site's oxide ACCENT marks only what is chosen or
 *     precious: the AR call-to-action, a picked material, focus. Signal is reserved for measurement data drawn into
 *     the scene. (Before 2026-10-06 the accent was brass: two brands shared one session.)
 *  4. Script-aware typography. One sans family throughout, sentence case, no forced uppercase or tracked
 *     micro-mono labels (they degrade Armenian and Cyrillic); tabular figures wherever numbers are read.
 *  5. A dedicated phone product (bottom of file): thumb-zone camera rail, full-width tool dock, a More menu
 *     for rarely used settings, and a bottom sheet whose collapsed state is a swipeable material strip —
 *     restyle the kitchen without ever opening a panel.
 *  6. A structured inspector: header tabs, a sticky part switch + collection tabs (one grid at a time, never an
 *     endless stacked list), and a footer that stays in reach — the demo call to action and the labelled settings.
 */

/* ============================================================ tokens ============================================================ */
:root {
  /* travertine (light) */
  --bg: #f4f2ed;               /* site --bg */
  --surface: #fbfaf7;          /* site --surface */
  --surface-2: #f1eee8;
  --surface-3: #e6e2da;
  --text: #17150f;             /* site --fg (ink) */
  --text-2: #6c675d;
  --text-3: #9b958b;
  --line: #dbd5ca;
  --line-strong: #bdb6a8;
  --accent: #d9491f;           /* site --accent: rings, dots, focus, icons */
  --accent-strong: #b83c17;    /* site --accent-text: small accent text, links, hovers */
  --accent-soft: #f8e4db;      /* site --accent-soft */
  --accent-fill: #c13f18;      /* site --accent-fill: an accent FILL that carries text (AR); --on-accent on it is 5:1 */
  --accent-fill-hover: #a8360f;
  --on-accent: #fff8f3;        /* site --accent-fg */
  --ink: #17150f;              /* "on" state fill and the primary button: site --fg */
  --on-ink: #f4f2ed;           /* site --bg */
  --signal: #c2410c;          /* measurement annotations only (matches dims.js line colour) */
  --on-signal: #fff7f2;
  --ok: #2f7a4f;
  --warn: #9a6512;
  --danger: #b3382a;
  /* floating chrome over the stage */
  /* Every floating object gets three layers of definition, so it reads against ANY part of the render: a crisp
     hairline (--chrome-line), an inner top highlight (--chrome-edge) and a two-stage drop shadow (--shadow-float). */
  --chrome-bg: rgba(252, 251, 249, .94);
  --chrome-solid: #fcfbf9;
  --chrome-line: rgba(26, 24, 20, .17);
  --chrome-edge: inset 0 1px 0 rgba(255, 255, 255, .95);
  --chip-edge: rgba(26, 24, 20, .14);
  --chrome-fg: #1a1814;
  --chrome-fg-2: #6c675d;
  --chrome-hover: rgba(26, 24, 20, .06);
  --chrome-blur: blur(22px) saturate(1.4);
  /* elevation */
  --shadow-sm: 0 1px 2px rgba(26, 24, 20, .06);
  --shadow-float: 0 1px 2px rgba(26, 24, 20, .1), 0 12px 30px -10px rgba(26, 24, 20, .26), 0 30px 60px -30px rgba(26, 24, 20, .28);
  --shadow-sheet: 0 -1px 0 rgba(26, 24, 20, .04), 0 -18px 48px -20px rgba(26, 24, 20, .22);
  /* shape */
  --r-xs: 6px;
  --r-sm: 9px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;
  /* type */
  --font: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Noto Sans Armenian", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-md: 14px;
  --fs-lg: 16px;
  /* motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.3, 1.3, .5, 1);
  --t-fast: .14s;
  --t: .22s;
  /* layout */
  --panel-w: 384px;
  --topbar-h: 72px;           /* the floating top row's footprint (ui.js reads .topbar for the sheet's full height) */
  --edge: 16px;               /* distance of floating chrome from the stage edge */
  --sheet-peek: 124px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e0d0c; --surface: #151412; --surface-2: #1c1b18; --surface-3: #262420; --text: #efebe3; --text-2: #a29c91; --text-3: #6f6a62; --line: #35322d; --line-strong: #4d4942;
    --accent: #ff7a4d; --accent-strong: #ff8f69; --accent-soft: #3a1d12; --accent-fill: #ff7a4d; --accent-fill-hover: #ff8f69; --on-accent: #1a0c06; --ink: #efebe3; --on-ink: #121110; --signal: #f2703f; --on-signal: #1a0a04;
    --ok: #62c08a; --warn: #e0ab55; --danger: #f07262;
    --chrome-bg: rgba(31, 30, 27, .92); --chrome-solid: #1f1e1b; --chrome-line: rgba(255, 255, 255, .16); --chrome-edge: inset 0 1px 0 rgba(255, 255, 255, .08); --chip-edge: rgba(255, 255, 255, .12); --chrome-fg: #f1ede5; --chrome-fg-2: #aaa399; --chrome-hover: rgba(255, 255, 255, .08);
    --shadow-sm: 0 0 0 1px rgba(255, 255, 255, .04); --shadow-float: 0 0 0 1px rgba(0, 0, 0, .55), 0 16px 40px -12px rgba(0, 0, 0, .78), 0 36px 72px -32px rgba(0, 0, 0, .82); --shadow-sheet: 0 -1px 0 rgba(255, 255, 255, .05), 0 -20px 50px -22px rgba(0, 0, 0, .75);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e0d0c; --surface: #151412; --surface-2: #1c1b18; --surface-3: #262420; --text: #efebe3; --text-2: #a29c91; --text-3: #6f6a62; --line: #35322d; --line-strong: #4d4942;
  --accent: #ff7a4d; --accent-strong: #ff8f69; --accent-soft: #3a1d12; --accent-fill: #ff7a4d; --accent-fill-hover: #ff8f69; --on-accent: #1a0c06; --ink: #efebe3; --on-ink: #121110; --signal: #f2703f; --on-signal: #1a0a04;
  --ok: #62c08a; --warn: #e0ab55; --danger: #f07262;
  --chrome-bg: rgba(31, 30, 27, .92); --chrome-solid: #1f1e1b; --chrome-line: rgba(255, 255, 255, .16); --chrome-edge: inset 0 1px 0 rgba(255, 255, 255, .08); --chip-edge: rgba(255, 255, 255, .12); --chrome-fg: #f1ede5; --chrome-fg-2: #aaa399; --chrome-hover: rgba(255, 255, 255, .08);
  --shadow-sm: 0 0 0 1px rgba(255, 255, 255, .04); --shadow-float: 0 0 0 1px rgba(0, 0, 0, .55), 0 16px 40px -12px rgba(0, 0, 0, .78), 0 36px 72px -32px rgba(0, 0, 0, .82); --shadow-sheet: 0 -1px 0 rgba(255, 255, 255, .05), 0 -20px 50px -22px rgba(0, 0, 0, .75);
  color-scheme: dark;
}

/* ============================================================ base ============================================================ */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { background: var(--bg); color: var(--text); font: var(--fs-md)/1.45 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; font-feature-settings: "kern"; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
svg { fill: currentColor; }
/* one line-icon family: 24-unit grid, 1.6 stroke, round joins */
svg.ico { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-soft); color: var(--text); }

/* ============================================================ layout ============================================================ */
/* Desktop: stage | inspector. The top row shares the stage's grid cell, so the render runs under it. */
.app { position: fixed; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) var(--panel-w); grid-template-areas: "stage panel"; transition: grid-template-columns .3s var(--ease); }
.app.panel-collapsed { grid-template-columns: minmax(0, 1fr) 0px; }
.stage { grid-area: stage; position: relative; overflow: hidden; min-width: 0; min-height: 0; touch-action: none; background: var(--bg); }
.stage canvas { position: absolute; inset: 0; display: block; }
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* ============================================================ capsule (floating chrome) ============================================================ */
.capsule {
  display: flex; align-items: center; gap: 2px; padding: 4px;
  background: var(--chrome-bg); -webkit-backdrop-filter: var(--chrome-blur); backdrop-filter: var(--chrome-blur);
  border: 1px solid var(--chrome-line); border-radius: var(--r-lg); box-shadow: var(--chrome-edge), var(--shadow-float); color: var(--chrome-fg);
}
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r); background: transparent; color: inherit; cursor: pointer; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:active { transform: scale(.94); }
.icon-btn--sm { width: 32px; height: 32px; border-radius: var(--r-sm); color: var(--text-2); }
.icon-btn--sm svg { width: 18px; height: 18px; }
/* "on" = ink, never colour */
#btnCamera[aria-pressed="true"], #btnWalk[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
/* scene settings: quality reads as a small HD / SD plate; Share joins the capsule on phones only */
.app:not(.phone-layout) .util--phone { display: none; }
.util__label { display: none; }   /* shown in the panel's settings row only (phones: an icon capsule) */
.util__badge { display: grid; place-items: center; min-width: 26px; height: 18px; padding: 0 4px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px currentColor; font-size: 10.5px; font-weight: 750; letter-spacing: .04em; line-height: 1; font-variant-numeric: tabular-nums; }
#btnQuality[aria-pressed="false"] { color: var(--chrome-fg-2); }
#btnStudio[aria-pressed="true"] .i-sun { display: none; }
#btnStudio:not([aria-pressed="true"]) .i-moon { display: none; }

/* ============================================================ top row ============================================================ */
.topbar {
  grid-area: stage; align-self: start; z-index: 8; position: relative;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: calc(var(--edge) + var(--safe-t)) var(--edge) 0 calc(var(--edge) + 4px);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; padding-top: 4px; }
.brand__mark { flex: none; width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 6px 16px -8px rgba(111, 75, 18, .6); }
.brand__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brand__logo { font-size: 11.5px; font-weight: 750; letter-spacing: .18em; color: var(--text); white-space: nowrap; }
/* Non-modal help card on the scene's top-right corner — beside the panel, never over it (ui.js: closes on outside
   click / Escape). Phones: under the settings capsule. */
.help-card { position: absolute; top: calc(var(--edge) + var(--safe-t)); right: var(--edge); z-index: 20; width: min(320px, calc(100vw - 24px)); padding: 14px 16px 16px; background: var(--chrome-solid); border: 1px solid var(--chrome-line); border-radius: var(--r-lg); box-shadow: var(--chrome-edge), var(--shadow-float); color: var(--chrome-fg); animation: rise var(--t) var(--ease); }
.help-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: var(--fs-md); font-weight: 650; }
/* help card contents (guide.js renderHelp) */
.help-tour { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 0; border-radius: var(--r); background: var(--accent-soft); color: var(--text); text-align: left; cursor: pointer; transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.help-tour:active { transform: scale(.98); }
.help-tour__icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--accent); color: var(--on-accent); }
.help-tour__icon svg { width: 20px; height: 20px; }
.help-tour__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.help-tour__text strong { font-size: var(--fs-md); font-weight: 650; }
.help-tour__text small { font-size: var(--fs-sm); color: var(--text-2); }
.help-ref__title { margin: 16px 0 4px; font-size: var(--fs-sm); font-weight: 650; color: var(--chrome-fg-2); }
.help-ref { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); margin: 0; font-size: 13px; }   /* shared width: neither column squeezes the other into one-word lines */
.help-ref dt, .help-ref dd { padding: 8px 0; border-bottom: 1px solid var(--chrome-line); }
.help-ref dt:nth-last-of-type(1), .help-ref dd:nth-last-of-type(1) { border-bottom: 0; }
.help-ref dt { padding-right: 14px; color: var(--chrome-fg-2); }
.help-ref dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 3px; color: var(--chrome-fg); font-weight: 560; text-align: right; }
kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--surface-2); color: var(--text); font: 650 11.5px/1 var(--font); }
.ref-plus { margin: 0 2px; color: var(--text-3); font-weight: 500; }

/* ============================================================ guided tour (guide.js) ============================================================ */
.tour { position: fixed; inset: 0; z-index: 85; touch-action: none; opacity: 0; transition: opacity .3s var(--ease); }
.tour.is-open { opacity: 1; }
.tour.is-closing { opacity: 0; pointer-events: none; }
/* the dim is the spotlight's own giant shadow: one element, so the hole glides between zones */
.tour__spot { position: fixed; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 80%, transparent), 0 0 0 200vmax rgba(12, 11, 9, .5);
  transition: left .45s var(--ease), top .45s var(--ease), width .45s var(--ease), height .45s var(--ease), border-radius .45s var(--ease), opacity .3s var(--ease); }
:root[data-theme="dark"] .tour__spot { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 80%, transparent), 0 0 0 200vmax rgba(0, 0, 0, .62); }
.tour__card { position: fixed; width: 360px; padding: 18px 20px 18px; outline: none; background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-xl); box-shadow: 0 34px 80px -28px rgba(0, 0, 0, .55), var(--shadow-float); transition: opacity .16s var(--ease), transform .16s var(--ease); }
.tour.is-open .tour__card { transition: left .45s var(--ease), top .45s var(--ease), opacity .16s var(--ease), transform .16s var(--ease); }
.tour__card.is-changing { opacity: 0; transform: translateY(4px); }
.tour__top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tour__art { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); }
.tour__art svg { width: 20px; height: 20px; }
.tour__count { font-size: var(--fs-sm); font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tour__close { margin-left: auto; }
.tour__title { margin: 0 0 6px; font-size: 18px; font-weight: 680; line-height: 1.3; letter-spacing: -.012em; }
.tour__body { margin: 0; font-size: var(--fs-md); line-height: 1.55; color: var(--text-2); }
.tour__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.tour__dots { display: flex; align-items: center; gap: 5px; }
.tour__dots i { display: block; width: 6px; height: 6px; border-radius: 3px; background: var(--line-strong); transition: width var(--t) var(--ease), background-color var(--t) var(--ease); }
.tour__dots i.on { width: 18px; background: var(--ink); }
.tour__nav { display: flex; gap: 8px; }
.tour__nav .btn { height: 40px; padding: 0 16px; }
.btn--accent { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }

/* ============================================================ settings row (.utilities) ============================================================ */
/* Backdrop (light/dark studio), render quality, Help. Desktop: a tray in the panel header, level with the tabs (see
   "inspector panel"), so the scene carries no floating settings and they fold away with the panel. Phones: ui.js moves
   the row onto the stage, a compact icon capsule in the top-right corner with Share added (the panel is a bottom sheet
   there). */
.utilities { position: absolute; z-index: 6; top: calc(var(--edge) + var(--safe-t)); right: var(--edge); flex-direction: row; }

/* panel handle: a glass tab centred on the seam between scene and inspector (it lives on the stage's right edge,
   so it travels with the seam as the panel slides, and ends at the window edge when collapsed) */
/* `.stage >` outranks the generic `[data-tooltip] { position: relative }` (same specificity, declared later) */
.stage > .panel-handle { position: absolute; z-index: 7; right: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 28px; height: 84px; padding: 0; border: 1px solid var(--chrome-line); border-right: 0; border-radius: 14px 0 0 14px; background: var(--chrome-bg); -webkit-backdrop-filter: var(--chrome-blur); backdrop-filter: var(--chrome-blur); box-shadow: var(--chrome-edge), var(--shadow-float); color: var(--chrome-fg); cursor: pointer; transition: width var(--t) var(--ease), background-color var(--t-fast) var(--ease); }
.panel-handle svg { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.app.panel-collapsed .panel-handle svg { transform: rotate(180deg); }
.panel-handle[data-tooltip]::after { left: auto; right: calc(100% + 10px); top: 50%; transform: translate(4px, -50%); }
.panel-handle[data-tooltip]:hover::after, .panel-handle[data-tooltip]:focus-visible::after { transform: translate(0, -50%); }

/* ============================================================ tool dock ============================================================ */
/* Never a scroll container: ui.js fitToolbar() tightens the dock, then shows icons only, until it fits (phones: rows).
   Centred with left/right + auto margins, not left:50% + translate — that form leaves an absolutely positioned box only
   HALF the stage to size itself in, which is what made the labelled dock overflow (and scroll) in a roomy stage. */
.toolbar { position: absolute; z-index: 5; left: 0; right: 0; margin-inline: auto; width: fit-content; bottom: calc(var(--edge) + 4px + var(--safe-b)); gap: 2px; padding: 5px; border-radius: 20px; max-width: calc(100% - 2 * var(--edge)); overflow: visible; }
.toolbar.toolbar--tight { gap: 0; padding: 4px; }
.app .toolbar.toolbar--tight .tool { min-width: 44px; padding: 0 8px; font-size: 11.5px; }   /* beats the compact sizes */
/* stacked (ui.js fitToolbar, before icons only): every label stays visible, on up to two lines under its icon, so a
   tablet's narrow stage (768: 384 px beside the panel) keeps a labelled dock of 48 px+ targets */
.app .toolbar.toolbar--stack .tool { min-width: 48px; height: 60px; padding: 0 2px; gap: 4px; font-size: 11.5px; }
.toolbar.toolbar--stack .tool > :is(span[data-i], .view-label) { max-width: 80px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; line-height: 1.12; text-align: center; overflow-wrap: normal; }
.toolbar.toolbar--stack .view-cycle { min-width: 48px; }
.toolbar.toolbar--stack .toolbar__sep { margin: 10px 1px; }
/* tablets and short windows (761–1023 px): a narrower panel leaves the stage room for that labelled dock (768: 464 px);
   a short window keeps 320 px so its one-row header (tabs + settings) fits */
@media (min-width: 761px) and (max-width: 1023px) {
  :root { --panel-w: 304px; }
  .app:not(.phone-layout) .panel__body { --pad: 20px; }
  .app:not(.phone-layout) .panel__head .util__label { display: none; }   /* icons: their names in aria-label + tooltip */
}
@media (min-width: 761px) and (max-width: 1023px) and (hover: hover), (min-width: 761px) and (max-height: 480px) and (hover: hover) {
  .app:not(.phone-layout) .panel__head .utilities [data-tooltip]::after { display: block; }
}
.app .toolbar.toolbar--icons .tool { min-width: 44px; height: 46px; padding: 0 7px; }
.toolbar.toolbar--icons .toolbar__sep { margin: 8px 2px; }
.toolbar.toolbar--icons .tool > span[data-i], .toolbar.toolbar--icons .tool > .view-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.toolbar [data-tooltip]::after { top: auto; bottom: calc(100% + 10px); transform: translate(-50%, 4px); }
.toolbar [data-tooltip]:hover::after, .toolbar [data-tooltip]:focus-visible::after { transform: translate(-50%, 0); }
.toolbar__sep { flex: none; width: 1px; align-self: stretch; margin: 10px 5px; background: var(--chrome-line); }
/* the camera group (Look around · Walk · View) sits first in the dock; on desktop its wrapper is layout-neutral */
.toolbar__group { display: contents; }
.tool__icon { position: relative; display: grid; place-items: center; }
/* "Look around": the lock badge appears only while the mode is on ("doors won't move") */
.lock-badge { position: absolute; right: -7px; bottom: -5px; display: none; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--chrome-solid); color: var(--chrome-fg); box-shadow: 0 0 0 1px var(--chrome-line), 0 1px 3px rgba(0, 0, 0, .25); }
.tool .lock-badge svg { width: 10px; height: 10px; stroke-width: 2.4; }
#btnCamera[aria-pressed="true"] .lock-badge { display: grid; animation: badgeIn .22s var(--ease-spring); }
@keyframes badgeIn { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
/* View: icon of the view on screen + its name as the label + four position dots across the top */
.view-cycle { position: relative; min-width: 78px; }
.view-cycle .vi { display: none; }
.view-cycle[data-state="free"] .vi--free, .view-cycle[data-state="iso"] .vi--iso, .view-cycle[data-state="front"] .vi--front,
.view-cycle[data-state="isoLeft"] .vi--isoLeft, .view-cycle[data-state="top"] .vi--top { display: block; animation: viewIconIn .24s var(--ease); }
@keyframes viewIconIn { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
.view-dots { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; height: 3px; }
.view-dots i { display: block; width: 3px; height: 3px; border-radius: 2px; background: currentColor; opacity: .3; transition: width var(--t) var(--ease), opacity var(--t) var(--ease); }
.view-dots i.on { width: 9px; opacity: 1; }
.tool { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 72px; height: 60px; padding: 0 12px; border: 0; border-radius: 15px; background: transparent; color: var(--chrome-fg); cursor: pointer; font-size: 12px; font-weight: 580; white-space: nowrap; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.tool svg { width: 22px; height: 22px; }
.tool span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tool:active:not(:disabled) { transform: scale(.95); }
.tool[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.tool--accent { background: var(--accent-fill); color: var(--on-accent); }
.tool:disabled { opacity: .38; cursor: default; }

/* ============================================================ stage cards & HUDs ============================================================ */
.selcard { position: absolute; z-index: 6; top: calc(var(--topbar-h) + var(--safe-t)); left: var(--edge); display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; padding: 10px 8px 10px 16px; background: var(--chrome-bg); -webkit-backdrop-filter: var(--chrome-blur); backdrop-filter: var(--chrome-blur); border: 1px solid var(--chrome-line); border-radius: var(--r-lg); box-shadow: var(--chrome-edge), var(--shadow-float); color: var(--chrome-fg); max-width: min(380px, calc(100% - 300px)); animation: rise var(--t) var(--ease); }
.selcard::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.selcard__title { font-weight: 650; font-size: var(--fs-md); }
.selcard__size { grid-column: 1; color: var(--chrome-fg-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.selcard .icon-btn { grid-row: 1 / span 2; grid-column: 2; color: var(--chrome-fg-2); }

.hint { position: absolute; z-index: 6; top: calc(var(--topbar-h) + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 320px); padding: 10px 16px; background: var(--chrome-bg); -webkit-backdrop-filter: var(--chrome-blur); backdrop-filter: var(--chrome-blur); border: 1px solid var(--chrome-line); border-radius: var(--r-pill); box-shadow: var(--chrome-edge), var(--shadow-float); color: var(--chrome-fg); font-size: 13px; font-weight: 520; text-align: center; animation: riseX var(--t) var(--ease); }
.hint::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hint[hidden] { display: none; }
.hint--pulse { animation: hintPulse .9s var(--ease); }
@keyframes hintPulse { 0%, 100% { box-shadow: var(--shadow-float); } 30% { box-shadow: 0 0 0 3px var(--accent), var(--shadow-float); } }

.fly-hud { position: absolute; z-index: 6; left: 50%; bottom: calc(104px + var(--safe-b)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-radius: var(--r-pill); background: var(--chrome-bg); -webkit-backdrop-filter: var(--chrome-blur); backdrop-filter: var(--chrome-blur); border: 1px solid var(--chrome-line); box-shadow: var(--chrome-edge), var(--shadow-float); font-size: var(--fs-sm); font-weight: 600; color: var(--chrome-fg); animation: riseX var(--t) var(--ease); }
.fly-hud__bar { width: 84px; height: 4px; border-radius: 2px; background: var(--chrome-line); overflow: hidden; }
.fly-hud__fill { height: 100%; width: 50%; border-radius: 2px; background: var(--ink); transition: width .12s linear; }
.fly-hud__value { font-variant-numeric: tabular-nums; min-width: 12px; text-align: center; }

.walk-pad { position: absolute; z-index: 6; left: var(--edge); right: var(--edge); bottom: calc(100px + var(--safe-b)); display: flex; align-items: flex-end; justify-content: space-between; pointer-events: none; touch-action: none; }
.walk-pad > * { pointer-events: auto; }
.joy { position: relative; width: 124px; height: 124px; border-radius: 50%; background: var(--chrome-bg); -webkit-backdrop-filter: var(--chrome-blur); backdrop-filter: var(--chrome-blur); border: 1px solid var(--chrome-line); box-shadow: var(--chrome-edge), var(--shadow-float); touch-action: none; }
.joy::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; border: 1px solid var(--chrome-line); }
.joy__knob { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: var(--ink); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); }
.walk-vert { display: flex; flex-direction: column; gap: 10px; }
.walk-vert .icon-btn { width: 54px; height: 54px; border-radius: 50%; background: var(--chrome-bg); -webkit-backdrop-filter: var(--chrome-blur); backdrop-filter: var(--chrome-blur); border: 1px solid var(--chrome-line); box-shadow: var(--shadow-float); color: var(--chrome-fg); touch-action: none; }

@keyframes rise { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes riseX { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.selcard[hidden], .hint[hidden] { animation: none; }

/* ============================================================ tooltips (ui.js applyStrings → data-tooltip) ============================================================ */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip); position: absolute; z-index: 40; left: 50%; top: calc(100% + 10px); transform: translate(-50%, -4px);
  padding: 6px 10px; border-radius: var(--r-sm); background: var(--ink); color: var(--on-ink); font-size: var(--fs-sm); font-weight: 550; line-height: 1.3; letter-spacing: 0;
  white-space: nowrap; opacity: 0; pointer-events: none; box-shadow: var(--shadow-float); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); transition-delay: .25s; }
/* top-right row: tooltips open below, right-aligned, so none runs off the stage's right edge */
.utilities [data-tooltip]::after { left: auto; right: 0; top: calc(100% + 10px); transform: translate(0, -4px); }
.utilities [data-tooltip]:hover::after, .utilities [data-tooltip]:focus-visible::after { transform: translate(0, 0); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (hover: none) { [data-tooltip]::after { display: none; } }

/* ============================================================ in-scene annotations (CSS2D, dims.js) ============================================================ */
.dim-label { padding: 3px 8px; border-radius: var(--r-xs); background: var(--ink); color: var(--on-ink); font: 600 11.5px/1.3 var(--font); letter-spacing: .01em; white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .3); }
.dim-label--sel { background: var(--accent-fill); color: var(--on-accent); padding: 4px 10px; border-radius: var(--r-pill); }
.dim-label--measure { background: var(--signal); color: var(--on-signal); font-size: 12px; padding: 4px 9px; }
.dim-label--preview { background: var(--chrome-solid); color: var(--chrome-fg); border: 1px solid var(--chrome-line); font-size: 12px; pointer-events: none; }
.dim-label--preview.is-ortho { background: var(--signal); color: var(--on-signal); border-color: transparent; }
.measure-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--signal); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
/* snap reticle — only box-shadow is animated: CSS2DRenderer owns the inline `transform` */
.snap-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 22%, transparent); pointer-events: none; }
.snap-dot--mid { width: 13px; height: 13px; border-radius: 3px; }
.snap-dot--edge { width: 11px; height: 11px; background: var(--signal); border-color: #fff; box-shadow: 0 0 0 2px var(--signal); }
.snap-dot--ortho { width: 11px; height: 11px; border-radius: 2px; background: var(--signal); border-color: #fff; box-shadow: 0 0 0 2px var(--signal); }
.snap-dot--vertex { animation: snapPulse 1s var(--ease) infinite; }
@keyframes snapPulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 22%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--signal) 6%, transparent); } }

/* ============================================================ inspector panel ============================================================ */
.panel { grid-area: panel; position: relative; z-index: 20; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--surface); border-left: 1px solid var(--line); }
.app.panel-collapsed .panel { border-left: 0; }
.sheet-handle, .sheet-toggle { display: none; }
/* Three zones: header (the settings row, then Materials | Info), a scrolling body whose own header sticks (part switch +
   collections), and a footer that never scrolls away (the demo call to action). */
.panel__head { flex: none; display: flex; flex-direction: column; padding: var(--safe-t) 0 0; border-bottom: 1px solid var(--line); }
.tabs { flex: none; min-width: 0; display: flex; gap: 26px; height: 56px; padding: 0 24px; }
/* the settings row: the panel's own top row — three equal, labelled buttons in a quiet tray, room around each */
.panel__head > .utilities { position: relative; inset: auto; z-index: 5; display: flex; gap: 4px; margin: 14px 16px 2px; padding: 4px; background: var(--surface-2); -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); }
.panel__head .util { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 7px; width: auto; min-width: 0; height: 40px; padding: 0 8px; border-radius: 10px; color: var(--text-2); font-size: 13px; font-weight: 620; }
.panel__head .util svg { flex: none; width: 19px; height: 19px; }
.panel__head .util__badge { flex: none; }
.panel__head .util__label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel__head .utilities [data-tooltip]::after { display: none; }   /* the labels say it */
@media (hover: hover) { .panel__head > .utilities .util:hover { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); } }
.panel__head > .utilities .util[aria-expanded="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
.tab { position: relative; flex: none; height: 100%; padding: 0; border: 0; background: transparent; color: var(--text-3); font-size: 15px; font-weight: 620; letter-spacing: -.005em; cursor: pointer; transition: color var(--t-fast) var(--ease); }
.tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--text); transform: scaleX(0); transition: transform var(--t) var(--ease); }
.tab[aria-selected="true"] { color: var(--text); }
.tab[aria-selected="true"]::after { transform: scaleX(1); }
/* --pad is the gutter. Top padding is 0: anything above a sticky child would be scroll space that content
   passes through above the stuck header — the category bar brings its own padding instead. */
.panel__body { --pad: 24px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--pad) calc(28px + var(--safe-b)); touch-action: pan-y; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

/* category bar (Fronts / Carcass / Countertop, the two sections, then the kind chips or the library search): sticky,
   full-bleed, opaque; a hairline under the section tabs */
.cat-bar { position: sticky; top: 0; z-index: 3; margin: 0 calc(var(--pad) * -1); padding: 18px var(--pad) 14px; background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); }
.coll-tabs { display: flex; gap: 22px; margin: 4px calc(var(--pad) * -1) 0; padding: 0 var(--pad); box-shadow: inset 0 -1px 0 var(--line); }
.cat-bar > .coll-tabs:last-child { margin-bottom: -14px; }
/* the two sections share the width: "Frequently used" | "Full library · 2,500+" (a long label wraps, never clips) */
.coll-tabs--sections { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.coll-tabs--sections .coll-tab { justify-content: flex-start; min-height: 46px; height: auto; padding: 9px 0; white-space: normal; text-align: left; line-height: 1.25; }
.coll-tab__text { display: inline; }
.coll-tab__text > * { vertical-align: baseline; }
.coll-tab__text small { margin-left: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.coll-tab__text svg { display: inline-block; width: 13px; height: 13px; margin-left: 4px; vertical-align: -1px; color: var(--accent); }
/* "Frequently used": Solid · Wood · Stone */
.kind-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.kind-chips .chip { position: relative; }
.kind-chips .chip.has-sel:not([aria-pressed="true"])::after { content: ""; position: absolute; top: 5px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
/* the library's search, under the section tabs */
.cat-search { display: block; height: 40px; margin: 14px 0 0; }
.coll-tabs:first-child { margin-top: -6px; }
.coll-tab { position: relative; flex: none; display: flex; align-items: center; gap: 6px; height: 42px; padding: 0; border: 0; background: transparent; color: var(--text-3); font-size: 13.5px; font-weight: 620; white-space: nowrap; cursor: pointer; transition: color var(--t-fast) var(--ease); }
.coll-tab svg { width: 14px; height: 14px; color: var(--accent); }
.coll-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--text); transform: scaleX(0); transition: transform var(--t) var(--ease); }
.coll-tab[aria-pressed="true"] { color: var(--text); }
.coll-tab[aria-pressed="true"]::after { transform: scaleX(1); }
/* the finish on the model lives in another collection: a brass dot on that tab */
.coll-tab.has-sel:not([aria-pressed="true"])::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.coll { padding-top: 18px; }
.coll__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; font-size: var(--fs-xs); line-height: 1.4; color: var(--text-3); }
.coll__meta small { flex: none; font-size: inherit; font-variant-numeric: tabular-nums; }
.coll__meta small:empty { display: none; }
.sel-block .section { margin: 18px 0 0; }
.coll__loading { margin-top: 14px; }
.segmented { display: flex; gap: 2px; padding: 4px; border-radius: var(--r); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
/* labels wrap to two lines rather than truncating a long name (e.g. Armenian "Աշխատանքային մակերես") */
.segmented button { flex: 1; min-width: 0; min-height: 38px; padding: 4px 8px; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.15; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font-size: 13.5px; font-weight: 600; cursor: pointer; overflow-wrap: break-word; hyphens: auto; transition: background-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line-strong); }

.section { margin: 18px 0 26px; }
.section__title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 14px; font-size: 13px; font-weight: 650; letter-spacing: -.003em; color: var(--text); }
.section__title small { font-size: var(--fs-xs); font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* material swatches */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 16px 12px; }
.swatch { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; padding: 0; border: 0; background: transparent; text-align: center; cursor: pointer; }
.swatch__chip { position: relative; display: block; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--chip-edge); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.swatch__chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A name wraps only BETWEEN words (never "Նախնակա / ն"), at most two lines. It may use half of each neighbouring gap
   (6 px a side), so a 10-letter Armenian word (≈ 72 px at 12 px, "մոխրագույն") fits a 75 px cell; the display names
   (i18n.js decorLabel) keep every word within that. A longer supplier name is clipped at the line end, never split. */
.swatch__name { margin: 0 -6px; font-size: 12px; line-height: 16px; color: var(--text-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: normal; word-break: normal; hyphens: manual; transition: color var(--t-fast) var(--ease); }
.swatch:active .swatch__chip { transform: scale(.96); }
.swatch[aria-pressed="true"] .swatch__chip { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent); }
.swatch[aria-pressed="true"] .swatch__chip::after { content: ""; position: absolute; right: 6px; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='m7 12.5 3.2 3.2L17 9'/%3E%3C/svg%3E") center/14px no-repeat; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.swatch[aria-pressed="true"] .swatch__name { color: var(--text); font-weight: 600; }
.swatch--original .swatch__chip { background: repeating-conic-gradient(var(--surface-3) 0 25%, var(--surface) 0 50%) 0 0 / 14px 14px; }

/* filters / search */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.chip { height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.select, .search { height: 42px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--fs-md); padding: 0 14px; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.select { flex: 1; min-width: 150px; -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%239b958b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.search { width: 100%; margin-bottom: 16px; padding-left: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%239b958b' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 13px center; background-size: 18px; }
.search::placeholder { color: var(--text-3); }
.select:focus, .search:focus { outline: none; border-color: var(--text-3); background-color: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.muted { color: var(--text-2); font-size: 13px; }
.more { width: 100%; margin-top: 16px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: var(--r); background: transparent; color: var(--text); font-size: var(--fs-md); font-weight: 620; text-decoration: none; cursor: pointer; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-row .btn { flex: 1 1 140px; }

/* product cards (catalog.js) */
.product-card { margin-bottom: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); font-size: 13px; }
.product-card__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 4px; font-size: var(--fs-md); font-weight: 650; }
.product-card__line, .product-card__refs, .product-card__suppliers { margin-top: 3px; color: var(--text-2); }
.product-card__refs { font-variant-numeric: tabular-nums; }
.product-card__suppliers { margin-top: 6px; }
.product-card a { color: var(--accent-strong); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.product-card__link { display: inline-block; margin-top: 6px; }
.product-card__more { margin-top: 8px; }
.product-card__more summary { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: 620; color: var(--accent-strong); cursor: pointer; list-style: none; }
.product-card__more summary::-webkit-details-marker { display: none; }
.product-card__more summary::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--t-fast) var(--ease); }
.product-card__more[open] summary::after { transform: rotate(90deg); }
.product-card__more > *:not(summary) { margin-top: 6px; }
.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 650; letter-spacing: .01em; }
.badge--ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.badge--warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }

/* info tab */
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 0; font-size: var(--fs-md); }
/* the dimensions list (first section of Info): measurements never break — the labels wrap instead */
#tabInfo > .section:first-child .kv { grid-template-columns: minmax(0, 1fr) auto; }
#tabInfo > .section:first-child .kv dd { white-space: nowrap; }
.kv dt, .kv dd { padding: 11px 0; border-bottom: 1px solid var(--line); }
.kv dt { color: var(--text-2); font-size: 13.5px; padding-right: 16px; }
.kv dd { margin: 0; font-weight: 620; text-align: right; overflow-wrap: break-word; font-variant-numeric: tabular-nums; }
.note-warn { margin: 0; padding: 10px 12px; border-radius: var(--r); background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); font-size: 13px; line-height: 1.5; }
/* Save image: a brief camera-shutter flash over the stage */
.shutter { position: absolute; inset: 0; z-index: 30; pointer-events: none; background: #fff; animation: shutter .42s var(--ease) forwards; }
@keyframes shutter { 0% { opacity: 0; } 18% { opacity: .75; } 100% { opacity: 0; } }
.note { margin-top: 22px; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-3); }

/* ============================================================ toasts / dialog / loading ============================================================ */
.toasts { position: fixed; z-index: 80; left: 50%; bottom: calc(112px + var(--safe-b)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
body:has(.dialog-backdrop:not([hidden])) .toasts { top: calc(16px + var(--safe-t)); bottom: auto; }
.toast { padding: 11px 18px; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); font-size: 13.5px; font-weight: 550; text-align: center; box-shadow: var(--shadow-float); opacity: 0; transform: translateY(10px) scale(.97); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease-spring); }
.toast.show { opacity: 1; transform: none; }

.dialog-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(12, 11, 9, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fadeIn var(--t) var(--ease); }
.dialog { width: min(460px, 100%); max-height: calc(100dvh - 40px); overflow: auto; padding: 10px 24px 24px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-xl); box-shadow: var(--shadow-float); animation: dialogIn .28s var(--ease); }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes dialogIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; }
.dialog__title { margin: 0; font-size: 17px; font-weight: 680; letter-spacing: -.01em; }
.dialog__body { display: flex; flex-direction: column; gap: 14px; }
.qr { display: grid; place-items: center; padding: 14px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.qr svg { width: min(232px, 68vw); height: auto; }
.linkbox { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); color: var(--text); font: 13px/1.45 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; resize: none; }
.ql-link { display: grid; place-items: center; gap: 10px; text-decoration: none; }
.ql-link img { width: 100%; max-height: 200px; object-fit: cover; border-radius: var(--r); }
.spinner { width: 30px; height: 30px; margin: 8px auto; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--text); animation: spin .85s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.loading { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; background: var(--bg); text-align: center; transition: opacity .45s var(--ease); }
.loading.done { opacity: 0; pointer-events: none; }
.loading__mark { width: 60px; height: 60px; margin-bottom: 6px; border-radius: 16px; box-shadow: 0 14px 30px -14px rgba(111, 75, 18, .65); animation: breathe 2.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.loading__brand { font-size: 12px; font-weight: 750; letter-spacing: .24em; color: var(--text); }
.loading__text { font-size: 13px; color: var(--text-2); }
.progress { width: min(220px, 60vw); height: 2px; margin-top: 6px; border-radius: 2px; background: var(--line); overflow: hidden; }
.progress__bar { height: 100%; width: 2%; background: var(--accent); transition: width .3s var(--ease); }
.loading__error { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 420px; color: var(--danger); }

/* ============================================================ AR overlay (always over a camera feed: dark glass) ============================================================ */
.ar-overlay { --chrome-bg: rgba(18, 17, 15, .72); --chrome-line: rgba(255, 255, 255, .14); --chrome-fg: #f7f4ee;
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; justify-content: space-between; padding: calc(12px + var(--safe-t)) 12px calc(18px + var(--safe-b)); color: var(--chrome-fg); pointer-events: auto; touch-action: none; }
.ar-ui { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.ar-top { flex-wrap: wrap; }
.ar-bottom { justify-content: center; }
.ar-btn { min-width: 48px; height: 48px; padding: 0 16px; border: 1px solid var(--chrome-line); border-radius: var(--r-pill); background: var(--chrome-bg); -webkit-backdrop-filter: var(--chrome-blur); backdrop-filter: var(--chrome-blur); color: var(--chrome-fg); font-size: var(--fs-md); font-weight: 600; transition: transform var(--t-fast) var(--ease); }
.ar-btn:active { transform: scale(.94); }
.ar-btn--round { width: 48px; padding: 0; font-size: 20px; }
.ar-hint, .ar-size { padding: 10px 16px; border: 1px solid var(--chrome-line); border-radius: var(--r-pill); background: var(--chrome-bg); -webkit-backdrop-filter: var(--chrome-blur); backdrop-filter: var(--chrome-blur); font-size: var(--fs-md); }
.ar-hint { flex: 1; }
.ar-size { font-size: 13px; font-variant-numeric: tabular-nums; }

/* ============================================================ hover (only where hover exists) ============================================================ */
@media (hover: hover) {
  .capsule .icon-btn:hover:not([aria-pressed="true"]), .tool:not(:disabled):not([aria-pressed="true"]):not(.tool--accent):hover { background: var(--chrome-hover); }
  .tool--accent:hover { background: var(--accent-fill-hover); }
  .panel-handle:hover { width: 34px; background: var(--chrome-solid); }
  .icon-btn--sm:hover { background: var(--surface-2); color: var(--text); }
  .tab:hover { color: var(--text-2); }
  .tab[aria-selected="true"]:hover { color: var(--text); }
  .segmented button:hover:not([aria-pressed="true"]) { color: var(--text); }
  .chip:hover:not([aria-pressed="true"]) { border-color: var(--line-strong); color: var(--text); }
  .btn:hover { border-color: var(--text-2); }
  .btn--primary:hover { background: var(--text-2); border-color: var(--text-2); }
  .btn--accent:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); }
  .help-tour:hover { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
  .swatch:hover .swatch__chip { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 10px 18px -12px rgba(0, 0, 0, .45); }
  .swatch[aria-pressed="true"]:hover .swatch__chip { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent), 0 10px 18px -12px rgba(0, 0, 0, .45); }
  .swatch:hover .swatch__name { color: var(--text); }
}

/* ======================================================================================================================
 * PHONE — a dedicated product, not a squeezed desktop.
 *  - Top: brand + language only; rarely used settings (studio, quality, help) move into a More menu.
 *  - Right edge, low: the camera rail in the right thumb's natural arc.
 *  - Bottom: a full-width tool dock with 48 px+ targets, sitting on the bottom sheet.
 *  - Sheet: collapsed it is a swipeable strip of materials (tap = restyle, no panel needed); drag or tap the
 *    handle for the full inspector. Tabs appear only once it is open.
 * ==================================================================================================================== */
@media (max-width: 760px), (max-height: 480px) and (pointer: coarse) and (orientation: portrait) {
  :root { --edge: 12px; --topbar-h: 64px; --sheet-peek: 150px; --sheet-closed: 44px; }
  .app, .app.panel-collapsed { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) calc(var(--sheet-row, var(--sheet-peek)) + var(--safe-b)); grid-template-areas: "stage" "sheet"; }

  /* top row: the brand alone */
  .topbar { padding: calc(10px + var(--safe-t)) var(--edge) 0 calc(var(--edge) + 2px); gap: 8px; }
  .brand { gap: 10px; padding-top: 2px; }
  .brand__mark { width: 32px; height: 32px; border-radius: 9px; }
  .brand__logo { font-size: 10px; letter-spacing: .14em; }
  .stage > .panel-handle { display: none; }   /* same specificity as the base rule, or it stays visible on phones */

  /* utilities join the top row: a horizontal capsule right of the brand — the sides of the scene stay clear */
  .brand { padding-top: 7px; }
  .topbar { padding-right: calc(var(--edge) + 184px); }   /* reserve the utilities capsule: a long kitchen name ends in … */
  .utilities { top: calc(10px + var(--safe-t)); left: auto; right: var(--edge); flex-direction: row; padding: 3px; border-radius: 16px; }
  .utilities .icon-btn { width: 40px; height: 40px; border-radius: 13px; }
  .utilities [data-tooltip]::after { display: none; }
  .help-card { top: calc(10px + 56px + var(--safe-t)); left: auto; right: var(--edge); width: min(340px, calc(100vw - 2 * var(--edge))); max-height: calc(100dvh - 80px - var(--sheet-row, var(--sheet-peek)) - var(--safe-t)); overflow: auto; }

  /* tool dock: full width, equal targets */
  /* tab-bar proportions: every label fits in hy/ru/en (verified by overflow check), AR is a compact tile */
  .toolbar { left: 8px; right: 8px; width: auto; margin-inline: 0; bottom: 10px; transform: none; flex-wrap: wrap; justify-content: space-between; gap: 0; padding: 3px; border-radius: 22px; max-width: none; }
  .toolbar__sep { display: none; }
  /* nine labelled tools can't share 360 px: the camera group becomes the dock's compact first row */
  .toolbar__group--camera { display: flex; flex: 1 0 100%; gap: 2px; margin-bottom: 3px; padding-bottom: 3px; border-bottom: 1px solid var(--chrome-line); }
  .toolbar__group--camera .tool { flex-direction: row; gap: 8px; height: 42px; font-size: 12px; border-radius: 14px; }
  .toolbar__group--camera .tool svg { width: 20px; height: 20px; }
  .toolbar__group--camera .view-cycle { min-width: 0; }
  .toolbar__group--camera #btnCamera { flex-grow: 1.9; }   /* its label is by far the longest in hy/ru */
  .toolbar__group--camera .view-dots { top: 4px; }
  /* basis 44px (not 0): zero-basis items would still "fit" beside the full-width camera row and collapse to 0 px
     instead of wrapping onto row two together */
  .tool { flex: 1 1 44px; min-width: 0; height: 58px; padding: 0; gap: 5px; border-radius: 18px; font-size: 10.5px; font-weight: 600; letter-spacing: -.01em; }
  .tool--accent { flex: 0 0 48px; margin: 0 1px; }
  .toolbar #btnSnap { flex: 1 1 68px; }   /* the longest label of row two (hy "Լուսանկարել"): never below its width */
  .tool svg { width: 22px; height: 22px; }

  .selcard { top: calc(var(--topbar-h) + var(--safe-t)); left: var(--edge); right: var(--edge); max-width: none; }
  .hint { top: calc(var(--topbar-h) + var(--safe-t)); max-width: calc(100% - 2 * var(--edge)); font-size: 13px; padding: 10px 14px; text-align: left; border-radius: var(--r-lg); }
  .walk-pad { left: var(--edge); right: var(--edge); bottom: calc(10px + 128px); }
  /* on a phone the bottom belongs to the dock and the sheet — toasts drop in under the top row instead */
  .toasts { top: calc(var(--topbar-h) + var(--safe-t)); bottom: auto; }
  .toast { transform: translateY(-10px) scale(.97); }

  /* bottom sheet */
  .panel { grid-area: sheet; position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--sheet-h, var(--sheet-peek)) + var(--safe-b)); border: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--surface); box-shadow: var(--shadow-sheet); transition: height .36s var(--ease); }
  .panel.dragging { transition: none; }
  .sheet-handle { display: grid; place-items: center; flex: none; height: 26px; cursor: grab; touch-action: none; }
  .sheet-handle span { width: 40px; height: 5px; border-radius: 3px; background: var(--line-strong); transition: background-color var(--t-fast) var(--ease), width var(--t) var(--ease); }
  .sheet-handle:active span { width: 48px; background: var(--text-3); }
  .tabs { height: 48px; gap: 24px; padding: 0; touch-action: none; }
  .tab { font-size: 15px; }
  .panel__body { --pad: 18px; padding: 0 var(--pad) calc(22px + var(--safe-b)); }
  .cat-bar { padding: 14px var(--pad) 12px; }
  .swatches { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 14px 10px; }
  .swatch__name { margin: 0 -5px; }
  .dialog-backdrop { place-items: end center; padding: 0; }
  .dialog { width: 100%; max-height: 92dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; border-width: 1px 0 0; padding-bottom: calc(24px + var(--safe-b)); animation: sheetIn .32s var(--ease); }
  /* tour: full-width docked card on the half of the screen away from the spotlight (guide.js toggles .is-top) */
  .tour__card { left: 12px; right: 12px; width: auto; top: auto; bottom: calc(12px + var(--safe-b)); padding: 18px 18px calc(16px); border-radius: var(--r-xl); }
  .tour__card.is-top { top: calc(12px + var(--safe-t)); bottom: auto; }
  .tour.is-open .tour__card { transition: opacity .16s var(--ease), transform .16s var(--ease); }
  .tour__title { font-size: 17px; }
  .tour__nav .btn { height: 46px; padding: 0 18px; }
  .help-tour { padding: 14px 12px; }
  @keyframes sheetIn { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }

  /* fold toggle: a small chevron at the sheet's top-right; folded, it becomes the whole bar ("Materials ⌃") */
  .sheet-toggle { display: flex; position: absolute; z-index: 2; top: 0; right: 6px; align-items: center; justify-content: center; gap: 8px; height: 30px; min-width: 44px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font-size: 14px; font-weight: 620; cursor: pointer; }
  .sheet-toggle svg { width: 20px; height: 20px; transition: transform var(--t) var(--ease); }
  .sheet-toggle__label { display: none; }
  .panel[data-sheet="closed"] .sheet-toggle { inset: 0; height: auto; color: var(--text); }
  .panel[data-sheet="closed"] .sheet-toggle svg { transform: rotate(180deg); }
  .panel[data-sheet="closed"] .sheet-toggle__label { display: inline; }
  .panel[data-sheet="closed"] .sheet-handle, .panel[data-sheet="closed"] .panel__head, .panel[data-sheet="closed"] .panel__body, .panel[data-sheet="closed"] .panel__foot { visibility: hidden; }

  /* collapsed sheet = material strip: category switch + one swipeable row of chips, nothing else */
  .panel__head { padding: 0 20px; }
  .panel[data-sheet="peek"] .panel__head { display: none; }
  .panel[data-sheet="peek"] .panel__body { overflow: hidden; touch-action: none; }
  .panel[data-sheet="peek"] .cat-bar { position: static; padding: 2px var(--pad) 10px; }
  .panel[data-sheet="peek"] .segmented button { min-height: 34px; font-size: 12.5px; }
  .panel[data-sheet="peek"] #tabMaterials .sel-block,
  .panel[data-sheet="peek"] #tabMaterials .coll-tabs,
  .panel[data-sheet="peek"] #tabMaterials .kind-chips,
  .panel[data-sheet="peek"] #tabMaterials .cat-search,
  .panel[data-sheet="peek"] #tabMaterials .coll > :not(.swatches) { display: none; }
  .panel[data-sheet="peek"] .cat-bar { box-shadow: none; }
  .panel[data-sheet="peek"] #tabMaterials .coll { padding-top: 0; }
  .panel[data-sheet="peek"] #tabMaterials .swatches { display: flex; gap: 10px; margin: 0 calc(var(--pad) * -1); padding: 3px var(--pad) 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding: 0 var(--pad); scrollbar-width: none; touch-action: pan-x; }
  .panel[data-sheet="peek"] #tabMaterials .swatches::-webkit-scrollbar { display: none; }
  .panel[data-sheet="peek"] #tabMaterials .swatch { flex: 0 0 54px; scroll-snap-align: start; }
  .panel[data-sheet="peek"] #tabMaterials .swatch__name { display: none; }
  .panel[data-sheet="peek"] #tabMaterials .swatch__chip { border-radius: 14px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) { .panel { will-change: height; } }
/* narrow phones: brand + utilities capsule must never overlap (measure the wordmark's TEXT — its box shrinks) */
@media (max-width: 369px) { .brand__logo { font-size: 9.5px; letter-spacing: .05em; } .brand { gap: 8px; } .tool { font-size: 10px; } .toolbar__group--camera .tool { font-size: 12px; } }
@media (max-width: 339px) { .brand__text { display: none; } }
@media (max-width: 359px) { .tool span { display: none; } .tool { height: 50px; } .toolbar__group--camera .tool span { display: block; } }
/* phone held sideways: little height — rail goes horizontal under the brand, sheet peeks as a thin bar */
@media (max-height: 480px) and (orientation: landscape) and (pointer: coarse) {
  :root { --sheet-peek: 64px; --topbar-h: 58px; }
  .app.phone-layout .panel[data-sheet="peek"] #tabMaterials .coll { display: none; }   /* phone layout only: a sideways phone now gets the side panel (short-landscape block), whose swatches must stay */
}

/* ============================================================ materials edge dock + desktop dock ============================================================ */
/* One control zone per edge (desktop): the brand top-left, settings atop the side panel (.utilities), materials on the
   right edge, the furniture actions at the bottom — the left edge stays free for orbiting.
   Materials: while the panel is folded in a page box, a DOCK attached to the right edge — in the panel handle's place,
   the edge the panel slides out of — reads top to bottom as a small exhibit: a brass swatch-fan mark over
   "Materials", the hero finishes as framed sample tiles, and a "‹" pull that slides the whole panel out right there.
   Full screen and the standalone page (.stage-clean, main.js) keep a clean canvas: the handle alone. */
.mat-strip { position: absolute; z-index: 7; right: 0; top: 50%; transform: translateY(-50%); flex-direction: column; align-items: center; gap: 0; width: 78px; padding: 12px 7px 7px 8px; border-right: 0; border-radius: 22px 0 0 22px; }
.app:not(.panel-collapsed) .mat-strip, .app.phone-layout .mat-strip, .app.stage-clean .mat-strip { display: none; }
.app.has-quick.panel-collapsed:not(.phone-layout):not(.stage-clean) .stage > .panel-handle { display: none; }
/* what it is: the mark and the word */
.mat-strip__head { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; padding: 0 0 11px; }
.mat-strip__mark { width: 30px; height: 30px; color: var(--accent); stroke-width: 1.4; }
.mat-strip__mark rect { fill: var(--chrome-solid); }
.mat-strip__mark .c3 { fill: color-mix(in srgb, var(--accent) 62%, var(--chrome-solid)); }
.mat-strip__mark .c2 { fill: color-mix(in srgb, var(--accent) 32%, var(--chrome-solid)); }
.mat-strip__mark .pin { fill: currentColor; stroke: none; }
.mat-strip__title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 700; line-height: 1.15; letter-spacing: 0; text-align: center; color: var(--chrome-fg); }
/* what it does: the finishes, framed like physical sample tiles */
.mat-strip__chips { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 12px 0; border-block: 1px solid var(--chrome-line); }
.mat-strip__chip { position: relative; flex: none; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 13px; cursor: pointer; box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .55); transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease); }
.mat-strip__chip img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
/* the frame: a hairline and a soft top light over the sample (::after belongs to the tooltip) */
.mat-strip__chip::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--chip-edge), inset 0 1px 0 rgba(255, 255, 255, .32); background: linear-gradient(180deg, rgba(255, 255, 255, .1), transparent 45%); }
.mat-strip__chip:active { transform: scale(.94); }
.mat-strip__chip[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--chrome-solid), 0 0 0 3.5px var(--accent), 0 4px 10px -6px rgba(0, 0, 0, .55); }
/* the demo showreel's finish on screen: a softer brass ring — on its tile, or on the pull for the finishes behind it */
.mat-strip__chip.is-playing { box-shadow: 0 0 0 2px var(--chrome-solid), 0 0 0 3.5px color-mix(in srgb, var(--accent) 65%, transparent), 0 4px 10px -6px rgba(0, 0, 0, .55); }
.mat-strip__more.is-playing { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 65%, transparent); color: var(--accent-strong); }
/* where everything else is: a "‹" pull that slides the whole customisation panel out from this edge */
.mat-strip__more { flex: none; display: grid; place-items: center; width: 100%; height: 46px; margin-top: 7px; padding: 0; border: 0; border-radius: 14px; background: var(--chrome-hover); color: var(--chrome-fg); cursor: pointer; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease); }
.mat-strip__more svg { width: 24px; height: 24px; stroke-width: 2; transition: transform var(--t) var(--ease); }
/* tooltips open to the left, into the scene */
.mat-strip [data-tooltip]::after { left: auto; right: calc(100% + 14px); top: 50%; transform: translate(4px, -50%); }
.mat-strip [data-tooltip]:hover::after, .mat-strip [data-tooltip]:focus-visible::after { transform: translate(0, -50%); }
@media (hover: hover) {
  .mat-strip__more:hover { background: var(--ink); color: var(--on-ink); }
  .mat-strip__more:hover svg { transform: translateX(-3px); }
  .mat-strip__chip:hover:not([aria-pressed="true"]) { transform: translateX(-3px); }
}

/* Desktop dock: the direct actions only — views, doors, dimensions, AR, screenshot — and "More" for Camera only /
   Measure / Wireframe / Share (ui.js MoreMenu drives the real buttons, hidden here). Phones keep the tools in rows. */
.app:not(.phone-layout) #btnCamera, .app:not(.phone-layout) #btnMeasure, .app:not(.phone-layout) #btnWire, .app:not(.phone-layout) .toolbar__sep--camera { display: none; }
.toolbar #btnShare { display: none; }   /* desktop: in "More"; phones: in the settings capsule */
.app.phone-layout #btnMore, .app.phone-layout .more-menu { display: none; }
.tool--more { position: relative; }
.tool--more circle { fill: currentColor; stroke: none; }
.tool--more.has-active::before { content: ""; position: absolute; top: 9px; right: calc(50% - 16px); width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--chrome-solid); }
.tool--more[aria-expanded="true"] { background: var(--chrome-hover); }
.more-menu { position: absolute; z-index: 30; right: 0; bottom: calc(100% + 10px); flex-direction: column; align-items: stretch; gap: 2px; min-width: 196px; padding: 5px; border-radius: var(--r-lg); animation: rise var(--t) var(--ease); }
.more-menu__item { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 10px; border: 0; border-radius: 11px; background: transparent; color: var(--chrome-fg); font-size: 13px; font-weight: 600; text-align: left; white-space: nowrap; cursor: pointer; transition: background-color var(--t-fast) var(--ease); }
.more-menu__item svg { flex: none; width: 20px; height: 20px; }
.more-menu__sep { flex: none; height: 1px; margin: 4px 8px; background: var(--chrome-line); }
.more-menu__item[aria-checked="true"] { background: var(--ink); color: var(--on-ink); }
@media (hover: hover) { .more-menu__item:hover:not([aria-checked="true"]) { background: var(--chrome-hover); } }
.app.compact .tool { min-width: 62px; height: 54px; padding: 0 9px; }
@media (max-width: 760px), (max-height: 480px) and (pointer: coarse) and (orientation: portrait) {
  .mat-strip { display: none; }   /* phones: the bottom sheet's own swipeable strip does this job */
}

/* ============================================================ embedded vs standalone ============================================================ */
/* In the host's iframe the site's own header carries the logo: no second brand lockup over the stage. */
.app.embedded .brand { display: none; }
/* Standalone: "Back to main website" beside the brand — a quiet glass pill, the same family as the capsules. */
.home-link { display: inline-flex; align-items: center; gap: 4px; height: 34px; margin-left: 6px; padding: 0 13px 0 8px; border: 1px solid var(--chrome-line); border-radius: var(--r-pill); background: var(--chrome-bg); -webkit-backdrop-filter: var(--chrome-blur); backdrop-filter: var(--chrome-blur); box-shadow: var(--chrome-edge), var(--shadow-sm); color: var(--chrome-fg); font-size: 12.5px; font-weight: 620; text-decoration: none; white-space: nowrap; transition: background-color var(--t-fast) var(--ease); }
.home-link svg { width: 18px; height: 18px; }
.home-link__short { display: none; }
@media (hover: hover) { .home-link:hover { background: var(--chrome-solid); } }
@media (max-width: 760px), (max-height: 480px) and (pointer: coarse) and (orientation: portrait) {
  .home-link { height: 44px; padding: 0 14px 0 8px; }
  .home-link__long { display: none; }
  .home-link__short { display: inline; }
}
/* narrow phones: the arrow alone (its label stays for screen readers), clear of the settings capsule */
@media (max-width: 400px) {
  .home-link { justify-content: center; width: 44px; padding: 0; }
  .home-link__short { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Standalone with the site's official logo (catalog.json site.logo): the logo alone. */
.brand--logo .brand__mark, .brand--logo .brand__logo { display: none; }
.brand__img { display: block; height: 34px; width: auto; }
@media (max-width: 760px), (max-height: 480px) and (pointer: coarse) and (orientation: portrait) { .brand__img { height: 28px; } }

/* ============================================================ panel footer ============================================================ */
/* Never scrolls away: the demo call to action. Empty (the client product): not drawn at all. */
.panel__foot { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px calc(14px + var(--safe-b)); border-top: 1px solid var(--line); background: var(--surface); }
.panel__foot:not(:has(> :not([hidden]))) { display: none; }

/* ============================================================ demo mode (?mode=demo) ============================================================ */
/* The demo call to action in the panel footer: a quiet paper card; the accent marks only its spark. */
.demo-card { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
/* "This is a demo." then the offer in plain words; the button under it, full width — btn--primary: ink on paper
   (paper on ink in the dark studio), the same primary as the site's "Start a project" */
.demo-card__body { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.demo-card__lead { font-weight: 700; color: var(--text); }
.demo-card__lead svg { width: 15px; height: 15px; margin-right: 5px; vertical-align: -2px; color: var(--accent); }
.demo-card__offer { color: var(--text); }
.demo-card__cta { flex: none; height: 44px; padding: 0 16px; }
@media (max-height: 640px) { .demo-card__offer { display: none; } }   /* a short frame keeps the lead and the button */
.demo-card__cta.is-pulse { animation: demo-pulse .9s var(--ease) 2; }
@keyframes demo-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } 45% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 28%, transparent); } }
/* "Premium collection": locked previews — a hint of depth, visibly out of reach (muted, a brass lock on each). */
.locked__head { display: inline-flex; align-items: center; gap: 6px; }
.locked__head svg { width: 15px; height: 15px; color: var(--accent); }
.swatch--locked .swatch__chip { filter: saturate(.85) brightness(.97); }
.swatch--locked .swatch__chip img { opacity: .9; }
.swatch--locked .swatch__name { color: var(--text-3); }
.locked__badge { position: absolute; right: 5px; bottom: 5px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--accent-strong); box-shadow: 0 1px 4px rgba(0, 0, 0, .22); }
.locked__badge svg { width: 12px; height: 12px; stroke-width: 2; }
.locked__more { display: grid; place-items: center; background: linear-gradient(145deg, var(--accent-soft), var(--surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent-strong); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* the full library (demo): its own block under the demo decors — filters, search, locked thumbnails */
.library__search { margin-bottom: 12px; }
.locked__cap { margin: 12px 0 0; font-size: var(--fs-xs); color: var(--text-3); text-align: center; }
/* a locked decor's preview card (dialog) */
.locked-card__swatch { position: relative; height: 150px; border-radius: var(--r-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--chip-edge); }
.locked-card__swatch img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9); }
.locked-card__swatch .locked__badge { width: 30px; height: 30px; right: 10px; bottom: 10px; }
.locked-card__swatch .locked__badge svg { width: 16px; height: 16px; }
.locked-card__meta { margin: 14px 0 6px; }
.locked-card__name { font-size: 16px; font-weight: 680; }
.locked-card__note { margin: 8px 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
@media (hover: hover) { .swatch--locked:hover .swatch__chip { transform: none; box-shadow: inset 0 0 0 1px var(--chip-edge), 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); } }
@media (max-width: 760px), (max-height: 480px) and (pointer: coarse) and (orientation: portrait) {
  .panel[data-sheet="peek"] .panel__foot { display: none; }   /* phones: the peek strip stays a pure colour picker */
  .panel__foot { padding: 10px 16px calc(10px + var(--safe-b)); }
  /* a half-open sheet has little height: the lead and the button on one row; the whole offer once it is pulled up */
  .demo-card { flex-direction: row; align-items: center; padding: 8px 8px 8px 14px; }
  .demo-card__body { flex: 1; min-width: 0; }
  .demo-card__offer { display: none; }
  .panel[data-sheet="full"] .demo-card { flex-direction: column; align-items: stretch; padding: 14px; }
  .panel[data-sheet="full"] .demo-card__offer { display: inline; }
}

/* ============================================================ short landscape ============================================================ */
/* The side panel with at most 480 px of height (844 × 390: a phone held sideways). Before, the header, the category
   bar and the three-line demo card left the swatches a 15 px sliver. Now: Materials | Info and the settings (icons,
   named by their aria-labels) share ONE header row; the category bar is tighter; the demo call to action is ONE 44 px
   row (the lead beside the button, the offer in the full-height layouts); the swatches take the rest, five to a row
   with their names kept for screen readers and the tooltip — two rows in view. */
@media (min-width: 761px) and (max-height: 480px) {
  :root { --panel-w: 320px; }
  .app:not(.phone-layout) .panel__head { flex-direction: row; align-items: center; gap: 8px; padding-right: 10px; }
  .app:not(.phone-layout) .tabs { order: 1; flex: 1 1 auto; height: 46px; gap: 16px; padding: 0 0 0 16px; }
  .app:not(.phone-layout) .tab { font-size: 14px; }
  .app:not(.phone-layout) .panel__head > .utilities { order: 2; flex: none; gap: 2px; margin: 0; padding: 2px; border-radius: 12px; }
  .app:not(.phone-layout) .panel__head .util { flex: none; width: 36px; height: 36px; padding: 0; gap: 0; }
  .app:not(.phone-layout) .panel__head .util__label { display: none; }
  .app:not(.phone-layout) .panel__body { --pad: 16px; padding-bottom: 12px; }
  .app:not(.phone-layout) .cat-bar { padding: 8px var(--pad); }
  .app:not(.phone-layout) .segmented { padding: 3px; }
  .app:not(.phone-layout) .segmented button { min-height: 30px; font-size: 13px; }
  .app:not(.phone-layout) .coll-tabs { margin-top: 2px; }
  .app:not(.phone-layout) .coll-tabs--sections .coll-tab { min-height: 36px; padding: 6px 0; }
  .app:not(.phone-layout) .cat-bar > .coll-tabs:last-child { margin-bottom: -8px; }
  .app:not(.phone-layout) .kind-chips { gap: 6px; margin-top: 8px; }
  .app:not(.phone-layout) .kind-chips .chip { height: 32px; }
  .app:not(.phone-layout) .cat-search { height: 36px; margin-top: 8px; }
  .app:not(.phone-layout) .coll { padding-top: 10px; }
  .app:not(.phone-layout) .swatches { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 10px 8px; }
  .app:not(.phone-layout) .swatch { gap: 0; }
  .app:not(.phone-layout) .swatch__name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .app:not(.phone-layout) .panel__foot { padding: 8px 16px calc(8px + var(--safe-b)); }
  .app:not(.phone-layout) .demo-card { flex-direction: row; align-items: center; gap: 12px; padding: 0 0 0 4px; background: none; box-shadow: none; }
  .app:not(.phone-layout) .demo-card__body { flex: 1; min-width: 0; }
  .app:not(.phone-layout) .demo-card__offer { display: none; }
  .app:not(.phone-layout) .demo-card__cta { height: 44px; }
}

/* ============================================================ reduced motion ============================================================ */
/* ======================================================================================================================
 * Full library (2026-09-29): tone sections, ONE card per decor (its finishes inside), and the inline decor inspector
 * (decor_groups.js / catalog.js decorDetail). Store availability rows are shared with the "Designed with" cards.
 * ==================================================================================================================== */
.tone-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.chip--sm { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; font-size: 12.5px; }
.chip--sm small { font-size: 11px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.chip--sm[aria-pressed="true"] small { color: inherit; opacity: .72; }
.lib-sec { margin-top: 22px; }
.lib-sec__title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 650; letter-spacing: -.003em; color: var(--text); }
.lib-sec__title small, .lib-sub__title small { font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-3); font-variant-numeric: tabular-nums; }
.lib-sub__title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 18px 0 10px; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.lib-sec__title + .lib-sub__title { margin-top: 4px; }
.lib-more { margin-top: 12px; }
.swatch__count { position: absolute; left: 5px; bottom: 5px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill); background: var(--surface); background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--text); font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; box-shadow: 0 1px 4px rgba(0, 0, 0, .22); }
/* colour-only fallback (texture rejected by QA): a flat chip with a thin inner ring, and "colour only" in its tooltip */
.swatch--flat .swatch__chip { box-shadow: inset 0 0 0 1px var(--chip-edge), inset 0 0 0 4px var(--surface); }

.decor-detail { grid-column: 1 / -1; margin: 2px 0 6px; padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); font-size: 13px; text-align: left; }
.decor-detail--inline { animation: decor-open var(--t) var(--ease); }
@keyframes decor-open { from { opacity: 0; transform: translateY(-4px); } }
.sel-block .decor-detail { margin: 0 0 10px; }
.decor-detail__head { display: flex; align-items: flex-start; gap: 12px; }
.decor-detail__chip { position: relative; flex: none; width: 44px; height: 44px; border-radius: var(--r-sm); overflow: hidden; box-shadow: inset 0 0 0 1px var(--chip-edge); }
.decor-detail__chip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.decor-detail__title { flex: 1; min-width: 0; }
.decor-detail__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--fs-md); font-weight: 650; color: var(--text); }
.decor-detail__sub { margin-top: 2px; font-size: var(--fs-sm); color: var(--text-2); }
.decor-detail__close { flex: none; width: 32px; height: 32px; margin: -6px -8px 0 0; font-size: 20px; line-height: 1; }
.decor-detail__note { margin-top: 10px; }
.decor-detail__label { margin: 14px 0 8px; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.decor-detail__finish { margin-top: 8px; color: var(--text-2); }
.decor-detail .product-card__more { margin-top: 12px; }
.variant-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.variant-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 11px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.variant-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.variant-chip__am { padding: 1px 5px; border-radius: var(--r-pill); background: var(--surface-3); background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.variant-chip[aria-pressed="true"] .variant-chip__am { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
@media (hover: hover) { .variant-chip:hover:not([aria-pressed="true"]) { border-color: var(--text-3); color: var(--text); } }
.stores { display: grid; gap: 8px; }
.stores__none { color: var(--text-3); }
.store { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.store__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-weight: 650; color: var(--text); }
.store__city { font-size: var(--fs-xs); font-weight: 500; color: var(--text-3); }
.store__listing { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 6px; font-size: var(--fs-sm); line-height: 1.45; color: var(--text-2); }
.store__codes { font-weight: 650; color: var(--text); }
.store__price { color: var(--text); font-variant-numeric: tabular-nums; }
.store__date { color: var(--text-3); }
.store__link { color: var(--accent-strong); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.product-card .stores { margin-top: 6px; }
/* phones, collapsed sheet: the library's first grid is the swipeable strip, like the "Frequently used" one */
@media (max-width: 760px), (max-height: 480px) and (pointer: coarse) and (orientation: portrait) {
  .panel[data-sheet="peek"] #tabMaterials .coll > .lib-sec:first-of-type { display: block; margin: 0; }
  .panel[data-sheet="peek"] #tabMaterials .lib-sec :is(.lib-sec__title, .lib-sub__title, .lib-more, .decor-detail, .swatches ~ .swatches) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .snap-dot--vertex, .loading__mark { animation: none; }
  .hint--pulse { animation: none; outline: 2px solid var(--accent); }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ============================================================ full screen: focus view (main.js) ============================================================ */
/* The dock's Full screen button (desktop: beside Views, after a hairline; phones: an icon in the camera row). In the
   focus view only the viewing tools stay: Views, Doors and the same button as "Exit", in one centred row; the panel or
   bottom sheet, settings, brand / back link, materials dock, hints, cards, Help and the other tools fold away. */
.fs-out { display: none; }
#btnFull[aria-pressed="true"] .fs-in { display: none; }
#btnFull[aria-pressed="true"] .fs-out { display: block; }
.app.has-full:not(.phone-layout):not(.focus-view) .toolbar__sep--camera { display: block; }
/* phones: the camera row sizes from its labels ("Camera only" is long in hy/ru), the icon-only Full screen beside them */
.app.phone-layout .toolbar__group--camera .tool { flex-basis: auto; }
.app.phone-layout:not(.focus-view) #btnFull { flex: 0 0 48px; }
.app.phone-layout:not(.focus-view) #btnFull > span { display: none; }
.app.focus-view, .app.focus-view.panel-collapsed { grid-template-columns: minmax(0, 1fr) 0px; }
@media (max-width: 760px), (max-height: 480px) and (pointer: coarse) and (orientation: portrait) {
  .app.focus-view, .app.focus-view.panel-collapsed { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 0px; }
}
/* (the walk pad stays: on touch devices Walk is one of the inspection tools kept here, and toggling full screen must
   never end a walk — main.js "full screen (focus view)") */
.app.focus-view :is(.topbar, #stageTools, .stage > .panel-handle, .mat-strip, .hint, .selcard, .help-card, .panel) { display: none !important; }
.app.focus-view .toolbar > :not(.toolbar__group--camera):not(#btnDoors) { display: none; }
.app.focus-view .toolbar__group--camera > :not(#btnView):not(#btnFull):not(#btnWalk) { display: none; }
.app.focus-view .toolbar__group--camera { display: contents; }
.app.focus-view .toolbar { left: 0; right: 0; width: fit-content; max-width: calc(100% - 2 * var(--edge)); margin-inline: auto; bottom: calc(var(--edge) + 4px + var(--safe-b)); flex-wrap: nowrap; justify-content: center; gap: 2px; padding: 5px; border-radius: 20px; }
.app.focus-view .toolbar .tool { flex: 0 0 auto; flex-direction: column; gap: 5px; min-width: 78px; height: 58px; padding: 0 12px; border-radius: 15px; font-size: 12px; }
/* one order everywhere (phone dock and focus view): Views · Doors · Walk · AR · Full screen / All tools · More */
.app.focus-view #btnView { order: 1; }
.app.focus-view #btnDoors { order: 2; }
.app.focus-view #btnWalk { order: 3; }
.app.focus-view #btnFull { order: 5; }

/* ============================================================ phone: core layout (2026-10-05) ============================================================ */
/* The founder's brief for phones: the model owns the screen; few, big tools; nothing that needs patience. Default: ONE
   dock row — Views · Doors · Walk · AR · Full screen · More (≤ 6 tools, every one ≥ 48 px) — floating over a 72 px
   material peek (the sheet's handle + one swipeable row of finishes; tap the handle or pull it up for the full
   inspector). The settings capsule that floated top right is gone: Studio, Quality and Help sit in More with Camera
   only, Measure, Dimensions, Wireframe, Screenshot and Share (ui.js _bindMore), so the top-left corner is the host's
   "Back to site" alone and the canvas keeps ~90 % of a 390 × 844 screen. Full screen keeps Views · Doors · Walk ·
   All tools (the focus view above). */
@media (max-width: 760px), (max-height: 480px) and (pointer: coarse) and (orientation: portrait) {
  :root { --sheet-peek: 72px; --dock-h: 62px; }
  .panel[data-sheet="peek"] .sheet-handle { height: 18px; }
  .panel[data-sheet="peek"] .cat-bar, .panel[data-sheet="peek"] .sheet-toggle { display: none; }
  .panel[data-sheet="peek"] #tabMaterials .swatches { padding: 4px var(--pad) 6px; }
  .panel[data-sheet="peek"] #tabMaterials .swatch { flex: 0 0 44px; }
  .panel[data-sheet="peek"] #tabMaterials .swatch__chip { border-radius: 12px; }
}
.app.phone-layout #stageTools { display: none; }
.app.phone-layout .topbar { padding-right: var(--edge); }
.app.phone-layout .toolbar { left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: 12px; flex-wrap: nowrap; justify-content: space-between; gap: 2px; padding: 3px; border-radius: 20px; }
.app.phone-layout .toolbar__group--camera { display: contents; }
.app.phone-layout .toolbar .tool { flex: 1 1 0; min-width: 0; height: 56px; padding: 0 2px; gap: 4px; flex-direction: column; border-radius: 16px; font-size: 12px; letter-spacing: -.01em; }
.app.phone-layout .toolbar .tool svg { width: 22px; height: 22px; }
/* a label too long for its sixth of a 360 px row ("Ամբողջ էկրան", ru "Весь экран") wraps onto a second line between
   its words — never inside one */
.app.phone-layout .toolbar .tool > :is(span[data-i], .view-label) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; line-height: 1.1; text-align: center; overflow-wrap: normal; }
.app.phone-layout .toolbar .view-cycle { min-width: 0; }
/* narrow phones (< 370 px): the sixths lose their inner padding and the gaps, so the widest word (ru "Прогулка", 52 px
   at 12 px) still fits its 55 px tool */
@media (max-width: 369px) { .app.phone-layout .toolbar { gap: 0; } .app.phone-layout .toolbar .tool { padding: 0; } }
.app.phone-layout .toolbar .tool--accent { flex: 1 1 0; margin: 0; }
.app.phone-layout :is(#btnCamera, #btnDims, #btnMeasure, #btnWire, #btnSnap, #btnShare) { display: none; }
.app.phone-layout #btnView { order: 1; }
.app.phone-layout #btnDoors { order: 2; }
.app.phone-layout #btnWalk { order: 3; }
.app.phone-layout #btnAR { order: 4; }
.app.phone-layout:not(.focus-view) #btnFull { order: 5; flex: 1 1 0; }
.app.phone-layout:not(.focus-view) #btnFull > span { display: block; }
.app.phone-layout:not(.focus-view) #btnMore { display: flex; order: 6; }
.app.phone-layout:not(.focus-view) .more-menu:not([hidden]) { display: grid; }
/* More on a phone: a two-column sheet right above the dock, big rows, nothing to scroll on a 740 px screen */
.app.phone-layout .more-menu { left: 0; right: 0; bottom: calc(100% + 8px); min-width: 0; grid-template-columns: 1fr 1fr; gap: 4px; padding: 6px; border-radius: 20px; max-height: calc(100dvh - 150px); overflow: auto; }
.app.phone-layout .more-menu__item { height: 52px; min-width: 0; padding: 0 10px; gap: 10px; border-radius: 14px; font-size: 13.5px; line-height: 1.2; white-space: normal; }
.app.phone-layout .more-menu__item > span { min-width: 0; overflow-wrap: anywhere; }
.app.phone-layout .more-menu__item .util__badge { flex: none; }
.app.phone-layout .more-menu__sep { grid-column: 1 / -1; margin: 2px 8px; }
.app.phone-layout .walk-pad { bottom: calc(12px + var(--dock-h, 62px) + 14px + var(--safe-b)); }
/* full screen on a phone: four big labelled tools; "All tools" may wrap onto two lines rather than lose its words */
.app.phone-layout.focus-view .toolbar { left: 0; right: 0; width: fit-content; margin-inline: auto; justify-content: center; padding: 4px; }
.app.phone-layout.focus-view .toolbar .tool { flex: 0 0 80px; min-width: 0; height: 60px; padding: 0 4px; font-size: 11.5px; }
.app.phone-layout.focus-view .toolbar .tool > span:not(.view-dots) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; line-height: 1.12; text-align: center; }
/* the walk pad keeps clear of the (taller, lower) full-screen dock: a thumb on the joystick never grazes a tool */
.app.phone-layout.focus-view .walk-pad { bottom: calc(var(--edge) + 4px + 68px + 18px + var(--safe-b)); }
/* "All tools" is an action that brings the tools back, not a mode that is "on": no ink fill (Walk keeps its own) */
.app.focus-view #btnFull[aria-pressed="true"] { background: transparent; color: var(--chrome-fg); }