/* Engineering Atlas: course pages (hub, module, lesson, interview questions).
   Loaded only on course pages, after atlas.css; uses its tokens. */

.btn--primary{background:var(--color-accent-primary); color:#fff;}
.btn--primary:hover{background:var(--color-accent-primary-strong); color:#fff;}
.course .btn{min-height:42px; padding:10px 18px;}

/* ---------- icons + pills ---------- */
.ci{width:16px; height:16px; flex:none; display:inline-block; vertical-align:-3px;}
.pill{display:inline-flex; align-items:center; gap:5px; font-family:var(--font-heading); font-size:var(--text-2xs); font-weight:var(--weight-bold); letter-spacing:.04em; text-transform:uppercase; line-height:1; padding:5px 9px; border-radius:var(--radius-pill); white-space:nowrap; border:1px solid transparent;}
.pill .ci{width:11px; height:11px; vertical-align:0;}
.pill--free{background:var(--color-success-soft); color:var(--color-success-text); border-color:var(--color-success-border);}
.pill--premium{background:var(--color-accent-primary-soft); color:var(--color-accent-primary-strong); border-color:var(--color-accent-primary-border);}
.pill--soon{background:var(--color-surface-sunken); color:var(--color-text-muted); border-color:var(--color-border);}
.pill--draft{background:var(--color-warning-soft); color:var(--color-warning-text); border-color:var(--color-warning-border);}

/* ---------- two-column layout: course menu + reading column (menu can be hidden: focus mode) ---------- */
.course-layout{max-width:1320px; margin:0 auto; padding:var(--space-5) var(--gutter) var(--space-8); display:grid; grid-template-columns:272px minmax(0,1fr); gap:var(--space-8); align-items:start;}
.course-main{min-width:0;}
.course-main > .lesson,.course-main > .module-page,.course-bar{max-width:var(--content-width); margin-left:auto; margin-right:auto;}
.course-bar{display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-6); min-height:34px;}
.course-bar .breadcrumbs{margin:0; min-width:0;}
.focus-btn{flex:none; display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px 0 10px; border:1px solid var(--color-border); border-radius:var(--radius-pill); background:var(--color-surface-raised); color:var(--color-text-secondary); font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-semibold); cursor:pointer; transition:border-color var(--transition-fast), color var(--transition-fast);}
.focus-btn:hover{border-color:var(--color-accent-primary); color:var(--color-accent-primary);}
.focus-btn .ci{width:15px; height:15px; vertical-align:0;}
.ci--toc{width:10px; height:10px; margin-right:5px; vertical-align:0; color:var(--color-text-muted);}

/* sidebar: course contents */
.course-drawer{position:sticky; top:calc(var(--header-height) + var(--space-5)); min-width:0;}
.course-drawer__btn{display:none;}
.course-nav{max-height:calc(100vh - var(--header-height) - var(--space-7)); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding-right:var(--space-2); font-family:var(--font-heading); font-size:var(--text-sm);}
.course-nav__title{margin:0 0 var(--space-3); padding-bottom:var(--space-3); border-bottom:2px solid var(--color-accent-primary); font-size:var(--text-xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps);}
.course-nav__title a{color:var(--color-text-primary); text-decoration:none;}
.course-nav__title a:hover{color:var(--color-accent-primary);}
.course-nav ol{list-style:none; margin:0; padding:0;}
.cn-module{margin:0 0 2px;}
.cn-module > details > summary{list-style:none; cursor:pointer; display:flex; gap:10px; align-items:baseline; padding:7px 8px; border-radius:var(--radius-sm); color:var(--color-text-secondary); font-weight:var(--weight-semibold); line-height:1.35;}
.cn-module > details > summary::-webkit-details-marker{display:none;}
.cn-module > details > summary:hover{background:var(--color-surface); color:var(--color-text-primary);}
.cn-module__t{flex:1; min-width:0;}
.cn-module__no{flex:none; font-family:var(--font-mono); font-size:var(--text-xs); font-weight:var(--weight-medium); color:var(--color-text-muted);}
.ci--mod{width:11px; height:11px; align-self:center; color:var(--color-text-muted); opacity:.7;}
.cn-module > details[open] > summary{color:var(--color-text-primary);}
.cn-module.is-current > details > summary{color:var(--color-accent-primary-strong); background:var(--color-accent-primary-soft);}
.cn-module.is-current > details > summary .cn-module__no{color:var(--color-accent-primary);}
.cn-overview{display:block; margin:4px 0 0 14px; padding:5px 8px 5px 13px; border-left:1px solid var(--color-separator); font-family:var(--font-body); font-size:.8125rem; color:var(--color-text-muted); text-decoration:none;}
.cn-overview:hover{color:var(--color-accent-primary);}
.cn-overview[aria-current="page"]{color:var(--color-accent-primary-strong); font-weight:var(--weight-semibold);}
.cn-topics{margin:0 0 var(--space-3) 14px !important; border-left:1px solid var(--color-separator);}
.cn-sub a{display:block; padding:5px 8px 5px 13px; font-family:var(--font-body); font-size:.8125rem; line-height:1.4; color:var(--color-text-secondary); text-decoration:none;}
.cn-sub a:hover{color:var(--color-accent-primary);}
.cn-topic > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px; padding:6px 8px 6px 12px; color:var(--color-text-primary); font-weight:var(--weight-semibold); font-size:var(--text-sm); line-height:1.35;}
.cn-topic > summary::-webkit-details-marker{display:none;}
.cn-topic > summary::before{content:""; flex:none; width:6px; height:6px; border-right:1.5px solid var(--color-text-muted); border-bottom:1.5px solid var(--color-text-muted); transform:rotate(-45deg); transition:transform var(--transition-fast);}
.cn-topic[open] > summary::before{transform:rotate(45deg);}
.cn-topic ol{padding:0 0 var(--space-2) 14px !important;}
.cn-item > a,.cn-item > span{display:flex; gap:8px; align-items:flex-start; padding:5px 8px; border-radius:var(--radius-sm); font-family:var(--font-body); font-size:.8125rem; line-height:1.4; color:var(--color-text-secondary); text-decoration:none;}
.cn-item .ci{width:13px; height:13px; margin-top:2px; color:var(--color-text-muted);}
.cn-item > a:hover{background:var(--color-surface); color:var(--color-text-primary);}
.cn-item > a[aria-current="page"]{background:var(--color-accent-primary-soft); color:var(--color-accent-primary-strong); font-weight:var(--weight-semibold);}
.cn-item > a[aria-current="page"] .ci{color:var(--color-accent-primary);}
.cn-item--soon > span{color:var(--color-text-muted);}
.cn-item--premium .ci{color:var(--color-accent-primary);}
.cn-toc{margin:4px 0 8px 14px !important; padding:0 0 0 10px !important; border-left:2px solid var(--color-accent-primary-border);}
.cn-toc li[hidden]{display:none;}
.cn-toc a{display:block; padding:4px 6px; font-family:var(--font-body); font-size:.78125rem; line-height:1.4; color:var(--color-text-muted); text-decoration:none;}
.cn-toc a:hover{color:var(--color-text-primary);}
.course--qa .cn-toc a{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;}
.cn-toc a.active{color:var(--color-accent-primary-strong); font-weight:var(--weight-semibold);}

/* focus mode: menu hidden, reading column centred (desktop only; phones use the drawer) */
@media (min-width:1000px){
  .ea-focus .course-layout{grid-template-columns:minmax(0,1fr);}
  .ea-focus .course-drawer{display:none;}
  .ea-focus .course .toc-mobile{display:block;}
}

/* ---------- lesson header ---------- */
.lesson-head{margin:0 0 var(--space-6);}
.lesson-head__eyebrow,.module-head__no{margin:0 0 var(--space-3); font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--color-accent-primary);}
.lesson-head__eyebrow span{color:var(--color-border-strong); margin:0 4px;}
.lesson-head h1,.module-head h1{font-size:var(--text-h1); line-height:var(--leading-tight); letter-spacing:var(--tracking-tight); margin:0 0 var(--space-4); max-width:22ch;}
.course .dek{font-size:var(--text-lead); line-height:1.6; color:var(--color-text-secondary); margin:0 0 var(--space-5);}
.lesson-meta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-4); padding:var(--space-3) 0; border-top:1px solid var(--color-separator); border-bottom:1px solid var(--color-separator); font-family:var(--font-heading); font-size:var(--text-sm); color:var(--color-text-muted);}
.lesson-meta > span{display:inline-flex; align-items:center; gap:6px;}
.lesson-meta strong{color:var(--color-text-primary); font-weight:var(--weight-semibold);}
.lesson-meta .pill + .pill{margin-left:calc(-1 * var(--space-2));}

.draft-banner{margin:0 0 var(--space-5); padding:8px 14px; border:1px dashed var(--color-warning); border-radius:var(--radius-md); background:var(--color-warning-soft); color:var(--color-warning-text); font-family:var(--font-heading); font-size:var(--text-sm); font-weight:var(--weight-semibold);}

/* learning objectives (Cloudflare-style) */
.learn{margin:0 0 var(--space-6); padding:var(--space-4) var(--space-5); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);}
.module-head .learn{margin-top:var(--space-5);}
.learn__label{margin:0 0 var(--space-3) !important; font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-text-primary);}
.check-list{list-style:none; margin:0 !important; padding:0 !important; display:grid; gap:var(--space-2);}
.check-list li{position:relative; margin:0; padding:0 0 0 28px; font-size:1rem; line-height:1.55;}
.check-list li::before{content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%; background:var(--color-success-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.5 3 3 6-7' fill='none' stroke='%231F6B47' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;}

/* ---------- lesson body blocks ---------- */
.course article.lesson > :is(.lblock,.answer30,.say,.callout,.learn){max-width:var(--reading-width);}
.answer30{margin:0 0 var(--space-7); padding:var(--space-5); border-radius:var(--radius-lg); background:linear-gradient(135deg,var(--color-accent-primary-soft), var(--color-surface-raised) 70%); border:1px solid var(--color-accent-primary-border); font-size:1.0625rem; line-height:1.65;}
.answer30__label{display:inline-flex; align-items:center; gap:8px; margin:0 0 var(--space-3) !important; font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-accent-primary-strong);}
.answer30__label::before{content:"30s"; text-transform:none; font-family:var(--font-mono); font-size:10px; letter-spacing:0; color:#fff; background:var(--color-accent-primary); border-radius:var(--radius-sm); padding:2px 6px;}
.answer30 p:last-child{margin-bottom:0;}

.say{position:relative; margin:var(--space-6) 0; padding:var(--space-5) var(--space-5) var(--space-5) 68px; background:var(--color-panel); color:#ECEDF3; border-radius:var(--radius-lg); font-size:1.0625rem; line-height:1.65;}
.say::before{content:""; position:absolute; left:22px; top:24px; width:28px; height:28px; border-radius:50%; background:var(--color-accent-secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3a2.5 2.5 0 0 0-2.5 2.5v4a2.5 2.5 0 0 0 5 0v-4A2.5 2.5 0 0 0 10 3zM5.5 9.5a4.5 4.5 0 0 0 9 0M10 14v3' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;}
.say__label{margin:0 0 var(--space-2) !important; font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:#FFB892;}
.say p:last-child{margin-bottom:0;}
.say code{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.16); color:#fff;}
.say a{color:#C9BBFF;}

.course figure.diagram img{display:block; max-width:100%; height:auto; margin:0 auto;}


.preview-locked{margin:var(--space-7) 0; padding:var(--space-5); border:2px dashed var(--color-warning); border-radius:var(--radius-lg); background:repeating-linear-gradient(-45deg,var(--color-background),var(--color-background) 12px,var(--color-surface) 12px,var(--color-surface) 24px);}
.preview-locked > *{max-width:none;}
.preview-locked__label{margin:0 0 var(--space-5) !important; font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-warning-text);}
.preview-locked h2:first-of-type{margin-top:0;}

/* practise CTA + sources */
.qa-cta{display:flex; align-items:center; gap:var(--space-4); margin:var(--space-7) 0 var(--space-5); padding:var(--space-4) var(--space-5); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); text-decoration:none; color:var(--color-text-primary); font-family:var(--font-heading);}
.qa-cta > .ci{width:36px; height:36px; padding:8px; border-radius:var(--radius-md); background:var(--color-surface-raised); border:1px solid var(--color-border); color:var(--color-accent-primary);}
.qa-cta > span:nth-child(2){flex:1; display:flex; flex-direction:column; gap:2px; font-size:var(--text-md); color:var(--color-text-secondary);}
.qa-cta strong{font-size:1rem; color:var(--color-text-primary);}
.qa-cta > span:last-child{font-size:1.25rem; color:var(--color-accent-primary);}
a.qa-cta:hover{border-color:var(--color-accent-primary); box-shadow:var(--shadow-sm); color:var(--color-text-primary);}
.qa-cta--soon{opacity:.75;}
.sources,.qa-lessons{margin:var(--space-6) 0; padding-top:var(--space-5); border-top:1px solid var(--color-separator);}
.sources__title{margin:0 0 var(--space-3) !important; font-size:var(--text-xs) !important; font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-text-muted);}
.sources ul,.qa-lessons ul{margin:0; padding-left:1.2em; font-size:var(--text-md);}
details.sources > summary{display:inline-flex; align-items:center; gap:8px; margin:0 !important; cursor:pointer; list-style:none; user-select:none; border-radius:4px;}
details.sources > summary::-webkit-details-marker{display:none;}
details.sources > summary::before{content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform .15s ease; margin-right:2px;}
details.sources[open] > summary::before{transform:rotate(45deg);}
details.sources > summary:hover{color:var(--color-text-primary);}
details.sources > summary:focus-visible{outline:2px solid var(--color-accent-primary); outline-offset:3px;}
.sources__count{font-weight:400; letter-spacing:0; text-transform:none;}
details.sources[open] > ul{margin-top:var(--space-3);}
@media (prefers-reduced-motion:reduce){ details.sources > summary::before{transition:none;} }
.qa-lessons .pill{margin-left:6px;}
.qa-lessons li > span:first-child{color:var(--color-text-muted);}

/* ---------- interview questions ----------
   Editorial list: each question is a section separated by a hairline, answers stay folded until the reader has
   tried it out loud. Inside an answer, colour is used only for small labels, never for whole boxes. */
.qa-intro{font-size:1.0625rem; color:var(--color-text-secondary);}
.qf{position:sticky; top:var(--header-height); z-index:5; margin:var(--space-5) 0 0; padding:var(--space-3) 0; background:var(--color-glass); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--color-separator); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-2) var(--space-4);}
.qf[hidden]{display:none;}
.qf__filters{display:grid; gap:6px;}
.qf__filters:empty{display:none;}
.qf__row{display:flex; flex-wrap:wrap; align-items:center; gap:6px;}
.qf__label{width:44px; font-family:var(--font-heading); font-size:var(--text-2xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-text-muted);}
.qf__opt,.qf__expand{font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-semibold); padding:4px 11px; min-height:30px; border-radius:var(--radius-pill); border:1px solid var(--color-border); background:transparent; color:var(--color-text-secondary); cursor:pointer;}
.qf__opt:hover,.qf__expand:hover{border-color:var(--color-accent-primary); color:var(--color-accent-primary);}
.qf__opt[aria-pressed="true"]{background:var(--color-text-primary); border-color:var(--color-text-primary); color:var(--color-surface-raised);}
.qf__tools{display:flex; align-items:center; gap:var(--space-3); margin-left:auto;}
.qf__expand[aria-pressed="true"]{color:var(--color-accent-primary); border-color:var(--color-accent-primary-border); background:var(--color-accent-primary-soft);}
.qf__count{margin:0 !important; font-family:var(--font-heading); font-size:var(--text-xs); color:var(--color-text-muted);}
.qf__count:empty{display:none;}

.qa-list{margin-top:var(--space-2);}
/* Each question is its own bordered card: number badge + tinted header strip, then the answer area. */
.qa{position:relative; margin:0 0 var(--space-5); padding:0; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface-raised); box-shadow:0 1px 2px rgba(20,16,40,.04); overflow:hidden; scroll-margin-top:calc(var(--header-height) + 96px); transition:border-color var(--transition-fast), box-shadow var(--transition-fast);}
.qa:hover{border-color:var(--color-accent-primary-border);}
.qa:has(.qa__reveal[open]){border-color:var(--color-accent-primary-border); box-shadow:0 6px 22px -14px rgba(60,40,140,.35);}
.qa:target{border-color:var(--color-accent-primary);}
.qa[hidden],.qa-group[hidden]{display:none;}
.qa > *{max-width:none !important;}
.qa__head{display:flex; gap:var(--space-4); align-items:flex-start; margin:0; padding:var(--space-4) var(--space-5); background:linear-gradient(180deg,var(--color-accent-primary-soft),transparent 140%); border-bottom:1px solid var(--color-separator);}
.qa__headmain{flex:1; min-width:0;}
.qa__body{padding:var(--space-4) var(--space-5) var(--space-5);}
.qa__body > .qa__reveal{margin:0;}
.qa__body > .qa__locked{margin:0 !important;}
.qa__meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 8px !important; font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--color-text-muted);}
.qa__no{flex:none; display:grid; place-items:center; min-width:40px; height:40px; padding:0 6px; border-radius:var(--radius-md); background:var(--color-band); color:#fff; font-family:var(--font-mono); font-size:var(--text-sm); font-weight:var(--weight-bold); letter-spacing:-.02em;}
.qa__chip{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--radius-pill); border:1px solid var(--color-border); background:var(--color-surface-raised); font-size:var(--text-2xs); font-weight:var(--weight-bold); letter-spacing:.03em; text-transform:uppercase; line-height:1.3; color:var(--color-text-secondary);}
.qa__chip--scenario,.qa__chip--debug,.qa__chip--design{color:var(--color-accent-primary-strong); border-color:var(--color-accent-primary-border); background:var(--color-accent-primary-soft);}
.qa__lvl::before,.qa__asked::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
.qa__lvl--warm-up{color:var(--color-success-text);}
.qa__lvl--core{color:var(--color-warning-text);}
.qa__lvl--senior{color:var(--color-danger-text);}
.qa__asked{color:var(--color-text-secondary); text-transform:none; letter-spacing:0; font-weight:var(--weight-semibold);}
.qa__asked--very-common{color:#fff; background:var(--color-band); border-color:transparent;}
.qa__asked--very-common::before{background:#fff;}
.qa__asked--occasional{color:var(--color-text-muted);}
.course .qa__q{margin:0 !important; font-size:1.25rem !important; line-height:1.4 !important; letter-spacing:-.01em; font-weight:var(--weight-bold); color:var(--color-text-primary);}
.course .qa__q code{font-size:.86em;}
.qa__tests{margin:8px 0 0 !important; font-size:var(--text-sm); color:var(--color-text-muted);}
.qa__tests > span:first-child{margin-right:4px; font-family:var(--font-heading); font-weight:var(--weight-semibold); color:var(--color-text-secondary);}

.qa__reveal{margin:0;}
.qa__reveal > summary{list-style:none; display:inline-flex; align-items:center; gap:var(--space-3); cursor:pointer; user-select:none;}
.qa__reveal > summary::-webkit-details-marker{display:none;}
.qa__reveal-btn{display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:6px 14px; border:1px solid var(--color-border); border-radius:var(--radius-pill); font-family:var(--font-heading); font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--color-text-primary); background:var(--color-surface-raised); transition:border-color var(--transition-fast), color var(--transition-fast);}
.qa__reveal-btn::after{content:""; width:7px; height:7px; border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor; transform:rotate(45deg); margin:-3px 0 0 2px; transition:transform var(--transition-fast);}
.qa__reveal[open] .qa__reveal-btn::after{transform:rotate(225deg); margin-top:3px;}
.qa__reveal > summary:hover .qa__reveal-btn{border-color:var(--color-accent-primary); color:var(--color-accent-primary);}
.qa__reveal > summary:focus-visible{outline:none;}
.qa__reveal > summary:focus-visible .qa__reveal-btn{outline:2px solid var(--color-accent-primary); outline-offset:2px;}
.qa__hide,.qa__reveal[open] .qa__show{display:none;}
.qa__reveal[open] .qa__hide{display:inline;}
.qa__reveal-meta{font-family:var(--font-heading); font-size:var(--text-xs); color:var(--color-text-muted);}
.qa__content{margin-top:var(--space-5); padding-top:var(--space-5); border-top:1px solid var(--color-separator); animation:qa-in .18s ease-out;}
@keyframes qa-in{from{opacity:0; transform:translateY(-3px);} to{opacity:1; transform:none;}}
.qa__content > *{margin-top:0;}
.qa__content > * + *{margin-top:var(--space-5);}
.qa__answer{font-size:1.0625rem;}
.qa__answer > :last-child,.qa__say-body > :last-child,.qa__sig > :last-child,.whatif__a > :last-child{margin-bottom:0;}
.qa__label{display:flex; align-items:center; gap:8px; margin:0 0 8px !important; font-family:var(--font-heading); font-size:var(--text-2xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-text-muted);}
.qa__label img{width:24px; height:24px; border-radius:50%; object-fit:cover;}
.qa__say{padding:var(--space-4) var(--space-5); border-left:3px solid var(--color-accent-primary); border-radius:0 var(--radius-md) var(--radius-md) 0; background:var(--color-accent-primary-soft);}
.qa__say .qa__label{color:var(--color-accent-primary-strong);}
.qa__say-body{font-size:1.0625rem; color:var(--color-text-primary);}
.qa__sigs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-5); padding-top:var(--space-4); border-top:1px dashed var(--color-separator);}
.qa__sigs:has(> :only-child){grid-template-columns:minmax(0,1fr);}
.qa__sig{font-size:var(--text-md); color:var(--color-text-secondary);}
.qa__sig-ic{width:14px; height:14px; flex:none; background:currentColor; -webkit-mask:var(--qa-ic) center/contain no-repeat; mask:var(--qa-ic) center/contain no-repeat;}
.qa__sig--good{--qa-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.qa__sig--bad{--qa-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");}
.qa__sig--good .qa__label{color:var(--color-success-text);}
.qa__sig--bad .qa__label{color:var(--color-danger-text);}
.qa__followups{padding:var(--space-4) var(--space-5); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface);}
.qa__followups > .qa__label{color:var(--color-accent-primary-strong);}
.qa__locked{display:flex; gap:10px; align-items:center; margin:var(--space-4) 0 0 !important; padding:var(--space-3) var(--space-4); border:1px dashed var(--color-accent-primary-border); border-radius:var(--radius-md); background:var(--color-accent-primary-soft); font-family:var(--font-heading); font-size:var(--text-sm); color:var(--color-text-secondary);}
.qa__locked .ci{color:var(--color-accent-primary);}

/* what-if chain: a quiet indented thread */
.whatif{list-style:none; margin:0 !important; padding:0 !important;}
.whatif .whatif{margin-top:var(--space-4) !important; padding-left:var(--space-4) !important; border-left:1px solid var(--color-border);}
.whatif__step{margin:0 0 var(--space-4) !important; padding:0 !important;}
.whatif__step:last-child{margin-bottom:0 !important;}
.whatif__q{margin:0 0 6px !important; font-family:var(--font-heading); font-weight:var(--weight-semibold); line-height:1.45; color:var(--color-text-primary);}
.whatif__tag{margin-right:2px; color:var(--color-accent-primary); font-weight:var(--weight-bold);}
.whatif__a{font-size:var(--text-md); color:var(--color-text-secondary);}

/* grouped question banks: a solid purple band per topic, white title on top */
.qa-group{margin:var(--space-8) 0 0; scroll-margin-top:calc(var(--header-height) + 80px);}
.qa-group:first-child{margin-top:var(--space-5);}
.qa-group__head{margin:0 0 var(--space-5);}
.qa-group__band{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px var(--space-3); padding:14px var(--space-5); border-radius:var(--radius-md); background:var(--color-band); background-image:linear-gradient(100deg,rgba(255,255,255,.08),transparent 60%); color:#fff;}
.course .qa-group__band h2{margin:0 !important; color:#fff !important; font-size:1.25rem; line-height:1.3; letter-spacing:-.01em;}
.qa-group__n{flex:none; padding:3px 10px; border-radius:var(--radius-pill); background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); color:#fff; font-family:var(--font-heading); font-size:var(--text-2xs); font-weight:var(--weight-bold); letter-spacing:.04em; text-transform:uppercase;}
.qa-group__head > p{margin:var(--space-3) 0 0 !important; padding:0 2px; font-size:var(--text-md); color:var(--color-text-secondary);}

/* module question bank card */
.mbank__card{display:flex; gap:var(--space-4); align-items:flex-start; padding:var(--space-5); border:1px solid var(--color-accent-primary-border); border-radius:var(--radius-lg); background:linear-gradient(135deg, var(--color-accent-primary-soft), var(--color-surface-raised) 70%);}
.mbank__card--soon{background:var(--color-surface); border-style:dashed; border-color:var(--color-border);}
.mbank__icon .ci{width:40px; height:40px; padding:9px; border-radius:var(--radius-md); background:var(--color-surface-raised); border:1px solid var(--color-accent-primary-border); color:var(--color-accent-primary);}
.mbank__main{flex:1; min-width:0;}
.mbank__kicker{margin:0 0 2px !important; font-family:var(--font-heading); font-size:var(--text-2xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-accent-primary);}
.mbank__title{font-family:var(--font-heading); font-size:1.1875rem; font-weight:var(--weight-bold); color:var(--color-text-primary); text-decoration:none;}
a.mbank__title:hover{color:var(--color-accent-primary);}
.mbank__sum{margin:6px 0 8px !important; font-size:var(--text-md); color:var(--color-text-secondary);}
.mbank__meta{display:flex; flex-wrap:wrap; gap:4px 16px; margin:0 !important; font-family:var(--font-heading); font-size:var(--text-xs); color:var(--color-text-muted);}

/* ---------- module page ---------- */
.module-head{margin:0 0 var(--space-7);}
.mtopic{margin:0 0 var(--space-7); scroll-margin-top:calc(var(--header-height) + var(--space-5));}
.course .mtopic h2{margin:0 0 var(--space-2); font-size:var(--text-h3);}
.mtopic__sum{margin:0 0 var(--space-4); color:var(--color-text-secondary); font-size:1rem;}
.lrows{list-style:none; margin:0; padding:0; border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; background:var(--color-surface-raised);}
.lrow{display:flex; align-items:center; gap:var(--space-3); margin:0; padding:12px var(--space-4); border-top:1px solid var(--color-separator);}
.lrow:first-child{border-top:0;}
.lrow__icon{flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:var(--radius-md); background:var(--color-surface); color:var(--color-text-muted);}
.lrow--free .lrow__icon{background:var(--color-success-soft); color:var(--color-success-text);}
.lrow--premium .lrow__icon{background:var(--color-accent-primary-soft); color:var(--color-accent-primary);}
.lrow--questions .lrow__icon{background:var(--color-accent-secondary-soft); color:var(--color-accent-secondary-text);}
.lrow__main{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
.lrow__title{font-family:var(--font-heading); font-weight:var(--weight-semibold); font-size:var(--text-md); color:var(--color-text-primary); text-decoration:none; line-height:1.4;}
a.lrow__title:hover{color:var(--color-accent-primary); text-decoration:underline;}
.lrow--soon .lrow__title{color:var(--color-text-secondary);}
.lrow__meta{font-size:var(--text-xs); color:var(--color-text-muted); font-family:var(--font-heading);}
.lrow--questions{background:var(--color-surface);}

/* ---------- course hub ---------- */
.chub-hero{background:var(--color-header-band); border-bottom:1px solid var(--color-header-band-border); padding:var(--space-7) 0 var(--space-7);}
.chub-hero__inner{max-width:var(--page-width); margin:0 auto; padding:0 var(--gutter);}
.chub-hero h1{font-size:clamp(2.25rem,1.5rem + 2.6vw,3.5rem); line-height:1.08; letter-spacing:-.02em; margin:0 0 var(--space-4); max-width:18ch;}
.chub-hero .dek{max-width:62ch;}
.chub-hero__cta{display:flex; flex-wrap:wrap; gap:var(--space-3); margin:0 0 var(--space-6);}
.chub-hero__cta .btn{border-radius:var(--radius-pill); padding:12px 22px; min-height:46px; font-size:var(--text-md);}
.chub-stats{display:grid; grid-template-columns:repeat(4,minmax(0,140px)); gap:var(--space-4); margin:0;}
.chub-stats div{padding-left:var(--space-3); border-left:2px solid var(--color-accent-primary-border);}
.chub-stats dt{font-family:var(--font-heading); font-size:var(--text-xs); color:var(--color-text-muted); text-transform:uppercase; letter-spacing:var(--tracking-caps); font-weight:var(--weight-bold);}
.chub-stats dd{margin:2px 0 0; font-family:var(--font-heading); font-size:1.75rem; font-weight:var(--weight-bold); color:var(--color-text-primary);}
.chub{padding-bottom:var(--space-8);}
.chub > section{margin-top:var(--space-8);}
.chub h2{font-size:var(--text-h2); margin:0 0 var(--space-3); letter-spacing:var(--tracking-tight);}
.chub__lead{margin:0 0 var(--space-5); color:var(--color-text-secondary); max-width:70ch;}
.hsteps{list-style:none; margin:var(--space-5) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-3); counter-reset:s;}
.hsteps li{position:relative; display:flex; flex-direction:column; gap:4px; margin:0; padding:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface-raised); font-size:var(--text-md); color:var(--color-text-secondary);}
.hsteps li strong{font-family:var(--font-heading); font-size:1.0625rem; color:var(--color-text-primary);}
.hsteps__no{display:grid; place-items:center; width:28px; height:28px; margin-bottom:6px; border-radius:50%; background:var(--color-accent-primary); color:#fff; font-family:var(--font-mono); font-size:var(--text-sm);}
.hsteps li:last-child .hsteps__no{background:var(--color-accent-secondary);}
.mcards{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4);}
.mcard{margin:0;}
.mcard__link{display:flex; gap:var(--space-4); height:100%; padding:var(--space-5); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface-raised); text-decoration:none; color:var(--color-text-primary); transition:border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);}
.mcard__link:hover{border-color:var(--color-accent-primary); box-shadow:var(--shadow-md); color:var(--color-text-primary);}
.mcard__no{flex:none; font-family:var(--font-mono); font-size:1.5rem; line-height:1; font-weight:var(--weight-medium); color:var(--color-accent-primary); padding-top:2px;}
.mcard__body{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;}
.mcard__title{font-family:var(--font-heading); font-size:1.1875rem; font-weight:var(--weight-bold); line-height:1.3;}
.mcard__sum{font-size:var(--text-md); line-height:1.55; color:var(--color-text-secondary);}
.mcard__topics{font-size:var(--text-sm); color:var(--color-text-muted);}
.mcard__foot{margin-top:auto; padding-top:var(--space-3); display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-3); font-family:var(--font-heading); font-size:var(--text-xs); color:var(--color-text-muted);}
.mcard__bar{flex:1 1 80px; height:4px; border-radius:2px; background:var(--color-surface-sunken); overflow:hidden; min-width:60px;}
.mcard__bar span{display:block; height:100%; background:var(--color-accent-primary); border-radius:2px;}
.hguides ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3);}
.hguides li{margin:0; display:flex; flex-direction:column; gap:2px; padding:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface);}
.hguides a{display:flex; gap:8px; align-items:flex-start; font-family:var(--font-heading); font-weight:var(--weight-bold); color:var(--color-text-primary); text-decoration:none; line-height:1.35;}
.hguides a .ci{margin-top:2px; color:var(--color-success);}
.hguides a:hover{color:var(--color-accent-primary);}
.hguides__mod{padding-left:24px; font-family:var(--font-heading); font-size:var(--text-xs); color:var(--color-text-muted);}
.chub-faq{max-width:820px;}
.chub-faq details > p{margin:0; padding:0 var(--space-5) var(--space-4); color:var(--color-text-secondary); font-size:var(--text-md);}

/* ---------- responsive ---------- */
@media (max-width:1279px){
  .course-layout{grid-template-columns:244px minmax(0,1fr); gap:var(--space-6);}
}
.course .toc-mobile{margin:0 0 var(--space-6); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); font-family:var(--font-heading); font-size:var(--text-md);}
.course .toc-mobile > summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:12px var(--space-4); font-weight:var(--weight-bold); min-height:48px;}
.course .toc-mobile > summary::-webkit-details-marker{display:none;}
.course .toc-mobile ol{list-style:none; margin:0; padding:0 var(--space-4) var(--space-2); border-top:1px solid var(--color-border);}
.course .toc-mobile a{display:block; padding:10px 0; color:var(--color-text-secondary); text-decoration:none; border-bottom:1px solid var(--color-separator);}
.course .toc-mobile li:last-child a{border-bottom:0;}
@media (max-width:999px){
  .course-layout{grid-template-columns:minmax(0,1fr); gap:0; padding-top:var(--space-4);}
  .course .toc-mobile{display:block;}
  .focus-btn{display:none;}
  .course-bar{margin-bottom:var(--space-5);}
  .course-drawer{position:static; margin:0 0 var(--space-5); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface-raised);}
  .course-drawer__btn{display:flex; align-items:center; justify-content:space-between; list-style:none; cursor:pointer; padding:12px var(--space-4); min-height:48px; font-family:var(--font-heading); font-weight:var(--weight-bold); font-size:var(--text-md);}
  .course-drawer__btn::-webkit-details-marker{display:none;}
  .course-drawer__btn::after{content:""; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-4px; transition:transform var(--transition-fast);}
  .course-drawer[open] > .course-drawer__btn::after{transform:rotate(225deg); margin-top:4px;}
  .course-nav{max-height:65vh; padding:var(--space-3) var(--space-4); border-top:1px solid var(--color-border);}
  .hsteps{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px){
  .mcards,.hguides ul{grid-template-columns:minmax(0,1fr);}
  .chub-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .hsteps{grid-template-columns:minmax(0,1fr);}
  .qf{position:static; background:none; backdrop-filter:none;}
  .course .qa__q{font-size:1.125rem !important;}
  .qa__sigs{grid-template-columns:minmax(0,1fr); gap:var(--space-4);}
  .qf__tools{margin-left:0;}
  .mbank__card{flex-direction:column; padding:var(--space-4);}
  .say{padding:var(--space-4) var(--space-4) var(--space-4) 56px;}
  .say::before{left:16px; top:18px;}
  .mcard__link{padding:var(--space-4);}
  .lrow{padding:10px var(--space-3);}
  .lrow .pill{display:none;}
  .lrow--premium .pill,.lrow--free .pill{display:inline-flex;}
}
@media print{
  .course-drawer,.focus-btn,.qf,.paywall,.pager,.qa__reveal > summary{display:none !important;}
  .course-layout{display:block;}
}

/* pills group, hub hero motion (subtle, low opacity) */
.pills{display:inline-flex; flex-wrap:wrap; gap:4px; flex:none;}
.lesson-meta .pills{margin-right:2px;}
.cn-item--free .ci{color:var(--color-success);}
.chub-hero{position:relative; overflow:hidden; isolation:isolate;}
.chub-hero__bg{position:absolute; inset:0; z-index:-1; pointer-events:none;}
.chub-hero__bg::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(91,60,196,.16) 1.1px, transparent 1.2px); background-size:24px 24px; -webkit-mask-image:radial-gradient(ellipse 60% 90% at 85% 50%, #000 20%, transparent 80%); mask-image:radial-gradient(ellipse 60% 90% at 85% 50%, #000 20%, transparent 80%);}
.chub-hero__bg::after{content:""; position:absolute; right:-10%; top:-30%; width:55%; aspect-ratio:1; border-radius:50%; background:radial-gradient(closest-side, rgba(242,102,43,.14), rgba(91,60,196,.1) 55%, transparent); animation:chub-glow 10s ease-in-out infinite alternate;}
@keyframes chub-glow{from{opacity:.7; transform:scale(1);} to{opacity:1; transform:scale(1.08) translate(-2%,3%);}}
.chub-tile{position:absolute; left:var(--x); top:var(--y); display:flex; align-items:center; justify-content:center; width:58px; aspect-ratio:1; margin:-29px 0 0 -29px; border-radius:14px; background:var(--color-glass); border:1.5px dashed rgba(91,60,196,.3); color:rgba(91,60,196,.5); transform:rotate(var(--r)); animation:chub-float 8s ease-in-out infinite; animation-delay:calc(var(--d) * -1);}
.chub-tile .ui-icon{width:46%; height:46%;}
@keyframes chub-float{0%,100%{translate:0 0;} 50%{translate:0 -10px;}}
@media (max-width:1100px){ .chub-tile:nth-child(7),.chub-tile:nth-child(1),.chub-tile:nth-child(6){display:none;} }
@media (max-width:760px){ .chub-hero__bg .chub-tile{display:none;} }
@media (prefers-reduced-motion:reduce){ .chub-tile,.chub-hero__bg::after{animation:none;} }
@media (max-width:640px){ .lrow .pills{display:none;} .lrow--premium .pills,.lrow--free .pills{display:inline-flex;} .lrow .pill--soon{display:none;} .lrow--soon .pills{display:inline-flex;} .lrow--soon .pills .pill--premium{display:none;} }

/* Teaching blocks: definition box, try-it prompt, whiteboard summary, out-of-scope */
.course article > .lblock{max-width:none;}
.lblock{margin:var(--space-6) 0; padding:var(--space-4) var(--space-5); border-radius:var(--radius-lg); font-size:1.0625rem; line-height:1.65;}
.lblock > :last-child{margin-bottom:0;}
.lblock p{margin:0 0 var(--space-3);}
.lblock__label{margin:0 0 var(--space-2) !important; font-family:var(--font-heading); font-size:1.0625rem; font-weight:var(--weight-bold); color:var(--color-text-primary);}
.lblock--define{background:var(--color-surface); border:1px solid var(--color-border); border-top:3px solid var(--color-accent-primary);}
.lblock--try{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:var(--space-4); background:var(--color-accent-secondary-soft); border:1px dashed color-mix(in srgb, var(--color-accent-secondary) 45%, transparent);}
.lblock--try::before{content:""; grid-row:span 9; width:36px; height:36px; border-radius:50%; background:var(--color-accent-secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 4.5v11l8-5.5z' fill='%23fff'/%3E%3C/svg%3E") center/16px no-repeat;}
.lblock--try .lblock__label{color:var(--color-accent-secondary-text);}
.lblock--board{background:var(--color-surface); border:1px solid var(--color-border); box-shadow:inset 0 0 0 6px var(--color-surface-raised); font-family:var(--font-mono); font-size:var(--text-md);}
.lblock--board .lblock__label{font-family:var(--font-heading); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-text-muted);}
.lblock--board ul{margin:0 0 var(--space-3); padding-left:1.1em;}
.lblock--board li{margin:2px 0;}
.lblock--board strong{font-family:var(--font-heading);}
.lblock--scope{padding:var(--space-3) var(--space-5); background:var(--color-surface-raised); border:1px solid var(--color-border); font-size:var(--text-md); color:var(--color-text-secondary);}
.lblock--scope .lblock__label{font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-text-muted);}
.lblock--scope ul{margin:0; padding-left:1.1em;}

/* ---------- interview-first signals ---------- */
/* Sidebar: every topic's interview set (and the module bank) stands out from the lessons. */
.cn-item--qa{margin:4px 0;}
.cn-item--qa > a,.cn-item--qa > span{position:relative; align-items:center; padding:6px 8px 6px 10px; border:1px solid var(--color-accent-primary-border); border-left:3px solid var(--color-accent-primary); border-radius:var(--radius-sm); background:var(--color-accent-primary-soft); color:var(--color-accent-primary-strong); font-family:var(--font-heading); font-weight:var(--weight-bold);}
.cn-item--qa .ci{color:var(--color-accent-primary); margin-top:0;}
.cn-item--qa > a > span{display:flex; flex:1; align-items:center; justify-content:space-between; gap:6px;}
.cn-item--qa > a:hover{background:var(--color-accent-primary-soft); border-color:var(--color-accent-primary); color:var(--color-accent-primary-strong);}
.cn-item--qa > a[aria-current="page"]{background:var(--color-band); border-color:var(--color-band); color:#fff;}
.cn-item--qa > a[aria-current="page"] .ci{color:#fff;}
.cn-qa__chip{flex:none; padding:1px 6px; border-radius:var(--radius-pill); background:var(--color-band); color:#fff; font-size:9px; font-weight:var(--weight-bold); letter-spacing:.06em; text-transform:uppercase; line-height:1.5;}
.cn-item--qa > a[aria-current="page"] .cn-qa__chip{background:rgba(255,255,255,.2);}
.cn-item--qa.cn-item--soon > span{opacity:.7; border-style:dashed;}
.cn-item--qa.cn-item--soon > span > span{display:flex; flex:1; align-items:center; justify-content:space-between; gap:6px;}
.cn-topic--bank > summary{color:var(--color-accent-primary-strong);}
.cn-sub--bank > a{color:var(--color-accent-primary-strong) !important; font-weight:var(--weight-bold);}

/* Module page: topic question sets read as the payoff of each topic. */
.lrow--questions.lrow--free,.lrow--questions.lrow--premium{margin-top:6px; border:1px solid var(--color-accent-primary-border); border-left:3px solid var(--color-accent-primary); border-radius:var(--radius-md); background:var(--color-accent-primary-soft);}
.lrow--questions .lrow__title{color:var(--color-accent-primary-strong);}

/* How much a lesson matters in interviews (meta.json "interview"). */
.prio{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--radius-pill); font-family:var(--font-heading); font-size:var(--text-2xs); font-weight:var(--weight-bold); letter-spacing:.03em; text-transform:uppercase; line-height:1.4; border:1px solid currentColor;}
.prio i{width:7px; height:7px; border-radius:50%; background:currentColor;}
.prio--must-know{color:#fff; background:var(--color-band); border-color:transparent;}
.prio--must-know i{background:#fff;}
.prio--often-asked{color:var(--color-accent-primary-strong); background:var(--color-accent-primary-soft); border-color:var(--color-accent-primary-border);}
.prio--good-to-know{color:var(--color-text-muted); border-color:var(--color-border);}
.lrow__meta .prio{margin-left:10px; padding:1px 7px; font-size:9px; vertical-align:1px;}

/* Interview radar: what gets asked about this lesson and how often. */
.radar{margin:var(--space-6) 0; padding:var(--space-4) var(--space-5); border:1px solid var(--color-accent-primary-border); border-radius:var(--radius-md); background:var(--color-surface-raised); box-shadow:inset 4px 0 0 var(--color-band);}
.radar__label{display:flex; align-items:center; gap:8px; margin:0 0 var(--space-2) !important; font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-accent-primary-strong);}
.radar__ic{width:18px; height:18px; border-radius:50%; background:radial-gradient(circle,var(--color-band) 0 2.5px,transparent 3px),radial-gradient(circle,transparent 0 5px,var(--color-band) 5.5px 6.5px,transparent 7px),radial-gradient(circle,transparent 0 8px,var(--color-band) 8.5px 9px,transparent 9.5px);}
.radar > :last-child{margin-bottom:0;}
.radar ul{margin-bottom:0;}

/* Cross-links to lessons that haven't shipped yet. */
.xref-soon{color:var(--color-text-primary); text-decoration:underline dotted var(--color-text-muted); text-underline-offset:.2em; cursor:help;}
.xref-soon::after{content:"soon"; margin-left:4px; padding:0 5px; border-radius:var(--radius-pill); background:var(--color-surface); border:1px solid var(--color-border); font-family:var(--font-heading); font-size:9px; font-weight:var(--weight-bold); letter-spacing:.05em; text-transform:uppercase; color:var(--color-text-muted); vertical-align:2px;}

@media (max-width:640px){
  .qa__head{padding:var(--space-4); gap:var(--space-3);}
  .qa__no{min-width:34px; height:34px; font-size:var(--text-xs);}
  .qa__body{padding:var(--space-4);}
  .course .qa__q{font-size:1.125rem !important;}
  .qa-group__band{padding:12px var(--space-4);}
  .qa__say,.qa__followups{padding:var(--space-3) var(--space-4);}
}

/* Tickable revision checklists ("- [ ]" in lesson markdown) */
ul:has(> .task-list-item){list-style:none; padding-left:0;}
.task-list-item{list-style:none; position:relative; padding:var(--space-2) var(--space-3) var(--space-2) 40px; margin:0 0 var(--space-2); border:1px solid var(--color-border); border-radius:10px; background:var(--color-surface-raised); line-height:1.55;}
.task-list-item-checkbox{position:absolute; left:12px; top:calc(var(--space-2) + 3px); width:18px; height:18px; margin:0; accent-color:var(--color-accent-primary); cursor:pointer;}
.task-list-item.is-done{background:var(--color-success-soft); border-color:transparent;}
.task-list-item.is-done > strong:first-of-type{text-decoration:line-through; text-decoration-thickness:1px;}
.tick-progress{display:flex; align-items:center; gap:var(--space-3); margin:var(--space-4) 0 var(--space-3); font-size:var(--text-sm); font-weight:var(--weight-bold); color:var(--color-text-secondary);}
.tick-progress__bar{flex:1; max-width:260px; height:8px; border-radius:99px; background:var(--color-border); overflow:hidden;}
.tick-progress__bar span{display:block; height:100%; background:var(--color-accent-primary); transition:width .2s;}