/* Reading components: SANGO's official block guides informed their roles.
   The implementation uses the existing Muse course palette and assets. */
body:has(.home-index) { background:#fff; }
.header-inner { width:min(100% - 36px,820px); min-height:84px; }
body:has(.lesson-layout) .header-inner { max-width:760px; }
.brand { gap:12px; }
.brand-mark { width:52px; height:52px; }
.brand-copy strong { font-size:22px; }
.brand-copy small { font-size:12px; }
.lesson-article { --reading-blue:#0866e8; --reading-ink:#263d53; }
.lesson-article .lesson-section { margin-top:40px; }
.lesson-article .lesson-section + .lesson-section { margin-top:72px; }
.lesson-article .section-title {
  position:relative; margin:0 0 30px; padding:17px 22px;
  border:0; border-radius:9px; background:#0866e8; color:#fff;
  box-shadow:0 4px 0 #deecfc; font-size:25px; line-height:1.55;
  text-wrap:pretty; overflow-wrap:anywhere;
}
.lesson-article .prose { line-height:1.85; color:var(--reading-ink); }
.lesson-article .prose p { margin:0 0 1.8em; }
.lesson-article .prose p:last-child { margin-bottom:0; }
.lesson-body > .prose + .prose { margin-top:1.8em; }
.lesson-article .lesson-subheading {
  margin:2.1em 0 1.05em; padding:0 0 .6em;
  border-bottom:2px solid #dce9f7; color:#174d82;
  font-size:23px; font-weight:700; line-height:1.6; text-wrap:pretty;
}
.lesson-article .lesson-subheading:first-child { margin-top:0; }
.lesson-article .lesson-diagram { margin:36px 0 42px; }
.lesson-article .lesson-diagram .figure { margin:0; }
.lesson-article .lesson-diagram img { width:100%; height:auto; max-height:380px; object-fit:contain; background:#fff; }
.lesson-article .lesson-diagram figcaption { font-size:15px; line-height:1.8; }
.lesson-article .lesson-highlight { font-weight:700; color:#243b50; }
.lesson-article .lesson-highlight mark {
  padding:0 .08em; color:inherit; background:linear-gradient(transparent 62%,#fff0a8 62%,#fff0a8 96%,transparent 96%);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.lesson-article .steps { margin:30px 0 0; }
.lesson-article .steps > li { display:block; padding:0 0 56px; }
.lesson-article .steps > li::before { display:none; }
.step-heading { display:flex; align-items:flex-start; gap:12px; margin:0 0 28px; }
.lesson-article .step-number {
  width:34px; height:34px; flex:none; margin:3px 0 0; border:0;
  border-radius:9px; background:#e8f2ff; color:#0752b5; font-size:17px;
}
.lesson-article .step-heading h3, .lesson-article .video-group-item h3 {
  flex:1; position:relative; margin:0; padding:0 0 11px;
  border-bottom:3px solid #dfebf9; color:#174d82;
  font-size:22px; line-height:1.65; text-wrap:pretty;
}
.lesson-article .step-heading h3::after, .lesson-article .video-group-item h3::after {
  content:""; position:absolute; width:58px; height:3px; left:0; bottom:-3px; background:#0866e8;
}
.lesson-article .video-group-item h3 { margin-bottom:20px; }
.lesson-article .step-body { min-width:0; }
.lesson-article .copy-box {
  margin:34px 0; border:1px solid #b9d3ef; border-radius:11px;
  background:#f7faff; box-shadow:0 3px 0 #edf3fa; overflow:hidden;
}
.lesson-article .copy-head {
  padding:12px 16px; background:#eaf3ff; border-bottom:1px solid #cfe0f4;
  align-items:center; gap:12px; color:#174d82; font-size:15px; line-height:1.55;
}
.lesson-article .copy-head > span { min-width:0; font-weight:800; }
.lesson-article .copy-button { flex:none; min-height:44px; padding:8px 13px; border-radius:7px; }
.lesson-article .copy-box pre { margin:0; padding:23px; font-size:16px; line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere; }
.lesson-article .lesson-callout {
  display:flex; align-items:flex-start; gap:12px; margin:34px 0;
  border:1px solid #ccdded; border-radius:9px;
  padding:20px; background:#f6f9fc; font-size:16px; line-height:1.85;
}
.lesson-callout-icon {
  display:grid; place-items:center; flex:none; width:23px; height:23px;
  margin-top:3px; border-radius:50%; background:#668bb0; color:#fff;
  font-size:15px; font-weight:800; line-height:1;
}
.lesson-callout-content { min-width:0; }
.lesson-callout-title { display:block; margin:0 0 8px; color:#294e70; font-size:16px; font-weight:800; }
.lesson-article .lesson-callout .prose { line-height:1.85; }
.lesson-article .lesson-callout .prose p { margin-bottom:1.5em; }
.lesson-article .lesson-callout .prose p:last-child { margin-bottom:0; }
.lesson-article .lesson-callout-warning { background:#fffaf0; border-color:#e2bd82; }
.lesson-callout-warning .lesson-callout-icon { background:#a56b17; }
.lesson-callout-warning .lesson-callout-title { color:#785016; }
.lesson-article .check { margin:32px 0 0; padding:4px 0 4px 14px; border-left:3px solid #a2c6ac; }
.lesson-article .check > strong { display:block; margin:0 0 4px; color:#3b6547; font-size:14px; }
.reading-check-icon { display:inline-grid; place-items:center; width:21px; height:21px; margin-right:7px; border-radius:50%; background:#e3f0e7; color:#326442; font-size:13px; vertical-align:middle; }
.lesson-article .check .prose { font-size:16px; line-height:1.8; }
.lesson-article .bullet-list, .lesson-article .prereq ul { padding-left:1.5em; margin:18px 0 24px; }
.lesson-article .bullet-list > li, .lesson-article .prereq li { padding-left:.2em; margin:12px 0; line-height:1.85; }
.lesson-article .bullet-list > li::marker { color:#0866e8; font-size:1.1em; }
.lesson-article .prereq li::marker { content:"✔  "; color:#28764c; font-size:.85em; }
.lesson-article .table-scroll { margin:26px 0 32px; border:1px solid #bdd3e9; border-radius:10px; background:#fff; }
.lesson-article .lesson-table { font-size:16px; line-height:1.85; }
.lesson-article .lesson-table caption { padding:15px 18px; background:#eaf3ff; color:#174d82; font-weight:800; }
.lesson-article .lesson-table th { padding:14px 18px; background:#2167b4; color:#fff; white-space:normal; border-bottom:1px solid #bdd3e9; }
.lesson-article .lesson-table td { padding:17px 18px; border-bottom:1px solid #d6e3ef; }
.lesson-article .lesson-table th + th, .lesson-article .lesson-table td + td { border-left:1px solid #d6e3ef; }
.lesson-article .lesson-table tbody tr:nth-child(even) { background:#f3f8fd; }
.lesson-article .table-compact .lesson-table { min-width:0; table-layout:fixed; }
.lesson-article .table-compact .lesson-table td { min-width:0; overflow-wrap:anywhere; }
.lesson-article .table-compact::after { display:none; }
.lesson-article .hina-reading-guide { display:flex; align-items:flex-start; gap:16px; margin:30px 0; }
.hina-reading-portrait { flex:none; width:70px; text-align:center; }
.hina-reading-portrait img { display:block; width:64px; height:64px; margin:auto; border-radius:50%; border:2px solid #e0ecf8; background:#f2f7fc; object-fit:contain; }
.hina-reading-portrait span { display:block; margin-top:6px; font-size:12px; font-weight:700; color:#4b6379; }
.hina-reading-bubble { position:relative; flex:1; min-width:0; padding:20px; border:1px solid #c1d8ee; border-radius:13px; background:#f3f8ff; }
.hina-reading-bubble::before { content:""; position:absolute; left:-7px; top:23px; width:12px; height:12px; background:#f3f8ff; border-left:1px solid #c1d8ee; border-bottom:1px solid #c1d8ee; transform:rotate(45deg); }
.lesson-article .hina-reading-bubble .prose { font-size:16px; line-height:1.8; }
.lesson-article .copy-example { margin:34px 0; }
.lesson-article .copy-example .copy-box { margin:0; }
.lesson-article .work-gallery-landscape .figure img { width:100%; height:auto; max-height:58svh; }
.lesson-article .completion { border:1px solid #c4dcef; background:#f3f8fe; }
.lesson-article .completion h2 { font-size:22px; }
.lesson-sidebar { display:none; }
.toc-target { scroll-margin-top:104px; }
.toc-target:focus:not(:focus-visible) { outline:none; }
@media(min-width:1000px) {
  body:has(.lesson-layout) .header-inner { width:min(100% - 120px,880px); max-width:none; }
  body:has(.home-index) .header-inner { width:min(100% - 96px,1000px); }
  .lesson-layout .lesson-article { width:calc(100% - 120px); max-width:920px; margin-inline:auto; min-width:0; }
  main:has(.home-index) { width:min(100%,1120px); padding-top:32px; }
  .home-index { width:calc(100% - 96px); max-width:1000px; }
  .home-index .course-entrance img { max-height:min(60svh,560px); }
  .home-index .unit-grid { gap:24px; }
  .home-index .unit-card h3 { font-size:22px; }
  .home-index .unit-card p { font-size:16px; line-height:1.75; }
}
@media(min-width:1280px) {
  body:has(.lesson-layout) {
    --toc-width:clamp(240px,calc(50vw - 520px),320px);
    --reader-width:clamp(960px,calc(100vw - 320px),1080px);
    --reader-left:max(18px,calc((100% - var(--reader-width) - var(--toc-width) - 20px)/2));
    --article-inset:max(60px,calc((var(--reader-width) - 920px)/2));
  }
  body:has(.lesson-layout) .header-inner {
    width:calc(var(--reader-width) + var(--toc-width) + 20px - var(--article-inset));
    margin-left:calc(var(--reader-left) + var(--article-inset));
    margin-right:0;
  }
  main:has(.lesson-layout) {
    width:var(--reader-width);
    margin-left:var(--reader-left);
    margin-right:0;
  }
  .lesson-layout { display:grid; grid-template-columns:100% var(--toc-width); gap:20px; align-items:start; width:100%; margin:0; }
  .lesson-layout .lesson-toc { display:none; }
  .lesson-sidebar { display:block; align-self:stretch; min-width:0; }
  .sidebar-brain { margin:0 0 24px; }
  .sidebar-brain h2 { margin:0 0 12px; color:var(--navy); font-size:16px; line-height:1.5; }
  .sidebar-brain-card { display:block; border:1px solid #cbdfee; border-radius:10px; overflow:hidden; background:#fff; color:#263d53; text-decoration:none; }
  .sidebar-brain-card + .sidebar-brain-card { margin-top:12px; }
  .sidebar-brain-card:hover { border-color:#0866e8; }
  .sidebar-brain-card:hover strong { text-decoration:underline; text-underline-offset:3px; }
  .sidebar-brain-card img { display:block; width:100%; height:auto; }
  .sidebar-brain-copy { display:grid; gap:4px; padding:10px 12px; }
  .sidebar-brain-copy strong { color:#0752b5; font-size:14px; line-height:1.5; }
  .sidebar-brain-copy p { margin:0; font-size:13px; line-height:1.55; }
  .sidebar-brain-credit { color:#4b6379; font-size:11px; font-weight:700; }
  .sidebar-toc { position:sticky; top:98px; max-height:calc(100dvh - 120px); overflow:auto; scrollbar-width:thin; border:1px solid #cbdfee; border-radius:10px; background:#fff; box-shadow:0 4px 18px #294c7310; }
  .sidebar-toc-title { padding:14px 18px; background:#0866e8; color:#fff; font-size:17px; font-weight:800; line-height:1.5; }
  .sidebar-toc-title span { margin-right:7px; font-size:17px; }
  .lesson-sidebar nav { padding:14px 14px 17px; }
  .lesson-sidebar ol { list-style:none; padding:0; margin:0; }
  .lesson-sidebar nav > ol > li + li { margin-top:9px; padding-top:9px; border-top:1px solid #e8eef5; }
  .lesson-sidebar button { display:block; width:100%; border:0; border-radius:5px; background:transparent; color:#3d586e; text-align:left; padding:8px 10px; font-size:14px; font-weight:700; line-height:1.65; overflow-wrap:anywhere; }
  .lesson-sidebar ol ol { margin:3px 0 3px 10px; border-left:1px solid #d8e6f3; padding-left:6px; }
  .lesson-sidebar ol ol button { font-size:13px; font-weight:400; padding:7px 8px; }
  .lesson-sidebar button:hover { color:#0752b5; background:#f1f7ff; }
  .lesson-sidebar button[aria-current="location"] { color:#0752b5; background:#eaf3ff; font-weight:700; }
}
@media(max-width:700px) {
  .lesson-article .lesson-subheading { font-size:21px; margin-top:1.9em; }
  .lesson-article .lesson-diagram { margin:30px 0 36px; }
  .header-inner { min-height:72px; }
  .brand { gap:8px; }
  .brand-mark { width:44px; height:44px; }
  .brand-copy strong { font-size:19px; }
  .brand-copy small { font-size:11px; }
  .lesson-article .section-title { font-size:22px; padding:16px 18px; margin-bottom:28px; }
  .lesson-article .lesson-section + .lesson-section { margin-top:48px; }
  .lesson-article .step-heading { gap:10px; }
  .lesson-article .step-heading h3 { font-size:20px; }
  .lesson-article .steps > li { display:block; padding-left:0; padding-bottom:46px; }
  .lesson-article .copy-head { padding:11px 12px; gap:9px; font-size:14px; }
  .lesson-article .copy-button { padding:8px 10px; font-size:14px; }
  .lesson-article .copy-box pre { padding:16px; }
  .lesson-article .lesson-callout { padding:16px; gap:9px; }
  .lesson-article .hina-reading-guide { gap:12px; }
  .lesson-article .lesson-table { font-size:15px; }
  .lesson-article .lesson-table th, .lesson-article .lesson-table td { padding:13px 14px; }
  .hina-reading-portrait { width:56px; }
  .hina-reading-portrait img { width:54px; height:54px; }
  .hina-reading-bubble { padding:16px; }
}
@media(max-width:380px) {
  .header-inner { width:calc(100% - 28px); gap:8px; }
  .brand-mark { width:40px; height:40px; }
  .brand-copy strong { font-size:16px; }
  .brand-copy small { font-size:10px; }
}
@media(forced-colors:active) {
  .lesson-article .lesson-highlight mark { background:none; text-decoration:underline; }
  .lesson-article .section-title { border:2px solid CanvasText; }
}