/*
 * Styles for the learner lesson reader.
 *
 * Keep this file scoped under [data-lesson-reader]. The reader has cross-cutting
 * states (reading mode, drawer, generated lesson prose) that are easier to keep
 * correct in CSS than with Tailwind utilities alone.
 */

[data-lesson-reader] [data-reading-mode-only] {
  display: none !important;
}

/* Site chrome is outside [data-lesson-reader], but still participates in reading mode. */
body.lesson-reading-mode [data-reading-mode-hide] {
  display: none !important;
}

body.lesson-reading-mode [data-lesson-reader] [data-reading-mode-only="block"] {
  display: block !important;
}

body.lesson-reading-mode [data-lesson-reader] [data-reading-mode-only="flex"] {
  display: flex !important;
}

body.lesson-reading-mode [data-lesson-reader] [data-reading-mode-only="inline-flex"] {
  display: inline-flex !important;
}

body.lesson-reading-mode [data-lesson-reader] [data-reading-mode-shell] {
  max-width: none;
}

body.lesson-reading-mode [data-lesson-reader] [data-reader-main] {
  padding: 0 !important;
}

body.lesson-reading-mode [data-lesson-reader] [data-reading-mode-frame] {
  max-width: none;
  margin-inline: 0;
}

body.lesson-reading-mode [data-lesson-reader] [data-reader-top-bar] {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface-frame) 16%, transparent);
  background-color: var(--color-surface-frame);
  color: var(--color-on-surface-frame);
  backdrop-filter: none;
  padding: 1rem clamp(1.5rem, 3vw, 2rem);
}

body.lesson-reading-mode [data-lesson-reader] [data-reader-top-bar] [data-reader-context] {
  color: color-mix(in srgb, var(--color-on-surface-frame) 74%, transparent) !important;
}

body.lesson-reading-mode [data-lesson-reader] [data-reader-top-bar] h1,
body.lesson-reading-mode [data-lesson-reader] [data-reader-top-bar] nav {
  color: var(--color-on-surface-frame) !important;
}

body.lesson-reading-mode [data-lesson-reader] [data-reader-top-bar] .lesson-reader-action:not(.lesson-reader-action-primary) {
  border-color: var(--color-on-surface-frame) !important;
  background-color: transparent !important;
  color: var(--color-on-surface-frame) !important;
}

body.lesson-reading-mode [data-lesson-reader] [data-reader-top-bar] .lesson-reader-action[aria-pressed="true"]:not(.lesson-reader-action-primary) {
  background-color: color-mix(in srgb, var(--color-on-surface-frame) 14%, transparent) !important;
}

body.lesson-reading-mode [data-lesson-reader] [data-reader-top-bar] nav .lesson-reader-action {
  border-color: var(--color-on-surface-frame) !important;
  background-color: transparent !important;
  color: var(--color-on-surface-frame) !important;
}

body.lesson-reading-mode [data-lesson-reader] [data-course-plan-panel] [data-action="lesson-reading-mode#closePlan"] {
  border-color: color-mix(in srgb, var(--color-interactive) 72%, var(--academy-border)) !important;
  background-color: color-mix(in srgb, var(--color-interactive) 8%, var(--color-surface-a)) !important;
  color: var(--color-interactive) !important;
}

body.lesson-reading-mode [data-lesson-reader] [data-lesson-canvas] {
  max-width: var(--lesson-reading-frame-max-width, 56rem);
  margin-inline: auto;
  padding: 1rem clamp(1rem, 3vw, 2rem) 0;
}

[data-lesson-reader] [data-reading-mode-backdrop] {
  display: none;
}

[data-lesson-reader] [data-course-plan-panel][aria-hidden="true"] {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: min(24rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  overflow-y: auto;
  border-right: 1px solid var(--academy-border);
  border-top: 0 !important;
  transform: translateX(-100%);
}

body.lesson-reading-mode [data-lesson-reader] [data-course-plan-panel] {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: min(24rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  overflow-y: auto;
  border-right: 1px solid var(--academy-border);
  border-top: 0 !important;
  transform: translateX(-100%);
  transition: transform 180ms ease;
}

body.lesson-reading-mode.lesson-plan-drawer-open {
  overflow: hidden;
}

body.lesson-reading-mode.lesson-plan-drawer-open [data-lesson-reader] [data-course-plan-panel] {
  box-shadow: 24px 0 64px color-mix(in srgb, var(--color-on-surface-a) 20%, transparent);
  transform: translateX(0);
}

body.lesson-reading-mode.lesson-plan-drawer-open [data-lesson-reader] [data-reading-mode-backdrop] {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 40;
  background-color: color-mix(in srgb, var(--color-on-surface-a) 28%, transparent);
}

[data-lesson-reader] .lesson-reader-action {
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}

[data-lesson-reader] .lesson-reader-action:focus-visible {
  outline: 2px solid var(--color-link-a);
  outline-offset: 3px;
}

[data-lesson-reader] .lesson-reader-action:active,
[data-lesson-reader] .lesson-reader-plan-link:active {
  box-shadow: none;
  transform: translate(0, 0);
}

[data-lesson-reader] .lesson-reader-action[aria-pressed="true"]:not(.lesson-reader-action-primary) {
  background-color: color-mix(in srgb, var(--color-on-surface-a) 8%, var(--color-surface-a)) !important;
}

[data-lesson-reader] .lesson-reader-action-primary {
  border-color: var(--color-interactive) !important;
  background-color: var(--color-interactive) !important;
  color: var(--color-on-interactive) !important;
}

[data-lesson-reader] .lesson-reader-action-primary:focus-visible {
  outline-color: var(--color-interactive);
}

@media (hover: hover) and (pointer: fine) {
  [data-lesson-reader] .lesson-reader-action:hover:not(.lesson-reader-action-primary) {
    background-color: color-mix(in srgb, var(--color-on-surface-a) 6%, var(--color-surface-a)) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--color-on-surface-a) 10%, transparent);
    transform: translateY(-1px);
  }

  [data-lesson-reader] .lesson-reader-action-primary:hover {
    background-color: color-mix(in srgb, var(--color-interactive) 92%, var(--color-on-interactive)) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--color-interactive) 28%, transparent);
    transform: translateY(-1px);
  }

  [data-lesson-reader] .lesson-reader-action-subtle:hover,
  [data-lesson-reader] .lesson-reader-plan-link:hover {
    background-color: color-mix(in srgb, var(--color-on-surface-a) 8%, transparent) !important;
    box-shadow: none;
  }

  body.lesson-reading-mode [data-lesson-reader] [data-reader-top-bar] .lesson-reader-action:hover:not(.lesson-reader-action-primary) {
    background-color: color-mix(in srgb, var(--color-on-surface-frame) 12%, transparent) !important;
    box-shadow: none;
  }

  body.lesson-reading-mode [data-lesson-reader] [data-reader-top-bar] nav .lesson-reader-action:hover {
    background-color: color-mix(in srgb, var(--color-on-surface-frame) 12%, transparent) !important;
  }

  body.lesson-reading-mode [data-lesson-reader] [data-course-plan-panel] [data-action="lesson-reading-mode#closePlan"]:hover {
    border-color: var(--color-interactive) !important;
    background-color: var(--color-interactive) !important;
    color: var(--color-on-interactive) !important;
    box-shadow: none;
  }

  [data-lesson-reader] .lesson-reader-plan-link:hover {
    transform: translateX(2px);
  }
}

[data-lesson-reader] .lesson-prose h1,
[data-lesson-reader] .lesson-prose h2,
[data-lesson-reader] .lesson-prose h3,
[data-lesson-reader] .lesson-prose h4,
[data-lesson-reader] .lesson-prose h5,
[data-lesson-reader] .lesson-prose h6 {
  margin-block: 1.75em 0.75em;
  font-weight: 650;
  line-height: 1.2;
}

[data-lesson-reader] .lesson-prose h1:first-child,
[data-lesson-reader] .lesson-prose h2:first-child,
[data-lesson-reader] .lesson-prose h3:first-child,
[data-lesson-reader] .lesson-prose h4:first-child,
[data-lesson-reader] .lesson-prose h5:first-child,
[data-lesson-reader] .lesson-prose h6:first-child {
  margin-top: 0;
}

[data-lesson-reader] .lesson-prose h2 {
  font-size: 1.5rem;
}

[data-lesson-reader] .lesson-prose h3 {
  font-size: 1.25rem;
}

[data-lesson-reader] .lesson-prose p,
[data-lesson-reader] .lesson-prose ul,
[data-lesson-reader] .lesson-prose ol,
[data-lesson-reader] .lesson-prose blockquote,
[data-lesson-reader] .lesson-prose pre,
[data-lesson-reader] .lesson-prose table {
  margin-block: 1em;
}

[data-lesson-reader] .lesson-prose ul,
[data-lesson-reader] .lesson-prose ol {
  padding-inline-start: 1.5rem;
}

[data-lesson-reader] .lesson-prose ul {
  list-style-type: disc;
}

[data-lesson-reader] .lesson-prose ol {
  list-style-type: decimal;
}

[data-lesson-reader] .lesson-prose li {
  padding-inline-start: 0.25rem;
}

[data-lesson-reader] .lesson-prose li + li {
  margin-top: 0.375rem;
}

[data-lesson-reader] .lesson-prose a {
  color: var(--color-link-a);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

[data-lesson-reader] .lesson-prose blockquote {
  border-inline-start: 3px solid var(--academy-border);
  color: var(--academy-text-muted);
  padding-inline-start: 1rem;
}

[data-lesson-reader] .lesson-prose code {
  font-size: 0.9em;
}

[data-lesson-reader] .lesson-prose pre {
  overflow-x: auto;
  padding: 1rem;
}