/* teach-warm.css — Direction B "warm editorial" re-skin of the teacher portal.
 *
 * Scope: teach.erapin.com ONLY. Loaded after erapin-tokens.css + teach.css +
 * teach-spa.css by teach.html, and gated on `body.teach-warm`, so it overrides
 * the --erapin-* tokens (and a few hardcoded font literals) for the SPA without
 * touching class.html / game.html — neither of which links any teacher
 * stylesheet, so the game theme has zero blast radius by construction.
 *
 * What changes vs the old parchment look: page ground + card surfaces lighten,
 * borders warm, and the display/body faces become Playfair (titles) + system-ui
 * (everything else) — the IM Fell / Courier Prime faces are dropped (teach.html
 * no longer loads them). Most component hexes are already Direction-B values;
 * the visible delta is background, borders and type, which the token block and
 * the two font rules below cover. New SPA components use var() only.
 *
 * Layout classes for the state-aware shell (.tw-shell / .tw-nav / .tw-grid …)
 * live in the LAYOUT section at the bottom.
 */

body.teach-warm {
  /* Ink */
  --erapin-ink: #2B2621;
  --erapin-ink-soft: #5a5048;
  --erapin-ink-muted: #8B8275;
  --erapin-ink-faint: #A79C88;

  /* Paper / surfaces */
  --erapin-paper: #FFFDF8;            /* card surface */
  --erapin-paper-aged: #F4EEE0;       /* nested / recessed */
  --erapin-paper-white: #FFFFFF;
  --erapin-paper-dark: #E9E1D0;       /* pill bg, dividers */

  /* Borders */
  --erapin-border: #E9E1D0;
  --erapin-border-strong: #D9CFB9;
  --erapin-border-emphasis: #2B2621;

  /* Brand */
  --erapin-red: #B33A1A;
  --erapin-red-deep: #8B1A0E;
  --erapin-red-dark: #8B1A0E;
  --erapin-red-soft: #9a3016;
  --erapin-green: #3E8E5B;
  --erapin-green-deep: #2c6a42;
  --erapin-amber: #C77A16;

  /* Type — Playfair for display/serif, system-ui for body (drop IM Fell + Courier) */
  --erapin-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --erapin-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --erapin-font-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  background: #FAF5EA !important;     /* beats teach.css `body{background:#F5F0E8}` */
  color: var(--erapin-ink);
  font-family: var(--erapin-font-body);
}

/* Legacy components inline the font LITERALS (not var()), so re-font them by
 * attribute match. ponytail: substring match is the ceiling; upgrade path is to
 * swap each literal for var() in the component as it's touched. */
body.teach-warm [style*="Courier Prime"] { font-family: var(--erapin-font-body) !important; }
body.teach-warm [style*="IM Fell"] { font-family: var(--erapin-font-display) !important; letter-spacing: 0 !important; }

/* The uppercase-tracked-caps look reads as parchment; soften for the dashboard. */
body.teach-warm .erapin-btn-primary { letter-spacing: 0.5px; text-transform: none; font-weight: 700; }

/* Class-based Courier in teach.css survives dropping the webfont (it falls back
 * to Courier New / monospace), so the dashboard body text still reads typewriter.
 * Per the "drop the fonts" decision, re-font the dashboard's monospace text
 * classes to the sans body face. Titles keep their serif (display) face. */
body.teach-warm .lb-name,
body.teach-warm .lb-counter,
body.teach-warm .lb-cr,
body.teach-warm .live-dot,
body.teach-warm .student-link,
body.teach-warm .seed-item-name,
body.teach-warm .seed-filter,
body.teach-warm .sp-diff,
body.teach-warm .mcal-dow,
body.teach-warm .mcal-day,
body.teach-warm .pro-tool-btn .pt-label,
body.teach-warm .pro-tool-btn .pt-desc,
body.teach-warm .tq-round-edit input,
body.teach-warm input[type="text"],
body.teach-warm input[type="email"],
body.teach-warm input[type="number"],
body.teach-warm input[type="date"],
body.teach-warm select,
body.teach-warm textarea {
  font-family: var(--erapin-font-body) !important;   /* teach.css sets these !important in its min-width:900px block */
}

/* ============================================================================
 * LAYOUT — the state-aware, left-nav shell (.tw-*). All new components style
 * themselves through these + var(--erapin-*); no hardcoded hexes.
 * ==========================================================================*/

body.teach-warm .tw-shell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  align-items: start;
  max-width: 1440px;
  margin: 0 auto;
  min-height: 100vh;
}

/* Left nav — its own surface, sticky IN the grid (not position:fixed), so the
 * sticky DemoBanner above #app still pushes it down. */
body.teach-warm .tw-nav {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 14px;
  border-right: 1px solid var(--erapin-border);
  background: var(--erapin-paper);
}
body.teach-warm .tw-nav-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left;
  padding: 9px 11px; border: none; background: none;
  border-radius: 7px;
  font-family: var(--erapin-font-body); font-size: 13px;
  color: var(--erapin-ink-soft); cursor: pointer; text-decoration: none;
}
body.teach-warm .tw-nav-item:hover { background: var(--erapin-paper-aged); }
body.teach-warm .tw-nav-item.active { background: var(--erapin-paper-dark); color: var(--erapin-ink); font-weight: 600; }
body.teach-warm .tw-nav-section {
  font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--erapin-ink-faint); padding: 16px 11px 5px;
}
body.teach-warm .tw-room {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px; border-radius: 7px; cursor: pointer;
  font-size: 12px; color: var(--erapin-ink-soft);
}
body.teach-warm .tw-room:hover { background: var(--erapin-paper-aged); }
body.teach-warm .tw-room.active { background: var(--erapin-paper-dark); color: var(--erapin-ink); font-weight: 600; }
body.teach-warm .tw-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
body.teach-warm .tw-dot.live { background: var(--erapin-green); }
body.teach-warm .tw-dot.idle { background: var(--erapin-ink-faint); }
body.teach-warm .tw-profile { margin-top: auto; padding-top: 14px; }

/* Main column + per-room top bar */
body.teach-warm .tw-main { padding: 20px 24px; min-width: 0; }
body.teach-warm .tw-topbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--erapin-border);
}
body.teach-warm .tw-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
body.teach-warm .tw-pill.live { background: #E4F0DC; color: var(--erapin-green-deep); }
body.teach-warm .tw-pill.ready { background: #FBF0DC; color: var(--erapin-amber); }

/* Mode toggle — grouped segmented control (matches the mockup), not two pills. */
body.teach-warm .tw-seg {
  display: inline-flex; background: var(--erapin-paper-dark);
  border-radius: 9px; padding: 3px;
}
body.teach-warm .tw-seg.locked { opacity: 0.85; }
body.teach-warm .tw-seg-btn {
  border: none; background: none; padding: 5px 15px; border-radius: 7px;
  font-family: var(--erapin-font-body); font-size: 13px; font-weight: 600;
  color: var(--erapin-ink-muted); cursor: pointer; white-space: nowrap;
}
body.teach-warm .tw-seg-btn.active {
  background: var(--erapin-paper); color: var(--erapin-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
}
body.teach-warm .tw-seg-btn:disabled { cursor: not-allowed; }
body.teach-warm .tw-seg.locked .tw-seg-btn:not(.active) { color: var(--erapin-ink-faint); }

/* Primary / rail split (live + setup states) */
body.teach-warm .tw-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px; align-items: start;
}
body.teach-warm .tw-rail { display: flex; flex-direction: column; gap: 0; }
body.teach-warm .tw-card {
  background: var(--erapin-paper); border: 1px solid var(--erapin-border);
  border-radius: var(--erapin-radius-md, 8px); padding: 14px 16px; margin-bottom: 14px;
}
body.teach-warm .tw-card-title { font-family: var(--erapin-font-display); font-size: 15px; color: var(--erapin-ink); margin-bottom: 8px; }

/* Dropdown menu (Menu.js) */
body.teach-warm .tw-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; background: none; border: none; border-radius: 6px;
  font-family: var(--erapin-font-body); font-size: 12px; color: var(--erapin-ink); cursor: pointer;
}
body.teach-warm .tw-menu-item:hover { background: var(--erapin-paper-aged); }
body.teach-warm .tw-menu-item[disabled] { opacity: 0.45; cursor: default; }
body.teach-warm .tw-menu-node { padding: 4px 6px; display: flex; flex-wrap: wrap; gap: 4px; }

/* Mobile/tablet: nav becomes a horizontal top strip; grids collapse to 1 col.
 * The old dash-grid / room-hero @media rules no longer apply (new class names),
 * so this supplies the collapse. Room list hidden — Switch room in the top bar
 * covers switching. */
@media (max-width: 899px) {
  body.teach-warm .tw-shell { grid-template-columns: 1fr; }
  body.teach-warm .tw-nav {
    position: static; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 4px; max-height: none; overflow: visible;
    border-right: none; border-bottom: 1px solid var(--erapin-border);
  }
  body.teach-warm .tw-nav-brand { margin-bottom: 0; margin-right: 8px; }
  body.teach-warm .tw-nav-items { flex-direction: row !important; flex-wrap: wrap; gap: 2px; }
  body.teach-warm .tw-nav-item { width: auto; }
  body.teach-warm .tw-nav-rooms { display: none; }
  body.teach-warm .tw-profile { margin-top: 0; margin-left: auto; padding-top: 0; }
  body.teach-warm .tw-main { padding: 14px; }
  body.teach-warm .tw-grid { grid-template-columns: 1fr; }
}