/* The STRIDE mobile preview — its own sheet, owned only by did-you-know-mobile.js (the banner
   itself is alt-did-you-know.css, a separate lane's file). No token of its own — every colour,
   radius, spacing and shadow is one of alt-tokens.css's `--a-*` properties. Reuses `.a-modal`
   (alt-shell.css) for fixed/centred/stacking/shadow/border, overriding only its size and flex
   direction: a phone bezel beside a benefit list needs more width than a drawer-shaped dialog. */

.a-dyk-mobile{
  width:min(1040px, 94vw);
  height:auto;
  max-height:min(760px, 88vh);
}

/* ---------- header ----------
   Restates `.a-drawer-h`'s shape (title left, close right) rather than reusing it, because this
   header also carries a subtitle line (`.a-hint`) that `.a-drawer-h` has no room for. */
.a-dyk-mobile-h{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--a-4);
  padding:var(--a-5) var(--a-5) var(--a-4);
  border-bottom:1px solid var(--a-line);
  flex:0 0 auto;
}
.a-dyk-mobile-h h2{
  margin:0; font:700 20px/1.25 var(--a-display); color:var(--a-text);
}
.a-dyk-mobile-h .a-hint{ margin:2px 0 0; }

/* ---------- body: the two columns ----------
   Stacks at narrow widths rather than clipping the phone or the copy. Grid rather than flex,
   because the phone column's width is intrinsic (set inline, in px, by didYouKnowMobileFit())
   and the copy column takes everything left over. */
.a-dyk-mobile-b{
  display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center;
  gap:var(--a-6);
  padding:var(--a-5);
  overflow:auto;
  flex:1 1 auto;
}

/* ---------- the phone ----------
   A bezel, not a frame with a border — the iframe fills it edge to edge, and the rounded shell,
   notch and padding are what read as "a phone" rather than "a website in a box". Size is set
   inline, in px, by didYouKnowMobileFit() off `window.innerHeight`; this only draws the shell. */
.a-dyk-phone{
  position:relative;
  flex:0 0 auto;
  background:#05070d;
  border:1px solid var(--a-line-strong);
  border-radius:28px;
  box-shadow:var(--a-shadow);
  padding:14px 8px;
  overflow:hidden;
}
.a-dyk-phone-notch{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:84px; height:6px; border-radius:var(--a-r-pill);
  background:rgba(255,255,255,.14);
  z-index:1;
}
.a-dyk-phone iframe{
  display:block; width:100%; height:100%; border:0; border-radius:18px;
  background:var(--a-bg);
}
/* The slow-load message sits over the frame, not beside it — `.a-load` is the shared class
   (alt-components.css) every other framed surface uses; only its position is specific here. */
.a-dyk-phone .a-load{
  position:absolute; inset:14px 8px; border-radius:18px;
  background:var(--a-bg); flex-direction:column; text-align:center;
}

/* ---------- the copy column ---------- */
.a-dyk-mobile-copy{
  flex:1 1 260px; min-width:240px; max-width:360px;
  display:flex; flex-direction:column; gap:var(--a-4);
}
.a-dyk-mobile-copy h3{
  margin:0; font:700 22px/1.3 var(--a-display); color:var(--a-text);
}
.a-dyk-mobile-benefits{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:var(--a-3);
}
.a-dyk-mobile-benefit{
  display:flex; align-items:center; gap:10px;
  font-size:14px; color:var(--a-text);
}
/* A filled circle, not a bare checkmark — colour is never the only signal, so the check glyph
   itself carries the meaning and the circle is decoration around it. */
.a-dyk-mobile-check{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:var(--a-blue-soft); color:var(--a-blue);
}
.a-dyk-mobile-check svg{ width:13px; height:13px; }
.a-dyk-mobile-actions{
  display:flex; flex-direction:column; gap:var(--a-2);
  margin-top:var(--a-2);
}
.a-dyk-mobile-actions .a-btn{ width:100%; }

/* ---------- the scan target ----------
   Always white, in both themes, deliberately not tokenised — scanners expect dark modules on a
   light ground, and an inverted symbol is outside spec. JS/components/qr-code.js draws
   black-on-white to match. The quiet zone is inside the SVG, so this padding is just breathing
   room, not load-bearing for scanning. */
.a-dyk-qr{
  display:flex; align-items:center; gap:var(--a-3);
  margin-top:var(--a-3); padding-top:var(--a-3);
  border-top:1px solid var(--a-line-soft);
}
.a-dyk-qr-card{
  flex:0 0 auto; display:flex; padding:6px;
  background:#fff; border-radius:var(--a-r);
  box-shadow:0 0 0 1px var(--a-line-soft); /* a visible edge so the white tile doesn't float unattached in dark */
}
.a-dyk-qr-card svg{ display:block; width:132px; height:132px; }
.a-dyk-qr-say{
  display:flex; flex-direction:column; gap:4px; min-width:0;
}
.a-dyk-qr-say strong{ font-size:14px; color:var(--a-text); }
/* Wraps rather than scrolls or clips — this is the fallback for a camera that won't focus, so
   all of it must stay readable; `anywhere` lets a long URL break inside the path. */
.a-dyk-qr-say code{
  font:12px/1.45 var(--a-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color:var(--a-dim); overflow-wrap:anywhere;
}

/* ---------- narrow widths ---------- */
@media (max-width:640px){
  /* `flex-wrap:nowrap` is the fix and is not cosmetic: the base rule is wrap because this is a
     ROW, but turning the direction to column without also turning wrap off leaves a wrapping
     COLUMN flex container, which starts a second column sideways once items exceed the height
     rather than stacking and scrolling. */
  .a-dyk-mobile-b{ flex-direction:column; flex-wrap:nowrap; align-items:center; }
  .a-dyk-mobile-copy{ max-width:100%; text-align:center; align-items:center; }
  .a-dyk-mobile-benefit{ justify-content:center; }
  /* Side by side, the symbol plus a wrapped URL does not fit a phone-width dialog without
     squeezing one of them; stacked, both keep their full size. */
  .a-dyk-qr{ flex-direction:column; text-align:center; }
  .a-dyk-qr-say{ align-items:center; }
}