/* Pitot Index — phone layout (28 Sep 2026).
   Loaded last on every page by build.sh. Everything here is scoped to
   narrow screens; desktop is untouched. */

/* 1. Nothing may widen the page. A wider element made phones zoom the whole
      page out, which is what threw every alignment off. */
html, body { overflow-x: hidden; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }

@media (max-width: 520px) {
  /* 2. Header: logo, theme, Pulse, menu — all visible, evenly spaced. */
  header { gap: 10px !important; }
  header .nav-home { display: none !important; }
  header .wordmark img { height: 20px !important; }
  header .pg-theme-toggle { margin-left: auto !important; flex-shrink: 0; }
  header .nav-burger { display: flex !important; flex-shrink: 0; }

  /* Pulse button: the label is always readable (the heartbeat animation
     left it blank for part of every cycle). */
  .nav-pulse { flex-shrink: 0; }
  .nav-pulse .np-ecg { display: none !important; }
  .nav-pulse .np-label { animation: none !important; opacity: 1 !important; transform: none !important; }
  .nav-pulse::before, .nav-pulse::after { display: none !important; }

  /* 3. Footer: one tidy column. */
  footer.glass { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; text-align: left !important; }
  footer.glass > * { margin: 0 !important; }
}

/* Menu button over the dark home-page hero: light lines, like the other controls. */
header.over-hero .nav-burger span { background: #F2F4F8 !important; }
header.over-hero .nav-burger { border-color: rgba(255,255,255,0.28) !important; }

/* Industry and report pages: the single column may shrink to the screen
   (it was growing to its widest child and running off the right edge). */
@media (max-width: 1000px) {
  .industry-row { grid-template-columns: minmax(0, 1fr) !important; }
  .industry-layer { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 520px) {
  /* Industry chart: title above the region name; controls on two tidy rows
     (they were stacked on top of one another). */
  .cmp-title { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
  .cmp-area-odo { margin-bottom: -12px !important; }
  .cmp-alltime { flex-wrap: wrap !important; row-gap: 12px !important; }
  .cmp-alltime .find-brand { white-space: nowrap; }
  .cmp-alltime .cmp-time-drum { position: static !important; transform: none !important; order: 3; flex: 1 0 100%; justify-content: center; }
}
@media (max-width: 520px) {
  .cmp-alltime { justify-content: space-between !important; }
  .cmp-alltime .sd-toggle { order: 1; margin-left: 0 !important; }
  .cmp-alltime .find-brand { order: 2; flex: 1 0 100%; justify-content: center; }
  .cmp-alltime .cmp-at-panel { order: 2; }
}

@media (max-width: 560px) {
  /* Category pages: industry rows keep the page's side margin. */
  .list-menu { padding: 0 var(--pad, 24px) !important; }
  .list-menu .lm-row { padding: 18px 22px !important; }

  /* Home, industry carousel: the gauge label fits inside the ring, and the
     leader box uses the full card width. */
  .slide .ring .val span { font-size: 8.5px !important; letter-spacing: 0.14em !important; }
  .slide.active .live-box { justify-self: stretch !important; width: 100% !important; box-sizing: border-box; }
}

@media (max-width: 560px) {
  /* Report category rows: the "Access intelligence" line goes under the
     industry name instead of over it. */
  .lm-row:has(.lm-ai) { grid-template-columns: 1fr !important; gap: 10px !important; }
  .lm-row .lm-ai { justify-self: start !important; height: 8px !important; max-width: 100%; }
}

@media (max-width: 560px) {
  /* Pulse hero: the heartbeat trace stays behind the text, faintly. */
  .p-ecg-bg { opacity: 0.3 !important; }
}

@media (max-width: 700px) {
  /* Industry detail: panels shrink to the screen (small phones cut the right edge). */
  .wrap:has(> .panel) { grid-template-columns: minmax(0, 1fr) !important; }
  .wrap > .panel { min-width: 0; }
  .sec-head { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 640px) {
  /* Tables (Terms, Privacy): each row becomes a small labelled block
     instead of four squeezed columns running off the screen. */
  .tbl { overflow: visible !important; }
  .tbl table, .tbl tbody, .tbl tr, .tbl td { display: block !important; width: 100% !important; box-sizing: border-box; }
  .tbl thead { display: none !important; }
  .tbl tr { padding: 14px 0 !important; border-bottom: 1px solid var(--glass-border, rgba(127,134,150,0.2)); }
  .tbl td { padding: 4px 0 !important; border: 0 !important; }
  .tbl td[data-label]::before { content: attr(data-label); display: block; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; margin-bottom: 2px; }
  .tbl td[data-label=""]::before { display: none; }
}
@media (max-width: 640px) {
  .tbl table { min-width: 0 !important; max-width: 100% !important; table-layout: auto !important; }
  .tbl th, .tbl tr:has(> th) { display: none !important; }
  .tbl td { white-space: normal !important; overflow-wrap: anywhere; }
}

@media (max-width: 920px) {
  /* Menu: starts below the header, scrolls if needed, items line up. */
  .flag-menu { justify-content: flex-start !important; overflow-y: auto !important; padding: 104px 32px 40px !important; -webkit-overflow-scrolling: touch; }
  .flag-menu a { font-size: 21px !important; padding: 11px 0 !important; align-items: baseline !important; }
  .flag-menu a .idx { min-width: 22px; flex-shrink: 0; }
}

@media (max-width: 1220px) {
  /* Cards that ran edge to edge on phones get the page's side margin. */
  .sec-news { margin-left: var(--pad, 24px) !important; margin-right: var(--pad, 24px) !important; }
}
@media (max-width: 560px) {
  footer.site.glass { margin-left: 24px !important; margin-right: 24px !important; }
}

/* ---- Phone review 2 (28 Sep 2026, Andrea's list) ---- */

@media (max-width: 560px) {
  /* Pulse button: the word sits dead centre. The hidden long label
     ("Check the pulse", drawn at size 0) still carried its letter spacing,
     which pushed "PULSE" to the right. */
  .nav-pulse .np-label { letter-spacing: 0 !important; }
  .nav-pulse .np-label::after { letter-spacing: 0.1em; margin-right: -0.1em; }

  /* Menu: plain names, no numbers. */
  .flag-menu a .idx { display: none !important; }
}

/* Menu button: light lines whenever the header floats over the dark home
   hero (day theme), dark again once the menu panel is open behind it. */
header.over-hero .nav-burger span { background: #F2F4F8 !important; }
body.menu-open header.over-hero .nav-burger span { background: var(--text) !important; }
body.menu-open header.over-hero .nav-pulse,
body.menu-open header.over-hero .pg-theme-toggle { color: var(--text) !important; }

/* Tickers: smooth on phones. The strip moves on the graphics card, stops
   re-blurring what is behind it every frame, and a tap no longer freezes it. */
.ticker-track { will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
@media (hover: none) {
  .ticker:hover .ticker-track { animation-play-state: running !important; }
}
@media (max-width: 560px) {
  .ticker.glass { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  [data-theme="day"] .ticker.glass { background: rgba(255,255,255,0.82) !important; }
  [data-theme="night"] .ticker.glass { background: rgba(14,19,30,0.88) !important; }

  /* Index menu carousel: only the card in front and its two neighbours are
     drawn; neighbours are faded and not blurred (the 3D stack of blurred
     glass cards was what made the page stutter). */
  .cluster-flow .card.cf-back-l, .cluster-flow .card.cf-back-r, .cluster-flow .card.cf-back-c { visibility: hidden !important; }
  .cluster-flow .card.cf-left, .cluster-flow .card.cf-right { filter: none !important; opacity: 0.28 !important; }
  .cluster-flow .card:not(.cf-center) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

@media (max-width: 560px) {
  /* Industry report pages: the quarterly cover reflows. The countdown sits
     under the title instead of on top of it, digits fit the box, the header
     and footer lines of the cover stay on one line each. */
  .rep-cover { padding: 16px !important; }
  .cover-card { aspect-ratio: auto !important; padding: 26px 22px 22px !important; gap: 22px; justify-content: flex-start !important; }
  .cc-top { letter-spacing: 0.18em !important; font-size: 9.5px !important; gap: 10px !important; }
  .cc-top span { white-space: nowrap; }
  .cc-title { font-size: 28px !important; }
  .cd-veil { display: none !important; }
  .cd-box { position: relative !important; left: auto !important; bottom: auto !important; transform: none !important;
            width: 100% !important; box-sizing: border-box; padding: 14px 8px 12px !important; order: 4; }
  .cc-bot { order: 5; flex-wrap: wrap; justify-content: flex-start !important; gap: 4px 12px !important; }
  .cd-units { gap: 2px !important; }
  .cd-u { min-width: 0 !important; width: 52px; }
  .cd-u b { font-size: 26px !important; }
  .cd-u i { font-size: 7px !important; letter-spacing: 0.14em !important; }
  .cd-sep { font-size: 18px !important; transform: translateY(-5px) !important; }
}

@media (max-width: 560px) {
  /* Carousel: cards far behind stay fully out of sight (their buttons showed through). */
  .cluster-flow .card.cf-back-l, .cluster-flow .card.cf-back-r, .cluster-flow .card.cf-back-c { opacity: 0 !important; pointer-events: none !important; }
  /* No mirror reflection under the cards on phones (costly to draw, and it showed as a ghost button). */
  html[data-theme] body .cluster-flow .card.card { -webkit-box-reflect: unset; }

  /* Industry pages, Top Ten: rows line up edge to edge with the card, and
     brand names get more room before they are shortened. */
  .t10-row { width: calc(100% + 24px) !important; grid-template-columns: 22px minmax(0, 1fr) 40px 40px !important; gap: 8px !important; }
}
@media (max-width: 380px) {
  /* Small phones: header controls keep clear of the rounded edge. */
  header { padding: 10px 14px !important; gap: 6px !important; }
  .nav-pulse { width: 58px !important; }
}

/* ---- Phone review 3 (28 Sep 2026): pricing, Pulse, account after the afternoon changes ---- */
@media (max-width: 560px) {
  /* Email sign-up box: breathing room above it on every page (it sat
     directly under the last paragraph on FAQ and Pricing). */
  .nl-box { margin-top: 36px !important; }

  /* Pricing: tighter gap between the report prices and the Pulse block. */
  .pr-pulse { margin-top: 40px !important; padding-top: 32px !important; }

  /* Pulse page: sections closer together on a phone. */
  .p-sec { padding-top: 44px !important; }

  /* Your reports (account): buttons full width and one line each. */
  .ac-btn { font-size: 12px !important; }
  .ac-row .ac-btn { flex: 1 1 100%; text-align: center; letter-spacing: 0.04em !important; padding: 12px 10px !important; }
  .ac-rep .ac-btn { white-space: nowrap; padding: 10px 16px !important; }
}