/* Phone look for the stock page's statements pages, aligned with My stocks / Markets (2026-11-01). Loaded on every phone page with
   media="(max-width: 767px)" (_phone.html): every rule stays inside, scoped to html.aiq-phone.
   Statements (Income statement · Balance sheet · Cash flow · KPIs) and Ratios (Profitability · ROIC · Solvency · Other):
   - the page row is an iOS segmented control (as #ph-rtabs, aiq-phone-header.css), short labels;
   - statements get an Annual | Quarterly segmented control (+ the filing currency | USD for non-USD filers) above the table;
   - each table sits in a filled, borderless 18px card (--fst-card, = --rc-card made opaque so the pinned name column can
     cover the figures that scroll under it; phones are always light, aiq-phone-theme.css); cells take the card colour (base.html's white tbody rows / thead cells lose);
   - figures fade out at the right edge while there is more to scroll and fade under the pinned column once scrolled.
   html.ph-fst-s / -k / -r (statements / KPIs / ratios) come from js/aiq-phone-fin-statements.js, so Multiples (same
   Statistics tab, Valuation session) keeps its own look. The ids (:not(#_)) outweigh aiq-phone-fin.css + aiq-phone-record.css. */
@media (max-width: 767px) {
  html.aiq-phone { --fst-card: var(--rc-card, #F4F5F7); --fst-sep: rgba(15,17,21,.07); --fst-track: rgba(118,118,128,.12); }

  /* ── segmented controls: the page row + the period switch ── */
  html.aiq-phone[data-theme] .fin-ph-row.fst-seg:not([hidden]):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_),
  html.aiq-phone[data-theme] .fst-bar .fst-per:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) {
    display: flex !important; gap: 2px; margin: 2px 4px 12px; padding: 2px; border-radius: 10px; background: var(--fst-track); box-shadow: none;
    overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  html.aiq-phone[data-theme] .fin-ph-row.fst-seg > button:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_),
  html.aiq-phone[data-theme] .fst-bar .fst-per > button:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) {
    flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0; height: 32px; padding: 0 10px; border: 0; border-radius: 8px;
    background: none; box-shadow: none; color: var(--ph-ink); font: 500 14px/1 Inter, system-ui, sans-serif; letter-spacing: -.01em; white-space: nowrap; cursor: pointer; }
  html.aiq-phone[data-theme] .fin-ph-row.fst-seg > button > i:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { display: none !important; }
  html.aiq-phone[data-theme] .fin-ph-row.fst-seg > button.is-on:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_),
  html.aiq-phone[data-theme] .fst-bar .fst-per > button.on:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) {
    background: #FFFFFF; font-weight: 600; box-shadow: 0 1px 3px rgba(15,17,21,.12), 0 0 0 .5px rgba(15,17,21,.04); }
  /* the period bar: Annual | Quarterly fills the row; the currency pair sits beside it at its own width */
  html.aiq-phone[data-theme] .fst-bar:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { display: flex; gap: 8px; margin: 0 4px 12px; }
  html.aiq-phone[data-theme] .fst-bar[hidden]:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { display: none !important; }
  html.aiq-phone[data-theme] .fst-bar .fst-per:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { flex: 1 1 auto; margin: 0; }
  html.aiq-phone[data-theme] .fst-bar .fst-per.fst-ccy:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { flex: 0 0 auto; }
  html.aiq-phone[data-theme] .fst-bar .fst-per.fst-ccy > button:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { flex: 0 0 auto; min-width: 56px; }
  /* no quarterly figures: no Quarterly switch; the currency pair then fills the row */
  html.aiq-phone[data-theme] .fst-bar .fst-per[hidden]:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { display: none !important; }
  html.aiq-phone[data-theme] .fst-bar .fst-per[hidden] + .fst-per.fst-ccy:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { flex: 1 1 auto; }
  html.aiq-phone[data-theme] .fst-bar .fst-per[hidden] + .fst-per.fst-ccy > button:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { flex: 1 0 auto; }

  /* ── statements: the table in a filled card ── */
  html.aiq-phone.ph-fst-s[data-theme] #statements-inner:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { --ph-card: var(--fst-card); --ph-edge: var(--fst-sep); }
  html.aiq-phone.ph-fst-s[data-theme] #statements-inner .stmt-scroll-shell:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) {
    position: relative; margin: 0 4px !important; background: var(--fst-card) !important; border: 0 !important; border-radius: 18px !important;
    box-shadow: none !important; overflow: hidden !important; isolation: isolate; }
  html.aiq-phone.ph-fst-s[data-theme] #statements-inner .stmt-scroll-shell .stmt-table-wrap:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) {
    margin: 0 !important; width: auto !important; border: 0 !important; border-radius: 18px; background: none !important; box-shadow: none !important; }
  html.aiq-phone.ph-fst-s[data-theme] #statements-inner :is(.stmt-fade-right, .stmt-fade-left):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { display: none !important; }
  html.aiq-phone.ph-fst-s[data-theme] #statements-inner .stmt-data-table.aiq-tbl:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
  /* the corner names the statement already shown in the switch: a quiet label, like the period heads */
  html.aiq-phone.ph-fst-s[data-theme] #statements-inner .stmt-data-table.aiq-tbl:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) > thead > tr > th:first-child { color: var(--ph-mut) !important; font-weight: 500 !important; }
  html.aiq-phone.ph-fst-s[data-theme] #statements-inner .stmt-data-table.aiq-tbl:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) > thead > tr > th { padding-top: 12px !important; padding-bottom: 8px !important; }
  /* stopped segment lines keep their muted group, with the dashed rule */
  html.aiq-phone.ph-fst-s[data-theme] #statements-inner .stmt-data-table.aiq-tbl:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) > tbody > tr.stmt-seg-gone-h > td {
    padding-top: 14px !important; padding-bottom: 6px !important; font-size: 12.5px !important; font-weight: 500 !important; color: var(--ph-mut) !important;
    border-top: 1px dashed var(--ph-edge) !important; border-bottom: 0 !important; white-space: nowrap !important; }
  /* iOS Safari doesn't clip pinned (sticky) cells to the scroll box's radius: the corner cells carry it */
  html.aiq-phone.ph-fst-s[data-theme] #statements-inner .stmt-data-table.aiq-tbl:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) > thead > tr:first-child > th:first-child { border-top-left-radius: 18px !important; }
  html.aiq-phone.ph-fst-s[data-theme] #statements-inner .stmt-data-table.aiq-tbl:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) > tbody > tr:last-child > td:first-child { border-bottom-left-radius: 18px !important; }
  html.aiq-phone.ph-fst-s[data-theme] #statements-inner .stmt-data-table.aiq-tbl:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) > tbody > tr:last-child > td { border-bottom: 0 !important; }

  /* ── ratios (Statistics' Profitability · ROIC · Solvency · Other ratios pages): the tab panel is the card ── */
  html.aiq-phone.ph-fst-r[data-theme] #tab-statistics.tab-panel:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { --ph-card: var(--fst-card); --ph-edge: var(--fst-sep);
    margin: 0 4px !important; padding: 0 !important; background: var(--fst-card) !important; border: 0 !important; border-radius: 18px !important;
    box-shadow: none !important; overflow: hidden !important; isolation: isolate; }
  html.aiq-phone.ph-fst-r[data-theme] #tab-statistics .stx-tview:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { margin: 0 !important; width: auto !important; border: 0 !important; background: none !important; border-radius: 18px; }
  html.aiq-phone.ph-fst-r[data-theme] #tab-statistics .stx-at.aiq-tbl:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
  html.aiq-phone.ph-fst-r[data-theme] #tab-statistics .stx-at.aiq-tbl:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) > thead > tr > th { padding-top: 12px !important; }
  /* no "Metric" in the corner (the switch names the page) */
  html.aiq-phone.ph-fst-r[data-theme] #tab-statistics .stx-at.aiq-tbl:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) > thead > tr > th:first-child { font-size: 0 !important; color: transparent !important; }
  html.aiq-phone.ph-fst-r[data-theme] #tab-statistics .stx-at.aiq-tbl:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) > thead > tr:first-child > th:first-child { border-top-left-radius: 18px !important; }
  html.aiq-phone.ph-fst-r[data-theme] #tab-statistics .stx-at.aiq-tbl:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) > tbody > tr:last-child > td:first-child { border-bottom-left-radius: 18px !important; }
  html.aiq-phone.ph-fst-r[data-theme] #tab-statistics .stx-at.aiq-tbl:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) > tbody > tr:last-child > td { border-bottom: 0 !important; }

  /* ── KPIs: aiq-phone-kpis.js's cards turn from white + hairline to filled + borderless ── */
  html.aiq-phone[data-theme] main #kd-root:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { --kdp-card: var(--fst-card); --rc-line: var(--fst-sep); }
  html.aiq-phone[data-theme] .lkl-fin .tab-panel #kd-root .kd-card:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { background: var(--fst-card) !important; border: 0 !important; border-radius: 18px !important; }

  /* ── scroll edges: figures fade out on the right while more columns wait; once scrolled, they fade under the pinned names ── */
  html.aiq-phone.ph-fst-s[data-theme] #statements-inner .stmt-table-wrap.fst-r:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_),
  html.aiq-phone.ph-fst-r[data-theme] #tab-statistics .stx-tview.fst-r:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  html.aiq-phone.ph-fst-s[data-theme] #statements-inner .stmt-table-wrap:not(.fst-r):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_),
  html.aiq-phone.ph-fst-r[data-theme] #tab-statistics .stx-tview:not(.fst-r):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { -webkit-mask-image: none; mask-image: none; }
  html.aiq-phone.ph-fst-s[data-theme] #statements-inner .stmt-table-wrap.fst-l > table > * > tr > :first-child:not([colspan]):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_)::after,
  html.aiq-phone.ph-fst-r[data-theme] #tab-statistics .stx-tview.fst-l > table > * > tr > :first-child:not([colspan]):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_)::after,
  html.aiq-phone.ph-fst-k[data-theme] #kd-root .kd-tblwrap.fst-l > table > * > tr > :first-child:not([colspan]):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_)::after {
    content: ""; position: absolute; top: 0; bottom: 0; right: -14px; width: 14px; background: linear-gradient(90deg, var(--fst-card), transparent); pointer-events: none; }

  /* ── the finance look (2026-11-01): a ratios page with its feature card (js/aiq-phone-fin-valuation.js statHero) — the hero
     sits in the panel, so the card colour moves from the panel to the table ── */
  html.aiq-phone.ph-fst-r[data-theme] #tab-statistics.tab-panel:has(> .pfp-hero):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { background: none !important; overflow: visible !important; border-radius: 0 !important; }
  html.aiq-phone.ph-fst-r[data-theme] #tab-statistics:has(> .pfp-hero) .stx-tview:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { background: var(--fst-card) !important; }
  html.aiq-phone.ph-fst-k #kd-root:not(#_):not(#_):not(#_) { padding-top: 8px; }
  /* KPI card headings: ink, like every stock-page heading in the finance look */
  html.aiq-phone.aiq-phone[data-theme] .lkl-fin .tab-panel #kd-root .kd-card[data-ph-h]:not(.kd-empty):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_)::before { font: 700 19px/1.2 Inter, system-ui, sans-serif !important; letter-spacing: -.02em; color: #101112 !important; }
  /* the money-mix card on top of each statement (js hero(), user 2026-11-08: replaced the card that repeated the table) */
  html.aiq-phone .fst-mix:not(#_):not(#_):not(#_):not(#_) { margin: 0 4px 16px; padding: 18px 18px 14px; background: #FFFFFF; color: #101112; }
  html.aiq-phone .fst-mix-k:not(#_):not(#_):not(#_):not(#_) { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 700 18px/1.25 Inter, system-ui, sans-serif; letter-spacing: -.02em; }
  html.aiq-phone .fst-mix-k span:not(#_):not(#_):not(#_):not(#_) { flex: none; font: 500 13px/1 Inter, system-ui, sans-serif; letter-spacing: 0; color: #80868F; }
  html.aiq-phone .fst-mix-b + .fst-mix-b:not(#_):not(#_):not(#_):not(#_) { margin-top: 18px; }
  html.aiq-phone .fst-mix-h:not(#_):not(#_):not(#_):not(#_) { margin-top: 14px; font: 650 14px/1.2 Inter, system-ui, sans-serif; color: #80868F; }
  html.aiq-phone .fst-mix-bar:not(#_):not(#_):not(#_):not(#_) { display: flex; gap: 3px; height: 26px; margin-top: 12px; }
  html.aiq-phone .fst-mix-bar i:not(#_):not(#_):not(#_):not(#_) { display: block; min-width: 4px; height: 100%; border-radius: 6px; }
  html.aiq-phone .fst-mix ul:not(#_):not(#_):not(#_):not(#_) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px; margin: 14px 0 0; padding: 0; list-style: none; }
  html.aiq-phone .fst-mix li:not(#_):not(#_):not(#_):not(#_) { display: flex; align-items: center; gap: 8px; min-width: 0; font: 500 14px/1.3 Inter, system-ui, sans-serif; color: #3A3F48; }
  html.aiq-phone .fst-mix li span:not(#_):not(#_):not(#_):not(#_) { flex: none; width: 10px; height: 10px; border-radius: 50%; }
  html.aiq-phone .fst-mix li b:not(#_):not(#_):not(#_):not(#_) { margin-left: auto; font-weight: 650; color: #101112; font-variant-numeric: tabular-nums; }
}