/* WhiteOak.IO — iOS responsive fix for /whiteoakio_board_packet_full
   Only applies when viewport ≤ 480px. Desktop unaffected.
   Targets BOTH inline-style grids AND class-based grids (.cv-kpis etc). */
@media (max-width: 480px) {
  html, body { overflow-x: hidden !important; max-width: 100% !important; }
  body { padding: 0 !important; }
  .doc, .section-page, .pdf-page {
    max-width: 100% !important; width: 100% !important;
    margin: 0 0 12px !important; padding: 0 !important;
    border-radius: 0 !important; box-shadow: none !important;
  }

  /* ─── COVER HERO ─── */
  .cv-hero { padding: 28px 16px 0 !important; min-height: auto !important; }
  .cv-hero::before, .cv-hero::after { display: none !important; }
  .cv-top {
    flex-direction: column !important; align-items: flex-start !important;
    gap: 14px !important; margin-bottom: 28px !important;
  }
  .cv-badges { flex-wrap: wrap !important; gap: 5px !important; }
  .cv-badge {
    font-size: 7px !important; padding: 3px 6px !important;
    letter-spacing: 0.08em !important; white-space: nowrap !important;
  }
  .cv-wordmark { font-size: 16px !important; }
  .cv-tagline { font-size: 7px !important; }
  .cv-h1 {
    font-size: 32px !important; line-height: 1.02 !important;
    letter-spacing: -1.1px !important; margin-bottom: 16px !important;
  }
  .cv-h1 span { display: block !important; }
  .cv-eyebrow { margin-bottom: 12px !important; flex-wrap: wrap !important; }
  .cv-eyebrow-text { font-size: 9px !important; letter-spacing: 0.14em !important; }
  .cv-desc, .cv-description {
    font-size: 12.5px !important; line-height: 1.6 !important;
    max-width: 100% !important; margin-bottom: 16px !important;
  }
  .cv-feats { grid-template-columns: 1fr !important; gap: 8px !important; margin-bottom: 22px !important; }
  .cv-feat { font-size: 11.5px !important; line-height: 1.45 !important; }
  .cv-meta {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 16px !important; padding-top: 20px !important; margin-top: 22px !important;
  }
  .cv-meta-lbl { font-size: 7px !important; }
  .cv-meta-val { font-size: 11.5px !important; line-height: 1.3 !important; }

  /* ────────────────────────────────────────────────────────
     KPI STRIP — THE CRITICAL FIX
     .cv-kpis is a class-based grid (5 columns on desktop).
     Force it to single column on phone so each cell gets full width,
     dollar amounts and labels never wrap one-character-per-line.
     ──────────────────────────────────────────────────────── */
  .cv-kpis,
  .cv-kpi-strip,
  [class*="cv-kpi-strip"],
  [class*="cv-kpis"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    margin: 24px -16px -28px !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .cv-kpi,
  .cv-kpis > div,
  .cv-kpi-strip > div,
  [class*="cv-kpis"] > div {
    padding: 14px 20px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    overflow: hidden !important;
    display: block !important;
  }
  .cv-kpi:last-child,
  .cv-kpis > div:last-child { border-bottom: 0 !important; }

  /* KPI value (the dollar amount) */
  .cv-kpi-val,
  .cv-kpi > div:first-child,
  .cv-kpis > div > div:first-child,
  .cv-kpi-strip > div > div:first-child {
    font-size: 22px !important;
    line-height: 1.1 !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.02em !important;
    word-break: keep-all !important;
  }

  /* KPI label (e.g. "Adopted Budget", "High-Priority Findings") */
  .cv-kpi-lbl,
  .cv-kpi > div:nth-child(2),
  .cv-kpis > div > div:nth-child(2) {
    font-size: 11px !important;
    line-height: 1.25 !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  /* KPI subtitle */
  .cv-kpi-sub,
  .cv-kpi > div:nth-child(3),
  .cv-kpis > div > div:nth-child(3) {
    font-size: 9px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  /* ────────────────────────────────────────────────────────
     INNER-SECTION KPI STRIPS — .kpi4 class used across many sections
     (Executive Summary, Revenue, Fund Performance, Per-Pupil, Grants, etc).
     Desktop renders as 4-column grid; on phone every cell crashes to ~89px
     and dollar amounts/labels get cut off mid-string.
     Force 2-column grid so each card has ~175px of usable width.
     ──────────────────────────────────────────────────────── */
  .kpi4,
  [class*="kpi4"],
  .kpi-row,
  [class*="kpi-row"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .kpi4 > div,
  [class*="kpi4"] > div,
  .kpi-row > div {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 12px 14px !important;
  }
  /* The dollar amount (typically the first child div) */
  .kpi4 > div > div:first-child,
  [class*="kpi4"] > div > div:first-child,
  .kpi-row > div > div:first-child {
    font-size: 16px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.02em !important;
  }
  /* The label (typically the second child div) */
  .kpi4 > div > div:nth-child(2),
  [class*="kpi4"] > div > div:nth-child(2),
  .kpi-row > div > div:nth-child(2) {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
  /* The subtitle (typically the third child div) */
  .kpi4 > div > div:nth-child(3),
  [class*="kpi4"] > div > div:nth-child(3),
  .kpi-row > div > div:nth-child(3) {
    font-size: 9.5px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  /* ────────────────────────────────────────────────────────
     BUDGET PACE STRIP — .status-stats (4 cards: Expected Pace,
     Actual Pace, Projected Year-End, Available Balance).
     Same structural shape as .kpi4 (4 children, each with 3 nested
     divs: value/label/subtitle). Desktop renders as 4-column grid;
     on phone the auto-sizing crushes column widths unevenly and
     the last dollar amount ("Available Balance") gets cut off.
     Mirror the .kpi4 pattern exactly: force 2x2 grid with consistent
     cell padding and explicit font sizes on each child level.
     ──────────────────────────────────────────────────────── */
  .status-stats,
  [class*="status-stats"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .status-stats > div,
  [class*="status-stats"] > div {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 12px 14px !important;
  }
  /* The big value (e.g. "83%", "$60,947,359") */
  .status-stats > div > div:first-child,
  [class*="status-stats"] > div > div:first-child {
    font-size: 16px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.02em !important;
  }
  /* The label (e.g. "EXPECTED PACE", "AVAILABLE BALANCE") */
  .status-stats > div > div:nth-child(2),
  [class*="status-stats"] > div > div:nth-child(2) {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
  /* The subtitle (e.g. "Month 10 of 12", "Surplus: $3,411,668") */
  .status-stats > div > div:nth-child(3),
  [class*="status-stats"] > div > div:nth-child(3) {
    font-size: 9.5px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  /* ─── ALSO catch any inline-style grids ─── */
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns: repeat(5"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* ─── SECTION PAGES ─── */
  .run-section, .section, [class*="section-page"] {
    padding: 18px 16px !important;
  }
  .section-title, [class*="section-title"], h1, h2 {
    font-size: 18px !important; line-height: 1.25 !important;
    letter-spacing: -0.4px !important;
    word-wrap: break-word !important; overflow-wrap: break-word !important;
  }
  [class*="section-title"] { flex-wrap: wrap !important; }
  [class*="page-header"], [class*="page-hdr"], [class*="run-header"] {
    flex-direction: column !important; align-items: flex-start !important;
    gap: 6px !important; padding: 12px 16px !important;
  }

  /* ─── TABLES ───
     CRITICAL FIX: Keep <table> as display:table so all rows share column
     widths (thead column 1 aligns with tbody column 1, etc).
     The earlier `display:block` on <table> made each <tr> size columns
     independently — dollar amounts didn't line up under their headers.
     Now: table stays display:table; parent .section-page gets horizontal
     scroll so the wide table can be swiped without breaking alignment. */
  table {
    display: table !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    width: max-content !important;
    min-width: 100% !important;
    font-size: 10.5px !important;
  }
  table thead, table tbody, table tfoot {
    display: table-row-group !important;
  }
  table tr {
    display: table-row !important;
  }
  table th, table td {
    display: table-cell !important;
    padding: 7px 9px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
    /* Inherit original text-align so right-aligned $ columns stay right-aligned */
    vertical-align: top !important;
  }
  /* Numeric column heuristic: any th/td whose content starts with $, %, or a digit,
     OR cells that have an inline text-align:right, get right-aligned + monospace.
     This keeps dollar amounts visually stacked under their column headers. */
  table th[align="right"],
  table td[align="right"],
  table th[style*="text-align:right"],
  table td[style*="text-align:right"],
  table th[style*="text-align: right"],
  table td[style*="text-align: right"],
  table .num, table .r, table .right,
  table th.num, table td.num,
  table th.r, table td.r {
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1 !important;
  }
  /* All number-like td cells (starts with $ or digit) — fallback for tables
     without explicit class/inline alignment hints */
  table td:not(:first-child) {
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1 !important;
  }
  /* But the FIRST column (row labels like "Administrative Fund", "State Aid – Foundation")
     stays left-aligned */
  table td:first-child,
  table th:first-child {
    text-align: left !important;
  }
  /* Headers right-aligned for non-first columns to match the data */
  table th:not(:first-child) {
    text-align: right !important;
  }
  /* The table's parent needs to scroll horizontally so wide tables don't
     overflow off the page. Wrap tables in a scrollable parent via :has()
     where supported, falling back to forcing all section-page descendants
     to allow horizontal scroll. */
  .section-page:has(table),
  [class*="section-page"]:has(table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Fallback for browsers without :has() — give every section-page child
     div that contains a table the scroll behavior */
  .section-page > div,
  [class*="section-page"] > div {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  [class*="page-footer"], [class*="page-foot"], [class*="run-footer"] {
    flex-direction: column !important; align-items: center !important;
    gap: 8px !important; text-align: center !important;
    padding: 14px 16px !important; font-size: 9.5px !important;
  }

  div[style*="max-width:816px"], div[style*="max-width:1100px"],
  div[style*="width:816px"] {
    max-width: 100% !important; width: 100% !important;
  }
  [style*="min-width:480px"], [style*="min-width:600px"] { min-width: 0 !important; }

  /* Allow breaks but NOT inside the KPI numbers (those stay nowrap above) */
  p, div:not(.cv-kpi-val), span:not(.cv-kpi-val), li {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }
}

@media (max-width: 380px) {
  .cv-h1 { font-size: 28px !important; letter-spacing: -0.9px !important; }
  .cv-hero { padding: 24px 14px 0 !important; }
  .cv-kpi-val,
  .cv-kpi > div:first-child,
  .cv-kpis > div > div:first-child { font-size: 20px !important; }
  .cv-meta { grid-template-columns: 1fr !important; }
}