/* =============================================================
   TONE v92.32 — Editorial mobile fix
   -------------------------------------------------------------
   The v92.27 → v92.31 editorial layouts use inline styles for
   cache-proof rendering. On phones (375–760 px), those grids
   squeeze child columns to 30–80 px wide and the text inside
   has nowhere to go — so it wraps one character per line.
   This stylesheet overrides those inline rules at mobile widths
   using attribute substring selectors + !important. Brand
   tokens stay intact; only sizing + flow are corrected.
   ============================================================= */

/* ---- 1. Universal: never break inside a word -------------- */
html, body, #app, #app * {
  word-break: normal !important;
  overflow-wrap: break-word;
}
/* Specific kill: anywhere CSS or third-party JS set break-all */
*, *::before, *::after {
  word-break: normal;
}

/* ---- 2. Prevent horizontal overflow on the root ----------- */
html, body { overflow-x: hidden; }

/* =============================================================
   MOBILE BREAKPOINT — collapse every inline grid to single col
   ============================================================= */
@media (max-width: 760px) {

  /* 2a. Force any inline 2-/3-/multi-column grid to a single col.
     "grid-template-columns" appears in the DOM style attribute
     when JS sets style.gridTemplateColumns. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 13px !important;
  }

  /* 2b. Special case: 2-column stat strips inside dark hero
     (4 stats in a 2×2 grid). Keep these 2-up so they stay tight. */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* 2c. Lesson rows (galley): collapse the 5-column "checkbox /
     thumb / title / tag / meta" grid into a 2-row stack so the
     title gets a whole line to itself. */
  [style*="grid-template-columns: auto 56px 1fr auto auto"],
  [style*="grid-template-columns:auto 56px 1fr auto auto"] {
    grid-template-columns: auto 56px 1fr !important;
    row-gap: 4px !important;
  }
  /* Educator lesson rows (no checkbox, 4 columns): */
  [style*="grid-template-columns: 56px 1fr auto auto"],
  [style*="grid-template-columns:56px 1fr auto auto"] {
    grid-template-columns: 56px 1fr !important;
    row-gap: 4px !important;
  }
  /* Editorial Studio stack rows (64px thumb + body + tag + arrow): */
  [style*="grid-template-columns: 64px 1fr auto auto"] {
    grid-template-columns: 64px 1fr !important;
    row-gap: 4px !important;
  }

  /* 2d. Editor's Galley two-pane → stack: lessons on top, panels below */
  [style*="grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr)"],
  [style*="grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr)"],
  [style*="grid-template-columns: minmax(0,1.6fr) minmax(0,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* 2e. Hero 2-col grid (title + stats) → stack title above stats */
  [style*="grid-template-columns: 1.5fr 1fr"],
  [style*="grid-template-columns:1.5fr 1fr"],
  [style*="grid-template-columns: minmax(0,1.5fr) minmax(0,1fr)"],
  [style*="grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* ---- 3. Cap display headings ---------------------------- */
  /* Inline display: clamp(48px, 7vw, 88px) — too big on phone */
  [style*="font-size: clamp(48px"],
  [style*="font-size:clamp(48px"] {
    font-size: clamp(32px, 9vw, 48px) !important;
    line-height: 1.05 !important;
  }
  [style*="font-size: clamp(28px"],
  [style*="font-size:clamp(28px"] {
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.1 !important;
  }

  /* ---- 4. Reduce hero + section padding ------------------- */
  [style*="padding: 55px 44px"],
  [style*="padding:55px 44px"],
  [style*="padding: 55px 34px"],
  [style*="padding:55px 34px"] {
    padding: 28px 21px !important;
  }
  [style*="padding: 28px"] { /* card padding */
    padding: 21px !important;
  }
  [style*="padding: 17px 28px"] { /* stack rows */
    padding: 13px 17px !important;
  }
  [style*="padding: 13px 28px"] { /* lesson rows */
    padding: 11px 13px !important;
  }
  [style*="padding: 21px 28px"] { /* chapter heads */
    padding: 17px 17px !important;
  }

  /* ---- 5. Studio shell padding ---------------------------- */
  .studio-shell { padding: 0 13px !important; }
  .shell, [class*="shell"] { padding-left: 13px; padding-right: 13px; }

  /* ---- 6. Hide ⋮⋮ grip handles on mobile (they're noise) -- */
  [style*="font-family: JetBrains Mono"][style*="color: rgba(20,17,16,0.42)"]:not(h1):not(h2):not(h3):not(h4) {
    /* keep */
  }

  /* ---- 7. Fluid heading floor on existing class-based headings */
  .display, .display-l, .display-m,
  .hero-display, h1.display {
    font-size: clamp(28px, 7vw, 44px) !important;
    line-height: 1.05 !important;
  }

  /* ---- 8. Studio folder grid (legacy) --------------------- */
  .studio-folder-grid {
    grid-template-columns: 1fr !important;
  }

  /* ---- 9. Catalogue nav scroll horizontally --------------- */
  nav[style*="overflow-x: auto"] {
    -webkit-overflow-scrolling: touch;
  }

  /* ---- 10. Topnav: stack on mobile ------------------------ */
  .topnav { flex-wrap: wrap; gap: 8px; }
  .topnav .pillnav { overflow-x: auto; max-width: 100%; }

  /* ---- 11. Roster sidebar -> full width ------------------- */
  /* The roster column inside Editor's Galley becomes the
     second row when its parent grid collapses (rule 2d above).
     This re-asserts roster cards span the full width and don't
     inherit any leftover max-width from desktop rules. */
  aside[style*="background"][style*="border"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ---- 12. Generic card / panel padding ------------------- */
  .card { padding: 21px !important; }

  /* ---- 13. Apprentice file three-column metric grid ------ */
  /* studentDetail.js renders three stat columns; on phone they
     squeeze and labels stack per-character. Force single col. */
  .student-stats, .stat-columns, .three-col {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }

  /* ---- 14. Calendar tiles (Groups page) ------------------- */
  /* Session strip text was reading vertically inside narrow
     7-day columns. Loosen the writing-mode and let it wrap. */
  .calendar-strip, .session-strip,
  [class*="session"][style*="writing-mode"] {
    writing-mode: horizontal-tb !important;
  }

  /* ---- 15. Buttons: stop them shrinking mid-word ---------- */
  button, .btn { white-space: nowrap; }
  /* …unless they're the wide section buttons */
  button[style*="display: flex"][style*="flex-direction: column"] {
    white-space: normal;
  }
}

/* =============================================================
   VERY NARROW PHONES (< 380 px) — extra tightening
   ============================================================= */
@media (max-width: 380px) {
  [style*="padding: 28px 21px"] { padding: 21px 13px !important; }
  [style*="font-size: clamp(32px"] {
    font-size: clamp(26px, 8vw, 34px) !important;
  }
  .shell, [class*="shell"] { padding-left: 8px; padding-right: 8px; }
}

/* =============================================================
   TABLET — 760–1100 px: keep 2-col where it fits, single col
   for the galley two-pane otherwise
   ============================================================= */
@media (min-width: 761px) and (max-width: 1024px) {
  [style*="grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}