/* The core pages of the restored course: the hub, the story, week 1, and the four supporting
 * pages (people, sources, errata, homework).
 *
 * Its own file on purpose. learn.css carries the shared components every learn page uses; this
 * sheet carries the handful of shapes only these pages need, so the two never collide and a
 * change here cannot reach a theory guide or a lab. Loaded per page through content_for :head.
 *
 * Written against the design system's custom properties (client/design/starcraft.css), so it
 * follows the theme like everything else. */

/* --- the two buttons at the top of the hub ---------------------------------------------- */

.core-start { display: flex; flex-wrap: wrap; gap: var(--sc-space-3); margin: 0; }

/* --- thirteen of fourteen ---------------------------------------------------------------- */

/* Fourteen squares, one per week, coloured by the strongest evidence that survives from it.
   It is the honesty statement and the navigation at the same time, so every cell is a link. */
.core-survival {
  display: grid; gap: 6px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(14, 1fr);
}
.core-survival-cell a {
  display: grid; gap: 2px; place-items: center; padding: 10px 2px;
  border: 1px solid var(--sc-edge); background: var(--sc-panel);
  color: var(--sc-ink); text-decoration: none;
}
.core-survival-cell a:hover { border-color: var(--sc-edge-bright); }
.core-survival-cell span {
  font: 500 8px/1 var(--sc-font-display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--sc-muted);
}
.core-survival-cell b { font: 600 16px/1 var(--sc-font-display); }

.core-survival-cell[data-kind="both"] a { background: color-mix(in srgb, var(--sc-gold) 24%, var(--sc-panel)); border-color: var(--sc-gold-edge); }
.core-survival-cell[data-kind="both"] b { color: var(--sc-gold); }
.core-survival-cell[data-kind="video"] a { background: color-mix(in srgb, var(--sc-gold) 12%, var(--sc-panel)); border-color: var(--sc-gold-edge); }
.core-survival-cell[data-kind="video"] b { color: color-mix(in srgb, var(--sc-gold) 70%, var(--sc-ink)); }
.core-survival-cell[data-kind="witness"] a { background: var(--sc-metal); }
.core-survival-cell[data-kind="none"] a { background: transparent; border-style: dashed; opacity: .6; }

.core-legend { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.core-legend li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: start; color: var(--sc-muted); }
.core-legend li::before {
  content: ""; width: 14px; height: 14px; margin-top: 4px;
  border: 1px solid var(--sc-edge); background: var(--sc-panel);
}
.core-legend li[data-kind="both"]::before { background: color-mix(in srgb, var(--sc-gold) 24%, var(--sc-panel)); border-color: var(--sc-gold-edge); }
.core-legend li[data-kind="video"]::before { background: color-mix(in srgb, var(--sc-gold) 10%, var(--sc-panel)); border-color: var(--sc-gold-edge); }
.core-legend li[data-kind="witness"]::before { background: var(--sc-metal); }
.core-legend li[data-kind="none"]::before { background: transparent; border-style: dashed; }
.core-legend b { color: var(--sc-ink); }

@media (max-width: 720px) {
  .core-survival { grid-template-columns: repeat(7, 1fr); }
}

/* --- the story: a longread, so the measure tightens and the openings get room ------------- */

.core-lede {
  margin: 0; font-size: 20px; line-height: 1.5; color: var(--sc-ink);
  border-left: 2px solid var(--sc-gold); padding-left: 18px;
}

/* --- homework, re-posed ------------------------------------------------------------------ */

.core-problem {
  display: grid; gap: 10px; padding: 20px;
  border: 1px solid var(--sc-edge); border-left: 3px solid var(--sc-ice);
  background: var(--sc-panel);
}
.core-problem > :last-child { margin-bottom: 0; }
.core-problem-number {
  margin: 0; font: 500 10px/1.6 var(--sc-font-display); letter-spacing: .16em;
  text-transform: uppercase; color: var(--sc-gold);
}
.core-problem-ask { margin: 0; font-size: 17px; color: var(--sc-ink); }
.core-problem p { margin: 0; }
.core-problem .core-key {
  margin: 0; padding: 12px 14px; border: 1px solid var(--sc-edge);
  background: var(--sc-void); font-size: 14px; color: var(--sc-muted);
}
.core-key b { color: var(--sc-ink); }

/* --- people, sources, errata -------------------------------------------------------------- */

.core-people { display: grid; gap: var(--sc-space-3); margin: 0; padding: 0; list-style: none; }
.core-person {
  display: grid; gap: 6px; padding: 18px 20px;
  border: 1px solid var(--sc-edge); background: var(--sc-panel);
}
.core-person h3 { margin: 0; font-size: 18px; }
.core-person p { margin: 0; color: var(--sc-muted); font-size: 15px; }
.core-person-role {
  font: 500 10px/1.6 var(--sc-font-display); letter-spacing: .16em; text-transform: uppercase;
  color: var(--sc-gold);
}

.core-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.core-table th, .core-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--sc-edge); text-align: left;
  vertical-align: top; word-break: break-word;
}
.core-table th {
  font: 500 10px/1.6 var(--sc-font-display); letter-spacing: .14em; text-transform: uppercase;
  color: var(--sc-muted); white-space: nowrap;
}
.core-table td.core-num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--sc-muted); }
.core-scroll { overflow-x: auto; }

/* A source row that came back as a one byte stub is a hole in the record, not a file. */
.core-table tr[data-state="lost"] td { color: var(--sc-muted); opacity: .75; }

/* --- the week 1 board: four columns of the resource taxonomy ----------------------------- */

.core-board-grid {
  display: grid; gap: var(--sc-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.core-board-grid h4 {
  margin: 0 0 4px; font: 600 13px/1.4 var(--sc-font-display);
  letter-spacing: .08em; text-transform: uppercase; color: var(--sc-gold);
}
.core-board-grid > div > p { margin: 0 0 8px; font-size: 13px; color: var(--sc-muted); }
.core-board-grid ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }

/* --- the fourteen week rail, inside a prose column --------------------------------------- */

/* learn.css lays a row out as three columns, which is right at full width and wrong inside the
   readable column the course pages use: the topic ends up two words wide. The badges move to
   their own line under the topic instead, and the row keeps its shape at every width. */
.learn-week-rail .learn-week-row {
  grid-template-columns: 76px 1fr;
  align-items: start;
  row-gap: 10px;
}
.learn-week-rail .learn-week-row .learn-evidence { grid-column: 2; }
.learn-week-rail .learn-week-number { padding-top: 3px; }

/* --- the syllabus rows on the hub: title, what you will learn, and what the lesson has ---- */

.learn-week-rail .learn-week-topic > span { display: block; }
.learn-week-rail .learn-week-topic > .learn-week-tags {
  margin-top: 4px; font: 500 10px/1.6 var(--sc-font-display); letter-spacing: .14em;
  text-transform: uppercase; color: var(--sc-ice);
}