/* ============================================================
   TitleTown · Slip Analyzer · mobile ledger · v0.18.8
   ------------------------------------------------------------
   Loaded LAST (after windows-v0.17.0), so equal-specificity
   rules here win on source order.

   Measured 2026-09-22 at 393px (iPhone) in headless Chromium,
   not argued from the stylesheets:
   (1) v0.17.0 hid the ALL column at <=900px with
       `.sa-row .sa-cell-career { display: none }` (0,2,0), and the
       flow shell's `body.sa-flow-shell .sa-cell-window
       { display: flex }` (0,2,1) beats it. ALL stayed visible, so
       a row held 11 cells in a 10-track grid: VERDICT wrapped to
       row 2 column 1 (the 28px toggle track, clipped to "MER"),
       and L5..ALL ran off the right edge of an overflow:hidden
       table (x 380..734 on a 333px row). The header did the same
       ("DICT").
   (2) The stat cell's tier flag overflows its 64px track
       (scrollWidth 88), so GOBLIN printed over the line.
   Phones get a stacked card instead of a squeezed table.
   ============================================================ */

/* v0.17.0's intent, at a specificity that wins (tablet widths). */
@media (max-width: 900px) {
    body.sa-flow-shell .sa-row .sa-cell-career { display: none; }
}

@media (max-width: 600px) {
    /* ---- ledger: one card per leg ---- */
    body.sa-flow-shell .sa-row-header { display: none; }
    body.sa-flow-shell .sa-row.sa-row-data {
        grid-template-columns: 16px repeat(5, minmax(0, 1fr));
        column-gap: 6px;
        row-gap: 10px;
        padding: 14px 10px 14px 6px;
        align-items: center;
    }
    body.sa-flow-shell .sa-row-data > .sa-cell-toggle {
        grid-column: 1; grid-row: 1 / span 4; align-self: start; padding-top: 12px;
    }
    body.sa-flow-shell .sa-row-data > .sa-cell-player  { grid-column: 2 / -1; grid-row: 1; min-width: 0; }
    body.sa-flow-shell .sa-row-data > .sa-cell-stat {
        grid-column: 2 / 5; grid-row: 2; min-width: 0;
        display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
        font-size: 14px;
    }
    body.sa-flow-shell .sa-row-data > .sa-cell-line  { grid-column: 5; grid-row: 2; font-size: 15px; font-weight: 600; }
    body.sa-flow-shell .sa-row-data > .sa-cell-side  { grid-column: 6; grid-row: 2; justify-self: end; }

    /* five windows, one track each, labelled (the header row is hidden) */
    body.sa-flow-shell .sa-row-data > .sa-cell-window {
        grid-row: 3; min-width: 0; padding: 6px 2px 5px;
        border: 1px solid var(--border, #1f1f1f); border-radius: 6px;
    }
    body.sa-flow-shell .sa-row .sa-row-data > .sa-cell-career,
    body.sa-flow-shell .sa-row-data > .sa-cell-career { display: flex; }
    body.sa-flow-shell .sa-row-data > .sa-cell-window:nth-child(6)  { grid-column: 2; }
    body.sa-flow-shell .sa-row-data > .sa-cell-window:nth-child(7)  { grid-column: 3; }
    body.sa-flow-shell .sa-row-data > .sa-cell-window:nth-child(8)  { grid-column: 4; }
    body.sa-flow-shell .sa-row-data > .sa-cell-window:nth-child(9)  { grid-column: 5; }
    body.sa-flow-shell .sa-row-data > .sa-cell-window:nth-child(10) { grid-column: 6; }
    body.sa-flow-shell .sa-row-data > .sa-cell-window::before {
        font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em;
        color: var(--text-muted, #6a6a6a); margin-bottom: 3px;
    }
    body.sa-flow-shell .sa-row-data > .sa-cell-window:nth-child(6)::before  { content: 'L5'; }
    body.sa-flow-shell .sa-row-data > .sa-cell-window:nth-child(7)::before  { content: 'L10'; }
    body.sa-flow-shell .sa-row-data > .sa-cell-window:nth-child(8)::before  { content: 'L20'; }
    body.sa-flow-shell .sa-row-data > .sa-cell-window:nth-child(9)::before  { content: 'SZN'; }
    body.sa-flow-shell .sa-row-data > .sa-cell-window:nth-child(10)::before { content: 'ALL'; }
    body.sa-flow-shell .sa-row-data > .sa-cell-window .sa-win-span { font-size: 8px; }
    body.sa-flow-shell .sa-row-data > .sa-cell-window .sa-win-frac {
        font-size: 13px; padding: 3px 2px; width: 100%; box-sizing: border-box; text-align: center;
    }
    body.sa-flow-shell .sa-row-data > .sa-cell-window .sa-win-pct { font-size: 10px; }

    /* verdict pill and its chips on one wrapping line */
    body.sa-flow-shell .sa-row-data > .sa-cell-verdict {
        grid-column: 2 / -1; grid-row: 4; min-width: 0;
        display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
        justify-content: flex-start; gap: 6px;
    }
    body.sa-flow-shell .sa-row-data > .sa-cell-verdict .sa-chip-row {
        display: flex; flex-wrap: wrap; gap: 4px; margin: 0;
    }

    /* ---- results header: title, then badge + re-analyze on one row ---- */
    body.sa-flow-shell .sa-results-header {
        display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    }
    body.sa-flow-shell .sa-results-header-right {
        display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%;
    }

    /* ---- page status strip: DATA wraps, SLIPS stays on screen ---- */
    body.sa-flow-shell .status-block { flex-wrap: wrap; gap: 8px 18px; max-width: 100%; }
    body.sa-flow-shell .status-block .status-item { min-width: 0; }
    body.sa-flow-shell .status-block .status-value { white-space: normal; overflow-wrap: anywhere; }

    /* ---- Reports export: label on top, both buttons side by side ---- */
    body.sa-flow-shell #sa-json-export-row { display: flex; flex-wrap: wrap; gap: 8px; }
    body.sa-flow-shell #sa-json-export-row > :first-child { flex-basis: 100%; }
    body.sa-flow-shell #sa-json-export-row button { flex: 1 1 0; min-width: 0; }
}