/* Shared Metella shell: housing and future product families use these same
   controls, responsive targets and reduce/reopen behaviour. */
:is(#helpButton,#tribuneHelp,#measurementToggle,#tribuneMeasures){display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:10px;border:1px solid var(--color-line);border-radius:50%;background:var(--color-paper);box-shadow:0 3px 16px var(--color-shadow);color:var(--color-accent)}
:is(#helpButton,#tribuneHelp,#measurementToggle,#tribuneMeasures) svg{display:block;width:22px;height:22px;margin:0}
:is(#landscapeToggle,#tribuneEnvironmentToggle){display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border:1px solid var(--color-line);border-radius:999px;background:var(--color-paper);color:var(--color-accent);box-shadow:0 3px 16px var(--color-shadow);font-size:13px;font-weight:600;white-space:nowrap}
:is(#landscapeToggle,#tribuneEnvironmentToggle)>svg,:is(#landscapeToggle,#tribuneEnvironmentToggle) [data-icon]>svg{width:22px;height:22px;flex:none}
:is(#landscapeToggle,#tribuneEnvironmentToggle) .environment-chevron{width:16px;height:16px}
:is(#landscapeMenu,#tribuneEnvironmentMenu){position:fixed;inset:auto;margin:0;width:280px;max-width:calc(100vw - 24px);padding:16px;border:1px solid var(--color-line);border-radius:20px;background:var(--color-paper);box-shadow:0 8px 30px var(--color-shadow);color:var(--color-ink)}
:is(#landscapeMenu,#tribuneEnvironmentMenu)>header,:is(#landscapeMenu,#tribuneEnvironmentMenu) .landscape-menu-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
:is(#landscapeMenu,#tribuneEnvironmentMenu) header button{display:grid;place-items:center;width:44px;min-height:44px;padding:10px;border-radius:50%}
:is(#landscapeMenu,#tribuneEnvironmentMenu)>p{font-size:12px;color:var(--color-muted);line-height:1.5}
:is(#landscapeMenu,#tribuneEnvironmentMenu) .landscape-options{display:grid;grid-template-columns:1fr;gap:8px}
:is(#landscapeMenu,#tribuneEnvironmentMenu) .landscape-options button{display:flex;flex-direction:row;align-items:center;gap:12px;padding:7px;border:1px solid var(--color-line);border-radius:12px;min-height:62px;font-size:13px;font-weight:600;background:var(--color-paper)}
:is(#landscapeMenu,#tribuneEnvironmentMenu) .landscape-options button[aria-pressed=true]{border-color:var(--color-accent);background:var(--color-accent-soft)}
:is(#landscapeMenu,#tribuneEnvironmentMenu) .landscape-options img,:is(#landscapeMenu,#tribuneEnvironmentMenu) .studio-preview{width:80px;height:48px;object-fit:cover;border-radius:7px;background:var(--color-studio);display:grid;place-items:center}
:is(#reopenConfigPanel,#tribuneTab){position:absolute;right:var(--space-md);top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:44px;padding:14px 10px;border:1px solid var(--color-line);border-radius:16px 0 0 16px;background:var(--color-paper);color:var(--color-accent);box-shadow:0 4px 20px var(--color-shadow)}
:is(#reopenConfigPanel,#tribuneTab)>span:not([data-icon]){writing-mode:vertical-rl;font-size:12px;font-weight:600}
:is(#reopenConfigPanel,#tribuneTab) svg{width:20px;height:20px;flex:none}
:is(.scene-zoom,.tribune-zoom){display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--color-line);border-radius:24px;background:var(--color-paper);box-shadow:0 3px 16px var(--color-shadow)}
:is(.scene-zoom,.tribune-zoom) button{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:10px;border-radius:0;color:var(--color-ink);background:transparent}
:is(.scene-zoom,.tribune-zoom) button+button{border-top:1px solid var(--color-line)}
:is(.scene-zoom,.tribune-zoom) svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
@media(max-width:900px),(max-width:1024px) and (max-height:500px),(pointer:coarse){
 :is(#reopenConfigPanel,#tribuneTab){left:50%;right:auto;top:auto;bottom:calc(88px + env(safe-area-inset-bottom));transform:translateX(-50%);flex-direction:row;gap:8px;min-height:44px;padding:10px 16px;border-radius:999px}
 :is(#reopenConfigPanel,#tribuneTab)>span:not([data-icon]){writing-mode:horizontal-tb;display:block}
 :is(#reopenConfigPanel,#tribuneTab) svg{transform:rotate(90deg)}
}

/* Primary navigation uses the same labelled, rounded controls in every family. */
:is(#navConfigure,#tribuneOpenPanel){background:var(--color-accent-soft);color:var(--color-accent);font-weight:600}
:is(#navConfigure,#tribuneOpenPanel)[aria-expanded=true]{background:var(--color-accent);color:var(--color-inverse)}
:is(#viewport .mode-tabs,.tribune-views) button{border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:600}
:is(#viewport .mode-tabs,.tribune-views) button svg{flex:none}
:is(#toggleConfigPanel,#tribuneCollapse){min-height:44px;border-radius:24px}
:is(#closePanel,#tribuneExitPanel){box-shadow:none}

:is(#landscapeToggle,#tribuneEnvironmentToggle)[aria-expanded=true]{background:var(--color-accent);color:var(--color-inverse)}
:is(#landscapeMenu,#tribuneEnvironmentMenu) .landscape-options button span{padding-bottom:0}
@media(min-width:960px) and (min-height:600px) and (orientation:landscape) and (pointer:coarse){
 :is(#reopenConfigPanel,#tribuneTab){left:auto;right:12px;top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column;gap:10px;padding:14px 10px;border-radius:16px 0 0 16px}
 :is(#reopenConfigPanel,#tribuneTab)>span:not([data-icon]){writing-mode:vertical-rl}
 :is(#reopenConfigPanel,#tribuneTab) svg{transform:none}
 .tribune-workspace{grid-template-columns:minmax(0,1fr) clamp(340px,34vw,420px);grid-template-rows:1fr;padding:12px;gap:12px}
 .panel-collapsed .tribune-workspace{grid-template-columns:1fr}
 .tribune-app:not(.panel-collapsed) .tribune-views{display:grid}
}

/* Shared orbit guidance and focus geometry, independent of the product model. */
.scene-orbit-hint{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;background:var(--color-glass);color:var(--color-accent);font-size:11px;pointer-events:none}
.scene-orbit-hint .ui-icon{display:block;width:26px;height:26px;flex:none}
.is-customizing #tribuneGesture{display:none}
.tribune-gesture.scene-orbit-hint{left:18px;bottom:98px;transform:none;border-radius:8px;font-size:11px}
#tribuneCanvas,#tribuneCanvas canvas{border-radius:inherit}
.tribune-stage canvas:focus-visible{outline:none}
.tribune-stage:has(canvas:focus-visible)::after{content:'';position:absolute;inset:0;border:2px solid var(--color-accent);border-radius:inherit;pointer-events:none;z-index:7}
.tribune-stage canvas{cursor:var(--cursor-orbit,grab)}
.is-walking .tribune-stage canvas{cursor:crosshair}
@media(max-width:900px),(pointer:coarse){.tribune-gesture.scene-orbit-hint{left:12px;bottom:86px;font-size:10px}.scene-orbit-hint .ui-icon{width:22px;height:22px}}

/* Compact colour samples share one touch/keyboard contract in both families. */
.compact-colors{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px 6px}
:is(.color-grid,.finish-options).compact-colors .compact-color{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;min-width:44px;min-height:64px;padding:5px 2px;border:0;border-radius:8px;background:transparent;box-shadow:none;outline:none;text-align:center;line-height:1.25;font-size:11px}
.compact-colors .compact-color .compact-swatch{flex:none;display:block;width:34px;height:34px;border-radius:50%;margin:0 0 3px;border:1px solid var(--color-line);outline:2px solid transparent;outline-offset:3px;background-position:center;background-size:cover}
.compact-colors .compact-color:has(input:checked) .compact-swatch{outline-color:var(--color-accent)}
.compact-colors .compact-color:has(input:checked)::after{content:'✓';position:absolute;top:27px;left:calc(50% + 8px);display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--color-accent);color:white;font-size:11px;line-height:1;border:2px solid var(--color-paper)}
:is(.color-grid,.finish-options).compact-colors .compact-color:has(input:focus-visible){outline:2px solid var(--color-accent);outline-offset:1px}
.compact-colors .compact-color input{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;overflow:hidden;clip-path:inset(50%)}
.compact-colors .compact-color>span{padding:0}
.color-grid.compact-colors .compact-color>span{min-height:2.5em;display:flex;align-items:center;justify-content:center;width:100%;overflow-wrap:anywhere}
.color-grid.compact-colors .compact-color>small{font-size:10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.compact-colors .finish-caption{justify-content:center;white-space:normal;text-align:center;font-size:11px;line-height:1.25}
.compact-colors .compact-color small{font-size:9px;line-height:1.2;color:var(--color-muted)}
@media(hover:hover) and (pointer:fine){.compact-colors .compact-color:not(:has(input:checked)):hover .compact-swatch{outline-color:var(--color-muted)}}

/* Keep the two composition choices readable without changing their dimensions. */
.seat-mode label{border:1px solid transparent;cursor:pointer;line-height:1.4;min-width:0}
.seat-mode label:has(input:checked){border-color:var(--color-accent);background:var(--color-accent-soft);color:var(--color-accent)}
.seat-mode label:has(input:focus-visible){outline:2px solid var(--color-accent);outline-offset:2px}
.seat-mode input{flex:none}

/* Keep the sheet opener outside the object tools on short landscape screens. */
@media(max-height:500px) and (orientation:landscape){
 #tribuneStage:has(.logo-editor:not([hidden])) #tribuneTab{left:auto;right:66px;top:76px;bottom:auto;transform:none;flex-direction:row;padding:10px 12px;min-height:44px;border-radius:999px}
 #tribuneStage:has(.logo-editor:not([hidden])) #tribuneTab>span:not([data-icon]){writing-mode:horizontal-tb}
}

/* The collapse action always points down, in both product families. */
body[data-panel=configure] #toggleConfigPanel svg { transform:none; }
.tribune-app { --dock-clearance:88px; }
.tribune-app.onboarding-open #movementHint { visibility:hidden; opacity:0; }
.tribune-app #onboardingNext { background:var(--color-accent); color:white; justify-content:center; }
/* Keep keyboard focus inside fields at the edges of the scrollable quote body. */
.quote-fields input:focus-visible,
.quote-fields textarea:focus-visible { outline:3px solid var(--color-brand-blue); outline-offset:-3px; }
.tribune-app .onboarding-actions button { justify-content:center; }
.tribune-capacity { position:absolute; top:74px; left:18px; z-index:2; margin:0; padding:7px 11px; background:var(--color-hint); color:var(--color-ink); border-radius:12px; font-size:12px; pointer-events:none; }
@media(max-width:600px) {
 .stage-top #tribuneEnvironmentToggle { width:44px; height:44px; min-height:44px; padding:0; justify-content:center; border-radius:50%; }
 #tribuneEnvironmentToggle>span:not([data-icon]):not(.loading-spinner), #tribuneEnvironmentToggle>.environment-chevron { display:none; }
 #tribuneEnvironmentToggle .loading-spinner { left:10px; }
 .tribune-capacity { top:64px; left:12px; font-size:11px; }
}

/* The full paint catalogue opens on demand; existing quick swatches stay visible. */
.compact-colors .ral-trigger{font:inherit;color:inherit;background:none;cursor:pointer;justify-content:flex-start;gap:5px;min-width:0}
.ral-trigger>span,.ral-trigger>small{font-size:11px;line-height:1.2}
.ral-wheel{background:conic-gradient(#ce433d,#e5ad36,#78a74f,#318f90,#386aa0,#8c5d9c,#ce433d)}
.ral-trigger[data-selected] .ral-wheel{outline-color:var(--accent,#145da8)}
.ral-trigger:focus-visible{outline:2px solid var(--accent,#145da8);outline-offset:2px}
.ral-panel{position:fixed;inset:auto;margin:0;box-sizing:border-box;width:min(380px,calc(100vw - 32px));height:min(560px,calc(100dvh - 32px));padding:20px;background:#fff;color:#242c2a;border:0;border-radius:16px;box-shadow:0 12px 48px #172b3c33;font-family:inherit;overflow:hidden;}
.ral-panel:popover-open{display:flex;flex-direction:column;gap:12px}
.ral-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ral-heading h2{margin:0;font-size:20px;line-height:1.3;letter-spacing:-.02em}
.ral-heading p{margin:4px 0 0;font-size:13px;color:#53615e}
.ral-close{display:grid;place-items:center;flex:none;width:44px;height:44px;margin:-8px -8px 0 0;background:none;border:0;border-radius:50%;color:inherit;cursor:pointer}
.ral-search{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.ral-search input{box-sizing:border-box;width:100%;min-height:44px;border:1px solid #b8c1be;border-radius:8px;padding:10px 12px;background:#fff;color:#242c2a;font:inherit;font-size:16px;caret-color:#145da8}
.ral-search input::placeholder{color:#65726e;font-weight:400;opacity:1}
.ral-results{font-size:12px;color:#53615e}
.ral-palette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:6px;min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;padding:3px;scrollbar-width:thin;scrollbar-color:#8e9d97 #f1f4f2}
.ral-palette button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 3px;min-height:104px;border:0;border-radius:8px;background:none;color:inherit;cursor:pointer;font:inherit;text-align:center;white-space:normal}
.ral-palette i{display:block;flex:none;width:32px;height:32px;border:1px solid #0002;border-radius:50%}
.ral-palette strong{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.ral-palette span{font-size:11px;line-height:1.3;overflow-wrap:anywhere}
.ral-palette button[aria-pressed=true]{background:#e9f0f7;outline:2px solid #145da8;outline-offset:-2px}
.ral-panel button:focus-visible,.ral-panel input:focus-visible{outline:2px solid #145da8;outline-offset:1px}
.ral-panel button:active{transform:scale(.97)}
.ral-note{margin:0;padding-top:4px;font-size:12px;line-height:1.45;color:#53615e}
.ral-panel ::selection{background:#d2e4f6;color:#183c62}
@media(hover:hover){.ral-panel button:hover{background:#edf2ef}.ral-trigger:hover{background:#edf2ef}}