/* =============================================================
   TONE FOUNDATION · v92.36
   -------------------------------------------------------------
   One shared responsive layout system. Everything in this file
   is scoped to load LAST so it always wins.

   Contents:
     1. Character-stacking killer — global word-break reset
     2. Design tokens — spacing scale, type scale, colours
     3. Fluid type scale — h1/h2/h3, display, labels
     4. Layout primitives — .tone-grid, .tone-stats, .tone-hero,
        .tone-card, .tone-section
     5. Safe-area padding for hero cards (iPhone notch)
     6. Portrait overrides — collapse inline-style grids to
        sensible defaults, tighten hero cards, 2-up compose
     7. Apprentice file surgical fixes
   ============================================================= */

/* =============================================================
   1. CHARACTER-STACKING KILLER — root-level reset
   ============================================================= */
/* Nothing in the app tree is allowed to break inside a word.
   This overrides the 17 uses of `overflow-wrap: anywhere` and
   the 2 uses of `word-break: break-all` in styles.css. */
:where(html, body, #app) *,
:where(html, body, #app) *::before,
:where(html, body, #app) *::after {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  writing-mode: horizontal-tb !important;
}

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

/* Uppercase mono labels always stay on one line. These are the
   editorial "QUIZZES", "SESSIONS", "APPRENTICES", "MODULES",
   "ENGAGEMENT" tags that were stacking one letter per line when
   crushed into narrow flex/grid children. */
.eyebrow,
.meta.muted,
.section-code,
.label,
.tone-label,
.stat-label,
.tone-stat__lbl,
[class*="eyebrow"],
[class*="label"] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Any inline element whose style declares uppercase + monospace
   (that's every editorial label I coded via inline styles) also
   locks to one line. */
[style*="text-transform: uppercase"][style*="letter-spacing: 0.14em"],
[style*="text-transform: uppercase"][style*="letter-spacing: 0.16em"],
[style*="text-transform: uppercase"][style*="letter-spacing: 0.1em"] {
  white-space: nowrap;
}

/* =============================================================
   2. DESIGN TOKENS
   ============================================================= */
:root {
  /* Spacing scale — mobile-first, uses clamp() so all values
     scale between phone and desktop with a single variable. */
  --tsp-1: 4px;
  --tsp-2: 8px;
  --tsp-3: 13px;
  --tsp-4: 17px;
  --tsp-5: 21px;
  --tsp-6: 28px;
  --tsp-7: 34px;
  --tsp-8: 55px;

  /* Vertical rhythm — section gaps, card padding, hero padding.
     Portrait uses the low end; desktop uses the high end. */
  --tsp-section: clamp(21px, 4vw, 55px);
  --tsp-card:    clamp(13px, 2.5vw, 28px);
  --tsp-hero-y:  clamp(21px, 4.5vw, 55px);
  --tsp-hero-x:  clamp(17px, 4vw, 44px);
  --tsp-row-y:   clamp(10px, 1.5vw, 17px);
  --tsp-row-x:   clamp(13px, 2vw, 28px);

  /* Type scale */
  --tt-display: clamp(28px, 7.5vw, 76px);
  --tt-hero:    clamp(24px, 6.5vw, 60px);
  --tt-h1:      clamp(22px, 5vw, 42px);
  --tt-h2:      clamp(19px, 4vw, 30px);
  --tt-h3:      clamp(16px, 3vw, 22px);
  --tt-lead:    clamp(15px, 1.7vw, 20px);
  --tt-body:    15px;
  --tt-label:   11px;
  --tt-stat-num: clamp(22px, 4.5vw, 38px);
  --tt-stat-lbl: 10px;

  /* Colours — reasserted so foundation is self-contained. */
  --tc-ink:    #141110;
  --tc-bone:   #fbf8f1;
  --tc-cream:  #efece4;
  --tc-line:   rgba(20,17,16,0.13);
  --tc-ink-2:  rgba(20,17,16,0.65);
  --tc-ink-3:  rgba(20,17,16,0.42);
  --tc-rust:   #D24E1F;
  --tc-sage:   #2e7d50;
  --tc-amber:  #c19f3e;
  --tc-oxblood:#9b2a2a;
}

/* =============================================================
   3. FLUID TYPE — utility classes for headings
   ============================================================= */
.tone-display { font-size: var(--tt-display); line-height: 0.95; letter-spacing: -0.02em; margin: 0; }
.tone-h1      { font-size: var(--tt-h1);      line-height: 1.05; letter-spacing: -0.01em; margin: 0; }
.tone-h2      { font-size: var(--tt-h2);      line-height: 1.1;  letter-spacing: -0.005em; margin: 0; }
.tone-h3      { font-size: var(--tt-h3);      line-height: 1.15; margin: 0; }
.tone-lead    { font-size: var(--tt-lead);    line-height: 1.4;  margin: 0; }
.tone-body    { font-size: var(--tt-body);    line-height: 1.5;  margin: 0; }
.tone-label {
  font-size: var(--tt-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}

/* =============================================================
   4. LAYOUT PRIMITIVES
   ============================================================= */

/* Responsive card grid.
   Default: auto-fit at minmax(min(100%, 240px), 1fr).
   On very narrow phones, min(100%, ...) prevents overflow. */
.tone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--tsp-3);
}
.tone-grid--sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.tone-grid--md { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.tone-grid--lg { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
@media (min-width: 761px) { .tone-grid { gap: var(--tsp-4); } }

/* Compose action tiles — always 2-up on portrait, 3-up on tablet, up to 4 on desktop */
.tone-compose {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tsp-2);
}
@media (min-width: 761px)  { .tone-compose { grid-template-columns: repeat(3, 1fr); gap: var(--tsp-3); } }
@media (min-width: 1024px) { .tone-compose { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .tone-compose { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }

/* Stat block grid — 2×2 on portrait, wider row on desktop */
.tone-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tsp-3);
}
@media (min-width: 761px) {
  .tone-stats {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--tsp-5);
  }
}
.tone-stat {
  min-width: 0;
  padding-top: var(--tsp-2);
  border-top: 1px solid currentColor;
  opacity: 1;
}
.tone-stat__num {
  font-family: 'Instrument Serif', serif;
  font-size: var(--tt-stat-num);
  line-height: 1;
  letter-spacing: -0.01em;
}
.tone-stat__lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--tt-stat-lbl);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hero card — compact header, not a full screen */
.tone-hero {
  padding: var(--tsp-hero-y) var(--tsp-hero-x);
  padding-top: max(var(--tsp-hero-y), env(safe-area-inset-top, 0px));
  border-radius: 4px;
  margin: 0 0 var(--tsp-5);
  color: var(--tc-bone);
  background: var(--tc-ink);
}
.tone-hero--tight { padding: var(--tsp-4) var(--tsp-hero-x); }
.tone-hero__eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--tt-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: var(--tsp-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tone-hero__title {
  font-family: 'Instrument Serif', serif;
  font-size: var(--tt-display);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
}
.tone-hero__blurb {
  font-family: 'Instrument Serif', serif;
  font-size: var(--tt-lead);
  line-height: 1.4;
  opacity: 0.78;
  max-width: 56ch;
  margin: var(--tsp-4) 0 0;
}

/* Section rhythm */
.tone-section { margin-bottom: var(--tsp-section); }
.tone-section__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--tsp-4);
  margin-bottom: var(--tsp-4);
  padding-bottom: var(--tsp-3);
  border-bottom: 1px solid var(--tc-line);
  flex-wrap: wrap;
}

/* Card */
.tone-card {
  background: var(--tc-bone);
  border: 1px solid var(--tc-line);
  border-radius: 4px;
  padding: var(--tsp-card);
  min-width: 0;
}

/* =============================================================
   5. SAFE-AREA — hero cards respect iPhone notch
   ============================================================= */
/* Any hero-shaped element also gets safe-area top padding. */
section[style*="background: #141110"],
section[style*="background:#141110"],
.hero-strip, .hero, .dashboard-hero, .apprentice-hero {
  padding-top: max(var(--tsp-hero-y, 28px), env(safe-area-inset-top, 0px)) !important;
}

/* =============================================================
   6. PORTRAIT OVERRIDES (≤ 760 px)
   -------------------------------------------------------------
   Collapse inline-style grids into sensible defaults. These
   selectors target the exact patterns I emitted in modules.js,
   studio-unified.js and educator.js during v92.27–v92.34.
   ============================================================= */
@media (max-width: 760px) {

  /* ---- Compose tiles: force 2-up ---- */
  [style*="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))"] {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--tsp-2) !important;
  }
  /* And their tile inner: compact */
  [style*="min-height: 170px"],
  [style*="min-height: 200px"] {
    min-height: 120px !important;
    padding: var(--tsp-3) !important;
    gap: 6px !important;
  }
  [style*="width: 36px"][style*="height: 36px"] { width: 26px !important; height: 26px !important; font-size: 14px !important; }
  [style*="font-size: 21px"][style*="letter-spacing: -0.005em"] { font-size: 14px !important; line-height: 1.15 !important; }
  [style*="font-size: 12px"][style*="margin-top: auto"] { font-size: 10px !important; line-height: 1.25 !important; }

  /* ---- Studio module cards: 1-up on phone ---- */
  [style*="grid-template-columns: repeat(auto-fit, minmax(360px, 1fr))"] {
    grid-template-columns: 1fr !important;
    gap: var(--tsp-2) !important;
  }

  /* ---- Apprentice file / roster panel PIE CHIPS ----
     educator.js renders a 3-col grid of 6 pieChips. On phone those
     3 columns squeeze the internal "96px + text" layout so text
     stacks one char per line. Force to 1 col so each pieChip gets
     the full row and its ring + text sit side-by-side properly. */
  [style*="grid-template-columns: repeat(3, minmax(0, 1fr))"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  /* Inner pieChip grid: keep 80px ring + rest, but tighten pad. */
  .roster-pie {
    grid-template-columns: 80px 1fr !important;
    padding: 13px !important;
    gap: 13px !important;
  }
  /* pieChip title label (11px uppercase Inter) — never break */
  .roster-pie [style*="font-size: 11px"][style*="text-transform: uppercase"] {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* pieChip sub line: allow wrap horizontally, cap fontsize */
  .roster-pie [style*="font-size: 16px"] {
    font-size: 14px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  /* ---- Studentdetail "two-col mb-34" progress+quiz cards ---- */
  .two-col { grid-template-columns: 1fr !important; gap: 13px !important; }
  .three-col { grid-template-columns: 1fr !important; gap: 13px !important; }
  .card-paper { padding: 17px !important; }
  [style*="font-size: 28px"][style*="letter-spacing: -0.01em"] { font-size: 19px !important; line-height: 1.1 !important; }

  /* ---- Studio folder / index tiles: 2-up ---- */
  [style*="grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))"]:not([style*="min-height"]) {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--tsp-2) !important;
  }

  /* ---- 2-col hero / galley: stack ---- */
  [style*="grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr)"],
  [style*="grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr)"],
  [style*="grid-template-columns: 1.5fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: var(--tsp-4) !important;
  }

  /* ---- Hero stats (2×2): tighten ---- */
  [style*="grid-template-columns: 1fr 1fr"][style*="gap: 21px"] {
    gap: var(--tsp-3) !important;
  }
  [style*="font-size: 38px"][style*="line-height: 1"] { font-size: 22px !important; }
  [style*="font-size: 30px"][style*="line-height: 1"] { font-size: 20px !important; }
  [style*="font-size: 10px"][style*="margin-top: 6px"] { margin-top: 3px !important; }

  /* ---- Educator hero flex stats ---- */
  [style*="display: flex"][style*="gap: 28px"][style*="flex-wrap: wrap"] {
    gap: var(--tsp-3) !important;
    padding-top: var(--tsp-4) !important;
  }

  /* ---- Hero padding ---- */
  [style*="padding: 55px 44px"],
  [style*="padding: 55px 34px"] {
    padding: max(21px, env(safe-area-inset-top, 21px)) 17px 21px !important;
    margin-bottom: 17px !important;
  }

  /* ---- Display headings ---- */
  [style*="font-size: clamp(48px, 7vw, 88px)"] {
    font-size: clamp(24px, 7.5vw, 40px) !important;
    line-height: 1 !important;
  }
  [style*="font-size: clamp(28px, 4vw, 42px)"] {
    font-size: clamp(18px, 5vw, 26px) !important;
    line-height: 1.05 !important;
  }
  [style*="font-size: 23px"][style*="line-height: 1.5"],
  [style*="font-size: 22px"][style*="line-height: 1.4"] {
    font-size: 15px !important;
    line-height: 1.35 !important;
    margin: 13px 0 0 !important;
  }

  /* ---- Lesson rows: 2-column stack ---- */
  [style*="grid-template-columns: auto 56px 1fr auto auto"] {
    grid-template-columns: auto 56px 1fr !important;
    row-gap: 4px !important;
    padding: 10px 13px !important;
  }
  [style*="grid-template-columns: 56px 1fr auto auto"] {
    grid-template-columns: 56px 1fr !important;
    row-gap: 4px !important;
    padding: 10px 13px !important;
  }
  [style*="grid-template-columns: 64px 1fr auto auto"] {
    grid-template-columns: 64px 1fr !important;
    row-gap: 4px !important;
    padding: 13px 13px !important;
  }

  /* ---- Section rhythm: trim 40% ---- */
  [style*="margin-bottom: 55px"] { margin-bottom: 24px !important; }
  [style*="margin-bottom: 34px"] { margin-bottom: 21px !important; }
  [style*="padding: 21px 28px"] { padding: 13px 17px !important; }
  [style*="padding: 17px 28px"] { padding: 13px 17px !important; }
  [style*="padding: 28px"] { padding: 17px !important; }

  /* ---- Catalogue nav ---- */
  nav[style*="overflow-x: auto"] {
    padding: 8px 0 !important;
    margin-bottom: 17px !important;
    -webkit-overflow-scrolling: touch;
  }
  nav[style*="overflow-x: auto"] button {
    padding: 6px 11px !important;
    font-size: 12px !important;
    flex-shrink: 0;
  }

  /* ---- Roster panel full-width ---- */
  aside[style*="background"][style*="border"] {
    width: 100% !important;
    padding: 17px !important;
  }

  /* ---- Class-based grids ---- */
  .studio-shell { padding: 0 13px !important; }
  .studio-folder-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .studio-workbook-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .card { padding: 17px !important; }
  .display, .display-l { font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.05 !important; }
  .display-m { font-size: clamp(18px, 5vw, 24px) !important; }

  /* ---- Legacy classes: kill anywhere/break-all ---- */
  * { word-break: normal !important; overflow-wrap: break-word !important; }

  /* ---- Topnav ---- */
  .topnav { flex-wrap: wrap; gap: 8px; padding: 10px 13px !important; }
  .topnav .pillnav { overflow-x: auto; max-width: 100%; }

  /* =============================================================
     7. APPRENTICE FILE — surgical fixes
     ============================================================= */

  /* The identity card is a flex row: avatar / name+meta / actions.
     On portrait, the actions should wrap to a new line. */
  .id-card {
    flex-wrap: wrap !important;
    padding: 17px !important;
    gap: 13px !important;
  }
  .id-actions {
    flex-basis: 100% !important;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .id-actions .btn { flex: 1 1 auto; min-width: 0; }

  /* Pulse strip: chips stack 2-up */
  .pulse-strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .pulse-strip > * {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Frame cards + notes */
  .frame { padding: 17px !important; }
  .card-title { font-size: 17px !important; margin-bottom: 6px !important; }
  .notes-thread .note { padding: 13px !important; }

  /* Traffic-light rings + labels — force single row of rings 3-up */
  .metric-grid, .ring-grid, [class*="ring-row"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .metric-grid > *, .ring-grid > * {
    min-width: 0;
    text-align: center;
  }

  /* Any element with class containing "col" and containing an uppercase
     label was stacking per-character; force horizontal + nowrap. */
  [class*="col"] > .eyebrow,
  [class*="col"] > .meta,
  [class*="col"] > .stat-lbl {
    white-space: nowrap;
    writing-mode: horizontal-tb !important;
  }

  /* pin-strip: stack vertically */
  .pin-strip {
    flex-wrap: wrap !important;
    padding: 13px !important;
    gap: 6px !important;
  }
  .pin-strip > * { flex-shrink: 1; min-width: 0; }

}

/* =============================================================
   8. VERY NARROW (≤ 380 px)
   ============================================================= */
@media (max-width: 380px) {
  [style*="padding: max(21px, env(safe-area-inset-top, 21px)) 17px 21px"] {
    padding: max(17px, env(safe-area-inset-top, 17px)) 13px 17px !important;
  }
  [style*="font-size: clamp(24px, 7.5vw, 40px)"] {
    font-size: clamp(20px, 8vw, 32px) !important;
  }
  .studio-shell { padding: 0 8px !important; }
  .id-card { padding: 13px !important; }
  .pulse-strip { grid-template-columns: 1fr 1fr !important; }
}

/* =============================================================
   9. TABLET LANDSCAPE + DESKTOP (≥ 901 px)
   Foundation vars still apply; portrait rules do not.
   ============================================================= */