/* Phone layout, style A — Markets and the Chart page.
   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. */

/* Markets + Chart re-review (2026-10-19, approved phone look). The chapter row is styled centrally (aiq-phone.css
   "Every tab row"); here: in-card tab rows (.mk3 .tabs — "Sector returns | Valuation | Rotation", "Gainers & losers |
   …", "Yield curve | 10Y − 2Y spread") become the same chips, and value toggles (.mk3 .seg — 10Y/30Y/All, 1W/1M/YTD,
   Globe | Map; Chart's .aqp-seg — 1M…MAX, Lin | Log | %) become round-ended tracks: grey track, white pill on the
   open option. */
@media (max-width: 767px) {
  /* in-card tabs = chips */
  html.aiq-phone.aiq-phone[data-theme] .mk3 .tabs { gap: 8px !important; align-self: auto !important; padding: 2px 0 !important; }
  html.aiq-phone.aiq-phone[data-theme] .mk3 .tabs button { height: 38px; padding: 0 14px !important; border-radius: var(--ph-r-sm) !important;
    background: rgba(118,118,128,.12) !important; color: var(--ph-ink) !important; font: 500 15px Inter, sans-serif !important; }
  html.aiq-phone.aiq-phone[data-theme] .mk3 .tabs button.on { background: #0F1115 !important; color: #fff !important; font-weight: 600 !important; }
  html.aiq-phone.aiq-phone[data-theme="dark"] .mk3 .tabs button.on { background: #F1F2F4 !important; color: #0F1115 !important; }
  html.aiq-phone.aiq-phone[data-theme] .mk3 .tabs button.on::after { display: none !important; }
  /* a card header holding chips stacks: chips on their own line, its other controls under them */
  html.aiq-phone.aiq-phone[data-theme] .mk3 .chd:has(> .tabs) { flex-wrap: wrap !important; row-gap: 8px !important; height: auto !important; padding-top: 10px !important; padding-bottom: 10px !important; }
  html.aiq-phone.aiq-phone[data-theme] .mk3 .chd > .tabs { flex: 1 1 100% !important; max-width: 100% !important; }

  /* value toggles = round-ended tracks */
  html.aiq-phone.aiq-phone[data-theme] :is(.mk3 .seg, .aqp-seg) { border: 0 !important; border-radius: 999px !important; padding: 3px !important; gap: 2px !important;
    background: rgba(118,118,128,.12) !important; box-shadow: none !important; }
  html.aiq-phone.aiq-phone[data-theme] :is(.mk3 .seg, .aqp-seg) > button { border: 0 !important; border-radius: 999px !important; background: transparent !important;
    box-shadow: none !important; color: var(--ph-mut) !important; }
  html.aiq-phone.aiq-phone[data-theme] :is(.mk3 .seg, .aqp-seg) > button.on { background: var(--ph-card) !important; color: var(--ph-ink) !important;
    box-shadow: 0 1px 3px rgba(15,17,21,.14) !important; }
  html.aiq-phone.aiq-phone[data-theme="dark"] :is(.mk3 .seg, .aqp-seg) > button.on { background: #3A3A3C !important; }
}

@media (max-width: 767px) {
  /* Today's index picker: the chips stacked one per row at their own widths (5 rows + a lone "+ More"). Two even
     columns instead; the open index keeps its dark outline. */
  html.aiq-phone.aiq-phone[data-theme] .mkx-chips { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 8px !important;
    overflow: visible !important; }
  html.aiq-phone.aiq-phone[data-theme] .mkx-chips > .mkx-chip, html.aiq-phone.aiq-phone[data-theme] .mkx-chips > .mkx-more { min-width: 0 !important; width: auto !important; margin: 0 !important; }
  html.aiq-phone.aiq-phone[data-theme] .mkx-chips .mkx-chip { border-radius: var(--ph-r-sm) !important; }
  html.aiq-phone.aiq-phone[data-theme] .mkx-chips .mkx-more-b { width: 100% !important; height: 100% !important; justify-content: center; }
  html.aiq-phone.aiq-phone[data-theme] .mkx-chip .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Chart: the chart-type picker matches the round tracks beside it */
  html.aiq-phone.aiq-phone[data-theme] #type-btn { border: 0 !important; border-radius: 999px !important; background: rgba(118,118,128,.12) !important; }
}

@media (max-width: 767px) {
  /* World: the country row is a tab row → chips; its ‹ › buttons go (the row swipes) */
  html.aiq-phone.aiq-phone[data-theme] .cty-bar .cty-arrow { display: none !important; }
  html.aiq-phone.aiq-phone[data-theme] .cty-pills { gap: 8px !important; padding: 2px 0 !important; }
  html.aiq-phone.aiq-phone[data-theme] .cty-pills > button { flex: none; height: 38px; padding: 0 14px !important; border: 0 !important; border-radius: var(--ph-r-sm) !important;
    background: rgba(118,118,128,.12) !important; color: var(--ph-ink) !important; font: 500 15px Inter, sans-serif !important; box-shadow: none !important; }
  html.aiq-phone.aiq-phone[data-theme] .cty-pills > button.on { background: #0F1115 !important; color: #fff !important; font-weight: 600 !important; }
  html.aiq-phone.aiq-phone[data-theme="dark"] .cty-pills > button.on { background: #F1F2F4 !important; color: #0F1115 !important; }
  /* Week ahead carousels: softer inner cards, no ‹ › overlay buttons (the track swipes) */
  html.aiq-phone.aiq-phone[data-theme] .mkx-cc { border-radius: var(--ph-r-sm) !important; }
  html.aiq-phone.aiq-phone[data-theme] .mkx-car > .mkx-arr { display: none !important; }
}