/* ==========================================================================
   HAPI — Phone optimisation layer
   Loaded last on every page. Covers: overflow containment, iOS input zoom,
   safe-area insets, 44px touch targets, legible minimum type, a native-feeling
   bottom tab bar for the app, card-style tables, and reduced GPU load.
   ========================================================================== */

/* ---------- 1. Hard overflow containment -------------------------------- */
/* body alone isn't enough: html keeps an inflated scrollWidth, which makes
   iOS Safari rubber-band sideways and mis-report the viewport.              */
html{ overflow-x:clip; max-width:100%; }
body{ overflow-x:clip; max-width:100%; position:relative; }

/* ---------- 2. Global mobile behaviour ---------------------------------- */
@media (max-width:860px){
  /* stop iOS auto-zooming when a field is focused (needs >=16px) */
  input,select,textarea{ font-size:16px !important; }

  /* momentum scrolling + no grey tap flash */
  *{ -webkit-tap-highlight-color:rgba(227,154,18,.14); }
  .tbl-wrap,.demo-tabs,.set-nav,.marq{ -webkit-overflow-scrolling:touch; }

  /* honour the notch / home indicator */
  body{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
}

/* ==========================================================================
   LANDING PAGE
   ========================================================================== */
@media (max-width:860px){
  /* the hero glow layers are what inflate the scroll width */
  .hero,.final,.demo,.signature,.section{ overflow-x:clip; }
  .sunrise,.sunbeam,.final-sun,.ambient .orb{ max-width:100vw; }

  /* tighter, more readable hero */
  .display{ font-size:clamp(38px,10.5vw,56px); letter-spacing:-.038em; }
  .hero .lede,.lede{ font-size:16px; line-height:1.6; }
  .hero{ padding-top:104px; }
  .hero-pill{ font-size:12px; }
  .hero-pill span{ padding-right:2px; }

  /* full-width, thumb-friendly CTAs */
  .hero-cta,.final-cta{ flex-direction:column; align-items:stretch; gap:10px; }
  .hero-cta .btn,.final-cta .btn{ width:100%; height:54px; font-size:16px; }

  /* trust chips wrap into a neat two-line block */
  .trust{ gap:6px; }
  .trust b{ font-size:12px; padding:8px 12px; }

  /* section rhythm */
  :root{ --sect:clamp(72px,15vw,110px); }
  .h2{ font-size:clamp(28px,7.4vw,40px); }
  .h3{ font-size:clamp(22px,5.6vw,28px); }

  /* feature links / inline anchors need a real hit area */
  .feat-link{ min-height:44px; align-items:center; font-size:15px; }
  .nav-links a{ min-height:44px; display:flex; align-items:center; }

  /* footer links: 44px rows, easier to hit */
  .foot-col a{ padding:11px 0; min-height:44px; display:flex; align-items:center; }
  .foot-social a{ width:44px; height:44px; }
  .foot-bot{ font-size:12.5px; line-height:1.6; }

  /* the giant wordmark eats scroll space on a phone */
  .foot-word{ font-size:clamp(56px,22vw,120px); margin-top:26px; }

  /* pricing / benefit / quote cards get comfortable padding */
  .plan{ padding:26px 22px; }
  .bcard{ padding:24px 20px; }
  .quote-body{ padding:22px 20px; }

  /* device showcase would otherwise be a tiny illegible cluster */
  .devices{ min-height:auto; padding-block:20px; }
  .dev-tablet,.dev-phone{ display:none; }
  .dev-laptop{ width:100%; }

  /* burger becomes a proper 44px target */
  .burger{ width:44px; height:44px; }
  .nav-bar{ padding-right:6px; }
}

@media (max-width:560px){
  /* the signature honey-drop section is very tall for little payoff on a phone */
  .signature{ height:150vh; }
  .sig-copy h2{ font-size:clamp(26px,7.6vw,34px); }

  /* interactive demo: let the tab strip scroll rather than squash */
  .demo-tabs{ justify-content:flex-start; margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut); }
  .demo{ margin-inline:6px; }

  /* problem split: photo panel shorter so the copy leads */
  .split-old{ min-height:300px; }
}

/* ==========================================================================
   AUTH PAGES
   ========================================================================== */
@media (max-width:860px){
  .auth-form-side{ padding:20px 20px 26px; }
  .auth-box{ max-width:none; margin-block:26px; }
  .auth-box h1{ font-size:clamp(28px,8vw,34px); }
  .auth-box .sub{ font-size:15px; }

  /* the marketing panel is decoration on a phone — keep it brief */
  .auth-art{ min-height:0; padding:26px 20px 28px; }
  .auth-quote blockquote{ font-size:16px; line-height:1.5; }

  /* comfortable, full-width controls */
  .btn-google{ height:54px; font-size:15.5px; }
  .auth-fields .form-row input{ height:52px; }
  .auth-submit{ height:54px; font-size:16px; }
  .form-2{ grid-template-columns:1fr; }

  /* small inline links -> 44px rows */
  .auth-top-link a,.label-row a,.auth-alt a{
    display:inline-flex; align-items:center; min-height:44px;
  }
  .auth-foot{ gap:10px; font-size:12.5px; }
  .auth-foot nav a{ display:inline-flex; align-items:center; min-height:44px; padding-inline:2px; }
  .pw-toggle{ width:44px; height:44px; }
  .check{ font-size:13.5px; padding-block:4px; }
  .check .box{ width:22px; height:22px; }
  .auth-or{ font-size:11.5px; }
}

/* ==========================================================================
   APP — bottom tab bar (replaces the hamburger as primary navigation)
   ========================================================================== */
.tabbar{ display:none; }

@media (max-width:1080px){
  .tabbar{
    position:fixed; left:0; right:0; bottom:0; z-index:130;
    display:flex; align-items:stretch;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--bg) 86%, transparent);
    border-top:1px solid var(--line);
    backdrop-filter:blur(22px) saturate(170%); -webkit-backdrop-filter:blur(22px) saturate(170%);
  }
  .tabbar a{
    flex:1; min-width:0; min-height:52px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    border-radius:13px; padding:6px 2px;
    font-size:10.5px; font-weight:550; letter-spacing:-.008em; color:var(--muted-2);
    transition:color .3s var(--ease), background .3s var(--ease);
  }
  .tabbar a svg{ width:21px; height:21px; }
  .tabbar a span{ overflow:hidden; text-overflow:ellipsis; max-width:100%; white-space:nowrap; }
  .tabbar a.on{ color:var(--accent); background:var(--accent-soft); }
  .tabbar a:active{ transform:scale(.94); }

  /* keep content clear of the bar */
  .page{ padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
  .toast-wrap{ bottom:calc(84px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   APP — layout, tables, forms
   ========================================================================== */
@media (max-width:1080px){
  /* the drawer sidebar gets a wider, comfier rail */
  .side{ width:min(292px,78vw); padding-top:calc(20px + env(safe-area-inset-top)); }
  .nav-i{ min-height:46px; }
  .topbar{ padding-top:env(safe-area-inset-top); height:calc(var(--top-h) + env(safe-area-inset-top)); }
  .icon-btn,.burger{ width:42px; height:42px; }
}

@media (max-width:860px){
  /* page header: title, then a full-width action row */
  .page{ padding-inline:16px; }
  .page-head{ margin-bottom:22px; gap:16px; }
  .page-head h2{ font-size:clamp(25px,7vw,32px); }
  .page-head p{ font-size:14px; }
  .head-actions{ width:100%; }
  .head-actions .btn{ flex:1; min-height:46px; justify-content:center; }
  .head-actions .seg{ width:100%; }
  .head-actions .seg button{ flex:1; min-height:40px; }

  /* stats stack to a readable 2-up, then 1-up */
  .g-4{ grid-template-columns:1fr 1fr; gap:12px; }
  .stat{ padding:16px; }
  .stat-v{ font-size:24px; margin-top:11px; }
  .stat-l{ font-size:10px; }
  .stat-spark{ display:none; }

  .card{ padding:17px; border-radius:18px; }
  .card-h{ margin-bottom:13px; }
  .card-h h3{ font-size:14.5px; }

  /* tables: let them scroll, and hint that they can */
  .tbl-wrap{
    overflow-x:auto; scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);
    mask-image:linear-gradient(90deg,#000 92%,transparent);
  }
  .tbl{ min-width:640px; }
  .tbl thead th{ padding:11px 14px; }
  .tbl tbody td{ padding:13px 14px; }

  /* toolbars stack: search full width, filters scroll horizontally */
  .toolbar{ padding:14px; gap:10px; }
  .toolbar .field{ width:100%; }
  .toolbar .field input,.toolbar .field select{ width:100%; min-width:0; height:44px; }
  .toolbar [data-chips]{
    display:flex; flex-wrap:nowrap; overflow-x:auto; width:100%;
    padding-bottom:2px; scrollbar-width:none;
  }
  .toolbar [data-chips]::-webkit-scrollbar{ display:none; }
  .chip{ min-height:38px; white-space:nowrap; }
  .toolbar .field.plain{ margin-left:0 !important; }

  .tbl-foot{ padding:13px 14px; font-size:12px; }
  .pager button{ min-width:38px; height:38px; }

  /* modals behave like iOS sheets */
  .modal{ padding:0; align-items:flex-end; }
  .modal-box{
    width:100%; max-width:none; max-height:92vh;
    border-radius:24px 24px 0 0;
    padding:24px 20px calc(24px + env(safe-area-inset-bottom));
    transform:translateY(100%);
  }
  .modal.on .modal-box{ transform:none; }
  .modal-box h3{ font-size:19px; }
  .modal-foot{ flex-direction:column-reverse; gap:8px; }
  .modal-foot .btn{ width:100%; min-height:48px; }
  .modal-x{ width:38px; height:38px; top:16px; right:16px; }
  .form-row input,.form-row select,.form-row textarea{ padding:13px 14px; }

  /* products & notes: single comfortable column */
  .prod-grid{ grid-template-columns:1fr; }
  .note-grid{ columns:1; }
  .prod-act .btn,.note-pin{ min-height:42px; }
  .note-pin{ width:42px; }
  .ncheck button{ width:24px; height:24px; }
  .ncheck li{ padding:8px 0; font-size:14px; }

  /* settings: section nav scrolls as a chip row */
  .set-layout{ gap:14px; }
  .set-nav{ flex-direction:row; overflow-x:auto; gap:6px; padding:7px; scrollbar-width:none; }
  .set-nav::-webkit-scrollbar{ display:none; }
  .set-nav a{ min-height:42px; white-space:nowrap; }
  .setting{ flex-wrap:wrap; gap:12px; padding:16px 0; }
  .setting-b{ flex:1 1 190px; }
  .sw{ width:48px; height:27px; }
  .sw::after{ width:21px; height:21px; }
  .sw.on::after{ transform:translateX(21px); }
  .theme-pick{ grid-template-columns:1fr; }
  .plan-row{ padding:17px; }

  /* charts read better slightly shorter */
  .bars{ height:130px !important; }
  .axis span{ font-size:9.5px; }
  .donut{ width:124px; height:124px; }
}

@media (max-width:520px){
  .g-4,.g-3,.g-2{ grid-template-columns:1fr; }
  .grid{ gap:12px; }
  .head-actions{ flex-direction:column; }
  .head-actions .btn{ width:100%; }
  .stat-v{ font-size:26px; }
}

/* ==========================================================================
   Performance: phones do less GPU work
   ========================================================================== */
@media (max-width:860px){
  /* heavy multi-layer blurs are the main jank source while scrolling */
  .card,.stat,.prod,.note,.set-nav,.sync-card,.user-card{
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .card::after,.stat::after,.prod::after{ display:none; }  /* specular sweeps */
  .grain{ opacity:.22; animation:none; }
  .glowfield i{ filter:blur(60px); }
  .hexfield{ opacity:.34; }
}

@media (max-width:860px) and (prefers-reduced-motion: no-preference){
  /* keep motion, but cheaper */
  .motes,.particles,.auth-art-motes{ opacity:.55; }
}

/* very small phones: drop the decorative canvases entirely */
@media (max-width:420px){
  .motes,.auth-art-motes{ display:none; }
}

/* landscape phones: reclaim vertical space */
@media (max-height:520px) and (orientation:landscape){
  .hero{ padding-top:88px; }
  .auth-art{ display:none; }
  .auth{ grid-template-columns:1fr; }
  .tabbar a span{ display:none; }
  .tabbar a{ min-height:44px; }
}

/* ==========================================================================
   Touch-target + legibility pass (from device audit)
   ========================================================================== */
@media (max-width:1080px){
  /* drawer typography was as small as 9.5px */
  .nav-label{ font-size:10.5px; letter-spacing:.14em; padding:16px 10px 8px; }
  .nav-i{ font-size:14.5px; }
  .nav-i .cnt{ font-size:11.5px; padding:3px 8px; }
  .sync-card .r1{ font-size:13px; }
  .sync-card p{ font-size:11.5px; }
  .user-card b{ font-size:13.5px; }
  .user-card span{ font-size:11.5px; }
  .side-brand{ font-size:21px; }
}

@media (max-width:860px){
  /* every tappable control clears ~44px */
  .btn-sm{ min-height:44px; padding-inline:15px; font-size:13.2px; }
  .seg button{ min-height:42px; padding-inline:16px; font-size:13px; }
  .chip{ min-height:42px; padding-inline:14px; font-size:12.8px; }
  .pager button{ min-width:42px; height:42px; font-size:13px; }
  .tbl .act .icon-btn{ width:40px !important; height:40px !important; border-radius:11px !important; }
  .card-h .btn,.card-h a.btn{ min-height:42px; }
  .prod-act .btn{ min-height:44px; }
  .note-pin{ width:44px; height:44px; }
  .brand,.auth-brand,.side-brand{ min-height:44px; align-items:center; }
  .swatch{ width:38px; height:38px; }

  /* small print floors */
  .card-h .tag,.card-h p{ font-size:12px; }
  .row-s{ font-size:12px; }
  .stat-f,.delta{ font-size:12px; }
  .tbl .who span,.tbl .mono{ font-size:12px; }
  .pill{ font-size:11.5px; padding:4px 10px; }
  .tl-i time{ font-size:11.5px; }
  .prod-s,.prod-l{ font-size:11.5px; }
  .ntag,.note-f time{ font-size:11.5px; }
  .hint p{ font-size:12.5px; }
  .plan-note,.setting-b p{ font-size:12.5px; }
}

/* ---- final pass: 44px floor on all buttons + inline legal links --------- */
@media (max-width:860px){
  .btn{ min-height:44px; }
  .btn-lg{ min-height:50px; }
  .icon-btn{ min-width:42px; min-height:42px; }

  /* inline "Terms" / "Privacy Policy" inside the consent sentence */
  .check a{
    display:inline-block; padding:6px 2px; min-height:32px; line-height:20px;
    text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  }
  .auth-foot nav a{ padding-inline:6px; }

  /* landing feature links read as buttons */
  .feat-link{ min-height:44px; }
}

/* drawer section labels: 10.5 -> 11px, still clearly secondary */
@media (max-width:1080px){ .nav-label{ font-size:11px; } }

/* landing demo tab strip: 39 -> 44px */
@media (max-width:860px){ .demo-tab{ min-height:44px; } }

/* ==========================================================================
   FIX: drawer content was unreachable on short screens
   The sidebar is a fixed-height flex column with overflow:visible, so on a
   phone everything past the fold (Settings, Sign out, the profile card) was
   simply clipped — and the bottom tab bar covered the last ~65px on top of
   that. Make the rail scroll internally and reserve room for the tab bar.
   ========================================================================== */
@media (max-width:1080px){
  .side{
    overflow-y:auto;
    overscroll-behavior:contain;              /* don't scroll the page behind */
    -webkit-overflow-scrolling:touch;
    /* clear the tab bar + home indicator */
    padding-bottom:calc(84px + env(safe-area-inset-bottom));
    scrollbar-width:thin;
    scrollbar-color:var(--accent-line) transparent;
  }
  .side::-webkit-scrollbar{ width:4px; }
  .side::-webkit-scrollbar-thumb{ background:var(--accent-line); border-radius:100px; }
  .side::-webkit-scrollbar-track{ background:transparent; }

  /* the footer block must not be pinned to the bottom of a scrolling column,
     otherwise it stretches the rail instead of following the nav */
  .side-foot{ margin-top:24px; }

  /* the glass edge highlight is absolutely positioned to the rail; keep it
     from stretching to the full scroll height */
  .side::after{ display:none; }
}

/* Below ~700px tall the list is long: tighten it so more fits without scrolling */
@media (max-width:1080px) and (max-height:700px){
  .side{ padding-top:16px; }
  .side-brand{ padding-bottom:16px; }
  .nav-label{ padding:11px 10px 6px; }
  .nav-i{ min-height:42px; padding-block:8px; margin-bottom:1px; }
  .side-foot{ margin-top:16px; }
  .sync-card{ padding:10px 12px; margin-bottom:8px; }
  .sync-card p{ display:none; }        /* keep the status dot + bar, drop detail */
  .user-card{ padding:8px 10px; }
}