/* public/console/js/mobile.css — console mobile pass (owner module).
 * Spec (board 2026-07-20 22:55Z): phone-usable founders console.
 * (a) single-column collapse below 760px
 * (b) readability: base >=15px, line-height >=1.45
 * (c) touch: >=44px hit areas, full-width decision buttons
 * (d) mobile-first section order: Needs-you -> Backlog -> Overwatch -> Actors
 * (e) sticky bottom action bar chrome (behavior in mobile.js)
 * (f) dark theme preserved; :active instead of hover-only
 *
 * iPhone-chrome slice (board 2026-07-23, design note on #433): this file is
 * now the SINGLE mobile source — the duplicate inline block in index.html is
 * removed (drift risk retired). New here: measured chrome heights
 * (--head-h/--tnav-h/--mact-h set by mobile.js — no more 84px/8rem/108px
 * guesses), full safe-area coverage (top + sides, not just bottom), dvh
 * viewport units, iOS background-attachment fix, scroll containment on inner
 * scrollers, coarse-pointer 44px targets at ANY width (iPad >760px), phone
 * decision-first page-head, and the bottom-sheet chrome (account / more
 * sections) behavior in mobile.js.
 */

/* ---------- base (all widths): safe-area + honest viewport ---------- */
/* Notch/landscape insets apply wherever the fixed chrome lives, at any
   width — an iPad in landscape is >760px and still has insets. */
.site-head{
  padding-top:calc(.7rem + env(safe-area-inset-top, 0px));
  padding-left:calc(clamp(1.1rem, 4vw, 2.4rem) + env(safe-area-inset-left, 0px));
  padding-right:calc(clamp(1.1rem, 4vw, 2.4rem) + env(safe-area-inset-right, 0px));
}
/* 100vh over-scrolls under iOS Safari's collapsing URL bar; dvh tracks it. */
@supports (min-height:100dvh){
  body{ min-height:100dvh; }
}
/* Coarse pointers get the 44px floor no matter the viewport width — the
   inline-mq version left iPads (>760px, touch, hover:none) with 32px
   targets and hover-only affordances. */
@media (hover:none) and (pointer:coarse){
  .abtn, .fbtn, button, select, .nav-link{ min-height:44px; }
  .abtn:active{ background:var(--cream); color:var(--night-hi); }
}

@media (max-width:760px){
    /* fixed background repaints per-frame on iOS Safari (jank + battery);
       scroll attachment on phone, identical pixels while stationary. */
    body{ background-attachment:scroll; }
    /* (a) layout: one column, full-width panels, every grid stacks. The only
       horizontal scrollers left are deliberate data surfaces (below). */
    .wrap{ padding-left:calc(.85rem + env(safe-area-inset-left, 0px));
           padding-right:calc(.85rem + env(safe-area-inset-right, 0px));
           max-width:100%; }
    /* measured header (one row on phone once .who condenses) replaces the
       108px two-row guess; panels anchor beneath the real header height. */
    .wrap{ padding-top:calc(var(--head-h, 64px) + 1rem); }
    section.panel{ scroll-margin-top:calc(var(--head-h, 64px) + 12px); }
    .stats, .queues-grid, .ventures, .board, .duo, .spend-grid{
      grid-template-columns:1fr !important;
    }
    section.panel{ border-radius:14px; padding-left:.9rem; padding-right:.9rem; }
    /* (b) readability: 15px base and 1.45 line-height, and nothing on a touch
       target drops below 11px - the old .58rem chips were ~9px. */
    body{ font-size:15px; line-height:1.45; }
    .sub, .meta-line, .kv, .runtime, .defn, .r5, .usage-legend, .state{
      font-size:.82rem; line-height:1.45;
    }
    .chip, .msg .reply .reply-chips .chip, .answer-line .chip{
      font-size:.72rem; padding:.25rem .6rem;
    }
    .exec-pos, .usage-total, .la{ font-size:.78rem; }
    /* (c) touch: 44px hit areas, and the founder's decision controls become
       full-width buttons instead of inline chips that demand precision. */
    .abtn, .fbtn, button, select, input[type="text"], textarea{
      min-height:44px; font-size:.86rem;
    }
    .abtn{ padding:.5rem 1rem; }
    .meta-line .abtn{ flex:1 1 100%; width:100%; }
    .meta-line{ display:flex; flex-wrap:wrap; gap:.45rem; }
    .fbtn{ min-width:44px; }
    /* #23 F1 (viewport audit): header brand link measured 25px tall — flex +
       min-height enlarges the hit area with zero visual change. */
    .brand{ display:inline-flex; align-items:center; min-height:44px; }
    /* #23 F4 (seed-audit): chat-target and quick-ask buttons measured 32px. */
    .tgt-btn, .qask{ min-height:44px; }
    /* #23 F2 (seed-audit): grid/flex items refuse to shrink below their
       min-content — one wide row pushed every panel past the viewport. */
    section.panel, .panel, .card{ min-width:0; }
    .stack > *, .board > *, .stats > *, .queues-grid > *, .ventures > *,
    .duo > *, .spend-grid > *, .row .top, .top-left, .meta-line{ min-width:0; }
    /* decision-first page head: the founder's <3s path is the Do-Now rail,
       not a 3-line mission statement. Kicker + tightened H1 stay (identity);
       the prose is desktop's. */
    .page-head p.sub{ display:none; }
    .page-head{ margin-bottom:.9rem; }
    h1{ font-size:clamp(1.35rem, 5.4vw, 1.7rem); }
    /* condensed header: ONE row — desktop's email/editor/sign-out live in
       the account sheet behind the ⋯ button (mobile.js). Brand + Catch-up +
       ⋯ fit 390px side by side; nowrap keeps the fold honest (a wrapped
       second chrome row cost 55px of decision space). */
    .who .who-desk{ display:none; }
    .who{ gap:.5rem; flex-wrap:nowrap; flex-shrink:0; }
    .site-head{ flex-wrap:nowrap; }
    .brand{ white-space:nowrap; }
    /* the FOUNDERS tag pill costs ~85px the one-row header can't spare at
       390px; inside the console the context is self-evident (desktop keeps
       it). Buttons never wrap their labels. */
    .brand .tag{ display:none; }
    .btn{ white-space:nowrap; }
    /* (d) mobile-first order: decisions first, then what is queued, then
       whether the factory is healthy, then who is doing what. Detail-heavy
       surfaces (spend/live/graph/chat) follow. Desktop order is untouched. */
    main.wrap{ display:flex; flex-direction:column; }
    .page-head{ order:0; }
    #sec-overview{ order:1; }   /* Needs you: approvals + PRs */
    #sec-work{ order:2; }       /* Backlog / execution order */
    #sec-team{ order:3; }       /* Overwatch health + actors */
    #sec-ventures{ order:4; }
    #sec-spend{ order:5; }
    #sec-live{ order:6; }
    #sec-graph{ order:7; }
    #sec-chat{ order:8; }
    /* the canvas graph is a desktop affordance: keep it reachable but never
       let it own a phone viewport — and never let it swallow vertical pans. */
    .graph-wrap{ height:48dvh; min-height:300px; }
    #graph-canvas{ touch-action:pan-y; }
    /* intentional horizontal scrollers - data that genuinely does not stack.
       overscroll-behavior stops them chaining into page bounce / back-swipe. */
    .usage-track, .recent5{
      overflow-x:auto; -webkit-overflow-scrolling:touch;
      overscroll-behavior-x:contain;
    }
    .dn-rail{ overscroll-behavior:contain; }
    /* (f) no hover-dependent affordances: give the touch state a real target */
    .abtn:active{ background:var(--cream); color:var(--night-hi); }
    .row .top{ flex-wrap:wrap; gap:.35rem; }
  }

@media (max-width:760px){
    #sec-overview, #sec-team{ display:flex; flex-direction:column; }
    #sec-overview > .sec-head, #sec-team > .sec-head{ order:-2; }
    #ny-block, #ow-block{ order:-1; }
    #ny-block > .sub-head:first-child, #ow-block > .sub-head:first-child{
      border-top:none; padding-top:0;
    }
    .nav-link{ min-height:44px; }
    .row--x .top{ min-height:44px; }
    .row--act{ cursor:pointer; }
    .row--sel{
      border-color:rgba(233,206,155,.65);
      box-shadow:0 0 0 1.5px rgba(233,206,155,.45);
    }
    /* measured: the wrap clears exactly the chrome that is actually on
       screen — thumbnav always, plus the action bar while a row is selected. */
    body.maction-open .wrap{
      padding-bottom:calc(var(--tnav-h, 72px) + var(--mact-h, 128px) + .75rem);
    }
  }

/* sticky bar chrome: fixed bottom, ABOVE the thumbnav (which stays put —
     navigation never disappears while a decision is active; the ✕ and the
     nav are both escape hatches). z 850 over thumbnav 840, under sheets 860
     and modals 950. Base rules live outside the media query so [hidden]
     behaves; the bar is only ever unhidden while the mobile mq matches —
     that guard is in JS (mqMobile), including on viewport resize. */
  #maction-bar{
    position:fixed; left:0; right:0; bottom:var(--tnav-h, 72px); z-index:850;
    background:linear-gradient(180deg, rgba(20,28,24,.97), rgba(13,20,16,.99));
    border-top:1px solid rgba(241,234,218,.18);
    padding:.6rem calc(.85rem + env(safe-area-inset-left, 0px)) .6rem
            calc(.85rem + env(safe-area-inset-right, 0px));
    display:flex; flex-direction:column; gap:.5rem;
    box-shadow:0 -12px 30px -12px rgba(0,0,0,.55);
  }
  .maction-head{ display:flex; align-items:center; gap:.5rem; }
  .maction-title{
    flex:1; font-size:.8rem; color:var(--cream-soft);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .maction-close{ flex:0 0 auto; min-width:44px; }
  .maction-row{ display:flex; gap:.5rem; }
  .maction-row .abtn{ flex:1; min-height:48px; font-size:.9rem; }

/* ---------- bottom sheets (account / more sections) ---------- */
/* Phone-only chrome opened by the ⋯ header button and the More thumb tab
   (mobile.js). Panel language, above the action bar, below the modals. */
  #btn-account{ display:none; }
  .sheet-backdrop{
    position:fixed; inset:0; z-index:855;
    background:rgba(10,16,13,.55);
  }
  .sheet{
    position:fixed; z-index:860;
    left:calc(.6rem + env(safe-area-inset-left, 0px));
    right:calc(.6rem + env(safe-area-inset-right, 0px));
    bottom:calc(var(--tnav-h, 72px) + .6rem);
    display:flex; flex-direction:column; gap:.45rem;
    padding:.85rem;
    background:linear-gradient(180deg, rgba(26,40,48,.99), rgba(20,30,26,.99));
    border:1px solid rgba(241,234,218,.16); border-radius:14px;
    box-shadow:0 18px 48px -18px rgba(0,0,0,.7);
  }
  .sheet-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
  .sheet-title{
    font-size:.72rem; font-weight:600; letter-spacing:.11em;
    text-transform:uppercase; color:var(--aurora-text);
  }
  .sheet-close{ min-width:44px; }
  .sheet .abtn{ justify-content:center; text-decoration:none; }
  .sheet-email{
    font-size:.8rem; color:var(--cream-dim); word-break:break-all;
    padding:.15rem .2rem;
  }
  @media (prefers-reduced-motion: no-preference){
    .sheet{ animation:sheet-in 160ms ease-out; }
    @keyframes sheet-in{ from{ transform:translateY(10px); opacity:0; } }
  }
  @media (max-width:760px){
    #btn-account{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; }
  }