/* ═══════════════════════════════════════════════════════════════════════
   SOFFIA — Shared Responsive Stylesheet
   Target: iPad Air 11" M3 — 820px portrait / 1180px landscape
   Critical breakpoint: ≤900px
   Execution order: Step 1 of 6 (sidebar + shared foundation)
═══════════════════════════════════════════════════════════════════════ */


/* ── Mobile-only elements hidden at desktop ─────────────────────────────── */
.mobile-header,
.mobile-nav-drawer,
.mobile-nav-backdrop {
  display: none;
}


/* ── Back button hidden at desktop (shown only inside ≤900px block) ──────── */
.dp-back {
  display: none;
}

/* ── Remove custom scrollbar gutter so topbar reaches full right edge ─────── */
.main::-webkit-scrollbar {
  width: 0;
}

/* ── Card-level action button — hidden at desktop, shown on portrait ─────── */
.sc-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.sc-card-header .sc-label {
  margin-bottom: 0;
}
.card-invest-btn {
  display: none;
}





/* ═══════════════════════════════════════════════════════════════════════
   MOBILE — ≤900px
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── Hide desktop topbar (mobile header replaces it) ─────────────────── */
  .topbar {
    display: none !important;
  }

  /* ── Portfolio — Invest + Sell buttons in page header ───────────────── */
  .port-mobile-actions { display: flex; }

  /* ── Dashboard — Invest + Sell full-width buttons below portfolio value ── */
  .dash-mobile-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
  }
  .dash-mobile-actions .topbar-btn {
    flex: 1;
    padding: 11px;
    border-radius: 10px;
    font-size: 14px;
  }

  /* ── Dashboard — Invest button inside Cash Balance card ───────────────── */
  .card-invest-btn {
    display: inline-flex;
    align-items: center;
    background: var(--teal);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
    margin-left: 8px;
  }

  .card-invest-btn:hover {
    background: var(--teal2);
  }

  /* ── Body layout ──────────────────────────────────────────────────────── */
  body {
    flex-direction: column !important;
    overflow: hidden;
  }

  /* ── Hide desktop sidebar ─────────────────────────────────────────────── */
  .sidebar {
    display: none !important;
  }

  /* ── Main fills full remaining height ─────────────────────────────────── */
  .main {
    width: 100% !important;
    height: calc(100vh - 56px) !important;
    max-height: calc(100vh - 56px) !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }


  /* ════════════════════════════════════════
     MOBILE HEADER BAR
  ════════════════════════════════════════ */
  .mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: 56px;
    width: 100%;
    background: var(--navy, #0D1B3E);
    padding: 0 16px;
    flex-shrink: 0;
    z-index: 200;
  }

  /* Logo — hidden on portrait tablet/phone; page title takes its place */
  .mobile-header-logo {
    display: none;
  }

  .mobile-header-wordmark {
    font-family: Georgia, serif;
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    letter-spacing: 1.5px;
    white-space: nowrap;
    line-height: 1;
  }

  /* Page title — left-aligned, styled to match the SOFFIA wordmark */
  .mobile-header-title {
    flex: 1;
    text-align: left;
    font-family: Georgia, serif;
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    letter-spacing: 2px;
    white-space: nowrap;
    pointer-events: none;
  }

  /* Hamburger — right */
  .mobile-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
    border-radius: 6px;
    transition: background 0.15s;
  }

  .mobile-hamburger:hover,
  .mobile-hamburger:focus {
    background: rgba(255, 255, 255, 0.06);
    outline: none;
  }

  .mobile-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: rgba(255, 255, 255, 0.65);
    border-radius: 2px;
    transition: background 0.15s;
  }

  .mobile-hamburger:hover span,
  .mobile-hamburger:focus span {
    background: #fff;
  }


  /* ════════════════════════════════════════
     NAV DRAWER
  ════════════════════════════════════════ */
  .mobile-nav-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100dvh;         /* dvh accounts for iOS browser chrome */
    background: var(--navy, #0D1B3E);
    z-index: 300;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow: hidden;       /* drawer itself does NOT scroll */
  }

  /* Nav list scrolls if it overflows; header + footer stay pinned */
  .mobile-nav-drawer .sidebar-nav {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-nav-drawer.open {
    transform: translateX(0);
  }

  /* Drawer header — logo + close button */
  .mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 20px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
  }

  /* Close button */
  .mobile-drawer-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    transition: background 0.15s;
    flex-shrink: 0;
  }

  .mobile-drawer-close:hover,
  .mobile-drawer-close:focus {
    background: rgba(255, 255, 255, 0.06);
    outline: none;
  }


  /* ════════════════════════════════════════
     BACKDROP
  ════════════════════════════════════════ */
  .mobile-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 290;
  }

  .mobile-nav-backdrop.open {
    display: block;
  }


  /* ════════════════════════════════════════
     PAGE-SPECIFIC FIXES
  ════════════════════════════════════════ */

  /* Dashboard + Learning Room: hide coach panel —
     it has height:100vh + flex-shrink:0 which claims
     the full viewport and collapses the main content */
  .coach-panel {
    display: none !important;
  }

  /* Learning Room: remove percentage max-widths that
     become too narrow once the sidebar disappears */
  .top-cards-row {
    max-width: 100% !important;
  }

  .tracks-grid {
    max-width: 100% !important;
  }

  /* Learning Room — V2 two-col layout: stack to single column on portrait */
  .v2-main-cols {
    flex-direction: column;
  }

  /* Learning Room — lesson screen starts below mobile header so Back button is visible */
  .lesson-screen {
    top: 56px;
  }

  /* Learning Room — lesson screen: full-width chat on portrait, hide stage card */
  .ls-content { display: none; }
  .ls-chat { width: 100%; flex: 1; }
  .ls-dots-wrap { flex: 1; width: auto; }

  /* Soffia Sessions — live card: side-by-side → stacked on portrait */
  .live-card {
    grid-template-columns: 1fr;
  }

  /* Soffia Sessions — upcoming + past grids: 3-col → 2-col on portrait */
  .upcoming-grid,
  .past-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Statements — main grid: 2-col → 1-col on portrait */
  .main-grid {
    grid-template-columns: 1fr;
  }

  /* Portfolio — summary strip: 6-col → 3-col on portrait */
  .summary-strip {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Portfolio — holdings table: fixed min-width triggers horizontal scroll;
     overrides table-layout:fixed so columns size to content on small screens */
  .holdings-table {
    min-width: 550px;
    table-layout: auto;
  }

  /* Tighten cell padding so all 6 columns fit on landscape smartphone */
  .holdings-table td,
  .holdings-table th {
    padding: 10px 8px;
  }
  .holdings-table td:first-child,
  .holdings-table th:first-child {
    padding-left: 16px;
  }
  .holdings-table td:last-child,
  .holdings-table th:last-child {
    padding-right: 14px;
  }

  /* Portfolio — panel cards: min-width:0 prevents flex/grid inflation.
     No overflow-x here — holdings-scroll-wrap is the sole scroll container,
     which fixes the iOS nested-scroll-container issue that blocked horizontal
     swipe on the Holdings table. */
  .panel-card {
    min-width: 0;
  }

  /* Portfolio — perf stats: 4-col → 2-col on portrait */
  .perf-stats {
    grid-template-columns: 1fr 1fr;
  }

  /* Portfolio — monthly returns: enable horizontal scroll.
     min-width forces the 13-col grid to overflow the panel-card scroll container. */
  .monthly-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .monthly-grid {
    min-width: 720px;
  }

  /* Portfolio — dividend timeline: side-by-side → stacked on portrait */
  .div-timeline {
    grid-template-columns: 1fr;
  }

  /* Challenges — stats row: 4-col → 2-col on portrait */
  .stats-row {
    grid-template-columns: 1fr 1fr;
  }

  /* Collections — grid: 3-col → 2-col on portrait */
  .collections-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Collections — hide filter hint (not needed on touch) */
  .filter-hint {
    display: none;
  }

  /* Wallet — balance row: 3-col → 1-col stack */
  .balance-row {
    grid-template-columns: 1fr;
  }

  /* Wallet — main grid: 2-col → 1-col stack */
  .wallet-grid {
    grid-template-columns: 1fr;
  }

  /* Wallet — hide topbar encryption text (custodian card below explains it) */
  .topbar-secure {
    display: none;
  }

  /* Dashboard — chart + holdings cards: reduce padding and chart height on portrait;
     min-width:0 prevents grid cells overflowing their 1fr column */
  .chart-card,
  .holdings-card {
    padding: 16px;
    min-width: 0;
  }

  /* Dashboard — chart tabs: more space above chart so tabs clear the top y-axis value */
  .chart-tabs {
    margin-bottom: 24px;
  }

  /* Extra top margin on chart-wrapper so the bleeding top y-axis label
     stays within the gap and doesn't overlap the tabs row */
  .chart-wrapper {
    margin-top: 10px;
  }

  .chart-area,
  .chart-ylabels {
    height: 150px;
  }

  /* Y-labels: scale SVG gridline positions (y=20,60,100,140) from 200px to 150px chart height */
  .chart-ylabels .y-label:nth-child(1) { top: 15px !important; }
  .chart-ylabels .y-label:nth-child(2) { top: 45px !important; }
  .chart-ylabels .y-label:nth-child(3) { top: 75px !important; }
  .chart-ylabels .y-label:nth-child(4) { top: 105px !important; }

  /* Bottom breathing room */
  .page-content,
  .stock-list,
  .q-list-panel,
  .dp-answers {
    padding-bottom: 80px;
  }

  .settings-content {
    padding-bottom: 32px;
  }

  /* Ask the Community — reply footer needs breathing room below
     the textarea and send button so they don't sit flush at the edge */
  .dp-reply {
    padding-bottom: 80px;
  }

  /* Portfolio: a plain block div (not a flex item) is always constrained
     to its containing block's width, so the 7-column table overflows the
     div — not the panel-card — and the div scrolls horizontally.
     This bypasses the flex-chain inflation that prevented panel-card
     overflow tricks from working. */
  .holdings-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Dashboard grid — portrait collapse ──────────────────────────────────
     summary-row: 4 cols (2fr 1fr 1fr 1fr) → 2 cols so cards pair up
     content-row: chart + fixed-380px holdings → single column
     bottom-row:  3 cols → single column                                   */
  .summary-row {
    grid-template-columns: 1fr 1fr;
  }

  .content-row {
    grid-template-columns: 1fr;
  }

  .bottom-row {
    grid-template-columns: 1fr;
  }


  /* ── Browse Stocks: detail panel ─────────────────────────────────────────
     On portrait the detail panel has height:100vh + flex-shrink:0 which
     claims the entire viewport in the column flex body and collapses the
     stock list. Hide it by default; show as a full-screen fixed overlay
     when the user taps a stock row (.mobile-open toggled by JS).          */
  .detail-panel {
    display: none;
  }

  .detail-panel.mobile-open {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: calc(100dvh - 56px);
    z-index: 150;
  }

  /* Back button — only visible on portrait */
  .dp-back {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.15s;
  }

  .dp-back:hover {
    color: #fff;
  }

  /* Mobile nav drawer: footer always pinned to bottom, never scrolls away.
     padding-bottom adds iOS safe-area breathing room. */
  .mobile-nav-drawer .sidebar-footer {
    flex-shrink: 0;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

}
/* end @media ≤900px */


/* ═══════════════════════════════════════════════════════════════════════
   SMARTPHONE — ≤480px  (target: iPhone 15 Pro, 393px)
   Layers on top of the ≤900px portrait rules above.
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Signal — hide indices bar on smartphone ────────────────────────── */
  .key-numbers-bar { display: none; }

  /* ── Learning Room — continue banner track pill + explainers ────────── */
  .continue-banner { padding: 22px 20px; }
  .cb-track-pill   { white-space: nowrap; }
  .cb-learn        { flex-direction: column; gap: 12px; align-items: flex-start; }
  .cb-learn-item   { max-width: 100%; }

  /* ── Page content — tighter horizontal padding ─────────────────────── */
  .page-content {
    padding: 20px 16px;
  }

  /* ── Statements — card padding ──────────────────────────────────────── */
  .card {
    padding: 16px;
  }

  /* ── Settings — shrink email/phone inputs so Verified pill has room ── */
  .s-field-row .s-input { max-width: 190px; }
  .s-field-row .verified-badge { margin-left: auto; }

  /* ── Statements — transaction table: stacked card layout on mobile ── */
  .tx-table-wrap { overflow-x: visible; width: 100%; }
  .tx-table       { display: block; width: 100%; min-width: 0; }
  .tx-table thead { display: none; }
  .tx-table tbody { display: block; }

  .tx-table tr {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    border-bottom: 1px solid #E5E7EB;
    gap: 4px;
  }
  .tx-row-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
  }
  .tx-row-top .tx-card-desc   { font-size: 13px; font-weight: 600; color: var(--navy); }
  .tx-row-top .tx-card-amount { font-size: 14px; font-weight: 700; flex-shrink: 0; }
  .tx-row-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .tx-row-bottom .tx-card-date   { font-size: 11px; color: var(--mid); }
  .tx-row-bottom .tx-card-status {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
    border-radius: 4px; padding: 2px 8px;
  }

  /* ── Ask the Community — tighter list panel padding ────────────────── */
  .q-list-panel {
    padding: 16px;
  }

  /* ── Signal — key numbers bar padding ──────────────────────────────── */
  .key-numbers-bar {
    padding: 0 16px;
  }

  /* ── Dashboard summary row — 1-col on smartphone so cards aren't cramped ── */
  .summary-row {
    grid-template-columns: 1fr;
  }

  /* ── Summary card numerals — restore to portrait size (cards are now full-width) ── */
  .sc-value {
    font-size: 28px;
  }
  .summary-card.primary .sc-value {
    font-size: 32px;
  }

  /* ── Soffia Sessions — 2-col grids → 1-col ─────────────────────────── */
  .upcoming-grid,
  .past-grid {
    grid-template-columns: 1fr;
  }

  /* ── Challenges — 2-col card grid → 1-col ──────────────────────────── */
  .challenge-grid {
    grid-template-columns: 1fr;
  }

  /* ── Challenges — badge grid: 5-col → 1-col on smartphone ──────────── */
  .badge-grid {
    grid-template-columns: 1fr;
  }

  /* Badge cards are normally square-ish — cap height so they don't look
     like banners when stretched to full width on a phone */
  .badge-item {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 16px 20px;
    gap: 16px;
  }

  .badge-hex {
    flex-shrink: 0;
  }

  /* ── Collections — 2-col grid → 1-col ──────────────────────────────── */
  .collections-grid {
    grid-template-columns: 1fr;
  }

  /* ── Portfolio — summary strip: 3-col → 2-col on smartphone ───────── */
  .summary-strip {
    grid-template-columns: 1fr 1fr;
  }

  /* ── Portfolio — perf tabs: force single line on smartphone ─────────── */
  .perf-tabs-row {
    flex-wrap: nowrap;
    gap: 2px;
  }
  .perf-tabs-row .chart-tab {
    padding: 4px 6px;
    font-size: 11px;
  }

  /* ── Portfolio — monthly returns: swap full grid for two half-grids ── */
  .monthly-scroll-wrap {
    display: none;
  }

  .monthly-split-wrap {
    display: block !important;
  }

  .monthly-grid-half {
    display: grid;
    grid-template-columns: 60px repeat(6, 1fr);
    gap: 4px;
    font-size: 11px;
  }

  .mg-half-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--mid, #6B7280);
    margin-bottom: 6px;
    margin-top: 16px;
  }

  .mg-half-label:first-child {
    margin-top: 0;
  }

  /* ── Settings — hide side nav; content takes full width ─────────────── */
  .settings-nav {
    display: none;
  }

  /* ── Portfolio — Holdings: smartphone portrait view ──────────────────
     Hide Avg Cost (col 3), Price (col 4), and Today/Returns (col 6).
     Visible columns: Company · Shares · Market Value.
     Logos stay visible. Table fits viewport — no horizontal scroll.   */

  /* Remove horizontal scroll; force table to fit viewport */
  .holdings-table {
    min-width: 0;
    table-layout: fixed;
    width: 100%;
  }

  /* Hide Avg Cost, Price, and Today/Returns columns */
  .holdings-table th:nth-child(3),
  .holdings-table td:nth-child(3),
  .holdings-table th:nth-child(4),
  .holdings-table td:nth-child(4),
  .holdings-table th:nth-child(6),
  .holdings-table td:nth-child(6) {
    display: none;
  }

  /* Distribute width across 3 visible columns */
  .holdings-table th:nth-child(1),
  .holdings-table td:nth-child(1) { width: 50%; }
  .holdings-table th:nth-child(2),
  .holdings-table td:nth-child(2) { width: 22%; }
  .holdings-table th:nth-child(5),
  .holdings-table td:nth-child(5) { width: 28%; }

  /* Tighten cell padding */
  .holdings-table td,
  .holdings-table th {
    padding: 12px 8px;
  }
  .holdings-table td:first-child,
  .holdings-table th:first-child {
    padding-left: 14px;
  }
  .holdings-table td:nth-child(5),
  .holdings-table th:nth-child(5) {
    padding-right: 24px;
  }

  /* Truncate long company names cleanly */
  .h-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  /* "Market Value" header → show short label "Value" on smartphone portrait only */
  .col-label-full  { display: none; }
  .col-label-short { display: inline; }

  /* ── Browse Stocks — smartphone portrait ─────────────────────────────
     The stock rows carry too many fixed-width columns (market cap, P/E,
     star ratings, trend badge) to fit in ~393px. Hide non-essential
     columns, tighten horizontal padding, and reduce row gaps so the
     visible columns (logo · name · price · bookmark) fit cleanly.      */

  /* Tighten horizontal padding on search bar, headers, and list */
  .browse-bar {
    padding: 10px 14px;
  }

  .results-header {
    padding: 10px 14px 6px;
  }

  .stock-col-headers {
    padding: 0 14px 6px;
    gap: 10px;
  }

  .stock-list {
    padding: 0 10px 80px;
  }

  /* Hide overflow columns: market cap/P/E, star ratings, trending badge */
  .s-meta,
  .s-stars,
  .s-trend-label,
  .col-h-meta,
  .col-h-stars,
  .col-h-bm {
    display: none;
  }

  /* Watchlist mode: hide the "since saved" column too (replaces s-meta) */
  body.watchlist-mode .s-since {
    display: none;
  }

  /* Adjust name-column header indent to match tighter logo+gap (40px + 10px) */
  .col-h-name {
    padding-left: 50px;
  }

  /* Tighten stock row gaps and side padding */
  .stock-row {
    padding: 11px 12px;
    gap: 10px;
  }

  /* Reduce price-wrap min-width slightly to give name column more breathing room */
  .s-price-wrap {
    min-width: 68px;
  }

  /* Watchlist perf bar — allow horizontal scroll so stats don't overflow */
  .perf-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 14px;
    gap: 0;
  }

  .perf-stat {
    padding: 0 14px;
    flex-shrink: 0;
  }

  /* ── Learning Room — Track 1 portrait: two lesson-group cards ───────────
     Lessons 1–5 and 6–10 each appear as a distinct card.
     No change on iPad (481–900px) or landscape smartphone.               */
  .v2-lesson-groups {
    gap: 12px;
  }

  .v2-lesson-group {
    background: #fff;
    border: 1px solid var(--border-l, #E5E7EB);
    border-radius: 12px;
    overflow: hidden;
  }

  .v2-lesson-group-label {
    display: block;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-l, #E5E7EB);
    background: #F9FAFB;
  }

  /* Single-column grid: each lesson gets full width */
  .v2-lesson-group .v2-lessons-grid {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    padding: 8px;
    gap: 6px;
  }



  /* ── Collections — modal stock rows: portrait smartphone ────────────────
     Weight joins the ticker line inline (e.g. "AAPL · 18% wt").
     The floating weight column is hidden; the modal is capped to viewport width
     so it doesn't overflow on narrow phones.                                   */

  .modal {
    width: calc(100vw - 24px);
  }

  /* Reduce stats gap so 4 labels fit comfortably on a narrow phone */
  .modal-stats-row {
    gap: 8px;
  }

  /* Equal-width stat columns */
  .modal-stat-item {
    flex: 1;
  }

  /* Hide the floating weight column */
  .stock-weight-col {
    display: none;
  }

  /* Show weight inline in the ticker line */
  .stock-weight-inline {
    display: inline;
  }

  /* Pull price column away from the right edge */
  .modal .stock-right {
    margin-right: 12px;
  }

  /* Market Brief — stack "What this means" cards to single column */
  .means-cards {
    grid-template-columns: 1fr;
  }

  /* Portfolio — Collection Holdings: 3 columns on mobile (Name / Units / Market Value)
     Proportions mirror the stock holdings table: 50% / 22% / 28% */
  .col-header-row,
  .col-row {
    grid-template-columns: 50% 22% 28%;
  }
  /* Hide Avg Cost (3rd), Unit Price (4th), Return % (6th) */
  .col-header-row > :nth-child(3),
  .col-header-row > :nth-child(4),
  .col-header-row > :nth-child(6),
  .col-row > .col-cell:nth-child(3),
  .col-row > .col-cell:nth-child(4),
  .col-row > .col-cell:nth-child(6) {
    display: none;
  }
  /* Tighten padding and scale icon/name for narrow screens */
  .col-th       { padding: 10px 8px; }
  .col-th:first-child  { padding-left: 16px; }
  .col-th:last-child   { padding-right: 16px; }
  .col-cell     { padding: 12px 8px; }
  .col-cell:first-child { padding-left: 16px; }
  .col-cell:last-child  { padding-right: 16px; }
  .col-icon-badge { width: 30px; height: 30px; border-radius: 8px; }
  .col-icon-badge svg  { width: 14px; height: 14px; }
  .col-name-group { gap: 8px; }
  .col-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .col-sub  { font-size: 10px; }
  /* 5th cell is visually last on mobile (6th is hidden) — give it right breathing room */
  .col-header-row > :nth-child(5),
  .col-row > .col-cell:nth-child(5) { padding-right: 20px; }

  /* Totals row: same 3-column grid as data rows */
  .col-totals-row {
    grid-template-columns: 50% 22% 28%;
  }
  .col-totals-row > .col-cell:nth-child(3),
  .col-totals-row > .col-cell:nth-child(4),
  .col-totals-row > .col-cell:nth-child(6) { display: none; }
  .col-totals-row .col-cell        { padding: 12px 8px; }
  .col-totals-row .col-cell:first-child { padding-left: 16px; }
  .col-totals-row > .col-cell:nth-child(5) { padding-right: 20px; }

  /* Prevent "Collection Holdings" title wrapping — keeps buttons aligned with Stock Holdings */
  .panel-card-title { font-size: 13px; }

  /* Market Value → Value on mobile */
  .col-th-full  { display: none; }
  .col-th-short { display: inline; }

  /* ── Learning Room — Soffia+ upsell banner: stack vertically on smartphone ──
     Desktop: text left · button right in a flex row.
     Mobile: text full-width, button + price below it.                         */
  .v2-upsell {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
  }

  .v2-upsell-right {
    align-items: center;
    margin-left: 0;
    width: 100%;
  }

  .v2-upsell-btn {
    width: 100%;
    text-align: center;
  }

  .v2-upsell-price {
    text-align: center;
    width: 100%;
  }

  /* ── Ask the Community — Coming Soon banner: stack vertically on smartphone ──
     Desktop: badge · text · Notify me in a single flex row.
     Mobile: badge on its own line, text below full-width, button left-aligned under text. */
  .coming-soon-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
  }

  #bannerNotifyBtn {
    margin-left: 0 !important;
    align-self: flex-start;
    padding: 9px 20px;
    font-size: 13px;
  }

  /* ── Collection modal footer — stack note above buttons so position text
     isn't squeezed by the Invest/Sell buttons on narrow phone screens ──── */
  .modal-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .modal-footer-actions {
    display: flex;
    gap: 10px;
  }
  .modal-footer-actions .btn-invest,
  .modal-footer-actions .btn-sell {
    flex: 1;
  }

  /* ── News — hide market alert strip on portrait phone ── */
  #alertStrip { display: none !important; }

}
/* end @media ≤480px */


/* ═══════════════════════════════════════════════════════════════════════
   SMARTPHONE LANDSCAPE — ≤900px + orientation:landscape
   Targets phones rotated to landscape (~667–896px wide, ~360–430px tall).
   Compacts lesson-screen chrome so chat messages get more vertical space.
   iPad (768px portrait, 1024px landscape) is unaffected.
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) and (orientation: landscape) {

  /* Place lesson screen below the mobile nav header so Back button is reachable */
  .lesson-screen { top: 56px; }

  /* Compact topbar to 36px — keeps Back button visible, saves 20px vs default 56px */
  .ls-topbar {
    height: 36px;
    padding: 0 14px;
  }
  .ls-back { font-size: 12px; }
  .ls-dots-wrap { flex: 1; width: auto; }

  /* Hide Soffia avatar/name header — context is clear from the lesson screen */
  .ls-chat-header { display: none; }

  /* Compact Continue / Previous buttons */
  .ls-continue-wrap { padding: 6px 16px; }
  .ls-continue-btn  { padding: 9px 16px; font-size: 13px; }
  .ls-prev-btn      { padding: 9px 14px; }

  /* Compact "Answer the question" hint strip */
  .ls-answer-hint { padding: 4px 16px; }

  /* Compact input bar */
  .ls-chat-input { padding: 6px 16px 8px; }

  /* ── Signal — compact chrome so news articles are visible ──────────────
     On landscape the stacked chrome (key numbers + filter tabs + jump-nav)
     consumes most of the ~390px screen, leaving no room for article cards. */

  /* Hide benchmark data bar and market alert strip on landscape phone */
  .key-numbers-bar { display: none !important; }
  #alertStrip      { display: none !important; }

  /* Tighten filter tabs bar */
  .signal-bar { padding: 6px 16px; }

  /* Hide jump-nav bar — scroll shortcut, not essential content */
  .jump-nav-bar { display: none !important; }

  /* Compact section anchor top/bottom margin */
  .sec-anchor { margin: 10px 0 8px; }

  /* Compact Soffia insight block */
  .sec-insight { padding: 6px 10px; margin: 4px 0 6px; }

  /* ── Collections — modal on landscape ──────────────────────────────────
     Default modal is centred with max-height:82vh — on a ~393px-tall
     landscape phone that leaves only ~68px for the stock list.
     Fix: start overlay below mobile header, fill available height,
     and strip non-essential chrome so stocks are actually readable. */

  /* Overlay starts below the 56px mobile header */
  .modal-overlay {
    top: 56px;
  }

  /* Modal fills the available viewport height */
  .modal {
    max-height: calc(100dvh - 56px - 24px);
    width: min(600px, calc(100vw - 48px));
  }

  /* Tighter header padding — saves ~10px at the top */
  .modal-header {
    padding: 12px 20px 0;
  }

  /* Hide collection icon and collapse the header row entirely —
     the row was icon + X; with icon gone the row just wastes a full line */
  .modal-icon {
    display: none;
  }

  .modal-header-row {
    display: none;
  }

  /* Reposition X as an absolute button in the top-right corner of the modal.
     The modal's transform creates a containing block so no position:relative needed. */
  .modal-close {
    display: flex;
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 10;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.06);
    font-size: 14px;
  }

  /* Hide collection description — user already chose the card, it's redundant;
     hiding saves ~50px of fixed chrome for the stock list */
  .modal-desc {
    display: none;
  }

  /* Hide "All Holdings (12)" section label — not needed on landscape where
     every pixel counts; user is already inside the collection */
  .modal-section-label {
    display: none;
  }

  /* Compact stats row — spread items evenly across full modal width */
  .modal-stats-row {
    padding: 8px 0;
    justify-content: space-between;
  }

  /* Nudge weight + price columns left — margin-right on the last flex item
     compresses the flex:1 name group, shifting both columns leftward together */
  .modal .stock-right {
    margin-right: 24px;
  }

  /* Compact footer */
  .modal-footer {
    padding: 10px 20px;
  }

  /* Enable touch scrolling on the stock list inside the fixed overlay —
     iOS won't scroll a child of position:fixed without this;
     touch-action:pan-y tells the browser vertical swipes are scrolls, not taps */
  .modal-body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  /* ── Collection Holdings — keep column headers on one line in landscape ─
     Tighter padding + nowrap prevents multi-line wrapping on ~667–896px wide screens */
  .col-th {
    white-space: nowrap;
    padding: 10px 8px;
  }
  .col-th:first-child { padding-left: 16px; }
  .col-th:last-child  { padding-right: 14px; }

  /* ── Soffia Sessions — landscape fixes ─────────────────────────────────
     The Live Now card stacks to 1-col on ≤900px, making it ~500px tall.
     On landscape that means the user scrolls two screens before reaching
     Upcoming Sessions. Fixes: hide viewer panel, compact card + page layout. */

  /* Tighten overall page content spacing on landscape */
  .page-content {
    padding: 16px;
    gap: 16px;
  }

  /* Compact section header margin */
  .section-head {
    margin-bottom: 8px;
  }

  /* Hide the viewer panel (count + avatars + time) — saves ~200px on live card */
  .live-viewer-panel {
    display: none;
  }

  /* Compact live card padding and hide description text */
  .live-card {
    padding: 20px;
  }

  /* Hide the description — title + host + buttons is enough on landscape */
  .live-desc {
    display: none;
  }

  /* Tighten live card internal spacing */
  .live-badge-row {
    margin-bottom: 10px;
  }

  .live-title {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .live-meta-row {
    margin-bottom: 12px;
  }

  /* Compact stats cards — same as ATC treatment */
  .stat-card {
    padding: 10px 12px;
  }

  .sc-value {
    font-size: 20px;
    margin-bottom: 2px;
  }

  .sc-sub {
    display: none;
  }

  /* ── Soffia Sessions — watch modal on landscape ─────────────────────────
     watch-screen(200px) + watch-body padding(48px) + content(~110px) = ~358px.
     On landscape (~330–393px available) the buttons get cut off at the bottom.
     Fix: halve the screen height and compact body padding.              */
  .watch-screen {
    height: 110px;
  }

  .watch-body {
    padding: 14px 20px 16px;
  }

  .watch-time {
    margin-bottom: 12px;
  }

  /* ── Ask the Community — landscape fixes ───────────────────────────────
     The portrait ≤900px block adds padding-bottom:80px to .dp-reply for
     breathing room. On landscape that 80px stacks with the reply box's
     own padding, pushing total fixed chrome (~370px) past the available
     ~337px and collapsing the answers area to zero.                     */

  /* Override the portrait 80px breathing room — 8px is enough on landscape */
  .dp-reply {
    padding: 8px 16px;
  }

  /* Hide reply disclaimer — saves ~20px, not essential on landscape */
  .reply-note {
    display: none;
  }

  /* Compact question header — tighter padding + smaller question text */
  .dp-header {
    padding: 12px 20px 10px;
  }

  .dp-question {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .dp-tags {
    margin-bottom: 8px;
  }

  .dp-q-author-row {
    margin-bottom: 8px;
  }

  /* Hide tags + stats row from question header — saves ~50px more */
  .dp-tags      { display: none; }
  .dp-stats-row { display: none; }

  /* Smaller avatar in question header */
  .dp-avatar {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }

  /* Reduce answers padding so content starts sooner */
  .dp-answers {
    padding: 8px 16px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  /* Hide reply label ("YOUR ANSWER") — saves ~26px */
  .reply-label {
    display: none;
  }

  /* Compact stats cards — reduce padding so more question cards are visible */
  .stat-card {
    padding: 10px 12px;
  }

  .sc-value {
    font-size: 20px;
    margin-bottom: 2px;
  }

  .sc-sub {
    display: none;
  }

  /* Compact filter row gap */
  .filter-row {
    gap: 6px;
  }

  /* ── Browse Stocks — compact browse bar on landscape ───────────────────
     Tighter padding on the search + filter tabs bar so the stock list
     gets more of the ~337px available height.                           */
  .browse-bar {
    padding: 8px 16px;
    gap: 8px;
  }

  .results-header {
    padding: 8px 14px 4px;
  }

  .stock-col-headers {
    padding: 0 14px 4px;
  }

  /* ── Browse Stocks — detail panel on landscape ──────────────────────────
     Fixed chrome stack (header + spark + metrics + take + buy + prompts)
     totals ~520px on a ~337px panel — nothing left for the chat area.
     Fixes: hide sparkline + chips, collapse metrics to 1 row, compact padding. */

  /* Hide sparkline — saves ~70px */
  .dp-spark {
    display: none;
  }

  /* Collapse metrics grid from 2×2 to 4-col single row — saves ~70px */
  .dp-metrics {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 8px 16px;
  }

  .dp-metric {
    padding: 8px 10px;
  }

  .dm-value {
    font-size: 13px;
  }

  .dm-sub {
    display: none;
  }

  /* Compact stock header — tighter padding, smaller price */
  .dp-header {
    padding: 12px 16px 10px;
  }

  .dp-price {
    font-size: 20px;
  }

  .dp-name {
    font-size: 14px;
  }

  .dp-badge {
    width: 36px;
    height: 36px;
  }

  /* Compact Soffia's take box */
  .dp-take {
    margin: 0 16px;
    padding: 8px 12px;
  }

  .dp-take-text {
    font-size: 12px;
    line-height: 1.5;
  }

  /* Compact buy widget */
  .dp-buy {
    padding: 8px 16px;
  }

  /* Hide quick-question chips — saves ~50px */
  .dp-prompts {
    display: none;
  }

  /* Enable touch scrolling in the chat answers area */
  .dp-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* ── Invest modal — scrollable on landscape phone, scroll trapped inside modal ── */
  .iv-overlay {
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 12px 16px;
  }
  .iv-modal {
    max-height: none;
    overflow-y: visible;
    touch-action: pan-y;
  }

}
/* end @media landscape smartphone */

/* ═══════════════════════════════════════════════════════════════════════
   TABLET LANDSCAPE — sidebar visible, narrower than desktop
   Targets iPad Air landscape (~1180px) where sidebar width compresses.
═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) and (max-width: 1200px) {
  .sidebar-tagline { white-space: nowrap; font-size: 8px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   LANDSCAPE TABLET — 901px–1200px
   Sidebar stays. Coach panel hides to free up main content width.
   (iPad Air 11" M3 landscape = 1180px)
═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) and (max-width: 1200px) {

  .coach-panel {
    display: none !important;
  }

  /* Fix iOS Safari 100vh bug — use dynamic viewport height so sidebar
     doesn't exceed the actual visible area, keeping the footer in view */
  .sidebar { height: 100dvh !important; }

  /* Prevent sidebar nav scroll from chaining to the main page */
  .sidebar-nav { overscroll-behavior: contain; }

  /* Learning Room — compact banner learn bullets on landscape tablet */
  .cb-learn      { gap: 20px; }
  .cb-learn-item { max-width: 140px; }

  /* Browse Stocks — constrain detail panel to visible viewport on iOS Safari
     (100vh includes address bar chrome; 100dvh is the actual visible height) */
  .detail-panel {
    height: 100dvh;
  }

  /* Portfolio: same min-width:0 fix for landscape range */
  .panel-card {
    min-width: 0;
    overflow: auto;
  }

  /* Landscape scrolling — iOS momentum scroll, Android scroll-chain
     prevention, + bottom breathing room so users can comfortably
     scroll to the last element on any page */
  .main {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  /* Bottom breathing room — .page-content covers most pages;
     Browse Stocks and Ask the Community use their own containers
     including right-panel scroll areas */
  .page-content,
  .settings-content,
  .stock-list,
  .q-list-panel,
  .dp-answers {
    padding-bottom: 80px;
  }

  /* Ask the Community — reply footer breathing room */
  .dp-reply {
    padding-bottom: 80px;
  }


}