/* Three distinct scenarios, including an original photograph. */
.scenario-card { min-width:0; overflow:hidden; background:#fff; border:1px solid var(--line,#ccd3c9); border-radius:12px; }
.scenario-frame { position:relative; overflow:hidden; isolation:isolate; background:#e9ece7; }
.scenario-frame .scenario-image { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; aspect-ratio:auto; margin:0; border-radius:0; box-shadow:none; cursor:zoom-in; transition:none; }
.scenario-divider { position:absolute; top:0; bottom:0; z-index:4; width:2px; background:#fff; box-shadow:0 0 3px #0008; pointer-events:none; }
.scenario-visible-label { position:absolute; z-index:5; left:10px; bottom:12px; max-width:calc(100% - 20px); padding:4px 8px; border-radius:4px; color:white; background:#16392bd9; font:600 12px/1.4 var(--font-sans,system-ui); pointer-events:none; }
.scenario-info { z-index:6; }
.scenario-handle { display:block; position:absolute; z-index:7; top:50%; left:clamp(22px,var(--compare-position,50%),calc(100% - 22px)); width:44px; height:64px; transform:translate(-50%,-50%); cursor:ew-resize; touch-action:pan-y pinch-zoom; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.scenario-handle::before { content:""; position:absolute; inset:6px 12px; border-radius:10px; background:#fffdf6; border:2px solid #b27b30; box-shadow:0 1px 4px #0008; }
.scenario-handle::after { content:""; position:absolute; inset:22px 19px; border-inline:1px solid #203f35; }
.scenario-handle:focus-visible { outline:3px solid #b27b30; border-radius:8px; }
.comparison-controls { display:flex; align-items:flex-end; gap:10px; min-width:0; }
.comparison-controls > label { flex:1; min-width:0; }
.comparison-play { flex:0 0 44px; display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid #c5cdbf; border-radius:6px; background:#f7f9f4; color:#203f35; cursor:pointer; }
.comparison-play svg { width:20px; height:20px; fill:currentColor; pointer-events:none; }
.comparison-play[aria-pressed="true"] { background:#203f35; color:#fff; }
.comparison-play .comparison-stop-symbol, .comparison-play[aria-pressed="true"] .comparison-play-symbol { display:none; }
.comparison-play[aria-pressed="true"] .comparison-stop-symbol { display:block; }
.comparison-play:focus-visible { outline:3px solid #b27b30; outline-offset:2px; }
.comparison-play[hidden], .comparison-controls[hidden] { display:none!important; }
.scenario-body { padding:18px; }
.scenario-title { margin:0 0 7px; font-size:1.12rem; line-height:1.3; }
.scenario-subtitle,.scenario-status { margin:0 0 10px; font-size:.85rem; }
.scenario-control { display:block; font-size:.78rem; }
.scenario-range { display:block; width:100%; min-height:32px; accent-color:#b27b30; cursor:ew-resize; }
.scenario-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin:3px 0 12px; }
.scenario-card .scenario-step { min-width:0; padding:8px 4px; border:1px solid #bac8be; border-radius:5px; background:#f4f6f1; color:#203f35; font:600 12px/1.35 system-ui; cursor:pointer; overflow-wrap:anywhere; }
.scenario-card .scenario-step[aria-pressed="true"] { background:#203f35; color:white; border-color:#203f35; }
.scenario-note { margin:10px 0; font-size:.76rem; line-height:1.5; color:#52645a; }
.scenario-actions { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:10px; }
.scenario-actions button { padding:4px 0; border:0; background:none; text-decoration:underline; text-underline-offset:3px; color:#203f35; cursor:pointer; font:600 .82rem/1.4 system-ui; }
.scenario-card [hidden] { display:none!important; }
.extension-comparison { min-width:0; scroll-margin-top:100px; }
.extension-thumbs a[aria-current="true"] { outline:3px solid var(--oak,#b27b30); outline-offset:3px; }
.extension-comparison .scenario-body { padding:15px; }
.extension-comparison .scenario-title { font-size:1rem; }
.extension-comparison .scenario-note { margin-bottom:0; }
.scenario-fallback-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.scenario-fallback-grid img { width:100%; height:auto; }
@media(max-width:600px) { .scenario-body {padding:14px;} .scenario-fallback-grid {grid-template-columns:1fr;} .extension-comparison .scenario-note {padding-right:3.5rem;} .scenario-actions {padding-right:3rem;} }