/* ==========================================================================
   Pillbox product branch — v3 override layer.
   Loaded AFTER pillbox.css + pillbox-v2.css. Adds the v3 feedback:
   – nav never collapses to a burger; it stays written out top-right, gains a
     frosted backing once scrolled, and a scrollspy tints the active item with
     the section's accent colour
   – official Apple App Store badge (replaces the CSS facsimile)
   – reminder-timeline evidence strips (cropped screenshots, one per node,
     consistent CSS-rounded corners)
   – the support page's light lattice tail (canvas sits behind .support-tail)
   – guide article pages (figure/caption, blockquote, h4, back-links)
   All motion is reduced-motion-safe.
   ========================================================================== */

/* ---- nav: no burger, ever. The stack stays; scrolled = frosted backing.
       Negative margins offset the backing's padding so the link text never
       moves — only the pill fades in around it. ---- */
.burger{display:none !important}
body.scrolled nav.stack{display:flex}
nav.stack{padding:12px 16px;margin:-12px -16px 0 0;border-radius:16px;border:1px solid transparent;background:rgba(16,20,23,0);transition:background-color .3s ease,border-color .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
body:not(.scrolled) nav.stack{-webkit-backdrop-filter:none;backdrop-filter:none}
body.scrolled nav.stack{background:rgba(16,20,23,.55);border-color:var(--hair-dark)}
body.ground-light.scrolled nav.stack{background:rgba(239,239,241,.74);border-color:var(--hair-light)}

/* scrollspy accent: each link carries its section's colour for both grounds */
nav.stack a.on{color:var(--spy-dark,var(--action-dark))}
body.ground-light nav.stack a.on{color:var(--spy-light,var(--action))}
html[data-theme="light"] nav.stack a.on{color:var(--spy-light,var(--action))}

/* on narrow screens the always-visible five-item stack needs headroom:
   clear the hero copy below it (nav block bottoms out around 180px) */
@media(max-width:640px){.hero{padding-top:216px}}

/* ---- official App Store badge (Apple artwork: never restyle the image;
       press feedback on the wrapper only) ---- */
.store-badge{display:inline-block;line-height:0;transition:transform .16s var(--ease-out)}
.store-badge img{height:54px;width:auto;display:block}
.store-badge:active{transform:scale(.97)}

/* ---- reminder timeline: evidence strips. Same width, same radius, same
       ring on all four so they read as one set. ---- */
.tl-shot{display:block;width:min(100%,236px);margin:16px auto 0;border-radius:12px;border:1px solid rgba(16,20,23,.1);box-shadow:0 12px 26px -14px rgba(16,20,23,.5)}
html[data-theme="dark"] .tl-shot{border-color:rgba(240,242,245,.12);box-shadow:0 12px 28px -12px rgba(0,0,0,.65)}
.timeline .tl-node{padding-bottom:10px}

/* ==========================================================================
   Support page — light lattice tail. From "Using PillBox" down, the LF field
   trickles in (tiny squares), reaching full size by the PBS category, with
   the same cursor repel as the landing tail. The page stays LIGHT: no dark
   zone; the solid-black footer terminates it. Cards are solid so the index
   stays scannable; only headings float over the field.
   ========================================================================== */
.support-tail{position:relative;overflow:hidden;background:var(--paper)}
html[data-theme="dark"] .support-tail{background:var(--ink)}
.support-tail .lattice{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.support-tail .prose{position:relative;z-index:1;background:transparent;padding-top:0}
/* floating headings get a soft paper halo so full-size squares can't collide with the type */
.support-tail .help-cat h3{text-shadow:0 0 14px var(--paper),0 0 6px var(--paper)}
html[data-theme="dark"] .support-tail .help-cat h3{text-shadow:0 0 14px var(--ink),0 0 6px var(--ink)}

/* ==========================================================================
   Guide article pages
   ========================================================================== */
.prose h4{font-family:var(--f-display);font-weight:500;font-size:.95rem;margin:20px 0 6px;color:var(--on-light)}
html[data-theme="dark"] .prose h4{color:var(--on-dark)}
.prose hr{border:0;border-top:1px solid var(--hair-light);margin:36px 0}
html[data-theme="dark"] .prose hr{border-color:var(--hair-dark)}
.prose blockquote{margin:20px 0;padding:14px 20px;border-left:4px solid var(--c-blue);background:var(--paper-2);border-radius:0 14px 14px 0}
html[data-theme="dark"] .prose blockquote{background:var(--ink-2)}
.prose blockquote p{margin:0}
.prose figure{margin:28px auto;text-align:center}
.prose figure img{margin:0 auto;width:auto;max-width:100%;max-height:600px;border-radius:22px;border:1px solid var(--hair-light);box-shadow:0 26px 54px -32px rgba(16,20,23,.5)}
html[data-theme="dark"] .prose figure img{border-color:var(--hair-dark);box-shadow:0 26px 54px -28px rgba(0,0,0,.7)}
.prose figcaption{margin-top:12px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;color:var(--on-light-mut);max-width:52ch;margin-inline:auto}
html[data-theme="dark"] .prose figcaption{color:var(--on-dark-mut)}
.prose code{font-family:var(--f-mono);font-size:.86em;background:var(--paper-2);border:1px solid var(--hair-light);border-radius:6px;padding:1px 6px}
html[data-theme="dark"] .prose code{background:var(--ink-3);border-color:var(--hair-dark)}
.kicker a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.guide-foot{display:flex;gap:14px 26px;flex-wrap:wrap;margin-top:52px;padding-top:22px;border-top:1px solid var(--hair-light)}
html[data-theme="dark"] .guide-foot{border-color:var(--hair-dark)}

@media(prefers-reduced-motion:reduce){
  .store-badge:active{transform:none}
}