/* ─────────────────────────────────────────────────────────────────
   VOLIA / MM — MOBILE CSS PASS
   Owned by Agent 1 (CSS only). Sibling agents handle JS + HTML.
   Safe-area, single-column phone layout, 44×44 touch targets,
   no-zoom inputs, FAB helper, soft daylight on glass.
   Don't redefine tokens. Don't break desktop. iOS Safari first.
   ───────────────────────────────────────────────────────────────── */

/* ─── 1. ROOT iPhone HARDENING (always on) ─────────────────────── */

html {
  /* iOS auto-zoom on input focus is killed by 16px-min input font.
     Setting -webkit-text-size-adjust prevents Safari from auto-bumping
     body text after orientation change. */
  -webkit-text-size-adjust: 100%;
}

html, body {
  /* Stop body rubber-band scroll past content edges on iOS. */
  overscroll-behavior: none;
  /* Use the dynamic viewport so address-bar collapse doesn't shift layout. */
  min-height: 100dvh;
  /* Lock horizontal overflow — caught one more time during polish pass. */
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  /* Kill the gray flash on tap. Replaced by :active states. */
  -webkit-tap-highlight-color: transparent;
}

/* Momentum scroll inside any inner-scroll containers (replays, tape, modal). */
.replay-list,
.tape,
.modal,
.help-pop {
  -webkit-overflow-scrolling: touch;
}

/* Prevent iOS auto-zoom on input focus (font-size must be ≥16px on every input). */
input,
select,
textarea,
.params-form input {
  font-size: max(16px, 1rem);
}

/* ─── 2. TABLET COLLAPSE (≤768px) ──────────────────────────────── */

@media (max-width: 768px) {
  .app {
    padding: 12px;
    gap: 10px;
    /* Honor safe-area horizontals when device is rotated to landscape with
       notch on the side. */
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  /* Sticky hero needs to clear the notch on rotation. */
  .hero {
    padding: 10px 14px;
    padding-top: max(10px, calc(env(safe-area-inset-top) + 6px));
    top: max(6px, env(safe-area-inset-top));
    overflow: hidden;          /* prevent any child from spilling */
  }

  /* Tape and replay shrink a touch so the cards don't dominate. */
  .tape { height: 280px; }
  .replay-list { max-height: 300px; }
}

/* ─── 3. PHONE COLLAPSE (≤480px) — the critical breakpoint ────── */

@media (max-width: 480px) {

  /* ── 3a. App shell ─────────────────────────────────────────── */

  .app {
    padding: 8px;
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
    /* Reserve space at the bottom for the FAB + iOS home-indicator. */
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
    gap: 12px;
    /* Single-column scroll: collapse the 12-col Bloomberg grid. */
    grid-template-columns: 1fr;
  }

  body {
    /* Slightly taller line-height on phones for thumb-scan readability. */
    line-height: 1.45;
  }

  /* ── 3b. Hero strip — vertical stack, full-width sticky ─────── */

  .hero {
    /* Full-width, no rounded corners at edges (looks better on phone). */
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto auto;
    gap: 8px 10px;
    padding: 10px 12px;
    padding-top: max(10px, calc(env(safe-area-inset-top) + 8px));
    top: 0;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    /* Sticky hero on mobile: pin to absolute top so it merges with status bar. */
    margin: calc(env(safe-area-inset-top) * -1) calc(env(safe-area-inset-left) * -1) 0
            calc(env(safe-area-inset-right) * -1);
    width: auto;
    /* Stronger blur on glass — small screen needs more separation from bg. */
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
  }

  /* Brand: row 1, left. Kill status: row 1, right. */
  .hero .brand        { grid-row: 1; grid-column: 1; font-size: 14px; }
  .hero .kill-status  { grid-row: 1; grid-column: 2; padding: 4px 10px; min-width: 0; }
  .hero .kill-status .lbl { font-size: 9px; }
  /* Stop the market tag from overflowing the hero strip */
  .hero .bot-meta { overflow: hidden; flex-wrap: wrap; max-width: 100%; }
  .hero .market-tag {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  /* Bot id: row 2, full width. */
  .hero .bot-id {
    grid-row: 2;
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .hero .bot-name { font-size: 14px; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hero .bot-meta { font-size: 9px; gap: 5px; min-width: 0; max-width: 100%; overflow: hidden; flex-wrap: wrap; }
  .hero .market-tag {
    /* On phone, the market-tag is the least useful piece — drop it
       past 360px to free row 2 for pills only. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
    font-size: 8px;
  }

  /* P&L headline: row 3, full width, BIG and centered. */
  .hero .pnl-headline {
    grid-row: 3;
    grid-column: 1 / -1;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 4px;
    border-top: 1px dashed var(--border);
  }
  .hero .pnl-num {
    font-size: clamp(28px, 9vw, 36px);
    line-height: 1;
  }
  .hero .pnl-bracket { margin-top: 0; font-size: 10px; }

  /* Connection clock: hide on phone (already implied by LIVE pill). */
  .hero .conn { display: none; }

  /* Toggles: hide from hero on phone — moved to FAB modal area is ideal,
     but since we can't touch HTML, keep them but stack at bottom of hero. */
  .hero .lang-toggle,
  .hero .theme-toggle {
    grid-row: 4;
    grid-column: auto;
    justify-self: stretch;
    justify-content: center;
  }
  .hero .lang-toggle  { grid-column: 1; }
  .hero .theme-toggle { grid-column: 2; }

  /* Bigger touch targets on toggles — 44×44 minimum. */
  .theme-toggle .tt-btn,
  .lang-toggle .lt-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 14px;
    font-size: 11px;
  }
  /* Slight gap between buttons to avoid double-tap. */
  .theme-toggle,
  .lang-toggle {
    padding: 3px;
    gap: 3px;
  }

  /* ── 3c. Section cards: single column, breathing room ─────── */

  .section,
  .card-ladder, .card-inv, .card-timer, .card-math,
  .card-attr, .card-heat, .card-replay, .card-tape, .card-params {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    padding: 12px;
    min-width: 0;
    border-radius: var(--r-md);
  }

  .section h2 {
    font-size: 11px;
    margin-bottom: 8px;
    padding-right: 48px; /* room for help button */
  }

  /* ── 3d. Type ramp — older eyes, bigger phone text ─────────── */

  body { font-size: 16px; }
  .section h2  { font-size: 11px; }
  .bot-name    { font-size: 16px; }
  .pill        { font-size: 10px; padding: 3px 8px; }

  /* ── 3e. Ladder — scale to ~70vw width ─────────────────────── */

  .card-ladder {
    min-height: 0;
  }
  .ladder-wrap {
    /* Cap height, lock aspect to keep readable. */
    min-height: 320px;
    height: 70vw;
    max-height: 60vh;
  }
  .ladder-svg { height: 100%; }
  .ladder-legend {
    bottom: 6px; right: 8px;
    font-size: 9px;
    gap: 8px;
    padding: 4px 7px;
  }

  /* ── 3f. Inventory + Timer — side-by-side 50/50 (round shapes fit) ── */

  /* Pull the next two siblings into a two-up row using grid trick.
     Since they're independent grid items in the parent grid, we set
     them to span 6/6 of an implicit 2-column inner row by using
     subgrid-style ordering. The parent .app is 1fr in our phone media,
     so we need a different approach: nest in a flex via display:contents
     won't work for layout. Use grid-column on the parent with a 2-col
     row override for these specific cards. */
  .card-inv,
  .card-timer {
    grid-column: span 1 !important;
  }
  /* Re-introduce a 2-column slot just for the inv+timer row. */
  .app {
    /* keep 1fr column on phone, but allow inv+timer to share via inline trick: */
  }
  /* Inv + Timer together on one row — done by toggling parent grid for these
     two only: place them on the same row via grid-row + col span. */
  .card-inv     { grid-column: 1 / span 1 !important; }
  .card-timer   { grid-column: 2 / span 1 !important; }
  .card-inv,
  .card-timer {
    /* Their parent is 1fr at this width. Switch on 2-col only when both
       cards are present — handled by an explicit override. */
  }
  /* Make the .app a 2-col grid ONLY for inv/timer placement.
     We use a 2-col grid on phone with most cards spanning both. */
  .app {
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
  }
  /* Most cards span both columns. */
  .hero,
  .card-ladder,
  .card-math,
  .card-attr,
  .card-heat,
  .card-replay,
  .card-tape,
  .card-params,
  .foot {
    grid-column: 1 / -1 !important;
  }
  /* Inv + Timer share the 2-col row: 1 + 1. */
  .card-inv   { grid-column: 1 / span 1 !important; }
  .card-timer { grid-column: 2 / span 1 !important; }

  .inv-svg,
  .timer-svg {
    max-width: 100%;
  }
  .inv-wrap {
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: center;
  }
  .inv-legend {
    font-size: 12px;
  }
  .inv-legend > div { gap: 8px; }
  .timer-stats { gap: 12px; font-size: 12px; }

  /* ── 3g. Math panel — collapse via :has / :target NOT possible without
        HTML edit. Instead, scrollable max-height + smaller font. ── */

  .card-math .math-table {
    font-size: 13px;
    display: block;
    max-height: 280px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .math-table td { padding: 6px 6px; }
  .math-table td.hint { display: none; } /* drop hint col on phone */

  /* ── 3h. Attribution donut — full width, vertical stack ───── */

  .attr-wrap {
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: center;
  }
  .attr-svg {
    max-width: 60vw;
    margin: 0 auto;
  }
  .attr-list {
    font-size: 13px;
    text-align: left;
  }
  .attr-list li {
    grid-template-columns: 14px 1fr auto;
    padding: 6px 0;
    min-height: 30px;
  }

  /* ── 3i. Heatmap — horizontal scroll if rungs spill ───────── */

  #heat-grid {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Force min cell width so it scrolls instead of squishing. */
    grid-template-columns: 28px repeat(5, minmax(48px, 1fr));
    grid-auto-flow: row;
    padding-bottom: 4px;
  }
  .heat-grid .cell { min-height: 40px; font-size: 12px; }

  /* ── 3j. Replays — full width, tappable rows ──────────────── */

  .replay-list {
    max-height: 50vh;
  }
  .replay-row {
    grid-template-columns: 64px 1fr 60px;
    grid-template-rows: auto auto;
    gap: 6px 10px;
    padding: 10px 12px;
    font-size: 12px;
    min-height: 56px;
  }
  .replay-row .spark {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 22px;
  }
  .replay-row .ts  { grid-column: 1; grid-row: 1; }
  .replay-row .meta{ grid-column: 2; grid-row: 1; }
  .replay-row .pnl { grid-column: 3; grid-row: 1; }

  /* ── 3k. Event tape — full-width, monospace stays ─────────── */

  .tape {
    height: 50vh;
    max-height: 360px;
    font-size: 12px;
    padding: 6px 8px;
  }
  .tape-row {
    grid-template-columns: 60px 60px 36px;
    grid-template-rows: auto auto;
    gap: 4px 8px;
    padding: 5px 0;
    font-size: 11px;
  }
  .tape-row .pnl  { grid-column: 1 / -1; grid-row: 2; text-align: left; }
  .tape-row .msg  { grid-column: 1 / -1; grid-row: 2; }
  /* Hide pnl OR msg per row — they're alternates on phone. */
  .tape-row .msg:not(:empty) ~ .pnl:empty { display: none; }

  /* ── 3l. Params — bigger inputs, touch-friendly ───────────── */

  .params-form {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .params-form input {
    min-height: 44px;
    font-size: 16px; /* iOS no-zoom */
    padding: 10px 12px;
  }
  .params-form .save-btn {
    grid-column: 1 / -1;
    min-height: 48px;
    font-size: 13px;
    padding: 14px 18px;
  }
  .params-form .hint {
    grid-column: 1 / -1;
    text-align: center;
  }

  /* ── 3m. Help button + popover — bigger hit area ──────────── */

  .help-btn {
    /* Visual stays small but hit area is 44×44 via padding box. */
    width: 32px;
    height: 32px;
    font-size: 16px;
    top: 8px;
    right: 8px;
  }
  /* Expand invisible hit area with a pseudo-element. */
  .help-btn::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
  }
  .help-pop {
    /* Full-width on phone, anchored to top of section. Owner prefers vertical
       growth over an inner scroll bar; the page itself scrolls. Cap is set
       below the viewport so we never clip a long help text mid-paragraph. */
    width: calc(100% - 16px);
    right: 8px;
    left: 8px;
    top: 48px;
    padding: 14px;
    font-size: 14px;
    max-height: calc(100vh - 96px);
    overflow-y: visible;
  }
  .help-pop .pop-close {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  /* ── 3n. Modal (kbd shortcuts, kill confirm) ──────────────── */

  .modal {
    padding: 18px;
    max-width: calc(100% - 24px);
    font-size: 14px;
  }
  .modal h3 { font-size: 18px; }
  .modal table { font-size: 13px; }
  .modal td { padding: 8px 0; }
  .modal td.k { width: 56px; }
  .kill-confirm-inner {
    padding: 22px 24px;
    max-width: calc(100% - 32px);
  }
  .kill-confirm-title { font-size: 18px; }
  .kill-confirm-bar { width: min(220px, 60vw); }

  /* ── 3o. Footer — stack vertically with safe area ─────────── */

  .foot {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    padding: 14px 12px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    font-size: 12px;
  }
  .foot a {
    display: inline-block;
    padding: 8px 4px;
    min-height: 36px;
  }

  /* ── 3p. Mobile FAB removed (2026-04-29) — owner said it didn't do anything.
     Hide the footer .kbd entirely on phone since it's now noise. */
  .foot .kbd {
    display: none !important;
  }
  /* Hide the inline footer `?` text helper since the FAB takes over. */
  .foot > div:first-child {
    /* Keep on phone but compact. */
    font-size: 11px;
  }

  /* ── 3q. Pill polish on phone — bigger, easier to tap if linked ── */

  .pill {
    min-height: 22px;
    padding: 4px 9px;
  }

  /* ── 3r. Clock pill — already hidden in 3b for hero, but if visible
        anywhere, keep it touch-sized. */
  .clock {
    min-height: 32px;
    padding: 6px 12px;
  }
}

/* ─── 4. ULTRA-NARROW (≤360px, e.g. iPhone SE 1st gen) ──────────── */

@media (max-width: 360px) {
  .app {
    padding: 6px;
    grid-template-columns: 1fr;
  }
  /* Inv + Timer back to stacking — too narrow to share a row. */
  .card-inv,
  .card-timer {
    grid-column: 1 / -1 !important;
  }
  .hero .pnl-num { font-size: 26px; }
  .params-form { grid-template-columns: 1fr; }
}

/* ─── 5. LANDSCAPE PHONE — short height, hide some chrome ──────── */

@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
  .hero { position: static; }   /* don't waste vertical space when sideways */
  .ladder-wrap { min-height: 240px; height: 50vh; }
  .tape { height: 200px; }
  .replay-list { max-height: 200px; }
}

/* ─── 6. LIGHT-THEME MOBILE TWEAKS ──────────────────────────────── */

@media (max-width: 480px) {
  [data-theme="light"] .section {
    /* Soften shadows further on small bright screens. */
    box-shadow: 0 1px 0 oklch(20% 0.01 270 / 0.03);
    /* Slightly stronger border to fight glare. */
    border-color: oklch(76% 0.008 80);
  }
  [data-theme="light"] .hero {
    box-shadow: 0 1px 0 oklch(20% 0.01 270 / 0.06);
  }
  /* TradingView blue + forest green: bump saturation on small screens
     where perceived saturation drops. */
  [data-theme="light"] .theme-toggle .tt-btn[aria-pressed="true"],
  [data-theme="light"] .lang-toggle .lt-btn[aria-pressed="true"] {
    background: oklch(52% 0.16 240);  /* was 0.12 chroma — bump to 0.16 */
  }
  [data-theme="light"] .pnl-headline[data-state="up"] .pnl-num,
  [data-theme="light"] .pill.live,
  [data-theme="light"] .pill.realism.honest,
  [data-theme="light"] .replay-row.win .pnl,
  [data-theme="light"] .tape-row .side.BID,
  [data-theme="light"] .tape-row .pnl.up {
    color: oklch(42% 0.18 145);   /* was 0.15 chroma — saturate green */
  }
  [data-theme="light"] .pnl-headline[data-state="down"] .pnl-num,
  [data-theme="light"] .replay-row.loss .pnl,
  [data-theme="light"] .tape-row .side.ASK,
  [data-theme="light"] .tape-row .pnl.down {
    color: oklch(48% 0.20 25);    /* was 0.18 chroma — saturate red */
  }
}

/* ─── 7. MOTION TRIM ON PHONE — snappier feel ──────────────────── */

@media (max-width: 480px) {
  /* Compress section cascade: ~40ms apart instead of 60ms.
     Existing scroll-driven reveal uses `animation-range`; we shorten
     it on phone so the transition feels snappier. */
  @supports (animation-timeline: view()) {
    .section {
      animation-range: cover 0% cover 14%;
    }
  }
  /* Also speed up hero pop-in style transitions a touch. */
  .modal { animation-duration: 220ms; }
  .help-pop { animation-duration: 160ms; }
}

/* Honor reduced-motion globally (already set in styles.css, reaffirm here
   so any new mobile transitions are also disabled). */
@media (prefers-reduced-motion: reduce) {
  .foot .kbd,
  .help-btn,
  .help-pop,
  .modal,
  .section {
    transition: none !important;
    animation: none !important;
  }
}

/* ─── 8. STANDALONE / iOS HOME-SCREEN APP MODE ─────────────────── */

@media (display-mode: standalone) {
  /* When added to home screen, no Safari chrome — hero needs full
     safe-area-top padding (the status bar overlaps the page). */
  .hero {
    padding-top: max(14px, calc(env(safe-area-inset-top) + 8px));
  }
  body {
    padding-top: 0;
  }
}

/* ─── 9. HIGH-DENSITY DISPLAY POLISH ───────────────────────────── */

@media (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  /* Crisper hairlines on retina — use 0.5px borders where it doesn't
     break readability. Only apply to dashed / decorative lines. */
  .math-table td,
  .replay-row,
  .tape-row {
    border-bottom-width: 0.5px;
  }
}

/* ─── 10. FOCUS-VISIBLE on touch — bigger ring ─────────────────── */

@media (max-width: 480px) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible {
    outline-width: 3px;
    outline-offset: 4px;
  }
}

/* ─── 11. POLISH PASS — new diagnostic / metrics / rung panels ─── */

@media (max-width: 768px) {
  /* New cards span all columns on tablet */
  .card-diag, .card-metrics, .card-rung { grid-column: 1 / -1 !important; }
}

@media (max-width: 480px) {
  /* Tighter grids on phone — 2 cells per row */
  .diag-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .diag-card {
    padding: 8px 10px;
    min-height: 64px;
  }
  .diag-card .diag-v { font-size: 15px; }
  .diag-card .diag-sub { font-size: 9px; }

  .metrics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .metric-card {
    padding: 8px 10px;
    min-height: 64px;
  }
  .metric-card .m-v { font-size: 14px; }
  .metric-card .m-sub { font-size: 9px; }
  .metric-card .wr-cell .val { font-size: 13px; }

  .rung-grid {
    grid-template-columns: 44px repeat(5, 1fr);
    gap: 4px;
    font-size: 10px;
  }
  .rung-grid .rcell { padding: 4px 5px; min-height: 30px; }
  .rung-grid .rcell .pnl { font-size: 11px; }

  /* Heat mode toggle: compact on phone */
  .heat-mode-toggle {
    top: 10px;
    right: 48px;
  }
  .heat-mode-toggle .hm-btn {
    padding: 3px 7px;
    min-height: 22px;
    font-size: 8px;
  }

  /* P&L timeframe toggle on phone — push below the bracket, full width */
  .pnl-tf-toggle {
    align-self: stretch;
    margin-top: 6px;
    width: 100%;
    justify-content: space-between;
    display: flex;
  }
  .pnl-tf-toggle .tf-btn {
    flex: 1 1 auto;
    padding: 8px 4px;
    font-size: 10px;
    min-height: 32px;
  }
  /* Ensure pnl headline content wraps cleanly */
  .hero .pnl-headline {
    flex-direction: column;
    align-items: stretch;
  }
  .hero .pnl-num { width: 100%; }
  .hero .pnl-bracket { width: 100%; }

  /* Window-roll banner on phone */
  .window-roll-banner {
    top: 64px;
    font-size: 11px;
    padding: 6px 14px;
    max-width: calc(100vw - 24px);
  }

  /* Settlement scatter / hist a touch shorter */
  .metric-card .m-scatter,
  .metric-card .m-hist {
    height: 50px;
  }

  /* Hide some less-essential diagnostic cards on ultra-narrow */
}

@media (max-width: 360px) {
  /* On iPhone SE-class screens, drop to 1 column for diag grids */
  .diag-grid, .metrics-grid {
    grid-template-columns: 1fr;
  }
  .rung-grid {
    grid-template-columns: 38px repeat(5, minmax(40px, 1fr));
  }
  .pnl-tf-toggle .tf-btn { font-size: 9px; padding: 4px 2px; }
}

/* ─── 12. POST-AUDIT FIXES (2026-04-29) ─────────────────────────── */
/*  Owner-driven mobile audit fixes. Order matters — these come AFTER
    earlier rules to override conflicting earlier mobile declarations
    (font-sizes, touch-target heights, tape grid template).            */



/* Hero swap is anchored in styles.css (mobile hero hidden by default).
   At/below 760px we flip visibility: mobile hero in, desktop hero out.
   Stylesheet itself only loads at ≤768px, so the rule is effectively
   guarded by the link's media query plus this nested condition.        */
@media (max-width: 760px) {
  /* Critical fix #1 — surface the mobile hero, hide the desktop one. */
  .hero-mobile  { display: block; }
  .hero-desktop { display: none; }

  /* Mobile hero — vertical stack, sticky like its desktop sibling. */
  .hero-m {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    padding-top: max(10px, calc(env(safe-area-inset-top) + 8px));
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--hero-bg);
    border: 1px solid var(--border);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    margin: calc(env(safe-area-inset-top) * -1) calc(env(safe-area-inset-left) * -1) 0
            calc(env(safe-area-inset-right) * -1);
  }
  .hero-m .brand-m {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 700 16px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.02em;
    color: var(--fg);
    text-decoration: none;
    min-height: 44px;
    padding: 6px 0;
  }
  .hero-m .brand-m .slash { color: var(--accent); }
  .hero-m .brand-m .mark {
    width: 10px; height: 10px; border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow, rgba(255,95,77,.5));
  }
  .hero-m-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .hero-m-row .pill { font-size: 11px; }
  .hero-m .kill-status-m {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-left: auto;
  }
  .hero-m .kill-status-m .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--alive, #00d27a);
  }
  .hero-m .kill-status-m[data-armed="false"] .dot { background: var(--accent); }
  .pnl-headline-m {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
  }
  .pnl-headline-m .pnl-num-m {
    font: 700 clamp(28px, 9vw, 36px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--fg);
  }
  .pnl-headline-m[data-state="up"]   .pnl-num-m { color: var(--alive, #00d27a); }
  .pnl-headline-m[data-state="down"] .pnl-num-m { color: var(--accent); }
  .pnl-headline-m .pnl-bracket-m {
    font: 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--fg-mute, #999);
  }
  .hero-m-toggles {
    display: grid;
    grid-template-columns: 3fr 2fr;     /* theme:lang ratio = 3:2 (matches button counts) */
    gap: 8px;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
  }
  .hero-m-toggles .theme-toggle-m,
  .hero-m-toggles .lang-toggle-m {
    display: grid;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 999px;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
  }
  .hero-m-toggles .theme-toggle-m {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hero-m-toggles .lang-toggle-m {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hero-m-toggles .tt-btn,
  .hero-m-toggles .lt-btn {
    min-width: 0 !important;
    min-height: 44px;
    padding: 10px 4px;
    font-size: 11px;
    background: transparent;
    color: var(--fg);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    text-align: center;
    width: 100%;
  }
  .hero-m-toggles .tt-btn[aria-pressed="true"],
  .hero-m-toggles .lt-btn[aria-pressed="true"] {
    background: var(--accent);
    color: var(--bg);
  }
}

@media (max-width: 480px) {

  /* Critical fix #2 — Event tape PNL/MSG no longer overlap.
     pnl moves to row 2 right column, msg gets its own row 3 spanning all.
     Override of styles-mobile.css §3k lines 388-398.                     */
  .tape-row {
    grid-template-columns: 60px 60px 36px 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 4px 8px;
  }
  .tape-row .ts   { grid-column: 1; grid-row: 1; }
  .tape-row .kind { grid-column: 2; grid-row: 1; }
  .tape-row .side { grid-column: 3; grid-row: 1; }
  .tape-row .pnl  {
    grid-column: 4 !important;
    grid-row: 1 !important;
    text-align: right !important;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }
  .tape-row .msg  {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    font-size: 11px;
    opacity: 0.78;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Drop the alternate-hide trick — both can render on different rows now. */
  .tape-row .msg:not(:empty) ~ .pnl:empty { display: revert; }

  /* Critical fix #3a — Heatmap mode toggle off the title (was absolute,
     overlapping section H2). Rendered inline below the heading.           */
  .card-heat { padding-top: 12px; }
  .card-heat h2 { padding-right: 48px; }
  .heat-mode-toggle {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin: 6px 0 10px;
    align-self: flex-start;
    display: inline-flex;
    gap: 4px;
  }
  .heat-mode-toggle .hm-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
    font-size: 11px;
  }

  /* Critical fix #3b — Heatmap + rung grids no longer cropped by FAB.
     FAB sits 16px from right at ~56px wide → reserve ~76px right gutter
     ON the scroll containers ONLY (so it doesn't stretch other cards).     */
  #heat-grid,
  .rung-grid {
    padding-right: 76px;
  }

  /* High fix #4 — Touch targets: every interactive control ≥44×44 px.     */
  .tt-btn,
  .lt-btn,
  .tf-btn,
  .hm-btn,
  .help-btn,
  .kbd,
  .pill button {
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
  }
  /* tf-btn and hm-btn previously set min-height 32/22. Force 44 here.     */
  .pnl-tf-toggle .tf-btn {
    min-height: 44px !important;
    padding: 10px 6px;
    font-size: 11px !important;
  }
  .heat-mode-toggle .hm-btn {
    min-height: 44px !important;
    padding: 10px 14px;
  }
  /* help-btn keeps its 32px visual disc but the 12px ::after halo extends
     hit area — bump halo to satisfy 44×44 truly.                          */
  .help-btn {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  .help-btn::after {
    inset: 0;
  }
  /* Brand needs a tappable height. */
  .hero .brand { min-height: 44px; padding: 6px 0; }
  /* Footer "← OPS" link bumped to 44 too. */
  .foot a { min-height: 44px; padding: 12px 8px; }
  /* <summary> rows should be full-row tappable. */
  .section details.mobile-collapsible > summary {
    min-height: 44px;
    padding: 8px 36px 8px 0;
  }

  /* High fix #5 — 11px floor on small mono labels (was 8-10px).            */
  .hero .market-tag { font-size: 11px !important; max-width: 100%; }
  .hero .pill,
  .pill {
    font-size: 11px !important;
    padding: 4px 9px;
  }
  .hero .bot-meta { font-size: 11px !important; }
  .hero .kill-status .lbl { font-size: 11px !important; }
  .ladder-meta,
  .inv-meta,
  .timer-meta,
  #ladder-meta,
  #inv-meta,
  #timer-meta { font-size: 11px; }
  .timer-stats .k,
  .inv-legend .k,
  .attr-list .k,
  .diag-card .diag-k,
  .metric-card .m-k { font-size: 12px !important; }
  .diag-card .diag-sub,
  .metric-card .m-sub { font-size: 11px !important; }
  .ladder-legend { font-size: 11px !important; }
  .kill-headroom { font-size: 11px !important; }
  .kh-lim,
  .kh-pct,
  .kh-room { font-size: 11px !important; }
  .fv-head,
  .fv-spark-card { font-size: 11px !important; }
  /* BTC price tile — match FV card sizing on phones so they balance side-by-side. */
  .btc-tile,
  .btc-head,
  .btc-sub { font-size: 11px !important; }
  .btc-tile .btc-head .v { font-size: 13px !important; }
  .pnl-tf-toggle .tf-btn { font-size: 11px !important; }
  .lang-toggle .lt-btn,
  .theme-toggle .tt-btn { font-size: 11px !important; }
  .heat-mode-toggle .hm-btn { font-size: 11px !important; }
  .rung-grid { font-size: 11px !important; }
  .rung-grid .rcell .pnl { font-size: 12px !important; }
  .heat-grid .cell { font-size: 11px !important; }

  /* High fix #6 — Footer "Press ? for shortcuts" orphan kill.
     The kbd `?` is hoisted into the FAB, leaving "Press   for shortcuts"
     in the footer copy. Hide the orphaned phrase on phone — the FAB
     itself is self-explanatory.                                            */
  .foot .footer-shortcut-hint { display: none; }
}

/* Span the wide-content WR drift card across both phone columns
   (audit item #11 polish). */
@media (max-width: 480px) {
  .metric-card:has(.wr-cell) { grid-column: 1 / -1; }
}