/* Reading Style Learning stays isolated so practice-mode layout remains independent. */
.panel-tab-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.reading-style-button { min-height: 34px; border: 2px solid #17483c; border-radius: 999px; padding: 7px 12px; background: #fff7c7; color: #17483c; font: inherit; font-size: .7rem; font-weight: 950; letter-spacing: .055em; line-height: 1; cursor: pointer; }
.reading-style-button:hover, .reading-style-button[aria-pressed="true"] { background: #d8ff70; box-shadow: 0 3px 0 #17483c; transform: translateY(-1px); }
.reading-style-button:focus-visible, .reading-return-button:focus-visible, .reading-toc a:focus-visible, .reading-source-links a:focus-visible { outline: 3px solid #8d3fd1; outline-offset: 3px; }

.workspace.is-reading-style { grid-template-columns: minmax(0, 1fr); }
.workspace.is-reading-style .lesson-panel { border-right: 0; background: #fbfff4; }
.workspace.is-reading-style .code-panel, .workspace.is-reading-style .exercise-guide, .workspace.is-reading-style .lesson-actions { display: none; }
.workspace.is-reading-style .lesson-content { width: min(100%, 1040px); margin-inline: auto; padding: clamp(34px, 5vw, 74px) clamp(18px, 5vw, 70px) 100px; }
.reading-lesson { color: var(--ink); }

.reading-hero { position: relative; overflow: hidden; border: 2px solid #17483c; border-radius: 24px; padding: clamp(26px, 5vw, 58px); background: #d8ff70; box-shadow: 9px 9px 0 #17483c; }
.reading-hero::after { position: absolute; right: -48px; bottom: -65px; width: 190px; height: 190px; border: 34px solid rgba(23, 72, 60, .12); border-radius: 50%; content: ""; }
.reading-lesson .reading-eyebrow { margin: 0 0 14px; color: #17483c; font-size: .75rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.lesson-content .reading-hero h2 { max-width: 760px; margin: 0; color: #143b32; font-size: clamp(2.15rem, 6vw, 4.8rem); letter-spacing: -.055em; line-height: .98; }
.reading-deck { max-width: 700px; margin: 22px 0 0; color: #21483e; font-size: clamp(1rem, 2vw, 1.22rem) !important; }
.reading-source-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.reading-source-links a { position: relative; z-index: 1; border: 1px solid #17483c; border-radius: 999px; padding: 8px 12px; background: #fbfff4; color: #17483c; font-size: .78rem; font-weight: 850; text-decoration: none; }
.reading-source-links a:hover { text-decoration: underline; }

.reading-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 0; }
.reading-summary-grid div { border: 1px solid #b8d7c7; border-radius: 14px; padding: 16px; background: #fff; }
.reading-summary-grid strong, .reading-summary-grid span { display: block; }
.reading-summary-grid strong { color: #17483c; font-size: 1.2rem; }
.reading-summary-grid span { margin-top: 4px; color: var(--muted); font-size: .82rem; }

.reading-toc { margin: 34px 0 48px; border-left: 5px solid #f0b429; padding: 4px 0 4px 22px; }
.reading-toc h3 { margin-top: 0; }
.reading-toc ol { columns: 2; column-gap: 42px; }
.reading-toc li { break-inside: avoid; margin: 8px 0; }
.reading-toc a { color: #17483c; font-weight: 800; text-underline-offset: 3px; }

.reading-chapter { scroll-margin-top: 72px; margin-top: 62px; border-top: 1px solid #b8d7c7; padding-top: 36px; }
.reading-chapter-head { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; }
.reading-chapter-number { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 13px; background: #17483c; color: #fff; font-size: 1.05rem; font-weight: 950; }
.lesson-content .reading-chapter h3 { margin: 0; color: #17483c; font-size: clamp(1.55rem, 3vw, 2.25rem); letter-spacing: -.025em; }
.reading-chapter > p, .reading-chapter > ul, .reading-chapter > ol { max-width: 76ch; }
.reading-objective { margin: 22px 0; border-left: 5px solid #8d3fd1; padding: 18px 20px; background: #f4eafa; }
.reading-objective > span { display: block; margin-bottom: 6px; color: #5a176f; font-size: .72rem; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.reading-objective p { margin: 0; }
.reading-steps, .reading-typing-lines { display: grid; width: 100%; max-width: 100%; min-width: 0; gap: 10px; margin: 24px 0; padding: 0; list-style: none; }
.reading-steps li { display: grid; min-width: 0; grid-template-columns: 42px minmax(0, 1fr); gap: 13px; align-items: start; margin: 0; border-bottom: 1px solid #c9dfd3; padding: 12px 0 15px; }
.reading-step-number { color: #8d3fd1; font-family: ui-monospace, monospace; font-size: .82rem; font-weight: 950; font-variant-numeric: tabular-nums; }
.reading-notes, .reading-requirements, .reading-troubleshooting { margin: 20px 0; border-radius: 14px; padding: 16px 22px 16px 42px; background: #fff; }
.reading-notes li, .reading-requirements li, .reading-troubleshooting li { margin-block: 10px; }
.reading-requirements li::marker { color: #16835f; }
.reading-troubleshooting li::marker { color: #d49d10; }
.reading-typing-lines li { min-width: 0; margin: 0; border: 1px solid #b8d7c7; border-radius: 12px; padding: 13px 14px; background: #fff; }
.reading-typing-lines li > span { display: block; margin-bottom: 8px; color: #17483c; font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.reading-typing-lines pre { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; margin: 0; border-radius: 8px; padding: 11px 12px; background: #eaf7ee; }
.reading-typing-lines code { padding: 0; background: transparent; color: #17483c; }
.reading-code { overflow-x: auto; margin: 22px 0; border: 2px solid #17483c; border-radius: 14px; padding: 20px; background: #102d27; color: #f4fff9; font-size: .86rem; line-height: 1.65; tab-size: 4; }
.lesson-content .reading-code code { padding: 0; background: transparent; color: inherit; }
.reading-command { margin-bottom: 12px; }
.reading-copy-button { min-height: 42px; border: 2px solid #17483c; border-radius: 10px; padding: 9px 14px; background: #fff7c7; color: #17483c; font: inherit; font-weight: 900; cursor: pointer; }
.reading-copy-button:hover { background: #d8ff70; }
.reading-checkpoint { margin: 24px 0; border: 1px solid #d49d10; border-radius: 14px; padding: 18px 20px; background: #fff7c7; }
.reading-checkpoint strong { color: #664400; }
.reading-checkpoint p:last-child { margin-bottom: 0; }
.reading-status-flow { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.reading-status-flow span { border-radius: 999px; padding: 8px 11px; background: #e2f5e9; color: #17483c; font-size: .78rem; font-weight: 900; }

.reading-footer { margin-top: 64px; border-radius: 20px; padding: clamp(24px, 4vw, 42px); background: #17483c; color: #f7fff9; text-align: center; }
.reading-footer h3 { margin-top: 0; color: #fff !important; font-size: 1.6rem !important; }
.reading-footer p { max-width: 600px; margin-inline: auto; }
.reading-return-button { min-height: 46px; border: 2px solid #fff; border-radius: 999px; padding: 11px 18px; background: #d8ff70; color: #143b32; font: inherit; font-weight: 950; cursor: pointer; }
.reading-return-button:hover { background: #fff7c7; }

@media (max-width: 720px) {
  .panel-tabs { align-items: flex-start; gap: 8px; padding-block: 10px; }
  .panel-tab-actions { flex-wrap: wrap; }
  .reading-style-button { max-width: 170px; white-space: normal; line-height: 1.2; }
  .workspace.is-reading-style { grid-template-rows: auto; }
  .workspace.is-reading-style .lesson-panel { min-height: 0; }
  .workspace.is-reading-style .lesson-content { padding: 24px 15px 70px; }
  .reading-hero { border-radius: 18px; box-shadow: 5px 5px 0 #17483c; }
  .reading-summary-grid { grid-template-columns: 1fr; }
  .reading-toc ol { columns: 1; }
  .reading-chapter { margin-top: 46px; padding-top: 28px; }
  .reading-chapter-head { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; }
  .reading-chapter-number { width: 40px; height: 40px; }
  .reading-code { margin-inline: -5px; padding: 15px; font-size: .78rem; }
  .reading-steps li { grid-template-columns: 34px minmax(0, 1fr); }
  .reading-objective { padding: 15px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .reading-style-button { transform: none !important; }
}