/* ════════════════════════════════════════════════════════════════════════
   PHASE 156 — Tablet header: give the view tabs room to breathe
   On tablets (761-1024px, both orientations) the header row is
     [brand 172px] [‹] [nav-tabs flex:1] [›] [header-actions 496px]
   The brand wordmark + the 10-item action cluster squeezed .nav-tabs down to
   ~256px — only ~4 of the 37 view tabs visible at once, cramped against the
   scroll arrows. .nav-tabs is the sole flex:1 item, so any width we reclaim
   from its neighbours flows straight to it.

   These rules (tablet only): collapse the brand to its 🎬 mark (keeps goHome),
   drop the "BY JACK ALLEN"/project subtitle, trim the Team button to its icon,
   and make the ‹ › scroll arrows real 40px touch targets. Net: the tab scroller
   roughly doubles and the arrows are easy to hit. Phone (≤760, bottom-tab nav)
   and desktop (>1024) are untouched.
   ════════════════════════════════════════════════════════════════════════ */

@media (min-width: 761px) and (max-width: 1024px) {
  /* Collapse the wordmark to the clapperboard icon — reclaims ~110px. */
  .app-brand .brand-text { display: none !important; }
  .app-brand { gap: 0 !important; padding-right: 4px !important; }
  .app-brand .brand-emoji { font-size: 1.4rem; }

  /* Trim the Team button to its icon (its label costs ~48px). */
  #collab-team-btn .team-btn-label { display: none !important; }
  #collab-team-btn { gap: 0 !important; }

  /* Real touch targets for the horizontal tab scroller arrows. */
  .tab-scroll-btn {
    min-width: 40px !important;
    height: 40px !important;
    font-size: 1.3rem !important;
    align-self: center;
  }
  /* Keep the tab scroller filling the reclaimed space and scrollable. */
  .nav-tabs { flex: 1 1 auto !important; }
  /* Comfortable tap height for the tabs themselves without breaking the
     manila-folder shape. */
  .nav-tabs .tab { min-height: 38px; }
}

/* Portrait tablet: even with the brand collapsed, the 10-item action cluster
   leaves the tab scroller almost no room on a 768px-wide screen (~1 tab). Give
   the tabs their OWN full-width row below the brand + actions so the whole
   catalog of views is scrollable across the full width. Header grows one row
   (~40px); the app shell below is a flex column, so it reflows automatically. */
@media (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
  header {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 0 !important;
    row-gap: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
    align-content: flex-start !important;   /* pack the two rows tight, no vertical spread */
  }
  /* Row 1: brand + actions, standard header height. */
  header .app-brand      { order: 1; align-self: center; }
  header .header-actions { order: 2; margin-left: auto; align-self: center; }
  /* Zero-height full-width break: forces the tab scroller onto its own row. */
  header::after { content: ""; order: 3; flex: 0 0 100%; height: 0; margin: 0; }
  /* Row 2: the tab scroller, flush along the header's bottom edge. */
  #tab-scroll-left  { order: 4; align-self: flex-end; }
  /* height:auto overrides phase0's height:100% — otherwise .nav-tabs stretches
     to the full row and the flex-end tabs leave a dead band above them. */
  .nav-tabs         { order: 5; flex: 1 1 auto !important; height: auto !important; align-self: flex-end; padding-top: 16px; }
  #tab-scroll-right { order: 6; align-self: flex-end; }
  .nav-tabs .tab { align-self: flex-end; }
}