/*
 * Briefing — shared style overrides for ALL /briefing/<slug> pages
 * (daily, weekly, quarterly, and IPO News research).
 *
 * Auto-injected by api/briefing/view.js into every briefing's <head>
 * AFTER each post's inline <style> block, so these rules win by
 * cascade order. Single source of truth for two cross-cutting
 * concerns the per-post inline blocks shouldn't have to re-litigate:
 *
 *   1. Charts + tables are sized at HALF the article column on desktop
 *      so the visual rhythm reads like a research note (text-dominant,
 *      figures as supporting evidence) instead of a slide deck (figures
 *      dominate, text orbits). Selectors only apply to posts that
 *      actually have .chart-card / .table-wrap — text-only daily briefs
 *      are unaffected.
 *   2. Smartphone responsiveness is more aggressive than the inline
 *      blocks' 768px breakpoint — adds a 600px and a 420px tier so the
 *      page reads cleanly on iPhone SE / mini class hardware.
 *
 * Renamed from /ipo-brief.css → /briefing.css (2026-05-20) when the
 * styling was generalized from IPO-only to every briefing cadence.
 */

/* ─── Desktop sizing (≥769px) ────────────────────────────────────────
 * Halve the visual footprint of chart cards + table wraps. Caps the
 * width at 50% of the article column, centers, and keeps a small
 * gutter so they breathe inside the article flow.
 *
 * Floating them inline left/right looked busy in QA; centering is the
 * cleanest read. The SVG itself keeps width:100% (set inline) so it
 * scales to the new container width.
 *
 * NOT scoped to a `.ipo-brief` class on <body> because every IPO brief
 * is a standalone page rendered through /briefing/<slug>; the wrap
 * handler doesn't wrap the body in our own class, and adding one
 * would require touching every brief plus Cowork's writer. Scoping by
 * class buys nothing here — these selectors are intentionally
 * page-scoped to the briefing format.
 */
@media (min-width: 769px) {
  .chart-card,
  .table-wrap {
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
    display: block;          /* override .table-wrap's inline-block so centering works */
  }

  /* SVG min-height keeps the chart legible after halving — without it,
     the SVG's intrinsic ratio scales the height down too far for
     readability on certain viewBox aspect ratios. */
  .chart-card svg {
    min-height: 180px;
  }

  /* Tighter inner padding on the smaller card so the chrome doesn't
     dominate the figure now that the figure itself is half-size. */
  .chart-card {
    padding: 18px;
  }
}

/* ─── Tablet + small desktop (601–768px) ─────────────────────────────
 * The inline blocks already drop to single-column at 768px. Add an
 * extra notch: stretch chart/table to full width (they're tiny at this
 * viewport otherwise) and trim KPI grid to 2 cols if it's still 4.
 */
@media (max-width: 768px) {
  .chart-card,
  .table-wrap {
    max-width: 100%;
    display: block;
    margin-left: 0;
    margin-right: 0;
  }
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Container side padding — the inline rules use 20px on the article
     wrap which feels tight at this viewport with a card inside. */
  body {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ─── Smartphone (≤600px) ────────────────────────────────────────────
 * Aggressive typography compression. The inline @media (max-width:768px)
 * blocks size things for tablets; below 600px we need to claw back
 * more vertical real estate, otherwise the hero takes a full viewport
 * and the user scrolls past 3 screens of header before reading anything.
 */
@media (max-width: 600px) {
  /* Hero compression */
  .header h1 {
    font-size: 30px !important;
    line-height: 1.05 !important;
  }
  .header h2 {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }
  .header .dek,
  .header .tagline {
    font-size: 12.5px !important;
  }

  /* Section heading compression */
  .section h4 {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  /* Body / table — looser line-height for thumb-scrolling, smaller font
     so a 5-column table doesn't horizontal-scroll on every row. */
  body, p, .section p, .bottom-line p, .thesis p {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
  }
  table { font-size: 11.5px !important; }
  table thead th { padding: 8px 10px !important; font-size: 9px !important; }
  table tbody td { padding: 8px 10px !important; }

  /* Chart subtitle dim text gets cramped — bump line-height. */
  .chart-card .chart-subtitle { line-height: 1.4; }

  /* Pullquote / blockquote — keep the left rule but tighten padding. */
  .pullquote,
  blockquote {
    font-size: 16px !important;
    padding-left: 12px !important;
    margin: 16px 0 !important;
  }

  /* KPI tiles: 2-up at 600px isn't quite right — drop to 1-up so each
     tile gets enough horizontal space for its 22-28px value. */
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }
  .kpi-tile .kpi-value {
    font-size: 19px !important;
  }
}

/* ─── iPhone SE / mini class (≤420px) ────────────────────────────────
 * Final breakpoint — pure font-size + chart-padding compression so the
 * page is fully usable at 375px-wide viewports without horizontal scroll.
 */
@media (max-width: 420px) {
  body {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .header h1 { font-size: 26px !important; }
  .header h2 { font-size: 14px !important; }
  .section h4 { font-size: 16.5px !important; }
  .chart-card { padding: 12px !important; }
  .chart-card .chart-title { font-size: 11.5px !important; }
  .chart-card .chart-subtitle { font-size: 10px !important; }
  table { font-size: 10.5px !important; }
  table thead th { padding: 7px 8px !important; font-size: 8.5px !important; letter-spacing: 0.06em !important; }
  table tbody td { padding: 7px 8px !important; }
  /* First/last cell padding override — inline rules add 20px on these */
  table tbody td:first-child,
  table thead th:first-child { padding-left: 10px !important; }
  table tbody td:last-child,
  table thead th:last-child  { padding-right: 10px !important; }
}

/* ─── Print / hi-DPI gracefully fall through to inline rules ───────── */
