/* ════════════════════════════════════════════════════════════════
   Navier · Mobile tokens + shared vocabulary (no shell chrome)
   ────────────────────────────────────────────────────────────────
   Design source: /Design/Mobile UI/design_handoff_navie_mobile
   ("safe" variant). ALL rules are scoped to ≤768px — desktop is
   untouched by construction.

   Split out of shell.css (Phase 2, A0): funnel pages (assessment,
   score reveal, auth, index) link THIS file only — they get the
   tokens and m-* vocabulary but never the app bar / tab bar, whose
   rules (and whose nav.js DOM injection gate) live in shell.css.

   Load order:
     app pages   : base → components → layout → pages/<page>
                   → mobile/tokens → mobile/shell → mobile/<page>
     funnel pages: base → components → layout → pages/<page>
                   → mobile/tokens → mobile/<page>
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Mobile design tokens (handoff "safe" variant) ─────────── */
  :root {
    --m-lime: #c5fe01;
    --m-ink: #1c1c1c;
    --m-bg: #eef0ea;
    --m-card: #ffffff;
    --m-orange: #f5a624;
    --m-orange-deep: #d9821c;
    --m-green: #00b377;
    --m-green-num: #15a35b;
    --m-red: #df5a52;
    --m-red-bg: #f6e1e0;
    --m-amber-bg: #fbedcf;
    --m-muted: #71756d;
    --m-muted-2: #9a9d94;
    --m-line: rgba(20, 22, 18, 0.09);
    --m-line-2: rgba(20, 22, 18, 0.06);
    --m-radius: 16px;        /* cards (safe variant) */
    --m-hero-radius: 20px;   /* dark heroes (safe variant) */
    --m-gutter: 18px;        /* page side inset */
    --m-shadow: 0 1px 2px rgba(20, 22, 18, 0.09); /* flat card shadow */
    --m-tabbar-h: 64px;

    /* Remap existing global tokens so legacy components inherit the
       mobile look before their page is fully migrated. */
    --font-body: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --shadow-card: 0 1px 2px rgba(20, 22, 18, 0.09);
    --shadow-md: 0 1px 2px rgba(20, 22, 18, 0.09);
    --shadow-lg: 0 1px 2px rgba(20, 22, 18, 0.09);
  }

  /* ── Page background — flat warm off-white, no grid, no orbs ──
     (Tab-bar clearance padding lives in shell.css — funnel pages
     have no tab bar and must not inherit phantom bottom space.) */
  body,
  body.app-bg {
    background: var(--m-bg);
    color: var(--m-ink);
  }
  .app-bg::after,
  .grid-overlay-bg,
  .orb-lime { display: none; }

  /* ── Shared mobile vocabulary (used by per-page mobile CSS) ──── */
  .m-section { padding: 0 var(--m-gutter); margin-top: 26px; }
  .m-section.tight { margin-top: 18px; }
  .m-eyebrow {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--m-muted-2);
  }
  .m-mini-eyebrow {
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--m-muted-2);
  }
  .m-hsec {
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 8px 0 0;
    text-wrap: balance;
    line-height: 1.2;
  }
  .m-psec {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--m-muted);
    margin: 8px 0 0;
  }

  .m-card {
    background: var(--m-card);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
  }
  .m-dark-card {
    background:
      radial-gradient(130% 110% at 100% 0%, rgba(120, 150, 40, 0.22), transparent 55%),
      #1b1c19;
    color: #fff;
    border-radius: var(--m-hero-radius);
  }

  /* Press feedback for tappable cards / buttons */
  .m-press { transition: transform 0.14s ease, box-shadow 0.14s ease; }
  .m-press:active { transform: scale(0.975); }

  /* Entrance — transform only (visibility never gated on animation) */
  .m-rise { animation: m-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
  @keyframes m-rise {
    from { transform: translateY(12px); }
    to   { transform: none; }
  }

  /* Buttons */
  .m-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 16px;
    border: none;
    border-radius: 14px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14.5px;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
  }
  .m-btn-lime { background: var(--m-lime); color: #10110a; }
  .m-btn-ink { background: var(--m-ink); color: #fff; }
  .m-btn-ghost-d {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  .m-btn-light { background: var(--m-card); color: var(--m-ink); box-shadow: var(--m-shadow); }
  .m-btn-full { width: 100%; }

  /* Chips & pills */
  .m-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 27px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.07);
    white-space: nowrap;
  }
  .m-chip .m-live {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(0, 192, 127, 0.18);
  }
  .m-lime-pill {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 11px;
    border-radius: 999px;
    background: var(--m-lime);
    color: #10110a;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
  }

  /* Status badges (handoff color pairs) */
  .m-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
  .m-badge.green  { background: #e3f5ea; color: #197a44; }
  .m-badge.amber  { background: #fbedcf; color: #a9701a; }
  .m-badge.red    { background: var(--m-red-bg); color: #c0463f; }
  .m-badge.blue   { background: #e6eefb; color: #3b6fd4; }
  .m-badge.violet { background: #efe9fb; color: #6a4fc4; }
  .m-badge.gray   { background: #eef1e9; color: var(--m-muted); }

  /* Horizontal snap carousel */
  .m-hscroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 2px var(--m-gutter) 4px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .m-hscroll::-webkit-scrollbar { display: none; }
  .m-hcard {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 72%;
    max-width: 300px;
    padding: 16px;
    border-radius: var(--m-radius);
  }
  .m-hcard.full { width: 84%; }

  /* Animated progress bar track */
  .m-bar {
    height: 6px;
    border-radius: 999px;
    background: #e9ebe4;
    overflow: hidden;
    margin-top: 12px;
  }
  .m-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Tappable row card (icon · text · arrow) */
  .m-row-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border: none;
    border-radius: var(--m-radius);
    background: var(--m-card);
    box-shadow: var(--m-shadow);
    text-align: left;
    width: 100%;
    text-decoration: none;
    color: var(--m-ink);
  }
  .m-row-ic {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #f1f3ec;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  /* Segmented control */
  .m-seg {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #e7e9e2;
    border-radius: 14px;
    margin: 14px var(--m-gutter) 0;
  }
  .m-seg a,
  .m-seg button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border: none;
    background: none;
    border-radius: 10px;
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--m-muted);
    cursor: pointer;
    text-decoration: none;
  }
  .m-seg a.on,
  .m-seg button.on {
    background: var(--m-card);
    color: var(--m-ink);
    box-shadow: var(--m-shadow);
  }

  /* Key/value row */
  .m-kv {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--m-line-2);
    font-size: 14px;
  }
  .m-kv:last-child { border-bottom: none; }
  .m-kv .k { color: var(--m-muted); }
  .m-kv .v { font-weight: 700; }

  /* ── Bottom sheet (driven by presentational JS where used) ───── */
  .m-sheet-scrim {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(16, 17, 12, 0.42);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.28s ease;
  }
  .m-sheet-scrim.in { opacity: 1; }
  .m-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 201;
    background: var(--m-card);
    border-radius: 26px 26px 0 0;
    padding: 10px var(--m-gutter) calc(22px + env(safe-area-inset-bottom, 0px));
    transform: translateY(101%);
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    max-height: 86%;
    overflow-y: auto;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
  }
  .m-sheet.in { transform: translateY(0); }
  .m-grabber {
    width: 38px;
    height: 5px;
    border-radius: 999px;
    background: #d8dad2;
    margin: 4px auto 12px;
  }
  .m-sheet h3 {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 4px 0 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .m-rise { animation: none; }
    .m-bar > span,
    .m-sheet,
    .m-sheet-scrim { transition: none; }
  }
}