/* The workbench (/app): the first-person view is the board, everything else floats on it.
   Top left: brand, venue, model notes, seat search. Top right: one seat or two, language, focus, share. Left: the tool rail.
   Right: the plan card, which floats over the full-bleed view. Bottom right: view zoom and help. */
body[data-page=app]{height:100dvh;overflow:hidden;--plan-w:clamp(320px,34vw,560px);--rail-x:84px;--top-y:84px;--dock-r:0px;--dock-b:0px}
@media (min-width:641px){body.plan-open{--dock-r:calc(var(--plan-w) + 32px)}}
.label-short,.phone-only{display:none}

/* The board */
.stage{position:fixed;z-index:0;top:0;left:0;right:0;bottom:var(--dock-b);container-type:size;background:var(--canvas);outline:none}
.povs{position:absolute;inset:0;display:grid;grid-template-columns:1fr}
body[data-workflow=compare] .povs{grid-template-columns:1fr 1fr;gap:2px;background:var(--line-strong)}
@container (max-aspect-ratio:3/4){body[data-workflow=compare] .povs{grid-template-columns:1fr;grid-template-rows:1fr 1fr}}
.viewport{position:relative;overflow:hidden;background:var(--canvas);min-width:0;min-height:0}
.viewport canvas{width:100%;height:100%;display:block;touch-action:none}
.pov canvas:focus-visible{outline:none}
.pov:focus-within::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 3px var(--primary)}
.pov.editing::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 4px var(--a)}
#povB.editing::after{box-shadow:inset 0 0 0 4px var(--b)}
.pov[data-fallback]::before{content:attr(data-fallback);position:absolute;inset:0;z-index:1;display:grid;place-items:center;padding:24px;text-align:center;color:var(--ink-2);font-size:14px}
.loading{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:24px;text-align:center;background:var(--canvas);color:var(--ink-2);font-size:15px;font-weight:500}

/* Top-left pill */
.board-bar{position:fixed;z-index:40;left:16px;top:16px;max-width:calc(100vw - 32px - 470px)}
.venue-button{display:flex;align-items:center;gap:8px;min-height:44px;max-width:280px;padding:0 10px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);text-align:left;cursor:pointer}
.venue-button:hover,.venue-button[aria-expanded=true]{background:var(--surface-3)}
.venue-text{display:grid;min-width:0}
.venue-text strong{font-size:15px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.venue-text small{color:var(--ink-3);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-bar .popover{left:0;top:calc(100% + 10px)}
.venue-pop{width:340px}
.venue-ico{display:none}
.venue-list{list-style:none;display:grid;gap:2px;max-height:min(52dvh,420px);overflow:auto}
.venue-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:6px 10px;border-radius:var(--r-sm)}
.venue-list li[aria-current]{background:var(--primary-soft)}
.venue-list strong{display:block;font-size:14px;font-weight:600}.venue-list small{color:var(--ink-3)}
.venue-list li:not([aria-current]) strong{color:var(--ink-2)}
.info-pop{width:360px;padding:8px 14px 8px}
.info-pop .pop-title{padding-left:0}
.model-note{color:var(--ink-2);font-size:13px;line-height:1.6}.model-note strong{color:var(--ink)}
.status-line{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;font-weight:600}
.status-line i{width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
body.live-3d .status-line i{background:#12a150}
.version{margin-top:4px;color:var(--ink-3);font-size:12px;line-height:1.5;word-break:break-word}
.info-pop .pop-link{margin:6px -6px 0}
.find-pop{width:340px;padding:14px}
.find-row{display:flex;gap:6px;margin-top:6px}.find-row input{flex:1 1 auto}
.find-error{min-height:18px;margin-top:6px;color:var(--b-ink);font-size:13px;font-weight:600}
.find-error:empty{min-height:0;margin:0}
.find-hint{margin-top:6px;color:var(--ink-3);font-size:12px;line-height:1.5}

/* Top-right pill */
.action-bar{position:fixed;z-index:40;right:16px;top:16px;gap:4px}
.action-bar .popover{right:0;top:calc(100% + 10px)}
.menu-pop{width:280px}
.lang-switch{min-width:52px;padding:0 12px}
.share-button{padding:0 14px}
.action-bar .btn.quiet[aria-pressed=true]{background:var(--primary-soft);color:var(--primary-ink)}

/* Tool rail */
.rail{position:fixed;z-index:30;left:16px;top:var(--top-y);display:flex;flex-direction:column;gap:2px;padding:4px;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-2)}
.rail-sep{height:1px;margin:4px 8px;background:var(--line)}
.rail .icon-btn{width:44px;height:44px}
.view-wrap{display:flex}
.view-pop{left:calc(100% + 10px);top:0;min-width:176px}
.view-pop .menu-item[aria-checked=true]{background:var(--primary-soft);color:var(--primary-ink)}
@media (min-width:641px) and (max-height:660px){.rail .icon-btn{width:36px;height:36px}.rail-sep{margin:3px 6px}.zoom-value{width:36px;line-height:16px}}

/* Score card, one per view */
.pov-stack{position:absolute;z-index:3;left:var(--rail-x);top:var(--top-y);width:276px;max-width:calc(100% - var(--rail-x) - 16px);display:flex;flex-direction:column;gap:8px;pointer-events:none}
.pov-card{padding:12px 14px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-2)}
body[data-workflow=compare] #povB .pov-stack{left:16px}
@container (max-aspect-ratio:3/4){body[data-workflow=compare] #povB .pov-stack{left:var(--rail-x);top:16px}}
.pov-tag{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;font-weight:600;color:var(--ink-2)}
.pov-tag b{display:grid;place-items:center;flex:0 0 24px;height:24px;border-radius:var(--r-xs);background:var(--a);color:var(--a-ink);font:800 14px/1 var(--sans)}
.pov-tag.b b{background:var(--b);color:#fff}
.pov-tag span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-workflow=single] .pov-tag b{flex-basis:12px;height:12px;border-radius:50%;font-size:0;box-shadow:inset 0 0 0 1.5px var(--ink)}
.score-plate{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);transition:opacity .15s ease}
.score-plate.updating{opacity:.5}.score-plate:empty{opacity:1}/* no figures yet: "measuring" at full strength */
.score-plate.updating::after{content:attr(data-busy);display:block;margin-top:4px;color:var(--ink-3);font-size:12px;font-weight:600;animation:busy-in .15s ease .15s backwards}
@keyframes busy-in{from{opacity:0}}
/* Controls locked while the scene is made anew dim only if it takes over 150 ms; in bird's-eye the scenario controls stay dim. */
body.recalc :is(#scenarioDialog,#planCard,.workflow-switch,.view-wrap,#findButton){opacity:.55;transition:opacity .15s ease .15s}
.scenario-controls.view-lock>:not(.lock-note){opacity:.45}
.lock-note{grid-column:1/-1;margin:0;padding:6px 10px;border-radius:var(--r-xs);background:var(--surface-3);color:var(--ink-2);font-size:13px;font-weight:600}
.score-main{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.score-main span{color:var(--ink-3);font-size:13px;font-weight:600;white-space:nowrap}
.score-main b{font:800 34px/1 var(--sans);letter-spacing:-.01em}
.score-main em{margin-left:auto;padding:4px 8px;border-radius:999px;background:var(--surface-3);font-size:12px;font-weight:700;font-style:normal;white-space:nowrap}
.score-bar{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin:10px 0 8px}
.score-bar i{height:6px;border-radius:3px;background:var(--surface-3)}.score-bar i.on{background:var(--ink)}
.score-why{color:var(--ink-3);font-size:12px;line-height:1.4}
.score-sub{margin-top:6px;color:var(--ink-2);font-size:13px;font-weight:600}.score-sub b{color:var(--ink);font-size:15px;font-weight:800}
.score-note{margin-top:8px;padding:6px 8px;border-radius:var(--r-xs);background:#fdf0e1;color:var(--warn);font-size:12px;font-weight:600;line-height:1.4}
.est-card{display:flex;align-items:flex-start;gap:8px;margin:0;padding:10px 12px;border-radius:var(--r-lg);background:#fdf0e1;color:var(--warn);box-shadow:inset 0 0 0 1.5px #e3b987,var(--shadow-2);font-size:13px;font-weight:600;line-height:1.4}
.est-card .ico{width:18px;height:18px;flex:none;margin-top:1px}

/* Plan card */
.plan-card{position:fixed;z-index:20;right:16px;top:var(--top-y);bottom:84px;width:var(--plan-w);display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:12px 8px 8px 16px}
.plan-title h2{font:700 17px/1.25 var(--sans)}
.plan-title small{display:block;margin-top:2px;color:var(--ink-3);line-height:1.4}
.plan-host{position:relative;flex:1 1 auto;min-height:240px;margin:0 8px;border-radius:var(--r);background:var(--surface-2);overflow:hidden}
.plan-svg{width:100%;height:100%;display:block;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.plan-svg:active{cursor:grabbing}
.plan-deck{fill:var(--ink)}.plan-wing{fill:#2b2852}
.plan-stage-label{fill:#fff;font:700 5px var(--sans);letter-spacing:.2em;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.plan-block{cursor:pointer;outline:none}
.plan-block polygon{fill:var(--tier);fill-opacity:.88;stroke:var(--surface-2);stroke-width:1.5px;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:fill-opacity .1s ease}
.plan-block:hover polygon{fill-opacity:1;stroke:var(--ink);stroke-width:2px}
.plan-svg.seats .plan-block-label{display:none}
.plan-svg.seats .plan-block polygon{fill-opacity:.35}
.plan-block.is-a polygon{fill:var(--a);fill-opacity:1}.plan-block.is-b polygon{fill:var(--b);fill-opacity:1}
.plan-svg.seats .plan-block.is-a polygon,.plan-svg.seats .plan-block.is-b polygon{fill-opacity:.55}
.plan-block.is-active polygon{stroke:var(--ink);stroke-width:3px}
.plan-block:focus-visible polygon{stroke:var(--primary);stroke-width:4px}
.plan-block-label{fill:#fff;font-family:var(--sans);font-weight:700;font-size:4.6px;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.plan-block.is-a .plan-block-label{fill:var(--ink)}.plan-block.is-b .plan-block-label{fill:#fff}
.plan-cone{pointer-events:none;stroke:var(--ink);stroke-width:1px;vector-effect:non-scaling-stroke;stroke-dasharray:6 4}
.plan-cone.a{fill:rgba(255,212,0,.32)}.plan-cone.b{fill:rgba(212,42,38,.24)}
.plan-dot{fill:#fff;stroke:var(--ink);stroke-width:1px;vector-effect:non-scaling-stroke;cursor:pointer}
.plan-dot:hover{fill:var(--a)}.plan-dot.chosen{fill:var(--a)}
.plan-mark{pointer-events:none}
.plan-mark circle{fill:var(--a);stroke:var(--ink);stroke-width:2px}
.plan-mark.b circle{fill:var(--b)}
.plan-mark.editing circle{stroke-width:4px}
.plan-mark text{fill:var(--ink);font-family:var(--sans);font-weight:800;font-size:14px;text-anchor:middle;dominant-baseline:central}
.plan-mark.b text{fill:#fff}
.plan-legend{position:absolute;z-index:3;left:8px;top:8px;display:flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow-1);font-size:13px;font-weight:600;pointer-events:none}
.dot{display:inline-block;width:11px;height:11px;margin:0 6px 0 10px;border-radius:50%;background:var(--a);box-shadow:inset 0 0 0 1.5px var(--ink)}.dot:first-child{margin-left:0}.dot.b{background:var(--b)}
.camera-tools{position:absolute;z-index:3;right:8px;bottom:8px;display:grid;padding:3px;border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--shadow-1)}
.camera-tools button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-xs);background:transparent;color:var(--ink);cursor:pointer}
.camera-tools button:hover{background:var(--surface-3)}
.seat-controls{flex:none;margin:0;padding:12px 16px 16px;border:0;min-width:0}
.control-legend{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:8px;font-size:15px;font-weight:700}
.control-legend>span{flex:none;white-space:nowrap}
.control-legend small{min-width:0;overflow:hidden;color:var(--ink-3);font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.seat-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}.seat-fields label:first-child{grid-column:1/-1}
.seat-fields label{font-size:12px;color:var(--ink-3)}
.seat-hint{margin-top:8px;color:var(--ink-3);font-size:12px}
.slot-tabs{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;margin:0 0 10px}
.slot-tabs button[data-slot]{display:flex;align-items:center;gap:8px;min-width:0;min-height:48px;padding:6px 8px;border:0;border-radius:var(--r-sm);background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--line-control);text-align:left;cursor:pointer}
.slot-tabs button[data-slot]:hover{box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.slot-tabs button[data-slot]>b{display:grid;place-items:center;flex:0 0 24px;height:24px;border-radius:var(--r-xs);background:var(--a);color:var(--a-ink);font:800 14px/1 var(--sans)}
.slot-tabs button[data-slot="1"]>b{background:var(--b);color:#fff}
.slot-tabs button[data-slot] span{min-width:0}
.slot-tabs button[data-slot] small,.slot-tabs button[data-slot] strong{display:block}
.slot-tabs button[data-slot] small{color:var(--ink-3)}
.slot-tabs button[data-slot] strong{overflow:hidden;font-size:12px;font-weight:600;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.slot-tabs button.active[data-slot="0"]{background:var(--a-soft);box-shadow:inset 0 0 0 2px var(--ink)}
.slot-tabs button.active[data-slot="1"]{background:var(--b-soft);box-shadow:inset 0 0 0 2px var(--ink)}
.slot-tabs .swap{display:grid;place-items:center;width:44px;padding:0;border:0;border-radius:var(--r-sm);background:transparent;cursor:pointer}
.slot-tabs .swap:hover{background:var(--surface-3)}.slot-tabs .swap:disabled{opacity:.4;cursor:not-allowed}

/* Bottom-right: view zoom and help */
.rail-zoom{display:flex;flex-direction:column;align-items:center;gap:2px}
.zoom-value{display:block;width:44px;text-align:center;font-size:12px;font-weight:700;line-height:20px;color:var(--ink-2)}
.help-dot{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font:800 16px/1 var(--sans)}
.help-button:hover .help-dot{background:var(--primary)}
.rail-zoom.off>button,.rail-zoom.off .zoom-value{opacity:.4;pointer-events:none}

/* Scenario: on a wide screen a panel along the bottom, beside the rail, so the score card and the stage stay in view; on a phone a sheet. */
.scenario-sheet{position:fixed;z-index:35;left:var(--rail-x);bottom:16px;top:auto;width:min(760px,calc(100vw - var(--rail-x) - max(calc(var(--dock-r) + 16px),268px)));max-height:calc(100dvh - 32px);margin:0;padding:0;border:0;border-radius:var(--r-lg);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-3);overflow:auto;overscroll-behavior:contain}
.scenario-sheet[open]{animation:pop-in .16s var(--ease)}
.scenario-sheet::backdrop{background:rgba(5,0,56,.28)}
.conditions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:2px 16px;padding:0 16px 10px;min-width:0}
.cond-head{grid-column:1/-1;position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;margin:0 -16px;padding:8px 8px 4px 16px;background:var(--surface)}
.cond-head .preset-row{grid-column:auto;flex:1;padding:0;margin-left:8px}
.cond-head h2{font:700 17px/1.2 var(--sans)}
.btn.sm{min-height:44px;padding:0 10px;font-size:13px}
.slider-field{display:grid;gap:0;min-width:0}
.slider-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.slider-label output{color:var(--ink);font-size:17px;font-weight:800}
.preset-row{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-bottom:4px}
.preset-row button{min-height:44px;padding:0 14px;border:0;border-radius:999px;background:var(--surface-3);color:var(--ink);font:600 14px/1 var(--sans);cursor:pointer;transition:background-color .12s ease,color .12s ease}
.preset-row button:hover{background:#e6e1d5}
.preset-row button.active,.preset-row button[aria-pressed=true]{background:var(--ink);color:#fff}
.preset-custom{display:inline-grid;place-items:center;min-height:44px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line-control);color:var(--ink-2);font-size:14px;font-weight:600}
.posture-field{align-self:end}
.advanced{grid-column:1/-1;margin-top:2px;border-top:1px solid var(--line)}
.advanced summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;font-size:15px;font-weight:700;list-style:none;cursor:pointer}
.advanced summary::-webkit-details-marker{display:none}
.advanced summary::after{content:"";width:9px;height:9px;margin:-4px 6px 0 0;border:solid var(--ink-2);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .12s ease}
.advanced[open] summary::after{transform:rotate(225deg);margin-top:4px}
.advanced-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 16px;padding-bottom:4px}
.equipment{grid-column:2/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;margin:0;padding:0;border:0}
.equipment legend{grid-column:1/-1}
.equipment legend{margin-bottom:2px;padding:0;color:var(--ink-2);font-size:13px;font-weight:600}
.assumption{margin:2px 0 0;color:var(--ink-3);font-size:12px;line-height:1.5}
/* A compact panel on a pointer screen: shorter controls, so the advanced settings fit without scrolling. */
@media (min-width:641px){
  .scenario-sheet input[type=range]{height:28px}
  .scenario-sheet .check,.scenario-sheet select,.scenario-sheet .btn.sm{min-height:36px}
  .scenario-sheet .preset-row button,.scenario-sheet .preset-custom{min-height:36px;padding:0 12px}
  .scenario-sheet .advanced summary{min-height:32px}
  .scenario-sheet .icon-btn{width:36px;height:36px}
}
@media (max-width:900px) and (min-width:641px){.conditions,.advanced-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.equipment{grid-column:1/-1}.cond-head{flex-wrap:wrap}}

/* First visit */
.welcome{position:fixed;z-index:25;left:var(--rail-x);bottom:16px;width:min(380px,calc(100vw - var(--rail-x) - 16px));padding:18px 20px 16px}
.welcome h2{font:800 20px/1.25 var(--sans)}
.welcome-steps{list-style:none;display:grid;gap:10px;margin:14px 0 16px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.welcome-steps li{display:flex;gap:10px}
.welcome-steps strong{color:var(--ink)}
.step{display:grid;place-items:center;flex:0 0 24px;height:24px;border-radius:50%;background:var(--primary-soft);color:var(--primary-ink);font-size:13px;font-weight:800}
.welcome-actions{display:flex;justify-content:flex-end;gap:8px}

/* Help */
.help-body{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px;padding:4px 24px 8px}
.help-body h3{margin-bottom:8px;font-size:15px;font-weight:700}
.help-body ul{display:grid;gap:6px;padding-left:18px;color:var(--ink-2);font-size:14px;line-height:1.55}
.help-keys{grid-column:1/-1}
.keys{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px 20px;margin-bottom:12px}
.keys div{display:flex;align-items:center;gap:10px;font-size:14px}
.keys dt{display:flex;gap:4px;min-width:72px}
.keys dd{color:var(--ink-2)}
.help-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px 20px;border-top:1px solid var(--line);font-size:14px}

/* Focus mode: only the view, the score cards and the way out */
.focus-exit{position:fixed;z-index:60;left:50%;top:16px;transform:translateX(-50%);gap:10px;min-height:44px;padding:0 14px;border:0;font:600 14px/1 var(--sans);cursor:pointer}
.focus-exit:hover{background:var(--surface-3)}
body.focus-mode{--dock-r:0px!important;--dock-b:0px!important;--rail-x:16px;--top-y:16px}
body.focus-mode .floating{display:none!important}
body.focus-mode .pov.editing::after{display:none}
body.focus-mode .pov-stack{top:76px}

/* Messages drop in under the top pills, clear of the scenario panel along the bottom. */
body[data-page=app] .toast{top:84px;bottom:auto;transform:translate(-50%,-12px)}body[data-page=app] .toast.visible{transform:translate(-50%,0)}
.global-error{position:fixed;z-index:70;left:50%;top:84px;transform:translateX(-50%);width:min(560px,calc(100vw - 32px))}
.noscript{position:fixed;inset:auto 16px 16px;z-index:200;padding:16px;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-2)}

/* Narrow desktop: tighten the pills */
@media (max-width:1100px) and (min-width:641px){
  .board-bar{max-width:calc(100vw - 32px - 300px)}
  .venue-button{max-width:200px}
  .label-long{display:none}.label-short{display:inline}
  #focusButton span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}#focusButton{padding:0 10px}/* its text is not shown but is still the button's name */
}
/* Narrower than the full header: the venue button keeps its place as an icon, its name read out but not shown. */
@media (max-width:860px){
  .venue-button{justify-content:center;width:44px;max-width:none;padding:0}.venue-button>.ico.sm{display:none}.venue-ico{display:block}
  .venue-button .venue-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:860px) and (min-width:641px){
  .venue-divider,.brand-name{display:none}
  .board-bar{max-width:none}
}

/* Phone: the view fills the screen, the rail becomes a bottom toolbar, the plan and the scenario open as sheets above it. */
@media (max-width:640px){
  body[data-page=app]{--toolbar-h:calc(68px + env(safe-area-inset-bottom));--sheet-h:min(54svh,440px);--rail-x:8px;--top-y:60px;--dock-b:0px}
  body.plan-open{--dock-b:calc(var(--toolbar-h) + var(--sheet-h))}
  .label-long,.wide-only,.venue-divider,.brand-name{display:none}
  .label-short,.phone-only{display:inline}.phone-only{display:block}
  .tip,.share-label{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* still the button's name */
  .board-bar{z-index:41;left:8px;top:8px;max-width:none;padding:2px}/* its popovers open over the language and share buttons */
  .board-bar .bar-divider{margin:8px 2px}
  .brand{min-width:44px;justify-content:center;padding:0 2px}
  .action-bar{right:8px;top:8px;padding:2px}
  .action-bar .segmented{padding:0}
  .segmented button{min-height:44px;padding:0 10px;font-size:14px}
  .share-button{width:44px;padding:0}
  /* The top row has no room for the language and the share buttons (with them it needs 420 px in English): they stand under its right
     end, each a button of its own, clear of the score card from 320 px; the share menu opens under them. */
  .action-bar .lang-switch,.action-bar>.pop-wrap{position:fixed;right:8px;top:60px;border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--shadow-2)}
  .action-bar>.pop-wrap{top:108px}
  .lang-switch{min-width:44px;padding:0}
  .board-bar .popover,.action-bar .popover{position:fixed;left:8px;right:8px;top:62px;width:auto;min-width:0}
  .action-bar .popover{top:158px}
  .rail{left:8px;right:8px;top:auto;bottom:calc(8px + env(safe-area-inset-bottom));flex-direction:row;justify-content:space-around;gap:0;padding:6px}/* floats over the 3D view */
  body:not(.plan-open) .camera-tools{bottom:calc(var(--toolbar-h) + 4px)}
  .rail-sep{display:none}
  .plan-card{left:0;right:0;top:auto;bottom:var(--toolbar-h);width:auto;height:var(--sheet-h);border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:0 -4px 18px rgba(5,0,56,.10)}
  .plan-card .card-head{padding:8px 6px 4px 14px}
  .plan-title small{display:none}
  .plan-host{min-height:150px}
  .seat-controls{padding:8px 12px 10px}
  .control-legend{display:none}
  .seat-hint{display:none}
  .rail-zoom,.rail-help,.rail-help-sep{display:none}
  .pov-stack{width:auto;max-width:min(240px,calc(100% - 16px));gap:6px}
  .pov-card{padding:6px 10px;border-radius:var(--r)}
  .view-pop{left:-8px;top:auto;bottom:calc(100% + 14px)}
  body[data-workflow=compare] #povB .pov-stack{left:8px;top:8px}
  .score-plate{margin-top:4px;padding-top:4px}
  .score-main{gap:0 6px}.score-main span{font-size:12px}.score-main b{font-size:20px}.score-main em{padding:2px 6px;font-size:11px}
  .score-bar,.score-why{display:none}
  .est-card{align-self:flex-start;gap:4px;padding:2px 8px 2px 6px;border-radius:999px;font-size:11px;box-shadow:inset 0 0 0 1px #e3b987}.est-card .ico{width:12px;height:12px;margin-top:0}
  body[data-workflow=compare] #povB .est-card{display:none}
  .score-sub{margin-top:0;font-size:11px}.score-sub b{font-size:12px}
  .score-note{margin-top:4px;padding:4px 6px}
  .welcome{left:8px;right:8px;width:auto;bottom:calc(max(var(--dock-b),var(--toolbar-h)) + 8px);padding:16px}
  .scenario-sheet{left:0;right:0;bottom:0;width:100%;max-width:none;max-height:min(92svh,760px);border-radius:var(--r-lg) var(--r-lg) 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .conditions{grid-template-columns:1fr 1fr;padding:0 14px 14px}
  .cond-head{margin:0 -14px;padding:8px 6px 6px 14px;border-bottom:1px solid var(--line)}
  .advanced-grid{grid-template-columns:1fr 1fr;gap:0 14px}.equipment{grid-column:1/-1;grid-template-columns:1fr 1fr;gap:4px 8px}
  .cond-head{flex-wrap:wrap}.cond-head .preset-row{order:3;flex-basis:100%;margin:0 0 4px}
  .help-body{grid-template-columns:1fr;padding:4px 18px 8px}
  .help-foot{padding:12px 18px 18px;flex-wrap:wrap}
  body[data-page=app] .toast{top:62px}
  .global-error{top:62px}
  body.focus-mode .pov-stack{top:68px}
}
/* The top row from 320 px, in English too ("One", "Compare"): the brand's divider goes and the switch's buttons narrow. */
@media (max-width:360px){
  .segmented button{padding:0 5px}
  .board-bar .bar-divider{display:none}
}
.venue-list a.venue-link{display:flex;flex:1;align-items:center;justify-content:space-between;gap:12px;margin:-6px -10px;padding:6px 10px;border-radius:var(--r-sm);color:inherit;text-decoration:none}
.venue-list a.venue-link:hover,.venue-list a.venue-link:focus-visible{background:var(--surface-2)}