/* Phone layout, style A — Settings sections, AI settings, Support inbox/tickets/articles, affiliate dashboard, /setup, report viewer, error pages.
   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. */

/* ── Settings (/settings/<section>): section row as pills, choices as pills / soft tiles ── */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone[data-theme] main .st-back { border-radius: 999px !important; border-color: transparent !important;
    background: var(--ph-card) !important; box-shadow: var(--ph-shadow); opacity: 1; height: 36px; padding: 0 14px 0 10px; }
  html.aiq-phone.aiq-phone[data-theme] main .st-nav { gap: 4px; padding: 2px 0 4px; }
  html.aiq-phone.aiq-phone[data-theme] main .st-nav a { border-radius: 999px !important; height: 36px; padding: 0 14px;
    font-weight: 600; font-size: 14px; }
  html.aiq-phone.aiq-phone[data-theme] main .st-nav a.is-active { background: var(--ph-card) !important; color: var(--ph-ink) !important;
    box-shadow: var(--ph-shadow); }
  html.aiq-phone.aiq-phone[data-theme] main .st-tile { border-radius: var(--ph-r-sm) !important; }
  html.aiq-phone.aiq-phone[data-theme] main .st-pill span { border-radius: 999px !important; }
  html.aiq-phone.aiq-phone[data-theme] main .st-plan-ic { border-radius: var(--ph-r-sm) !important; }
}

/* Your data / Plan rows (icon · text · button): the button drops under the text instead of squeezing it to one word a line */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone[data-theme] main .st-plan { flex-wrap: wrap !important; row-gap: 12px; }
  html.aiq-phone.aiq-phone[data-theme] main .st-plan > div:not(.st-plan-ic) { flex: 1 1 0 !important; min-width: 0 !important; }
  html.aiq-phone.aiq-phone[data-theme] main .st-plan > .st-btn { flex: 1 1 100% !important; margin-left: 0 !important; justify-content: center; }

  /* AI settings (/ai/settings): provider cards and model choices */
  html.aiq-phone.aiq-phone[data-theme] main .ais-card { border-radius: var(--ph-r) !important; border-color: var(--ph-edge) !important;
    box-shadow: none !important; background: var(--ph-card) !important; }
  html.aiq-phone.aiq-phone[data-theme] main .ais-m { border-radius: var(--ph-r-sm) !important; }
}

/* ── Support: inbox filter as pills, topic choices and drop zone soft-cornered ── */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone[data-theme] main .sp-tabs a { border-radius: 999px !important; height: 36px; padding: 0 14px; }
  html.aiq-phone.aiq-phone[data-theme] main .sp-tabs a.is-active { background: var(--ph-card) !important; box-shadow: var(--ph-shadow); }
  html.aiq-phone.aiq-phone[data-theme] main :is(.sp-cpick span, .sp-drop, .sp-thumb) { border-radius: var(--ph-r-sm) !important; }
  html.aiq-phone.aiq-phone[data-theme] main .sp-status { border-radius: 999px !important; }
  html.aiq-phone.aiq-phone[data-theme] main .sp-btn { border-radius: 999px !important; }
}

/* Error pages (_look_error.html): buttons as pills */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone[data-theme] main .lke-b { border-radius: 999px !important; padding-left: 18px !important; padding-right: 18px !important; }
}

/* ── Re-review in the approved look (2026-10-19): flat white page, outlined cards, tab rows = the stock page's chips
   (grey, the open one filled dark; user: every tab row in the financials style). Settings' row is .st-nav (the central
   rule in aiq-phone.css styles .st-tabs) and Support's inbox filter is .sp-tabs, so both are chip-styled here. ── */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone[data-theme] main :is(.st-nav, .sp-tabs) { display: flex !important; flex-direction: row !important; gap: 8px !important;
    overflow-x: auto !important; scrollbar-width: none; padding: 2px 0 4px !important; margin-bottom: 14px !important; }
  html.aiq-phone.aiq-phone[data-theme] main :is(.st-nav, .sp-tabs)::-webkit-scrollbar { display: none; }
  html.aiq-phone.aiq-phone[data-theme] main :is(.st-nav, .sp-tabs) > a {
    flex: none !important; height: 38px !important; padding: 0 15px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important;
    gap: 6px !important; border: 0 !important; border-radius: var(--ph-r-sm) !important; box-shadow: none !important; background: rgba(118,118,128,.12) !important;
    color: var(--ph-ink) !important; font: 500 15px Inter, sans-serif !important; white-space: nowrap !important; }
  html.aiq-phone.aiq-phone[data-theme] main :is(.st-nav, .sp-tabs) > a.is-active { background: #0F1115 !important; color: #fff !important; font-weight: 600 !important; }
  html.aiq-phone.aiq-phone[data-theme="dark"] main :is(.st-nav, .sp-tabs) > a.is-active { background: #F1F2F4 !important; color: #0F1115 !important; }
  html.aiq-phone.aiq-phone[data-theme] main :is(.st-nav, .sp-tabs) > a.is-active :is(i, b) { color: inherit !important; }
  /* the open section leads the row, so it's always on screen (no script scrolls it into view) */
  html.aiq-phone.aiq-phone[data-theme] main .st-nav > a.is-active { order: -1; }
  html.aiq-phone.aiq-phone[data-theme] main .st-nav > a i { display: none !important; }       /* text-only chips, like the stock page */
  html.aiq-phone.aiq-phone[data-theme] main .st-nav-sep { display: none !important; }
  html.aiq-phone.aiq-phone[data-theme] main .sp-tabs > a b { font-weight: 500; opacity: .6; }

  /* Settings Back: a grey round button like the chips */
  html.aiq-phone.aiq-phone[data-theme] main .st-back { background: rgba(118,118,128,.12) !important; box-shadow: none !important; }

  /* Account hub: "Settings" heading no longer jammed under the profile card (the hidden page title left it at 4px) */
  html.aiq-phone.aiq-phone[data-theme] .ac > .ac-me + .ac-h, html.aiq-phone.aiq-phone[data-theme] .ac > .ac-pro + .ac-h { margin-top: 22px !important; }

  /* Support: hero is a plain outlined card on the white page (no blue wash), Popular links as soft chips */
  html.aiq-phone.aiq-phone[data-theme] main .sp-hero { background: var(--ph-card) !important; border: 1px solid var(--ph-edge) !important; border-radius: var(--ph-r) !important; }
  html.aiq-phone.aiq-phone[data-theme] main .sp-hero-links a { border: 0 !important; border-radius: var(--ph-r-sm) !important; background: rgba(118,118,128,.12) !important;
    color: var(--ph-ink) !important; padding: 6px 10px !important; }
}

/* Getting started (/start): its sticky jump row as chips, under the phone top bar (it stuck at 48px, behind it) */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone[data-theme] main .gs-jump { top: var(--ph-top) !important; border-bottom: 0 !important; background: var(--ph-bed) !important; }
  html.aiq-phone.aiq-phone[data-theme] main .gs-jump .gs-wrap { gap: 8px !important; padding: 6px 0 !important; }
  html.aiq-phone.aiq-phone[data-theme] main .gs-jump a { height: 38px; padding: 0 15px !important; display: inline-flex; align-items: center; border: 0 !important;
    border-radius: var(--ph-r-sm) !important; background: rgba(118,118,128,.12); color: var(--ph-ink) !important; font: 500 15px Inter, sans-serif !important; }
  html.aiq-phone.aiq-phone[data-theme] main .gs-jump a.on { background: #0F1115; color: #fff !important; font-weight: 600 !important; }
  html.aiq-phone.aiq-phone[data-theme="dark"] main .gs-jump a.on { background: #F1F2F4; color: #0F1115 !important; }
}

/* One flat colour in dark mode too: these cards kept their own #292929 / #333 fills on the #161616 page, the grey-on-grey
   the user asked to drop. Same colour as the page, outlined; the form footer band goes flat with a hairline. */
@media (max-width: 767px) {
  html.aiq-phone.aiq-phone[data-theme] .ac { --ac-card: var(--ph-card); --ac-line: var(--ph-edge); }
  html.aiq-phone.aiq-phone[data-theme] main :is(.st-card, .st-preview-card, .sp-card, .sp-hero, .ais-card, .gs-card) {
    background: var(--ph-card) !important; border-color: var(--ph-edge) !important; }
  html.aiq-phone.aiq-phone[data-theme] main .st-foot { background: transparent !important; border-top: 1px solid var(--ph-edge) !important; }
}