/* 146 progressive scroll story. 145 colors, copy and image assets stay intact.
   Without JS all three real screens remain in document order. */
.scroll146 .screen-scroll-track { position:relative; }
.scroll146 .screen-scroll-stage { position:relative; }
.scroll146 .screen-scroll-meter[hidden] { display:none; }
.scroll146 .screen-scroll-meter {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 0 12px;
  color:#655e6c;
  font-size:11px;
  line-height:1.5;
}
.scroll146 .screen-scroll-hint,.scroll146 .screen-scroll-position { display:flex; align-items:center; gap:10px; }
.scroll146 .screen-scroll-arrow { font-size:16px; color:#a63c29; }
.scroll146 .screen-scroll-position { font-variant-numeric:tabular-nums; font-weight:650; }
.scroll146 .screen-scroll-bar { width:90px; height:3px; overflow:hidden; border-radius:2px; background:#e0d7e5; }
.scroll146 .screen-scroll-bar>span { display:block; width:100%; height:100%; background:#c64c34; transform-origin:left center; transform:scaleX(0); }
.scroll146 .screen-scroll-panels>.screen-panel { scroll-margin-top:28px; }
.scroll146 .screen-scroll-panels>.screen-panel+.screen-panel { margin-top:60px; }
.scroll146 [data-screen-mode="stack"] .screen-tabs { margin-bottom:32px; }
.scroll146 [data-screen-mode="stack"] .screen-tabs>button[aria-current="step"] { border-bottom-color:#ee684c; color:#28212e; background:#ebe5ef; border-radius:10px 10px 0 0; }
.scroll146 .screen-panel:focus-visible { outline:3px solid #a63c29; outline-offset:7px; border-radius:8px; }

/* Sticky is enabled only after JS measures all three panels and confirms that
   the entire stage fits. Shared grid cells retain the tallest panel's height. */
@media (min-width:960px) and (min-height:680px) {
  .scroll146 [data-screen-mode="sticky"] .screen-scroll-track { height:var(--screen-track-height); }
  .scroll146 [data-screen-mode="sticky"] .screen-scroll-stage { position:sticky; top:24px; padding-bottom:12px; }
  .scroll146 [data-screen-mode="sticky"] .screen-tabs { margin-bottom:16px; }
  .scroll146 [data-screen-mode="sticky"] .screen-tabs>button { padding-block:15px 16px; }
  .scroll146 [data-screen-mode="sticky"] .screen-scroll-panels { display:grid; align-items:center; }
  .scroll146 [data-screen-mode="sticky"] .screen-panel {
    grid-area:1 / 1;
    min-height:0;
    margin:0;
    padding:10px 0 8px;
    gap:36px;
    visibility:hidden;
    pointer-events:none;
  }
  .scroll146 [data-screen-mode="sticky"] .screen-panel[data-screen-active="true"] { visibility:visible; pointer-events:auto; }
  .scroll146 [data-screen-mode="sticky"] .screen-scroll-panels>.screen-panel+.screen-panel { margin-top:0; }
  .scroll146 [data-screen-mode="sticky"] .screen-capture { min-height:0; padding:20px 16px; }
  .scroll146 [data-screen-mode="sticky"] .screen-capture picture { width:auto; max-width:100%; }
  .scroll146 [data-screen-mode="sticky"] .screen-capture img { width:auto; max-width:100%; max-height:clamp(280px,calc(100vh - 430px),420px); object-fit:contain; }
  .scroll146 [data-screen-mode="sticky"] .screen-capture-bar { padding:13px 16px; }
  .scroll146 [data-screen-mode="sticky"] .screen-focus figcaption { padding:10px 16px; }
  .scroll146 [data-screen-mode="sticky"] .screen-explainer h3 { margin-block:10px 14px; }
  .scroll146 [data-screen-mode="sticky"] .screen-points { margin-block:18px 15px; }
  .scroll146 [data-screen-mode="sticky"] .screen-points li { padding-block:9px; }
  .scroll146 [data-screen-mode="sticky"] .screen-points p { margin-top:4px; }
}
@keyframes screen146-enter {
  from { opacity:.55; transform:translateY(10px); }
  to { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:no-preference) and (min-width:960px) and (min-height:680px) {
  .scroll146 [data-screen-mode="sticky"] .screen-panel.screen-scroll-enter { animation:screen146-enter 220ms ease-out both; }
}
/* Small/short viewports always keep natural flow, even in the frame before the
   resize handler runs. No sticky region, clipped panel or miniature desktop UI. */
@media (max-width:959px),(max-height:679px) {
  .scroll146 .screen-scroll-track { height:auto !important; }
  .scroll146 .screen-scroll-stage { position:static; }
  .scroll146 .screen-scroll-meter { display:none; }
  .scroll146 .screen-scroll-panels { display:block; }
  .scroll146 .screen-scroll-panels>.screen-panel { visibility:visible; pointer-events:auto; }
}
@media (max-width:760px) {
  .scroll146 .screen-scroll-panels>.screen-panel { min-height:0; }
  .scroll146 .screen-scroll-panels>.screen-panel+.screen-panel { margin-top:46px; padding-top:30px; border-top:1px solid #e0d7e5; }
  .scroll146 [data-screen-mode="stack"] .screen-tabs { margin-bottom:28px; }
}
@media (prefers-reduced-motion:reduce) {
  .scroll146 .screen-panel { animation:none !important; transition:none !important; transform:none !important; }
}