/* Terminal mobile + tablet layout — sits alongside terminal-tokens.css.
 *
 * Loaded AFTER terminal-tokens.css in terminal.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 `/terminal`
     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 {
    /* clamp so the value scales with available cell width — 22px is
       enough for 5-char values ($2.7M) at the smallest tablet width,
       28px caps the desktop-side growth at the upper end of the
       tablet range. The 5.5vw middle term scales linearly between.
       Drops the previous fixed 26px which was just barely too big
       for "+$128K" on iPhone landscape (3-col layout, ~310px cells)
       and got clipped to "+$12…". */
    font-size: clamp(22px, 5.5vw, 28px);
    max-width: 100%;
    overflow: hidden;
    /* No ellipsis: the user explicitly preferred the value to scale
       down to fit rather than being truncated to "+$12…". With
       clamp() above the value should always fit, but if a future
       outlier overflows it'll silently clip rather than show "...". */
    white-space: nowrap;
  }

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

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

  /* ----------------------------------------------------------------------
     Mobile-only collapsible header metrics
     ----------------------------------------------------------------------
     The 6-box strip is high signal but eats roughly half the viewport on
     phones. Collapse by default; users can toggle it open via a thin
     full-width band that always stays visible. The strip itself is
     unchanged when expanded.
  */
  [data-terminal] .term-header-metrics-row--mobile {
    padding: 0;
  }
  [data-terminal] .term-header-metrics-toggle {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 12px;
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--ink-3));
    border-bottom: 1px solid rgb(var(--rule));
    /* Tap target ≥ 36px tall */
    min-height: 36px;
    box-sizing: border-box;
  }
  [data-terminal] .term-header-metrics-toggle:hover {
    color: rgb(var(--ink-1));
  }
  /* `all: unset` above wipes out the browser's default focus ring, so
     we restore a visible indicator for keyboard users. Color alone is
     not a sufficient affordance per WCAG 1.4.1 — the outline gives a
     non-color visual cue. */
  [data-terminal] .term-header-metrics-toggle:focus-visible {
    color: rgb(var(--ink-1));
    outline: 2px solid rgb(var(--accent));
    outline-offset: -2px;
  }
  [data-terminal] .term-header-metrics-toggle__caret {
    font-size: 12px;
    line-height: 1;
    margin-left: 8px;
    color: rgb(var(--ink-4));
  }
  [data-terminal] .term-header-metrics-row--mobile #term-header-metrics-content {
    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: 16px !important;
    min-height: 32px !important;
    height: 32px !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 {
    display: inline-flex !important;
    align-items: center !important;
    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;
  }

  /* The mobile chart-cell width override now lives in the Ledger view
     section below (50px wide, 0 padding) — Ledger is the only board that
     renders on mobile (all other layouts are locked out at ≤1024px in
     TerminalApp.jsx), so a single override there is sufficient. */

  /* ==========================================================================
     Ledger view — mobile-only refinements
     ==========================================================================
     The Ledger is the default board on mobile (see TerminalApp.jsx layout
     resolver). The desktop ledger crams 14+ numeric columns inside a fixed
     1256px min-width — that's already a horizontal scroll on phones AND
     leaves each numeric column ~50px which is too tight for "+10.81%" or
     "$15904". Bump the min-width here so each numeric column gets ~80px;
     the table still scrolls but values stop colliding.
  */

  /* 1. Auto-size numeric columns on mobile so each is exactly as wide
        as its widest content (no more, no less). Switch from
        table-layout: fixed (which forces equal-share of leftover
        space) to auto so the browser sizes per-column based on
        max content. Drop min-width — the table will be as wide as
        the sum of its content; horizontal scroll engages naturally
        if needed. */
  [data-terminal] table.ledger-table {
    table-layout: auto;
    min-width: 0;
  }
  [data-terminal] table.ledger-table-wide {
    min-width: 0;
  }

  /* 2. Horizontal cell padding bumped from 12px → 16px so numeric values
        in adjacent right-aligned cells don't visually touch. */
  [data-terminal] table.ledger-table th,
  [data-terminal] table.ledger-table td {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 3. Mobile symbol cell — the locked left "card" hosting logo,
        ticker, alert/AI pills, chart icon, and the company name.
        Logo + chart + name + signals columns are all skipped on
        mobile (see visibleColumns filter in LedgerBoard.jsx) and
        their content folds into this cell. The cell width is
        enforced by an inner div (cell-level max-width is unreliable
        under table-layout: auto). */
  [data-terminal] table.ledger-table .term-ledger-symbol-cell {
    text-align: left;
    padding: 4px 4px 4px 4px;
  }
  /* Symbol col gets a dedicated class hook so we don't have to rely
     on positional :nth-child (which breaks if the colgroup is ever
     reordered). */
  [data-terminal] table.ledger-table col.term-ledger-col-symbol {
    width: 150px !important;
  }
  /* Inner div is the actual width-cap. Auto-layout sees the div's
     fixed width and sizes the column to it; without the inner div,
     long names (e.g. "BitMine Immersion Technologies Inc") would
     expand the column to their intrinsic max-content and blow out
     the locked left strip. */
  [data-terminal] .term-ledger-symbol-cell__inner {
    width: 150px;
    max-width: 150px;
    overflow: hidden;
  }

  /* 8. Mobile symbol cell layout. Top row: ticker + inline chart
        button. Second row: trimmed company name (or option strike).
        Chart cell has been removed from the table on mobile (see
        visibleColumns filter in LedgerBoard.jsx) — the chart icon
        lives here next to the ticker now. */
  [data-terminal] .term-ledger-symbol-cell__top {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  /* Logo, when rendered inline inside the symbol cell on mobile
     (TerminalLogoCell `inline` prop). Constrains size so it
     doesn't stretch the row vertically. */
  [data-terminal] .term-logo-inline {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    width: 20px;
    height: 20px;
    line-height: 0;
  }
  [data-terminal] .term-logo-inline > * {
    width: 20px;
    height: 20px;
    border-radius: 4px;
  }
  [data-terminal] .term-ledger-symbol-cell__ticker {
    /* Bigger and crisper than before — the previous size was too
       small after the row got tightened. Keep the bold-serif look
       inherited from the parent .serif class. */
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 1.1;
  }
  /* Chart icon stays anchored to the cell's right edge regardless
     of whether the row has signals pills, so its position is
     consistent across rows. margin-left: auto on the chart pushes
     it past whatever's between the ticker and itself. */
  [data-terminal] .term-ledger-symbol-cell__chart {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    /* Override the ticker cell's serif inheritance for the icon
       wrapper so the SVG/button styling isn't accidentally affected. */
    font-family: initial;
    font-weight: initial;
  }
  /* Alert / AI pills sit between the ticker and the chart icon (the
     SIG column is dropped on mobile). No auto margin so they hug
     the ticker — the chart's auto margin handles the right anchor. */
  [data-terminal] .term-ledger-symbol-cell__signals {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    font-family: initial;
    font-weight: initial;
  }
  /* Brokerage badge moved out of the inline ticker row (was
     squeezing the chart icon) into its own rightmost "Acct"
     column on mobile. */
  [data-terminal] .term-ledger-brokerage-cell {
    text-align: center;
  }
  /* Slightly smaller pills inside the symbol cell so they don't
     blow up the row height. */
  [data-terminal] .term-ledger-symbol-cell__signals .term-signal-pill {
    padding: 1px 4px;
    font-size: 9px;
  }
  [data-terminal] .term-ledger-symbol-cell__signals .term-signal-pill__icon {
    width: 9px;
    height: 9px;
  }
  /* Row 2 wraps the name + (optional) ER pill so they share a flex
     row with the pill pushed to the right. Without this wrapper the
     ER pill would dangle on its own line below the name. */
  [data-terminal] .term-ledger-symbol-cell__row2 {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
  }
  [data-terminal] .term-ledger-symbol-cell__name {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Smaller, secondary visual weight so the ticker keeps its
       prominence as the primary identifier. Sits flush to the cell's
       leftmost edge (the cell hosts the logo too, but the name row
       spans the full cell width below row 1). */
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.25;
    color: rgb(var(--ink-3));
  }
  /* Tighten the ER pill so it fits next to the name without blowing
     row height on the narrow mobile cell. */
  [data-terminal] .term-ledger-symbol-cell__row2 .term-row-earnings-pill {
    flex: 0 0 auto;
  }
  /* Chart and Name columns are JSX-skipped on mobile (see
     LedgerBoard.jsx visibleColumns / colgroup conditionals). Their
     content folds into the symbol cell. The CSS rules that used to
     size / hide those cells are no longer needed — they don't render
     on mobile at all. */

  /* 5. Spread / multi-leg option names: stack legs on separate lines so
        the row reads as
          DLO - $20 Call exp 12/17/27
                $13 Call exp 12/17/27
        instead of one long inline string with " / " in the middle. The
        --term-spread-indent custom property is set inline in JSX from
        the FIRST leg's "TICKER - " prefix length (in monospace ch units)
        so the second leg's "$" lines up under the first leg's "$".
        Desktop keeps the original inline layout — only the .term-spread-
        name marker class changes anything. */
  [data-terminal] .term-name-text--block.term-spread-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Defeat the line-clamp/box rules from the parent .term-name-text--
       block mobile rule so each leg is fully visible. */
    -webkit-line-clamp: none;
    line-clamp: none;
    -webkit-box-orient: initial;
    white-space: normal;
    word-break: normal;
  }
  [data-terminal] .term-spread-name__sep {
    display: none;
  }
  [data-terminal] .term-spread-name__leg {
    white-space: nowrap;
  }
  /* First leg: no indent. Subsequent legs: indent by ticker-prefix width. */
  [data-terminal] .term-spread-name__leg + .term-spread-name__sep + .term-spread-name__leg {
    padding-left: var(--term-spread-indent, 6ch);
  }

  /* 6. Mobile alert / AI insight modal. Replaces the inline-expansion
        approach (which couldn't stay anchored in the viewport when the
        user had scrolled the wide ledger table horizontally) with a
        floating modal centered over the page. Tap the backdrop or
        press Escape (handled in JSX) to close — no scroll-back
        required. Gated to mobile in the JSX via isMobileViewport.
        Desktop continues to use the existing slide-out side panel. */
  [data-terminal] .ledger-signals-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgb(0 0 0 / 0.62);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    /* iOS bottom-bar safe area so the modal isn't tucked under the
       home indicator on full-bleed screens. */
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    -webkit-tap-highlight-color: transparent;
  }
  [data-terminal] .ledger-signals-modal {
    width: 100%;
    max-width: 520px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: rgb(var(--paper-2));
    border: 1px solid rgb(var(--rule));
    border-radius: 14px;
    box-shadow: 0 20px 48px rgb(0 0 0 / 0.55);
    overflow: hidden;
  }
  [data-terminal] .ledger-signals-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid rgb(var(--rule));
    background: rgb(var(--paper-3));
  }
  [data-terminal] .ledger-signals-modal__eyebrow {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--ink-2));
  }
  [data-terminal] .ledger-signals-modal__close {
    all: unset;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--ink-3));
    font-size: 22px;
    line-height: 1;
  }
  [data-terminal] .ledger-signals-modal__close:hover,
  [data-terminal] .ledger-signals-modal__close:focus-visible {
    color: rgb(var(--ink-1));
    background: rgb(var(--paper-4));
  }
  [data-terminal] .ledger-signals-modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px;
    -webkit-overflow-scrolling: touch;
  }
  [data-terminal] .ledger-signals-modal .term-signal-card {
    margin-bottom: 10px;
  }
  [data-terminal] .ledger-signals-modal .term-signal-card:last-child {
    margin-bottom: 0;
  }

  /* 7. Sticky-pin the leftmost three columns (logo + ticker symbol +
        quick chart) so users can scroll horizontally to reach the
        numeric columns without losing the row's identity — the same
        UX pattern used on the Command Center holdings table. The
        sticky `left` values are the cumulative widths of preceding
        sticky columns: logo at 0, symbol at 40 (logo width), chart
        at 92 (logo + symbol = 40 + 52). The chart column is widened
        to 50px on mobile by rule (3) above; the sticky `left` for
        anything AFTER chart would be 142, but no other column is
        pinned.

        Sticky cells need an opaque background or scrolled content
        bleeds through. We mirror the row's intent via a CSS variable
        --term-row-bg that selected/hover states can override per-row
        below. background-clip: padding-box keeps cell borders crisp.
        The trailing box-shadow on the chart cell signals there's
        more content to the right. */
  [data-terminal] table.ledger-table {
    --term-row-bg: rgb(var(--paper));
  }
  /* Match the rule at line 2007 in terminal-tokens.css: selected rows
     visually use a translucent accent overlay (rgb(var(--accent) /
     0.08) on top of var(--paper)). For sticky cells we need an OPAQUE
     equivalent so it covers scrolled content. Derive it from the theme
     tokens via color-mix so the selected color stays right whether
     paper is the dark Terminal default (~rgb(14 15 18)) or any future
     light-theme variant — the prior hard-coded light cream was wrong
     on the dark palette. */
  [data-terminal] table.ledger-table .ledger-row.sel {
    --term-row-bg: color-mix(in srgb, rgb(var(--paper)) 92%, rgb(var(--accent)) 8%);
  }
  [data-terminal] table.ledger-table .term-ledger-symbol-cell,
  [data-terminal] table.ledger-table th.term-ledger-th--symbol {
    position: sticky;
    z-index: 2;
    background-color: var(--term-row-bg);
    background-clip: padding-box;
  }
  /* Header cells need a slightly higher z-index so they stay above
     row cells AND above other sticky content during scroll. */
  [data-terminal] table.ledger-table th.term-ledger-th--symbol {
    z-index: 4;
    background-color: rgb(var(--paper-2));
  }

  /* Sticky-pin every header cell to the top of the table-shell so
     the column labels stay visible when the user scrolls down the
     position list. Combined with the left-pinned symbol header above,
     the top-left corner cell gets pinned in BOTH dimensions (z-index
     already higher there). */
  [data-terminal] table.ledger-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: rgb(var(--paper-2));
  }
  /* Symbol is the only sticky column on mobile (logo / chart cells
     are JSX-skipped so no longer in DOM). Pin to left edge. */
  [data-terminal] table.ledger-table .term-ledger-symbol-cell,
  [data-terminal] table.ledger-table th.term-ledger-th--symbol {
    left: 0;
  }
  /* Right-edge shadow on the symbol cell (the rightmost sticky
     column on mobile after chart was inlined). Appears only when
     the table is scrolled horizontally — indicates "more →". */
  [data-terminal] table.ledger-table .term-ledger-symbol-cell,
  [data-terminal] table.ledger-table th.term-ledger-th--symbol {
    box-shadow: 6px 0 6px -4px rgb(0 0 0 / 0.5);
  }

  /* ==========================================================================
     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;
  }

  /* ==========================================================================
     Edge-to-edge content on small screens (≤768px)
     ==========================================================================
     The desktop sidebar shoves a 240px `padding-left` onto `.page-container`
     so terminal content sits to the right of the rail. sidebar.css turns
     the sidebar into a slide-over drawer at ≤768px and already zeroes the
     `.page-container` padding there — but it scopes those rules to .dash-
     container/.page-container/.history-container generally; the Terminal's
     `body[data-page="terminal"]` rule re-asserts a 240px padding even on
     small screens. Match sidebar.css's 768px breakpoint here so the
     Terminal page goes edge-to-edge on phones AND small tablets where the
     sidebar is a drawer, but stays clear of the fixed rail on iPad Pro
     (1024) and other tablets where the sidebar is still a column. */
  @media (max-width: 768px) {
    body[data-page="terminal"].has-sidebar .page-container,
    body[data-page="terminal"].has-sidebar #terminal-root {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* Tighten right-side padding on every chrome element so content
       sits as flush to the right edge as it does to the left. The
       symmetric `12px` paddings the masthead / ticker / metrics row
       inherit from desktop leave a visibly larger gap on the right
       on phones because right-anchored elements (back-pill button,
       header-metrics caret) end at the padding boundary while left-
       anchored elements (hamburger, brand text) span to the icon
       edge — visually asymmetric. Cap right padding at 4px. Left
       padding kept at the existing values so the hamburger / brand
       still have breathing room from the screen edge. */
    [data-terminal] .masthead {
      padding-right: 4px !important;
    }
    [data-terminal] .term-portfolio-ticker {
      padding-right: 0;
    }
    [data-terminal] .term-header-metrics-row {
      padding-right: 4px;
    }
    [data-terminal] .terminal-toolbar .dashboard-filter-bar {
      padding-right: 4px !important;
    }
    [data-terminal] .term-header-metrics-toggle {
      padding-right: 8px;
    }
  }

  /* ==========================================================================
     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 {
      /* Phone gets a smaller fixed size since the 2-col layout has
         narrower cells. 16px fits "+$128K" comfortably; ellipsis
         removed so anything that does overflow clips silently
         rather than showing "...". */
      font-size: 16px;
      font-weight: 600;
      max-width: 100%;
      overflow: hidden;
      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 padding-left zero now applies across all mobile widths via
       the parent rule above (no longer phone-only). */

    /* 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));
  }
}