/* ═══════════════════════════════════════════════════════════════════════════
   BOX OFFICE WAR — UI SYSTEM / COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════

   Loaded after every legacy stylesheet. Two jobs:

     A. NORMALISE  strip the arcade-era treatments the older layers apply with
                   `!important` — 3px borders, hard offset shadows, 44px controls,
                   Georgia headings, monospace body copy.
     B. COMPONENTS  a small, documented set (`ui-*`) for new work, plus the shell
                   styles (header, tabs, section nav, cards) that every desk
                   shares.

   Rules of the system:
     - controls are --ctl-h tall (36 phone / 40 desktop), never 44 by default
     - one radius scale, one hairline border, one shadow ramp
     - headings are sans, tight tracking; numbers are tabular
     - colour comes from tokens only; no new hex in this file except shadows
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A. NORMALISE ────────────────────────────────────────────────────────── */

/* The legacy shell forces 44px touch targets on every button. That single rule
   is most of why the product reads as "too big" on a phone. */
#app button,
#app .btn,
.modal button,
.modal .btn {
  min-height: var(--ctl-h) !important;
  border-radius: var(--ctl-radius) !important;
  font-family: var(--font-sans) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background var(--fast), border-color var(--fast), color var(--fast) !important;
}

/* Kill the 3px slate borders and hard offset shadows from bow-restyle. */
#app .card,
#app .panel,
#app .stat,
#app .chip,
#app .modal,
#app .topbar,
#app .tabs,
#app .bottomnav,
#app .command-section-nav,
#app .command-deck,
#app .command-metric {
  border-width: 1px !important;
  border-style: solid !important;
  box-shadow: var(--shadow-sm) !important;
  text-shadow: none !important;
}

/* Serif headings were the loudest visual tic of the command-deck era. */
#app h1, #app h2, #app h3, #app h4,
#app .command-heading h1,
#app .command-dialog-hero h2,
#app .command-desk-grid b,
#app .command-tracker h2,
#app .card > b,
#app .card > h2,
#app .card > h3,
.modal h1, .modal h2, .modal h3 {
  font-family: var(--font-display) !important;
  font-weight: var(--heading-weight) !important;
  letter-spacing: var(--heading-tracking) !important;
  text-shadow: none !important;
}

/* Monospace is for data, not for labels and headings. */
#app .command-eyebrow,
#app .command-edition,
#app .command-nav-brand > span,
#app .command-nav-brand > small,
#app .command-metric > span {
  font-family: var(--font-sans) !important;
  letter-spacing: var(--label-tracking) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

/* Decorative pseudo-element chrome (bulbs, studs, corner marks). */
#app .card::before, #app .card::after,
#app .panel::before, #app .panel::after,
#app .topbar::before, #app .topbar::after,
#app .tabs::before, #app .tabs::after,
#app .chip::before, #app .chip::after,
#app .command-deck::before, #app .command-deck::after {
  display: none !important;
}

/* ── B. SHELL ────────────────────────────────────────────────────────────── */

#app .topbar {
  background: color-mix(in srgb, var(--surface-0) 88%, transparent) !important;
  border-bottom: 1px solid var(--line-1) !important;
  backdrop-filter: blur(12px);
}
#app .topbar-row { gap: var(--space-3); }
#app .brand { font-weight: 700 !important; letter-spacing: var(--heading-tracking) !important; }
/* Header controls keep their intrinsic width; the studio name is what gives way
   when space runs out, otherwise labels get clipped mid-word. */
#app .command-header-actions,
#app .command-header-utilities,
#app .command-header-ledger { flex-shrink: 0; }
#app .command-header-actions .btn,
#app .command-header-utilities .btn { flex: 0 0 auto; }

#app .command-header-mark {
  width: 26px !important; height: 26px !important;
  border-radius: var(--r-xs) !important;
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 11px !important; line-height: 26px !important;
  font-weight: 800 !important;
}

/* Ledger chips: quiet pills, not arcade scoreboards. */
#app .chip {
  background: var(--surface-2) !important;
  border: 1px solid var(--line-1) !important;
  border-radius: var(--r-sm) !important;
  padding: 3px 8px !important;
  gap: 5px;
  color: var(--text-1) !important;
}
#app .chip > span {
  color: var(--text-3) !important;
  font-size: 9px !important;
  letter-spacing: var(--label-tracking) !important;
  font-weight: 600 !important;
}
#app .chip > b {
  color: var(--text-1) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}
#app .chip-cash { border-color: color-mix(in srgb, var(--accent) 35%, var(--line-1)) !important; }
#app .chip-cash > b { color: var(--accent) !important; }

/* Tab strip */
#app #tabsNav {
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--line-1) !important;
  gap: 2px !important;
  padding: 0 var(--space-2) !important;
}
#app #tabsNav .tab {
  min-height: var(--tabbar-h) !important;
  padding: 0 10px !important;
  font: 600 var(--text-sm) / 1 var(--font-sans) !important;
  color: var(--text-2) !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
}
#app #tabsNav .tab:hover { color: var(--text-1) !important; background: var(--surface-1) !important; }
#app #tabsNav .tab.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
  background: transparent !important;
}

/* Section nav: one quiet row of text buttons. */
#app .command-section-nav {
  background: var(--surface-1) !important;
  border: 1px solid var(--line-1) !important;
  border-radius: var(--r) !important;
  padding: 5px 6px !important;
  margin-bottom: var(--space-3) !important;
  gap: 6px !important;
}
#app .command-section-nav .command-nav-items button {
  min-height: var(--ctl-h-sm) !important;
  padding: 0 10px !important;
  font: 600 var(--text-sm) / 1 var(--font-sans) !important;
  color: var(--text-2) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-xs) !important;
}
#app .command-section-nav .command-nav-items button:hover {
  color: var(--text-1) !important;
  background: var(--surface-3) !important;
}
#app .command-section-nav .command-nav-items button.active {
  color: var(--accent-ink) !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
#app .command-section-nav .command-nav-tools button {
  min-height: var(--ctl-h-sm) !important;
  padding: 0 10px !important;
  font: 600 var(--text-sm) / 1 var(--font-sans) !important;
  color: var(--text-2) !important;
  background: transparent !important;
  border: 1px solid var(--line-1) !important;
  border-radius: var(--r-xs) !important;
}
/* Ordinals are decorative but must still be legible. */
#app .command-section-nav .command-nav-items button small { color: var(--text-3) !important; }

/* Secondary "ghost" actions were inheriting a colour written for a light panel
   and disappearing entirely. Two ids deep: the desk rules are `#app #view[...]`. */
#app #view [class*="ghost"] {
  color: var(--text-2) !important;
  background: transparent !important;
  border-color: var(--line-2) !important;
}
#app #view [class*="ghost"]:hover { color: var(--text-1) !important; background: var(--surface-3) !important; }

/* Filled primary actions: one treatment everywhere. Legacy had them gold on
   some desks and neutral on others, which made any single text colour wrong
   somewhere. Gold fill + ink text is the legible pairing. */
#app #view .command-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;
}
#app #view .command-primary:hover {
  background: var(--accent-strong) !important;
  border-color: var(--accent-strong) !important;
  color: var(--accent-ink) !important;
}

/* Chart rank numerals in the box office desk. */
#app #view .bo-rank { color: var(--text-3) !important; }
/* Rival comparison lines: the label spans inherited a surface token. */
#app #view .bo-rival-line span { color: var(--text-2) !important; }

/* Finance range/filter chips: the selected state keeps a gold fill, so its text
   must be ink. The unselected state stays neutral. */
#app #view[data-screen] .fin-chipbtn.fin-chipbtn {
  background: var(--surface-3) !important;
  border-color: var(--line-2) !important;
  color: var(--text-1) !important;
}
#app #view[data-screen] .fin-chipbtn.fin-chipbtn.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;
}

/* ── C. COMPONENTS ───────────────────────────────────────────────────────── */

/* Button --------------------------------------------------------------- */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--ctl-h); padding: 0 var(--ctl-pad-x);
  font: 600 var(--text-sm) / 1 var(--font-sans);
  color: var(--text-1); background: var(--surface-3);
  border: 1px solid var(--line-2); border-radius: var(--ctl-radius);
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background var(--fast), border-color var(--fast), color var(--fast), transform var(--fast);
}
.ui-btn:hover { background: var(--surface-4); border-color: var(--line-3); }
.ui-btn:active { transform: translateY(1px); }
.ui-btn[disabled], .ui-btn.is-disabled { opacity: .45; pointer-events: none; }

.ui-btn--primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.ui-btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

.ui-btn--ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.ui-btn--ghost:hover { background: var(--surface-3); color: var(--text-1); }

.ui-btn--danger { background: transparent; border-color: color-mix(in srgb, var(--danger) 45%, var(--line-1)); color: var(--danger); }
.ui-btn--danger:hover { background: var(--danger-wash); }

.ui-btn--sm { height: var(--ctl-h-sm); padding: 0 9px; font-size: var(--text-xs); }
.ui-btn--lg { height: var(--ctl-h-lg); padding: 0 18px; font-size: var(--text-md); }
.ui-btn--block { width: 100%; }

/* Card ----------------------------------------------------------------- */
.ui-card {
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r);
  padding: var(--space-3);
}
.ui-card__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.ui-card__title { font: 700 var(--text-md) / 1.2 var(--font-sans); color: var(--text-1); letter-spacing: var(--heading-tracking); }
.ui-card__meta { font-size: var(--text-xs); color: var(--text-3); }

/* Stat ----------------------------------------------------------------- */
.ui-stat { display: grid; gap: 2px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--line-1); border-radius: var(--r); }
.ui-stat__label { font-size: 9px; font-weight: 600; letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-3); }
.ui-stat__value { font-size: var(--text-xl); font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; line-height: 1.15; }
.ui-stat__note { font-size: 10px; color: var(--text-3); }
.ui-stat--up .ui-stat__value { color: var(--success); }
.ui-stat--down .ui-stat__value { color: var(--danger); }

/* Badge / chip --------------------------------------------------------- */
.ui-badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 7px;
  font: 600 10.5px/1 var(--font-sans); letter-spacing: .02em;
  color: var(--text-2); background: var(--surface-3);
  border: 1px solid var(--line-1); border-radius: var(--r-full);
}
.ui-badge--accent { color: var(--accent); background: var(--accent-wash); border-color: transparent; }
.ui-badge--success { color: var(--success); background: var(--success-wash); border-color: transparent; }
.ui-badge--danger { color: var(--danger); background: var(--danger-wash); border-color: transparent; }
.ui-badge--info { color: var(--info); background: var(--info-wash); border-color: transparent; }

/* Field ---------------------------------------------------------------- */
.ui-field { display: grid; gap: 5px; }
.ui-field__label { font-size: var(--text-xs); font-weight: 600; color: var(--text-2); }
.ui-field input, .ui-field select, .ui-field textarea {
  height: var(--ctl-h); padding: 0 10px;
  font: 400 var(--text-sm) / 1 var(--font-sans); color: var(--text-1);
  background: var(--surface-4); border: 1px solid var(--line-2);
  border-radius: var(--ctl-radius); outline: none;
}
.ui-field textarea { height: auto; padding: 8px 10px; line-height: 1.5; resize: vertical; }
.ui-field input:hover, .ui-field select:hover { border-color: var(--line-3); }
.ui-field input:focus, .ui-field select:focus, .ui-field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash);
}

/* Segmented control ---------------------------------------------------- */
.ui-segmented {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--ctl-radius);
}
.ui-segmented button {
  height: calc(var(--ctl-h) - 6px); padding: 0 12px;
  font: 600 var(--text-xs) / 1 var(--font-sans); color: var(--text-2);
  background: transparent; border: 0; border-radius: calc(var(--ctl-radius) - 2px); cursor: pointer;
}
.ui-segmented button[aria-pressed="true"] { background: var(--surface-4); color: var(--text-1); }

/* Table ---------------------------------------------------------------- */
.ui-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ui-table th {
  text-align: left; font: 600 10px/1 var(--font-sans); letter-spacing: var(--label-tracking);
  text-transform: uppercase; color: var(--text-3);
  padding: 0 10px 7px; border-bottom: 1px solid var(--line-1);
}
.ui-table td { padding: 0 10px; height: var(--row-h); color: var(--text-1); border-bottom: 1px solid var(--line-1); }
.ui-table tr:last-child td { border-bottom: 0; }
.ui-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ui-table tbody tr:hover td { background: var(--surface-3); }

/* Toolbar -------------------------------------------------------------- */
.ui-toolbar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2); background: var(--surface-1);
  border: 1px solid var(--line-1); border-radius: var(--r);
}
.ui-toolbar__spacer { flex: 1; }

/* Empty state ---------------------------------------------------------- */
.ui-empty { display: grid; justify-items: center; gap: 6px; padding: var(--space-6) var(--space-4); text-align: center; }
.ui-empty__title { font: 600 var(--text-md) / 1.3 var(--font-sans); color: var(--text-2); }
.ui-empty__hint { font-size: var(--text-sm); color: var(--text-3); max-width: 44ch; }

/* List row ------------------------------------------------------------- */
.ui-row {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--row-h); padding: 0 var(--space-2);
  border-bottom: 1px solid var(--line-1);
}
.ui-row:last-child { border-bottom: 0; }
.ui-row__main { flex: 1; min-width: 0; }
.ui-row__title { font: 600 var(--text-sm) / 1.3 var(--font-sans); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-row__meta { font-size: var(--text-xs); color: var(--text-3); }
.ui-row__value { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-1); }

/* Progress ------------------------------------------------------------- */
.ui-progress { height: 4px; background: var(--surface-4); border-radius: var(--r-full); overflow: hidden; }
.ui-progress > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width var(--normal); }

/* ── D. UTILITIES ────────────────────────────────────────────────────────── */
.ui-stack { display: grid; gap: var(--space-3); }
.ui-row-flex { display: flex; align-items: center; gap: var(--space-2); }
.ui-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.ui-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.ui-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.ui-num { font-variant-numeric: tabular-nums; }
.ui-muted { color: var(--text-2); }
.ui-dim { color: var(--text-3); }
.ui-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 760px) {
  .ui-grid-3, .ui-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Narrow portrait phones (320–560px): the header has to survive the smallest
   device in the matrix, so the ledger and utilities shrink one more notch. */
@media (max-width: 560px) {
  #app .command-header-mark { width: 22px !important; height: 22px !important; line-height: 22px !important; font-size: 10px !important; }
  #app .command-header-identity .brand { font-size: 12px !important; max-width: 84px !important; }
  #app .command-header-ledger .chip { padding: 2px 5px !important; min-height: 20px !important; }
  #app .command-header-ledger .chip > span { font-size: 7px !important; }
  #app .command-header-ledger .chip > b { font-size: 10px !important; }
  #app .command-header-actions .btn { min-height: 26px !important; padding: 2px 6px !important; font-size: 10px !important; }
  #app .command-header-utilities .btn { min-height: 26px !important; padding: 2px 5px !important; font-size: 9.5px !important; }
  #app .command-header-utilities { padding-left: 4px !important; gap: 3px !important; }
  #app .command-header-actions { gap: 3px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDSCAPE PHONE — FIT TO SCREEN, NO PAGE SCROLL
   ═══════════════════════════════════════════════════════════════════════════

   A landscape phone gives ~310px of content height under the shell. The
   dashboard used 627px, so the week's headline numbers sat below the fold and
   every visit began with a scroll. The shell is now a fixed-height flex column
   and the deck compresses to fit, so the command desk reads in one screen.
   Desks with genuinely long lists still scroll — inside their own panel, not
   the page.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 480px) {

  html, body, #app { height: 100dvh; overflow: hidden; }
  #app { display: flex; flex-direction: column; }
  #app #view { flex: 1; min-height: 0; overflow-y: auto !important; overscroll-behavior: contain; }

  /* Dashboard: no scrolling at all. #view is a flex column so the deck takes
     exactly the space left after the section nav — a fixed height:100% would
     ignore that sibling and overflow by its height. */
  #app[data-active-tab="dashboard"] #view {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0;
  }
  #app[data-active-tab="dashboard"] .command-deck {
    flex: 1;
    min-height: 0;
    height: auto !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px 10px !important;
  }

  /* Heading collapses entirely: the studio name and the week both already sit in
     the header chips, and this block costs 32px of a 310px viewport. */
  #app[data-active-tab="dashboard"] .command-heading { display: none !important; }

  /* Metrics: one tight row. */
  #app[data-active-tab="dashboard"] .command-telemetry {
    gap: 6px !important;
    margin: 0 !important;
  }
  #app[data-active-tab="dashboard"] .command-metric {
    padding: 4px 9px !important;
    gap: 0 !important;
    min-height: 0 !important;
  }
  #app[data-active-tab="dashboard"] .command-metric > span { font-size: 8.5px !important; }
  #app[data-active-tab="dashboard"] .command-metric > strong { font-size: 15px !important; }
  #app[data-active-tab="dashboard"] .command-metric > small { display: none !important; }

  /* Toasts sit over a screen that cannot scroll, so they stay small. */
  #toasts { max-width: 300px; left: auto !important; }
  #toasts .toast {
    font-size: 10.5px !important;
    padding: 6px 9px !important;
    max-width: 300px !important;
    line-height: 1.3 !important;
  }

  /* Slate: fills the rest, scrolls inside itself only if it must. */
  #app[data-active-tab="dashboard"] .command-main {
    flex: 1;
    min-height: 0;
    overflow: auto;
    gap: 8px !important;
    grid-template-columns: minmax(180px, .8fr) minmax(0, 2.2fr) !important;
  }
  #app[data-active-tab="dashboard"] .command-brief {
    padding: 8px 10px !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
  }
  #app[data-active-tab="dashboard"] .command-brief h2,
  #app[data-active-tab="dashboard"] .command-brief b {
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }
  #app[data-active-tab="dashboard"] .command-brief p {
    font-size: 10px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #app[data-active-tab="dashboard"] .command-brief .btn,
  #app[data-active-tab="dashboard"] .command-brief button {
    min-height: 24px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }
  /* The footer stat block is the tallest child of the brief. */
  #app[data-active-tab="dashboard"] .command-brief-foot {
    padding: 4px 0 0 !important;
    gap: 0 !important;
    border-top: 1px solid var(--line-1);
    margin-top: 2px !important;
  }
  #app[data-active-tab="dashboard"] .command-brief-foot span,
  #app[data-active-tab="dashboard"] .command-brief-foot small { font-size: 8.5px !important; line-height: 1.2 !important; }
  #app[data-active-tab="dashboard"] .command-brief-foot b { font-size: 13px !important; line-height: 1.2 !important; }

  /* The shortcuts bar duplicates the tab strip and costs 73px of a 310px view. */
  #app[data-active-tab="dashboard"] .command-shortcuts { display: none !important; }
  /* The signal footer repeats the telemetry row that is already above it. */
  #app[data-active-tab="dashboard"] .command-signal { display: none !important; }

  /* Section head and lanes: headers carry the meaning, padding does not. */
  #app[data-active-tab="dashboard"] .command-section-head {
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 0 4px !important;
    gap: 6px !important;
  }
  #app[data-active-tab="dashboard"] .command-section-head h2 { font-size: 14px !important; margin: 0 !important; }
  #app[data-active-tab="dashboard"] .command-section-head .command-eyebrow { display: none !important; }
  #app[data-active-tab="dashboard"] .command-section-head .btn {
    min-height: 24px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }
  #app[data-active-tab="dashboard"] .command-lane { border-radius: var(--r-sm) !important; }
  #app[data-active-tab="dashboard"] .command-lane header {
    padding: 4px 7px !important;
    min-height: 0 !important;
  }
  #app[data-active-tab="dashboard"] .command-lane header span,
  #app[data-active-tab="dashboard"] .command-lane header b { font-size: 9px !important; }
  #app[data-active-tab="dashboard"] .command-empty {
    padding: 8px !important;
    gap: 2px !important;
    min-height: 0 !important;
  }
  #app[data-active-tab="dashboard"] .command-empty small { display: none !important; }
  #app[data-active-tab="dashboard"] .command-empty span { font-size: 18px !important; }
}