/* The /learn pages: the restored Berkeley course, the theory guides and the labs.
 *
 * Plain CSS on purpose. The site's Tailwind sheet (app/assets/tailwind/application.css) is
 * shared with every other surface and with the other sessions working in this repository; the
 * learn components are new and self-contained, so they get their own file and touch nothing.
 * Everything below is written against the design system's own custom properties
 * (client/design/starcraft.css), so these components change colour when the theme does.
 *
 * Loaded by the three learn layouts, never globally. */

.learn-page { background: var(--sc-void); }

/* --- the trail, the rail and the ends of a page ---------------------------------------- */

.learn-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font: 500 11px/1.6 var(--sc-font-display); letter-spacing: .14em; text-transform: uppercase;
  color: var(--sc-muted);
}
.learn-breadcrumb a { color: var(--sc-ice); text-decoration: none; }
.learn-breadcrumb a:hover { color: var(--sc-gold); }
.learn-breadcrumb-sep { color: var(--sc-edge-bright); }

.learn-prev-next {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-space-3);
  margin-top: var(--sc-space-6); padding-top: var(--sc-space-4);
  border-top: 1px solid var(--sc-edge);
}
.learn-prev-next-link {
  display: grid; gap: 4px; padding: 14px 16px;
  border: 1px solid var(--sc-edge); background: var(--sc-panel);
  color: var(--sc-ink); text-decoration: none;
}
.learn-prev-next-link:hover { border-color: var(--sc-edge-bright); }
.learn-prev-next-link[data-side="next"] { text-align: right; }
@media (max-width: 640px) { .learn-prev-next { grid-template-columns: 1fr; } }

.learn-toc {
  padding: 16px 18px; border: 1px solid var(--sc-edge); background: var(--sc-panel);
}
.learn-toc ol { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.learn-toc a { color: var(--sc-ink); }

/* --- evidence, verdicts, errata -------------------------------------------------------- */

.learn-evidence { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.learn-badge {
  display: inline-flex; align-items: center; padding: 3px 9px;
  border: 1px solid var(--sc-edge-bright); background: var(--sc-metal);
  font: 500 10px/1.6 var(--sc-font-display); letter-spacing: .14em; text-transform: uppercase;
  color: var(--sc-ink);
}
.learn-badge[data-kind="video"] { color: var(--sc-gold); border-color: var(--sc-gold-edge); }
.learn-badge[data-kind="reconstruction"],
.learn-badge[data-kind="analysis"] { color: var(--sc-muted); }

.learn-verdict, .learn-erratum, .learn-try, .learn-next-game {
  display: grid; gap: 8px; padding: 18px 20px;
  border: 1px solid var(--sc-edge); background: var(--sc-panel);
}
.learn-verdict { border-left: 3px solid var(--sc-ice); }
.learn-verdict[data-status="holds"] { border-left-color: var(--sc-gold); }
.learn-verdict[data-status="wrong"] { border-left-color: var(--sc-danger); }
.learn-verdict-title, .learn-erratum-title, .learn-try-title { margin: 0; font-weight: 600; color: var(--sc-ink); }
.learn-verdict-body > :last-child, .learn-erratum-body > :last-child,
.learn-try-body > :last-child, .learn-next-game-body > :last-child { margin-bottom: 0; }
.learn-erratum { border-left: 3px solid var(--sc-danger); }
.learn-erratum-meta { margin: 0; display: flex; gap: 12px; font-size: 13px; color: var(--sc-muted); }
.learn-try { border-left: 3px solid var(--sc-gold); }
.learn-next-game {
  border: 1px solid var(--sc-gold-edge);
  background: color-mix(in srgb, var(--sc-gold) 8%, var(--sc-void));
  font-size: 17px; line-height: 1.4;
}

/* --- quotations ------------------------------------------------------------------------ */

.learn-quote {
  margin: 0; padding: 14px 18px; border-left: 2px solid var(--sc-gold);
  background: color-mix(in srgb, var(--sc-gold) 6%, transparent);
}
.learn-quote p { margin: 0; color: var(--sc-ink); font-size: 18px; line-height: 1.35; }
.learn-quote footer {
  margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 12px; color: var(--sc-muted);
}
.learn-quote-speaker { color: var(--sc-ink); }

/* --- boards and equations -------------------------------------------------------------- */

.learn-board {
  margin: 0; display: grid; gap: 12px; padding: 22px 24px;
  border: 1px solid var(--sc-edge-bright); background: var(--sc-metal);
  box-shadow: var(--sc-bevel);
}
.learn-board-title {
  font: 500 11px/1.6 var(--sc-font-display); letter-spacing: .18em; text-transform: uppercase;
  color: var(--sc-gold);
}
.learn-board-source { margin: 0; font-size: 12px; color: var(--sc-muted); }
.learn-board[data-tone="corrected"] { border-color: var(--sc-gold-edge); }

.learn-equation {
  margin: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
  padding: 6px 0;
}
.learn-equation-body { min-width: 0; overflow-x: auto; overflow-y: hidden; color: var(--sc-ink); }
.learn-equation-number {
  font: 12px var(--sc-font-mono); color: var(--sc-muted); text-decoration: none; align-self: center;
}
.learn-equation-number:hover { color: var(--sc-gold); }
.learn-equation-note { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--sc-muted); }
.learn-math { color: var(--sc-ink); }
/* KaTeX sets its own colour from the cascade; keep it on the page's ink in both themes. */
.katex { color: inherit; }

/* --- the lecture player ---------------------------------------------------------------- */

.learn-player { margin: 0; display: grid; gap: 12px; }
.learn-player-stage {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  border: 1px solid var(--sc-edge); background: var(--sc-void); overflow: hidden;
}
.learn-player-facade {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  border: 0; background: radial-gradient(circle at 50% 45%, var(--sc-metal), var(--sc-void) 70%);
  color: var(--sc-ink); cursor: pointer; text-align: left; padding: 24px;
}
.learn-player-facade:hover { background: radial-gradient(circle at 50% 45%, var(--sc-panel), var(--sc-void) 70%); }
.learn-player-play {
  flex: none; width: 0; height: 0;
  border-left: 26px solid var(--sc-gold); border-top: 16px solid transparent; border-bottom: 16px solid transparent;
}
.learn-player-facade-copy { display: grid; gap: 4px; }
.learn-player-title { font: 600 18px/1.25 var(--sc-font-display); color: var(--sc-ink); }
.learn-player-note { font-size: 12px; color: var(--sc-muted); }
.learn-player-frame, .learn-player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.learn-player-orders { display: flex; flex-wrap: wrap; gap: 8px; }
.learn-player-order-note, .learn-player-caption { margin: 0; font-size: 12px; color: var(--sc-muted); }

.learn-chapters {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 2px; max-height: 320px; overflow-y: auto;
  border: 1px solid var(--sc-edge); background: var(--sc-void);
}
.learn-chapter {
  display: grid; grid-template-columns: 62px 1fr; gap: 10px; width: 100%;
  padding: 8px 12px; border: 0; background: transparent; color: var(--sc-ink);
  text-align: left; cursor: pointer; font-size: 14px;
}
.learn-chapter:hover { background: var(--sc-panel); }
.learn-chapter.is-current { background: var(--sc-panel); color: var(--sc-gold); }
.learn-chapter-at { font: 12px var(--sc-font-mono); color: var(--sc-muted); padding-top: 2px; }
.learn-chapter.is-current .learn-chapter-at { color: var(--sc-gold); }

/* A timestamp chip sits inside a sentence, so it must not change the line's height. */
.learn-ts {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 0;
  padding: 0 6px; border: 1px solid var(--sc-edge-bright); background: var(--sc-metal);
  font: 12px var(--sc-font-mono); color: var(--sc-ice); cursor: pointer; text-decoration: none;
  line-height: 1.5; vertical-align: baseline;
  /* The design system gives every button a 44px touch target. A timestamp lives inside a
     sentence, so it takes the height of the line it sits in instead. */
  min-height: 0;
}
.learn-ts:hover { color: var(--sc-gold); border-color: var(--sc-gold-edge); }

/* --- chips ----------------------------------------------------------------------------- */

.learn-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 7px 1px 3px; border: 1px solid var(--sc-edge);
  background: var(--sc-metal); color: var(--sc-ink); font-size: 13px; text-decoration: none;
}
.learn-chip[data-kind="player"] { padding-left: 7px; }
.learn-chip:hover { border-color: var(--sc-edge-bright); color: var(--sc-gold); }

/* --- checkpoint ------------------------------------------------------------------------ */

.learn-checkpoint {
  display: grid; gap: 16px; padding: 22px 24px;
  border: 1px solid var(--sc-edge); background: var(--sc-panel);
}
.learn-checkpoint h2 { margin: 0; }
.learn-checkpoint-list { margin: 0; padding-left: 20px; display: grid; gap: 20px; }
.learn-question-prompt { margin: 0 0 10px; color: var(--sc-ink); }
.learn-question-answers { display: flex; flex-wrap: wrap; gap: 8px; }
.learn-answer { font-size: 14px; }
.learn-question[data-state="right"] .learn-answer.is-chosen { border-color: var(--sc-gold); color: var(--sc-gold); }
.learn-question[data-state="wrong"] .learn-answer.is-chosen { border-color: var(--sc-danger); color: var(--sc-danger); }
.learn-question[data-state] .learn-answer.is-correct { border-color: var(--sc-gold); }
.learn-question-because { margin: 10px 0 0; font-size: 14px; color: var(--sc-muted); }
.learn-checkpoint-score { margin: 0; font: 500 13px var(--sc-font-display); color: var(--sc-gold); }

/* --- disclosure ------------------------------------------------------------------------ */

.learn-disclosure { border: 1px solid var(--sc-edge); background: var(--sc-void); padding: 0 18px; }
.learn-disclosure > summary {
  font: 500 12px/1.6 var(--sc-font-display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--sc-ice); padding: 12px 0; cursor: pointer;
}
.learn-disclosure[open] > summary { border-bottom: 1px solid var(--sc-edge); margin-bottom: 14px; }
.learn-disclosure-body { display: grid; gap: 14px; padding-bottom: 18px; }
.learn-disclosure-body > :last-child { margin-bottom: 0; }
.learn-depth-toggle { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- sources --------------------------------------------------------------------------- */

.learn-sources { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--sc-edge); }
.learn-sources h2 { margin: 0; font-size: 16px; }
.learn-sources ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }
.learn-source-archive, .learn-source-note { color: var(--sc-muted); font-size: 12px; margin-left: 6px; }

/* --- embeds ---------------------------------------------------------------------------- */

.learn-embed { margin: 0; display: grid; gap: 8px; }
.learn-embed-stage {
  position: relative; aspect-ratio: 16 / 10; width: 100%;
  border: 1px solid var(--sc-edge); background: var(--sc-void); overflow: hidden;
}
.learn-embed-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.learn-embed-facade {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: grid; place-content: center; gap: 6px; padding: 24px;
  border: 0; background: radial-gradient(circle at 50% 45%, var(--sc-metal), var(--sc-void) 70%);
  color: var(--sc-ink); cursor: pointer;
}
.learn-embed-caption { margin: 0; font-size: 12px; color: var(--sc-muted); }

/* --- the section index pages ------------------------------------------------------------ */

.learn-cards {
  display: grid; gap: var(--sc-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin: 0; padding: 0; list-style: none;
}
.learn-card {
  display: grid; gap: 8px; align-content: start; padding: 20px;
  border: 1px solid var(--sc-edge); background: var(--sc-panel);
  color: var(--sc-ink); text-decoration: none;
}
.learn-card:hover { border-color: var(--sc-edge-bright); }
/* A card is often a link inside the grid item. The item stretches to the row, so let the link
   fill it: every card in a row is as tall as the tallest one. */
.learn-cards > li { display: grid; }
.learn-card h2, .learn-card h3 { margin: 0; }
.learn-card p { margin: 0; color: var(--sc-muted); font-size: 14px; }

.learn-week-rail { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.learn-week-row {
  display: grid; grid-template-columns: 70px 1fr auto; gap: 14px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--sc-edge); background: var(--sc-panel);
  color: var(--sc-ink); text-decoration: none;
}
.learn-week-row:hover { border-color: var(--sc-edge-bright); }
.learn-week-row[data-grade="F"] { opacity: .65; }
.learn-week-number { font: 500 12px var(--sc-font-display); letter-spacing: .14em; color: var(--sc-gold); }
.learn-week-topic { min-width: 0; }
.learn-week-topic b { display: block; font-weight: 600; }
.learn-week-topic span { color: var(--sc-muted); font-size: 13px; }
@media (max-width: 640px) {
  .learn-week-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .learn-player-facade, .learn-chapter, .learn-card, .learn-prev-next-link { transition: none; }
}

/* --- layout furniture ------------------------------------------------------------------- */

/* The facts strip on a week page: the real date, the syllabus topic, the evidence grade, and
   the title the upload gives itself, which for two of the five is simply wrong. */
.learn-facts {
  margin: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  padding: 16px 18px; border: 1px solid var(--sc-edge); background: var(--sc-panel);
}
.learn-facts > div { display: grid; gap: 2px; min-width: 0; }
.learn-facts dt {
  font: 500 10px/1.6 var(--sc-font-display); letter-spacing: .16em; text-transform: uppercase;
  color: var(--sc-muted);
}
.learn-facts dd { margin: 0; color: var(--sc-ink); font-size: 14px; }

.learn-credit { margin: 0; font-size: 12px; color: var(--sc-muted); }
.learn-credit a { color: var(--sc-ice); }

.learn-related { display: grid; gap: 8px; }
.learn-related h2 { margin: 0; font-size: 16px; }
.learn-related ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }

/* The lab body is the wide container, not the prose column: a table of numbers and a running
   simulation both want the room. */
.learn-lab { display: grid; gap: var(--sc-space-4); padding-block: var(--sc-space-8); }
.learn-lab-body { display: grid; gap: var(--sc-space-4); min-width: 0; }
.learn-lab-body > * { margin: 0; }
.learn-lab-body h2 { margin-top: var(--sc-space-4); font-family: var(--sc-font-display); }

/* A component reaches the page wrapped in a div (see LearnHelper#learn_block: Markdown will not
   pass <details> or <aside> through otherwise). `display: contents` keeps the wrapper out of the
   layout, so the component itself is the grid item its column expects. */
.learn-block { display: contents; }

/* --- the measure ------------------------------------------------------------------------ */

/* There is none here on purpose. A learn page is one `.content-column` like every other content
   page; the width, the gutters and the table scrolling are set once in application.css. */

/* --- the unit roster -------------------------------------------------------------------- */

/* Forty odd rows printed from units.yml. It is a reference table, not a reading table: the
   numbers line up in a mono face so a column can be scanned, and the race stripe on the left
   is what lets you find the zerg block without reading a word. */
.learn-roster { margin: 0; display: grid; gap: 10px; }
.learn-roster table { width: 100%; border-collapse: collapse; font-size: 14px; }
.learn-roster :is(th, td) {
  padding: 7px 10px; text-align: left; vertical-align: top; white-space: nowrap;
  border-bottom: 1px solid color-mix(in srgb, var(--sc-edge) 50%, transparent);
}
.learn-roster thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--sc-void); color: var(--sc-muted);
  font: 500 10px/1.6 var(--sc-font-display); letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid var(--sc-edge);
}
.learn-roster tbody th {
  font: 600 14px/1.4 var(--sc-font-body); letter-spacing: normal; text-transform: none;
  color: var(--sc-ink); background: transparent; border-left: 3px solid transparent;
}
.learn-roster tbody tr[data-race="terran"] th { border-left-color: var(--sc-terran-glow); }
.learn-roster tbody tr[data-race="protoss"] th { border-left-color: var(--sc-protoss-glow); }
.learn-roster tbody tr[data-race="zerg"] th { border-left-color: var(--sc-zerg-glow); }
.learn-roster tbody tr:hover :is(th, td) { background: var(--sc-panel); }
.learn-roster-number { font: 13px var(--sc-font-mono); color: var(--sc-ink); }
.learn-roster-type {
  display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sc-muted);
}
.learn-roster-none { color: var(--sc-muted); font-size: 13px; }
.learn-roster figcaption { margin: 0; font-size: 12px; line-height: 1.6; color: var(--sc-muted); }

/* --- the front page --------------------------------------------------------------------- */

/* /learn has to do one job in a screen and a half: say what is here, say how much of it there
   is, and give a reader one guide and one tool to press. The counts are read from the data at
   render time, so the page cannot claim fifteen guides on a day when there are fourteen. */
.learn-count-strip {
  margin: 0; display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  border: 1px solid var(--sc-edge); background: var(--sc-edge);
}
.learn-count-strip > div { display: grid; gap: 4px; padding: 16px 18px; background: var(--sc-panel); }
.learn-count-strip dt {
  font: 500 10px/1.6 var(--sc-font-display); letter-spacing: .16em; text-transform: uppercase;
  color: var(--sc-muted);
}
.learn-count-strip dd {
  margin: 0; font: 600 28px/1 var(--sc-font-display); color: var(--sc-gold);
  font-variant-numeric: tabular-nums;
}
.learn-count-strip dd span {
  display: block; margin-top: 5px;
  font: 400 12px/1.4 var(--sc-font-body); letter-spacing: normal; color: var(--sc-muted);
}

/* The two featured pages. Artwork, because this is the one page on the section that has to look
   like something before it is read. */
.learn-features {
  display: grid; gap: var(--sc-space-4); margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.learn-feature > a {
  display: grid; height: 100%; align-content: start;
  border: 1px solid var(--sc-edge); background: var(--sc-panel);
  color: var(--sc-ink); text-decoration: none;
}
.learn-feature > a:hover { border-color: var(--sc-gold-edge); }
.learn-feature-art {
  width: 100%; aspect-ratio: 16 / 7; object-fit: cover;
  border-bottom: 1px solid var(--sc-edge);
}
.learn-feature-copy { display: grid; gap: 10px; padding: 20px 22px 22px; }
.learn-feature-copy > * { margin: 0; }
.learn-feature-copy h3 { font: 600 22px/1.2 var(--sc-font-display); color: var(--sc-ink); }
.learn-feature-copy p:not(.sc-kicker) { color: var(--sc-muted); font-size: 15px; line-height: 1.6; }
.learn-feature-go {
  justify-self: start; margin-top: 4px;
  font: 500 11px/1.6 var(--sc-font-display); letter-spacing: .14em; text-transform: uppercase;
  color: var(--sc-gold);
}
.learn-feature > a:hover .learn-feature-go { text-decoration: underline; text-underline-offset: 4px; }
/* Four doors, so four columns where there is room rather than three and a widow. */
@media (min-width: 900px) { .learn-cards.learn-cards-quad { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* The credits block at the foot of a course page: one paragraph and a compact link list. */
.learn-credits p { margin: 0; font-size: 13px; color: var(--sc-muted); }
.learn-credits a { color: var(--sc-ice); }
.learn-credits ul { font-size: 13px; }