/*
 * The sheet scanner — shared by the home page and /how-availability-works/.
 *
 * Self-contained on purpose. Every colour, radius and font it needs is declared on `.scan`
 * with an `--sc-` prefix rather than read from the host page's palette, so dropping the
 * markup into a third page cannot pick up a variable that page happens not to define. The
 * values match the site's tokens; they are duplicated, not inherited.
 *
 * The markup this styles, and the script that drives it, are in assets/sheet-scan.js.
 */
.scan{
  --sc-forest-900:#123d28; --sc-forest-800:#1a5c3a; --sc-forest-700:#227848;
  --sc-gold:#c9a227; --sc-amber:#a8631c;
  --sc-cream:#fdfcf8; --sc-cream-warm:#fbf9f4; --sc-sage-50:#eef8f1;
  --sc-text:#2b3b30; --sc-muted:#5a6f62;
  --sc-line:rgba(10,36,24,.12); --sc-line-strong:rgba(10,36,24,.18);
  --sc-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sc-radius-lg:16px; --sc-radius-md:12px;
  --sc-shadow:0 18px 48px rgba(10,36,24,.1);
}
/* The scanner brings its own gutter so it does not depend on either page's wrapper. */
.scan__wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}

/*
 * A small reset for the elements a host page may not have reset itself. The home page has
 * no `figure{margin:0}`, so the browser default of `1em 40px` shrank the photograph by
 * 80 px and left it floating in the card — a component that only looks right on pages that
 * happen to have the right reset is not self-contained.
 */
.scan figure{margin:0}
.scan__title{margin:0}
.scan ol{list-style:none}

.scan{position:relative;background:linear-gradient(180deg,var(--sc-cream-warm),var(--sc-sage-50) 55%,var(--sc-cream-warm))}
.scrub__track{position:relative}
.scan.is-live .scrub__track{height:260vh}
.scan__sticky{padding:clamp(20px,3vw,34px) 0}
.scan.is-live .scan__sticky{position:sticky;top:0;min-height:100vh;min-height:100svh;display:flex;align-items:center}
.scan__stage{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(18px,3.5vw,44px);width:100%;align-items:center}
.scan__shot{position:relative;border:1px solid var(--sc-line);border-radius:var(--sc-radius-lg);background:#fff;padding:12px;box-shadow:var(--sc-shadow);max-width:440px}
.scrub__canvas{display:none;width:100%;height:min(76vh,680px)}
.scan.is-live .scrub__canvas{display:block}
/*
 * Phones keep the two columns rather than stacking them. The sheet is a tall narrow
 * portrait, so 150 px of it beside the log uses the width the page has; stacked, the
 * photograph alone pushed the log out of a sticky viewport and the reader could not see
 * the bar and what it produced at the same time, which is the whole point.
 */
.scrub__still{display:block;width:100%;height:auto;border-radius:var(--sc-radius-md)}
.scan.is-live .scrub__still{display:none}
.scrub__meter{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:10px 2px 0;
  font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--sc-forest-700);white-space:nowrap}
.scrub__meter b{font-family:var(--sc-mono);font-weight:600;letter-spacing:0;text-transform:none;color:var(--sc-muted)}

.scan__title{font-size:clamp(1.6rem,3.4vw,2.4rem)}
.scan__lede{margin:8px 0 16px;font-size:1.02rem;color:#2b3b30}
.scanlog{list-style:none;margin:0;padding:0;max-height:min(46vh,360px);overflow:auto;
  border-top:1px solid var(--sc-line);border-bottom:1px solid var(--sc-line);
  font-family:var(--sc-mono);font-size:.78rem;line-height:1.5;overscroll-behavior:contain}
.scan:not(.is-live) .scanlog,.scan:not(.is-live) .scan__btn{display:none}
.scanlog__i{display:grid;grid-template-columns:60px minmax(0,1fr);gap:12px;padding:5px 2px;
  opacity:.13;transition:opacity .18s ease;border-bottom:1px solid rgba(10,36,24,.05)}
.scan:not(.is-live) .scanlog__i{opacity:1}
.scanlog__i.is-in{opacity:1}
.scanlog__i b{font-weight:700;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sc-forest-700);padding-top:2px}
.scanlog__i span{color:#2b3b30;overflow:hidden;text-overflow:ellipsis}
.scanlog__i--row b{color:var(--sc-gold)}
.scanlog__i--redact b{color:#5a6f62}
.scanlog__i--redact span{color:#3d5246}
.scanlog__i--flag b{color:#a8631c}
.scanlog__i--flag span{font-weight:600;color:#7a4a12}
.scanlog__i--row span{font-weight:600;color:var(--sc-forest-900)}
.scanlog__i--out{border-bottom:0}
.scanlog__i--out b,.scanlog__i--out span{color:var(--sc-forest-900);font-weight:700}
.scan__foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:14px 0 0;font-size:.78rem;line-height:1.5;color:var(--sc-muted);max-width:38rem}
.scan__btn{font:inherit;font-size:.78rem;font-weight:700;padding:5px 12px;border-radius:999px;
  border:1px solid var(--sc-line-strong);background:#fff;color:var(--sc-forest-800);cursor:pointer}
.scan__btn:hover{background:var(--sc-sage-50)}


/* ─── Sizes below a desktop ────────────────────────────────────────────────────
 *
 * These live at the end of the file, and that is not tidiness. They were in the middle
 * once, above the base rules, and every declaration with a later duplicate — the log's
 * max-height, the title size, the meter, the row layout — lost to the base rule at every
 * width. Layout still reflowed, so it looked like it worked; the log stayed 360 px tall on
 * a 390 px phone and pushed the caption off the bottom of the screen. Cascade order was
 * the whole bug. Anything added here has to stay last.
 *
 * `svh` rather than `vh`. On iOS Safari `100vh` is the viewport with the toolbars hidden,
 * which is taller than what you can actually see, so a sticky stage sized in `vh` gets its
 * bottom cut off — exactly the part holding the log and the caption. `svh` is the smallest
 * viewport, the one that is always visible. `vh` is kept as the first declaration so
 * browsers without `svh` still get something sensible.
 */

/* Tablets. The old breakpoint handed a 768 px iPad the same 182 px sheet it gave a phone
   in landscape, on a screen with 1024 px of height and room to spare. It gets a real one. */
@media (max-width:1000px){
  .scan.is-live .scrub__track{height:240vh;height:240svh}
  .scan.is-live .scan__sticky{min-height:100vh;min-height:100svh;padding:16px 0}
  .scan__stage{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(14px,2.4vw,26px);align-items:center}
  .scan__shot{max-width:320px;padding:10px}
  .scrub__canvas{height:min(52vh,500px);height:min(52svh,500px)}
  .scan__title{font-size:1.6rem}
  .scan__lede{margin-bottom:12px;font-size:.95rem}
  .scanlog{max-height:min(34vh,300px);max-height:min(34svh,300px);font-size:.74rem}
  .scanlog__i{grid-template-columns:52px minmax(0,1fr);gap:10px}
  .scan__foot{font-size:.74rem;margin-top:10px}
}

/* Phones. Two columns leave the log about 140 px here and every line breaks three ways,
   which makes a fast thing look broken. Stacked: sheet on top, log full width under it,
   and the IN/ROW/BLOCK tag column dropped for a coloured rule — it was costing 44 px of a
   340 px line to say what the colour already says. The whole stage still has to fit one
   sticky viewport, because seeing the bar and what it produces at once is the point. */
@media (max-width:620px){
  .scan.is-live .scrub__track{height:210vh;height:210svh}
  /* Centred, not flex-start. The stage pins at top:0 and the site header is sticky over
     it, so starting the content at the top slides the sheet underneath the header. Centred
     inside 100svh the phone's stack (≈620 px) leaves ~110 px above, which clears it. */
  .scan.is-live .scan__sticky{padding:10px 0;align-items:center}
  .scan__stage{grid-template-columns:1fr;gap:10px;align-items:start}
  .scan__shot{max-width:min(250px,62vw);margin:0 auto;padding:7px}
  .scrub__canvas{height:min(36vh,290px);height:min(36svh,290px)}
  .scrub__meter{flex-direction:row;align-items:baseline;font-size:.6rem;margin-top:7px}
  .scan__title{font-size:1.2rem;margin-bottom:2px}
  .scan__lede{display:none}
  noscript .scan__lede{display:block}
  .scanlog{max-height:min(24vh,190px);max-height:min(24svh,190px);font-size:.7rem}
  .scanlog__i{grid-template-columns:1fr;gap:0;padding:4px 0 4px 9px;border-left:3px solid transparent}
  .scanlog__i b{display:none}
  .scanlog__i--row{border-left-color:var(--sc-gold)}
  .scanlog__i--flag{border-left-color:var(--sc-amber)}
  .scanlog__i--block{border-left-color:rgba(34,120,72,.45)}
  .scanlog__i--in,.scanlog__i--strip,.scanlog__i--gps,.scanlog__i--redact{border-left-color:rgba(90,111,98,.5)}
  .scanlog__i--out{border-left-color:var(--sc-forest-900)}
  .scan__foot{font-size:.7rem;margin-top:8px;gap:8px}
}

/*
 * Short viewports — a phone held sideways, mostly. 100svh is about 390 px there, and the
 * sheet, the log and the caption cannot all be in it at once at any size worth reading. A
 * pinned stage that does not fit is worse than no pinning: it clips.
 *
 * So stop pinning. The track collapses to its natural height and the piece scrolls past
 * like ordinary content — the scrubber already handles this, because measure() falls back
 * to the element's own position when the track is shorter than the viewport. The bar still
 * runs, it just runs as the section goes by rather than while it is held still.
 */
@media (max-height:540px){
  .scan.is-live .scrub__track{height:auto}
  .scan.is-live .scan__sticky{position:static;min-height:0;padding:20px 0}
  .scan__stage{grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:16px;align-items:center}
  .scan__shot{max-width:200px}
  .scrub__canvas{height:300px}
  .scanlog{max-height:220px}
}