/* =====================================================================================================
   00 · Header — MOBILE build (below 1024 px). Owner: HERO-M. Every selector is scoped to .site-header .v-mobile.
   A 60 px glass bar: the ribbon logo, Apple's Download on the App Store badge at 40 px (on every phone, 320 px too)
   and a 44 px menu button whose three short lines turn into a cross. The menu is a bottom sheet like the app's sheets
   (native <dialog>): white, 28 px top corners, a 36×5 grabber, the badge at the top next to the close button (so it
   is in reach the moment the sheet opens, even on a 568 px screen), then two grouped lists in the app's 50 px rows:
   the home sections (How it works, Goals, Journal, Pro, FAQ), and the About page. V3 (30 Sep).
   ===================================================================================================== */

.site-header .v-mobile {
  --pad-l: max(var(--gutter), env(safe-area-inset-left, 0px));
  --pad-r: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* ---- the glass bar ---- */
.site-header .v-mobile .mhd-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  /* the menu button is 44 px wide but its lines are 18 px: pull it out so the lines sit on the gutter line */
  padding: env(safe-area-inset-top, 0px) calc(var(--pad-r) - 13px) 0 var(--pad-l);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(15, 26, 43, 0);
  transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.site-header.scrolled .v-mobile .mhd-bar { background: rgba(255, 255, 255, .82); box-shadow: 0 4px 14px -8px rgba(15, 26, 43, .10);   /* no hairline (founder: no lines) */ }

.site-header .v-mobile .mhd-logo { display: block; flex: none; padding: 7px 0; border-radius: 6px; -webkit-tap-highlight-color: transparent; }
.site-header .v-mobile .mhd-logo img { width: 118px; }  /* 118 × 37 px (owner: the logo leads, never smaller than the badge) */
.site-header .v-mobile .mhd-logo:active img { transform: scale(.97); }
.site-header .v-mobile .mhd-logo img { transition: transform .18s var(--ease); }

.site-header .v-mobile .mhd-actions { display: flex; align-items: center; gap: 8px; }

/* Apple's badge (base.css .store-badge sm: 40 px = the smallest the brief allows, the official artwork untouched,
   no shadow or effects); the bar's 10 px above and below is its clear space; an invisible 48 px tall tap area */
.site-header .v-mobile .mhd-cta { position: relative; }
.site-header .v-mobile .mhd-cta::before { content: ""; position: absolute; inset: -4px -2px; }

/* ---- the menu button: three short lines drawn in CSS that turn into a cross ---- */
.site-header .v-mobile .mhd-menu {
  position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.site-header .v-mobile .mhd-menu:active { background: rgba(15, 26, 43, .06); transform: scale(.92); }
.site-header .v-mobile .mhd-menu:focus-visible { outline-offset: -2px; border-radius: 50%; }
.site-header .v-mobile .mhd-lines { position: relative; width: 18px; height: 12px; }
.site-header .v-mobile .mhd-lines i {
  position: absolute; left: 0; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .42s var(--spring), opacity .2s var(--ease);
}
.site-header .v-mobile .mhd-lines i:nth-child(1) { top: 0; }
.site-header .v-mobile .mhd-lines i:nth-child(2) { top: 5px; }
.site-header .v-mobile .mhd-lines i:nth-child(3) { top: 10px; }
.site-header .v-mobile .mhd-menu[aria-expanded="true"] .mhd-lines i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.site-header .v-mobile .mhd-menu[aria-expanded="true"] .mhd-lines i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.site-header .v-mobile .mhd-menu[aria-expanded="true"] .mhd-lines i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---- the sheet (a modal <dialog>: the page behind is inert; js locks its scroll) ---- */
.site-header .v-mobile .mhd-dialog {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: hidden;
  /* MENU-FIX: clip, not hidden. A hidden box can still be scrolled by the browser, and when the dialog opened it scrolled
     itself 480 px to show the focused row inside the sheet (still parked below the screen), so the sheet snapped into
     place and then drifted instead of rising. A clipped box can never scroll. */
  overflow: clip;
}
.site-header .v-mobile .mhd-dialog:focus { outline: none; }   /* the dialog itself holds focus after a tap (no ring) */
.site-header .v-mobile .mhd-dialog::backdrop { background: transparent; }
.site-header .v-mobile .mhd-dim {
  position: absolute; inset: 0; background: rgba(15, 26, 43, .25);
  opacity: 0; transition: opacity .32s var(--ease); touch-action: none;
}
.site-header .v-mobile .mhd-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto;
  max-height: calc(100% - 16px); overflow-y: auto; overscroll-behavior: contain;
  padding: 0 var(--pad-r) calc(16px + env(safe-area-inset-bottom, 0px)) var(--pad-l);
  background: #fff; border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  /* the app's card depth (--depth-2), cast upwards because the sheet rises from the bottom — a whisper, not a slab */
  box-shadow: var(--highlight), 0 -1px 0 rgba(15, 26, 43, .05), 0 -2px 8px rgba(15, 26, 43, .06), 0 -12px 28px rgba(15, 26, 43, .10);
  transform: translateY(calc(100% + 24px));
  transition: transform .3s cubic-bezier(.4, 0, 1, 1);
}
.site-header .v-mobile .mhd-dialog.is-open .mhd-dim { opacity: 1; }
.site-header .v-mobile .mhd-dialog.is-open .mhd-sheet { transform: none; transition: transform .5s var(--ease); }
.site-header .v-mobile .mhd-dialog.is-dragging .mhd-sheet,
.site-header .v-mobile .mhd-dialog.is-dragging .mhd-dim { transition: none; }

/* grabber + head (the badge and the close button): also the drag handle (pull down to close) */
.site-header .v-mobile .mhd-handle { position: relative; padding-top: 18px; touch-action: none; cursor: grab; }
.site-header .v-mobile .mhd-grab { position: absolute; left: 50%; top: 8px; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: #C2C9D2; }
.site-header .v-mobile .mhd-head { display: flex; align-items: center; justify-content: space-between; height: 52px; margin-right: -10px; }
.site-header .v-mobile .mhd-head .mhd-sheet-cta { margin-left: 2px; }
.site-header .v-mobile .mhd-close {
  position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--secondary);
}
.site-header .v-mobile .mhd-close::before {
  content: ""; position: absolute; left: 7px; top: 7px; width: 30px; height: 30px; border-radius: 50%; background: var(--soft); box-shadow: inset 0 0 0 1px var(--edge);
  transition: transform .18s var(--ease), background-color .18s var(--ease);
}
.site-header .v-mobile .mhd-close svg { position: relative; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.site-header .v-mobile .mhd-close:active::before { transform: scale(.9); background: #EBEFF4; }

/* the rows: the app's grouped list — 50 px rows, radius 12. No lines (founder): no row hairlines, no outline; the group
   is one raised white surface and the icons keep the rows apart */
.site-header .v-mobile .mhd-list {
  position: relative; margin-top: 6px; border-radius: var(--r-row); background: #fff;
  box-shadow: var(--highlight), var(--depth-1);
}
.site-header .v-mobile .mhd-list li { position: relative; }
.site-header .v-mobile .mhd-row {
  display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 14px 0 18px;
  font-size: 16px; font-weight: 400; line-height: 1.2; color: var(--ink);
  border-radius: 11px;
  transition: background-color .18s var(--ease), transform .18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.site-header .v-mobile .mhd-row span { flex: 1; min-width: 0; }
.site-header .v-mobile .mhd-row:active { background: var(--tint); transform: scale(.975); }
@media (hover: hover) { .site-header .v-mobile .mhd-row:hover { background: var(--selected); } }
.site-header .v-mobile .mhd-row:focus-visible { outline-offset: -3px; }
.site-header .v-mobile .mhd-list li:first-child .mhd-row { border-radius: 11px 11px 0 0; }
.site-header .v-mobile .mhd-list li:last-child .mhd-row { border-radius: 0 0 11px 11px; }
.site-header .v-mobile .mhd-ico { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.site-header .v-mobile .mhd-chev { flex: none; width: 16px; height: 16px; fill: none; stroke: #B8BEC8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.site-header .v-mobile .mhd-row:active .mhd-chev { transform: translateX(2px); }

.site-header .v-mobile .mhd-list-more { margin-top: 14px; }   /* the two pages, a group of their own */

/* ---- short screens (iPhone SE and landscape): slightly shorter rows so the whole menu fits without scrolling ---- */
@media (max-height: 700px) {
  .site-header .v-mobile .mhd-row { height: 46px; }
  .site-header .v-mobile .mhd-head { height: 50px; }
  .site-header .v-mobile .mhd-list-more { margin-top: 10px; }
}

/* ---- small phones (320 px): a slightly smaller logo so the 40 px badge still fits beside it ---- */
@media (max-width: 359.98px) {
  .site-header .v-mobile .mhd-logo img { width: 108px; }
  .site-header .v-mobile .mhd-actions { gap: 4px; }
}

/* ---- tablets: a wider bar margin and the sheet floats, centred, like an iPad sheet ---- */
@media (min-width: 768px) {
  .site-header .v-mobile { --pad-l: max(32px, env(safe-area-inset-left, 0px)); --pad-r: max(32px, env(safe-area-inset-right, 0px)); }
  .site-header .v-mobile .mhd-logo img { width: 118px; }
  .site-header .v-mobile .mhd-sheet {
    left: 50%; right: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 480px; margin: 0 0 0 -240px;
    padding: 0 24px 24px; border-radius: var(--r-sheet);
    box-shadow: var(--highlight), 0 0 0 1px rgba(15, 26, 43, .05), var(--depth-2);
    transform: translateY(calc(100% + 40px));
  }
}

/* ---- the bar slides up out of the way (owner 2026-09-30; js/00-header.mobile.js adds .hdr-away) ---- */
.site-header { transition: transform .42s var(--ease); }
.site-header.hdr-away { transform: translateY(calc(-100% - 6px)); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }

/* RT-LOOP-M: the 40 px App Store badges get a 48 px tap area (invisible; the badge art is untouched) */
/* (the bar's badge already has one: .mhd-cta::before) */
.site-header .v-mobile .mhd-sheet-cta { position: relative; }
.site-header .v-mobile .mhd-sheet-cta::after { content: ""; position: absolute; inset: -4px -2px; }