/* ══════════════════════════════════════════════════════════════════════════
   Phone layer (≤768px)
   ──────────────────────────────────────────────────────────────────────────
   Loaded last (after any page stylesheet) so it can settle the small-screen
   layout in one place. The 2026-10-16 review found the site worked on a phone
   but did not feel built for one:

   * the top bar wrapped onto two or three rows (about 185px of chrome before
     any content), and the dashboard's style switcher pushed the page sideways;
   * the 31-item drawer behind a hamburger was the only way to move around;
   * every card and metric went full width with desktop padding, so the
     dashboard was about 16,000px tall;
   * flex rows such as the stale-data banner squeezed their text into columns.

   The answer is the shape native finance apps use: a single-row app bar, a
   bottom tab bar for the five most-used places (with "More" opening the full
   drawer), two-up metric tiles, edge-to-edge sections and a full-screen
   ticker sheet. Desktop is untouched: every rule sits behind the breakpoint
   except the tab bar's default display:none.
   ══════════════════════════════════════════════════════════════════════════ */

.tabbar { display: none; }
.topbar-search { display: none; }

@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; }
  body.theme-nova {
    -webkit-tap-highlight-color: transparent;
    /* Room for the tab bar, plus the home indicator on notched phones. */
    padding-bottom: calc(68px + env(safe-area-inset-bottom));
    overscroll-behavior-y: none;
  }
  body.theme-nova a, body.theme-nova button { touch-action: manipulation; }

  /* iOS zooms the page into any focused field under 16px and never zooms back.
     Every text entry is 16px on a phone for that reason alone. */
  body.theme-nova input:not([type=checkbox]):not([type=radio]),
  body.theme-nova select,
  body.theme-nova textarea { font-size: 16px; }

  /* ── App bar: one row, ~52px ──────────────────────────────────────────── */
  body.theme-nova .topbar {
    flex-wrap: nowrap;
    gap: .6rem;
    min-height: 52px;
    padding: calc(.45rem + env(safe-area-inset-top)) .9rem .45rem;
    background: var(--topbar-bg);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
  }
  /* Navigation moved to the tab bar's "More", so the hamburger goes. */
  body.theme-nova .mobile-nav-toggle { display: none; }
  body.theme-nova .topbar-left { flex: 1 1 auto; min-width: 0; }
  /* Page subtitles are free text set per template (inline-styled spans), so
     they are clamped here rather than in twenty templates. */
  body.theme-nova .topbar-left > span,
  body.theme-nova .topbar-left > div {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .82rem !important;
    font-weight: 600;
    color: var(--text) !important;
    letter-spacing: 0 !important;
  }
  body.theme-nova .topbar-date {
    margin-left: 0;
    padding: 0;
    background: none;
    border: 0;
  }
  body.theme-nova .topbar-right {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: .45rem;
  }
  body.theme-nova .topbar-right > :not(.btn-refresh):not(.topbar-search):not(button):not(a) {
    display: none;
  }
  body.theme-nova .topbar .btn-refresh {
    min-height: 34px;
    padding: .35rem .75rem;
    font-size: .76rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
  }
  body.theme-nova .topbar-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text);
    cursor: pointer;
  }

  /* ── Bottom tab bar ───────────────────────────────────────────────────── */
  .tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 260;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: var(--topbar-bg);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
    border-top: 1px solid var(--border);
  }
  .tabbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 48px;
    padding: 4px 2px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--muted);
    font: 600 .66rem/1.1 var(--font);
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
  }
  .tabbar-item .nav-icon-svg { width: 22px; height: 22px; }
  .tabbar-item.active { color: var(--accent); }
  .tabbar-item:active { background: var(--bg3); }
  body.sidebar-open .tabbar-more { color: var(--accent); }

  /* ── Drawer ───────────────────────────────────────────────────────────── */
  body.theme-nova .sidebar {
    width: min(84vw, 320px);
    padding-top: env(safe-area-inset-top);
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }
  body.theme-nova .sidebar .nav-item { min-height: 44px; font-size: .9rem; }
  body.theme-nova .sidebar-search-input { min-height: 40px; }
  body.theme-nova .sidebar-search-btn { min-width: 40px; min-height: 40px; }
  body.sidebar-open { overflow: hidden; }

  /* ── Page rhythm ──────────────────────────────────────────────────────── */
  body.theme-nova .main-content { padding-left: .75rem; padding-right: .75rem; }
  body.theme-nova .section {
    margin: .75rem 0;
    padding: 1rem .9rem;
    border-radius: var(--radius-md);
  }
  body.theme-nova .section-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .78rem;
  }
  body.theme-nova .section-icon {
    width: 30px; height: 30px; flex: 0 0 30px;
    border-radius: var(--radius-sm);
  }
  body.theme-nova .section-icon .nav-icon-svg { width: 16px; height: 16px; }
  body.theme-nova .section-rail { padding: 6px .75rem; }
  body.theme-nova .section-rail-link { padding: 6px 11px; font-size: .74rem; }

  /* Two-up tiles instead of one card per row. A 2-up grid of 160px tiles
     reads like a watchlist; a stack of full-width cards reads like a desktop
     page that ran out of room. */
  body.theme-nova .metrics-grid,
  body.theme-nova .indices-grid,
  body.theme-nova .risk-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .5rem;
  }
  body.theme-nova .sectors-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
  body.theme-nova .metric-card,
  body.theme-nova .risk-card { padding: .65rem .7rem; min-width: 0; }
  body.theme-nova .metric-price { font-size: 1rem; overflow-wrap: anywhere; }
  body.theme-nova .risk-card-signal { font-size: .8rem; overflow-wrap: anywhere; }
  body.theme-nova .sector-card { padding: .5rem .55rem; min-width: 0; }
  body.theme-nova .sector-name { font-size: .64rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.theme-nova .news-list.wide { grid-template-columns: 1fr !important; }

  /* ── Dashboard header blocks ──────────────────────────────────────────── */
  body.theme-nova .risk-banner {
    margin: .75rem 0 .5rem;
    padding: .65rem 1rem;
    gap: .75rem;
  }
  body.theme-nova .risk-label { font-size: 1.05rem; }
  body.theme-nova .risk-sub { font-size: .7rem; text-align: right; }

  body.theme-nova .stale-banner {
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
    margin: 0 0 .5rem;
    padding: .7rem .9rem;
    border-radius: var(--radius-md);
  }

  body.theme-nova .headline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .5rem;
    margin: .5rem 0 .75rem;
  }
  body.theme-nova .headline-card {
    padding: .8rem .85rem;
    border-radius: var(--radius-md);
    min-width: 0;
  }
  /* Five indices: the lead one spans the row, the other four sit two-up. */
  body.theme-nova .headline-card:first-child { grid-column: 1 / -1; }
  body.theme-nova .headline-price { font-size: 1.2rem; margin-top: .3rem; overflow-wrap: anywhere; }
  body.theme-nova .headline-card:first-child .headline-price { font-size: 1.6rem; }
  body.theme-nova .headline-label { font-size: .7rem; }
  body.theme-nova .headline-sym { display: none; }
  body.theme-nova .headline-card:first-child .headline-sym { display: inline; }
  body.theme-nova .headline-arrow { width: 1.3rem; height: 1.3rem; font-size: .55rem; }
  body.theme-nova .headline-change { font-size: .68rem; padding: .1rem .45rem; }

  body.theme-nova .mover-event { padding: .65rem .7rem; }
  body.theme-nova .mover-event .mover-title { font-size: .92rem; line-height: 1.35; }
  body.theme-nova .mover-title { min-width: 0; }
  body.theme-nova .mover-summary { padding-left: 0; }
  body.theme-nova .macro-panel,
  body.theme-nova .news-panel { padding: .75rem .8rem; }
  body.theme-nova .news-title { font-size: .9rem; line-height: 1.4; }
  body.theme-nova .news-summary { font-size: .78rem; }
  body.theme-nova .stock-news-title { font-size: .8rem; }
  body.theme-nova .footer { padding: 1rem .25rem; text-align: center; font-size: .7rem; }

  /* ── Other pages ──────────────────────────────────────────────────────── */
  body.theme-nova .sidebar-logo-wrap { padding: 14px 16px 6px; }
  body.theme-nova .sidebar-logo-img { max-height: 30px; width: auto; }

  body.theme-nova .pf-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: .75rem 0 .25rem;
    gap: .5rem;
  }
  body.theme-nova .pf-summary-card { padding: .65rem .75rem; min-width: 0; }
  body.theme-nova .pf-risk-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .5rem;
  }

  /* Today queue: the snooze date gets its own row instead of crowding the
     two buttons; all three are thumb-sized. */
  body.theme-nova .today-actions { flex-wrap: wrap; justify-content: stretch; gap: .5rem; }
  body.theme-nova .today-actions input { order: -1; flex: 1 1 100%; min-height: 40px; }
  body.theme-nova .today-actions button { flex: 1 1 0; min-height: 40px; font-size: .78rem; }

  /* Watchlist as a phone list: logo, ticker, price, change. Name, market
     cap, P/E and range stay in the ticker sheet one tap away. */
  body.theme-nova .wl-table { display: table; overflow: visible; width: 100%; }
  body.theme-nova .wl-table th:nth-child(3), body.theme-nova .wl-table td:nth-child(3),
  body.theme-nova .wl-table th:nth-child(6), body.theme-nova .wl-table td:nth-child(6),
  body.theme-nova .wl-table th:nth-child(7), body.theme-nova .wl-table td:nth-child(7),
  body.theme-nova .wl-table th:nth-child(8), body.theme-nova .wl-table td:nth-child(8) { display: none; }
  body.theme-nova .wl-add-bar { gap: .5rem; }
  body.theme-nova .wl-add-btn { min-height: 42px; }

  /* ── Ticker sheet: full screen, slides up ─────────────────────────────── */
  body.theme-nova .modal-overlay {
    padding: 0;
    align-items: stretch;
    overflow: hidden;
  }
  body.theme-nova .modal-box {
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: calc(3.25rem + env(safe-area-inset-top)) 1rem calc(1.5rem + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
    animation: sheet-up .22s ease-out;
  }
  body.theme-nova .modal-close {
    position: fixed;
    top: calc(.6rem + env(safe-area-inset-top));
    right: .75rem;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-pill);
    background: var(--bg3);
    border: 1px solid var(--border);
    z-index: 2;
  }

  /* Toasts sit above the tab bar, full width, like a native snackbar. */
  body.theme-nova .toast {
    left: .75rem;
    right: .75rem;
    bottom: calc(76px + env(safe-area-inset-bottom));
    text-align: center;
  }
}

@keyframes sheet-up {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.theme-nova .modal-box { animation: none; }
}