/* Phone layout, style A — Pop-ups: dialogs, menus, popovers, the search dropdown and the command palette.
   Same rules as aiq-phone.css: every rule sits inside @media (max-width: 767px) and starts with html.aiq-phone
   (tests/test_phone_layout.py checks every aiq-phone*.css file). Loaded by _phone.html after aiq-phone.css. */

/* The frosted kit (aiq-frost.css) sets every menu / dialog / toast / search-results radius from --fr-r with
   `:not(#_)` + !important, so phones re-point the variables: 14px menus, 10px rows. Dialogs get 18px below at id level. */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone { --fr-r: 14px; --fr-r2: 10px; }

  /* ── dialogs: 18px, inside the screen, comfortable buttons ── */
  html.aiq-phone.aiq-phone .aiq-dlg:not(#_) { border-radius: var(--ph-r) !important; }
  html.aiq-phone.aiq-phone .aiq-dlg { width: min(var(--dlg-w, 500px), calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 40px - env(safe-area-inset-bottom)); }
  html.aiq-phone.aiq-phone .aiq-dlg-h { padding: 18px 18px 8px; }
  html.aiq-phone.aiq-phone .aiq-dlg-t { font-size: 17px; }
  html.aiq-phone.aiq-phone .aiq-dlg-f { padding: 8px 18px 18px; }
  html.aiq-phone.aiq-phone .aiq-dlg .aiq-btn, html.aiq-phone.aiq-phone .aiq-pop .aiq-btn { min-height: 42px; font-size: 15px; }
  html.aiq-phone.aiq-phone :is(.aiq-dlg, .aiq-pop) .aiq-in { height: 44px; font-size: 16px; border-radius: var(--ph-r-sm); }
  html.aiq-phone.aiq-phone .aiq-x { width: 36px; height: 36px; border-radius: 999px; background: var(--pop-hover); }

  /* ── menus: 44px rows, never wider or taller than the screen above the tab bar ── */
  html.aiq-phone.aiq-phone .aiq-menu { max-width: calc(100vw - 24px); padding: 6px;
    max-height: calc(100dvh - var(--ph-top) - 100px - env(safe-area-inset-bottom)); overflow-y: auto; }
  html.aiq-phone.aiq-phone .aiq-menu .aiq-mi { height: 44px; padding: 0 12px; font-size: 15px; gap: 11px; }
  html.aiq-phone.aiq-phone .aiq-menu .aiq-mi > :is(i, svg) { font-size: 18px; width: 18px; }
  html.aiq-phone.aiq-phone .aiq-menu .aiq-menu-lbl { padding: 10px 12px 4px; font-size: 12px; }

  /* ── popovers ── */
  html.aiq-phone.aiq-phone .aiq-pop { border-radius: 14px !important; max-width: calc(100vw - 24px); }

  /* ── top bar Help menu (_help_menu.html / _tour.html): glass-free, 14px, roomy rows ── */
  html.aiq-phone.aiq-phone #aiq-help-menu { border-radius: 14px; width: min(300px, calc(100vw - 24px)); padding: 6px; }
  html.aiq-phone.aiq-phone #aiq-help-menu :is(a, button) { min-height: 48px; padding: 9px 10px; border-radius: 10px; align-items: center; }
  html.aiq-phone.aiq-phone #aiq-help-menu b { font-size: 15px; }
  html.aiq-phone.aiq-phone #aiq-help-menu small { font-size: 12.5px; }

  /* ── search results under the top bar's search field ── */
  html.aiq-phone.aiq-phone .ticker-ac-drop { max-width: calc(100vw - 24px); }
  html.aiq-phone.aiq-phone .ticker-ac-row { min-height: 48px; padding: 10px 14px; }
  html.aiq-phone.aiq-phone .ticker-ac-sym { font-size: 15px; }
  html.aiq-phone.aiq-phone .ticker-ac-name { font-size: 14px; }

  /* ── toasts: rounded, above the tab bar (aiq-phone.css lifts them) ── */
  html.aiq-phone.aiq-phone #aiq-toast { max-width: calc(100vw - 24px); }
}

/* ── Stock page Watchlists / Notes / Alerts pop-up (financials/_track.html, opens under the round buttons):
   rounded, and its scrolling body stops short of the tab bar (the watchlists list ran under it). ── */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone #fa-pop { border-radius: 14px; overflow: hidden; }
  html.aiq-phone.aiq-phone #fa-pop .fa-pb { max-height: max(180px, calc(100dvh - 430px - env(safe-area-inset-bottom))); }
  /* 16px text in fields: iOS zooms the page into anything smaller */
  html.aiq-phone.aiq-phone #fa-pop :is(textarea, .fa-in) { font-size: 16px; }
}

/* ── Watchlist "Density, sort order and columns" panel: 625px tall, it opened under the toolbar and ran off the
   bottom of the screen. On a phone it is pinned between the top bar and the tab bar, full width less the gutter;
   its column list scrolls (it already flexes). ── */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone #wl-col-panel { position: fixed !important; top: calc(var(--ph-top) + 8px) !important; left: 12px !important; right: 12px !important;
    width: auto !important; max-height: calc(100dvh - var(--ph-top) - 108px - env(safe-area-inset-bottom)) !important; }
  html.aiq-phone.aiq-phone #wl-col-panel .wl-col-item { height: 44px; font-size: 15px; }
  html.aiq-phone.aiq-phone #wl-new-menu { max-width: calc(100vw - 24px); }
}

/* ── Screener ── */
@media (max-width: 767px) {
  /* Edit criteria is a full-screen sheet on phones (screener/_screens_ui.html): keep it edge to edge and square */
  html.aiq-phone.aiq-phone #scx-ed.aiq-dlg:not(#_) { width: 100vw !important; border-radius: 0 !important; border: 0 !important; }
  /* (Columns' squeezed rows are fixed for every phone in screener/index.html) */
  html.aiq-phone.aiq-phone #col-cfg-panel .cfg-row { min-height: 40px; }
}

/* ── Earnings "My stocks" picker ── */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone #ec-my-pop { border-radius: 14px; padding: 6px; max-width: calc(100vw - 24px); }
  html.aiq-phone.aiq-phone #ec-my-pop :is(button, a) { min-height: 42px; border-radius: 10px; font-size: 15px; }
}

/* ── Insiders Filters ── */
@media (max-width: 767px) {
  /* fixed width: it hangs off the Filters button's right edge, so growing with its contents pushed it off the left */
  html.aiq-phone.aiq-phone #ins-pop { border-radius: 14px; width: min(350px, calc(100vw - 32px)); box-sizing: border-box; }
  html.aiq-phone.aiq-phone #ins-pop select { min-height: 38px; font-size: 16px; width: 100%; min-width: 0; }
}

/* ── Stock page section menus: the ones for the sections at the right end of the row (Valuation, Capital, Company, Documents)
   opened under their button and ran a few px past the screen's right edge; on a phone they hug the right gutter. ── */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone :is(#fin-menu-val, #fin-menu-cap, #fin-menu-co, #fin-menu-docs) { left: auto !important; right: 12px !important; }
  /* Statements Options menu (Values / YoY / % of revenue / Excel) */
  html.aiq-phone.aiq-phone #stmt-opt-menu .stmt-opt-it { min-height: 44px; font-size: 15px; }
}

/* Re-review (2026-10-19, flat white page): Watchlist's list menu (gear → Rename / Delete list…) opened from the gear's
   left edge and ran 80px past the right side, dragging the whole page sideways. On phones it sits under the top bar,
   inset 12px both sides. */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone[data-theme] #wl-lmenu.aiq-menu { position: fixed !important; top: 120px !important; left: 12px !important; right: 12px !important;
    width: auto !important; max-width: none !important; }
}

/* ── Pop-ups in the approved phone look (user, 2026-10-19: "pop-ups should be changed to fit the new theme"): no frosted
   glass — solid page-white surfaces with the 1px card outline and a soft shadow, 18px dialogs / 14px menus; grey bands
   inside go flat; fields 10px; dropdown tokens as pills. The glass tokens come from aiq-frost.css. ── */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone[data-theme] { --fr-bg: var(--ph-card); --fr-line: var(--ph-edge); --fr-r: 14px; --fr-r2: 10px; --fr-blur: none;
    --fr-shadow: 0 12px 32px rgba(15,17,21,.14), 0 1px 3px rgba(15,17,21,.06); }
  html.aiq-phone.aiq-phone[data-theme="dark"] { --fr-shadow: 0 12px 32px rgba(0,0,0,.55); }
  html.aiq-phone.aiq-phone[data-theme] .aiq-dlg:not(#_) { border-radius: var(--ph-r) !important; }
  html.aiq-phone.aiq-phone[data-theme] .aiq-pop:not(#_) { background: var(--ph-card) !important; border: 1px solid var(--ph-edge) !important;
    box-shadow: 0 12px 32px rgba(15,17,21,.14) !important; }
  html.aiq-phone.aiq-phone[data-theme] :is(.aiq-dlg, .aiq-pop, .aiq-menu, .fa-pop, #scx-ed)
      :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) { border-radius: var(--ph-r-sm) !important; }
  /* Screener's Edit criteria (a full-screen sheet): flat white, the "Start from" band as a plain row, pill tokens */
  html.aiq-phone.aiq-phone[data-theme] #scx-ed.aiq-dlg:not(#_) { background: var(--ph-card) !important; }
  html.aiq-phone.aiq-phone[data-theme] #scx-ed .scx-scope { background: transparent !important; border: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  html.aiq-phone.aiq-phone[data-theme] #scx-ed .scx-tok { border-radius: 999px !important; background: rgba(118,118,128,.12) !important; border: 0 !important; }
}

/* ── Page dropdowns that kept their desktop size (user, 2026-10-20, screenshot of the screener's Layouts menu: "hasn't
   been restyled for mobile … look for all popups and drop downs"). Same phone standard as the kit above: inset 12px
   from both edges, 44px rows, 15px text, 16px fields (iOS zooms into smaller), nothing under the tab bar.
   Pickers opened by JS get their top from the button; the side insets win with !important. ── */
@media (max-width: 767px) {
  /* fixed-position menus: full width less the gutter, never past the tab bar */
  html.aiq-phone.aiq-phone :is(#col-lay-panel, #sc-pop, #si-act-menu, #gm-pop, #wl-switch-pop, .wl-kpop) {
    left: 12px !important; right: 12px !important; width: auto !important; min-width: 0 !important; max-width: none !important;
    box-sizing: border-box; border-radius: 14px !important;
    max-height: calc(100dvh - var(--ph-top) - 110px - env(safe-area-inset-bottom)) !important; overflow-y: auto; }
  /* absolutely-positioned ones stay in their parent and stay inside the screen */
  html.aiq-phone.aiq-phone :is(#ec-more-pop, .wl-newmenu.aiq-pop, .wl-cust.aiq-pop, #seg-type, #ai-tk-pop) {
    border-radius: 14px !important; max-width: calc(100vw - 24px) !important; box-sizing: border-box; }
  html.aiq-phone.aiq-phone .sc-plot-popover { left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important; border-radius: 14px !important; }

  /* rows */
  html.aiq-phone.aiq-phone :is(#col-lay-panel .cfg-preset, #sc-pop .pop-opt, #ec-more-pop .ec-mi, #si-act-menu .si-thf-item, #seg-type button,
      #gm-pop .opt, .wl-newmenu-scroll > :is(button, a), #wl-switch-pop :is(button, a):not(.aiq-btn)) {
    min-height: 44px !important; height: auto !important; font-size: 15px !important; border-radius: 10px; box-sizing: border-box; }
  html.aiq-phone.aiq-phone :is(#col-lay-panel, #si-act-menu, #seg-type) { padding: 6px !important; }
  html.aiq-phone.aiq-phone #col-lay-panel .cfg-preset.save { border-radius: 0; }
  html.aiq-phone.aiq-phone #col-lay-panel .cfg-preset .del { opacity: .7; font-size: 18px; padding: 0 6px; }
  html.aiq-phone.aiq-phone #gm-pop .cfg-row { min-height: 48px; font-size: 15px; }
  html.aiq-phone.aiq-phone :is(#sc-pop .pop-grp, #col-cfg-presets .cfg-lay-sec, .wl-newmenu-head) { font-size: 12px !important; padding-top: 10px !important; }
  html.aiq-phone.aiq-phone :is(.sc-plot-popover .sc-seg, .sc-plot-popover .sc-pick, .wl-cust-seg button, #gm-pop .gm-seg button) { min-height: 36px; font-size: 14px; }
  html.aiq-phone.aiq-phone .sc-plot-popover .sc-pick { max-width: none; }

  /* fields */
  html.aiq-phone.aiq-phone :is(#cfg-save-form input, #sc-pop .pop-q, #gm-pop .search, #gm-pop .row input, #ai-tk-pop input, #scx-screens .q, #scx-add .scx-pq) {
    font-size: 16px !important; height: 42px !important; border-radius: var(--ph-r-sm) !important; }

  /* ── Screener "+" New screen picker and Add criteria: a sheet between the top bar and the tab bar, one column, the
     categories as a row of pills over the list (the 120px side column squeezed the screens to a few words a line) ── */
  html.aiq-phone.aiq-phone :is(#scx-screens, #scx-add) { position: fixed !important; top: calc(var(--ph-top) + 8px) !important;
    bottom: calc(92px + env(safe-area-inset-bottom)) !important; left: 12px !important; right: 12px !important;
    width: auto !important; height: auto !important; max-height: none !important; border-radius: var(--ph-r) !important;
    background: var(--ph-card) !important; border: 1px solid var(--ph-edge) !important; }
  html.aiq-phone.aiq-phone #scx-screens { grid-template-columns: minmax(0,1fr) !important; grid-template-rows: auto minmax(0,1fr); }
  html.aiq-phone.aiq-phone #scx-screens .cats { order: -1; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 12px 12px 4px;
    border-right: 0; scrollbar-width: none; }
  html.aiq-phone.aiq-phone #scx-screens .cats::-webkit-scrollbar { display: none; }
  html.aiq-phone.aiq-phone #scx-screens .cats hr { display: none; }
  html.aiq-phone.aiq-phone #scx-screens .cats button { flex: none; width: auto; gap: 6px; height: 34px; align-items: center; padding: 0 13px;
    border-radius: 999px; font-size: 14px; white-space: nowrap; background: rgba(118,118,128,.12); color: var(--ph-ink2); }
  html.aiq-phone.aiq-phone #scx-screens .cats button.on { background: var(--ph-acc); color: #fff; }
  html.aiq-phone.aiq-phone #scx-screens .cats button.on .c { color: rgba(255,255,255,.75); }
  html.aiq-phone.aiq-phone #scx-screens .list { padding: 8px 12px 12px; }
  html.aiq-phone.aiq-phone #scx-screens .q { margin-bottom: 8px; }
  html.aiq-phone.aiq-phone .scx-scr { padding: 12px 10px; border-radius: 12px; }
  html.aiq-phone.aiq-phone .scx-scr .n { font-size: 15px; }
  html.aiq-phone.aiq-phone .scx-scr .m { font-size: 13px; }
  html.aiq-phone.aiq-phone .scx-scr .d { font-size: 13px; line-height: 1.4; }
  html.aiq-phone.aiq-phone .scx-scr .ct .d { font-size: 12px; }
  html.aiq-phone.aiq-phone .scx-scr .del { display: inline; font-size: 13px; }
  html.aiq-phone.aiq-phone #scx-screens .empty { font-size: 14px; }

  html.aiq-phone.aiq-phone #scx-add { grid-template-rows: auto minmax(0,1fr) auto !important; grid-template-columns: minmax(0,1fr) !important; }
  html.aiq-phone.aiq-phone #scx-add .hd input { width: 100%; box-sizing: border-box; }
  html.aiq-phone.aiq-phone #scx-add .ft .picked { display: none; }
  html.aiq-phone.aiq-phone #scx-add .ft .aiq-btn.txt { margin-right: auto; padding-left: 0; }
  html.aiq-phone.aiq-phone #scx-add .hd { padding: 12px 12px 6px; }
  html.aiq-phone.aiq-phone #scx-add .bd { grid-template-columns: minmax(0,1fr) !important; grid-template-rows: auto minmax(0,1fr); padding: 0 12px; }
  html.aiq-phone.aiq-phone #scx-add .fo { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; border-right: 0; padding: 4px 0 8px; scrollbar-width: none; }
  html.aiq-phone.aiq-phone #scx-add .fo::-webkit-scrollbar { display: none; }
  html.aiq-phone.aiq-phone #scx-add .fo hr { display: none; }
  html.aiq-phone.aiq-phone #scx-add .fo button { flex: none; width: auto; gap: 6px; height: 34px; align-items: center; padding: 0 13px;
    border-radius: 999px; font-size: 14px; white-space: nowrap; background: rgba(118,118,128,.12); color: var(--ph-ink2); }
  html.aiq-phone.aiq-phone #scx-add .fo button.on { background: var(--ph-acc); color: #fff; }
  html.aiq-phone.aiq-phone #scx-add .fo button.on .c { color: rgba(255,255,255,.75); }
  html.aiq-phone.aiq-phone #scx-add .ls { overflow-y: auto; }
  html.aiq-phone.aiq-phone #scx-add .scx-mi { min-height: 44px; font-size: 15px; border-radius: 10px; }
  html.aiq-phone.aiq-phone #scx-add .ft { padding: 10px 12px 12px; }
  html.aiq-phone.aiq-phone #scx-add .ft .aiq-btn { min-height: 42px; font-size: 15px; }
}

/* the same solid card surface as the kit pop-ups above (they kept the desktop #292929 / white) */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone[data-theme] :is(#sc-pop, #si-act-menu, #seg-type, #ec-more-pop, #ai-tk-pop, .sc-plot-popover) {
    background: var(--ph-card) !important; border: 1px solid var(--ph-edge) !important; box-shadow: var(--fr-shadow) !important; }
  html.aiq-phone.aiq-phone #sc-pop .pop-list { max-height: calc(100dvh - 330px - env(safe-area-inset-bottom)); }
}

/* Watchlist + (new list): hung off the + button 42px in from the left; on phones it sits under the top bar like the
   list menu (#wl-lmenu above), full width less the gutter, starters in 15px */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone[data-theme] .wl-newmenu.aiq-pop { position: fixed !important; top: calc(var(--ph-top) + 8px) !important; left: 12px !important;
    right: 12px !important; width: auto !important; max-width: none !important; }
  html.aiq-phone.aiq-phone .wl-newmenu-scroll { max-height: calc(100dvh - var(--ph-top) - 230px - env(safe-area-inset-bottom)); }
  html.aiq-phone.aiq-phone .wl-preset { padding-top: 10px !important; padding-bottom: 10px !important; border-radius: 10px; }
  html.aiq-phone.aiq-phone .wl-preset-name { font-size: 15px; }
  html.aiq-phone.aiq-phone .wl-preset-n { font-size: 12px; }
  html.aiq-phone.aiq-phone .wl-preset-note { font-size: 13px; }
  html.aiq-phone.aiq-phone .wl-newmenu-head { font-size: 12px; }
}