/* Shared presentation layer for the four lecture pages. */

.lecture-page {
  --lecture-radius: 16px;
  --lecture-control-radius: 10px;
}

.lecture-page :is(
  .hero-card,
  .execution-map,
  .focus-panel,
  .visual-panel,
  .simulation-panel,
  .primer-panel,
  .definition-panel,
  .content-panel,
  .blocking-panel,
  .javascript-panel,
  .deadlock-panel,
  .livelock-panel,
  .comparison-panel,
  .conditions-panel,
  .scenario-panel,
  .solution-panel,
  .explain-panel,
  .quiz-panel
) {
  border-radius: var(--lecture-radius);
  box-shadow: 0 14px 32px rgb(37 43 43 / 6%);
}

.lecture-page .lesson-main {
  gap: clamp(22px, 3vw, 32px);
}

.lecture-page .hero-grid {
  gap: clamp(24px, 5vw, 64px);
}

.lecture-page .back-link {
  margin-bottom: clamp(26px, 5vw, 38px);
}

.lecture-page :is(.lesson-lede, .focus-panel p, .section-heading p, .quiz-panel > p) {
  line-height: 1.7;
}

.lecture-page :is(.section-label, .lesson-kicker, .hero-card__label, .visual-contract__eyebrow) {
  color: var(--lesson-muted);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
}

.lecture-page .section-heading {
  margin-bottom: 18px;
}

.lecture-page :is(
  button,
  .visual-control,
  .map-action,
  .comparison-choice,
  .visual-tab
) {
  min-height: 44px;
  border-radius: var(--lecture-control-radius);
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, transform 160ms ease;
}

.lecture-page button:active {
  transform: translateY(1px) scale(0.99);
}

.lecture-page .visual-contract {
  gap: 14px;
  border-radius: 12px;
  padding: clamp(14px, 3vw, 20px);
}

.lecture-page .visual-contract__steps {
  gap: 6px;
}

.lecture-page .visual-contract__steps li {
  border-radius: var(--lecture-control-radius);
}

.lecture-page :is(.learning-visual, .visual-stage, .comparison-table-wrap) {
  border-radius: 12px;
}

.lecture-page .quiz-panel {
  border-top: 3px solid var(--lesson-accent);
}

@media (max-width: 640px) {
  .lecture-page .lesson-main {
    padding-top: 24px;
    padding-bottom: 56px;
  }

  .lecture-page .lesson-hero {
    padding-bottom: 40px;
  }

  .lecture-page :is(
    .hero-card,
    .focus-panel,
    .visual-panel,
    .simulation-panel,
    .primer-panel,
    .definition-panel,
    .content-panel,
    .blocking-panel,
    .javascript-panel,
    .deadlock-panel,
    .livelock-panel,
    .comparison-panel,
    .conditions-panel,
    .scenario-panel,
    .solution-panel,
    .explain-panel,
    .quiz-panel
  ) {
    padding: 20px 18px;
  }

  .lecture-page .visual-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lecture-page .visual-control {
    width: 100%;
    padding-inline: 8px;
  }

  .lecture-page .comparison-table-wrap {
    overflow: visible;
  }

  .lecture-page .comparison-table {
    display: block;
    font-size: 0.94rem;
  }

  .lecture-page .comparison-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .lecture-page .comparison-table tbody,
  .lecture-page .comparison-table tr,
  .lecture-page .comparison-table th,
  .lecture-page .comparison-table td {
    display: block;
    width: 100%;
  }

  .lecture-page .comparison-table tr {
    padding: 14px 0;
    border-bottom: 1px solid var(--lesson-line);
  }

  .lecture-page .comparison-table tbody th {
    padding: 0 0 8px;
    border: 0;
    background: transparent;
  }

  .lecture-page .comparison-table td {
    display: grid;
    grid-template-columns: minmax(68px, 27%) minmax(0, 1fr);
    gap: 8px;
    padding: 4px 0;
    border: 0;
    line-height: 1.55;
  }

  .lecture-page .comparison-table td::before {
    content: attr(data-label);
    color: var(--lesson-ink);
    font-size: 0.78rem;
    font-weight: 800;
  }
}

@media (prefers-color-scheme: dark) {
  .lecture-page {
    --lesson-bg: #111718;
    --lesson-surface: #1a2020;
    --lesson-surface-alt: #222a2a;
    --lesson-ink: #eef5f1;
    --lesson-muted: #b4c1bd;
    --lesson-line: #3a4745;
    --lesson-accent: #f0987d;
    --lesson-accent-soft: #472e29;
    --lesson-process: #a8bcc2;
    --lesson-process-soft: #263538;
    --lesson-shared: #234943;
    --lesson-shared-ink: #8ad2c3;
    --lesson-danger: #e58984;
    --lesson-danger-soft: #482c2e;
    --lesson-blue: #9fc6d3;
    --lesson-blue-soft: #273d44;
    --lesson-green: #85c7b4;
    --lesson-green-soft: #24443c;
    --lesson-warn: #e0b56f;
    --lesson-warn-soft: #41351f;
    --lesson-shadow: none;
  }

  .lecture-page :is(.timeline-step.is-active, .execution-step.is-active) {
    background: var(--lesson-accent-soft);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lecture-page button:active {
    transform: none;
  }

  .lecture-page :is(button, .visual-control, .map-action, .comparison-choice, .visual-tab) {
    transition: none;
  }
}

/* Shared lecture refresh: the detail page belongs to the same product as home. */
.lecture-page {
  --lesson-bg: #f3f6f8;
  --lesson-surface: #ffffff;
  --lesson-surface-alt: #eef3f7;
  --lesson-ink: #16202a;
  --lesson-muted: #677480;
  --lesson-line: #d7e0e6;
  --lesson-accent: #1857d1;
  --lesson-accent-soft: #e8efff;
  --lesson-process: #58687a;
  --lesson-process-soft: #e8edf2;
  --lesson-shared: #dcefe9;
  --lesson-shared-ink: #0b776d;
  --lesson-danger: #b64b4b;
  --lesson-danger-soft: #f9e4e4;
  --lesson-blue: #356c86;
  --lesson-blue-soft: #e3f0f5;
  --lesson-green: #0b776d;
  --lesson-green-soft: #dcefe9;
  --lesson-warn: #a36b1b;
  --lesson-warn-soft: #fff2d8;
  --lesson-shadow: 0 18px 42px rgb(24 42 59 / 9%);
  color-scheme: light;
  min-width: 320px;
  background: var(--lesson-bg);
  color: var(--lesson-ink);
}

.lecture-page .lesson-hero {
  position: relative;
  overflow: hidden;
  border-bottom-color: var(--lesson-line);
  background:
    radial-gradient(circle at 88% 8%, rgb(24 87 209 / 10%), transparent 24rem),
    linear-gradient(180deg, #f8fafc 0%, var(--lesson-bg) 100%);
}

.lecture-page .lesson-hero::after {
  content: "";
  position: absolute;
  right: -78px;
  bottom: -146px;
  width: 290px;
  aspect-ratio: 1;
  border: 44px solid rgb(24 87 209 / 6%);
  border-radius: 50%;
  pointer-events: none;
}

.lecture-page .lesson-hero__inner,
.lecture-page .lesson-main { position: relative; z-index: 1; }

.lecture-page .back-link {
  color: var(--lesson-muted);
  transition: color 180ms ease, transform 180ms ease;
}

.lecture-page .back-link:hover,
.lecture-page .back-link:focus-visible {
  color: var(--lesson-accent);
  transform: translateX(-3px);
}

.lecture-page .lesson-kicker,
.lecture-page .section-label,
.lecture-page .hero-card__label,
.lecture-page .visual-contract__eyebrow {
  color: var(--lesson-accent);
}

.lecture-page .hero-rule {
  background: var(--lesson-accent);
}

.lecture-page :is(
  .hero-card,
  .execution-map,
  .focus-panel,
  .visual-panel,
  .simulation-panel,
  .primer-panel,
  .definition-panel,
  .content-panel,
  .blocking-panel,
  .javascript-panel,
  .deadlock-panel,
  .livelock-panel,
  .comparison-panel,
  .conditions-panel,
  .scenario-panel,
  .solution-panel,
  .explain-panel,
  .quiz-panel
) {
  border-color: var(--lesson-line);
  border-radius: 18px;
  background: var(--lesson-surface);
  box-shadow: var(--lesson-shadow);
}

.lecture-page .hero-card {
  position: relative;
  z-index: 1;
  border-top: 4px solid var(--lesson-accent);
}

.lecture-page .hero-card__label {
  letter-spacing: 0.1em;
}

.lecture-page .hero-contrast article,
.lecture-page .definition-card,
.lecture-page .condition-card,
.lecture-page .scenario-card,
.lecture-page .solution-card,
.lecture-page .event-card,
.lecture-page .content-card,
.lecture-page .process-card,
.lecture-page .scenario-lane,
.lecture-page .diagram-node {
  border-color: var(--lesson-line);
  background: var(--lesson-surface-alt);
}

.lecture-page .focus-panel {
  border: 1px solid var(--lesson-line);
  border-left: 4px solid var(--lesson-accent);
  background: var(--lesson-surface);
  box-shadow: none;
}

.lecture-page .focus-answer,
.lecture-page .focus-summary {
  border-left-color: var(--lesson-accent);
  background: var(--lesson-accent-soft);
}

.lecture-page .visual-contract,
.lecture-page .learning-visual,
.lecture-page .visual-stage,
.lecture-page .resource-stage {
  border-color: var(--lesson-line);
  border-radius: 14px;
  background: var(--lesson-surface-alt);
}

.lecture-page .visual-contract__steps li,
.lecture-page .visual-stage,
.lecture-page .resource-stage {
  background: var(--lesson-surface);
}

.lecture-page .visual-control,
.lecture-page .map-action,
.lecture-page .comparison-choice,
.lecture-page .visual-tab {
  border-color: var(--lesson-line);
  background: var(--lesson-surface);
  color: var(--lesson-ink);
}

.lecture-page .visual-control:hover,
.lecture-page .visual-control:focus-visible,
.lecture-page .map-action:hover,
.lecture-page .map-action:focus-visible,
.lecture-page .comparison-choice:hover,
.lecture-page .comparison-choice:focus-visible,
.lecture-page .visual-tab:hover,
.lecture-page .visual-tab:focus-visible {
  border-color: var(--lesson-accent);
  color: var(--lesson-accent);
}

.lecture-page :is(
  .visual-control[data-visual-action="play"],
  .visual-control[data-visual-action="next"],
  .map-action,
  .comparison-choice[aria-pressed="true"],
  .visual-tab[aria-selected="true"]
) {
  border-color: var(--lesson-accent);
  background: var(--lesson-accent);
  color: #ffffff !important;
}

.lecture-page .visual-tab[aria-selected="true"] {
  box-shadow: inset 0 -3px 0 #0d3d9f;
}

.lecture-page .visual-stage__status,
.lecture-page .visual-checkpoint,
.lecture-page .callout {
  border-left-color: var(--lesson-accent);
  background: var(--lesson-accent-soft);
}

.lecture-page :is(.timeline-step, .timeline-slot, .map-step, [data-visual-step]) {
  transition: opacity 240ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1), border-color 240ms ease, background-color 240ms ease, box-shadow 240ms ease;
}

.lecture-page :is(.timeline-step, .timeline-slot, .map-step, [data-visual-step]).is-active {
  position: relative;
  z-index: 1;
  border-color: var(--lesson-accent);
  background: var(--lesson-accent-soft);
  box-shadow: 0 10px 24px rgb(24 87 209 / 13%);
}

.lecture-page .visual-stage__status {
  font-size: 0.96rem;
  font-weight: 800;
}

.lecture-page [data-lesson-visual].is-changing .visual-stage__status {
  animation: lesson-status-change 420ms ease both;
}

.lecture-page .quiz-panel {
  border-top: 4px solid var(--lesson-accent);
}

.lecture-page .quiz-answers,
.lecture-page .answer-box {
  border-top-color: var(--lesson-line);
}

.lecture-page .quiz-answers summary,
.lecture-page .answer-box summary {
  color: var(--lesson-accent);
}

.lecture-page .reveal-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 560ms ease var(--reveal-delay, 0ms), transform 560ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
}

.lecture-page .reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: none;
}

@keyframes lesson-status-change {
  0% { opacity: 0.35; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .lecture-page .lesson-hero { padding-inline: 16px; }
  .lecture-page .lesson-main { padding-inline: 16px; }
  .lecture-page .hero-card,
  .lecture-page .focus-panel,
  .lecture-page .visual-panel,
  .lecture-page .simulation-panel,
  .lecture-page .primer-panel,
  .lecture-page .definition-panel,
  .lecture-page .content-panel,
  .lecture-page .blocking-panel,
  .lecture-page .javascript-panel,
  .lecture-page .deadlock-panel,
  .lecture-page .livelock-panel,
  .lecture-page .comparison-panel,
  .lecture-page .conditions-panel,
  .lecture-page .scenario-panel,
  .lecture-page .solution-panel,
  .lecture-page .explain-panel,
  .lecture-page .quiz-panel {
    padding: 20px 18px;
  }

  .lecture-page .visual-stage__status { font-size: 0.9rem; }
}

@media (max-width: 390px) {
  .lecture-page .hero-contrast,
  .lecture-page .resource-board,
  .lecture-page .metric-row {
    grid-template-columns: 1fr;
  }

  .lecture-page .visual-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lecture-page .visual-control,
  .lecture-page .map-action,
  .lecture-page .comparison-choice,
  .lecture-page .visual-tab {
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lecture-page .reveal-on-scroll,
  .lecture-page .reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .lecture-page [data-lesson-visual].is-changing .visual-stage__status {
    animation: none;
  }
}