/* DocHelp clinic builder v3, stage 2: the whole-clinic controls (top bar, side panel modes, floor plan view).
   Loaded after app.css; uses its tokens and keeps the look test's look. */

:where(#app[data-side="inside"]) .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:root { --ok: #2F7D5B; --warn: #B26A00; --fail: #B3261E; --advice: #5B2A8C; --viewbar: 0px; }
/* (IN1, the join, 14 Oct 2026) every rule in this file is under the inside's own #app, :where(#app[data-side="inside"]),
   which adds no weight (each rule keeps its weight and its place against the shared app.css); :root keeps only the
   inside's own tokens. The options panel's width is set again on the inside's #app, as app.css sets it on :root: at the
   join the outside's sheet sets its own on :root */
:where(#app[data-side="inside"]) { --panel-w: 360px; }
@media (min-width: 1280px) { :where(#app[data-side="inside"]) { --panel-w: 420px; } }
@media (max-width: 820px) { :where(#app[data-side="inside"]) { --panel-w: 0px; } }

/* ---------- top bar ---------- */
:where(#app[data-side="inside"]) .cb-topbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; }
:where(#app[data-side="inside"]) .tb-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
:where(#app[data-side="inside"]) .tb-mid { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
:where(#app[data-side="inside"]) .tb-right { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
:where(#app[data-side="inside"]) .tb-history { display: flex; gap: 4px; }
:where(#app[data-side="inside"]) .icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink);
  transition: background 200ms var(--ease), border-color 200ms var(--ease), opacity 200ms var(--ease), transform 160ms var(--ease);
}
:where(#app[data-side="inside"]) .icon-btn svg { width: 19px; height: 19px; }
:where(#app[data-side="inside"]) .icon-btn:hover:not(:disabled) { border-color: var(--lilac); }
:where(#app[data-side="inside"]) .icon-btn:active:not(:disabled) { transform: scale(0.95); }
:where(#app[data-side="inside"]) .icon-btn:disabled { opacity: 0.38; cursor: default; }
:where(#app[data-side="inside"]) .icon-btn:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }
:where(#app[data-side="inside"]) .icon-btn.sm { width: 36px; height: 36px; }
:where(#app[data-side="inside"]) .icon-btn.sm svg { width: 17px; height: 17px; }

/* three-way view switch (same look as the level switch) */
:where(#app[data-side="inside"]) .seg3 { grid-template-columns: 1fr 1fr 1fr; }
:where(#app[data-side="inside"]) .seg3 button { min-width: 96px; padding: 0 16px; white-space: nowrap; }
:where(#app[data-side="inside"]) .seg button, :where(#app[data-side="inside"]) .chip, :where(#app[data-side="inside"]) .btn-primary { white-space: nowrap; }
:where(#app[data-side="inside"]) .seg3 .seg-ind { width: calc((100% - 8px) / 3); }
:where(#app[data-side="inside"]) .seg3[data-active="plan"] .seg-ind { transform: translateX(100%); }
:where(#app[data-side="inside"]) .seg3[data-active="walk"] .seg-ind { transform: translateX(200%); }
:where(#app[data-side="inside"]) .seg3[data-active="overview"] .seg-ind { transform: none; }
:where(#app[data-side="inside"]) .seg3[data-active="standard"] .seg-ind { transform: none; }
:where(#app[data-side="inside"]) .seg3[data-active="overseas"] .seg-ind { transform: translateX(200%); }
:where(#app[data-side="inside"]) .seg3 button[aria-checked="true"] { color: var(--aubergine); }
:where(#app[data-side="inside"]) #levelSeg button { min-width: 0; padding: 0 16px; }

/* Go to room */
:where(#app[data-side="inside"]) .goto { position: relative; }
:where(#app[data-side="inside"]) .goto-btn { gap: 7px; padding: 0 12px 0 14px; }
:where(#app[data-side="inside"]) .goto-btn .chev { width: 15px; height: 15px; color: var(--slate); transition: transform 200ms var(--ease); }
:where(#app[data-side="inside"]) .goto-btn[aria-expanded="true"] { border-color: var(--orchid); background: var(--lilac-wash); }
:where(#app[data-side="inside"]) .goto-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
:where(#app[data-side="inside"]) .goto-pop {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 45;
  width: 300px; max-height: min(70vh, 540px); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-radius: 16px; padding: 6px; box-shadow: 0 2px 6px rgba(26, 15, 46, 0.08), 0 18px 48px rgba(26, 15, 46, 0.18);
  border: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: var(--stone) transparent;
}
:where(#app[data-side="inside"]) .goto-head { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); padding: 12px 12px 4px; }
:where(#app[data-side="inside"]) .goto-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 10px;
  background: none; cursor: pointer; text-align: left; font-weight: 600; font-size: 14px;
}
:where(#app[data-side="inside"]) .goto-item:hover, :where(#app[data-side="inside"]) .goto-item:focus-visible { background: var(--lilac-wash); outline: none; }
:where(#app[data-side="inside"]) .goto-item[aria-current="true"] { color: var(--royal); background: var(--lilac-wash); }
:where(#app[data-side="inside"]) .goto-item .gi-icon svg { width: 18px; height: 18px; display: block; }
:where(#app[data-side="inside"]) .goto-item .gi-label { flex: 1; min-width: 0; }
:where(#app[data-side="inside"]) .goto-item .gi-area { color: var(--slate); font-weight: 500; font-size: 12.5px; font-variant-numeric: tabular-nums; }
:where(#app[data-side="inside"]) .goto-item.whole { border-bottom: 1px solid var(--line); border-radius: 10px 10px 4px 4px; margin-bottom: 2px; }

/* price pill: the range, what it is for, and Not a quote */
:where(#app[data-side="inside"]) .cb-price { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 2px; align-items: center; justify-items: start; text-align: left; }
:where(#app[data-side="inside"]) .cb-price .price-label { grid-column: 1; grid-row: 1; font-size: 11px; }
:where(#app[data-side="inside"]) .cb-price .price-note { grid-column: 2; grid-row: 1; padding: 2px 8px; font-size: 11px; }
:where(#app[data-side="inside"]) .cb-price .price-value { grid-column: 1 / span 2; grid-row: 2; font-size: 15px; font-weight: 400; }
:where(#app[data-side="inside"]) .cb-price .price-value b { font-weight: 700; }
:where(#app[data-side="inside"]) .price-unit { font-weight: 600; font-size: 12px; color: var(--slate); }

/* ---------- stage ---------- */
:where(#app[data-side="inside"]) .cb-toast {
  position: absolute; left: calc((100% - var(--panel-w)) / 2); bottom: 26px; transform: translateX(-50%); z-index: 25;
  max-width: min(560px, calc(100% - var(--panel-w) - 32px)); padding: 10px 16px; border-radius: 12px;
  background: var(--aubergine); color: var(--cream); font-weight: 600; font-size: 13.5px; line-height: 1.35;
  box-shadow: 0 10px 30px rgba(26, 15, 46, 0.25); cursor: default;
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1), opacity 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
:where(#app[data-side="inside"]) .cb-toast.out { opacity: 0; transform: translate(-50%, 8px); transition-duration: 140ms; transition-timing-function: ease-out; }
:where(#app[data-side="inside"]) .cb-toast.bad { background: var(--fail); }
:where(#app[data-side="inside"]) .cb-toast.warn { background: #8A5300; }   /* advice: the --warn amber, deepened so cream text passes 4.5:1 */

/* ---------- floor plan view ---------- */
:where(#app[data-side="inside"]) .planview {
  position: absolute; top: calc(var(--topbar) + var(--viewbar)); left: 0; right: var(--panel-w); bottom: 0; z-index: 5;
  display: flex; flex-direction: column; background: var(--cream);
}
:where(#app[data-side="inside"]) .pv-bar { display: flex; align-items: center; gap: 12px; padding: 14px 20px 0; min-height: 58px; flex-wrap: wrap; }
:where(#app[data-side="inside"]) .pv-tabs { display: flex; gap: 6px; }
:where(#app[data-side="inside"]) .pv-tab { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card); cursor: pointer; font-weight: 600; }
:where(#app[data-side="inside"]) .pv-tab[aria-selected="true"] { background: var(--aubergine); border-color: var(--aubergine); color: #fff; }
:where(#app[data-side="inside"]) .pv-tab:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }
:where(#app[data-side="inside"]) .pv-dims { color: var(--slate); font-weight: 600; font-size: 13px; }
:where(#app[data-side="inside"]) .pv-wrap { position: relative; flex: 1; min-height: 0; }
:where(#app[data-side="inside"]) .pv-svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; -webkit-user-select: none; user-select: none; display: block; }
:where(#app[data-side="inside"]) .pv-svg.dragging { cursor: grabbing !important; }
:where(#app[data-side="inside"]) .pv-legend { margin: 0; padding: 8px 20px 14px; text-align: center; font-size: 12.5px; color: var(--slate); }
:where(#app[data-side="inside"]) .planview.busy .pv-svg { opacity: 0.55; transition: opacity 200ms var(--ease); }
:where(#app[data-side="inside"]) .pv-zoom { position: absolute; right: 14px; bottom: 10px; z-index: 5; display: flex; flex-direction: column; gap: 6px; }
:where(#app[data-side="inside"]) .pv-zbtn { box-shadow: var(--shadow-soft); }
:where(#app[data-side="inside"]) .pv-zbtn:disabled { opacity: 0.45; }
:where(#app[data-side="inside"]) .pv-pop {
  position: absolute; z-index: 6; width: 290px; overflow-y: auto; overscroll-behavior: contain; padding: 14px;
  background: #fff; border-radius: 16px; border: 1px solid var(--line); scrollbar-width: thin;
  box-shadow: 0 2px 6px rgba(26, 15, 46, 0.08), 0 18px 48px rgba(26, 15, 46, 0.18);
}

:where(#app[data-side="inside"]) .pv-svg .room rect.body { stroke: var(--aubergine); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
:where(#app[data-side="inside"]) .pv-svg .room:focus { outline: none; }
:where(#app[data-side="inside"]) .pv-svg .room:focus-visible rect.body { stroke: var(--orchid); stroke-width: 3px; }
:where(#app[data-side="inside"]) .pv-svg .room.hover rect.body { stroke: var(--royal); stroke-width: 2.2px; }
:where(#app[data-side="inside"]) .pv-svg .room.focus rect.body { stroke: var(--orchid); stroke-width: 3px; stroke-dasharray: 7 4; }
:where(#app[data-side="inside"]) .pv-svg .room.sel rect.body { stroke: var(--royal); stroke-width: 3.5px; stroke-dasharray: none; }
:where(#app[data-side="inside"]) .pv-svg .room.target rect.body { stroke: var(--orchid); stroke-width: 4.5px; }
:where(#app[data-side="inside"]) .pv-svg .room.flag rect.body { stroke: var(--fail); stroke-width: 4px; }
:where(#app[data-side="inside"]) .pv-svg text { pointer-events: none; font-family: var(--font-ui); }
:where(#app[data-side="inside"]) .pv-svg .lbl { font-weight: 600; fill: var(--ink); }
:where(#app[data-side="inside"]) .pv-svg .area { font-weight: 500; fill: var(--slate); }
:where(#app[data-side="inside"]) .pv-svg .space { fill: #FFFFFF; }
:where(#app[data-side="inside"]) .pv-svg .corr { fill: #FCFBF8; }
:where(#app[data-side="inside"]) .pv-svg .rec { fill: #EFE6F8; }
:where(#app[data-side="inside"]) .pv-svg .zone-lbl { font-weight: 600; fill: var(--royal); }
:where(#app[data-side="inside"]) .pv-svg .ext { fill: none; stroke: var(--ink); stroke-width: 4px; vector-effect: non-scaling-stroke; pointer-events: none; }
:where(#app[data-side="inside"]) .pv-svg .door-gap { stroke: #FFFFFF; stroke-width: 3.6px; vector-effect: non-scaling-stroke; pointer-events: none; }
:where(#app[data-side="inside"]) .pv-svg .door-swing { fill: none; stroke: var(--royal); stroke-width: 1.1px; vector-effect: non-scaling-stroke; pointer-events: none; }
:where(#app[data-side="inside"]) .pv-svg .door-hover { stroke: rgba(91, 42, 140, 0.35); stroke-width: 12px; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
:where(#app[data-side="inside"]) .pv-svg .win { stroke: #3A8FD0; stroke-width: 3px; vector-effect: non-scaling-stroke; pointer-events: none; }
:where(#app[data-side="inside"]) .pv-svg .grip { fill: rgba(91, 42, 140, 0.26); pointer-events: none; }
:where(#app[data-side="inside"]) .pv-svg .grip.mine, :where(#app[data-side="inside"]) .pv-svg .grip.on { fill: var(--royal); }
:where(#app[data-side="inside"]) .pv-svg .touch-handle { fill: #fff; stroke: var(--royal); stroke-width: 2.5px; vector-effect: non-scaling-stroke; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(26, 15, 46, 0.25)); }
:where(#app[data-side="inside"]) .pv-svg .touch-handle.door { stroke: var(--orchid); }
:where(#app[data-side="inside"]) .pv-svg .preview { stroke: var(--orchid); stroke-width: 3.5px; stroke-dasharray: 9 6; vector-effect: non-scaling-stroke; pointer-events: none; }
:where(#app[data-side="inside"]) .pv-svg .stair { fill: #CFC9E3; stroke: var(--aubergine); stroke-width: 1px; vector-effect: non-scaling-stroke; pointer-events: none; }
:where(#app[data-side="inside"]) .pv-svg .lift { fill: #A79FCB; stroke: var(--aubergine); stroke-width: 1px; vector-effect: non-scaling-stroke; pointer-events: none; }
:where(#app[data-side="inside"]) .pv-svg .tread { stroke: var(--aubergine); stroke-width: 0.6px; vector-effect: non-scaling-stroke; pointer-events: none; }
:where(#app[data-side="inside"]) .pv-svg .counter { stroke: var(--royal); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; fill: none; pointer-events: none; }
:where(#app[data-side="inside"]) .pv-svg .mouth-wall { stroke: var(--aubergine); stroke-width: 2px; vector-effect: non-scaling-stroke; pointer-events: none; }
:where(#app[data-side="inside"]) .pv-svg .entry { stroke: #D89A00; stroke-width: 12; pointer-events: none; }
:where(#app[data-side="inside"]) .pv-svg .street { font-weight: 700; fill: var(--slate); letter-spacing: 3px; }
:where(#app[data-side="inside"]) .pv-svg .ghost { opacity: 0.55; stroke: var(--royal); stroke-width: 2px; vector-effect: non-scaling-stroke; pointer-events: none; }

/* ---------- room menu (popover and sheet) ---------- */
:where(#app[data-side="inside"]) .room-menu { display: grid; gap: 4px; }
:where(#app[data-side="inside"]) .rm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
:where(#app[data-side="inside"]) .rm-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--aubergine-deep); }
:where(#app[data-side="inside"]) .rm-sub { font-size: 12.5px; color: var(--slate); font-weight: 600; margin-top: 1px; }
:where(#app[data-side="inside"]) .rm-close { flex: none; width: 36px; height: 36px; margin: -6px -6px 0 0; border-radius: 999px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--slate); }
:where(#app[data-side="inside"]) .rm-close svg { width: 18px; height: 18px; }
:where(#app[data-side="inside"]) .rm-close:hover { background: var(--cream-dim); color: var(--ink); }
:where(#app[data-side="inside"]) .rm-group { margin-top: 8px; }
:where(#app[data-side="inside"]) .rm-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate); margin: 0 0 6px; }
:where(#app[data-side="inside"]) .rm-opts { display: flex; flex-wrap: wrap; gap: 6px; }
:where(#app[data-side="inside"]) .rm-btn {
  min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; cursor: pointer;
  font-weight: 600; font-size: 13px; line-height: 1.2; transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
:where(#app[data-side="inside"]) .rm-btn:hover { border-color: var(--royal); color: var(--royal); }
:where(#app[data-side="inside"]) .rm-btn:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }
:where(#app[data-side="inside"]) .rm-btn[aria-pressed="true"] { background: var(--lilac-wash); border-color: var(--orchid); color: var(--aubergine); }
:where(#app[data-side="inside"]) .rm-btn.primary { background: var(--aubergine); border-color: var(--aubergine); color: #fff; }
:where(#app[data-side="inside"]) .rm-btn.primary:hover { background: var(--royal); color: #fff; }
:where(#app[data-side="inside"]) .rm-btn.danger { color: var(--fail); }
:where(#app[data-side="inside"]) .rm-btn.danger:hover { border-color: var(--fail); }
:where(#app[data-side="inside"]) .rm-note { margin: 8px 0 0; font-size: 12.5px; color: var(--slate); }

/* ---------- side panel ---------- */
:where(#app[data-side="inside"]) .cb-head { position: relative; padding: 18px 24px 12px; }
:where(#app[data-side="inside"]) .ph-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -6px -8px 6px -10px; }
:where(#app[data-side="inside"]) .ph-back { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 0; border-radius: 999px; background: none; cursor: pointer; color: var(--royal); font-weight: 700; font-size: 13px; }
:where(#app[data-side="inside"]) .ph-back svg { width: 17px; height: 17px; display: block; }
:where(#app[data-side="inside"]) .ph-back:hover { background: var(--lilac-wash); }
:where(#app[data-side="inside"]) .ph-back:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }
:where(#app[data-side="inside"]) .ph-step { display: flex; gap: 4px; }
/* (polish build 4, ui/8) "Laying out the plan": a small pill on the head's bottom line, the look of the "Preparing" note
   over the 3D view (.level-note); it hung under the head with no background and its words ran through the section tabs */
:where(#app[data-side="inside"]) .ph-busy { position: absolute; left: 50%; right: auto; bottom: 0; display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 600; color: var(--royal); transform: translate(-50%, 50%); padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.97); box-shadow: var(--shadow-soft); white-space: nowrap; pointer-events: none; z-index: 3; }
:where(#app[data-side="inside"]) .ph-busy-bar { position: relative; flex: 1; height: 3px; border-radius: 3px; background: rgba(45, 27, 78, 0.1); overflow: hidden; }
:where(#app[data-side="inside"]) .ph-busy .ph-busy-bar { flex: 0 0 56px; }
:where(#app[data-side="inside"]) .ph-busy-bar i { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: 3px; background: var(--royal); animation: cb-busy 1.1s var(--ease) infinite; }
@keyframes cb-busy { to { left: 100%; } }
:where(#app[data-side="inside"]) .cb-panel.busy .panel-body { opacity: 0.92; }

:where(#app[data-side="inside"]) .jump {
  position: sticky; top: -8px; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: -8px -24px 0; padding: 12px 24px 10px;
  background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
:where(#app[data-side="inside"]) .jump::-webkit-scrollbar { display: none; }
:where(#app[data-side="inside"]) .jump-chip { flex: none; height: 32px; padding: 0 8px; white-space: nowrap; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--slate); }
:where(#app[data-side="inside"]) .jump-chip:hover { border-color: var(--lilac); color: var(--ink); }
:where(#app[data-side="inside"]) .jump-chip[aria-current="true"] { background: var(--aubergine); border-color: var(--aubergine); color: #fff; }
:where(#app[data-side="inside"]) .jump-chip:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }
/* the wider panel (1280 px screens and up) has room for all six in one row: a shorter sticky header */
@media (min-width: 1280px) {
  :where(#app[data-side="inside"]) .jump { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; }
  :where(#app[data-side="inside"]) .jump-chip { padding: 0 7px; }
}

:where(#app[data-side="inside"]) .cb-sec { scroll-margin-top: 56px; }
:where(#app[data-side="inside"]) .cb-sec.nested { padding: 10px 0 0; border-bottom: 0; }
:where(#app[data-side="inside"]) .cb-sec.nested .sec-title { font-size: 12.5px; color: var(--slate); margin-bottom: 8px; }
:where(#app[data-side="inside"]) .cb-sub { margin: 16px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); }
/* (polish build 4, ui/4; round 2) three clear steps in the panel: its title 22 px, a section's name 17 px bold, a card's
   name 14 px semibold (a section name was 13, under the cards' 14 bold; at 16 it still read no heavier than its cards);
   every sub head in the panel (a nested section's name, Shape, Toilets, Upper floor) the .cb-sub look. Words as written */
:where(#app[data-side="inside"]) .cb-panel .sec-title { font-size: 17px; font-weight: 700; letter-spacing: 0; color: var(--aubergine-deep); }
:where(#app[data-side="inside"]) .cb-panel .card-label { font-weight: 600; }
:where(#app[data-side="inside"]) .cb-panel .cb-sec.nested .sec-title { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); }
:where(#app[data-side="inside"]) .cb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
/* (polish build 4, ui/10) a section that ends in a row or a button (Size and shape, Changes apply to) keeps the room a
   section of cards has under it */
:where(#app[data-side="inside"]) .cb-panel .cb-sec:not(.nested) > :is(.cb-row, .btn-small):last-child { margin-bottom: 12px; }
:where(#app[data-side="inside"]) .cb-row + .cb-row { border-top: 1px solid var(--line); }
:where(#app[data-side="inside"]) .cb-label { font-weight: 600; font-size: 14px; display: flex; flex-direction: column; }
:where(#app[data-side="inside"]) .cb-label-note { font-weight: 500; font-size: 12px; color: var(--slate); }
:where(#app[data-side="inside"]) .cb-note { margin: 8px 0 10px; font-size: 12.5px; color: var(--slate); line-height: 1.45; }
:where(#app[data-side="inside"]) .cb-advice { margin: 8px 0 10px; padding: 7px 10px; font-size: 12.5px; line-height: 1.4; border-left: 3px solid var(--stone); background: var(--cream); border-radius: 0 8px 8px 0; }
:where(#app[data-side="inside"]) .cb-advice.ok { border-color: var(--ok); }
:where(#app[data-side="inside"]) .cb-advice.advice { border-color: var(--advice); background: var(--lilac-wash); }
:where(#app[data-side="inside"]) .cb-advice.warn { border-color: var(--warn); background: #FBF4E8; }
:where(#app[data-side="inside"]) .cb-advice.fail { border-color: var(--fail); background: #FBECEA; }
:where(#app[data-side="inside"]) .cb-source { margin: 4px 0 12px; font-size: 12px; color: var(--slate); }

:where(#app[data-side="inside"]) .stepper { display: inline-flex; align-items: center; gap: 6px; flex: none; }
:where(#app[data-side="inside"]) .step-btn { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; color: var(--ink); transition: border-color 160ms var(--ease), transform 140ms var(--ease); }
:where(#app[data-side="inside"]) .step-btn svg { width: 16px; height: 16px; }
:where(#app[data-side="inside"]) .step-btn:hover:not(:disabled) { border-color: var(--royal); color: var(--royal); }
:where(#app[data-side="inside"]) .step-btn:active:not(:disabled) { transform: scale(0.94); }
:where(#app[data-side="inside"]) .step-btn:disabled { opacity: 0.35; cursor: default; }
:where(#app[data-side="inside"]) .step-btn:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }
:where(#app[data-side="inside"]) .step-val { min-width: 34px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
:where(#app[data-side="inside"]) .num-wrap { display: inline-flex; align-items: center; gap: 4px; }
:where(#app[data-side="inside"]) .num { width: 64px; height: 36px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; text-align: right; font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; }
:where(#app[data-side="inside"]) .num:focus-visible { outline: 2px solid var(--orchid); outline-offset: 1px; }
:where(#app[data-side="inside"]) .unit { color: var(--slate); font-weight: 600; font-size: 13px; }
:where(#app[data-side="inside"]) .range { width: 100%; margin: 6px 0 4px; accent-color: var(--royal); height: 28px; }

:where(#app[data-side="inside"]) .pseg { display: inline-flex; background: #ECE8E2; border-radius: 999px; padding: 3px; box-shadow: inset 0 0 0 1px var(--line); flex: none; }
:where(#app[data-side="inside"]) .pseg button { height: 34px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--slate); transition: background 200ms var(--ease), color 200ms var(--ease); }
:where(#app[data-side="inside"]) .pseg button[aria-checked="true"] { background: #fff; color: var(--aubergine); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(26, 15, 46, 0.08); }
:where(#app[data-side="inside"]) .pseg button:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }
:where(#app[data-side="inside"]) #sec-scope .cb-row { justify-content: flex-start; }
:where(#app[data-side="inside"]) #sec-scope .pseg { flex: 1; display: grid; grid-template-columns: 1fr 1fr; }
:where(#app[data-side="inside"]) #sec-scope .pseg button { padding: 0 8px; }

:where(#app[data-side="inside"]) .switch { position: relative; width: 46px; height: 28px; border-radius: 999px; border: 0; padding: 0; background: #D9D5CE; cursor: pointer; flex: none; transition: background 200ms var(--ease); }
:where(#app[data-side="inside"]) .switch-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 200ms var(--ease); }
:where(#app[data-side="inside"]) .switch[aria-checked="true"] { background: var(--aubergine); }
:where(#app[data-side="inside"]) .switch[aria-checked="true"] .switch-knob { transform: translateX(18px); }
:where(#app[data-side="inside"]) .switch:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }

:where(#app[data-side="inside"]) .btn-small { min-height: 32px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; cursor: pointer; font-weight: 600; font-size: 12.5px; line-height: 1.25; text-align: left; }
:where(#app[data-side="inside"]) .btn-small:hover { border-color: var(--royal); color: var(--royal); }
:where(#app[data-side="inside"]) .btn-small.solid { background: var(--aubergine); border-color: var(--aubergine); color: #fff; text-align: center; min-width: 64px; }
:where(#app[data-side="inside"]) .btn-small.solid:hover { background: var(--royal); color: #fff; }
:where(#app[data-side="inside"]) .btn-small.ghost { background: transparent; }
:where(#app[data-side="inside"]) .btn-small:focus-visible, :where(#app[data-side="inside"]) .btn-wide:focus-visible, :where(#app[data-side="inside"]) .rl-item:focus-visible, :where(#app[data-side="inside"]) .select:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }
:where(#app[data-side="inside"]) .btn-wide { display: block; width: 100%; min-height: 44px; margin: 6px 0 12px; border-radius: 999px; border: 1px solid var(--aubergine); background: #fff; color: var(--aubergine); cursor: pointer; font-weight: 700; }
:where(#app[data-side="inside"]) .btn-wide:hover { background: var(--lilac-wash); }
:where(#app[data-side="inside"]) .btn-wide.ghost { border-color: var(--line-strong); color: var(--ink); }
:where(#app[data-side="inside"]) .select { flex: 1; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; font: inherit; font-weight: 600; }
:where(#app[data-side="inside"]) .add-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
/* (polish build 4, ui/11) the panel's own controls ease and give a little when pressed, as the cards, chips and the top
   bar do (they snapped on hover and gave nothing); the floor tabs get a hover. Reduced motion: app.css turns these off */
:where(#app[data-side="inside"]) :is(.jump-chip, .btn-small, .btn-wide, .rm-btn, .pseg button, .pv-tab, .ph-back, .rl-item, .goto-item) {
  transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), transform 140ms var(--ease); }
:where(#app[data-side="inside"]) :is(.jump-chip, .btn-small, .btn-wide, .rm-btn, .pseg button, .pv-tab, .ph-back):active:not(:disabled) { transform: scale(0.97); }
@media (hover: hover) { :where(#app[data-side="inside"]) .pv-tab:not([aria-selected="true"]):hover { border-color: var(--lilac); } }

:where(#app[data-side="inside"]) .notice { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 10px; padding: 9px 12px; border-radius: 10px; background: var(--lilac-wash); border: 1px solid var(--lilac); color: var(--aubergine); font-size: 13px; }
:where(#app[data-side="inside"]) .notice .btn-small { flex: none; }

/* picture cards: extra kinds */
:where(#app[data-side="inside"]) .cards.tpl .card-vis, :where(#app[data-side="inside"]) .cards.shapes .card-vis { height: 64px; }
:where(#app[data-side="inside"]) .card-vis.vis-plan svg { position: absolute; inset: 6px 10px; width: calc(100% - 20px); height: calc(100% - 12px); }
:where(#app[data-side="inside"]) .card-vis .card-pic, :where(#app[data-side="inside"]) .card-vis .card-pic svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
:where(#app[data-side="inside"]) .cards.text-only .card { min-height: 56px; justify-content: center; }
:where(#app[data-side="inside"]) .cards.text-only.three { grid-template-columns: 1fr 1fr; }
:where(#app[data-side="inside"]) .cards.text-only .card-text { padding-right: 34px; }

/* rooms list */
:where(#app[data-side="inside"]) .rl { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 2px; }
:where(#app[data-side="inside"]) .rl-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 8px; border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left; }
:where(#app[data-side="inside"]) .rl-item:hover { background: var(--cream); }
:where(#app[data-side="inside"]) .rl-item[aria-current="true"] { background: var(--lilac-wash); }
:where(#app[data-side="inside"]) .rl-swatch { width: 12px; height: 12px; border-radius: 4px; flex: none; background: #E8E5E0; box-shadow: inset 0 0 0 1px rgba(10, 10, 15, 0.12); }
:where(#app[data-side="inside"]) .rl-swatch[data-type="consult"], :where(#app[data-side="inside"]) .rl-swatch[data-type="nurse"] { background: #E9DEF5; }
:where(#app[data-side="inside"]) .rl-swatch[data-type="treatment"], :where(#app[data-side="inside"]) .rl-swatch[data-type="procedure"] { background: #F5D9D9; }
:where(#app[data-side="inside"]) .rl-swatch[data-type="pathology"] { background: #F4E7D0; }
:where(#app[data-side="inside"]) .rl-swatch[data-type="steri"] { background: #F8E4CB; }
:where(#app[data-side="inside"]) .rl-swatch[data-type="manager"] { background: #D9E8F4; }
:where(#app[data-side="inside"]) .rl-swatch[data-type="staff"] { background: #DDEFDB; }
:where(#app[data-side="inside"]) .rl-swatch[data-type="wcAccessible"], :where(#app[data-side="inside"]) .rl-swatch[data-type="wcMale"], :where(#app[data-side="inside"]) .rl-swatch[data-type="wcFemale"] { background: #D3ECEF; }
:where(#app[data-side="inside"]) .rl-swatch[data-type="wcStaff"] { background: #DCF0E7; }
:where(#app[data-side="inside"]) .rl-label { flex: 1; min-width: 0; font-weight: 600; }
:where(#app[data-side="inside"]) .rl-area { color: var(--slate); font-size: 12.5px; font-variant-numeric: tabular-nums; }
:where(#app[data-side="inside"]) .rl-go svg { width: 16px; height: 16px; display: block; color: var(--slate); }

/* checks */
:where(#app[data-side="inside"]) .sec-title .count { font-size: 12px; font-weight: 700; margin-left: 6px; padding: 2px 8px; border-radius: 999px; }
:where(#app[data-side="inside"]) .sec-title .count.good { color: var(--ok); background: #E7F3EC; }
:where(#app[data-side="inside"]) .sec-title .count.bad { color: var(--warn); background: #FBF4E8; }
/* "In this room": the room's furnished items in plain words */
:where(#app[data-side="inside"]) .incl { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 3px; font-size: 13px; line-height: 1.4; }
:where(#app[data-side="inside"]) .incl li { position: relative; padding-left: 14px; }
:where(#app[data-side="inside"]) .incl li::before { content: ''; position: absolute; left: 2px; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--slate); opacity: 0.55; }
:where(#app[data-side="inside"]) .checks { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
:where(#app[data-side="inside"]) .checks li { border-left: 3px solid var(--stone); padding: 8px 10px; background: var(--cream); border-radius: 0 10px 10px 0; font-size: 12.5px; line-height: 1.4; }
:where(#app[data-side="inside"]) .checks li b { display: block; font-size: 13px; margin-bottom: 1px; }
:where(#app[data-side="inside"]) .checks li.ok { border-color: var(--ok); }
:where(#app[data-side="inside"]) .checks li.warn { border-color: var(--warn); background: #FBF4E8; }
:where(#app[data-side="inside"]) .checks li.fail { border-color: var(--fail); background: #FBECEA; }
:where(#app[data-side="inside"]) .checks li.advice { border-color: var(--advice); background: var(--lilac-wash); }
:where(#app[data-side="inside"]) .ck-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
:where(#app[data-side="inside"]) .ck-hint { display: block; margin-top: 4px; color: var(--slate); }

/* typical range (room mode) */
:where(#app[data-side="inside"]) .range-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 2px 0; }
:where(#app[data-side="inside"]) .range-lv { font-weight: 600; color: var(--slate); }
:where(#app[data-side="inside"]) .range-val { font-weight: 700; font-variant-numeric: tabular-nums; }
:where(#app[data-side="inside"]) .range-val.big { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--aubergine-deep); letter-spacing: -0.01em; }
:where(#app[data-side="inside"]) .range-line { margin: 6px 0 4px; font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
:where(#app[data-side="inside"]) .range-line .price-note { font-size: 11.5px; font-weight: 600; color: var(--royal); background: var(--lilac-wash); border-radius: 999px; padding: 3px 9px; }

/* the price footer shows on narrower desktops too, where the top bar has no room for the pill */
:where(#app[data-side="inside"]) .pf-unit { font-weight: 600; font-size: 12px; color: var(--slate); }

/* ---------- responsive top bar ---------- */
/* Compare keeps its word at every width (USABILITY 18, FIXD 6 Oct 2026). The three-way level switch (9 Oct 2026) is
   wider than the old two: the brand words, the Go to room words and the price pill step out at wider widths than
   before. (IN2, 14 Oct 2026) Its third choice reads "Overseas-sourced" in full at every width, phone too (Jamal's Q11,
   13 Oct; it read "Overseas" below 1760 px): the room it needs is made at the end of this file. */
/* (IN2) the brand words and Go to room's words step out under 1590 px (were 1550: the level switch's full words) */
@media (max-width: 1589px) {
  :where(#app[data-side="inside"]) .brand-text { display: none; }
  :where(#app[data-side="inside"]) .goto-btn { width: 44px; padding: 0; justify-content: center; }
  :where(#app[data-side="inside"]) .goto-btn span, :where(#app[data-side="inside"]) .goto-btn .chev { display: none; }
}
/* (polish build 4, ui/5) 1280 to 1399 px without the Outside / Inside switch: Go to room keeps its words (the price is in
   the panel's foot there, so the bar has room: 108 px either side of the centre group at 1280, 56 at 1366); a bare
   floor plan icon beside "Floor plan" did not say it lists the rooms. At 1400 px and up the price pill takes that room */
@media (max-width: 1399px) and (min-width: 1280px) {
  :where(#app[data-side="inside"]) .cb-topbar:not(:has(.shell-side:not([hidden]))) .goto-btn { width: auto; padding: 0 12px 0 14px; justify-content: flex-start; }
  :where(#app[data-side="inside"]) .cb-topbar:not(:has(.shell-side:not([hidden]))) .goto-btn span,
  :where(#app[data-side="inside"]) .cb-topbar:not(:has(.shell-side:not([hidden]))) .goto-btn .chev { display: block; }
}
/* (polish build 4, ui/9) 1400 to 1589 px without the switch, the price pill in the bar: a dental surgery's price ("$10,000
   to $50,000+ dental chair and unit") left the centre group 18 px short of its column at 1440, 5 px from Redo; the bar's
   gaps a touch tighter give it 10 px either side */
@media (max-width: 1589px) and (min-width: 1400px) {
  :where(#app[data-side="inside"]) .cb-topbar:not(:has(.shell-side:not([hidden]))) { gap: 10px; }
  :where(#app[data-side="inside"]) .cb-topbar:not(:has(.shell-side:not([hidden]))) .tb-right { gap: 8px; }
}
@media (max-width: 1360px) and (min-width: 821px) {
  :where(#app[data-side="inside"]) .cb-price { display: none; }
  :where(#app[data-side="inside"]) .cb-panel .panel-foot { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 4px 12px; align-items: center; padding: 12px 24px; border-top: 1px solid var(--line); background: #fff; }
  :where(#app[data-side="inside"]) .cb-panel .pf-price { display: flex; flex-direction: column; }
  :where(#app[data-side="inside"]) .cb-panel .pf-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); }
  :where(#app[data-side="inside"]) .cb-panel .pf-value { font-weight: 700; font-size: 15px; }
  :where(#app[data-side="inside"]) .cb-panel .pf-note { grid-column: 1; grid-row: 2; justify-self: start; font-size: 11.5px; font-weight: 600; color: var(--royal); background: var(--lilac-wash); border-radius: 999px; padding: 3px 9px; }
  :where(#app[data-side="inside"]) .cb-panel .pf-audit { grid-column: 2; grid-row: 1 / span 2; }
  :where(#app[data-side="inside"]) #auditBtn { display: none; }
  :where(#app[data-side="inside"]) .seg3 button { min-width: 0; padding: 0 12px; }
}

/* ---------- phones ---------- */
@media (max-width: 820px) {
  /* FIXD 6 Oct 2026 (USABILITY 12): the view switch and Go to room sit in a bar at the foot of the 3D view (just
     above the options sheet, in thumb reach; main.js moves them there), Undo and Redo in the sheet head; the top
     bar keeps the brand, Standard | High-end and Compare. --bottombar is that bar's height. */
  :root { --viewbar: 0px; --bottombar: 56px; }
  :where(#app[data-side="inside"]) .cb-price { display: none; }
  :where(#app[data-side="inside"]) .cb-topbar { grid-template-columns: auto minmax(0, 1fr); gap: 6px; }
  :where(#app[data-side="inside"]) .tb-left { gap: 8px; }
  :where(#app[data-side="inside"]) .tb-history { gap: 2px; }
  :where(#app[data-side="inside"]) .icon-btn { width: 40px; height: 40px; }
  :where(#app[data-side="inside"]) .tb-mid.foot-bar {
    position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: var(--bottombar); padding: 6px 10px; justify-content: space-between; gap: 8px; z-index: 7;
    background: rgba(248, 245, 240, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line);
  }
  :where(#app[data-side="inside"]) .seg3 button { min-width: 0; height: 40px; padding: 0 10px; font-size: 13px; }
  :where(#app[data-side="inside"]) .seg3 { padding: 2px; }
  :where(#app[data-side="inside"]) .seg3 .seg-ind { top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / 3); }
  :where(#app[data-side="inside"]) #levelSeg button { padding: 0 10px; font-size: 13px; height: 40px; }
  :where(#app[data-side="inside"]) .tb-right { gap: 6px; }
  /* the words show on phones too (USABILITY 18): Compare, Go to room, Reset view */
  :where(#app[data-side="inside"]) #compareBtn.chip { width: auto; padding: 0 12px 0 10px; }
  :where(#app[data-side="inside"]) #compareBtn span { display: inline; }
  :where(#app[data-side="inside"]) .goto-btn.chip { width: auto; padding: 0 12px 0 10px; }
  :where(#app[data-side="inside"]) .goto-btn span { display: inline; }
  :where(#app[data-side="inside"]) .goto-btn .chev { display: none; }
  :where(#app[data-side="inside"]) #resetBtn.tool { width: auto; padding: 0 14px 0 12px; }
  :where(#app[data-side="inside"]) #resetBtn span { display: inline; }
  /* the Go to room menu hangs above the bar (absolute within it: the bar's backdrop filter would re-base a fixed box) */
  :where(#app[data-side="inside"]) .foot-bar .goto { position: static; }
  :where(#app[data-side="inside"]) .foot-bar .goto-pop { position: absolute; top: auto; bottom: calc(100% + 8px); left: 12px; right: 12px; width: auto; transform: none; max-height: calc(58vh - 80px); }
  :where(#app[data-side="inside"]) .cb-toast { left: 50%; bottom: calc(var(--bottombar) + 12px); max-width: calc(100% - 24px); }
  :where(#app[data-side="inside"]) .mark { bottom: calc(var(--bottombar) + 10px); }
  :where(#app[data-side="inside"]) .jump-chip { height: 44px; }
  :where(#app[data-side="inside"]) .icon-btn.sm { width: 44px; height: 44px; }
  :where(#app[data-side="inside"]) .icon-btn.sm svg { width: 19px; height: 19px; }
  :where(#app[data-side="inside"]) .planview { right: 0; }
  :where(#app[data-side="inside"]) .pv-bar { padding: 8px 12px 0; min-height: 48px; }
  :where(#app[data-side="inside"]) .pv-legend { padding: 4px 12px 8px; font-size: 12px; }
  :where(#app[data-side="inside"]) .cb-panel button.sheet-grip { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 96px; height: 44px; margin: 0; z-index: 3; }
  :where(#app[data-side="inside"]) .cb-panel button.sheet-grip::before { top: 9px; left: 30px; right: 30px; }
  :where(#app[data-side="inside"]) .cb-head { padding: 26px 16px 10px; display: block; }
  /* Undo and Redo in the sheet head (top right, clear of the grip in the middle; the text wraps before them) */
  :where(#app[data-side="inside"]) .cb-head { position: relative; padding-right: 110px; }
  :where(#app[data-side="inside"]) .cb-head .tb-history { position: absolute; top: 4px; right: 12px; z-index: 4; }
  :where(#app[data-side="inside"]) .cb-head .ph-text { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  :where(#app[data-side="inside"]) .cb-head .panel-sub { display: block; font-size: 12px; text-align: right; }
  :where(#app[data-side="inside"]) .ph-nav { margin: 0 -6px 4px -8px; }
  :where(#app[data-side="inside"]) .jump { margin: 0 -16px; padding: 8px 16px; top: 0; display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }   /* phones: one row that slides */
  :where(#app[data-side="inside"]) .jump-chip { padding: 0 12px; }
  :where(#app[data-side="inside"]) .step-btn { width: 40px; height: 40px; }
  :where(#app[data-side="inside"]) .rm-btn { min-height: 44px; }
  :where(#app[data-side="inside"]) .btn-small { min-height: 40px; }
  :where(#app[data-side="inside"]) .pseg button { height: 40px; }
  :where(#app[data-side="inside"]) .cb-panel .panel-foot .pf-value { font-size: 14px; }
}
@media (max-width: 380px) {
  :where(#app[data-side="inside"]) #levelSeg button { padding: 0 8px; }
  :where(#app[data-side="inside"]) .seg3 button { padding: 0 8px; font-size: 12.5px; }
  :where(#app[data-side="inside"]) .goto-btn.chip { padding: 0 10px 0 8px; }
}
@media (hover: none) {
  :where(#app[data-side="inside"]) .icon-btn:hover:not(:disabled) { border-color: var(--line-strong); }
  :where(#app[data-side="inside"]) .rm-btn:hover, :where(#app[data-side="inside"]) .btn-small:hover { border-color: var(--line-strong); color: inherit; }
  :where(#app[data-side="inside"]) .goto-item:hover { background: none; }
  :where(#app[data-side="inside"]) .rl-item:hover { background: none; }
}
@media (prefers-reduced-motion: reduce) {
  :where(#app[data-side="inside"]) .ph-busy-bar i { animation: none; left: 0; width: 100%; opacity: 0.5; }
}

/* ---------- the app shell (INTEGRATE, 5 Oct 2026) ---------- */
/* loading: a still of the clinic overview, the progress line, then a fade into the live 3D (never a blank frame) */
:where(#app[data-side="inside"]).cb.booting #view { visibility: hidden; }
:where(#app[data-side="inside"]).cb .poster { top: calc(var(--topbar) + var(--viewbar)); right: var(--panel-w); background: var(--cream) url("../assets/loading-overview.webp") center / cover no-repeat; transition: opacity 500ms var(--ease); }
:where(#app[data-side="inside"]).cb .loader { width: 200px; padding: 12px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.82); box-shadow: var(--shadow-soft); top: calc(50% + (var(--topbar) + var(--viewbar)) / 2); }
:where(#app[data-side="inside"]).cb .loader.failed { width: min(320px, calc(100% - 32px)); text-align: center; font-weight: 600; color: var(--aubergine); border-radius: 16px; }
:where(#app[data-side="inside"]).cb .view-tools { top: calc(var(--topbar) + var(--viewbar) + 16px); flex-wrap: wrap; max-width: calc(100% - var(--panel-w) - 40px); }
:where(#app[data-side="inside"]) .floorseg { grid-template-columns: auto auto; align-self: center; }
:where(#app[data-side="inside"]) .floorseg button { min-width: 0; height: 36px; padding: 0 14px; }
:where(#app[data-side="inside"]) .floorseg button[aria-checked="true"] { background: #fff; color: var(--aubergine); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(26, 15, 46, 0.08); }
:where(#app[data-side="inside"]) .stair-btn { position: absolute; left: calc((100% - var(--panel-w)) / 2); bottom: 84px; transform: translateX(-50%); z-index: 6; }
:where(#app[data-side="inside"]) .stair-btn:active { transform: translateX(-50%) scale(0.97); }   /* .tool:active would drop the centring mid-click */
/* the walk starts on the footpath outside the glass doors: one big Enter button walks you in (Jamal, 8 Oct 2026) */
:where(#app[data-side="inside"]) .enter-btn {
  position: absolute; left: calc((100% - var(--panel-w)) / 2); bottom: 20px; transform: translateX(-50%); z-index: 6;
  display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 30px 0 24px; border: 0; border-radius: 999px;
  background: var(--aubergine); color: #fff; font: inherit; font-weight: 700; font-size: 17px; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 1px 2px rgba(26, 15, 46, 0.3), 0 10px 26px rgba(45, 27, 78, 0.32);
  transition: background 200ms, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
:where(#app[data-side="inside"]) .enter-btn:hover { background: var(--royal); }
:where(#app[data-side="inside"]) .enter-btn:active { transform: translateX(-50%) scale(0.97); }
:where(#app[data-side="inside"]) .enter-btn:focus-visible { outline: 3px solid var(--orchid); outline-offset: 3px; }
:where(#app[data-side="inside"]) .enter-btn svg { width: 22px; height: 22px; }
/* (speed and walk-in fixes, 25 Oct 2026; Jamal: "a matching big Walk out button") Walk out while walking inside: the same
   big button in the same place (src/inside.js outBtn); the stairs' button goes up over it while it shows
   (design check, 25 Oct 2026: 20 px up like Walk in, the W A S D hint over it; it stood 84 px up, so the pair jumped
   64 px at each swap; its own focus ring and eased press, a faint light edge for the night sky, as Walk in) */
:where(#app[data-side="inside"]) .stair-btn.above-walk-out { bottom: 132px; }
:where(#app[data-side="inside"]) .walk-pad {
  position: absolute; left: 20px; bottom: 22px; width: 132px; height: 132px; border-radius: 50%; z-index: 6; touch-action: none;
  background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; place-items: center;
}
:where(#app[data-side="inside"]) .walk-pad.active { background: rgba(255, 255, 255, 0.7); }
:where(#app[data-side="inside"]) .walk-knob { width: 56px; height: 56px; border-radius: 50%; background: var(--aubergine); opacity: 0.82; box-shadow: 0 4px 14px rgba(26, 15, 46, 0.3); pointer-events: none; }
:where(#app[data-side="inside"]) .walk-hint {
  position: absolute; left: calc((100% - var(--panel-w)) / 2); bottom: 88px; transform: translateX(-50%); z-index: 5; margin: 0;
  padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.88); box-shadow: var(--shadow-soft);
  font-weight: 600; font-size: 13px; color: var(--aubergine); white-space: nowrap; pointer-events: none;
}
:where(#app[data-side="inside"]) .level-note {
  position: absolute; left: calc((100% - var(--panel-w)) / 2); top: calc(var(--topbar) + var(--viewbar) + 18px); transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 10px; width: max-content; min-width: 230px; max-width: calc(100% - 24px); padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-soft); font-size: 12.5px; font-weight: 600; color: var(--royal); white-space: nowrap; pointer-events: none;
}
:where(#app[data-side="inside"]) .level-note .ph-busy-bar { flex: 0 0 64px; }
@media (max-width: 820px) {
  :where(#app[data-side="inside"]).cb .poster { right: 0; }
  :where(#app[data-side="inside"]).cb .view-tools { top: calc(var(--topbar) + var(--viewbar) + 10px); max-width: calc(100% - 24px); }
  :where(#app[data-side="inside"]) .stair-btn, :where(#app[data-side="inside"]) .stair-btn:active { bottom: calc(var(--bottombar) + 12px); left: auto; right: 12px; transform: none; }
  :where(#app[data-side="inside"]) .stair-btn span { display: inline; }
  :where(#app[data-side="inside"]) .stair-btn.tool { width: auto; padding: 0 14px 0 12px; }
  :where(#app[data-side="inside"]) .walk-pad { left: 14px; bottom: calc(var(--bottombar) + 14px); width: 120px; height: 120px; }
  :where(#app[data-side="inside"]) .enter-btn { left: auto; right: 12px; bottom: calc(var(--bottombar) + 14px); transform: none; height: 52px; padding: 0 24px 0 20px; }
  :where(#app[data-side="inside"]) .enter-btn:active { transform: scale(0.97); }
  :where(#app[data-side="inside"]) .stair-btn.above-walk-out { bottom: calc(var(--bottombar) + 76px); }
  :where(#app[data-side="inside"]) .planview { bottom: var(--bottombar); }
  :where(#app[data-side="inside"]) .walk-hint { bottom: auto; top: calc(var(--topbar) + var(--viewbar) + 64px); white-space: normal; text-align: center; max-width: calc(100% - 32px); }
  :where(#app[data-side="inside"]) .level-note { top: calc(var(--topbar) + var(--viewbar) + 62px); }
  /* (27 Oct 2026) the walk hint sits where the note goes on a phone: hidden while the note is up (their words ran together) */
  :where(#app[data-side="inside"]) .stage:has(> .level-note:not([hidden])) > .walk-hint { visibility: hidden; }
  :where(#app[data-side="inside"]) .photo { display: none; }
}
/* phones: every touch target at least 44 px (INTEGRATE) */
@media (max-width: 820px) {
  :where(#app[data-side="inside"]) .icon-btn { width: 44px; height: 44px; }
  :where(#app[data-side="inside"]) .tb-history { gap: 0; }
  :where(#app[data-side="inside"]) .seg3 button, :where(#app[data-side="inside"]) #levelSeg button { height: 44px; }
  :where(#app[data-side="inside"]) .viewseg { padding: 2px; }
  :where(#app[data-side="inside"]) .step-btn { width: 44px; height: 44px; }
  :where(#app[data-side="inside"]) .pseg button, :where(#app[data-side="inside"]) .btn-small { min-height: 44px; }
  :where(#app[data-side="inside"]) .floorseg button { height: 44px; }
  :where(#app[data-side="inside"]) .tb-left { gap: 4px; }
}
@media (max-width: 380px) {
  :where(#app[data-side="inside"]) .tb-history .icon-btn { width: 44px; }
}

/* ---------- R3, 5 Oct 2026 ---------- */
:where(#app[data-side="inside"]) .cb-toast .toast-undo { margin-left: 10px; padding: 4px 12px; min-height: 30px; border-radius: 999px; border: 1px solid rgba(248, 245, 240, 0.6);
  background: transparent; color: var(--cream); font: inherit; font-weight: 700; cursor: pointer; }
:where(#app[data-side="inside"]) .cb-toast .toast-undo:hover { background: rgba(248, 245, 240, 0.14); }
:where(#app[data-side="inside"]) .cb-toast .toast-undo:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
/* (polish build 4, ui/12) a note with Undo (or an action): its words, then its buttons side by side at the right, each
   centred on the words (Undo hung at the end of the last line, a 30 px box in 18 px lines) */
:where(#app[data-side="inside"]) .cb-toast.has-undo { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; }
:where(#app[data-side="inside"]) .cb-toast.has-undo .toast-undo { flex: none; margin-left: 0; min-height: 32px; }
:where(#app[data-side="inside"]) .cb-toast.has-undo .toast-undo:first-of-type { margin-left: 6px; }
:where(#app[data-side="inside"]) .sec-title .count.look { color: var(--slate); background: #EEF0F5; }
:where(#app[data-side="inside"]) .size-btns { display: inline-flex; gap: 8px; }
:where(#app[data-side="inside"]) .size-btns .btn-small[disabled] { opacity: 0.45; cursor: default; }
/* (polish build 4, round 2) a small button that cannot be used: no fill, a faint border, grey words (the solid Bigger at
   45% opacity read as a lavender fill, more pressable than the live Smaller beside it); no press (ui/11 skips :disabled) */
:where(#app[data-side="inside"]) .cb-panel .btn-small:disabled, :where(#app[data-side="inside"]) .cb-panel .btn-small:disabled:hover {
  opacity: 1; background: transparent; border-color: rgba(43, 26, 58, 0.12); color: #A69DB0; cursor: not-allowed; }
:where(#app[data-side="inside"]) .text-in { width: 100%; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--card);
  font: inherit; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
:where(#app[data-side="inside"]) .text-in:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }
:where(#app[data-side="inside"]) .cards.three .card .card-sub { font-size: 11.5px; }
/* the room you are walking in: the first pill of the view tools row (FIXC 5 Oct 2026: it sat on top of Reset view,
   which walk mode hides; one row, nothing overlaps) */
/* (polish build 4, ui/6) a label, not a button: smaller and see-through, with a "you are here" dot (it was the filled 44 px
   aubergine pill of Book a free audit and of the Enter button shown with it); white on it over a white scene about 6 to 1.
   Drags over it reach the 3D view (the view tools row gives its other items the pointer) */
:where(#app[data-side="inside"]) .walk-room { display: inline-flex; align-items: center; gap: 7px; align-self: center; height: 32px; margin: 0; padding: 0 12px 0 10px;
  border-radius: 999px; background: rgba(26, 15, 46, 0.66); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font-weight: 600; font-size: 12.5px; pointer-events: none; white-space: nowrap; cursor: default; }
:where(#app[data-side="inside"]) .walk-room::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--lilac); }
:where(#app[data-side="inside"]).cb .view-tools > .walk-room { pointer-events: none; }

/* ---------- 6 Oct 2026 (Jamal's feedback) ----------
   1. The 3D view and the options panel are one block, centred on wide screens: the panel sits against the view's
      right edge (it used to hug the window's far right on a 2560 px monitor). --frame-max caps the block.
   2. The room bar at the foot of the 3D view (src/ui/roombar.js): every room as a chip, Previous and Next, Whole
      clinic. Desktop only; phones keep their foot bar. */
:root { --frame-max: 1880px; --frame-x: max(0px, calc((100vw - var(--frame-max)) / 2)); --roombar: 60px; }
:where(#app[data-side="inside"]).app { background: var(--cream); }
:where(#app[data-side="inside"]).cb .topbar { padding: 0 calc(20px + var(--frame-x)); }
/* the three-way level switch fits from 821 px down to 360 px phones (9 Oct 2026): tighter gaps and words in the
   narrow desktop band, a 12 px side margin and smaller level words on phones (no word cut off at any width) */
@media (max-width: 1000px) and (min-width: 821px) {
  :where(#app[data-side="inside"]) .cb-topbar { gap: 10px; }
  :where(#app[data-side="inside"]) .tb-mid { gap: 6px; }
  :where(#app[data-side="inside"]) .tb-right { gap: 8px; }
  :where(#app[data-side="inside"]) .seg3 button, :where(#app[data-side="inside"]) #levelSeg button { padding: 0 8px; font-size: 13px; }
  :where(#app[data-side="inside"]) #compareBtn.chip { padding: 0 12px 0 10px; }
}
@media (max-width: 820px) { :where(#app[data-side="inside"]).cb .topbar { padding: 0 12px; } }
@media (max-width: 430px) { :where(#app[data-side="inside"]) #levelSeg button { padding: 0 7px; font-size: 12.5px; } }
@media (max-width: 380px) { :where(#app[data-side="inside"]) #levelSeg button { padding: 0 5px; font-size: 12px; } }
:where(#app[data-side="inside"]).cb .stage { left: var(--frame-x); right: var(--frame-x); bottom: var(--roombar); }
:where(#app[data-side="inside"]).cb .panel { right: var(--frame-x); }
:where(#app[data-side="inside"]).cb .poster { left: var(--frame-x); right: calc(var(--frame-x) + var(--panel-w)); bottom: var(--roombar); }
:where(#app[data-side="inside"]).cb .panel-body { min-height: 0; scrollbar-width: auto; scrollbar-gutter: stable; }
:where(#app[data-side="inside"]) .room-bar {
  position: absolute; left: var(--frame-x); right: calc(var(--frame-x) + var(--panel-w)); bottom: 0; height: var(--roombar); z-index: 8;
  display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: rgba(248, 245, 240, 0.96); border-top: 1px solid var(--line);
}
/* (polish build 4, ui/7; round 2) the chips fade out over 40 px at either end of the strip, which says it slides (a chip
   was cut hard mid word at the right edge; a 14 px fade read as a hard edge with a ghost letter); 40 px of padding and
   scroll-padding keep the current chip clear of the fade; the arrows the chips' 38 px */
:where(#app[data-side="inside"]) .room-bar .rb-arrow { flex: none; width: 38px; height: 38px; }
:where(#app[data-side="inside"]) .rb-list { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; padding: 4px 40px; scroll-padding-inline: 40px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); }
:where(#app[data-side="inside"]) .rb-list::-webkit-scrollbar { display: none; }
:where(#app[data-side="inside"]) .rb-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font: inherit; font-weight: 600; font-size: 13.5px; white-space: nowrap; cursor: pointer;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease), transform 160ms var(--ease);
}
:where(#app[data-side="inside"]) .rb-chip .rb-icon svg { width: 17px; height: 17px; display: block; }
:where(#app[data-side="inside"]) .rb-chip:hover { border-color: var(--lilac); }
:where(#app[data-side="inside"]) .rb-chip:active { transform: scale(0.97); }
:where(#app[data-side="inside"]) .rb-chip[aria-current="true"] { background: var(--aubergine); border-color: var(--aubergine); color: var(--cream); }
:where(#app[data-side="inside"]) .rb-chip:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }
:where(#app[data-side="inside"]) .rb-group { flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); padding: 0 4px 0 10px; }
@media (max-width: 820px) {
  :root { --roombar: 0px; }
  :where(#app[data-side="inside"]) .room-bar { display: none; }
  :where(#app[data-side="inside"]).cb .stage { bottom: 42vh; }
}

/* ---------- Quick set: the first screen (7 Oct 2026, src/ui/intro.js) ----------
   Over the whole app while the clinic loads behind it; the loading picture shows through, softened. */
:where(#app[data-side="inside"]) .intro {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px 16px; overflow-y: auto;
  background: rgba(248, 245, 240, 0.82) url("../assets/loading-overview.webp") center / cover no-repeat;
  background-blend-mode: lighten;
  transition: opacity 320ms var(--ease);
}
:where(#app[data-side="inside"]) .intro::before { content: ""; position: fixed; inset: 0; background: rgba(248, 245, 240, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: -1; }
:where(#app[data-side="inside"]) .intro.leaving { opacity: 0; pointer-events: none; }
:where(#app[data-side="inside"]) .intro-card {
  position: relative; width: min(780px, 100%); background: #fff; border-radius: 20px; padding: 30px 32px 26px;
  box-shadow: 0 1px 2px rgba(26, 15, 46, 0.06), 0 24px 64px rgba(26, 15, 46, 0.16);
}
:where(#app[data-side="inside"]) .intro-head { margin-bottom: 18px; }
:where(#app[data-side="inside"]) .intro-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
:where(#app[data-side="inside"]) .intro-brand .brand-mark { width: 34px; height: 34px; flex: none; }
:where(#app[data-side="inside"]) .intro-brand .brand-text { display: flex; flex-direction: column; line-height: 1.15; }
:where(#app[data-side="inside"]) .intro-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 30px; letter-spacing: -0.015em; color: var(--aubergine-deep); }
:where(#app[data-side="inside"]) .intro-sub { margin: 4px 0 0; color: var(--slate); font-size: 15px; }
:where(#app[data-side="inside"]) .intro-card .sec-title { margin: 0 0 10px; }
:where(#app[data-side="inside"]) .intro-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
:where(#app[data-side="inside"]) .intro-cards .card-vis { height: 76px; }
:where(#app[data-side="inside"]) .intro-rows { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 12px 24px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
:where(#app[data-side="inside"]) .intro-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
:where(#app[data-side="inside"]) .intro-row .cb-label { font-size: 13px; font-weight: 700; }
/* the level row has three choices (9 Oct 2026): it takes the rest of the width and no word is cut */
:where(#app[data-side="inside"]) .intro-row .pseg button { flex: none; }
:where(#app[data-side="inside"]) .intro-foot { display: flex; justify-content: flex-end; padding-top: 18px; }
:where(#app[data-side="inside"]) .intro-go { display: inline-flex; align-items: center; height: 48px; padding: 0 26px; font-size: 15px; }
:where(#app[data-side="inside"]).app.intro-on .topbar, :where(#app[data-side="inside"]).app.intro-on .panel, :where(#app[data-side="inside"]).app.intro-on .room-bar { visibility: hidden; }
@media (max-width: 820px) {
  :where(#app[data-side="inside"]) .intro { place-items: start center; padding: 12px; }
  :where(#app[data-side="inside"]) .intro-card { padding: 22px 18px 18px; border-radius: 16px; }
  :where(#app[data-side="inside"]) .intro-title { font-size: 25px; }
  :where(#app[data-side="inside"]) .intro-cards { grid-template-columns: 1fr 1fr; }
  :where(#app[data-side="inside"]) .intro-rows { grid-template-columns: 1fr; }
  :where(#app[data-side="inside"]) .intro-row { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; row-gap: 8px; min-height: 44px; }
  :where(#app[data-side="inside"]) .intro-foot .intro-go { display: inline-flex; width: 100%; justify-content: center; }
}
@media (max-width: 400px) { :where(#app[data-side="inside"]) .intro-row .pseg button { padding: 0 10px; } }
@media (prefers-reduced-motion: reduce) { :where(#app[data-side="inside"]) .intro { transition: none; } }

/* ---------- What each view shows (10 Oct 2026, src/ui/viewnote.js) ----------
   A short line on its own row under the view tools (Reset view, Photo mode, the floor buttons, the room badge in
   Walk), and in the clinic view now and then the tip "Click a room to see it in full, cupboards and all" under it.
   The row is in the tools' own flow, so nothing overlaps; only the buttons take clicks (drags pass through). */
:where(#app[data-side="inside"]).cb .view-tools { pointer-events: none; }
:where(#app[data-side="inside"]).cb .view-tools > * { pointer-events: auto; }
:where(#app[data-side="inside"]).cb .view-tools > .view-note { pointer-events: none; flex: 0 0 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
:where(#app[data-side="inside"]) .view-line {
  margin: 0; max-width: 430px; padding: 6px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow-soft);
  font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--aubergine);
}
:where(#app[data-side="inside"]) .view-line[hidden], :where(#app[data-side="inside"]) .view-tip[hidden] { display: none; }
:where(#app[data-side="inside"]) .view-tip {
  pointer-events: auto; display: inline-flex; align-items: center; max-width: 430px; border-radius: 22px;
  background: var(--aubergine); color: var(--cream); box-shadow: 0 1px 2px rgba(26, 15, 46, 0.3), 0 10px 26px rgba(45, 27, 78, 0.28);
  transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  animation: vt-in 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
:where(#app[data-side="inside"]) .view-tip.out { opacity: 0; transform: translateY(-4px); }
@keyframes vt-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
:where(#app[data-side="inside"]) .view-tip .vt-go {
  min-height: 44px; padding: 6px 4px 6px 16px; border: 0; background: none; color: inherit; font: inherit; font-weight: 700;
  font-size: 13.5px; line-height: 1.3; text-align: left; cursor: pointer; border-radius: 22px 0 0 22px;
}
:where(#app[data-side="inside"]) .view-tip .vt-close {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px;
  background: none; color: inherit; cursor: pointer; opacity: 0.8;
}
:where(#app[data-side="inside"]) .view-tip .vt-close svg { width: 16px; height: 16px; }
:where(#app[data-side="inside"]) .view-tip .vt-go:hover { text-decoration: underline; text-underline-offset: 3px; }
:where(#app[data-side="inside"]) .view-tip .vt-close:hover { opacity: 1; background: rgba(248, 245, 240, 0.14); }
:where(#app[data-side="inside"]) .view-tip button:focus-visible { outline: 2px solid var(--cream); outline-offset: -3px; }
@media (max-width: 820px) {
  :where(#app[data-side="inside"]).cb .view-tools > .view-note { gap: 6px; }
  :where(#app[data-side="inside"]) .view-line { font-size: 12px; padding: 5px 10px; max-width: 100%; }
  :where(#app[data-side="inside"]) .view-tip { max-width: 100%; }
  :where(#app[data-side="inside"]) .view-tip .vt-go { font-size: 13px; padding-left: 14px; }
  /* the walking hint and the "Preparing" note sit at the top on phones: the line steps aside while they show */
  :where(#app[data-side="inside"]) .stage:has(> .walk-hint:not([hidden])) .view-note, :where(#app[data-side="inside"]) .stage:has(> .level-note:not([hidden])) .view-note { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { :where(#app[data-side="inside"]) .view-tip { transition: none; animation: none; } }

/* (greyed everywhere, Jamal 10 Oct 2026; the outside builder's O7 look, v3-outside/css/outside.css "lvl", so the two
   match when joined) a choice above the level shown: its picture slightly greyed, its level's name on it ("High-end",
   "Overseas-sourced"); it stays a live button (choosing it asks to switch up). The label keeps its full colour */
:where(#app[data-side="inside"]).cb .lvl-tag { position: relative; display: inline-block; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; color: var(--aubergine); background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(45, 27, 78, 0.22); border-radius: 999px; padding: 2px 6px; white-space: nowrap; }
:where(#app[data-side="inside"]).cb .card.lvl-above .card-vis canvas, :where(#app[data-side="inside"]).cb .card.lvl-above .card-vis .card-pic { filter: saturate(0.35) brightness(1.06); opacity: 0.62; }
:where(#app[data-side="inside"]).cb .card.lvl-above .card-vis { background-color: #EEEFEF; }
/* a swatch or colour card (its picture is the box's own background): the box itself greyed */
:where(#app[data-side="inside"]).cb .card.lvl-above .card-vis:not(:has(canvas, .card-pic)) { filter: saturate(0.35) brightness(1.06); opacity: 0.62; }
:where(#app[data-side="inside"]).cb .card.lvl-above > .lvl-tag { position: absolute; top: 5px; left: 5px; z-index: 1; }
/* a card without a picture: the outside's text button look, the tag under the words */
:where(#app[data-side="inside"]).cb .cards.text-only .card.lvl-above { background: #F6F5F2; border-color: rgba(10, 10, 15, 0.12); color: #3F3C39; }
:where(#app[data-side="inside"]).cb .cards.text-only .card.lvl-above > .lvl-tag { position: static; display: block; width: max-content; max-width: calc(100% - 22px); margin: -4px 11px 9px; padding: 1px 6px; }
/* the question under the cards: "Switch to High-end?" with Switch and Keep Standard (in the panel, never a browser
   dialog); 44 px buttons, wraps on a narrow phone */
:where(#app[data-side="inside"]).cb .lvl-ask { margin: 2px 0 14px; padding: 12px; border-radius: 12px; border: 1px solid rgba(45, 27, 78, 0.2); background: var(--lilac-wash); }
:where(#app[data-side="inside"]).cb .lvl-ask-q { margin: 0 0 2px; font-size: 14px; font-weight: 700; color: var(--aubergine); }
:where(#app[data-side="inside"]).cb .lvl-ask-note { margin: 0 0 10px; font-size: 13px; line-height: 1.4; color: #57544F; }
:where(#app[data-side="inside"]).cb .lvl-ask-btns { display: flex; flex-wrap: wrap; gap: 8px; }
:where(#app[data-side="inside"]).cb .lvl-ask-btns button { flex: 1 1 120px; min-width: 0; min-height: 44px; padding: 8px 14px; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
:where(#app[data-side="inside"]).cb .lvl-yes { border: 1px solid var(--aubergine); background: var(--aubergine); color: #fff; }
:where(#app[data-side="inside"]).cb .lvl-yes:hover { background: var(--royal); border-color: var(--royal); }
:where(#app[data-side="inside"]).cb .lvl-no { border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); }
:where(#app[data-side="inside"]).cb .lvl-no:hover { border-color: var(--lilac); }
:where(#app[data-side="inside"]).cb .lvl-ask-btns button:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }
/* (greyed everywhere, design review fixes 10 Oct 2026) */
/* 1. the question sits in the cards' grid right after the tapped card's row (full width); the card asked about stays
   marked while it is open */
:where(#app[data-side="inside"]).cb .cards > .lvl-ask { grid-column: 1 / -1; margin: 0 0 4px; }
:where(#app[data-side="inside"]).cb .card.lvl-asking { border-color: var(--aubergine); box-shadow: 0 0 0 1px var(--aubergine); }
/* 3. each greyed group starts on its own row under its level's name (the outside's .lvl-cap, outside.css 443 to 449) */
/* (polish build 4, ui/2) 12 px, the outside's size: on a row of 3 cards or fewer it is the only place the level is named
   (level-gate.js hides the card's own tag there, notes 17 Oct group I) */
:where(#app[data-side="inside"]).cb .lvl-cap { margin: 6px 0 -4px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--royal); }   /* (round 2) 16 px above, 6 px to its row (the grid's 10 px gap with these) */
:where(#app[data-side="inside"]).cb .lvl-cap[hidden] { display: none; }
:where(#app[data-side="inside"]).cb .cards .lvl-cap { grid-column: 1 / -1; }
/* 4. the resting look stays faded; pointing at a greyed card or reaching it by keyboard shows its picture in full */
@media (hover: hover) {
  :where(#app[data-side="inside"]).cb .card.lvl-above:hover .card-vis canvas, :where(#app[data-side="inside"]).cb .card.lvl-above:hover .card-vis .card-pic,
  :where(#app[data-side="inside"]).cb .card.lvl-above:hover .card-vis:not(:has(canvas, .card-pic)) { filter: none; opacity: 1; }
}
:where(#app[data-side="inside"]).cb .card.lvl-above:focus-visible .card-vis canvas, :where(#app[data-side="inside"]).cb .card.lvl-above:focus-visible .card-vis .card-pic,
:where(#app[data-side="inside"]).cb .card.lvl-above:focus-visible .card-vis:not(:has(canvas, .card-pic)) { filter: none; opacity: 1; }
:where(#app[data-side="inside"]).cb .card.lvl-above .card-vis canvas, :where(#app[data-side="inside"]).cb .card.lvl-above .card-vis .card-pic, :where(#app[data-side="inside"]).cb .card.lvl-above .card-vis { transition: filter 200ms var(--ease), opacity 200ms var(--ease); }
/* Switch and Keep: the chips' 200 ms and press */
:where(#app[data-side="inside"]).cb .lvl-ask-btns button { transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms, transform 200ms var(--ease); }
:where(#app[data-side="inside"]).cb .lvl-ask-btns button:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  :where(#app[data-side="inside"]).cb .lvl-ask-btns button, :where(#app[data-side="inside"]).cb .card.lvl-above .card-vis canvas, :where(#app[data-side="inside"]).cb .card.lvl-above .card-vis .card-pic, :where(#app[data-side="inside"]).cb .card.lvl-above .card-vis { transition: none; }
  :where(#app[data-side="inside"]).cb .lvl-ask-btns button:active { transform: none; }
}
/* a narrow phone: a tag on a three across card wraps rather than clip ("Overseas-sourced" at 360 px) */
@media (max-width: 400px) {
  :where(#app[data-side="inside"]).cb .cards.three .card.lvl-above > .lvl-tag { white-space: normal; max-width: calc(100% - 10px); }
}
/* (polish build 4, ui/1) an option picture still being built: a wall meeting a floor, a soft shadow where the item will
   stand, under a clearer sweep (a flat cream box with a faint sweep read as an empty picture, for many seconds in the
   treatment room). A card whose build failed (thumb-none, option-thumbs.js) keeps the still shape without the sweep. The
   reception design cards keep their drawn counter outline on the plain cream (thumb-outline) */
:where(#app[data-side="inside"]) .card-vis:has(canvas.thumb-wait:not(.thumb-outline)),
:where(#app[data-side="inside"]) .card-vis:has(canvas.thumb-none:not(.thumb-outline)) {
  background-image: radial-gradient(ellipse 32% 13% at 50% 74%, rgba(45, 27, 78, 0.10), rgba(45, 27, 78, 0) 72%),
    linear-gradient(180deg, #F5F2ED 0 55%, #E6E0D6 55% 100%);
}
:where(#app[data-side="inside"]) .card-vis:has(canvas.thumb-wait)::after {
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 70%);
}
/* (polish build 4, ui/3) a card's 300 x 184 picture keeps its shape in every box (two across it was drawn 14% too wide,
   three across 6% too narrow): cover trims its edges, which option-thumbs.js keeps the item clear of */
:where(#app[data-side="inside"]) .card-vis canvas { object-fit: cover; }
/* (round 2) a 3D card picture (thumb-3d, option-thumbs.js) keeps more of its top than its bottom where cover trims it */
:where(#app[data-side="inside"]) .card-vis canvas.thumb-3d { object-position: 50% 35%; }

/* (Stage B, 11 Oct 2026) the interior design picked last at this level, with a finish changed since: "Changed" on its
   card (the gate tag's look, top right where the tick shows while every pick holds) and an outline */
:where(#app[data-side="inside"]).cb .card > .card-changed { position: absolute; top: 5px; right: 5px; z-index: 1; font-size: 10px; font-weight: 700; line-height: 1.2; color: var(--aubergine); background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(45, 27, 78, 0.32); border-radius: 999px; padding: 2px 6px; white-space: nowrap; }
:where(#app[data-side="inside"]).cb .card.design-changed { border-color: rgba(45, 27, 78, 0.45); }

/* ---------- IN2, 14 Oct 2026: room for the Outside / Inside switch, and "Overseas-sourced" in full ----------
   (v3/JOIN-TOPBAR-BRIEF.md; notes in _working files - ignore/join/CODE-IN2.md; checked 320 to 1920 px with
   join/topbar-lab-in.html, the switch on and off.)
   1. Both pages: the level switch says "Overseas-sourced" in full at every width (Jamal's Q11), each choice as wide as its
      words with the chosen one on white, as the outside's level switch (v3-outside/css/outside.css "seg-level"; it used
      to give each a third, which the long name made too wide). Where the bar is still short: the brand words and Go to
      room's words step out under 1590 px (was 1550); the price pill joins the options panel's foot at 1361 to 1399 px
      (Book a free audit stays in the top bar; both go at 1360 and under, as before); under 900 px the view switch and Go
      to room (with its words) sit in a bar of their own under the top bar, across the 3D view (--viewbar, as the room bar
      at its foot); on phones the level switch has a row of its own under the top row below 480 px (610 px with the
      switch), one line down to 320 px.
   2. Only while the switch shows (the join puts it after .brand; the standalone page has none, so never matches): the
      switch first in the bar, as on the outside (v3-join/css/join.css): the same place, size and look at every width,
      so the bar does not jump when the person switches sides; undo and redo 16 px after it; the brand mark gives way
      under 1440 px and on phones; the price pill in the panel's foot under 1690 px; Go to room an icon at 1120 to 1449 px;
      the view bar under 1120 px; the view tabs narrower under 1440 px.
   join.css's "#app .shell-side button" rule carries an id: the switch's own sizes here name #sideSeg to outweigh it. */

/* 1. both pages */
:where(#app[data-side="inside"]).cb .compare { top: calc(var(--topbar) + var(--viewbar)); }
:where(#app[data-side="inside"]) .pf-unit, :where(#app[data-side="inside"]) .price-unit { white-space: nowrap; }
/* the level switch: each choice as wide as its words, the chosen one on white (no sliding marker) */
:where(#app[data-side="inside"]) #levelSeg.seg3 { grid-template-columns: auto auto auto; }
:where(#app[data-side="inside"]) #levelSeg.seg3 .seg-ind { display: none; }
:where(#app[data-side="inside"]) #levelSeg.seg3 button { min-width: 0; transition: color 240ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease); }
:where(#app[data-side="inside"]) #levelSeg.seg3 button[aria-checked="true"] { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(26, 15, 46, 0.08); }
@media (min-width: 1001px) { :where(#app[data-side="inside"]) #levelSeg.seg3 button { padding: 0 12px; } }
/* the price in the panel's foot, the price only (the audit button stays in the top bar); its note under it, as below
   1361 px */
@media (max-width: 1399px) and (min-width: 1361px) {
  :where(#app[data-side="inside"]) .cb-price { display: none; }
  :where(#app[data-side="inside"]) .cb-panel .panel-foot { display: grid; grid-template-columns: 1fr; gap: 4px 12px; align-items: center; padding: 12px 24px; border-top: 1px solid var(--line); background: #fff; }
  :where(#app[data-side="inside"]) .cb-panel .pf-price { display: flex; flex-direction: column; }
  :where(#app[data-side="inside"]) .cb-panel .pf-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); }
  :where(#app[data-side="inside"]) .cb-panel .pf-value { font-weight: 700; font-size: 15px; }
  :where(#app[data-side="inside"]) .cb-panel .pf-note { grid-column: 1; grid-row: 2; justify-self: start; font-size: 11.5px; font-weight: 600; color: var(--royal); background: var(--lilac-wash); border-radius: 999px; padding: 3px 9px; }
  :where(#app[data-side="inside"]) .cb-panel .pf-audit { display: none; }
}
/* under 900 px: the view bar, the 3D view's width, under the top bar (10 px above and below its 44 px controls, as the
   top bar) */
@media (max-width: 899px) and (min-width: 821px) {
  :where(#app[data-side="inside"]) { --viewbar: 64px; }
  :where(#app[data-side="inside"]) .cb-topbar > .tb-right { grid-column: 3; }
  :where(#app[data-side="inside"]) .cb-topbar > .tb-mid { position: absolute; top: calc(100% + 1px); left: var(--frame-x); right: calc(var(--frame-x) + var(--panel-w)); height: var(--viewbar); padding: 0 12px; gap: 10px; justify-content: center; background: rgba(248, 245, 240, 0.96); border-bottom: 1px solid var(--line); }
  :where(#app[data-side="inside"]) .cb-topbar > .tb-mid .seg3 button { min-width: 0; padding: 0 12px; font-size: 14px; }
  :where(#app[data-side="inside"]) .cb-topbar > .tb-mid .goto-btn { width: auto; padding: 0 12px 0 14px; justify-content: flex-start; }
  :where(#app[data-side="inside"]) .cb-topbar > .tb-mid .goto-btn span, :where(#app[data-side="inside"]) .cb-topbar > .tb-mid .goto-btn .chev { display: block; }
  :where(#app[data-side="inside"]) #levelSeg.seg3 button { padding: 0 12px; font-size: 14px; }
}
/* phones under 480 px: the level switch on a row of its own under the top row, the screen's width (its phone look kept:
   44 px buttons in a 2 px rim; with the switch 38 px in a 3 px rim, as the switch, below). Only the three way switch
   (index.html; dev/ui.html's older two way one keeps its place) */
@media (max-width: 479px) {
  :where(#app[data-side="inside"]):has(.cb-topbar #levelSeg.seg3) { --viewbar: 54px; }
  :where(#app[data-side="inside"]) .cb-topbar:has(#levelSeg.seg3) { height: calc(var(--topbar) + var(--viewbar)); grid-template-rows: calc(var(--topbar) - 1px); align-content: start; }
  :where(#app[data-side="inside"]) .cb-topbar #levelSeg.seg3 { position: absolute; top: var(--topbar); left: 12px; right: 12px; }
  :where(#app[data-side="inside"]) .cb-topbar #levelSeg.seg3 button { padding: 0 8px; font-size: 13px; }
}

/* 2. only while the switch shows */
@media (min-width: 821px) {
  :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) { padding-left: 20px; }
  :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) .tb-left { gap: 0; }
  :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) .tb-history { margin-left: 16px; }
}
@media (max-width: 1529px) and (min-width: 1440px) {
  :where(#app[data-side="inside"]) .cb-topbar #sideSeg.shell-side:not([hidden]) button { padding: 0 10px; }
}
@media (max-width: 1439px) and (min-width: 821px) {
  :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) .tb-left .brand { display: none; }
  :where(#app[data-side="inside"]) .cb-topbar #sideSeg.shell-side:not([hidden]) button { padding: 0 11px; }
  :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) .seg3 button { min-width: 0; padding: 0 12px; }
}
/* Go to room keeps its words at 1450 to 1589 px with the switch (the brand's words, which step out there, are already
   gone); an icon at 1120 to 1449 px */
@media (max-width: 1589px) and (min-width: 1450px) {
  :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) .goto-btn { width: auto; padding: 0 12px 0 14px; justify-content: flex-start; }
  :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) .goto-btn span, :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) .goto-btn .chev { display: block; }
}
/* the price in the panel's foot under 1690 px (the audit button stays in the top bar down to 1361 px) */
@media (max-width: 1689px) and (min-width: 1400px) {
  :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) .cb-price { display: none; }
  :where(#app[data-side="inside"]):has(.cb-topbar .shell-side:not([hidden])) .cb-panel .panel-foot { display: grid; grid-template-columns: 1fr; gap: 4px 12px; align-items: center; padding: 12px 24px; border-top: 1px solid var(--line); background: #fff; }
  :where(#app[data-side="inside"]):has(.cb-topbar .shell-side:not([hidden])) .cb-panel .pf-price { display: flex; flex-direction: column; }
  :where(#app[data-side="inside"]):has(.cb-topbar .shell-side:not([hidden])) .cb-panel .pf-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); }
  :where(#app[data-side="inside"]):has(.cb-topbar .shell-side:not([hidden])) .cb-panel .pf-value { font-weight: 700; font-size: 15px; }
  :where(#app[data-side="inside"]):has(.cb-topbar .shell-side:not([hidden])) .cb-panel .pf-note { grid-column: 1; grid-row: 2; justify-self: start; font-size: 11.5px; font-weight: 600; color: var(--royal); background: var(--lilac-wash); border-radius: 999px; padding: 3px 9px; }
  :where(#app[data-side="inside"]):has(.cb-topbar .shell-side:not([hidden])) .cb-panel .pf-audit { display: none; }
}
/* 900 to 1119 px with the switch: the view bar, as under 900 px */
@media (max-width: 1119px) and (min-width: 900px) {
  :where(#app[data-side="inside"]):has(.cb-topbar #sideSeg.shell-side:not([hidden])) { --viewbar: 64px; }
  :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) > .tb-right { grid-column: 3; }
  :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) > .tb-mid { position: absolute; top: calc(100% + 1px); left: var(--frame-x); right: calc(var(--frame-x) + var(--panel-w)); height: var(--viewbar); padding: 0 12px; gap: 10px; justify-content: center; background: rgba(248, 245, 240, 0.96); border-bottom: 1px solid var(--line); }
  :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) > .tb-mid .seg3 button { min-width: 0; padding: 0 12px; font-size: 14px; }
  :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) > .tb-mid .goto-btn { width: auto; padding: 0 12px 0 14px; justify-content: flex-start; }
  :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) > .tb-mid .goto-btn span, :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) > .tb-mid .goto-btn .chev { display: block; }
  :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) #levelSeg.seg3 button { padding: 0 12px; font-size: 14px; }
  :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) .tb-right { gap: 12px; }
}
@media (max-width: 899px) and (min-width: 821px) {
  :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) .tb-right { gap: 12px; }
}
/* phones: the switch first in the top row (the brand mark gives way, as on the outside), 44 px tall: 38 px buttons in a
   3 px rim, the touch area the full 44 px; the level switch the same height beside it */
@media (max-width: 820px) {
  :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) .tb-left .brand { display: none; }
  :where(#app[data-side="inside"]) .cb-topbar #sideSeg.shell-side:not([hidden]) { padding: 3px; }
  :where(#app[data-side="inside"]) .cb-topbar #sideSeg.shell-side:not([hidden]) button { position: relative; height: 38px; padding: 0 11px; }
  :where(#app[data-side="inside"]) .cb-topbar #sideSeg.shell-side:not([hidden]) button::after { content: ''; position: absolute; inset: -3px 0; }
  :where(#app[data-side="inside"]) .cb-topbar #sideSeg.shell-side:not([hidden]) .seg-ind { top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 2); }
  :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) .tb-right { gap: 10px; }
  :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) #levelSeg { padding: 3px; }
  :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) #levelSeg button { position: relative; height: 38px; }
  :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) #levelSeg button::after { content: ''; position: absolute; inset: -3px 0; }
}
/* under 610 px with the switch: the level switch on its own row, as under 480 px without it (its row 50 px: the 44 px
   pill and 6 px under it) */
@media (max-width: 609px) {
  :where(#app[data-side="inside"]):has(.cb-topbar #sideSeg.shell-side:not([hidden])) { --viewbar: 50px; }
}
@media (max-width: 609px) and (min-width: 480px) {
  :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) { height: calc(var(--topbar) + var(--viewbar)); grid-template-rows: calc(var(--topbar) - 1px); align-content: start; }
  :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) #levelSeg { position: absolute; top: var(--topbar); left: 12px; right: 12px; }
  :where(#app[data-side="inside"]) .cb-topbar:has(.shell-side:not([hidden])) #levelSeg button { padding: 0 8px; font-size: 13px; }
}