/* ─────────────────────────────────────────────────────────────────
   family-mobile.css
   Mobile chrome ported from the main Scalar site (scalar-motion.css
   §12 + §19), adapted to the Scalar Family palette (clay / paper / ink)
   and the single-page section structure.

   Adds three mobile-native surfaces, all built by family-mobile.js:
     · .mbar   — fixed top app-bar (wordmark + Contents toggle + progress)
     · .msheet — slide-down "Contents" sheet (section outline + CTA)
     · .mcta   — sticky bottom call-to-action, appears past the hero
   Shown ≤960px; hidden ≥961px. Loaded AFTER each page's inline <style>.
   ───────────────────────────────────────────────────────────────── */

/* hide the mobile chrome on desktop */
@media (min-width: 961px) {
  .mbar, .msheet, .msheet-scrim, .mcta, .hero-cobrand { display: none !important; }
}

/* ─── tablet + phone: replace the rail with the app-bar ─────────── */
@media (max-width: 960px) {
  :root { --mbar-h: 54px; }

  .rail { display: none !important; }
  .edge-label { display: none !important; }
  .page { margin-left: 0 !important; }

  body { padding-top: calc(var(--mbar-h) + env(safe-area-inset-top, 0px)); }
  body.msheet-open { overflow: hidden; }
  html { scroll-padding-top: calc(var(--mbar-h) + env(safe-area-inset-top, 0px) + 10px); }
  section[id] { scroll-margin-top: calc(var(--mbar-h) + env(safe-area-inset-top, 0px) + 8px); }

  /* ── fixed top app-bar ── */
  .mbar {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; top: 0; left: 0; right: 0;
    height: calc(var(--mbar-h) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 20px 0;
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
    z-index: 10001;
  }
  .mbar-logo { display: flex; align-items: center; height: 100%; }
  .mbar-logo .wordmark { gap: 9px; }
  .mbar-logo .wm-mark { height: 26px; }
  .mbar-logo .wm-stack { gap: 3px; }
  .mbar-logo .wm-scalar { height: 12.5px; }
  .mbar-logo .wm-fam { font-size: 8px; letter-spacing: 0.3em; }

  /* co-brand credit folded into the hero (First Colony page, mobile only):
     First Colony logo + a ruled note, standing in for the text kicker. */
  .hero-cobrand {
    display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
    margin: 0 0 22px;
  }
  .hero-cobrand .hcb-fcm { height: 56px; width: auto; display: block; }
  .hero-cobrand .hcb-txt {
    font-family: 'JetBrains Mono', monospace; font-size: 9px; line-height: 1.55;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  }
  .hero-cobrand .hcb-txt b { color: var(--ink); font-weight: 500; }
  body.has-cobrand .hero .kicker { display: none; }

  .mbar-toggle {
    display: inline-flex; align-items: center; gap: 10px;
    height: 44px; padding: 0 2px 0 14px; margin-right: -2px;
    background: none; border: none; cursor: pointer;
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink);
    -webkit-tap-highlight-color: transparent;
  }
  .mbar-toggle-glyph { position: relative; width: 20px; height: 12px; }
  .mbar-toggle-glyph i {
    position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink);
    transition: transform 240ms cubic-bezier(.22,.61,.36,1), opacity 160ms, background 160ms;
  }
  .mbar-toggle-glyph i:nth-child(1) { top: 1px; }
  .mbar-toggle-glyph i:nth-child(2) { top: 5.5px; }
  .mbar-toggle-glyph i:nth-child(3) { top: 10px; }
  body.msheet-open .mbar-toggle-glyph i:nth-child(1) { transform: translateY(4.5px) rotate(45deg); background: var(--clay); }
  body.msheet-open .mbar-toggle-glyph i:nth-child(2) { opacity: 0; }
  body.msheet-open .mbar-toggle-glyph i:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); background: var(--clay); }

  .mbar-progress {
    position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
    background: var(--clay); transform: scaleX(0); transform-origin: 0 50%;
  }

  /* ── contents sheet + scrim ── */
  .msheet-scrim {
    position: fixed; left: 0; right: 0; bottom: 0;
    top: calc(var(--mbar-h) + env(safe-area-inset-top, 0px));
    background: rgba(53, 48, 42, 0.34);
    opacity: 0; transition: opacity 260ms ease; z-index: 9999;
  }
  .msheet-scrim.show { opacity: 1; }
  .msheet {
    position: fixed; left: 0; right: 0;
    top: calc(var(--mbar-h) + env(safe-area-inset-top, 0px));
    max-height: calc(100vh - var(--mbar-h) - env(safe-area-inset-top, 0px));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--paper); border-bottom: 1px solid var(--hairline);
    z-index: 10000;
    transform: translateY(-101%);
    transition: transform 320ms cubic-bezier(.22,.61,.36,1);
    box-shadow: 0 22px 44px rgba(53, 48, 42, 0.16);
  }
  .msheet.show { transform: translateY(0); }
  .msheet-inner { padding: 8px 22px calc(26px + env(safe-area-inset-bottom, 0px)); }
  .msheet-sec-label {
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
    padding: 18px 0 4px;
  }
  .msheet-sections { list-style: none; margin: 0; padding: 0; }
  .msheet-section {
    display: grid; grid-template-columns: 30px 1fr; align-items: baseline; gap: 12px;
    padding: 16px 0; border-top: 1px solid var(--hairline);
    -webkit-tap-highlight-color: transparent;
  }
  .msheet-sections li:last-child .msheet-section { border-bottom: 1px solid var(--hairline); }
  .ms-num { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; color: var(--muted); }
  .ms-name { font-size: 1.2rem; letter-spacing: -0.012em; color: var(--ink); }
  .msheet-section.current .ms-num,
  .msheet-section.current .ms-name { color: var(--clay); }

  .msheet-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 24px; padding: 15px 18px;
    background: var(--clay); color: var(--paper);
    font-size: 14px; font-weight: 500; letter-spacing: 0.005em;
    -webkit-tap-highlight-color: transparent;
  }

  /* ── sticky bottom CTA ── */
  .mcta {
    position: fixed; left: 16px; right: 16px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; justify-content: center; gap: 12px;
    height: 52px; background: var(--clay); color: var(--paper);
    font-size: 14px; font-weight: 500; letter-spacing: 0.005em;
    z-index: 9990; box-shadow: 0 8px 24px rgba(53, 48, 42, 0.22);
    transform: translateY(calc(100% + 26px)); opacity: 0;
    transition: transform 340ms cubic-bezier(.22,.61,.36,1), opacity 220ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mcta.show { transform: translateY(0); opacity: 1; }
  .mcta-arrow { width: 16px; height: 1px; background: currentColor; position: relative; }
  .mcta-arrow::after {
    content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px;
    border-top: 1px solid currentColor; border-right: 1px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
  }
  body.msheet-open .mcta { opacity: 0 !important; transform: translateY(calc(100% + 26px)) !important; }
}

/* ─── phone tier (≤640) — tighten gutters, stack, drop the spine ── */
@media (max-width: 640px) {
  :root { --gutter: 20px; }

  main::before { display: none; }

  .sec-grid { grid-template-columns: 1fr !important; column-gap: 0; row-gap: 16px; }
  .hero .sec-grid { grid-template-columns: 1fr !important; }
  .sec-num {
    border-top: none; padding-top: 0;
    display: inline-flex; align-items: center; gap: 10px; width: max-content;
  }
  .sec-num::before {
    content: ''; display: inline-block; width: 28px; height: 2px; background: var(--clay);
  }

  .hero-grid { gap: 26px; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn, .cta-row .btn-ghost { width: 100%; justify-content: center; text-align: center; }

  section { padding: 46px 0 52px; }
  .hero { padding: 34px 0 44px !important; }

  p, .lede { max-width: none !important; }

  /* prevent iOS zoom-on-focus for form fields */
  form.cap-form input, form.cap-form select, form.cap-form textarea { font-size: 16px; }
}

/* ─── ultra-narrow (≤380) — small phones ── */
@media (max-width: 380px) {
  :root { --gutter: 16px; }
}