/* ============================================================
   Thread badges — the book's signature element, in the course
   design system (see ../design-system/tokens.css).

   Three threads run through the book. Each is a v0-style card:
   white-ish tinted ground, hairline border, 3px left accent,
   mono uppercase label. Use as Quarto divs:

   ::: {.thread .thread-gold}
   **Thread (2 of 8).** The film strip you just made is the first
   piece of something larger. Chapter 14 names it.
   :::

   Post-reveal chapters (14, 15, 17) add .revealed to name the badge.

   ::: {.thread .thread-skills}
   **Skills ladder.** This lab introduces W&B sweeps.
   :::

   ::: {.thread .thread-ethics}
   **Ethics.** Where did this benchmark's images come from?
   :::
   ============================================================ */

.thread {
  margin: 1.4rem 0;
  padding: 0.8rem 1rem;
  border: 1px solid #e5e5e5;
  border-left-width: 3px;
  border-radius: 0.625rem;
  font-size: 0.92em;
  position: relative;
}

.thread::before {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

/* The gold ⟿ thread, matching the schedule app. Before the Chapter 14
   reveal the badge stays unnamed; add .revealed (Chapters 14, 15, 17)
   once the mechanism has a name. */
.thread-gold {
  border-left-color: #d08700;
  background: #fffbeb;
}
.thread-gold::before { content: "⟿ the thread"; color: #d08700; }
.thread-gold.revealed::before { content: "⟿ diffusion thread"; }

/* Skills ladder — lab emerald */
.thread-skills {
  border-left-color: #00bc7d;
  background: #f0fdf9;
}
.thread-skills::before { content: "⛏ skills ladder"; color: #009966; }

/* Ethics & bias — rose */
.thread-ethics {
  border-left-color: #ff2056;
  background: #fff1f4;
}
.thread-ethics::before { content: "⚖ ethics & bias"; color: #ec003f; }

/* Self-study chapter badge (used in chapter title blocks) */
.self-study-badge {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.65em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2769c6;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 999px;
  padding: 0.25em 0.9em;
  vertical-align: middle;
}

/* Lab pointer block at the end of each chapter — lab emerald accent */
.lab-pointer {
  margin: 1.6rem 0;
  padding: 1rem 1.2rem;
  border: 1px solid #e5e5e5;
  border-left: 3px solid #00bc7d;
  border-radius: 0.625rem;
  background: #ffffff;
}
.lab-pointer::before {
  content: "▸ this week's lab";
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #009966;
  margin-bottom: 0.3rem;
}

/* ============================================================
   Static schedule table (schedule.qmd). Event colours come from
   the course design system (design-system/tokens.css) and match
   the schedule app.
   ============================================================ */

.cv-schedule {
  width: 100%;
  table-layout: fixed;          /* otherwise the width hints below are ignored */
  border-collapse: collapse;
  font-size: 0.86em;
  margin: 1.2rem 0;
}
.cv-schedule th {
  text-align: left;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.82em;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7e888b;
  border-bottom: 1px solid #e5e5e5;
  padding: 0 0.6rem 0.4rem;
}
.cv-schedule td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid #f1f1f1;
  vertical-align: top;
}
.cv-schedule tr.week-start td { border-top: 1px solid #e5e5e5; }
/* fixed layout takes column widths from the FIRST row, so size the headers */
.cv-schedule th:nth-child(1), .cv-schedule td:nth-child(1) { width: 2.8rem; }
.cv-schedule th:nth-child(2), .cv-schedule td:nth-child(2) { width: 6.8rem; }
.cv-schedule th:nth-child(3), .cv-schedule td:nth-child(3) { width: 10rem; }
.cv-schedule th:nth-child(5), .cv-schedule td:nth-child(5) { width: 8.5rem; }
.cv-schedule .wk { color: #7e888b; font-variant-numeric: tabular-nums; }
.cv-schedule .dt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cv-schedule .dt .day { color: #7e888b; }
.cv-schedule .vn {
  white-space: nowrap;
  color: #7e888b;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.86em;
}
.cv-schedule .dl { color: #7e888b; font-size: 0.92em; margin-top: 0.15rem; }
.cv-schedule .ty { line-height: 1.45; }
.cv-schedule .tag {
  display: inline-block;
  vertical-align: top;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.15em 0.6em;
  margin-right: 0.25em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.cv-schedule .tag.msc { color: #7e888b; border-color: #e5e5e5; }
.cv-schedule .tag.thread { color: #d08700; background: #fef3c6; }

/* one accent per event type, matching the schedule app */
.cv-schedule .ev-lecture       .tag:first-child { color: #0284c7; background: #e0f2fe; }
.cv-schedule .ev-lab           .tag:first-child { color: #009966; background: #d7f7ea; }
.cv-schedule .ev-test          .tag:first-child { color: #dc2626; background: #fee2e2; }
.cv-schedule .ev-journal-club  .tag:first-child { color: #b45309; background: #fef3c6; }
.cv-schedule .ev-presentation  .tag:first-child { color: #be123c; background: #ffe4e9; }
.cv-schedule .ev-milestone     .tag:first-child { color: #0f766e; background: #ccfbf1; }
.cv-schedule .ev-break         .tag:first-child { color: #57534e; background: #f0efee; }
.cv-schedule tr.ev-break td { background: #fafafa; color: #7e888b; }
.cv-schedule tr.ev-test  td { background: #fffafa; }

@media (max-width: 700px) {
  .cv-schedule .dl, .cv-schedule .vn { display: none; }
}


/* ---- schedule page: view tabs, filters, calendar grid ---- */
.sched-bar { display: flex; justify-content: space-between; align-items: center;
             gap: 12px; flex-wrap: wrap; margin: 1.2rem 0 0.6rem; }
.sched .chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sched .chips .lbl { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #7e888b; margin-right: 2px; }
.sched .chip { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: #7e888b; background: #fff; border: 1px solid #e5e5e5;
  border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.sched .chip:hover { color: #2769c6; border-color: #2769c6; }
.sched .chip.active { color: #2769c6; border-color: #2769c6; background: #f0f6ff; }
.sched-filters { margin-bottom: 0.6rem; }
.sched-search { flex: 1; min-width: 190px; max-width: 320px;
  font-family: inherit; font-size: 0.86rem; color: #333;
  border: 1px solid #e5e5e5; border-radius: 999px; padding: 5px 14px; }
.sched-search:focus { outline: none; border-color: #2769c6; }
.sched-count { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; color: #7e888b; margin-bottom: 0.4rem; }
.sched-empty { color: #7e888b; padding: 1.5rem 0; }

.cal-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px;
  color: #7e888b; margin: 0.4rem 0 1rem; }
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-legend .sw { width: 14px; height: 8px; border-radius: 3px; display: inline-block; }
.cal-legend .sw-holiday { background: #fee2e2; }
.cal-legend .sw-out { background: #f4f4f5; }
.cal-month { margin-bottom: 1.6rem; }
.cal-month h3 { font-size: 1rem; font-weight: 400; margin: 0 0 0.5rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #7e888b; text-align: center; padding-bottom: 2px; }
.cal-cell { min-height: 82px; border: 1px solid #eceded; border-radius: 6px;
  padding: 3px 4px; background: #fff; overflow: hidden; }
.cal-cell.out { background: #fafafa; border-color: #f3f3f3; }
.cal-cell.out .cal-num { color: #d4d7d9; }
.cal-cell.dim { background: #f7f7f8; }
.cal-cell.hol { background: #fef4f4; }
.cal-num { font-size: 10.5px; color: #7e888b; text-align: right;
  font-variant-numeric: tabular-nums; }
.cal-hol { font-size: 9px; line-height: 1.2; color: #b91c1c; margin-bottom: 2px; }
.cal-ev { font-size: 9.5px; line-height: 1.25; border-radius: 3px;
  padding: 2px 4px; margin-top: 2px; overflow: hidden; }
.cal-undated { padding: 6px 2px; border-bottom: 1px solid #f1f1f1; font-size: 0.9rem; }
.cal-undated .wkno { color: #7e888b; font-family: ui-monospace, monospace;
  font-size: 11px; margin-left: 6px; }

/* one accent per event type, shared by both views */
.cal-ev.ev-lecture, .cv-schedule .ev-lecture .tag:first-child { color: #0284c7; background: #e0f2fe; }
.cal-ev.ev-lab, .cv-schedule .ev-lab .tag:first-child { color: #009966; background: #d7f7ea; }
.cal-ev.ev-test, .cv-schedule .ev-test .tag:first-child { color: #dc2626; background: #fee2e2; }
.cal-ev.ev-journal-club, .cv-schedule .ev-journal-club .tag:first-child { color: #b45309; background: #fef3c6; }
.cal-ev.ev-presentation, .cv-schedule .ev-presentation .tag:first-child { color: #be123c; background: #ffe4e9; }
.cal-ev.ev-milestone, .cv-schedule .ev-milestone .tag:first-child { color: #0f766e; background: #ccfbf1; }
.cal-ev.ev-break, .cv-schedule .ev-break .tag:first-child { color: #57534e; background: #f0efee; }
.cal-legend .sw.ev-lecture { background: #e0f2fe; }
.cal-legend .sw.ev-lab { background: #d7f7ea; }
.cal-legend .sw.ev-test { background: #fee2e2; }
.cal-legend .sw.ev-journal-club { background: #fef3c6; }
.cal-legend .sw.ev-presentation { background: #ffe4e9; }
.cal-legend .sw.ev-milestone { background: #ccfbf1; }

@media (max-width: 700px) {
  .cal-cell { min-height: 54px; }
  .cal-ev { font-size: 8px; }
}


/* period bands across the calendar: block 3/4, breaks, exams */
.cal-band { height: 5px; margin: -3px -4px 2px; background: transparent; }
.cal-band.band-term  { background: rgba(39, 105, 198, 0.55); }
.cal-band.band-break { background: rgba(126, 136, 139, 0.35); }
.cal-band.band-exam  { background: rgba(220, 38, 38, 0.45); }
.cal-band.band-start { border-top-left-radius: 999px; border-bottom-left-radius: 999px; margin-left: 0; }
.cal-band.band-end   { border-top-right-radius: 999px; border-bottom-right-radius: 999px; margin-right: 0; }
.cal-period { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 8.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: #2769c6; line-height: 1.2; }
.cal-cell.dim .cal-period { color: #7e888b; }
.cal-legend .sw.band-term  { background: rgba(39, 105, 198, 0.55); }
.cal-legend .sw.band-break { background: rgba(126, 136, 139, 0.35); }
.cal-legend .sw.band-exam  { background: rgba(220, 38, 38, 0.45); }
.cal-legend .approx-key { color: #7e888b; }
/* events that belong to a week rather than a slot */
.cal-ev.approx { opacity: 0.85; border: 1px dashed currentColor; }

/* ============================================================
   Drafting plans (.plan). A chapter being written carries its
   paragraph plan in the page, so it can be read in the preview
   rather than in the source. These blocks are drafting scaffolding:
   they are removed as each section's prose is written, and a
   chapter must not be released with any left. Marked in the gold
   used for editorial furniture, dashed so it never reads as
   content.

   ::: {.plan}
   **Writing plan — §1.** One numbered item per intended paragraph.
   1. ...
   :::
   ============================================================ */

.plan {
  margin: 1.4rem 0;
  padding: 0.9rem 1.1rem 0.8rem;
  border: 1px dashed #d08700;
  border-radius: 0.625rem;
  background: #fffdf6;
  font-size: 0.9em;
}
.plan::before {
  content: "✎ writing plan — not for the student build";
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a5c00;
  margin-bottom: 0.45rem;
}
.plan > p:first-of-type { margin-top: 0; }
.plan > :last-child { margin-bottom: 0; }
.plan ol, .plan ul { margin-bottom: 0.4rem; }
.plan li { margin-bottom: 0.35rem; line-height: 1.5; }
.plan li > ul { margin-top: 0.3rem; }
.plan code { font-size: 0.92em; }
/* the meta line above each list: widget, figures, sources */
.plan .meta { color: #7e888b; font-size: 0.95em; }