/* ============================================================
   THE APP-DOWNLOAD INTERRUPT — spec §3.3, restyled in 1.46.0 to
   Jed's prototype download modal (the "dlPrompt" sheet).
   Desktop: a 460px card over a dimmed page. ≤ 768px: a bottom sheet
   with a grabber. Self-contained: its own tokens and its own Figtree
   face, so it looks the same on a resident page, a member page and an
   Elementor page. Light only (DECISIONS item 2).
   ============================================================ */
@font-face{font-family:"Figtree";src:url("fonts/figtree.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}

.sld-interrupt{
  --sldi-bg:#f6f5f1; --sldi-card:#ffffff; --sldi-ink:#17201c; --sldi-muted:#6c7570; --sldi-faint:#9aa29d;
  --sldi-green:#0f5132; --sldi-green-2:#136841; --sldi-on-green:#ffffff;
  --sldi-hair:rgba(23,32,28,.1); --sldi-scrim:rgba(10,14,12,.38);
  --sldi-ease:cubic-bezier(.32,.72,0,1); --sldi-spring:cubic-bezier(.34,1.36,.64,1);
  --sldi-shadow:0 30px 60px -20px rgba(0,0,0,.35);
  color-scheme:light;
  /* the layer */
  position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;
  padding:16px;box-sizing:border-box;font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.5;color:var(--sldi-ink);-webkit-font-smoothing:antialiased;text-align:center}
/* Author display:flex would beat the UA's [hidden]{display:none}; say it again. */
.sld-interrupt[hidden]{display:none}
.sld-interrupt *,.sld-interrupt *::before,.sld-interrupt *::after{box-sizing:border-box}
.sld-interrupt .sld-interrupt__title,.sld-interrupt .sld-interrupt__text,.sld-interrupt .sld-interrupt__note,.sld-interrupt .sld-interrupt__qr-text{margin:0}

.sld-interrupt__backdrop{position:absolute;inset:0;background:var(--sldi-scrim);opacity:0;transition:opacity .35s;touch-action:none}
.sld-interrupt.is-open .sld-interrupt__backdrop{opacity:1}

.sld-interrupt__panel{position:relative;width:100%;max-width:460px;max-height:calc(100vh - 32px);overflow:auto;
  -webkit-overflow-scrolling:touch;background:var(--sldi-bg);color:var(--sldi-ink);border:0;border-radius:20px;
  box-shadow:var(--sldi-shadow);padding:34px 26px 26px;outline:none;display:flex;flex-direction:column;align-items:center;gap:12px;
  opacity:0;transform:translateY(16px) scale(.97);transition:opacity .25s,transform .45s var(--sldi-ease)}
.sld-interrupt.is-open .sld-interrupt__panel{opacity:1;transform:none}
.sld-interrupt__panel:focus-visible{box-shadow:var(--sldi-shadow),0 0 0 3px var(--sldi-green)}

.sld-interrupt__grip{display:none}

.sld-interrupt .sld-interrupt__close{position:absolute;top:10px;right:10px;width:44px;height:44px;display:inline-flex;align-items:center;
  justify-content:center;background:transparent;border:0;border-radius:50%;color:var(--sldi-muted);cursor:pointer;
  padding:0;margin:0;font:inherit;-webkit-appearance:none;appearance:none;box-shadow:none}
.sld-interrupt .sld-interrupt__close:hover{color:var(--sldi-ink);background:rgba(23,32,28,.06)}
.sld-interrupt .sld-interrupt__close:focus-visible,.sld-interrupt .sld-interrupt__badge:focus-visible,.sld-interrupt .sld-interrupt__open:focus-visible{
  outline:2.5px solid var(--sldi-green);outline-offset:3px}

/* the green app tile with the pin */
.sld-interrupt__icon{width:60px;height:60px;border-radius:16px;background:var(--sldi-green);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 24px -10px rgba(15,81,50,.6);animation:sldi-pop .6s var(--sldi-spring) both}
@keyframes sldi-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}

.sld-interrupt .sld-interrupt__title{font-family:inherit;font-size:1.45rem;line-height:1.18;font-weight:800;letter-spacing:-.025em;
  color:var(--sldi-ink);text-wrap:balance;margin-top:4px;padding:0 20px}
.sld-interrupt .sld-interrupt__text{font-size:1rem;line-height:1.5;color:var(--sldi-muted);max-width:34ch}

/* ---- store badges: black pills with the store glyph, as the prototype draws them ---- */
.sld-interrupt__stores{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.sld-interrupt .sld-interrupt__badge{display:inline-flex;align-items:center;gap:10px;min-width:168px;min-height:48px;padding:8px 16px 8px 12px;
  border-radius:11px;background:#000;color:#fff;border:0;text-align:left;text-decoration:none;white-space:nowrap;
  transition:transform .35s var(--sldi-ease),background .2s}
.sld-interrupt .sld-interrupt__badge:hover{background:#17201c;color:#fff;text-decoration:none;transform:translateY(-1px)}
.sld-interrupt .sld-interrupt__badge:active{transform:scale(.97)}
.sld-interrupt__glyph{flex:none}
.sld-interrupt__badge-tx{display:flex;flex-direction:column;line-height:1.1}
.sld-interrupt__badge-tx small{display:block;font-size:.62rem;opacity:.85;letter-spacing:.02em;font-weight:500}
.sld-interrupt__badge-tx b{display:block;font-size:1.02rem;font-weight:600;letter-spacing:-.01em}
/* On a phone or tablet, the visitor's own store comes first. */
.sld-interrupt--android .sld-interrupt__badge[data-store="android"]{order:-1}

/* ---- "Open the app" — the fallback while the store shells do not exist ---- */
.sld-interrupt .sld-interrupt__open{display:flex;align-items:center;justify-content:center;width:100%;margin-top:6px;min-height:52px;padding:0 22px;
  border-radius:12px;background:var(--sldi-green);color:var(--sldi-on-green);font-size:1.02rem;font-weight:700;
  text-decoration:none;transition:background .2s}
.sld-interrupt .sld-interrupt__open:hover{background:var(--sldi-green-2);color:var(--sldi-on-green);text-decoration:none}
.sld-interrupt .sld-interrupt__open[hidden]{display:none}
.sld-interrupt .sld-interrupt__note{font-size:.88rem;color:var(--sldi-muted);max-width:36ch}

/* ---- QR: desktop only, always black on white so it scans ---- */
.sld-interrupt__qr{display:none;margin-top:10px;padding-top:16px;border-top:1px solid var(--sldi-hair);width:100%;
  align-items:center;justify-content:center;gap:14px}
.sld-interrupt__qr-code{flex:none;width:96px;height:96px;padding:6px;background:#fff;border:1px solid var(--sldi-hair);border-radius:10px}
.sld-interrupt__qr-code svg{display:block;width:100%;height:100%}
.sld-interrupt .sld-interrupt__qr-text{font-size:.88rem;color:var(--sldi-muted);text-align:left;max-width:18ch}
.sld-interrupt--other.has-qr .sld-interrupt__qr{display:flex}

/* ---- the header button (get_app_button / [sld_get_app]): the green pill with a slow shine ----
   ":root .sld-get-app" is two pseudo/class steps (0,2,0), so an Elementor kit's
   ".elementor-kit-5 button" (0,1,1) cannot repaint it inside a designer's header. */
:root .sld-get-app{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:0 18px;border-radius:999px;background:#0f5132;color:#fff;border:0;box-shadow:none;margin:0;
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:.9rem;font-weight:700;letter-spacing:-.005em;
  text-transform:none;line-height:1;cursor:pointer;white-space:nowrap;text-decoration:none;-webkit-appearance:none;appearance:none;
  transition:background .2s,transform .35s cubic-bezier(.32,.72,0,1)}
:root .sld-get-app::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);
  transform:translateX(-120%);animation:sldi-shine 5.5s ease-in-out infinite}
@keyframes sldi-shine{0%,30%{transform:translateX(-120%)}75%,100%{transform:translateX(120%)}}
:root .sld-get-app:hover,:root .sld-get-app:focus{background:#136841;color:#fff}
:root .sld-get-app:active{transform:scale(.97)}
:root .sld-get-app:focus-visible{outline:2.5px solid #0f5132;outline-offset:3px}

/* ---- scroll lock: html stops scrolling, body keeps the scrollbar's width so nothing shifts ---- */
html.sld-interrupt-open{overflow:hidden}

/* ---- ≤ 768px: a bottom sheet ---- */
@media (max-width:768px){
  .sld-interrupt{align-items:flex-end;padding:0}
  .sld-interrupt__panel{max-width:none;max-height:calc(100vh - 24px);border-radius:28px 28px 0 0;
    padding:12px 20px calc(30px + env(safe-area-inset-bottom));
    transform:translateY(100%);transition:transform .5s var(--sldi-ease),opacity .25s}
  .sld-interrupt.is-open .sld-interrupt__panel{transform:none}
  .sld-interrupt__grip{display:block;width:36px;height:5px;border-radius:3px;background:rgba(23,32,28,.18);margin:0 auto 10px}
  .sld-interrupt .sld-interrupt__close{top:8px;right:8px}
  .sld-interrupt__stores{width:100%}
  .sld-interrupt .sld-interrupt__badge{min-width:0;flex:1 1 0;padding:8px 12px 8px 10px;gap:8px}
  .sld-interrupt__badge-tx b{font-size:.95rem}
  /* nobody scans their own screen */
  .sld-interrupt--other.has-qr .sld-interrupt__qr{display:none}
}

@media (prefers-reduced-motion:reduce){
  .sld-interrupt__backdrop,.sld-interrupt__panel,.sld-interrupt .sld-interrupt__badge,.sld-interrupt .sld-interrupt__open,:root .sld-get-app{transition:none}
  .sld-interrupt__panel{transform:none}
  .sld-interrupt__icon,:root .sld-get-app::after{animation:none}
}