/* ═══════════════════════════════════════════════════════════════════════════
   LANDSCAPE PHONE — compact shell and desks
   ═══════════════════════════════════════════════════════════════════════════

   The mobile layout switches at max-width:760px, but a phone held sideways is
   640–940px wide and only 360–430px tall. Those devices therefore got the
   desktop shell (12-tab bar, full ledger, 44px controls, two-row section nav)
   inside a viewport barely taller than the header: at 844×390 the chrome alone
   consumed 219px of 390, leaving a sliver of content.

   This layer keys off viewport HEIGHT — the reliable signal for "phone in
   landscape" — and compacts the chrome so the desks get that height back.
   Tablets in landscape (height >= 600) and desktop are untouched, and portrait
   is unaffected by design: the Android build is landscape-locked.

   WHY THE !important FLAGS
   The base design system enforces 44px touch targets and its own spacing with
   `!important` in a handful of places:
       #app button, .modal button        { min-height: 44px !important }
       #app .command-header-row          { padding: 7px 12px !important }
       #app .command-header-ledger .chip { min-height: 0 !important }
       #app #tabsNav .tab                { font: 500 10px ... !important }
       #app #view:not(.view-hidden-lot)  { padding: 10px !important }
   Those are correct for desktop and portrait, but in a 390px-tall viewport they
   are exactly what makes the UI overflow. Each override below therefore repeats
   the base selector (or a stronger one) AND carries !important, so it wins on
   both specificity and importance. Verified against computed styles.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (orientation: landscape) and (max-height: 480px) {

  /* ── 1. Top bar: one row, no wrapping ─────────────────────────────────── */
  #app .topbar-row {
    flex-wrap: nowrap !important;
    padding: 3px 8px !important;
    gap: 7px;
    min-height: 0;
  }
  #app .command-header-identity { gap: 6px; min-width: 0; flex: 1 1 auto; overflow: hidden; }
  #app .command-header-mark { width: 26px; height: 26px; font-size: 11px; line-height: 26px; }
  #app .command-header-eyebrow { display: none; }
  #app .command-header-identity .brand { font-size: 13px; line-height: 1.1; max-width: 132px; }

  /* Ledger: keep capital + calendar; the other two have their own desks */
  #app .command-header-ledger { gap: 4px; flex-wrap: nowrap; flex: 0 0 auto; }
  #app .command-header-ledger .chip {
    padding: 2px 6px !important;
    min-height: 24px !important;
    font-size: 10px;
    gap: 4px;
    flex: 0 0 auto;            /* never squeeze the numbers; the name gives way */
    white-space: nowrap;
  }
  #app .command-header-ledger .chip > span { font-size: 7.5px; letter-spacing: .5px; }
  #app .command-header-ledger .chip > b { font-size: 11px; }
  #app .command-header-ledger .chip:nth-child(2),
  #app .command-header-ledger .chip:nth-child(3) { display: none; }

  /* Actions */
  /* Below 760px the portrait layout turns the action row into a 7-column grid
     on its own line; in landscape we keep it inline on the header row. */
  #app .command-header-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-basis: auto !important;
    grid-template-columns: none !important;
    max-width: none !important;
    gap: 5px;
    margin-left: auto;
  }
  #app .command-header-actions .btn {
    min-height: 28px !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;   /* a wrapped label grows the whole row */
  }
  #app .command-header-actions #btnWeek {
    min-height: 30px !important;
    padding: 3px 12px !important;
    font-size: 12.5px !important;
  }
  #app .command-header-actions #btnFast,
  #app .command-header-actions #btnAuto { min-height: 28px !important; font-size: 11px !important; }
  #app .command-header-utilities { gap: 4px; padding-left: 6px; }
  #app .command-header-utilities .btn {
    min-height: 28px !important;
    padding: 3px 7px !important;
    font-size: 10.5px !important;
  }
  /* the field guide is also reachable from the More sheet */
  #btnHelp { display: none !important; }

  /* ── 2. Tab strip: compact, scrolls instead of clipping ───────────────── */
  /* One navigation for every landscape phone: the full tab strip. The portrait
     bottom bar + sub-tab strip would duplicate it and cost 60px of height that
     this shape cannot spare. */
  #app #tabsNav { display: flex !important; }
  #app .bottomnav,
  #app .subtabs { display: none !important; }
  #app #tabsNav {
    padding: 0 6px !important;
    gap: 1px;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* fade the trailing edge so a scrollable strip reads as scrollable
       rather than as a tab sliced in half */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  }
  #app #tabsNav::-webkit-scrollbar { display: none; }
  #app #tabsNav .tab {
    font: 500 10.5px/1.2 system-ui !important;
    padding: 5px 8px !important;
    min-height: 30px !important;
  }

  /* ── 3. Section nav: single row instead of two ────────────────────────── */
  #app .command-section-nav {
    flex-wrap: nowrap !important;
    gap: 6px;
    padding: 5px 8px;
    margin-bottom: 7px;
  }
  #app .command-section-nav .command-nav-brand { display: none; }
  #app .command-section-nav .command-nav-items {
    order: 0;
    flex-basis: auto;
    flex: 1 1 auto;
    padding: 0;
    gap: 3px;
    /* if a desk still overflows, fade the edge so it reads as scrollable */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent 100%);
  }
  /* the 01/02/03 ordinals are decorative; on a phone the labels need the room */
  #app .command-section-nav .command-nav-items button small { display: none; }
  /* `#app #view` prefix: the global `#app #view button{min-height:34px}` is two
     IDs deep, so a single-ID selector loses no matter what it declares. */
  #app #view .command-section-nav .command-nav-items button {
    min-height: 30px !important;
    padding: 4px 7px !important;
    font-size: 10.5px !important;
    gap: 0;
  }
  #app .command-section-nav .command-nav-tools { border: 0; padding-left: 0; gap: 3px; }
  #app #view .command-section-nav .command-nav-tools button { min-height: 30px !important; padding: 3px 6px !important; }
  #app .command-section-nav .command-nav-tools button small { display: none; }
  #app .command-section-nav .command-nav-tools button span { font-size: 10.5px !important; }

  /* Develop's nav is its own grid — collapse it to one scrollable row */
  #app .command-section-nav.command-develop-nav {
    display: flex;
    flex-wrap: nowrap !important;
    gap: 8px;
    padding: 6px 8px;
  }
  #app .command-develop-nav .command-nav-brand { display: none; }
  #app .command-develop-nav .command-nav-items {
    display: flex;
    flex: 1 1 auto;
    gap: 4px;
    overflow-x: auto;
    padding: 0;
  }
  #app .command-develop-nav .command-nav-items button {
    min-height: 32px !important;
    padding: 5px 9px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }
  #app .command-develop-nav .command-nav-tools { display: none; }

  /* ── 4. Content rhythm: reclaim the height ────────────────────────────── */
  #app #view:not(.view-hidden-lot) {
    padding: 8px 10px 12px !important;   /* the 86px bottom padding was for the hidden bottom bar */
  }
  #view .command-deck { padding: 12px; gap: 12px; }
  #view h1, #view .command-heading h1 { font-size: 19px; line-height: 1.15; }
  #view .command-heading p { font-size: 11.5px; margin-top: 4px; }
  #view .command-eyebrow, #view .command-edition { font-size: 8.5px; letter-spacing: 1px; }
  #view .command-telemetry { gap: 8px; }
  #view .command-metric { padding: 8px 10px; }
  #view .command-metric > strong { font-size: 17px; }
  #view .command-metric > small { font-size: 9.5px; }
  #view .command-date b { font-size: 34px; }

  /* Cards and panels are the bulk of the vertical cost */
  #view .card { padding: 12px; }
  #view .card > b, #view .card > h2, #view .card > h3 { font-size: 15px; }

  /* Desk controls: the global `#app button{min-height:44px!important}` is the
     single biggest reason the desks feel oversized on a phone. */
  #app #view button { min-height: 34px !important; }

  /* ── 5. Toasts: bottom-left so they never cover the header ────────────── */
  /* #toasts (not .toasts) — the base rule is an ID selector and would win. */
  #toasts {
    top: auto;
    bottom: 8px;
    left: 8px;
    right: 8px;
    max-height: 45vh;
    justify-content: flex-end;
  }
  #toasts .toast { font-size: 11.5px; padding: 8px 11px; max-width: 420px; border-radius: 9px; }

  /* ── 6. Floating controls ─────────────────────────────────────────────── */
  #fabWeek.fab-week {
    min-height: 34px !important;
    font-size: 11.5px;
    padding: 5px 13px;
    bottom: 8px;
    right: 8px;
  }

  /* ── 7. Modals: keep them inside the short viewport ───────────────────── */
  #modalRoot .modal { max-height: 94vh; padding: 14px 14px 16px; border-radius: 14px; }
  #modalRoot .modal-head h3 { font-size: 17px; }
  #modalRoot .modal-actions .btn { min-height: 38px !important; font-size: 13px; }
}

/* Narrowest landscape phones (<=800px wide, e.g. 740×360, 667×375): the header
   row needs ~770px with chip labels, so the labels give way to the values. */
@media (orientation: landscape) and (max-height: 480px) and (max-width: 800px) {
  #app .command-header-ledger .chip > span { display: none; }
  #app .command-header-ledger .chip { padding: 3px 8px !important; }
  #app .command-header-identity .brand { max-width: 88px; }
  #app .command-header-utilities { padding-left: 4px; }
  #app .command-header-utilities .btn { font-size: 10px !important; padding: 3px 6px !important; }
  #app .command-header-actions { gap: 3px; }
  #app .command-header-actions #btnWeek { padding: 3px 8px !important; }
  #app .command-header-actions .btn { padding: 3px 6px !important; }
}

/* Very small landscape phones (<=720px, e.g. 667×375): the decorative mark
   costs more than the studio name it sits next to, so the name wins. */
@media (orientation: landscape) and (max-height: 480px) and (max-width: 720px) {
  #app .command-header-mark { display: none; }
  #app .command-header-identity .brand { max-width: 112px; }
  /* the section list gets one more notch of room on the smallest phones */
  #app #view .command-section-nav .command-nav-items button { padding: 4px 5px !important; font-size: 10px !important; }
  #app #view .command-section-nav .command-nav-tools button { padding: 3px 5px !important; }
  #app .command-section-nav .command-nav-tools button span { font-size: 10px !important; }
}

/* Slightly taller landscape phones / small tablets (481–560) get a lighter
   touch: just the wrapping and the wasted bottom padding. */
@media (orientation: landscape) and (min-height: 481px) and (max-height: 560px) {
  #app .topbar-row { flex-wrap: nowrap !important; padding: 5px 10px !important; gap: 8px; }
  #app .command-header-eyebrow { display: none; }
  #app .command-section-nav { flex-wrap: nowrap !important; padding: 8px 10px; margin-bottom: 10px; }
  #app .command-section-nav .command-nav-brand { display: none; }
  #app .command-section-nav .command-nav-items { order: 0; flex-basis: auto; flex: 1 1 auto; }
  #view h1, #view .command-heading h1 { font-size: 22px; }
}