/* ==========================================================================
   mobile-light.css — the PHONE layer for the light chrome (India wave 3, piece C).

   Goal, verified by scripts/india-mobile-audit.mjs at 390 x 844: no horizontal
   overflow, primary controls at least 40 px, body and table text at least
   12 px, tables scrolling inside their own container, the hub tab rail
   scrolling with the active tab visible, the top nav collapsed to a menu, the
   status bar and ticker trimmed to what matters, modals fitting the viewport.

   Loaded by partials/topnav-light.ejs (every standalone -light page and all
   16 hub templates), by the CSS bundle (partials/header.ejs pages), and
   directly by the few tab pages that carry neither partial. Everything here is
   gated to max-width 640px except the menu button and drawer, which live at
   max-width 900px because every -light page hides `nav.top` below 1120px and
   offered no navigation at all there. Desktop rendering above 900px is not
   touched by this file.

   Companion runtime: public/js/ix-mobile-fit.js (12 px font floor on phones,
   keeps the active hub tab scrolled into view). Tokens: the light pages'
   --surface / --line / --ink / --chip; every use carries the light fallback.
   ========================================================================== */

/* ── Menu button (rendered by partials/topnav-light.ejs) ─────────────────── */
.ixm-menu { display: none; }
nav.top .ixm-only { display: none; }

@media (max-width: 900px) {
  .ixm-menu {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; flex-shrink: 0;
    border-radius: 9px; border: 1px solid var(--line, #efece6);
    background: var(--surface, #fff); color: var(--ink-2, #5c5751); cursor: pointer;
  }
  .ixm-menu .material-symbols-outlined { font-size: 22px; }
  .ixm-menu:focus-visible { outline: 2px solid var(--accent, #d97757); outline-offset: 2px; }
  body.ixm-nav-open .ixm-menu { background: var(--chip, #f4f1ec); color: var(--ink, #1c1a17); }

  /* The drawer: the same nav.top the desktop bar renders, restacked under the
     header. The header is position:sticky on every -light page, so an
     absolute panel at top:100% hangs from its bottom edge. */
  body.ixm-nav-open header { position: sticky; top: 0; z-index: 60; }
  body.ixm-nav-open nav.top {
    display: flex !important; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: 8px 12px 90px; background: var(--surface, #fff);
    border-bottom: 1px solid var(--line, #efece6);
    box-shadow: 0 18px 40px -18px rgba(28, 26, 23, 0.28); z-index: 70;
  }
  body.ixm-nav-open { overflow: hidden; }
  body.ixm-nav-open nav.top .navitem { position: static; width: 100%; }
  body.ixm-nav-open nav.top .navitem > .nl {
    width: 100%; justify-content: space-between; min-height: 44px;
    padding: 10px 12px; font-size: 0.95rem; border-radius: 9px;
  }
  body.ixm-nav-open nav.top .navitem > .nl .material-symbols-outlined { transform: none; }
  body.ixm-nav-open nav.top .navitem.open > .nl .material-symbols-outlined { transform: rotate(180deg); }
  body.ixm-nav-open nav.top .navitem.open > .nl { background: var(--chip, #f4f1ec); color: var(--ink, #1c1a17); }
  body.ixm-nav-open nav.top .navitem > .dd,
  body.ixm-nav-open nav.top .navitem > .dd.ixnl.ixnl-c2 {
    display: none; position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; width: 100%; box-shadow: none; border: 0; border-radius: 0;
    padding: 2px 0 8px 10px; background: transparent; columns: auto;
  }
  body.ixm-nav-open nav.top .navitem.open > .dd,
  body.ixm-nav-open nav.top .navitem.open > .dd.ixnl.ixnl-c2 { display: block; }
  body.ixm-nav-open nav.top .dd .ixnl-sec { min-width: 0; padding: 0; }
  body.ixm-nav-open nav.top .dd.ixnl.ixnl-c2 .ixnl-sec + .ixnl-sec { border-left: 0; border-top: 1px solid var(--line, #efece6); margin-top: 4px; padding-top: 4px; }
  body.ixm-nav-open nav.top .dd .ixnl-hdr { font-size: 12px; padding: 8px 11px 4px; }
  body.ixm-nav-open nav.top .dd a {
    display: flex; align-items: center; min-height: 44px; padding: 8px 11px;
    font-size: 0.92rem; white-space: normal;
  }
  body.ixm-nav-open nav.top .ixnl-cmdk { display: none; }
  /* Shortcuts the phone header drops (clients, explore, terminal, search) live here. */
  body.ixm-nav-open nav.top .ixm-only { display: block; border-top: 1px solid var(--line, #efece6); margin-top: 6px; padding-top: 6px; }
  body.ixm-nav-open nav.top .ixm-only a {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px;
    border-radius: 9px; font-size: 0.95rem; color: var(--ink-2, #5c5751);
  }
  body.ixm-nav-open nav.top .ixm-only a .material-symbols-outlined { font-size: 20px; color: var(--muted, #948f86); }

  /* Touch: a tap on a group chip opens its panel (hover does not exist). Used
     by the drawer and by the header chips that stay outside it (portfolio
     picker, home market). */
  .navitem.open > .dd { opacity: 1; visibility: visible; transform: none; }
}

@media (max-width: 640px) {
  html, body { overflow-x: hidden; }

  /* ── Header ────────────────────────────────────────────────────────────── */
  header .hdr {
    height: auto !important; min-height: 52px; padding: 6px 12px !important;
    gap: 8px !important; flex-wrap: wrap;
  }
  /* Wordmark clipped, square kept: a 40 px tap target that still reads IX. */
  .hdr .brand { min-height: 40px; min-width: 40px; width: 40px; overflow: hidden; white-space: nowrap; gap: 14px; font-size: 0.8rem; }
  .hdr .brand .sq { width: 28px; height: 28px; font-size: 12px; flex-shrink: 0; }
  .hdr .right {
    margin-left: auto; gap: 4px !important; flex-shrink: 1; min-width: 0;
    flex-wrap: wrap; justify-content: flex-end;
  }
  .hdr .right > a.icbtn, .hdr .clientsbtn, .hdr .srch { display: none !important; }
  .icbtn, #nblBtn { width: 40px !important; height: 40px !important; }
  .avatar { width: 40px !important; height: 40px !important; font-size: 0.85rem !important; }
  .navitem > .nl, .chipnl { min-height: 40px; padding: 8px 10px !important; }
  .hdr .right .navitem.pfsel > .nl > span:not(.material-symbols-outlined) {
    max-width: 82px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block;
  }
  .hdr .right .dd { max-width: calc(100vw - 24px); }
  .icbtn .badge, #notifBadge { font-size: 12px !important; min-width: 18px; height: 18px; top: 2px; right: 2px; }

  /* ── Ticker and news tapes ─────────────────────────────────────────────── */
  .tape.news-tape { display: none; }
  .tk-item { padding: 8px 10px; font-size: 12px; }
  .nw-item, .nw-item .src { font-size: 12px; }
  .live-ticker-wrapper .ticker-news-row { display: none; }
  .live-ticker-wrapper .regime-index, .live-ticker-wrapper .regime-index .symbol,
  .live-ticker-wrapper .ticker-stock-item, .live-ticker-wrapper .ticker-stock-item * { font-size: 12px; }

  /* ── Status bar: brand and clock only ──────────────────────────────────── */
  .statusbar { padding: 0 12px !important; font-size: 12px !important; gap: 8px; }
  .statusbar .sb-l > span:not(.sb-brand) { display: none; }
  .statusbar .sb-l, .statusbar .sb-r { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .statusbar .sb-r, .statusbar .sb-r *, .statusbar .sb-l * { font-size: 12px !important; }
  .ai-fab { right: 12px; bottom: 42px; }

  /* ── Hub chrome (the 16 *-hub.ejs templates share these classes) ───────── */
  .th-hero { padding: 10px 12px 0 !important; }
  .th-hero-row { gap: 10px; }
  .th-eyebrow, .eyebrow { font-size: 12px !important; letter-spacing: 0.08em; }
  .fh-portfolio { width: 100%; flex-wrap: wrap; }
  .fh-portfolio label { font-size: 12px !important; }
  .fh-portfolio select { min-height: 40px; flex: 1 1 160px; min-width: 0; }
  .fh-del-btn { min-height: 40px; }
  .th-card { margin: 8px 0 12px !important; border-left: 0; border-right: 0; border-radius: 0; }
  .fh-tabs { padding: 6px 8px 0; gap: 0; scroll-snap-type: x proximity; scroll-padding: 0 8px; }
  .fh-tab { min-height: 40px; padding: 10px 12px; font-size: 13px; scroll-snap-align: start; }
  .fh-more-pop { max-width: calc(100vw - 16px); }
  .fh-more-row { min-height: 44px; font-size: 14px; }

  /* ── Controls: 40 px is the floor for anything a thumb has to hit ──────── */
  button:not([hidden]), select, textarea, [role="button"],
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]):not([type="color"]) {
    min-height: 40px !important;
  }
  button:not([hidden]) { min-width: 40px; }
  select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]):not([type="color"]) {
    font-size: max(12px, 1em);
  }
  /* Icon-only buttons and links need width too. */
  .icbtn, [class*="icon_btn"], [class*="icon-btn"], [class*="iconbtn"], [class*="action_btn"], [class*="action-btn"],
  :is(button, a, [data-action], [role="button"]):has(> .material-symbols-outlined:only-child),
  :is(button, a, [role="button"]):has(> svg:only-child) {
    min-width: 40px !important; min-height: 40px !important;
  }
  /* Standalone text links ("View all", "Harvest", symbol links in tables). */
  a.go, a.lnk, a[class*="link"], a[class*="more"], a[class*="_btn"], a[class*="-btn"], td > a, .h-asset-symbol,
  a[href][style*="font-size"],
  a[href]:not([class]):not(:where(p, li, td, th, nav, .dd, .tape, .marq, .ixm-only) a) {
    display: inline-flex; align-items: center; min-height: 40px; min-width: 40px;
  }
  /* Clickable chips, badges and rows wired with data-action. */
  span[data-action], label[data-action] { display: inline-flex; align-items: center; min-height: 40px; }
  div[data-action], li[data-action] { min-height: 40px; }
  th[data-action], td[data-action], tr[data-action] > td, tr[data-action] > th { height: 40px; }

  /* ── Tables scroll inside their own container, never the page ──────────── */
  .ti_tbl_wrap, .ac-table-wrap, [class*="tbl_wrap"], [class*="tbl-wrap"], [class*="table_wrap"], [class*="table-wrap"],
  [class*="tablewrap"], [class*="table_scroll"], [class*="table-scroll"], .table-responsive {
    overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%;
  }
  .ti_tbl { min-width: 720px; }
  th, td { font-size: max(12px, 1em); }
  /* Grid and flex children default to min-width:auto, which lets a wide table
     or input row push its card past the phone edge. */
  [class*="_grid"] > *, [class*="-grid"] > *, [class*="_row"] > *, [class*="_cols"] > *, .shell > * { min-width: 0; }

  /* ── Dashboard ─────────────────────────────────────────────────────────── */
  .shell { padding: 14px 12px 76px !important; }
  /* The holdings table has no wrapper; the table itself becomes the scroller. */
  .shell table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .sec-hd { flex-wrap: wrap; gap: 8px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px 12px !important; }

  /* ── Page-specific overflow sources found by the audit ─────────────────── */
  /* Advisor compliance: the India panel's 640 px table sat in a grid cell with
     min-width:auto and the evidence inputs carried 160 px minimums. */
  .ac_in_grid { grid-template-columns: minmax(0, 1fr) !important; }
  .ac_in_grid > *, .ac_in_item > * { min-width: 0; }
  .ac_in_item { grid-template-columns: 1fr !important; }
  .ac_in_item_m { flex-wrap: wrap; }
  .ac_in_item_m .ac-input, .ac_in_item_m .ac-select { min-width: 0 !important; width: 100%; }
  .ac-kpis, .ac_in_kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ac-cmd-id { min-width: 0 !important; }
  /* Planning calculators: the calculator selector is an inline-flex strip. */
  .pcl-tabs { display: flex !important; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pcl-tab { flex: 0 0 auto; min-height: 40px; font-size: 12px !important; }
  /* Settings: hero KPI row and the avatar row are inline-style grids. */
  .s-wrap { padding: 16px 12px 70px !important; }
  .s-nav-item { min-height: 40px; }
  .s-pane [style*="display:flex"][style*="gap:20px"] { flex-wrap: wrap; }
  .s-btn.s-btn-s { font-size: 12px !important; }
  /* Inline-style multi-column grids (settings, tax panels, wizards). */
  [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2"], [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"], [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns:repeat(6"], [style*="grid-template-columns:160px"],
  [style*="grid-template-columns:2fr"], [style*="grid-template-columns:1.6fr"], [style*="grid-template-columns:1.1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Accounts (net worth): cards must not exceed the frame. */
  .acc_page, .acc_page.embed { padding-left: 12px !important; padding-right: 12px !important; }
  .acc_card { max-width: 100%; min-width: 0; }
  .acc_cats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* Tax India */
  .ti_card_hd > div[style] { flex-wrap: wrap; }

  /* ── Modals fit the viewport ───────────────────────────────────────────── */
  [class*="modal"]:not([class*="overlay"]):not([class*="backdrop"]):not([class*="wrap"]):not([class*="open"]):not([class*="btn"]):not([class*="close"]) {
    max-width: calc(100vw - 16px) !important; max-height: calc(100vh - 16px) !important; max-height: calc(100dvh - 16px) !important;
    overflow-y: auto !important; box-sizing: border-box;
  }
  .ti_dbody, .pld_body { max-height: calc(100vh - 120px); overflow: auto; }
  .fh-more-pop { max-height: calc(100vh - 100px); overflow-y: auto; }
}