/* CP253 MB: final shared mobile cascade. Desktop geometry is untouched. */
.mobile-menu-toggle, .mobile-filter-open, .mobile-overlay-close { display: none; }

@media (max-width: 1024px) {
  html { scroll-padding-top: calc(64px + env(safe-area-inset-top)); }
  body.stitch-workspace {
    --tap: 44px;
    --fs-body: 16px; --fs-lead: 16px; --fs-card: 16px;
    --fs-meta: 16px; --fs-micro: 14px; --fs-label: 15px;
    --remaining-body: 16px; --remaining-meta: 16px; --remaining-label: 15px;
    --page-gutter: 14px;
    overflow-wrap: anywhere;
  }
  body.stitch-workspace .fa-app { display: block; }
  body.stitch-workspace .fa-side { display: none; }
  body.stitch-workspace .app-shell { margin: 0; padding-top: calc(60px + env(safe-area-inset-top)); }
  body.stitch-workspace .appbar {
    left: 0; height: calc(60px + env(safe-area-inset-top)); min-height: 60px;
    padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
    gap: 4px;
  }
  body.stitch-workspace .appbar .icon-button { min-width: 44px; min-height: 44px; height: 44px; padding: 8px; }
  body.stitch-workspace :is(.shell-commands, .shell-mode, .shell-refresh > span, .shell-slot-label) { display: none; }
  body.stitch-workspace .appbar .mobile-only { display: inline-flex; }
  body.stitch-workspace .shell-context { flex: 1; min-width: 0; display: grid; gap: 1px; }
  body.stitch-workspace .shell-context > .freshness { border: 0; padding: 0; max-width: 100%; font-size: 12px !important; }
  body.stitch-workspace .freshness-full { display: none; }
  body.stitch-workspace .freshness-compact { display: inline; }
  body.stitch-workspace .appbar-clock { font-size: 14px !important; }
  body.stitch-workspace .appbar-status { gap: 0; }
  body.stitch-workspace .workspace-main {
    padding: 16px max(14px, env(safe-area-inset-right)) 24px max(14px, env(safe-area-inset-left));
    min-width: 0; width: 100%;
  }
  body.stitch-workspace .workspace-footer {
    margin-bottom: calc(80px + env(safe-area-inset-bottom)); padding: 12px 14px;
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  body.stitch-workspace .page-heading h1 { font-size: 24px !important; }
  body.stitch-workspace .page-description { margin-top: 6px; }
  body.stitch-workspace[data-page="today"] .today-heading-caption { display: none; }
  body.stitch-workspace :is(.route-page, .shelf-stack, .shelf, .fa-card, .fa-hero, .card-grid, .table-wrap, .metric-strip,
    .fa-card-body, .shelf-body, .fa-card-head, .shelf-header, .research-card, .research-layout, .ext-filters,
    .filter-group, .filter-control, .mobile-table-scroll, .mobile-filter-dialog, .mobile-dialog-body) { min-width: 0; max-width: 100%; }
  body.stitch-workspace :is(.route-page, .shelf-stack, .shelf, .fa-card, .fa-hero, .fa-card-body, .shelf-body,
    .research-card, .research-layout) > * { min-width: 0; }
  body.stitch-workspace :is(.fa-card-head, .shelf-header, .fa-hero-head, .card-topline, .card-actions,
    .fa-card-foot, .section-heading, .run-header) { flex-wrap: wrap; gap: 8px; }
  body.stitch-workspace :is(.fa-card-body, .shelf-body, .research-card) { padding: 14px; }
  body.stitch-workspace :is(.card-grid, .risk-overview, .stitch-results-bottom, .research-layout,
    .public-narrative-panel-cards, .stitch-ai-check-grid, .stitch-ai-composite, .ai-host-status-models,
    .today-evidence-matrix, .system-usage, .vpn-status-grid, .results-cohort-charts) { grid-template-columns: minmax(0, 1fr) !important; }
  body.stitch-workspace :is(.metric-strip, .summary-grid, #page-summary) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.stitch-workspace :is(.metric, .ai-usage-kpis > div) { min-width: 0; container-type: inline-size; }
  body.stitch-workspace :is(.metric > strong, .ai-usage-kpis > div > strong) {
    display: block; max-width: 100%; min-width: 0;
    font-size: clamp(18px, 13cqi, 26px) !important;
    white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important;
  }
  body.stitch-workspace :is(.metric > strong, .ai-usage-kpis > div > strong)[data-kpi-type="text"] {
    white-space: normal !important; overflow-wrap: anywhere !important;
  }
  body.stitch-workspace :is(.metric > span, .metric > small, .ai-usage-kpis > div > small) {
    white-space: normal; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important;
  }
  body.stitch-workspace .mobile-kpi-wide { grid-column: 1 / -1; }
  body.stitch-workspace .mobile-kpi-word { display: inline !important; white-space: nowrap !important; font: inherit !important; color: inherit; }
  body.stitch-workspace :is(h2, h3, h4, .card-note, .mono, code) { overflow-wrap: anywhere; }
  body.stitch-workspace :is(button, .button, .primary-action, input:not([type="hidden"]), select, textarea, summary) {
    min-height: 44px !important; min-width: 44px; max-width: 100%;
  }
  body.stitch-workspace :is(button, .button, .primary-action, summary) { white-space: normal; }
  body.stitch-workspace a:not(.skip-link) {
    display: inline-flex; align-items: center; min-height: 44px !important; min-width: 44px; max-width: 100%;
    white-space: normal; overflow-wrap: anywhere;
  }
  body.stitch-workspace :is(.filter-group, .ledger-filters .filter-control, .ext-filters > label) { flex: 1 1 100%; min-width: 0; }
  body.stitch-workspace :is(.filter-group select, .filter-group input, .filter-control select, .filter-control input) { width: 100%; }
  body.stitch-workspace :is(.sport-tabs, .result-mode-tabs, .stitch-results-sections, .research-controls,
    .ledger-filters, .line-filters, .ext-filters, .results-date-range, .results-odds-filters) {
    display: flex !important; flex-wrap: wrap; gap: 8px; width: 100%; min-width: 0;
  }
  body.stitch-workspace :is(.sport-tabs, .result-mode-tabs) > button { flex: 1 1 100px; }
  body.stitch-workspace .result-mode-tabs > button[aria-pressed="true"] { background: var(--accent) !important; color: var(--ink) !important; }
  body.stitch-workspace .stitch-results-sections > a { flex: 1 1 200px; }
  body.stitch-workspace :is(.table-wrap, .mobile-table-scroll) {
    width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.stitch-workspace :is(.table-wrap, .mobile-table-scroll):focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  body.stitch-workspace :is(.table-wrap, .mobile-table-scroll) > table { min-width: 640px; }
  body.stitch-workspace pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; }
  body.stitch-workspace :is(img, canvas, svg:not(.fa-sprite)) { max-width: 100%; }
  body.stitch-workspace :is(.fa-chart, .chart-wrap, .money-series-chart) { width: 100%; min-width: 0; overflow: hidden; }
  body.stitch-workspace :is(.fa-chart, .chart-wrap, .money-series-chart) > svg { width: 100%; height: auto; display: block; }
  body.stitch-workspace .mobile-nav {
    display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line);
    padding: 4px max(4px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    background: var(--side-bg, var(--panel));
  }
  body.stitch-workspace .mobile-nav > :is(a, button) {
    display: grid; place-content: center; justify-items: center; gap: 3px;
    width: 100%; min-width: 0; min-height: 56px; padding: 4px 2px; border: 0; border-radius: 4px;
    color: var(--muted); background: transparent; font: 600 11px/1.3 var(--font) !important; text-decoration: none;
  }
  body.stitch-workspace .mobile-nav > :is(a, button) svg { width: 22px; height: 22px; }
  body.stitch-workspace .mobile-nav > :is(a, button)[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
  body.stitch-workspace .mobile-nav > :is(a, button) > span { white-space: normal; overflow: visible; }
  body.stitch-workspace :is(.mobile-filter-open, .mobile-menu-toggle) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
  body.stitch-workspace .mobile-filter-open { width: 100%; margin: 4px 0 12px; padding: 10px 14px; color: var(--text); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 6px; }
  body.stitch-workspace dialog {
    position: fixed; inset: 0; margin: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh;
    padding: 0; border: 0; border-radius: 0; color: var(--text); background: var(--panel);
    overflow-y: auto; overscroll-behavior: contain;
  }
  body.stitch-workspace dialog::backdrop { background: #0009; }
  body.stitch-workspace.mobile-dialog-open { overflow: hidden; }
  body.stitch-workspace .mobile-dialog-header {
    position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: calc(8px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
    border-bottom: 1px solid var(--line); background: var(--panel);
  }
  body.stitch-workspace .mobile-dialog-header h2 { margin: 0; }
  body.stitch-workspace .mobile-dialog-body {
    padding: 16px max(14px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }
  body.stitch-workspace .mobile-menu-links { display: grid; gap: 4px; }
  body.stitch-workspace .mobile-menu-links > a { padding: 12px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
  body.stitch-workspace .mobile-menu-links > a[aria-current="page"] { color: var(--accent); }
  body.stitch-workspace .mobile-menu-themes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  body.stitch-workspace .mobile-menu-themes > button { padding: 10px 12px; }
  body.stitch-workspace .mobile-menu-themes > button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
  body.stitch-workspace .fa-overlay { padding: 0; place-items: stretch; }
  body.stitch-workspace :is(.fa-panel, .fa-sheet) {
    width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0;
    padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
  }
  body.stitch-workspace .fa-panel { position: relative; padding-top: calc(64px + env(safe-area-inset-top)); }
  body.stitch-workspace .mobile-overlay-close { display: inline-flex; position: absolute; right: max(14px, env(safe-area-inset-right)); top: calc(8px + env(safe-area-inset-top)); }
  body.stitch-workspace .fa-palette-list { max-height: calc(100dvh - 180px - env(safe-area-inset-top)); overflow-y: auto; }
  body.stitch-workspace .fa-palette-list [role="option"] { min-height: 44px; }
  body.stitch-workspace.login-body { min-height: 100dvh; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  body.stitch-workspace .login-shell { width: min(440px, 100%); min-width: 0; }
  body.stitch-workspace .login-card { padding: 24px 20px; }
  body.stitch-workspace .login-form :is(input, button) { width: 100%; font-size: 16px !important; }
}

@media (max-width: 400px) {
  body.stitch-workspace[data-page] :is(.metric-strip, .summary-grid, #page-summary, .ai-usage-kpis) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 600px) {
  body.stitch-workspace[data-page="polymarket"] .ms-grid { grid-template-columns: minmax(0, 1fr); }
  body.stitch-workspace :is(.research-controls, .ext-filters, .journal-fields, .basketball-live-grid) { grid-template-columns: minmax(0, 1fr) !important; }
  body.stitch-workspace .product-route { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.stitch-workspace .product-route > a { font-size: 14px; }
  body.stitch-workspace .exact-outcome { grid-template-columns: minmax(0, 1fr) !important; }
  body.stitch-workspace .exact-selection { grid-column: 1; }
}

/* This ledger already has labeled card rows on phones; do not widen those cards
   together with the tables that still need horizontal scrolling. */
@media (max-width: 720px) {
  body.stitch-workspace :is(.table-wrap, .mobile-table-scroll) > table.signal-ledger { min-width: 0; width: 100%; }
  body.stitch-workspace .signal-ledger td { white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 1024px) and (max-height: 500px) {
  body.stitch-workspace .mobile-nav > :is(a, button) { display: flex; min-height: 44px; gap: 6px; }
  body.stitch-workspace .mobile-nav > :is(a, button) svg { width: 18px; height: 18px; }
  body.stitch-workspace .login-brand { margin-bottom: 12px; }
  body.stitch-workspace .login-logo { width: 44px; height: 44px; }
}