/* Phone layout, style A — Loading placeholders (skeleton / ghost shells) shaped like the phone layout.
   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. */

/* Loading placeholders shaped like the phone layout (user, 2026-10-19: "make sure the loading ghost shell thing is
   updated"). Each block targets one skeleton's own markup (financials/_skeleton_*.html, the deep-dive header's
   #ch-quote-skel, the Screener's #sc-skeleton, the Chart page's #loading), so loaded content is never touched. */
@media (max-width: 767px) {

  /* Stock header: the price block is the size of the real 17px price + 11.5px change, and a round slot holds the place
     of the watchlist star that arrives with the data (the name no longer slides left when it lands). */
  html.aiq-phone.aiq-phone[data-theme] #ch-quote-skel { align-items: flex-end !important; gap: 5px !important; }
  html.aiq-phone.aiq-phone[data-theme] #ch-quote-skel .skel:first-child { width: 74px !important; height: 17px !important; }
  html.aiq-phone.aiq-phone[data-theme] #ch-quote-skel .skel:last-child { width: 88px !important; height: 11px !important; }
  html.aiq-phone.aiq-phone[data-theme] #ch-inner:has(#ch-quote-skel)::after { content: ""; order: 9; flex: none; width: 38px; height: 38px;
    border-radius: 999px; background: rgba(118,118,128,.12); }

  /* Overview: the Price performance card has no big price on phones and a round range track */
  html.aiq-phone.aiq-phone[data-theme] .ovs-skel > div:first-of-type > .card:first-child > div:nth-child(2) > .skel:first-child { display: none !important; }
  html.aiq-phone.aiq-phone[data-theme] .ovs-skel > div:first-of-type > .card:first-child > div:nth-child(2) > .skel:last-child {
    width: 100% !important; height: 34px !important; border-radius: 999px !important; }
  html.aiq-phone.aiq-phone[data-theme] .ovs-skel > div:first-of-type > .card:first-child > .skel:last-child { height: 300px !important; }
  html.aiq-phone.aiq-phone[data-theme] .ovs-skel { padding: 0 0 32px !important; }

  /* Statements: no title or Options menu (the chip names the page); unit left, Annual | Quarterly track right; the table
     edge to edge with no card, no row rules and 36px rows, as the real TradingView-style table */
  html.aiq-phone.aiq-phone[data-theme] .sk-stmt { padding: 4px 0 8px !important; }
  html.aiq-phone.aiq-phone[data-theme] .sk-stmt > div:last-child > div:first-child { flex-wrap: nowrap !important; }
  html.aiq-phone.aiq-phone[data-theme] .sk-stmt > div:last-child > div:first-child > div:first-child > .skel:first-child,
  html.aiq-phone.aiq-phone[data-theme] .sk-stmt > div:last-child > div:first-child > div:last-child > .skel:last-child { display: none !important; }
  html.aiq-phone.aiq-phone[data-theme] .sk-stmt > div:last-child > div:first-child > div:last-child > .skel:first-child {
    width: 150px !important; height: 32px !important; border-radius: 999px !important; }
  html.aiq-phone.aiq-phone[data-theme] #tab-financials .sk-stmt .card { margin: 0 -12px !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; background: transparent !important; }
  html.aiq-phone.aiq-phone[data-theme] .sk-stmt :is(.skel-header, .skel-row) { border: 0 !important; box-shadow: none !important; background: transparent !important; }
  html.aiq-phone.aiq-phone[data-theme] .sk-stmt .skel-row { padding: 13px 0 !important; }
  html.aiq-phone.aiq-phone[data-theme] .sk-stmt :is(.skel-header, .skel-row) > div:first-child { width: 46% !important; padding: 0 14px !important; }
  html.aiq-phone.aiq-phone[data-theme] .sk-stmt :is(.skel-header, .skel-row) > div:not(:first-child) { width: 74px !important; }
  html.aiq-phone.aiq-phone[data-theme] .sk-stmt .skel-row .skel { height: 10px !important; }

  /* Charts: no toolbar on phones and one full-width tile per row, as tall as a real grid tile */
  html.aiq-phone.aiq-phone[data-theme] #tab-charts > div[style^="padding:12px 0 8px"] > div:first-child { display: none !important; }
  html.aiq-phone.aiq-phone[data-theme] #tab-charts > div[style^="padding:12px 0 8px"] > div:last-child { grid-template-columns: minmax(0, 1fr) !important; }
  html.aiq-phone.aiq-phone[data-theme] #tab-charts > div[style^="padding:12px 0 8px"] > div:last-child > .card > div:nth-child(2) { height: 190px !important; }

  /* Statistics: the grade card and the one-line category picker (no category list), then a single-column chart card */
  html.aiq-phone.aiq-phone[data-theme] .stx-skel > .card:first-child > div:nth-child(n+3) { display: none !important; }
  html.aiq-phone.aiq-phone[data-theme] .stx-skel > .card:first-child > div:nth-child(2) { padding: 6px 8px !important; }
  html.aiq-phone.aiq-phone[data-theme] .stx-skel > .card:first-child > div:nth-child(2) > .skel:last-child { width: 60% !important; }
  html.aiq-phone.aiq-phone[data-theme] .stx-skel > div:last-child > .card { grid-template-columns: minmax(0, 1fr) !important; height: 340px !important; }
  html.aiq-phone.aiq-phone[data-theme] .stx-skel > div:last-child > .card > div:first-child { display: none !important; }

  /* Modeling: Simple | Advanced and DCF · Reverse DCF · IRR are round tracks on phones */
  html.aiq-phone.aiq-phone[data-theme] .mds-bar > .skel { border-radius: 999px !important; }

  /* Screener: the reload overlay's rows are as tall as real phone rows (logo + ticker over name, 44px) on the page colour */
  html.aiq-phone.aiq-phone[data-theme] #sc-skeleton, html.aiq-phone.aiq-phone[data-theme] #sc-skeleton .hd { background: var(--ph-card) !important; }
  html.aiq-phone.aiq-phone[data-theme] #sc-skeleton .row { height: 44px !important; gap: 14px !important; }
  html.aiq-phone.aiq-phone[data-theme] #sc-skeleton .row i:nth-child(1) { width: 22px !important; height: 22px !important; border-radius: 999px !important; flex: none; }
  html.aiq-phone.aiq-phone[data-theme] #sc-skeleton .row i:nth-child(2) { width: 92px !important; height: 10px !important; }

  /* Home's S&P hero: the line's area shimmers until it's drawn (a canvas has no width attribute before its first draw) */
  html.aiq-phone.aiq-phone[data-theme] #hx-a-chart:not([width]) {
    background: linear-gradient(90deg, rgba(118,118,128,.06) 0%, rgba(118,118,128,.06) 30%, rgba(118,118,128,.14) 50%, rgba(118,118,128,.06) 70%, rgba(118,118,128,.06) 100%);
    background-size: 600px 100%; animation: skel-shimmer 1.6s linear infinite; }

  /* Chart page: a shimmer instead of a spinner with "Loading chart…" (house rule: skeletons, never plain Loading…) */
  html.aiq-phone.aiq-phone[data-theme] #loading.aqp-loading > div { display: none !important; }
  html.aiq-phone.aiq-phone[data-theme] #loading.aqp-loading { inset: 12px !important; border-radius: var(--ph-r-sm) !important;
    background: linear-gradient(90deg, rgba(118,118,128,.08) 0%, rgba(118,118,128,.08) 30%, rgba(118,118,128,.18) 50%, rgba(118,118,128,.08) 70%, rgba(118,118,128,.08) 100%) !important;
    background-size: 600px 100% !important; animation: skel-shimmer 1.6s linear infinite !important; }
}