/*
 * teacher-diagrams.css — the diagram vocabulary for the three teacher tool
 * marketing pages: /syllabus, /rubric, /letter. Loaded by those three pages
 * only.
 *
 * This file is the sibling of sample-embed.css and follows the same contract:
 * a flat, unlayered stylesheet whose every rule (design tokens included) is
 * SCOPED UNDER ONE ROOT CLASS, here `.teacher-diagram`, so the pages' own
 * global Tailwind typography is never restyled. Read the header of
 * sample-embed.css first; the rules that file must keep apply here too:
 *
 *  1. Never declare `display` on the BARE `.teacher-diagram` selector. This
 *     sheet is unlayered and site-tailwind.css puts every utility in
 *     `@layer utilities`, so an unlayered declaration would outrank `.hidden`
 *     regardless of specificity. Descendant rules are safe.
 *  2. For that same layering reason these rules beat Tailwind utilities on the
 *     same element. Markup inside `.teacher-diagram` must be written in the
 *     component vocabulary below, NOT in raw Tailwind, or it is silently
 *     restyled.
 *
 * Two more constraints specific to this file:
 *
 *  3. Colors come only from the palette already present in sample-embed.css.
 *     tests/official-brand-colors.test.ts walks every file under public/ and
 *     FAILS on a set of "near-brand" shades that are close enough to the real
 *     brand tokens to look like drift: notably Tailwind's blue-600 and
 *     blue-400, plus several near-black and near-white values. That list is
 *     canonical in the test, not here (spelling the literals out in this
 *     comment is itself a failure — ask us how we know). blue-600 and blue-400
 *     are exactly the shades a diagram gradient or a lighter connector stroke
 *     reaches for, so reach for the blues below instead. Semantic fills mirror
 *     SEMANTIC_BAR_FILL in src/lib/shared/semantic-colors.ts.
 *  4. No JavaScript, no fixed/sticky positioning, and nothing that scrolls the
 *     page body — a wide diagram scrolls inside its own container or it wraps.
 *
 * Class families: .contrast (problem card) · .proc (ownership rail) · .ribbon
 * (syllabus term) · .cgrid (rubric consistency grid) · .pmap (letter
 * provenance map) · plus the shared .legend / .caption / .numbers helpers.
 */

/* ── Scoped design tokens, copied verbatim from sample-embed.css. Declared on
      `.teacher-diagram`, never on the document root. ── */
.teacher-diagram {
  --brand-blue: #3b82f6;
  /* The blue that CARRIES white text. --brand-blue is 3.68:1 against
     white, which is fine beside white and fails underneath it, so a filled
     button, badge or bar takes this one and everything else — borders, glows,
     icon tiles, focus rings, bars and dots that hold no words — stays
     --brand-blue. Same value as --brand-blue-label, and not by coincidence:
     the constraint is one constraint seen from both sides, blue-on-white and
     white-on-blue, and 6.70:1 either way. */
  --brand-blue-fill: #1d4ed8;
  --brand-navy: #1f2937;
  --surface: #ffffff;
  --border: rgba(31, 41, 55, .12);
  --text-primary: #1f2937;
  --text-secondary: rgba(31, 41, 55, .78);
  /* .66, not .62: at .62 this is 4.31:1 and misses AA for normal-size
     text. Full note in hub-chrome.css; the value must match there. */
  --text-tertiary: rgba(31, 41, 55, .66);
  --shadow-warm-sm: 0 1px 3px rgba(31, 41, 55, .05), 0 1px 2px rgba(31, 41, 55, .04);
  color: var(--text-primary);
}

/* ══ SHARED HELPERS ════════════════════════════════════════════════════════ */

/* A glyph or a color that IS a cell's content still needs a text equivalent.
   Scoped rather than Tailwind's sr-only, because site-tailwind.css is only
   rebuilt by hand. */
.teacher-diagram .visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.teacher-diagram .diagram-eyebrow {
  display: block; color: var(--text-tertiary); font-size: .72rem; font-weight: 800;
  letter-spacing: .06em; margin-bottom: .6rem;
}

/* The one-line reading of a diagram, for anyone who does not decode it. */
.teacher-diagram .diagram-caption {
  color: var(--text-tertiary); font-size: .84rem; line-height: 1.6; margin-top: 1.1rem;
}

/* Legend. Every color-coded diagram carries one: nothing here may be conveyed
   by color alone. Mirrors the .meter-legend family in sample-embed.css. */
.teacher-diagram .legend {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: 1.1rem;
  font-size: .78rem; font-weight: 600; color: var(--text-tertiary);
}
.teacher-diagram .legend-item { display: inline-flex; align-items: center; gap: .42rem; }
.teacher-diagram .legend-dot {
  width: .62rem; height: .62rem; border-radius: 999px; flex-shrink: 0;
}
.teacher-diagram .legend-dot.is-scan { background: var(--brand-blue); }
.teacher-diagram .legend-dot.is-live { background: #d1d5db; }
.teacher-diagram .legend-dot.is-you { background: var(--brand-navy); }

/* A strip of literal product facts (100 pages per job, 3 letter types, ...).
   Only numbers that are true of the product ever go here. */
.teacher-diagram .numbers {
  display: flex; flex-wrap: wrap; gap: .45rem .55rem; margin-top: 1.2rem;
  border-top: 1px dashed var(--border); padding-top: 1.1rem;
}
.teacher-diagram .number {
  display: inline-flex; align-items: baseline; gap: .35rem;
  background: #f9fafb; border: 1px solid var(--border); border-radius: 999px;
  padding: .28rem .7rem; font-size: .78rem;
}
.teacher-diagram .number b { color: var(--brand-navy); font-weight: 800; }
.teacher-diagram .number span { color: var(--text-tertiary); font-weight: 600; }

/* Owner chip. Shared by .proc and .cgrid: the single most repeated idea on
   these three pages is that the tool drafts and the teacher decides, so the
   two-tone chip is the same object everywhere it appears. */
.teacher-diagram .owner {
  display: inline-block; font-size: .62rem; font-weight: 800;
  letter-spacing: .07em;
  padding: .14rem .5rem; border-radius: 999px; white-space: nowrap;
}
.teacher-diagram .owner-you { background: var(--brand-navy); color: #fff; }
.teacher-diagram .owner-tool { background: #eff6ff; color: #1d4ed8; }

/* ══ CONTRAST ROWS — the problem card ══════════════════════════════════════
   Paired rows, not two independent lists: each row puts one manual reality
   directly opposite the thing the tool changes, so the eye does the compare.
   ═══════════════════════════════════════════════════════════════════════ */

.teacher-diagram .contrast { margin-top: .3rem; }

/* Column headers exist only once the row becomes a true two-column compare,
   which is at md. Stacked, each cell labels itself with its own icon. */
.teacher-diagram .contrast-heads { display: none; }

.teacher-diagram .contrast-row {
  display: grid; gap: .5rem; align-items: stretch;
  padding: 1.05rem 0; border-top: 1px solid var(--border);
}
.teacher-diagram .contrast-row:first-of-type { border-top: 0; padding-top: .2rem; }

.teacher-diagram .contrast-from,
.teacher-diagram .contrast-to {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .92rem; line-height: 1.55; border-radius: 12px; padding: .7rem .85rem;
}
.teacher-diagram .contrast-from {
  background: #f9fafb; border: 1px solid var(--border); color: var(--text-tertiary);
}
.teacher-diagram .contrast-to {
  background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; font-weight: 600;
}
.teacher-diagram .contrast-from i { color: #d1d5db; margin-top: .22rem; flex-shrink: 0; }
.teacher-diagram .contrast-to i { color: var(--brand-blue); margin-top: .22rem; flex-shrink: 0; }

.teacher-diagram .contrast-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-blue); font-size: .82rem;
}

@media (min-width: 768px) {
  .teacher-diagram .contrast-heads {
    display: grid; grid-template-columns: 1fr 1.6rem 1fr; gap: .5rem;
    margin-bottom: .3rem;
  }
  .teacher-diagram .contrast-head {
    font-size: .7rem; font-weight: 800; letter-spacing: .07em;
    padding: 0 .75rem;
  }
  .teacher-diagram .contrast-head.is-from { color: var(--text-tertiary); }
  .teacher-diagram .contrast-head.is-to { color: #1d4ed8; grid-column: 3; }
  .teacher-diagram .contrast-row { grid-template-columns: 1fr 1.6rem 1fr; }
  /* Rotate the stacked down-arrow into the horizontal reading, the same idiom
     .story-spine and .flow use. */
  .teacher-diagram .contrast-arrow i { transform: rotate(-90deg); }
}

/* ══ PROC — the ownership rail, replacing the .step-line list ═══════════════
   Deliberately VERTICAL, not a horizontal row: these step descriptions run two
   and three lines, and four to six horizontal columns would be unreadable. The
   upgrade over the old list is the phase grouping and the owner chip, not a
   change of axis. At md the phase label moves into its own left column, so the
   shape of the job is legible down the margin.
   ═══════════════════════════════════════════════════════════════════════ */

.teacher-diagram .proc { margin-top: .2rem; }

.teacher-diagram .proc-group { padding-top: 1.6rem; }
.teacher-diagram .proc-group:first-of-type { padding-top: 0; }

.teacher-diagram .proc-phase {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem;
}
.teacher-diagram .proc-phase-name {
  color: var(--brand-navy); font-size: .72rem; font-weight: 800;
  letter-spacing: .09em;
}
/* The hairline that carries the eye from one phase label across to its nodes. */
.teacher-diagram .proc-phase-rule {
  flex: 1 1 auto; height: 1px; background: var(--border); min-width: 1rem;
}

.teacher-diagram .proc-nodes { display: flex; flex-direction: column; gap: .9rem; }

.teacher-diagram .proc-node {
  display: flex; align-items: flex-start; gap: .8rem;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow-warm-sm);
  padding: 1rem 1.1rem;
}
.teacher-diagram .proc-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; flex-shrink: 0;
  background: var(--brand-blue-fill); color: #fff; border-radius: 999px;
  font-size: .8rem; font-weight: 800;
}
/* A step the teacher owns is marked on the number itself as well as in the
   chip, so the two-tone read survives at a glance and in grayscale. */
.teacher-diagram .proc-node.is-you .proc-num { background: var(--brand-navy); }

.teacher-diagram .proc-body { min-width: 0; }
.teacher-diagram .proc-title {
  color: var(--brand-navy); font-size: .95rem; font-weight: 700;
  margin: .12rem 0 .3rem;
}
.teacher-diagram .proc-desc {
  color: var(--text-secondary); font-size: .86rem; line-height: 1.6; margin: 0;
}
.teacher-diagram .proc-body .owner { margin-bottom: .3rem; }

@media (min-width: 768px) {
  .teacher-diagram .proc-group {
    display: grid; grid-template-columns: 8.5rem 1fr; gap: 0 1.4rem;
    align-items: start;
  }
  .teacher-diagram .proc-phase {
    flex-direction: column; align-items: flex-start; gap: .45rem;
    margin-bottom: 0; padding-top: .9rem;
  }
  .teacher-diagram .proc-phase-rule { width: 100%; flex: 0 0 1px; min-width: 0; }
}

/* ══ RIBBON — the /syllabus term signature ═════════════════════════════════
   Equal-width week columns, so unit segments and milestone markers align by
   grid column with no percentage arithmetic. Weeks are the sample plan's own
   pacing table; nothing here is invented.
   ═══════════════════════════════════════════════════════════════════════ */

.teacher-diagram .ribbon {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: .3rem;
  align-items: stretch; margin-top: .3rem;
}
.teacher-diagram .ribbon-unit {
  border-radius: 10px; padding: .55rem .6rem; min-width: 0;
  background: #eff6ff; border: 1px solid #bfdbfe;
}
.teacher-diagram .ribbon-unit .name {
  display: block; color: #1e3a8a; font-size: .82rem; font-weight: 700; line-height: 1.35;
}
.teacher-diagram .ribbon-unit .span {
  display: block; color: #1d4ed8; font-size: .7rem; font-weight: 600; margin-top: .15rem;
}
/* A unit the sample names only partially (the year runs past week 6). */
.teacher-diagram .ribbon-unit.is-open {
  background: transparent; border-style: dashed; border-color: #d1d5db;
}
.teacher-diagram .ribbon-unit.is-open .name { color: var(--text-tertiary); font-weight: 600; }
.teacher-diagram .ribbon-unit.is-open .span { color: var(--text-tertiary); }

.teacher-diagram .ribbon-week {
  display: flex; align-items: center; justify-content: center;
  border-top: 1px solid var(--border); padding-top: .35rem;
  color: var(--text-tertiary); font-size: .68rem; font-weight: 800; letter-spacing: .04em;
}
.teacher-diagram .ribbon-mark { min-width: 0; padding-top: .3rem; }
.teacher-diagram .ribbon-mark .dot {
  display: block; width: .5rem; height: .5rem; margin: 0 auto .3rem;
  border-radius: 999px; background: #d1d5db;
}
.teacher-diagram .ribbon-mark .what {
  display: block; text-align: center; font-size: .66rem; line-height: 1.35;
  color: var(--text-tertiary); font-weight: 600;
}
/* Scan-gradable work carries the one-click handoff into the Rubric! Studio;
   live-graded work (oral defenses, performances) does not. The legend says so
   in words — the color is never the only signal. */
.teacher-diagram .ribbon-mark.is-scan .dot { background: var(--brand-blue); }
.teacher-diagram .ribbon-mark.is-scan .what { color: #1d4ed8; font-weight: 700; }
/* A teaching week with nothing due still carries a dot, hollow and dashed, so
   every week's label sits on the same baseline and the legend's third swatch
   actually appears in the ribbon. */
.teacher-diagram .ribbon-mark.is-none .dot { background: transparent; border: 1px dashed #d1d5db; }

/* Standards chips: exactly the standardsRegime options the intake offers. */
.teacher-diagram .chip-row { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.teacher-diagram .chip-row .chip {
  background: #f9fafb; border: 1px solid var(--border); color: var(--text-secondary);
  font-size: .74rem; font-weight: 700; padding: .22rem .6rem; border-radius: 999px;
}

/* ══ CGRID — the /rubric consistency signature ═════════════════════════════
   Your criteria down the side, the stack across the top. The point is that one
   rubric is applied identically to the tenth paper and the first, and that
   every cell is the teacher's to confirm or change.
   ═══════════════════════════════════════════════════════════════════════ */

.teacher-diagram .cgrid { margin-top: .3rem; }
.teacher-diagram .cgrid-row {
  display: grid; grid-template-columns: 1fr; gap: .3rem .7rem; padding: .55rem 0;
  border-top: 1px solid var(--border);
}
.teacher-diagram .cgrid-row:first-of-type { border-top: 0; }
.teacher-diagram .cgrid-crit {
  display: flex; align-items: baseline; gap: .4rem; min-width: 0;
}
.teacher-diagram .cgrid-crit .name {
  color: var(--brand-navy); font-size: .86rem; font-weight: 700;
}
.teacher-diagram .cgrid-crit .pts {
  color: var(--text-tertiary); font-size: .74rem; font-weight: 700; white-space: nowrap;
}
/* Cells flex rather than sit on a fixed width, so ten of them shrink to fit a
   390px screen instead of pushing the page sideways. */
.teacher-diagram .cgrid-cells { display: flex; gap: .22rem; align-items: center; }
.teacher-diagram .cgrid-cell {
  flex: 1 1 0; min-width: 0; height: 1.5rem; border-radius: 4px;
  background: #eff6ff; border: 1px solid #bfdbfe;
}
.teacher-diagram .cgrid-cell.is-mid { background: #bfdbfe; border-color: #bfdbfe; }
.teacher-diagram .cgrid-cell.is-full { background: var(--brand-blue); border-color: var(--brand-blue); }
/* The one cell the teacher changed. An amber ring plus a text equivalent in
   the caption; never the ring alone. */
.teacher-diagram .cgrid-cell.is-override {
  background: #fffbeb; border-color: #f59e0b;
  box-shadow: 0 0 0 2px #fde68a;
}
.teacher-diagram .cgrid-scale {
  display: flex; justify-content: space-between; gap: .7rem; margin-top: .5rem;
  color: var(--text-tertiary); font-size: .7rem; font-weight: 700;
  letter-spacing: .05em;
}

@media (min-width: 640px) {
  .teacher-diagram .cgrid-row { grid-template-columns: 10.5rem 1fr; align-items: center; }
  .teacher-diagram .cgrid-scale { margin-left: 11.2rem; }
}

/* ══ PMAP — the /letter provenance signature ════════════════════════════════
   The only inline SVG in the set: a many-to-many mapping between two columns
   is the one shape CSS cannot draw. Below md the SVG is replaced by a plain
   list, which is the accessible and responsive path rather than a squeezed
   diagram. Both directions of the swap are explicit.
   ═══════════════════════════════════════════════════════════════════════ */

.teacher-diagram .pmap-figure { display: none; margin: 0; }
.teacher-diagram .pmap-svg { display: block; width: 100%; height: auto; font-family: inherit; }

.teacher-diagram .pmap-list { display: flex; flex-direction: column; gap: .7rem; margin-top: .3rem; }
.teacher-diagram .pmap-row {
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  box-shadow: var(--shadow-warm-sm); padding: .75rem .85rem;
}
.teacher-diagram .pmap-para {
  color: var(--brand-navy); font-size: .88rem; font-weight: 700;
}
.teacher-diagram .pmap-cites {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .4rem;
}
/* gray-500 to match the .pmap-cite pill beside it; gray-400 read 2.54:1 at
   10.2px. Twin of .sample-embed .cites .label. */
.teacher-diagram .pmap-cites .label {
  color: #6b7280; font-size: .64rem; font-weight: 800;
  letter-spacing: .06em;
}
.teacher-diagram .pmap-cite {
  background: #f9fafb; color: #6b7280; font-size: .68rem; font-weight: 700;
  padding: .12rem .5rem; border-radius: 999px;
}
.teacher-diagram .pmap-note {
  display: flex; align-items: flex-start; gap: .45rem; margin-top: .45rem;
  color: #b45309; font-size: .78rem; line-height: 1.5;
}
.teacher-diagram .pmap-note i { color: #b45309; margin-top: .2rem; flex-shrink: 0; }

@media (min-width: 768px) {
  .teacher-diagram .pmap-figure { display: block; }
  .teacher-diagram .pmap-list { display: none; }
}

/* Motion is opt-in, matching sample-embed.css. */
@media (prefers-reduced-motion: no-preference) {
  .teacher-diagram .proc-node { transition: border-color .15s ease, box-shadow .15s ease; }
}