/* teacher-features.css — components added to the teacher workspace (index.html) AFTER
   the fork, kept out of that page's inline <style> block so they never need de-forking.
   index.html is the last holdout of arch/inline_shared_sprint.md (step 6: replace its 953
   inline lines with the master imports). Anything new belongs here instead, which is also
   the "no new inline styles, not even one attribute" rule (public/CLAUDE.md) with a place
   to land. When step 6 runs, the .review-modal-* rules below join their siblings in
   components.css; the rest stay page-level.

   EVERY selector that shares a class with the inline block is COMPOUND (.btn.x, not .x).
   This file is linked ahead of that block, so an equal-specificity rule would lose the
   cascade and the styling would silently not apply — the failure mode this page has
   already shipped twice. One extra class in the selector removes the ordering dependency. */

/* THE STATE PRIMITIVES, reached by import rather than by a second copy. index.html links only
   teacher-entry.css (which imports entry-shared.css) and this file, so .load-error and
   .load-error-msg were defined nowhere this page could see them — and state.css's own header
   records what that costs: the round 13 repair once shipped seven .load-error banners onto the
   student manager as unstyled text, because the markup was right and nothing defined the class.
   C31 puts six of those banners on THIS page, so the import comes first.
   Safe to import alone: every var() in state.css carries a literal fallback, deliberately, so it
   does not need tokens.css - which this page does not load either. (Ray, 2026-09-16.) */
@import "state.css";

/* .btn-sm for the Retry controls those banners carry. COMPOUND per the rule above, and a reference
   rather than a sixth copy: components.css holds the master, index.html does not load that
   tier, and this value has already been de-forked once across five pages. Same numbers. */
.btn.btn-sm { padding: 4px 10px; font-size: 12px; }

/* Report-modal header actions — the download control sits beside the close button.
   Used by BOTH overlays (CV Review and the generic report modal), which is the point:
   one definition, so the two cannot drift apart the way their markup did. */
.review-modal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn.review-modal-download {
  font-size: 11px;
  padding: 5px 12px;
  white-space: nowrap;
}

/* CV Bank / Job Spec Bank row controls — the small per-row buttons (Review, Intel, Spec,
   Fit). .is-accent carries the accent treatment; --accent-ink is the mode-aware token for
   accent-coloured text on a pale ground (--accent-text is for text ON the accent fill). */
.btn.bank-row-btn {
  font-size: 9px;
  padding: 1px 5px;
}

.btn.bank-row-btn.is-accent {
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* ── Homework history + awaiting-review line (student card, Students drawer) ──────────
   A homework row used to read "B2 . 12/08/2025" and nothing else, so the teacher could not
   tell which handout it came from; source_title is derived server-side from the questions'
   lesson (db/homework.py _homework_source). The alert block above it exists because a
   completion only changed a status word inside a closed dropdown. */

.hw-hist-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 11px;
  flex-wrap: wrap;
}

.hw-hist-main { min-width: 0; flex: 1; }

.hw-hist-title {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hw-hist-meta {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 1px;
}

.hw-hist-status { color: var(--text-muted); }
/* --success-ink, not --success: the fill colour on a pale ground measures 2.2:1, well under
   AA, and this is 10px uppercase. The ink token is the mode-aware pair for exactly this, the
   way --accent-ink is, and the same row on /student-manager already uses it
   (students-features.css .hist-status-done). Measured 2026-08-31: 6.26:1 light, 9.53:1 dark. */
.hw-hist-status.is-done { color: var(--success-ink); font-weight: 600; }

/* Marks a completed row nobody has opened yet, so the list itself reads the same way the
   alert above it does once the teacher goes looking. */
.hw-hist-new {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--accent);
  color: var(--accent-text);
}

.hw-hist-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.btn.hw-hist-btn {
  font-size: 10px;
  padding: 1px 6px;
}

.hw-review-alert {
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 6px 8px;
  margin-bottom: 6px;
}

.hw-review-alert-head {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-ink);
  margin-bottom: 4px;
}

.hw-review-alert-count {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--accent);
  color: var(--accent-text);
}

.hw-review-alert-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 2px 0;
}

.hw-review-alert-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hw-review-alert-date {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ── BEL case study: the rail controls and the brief on the Course Map ──────────────────────
   The rail block stacks the plan-mode, scope and story selects; the brief block renders the
   plan-level case (company, sector, opening, cast) above the Course Map rows, where the rows
   themselves cannot carry it — it is one JSON object on the plan, not a section of handout. */

.case-rail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.case-rail-note,
.case-rail-err {
  font-size: 11px;
  line-height: 1.5;
}

.case-rail-note {
  color: var(--text-muted);
}

.case-rail-err {
  color: var(--error);
}

.case-brief {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--canvas-bg);
}

.case-brief-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 6px;
}

.case-brief-company {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
}

.case-brief-sector {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.case-brief-prose {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-main);
  margin-bottom: 8px;
}

.case-brief-cast {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.case-brief-person {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* Account-email banner — the strip under the teacher toolbar, and the control that the
   free-tier 403 in routes/deps.py tells an unverified teacher to use. The student pages get
   theirs from css/learner-features.css, which index.html does not load, so this is restated
   rather than reached for.
   Teal rather than a warning amber: one scheme on every page, and this page's token set has no
   warning-pale ground to sit on. */
.teacher-email-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--accent-glow);
  color: var(--accent-ink);
  font-size: 12px;
}

.teacher-email-banner-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
  min-width: 260px;
}

.teacher-email-banner-msg {
  flex: 1;
  min-width: 200px;
  line-height: 1.5;
}

.teacher-email-banner-input {
  flex: 0 1 240px;
  min-width: 160px;
  padding: 5px 9px;
  font-size: 12px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--canvas-bg);
  color: var(--text-main);
}

/* Compound on .btn for the reason stated at the top of this file: linked ahead of the inline
   block, an equal-specificity rule would lose and the sizing would silently not apply. */
.btn.teacher-email-banner-btn {
  font-size: 11px;
  padding: 4px 12px;
}

.teacher-email-banner-note { color: var(--success-ink); }

.teacher-email-banner-err { color: var(--error); }

.teacher-email-banner-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: inherit;
  padding: 2px 6px;
  margin-left: auto;
}

.teacher-email-banner-close:hover { color: var(--text-main); }

/* Track-card parts, the same values the six older cards carry inline. The OPIc card is the
   first written under the no-new-inline-styles rule, so the parts get names here; the older
   cards migrate when index.html's step 6 runs. .field-note is the muted one-line hint under
   a picker, same values as the inline <small> the other track panels use. */
.track-card-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--accent);
  background: var(--accent-glow);
  padding: 2px 8px;
  border-radius: 4px;
  align-self: flex-start;
}

.track-card-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.track-card-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  opacity: 0.8;
  border: 1px solid currentColor;
  padding: 0 4px;
  border-radius: 3px;
  margin-left: 4px;
}

.track-card-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
}

.field-note {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* The per-student OPIc Survey link block on the teacher card: the button, the Submitted
   state and the shared-token note stack as one line each (arch/opic_survey_plan.txt step 6). */
.opic-survey-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin-bottom: 6px;
}

.field-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}