/* Phone menu (user, 2026-11-01, Reddit-style): a left panel behind the bottom bar's More tab, every page in it as dropdown
   groups. Opening slides the panel in and pushes the page right under a light wash, like Reddit's app; dropdowns glide open
   (js/aiq-phone-drawer.js animates both). With html.ph-drawer (the phone default; ?pnav=off opts out, _phone.html). Markup _phone_drawer.html.
   Rows look like Attio's sidebar (user, same day, with an Attio screenshot): small thin grey icons, colour tiles only on the
   tool groups (Attio colours only its Records), small muted headings with the chevron on the left, no rules between
   groups, the open page a soft grey inset pill, a very light grey panel. */
@media (max-width: 767px) {
  /* the menu replaces the Financials + Explore tabs. By id, never a[href=…]: PostHog's recorder makes every href
     absolute, so href rules miss in session replays (showed 7 tabs, 2026-11-02) */
  html.aiq-phone.ph-drawer #aiq-ptabs #aiq-ptab-fin,
  html.aiq-phone.ph-drawer #aiq-ptabs #aiq-ptab-explore { display: none !important; }

  html.aiq-phone.ph-drawer #ph-drw:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 2147483000; }
  /* a floating rounded card, inset from the screen's edges (user, 2026-11-01: "more rounded edges … straight lines just
     doesn't look as good on mobile"); its right edge is where the pushed page starts */
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-p { position: absolute; top: calc(8px + env(safe-area-inset-top)); bottom: calc(8px + env(safe-area-inset-bottom)); left: 8px;
    width: calc(min(80vw, 320px) - 16px); overflow-y: auto; overscroll-behavior: contain; background: #fff; border-radius: 22px;
    box-shadow: 0 0 0 .5px rgba(15,17,21,.08), 0 8px 24px rgba(15,17,21,.18), 0 24px 72px rgba(15,17,21,.38); padding: 10px 0 18px; }
  /* dark: a step lighter than the page (the phone's dark layer paints <nav> the page colour, hence the extra weight) */
  html.aiq-phone.ph-drawer[data-theme="dark"] #ph-drw .ph-drw-p:not(#_):not(#_) { background: #2B2F3A; box-shadow: 0 0 0 .5px rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.5), 0 24px 72px rgba(0,0,0,.75); }
  /* the pushed page shows to the right of the menu as a matching rounded card, inset the same 8px (user, 2026-11-01: the
     square page beside the rounded menu "looks weird"), slightly dimmed; a tap there closes the menu. Its huge spread shadow
     is the backdrop around both cards, a near-black like the iPhone's app switcher (a flat grey "doesn't look very
     natural"); the menu card comes later in the markup, so it paints over that shadow. Both fade in with the dim. */
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-dim { position: absolute; top: calc(8px + env(safe-area-inset-top)); bottom: calc(8px + env(safe-area-inset-bottom));
    left: min(80vw, 320px); right: -40px; border-radius: 22px; background: rgba(15,17,21,.10); box-shadow: 0 0 0 1000px #16171B; }
  /* dark: a near-black with a faint navy tint, on purpose — js/aiq-attio-classic.js repaints every *neutral* dark grey in a
     dark-mode rule to the page colour (#252933), which made the backdrop vanish and the page card's corners with it */
  html.aiq-phone.ph-drawer[data-theme="dark"] #ph-drw .ph-drw-dim { background: rgba(3,5,17,.3); box-shadow: 0 0 0 1000px #030511; }
  html.aiq-phone.ph-drw-lock, html.aiq-phone.ph-drw-lock body { overflow: hidden; }

  /* groups: spacing, no rules */
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-top { padding: 2px 0 6px; }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-sec { padding: 4px 0 6px; }

  /* rows: an inset pill (8px from the panel's edges), small icon + regular-weight label */
  html.aiq-phone.ph-drawer #ph-drw a, html.aiq-phone.ph-drawer #ph-drw .ph-drw-sub { display: flex; align-items: center; gap: 12px; width: calc(100% - 16px); margin: 0 8px;
    min-height: 42px; padding: 0 10px; border: 0; border-radius: 12px; background: none; color: var(--ph-ink); font: inherit; font-size: 16px; font-weight: 450;
    letter-spacing: -.01em; text-align: left; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  html.aiq-phone.ph-drawer #ph-drw a span, html.aiq-phone.ph-drawer #ph-drw .ph-drw-sub span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.aiq-phone.ph-drawer #ph-drw a small { margin-left: auto; color: var(--ph-mut); font-size: 13px; }
  html.aiq-phone.ph-drawer #ph-drw a:active, html.aiq-phone.ph-drawer #ph-drw .ph-drw-sub:active { background: rgba(15,17,21,.05); }
  /* the page you're on: a soft grey pill */
  html.aiq-phone.ph-drawer #ph-drw a.on { background: rgba(15,17,21,.055); font-weight: 500; }
  html.aiq-phone.ph-drawer[data-theme="dark"] #ph-drw a.on, html.aiq-phone.ph-drawer[data-theme="dark"] #ph-drw a:active { background: rgba(255,255,255,.07); }

  /* icons: thin grey outline glyphs (the bold glyphs drawn in Phosphor Regular; @font-face in css/aiq-table-attio.css) */
  html.aiq-phone.ph-drawer #ph-drw a > i, html.aiq-phone.ph-drawer #ph-drw .ph-drw-sub > i:first-child { flex: none; width: 20px; height: 20px; display: grid; place-items: center;
    font-family: "Phosphor-Regular" !important; font-size: 19px; color: var(--ph-ink2); }
  /* colour tiles only on the tool groups, like Attio's Records: a white glyph on a 20px rounded square (--tile per row) */
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-sec:is([data-sec="markets"], [data-sec="follow-the-money"], [data-sec="research"]) a > i:not(.ph-drw-dex) {
    border-radius: 6px; background: var(--tile, #727c94); color: #fff; font-family: "Phosphor-Bold" !important; font-size: 12px; }
  html.aiq-phone.ph-drawer #ph-drw a > i.ph-drw-dex svg { width: 20px; height: 20px; }
  html.aiq-phone.ph-drawer #ph-drw a > img { width: 20px; height: 20px; flex: none; border-radius: 6px; object-fit: contain; background: #fff; box-shadow: 0 0 0 1px var(--ph-line); }

  /* group heading = the dropdown's button: small muted words, the chevron on the left (turned by JS when shut) */
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-h { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; min-height: 34px; padding: 0 18px;
    border: 0; background: none; color: var(--ph-mut); font: inherit; font-size: 14px; font-weight: 500; letter-spacing: 0; text-align: left; -webkit-tap-highlight-color: transparent; }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-h > i { order: -1; flex: none; width: 20px; font-family: "Phosphor-Regular" !important; font-size: 13px; color: var(--ph-mut); text-align: center; }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-sub > .ph-drw-car { margin-left: auto; flex: none; font-family: "Phosphor-Regular" !important; font-size: 13px; color: var(--ph-mut); }
  html.aiq-phone.ph-drawer #ph-drw [aria-expanded="false"] > i:last-child { transform: rotate(-90deg); }
  html.aiq-phone.ph-drawer #ph-drw [aria-expanded="false"] + .ph-drw-b,
  html.aiq-phone.ph-drawer #ph-drw [aria-expanded="false"] + .ph-drw-sg { display: none; }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-b, html.aiq-phone.ph-drawer #ph-drw .ph-drw-sg { overflow: hidden; }
  /* the stock's heading: its logo + name, same small muted words */
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-co { display: flex; align-items: center; gap: 8px; min-width: 0; }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-co img { width: 16px; height: 16px; border-radius: 5px; object-fit: contain; background: #fff; box-shadow: 0 0 0 1px var(--ph-line); }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-co b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-co b small { color: var(--ph-faint); font-weight: 450; font-size: 13px; margin-left: 5px; }

  /* the stock's groups (Statements, Valuation…): rows that open in place; their pages hang off a thin guide line under the
     group's icon (the desktop sidebar's look the user kept, 2026-10-25) */
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-sg { position: relative; }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-sg::before { content: ''; position: absolute; left: 27.5px; top: 0; bottom: 10px; width: 1.5px; border-radius: 1px; background: var(--ph-line); }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-sg a { position: relative; min-height: 38px; padding-left: 42px; font-size: 15px; color: var(--ph-ink2); }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-sg a > i { display: none; }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-sg a.on { color: var(--ph-ink); }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-sg a.on::before { content: ''; position: absolute; left: 18.5px; width: 3.5px; height: 20px; border-radius: 2px; background: var(--ph-ink); }

  /* ── cards (user, 2026-11-01, with a to-do app's menu: "splitting the more menu into different cards like this") ──
     the panel is a light grey tray; you (avatar, name, email, search), the top pages and every group sit on their own white
     rounded card; a group's heading is the card's first row, its chevron on the right. The stock's card is filled with the
     brand blue, white words (user, same day: "a couple cards … with just like filled color", a wallet app's coloured cards). */
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-p { background: #F2F3F6; padding: 8px 8px 16px; }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-me, html.aiq-phone.ph-drawer #ph-drw .ph-drw-top, html.aiq-phone.ph-drawer #ph-drw .ph-drw-sec {
    margin: 0 0 8px; padding: 4px 0; background: #FFFFFF; border-radius: 16px; box-shadow: 0 0 0 .5px rgba(15,17,21,.05), 0 1px 2px rgba(15,17,21,.03); }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-sec[hidden] { display: none; }
  html.aiq-phone.ph-drawer #ph-drw a, html.aiq-phone.ph-drawer #ph-drw .ph-drw-sub { width: calc(100% - 8px); margin: 0 4px; padding: 0 12px; }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-h { padding: 0 16px; min-height: 36px; font-size: 13px; }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-h > i { order: 1; margin-left: auto; width: auto; }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-sec:has(> .ph-drw-h[aria-expanded="false"]) { padding: 2px 0; }
  /* the guide line under the stock's groups moves with the rows' new inset */
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-sg::before { left: 25.5px; }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-sg a.on::before { left: 16.5px; }

  /* you: avatar · name over email · a round search button */
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-me { display: flex; align-items: center; padding: 6px 6px 6px 0; }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-me .ph-drw-me-a { flex: 1; min-width: 0; min-height: 52px; margin: 0 0 0 4px; width: auto; gap: 10px; }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-me .ph-drw-me-a.on { background: none; }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-av { flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
    background: linear-gradient(135deg, #9646EF, #455DDC); color: #fff; font-size: 14px; font-weight: 600; }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-av img { width: 100%; height: 100%; object-fit: cover; }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-me-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-me-t b { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-me-t small { margin: 0; font-size: 12px; color: var(--ph-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-me .ph-drw-me-s { flex: none; width: 38px; min-height: 38px; height: 38px; margin: 0; padding: 0; justify-content: center; border-radius: 50%; }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-me .ph-drw-me-s > i { color: var(--ph-ink); font-size: 18px; }

  /* the stock's card, filled: brand blue, white words; its logo stays on a white tile */
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-sec[data-sec="stock"] { background: #455DDC; box-shadow: 0 6px 16px rgba(69,93,220,.22); color: #fff;
    --ph-ink: #FFFFFF; --ph-ink2: rgba(255,255,255,.86); --ph-mut: rgba(255,255,255,.72); --ph-faint: rgba(255,255,255,.6); --ph-line: rgba(255,255,255,.28); }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-sec[data-sec="stock"] .ph-drw-h { color: #fff; min-height: 44px; font-size: 15px; }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-sec[data-sec="stock"] .ph-drw-co img { width: 22px; height: 22px; border-radius: 6px; box-shadow: none; }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-sec[data-sec="stock"] a.on, html.aiq-phone.ph-drawer #ph-drw .ph-drw-sec[data-sec="stock"] a:active,
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-sec[data-sec="stock"] .ph-drw-sub:active { background: rgba(255,255,255,.16); }
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-sec[data-sec="stock"] a > i, html.aiq-phone.ph-drawer #ph-drw .ph-drw-sec[data-sec="stock"] .ph-drw-sub > i:first-child { color: #fff; }

  /* dark: a tinted tray and cards (aiq-attio-classic.js repaints neutral dark greys) */
  html.aiq-phone.ph-drawer[data-theme="dark"] #ph-drw .ph-drw-p:not(#_):not(#_) { background: #1C1F2A; }
  html.aiq-phone.ph-drawer[data-theme="dark"] #ph-drw :is(.ph-drw-me, .ph-drw-top, .ph-drw-sec):not([data-sec="stock"]) { background: #2A2E3B; box-shadow: none; }

  /* the page beside the open menu (user, 2026-11-01: "the part on the right doesn't fit well … make it fuzzy … and fix the
     colors"): phones are always light now, so the backdrop is a light grey, not the old near-black, and the pushed page is
     blurred (js slide()) under a soft white wash; its card corners stay */
  html.aiq-phone.ph-drawer #ph-drw .ph-drw-dim:not(#_):not(#_) { background: rgba(255,255,255,.35); box-shadow: 0 0 0 1000px #E8EAEF; }
}