/* ============================================================
   Marshall University — additions on top of rkc-theme + diagrams
   "Teaching the Machine to Teach"
   Principles: fewer words · bigger type · strong contrast · visual.
   Loaded AFTER the shared CSS so these rules win.
   ============================================================ */

/* ---- Readability bumps for reused components ------------------ */
/* The written-argument worked example is lighter than the clinical
   one, so the success-brief can breathe at a larger size.          */
.md-h  { font-size: .46em; }
.md-p  { font-size: .40em; }
.md-lead { font-size: .38em; }
.md-ul li { font-size: .36em; }
.json-spec { font-size: 14px; }
.way-list { font-size: .5em; }
.rule-list { font-size: .5em; }
.src-card p { font-size: .46em; }
.triad-card p { font-size: .44em; }

/* ---- Section-divider descriptions: a touch larger ------------- */
.s-section .desc { font-size: .84em; }

/* ============================================================
   HEADLINE WALL  (doom vs. positive)
   ============================================================ */
.headline-wall {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.1em; margin-top: .4em;
}
.headline-card {
  background: var(--card); border: 1px solid var(--line);
  border-left: 5px solid var(--muted); border-radius: 12px;
  padding: .9em 1.15em; box-shadow: 0 16px 34px -26px rgba(18,20,23,.5);
}
.headline-card .src {
  font-family: var(--r-heading-font); font-weight: 600; text-transform: uppercase;
  letter-spacing: .14em; font-size: .34em; color: var(--muted);
}
.headline-card .hl {
  font-family: var(--r-heading-font); font-weight: 600; font-size: .6em;
  line-height: 1.25; color: var(--ink); margin-top: .3em;
}
/* linked headline cards: strip the default reveal link chrome */
a.headline-card { display: block; text-decoration: none; border-bottom: none; cursor: pointer; }
a.headline-card:hover { border-color: var(--teal); }
/* Doom: desaturated, slightly askew — like clippings on a wall */
.headline-wall.doom .headline-card { filter: grayscale(.35); }
.headline-wall.doom .headline-card:nth-child(1) { transform: rotate(-1.3deg); }
.headline-wall.doom .headline-card:nth-child(2) { transform: rotate(1.1deg); }
.headline-wall.doom .headline-card:nth-child(3) { transform: rotate(.8deg); }
.headline-wall.doom .headline-card:nth-child(4) { transform: rotate(-.9deg); }
/* Positive: teal-forward */
.headline-wall.good .headline-card {
  border-left-color: var(--teal); background: var(--teal-soft);
}
.headline-wall.good .headline-card .hl { color: var(--ink); }
.headline-wall.good .headline-card .src { color: var(--teal); }
/* imagined future headline: full-width, dark "spotlight" treatment, centered */
.headline-wall.good .headline-card.future {
  grid-column: 1 / -1; text-align: center;
  background: var(--dark);
  border: 2px dashed var(--teal); border-left: 2px dashed var(--teal);
  box-shadow: 0 22px 55px -26px rgba(17,124,112,.7);
}
.headline-wall.good .headline-card.future .src { color: #6fd6c4; font-style: italic; letter-spacing: .12em; }
.headline-wall.good .headline-card.future .hl { color: #ffffff; font-size: .72em; margin-top: .25em; }

/* ============================================================
   ESSENTIAL HUMAN FUNCTIONS  (six on one slide)
   ============================================================ */
.func-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75em; }
.func-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: .8em .75em; text-align: center;
}
.func-card .ic { font-size: 1.2em; color: var(--teal); line-height: 1; }
.func-card h3 {
  font-family: var(--r-heading-font); font-weight: 600; font-size: .5em;
  margin: .3em 0 .2em; color: var(--ink); letter-spacing: .01em;
}
.func-card p { font-size: .37em; color: var(--muted); line-height: 1.35; margin: 0; }

/* ============================================================
   ECOSYSTEM HANDOFF  (let the system do X, so humans can do Y)
   ============================================================ */
.ecosplit { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.1em; align-items: stretch; margin-top: .5em; }
.eco-col { border-radius: 18px; padding: 1.15em 1.3em; border: 1px solid var(--line); background: var(--card); }
.eco-col.human { background: var(--teal-soft); border-color: var(--teal); }
.eco-col .eh {
  font-family: var(--r-heading-font); font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; font-size: .44em; color: var(--muted); margin-bottom: .55em;
}
.eco-col.human .eh { color: var(--teal); }
.eco-col ul { font-size: .5em; line-height: 1.5; margin: 0 0 0 1.05em; padding: 0; }
.eco-col li { margin: .4em 0; color: var(--body); }
.eco-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4em; }
.eco-mid .arrow { color: var(--teal); font-size: 1.5em; line-height: 1; }
.eco-mid .lbl {
  font-family: var(--r-heading-font); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; font-size: .34em; color: var(--teal); text-align: center; max-width: 6em;
}

/* ============================================================
   FEEDBACK-LOOP DIVIDER  (living-system hero)
   ============================================================ */
.s-loop { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 2.5em; }
.s-loop-copy { flex: 1 1 auto; max-width: 60%; }
.s-loop-viz { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.loop-hero { width: 340px; height: 340px; display: block; }
.loop-track { fill: none; stroke: rgba(17,124,112,.22); stroke-width: 1.5; stroke-dasharray: 2 9; }
.loop-arc {
  fill: none; stroke: var(--teal); stroke-width: 10; stroke-linecap: round;
  filter: url(#loop-glow);
}
.loop-spin { transform-box: view-box; transform-origin: 120px 120px; animation: loopspin 7s linear infinite; }
@keyframes loopspin { to { transform: rotate(360deg); } }
.loop-core { fill: var(--teal); animation: loopcore 2.6s ease-in-out infinite; transform-box: view-box; transform-origin: 120px 120px; }
@keyframes loopcore { 0%,100% { opacity: .35; transform: scale(.8); } 50% { opacity: .9; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .loop-spin, .loop-core { animation: none; } }

/* ============================================================
   STEP FLOW  (horizontal icon steps — "two ways in")
   ============================================================ */
.stepflow {
  display: flex; align-items: flex-start; justify-content: center;
  gap: .35em; width: 100%; margin: .2em 0 0;
}
.step { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1 1 0; max-width: 8em; }
.step-ic {
  width: 1.7em; height: 1.7em; border-radius: 50%; font-size: 1.15em;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  background: var(--teal-soft); border: 2px solid var(--teal); color: var(--teal);
  margin-bottom: .55em;
}
.stepflow.ai .step-ic { background: var(--teal); border-color: var(--teal); color: #fff; }
.step-t { font-family: var(--r-heading-font); font-weight: 600; font-size: .5em; color: var(--ink); margin-bottom: .28em; letter-spacing: .01em; }
.step-d { font-size: .38em; color: var(--muted); line-height: 1.35; margin: 0; }
.step-arrow { align-self: flex-start; margin-top: .95em; color: var(--teal); font-size: 1.1em; line-height: 1; flex: 0 0 auto; opacity: .55; }
.step-loop {
  text-align: center; font-family: var(--r-heading-font); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; font-size: .42em; color: var(--teal); margin: 1.15em 0 0;
}
.stepflow-foot { text-align: center; font-size: .5em; color: var(--muted); margin: .8em 0 0; }
.stepflow-foot strong { color: var(--teal); }

/* ============================================================
   WIN CONDITIONS ON EVERY NODE  (proficiency map)
   ============================================================ */
.wc-svg { width: 94%; max-width: 1020px; height: auto; display: block; margin: .2em auto 0; }
.wc-edge { stroke: #cfd4d8; stroke-width: 2.5; fill: none; }
.wc-edge.blocked { stroke-dasharray: 5 6; opacity: .5; }
.wc-elabel { font-family: var(--r-heading-font); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; fill: var(--muted); }
.wc-shape { stroke-width: 2.5; }
.wc-node text { font-family: var(--r-main-font); font-weight: 600; font-size: 15px; text-anchor: middle; }
.wc-node.met .wc-shape { fill: var(--teal); stroke: var(--teal); }
.wc-node.met text { fill: #fff; }
.wc-node.dev .wc-shape { fill: var(--teal-soft); stroke: var(--teal); }
.wc-node.dev text { fill: var(--ink); }
.wc-node.stuck .wc-shape { fill: #fbeede; stroke: #d98a2b; stroke-width: 3.5; }
.wc-node.stuck text { fill: #8a5512; }
.wc-node.todo .wc-shape { fill: #fff; stroke: #cbd0d5; stroke-width: 2; stroke-dasharray: 5 5; }
.wc-node.todo text { fill: #9aa0a6; }
.wc-badge circle { stroke: #fff; stroke-width: 2; }
.wc-badge text { font-family: var(--r-heading-font); font-weight: 700; font-size: 15px; text-anchor: middle; fill: #fff; }
.wc-node.met .wc-badge circle, .wc-node.dev .wc-badge circle { fill: var(--teal); }
.wc-node.stuck .wc-badge circle { fill: #d98a2b; }
.wc-callout { fill: #fff; stroke: #ece7de; stroke-width: 1.5; }
.wc-callout-bar { fill: #d98a2b; }
.wc-leader { stroke: #d98a2b; stroke-width: 2; stroke-dasharray: 3 3; fill: none; }
.wc-co-h { font-family: var(--r-heading-font); font-weight: 700; font-size: 15.5px; fill: var(--ink); }
.wc-co-p { font-family: var(--r-main-font); font-size: 14.5px; fill: var(--body); }
.wc-co-stuck { font-family: var(--r-main-font); font-weight: 700; font-size: 14.5px; fill: #b06d15; }
.wc-legend { display: flex; justify-content: center; gap: 1.4em; margin: .5em 0 0; font-size: .42em; color: var(--muted); flex-wrap: wrap; }
.wc-legend span { display: inline-flex; align-items: center; gap: .5em; }
.wc-dot { width: .8em; height: .8em; border-radius: 50%; display: inline-block; }
.wc-dot.met { background: var(--teal); }
.wc-dot.dev { background: var(--teal-soft); border: 1.5px solid var(--teal); }
.wc-dot.stuck { background: #d98a2b; }
.wc-dot.todo { background: #fff; border: 1.5px dashed #bfc4c9; }

/* ============================================================
   SYNTHETIC-LEARNER ROSTER
   ============================================================ */
.learner-roster { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9em; margin-top: .3em; align-items: stretch; }
.learner-roster .profile-card { display: flex; flex-direction: column; }
.learner-roster .dim-name { white-space: nowrap; }

/* ============================================================
   TICKING CLOCK  ("how much time have you got?")
   ============================================================ */
.clock-svg { width: 260px; height: 260px; display: block; margin: .5em auto 0; }
.clock-face { fill: #fff; stroke: var(--ink); stroke-width: 6; }
.clock-tick { stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.clock-hand { stroke: var(--ink); stroke-width: 6.5; stroke-linecap: round; }
.clock-sec { stroke: var(--teal); stroke-width: 3; stroke-linecap: round;
  animation: clocktick 4s linear infinite; transform-origin: 200px 200px; transform-box: view-box; }
@keyframes clocktick { to { transform: rotate(360deg); } }
.clock-center { fill: var(--teal); }
@media (prefers-reduced-motion: reduce) { .clock-sec { animation: none; } }

/* ============================================================
   PRECISION LEARNING  (crowd → one individual)
   ============================================================ */
.prec-svg { width: 90%; max-width: 900px; height: auto; display: block; margin: .8em auto 0; }
.prec-crowd { fill: #b9bfc5; }
.prec-ind { fill: var(--teal); }
.prec-halo { fill: var(--teal-soft); }
.prec-arrow { stroke: var(--teal); stroke-width: 5; fill: none; opacity: .8; }
.prec-t-neg { fill: var(--muted); font-family: var(--r-main-font); font-size: 34px; text-anchor: middle; }
.prec-t-you { fill: var(--teal); font-family: var(--r-heading-font); font-weight: 700; font-size: 66px; text-anchor: middle; }

/* ============================================================
   DIFFERENT KINDS OF DATA
   ============================================================ */
.data-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8em; margin-top: .5em; }
.data-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 1em .8em; text-align: center;
}
.data-card .ic { font-size: 1.25em; color: var(--teal); line-height: 1; }
.data-card .dn {
  font-family: var(--r-heading-font); font-weight: 600; font-size: .48em;
  color: var(--ink); margin-top: .35em;
}
.data-card .de { font-size: .38em; color: var(--muted); margin-top: .3em; line-height: 1.35; }
.data-card .data-ex {
  list-style: none; margin: .6em 0 0; padding: .55em 0 0; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .22em;
}
.data-card .data-ex li { font-size: .35em; color: var(--body); line-height: 1.3; }

/* ============================================================
   PRECISION LEARNING  ("not people like you — YOU")
   ============================================================ */
.precision { text-align: center; }
.precision .neg {
  font-family: var(--r-heading-font); font-weight: 300; font-size: 1.35em;
  color: var(--muted); line-height: 1.1;
}
.precision .you {
  font-family: var(--r-heading-font); font-weight: 700; font-size: 4.6em;
  color: var(--teal); line-height: .95; margin: .08em 0 .12em;
}
.precision .river { font-size: .6em; color: var(--muted); font-style: italic; max-width: 22em; margin: .6em auto 0; }

/* ============================================================
   STATEMENT SLIDES  (big centered idea)
   ============================================================ */
.statement { font-size: 1.7em; max-width: 17em; line-height: 1.2; }
.statement-sub { font-size: .7em; color: var(--muted); max-width: 24em; margin-top: .7em; line-height: 1.4; }

/* ============================================================
   AI + HUMAN as a SYSTEM (slide 5) — nodes in exchange, not an equation
   ============================================================ */
.emg-svg { width: 100%; max-width: 780px; height: auto; margin: .3em auto 0; display: block; overflow: visible; }
.emg-boundary { fill: rgba(17,124,112,.035); stroke: var(--muted); stroke-width: 2; stroke-dasharray: 7 7; }
.emg-boundary-lbl { font-family: var(--r-heading-font); font-weight: 600; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase; fill: var(--muted); }
.emg-you { fill: var(--teal-soft); stroke: var(--teal); stroke-width: 2.5; }
.emg-ai  { fill: var(--card); stroke: var(--ink); stroke-width: 2.5; }
.emg-name { font-family: var(--r-heading-font); font-weight: 700; font-size: 26px; fill: var(--ink); text-anchor: middle; }
.emg-sub { font-family: var(--r-main-font); font-size: 13px; fill: var(--muted); text-anchor: middle; }
/* the emergent spark: a vivid teal lens neither disc contains */
.emg-lens { fill: var(--teal); filter: drop-shadow(0 0 16px rgba(17,124,112,.85)); }
.emg-spark { font-size: 34px; font-weight: 700; fill: #fff; text-anchor: middle; }
.emg-tag { font-family: var(--r-heading-font); font-weight: 600; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; fill: var(--teal); text-anchor: middle; }
.emg-cap { font-size: .58em; color: var(--body); max-width: 26em; margin: .3em auto 0; text-align: center; }
.emg-cap strong { color: var(--teal); }

/* slide 6: the SAME emergence figure, scaled to an ecosystem (many nodes inside each disc) */
.eco-node-h { fill: var(--teal); }
.eco-node-a { fill: var(--ink); }
.eco-link  { stroke: var(--muted); stroke-width: 1.5; opacity: .4; fill: none; }
.eco-cross { stroke: var(--teal); stroke-width: 2; opacity: .5; fill: none; stroke-dasharray: 4 4; }

/* map-ish caption chips for the "board = terrain" slide */
.terrain-chips { display: flex; flex-wrap: wrap; gap: .5em; justify-content: center; margin-top: 1.2em; max-width: 30em; }
.terrain-chips .chip { font-size: .46em; }

/* ============================================================
   THE REFRAME (slide 8): Me -> machine learner -> human learner
   ============================================================ */
.rf-svg { width: 100%; max-width: 940px; height: auto; margin: .5em auto 0; display: block; overflow: visible; }
.rf-human { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.rf-cap { fill: var(--ink); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.rf-arrow { fill: none; stroke: var(--muted); stroke-width: 2.5; }
.rf-arrow-lbl { font-family: var(--r-heading-font); font-weight: 600; font-size: 16px;
  letter-spacing: .1em; text-transform: uppercase; fill: var(--teal); text-anchor: middle; }
.rf-name { font-family: var(--r-heading-font); font-weight: 700; font-size: 20px; fill: var(--ink); text-anchor: middle; }
.rf-sub  { font-family: var(--r-main-font); font-size: 14px; fill: var(--muted); text-anchor: middle; }

/* ============================================================
   THE BOARD as a Candy-Land trail (slide 13)
   ============================================================ */
.cl-svg { width: 100%; max-width: 940px; height: auto; margin: .2em auto 0; display: block; overflow: visible; }
.cl-ribbon { fill: none; stroke: var(--teal-soft); stroke-width: 42; stroke-linecap: round; stroke-linejoin: round; }
.cl-tile { stroke: var(--teal); stroke-width: 1.5; }
.cl-tile.a { fill: #ffffff; }
.cl-tile.b { fill: var(--teal-soft); }
.cl-tile.start { fill: #ffffff; stroke: var(--ink); stroke-width: 2.5; }
.cl-tile.goal { fill: var(--teal); stroke: var(--teal); }
.cl-tile.trap { fill: var(--card); stroke: var(--muted); stroke-dasharray: 4 3; }
.cl-post { stroke: var(--muted); stroke-width: 2; }
.cl-sign { fill: #ffffff; stroke: var(--teal); stroke-width: 2; }
.cl-sign.warn { stroke: var(--muted); }
.cl-sign-t { font-family: var(--r-heading-font); font-weight: 600; font-size: 16px; fill: var(--ink); text-anchor: middle; }
.cl-mark { font-family: var(--r-heading-font); font-weight: 700; font-size: 17px; fill: var(--ink); text-anchor: middle; }
.cl-mark.on-goal { fill: #ffffff; }
.cl-spark { font-size: 20px; fill: #ffffff; text-anchor: middle; }
.cl-trap-ic { font-size: 20px; fill: var(--muted); text-anchor: middle; }
.cl-conn { font-family: var(--r-heading-font); font-weight: 600; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; fill: var(--ink); text-anchor: middle; }
.cl-zone { fill: var(--teal); }
.cl-region { font-family: var(--r-heading-font); font-weight: 700; font-size: 15px;
  letter-spacing: .16em; text-transform: uppercase; fill: var(--teal); opacity: .5; text-anchor: start; }
.cl-trophy { fill: #ffffff; }
.cl-trophy-line { fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; }

/* ============================================================
   Knowledge graph (slide 15): concept circles + skill cards
   ============================================================ */
.kg-skill rect { fill: #ffffff; stroke: var(--ink); stroke-width: 2.5;
  filter: drop-shadow(0 8px 14px rgba(18,20,23,.12)); cursor: pointer; transition: fill .2s ease; }
.kg-skill:hover rect { fill: var(--card); }
.kg-skill text { font-family: var(--r-main-font); font-weight: 600; font-size: 13px;
  fill: var(--ink); text-anchor: middle; pointer-events: none; }
.kg-lg-concept { fill: var(--teal-soft); stroke: var(--teal); stroke-width: 2; }
.kg-lg-skill { fill: #ffffff; stroke: var(--ink); stroke-width: 2; }
.kg-lg-t { font-family: var(--r-main-font); font-size: 13px; fill: var(--muted); text-anchor: start; }

/* ============================================================
   Mental model -> knowledge graph (slide 16)
   ============================================================ */
.mm-svg { width: 100%; max-width: 1000px; height: auto; margin: .6em auto 0; display: block; overflow: visible; }
.mm-head { fill: rgba(17,124,112,.05); stroke: var(--muted); stroke-width: 3; stroke-linejoin: round; }
.mm-tacit-node { fill: var(--muted); opacity: .45; }
.mm-tacit-edge { stroke: var(--muted); stroke-width: 2; opacity: .32; fill: none; }
.mm-arrow { fill: none; stroke: var(--muted); stroke-width: 2.5; }
.mm-arrow-lbl { font-family: var(--r-heading-font); font-weight: 600; font-size: 15px;
  letter-spacing: .12em; text-transform: uppercase; fill: var(--teal); text-anchor: middle; }
.mm-node { fill: var(--teal-soft); stroke: var(--teal); stroke-width: 2.5; }
.mm-edge { stroke: var(--teal); stroke-width: 2.5; fill: none; }
.mm-cap { font-family: var(--r-heading-font); font-weight: 600; font-size: 17px; fill: var(--ink); text-anchor: middle; }