/*
 * student-diagrams.css — the diagram vocabulary for the five student service
 * marketing pages: /shortlist, /resolve, /pursuit, /aid, /roster. Loaded by
 * those five pages only.
 *
 * This file is the sibling of teacher-diagrams.css, which is itself the
 * sibling of sample-embed.css, and it follows the same contract: a flat,
 * unlayered stylesheet whose every rule (design tokens included) is SCOPED
 * UNDER ONE ROOT CLASS, here `.student-diagram`, so the pages' own global
 * Tailwind typography is never restyled. The rules those files must keep apply
 * here too:
 *
 *  1. Never declare `display` on the BARE `.student-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 `.student-diagram` must be written in the
 *     component vocabulary below, NOT in raw Tailwind, or it is silently
 *     restyled.
 *  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 close enough to the real brand
 *     tokens to look like drift. That list is canonical in the test, not here
 *     (spelling the literals out in this comment is itself a failure). 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.
 *
 * Two notes specific to the student set:
 *
 *  - The teacher file's `.proc` ownership rail is NOT ported. Its organizing
 *    claim — you versus the tool on every step — is one the student wizards do
 *    not make. `.gg` replaces it with the claim they do make: what goes into
 *    each step and what comes back out.
 *  - `.rail` is already taken by sample-embed.css (Pursuit's and Aid's samples
 *    draw their timelines with it), and `.proc` is taken by teacher-diagrams.css.
 *    Neither name is available here.
 *
 * Class families: .contrast (problem card) · .gg (give-get rail) · .handoff
 * (what carries in and out) · .funnel (/shortlist) · .egrid (/resolve) · .fan
 * (/pursuit) · .nest (/aid) · .hub (/roster) · plus the shared .legend /
 * .diagram-caption / .numbers helpers.
 */

/* ── Scoped design tokens, copied verbatim from sample-embed.css. Declared on
      `.student-diagram`, never on the document root. ── */
.student-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. */
.student-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;
}

.student-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. */
.student-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. */
.student-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);
}
.student-diagram .legend-item { display: inline-flex; align-items: center; gap: .42rem; }
.student-diagram .legend-dot {
  width: .62rem; height: .62rem; border-radius: 999px; flex-shrink: 0;
}
.student-diagram .legend-dot.is-give { background: #d1d5db; }
.student-diagram .legend-dot.is-get { background: var(--brand-blue); }
.student-diagram .legend-dot.is-reach { background: #ef4444; }
.student-diagram .legend-dot.is-match { background: var(--brand-blue); }
.student-diagram .legend-dot.is-safety { background: #10b981; }

/* A strip of literal product facts (417 colleges, 42 AP exams, ...). Only
   numbers that are true of the product ever go here. */
.student-diagram .numbers {
  display: flex; flex-wrap: wrap; gap: .45rem .55rem; margin-top: 1.2rem;
  border-top: 1px dashed var(--border); padding-top: 1.1rem;
}
.student-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;
}
.student-diagram .number b { color: var(--brand-navy); font-weight: 800; }
.student-diagram .number span { color: var(--text-tertiary); font-weight: 600; }

/* ══ 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.
   Ported from teacher-diagrams.css; the component is the same object, only the
   root scope differs.
   ═══════════════════════════════════════════════════════════════════════ */

.student-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. */
.student-diagram .contrast-heads { display: none; }

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

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

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

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

/* ══ GG — the give-get rail, replacing the .step-line list ══════════════════
   Vertical for the same reason the teacher rail is: these step descriptions
   run two and three lines, and three to five horizontal columns would be
   unreadable. The upgrade over the old numbered list is the per-step pair —
   what the student hands in, what comes back — which the old list stated only
   in prose. The two sides are distinguished by icon AND fill, and the rail
   carries one .legend, so the color is never the only signal. The labels are
   not repeated per step; that legend names them once.
   ═══════════════════════════════════════════════════════════════════════ */

.student-diagram .gg { display: flex; flex-direction: column; gap: .9rem; margin-top: .2rem; }

.student-diagram .gg-step {
  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;
}
.student-diagram .gg-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;
}
.student-diagram .gg-body { min-width: 0; flex: 1 1 auto; }
.student-diagram .gg-title {
  color: var(--brand-navy); font-size: .95rem; font-weight: 700;
  margin: .12rem 0 .3rem;
}
.student-diagram .gg-desc {
  color: var(--text-secondary); font-size: .86rem; line-height: 1.6; margin: 0;
}

/* The pair. Stacked below sm with a down-arrow between the two sides; a true
   two-column compare at sm and up, where the arrow rotates. */
.student-diagram .gg-pair {
  display: grid; gap: .35rem; align-items: center;
  margin-top: .85rem; padding-top: .85rem; border-top: 1px dashed var(--border);
}
.student-diagram .gg-side { display: flex; flex-wrap: wrap; gap: .3rem; min-width: 0; }
.student-diagram .gg-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-blue); font-size: .76rem;
}
.student-diagram .gg-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; font-weight: 700; line-height: 1.35;
  padding: .24rem .6rem; border-radius: 999px;
}
.student-diagram .gg-side.is-give .gg-chip {
  background: #f9fafb; border: 1px solid var(--border); color: var(--text-tertiary);
}
.student-diagram .gg-side.is-get .gg-chip {
  background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a;
}
.student-diagram .gg-side.is-give .gg-chip i { color: #9ca3af; }
.student-diagram .gg-side.is-get .gg-chip i { color: var(--brand-blue); }

@media (min-width: 640px) {
  .student-diagram .gg-pair { grid-template-columns: 1fr 1.4rem 1fr; align-items: start; }
  .student-diagram .gg-arrow { padding-top: .3rem; }
  .student-diagram .gg-arrow i { transform: rotate(-90deg); }
}

/* ══ HANDOFF — what carries in, what carries out ════════════════════════════
   The student answer to the teacher pages' story spine. The bottom path strip
   already says WHERE a tool sits in the 1-6 path; this says WHAT travels along
   the edge. It is deliberately a separate block rather than an edit to that
   strip, which is shared chrome across all six service pages.
   ═══════════════════════════════════════════════════════════════════════ */

.student-diagram .handoff { display: grid; gap: .7rem; align-items: stretch; }

.student-diagram .handoff-side {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow-warm-sm);
  padding: 1.05rem 1.15rem; min-width: 0;
}
/* The start of the path carries nothing in. Dashed and unfilled, so the empty
   side reads as deliberate rather than missing. */
.student-diagram .handoff-side.is-empty {
  background: transparent; border-style: dashed; box-shadow: none;
}
.student-diagram .handoff-label {
  display: block; color: var(--text-tertiary); font-size: .66rem; font-weight: 800;
  letter-spacing: .07em; margin-bottom: .45rem;
}
.student-diagram .handoff-tool {
  display: block; color: var(--brand-navy); font-size: .92rem; font-weight: 700;
  line-height: 1.4; margin-bottom: .4rem;
}
.student-diagram .handoff-side.is-empty .handoff-tool { color: var(--text-tertiary); font-weight: 600; }
.student-diagram .handoff-carry {
  display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .45rem;
}
.student-diagram .handoff-carry .gg-chip {
  background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a;
}
.student-diagram .handoff-note {
  display: block; color: var(--text-secondary); font-size: .84rem; line-height: 1.6;
}
.student-diagram .handoff-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-blue); font-size: .9rem;
}

@media (min-width: 768px) {
  .student-diagram .handoff { grid-template-columns: 1fr 2rem 1fr; }
  .student-diagram .handoff-arrow i { transform: rotate(-90deg); }
}

/* ══ FUNNEL — the /shortlist signature ══════════════════════════════════════
   Three stages narrowing to five schools. The STAGE widths are schematic and
   the caption says so: 417 to 5 cannot be drawn to scale on a page this wide.
   The final split IS exact — the segments are 1fr / 3fr / 1fr, which is
   literally ANCHORS.selective.targets in src/lib/shortlist/tiers.ts. Band
   color is the tier bucket tierForCollege() returns, never a chance read.
   ═══════════════════════════════════════════════════════════════════════ */

.student-diagram .funnel { display: flex; flex-direction: column; align-items: center; gap: .3rem; }

.student-diagram .funnel-stage {
  display: flex; align-items: baseline; justify-content: center; gap: .6rem;
  border-radius: 12px; padding: .7rem .9rem; text-align: center;
  background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a;
}
.student-diagram .funnel-stage.is-wide { width: 100%; }
.student-diagram .funnel-stage.is-mid { width: 78%; }
.student-diagram .funnel-stage.is-narrow { width: 58%; }
.student-diagram .funnel-n { font-size: 1.15rem; font-weight: 800; }
.student-diagram .funnel-what { font-size: .8rem; font-weight: 600; line-height: 1.4; }

.student-diagram .funnel-drop {
  color: var(--brand-blue); font-size: .78rem; line-height: 1;
}

/* The split stays full width where the stage above it tapers, because the
   segment labels have to stay readable at 390px. The label below says in words
   what the width no longer says by shape. */
.student-diagram .funnel-splitlabel {
  color: var(--text-tertiary); font-size: .72rem; font-weight: 800;
  letter-spacing: .06em; margin: .25rem 0 .1rem;
}

/* The exact part. 1 : 3 : 1, drawn as fractions of the same track. */
.student-diagram .funnel-split {
  display: grid; grid-template-columns: 1fr 3fr 1fr; gap: .25rem;
  width: 100%; margin-top: .25rem;
}
/* min-width:0 or the fr ratios silently lose to each segment's min-content
   width, and the 1 : 3 : 1 the diagram exists to show stops being 1 : 3 : 1. */
.student-diagram .funnel-seg {
  border-radius: 8px; padding: .5rem .3rem; text-align: center; min-width: 0;
  color: #fff; font-size: .72rem; font-weight: 800; line-height: 1.3;
  overflow-wrap: anywhere;
}
.student-diagram .funnel-seg.is-reach { background: #b91c1c; }
.student-diagram .funnel-seg.is-match { background: var(--brand-blue-fill); }
.student-diagram .funnel-seg.is-safety { background: #047857; }
.student-diagram .funnel-seg .n { display: block; font-size: .95rem; }

/* ══ EGRID — the /resolve signature ═════════════════════════════════════════
   The eight evidence checks, one cell each, in the page's own FAQ wording. A
   grid rather than a rail because the checks are simultaneous, not sequential:
   every candidate subject is run through all eight. No per-subject scores are
   drawn, because the marketing page has none that are real.
   ═══════════════════════════════════════════════════════════════════════ */

.student-diagram .egrid {
  display: grid; grid-template-columns: 1fr; gap: .4rem; margin-top: .3rem;
}
.student-diagram .egrid-cell {
  display: flex; align-items: flex-start; gap: .55rem; min-width: 0;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); box-shadow: var(--shadow-warm-sm);
  padding: .65rem .75rem;
}
.student-diagram .egrid-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; flex-shrink: 0; border-radius: 999px;
  background: #eff6ff; color: #1d4ed8; font-size: .68rem; font-weight: 800;
}
.student-diagram .egrid-name {
  color: var(--brand-navy); font-size: .84rem; font-weight: 700; line-height: 1.45;
}

@media (min-width: 640px) {
  .student-diagram .egrid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .student-diagram .egrid { grid-template-columns: repeat(4, 1fr); }
  .student-diagram .egrid-cell { flex-direction: column; gap: .4rem; }
}

/* ══ FAN — the /pursuit signature ═══════════════════════════════════════════
   Eight scoring axes converging on one recommendation set. Drawn as two
   columns joined by a single rule, not as eight separate strokes: the axes are
   deliberately unweighted here. The real weights exist in
   src/lib/pursuit/scoring-ranking.ts but the product has never published them,
   so sizing these edges would state something the page does not.
   ═══════════════════════════════════════════════════════════════════════ */

.student-diagram .fan { display: grid; gap: .5rem; align-items: center; margin-top: .3rem; }

.student-diagram .fan-in { display: grid; grid-template-columns: 1fr; gap: .3rem; min-width: 0; }
.student-diagram .fan-sig {
  border: 1px solid var(--border); border-radius: 999px;
  background: #f9fafb; color: var(--text-secondary);
  font-size: .76rem; font-weight: 700; line-height: 1.35;
  padding: .32rem .7rem;
}

/* The join. A hairline plus one arrowhead is the whole of the convergence; a
   bundle of eight strokes would need SVG and would say nothing more. */
.student-diagram .fan-join {
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  color: var(--brand-blue); font-size: .82rem;
}
.student-diagram .fan-join .rule { display: block; height: 1px; width: 1.4rem; background: #bfdbfe; }

.student-diagram .fan-out {
  border: 1px solid #bfdbfe; border-radius: 14px; background: #eff6ff;
  padding: .9rem 1rem; text-align: center; min-width: 0;
}
.student-diagram .fan-out-n { display: block; color: #1e3a8a; font-size: 1.15rem; font-weight: 800; }
.student-diagram .fan-out-what {
  display: block; color: #1d4ed8; font-size: .8rem; font-weight: 600;
  line-height: 1.45; margin-top: .2rem;
}

@media (min-width: 640px) {
  .student-diagram .fan-in { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .student-diagram .fan { grid-template-columns: 1fr 3.4rem 1fr; }
  /* Same idiom as .contrast-arrow and .gg-arrow: the stacked down-arrow turns
     into the horizontal reading once the two sides sit side by side. */
  .student-diagram .fan-join i { transform: rotate(-90deg); }
}

/* ══ NEST — the /aid signature ══════════════════════════════════════════════
   Form obligation as containment: every college wants the FAFSA, many privates
   add the CSS Profile, some of those add a noncustodial form, some of those
   add IDOC. Nesting is the claim, so the markup nests too. Forms and dates
   only — src/app/aid/AGENTS.md forbids any graphic here that implies an aid
   number, and nothing in this family draws money.
   ═══════════════════════════════════════════════════════════════════════ */

.student-diagram .nest { margin-top: .3rem; }

.student-diagram .nest-layer {
  border: 1px solid #bfdbfe; border-radius: 14px; background: #eff6ff;
  padding: .8rem .85rem;
}
.student-diagram .nest-layer .nest-layer { margin-top: .6rem; background: var(--surface); }

.student-diagram .nest-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .6rem;
}
.student-diagram .nest-form {
  color: #1e3a8a; font-size: .9rem; font-weight: 800; line-height: 1.4;
}
.student-diagram .nest-who {
  color: #1d4ed8; font-size: .76rem; font-weight: 600; line-height: 1.45;
}
.student-diagram .nest-note {
  display: flex; align-items: flex-start; gap: .45rem; margin-top: .8rem;
  color: #b45309; font-size: .82rem; line-height: 1.55;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px;
  padding: .6rem .75rem;
}
.student-diagram .nest-note i { color: #b45309; margin-top: .22rem; flex-shrink: 0; }

/* ══ HUB — the /roster signature ════════════════════════════════════════════
   One canonical profile in the middle, the tools that write into it on the
   left, the three views that read it on the right. Drawn in CSS rather than
   SVG: the flow is three-to-one-to-three with no crossing edges, which is a
   shape CSS handles, and the teacher set's inline-SVG allowance was for
   many-to-many mappings CSS genuinely cannot draw.
   ═══════════════════════════════════════════════════════════════════════ */

.student-diagram .hub { display: grid; gap: .5rem; align-items: center; margin-top: .3rem; }

.student-diagram .hub-col { display: grid; grid-template-columns: 1fr; gap: .35rem; min-width: 0; }
.student-diagram .hub-col-label {
  display: block; color: var(--text-tertiary); font-size: .66rem; font-weight: 800;
  letter-spacing: .07em; margin-bottom: .1rem;
}
.student-diagram .hub-item {
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  box-shadow: var(--shadow-warm-sm); padding: .6rem .75rem; min-width: 0;
}
.student-diagram .hub-item .name {
  display: block; color: var(--brand-navy); font-size: .84rem; font-weight: 700; line-height: 1.4;
}
.student-diagram .hub-item .what {
  display: block; color: var(--text-tertiary); font-size: .74rem; font-weight: 600;
  line-height: 1.45; margin-top: .15rem;
}

.student-diagram .hub-core {
  border: 1px solid #bfdbfe; border-radius: 14px; background: #eff6ff;
  padding: .9rem 1rem; text-align: center; min-width: 0;
}
.student-diagram .hub-core-name {
  display: block; color: #1e3a8a; font-size: .95rem; font-weight: 800; line-height: 1.4;
}
.student-diagram .hub-core-note {
  display: block; color: #1d4ed8; font-size: .78rem; font-weight: 600;
  line-height: 1.45; margin-top: .25rem;
}

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

@media (min-width: 768px) {
  .student-diagram .hub { grid-template-columns: 1fr 2rem 1.15fr 2rem 1fr; }
  .student-diagram .hub-arrow i { transform: rotate(-90deg); }
}

/* Motion is opt-in, matching sample-embed.css. */
@media (prefers-reduced-motion: no-preference) {
  .student-diagram .gg-step,
  .student-diagram .egrid-cell,
  .student-diagram .hub-item { transition: border-color .15s ease, box-shadow .15s ease; }
}