/* Terminal mobile + tablet layout — sits alongside terminal-tokens.css.
 *
 * Loaded AFTER terminal-tokens.css in dashboard-redesign.html so any rule
 * here overrides the desktop equivalent at the same specificity.
 *
 * All rules are scoped under [data-terminal] and wrapped in
 * @media (max-width: 1024px) so desktop is byte-for-byte unaffected.
 *
 * Inner @media (max-width: 640px) applies phone-only refinements on top
 * of the shared tablet+phone rules. Class names match the live DOM (see
 * terminal-tokens.css for the desktop counterparts).
 *
 * See docs/plans/terminal-mobile-spec.md for the design rationale.
 */

@media (max-width: 1024px) {
  /* ==========================================================================
     Masthead
     ========================================================================== */
  /* Force masthead to a single row that fits the viewport width. The
     "Portfolio Tracker" brand sits left, the back-pill sits right, and the
     TERMINAL eyebrow + page-width pill are hidden so they don't push the
     row into wrapping. The !important flags defeat the existing
     `@media (max-width: 980px)` rule in terminal-tokens.css that sets
     flex-wrap: wrap + .masthead-controls { width: 100% }. */
  [data-terminal] .masthead {
    padding: 8px 12px !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-height: 44px;
  }

  [data-terminal] .masthead-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  [data-terminal] .masthead .brand {
    font-size: 16px;
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* "TERMINAL" eyebrow label takes meaningful space on a phone next to a
     long brand string. Hide on mobile + tablet — the URL `/dashboard-redesign`
     and the layout pill both signal Terminal context already. */
  [data-terminal] .masthead-meta__eyebrow {
    display: none;
  }

  [data-terminal] .masthead-controls {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  /* The page-width pill (Fullscreen / Paged) is irrelevant when there's no
     viewport width to constrain. Hide everywhere ≤ 1024px. */
  [data-terminal] .masthead-controls .layout-pill[aria-label="Terminal page width"] {
    display: none;
  }

  /* "← Switch to classic layout" pill: keep the orange chrome but shrink
     padding/font so it docks cleanly to the top-right corner without
     wrapping. Made noticeably thinner per QA — short copy "Classic" on
     phones with room squeezed by the sidebar rail. */
  [data-terminal] .masthead-controls .back-pill {
    padding: 3px 8px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
    white-space: nowrap;
    line-height: 1.4 !important;
  }

  @media (max-width: 480px) {
    /* Tightest phone width: drop the brand text entirely so the back-pill
       has room next to the sidebar hamburger. The Terminal context is
       already implied by the URL and the rest of the chrome. */
    [data-terminal] .masthead .brand {
      display: none;
    }
  }

  /* ==========================================================================
     Sidebar hamburger toggle — shrink to fit the masthead height
     ==========================================================================
     The global sidebar.js renders .sidebar-mobile-toggle as a fixed 40×40px
     button at top:16px / left:16px on mobile, which extends below the 44px
     masthead. Inside the Terminal page, scale it down to 32×32 with a
     6px / 6px offset so it sits cleanly inside the masthead row. Scoped to
     `body[data-page="terminal"]` so the classic dashboard isn't affected. */
  body[data-page="terminal"] .sidebar-mobile-toggle--floating {
    width: 32px !important;
    height: 32px !important;
    top: 6px !important;
    left: 6px !important;
    padding: 6px !important;
    border-radius: 6px !important;
  }
  body[data-page="terminal"] .sidebar-mobile-toggle svg {
    width: 18px !important;
    height: 18px !important;
  }
  /* Reserve space on the masthead's left edge for the floating hamburger
     so the brand / identity strip don't render underneath it. */
  [data-terminal] .masthead {
    padding-left: 48px !important;
  }

  /* ==========================================================================
     Compact identity strip on mobile (next to the hamburger, left-aligned)
     ==========================================================================
     The desktop TerminalIdentityStrip shows date · market · avatar · name ·
     edit. On mobile we want just the avatar + initials immediately after
     the hamburger so the user sees who they're signed in as. Override the
     existing display:none from terminal-tokens.css (≤1100px), strip out
     date / market / separator / edit, keep avatar + initials.

     Flex `order` pulls the identity strip to the very left of the masthead
     (right after the hamburger), with the empty masthead-meta and the back-
     pill controls flowing to the right. Without this, the identity strip
     was rendering AFTER an empty `.masthead-meta` (flex: 1) that consumed
     all the leading space — the strip ended up floating in the middle. */
  [data-terminal] .masthead .terminal-identity-strip {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    order: 0;
    margin-right: 0;
  }
  [data-terminal] .masthead .masthead-meta {
    order: 1;
    flex: 0 0 auto !important;
    margin-left: 8px;
  }
  [data-terminal] .masthead .masthead-controls {
    order: 2 !important;
  }
  [data-terminal] .masthead .terminal-identity-strip__date,
  [data-terminal] .masthead .terminal-identity-strip__market,
  [data-terminal] .masthead .terminal-identity-strip__sep,
  [data-terminal] .masthead .terminal-identity-strip__edit {
    display: none !important;
  }
  [data-terminal] .masthead .terminal-identity-strip__avatar {
    width: 22px;
    height: 22px;
    font-size: 9px;
    border-radius: 5px;
  }
  /* Hide the full name; show the dotted initials variant instead. */
  [data-terminal] .masthead .terminal-identity-strip__name {
    display: none !important;
  }
  [data-terminal] .masthead .terminal-identity-strip__initials {
    display: inline !important;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: rgb(var(--ink-2));
  }

  /* ==========================================================================
     Identity strip — already hidden by terminal-tokens.css below 1100px.
     Reaffirm here so the rule is visible alongside the rest of mobile work.
     ========================================================================== */
  [data-terminal] .terminal-identity-strip {
    display: none;
  }

  /* ==========================================================================
     Portfolio ticker
     ========================================================================== */
  [data-terminal] .term-portfolio-ticker {
    font-size: 11px;
  }

  [data-terminal] .term-portfolio-ticker-item {
    padding: 0 10px;
    gap: 6px;
  }

  [data-terminal] .term-portfolio-ticker-symbol {
    font-size: 11px;
  }

  /* ==========================================================================
     Header metrics row — extend the existing 980px 3-up rule to 1024px so
     tablets in landscape also get 3 columns instead of 6.
     ========================================================================== */
  [data-terminal] .term-header-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  [data-terminal] .term-header-metric {
    border-right: 1px solid rgb(var(--rule));
  }

  [data-terminal] .term-header-metric:nth-child(3n) {
    border-right: none;
  }

  [data-terminal] .term-header-metric__value {
    font-size: 26px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  [data-terminal] .term-header-metric__detail {
    font-size: 11px;
  }

  [data-terminal] .term-header-metrics-row {
    padding: 10px 12px;
  }

  /* ==========================================================================
     Compact Toolbar — mobile + tablet
     ==========================================================================
     Goal: collapse the FilterBar's slate-panel-with-accordion shell into a
     single horizontal row that visually matches the rest of the Terminal
     chrome (no rounded slate borders, no extra margins). On mobile the
     filter inputs sit in a horizontal scroll-row instead of stacking
     vertically. */
  [data-terminal] .terminal-toolbar {
    border-bottom: 1px solid rgb(var(--rule));
    /* Belt-and-suspenders: clip any overflow from the inner filter bar so
       expanding the accordion can't horizontally bleed past the toolbar's
       cell and shift the metrics row above it off-screen. */
    overflow: hidden !important;
  }

  [data-terminal] .terminal-toolbar .dashboard-filter-bar {
    margin: 0 !important;
    padding: 6px 10px !important;
    gap: 8px !important;
    border: none !important;
    border-radius: 0 !important;
    background: rgb(var(--paper-2)) !important;
    /* Allow wrapping so the filter accordion content drops to its own row
       BELOW the toolbar when expanded — that way Sort / Alerts / AI on
       row 1 never get pushed off-screen by wide filter inputs. */
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* The accordion summary becomes a compact chip instead of a giant
     full-width button. Tap toggles the filter content below — same React
     state, just restyled. Slim oval shape (low vertical padding) to match
     the stadium pills used for sort/density/alerts/AI. */
  [data-terminal] .terminal-toolbar .filter-accordion-summary {
    display: inline-flex !important;
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 3px 10px !important;
    border: 1px solid rgb(var(--rule-2)) !important;
    border-radius: 999px !important;
    background: rgb(var(--paper-3)) !important;
    gap: 6px !important;
    font-size: 12px;
    line-height: 1.5;
    min-height: 26px;
  }

  [data-terminal] .terminal-toolbar .filter-accordion-summary[aria-expanded="true"] {
    border-color: rgb(var(--accent) / 0.5) !important;
    background: rgb(var(--accent) / 0.12) !important;
    color: rgb(var(--ink)) !important;
  }

  /* When at least one filter is active, FilterBar renders an "Active"
     badge inside the summary button. The badge text "ACTIVE" is bigger
     than the chip itself and was pushing the toolbar onto two rows.
     Hide the badge and color the chip with the accent palette so the
     active state still reads at a glance. CSS :has — supported across
     all modern mobile browsers (Safari 15.4+, Chrome 105+). */
  [data-terminal] .terminal-toolbar .filter-active-badge {
    display: none !important;
  }
  [data-terminal] .terminal-toolbar .filter-accordion-summary:has(.filter-active-badge) {
    border-color: rgb(var(--accent)) !important;
    background: rgb(var(--accent) / 0.18) !important;
    color: rgb(var(--accent)) !important;
  }

  /* Inline X clear buttons inside select wrappers were rendering
     misaligned (sometimes below the select with the bottom half clipped)
     because the slim 26px-tall selects don't have room for an absolute-
     positioned overlay. The user can clear a filter by choosing "All
     holdings" / "Wave Count" from the select dropdown — same outcome. */
  [data-terminal] .terminal-toolbar .filter-field button[aria-label^="Clear"] {
    display: none !important;
  }

  /* On mobile + tablet, the FilterBar's Tailwind `sm:flex` would normally
     keep .filter-accordion-content visible at all times above 640px (the
     classic-dashboard pattern of always-inline filters). For Terminal we
     want a true accordion — hidden until the user taps Filters — so we
     force display:none whenever the summary button reports
     aria-expanded="false". Sibling selector keys off the same React state
     that toggles the chevron. */
  [data-terminal] .terminal-toolbar .filter-accordion-summary[aria-expanded="false"] + .filter-accordion-content {
    display: none !important;
  }

  /* When expanded, the filter content drops to its OWN row below the
     toolbar (full-width via flex-basis: 100%) and scrolls horizontally
     inside that row when the symbol input + holdings + wave selects
     exceed viewport width. Row 1 — Filters chip + Sort/Alerts/AI — stays
     unchanged. */
  [data-terminal] .terminal-toolbar .filter-accordion-summary[aria-expanded="true"] + .filter-accordion-content {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    flex-basis: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid rgb(var(--rule-2)) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [data-terminal] .terminal-toolbar .filter-accordion-content::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
  }

  /* Action group on row 1, right side. Never participates in any scroll.
     Flex `order` reorders the visual layout so sort-controls renders RIGHT
     AFTER the Filters chip (and BEFORE the filter content), even though
     the React tree puts it last. With flex-wrap: wrap on the parent and
     filter-content's flex-basis: 100%, this guarantees:
       Row 1: [Filters chip]      [Sort/Alerts/AI →]
       Row 2: [filter content scrolls →]   (only when expanded)
     instead of forcing sort-controls to wrap to its own row 3. */
  [data-terminal] .terminal-toolbar .filter-accordion-summary {
    order: 1;
  }
  [data-terminal] .terminal-toolbar .sort-controls {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    order: 2 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  [data-terminal] .terminal-toolbar .sort-controls::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
  }
  [data-terminal] .terminal-toolbar .sort-controls > * {
    flex: 0 0 auto;
  }
  [data-terminal] .terminal-toolbar .filter-accordion-content {
    order: 3 !important;
  }

  [data-terminal] .terminal-toolbar .symbol-filter-form {
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
    width: auto !important;
  }

  [data-terminal] .terminal-toolbar .symbol-filter-form input {
    flex: 0 0 auto !important;
    width: 110px !important;
    min-width: 110px !important;
  }

  /* Hide the explicit Search submit button — the form still submits on
     Enter, and the button took meaningful space on the inline row. */
  [data-terminal] .terminal-toolbar .symbol-filter-form button[type="submit"] {
    display: none !important;
  }

  [data-terminal] .terminal-toolbar .filter-accordion-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }

  [data-terminal] .terminal-toolbar .filter-field {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
  }

  [data-terminal] .terminal-toolbar .filter-field label {
    font-size: 11px !important;
    color: rgb(var(--ink-3)) !important;
    flex: 0 0 auto !important;
  }

  [data-terminal] .terminal-toolbar .filter-field > div {
    flex: 0 0 auto !important;
  }

  [data-terminal] .terminal-toolbar .filter-field select {
    width: auto !important;
  }

  /* Slim chips — lower vertical padding so they read as oval pills, not
     fat chunky buttons. */
  [data-terminal] .terminal-toolbar input,
  [data-terminal] .terminal-toolbar select {
    padding: 3px 8px !important;
    font-size: 12px !important;
    min-height: 26px !important;
    height: 26px !important;
    border-radius: 999px !important;
  }

  /* Sort + density + signal buttons — same chip language. The .sort-controls
     positioning (flex: 0 0 auto + margin-left: auto for the anchored right
     edge) is set in the earlier "Action group on the right" rule. Here we
     just tune the inner gap. */
  [data-terminal] .terminal-toolbar .sort-controls {
    gap: 6px !important;
  }

  [data-terminal] .terminal-toolbar .compact-mode-toggle,
  [data-terminal] .terminal-toolbar .sort-toggle,
  [data-terminal] .terminal-toolbar .terminal-owned-toggle {
    padding: 3px 10px !important;
    font-size: 11px !important;
    border-radius: 999px !important;
    border-color: rgb(var(--rule-2)) !important;
    line-height: 1.5 !important;
    min-height: 26px !important;
  }

  [data-terminal] .terminal-toolbar .terminal-owned-toggle input {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    padding: 0 !important;
  }

  /* Match every toolbar pill (Sort status chip + Alerts + AI) to the slim
     oval Filters-chip language: 3×10 padding, 11px font, 999px radius,
     26px tall. Default Terminal theme renders them with rounded rectangles
     and chunky padding — replace at the higher .terminal-toolbar specificity
     so it only affects the Toolbar, not signal pills inside cards. */
  [data-terminal] .terminal-toolbar .sort-menu-terminal__status,
  [data-terminal] .terminal-toolbar .term-signal-pill {
    padding: 3px 10px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    min-height: 26px !important;
    height: 26px !important;
    border-radius: 999px !important;
    min-width: 0 !important;
  }

  /* Hide the density toggle ("Normal View" / "Compact" / "Mini") on mobile.
     Density doesn't change much in the locked Terminal board — the cards
     are already compact and the toggle was just visual noise on a narrow
     toolbar. Same for the small dividers around it. */
  [data-terminal] .terminal-toolbar .compact-mode-toggle,
  [data-terminal] .terminal-toolbar .sort-controls > .h-4.w-px {
    display: none !important;
  }

  /* Hide the literal "Sort" word button on mobile — the active-sort chip
     (e.g. "# Total G/L %: Lowest") next to it is now a primary trigger
     (opens the menu on tap) so the word is redundant. Saves a few precious
     pixels and lets the row 1 chrome fit Filters chip + sort chip + Alerts
     + AI without wrapping. */
  [data-terminal] .terminal-toolbar .sort-toggle {
    display: none !important;
  }

  /* ==========================================================================
     Quick-chart icon — visually center between the Sym and Name columns.
     ==========================================================================
     The chart cell sits in its own TD between Sym (56px) and Name (260px).
     Default desktop width is 28px which centers the 14×14 icon inside,
     but flush against Name's leading content. Bump the cell width on
     mobile so there's breathing room on both sides — icon renders
     visually centered between the AMZN ticker text and the company logo
     badge. */
  [data-terminal] table.term-table .term-chart-cell {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    padding: 2px 8px;
  }

  /* ==========================================================================
     Tab strip
     ========================================================================== */
  [data-terminal] .term-tabstrip {
    -webkit-overflow-scrolling: touch;
  }

  [data-terminal] .term-tab {
    font-size: 12px;
  }

  /* Tab management actions (Cmb / Ren / Del / +Col) are too small to be
     thumbable; tab management on mobile is a sharp-knife flow that lives in
     the classic dashboard. Hide on tablet+phone — the tab itself remains
     tappable for switching. */
  [data-terminal] .term-tab-actions {
    display: none;
  }

  /* Hide the Terminal/Columns/Grid/Ledger/Split pill that lives in the
     trailing slot. Phone+tablet are locked to the Terminal board (see
     TerminalApp.jsx layout-lock guard added in C3). */
  [data-terminal] .term-tabstrip-trailing {
    display: none !important;
  }

  /* ==========================================================================
     Trial + unsynced banners — already wrap; just shrink type and ensure
     CTA targets stay 44+px on phone (the catch-all rule below covers most).
     ========================================================================== */
  [data-terminal] .terminal-trial-banner {
    font-size: 11px;
    padding: 8px 12px;
  }

  [data-terminal] .terminal-unsynced-banner-wrap {
    padding: 0 0 6px;
  }

  /* ==========================================================================
     Phone-only refinements
     ========================================================================== */
  @media (max-width: 640px) {
    /* Header metrics: 2 × 3 instead of 3 × 2 on phone. */
    [data-terminal] .term-header-metrics {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    [data-terminal] .term-header-metric:nth-child(3n) {
      border-right: 1px solid rgb(var(--rule));
    }

    [data-terminal] .term-header-metric:nth-child(2n) {
      border-right: none;
    }

    [data-terminal] .term-header-metric__value {
      font-size: 18px;
      font-weight: 600;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    [data-terminal] .term-header-metric__detail {
      font-size: 10px;
    }

    [data-terminal] .term-header-metrics-row {
      padding: 8px 10px;
    }

    /* Ticker: tighter still on phones. */
    [data-terminal] .term-portfolio-ticker {
      font-size: 10px;
    }

    [data-terminal] .term-portfolio-ticker-item {
      padding: 0 8px;
      gap: 4px;
    }

    [data-terminal] .term-portfolio-ticker-symbol {
      font-size: 10px;
    }

    /* Sidebar: the global sidebar's 56px mobile rail otherwise eats the
       padding-left set by `body[data-page="terminal"].has-sidebar
       .page-container` — Terminal content would shrink to ~319px on a 375
       phone. Zero the padding so the hamburger drawer overlays content
       instead of squeezing it. */
    body[data-page="terminal"].has-sidebar .page-container,
    body[data-page="terminal"].has-sidebar #terminal-root {
      padding-left: 0 !important;
    }

    /* Touch targets: every tappable element gets ≥ 44×44px on phone (HIG).
       Both dimensions are enforced so a narrow icon-only button still clears
       the minimum hit area. Override list below restores intentional small
       badges that would look broken at 44px. */
    [data-terminal] button,
    [data-terminal] [role="button"],
    [data-terminal] a {
      min-height: 44px;
      min-width: 44px;
    }

    [data-terminal] .term-tab-dot,
    [data-terminal] .term-portfolio-ticker-item,
    [data-terminal] .terminal-identity-strip__market-dot,
    [data-terminal] .term-signal-pill,
    [data-terminal] .term-signal-pill__icon,
    [data-terminal] .term-tabstrip a,
    [data-terminal] .ledger-sort-btn,
    [data-terminal] .term-sort-header,
    /* Toolbar signal pills (Alerts / AI) and the Sort status chip use
       small min-widths intentionally — without this override the catch-
       all 44×44 touch-target rule blows them up to match the chunky size
       of a primary CTA. Match the slim Filters chip language instead. */
    [data-terminal] .term-toolbar-signal-btn,
    [data-terminal] .terminal-toolbar-signal-controls .term-signal-pill,
    [data-terminal] .terminal-toolbar .sort-menu-terminal__status,
    [data-terminal] .terminal-toolbar .filter-accordion-summary,
    /* "← Switch to classic layout" pill in the masthead. Without this
       override the 44×44 catch-all makes it ~44px tall regardless of
       my padding 3×8 / font 10 — visibly chunky. Stay skinny. */
    [data-terminal] .masthead-controls .back-pill,
    /* Slim header pills (+Stock / Ren / Del / +Col / Cmb) on column and
       tab strip should NOT inflate to 44px under the catch-all touch
       target rule — they're affordances on top of larger row hit areas
       and look cartoonish at 44px tall. */
    [data-terminal] .rail-action,
    [data-terminal] .rail-add,
    [data-terminal] .term-tab-action,
    [data-terminal] .columns-toolbar-button,
    [data-terminal] .term-column-action,
    [data-terminal] .term-panel-head-actions button {
      min-height: unset;
      min-width: unset;
    }

    /* Masthead: brand area shrinks; the "← Switch to classic" link drops
       the arrow to save room. CSS-only — copy stays. */
    [data-terminal] .masthead {
      padding: 6px 10px;
    }

    [data-terminal] .masthead .brand {
      font-size: 16px;
    }

    [data-terminal] .masthead-controls .back-pill {
      font-size: 10px;
      padding: 6px 8px;
    }

    /* Tab strip: tighten padding so more tabs visible without scrolling. */
    [data-terminal] .term-tab {
      font-size: 12px;
    }

    [data-terminal] .term-tab .term-tab-switch {
      padding: 8px 10px;
    }
  }

  /* ==========================================================================
     Inspector → full-screen modal on mobile + tablet
     ==========================================================================
     The Inspector is the position detail surface. On desktop it docks as a
     side rail (Default layout) or right-edge overlay (Ledger / Split). At
     ≤1024px those modes break down — the rail squeezes content, the overlay
     gets sandwiched with the toolbar, and on phones the partial-width drawer
     left half of the screen visible behind the panel.

     Mobile/tablet treatment: the inspector becomes a true full-screen modal
     positioned by viewport coordinates (`fixed` + explicit longhand
     top/right/bottom/left so older Safari can't misinterpret `inset`),
     covering everything including the masthead and toolbar. Z-index 9000
     keeps it above any chrome. !important defeats inline-style escapes (the
     Inspector JSX has `style={{ padding: 0 }}` on the aside which doesn't
     conflict here, but a couple of inner panes use inline padding too —
     we keep those alone and only force the outer position properties).

     The catch-all selectors below cover all three mount points:
       - .inspector  → Default layout's <aside className="inspector">
       - .ledger-detail-shell  → Ledger overlay wrapper
       - .split-detail-shell   → Split layout middle pane wrapper */
  [data-terminal] .inspector,
  [data-terminal] .ledger-detail-shell,
  [data-terminal] .split-detail-shell {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important; /* iOS Safari address bar — dvh accounts for it */
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: rgb(var(--paper)) !important;
    box-shadow: none !important;
    z-index: 9000 !important;
    overflow-y: auto !important;
    padding: 0 !important;
    animation: term-mobile-fade-in 160ms ease-out;
    display: block !important; /* override any flex on .ledger-detail-shell */
  }

  @keyframes term-mobile-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-terminal] .inspector,
    [data-terminal] .ledger-detail-shell,
    [data-terminal] .split-detail-shell {
      animation: none;
    }
  }

  /* Close button is anchored to the viewport top-right via position: fixed
     so it stays visible regardless of how far the user scrolls inside the
     full-screen inspector. (Earlier the rule used position: sticky, but
     the button is nested several flex containers deep — sticky is
     constrained by its nearest scroll/flex ancestor and was getting
     clipped once the inspector header scrolled out of view.) */
  [data-terminal] .inspector .inspector-close,
  [data-terminal] .ledger-detail-shell .inspector-close,
  [data-terminal] .split-detail-shell .inspector-close {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 24px;
    border-radius: 8px;
    flex-shrink: 0;
    /* Above the inspector body itself (z 9000). */
    z-index: 9001 !important;
    background: rgb(var(--paper-3));
    border: 1px solid rgb(var(--rule-2));
  }
}