/* =========================================================================
   onboard.css — the first-run cards (onboard.js). Over everything, edge to
   edge on any phone or iPad; the words sit in a centred column. Tokens and
   --top / --bot (safe areas) come from styles.css and shell.css.
   ========================================================================= */

.ob{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;background:var(--bg);color:var(--tx);
  animation:ob-in .4s var(--ease)}
@keyframes ob-in{from{opacity:0}}

/* the mark and Skip ride over the photo, under the notch */
.ob-top{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--top) + 10px) max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left));pointer-events:none}
.ob-top>*{pointer-events:auto}
.ob-mark{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 8px 22px -8px #000}
.ob-skip{min-height:44px;min-width:64px;padding:0 18px;border-radius:999px;font:600 12.5px var(--f);letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:rgba(7,9,15,.58);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:.18s var(--ease)}
.ob-skip:hover{background:rgba(7,9,15,.7);border-color:rgba(255,255,255,.4)}

/* the swipe: native horizontal scrolling, one card per snap */
.ob-track{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ob-track::-webkit-scrollbar{display:none}
.ob-card{position:relative;flex:0 0 100%;width:100%;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}

.ob-ph{position:absolute;top:0;left:0;right:0;height:72%;overflow:hidden;background:var(--s1)}
.ob-ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.04)}
/* dark at the top for Skip, navy and red light in the middle, the mat at the bottom */
.ob-ph:before,.ob-ph:after{content:'';position:absolute;inset:0;pointer-events:none}
.ob-ph:before{background:
  linear-gradient(180deg,rgba(7,9,15,.66) 0%,rgba(7,9,15,0) calc(var(--top) + 120px)),
  linear-gradient(200deg,rgba(216,24,36,.16) 0%,rgba(216,24,36,0) 42%),
  linear-gradient(20deg,rgba(20,49,95,.5) 0%,rgba(20,49,95,0) 55%)}
.ob-ph:after{background:linear-gradient(180deg,rgba(7,9,15,0) 38%,rgba(7,9,15,.72) 72%,var(--bg) 100%)}

.ob-tx{position:relative;z-index:2;width:100%;max-width:560px;margin:0 auto;padding:0 24px 6px}
.ob-k{display:flex;align-items:center;gap:10px;font-family:var(--fc);font-size:15px;font-weight:600;letter-spacing:.2em;color:var(--red3)}
.ob-k span{color:var(--dim)}
.ob-k:before{content:'';width:26px;height:2px;background:var(--red);border-radius:2px}
.ob-h{font-family:var(--fc);font-weight:700;font-size:clamp(44px,12.4vw,68px);line-height:.92;letter-spacing:.012em;
  text-transform:uppercase;margin-top:12px;outline:none;text-wrap:balance}
.ob-p{font-size:16.5px;line-height:1.5;color:var(--tx2);margin-top:14px;max-width:32ch;text-wrap:pretty}
.ob-notify{margin-top:18px;min-height:48px}
.ob-note{font-size:13.5px;line-height:1.5;color:var(--tx2);margin-top:12px}
.ob-note:empty{display:none}

.ob-foot{width:100%;max-width:560px;margin:0 auto;padding:16px 24px calc(14px + var(--bot));display:flex;flex-direction:column;gap:14px}
.ob-dots{display:flex;justify-content:flex-start;gap:0}
/* even spacing whichever dot is the long one; the first lines up with the words
   (dots are a shortcut: swipe and Next are the main ways on) */
.ob-dots button{height:32px;padding:0 5px;display:flex;align-items:center}
.ob-dots button:first-child{padding-left:0}
.ob-dots button:before{content:'';width:8px;height:8px;border-radius:8px;background:var(--dim3);transition:width .3s var(--ease),background .3s var(--ease)}
.ob-dots button[aria-current]:before{width:26px;background:var(--red)}
/* Next and the last card's two buttons share one cell, so the footer (and the
   photos above it) never change height between cards */
.ob-btns{display:grid}
.ob-go,.ob-end{grid-area:1/1;display:flex;flex-direction:column;gap:6px}
.ob-go[hidden],.ob-end[hidden]{display:flex;visibility:hidden}
.ob-foot .btn{min-height:52px;font-size:15.5px;letter-spacing:.01em}
.ob-look{min-height:46px;font:600 14.5px var(--f);color:var(--tx2);border-radius:var(--r-sm);transition:.15s}
.ob-look:hover{color:var(--tx)}
.ob button:focus-visible{outline:2px solid var(--tx);outline-offset:2px}

/* short phones (SE): a little less of everything */
@media (max-height:700px){
  .ob-ph{height:64%}
  .ob-h{font-size:clamp(38px,11vw,52px)}
  .ob-p{font-size:15.5px;margin-top:10px}
  .ob-foot{gap:10px;padding-top:12px}
}
/* iPad and wide windows: a taller photo, bigger words */
@media (min-width:700px){
  .ob-ph{height:70%}
  .ob-h{font-size:76px}
  .ob-p{font-size:18px}
}

@media (prefers-reduced-motion: reduce){
  .ob{animation:none}
  .ob-track{scroll-behavior:auto}
  .ob-dots button:before,.ob-skip{transition:none}
}