/* Content stays inside the approved floating shell; the scene never becomes a page. */
button:disabled { cursor: default; opacity: .48; }
#inspection-note { position:absolute;z-index:8;left:30px;bottom:28px;max-width:min(620px,calc(100% - 100px));padding:10px 14px;border:1px solid #c4d1c6;border-radius:12px;background:rgba(248,250,246,.95);color:#28463b;font-size:14px;line-height:1.45;pointer-events:none; }
#inspection-note[hidden] { display:none; }
html[data-input=touch] #inspection-note { left:12px;top:80px;bottom:auto;max-width:calc(100% - 24px);padding:8px 12px;font-size:11px; }
html[data-desktop=fixed] .view-title strong { font-weight:400; }
html[data-desktop=fixed] #panel-content>h1 { font-weight:400; }
html[data-desktop=fixed] #panel-content>.eyebrow { font-size:14px!important;letter-spacing:.09em!important; }
html[data-desktop=fixed] .control-section>summary { font-size:18px;font-weight:400; }
html[data-desktop=fixed] .mini-control>summary { font-size:16px;font-weight:400; }
/* Match the approved Vehicle card hierarchy without enlarging every workspace. */
html[data-desktop=fixed] #panel[data-workspace=vehicle] .control-section>summary { font-size:20px;gap:16px; }
html[data-desktop=fixed] #panel[data-workspace=vehicle] .control-section>summary i,
html[data-desktop=fixed] #panel[data-workspace=vehicle] .mini-control>summary i { width:40px;height:38px;flex:0 0 40px; }
html[data-desktop=fixed] #panel[data-workspace=vehicle] .control-section>summary svg,
html[data-desktop=fixed] #panel[data-workspace=vehicle] .mini-control>summary svg { width:34px;height:34px; }
html[data-desktop=fixed] #panel[data-workspace=vehicle] .mini-control>summary { font-size:18px;gap:8px;padding:9px 10px;white-space:nowrap; }
html[data-desktop=fixed] #panel[data-workspace=vehicle] .mini-control>summary i { width:32px;height:34px;flex-basis:32px; }
html[data-desktop=fixed] #panel[data-workspace=vehicle] .mini-control>summary svg { width:32px;height:32px; }
html[data-desktop=fixed] .body-section>h2 { font-size:16px; }
/* Mobile has one close control, so it does not need the desktop pin+close reserve. */
html[data-input=touch] #panel-content>h1 { margin-right:40px;font-weight:400; }
html[data-editing=true] .panel-toggle { display:none; }
.panel-tabs,.action-row { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.roof-visibility-actions [aria-pressed="true"] { background:#d7e8dc!important; border-color:#476d59!important; }
.panel-tabs button,.action-row button:not(.primary),.section-body button:not(.primary),.compact-inspector button,.export-grid button { min-height:42px; padding:9px 12px; border:1px solid #b9c8bd; border-radius:10px; background:rgba(243,248,240,.86); font-size:14px; }
.panel-tabs { margin-bottom:20px; }
.section-body { margin:0 18px 8px; }
.section-body p,.section-body small,.compact-inspector p,.source-note p { font-size:13px; line-height:1.5; }
.section-body>details,.compact-inspector>details { padding:12px 0; border-top:1px solid #ccd7cd; }
.section-body summary,.compact-inspector summary { cursor:pointer; font-size:15px; min-height:36px; }
#panel-content label { display:flex; flex-direction:column; gap:7px; margin:12px 0; font-size:14px; color:#36564a; }
#panel-content label:has(input[type=checkbox]) { flex-direction:row; align-items:center; }
.endpoint-summary { display:none; }
.route-layer-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 8px; }
.route-visible-list { padding-left:20px; font-size:14px; line-height:1.5; }
.route-visible-list li { margin:10px 0; overflow-wrap:anywhere; }
#panel-content input:not([type=checkbox],[type=color],[type=range]),#panel-content select { width:100%; min-width:0; min-height:42px; padding:9px 10px; border:1px solid #bdcdc0; border-radius:9px; background:rgba(255,255,250,.82); color:#203c30; font:inherit; }
#panel-content input[type=color] { width:60px; height:40px; padding:2px; border:1px solid #bdcdc0; border-radius:8px; background:transparent; }
#panel-content input[type=checkbox] { width:19px; height:19px; accent-color:#426959; }
.field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; }
.field-grid label { margin:7px 0!important; }
.section-body .primary { font-size:14px; margin-top:14px; }
.compact-inspector { background:rgba(246,248,240,.7); }
.compact-inspector h2 { margin-top:8px; }
.dimension-readout span { font-size:12px; }
.catalogue-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:18px 0; }
.catalogue-card { min-height:146px; display:flex; flex-direction:column; text-align:left; padding:10px; border:1px solid #c4d1c6; border-radius:14px; background:rgba(250,251,243,.82); }
.catalogue-card:hover { background:#e2eddf; }
.catalogue-card svg { width:100%; height:75px; }
.catalogue-card strong { font-size:14px; line-height:1.3; margin:4px 0; }
.catalogue-card small { font-size:12px; color:#667c6b; }
.connection-row,.event-row { margin:10px 0; padding:12px; border:1px solid #ced9ce; border-radius:12px; background:#f3f7ef99; }
.connection-row>b,.connection-row>small,.event-row>b,.event-row>small { display:block; overflow-wrap:anywhere; }
.connection-row small,.event-row small { color:#647869; margin-top:5px; }
.connection-row b { font-size:14px; }
.draft-notice { margin:40px 0 18px; padding:12px; border:1px solid #c6b184; border-radius:12px; background:#f8edcbcc; font-size:13px; }
.draft-notice+.eyebrow { margin-top:10px!important; }
.draft-chip { position:absolute;z-index:23;bottom:25px;left:30px;max-width:60%;padding:12px 18px;border:1px solid #d3bd87;border-radius:22px;background:#fff3d9e8;box-shadow:0 4px 16px #394d3522;font-size:13px; }
.status-message { position:absolute;z-index:65;left:50%;bottom:22px;transform:translateX(-50%);max-width:min(620px,88%);padding:14px 20px;background:#f9f9ed;border:1px solid #b5c6b6;border-radius:14px;box-shadow:0 8px 24px #243c3425;font-size:14px; }
.export-grid { display:grid;gap:8px; }
.source-note { padding:12px 0;font-size:13px; }
.analysis-view { position:absolute;inset:24px;z-index:60;overflow:auto;padding:30px;background:#f5f8f0f5;backdrop-filter:blur(20px);border:1px solid #fff;border-radius:24px; }
.analysis-toolbar { position:sticky;top:-30px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;background:#f5f8f0;box-shadow:0 1px #d6ded3; }
.analysis-toolbar button,.analysis-toolbar select { min-height:44px;padding:10px 12px;border:1px solid #c4d1c1;border-radius:12px;background:#e1eade;color:#183b30;font:inherit; }
.analysis-toolbar label { display:flex;align-items:center;gap:8px; }
.analysis-section { min-width:0;scroll-margin-top:90px; }
.analysis-view .table-scroll { max-width:100%;overscroll-behavior-x:contain; }
.comparison-columns { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px; }
.comparison-columns article { min-width:0; }
.port-picker { margin:16px 0;padding:12px;border:1px solid #c4d1c1;border-radius:14px; }
.port-card-list { display:grid;gap:8px; }
.port-card { display:flex;flex-direction:column;gap:5px;min-height:54px;padding:12px;text-align:left;white-space:normal;overflow-wrap:anywhere;border:1px solid #bdcdb8;border-radius:10px;background:#f1f5ed;color:#183b30; }
.port-card span { font-size:12px; }
.port-card[aria-pressed=true] { outline:2px solid #387461; }
.port-card:disabled { opacity:.55; }
.comparison-toolbar { flex-wrap:wrap; }
@media(max-width:760px){.comparison-columns{grid-template-columns:1fr}.comparison-toolbar label{flex:1;min-width:130px}.comparison-toolbar select{max-width:100%}}
.analysis-view .supply-day { margin:10px 0;border:1px solid #ccd7c7;border-radius:12px; }
.analysis-view summary { min-height:44px;padding:12px;cursor:pointer; }
.analysis-view .supply-day[open]>summary { background:#e6ecdf;border-radius:12px; }
.view-title { max-width:calc(100% - 80px); }
@media(max-width:760px){
 .analysis-view { font-size:16px;line-height:1.45; }
 #analysis-view p:not(.eyebrow):not(.fine) { font-size:16px; }
 #analysis-view .eyebrow { font-size:12px; }
 .analysis-toolbar { top:-20px;gap:8px; }
 .analysis-toolbar label { flex:1;min-width:0;font-size:0; }
 .analysis-toolbar select { width:100%;font-size:16px; }
 .analysis-toolbar button { flex-shrink:0;font-size:15px; }
 .analysis-view .table-scroll table { font-size:15px; }
 html[data-input="touch"] .analysis-view .metric-strip span,html[data-input="touch"] .analysis-view .fine { font-size:14px; }
 .analysis-view .issues { grid-template-columns:minmax(0,1fr); }
 .analysis-view .supply-period { padding:12px; }
}
.analysis-heading { display:flex;justify-content:space-between;gap:20px;align-items:flex-start; }
.analysis-heading button { padding:12px 16px;border-radius:14px;background:#dfeadd;min-height:44px; }
.analysis-view h1 { font-size:34px; }.analysis-view h1,.analysis-view p { margin-top:8px; }
.analysis-view .metric-strip span { font-size:13px; }.analysis-view .metric-strip strong { font-size:22px; }
.analysis-view .timeline { height:180px; }.analysis-view .day { font-size:12px;grid-template-rows:18px 125px 22px; }
.table-scroll { overflow:auto; margin:18px 0; }
.timeline-scroll { padding-bottom:8px; }
.timeline-scroll .day { flex:1 0 42px; }
.storage-conflict { position:absolute;z-index:45;left:50%;top:130px;transform:translateX(-50%);width:min(480px,calc(100% - 24px));max-height:35vh;overflow:auto;padding:18px;border:1px solid #c39b66;border-radius:16px;background:rgba(255,249,232,.98);box-shadow:0 8px 30px #304d3726;font-size:14px; }
.storage-conflict[hidden] { display:none; }
.storage-conflict button { min-height:44px;padding:8px 12px;border-radius:10px;background:#e3eadf; }
.route-identity { overflow-wrap:anywhere;font-size:13px;line-height:1.5; }
.table-scroll table { width:100%;border-collapse:collapse;font-size:13px; }
.table-scroll th,.table-scroll td { padding:12px;border-bottom:1px solid #cad7c7;text-align:left;white-space:nowrap; }
.analysis-view .issues { grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.analysis-view[hidden],.draft-chip[hidden],.status-message[hidden] { display:none; }
#panel[data-workspace=vehicle] .vehicle-inspect { display:block; }
#panel .vehicle-setup label,#panel .vehicle-setup .setup-note,#panel .gesture-note,#panel .fine { font-size:13px; }
#panel .choice-grid button,#panel .surface-grid button { font-size:13px;min-height:42px; }
#panel .object-list button span { font-size:14px; }#panel .object-list button small { font-size:12px; }
@media (min-width:761px) and (max-width:1320px) {
 html:not([data-desktop=fixed]) nav { left:125px;right:225px;width:auto;transform:none;height:58px; }
 html:not([data-desktop=fixed]) nav button[data-workspace] span { font-size:12px; }
 html:not([data-desktop=fixed]) nav button[data-workspace] svg { width:25px;height:25px; }
 html:not([data-desktop=fixed]) #panel-content { padding:26px 20px; }
 html:not([data-desktop=fixed]) #panel-content>.eyebrow { font-size:11px!important; }
 html:not([data-desktop=fixed]) #panel-content>h1 { font-size:32px; }
 html:not([data-desktop=fixed]) .control-section>summary { font-size:15px;min-height:58px;padding:9px 14px;gap:10px; }
 html:not([data-desktop=fixed]) .control-section>summary svg { width:28px;height:28px; }
 html:not([data-desktop=fixed]) .mini-control>summary { font-size:14px;min-height:52px; }
 html:not([data-desktop=fixed]) .body-section>h2 { font-size:14px; }
}
/* body colour wheel is shown */
@media (max-width:760px) {
 .endpoint-summary { display:block; margin:-4px 0 12px; padding:8px 10px; border:1px solid #bdcdc0; border-radius:9px; background:#f4f7ef; color:#203c30; font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
 .endpoint-summary span { display:block; }
 html[data-input=touch] .stage { overflow:clip; }
 .section-body { margin-inline:12px; }
 html[data-input=touch][data-editing=true] nav { display:flex; }
 html[data-input=touch][data-editing=true] .shell.mobile-nav-open .transform-tools { bottom:calc(var(--mobile-nav-height) + max(18px,env(safe-area-inset-bottom))); }
 /* Default-visible Mobile A rail with its own small categories disclosure. */
 html[data-input=touch] .shell .mobile-nav-toggle { display:grid;opacity:1;pointer-events:auto;left:auto;right:18px;bottom:max(23px,env(safe-area-inset-bottom));width:44px;height:44px;border-radius:50%;background:rgba(247,250,244,.88);box-shadow:0 4px 16px #243c3418;transform:none; }
 html[data-input=touch] .shell.mobile-nav-open .mobile-nav-toggle { bottom:calc(var(--mobile-nav-height) + max(32px,env(safe-area-inset-bottom))); }
 html[data-input=touch] .shell.panel-open .mobile-nav-toggle { opacity:1;pointer-events:auto;bottom:calc(var(--mobile-panel-height) + max(28px,env(safe-area-inset-bottom))); }
 html[data-input=touch][data-editing=true] .shell .mobile-nav-toggle { left:18px;right:auto; }
 html[data-input=touch] .mobile-nav-toggle svg { width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6; }
 html[data-input=touch] .mobile-nav-toggle:focus-visible { outline:2px solid #36564a;outline-offset:3px; }
 html[data-input=touch] .shell nav[aria-hidden=true] { visibility:hidden; }
 html[data-input=touch] .shell .panel-toggle, html[data-input=touch] .shell.mobile-nav-open .panel-toggle { left:50%;right:auto;top:auto;bottom:calc(var(--mobile-nav-height) + max(28px,env(safe-area-inset-bottom)));width:auto;min-height:54px;height:auto;padding:10px 28px;border-radius:28px;transform:translateX(-50%);justify-content:center; }
 html[data-input=touch] .shell:not(.mobile-nav-open):not(.panel-open) .panel-toggle { bottom:max(18px,env(safe-area-inset-bottom)); }
 html[data-input=touch] .panel-toggle #panel-toggle-label { position:static;width:auto;height:auto;overflow:visible;clip-path:none; }
 .panel-tabs button,.action-row button,.section-body button:not(.primary) { min-height:44px; }
 .catalogue-grid { gap:10px; }.catalogue-card { min-height:132px; }
 .analysis-view { inset:8px;padding:20px 16px;border-radius:18px; }
 .analysis-heading { flex-direction:column-reverse;gap:10px; }
 .analysis-view h1 { font-size:28px; }
 .analysis-view .metric-strip { grid-template-columns:1fr; }
 .analysis-view .metric-strip>div { display:flex;justify-content:space-between;align-items:center; }
 .analysis-view .metric-strip strong { margin:0;font-size:18px; }
 .draft-chip { left:12px;bottom:82px;max-width:calc(100% - 82px);padding:10px 12px;font-size:12px; }
 html[data-input=touch] .shell.panel-open .draft-chip { bottom:calc(var(--mobile-panel-height) + 18px); }
 html[data-input=touch] .shell.panel-open .draft-notice { margin-top:25px; }
 .status-message { bottom:75px; }
 .section-body .action-row { gap:6px; }
 #panel-content>.lead { font-size:14px; }
 #panel-content>h1 { font-size:28px; }
 /* Results must be fully visible before the action cluster in the short sheet. */
 html[data-input=touch] #panel[data-workspace=simulate] #panel-content { display:flex;flex-direction:column; }
 html[data-input=touch] #panel[data-workspace=simulate] #panel-content > * { flex-shrink:0; }
 html[data-input=touch] #panel[data-workspace=simulate] #panel-content > .eyebrow { order:-3; }
 html[data-input=touch] #panel[data-workspace=simulate] #panel-content > h1 { order:-2;margin-bottom:14px; }
 html[data-input=touch] #panel[data-workspace=simulate] .trip-verdict { order:-1;margin:0 0 10px;padding:12px 14px; }
 html[data-input=touch] #panel[data-workspace=simulate] .trip-verdict p { margin:6px 0 0; }
 html[data-input=touch] .journey-actions { margin-top:0; }
 .compact-inspector .field-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.energy-supply { margin: 22px 0; overflow-wrap: anywhere; }
.supply-period { margin: 12px 0; padding: 14px 16px; border: 1px solid #d9c6a6; border-radius: 12px; background: #faf5ec; }
.supply-period h3 { margin: 0 0 8px; font-size: 16px; }
.supply-period p { margin: 8px 0; }
.supply-period ul { margin: 8px 0; padding-left: 20px; }
.energy-supply details p { font-size: 14px; line-height: 1.55; }
.calibration-choice { margin: 12px 0; padding: 12px; border: 1px solid #d9c6a6; border-radius: 10px; overflow-wrap: anywhere; }
.calibration-choice label, .calibration-measurement-choice { display: flex; gap: 10px; align-items: center; min-height: 48px; }
.calibration-choice input[type="checkbox"], .calibration-measurement-choice input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; }
.calibration-choice p { margin: 8px 0; }

.catalogue-entry { display:flex; flex-direction:column; gap:5px; min-width:0; }
.catalogue-entry>.catalogue-card { width:100%; flex:1; }
.catalogue-entry>[data-action="library-favourite"] { min-height:36px; font-size:12px; }

/* step 3 connections card: what is linked, what is not, tap-to-link and the colour key */
.link-card{border:1px solid rgba(40,77,70,.16);border-radius:14px;padding:12px 14px;margin:12px 0;background:rgba(255,255,255,.55)}
.link-card h2{margin:0 0 8px;font-size:1rem}
.link-pills{display:flex;flex-wrap:wrap;gap:6px}
.link-pill{font-size:.8rem;padding:4px 10px;border-radius:999px;font-weight:600}
.link-pill.ok{background:#e3efe6;color:#2d6a45}
.link-pill.open{background:#fbe7d6;color:#9a4d12}
.link-open-title{margin:10px 0 6px;font-size:.85rem}
.link-open{display:flex;flex-wrap:wrap;gap:6px}
.link-open button{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;padding:4px 10px;border-radius:999px;border:1px solid #efc39c;background:#fff8f1;cursor:pointer}
.link-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ff7a1a;box-shadow:0 0 0 3px #ff7a1a33,0 0 8px 2px #ff7a1a88}
.link-prompt{margin:8px 0 0;padding:8px 10px;border-radius:10px;background:#eef4f2;font-size:.85rem}
.link-legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:10px;font-size:.75rem;color:#4a5552}
.link-legend span{display:inline-flex;align-items:center;gap:5px}
.link-legend i{display:inline-block;width:18px;height:5px;border-radius:3px}
.link-list{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:4px}
.link-list li{display:flex;align-items:center;gap:8px;font-size:.8rem}
.link-list li i{flex:0 0 18px;height:5px;border-radius:3px}
.link-list li span{flex:1}
.link-remove{border:0;background:transparent;color:#9a4d12;cursor:pointer;font-size:.85rem;padding:2px 6px}
.link-all{margin-top:8px;font-size:.85rem}
/* on a phone the message sits above the open bottom sheet, never over its buttons */
html[data-input=touch] .shell.panel-open .status-message{bottom:calc(var(--mobile-panel-height) + 18px)}
html[data-input=touch] .shell:not(.panel-open) .status-message{bottom:calc(120px + env(safe-area-inset-bottom))}
/* load-space sizes: label, value and where the figure comes from on one tidy row */
.evidence{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 12px;padding:8px 0;border-top:1px solid rgba(24,55,47,.1)}
.evidence strong{font-variant-numeric:tabular-nums}
.evidence small{grid-column:1/-1;color:#6b776f}
/* messages sit just under the top bar on every screen size, clear of panels and the step bar */
.status-message,.shell.tray-open .status-message,html[data-input=touch] .shell.panel-open .status-message,html[data-input=touch] .shell:not(.panel-open) .status-message{top:calc(96px + env(safe-area-inset-top));bottom:auto;cursor:pointer}
@media (max-width:760px){.status-message,html[data-input=touch] .shell.panel-open .status-message,html[data-input=touch] .shell:not(.panel-open) .status-message{top:calc(78px + env(safe-area-inset-top))}}
/* body paint: nine preset paints plus the colour wheel, five to a row, all the same size */
.body-section .colour-tools{grid-template-columns:repeat(5,1fr)}
.body-section .colour-tools .custom-colour{position:relative;width:52px;height:52px;border-radius:50%}
html[data-input="mouse"] .body-section .colour-tools .custom-colour{width:32px;height:32px}
html[data-input="touch"] .body-section .colour-tools{grid-template-columns:repeat(5,1fr)}
html[data-input="touch"] .body-section .colour-tools .custom-colour{width:38px;height:38px}
.body-section .colour-tools .custom-colour.active{box-shadow:0 0 0 3px #fbfcf8,0 0 0 5px #18372f}
/* finger-sized controls on touch screens: nothing in the panel is shorter than 44 px */
html[data-input=touch] #panel-content button,html[data-input=touch] #panel-content summary,html[data-input=touch] #panel-content select,html[data-input=touch] #panel-content input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]){min-height:44px}
html[data-input=touch] #panel-content input[type=checkbox],html[data-input=touch] #panel-content input[type=radio]{width:24px;height:24px}
html[data-input=touch] #panel-content label:has(>input[type=checkbox]),html[data-input=touch] #panel-content label:has(>input[type=radio]){min-height:44px;display:flex;align-items:center;gap:10px}
html[data-input=touch] #panel-close{width:44px;height:44px}
/* each placement tool says what it does; the tool in use is filled green (set in approved.css) */
.transform-tools button{position:relative}
.transform-tools button::after{content:attr(aria-label);position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);padding:3px 8px;border-radius:7px;background:rgba(248,247,240,.94);box-shadow:0 1px 4px rgba(30,50,42,.12);color:#1d372f;font:500 12px/1.3 system-ui,sans-serif;white-space:nowrap;pointer-events:none}
.transform-tools button.active::after{background:#1d4a3d;color:#fff}
.body-section .colour-tools>button,.body-section .colour-tools>.custom-colour,html[data-input] .body-section .colour-tools>button,html[data-input] .body-section .colour-tools>.custom-colour{width:40px;height:40px}
.body-section .colour-tools>.custom-colour{display:grid;place-items:center;overflow:hidden;background:conic-gradient(#c96f4b,#c99e42,#5f8277,#2f5d86,#8f2a27,#c96f4b);color:#fff;font-weight:700}
/* placement feedback: gap sizes on the dimension lines, and a red note when a piece runs into another */
#placement-feedback{position:absolute;inset:0;pointer-events:none;z-index:8}
#placement-feedback .gap-label{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;padding:3px 9px;border:1px solid #9fb6aa;border-radius:999px;background:rgba(250,250,244,.96);color:#1d4a3d;font:600 12px/1.35 system-ui,sans-serif;white-space:nowrap;box-shadow:0 2px 8px rgba(29,55,47,.15);cursor:pointer}
#placement-feedback .gap-label.touching{border-style:dashed;color:#4f675d;cursor:default}
#placement-feedback .gap-label.clash{border-color:#d2452f;background:#fff1ee;color:#a3321f;cursor:default}
#placement-feedback .gap-label.editing{display:flex;align-items:center;gap:4px;padding:2px 8px}
#placement-feedback .gap-input{width:52px;border:0;background:transparent;font:inherit;color:inherit;text-align:right}
html[data-input=touch] #placement-feedback .gap-label{font-size:14px;padding:6px 12px;min-height:36px}
#placement-feedback .gap-label .arrow{opacity:.7;margin-right:4px}
#placement-feedback .gap-label .to{font-weight:500;opacity:.8}
/* the selected item's own size: a solid pill on top of it, unlike the light gap pills */
#size-badge{position:absolute;inset:0;pointer-events:none;z-index:8}
#size-badge .size-pill,#placement-feedback .gap-label.size{position:absolute;transform:translate(-50%,-100%);padding:5px 11px;border:0;border-radius:999px;background:#1d4a3d;color:#fff;font:600 12.5px/1.3 system-ui,sans-serif;white-space:nowrap;box-shadow:0 2px 8px rgba(29,55,47,.3);pointer-events:none}
html[data-input=touch] #size-badge .size-pill,html[data-input=touch] #placement-feedback .gap-label.size{font-size:14px;padding:7px 13px}
/* how an item is shown: closed, or opened / raised / pulled out */
.pose-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 2px}
.pose-row .pose-label{font-size:12px;color:#6b7a72;margin-right:2px}
.pose-row button.active{background:#1d4a3d;color:#fff;border-color:#1d4a3d}
/* while an item is being moved its tools are on screen; the "finish placing" chip would only sit under them */
html[data-editing=true] .draft-chip{display:none}
/* Layers: a list of everything in the van, opened from a button on the view */
.layers-toggle{position:absolute;z-index:30;left:24px;top:calc(226px + env(safe-area-inset-top));display:flex;align-items:center;gap:6px;min-height:40px;padding:6px 13px 6px 10px;border:1px solid #cfd9d2;border-radius:999px;background:rgba(250,250,244,.94);color:#1d372f;font:600 13px/1 system-ui,sans-serif;box-shadow:0 4px 14px rgba(29,55,47,.1);cursor:pointer}
.layers-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.layers-toggle[aria-expanded=true]{background:#1d4a3d;color:#fff;border-color:#1d4a3d}
.layers{position:absolute;z-index:31;left:24px;top:calc(274px + env(safe-area-inset-top));width:300px;max-height:min(58vh,520px);overflow:auto;padding:12px 10px 10px;border:1px solid #d6dfd8;border-radius:16px;background:rgba(251,252,248,.97);box-shadow:0 12px 34px rgba(29,55,47,.16)}
.layers header{display:flex;align-items:center;justify-content:space-between;padding:0 4px 6px}
.layers h2{margin:0;font-size:16px}
.layers h3{margin:10px 4px 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6b776f}
.layers h3 small{font-weight:500}
.layer-close{width:36px;height:36px;border:0;background:transparent;font-size:22px;cursor:pointer;color:#1d372f}
.layer-row{display:flex;align-items:center;gap:2px;padding-left:calc(var(--depth,0) * 18px);border-radius:10px}
.layer-row.active{background:#dfeae3}
.layer-row.is-hidden .layer-name{opacity:.45}
.layer-name{flex:1;min-width:0;display:flex;align-items:center;gap:9px;min-height:40px;padding:4px 6px;border:0;background:transparent;text-align:left;font:500 13px/1.25 system-ui,sans-serif;color:#1d372f;cursor:pointer}
.layer-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layer-name img,.layer-name i{flex:none;width:30px;height:30px;border-radius:7px;object-fit:contain;background:#eef1ea}
.layer-icon{flex:none;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;color:#5b6d63;cursor:pointer}
.layer-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.layer-icon[data-layer-lock][aria-pressed=true]{color:#1d4a3d;background:#e3ece6}
.layer-icon[data-layer-eye][aria-pressed=false]{color:#a3321f}
@media (max-width:760px){.layers-toggle{left:16px;top:calc(76px + env(safe-area-inset-top));min-height:44px}.layers{left:12px;right:12px;width:auto;top:calc(128px + env(safe-area-inset-top));max-height:52vh}.layer-name,.layer-icon{min-height:44px}.layer-icon{width:44px;height:44px}}
.shell.editing .layers-toggle{display:none}
.link-open-item{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-bottom:6px}
.link-need{margin:0;font-size:.85rem;color:#8a5a12}
.link-add{border:1px solid #1d4a3d;border-radius:999px;background:#1d4a3d;color:#fff;padding:4px 12px;font-size:.82rem;cursor:pointer}
/* trip advice: the reason, then fixes that show their outcome */
.trip-advice{margin:10px 0 14px;padding:12px 14px;border:1px solid #e5c9a8;border-radius:12px;background:#fff8ef}
.advice-cause{margin:0 0 6px}
.trip-advice h3{margin:10px 0 6px;font-size:13px}
.advice-list{display:grid;gap:8px}
.advice-list button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:48px;padding:9px 12px;border:1px solid #c9d6cd;border-radius:10px;background:#fbfcf8;text-align:left;cursor:pointer;font:inherit}
.advice-list button:hover{border-color:#1d4a3d}
.advice-list span{font-size:.85rem}.advice-list .ok{color:#2e7d55}.advice-list .bad{color:#a3321f}
.day-types{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:8px 0 10px}
.day-types button{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 10px;border:1px solid #c9d6cd;border-radius:10px;background:#fbfcf8;font:inherit;font-size:.9rem;cursor:pointer;text-align:left}
.day-types button[aria-pressed=true]{border-color:#1d4a3d;background:#1d4a3d;color:#fff}
.day-types svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* results: the verdict first, day cards on phones, detailed tables tucked away */
.result-verdict{margin:12px 0 16px;padding:14px 16px;border-radius:14px;border:1px solid #c9d6cd;background:#f3f8f4}
.result-verdict strong{display:block;font-size:1.15rem}
.result-verdict.bad{border-color:#e2b3a8;background:#fff3ef}.result-verdict.bad strong{color:#a3321f}
.result-verdict.warn{border-color:#e5d19c;background:#fffaeb}.result-verdict.good strong{color:#2e7d55}
.result-verdict .trip-advice{background:#fff;margin:10px 0}
.day-cards{display:none;gap:8px;margin:8px 0}
.day-card{border:1px solid #d6dfd8;border-radius:12px;background:#fbfcf8;padding:10px 12px}
.day-card summary{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;cursor:pointer;list-style:none}
.day-card .day-bar{grid-column:1/-1;position:relative;height:8px;border-radius:4px;background:#e6ebe6;overflow:visible}
.day-card .day-bar i{position:absolute;inset:0 auto 0 0;border-radius:4px;background:#4f8a6d}
.day-card.reserve .day-bar i{background:#d4a23a}.day-card.empty .day-bar i{background:#c0473a}
.day-card .day-bar b{position:absolute;top:-3px;width:2px;height:14px;background:#1d372f;opacity:.5}
.day-card dl{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin:10px 0 0}
.day-card dt{font-size:.78rem;color:#6b776f}.day-card dd{margin:0;font-variant-numeric:tabular-nums}
.detail-numbers>summary{cursor:pointer;font-weight:600;padding:8px 0}
@media (max-width:760px){.day-cards{display:grid}.day-table{display:none}}
.advice-list .warn{color:#8a5a12}
.link-open .link-add,#panel-content .link-open .link-add{background:#1d4a3d;color:#fff;border:1px solid #1d4a3d;border-radius:999px;padding:6px 12px;min-height:36px;font-size:.82rem}
html[data-input=touch] #panel-content .link-open .link-add{min-height:44px}
/* build checks: coloured level dots, most important first */
.check-level{display:flex;align-items:center;gap:8px;margin:14px 0 6px;font-size:13px}
.check-level i{width:10px;height:10px;border-radius:50%;background:#9aa3a0}
.check-level.fix i{background:#c0473a}.check-level.check i{background:#d4a23a}
.check-level small{color:#6b776f;font-weight:500}
.check-list{display:grid;gap:8px}
.check{padding:10px 12px;border:1px solid #dde4de;border-left:4px solid #9aa3a0;border-radius:10px;background:#fbfcf8}
.check.fix{border-left-color:#c0473a}.check.check{border-left-color:#d4a23a}
.check p{margin:4px 0 6px;font-size:.88rem;color:#4f5f57}
/* phones: the panel is a sheet that sits above the step bar and can be dragged between small, half and full height */
.sheet-handle{display:none}
@media (max-width:760px){
 html[data-input=touch] .shell.panel-open .stage>aside{bottom:calc(var(--mobile-nav-height) + max(18px,env(safe-area-inset-bottom)));height:var(--sheet-height,var(--mobile-panel-height));max-height:var(--sheet-height,var(--mobile-panel-height))}
 html[data-input=touch] .shell.panel-open:not(.mobile-nav-open) .stage>aside{bottom:max(10px,env(safe-area-inset-bottom))}
 html[data-input=touch] .shell.panel-open #viewport{bottom:calc(min(var(--sheet-height,var(--mobile-panel-height)),42dvh) + var(--mobile-nav-height) + 24px)}
 html[data-input=touch] .sheet-handle{display:block;position:absolute;z-index:3;top:0;left:0;right:60px;height:28px;touch-action:none;cursor:grab}
 html[data-input=touch] .sheet-handle::before{content:"";position:absolute;left:50%;top:9px;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:#c3cec7}
 html[data-input=touch] .shell.sheet-dragging .stage>aside{transition:none}
}
@media (max-width:760px){html[data-input=touch] .shell.panel-open .mobile-nav-toggle{opacity:0;pointer-events:none}}
.version-list{display:grid;gap:8px;margin:12px 0}
.version{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid #dde4de;border-radius:10px;background:#fbfcf8}
.version small{display:block;color:#6b776f;font-size:.82rem}
html:not([data-input=touch]) .more-menu .touch-only{display:none}
/* time of day: a small three-way switch beside Layers; the backdrop follows the light */
.mood-switch{position:absolute;z-index:30;left:118px;top:calc(226px + env(safe-area-inset-top));display:flex;gap:2px;padding:3px;border:1px solid #cfd9d2;border-radius:999px;background:rgba(250,250,244,.94);box-shadow:0 4px 14px rgba(29,55,47,.1)}
.mood-switch[hidden]{display:none}
.mood-switch button{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#1d372f;cursor:pointer}
.mood-switch button[aria-pressed=true]{background:#1d4a3d;color:#fff}
.mood-switch svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){.mood-switch{left:112px;top:calc(76px + env(safe-area-inset-top))}.mood-switch button{width:38px;height:38px}}
/* time of day: the photo behind the van warms at golden hour and falls into dusk at night, fading like the light */
html[data-mood] .stage{transition:background-color 2.2s cubic-bezier(.65,0,.35,1)}

html[data-mood] .view-title strong,html[data-mood] .view-title small{transition:color 2.2s ease}
html[data-mood=evening] .stage{background-color:rgba(206,112,44,.26)}
html[data-mood=night] .stage{background-color:rgba(10,15,30,.88)}
html[data-mood=night] .view-title strong{color:#efe8dc}
html[data-mood=night] .view-title small{color:#9ea9bb}

/* the load space card: the maker's figures, editable in centimetres */
.load-space{margin:10px 0 14px;padding:12px 14px;border:1px solid var(--line,rgba(40,34,26,.14));border-radius:14px;background:var(--chip,rgba(255,255,255,.5))}
.load-space .ls-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:8px}
.load-space .ls-head b{font-size:15px}.load-space .ls-head small{color:var(--mut,#857b6d);font-size:12px}
.load-space .ls-reset{margin-left:auto;font-size:12px;padding:4px 10px}
.load-space .ls-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
#panel-content .load-space label{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name name" "input unit" "hint hint";align-items:center;gap:2px 6px;margin:0;font-size:12px;color:var(--mut,#857b6d)}
.load-space label span{grid-area:name;font-weight:600;color:var(--ink,#25221d)}
.load-space label input{grid-area:input;width:100%;min-width:0;font:600 16px/1.2 var(--sans,system-ui);padding:6px 8px;border-radius:9px;border:1px solid var(--line,rgba(40,34,26,.18));background:var(--field,rgba(255,255,255,.72));color:inherit;font-variant-numeric:tabular-nums}
.load-space label em{grid-area:unit;font-style:normal;align-self:center}
.load-space label small{grid-area:hint;font-size:11px;line-height:1.3}
.load-space .ls-more{margin-top:8px}.load-space .ls-more summary{font-size:12px;color:var(--mut,#857b6d);cursor:pointer}
.load-space .ls-more .ls-grid{margin-top:8px}
/* the lift button above a selected piece: drag up or down to lift or lower it */
.lift-handle{position:absolute;left:0;top:0;z-index:30;width:40px;height:40px;padding:0;border:2px solid #f5f2e9;border-radius:50%;background:#5f8277;color:#fff;box-shadow:0 2px 8px rgba(37,55,46,.28);pointer-events:auto;touch-action:none;cursor:ns-resize;display:grid;place-items:center}
.lift-handle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[data-input=touch] .lift-handle{width:56px;height:56px}html[data-input=touch] .lift-handle svg{width:26px;height:26px}

/* window slots in the Van step: one row per body panel */
.window-slots h2{margin:12px 0 6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#6b7a72}
.window-slot{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;padding:8px 0;border-top:1px solid rgba(40,34,26,.08)}
.window-slot>span{font-weight:600}.window-slot select{grid-column:1/-1;width:100%;min-height:40px;font-size:14px;border-radius:9px}
.window-slot b{grid-column:1;font-weight:500;color:#1d4a3d}.window-slot .text-button{grid-column:2;grid-row:2;justify-self:end}.window-slot small{grid-column:1/-1;color:#857b6d}

/* finishes per part: wood, fabric, metal */
.finish-rows{margin:6px 0 10px}.finish-rows>summary{font-size:13px;color:#6b7a72;cursor:pointer}
.finish-row{display:grid!important;grid-template-columns:64px 44px 1fr;gap:8px;align-items:center;margin:6px 0!important}
.finish-row span{font-weight:600}.finish-row select{min-height:34px;border-radius:8px}
.finish-rows .text-button{margin-top:4px}/* inside finish styles: four picture tiles (ceiling band, wall, floor band) */
#panel-content .style-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:.4rem 0 .6rem}
#panel-content .finish-tile.style-tile{align-items:stretch!important;text-align:left;padding:6px!important;gap:3px;border-radius:12px!important}
#panel-content .style-tile b{font-size:.82rem;line-height:1.2}
#panel-content .style-tile small{font-size:.72rem;text-align:left;opacity:.8}
#panel-content .style-pic{display:grid;grid-template-rows:10px 38px 12px;width:100%;border-radius:8px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
#panel-content .style-pic>span{display:flex;gap:6px;align-items:stretch;padding:0 6px;background-size:cover}
#panel-content .style-pic i{flex:1;margin:4px 0 0;border-radius:6px 6px 0 0;background-size:cover}