/*
 * responsive-duo.css — iPhone Duo (foldable) layer.
 *
 * Companion to css/responsive-tablet.css + css/tablet-screens.css (the iPad
 * layers). Ported from ~/badger-app 2bcce0ba (2026-09, "the open book is
 * LANDSCAPE") onto the disjoint device map of 2026-10-02.
 *
 * ── DESIGN: the open device is a BOOK, and a book is WIDE ────────────────────
 * The iPhone Duo is a book/passport fold: the folded cover is a portrait phone,
 * and unfolding reveals a SECOND page of equal size beside it — the open
 * canvas is WIDER THAN TALL (Apple: "passport-style shape, wider than it is
 * tall when open"). Ed (16827): "when the screen opens up I want it double
 * wide, people see more items — like opening a book." (16857): the spread is
 * LANDSCAPE, not the phone stood lengthwise.
 *
 *   • Unfolded (HERO)  890 × 626 CSS px, DPR 3 — two portrait half-pages side
 *     by side with a vertical centre spine: the two-page BOOK SPREAD.
 *   • Unfolded rotated 626 × 890 — the open device turned 90°: a tall
 *     "big-phone" READING layout (fills the width, one column, no spine).
 *   • Folded cover     466 × 678 — the phone layout, hardened for the short
 *     height (sheets capped to the screen; the shot timer's clock and START
 *     share a row above the fold).
 *   Apple has not published foldable safe-area insets, so every fixed element
 *   reads env(safe-area-inset-*), like the tablet layer.
 *
 * ── The spread & the spine ───────────────────────────────────────────────────
 * The shell drops its 480 cap and uses the whole ~890 width; lists lay out in
 * TWO real columns (~2× the items at a glance); a subtle centre "spine" —
 * catch-light hairline over a whisper of fold shadow, painted as the grid's
 * OWN background so it shows only in the column gap — sells the fold.
 * KIT → PACK is the on-camera hero: the whole packing list across two pages.
 * PLACES is list-page | map-page. The 626 height is short, so the vertical
 * chrome (header, appbars, search, segs, pack rows) is compressed so the pack
 * spread + dock fit without scrolling the hero.
 *
 * ── Device map (every layer DISJOINT — see css/responsive-tablet.css) ────────
 *   BOOK     (min-width: 820px) and (max-width: 1000.98px)
 *            and (min-height: 560px) and (max-height: 720.98px)
 *              ✓ 890×626   ✗ every iPad (portrait ≥721 tall, landscape ≥1001
 *              wide)   ✗ phone landscape 844×390 / 932×430 (<560 tall)
 *   READING  (min-width: 540px) and (max-width: 743.98px) and (min-height: 820px)
 *              ✓ 626×890   ✗ 390×844 / 430×932 (<540 wide)
 *              ✗ iPad mini 744×1133 (744 is the TABLET compact floor)
 *   FOLDED   (min-width: 440px) and (max-width: 520px) and (max-height: 760px)
 *              ✓ 466×678   ✗ 390×844 (<440)   ✗ 430×932 Pro Max (>760 tall)
 *   None of the three can match a phone, an iPad or each other; the TABLET
 *   query needs ≥744 wide AND ≥721 tall, or ≥1001 wide. Pinned by
 *   tests/tablet-duo-layers.test.js.
 *
 * ── Self-sufficient ─────────────────────────────────────────────────────────
 * The tablet layer does NOT apply in any Duo box, so each block below layers
 * only over the phone base. Load order: linked after css/tablet-screens.css.
 * css/style.css pins `.app { padding-bottom }` and `.fab { bottom }` with
 * !important; those two are answered with !important here, nothing else is
 * except the inline-display team mount (see TEAM). Tab-router contract
 * untouched: layout rearranges only within the active screen.
 */

/* =============================================================================
   UNFOLDED — 890 × 626: the two-page BOOK SPREAD (primary, the HERO)
   ========================================================================== */
@media (min-width: 820px) and (max-width: 1000.98px) and (min-height: 560px) and (max-height: 720.98px) {

  /* The book spine, reused as a two-page grid's OWN background so it paints
     only in the column gap and runs down the exact centre of any symmetric
     2-col grid. Mono catch-light + fold shadow, no accent colour. */
  .app {
    --duo-spine:
      linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.11) 50%, transparent calc(50% + 0.5px)),
      linear-gradient(90deg, transparent calc(50% - 17px), rgba(0, 0, 0, 0.30) 50%, transparent calc(50% + 17px));
  }

  /* ── Shell: the full-width spread ──────────────────────────────────────── */
  /* The floating dock is cleared by .content's own padding; style.css's 70px
     bar clearance on .app (!important) would only add dead space. */
  .app { max-width: none; padding-bottom: 0 !important; }
  .nav { max-width: none; }   /* legacy .nav — dead in the v0.84 shell */

  /* The sticky app header (BADGER · SUGGEST · ⚙) — trim its padding on the
     626 canvas, keep the 44px action targets. */
  .app .header {
    padding: 5px 18px;
    padding-top: calc(5px + env(safe-area-inset-top, 0px));
  }

  /* Bottom nav → a floating dock centred over the spread. */
  .app .bottom-nav {
    max-width: 520px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding: 6px 10px;
    gap: 4px;
    border: 1px solid var(--line2, rgba(255, 255, 255, 0.13));
    border-radius: 20px;
    background: var(--s1, #101214);
    background: color-mix(in srgb, var(--s1, #101214) 92%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 10px 28px rgba(0, 0, 0, 0.38);
  }
  .app .bottom-nav-item {
    min-height: 52px;
    padding: 6px 4px;
    gap: 3px;
    font-size: 10px;
    letter-spacing: 0.8px;
    border-radius: 14px;
    transition: color 0.15s, background-color 0.15s;
  }
  .app .bottom-nav-item .bi { width: 23px; height: 23px; }
  .app .bottom-nav-item:hover { color: var(--ink, #c7cacc); background: var(--s2, #15171a); }
  .app .bottom-nav-item.active {
    color: var(--ink-hi, #f4f5f5);
    background: var(--s3, #1b1e22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  /* Clear the dock; let the document be the scroll container so the KIT
     master-detail rail can position:sticky. */
  .app .content { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .app .screen { overflow-y: visible; }
  .app .content { overflow-y: visible; }

  /* FAB: rides beside the dock in the same floating bottom row (the dock is
     ≤520 wide and centred, so the corner is free at every book width). */
  .app .fab {
    width: 54px;
    height: 54px;
    right: calc(20px + env(safe-area-inset-right, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Modals: centred card, capped for the short height. */
  .modal-overlay { align-items: center; }
  .modal { max-width: 620px; border-radius: var(--r-lg, 18px); max-height: 88vh; }

  .subscreen { padding-left: 22px; padding-right: 22px; }

  /* ── HOME — four columns: the 8 first-launch widgets span [1,2,1,1,1,2,2,2]
     (12 units) → exactly three full rows, no holes; dense flow backfills
     user-customised sets. ───────────────────────────────────────────────── */
  .widget-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: 12px;
    padding: 14px 22px 24px;
  }
  #screen-home .topbar { padding: 12px 22px; }
  .home-toolbar { padding-left: 22px; padding-right: 22px; }
  .add-widget-btn { display: block; max-width: 420px; margin-left: auto; margin-right: auto; }
  #screen-home .scroll-area { padding-bottom: 8px; }

  /* ── KIT — breathing room, full-width controls, vertical chrome trimmed so
     the PACK hero fits the 626 canvas ───────────────────────────────────── */
  .kit-appbar-v2 { padding: 6px 22px; }
  .kit-shell .kit-search-v2 { max-width: none; margin: 0 22px 6px; width: auto; }
  .kit-shell .segs { max-width: none; margin: 0 22px 6px; width: auto; }
  .kit-loadouts-wrap,
  .kit-gear-wrap,
  .kit-pack-wrap { padding: 8px 22px 14px; }
  .kit-gear-host .search-wrap { margin-left: 0; margin-right: 0; max-width: none; }
  .kit-gear-host #item-list { padding-left: 0; padding-right: 0; }
  .kit-gear-views { padding-left: 0; padding-right: 0; }
  .kit-loadouts-fab-row, .kit-gear-fab-row { padding: 6px 0 0; }
  .kit-subtab-body[data-kit-mount="shared"] { max-width: 560px; margin-left: auto; margin-right: auto; width: 100%; }

  /* LOADOUTS — two pages of loadout cards (only while the list holds cards;
     an open loadout paints its item rows into the same container).
     js/drag-reorder.js hit-tests in 2-D, so a drag lands where the finger is. */
  #screen-kit .kit-loadouts-wrap:not([data-kit-view="detail"]) .loadout-list:has(> .lcard) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 34px;
    row-gap: 10px;
    align-items: stretch;
    background: var(--duo-spine);
  }
  #screen-kit .loadout-list:has(> .lcard) > .lcard { margin: 0; }
  #screen-kit .loadout-list:has(> .lcard) > :not(.lcard) { grid-column: 1 / -1; }
  /* Names get two lines, not an ellipsis, at half-page / rail width. */
  #screen-kit .loadout-list:has(> .lcard) .lname,
  #screen-kit .kit-md-rail .lname {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* GEAR (items) — two pages of the catalogue. */
  #screen-kit .kit-gear-host #item-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 34px;
    row-gap: 4px;
    align-items: start;
    background: var(--duo-spine);
  }
  #screen-kit .kit-gear-host #item-list > :only-child { grid-column: 1 / -1; }

  /* ═════════════════════════════════════════════════════════════════════════
     KIT → PACK — the on-camera HERO, as a two-page book spread: the WHOLE
     packing list across two columns with a centre spine. Header + progress
     span the spread as the running head; the item grid is the two pages.
     ═════════════════════════════════════════════════════════════════════════ */
  .kit-pack-wrap { max-width: none; }
  #screen-kit .kit-pack-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 2px 6px;
  }
  #screen-kit #pack-title {
    font-family: var(--font-display, 'Barlow Condensed', 'Inter', sans-serif);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.05;
    color: var(--ink-hi, #f4f5f5);
    text-transform: uppercase;
  }
  #screen-kit .pack-count {
    font-family: var(--font-display, 'Barlow Condensed', 'Inter', sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mid, #8a8f93);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  /* The olive fill itself is the base rule in css/kit-v2.css (every device). */
  #screen-kit .pack-progress-track { height: 8px; margin: 0 2px 8px; }

  /* The two pages: ~408px per column; tight row gap so four rows clear the
     dock in the short canvas. */
  #screen-kit .pack-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 34px;
    row-gap: 6px;
    align-items: start;
    background: var(--duo-spine);
  }
  /* Picker copy, RESET ALL and the empty state span both pages. */
  #screen-kit .pack-items > :not(.pack-item):not(.card) { grid-column: 1 / -1; }
  #screen-kit .pack-items > .pack-item,
  #screen-kit .pack-items > .card { margin: 0; }
  #screen-kit .pack-item-row {
    padding: 8px 12px;
    gap: 11px;
    border-radius: var(--r-md, 12px);
    background: var(--s2, #15171a);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.06));
  }
  /* A prominent 42px product photo for the camera; the checkbox stays a clear
     32px marker (the whole row is the toggle target). */
  #screen-kit .pack-item-row .item-photo { width: 42px; height: 42px; border-radius: 8px; }
  #screen-kit .pack-item-row .checkbox { width: 32px; height: 32px; border-radius: 9px; }
  #screen-kit .pack-item-row .checkbox.checked {
    background: var(--olive, #a4ae90);
    border-color: var(--olive, #a4ae90);
  }
  #screen-kit .pack-item-row .checkbox.checked::after { color: #0a0b0d; }
  #screen-kit .pack-item-row .item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-hi, #f4f5f5);
    line-height: 1.2;
  }
  #screen-kit .pack-item-row .item-category {
    font-size: 10.5px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-mid, #8a8f93);
    margin-top: 2px;
  }

  /* ═════════════════════════════════════════════════════════════════════════
     KIT → an OPEN LOADOUT: master-detail across the spine. js/tablet-kit.js
     surfaces the loadout list as a rail (page 1); the open loadout is page 2.
     ═════════════════════════════════════════════════════════════════════════ */
  #screen-kit .kit-loadouts-wrap[data-kit-view="detail"] {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    column-gap: 0;
    align-items: start;
    padding: 10px 22px 20px;
  }
  #screen-kit .kit-loadouts-wrap[data-kit-view="detail"] > [data-role="kit-active-hero-slot"],
  #screen-kit .kit-loadouts-wrap[data-kit-view="detail"] > .kit-sect-v2 { display: none; }
  #screen-kit .kit-loadouts-wrap[data-kit-view="detail"] > :not([data-role="kit-active-hero-slot"]):not(.kit-md-rail):not(.kit-sect-v2) {
    grid-column: 2;
    padding-left: 24px;
  }
  #screen-kit .kit-loadouts-wrap[data-kit-view="detail"] .loadout-list { max-width: none; margin-left: 0; }
  #screen-kit .kit-loadouts-wrap[data-kit-view="detail"] > .kit-md-rail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    grid-column: 1;
    grid-row: 1 / span 4;
    position: sticky;
    top: 10px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    padding: 2px 24px 2px 2px;
    border-right: 1px solid var(--line2, rgba(255, 255, 255, 0.13));
    scrollbar-width: thin;
  }
  #screen-kit .kit-md-rail .kit-md-back {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    background: var(--s1, #101214);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.06));
    border-radius: 12px;
    color: var(--ink-mid, #8a8f93);
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  #screen-kit .kit-md-rail .kit-md-back:hover { background: var(--s2, #15171a); color: var(--ink-hi, #f4f5f5); }
  #screen-kit .kit-md-rail .kit-md-rail-list { display: flex; flex-direction: column; gap: 8px; }
  #screen-kit .kit-md-rail .lcard { margin: 0; width: 100%; }
  #screen-kit .kit-md-rail .lcard .loadout-drag-handle,
  #screen-kit .kit-md-rail .lcard .lchev { display: none; }
  #screen-kit .kit-md-rail .lcard[aria-current="true"] {
    border-color: var(--olive, #a4ae90);
    background: var(--olive-dim, rgba(164, 174, 144, 0.13));
  }

  /* ── PLACES — list page | map page. The screen is bounded to the viewport
     so the venue list scrolls on its own page while the map holds the other.
     Grid-in-grid (not grid-in-flex) so the map row gets a definite height. ── */
  body:has(#content > .screen.active#screen-places) .app {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
  }
  .app .content:has(> #screen-places.active) {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  }
  .app .content > #screen-places.active { flex: 1 1 0%; min-height: 0; overflow: hidden; }
  .places-appbar-v2 { padding: 6px 22px; }
  #screen-places .places-shell-v2 {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }
  #screen-places .places-scroll-v2 {
    min-height: 0;
    padding: 0 22px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    column-gap: 34px;
    overflow: hidden;
  }
  #screen-places .places-search-v2 { grid-column: 1; grid-row: 1; }
  #screen-places .places-chips-v2 { grid-column: 1; grid-row: 2; }
  #screen-places .places-sect-v2 { grid-column: 1; grid-row: 3; }
  #screen-places .places-view {
    grid-column: 1;
    grid-row: 4;
    min-height: 0;
    overflow-y: auto;
    padding: 0 4px 12px 0;
    scrollbar-width: thin;
  }
  #screen-places .places-map-v2 {
    grid-column: 2;
    grid-row: 1 / 5;
    height: auto;
    min-height: 0;
    margin-bottom: 0;
  }

  /* ── TEAM — full width; SQUAD + ROSTER become two-page spreads ───────────── */
  #screen-team .team-appbar-v2 { padding: 8px 22px 10px; }
  #screen-team .team-segs-v2 { margin: 4px 22px 10px; }
  /* SQUAD composed home: NEXT OP spans, then CHAT + ROSTER previews side by
     side. team.js shows a mount with an INLINE display:block; the [style*=…]
     guard keeps the !important from ever resurrecting a hidden mount. */
  #screen-team [data-subtab-mount="squad"][style*="display: block"],
  #screen-team [data-subtab-mount="squad"][style*="display:block"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 34px;
    align-items: start;
    background: var(--duo-spine);
  }
  #screen-team [data-subtab-mount="squad"] > .team-squad-section:first-child,
  #screen-team [data-subtab-mount="squad"] > .team-squad-empty,
  #screen-team [data-subtab-mount="squad"] > .team-squad-loading { grid-column: 1 / -1; }
  /* ROSTER: two pages of members. */
  #screen-team .roster-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 34px;
    row-gap: 8px;
    align-items: start;
    background: var(--duo-spine);
  }
  #screen-team .roster-list > :only-child { grid-column: 1 / -1; }
  #screen-team .team-subtab-mount:not([data-subtab-mount="chat"]) { padding-left: 22px; padding-right: 22px; }
  /* Chat is one conversation — a bounded panel, centred, composer pinned. It
     ends above the floating dock: the mount starts ~200px down, the dock's
     top edge is 78px off the bottom, and the canvas keeps 96px of dock
     clearance — 100vh − 300px lands the composer ~20px clear of the dock
     with no page scroll (626 tall: a 326px conversation). */
  #screen-team [data-subtab-mount="chat"] { height: calc(100vh - 300px); min-height: 220px; }
  #screen-team .team-chat-list,
  #screen-team .team-chat-composer { max-width: 640px; width: 100%; margin-left: auto; margin-right: auto; }
  #screen-team .team-empty-state { max-width: 520px; margin-left: auto; margin-right: auto; }

  /* ── TRAINING — the clock across two pages ─────────────────────────────────
     The phone stacks set-up, the time and START one under the other; in the
     626 canvas the clock fell below the fold. The book puts the set-up on
     the left page and the time + START pad on the right, under one strip of
     drill chips + the leaderboard pill. */
  .training-shell .subtabs { justify-content: center; }
  .training-shell .subtab { flex: 0 1 240px; padding: 8px 10px; font-size: 10.5px; }
  .training-timer-wrap { max-width: none; }
  #screen-training .training-top-row { flex-direction: row; align-items: stretch; gap: 10px; margin-bottom: 10px; }
  #screen-training .training-drillrow { flex: 1 1 auto; min-width: 0; }
  /* The leaderboard pill keeps its rank + VIEW; the explainer line would
     squeeze the five drill chips off the strip. */
  #screen-training .training-rank { flex: 0 0 auto; }
  #screen-training .training-rank .rk-msg { display: none; }
  #screen-training .shottimer-v2-root { min-height: 0; }
  #screen-training .shottimer-v2-root .st-screen[data-st-screen="timer"].active {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    column-gap: 34px;
    row-gap: 0;
    align-content: start;
    min-height: 0;
    padding: 12px 16px 14px;
    background: var(--duo-spine);
  }
  /* left page: who is shooting, the loaded drill, mic state, the settings */
  #screen-training .st-screen[data-st-screen="timer"] > .st-shooter-row { grid-column: 1; grid-row: 1; }
  #screen-training .st-screen[data-st-screen="timer"] > .st-drill-banner { grid-column: 1; grid-row: 2; }
  #screen-training .st-screen[data-st-screen="timer"] > .st-mic-warning { grid-column: 1; grid-row: 3; }
  #screen-training .st-screen[data-st-screen="timer"] > .st-settings-panel { grid-column: 1; grid-row: 4 / 6; margin-bottom: 0; }
  /* right page: the time, then the START pad */
  #screen-training .st-screen[data-st-screen="timer"] > .st-timer-display {
    grid-column: 2;
    grid-row: 1 / 5;
    gap: 10px;
    justify-content: center;
  }
  #screen-training .st-screen[data-st-screen="timer"] > .st-big-tap-container {
    grid-column: 2;
    grid-row: 5;
    height: 150px;
    padding: 8px 0 0;
  }
  #screen-training .shottimer-v2-root .st-splits-container { max-height: 72px; }
  .training-subtab-body[data-training-mount="fpscalc"] {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding: 10px 16px 0;
  }
}

/* =============================================================================
   UNFOLDED ROTATED — 626 × 890: the "big-phone" READING layout (the open
   device turned 90°). NOT the book — fill the width so the 480 column isn't
   marooned, keep a floating dock, one comfortable column, no spine.
   ========================================================================== */
@media (min-width: 540px) and (max-width: 743.98px) and (min-height: 820px) {

  .app { max-width: none; padding-bottom: 0 !important; }
  .nav { max-width: none; }

  .app .bottom-nav {
    max-width: 420px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    padding: 8px 10px;
    gap: 4px;
    border: 1px solid var(--line2, rgba(255, 255, 255, 0.13));
    border-radius: 22px;
    background: var(--s1, #101214);
    background: color-mix(in srgb, var(--s1, #101214) 92%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 10px 28px rgba(0, 0, 0, 0.38);
  }
  .app .bottom-nav-item {
    min-height: 52px;
    padding: 8px 4px;
    gap: 4px;
    font-size: 10px;
    letter-spacing: 0.8px;
    border-radius: 14px;
    transition: color 0.15s, background-color 0.15s;
  }
  .app .bottom-nav-item .bi { width: 24px; height: 24px; }
  .app .bottom-nav-item:hover { color: var(--ink, #c7cacc); background: var(--s2, #15171a); }
  .app .bottom-nav-item.active {
    color: var(--ink-hi, #f4f5f5);
    background: var(--s3, #1b1e22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .app .content { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }

  /* FAB: in the dock's row, beside it at the viewport edge (as in the book).
     Floating above the dock it sat on the content's right edge — on Team
     chat it covered SEND. The 420px dock leaves it a 27px gap at 626 wide;
     bottom 23px centres the 56px button on the 74px dock. */
  .app .fab {
    width: 56px;
    height: 56px;
    right: calc(20px + env(safe-area-inset-right, 0px));
    bottom: calc(23px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .modal-overlay { align-items: center; }
  .modal { max-width: 560px; border-radius: var(--r-lg, 18px); max-height: 84vh; }

  .subscreen { padding-left: 20px; padding-right: 20px; }

  /* One comfortable reading column: cap the main surfaces and centre them so
     full-width cards don't stretch into banners. */
  #screen-home .topbar { padding: 14px 24px; }
  .home-toolbar { padding-left: 24px; padding-right: 24px; }
  .kit-appbar-v2 { padding: 12px 24px; }
  .kit-shell .kit-search-v2 { max-width: 600px; margin: 0 auto 14px; width: auto; }
  .kit-shell .segs { max-width: 600px; margin: 0 auto 12px; width: auto; }
  .kit-loadouts-wrap,
  .kit-gear-wrap,
  .kit-pack-wrap { padding: 12px 24px 20px; max-width: 640px; margin-left: auto; margin-right: auto; }
  .loadout-list { max-width: 600px; margin-left: auto; margin-right: auto; }
  .places-appbar-v2 { padding: 12px 24px; }
  .places-scroll-v2 { padding: 0 24px 140px; }
  .places-search-v2 { max-width: 600px; margin-left: auto; margin-right: auto; }
  #screen-team .team-subtab-mount { max-width: 640px; margin-left: auto; margin-right: auto; width: 100%; }
  /* Chat: a bounded conversation whose composer sits clear of the dock (the
     mount starts ~211px down; dock top is 88px off the bottom; the canvas
     keeps 110px of dock clearance — 100vh − 322px means no page scroll). */
  #screen-team [data-subtab-mount="chat"] { height: calc(100vh - 322px); min-height: 360px; }
  .training-timer-wrap { max-width: 600px; margin-left: auto; margin-right: auto; }
  /* TRAINING — the time and the START pad lead. The phone stacks the set-up
     above the clock; in this canvas that left START under the dock on first
     view. Shooter, loaded drill and mic notice stay on top; the set-up
     (mode, start mode, sensitivity) follows the START pad. */
  #screen-training .st-screen[data-st-screen="timer"] > .st-timer-display { order: 1; }
  #screen-training .st-screen[data-st-screen="timer"] > .st-big-tap-container { order: 2; }
  #screen-training .st-screen[data-st-screen="timer"] > .st-settings-panel { order: 3; margin: 4px 0 0; }

  /* KIT → PACK: the on-brand header over the (base) olive progress pill, one
     column — this is the reading orientation, not the book. */
  #screen-kit #pack-title {
    font-family: var(--font-display, 'Barlow Condensed', 'Inter', sans-serif);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--ink-hi, #f4f5f5);
    text-transform: uppercase;
  }
  #screen-kit .pack-count {
    font-family: var(--font-display, 'Barlow Condensed', 'Inter', sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mid, #8a8f93);
    font-variant-numeric: tabular-nums;
  }
  #screen-kit .pack-progress-track { height: 9px; margin: 0 2px 14px; }
}

/* =============================================================================
   FOLDED — 466 × 678 cover screen. The phone layout already fills 466 (< the
   480 shell cap) and the fixed nav + .content padding already clear each
   other, so KEEP the phone layout and only harden the SHORT height.
   ========================================================================== */
@media (min-width: 440px) and (max-width: 520px) and (max-height: 760px) {
  .modal { max-height: calc(100vh - 24px); }
  .modal-overlay { align-items: flex-end; }
  .app .content { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

  /* TRAINING — the clock and START above the fold, side by side. In the
     phone's order the set-up (mode, start mode, sensitivity) sits over the
     clock, then the clock, then a 180px START pad: on the 678px cover screen
     START began at y 774, off the screen (642 with a drill loaded, under the
     tab bar), so every run started with a scroll. The cover is wider than a
     phone and much shorter, so the time and START share one row straight
     under the shooter row (and a loaded drill), and the set-up follows.
     START is top-aligned in that row, so a run's splits grow down the clock's
     column and START stays where the thumb is; the row ends above the FAB's
     top edge even with a drill banner showing. Only the ACTIVE sub-screen is
     laid out, so the Drills / History / Export tabs switch as on the phone. */
  #screen-training .shottimer-v2-root .st-screen.active[data-st-screen="timer"] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    column-gap: 12px;
    align-content: start;
    align-items: start;
  }
  #screen-training .st-screen[data-st-screen="timer"] > * { grid-column: 1 / -1; }
  #screen-training .st-screen[data-st-screen="timer"] > .st-timer-display { grid-column: 1; order: 1; gap: 6px; }
  #screen-training .st-screen[data-st-screen="timer"] > .st-big-tap-container { grid-column: 2; order: 1; height: 88px; padding: 0; }
  /* A blocked-mic notice lands under the row it explains, so START never moves */
  #screen-training .st-screen[data-st-screen="timer"] > .st-mic-warning { order: 2; margin: 12px 0 0; }
  #screen-training .st-screen[data-st-screen="timer"] > .st-settings-panel { order: 3; margin: 14px 0 0; }
  #screen-training .st-screen[data-st-screen="timer"] > .st-drill-banner { padding: 10px 14px; gap: 6px; margin-bottom: 8px; }
  /* "0.000" is ~2.46em: 56px keeps a 99.999 s run inside its ~190px column */
  #screen-training .shottimer-v2-root .st-timer-main { font-size: 56px; }
  #screen-training .shottimer-v2-root .st-splits-container { max-height: 84px; }

  /* TEAM chat — one bounded conversation with its composer on screen. The
     phone stacks the whole thread above the composer, which on the cover put
     the composer at y 783, off the 678px screen. Bounded like the rotated
     layout: the mount starts 211px down, and ends 8px above the FAB (fixed
     80px + inset off the bottom, 52px tall) so the FAB never covers SEND. */
  #screen-team [data-subtab-mount="chat"] {
    height: calc(100vh - 351px - env(safe-area-inset-bottom, 0px));
    min-height: 240px;
  }
}