:root {
  --network-accent: #2f6fed;
  --network-ink: #10213f;
  --network-soft: color-mix(in srgb, var(--network-accent) 8%, transparent);
}

.lesson-page .page {
  max-width: none;
}

.lesson-page[data-course-profile="networking-distributed-systems"] {
  --pb-accent: var(--network-accent);
}

.lesson-page[data-course-profile="networking-distributed-systems"] .page > nav:first-child,
.lesson-page[data-course-profile="networking-distributed-systems"] .page > .eyebrow,
.lesson-page[data-course-profile="networking-distributed-systems"] .page > h1,
.lesson-page[data-course-profile="networking-distributed-systems"] .page > .lede,
.lesson-page[data-course-profile="networking-distributed-systems"] .page > .source-note,
.lesson-page[data-course-profile="networking-distributed-systems"] .page > .course-path {
  max-width: var(--pb-reading-width, 820px);
}

.lesson-page[data-course-profile="networking-distributed-systems"] .course-interactive,
.lesson-page[data-course-profile="networking-distributed-systems"] .trace-scroll,
.lesson-page[data-course-profile="networking-distributed-systems"] section > .state-transition {
  width: 100%;
  max-width: var(--pb-workspace-width, 1096px);
}

.course-path {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 1.25rem 0 2rem;
  padding: 0;
  list-style: none;
}

.course-path li {
  padding: .34rem .7rem;
  border: 1px solid color-mix(in srgb, var(--network-accent) 26%, transparent);
  border-radius: 999px;
  color: var(--muted, #5f6470);
  font-size: .83rem;
}

.course-path li[aria-current="step"] {
  color: var(--network-accent);
  background: var(--network-soft);
  border-color: var(--network-accent);
  font-weight: 700;
}

.source-note,
.mental-model,
.warning-note,
.gate,
.evidence-note {
  margin: 1.4rem 0;
  padding: 1rem 1.15rem;
  border-left: 4px solid var(--network-accent);
  background: var(--network-soft);
  border-radius: 0 .65rem .65rem 0;
}

.source-note,
.evidence-note {
  font-size: .92rem;
  color: var(--muted, #5f6470);
}

.warning-note {
  border-left-color: #d97706;
  background: color-mix(in srgb, #d97706 9%, transparent);
}

.stage-grid {
  display: grid;
  gap: 1rem;
  margin: 1.25rem 0;
}

.stage-card {
  padding: 1.05rem 1.15rem;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: .8rem;
  background: color-mix(in srgb, Canvas 96%, var(--network-accent));
}

.stage-card h3 {
  margin-top: 0;
  color: var(--network-accent);
}

.stage-card dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .35rem .8rem;
  margin-bottom: 0;
}

.stage-card dt {
  font-weight: 700;
}

.stage-card dd {
  margin: 0;
}

.trace-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.worked-trace,
.deep-checks,
.implementation-map,
.before-start,
.explain-yourself {
  margin: 1.6rem 0;
}

.trace-scroll {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: .45rem;
  background: var(--pb-paper, #fffef9);
}

.trace-scroll .trace-table {
  min-width: 680px;
}

.trace-table tbody tr:last-child td {
  border-bottom: 0;
}

.state-transition {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: .8rem;
  margin: 1rem 0;
}

.state-transition > div {
  min-width: 0;
  padding: .85rem;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: .65rem;
}

.state-transition .transition-arrow {
  color: var(--network-accent);
  font-weight: 800;
}

.exercise-list > li {
  margin: .8rem 0;
}

.concept-check {
  margin: 1.2rem 0;
}

.counterfactual {
  margin: 1.4rem 0;
  padding: .9rem 1rem;
  border-left: 4px solid #7c3aed;
  background: color-mix(in srgb, #7c3aed 8%, transparent);
}

.misconception-analysis dl,
.implementation-map dl {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
  gap: .55rem 1rem;
}

.misconception-analysis dt,
.implementation-map dt {
  font-weight: 750;
}

.misconception-analysis dd,
.implementation-map dd {
  margin: 0;
}

.formula-block {
  max-width: 100%;
  overflow-x: auto;
  padding-block: .35rem;
}

.trace-table th,
.trace-table td {
  padding: .65rem .7rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  text-align: left;
  vertical-align: top;
}

.trace-table th {
  color: var(--network-accent);
}

.lesson-page[data-course-profile="networking-distributed-systems"] section[id] {
  scroll-margin-top: 88px;
}

.lesson-page[data-course-profile="networking-distributed-systems"] .worked-trace,
.lesson-page[data-course-profile="networking-distributed-systems"] .implementation-map {
  padding-top: .2rem;
}

.lesson-page[data-course-profile="networking-distributed-systems"] .worked-trace > h2,
.lesson-page[data-course-profile="networking-distributed-systems"] .implementation-map > h2 {
  max-width: 900px;
}

.source-list a,
.page-nav a {
  overflow-wrap: anywhere;
}

.page-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

.page-nav a:last-child {
  text-align: right;
}

.history-timeline {
  border-left: 2px solid color-mix(in srgb, var(--network-accent) 35%, transparent);
  padding-left: 1.25rem;
}

.history-timeline li {
  margin-bottom: .7rem;
}

.code-label {
  display: inline-flex;
  margin: .35rem 0 .55rem;
  padding: .3rem .55rem;
  border: 1px solid color-mix(in srgb, var(--network-accent) 35%, transparent);
  border-radius: 999px;
  color: var(--network-accent);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .025em;
}

.attribution-map td:nth-child(2) {
  font-weight: 650;
}

.then-now,
.project-bridge {
  margin-block: 1.25rem;
  padding: .9rem 1rem;
  border-left: 3px solid var(--network-accent);
  background: color-mix(in srgb, var(--network-accent) 7%, transparent);
}

.project-bridge a {
  margin-left: .35rem;
}

.code-mechanism pre {
  max-width: 100%;
  overflow-x: auto;
}

.workbook-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .7rem;
  padding: 0;
  list-style: none;
}

.workbook-index li {
  padding: .75rem;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: .65rem;
}

/* Discussion pages are continuous reasoning workbooks, not card dashboards. */
.discussion-contract {
  margin-bottom: 2.5rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.guided-problem {
  margin-block: 3.25rem;
  padding-top: 2rem;
  border-top: 2px solid color-mix(in srgb, var(--network-accent) 34%, transparent);
}

.problem-kicker {
  margin-bottom: .35rem;
  color: var(--network-accent);
  font-size: .82rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.problem-purpose,
.why-this-works,
.variation,
.closed-book-reconstruction,
.misconception-analysis {
  margin-block: 1.25rem;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--network-accent);
  background: color-mix(in srgb, var(--network-accent) 7%, transparent);
}

.problem-setup {
  margin-block: 1.25rem;
}

.topology-line {
  max-width: 100%;
  margin-block: 1rem;
  padding: 1rem;
  overflow-x: auto;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: .65rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(.9rem, 2.6vw, 1.08rem);
  text-align: center;
  white-space: nowrap;
}

.work-it-out {
  margin-block: 1.4rem;
}

.work-it-out input {
  width: min(7rem, 100%);
  min-height: 2rem;
  padding: .25rem .4rem;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: .35rem;
  background: transparent;
  color: inherit;
}

.progressive-hints {
  margin-block: 1.2rem;
}

.progressive-hints details,
.guided-problem .reveal {
  margin-block: .6rem;
  padding: .7rem .85rem;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: .55rem;
}

.progressive-hints summary,
.guided-problem .reveal summary {
  cursor: pointer;
  font-weight: 700;
}

.guided-problem .reveal[open] {
  border-color: color-mix(in srgb, var(--network-accent) 45%, transparent);
}

.wrong-turn {
  margin-block: 1.25rem;
  padding: .9rem 1rem;
  border-left: 3px solid #d97706;
  background: color-mix(in srgb, #d97706 8%, transparent);
}

.discussion-bridge {
  margin-block: 1.5rem;
  padding: .9rem 1rem;
  border-left: 3px solid var(--network-accent);
  background: color-mix(in srgb, var(--network-accent) 7%, transparent);
}

@media (max-width: 640px) {
  .stage-card dl {
    grid-template-columns: 1fr;
  }

  .page-nav {
    flex-direction: column;
  }

  .page-nav a:last-child {
    text-align: left;
  }

  .trace-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .guided-problem {
    margin-block: 2.5rem;
  }

  .state-transition {
    grid-template-columns: 1fr;
  }

  .state-transition .transition-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }

  .misconception-analysis dl,
  .implementation-map dl {
    grid-template-columns: 1fr;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --network-ink: #dbe7ff;
    --network-soft: color-mix(in srgb, var(--network-accent) 16%, transparent);
  }
}