/*
 * tablet-screens.css — what each screen looks like on an iPad.
 *
 * Companion to css/responsive-tablet.css (the shell: nav rail, full-bleed
 * canvas, FAB, modals). This file owns the inside of the five screens. The
 * rule (Ed, 2026-08-26): what the phone shows one-after-another, the iPad
 * shows side by side — panes that own the canvas, never a stretched phone.
 *
 *   TABLET compact  744–1000 wide, ≥721 tall  (iPad portrait: mini, 11")
 *   TABLET wide     ≥1001 wide, ≥501 tall     (iPad landscape, 13" portrait)
 *     + landscape   the wide tier in landscape (every iPad landscape, desktop
 *                   windows) — only the cockpit's two-page clock uses it
 *   Both tiers are disjoint from the phone and from every iPhone Duo box —
 *   see the device map at the top of css/responsive-tablet.css.
 *
 *   HOME      widget mosaic — 2 columns (compact) / 4 (wide), tiles sized
 *             from the viewport height so the mosaic owns the canvas
 *   KIT       loadout cards in 280px+ columns beside a pinned ACTIVE LOADOUT
 *             hero (wide) / under it (compact); an open loadout keeps the
 *             loadout list as a rail beside it (wide, js/tablet-kit.js);
 *             items catalogue in 380px+ columns (one on a portrait 11"/mini,
 *             two or three in landscape); PACK checklist as a full-width
 *             grid under a real progress header
 *   TRAINING  range cockpit — the timer beside (wide) / above (compact) the
 *             live run History and the Drill Library, always visible; in
 *             landscape the timer pane is a two-page clock (set-up | time +
 *             START) so START never drops below a short pane
 *   PLACES    browse column beside a full-height map (wide) / map over a
 *             two-up venue grid (compact)
 *   TEAM      squad board — Squad | Events | Chat side by side (wide,
 *             js/tablet-panes.js renders the extra panes); squad composed
 *             two-up (compact)
 *
 * Specificity: matches the `#screen-*` selectors team-v2.css / home-v2.css /
 * kit-v2.css use (same-or-higher specificity + later load = this file wins).
 * Drag-reorder: the loadout list is two-up only while it holds loadout cards
 * (`:has(> .lcard)`); js/drag-reorder.js hit-tests in 2-D so dropping onto
 * the right-hand column lands where the finger is. Rows INSIDE an open
 * loadout and inside each items category stay a vertical list.
 * Tab-router contract untouched: exactly one `.screen.active`.
 */

/* =============================================================================
   Base (all widths): ONLY the rail js/tablet-kit.js inserts — default hidden.
   tablet-kit.js inserts nothing outside the layouts that show it, so phones
   never carry the node at all; this is the belt to that braces.
   ========================================================================== */
.kit-md-rail { display: none; }

/* =============================================================================
   TABLET (compact + wide)
   ========================================================================== */
@media (min-width: 1001px) and (min-height: 501px), (min-width: 744px) and (min-height: 721px) {

  /* ── HOME — widget mosaic ──────────────────────────────────────────────── */
  #screen-home { border-radius: var(--r-lg, 18px); overflow: hidden; }
  #screen-home .topbar { padding: 14px 22px; }
  .home-toolbar { padding-left: 22px; padding-right: 22px; }
  /* The first-launch widgets span [1,2,1,1,1,2,2,2] = 12 units: 2 columns
     (compact) or 4 (wide) tile them with no holes — 3 columns strands a hole
     beside every 2-wide tile. Dense flow backfills user-customised sets.
     Tile heights follow the viewport so the mosaic owns the canvas instead
     of sitting in a strip at the top of it. */
  .widget-grid {
    --home-tile: clamp(120px, 12vh, 160px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: 14px;
    padding: 18px 22px 24px;
  }
  .widget-grid .widget[data-h="1"] { min-height: var(--home-tile); }
  .widget-grid .widget[data-h="2"] { min-height: calc(2 * var(--home-tile) + 14px); }
  .widget-grid .widget[data-h="3"] { min-height: calc(3 * var(--home-tile) + 28px); }
  .add-widget-btn { display: block; max-width: 420px; margin-left: auto; margin-right: auto; }
  #screen-home .scroll-area { padding-bottom: 8px; }

  /* ── KIT — shell ────────────────────────────────────────────────────────── */
  /* LOADOUTS list: a grid of cards — two-up on a portrait iPad, as many
     280px+ columns as the space beside the ACTIVE LOADOUT hero takes on the
     wide tier (only while the list holds cards — an open loadout paints its
     item rows into the same container). Names get two lines, not an
     ellipsis, at card width. */
  #screen-kit .loadout-list:has(> .lcard) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    align-items: stretch;
  }
  #screen-kit .loadout-list:has(> .lcard) > .lcard { margin: 0; }
  #screen-kit .loadout-list:has(> .lcard) > :not(.lcard) { grid-column: 1 / -1; }
  #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;
  }

  /* ITEMS: category groups side by side once a column can hold a whole row —
     reorder handle + icon + name + edit + add take ~230px before the name
     gets any, so a column is 380px+: one on a portrait mini / 11" (a forced
     two-up cut every name to three letters), two or three in landscape.
     Rows stay vertical inside each group, so the per-category drag-reorder
     is untouched. */
  #screen-kit .kit-gear-host #item-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 4px 28px;
    align-items: start;
  }
  #screen-kit .kit-gear-host #item-list > :only-child { grid-column: 1 / -1; }

  /* SHARED (an empty-state card) stays a card, not a banner. */
  .kit-subtab-body[data-kit-mount="shared"] { max-width: 640px; margin-left: auto; margin-right: auto; width: 100%; }

  /* ── KIT → PACK — the checklist owns the canvas ─────────────────────────── */
  #screen-kit .kit-pack-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 6px 2px 10px;
  }
  #screen-kit #pack-title {
    font-family: var(--font-display, 'Barlow Condensed', 'Inter', sans-serif);
    font-size: 26px;
    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: 15px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--ink-mid, #8a8f93);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  #screen-kit .pack-progress-track { height: 10px; margin: 0 2px 18px; }
  #screen-kit .pack-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px 16px;
    align-items: start;
  }
  /* Picker copy / RESET ALL / empty state span the row; cards flow. */
  #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-items > .mt-16 { margin-top: 8px; max-width: 420px; justify-self: center; width: 100%; }
  #screen-kit .pack-item-row {
    padding: 12px 14px;
    border-radius: var(--r-md, 12px);
    background: var(--s2, #15171a);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.06));
  }
  #screen-kit .pack-item-row .item-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-hi, #f4f5f5);
  }
  #screen-kit .pack-item-row .item-category {
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-mid, #8a8f93);
    margin-top: 2px;
  }

  /* ── TRAINING — shell ───────────────────────────────────────────────────── */
  .training-shell .subtabs { justify-content: center; }
  .training-shell .subtab { flex: 0 1 260px; padding: 12px; font-size: 10.5px; }
  .training-subtab-body[data-training-mount="fpscalc"] {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  /* ── PLACES — venue grid ────────────────────────────────────────────────── */
  .places-list-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .places-list-cards > :only-child { grid-column: 1 / -1; }
  #screen-places .places-scroll-v2 { padding-bottom: 28px; }

  /* ── TEAM — shell ───────────────────────────────────────────────────────── */
  #screen-team .team-empty-state {
    max-width: 560px;
    margin: 28px auto 0;
    border: 1px solid var(--line, rgba(255, 255, 255, 0.06));
    border-radius: var(--r-lg, 18px);
    padding: 32px 28px;
  }
}

/* =============================================================================
   TABLET compact (744–1000 × ≥721) — iPad portrait
   ========================================================================== */
@media (min-width: 744px) and (max-width: 1000.98px) and (min-height: 721px) {

  /* KIT: the ACTIVE LOADOUT hero spans the top; loadouts two-up beneath. */

  /* TRAINING — portrait cockpit: the timer on top, then History | Drills as
     two always-visible panes underneath (the phone visits them in turn). */
  #screen-training .training-timer-host.hidden { display: block !important; }
  #screen-training .shottimer-v2-root {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto minmax(320px, auto);
    column-gap: 0;
    height: auto;
    overflow: visible;
  }
  #screen-training .shottimer-v2-root .st-nav-bar { grid-column: 1 / -1; grid-row: 1; }
  #screen-training .shottimer-v2-root .st-screen-container { display: contents; }
  #screen-training .shottimer-v2-root .st-screen[data-st-screen="timer"] {
    display: flex !important;
    flex-direction: column;
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 0;
    padding: 16px 20px 20px;
  }
  #screen-training .shottimer-v2-root .st-screen[data-st-screen="history"],
  #screen-training .shottimer-v2-root .st-screen[data-st-screen="drills"] {
    display: flex !important;
    flex-direction: column;
    grid-row: 3;
    min-height: 0;
    max-height: 560px;
    overflow-y: auto;
    padding: 14px 16px 16px;
    border-top: 1px solid var(--st-border, #2a2a2a);
  }
  #screen-training .shottimer-v2-root .st-screen[data-st-screen="history"] { grid-column: 1; }
  #screen-training .shottimer-v2-root .st-screen[data-st-screen="drills"] {
    grid-column: 2;
    border-left: 1px solid var(--st-border, #2a2a2a);
  }
  #screen-training .shottimer-v2-root .st-screen[data-st-screen="export"] {
    grid-column: 1 / -1;
    grid-row: 3;
    position: relative;
    z-index: 3;
    background: var(--st-bg-primary, #0a0a0a);
  }
  #screen-training .shottimer-v2-root .st-screen[data-st-screen="drills"]::before,
  #screen-training .shottimer-v2-root .st-screen[data-st-screen="history"]::before {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--ink-mid, #8a8f93);
  }
  #screen-training .shottimer-v2-root .st-screen[data-st-screen="drills"]::before { content: 'DRILL LIBRARY'; }
  #screen-training .shottimer-v2-root .st-screen[data-st-screen="history"]::before { content: 'RECENT RUNS'; }
  /* The Timer / Drills / History tabs only switch what is already on screen;
     Export still opens over the two lower panes. */
  #screen-training .training-drillrow { display: none; }

  /* PLACES — a taller map over the two-up venue grid. */
  #screen-places .places-map-v2 { height: min(42vh, 480px); }

  /* TEAM — squad composed two-up: NEXT OP spans, chat + roster 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: 20px;
    align-items: start;
  }
  #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; }
  #screen-team .roster-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
    align-items: start;
  }
  #screen-team .roster-list > :only-child { grid-column: 1 / -1; }
  /* Chat: one conversation — bounded panel, composer pinned. */
  #screen-team [data-subtab-mount="chat"] { height: calc(100vh - 260px); min-height: 420px; }
}

/* =============================================================================
   TABLET wide (≥1001 × ≥501) — iPad landscape, iPad 13" portrait, desktop
   ========================================================================== */
@media (min-width: 1001px) and (min-height: 501px) {

  /* ── HOME — four columns (exactly three full rows for the first-launch set),
     tiles sized off the viewport height ─────────────────────────────────── */
  .widget-grid {
    --home-tile: clamp(150px, 22vh, 240px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding: 20px 24px 28px;
  }
  .widget-grid .widget[data-h="2"] { min-height: calc(2 * var(--home-tile) + 16px); }
  .widget-grid .widget[data-h="3"] { min-height: calc(3 * var(--home-tile) + 32px); }

  /* ── KIT — armoury wall: ACTIVE LOADOUT hero pinned left, loadouts right ── */
  #screen-kit .kit-loadouts-wrap {
    display: grid;
    grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
  }
  #screen-kit .kit-loadouts-wrap > [data-role="kit-active-hero-slot"] {
    grid-column: 1;
    grid-row: 1 / span 4;
    position: sticky;
    top: 16px;
  }
  #screen-kit .kit-loadouts-wrap > :not([data-role="kit-active-hero-slot"]):not(.kit-md-rail) { grid-column: 2; }
  #screen-kit .kit-loadouts-wrap > .kit-sect-v2 { margin-top: 0; }
  /* No hero (zero loadouts / first paint) → one column, no ghost column. */
  #screen-kit .kit-loadouts-wrap:not([data-kit-view="detail"]):has(> [data-role="kit-active-hero-slot"][hidden]) {
    grid-template-columns: 0 minmax(0, 1fr);
    column-gap: 0;
  }
  /* The page scrolls, so the pinned hero needs the scroll containers out of
     its way (clipping was never load-bearing: modals/FAB/rail are fixed). */
  .app .screen#screen-kit { overflow-y: visible; }
  .app .content:has(> #screen-kit.active) { overflow-y: visible; }

  /* An OPEN loadout: the loadout cards stay beside it as a rail (iPad-Mail
     master-detail, js/tablet-kit.js clones them), the item list on the right. */
  #screen-kit .kit-loadouts-wrap[data-kit-view="detail"] {
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  }
  #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"] > .kit-md-rail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    grid-column: 1;
    grid-row: 1 / span 4;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding: 2px;
    scrollbar-width: thin;
  }
  #screen-kit .kit-loadouts-wrap[data-kit-view="detail"] .loadout-list { max-width: 820px; }
  #screen-kit .kit-md-rail .kit-md-back {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 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));
  }

  /* ── PANE SCREENS: Training, Places, Team are bounded to the viewport so each
     pane scrolls on its own instead of the page growing ─────────────────── */
  body:has(#content > .screen.active:is(#screen-training, #screen-places, #screen-team)) .app {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
  }
  .app .content:has(> .screen.active:is(#screen-training, #screen-places, #screen-team)) {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .app .content > .screen.active:is(#screen-training, #screen-places, #screen-team) {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
  }

  /* ── TRAINING — the range cockpit ─────────────────────────────────────────
     Timer hero on the left, full height; RECENT RUNS above the DRILL LIBRARY
     on the right; the team-leaderboard strip along the bottom. Export stays
     behind its nav item and opens over the right column. Same component DOM,
     recomposed — no duplicated state. */
  #screen-training .training-shell { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  #screen-training .training-shell > .subtabs { flex: none; }
  #screen-training .training-subtab-bodies { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  #screen-training .training-subtab-body:not([hidden]) { flex: 1; min-height: 0; }
  #screen-training .training-subtab-body[data-training-mount="fpscalc"]:not([hidden]) { overflow-y: auto; }
  #screen-training .training-timer-wrap {
    height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 14px 0 0;
  }
  #screen-training .training-timer-wrap > .training-timer-host { grid-row: 1; min-height: 0; }
  #screen-training .training-timer-wrap > .training-top-row { grid-row: 2; margin: 0; }
  /* The chip row duplicates the always-visible Drill Library pane. */
  #screen-training .training-drillrow { display: none; }
  #screen-training .training-rank { width: 100%; margin: 0; }
  /* Legacy app.js switchScreen() can stamp .hidden on the timer host (its
     pre-v0.84 life as a top-level screen); inside Training it is stale. */
  #screen-training .training-timer-host.hidden { display: block !important; }
  #screen-training .training-timer-host { height: 100%; }
  #screen-training .shottimer-v2-root {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 34vw, 460px);
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
    border-radius: var(--r-lg, 18px);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.06));
  }
  #screen-training .shottimer-v2-root .st-nav-bar { grid-column: 1 / -1; grid-row: 1; }
  #screen-training .shottimer-v2-root .st-screen-container { display: contents; }
  #screen-training .shottimer-v2-root .st-screen[data-st-screen="timer"] {
    display: flex !important;
    flex-direction: column;
    grid-column: 1;
    grid-row: 2 / 4;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 32px 20px;
  }
  #screen-training .shottimer-v2-root .st-screen[data-st-screen="history"],
  #screen-training .shottimer-v2-root .st-screen[data-st-screen="drills"] {
    display: flex !important;
    flex-direction: column;
    grid-column: 2;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px 16px;
    border-left: 1px solid var(--st-border, #2a2a2a);
  }
  #screen-training .shottimer-v2-root .st-screen[data-st-screen="history"] { grid-row: 2; }
  #screen-training .shottimer-v2-root .st-screen[data-st-screen="drills"] {
    grid-row: 3;
    border-top: 1px solid var(--st-border, #2a2a2a);
  }
  #screen-training .shottimer-v2-root .st-screen[data-st-screen="export"] {
    grid-column: 2;
    grid-row: 2 / 4;
    min-height: 0;
    overflow-y: auto;
    position: relative;
    z-index: 3;
    background: var(--st-bg-primary, #0a0a0a);
    border-left: 1px solid var(--st-border, #2a2a2a);
  }
  #screen-training .shottimer-v2-root .st-screen[data-st-screen="drills"]::before,
  #screen-training .shottimer-v2-root .st-screen[data-st-screen="history"]::before {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--ink-mid, #8a8f93);
  }
  #screen-training .shottimer-v2-root .st-screen[data-st-screen="drills"]::before { content: 'DRILL LIBRARY'; }
  #screen-training .shottimer-v2-root .st-screen[data-st-screen="history"]::before { content: 'RECENT RUNS'; }
  /* The hero pane earns hero scale ("0.000" is ~2.65em: 13vw fills the
     portrait 13" pane's 470px). The time and the START pad travel together,
     centred in the height the set-up leaves — the phone's flex:1 display
     would park START at the very bottom of a 1,100px pane. */
  #screen-training .shottimer-v2-root .st-timer-main { font-size: clamp(104px, 13vw, 160px); }
  #screen-training .st-screen[data-st-screen="timer"] > .st-timer-display { flex: 0 0 auto; margin-top: auto; }
  #screen-training .st-screen[data-st-screen="timer"] > .st-big-tap-container { margin-bottom: auto; }

  /* ── PLACES — split view: browse column left, the map owns the rest ─────── */
  #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;
    display: grid;
    grid-template-columns: minmax(360px, 420px) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    column-gap: 24px;
    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 16px 0;
    scrollbar-width: thin;
  }
  #screen-places .places-view .places-list-cards { grid-template-columns: minmax(0, 1fr); }
  #screen-places .places-map-v2 {
    grid-column: 2;
    grid-row: 1 / 5;
    height: auto;
    min-height: 0;
    margin-bottom: 0;
  }

  /* ── TEAM — squad board: Squad | Events | Chat, side by side ──────────────
     js/tablet-panes.js renders Events + Chat into their mounts (the phone flow
     only paints the active subtab) and clears their inline display; a MORE
     subtab (roster, tasks…) takes the whole stage — team.js inline-hides the
     squad mount and the composer stands down. */
  #screen-team { display: flex; flex-direction: column; }
  #screen-team > .team-subtab-mounts {
    flex: 1 1 0%;
    min-height: 0;
    display: grid;
    grid-template-columns: 1.05fr 1fr 1fr;
    grid-template-rows: minmax(0, 1fr);
    gap: 20px;
  }
  /* One pane at a time (a MORE subtab, or before the composer runs) owns the
     whole stage; the composed board places the three panes in columns. */
  #screen-team .team-subtab-mount { grid-column: 1 / -1; grid-row: 1; min-height: 0; overflow-y: auto; }
  #screen-team .team-subtab-mounts[data-board="on"] > [data-subtab-mount="squad"] { grid-column: 1; }
  #screen-team .team-subtab-mounts[data-board="on"] > [data-subtab-mount="events"] { grid-column: 2; }
  #screen-team .team-subtab-mounts[data-board="on"] > [data-subtab-mount="chat"] { grid-column: 3; }
  /* While the board is composed (all three shown), the panes read as cards. */
  #screen-team .team-subtab-mounts[data-board="on"] > .team-subtab-mount {
    border: 1px solid var(--line, rgba(255, 255, 255, 0.06));
    border-radius: var(--r-lg, 18px);
    background: var(--s1, #101214);
    padding: 12px 14px;
  }
  #screen-team .team-subtab-mounts[data-board="on"] > .team-subtab-mount[data-subtab-mount="chat"] {
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
  }
  #screen-team .team-subtab-mounts:not([data-board="on"]) > .team-subtab-mount[data-subtab-mount="chat"] {
    max-width: 860px;
    width: 100%;
    justify-self: center;
  }
}

/* =============================================================================
   TABLET wide, LANDSCAPE — the cockpit's timer pane as a two-page clock
   ========================================================================== */
@media (min-width: 1001px) and (min-height: 501px) and (orientation: landscape) {
  /* Landscape iPads are 744–1032 tall. In one phone-order column (set-up,
     then the time, then START: ~690px of content) START fell off the bottom
     of the pane on a mini (a 480px pane), an 11" and a 1280×800 window. The
     set-up goes on the left page, the time over the START pad on the right —
     the iPhone Duo book's clock (css/responsive-duo.css). Portrait (13"
     1032×1376) keeps the phone order: it has the height. */
  #screen-training .shottimer-v2-root .st-screen[data-st-screen="timer"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    column-gap: 28px;
    align-content: center;
    padding: 16px 24px 18px;
  }
  /* left page: who is shooting, the loaded drill, mic state, the set-up */
  #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;
    margin: 0;
  }
  #screen-training .st-screen[data-st-screen="timer"] > .st-big-tap-container {
    grid-column: 2;
    grid-row: 5;
    height: clamp(120px, 18vh, 170px);
    padding: 8px 0 0;
    margin: 0;
  }
  /* "0.000" is ~2.65em wide: sized to its page, not to the whole pane. */
  #screen-training .shottimer-v2-root .st-timer-main { font-size: clamp(72px, 8vw, 128px); }
  #screen-training .shottimer-v2-root .st-splits-container { max-height: 96px; }
}