/* =====================================================================================================
   03 · Goals — MOBILE (below 1024 px). Owner: V3-GOALS-M (30 Sep). Every selector is scoped to #goals .v-mobile.
   ONE phone (founder), real goal screens from an iPhone 17 at the app's default text size: Water (default) · Read · Meditate · Save.
   · Phones (<768): title → the switch → the phone (about 280 px wide at 390, so the app text reads) → a chip with the goal's amount + one line. Screens crossfade; swipe the phone to change tab
     (it follows the finger a little and springs back: js/03-goals.mobile.js).
   · Tablets (768–1023): title, switch and line on the left; the phone on the right.
   · US dollars only. No divider lines anywhere (founder rule). No star art outside the real screens.
   ===================================================================================================== */

#goals .v-mobile {
  --pad-l: max(var(--gutter), env(safe-area-inset-left));
  --pad-r: max(var(--gutter), env(safe-area-inset-right));
  background: #fff;
  padding: var(--section-y-tight) 0 var(--section-y);
  overflow-x: clip;
}
#goals .v-mobile .gl-m {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--pad-r) 0 var(--pad-l);
  text-align: center;
}
#goals .v-mobile .gl-m-body { display: grid; grid-template-columns: minmax(0, 1fr); }

/* ---- title ---- */
#goals .v-mobile .gl-m-title { max-width: 11em; margin: 0 auto; font-size: 30px; }

/* ---- the switch: four equal segments, full width up to 400 px; fits 320 px without scrolling ---- */
#goals .v-mobile .gl-m-tabs {
  justify-content: safe center;
  margin: 24px calc(-1 * var(--pad-r)) 0 calc(-1 * var(--pad-l));
  padding: 4px var(--pad-r) 4px var(--pad-l);
}
#goals .v-mobile .gl-m-seg { display: grid; width: 100%; max-width: 400px; box-shadow: var(--highlight), var(--depth-1); }
#goals .v-mobile .gl-m-seg [role="tab"] { min-height: 44px; padding: 0 6px; }

/* ---- the stage: sky glow + one phone + contact shadow. Sideways swipes change the tab; vertical scroll stays native ---- */
#goals .v-mobile .gl-m-stage {
  --pw: clamp(240px, min(72vw, calc((100vh - 180px) / 2.2)), 300px);
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  margin-top: 20px;
  padding: 14px 0 24px;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
@supports (height: 100svh) {
  #goals .v-mobile .gl-m-stage { --pw: clamp(240px, min(72vw, calc((100svh - 180px) / 2.2)), 300px); }
}
/* a soft, borderless sky glow behind the phone (never over it) */
#goals .v-mobile .gl-m-sky {
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 52%;
  width: min(calc(var(--pw) * 1.75), calc(100vw - 8px));
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--sky-1) 0%, rgba(211, 233, 252, .55) 55%, rgba(243, 249, 255, 0) 100%);
  pointer-events: none;
}
/* the contact shadow where the phone stands */
#goals .v-mobile .gl-m-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 10px;
  width: calc(var(--pw) * .9);
  height: 28px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15, 26, 43, .24), rgba(15, 26, 43, 0));
  pointer-events: none;
}
#goals .v-mobile .gl-m-drag { will-change: transform; }
#goals .v-mobile .gl-m-drag.is-back { transition: transform .5s var(--spring); }
#goals .v-mobile .gl-m-phone {
  --w: var(--pw);
  box-shadow: 0 34px 56px -26px rgba(15, 26, 43, .40), 0 14px 28px -14px rgba(15, 26, 43, .24), 0 2px 6px rgba(15, 26, 43, .08);
}
#goals .v-mobile .gl-m-phone img { pointer-events: none; -webkit-user-drag: none; }

/* ---- the chip + one line for the picked tab. All four share one cell, so switching never makes the page jump ---- */
#goals .v-mobile .gl-m-lines { display: grid; margin: 14px auto 0; max-width: 22em; }
#goals .v-mobile .gl-m-line {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 350;
  color: var(--body);
}
#goals .v-mobile .gl-m-line[hidden] { display: flex; visibility: hidden; }
#goals .v-mobile .gl-m-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--edge);
  box-shadow: var(--highlight), var(--depth-1);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

/* ---- small phones ---- */
@media (max-width: 374.98px) {
  #goals .v-mobile .gl-m-tabs { margin-top: 20px; }
  #goals .v-mobile .gl-m-seg [role="tab"] { padding: 0 3px; font-size: 14px; }
  #goals .v-mobile .gl-m-stage { margin-top: 14px; }
  #goals .v-mobile .gl-m-line { font-size: 16px; }
}
@media (max-width: 359.98px) { #goals .v-mobile .gl-m-seg [role="tab"] { font-size: 13.5px; } }

/* ---- tablets (768–1023): title, switch and line on the left (centred on the card); the card on the right ---- */
@media (min-width: 768px) {
  #goals .v-mobile { --pad-l: max(40px, env(safe-area-inset-left)); --pad-r: max(40px, env(safe-area-inset-right)); }
  #goals .v-mobile .gl-m {
    max-width: 920px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: ". stage" "title stage" "tabs stage" "line stage" ". stage";
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: clamp(56px, 7vw, 96px);
    text-align: left;
  }
  #goals .v-mobile .gl-m-body { display: contents; }
  #goals .v-mobile .gl-m-title { grid-area: title; margin: 0; max-width: none; }
  #goals .v-mobile .gl-m-tabs { grid-area: tabs; min-width: 0; justify-content: flex-start; margin: 30px 0 0; padding: 4px 0; overflow: visible; }
  #goals .v-mobile .gl-m-seg { max-width: 380px; }
  #goals .v-mobile .gl-m-lines { grid-area: line; margin: 24px 0 0; max-width: 19em; }
  #goals .v-mobile .gl-m-line { align-items: flex-start; font-size: 19px; }
  #goals .v-mobile .gl-m-line[hidden] { display: flex; }
  #goals .v-mobile .gl-m-stage {
    grid-area: stage;
    margin: 0;
    padding: 24px 0 28px;
    --pw: clamp(260px, min(34vw, calc((100vh - 110px) / 2.2)), 330px);
  }
  @supports (height: 100svh) {
    #goals .v-mobile .gl-m-stage { --pw: clamp(260px, min(34vw, calc((100svh - 110px) / 2.2)), 330px); }
  }
  #goals .v-mobile .gl-m-sky { width: calc(var(--pw) * 1.6); }
}


/* ---- RT-LOOP-M · ONE TYPE SCALE (founder 30 Sep; the hero is the reference): h2 30/1.1/-0.025em (28 under 360,
   40 on tablets) · lede 17/1.5/350 (19 on tablets) · labels 14/600 accent · in-section titles 22 · body 16–17 ---- */
#goals .v-mobile .gl-m-title { font-size: 30px; line-height: 1.1; letter-spacing: -0.025em; font-weight: 500; }
#goals .v-mobile .gl-m-line { font-size: 17px; line-height: 1.5; font-weight: 350; }
@media (max-width: 359.98px) { #goals .v-mobile .gl-m-title { font-size: 28px; } }
@media (min-width: 768px) { #goals .v-mobile .gl-m-title { font-size: 40px; } #goals .v-mobile .gl-m-line { font-size: 19px; } }
#goals .v-mobile .gl-m-chip { border: 0; font-size: 14px; font-weight: 600; color: var(--accent-edge); }   /* label scale; no outline (no lines) */
@media (max-width: 374.98px) { #goals .v-mobile .gl-m-line { font-size: 17px; } }