/* 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; }
/* PRO tag on a menu item (Assignments, Sub plans): a label, not a lock. */
body.teach-warm .tw-pro-tag { font-size: 9px; font-weight: 700; letter-spacing: 1px; padding: 2px 5px; border-radius: 3px; border: 1px solid #B33A1A; color: #B33A1A; line-height: 1; }
/* News on the Assignments item (finished since last look / due within a day): dark, with a count. */
body.teach-warm .tw-nav-item.tw-nav-alert { background: #1C1208; color: #FFFDF8; font-weight: 600; }
body.teach-warm .tw-nav-item.tw-nav-alert:hover { background: #33241a; }
body.teach-warm .tw-nav-item.tw-nav-alert .tw-pro-tag { border-color: #F2B8A8; color: #F2B8A8; }
body.teach-warm .tw-new-tag { border-color: #2e6018; color: #fff; background: #2e6018; }
body.teach-warm .tw-nav-item.tw-nav-alert .tw-new-tag { border-color: #9BD07F; background: #9BD07F; color: #1C1208; }
/* "Pro from 1 Nov" (an existing teacher before the date gate): a small second line under the name. */
body.teach-warm .tw-pro-from { display: block; font-size: 10px; font-weight: 600; color: #B33A1A; letter-spacing: .02em; line-height: 1.2; margin-top: 1px; }
body.teach-warm .tw-nav-item.tw-nav-alert .tw-pro-from { color: #F2B8A8; }
body.teach-warm .tw-nav-badge { min-width: 18px; padding: 2px 6px; border-radius: 999px; background: #C8402A; color: #ffffff; font-size: 11px; font-weight: 700; line-height: 1.2; text-align: center; white-space: nowrap; }
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; }
}
/* Phones: the six menu items as a full-width 3×2 grid — always exactly two rows, under the
 * brand + profile row. */
@media (max-width: 600px) {
  body.teach-warm .tw-nav-items { flex-basis: 100%; order: 3; display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 2px; }
  body.teach-warm .tw-nav-items .tw-nav-item { padding: 7px 4px; font-size: 12px; justify-content: center; gap: 5px; white-space: nowrap; }
  body.teach-warm .tw-nav-items .tw-nav-item > span[style*="flex:1"] { flex: 0 1 auto !important; }
  /* Two rows of three: the PRO tag and the alert badge sit in the cell's corner, out of the flow;
   * the badge replaces the tag while there is news. */
  body.teach-warm .tw-nav-items .tw-nav-item { position: relative; }
  body.teach-warm .tw-nav-items .tw-pro-tag, body.teach-warm .tw-nav-items .tw-nav-badge { position: absolute; top: 1px; right: 2px; }
  body.teach-warm .tw-nav-items .tw-pro-tag { font-size: 7px; padding: 1px 3px; }
  body.teach-warm .tw-nav-items .tw-nav-badge { min-width: 14px; padding: 1px 4px; font-size: 9px; }
  body.teach-warm .tw-nav-items .tw-nav-alert .tw-pro-tag { display: none; }
  /* Phones: the short form ("PRO 1 NOV") pinned inside its own cell's top-right corner (a
   * negative top floated it into the gap — on row 2 it read as the cell above's); the cell
   * gets extra top room so the wide tag clears its label. */
  body.teach-warm .tw-nav-items .tw-nav-item.tw-nav-from:not(.tw-nav-alert) { padding-top: 14px; }
  body.teach-warm .tw-nav-items .tw-pro-from { position: absolute; top: 1px; right: 2px; margin: 0; font-size: 0; line-height: 1; padding: 1px 3px; border: 1px solid #B33A1A; border-radius: 3px; background: var(--erapin-paper, #FFFDF8); }
  body.teach-warm .tw-nav-items .tw-pro-from::after { content: attr(data-short); font-size: 7px; letter-spacing: .5px; text-transform: uppercase; }
  body.teach-warm .tw-nav-items .tw-nav-alert .tw-pro-from { display: none; }
  /* Pro expiry / renew banner: on a phone let the Subscribe CTA column take the full card
   * width and stack, so the monthly button + "Request an invoice" link no longer overflow
   * off the right edge (the flex:0 0 auto column didn't wrap at 390px). Desktop unchanged. */
  body.teach-warm .tw-pro-cta { flex-basis: 100% !important; align-items: stretch !important; }
}