/*
 * Codex beginner course — Baigie-inspired C3 review layer
 * Structural principles only: whitespace, alignment, clear type scale,
 * restrained colour, and one-message-per-slide. No Baigie assets are reused.
 */

:root {
  --b-paper: #fbfaf6;
  --b-paper-alt: #ececea;
  --b-ink: #17191d;
  --b-body: #444951;
  --b-muted: #747981;
  --b-line: #cfd1d3;
  --b-blue: #255fc4;
  --b-blue-dark: #18488f;
}

body,
body.bulls-mode {
  --hb-bg: var(--b-paper);
  --hb-white: #ffffff;
  --hb-black: var(--b-ink);
  --hb-gold: var(--b-blue);
  --hb-gold-light: #7da3e4;
  --hb-gold-deep: var(--b-blue-dark);
  --hb-gold-pale: #e7eef9;
  --hb-gold-faint: rgba(37, 95, 196, 0.07);
  --hb-grad: linear-gradient(90deg, var(--b-blue), var(--b-blue));
  --hb-grad-light: linear-gradient(90deg, #7da3e4, #7da3e4);
  --hb-grad-vivid: linear-gradient(90deg, var(--b-blue), var(--b-blue));
  --hb-gray-100: #eeeeeb;
  --hb-gray-200: var(--b-line);
  --hb-gray-500: var(--b-muted);
  --hb-gray-600: var(--b-body);
  background: #25282d;
}

.deck {
  background: #25282d;
}

.stage {
  border: 1px solid #707781;
  border-radius: 0;
  box-shadow: 0 28px 76px rgba(0, 0, 0, 0.44);
}

.slide,
.slide--content,
.slide--twocol,
.slide--timeline,
.slide--compare,
.slide--diagram {
  border-radius: 0;
  background: var(--b-paper);
}

/* The definition slide is the one dark pause in each lesson rhythm. */
.slide--lead {
  background: #0f1d33;
}

.slide--content::before,
.slide--twocol::before,
.slide--stats::before,
.slide--timeline::before,
.slide--compare::before,
.slide--agenda::before,
.slide--profile::before,
.slide--story::before,
.slide--diagram::before {
  display: none;
}

.s-blob,
.s-radial,
.s-grid {
  display: none;
}

.s-inner {
  padding: 52px 72px 64px;
}

.s-overline {
  margin-bottom: 14px;
  color: var(--b-muted);
  font-family: var(--font-b);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: none;
}

.s-overline::before {
  display: none;
}

.s-title {
  max-width: 1080px;
  color: var(--b-ink);
  font-family: var(--font-h);
  font-size: 42px;
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -0.03em;
}

.s-title .accent,
.card3 .c3-title .accent,
.callout .co-text b {
  color: var(--b-blue-dark);
}

.s-rule {
  display: none;
}

.s-lead {
  margin-top: 22px;
  color: var(--b-body);
  font-size: 19px;
  line-height: 1.78;
}

.s-footer {
  padding: 16px 72px;
  border: 0;
}

.s-footer-brand,
.s-footer-page {
  color: #7c8086;
  font-family: var(--font-b);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
}

/* Plain rows instead of repeated mini-cards. */
.slide--content .blist,
.slide--biglist .blist {
  max-width: 1010px;
  margin-top: 22px;
  gap: 0;
}

.slide--content .bitem,
.slide--biglist .bitem {
  min-height: 0;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--b-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--b-body);
  font-size: 19px;
  line-height: 1.56;
  align-items: flex-start;
  gap: 18px;
}

.slide--content .bitem:first-child,
.slide--biglist .bitem:first-child {
  border-top: 1px solid var(--b-line);
}

.slide--content .bdot,
.slide--biglist .bdot {
  width: 9px;
  height: 9px;
  margin-top: 10px;
  border: 0;
  border-radius: 50%;
  background: var(--b-ink);
  color: transparent;
}

.slide--content .bdot i,
.slide--biglist .bdot i {
  display: none;
}

.callout {
  margin-top: 20px;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--b-line);
  border-radius: 0;
  background: transparent;
}

.callout .co-strong {
  margin-bottom: 4px;
  color: var(--b-ink);
  font-family: var(--font-b);
  font-size: 17px;
  font-weight: 800;
}

.callout .co-text {
  color: #555a62;
  font-size: 15.5px;
  line-height: 1.7;
}

/* A numbered aligned list is the default treatment for three-part concepts. */
.cardrow {
  display: flex;
  flex-direction: column;
  max-width: 1040px;
  margin-top: 22px;
  gap: 0;
  counter-reset: lesson-card;
}

.card3 {
  display: grid;
  grid-template-columns: 54px 170px 220px 1fr;
  align-items: center;
  min-height: 78px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--b-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  counter-increment: lesson-card;
}

.card3:first-child {
  border-top: 1px solid var(--b-line);
}

.card3::before {
  content: counter(lesson-card);
  position: static;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--b-ink);
  color: #fff;
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 800;
  line-height: 32px;
  text-align: center;
}

.card3 .c3-ic {
  display: none;
}

.card3 .c3-kicker {
  margin: 0;
  color: var(--b-muted);
  font-family: var(--font-b);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}

.card3 .c3-title {
  margin: 0;
  color: var(--b-ink);
  font-family: var(--font-h);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.35;
}

.card3 .c3-text {
  color: #555a62;
  font-size: 15.5px;
  line-height: 1.62;
}

/* Comparisons: hierarchy through spacing and one black header, not cards. */
.slide--compare .compare-grid {
  margin-top: 30px;
  grid-template-columns: 1fr 54px 1fr;
}

.slide--compare .compare-col,
.compare-before,
.compare-after {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.slide--compare .compare-header {
  justify-content: flex-start;
  padding: 12px 16px;
  border-radius: 0;
  font-family: var(--font-b);
  font-size: 16px;
  font-weight: 800;
}

.slide--compare .compare-header i {
  display: none;
}

.slide--compare .compare-before .compare-header {
  background: #dfdfdc;
  color: var(--b-ink);
}

.slide--compare .compare-after .compare-header {
  background: var(--b-ink);
  color: #fff;
}

.slide--compare .compare-item,
.slide--compare .compare-before .compare-item,
.slide--compare .compare-after .compare-item {
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid var(--b-line);
  border-radius: 0;
  background: transparent;
  color: var(--b-body);
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.55;
}

.slide--compare .compare-arrow {
  color: #9a9da2;
}

/* Process slides: plain numbered steps and a thin connector rhythm. */
.slide--timeline .tl-row {
  flex: 0 0 auto;
  align-items: flex-start;
  gap: 8px;
  min-height: 0;
  margin-top: 34px;
}

.slide--timeline .tl-step {
  min-height: 156px;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.slide--timeline .tl-step::before {
  display: none;
}

.slide--timeline .tl-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0 0 18px;
  padding: 0;
  border-radius: 50%;
  background: var(--b-ink);
  color: #fff;
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 800;
}

.slide--timeline .tl-num::before {
  display: none;
}

.slide--timeline .tl-title {
  margin-bottom: 9px;
  color: var(--b-ink);
  font-size: 19px;
  line-height: 1.38;
}

.slide--timeline .tl-desc {
  color: #5d626a;
  font-size: 14.5px;
  line-height: 1.62;
}

.slide--timeline .tl-arrow {
  width: 18px;
  padding-top: 9px;
  color: #a5a8ad;
}

.slide--timeline .tl-arrow i {
  width: 17px;
  height: 17px;
}

.tree {
  margin-top: 22px;
  padding: 20px 24px;
  border: 0;
  border-radius: 0;
  background: #eeeeeb;
  color: #41464e;
  font-size: 14.5px;
  line-height: 1.72;
}

.tree .tg {
  color: var(--b-blue-dark);
}

/* A single copyable prompt, shown as a document rather than a UI card. */
.slide--prompt .prompt-box {
  width: 100%;
  max-width: 1040px;
  margin-top: 26px;
  padding: 22px 30px;
  border: 0;
  border-left: 4px solid var(--b-ink);
  border-radius: 0;
  background: #eeeeeb;
}

.slide--prompt .prompt-box pre {
  margin: 0;
  color: #30343a;
  font-family: var(--font-b);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.62;
  white-space: pre-wrap;
}

.slide--prompt .prompt-note {
  margin-top: 16px;
  color: var(--b-blue-dark);
  font-size: 15px;
  font-weight: 800;
}

.s-figure {
  margin-top: 22px;
}

.s-figure img {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Course covers: white, typographic, and intentionally quiet. */
.slide--lesson-cover {
  background: var(--b-paper);
}

.slide--lesson-cover .s-inner {
  justify-content: center;
  align-items: flex-start;
  padding-left: 100px;
}

.lesson-series {
  color: var(--b-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.035em;
}

.lesson-count {
  margin-top: 42px;
  color: var(--b-blue-dark);
  font-size: 15px;
  font-weight: 800;
}

.lesson-title {
  margin-top: 12px;
  color: var(--b-ink);
  font-family: var(--font-h);
  font-size: 62px;
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.04em;
}

.lesson-subtitle {
  max-width: 820px;
  margin-top: 24px;
  color: var(--b-body);
  font-size: 21px;
  line-height: 1.7;
}

.lesson-line {
  width: 72px;
  height: 4px;
  margin: 30px 0 20px;
  background: var(--b-blue);
}

.lesson-output {
  color: #555a62;
  font-size: 15px;
  font-weight: 700;
}

.lesson-output span {
  display: inline-block;
  margin-right: 12px;
  padding: 4px 8px;
  background: var(--b-ink);
  color: #fff;
  font-size: 11px;
}

/* Review slides double as the light-grey chapter rhythm found in the reference. */
.slide--lesson-review {
  background: var(--b-paper-alt);
}

.slide--lesson-review .s-inner {
  justify-content: center;
  padding-left: 104px;
  padding-right: 104px;
}

.review-kicker {
  color: var(--b-muted);
  font-size: 13px;
  font-weight: 700;
}

.review-title {
  margin-top: 10px;
  color: var(--b-ink);
  font-family: var(--font-h);
  font-size: 42px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.review-list {
  max-width: 930px;
  margin-top: 30px;
  border-top: 1px solid #bfc1c3;
}

.review-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  min-height: 62px;
  border-bottom: 1px solid #bfc1c3;
}

.review-item span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--b-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.review-item p {
  color: #3f444b;
  font-size: 17px;
  line-height: 1.55;
}

.review-output {
  margin-top: 22px;
  color: var(--b-ink);
  font-size: 16px;
}

.review-output span {
  margin-right: 12px;
  color: var(--b-blue-dark);
  font-size: 12px;
  font-weight: 800;
}

.review-next {
  margin-top: 12px;
  color: var(--b-muted);
  font-size: 14px;
}

/* Viewer chrome must read as outside the slide. */
.bulls-toggle {
  display: none !important;
}

.review-label {
  position: fixed;
  top: 16px;
  left: 18px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0;
  background: rgba(14, 16, 20, 0.9);
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 700;
}

.review-label a {
  padding-right: 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  text-decoration: none;
}

.nav {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(15, 17, 21, 0.9);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.hint {
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 720px) {
  .review-label {
    top: 8px;
    left: 8px;
  }
}