/* S21: BMS whole-course preview. Loaded after tokens and ds9a.css. Scope prefix s21-. Tokens only. */
.s21-main{max-width:none; overflow:visible}
.s21-tools{display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap; margin:0 0 var(--s-4); padding:var(--s-3) var(--s-4); background:var(--color-card); border:1px solid var(--color-line); border-radius:var(--radius)}
.s21-opt{display:inline-flex; align-items:center; gap:var(--s-2); font-size:var(--t-sm); font-weight:600; color:var(--color-ink); cursor:pointer}
.s21-opt input{width:18px; height:18px; accent-color:var(--color-accent-text)}
.s21-live{font-size:var(--t-xs); color:var(--color-muted); margin-left:auto}
#s21-tocbtn{display:none}
.s21-grid{display:grid; grid-template-columns:290px minmax(0,1fr); gap:var(--s-6); align-items:start}
.s21-toc{position:sticky; top:var(--s-4); max-height:calc(100vh - 2rem); overflow:auto; background:var(--color-card); border:1px solid var(--color-line); border-radius:var(--radius); padding:var(--s-4)}
.s21-toc h2{margin:0 0 var(--s-3); font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--color-muted)}
.s21-toc ol{list-style:none; margin:0; padding:0}
.s21-toc-sec{margin-bottom:var(--s-3)}
.s21-toc-sec>a{display:block; font-weight:800; font-size:var(--t-sm); color:var(--color-ink); text-decoration:none; padding:.25rem 0}
.s21-toc-sec[data-tone="red"]>a{color:var(--color-danger-ink)}
.s21-toc-sec[data-tone="green"]>a{color:var(--color-success-ink)}
.s21-toc-sec ol a{display:flex; gap:var(--s-2); align-items:baseline; padding:.3rem .5rem; margin-left:.1rem; border-left:3px solid transparent; border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-size:var(--t-sm); line-height:1.35; color:var(--color-body); text-decoration:none}
.s21-toc-sec ol a:hover{background:var(--color-bg); color:var(--color-ink)}
.s21-toc-sec ol a.is-current{border-left-color:var(--color-accent); background:var(--color-accent-wash); color:var(--color-ink); font-weight:700}
.s21-toc .n{flex:0 0 1.5rem; color:var(--color-muted); font-size:var(--t-xs); font-variant-numeric:tabular-nums}
.s21-toc em{font-style:normal; font-size:var(--t-xs); font-weight:700; color:var(--color-warning-ink); background:var(--color-warning-wash); border-radius:99px; padding:0 .45rem}
.s21-doc{min-width:0}
.s21-sec{margin-bottom:var(--s-7,3rem); scroll-margin-top:var(--s-4)}
.s21-sec-head{display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3) var(--s-4); border-radius:var(--radius); background:var(--color-ink); color:var(--color-on-accent); margin-bottom:var(--s-4)}
.s21-sec[data-tone="red"] .s21-sec-head{background:var(--color-danger-ink)}
.s21-sec[data-tone="green"] .s21-sec-head{background:var(--color-success-ink)}
.s21-sec-head h2{margin:0; font-size:var(--t-lg); color:inherit}
.s21-count{margin-left:auto; font-size:var(--t-xs); opacity:.85}
.s21-tone{width:10px; height:10px; border-radius:50%; background:var(--color-accent)}
.s21-lesson{background:var(--color-card); border:1px solid var(--color-line); border-radius:var(--radius); padding:var(--s-5); margin-bottom:var(--s-5); scroll-margin-top:var(--s-4)}
.s21-lesson.is-draft{border-style:dashed; border-color:var(--color-warning); background:var(--color-warning-wash)}
.s21-lhead{display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; padding-bottom:var(--s-3); margin-bottom:var(--s-4); border-bottom:1px solid var(--color-line)}
.s21-ln{flex:0 0 100%; font-size:var(--t-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--color-muted)}
.s21-lhead h3{margin:0; font-size:var(--t-xl); line-height:1.2}
.s21-lhead h3 a{color:var(--color-ink); text-decoration:none}
.s21-lhead h3 a:hover{color:var(--color-accent-text); text-decoration:underline}
.s21-bsp{flex:1 1 auto}
.s21-pill{font-size:var(--t-xs); font-weight:700; padding:.15rem .6rem; border-radius:99px; background:var(--color-success-wash); color:var(--color-success-ink)}
.s21-pill.is-draft{background:var(--color-warning-wash); color:var(--color-warning-ink); border:1px solid var(--color-warning)}
.s21-draftnote{margin:0 0 var(--s-4); font-size:var(--t-sm); color:var(--color-warning-ink)}
.s21-prose{max-width:46rem; font-size:var(--t-base); line-height:1.7; color:var(--color-body)}
.s21-text{margin:0 0 var(--s-4)}
.s21-text a,.s21-callout a{color:var(--color-accent-text); text-decoration:underline}
.s21-h{margin:var(--s-5) 0 var(--s-3); color:var(--color-ink); line-height:1.25}
h3.s21-h{font-size:var(--t-xl)} h4.s21-h{font-size:var(--t-lg)} h5.s21-h{font-size:var(--t-base)}
.s21-list{margin:0 0 var(--s-4); padding-left:1.4rem} .s21-list li{margin-bottom:var(--s-2)}
.s21-callout{margin:var(--s-4) 0; padding:var(--s-3) var(--s-4); border-radius:var(--radius); border-left:4px solid var(--color-info); background:var(--color-info-wash); color:var(--color-info-ink)}
.s21-callout.k-warning,.s21-callout.k-warn{border-left-color:var(--color-warning); background:var(--color-warning-wash); color:var(--color-warning-ink)}
.s21-callout.k-danger,.s21-callout.k-error{border-left-color:var(--color-danger); background:var(--color-danger-wash); color:var(--color-danger-ink)}
.s21-callout.k-success,.s21-callout.k-green,.s21-callout.k-tip{border-left-color:var(--color-success); background:var(--color-success-wash); color:var(--color-success-ink)}
.s21-fig{margin:var(--s-4) 0}
.s21-fig img{display:block; max-width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--color-line)}
.s21-fig figcaption{font-size:var(--t-sm); color:var(--color-muted); margin-top:var(--s-2)}
.s21-ph{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; min-height:140px; border:1px dashed var(--color-line); border-radius:var(--radius); background:var(--color-bg); color:var(--color-muted); font-size:var(--t-sm); font-weight:700}
.s21-ph span{font-weight:400; font-size:var(--t-xs)} .s21-ph small{font-weight:400; max-width:90%; text-align:center}
.s21-yt{margin:var(--s-4) 0}
.s21-yt-box{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s-2); aspect-ratio:16/9; max-height:320px; width:100%; border-radius:var(--radius); background:var(--color-ink); color:var(--color-on-accent); text-decoration:none; font-size:var(--t-sm)}
.s21-yt-box small{opacity:.75} .s21-yt-box:hover{text-decoration:none; box-shadow:0 0 0 3px var(--color-accent)}
.s21-play{width:56px; height:56px; border-radius:50%; background:var(--color-accent); position:relative}
.s21-play::after{content:""; position:absolute; left:22px; top:16px; border-style:solid; border-width:12px 0 12px 19px; border-color:transparent transparent transparent #fff}
.s21-pdf{display:flex; align-items:center; gap:var(--s-3); margin:var(--s-4) 0; padding:var(--s-3) var(--s-4); background:var(--color-card); border:1px solid var(--color-line); border-radius:var(--radius); text-decoration:none; color:var(--color-ink)}
.s21-pdf:hover{border-color:var(--color-accent); text-decoration:none}
.s21-pdf small{display:block; color:var(--color-muted); font-size:var(--t-xs)}
.s21-pdf-ic{flex:0 0 auto; width:40px; height:40px; border-radius:var(--radius-sm); background:var(--color-danger-wash); color:var(--color-danger-ink); display:flex; align-items:center; justify-content:center; font-size:var(--t-xs); font-weight:800}
.s21-lfoot{margin-top:var(--s-4); padding-top:var(--s-3); border-top:1px solid var(--color-line); font-size:var(--t-sm)}
.s21-lfoot a{color:var(--color-accent-text); font-weight:700}
.hide-drafts .is-draft{display:none}
.hide-media .s21-fig,.hide-media .s21-yt{display:none}
@media (max-width:960px){
  .s21-grid{grid-template-columns:1fr}
  #s21-tocbtn{display:inline-flex}
  .s21-toc{display:none; position:fixed; inset:var(--s-4); top:4rem; z-index:50; max-height:none; box-shadow:var(--shadow)}
  .s21-toc.is-open{display:block}
  .s21-lesson{padding:var(--s-4)}
  .s21-lhead h3{font-size:var(--t-lg)}
}
@media print{
  .admin-sidebar,.s21-toc,.s21-tools,.bms-pg-head .btn,.s21-lfoot{display:none!important}
  .s21-lesson{break-inside:auto; border-color:#999}
  .s21-lhead{break-after:avoid}
}