/* =====================================================================
   components.css
   Site header + module index, masthead, tabs, controls, lesson rows
   (accordion), diagrams, sentence transform (xf), scale, chips, meters, home grid.
   ===================================================================== */
/* ---------- Masthead ---------- */
.mast{display:grid;grid-template-columns:var(--cols);column-gap:0;border-top:3px solid var(--fg);padding-top:14px;align-items:end;row-gap:18px}
.mast h1{grid-column:1 / 3;margin:0;font-size:clamp(48px,9vw,104px);font-weight:800;letter-spacing:-.055em;line-height:.86}
.mast h1 span{color:var(--accent)}
.mast .intro{grid-column:3;max-width:52ch;margin:0;padding-left:2px;color:var(--muted)}
.mast .intro b{color:var(--fg);font-weight:600}
nav.tabs{grid-column:1 / -1;display:flex;gap:28px;position:relative;border-bottom:1px solid var(--hair);margin-top:10px}
nav.tabs button{padding:12px 0;font-weight:600;font-size:14px;color:var(--muted);transition:color .3s}
nav.tabs button[aria-selected="true"]{color:var(--fg)}
nav.tabs .ink{position:absolute;bottom:-1px;height:2px;background:var(--fg);transition:left .45s var(--ease),width .45s var(--ease)}

.view.enter{animation:enter .5s var(--ease)}
@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Controls ---------- */
.controls{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;align-items:center;padding:18px 0 10px}
.seg{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.seg button{font-size:13px;font-weight:500;color:var(--muted);padding:4px 0;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.seg button[aria-pressed="true"]{color:var(--fg);border-bottom-color:var(--fg)}
.seg button:hover{color:var(--fg)}

/* ---------- Score ---------- */
.score{border-top:1px solid var(--fg)}
.shead{display:grid;grid-template-columns:var(--cols);align-items:end;border-bottom:1px solid var(--fg)}
.shead .zones{position:relative;height:40px;background:linear-gradient(var(--accent),var(--accent)) 50% 22px / 2px 100% no-repeat}
.zones button{position:absolute;bottom:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .25s}
.zones button:hover,.zones button[aria-pressed="true"]{color:var(--fg)}
.zones .zp{left:0} .zones .zf{right:0} .zones .zn{position:absolute;left:50%;transform:translateX(-50%);top:2px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);background:var(--bg);padding:0 6px}
.shead .lbl{padding:0 0 9px}

.row{border-bottom:1px solid var(--hair);transition:opacity .45s var(--ease),background-color .35s}
.row.dim{opacity:.22}
.row.open{background:var(--surface);border-bottom-color:var(--fg)}
.rhead{display:grid;grid-template-columns:var(--cols);width:100%;align-items:stretch}
.rhead>span{padding-block:12px;min-width:0}
.num{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:15px!important;transition:color .3s}
.name b{display:block;font-weight:600;font-size:15px;letter-spacing:-.01em;transition:color .3s}
.name small{display:block;color:var(--muted);font-size:13px}
.track{display:flex;align-items:center;background:linear-gradient(var(--accent),var(--accent)) 50% 0 / 2px 100% no-repeat}
.track svg{width:100%;height:auto;display:block}
.track .base{stroke:var(--hair);stroke-width:1.5}
.track .m{fill:var(--fg);transition:fill .3s,transform .45s var(--spring);transform-box:fill-box;transform-origin:center}
.track .pt{stroke:var(--bg);stroke-width:3;paint-order:stroke}.row.open .track .pt{stroke:var(--surface)}
.track .ma{fill:none;stroke:var(--fg);stroke-width:2;transition:stroke .3s}
.track .rf{stroke:var(--fg);stroke-width:1.5;stroke-dasharray:3 3;transition:stroke .3s}
.rhead:hover .m,.row.open .m{fill:var(--accent)}
.rhead:hover .ma,.row.open .ma,.rhead:hover .rf,.row.open .rf{stroke:var(--accent)}
.rhead:hover .m{transform:scaleY(1.25)}
.rhead:hover .name b,.row.open .name b,.row.open .num{color:var(--accent)}

/* expand */
.exp{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.row.open .exp{grid-template-rows:1fr}
.exp-in{overflow:hidden;min-height:0}
.body{display:grid;grid-template-columns:var(--cols);padding-bottom:28px}
.body>*{grid-column:2 / -1;min-width:0}
.dia{grid-column:3;padding-top:4px}
.dia svg{display:block;width:100%;height:auto}
.core{grid-column:2;grid-row:1;padding-right:24px;padding-top:10px;font-size:15px}
.core p{margin:0 0 12px}
.core strong{font-weight:600;color:var(--fg);box-shadow:inset 0 -.45em 0 var(--accent-soft)}
.core .f{font-family:var(--mono);font-size:13px;color:var(--accent)}

.sec{display:grid;grid-template-columns:subgrid;grid-column:2 / -1;border-top:1px solid var(--hair);padding-top:14px;margin-top:18px}
.sec>.lbl{grid-column:1;padding-top:3px}
.sec>.content{grid-column:2;min-width:0}

.forms{display:grid;gap:10px}
.form{display:grid;grid-template-columns:24px minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:baseline}
.form .s{font-family:var(--mono);font-weight:500;color:var(--accent)}
.form code{font-family:var(--mono);font-size:13px;overflow-wrap:anywhere}
.form em{font-style:normal;color:var(--muted)}
mark{background:transparent;color:var(--fg);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent)}
.uses{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px}
.uses li{display:grid;grid-template-columns:22px 1fr}
.uses li>span{font-family:var(--mono);font-size:12px;color:var(--accent);padding-top:2px}
.uses p{margin:0;font-weight:500} .uses em{display:block;font-style:normal;font-weight:400;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:13px;padding:3px 9px;border:1px solid var(--hair);background:var(--bg);transition:border-color .25s,color .25s}
.chip:hover{border-color:var(--fg)}
.reg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;margin-bottom:12px}
.reg .r{display:grid;gap:6px}
.reg .r div{display:flex;justify-content:space-between;font-size:13px}
.reg .r div span{color:var(--muted)}
.meter{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
.meter i{height:4px;background:var(--hair);transform-origin:left;transition:background-color .3s}
.row.open .meter i.on{background:var(--fg);animation:grow .6s var(--ease) both;animation-delay:calc(var(--i)*70ms + .45s)}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}
.note{margin:0;max-width:68ch}
.extra{margin-top:10px;padding-left:12px;border-left:2px solid var(--accent);max-width:68ch}
.mist{display:grid;gap:4px}
.mist s{color:var(--muted);text-decoration-color:var(--accent)}
.mist .ok::before{content:"→ ";color:var(--accent)}
.mist small{color:var(--muted);font-size:13px}

/* staged reveal inside an opened row */
.stage{opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.row.open .stage{opacity:1;transform:none;transition-delay:calc(var(--i)*70ms + .2s)}

/* diagram draw-in */
.dia .d-bar{transform:scaleX(0);transform-box:fill-box;transform-origin:left center;transition:transform .9s var(--ease) .2s}
.dia .d-pt,.dia .d-dot{transform:scale(0);transform-box:fill-box;transform-origin:center;transition:transform .55s var(--spring)}
.dia .d-pt{transition-delay:.45s}
.dia .d-dot{transition-delay:calc(var(--i)*55ms + .2s)}
.dia .d-arrow{stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset .8s var(--ease) .6s}
.dia .d-head,.dia .d-ref{opacity:0;transition:opacity .4s ease .9s}
.dia .d-ref{transition-delay:.3s}
.dia .d-txt{opacity:0;transition:opacity .5s ease .8s}
.row.open .dia .d-bar{transform:scaleX(1)}
.row.open .dia .d-pt,.row.open .dia .d-dot{transform:scale(1)}
.row.open .dia .d-arrow{stroke-dashoffset:0}
.row.open .dia .d-head,.row.open .dia .d-ref,.row.open .dia .d-txt{opacity:1}

/* ---------- Site & modules ---------- */
.site{display:flex;align-items:center;gap:12px 28px;flex-wrap:wrap;padding-bottom:16px}
.brand{font-weight:800;font-size:15px;letter-spacing:-.01em;margin-right:auto}
.brand b{color:var(--accent)}
.mods{display:flex;gap:24px}
.mods a{display:flex;gap:6px;align-items:baseline;font-weight:600;font-size:14px;color:var(--muted);padding:4px 0;border-bottom:2px solid transparent;transition:color .25s,border-color .35s var(--ease)}
.mods a span{font-family:var(--mono);font-size:11px;font-weight:400}
.mods a:hover{color:var(--fg)}
.mods a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--accent)}
.site .theme{margin-left:0;font-size:14px;font-weight:600}
.mod.enter{animation:enter .55s var(--ease)}
.chip.static{cursor:default}
.chip .cl{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.track .mh{fill:var(--bg);stroke:var(--fg);stroke-width:2;stroke-dasharray:3 2;transition:stroke .3s}
.row.open .track .mh{fill:var(--surface)}
.rhead:hover .mh,.row.open .mh{stroke:var(--accent)}
.track .mb{fill:var(--hair)}
.track.notl{background:none}
.ttext{font-family:var(--mono);font-size:13px;color:var(--muted);padding-left:4px;transition:color .3s}
.rhead:hover .ttext,.row.open .ttext{color:var(--accent)}
.bigf{font-size:clamp(22px,3vw,34px);font-weight:700;letter-spacing:-.025em;line-height:1.15;padding:10px 0 10px 18px;border-left:3px solid var(--accent);margin-top:10px}
.zones .zl,.zones .zr{position:absolute;bottom:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.zones .zl{left:0} .zones .zr{right:0}
.vhead{padding-top:44px;padding-bottom:8px;border-bottom:1px solid var(--fg)}
.vscore{border-top:0}
.legend .lg{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;background:var(--accent)}
.legend i.dot{border-radius:50%}
.legend i.hollow{background:transparent;border:1.5px dashed var(--accent)}
.rword.sentence{font-size:clamp(22px,3.4vw,38px);letter-spacing:-.025em;line-height:1.2;max-width:28ch}

/* ---------- modules 03-05 ---------- */
.mast h1.long{grid-column:1 / -1}
.mast h1.long + .intro{grid-column:3}
@media (max-width:760px){.mast h1.long + .intro{grid-column:1 / -1}}
.zones.plain{background:none}
.xf{display:grid;gap:6px;padding-top:6px}
.xrow{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:baseline}
.xrow p{margin:0;font-size:clamp(17px,2.2vw,22px);font-weight:500;line-height:1.7;letter-spacing:-.01em}
.xarrow{padding-left:108px;color:var(--accent);font-size:18px;line-height:1}
.tk{display:inline-block;padding:0 6px;margin:0 1px;border-bottom:2px solid var(--fg);position:relative}
.tk sup{font-family:var(--mono);font-size:10px;color:var(--accent);margin-left:2px;font-weight:600}
.tk2{background:var(--accent-soft);border-bottom-color:var(--accent)}
.tk3{border-bottom-color:var(--accent);border-bottom-style:dashed}
.tk4{border-bottom-color:var(--muted)}
.row.open .tk{animation:tkIn .55s var(--spring) both;animation-delay:calc(var(--i)*90ms + .3s)}
.row.open .xrow.two .tk{animation-delay:calc(var(--i)*90ms + .85s)}
@keyframes tkIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.xnote{margin:10px 0 0;color:var(--muted);font-size:14px;max-width:62ch}
.form{grid-template-columns:44px minmax(0,1fr) minmax(0,1fr)!important}
.mods{overflow-x:auto;scrollbar-width:none;max-width:100%}
.mods::-webkit-scrollbar{display:none}
.mods a{white-space:nowrap;flex-shrink:0}
@media (max-width:760px){.site{gap:10px 16px}.mods{order:3;width:100%;gap:18px}.xrow{grid-template-columns:1fr;gap:2px}.xarrow{padding-left:0}.form{grid-template-columns:40px 1fr!important}}
/* ---------- index nav (12 modules) ---------- */
.mods{order:3;width:100%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 18px;overflow:visible}
.mods a{border-bottom:0;border-top:2px solid var(--hair);padding:8px 0 4px;white-space:normal;text-align:left;line-height:1.3;transition:color .25s,border-color .4s var(--ease)}
.mods a[aria-current="page"]{border-top-color:var(--accent)}
.mods a.spk span{color:var(--accent)}
@media (max-width:900px){.mods{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.mods{display:flex;overflow-x:auto;gap:18px}.mods a{white-space:nowrap}}

/* theme toggle */
.theme{margin-left:auto;display:flex!important;align-items:center;gap:8px;color:var(--muted)!important}
.theme:hover{color:var(--fg)!important}
.theme i{width:13px;height:13px;border-radius:50%;border:1.5px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%);transition:background .3s}
.theme[data-mode="light"] i{background:transparent}
.theme[data-mode="dark"] i{background:currentColor}

.brand{color:inherit;text-decoration:none}
.mods a{text-decoration:none;color:var(--muted)}
.mods a:hover{color:var(--fg)}
.mods a[aria-current="page"]{color:var(--fg)}

/* ---------- home ---------- */
.home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));border-top:1px solid var(--fg);margin-top:28px}
.hcard{display:grid;grid-template-rows:auto auto auto 1fr auto;gap:4px;padding:18px 18px 18px 0;border-bottom:1px solid var(--hair);color:inherit;text-decoration:none;min-height:190px;transition:padding .35s var(--ease);animation:enter .5s var(--ease) both;animation-delay:calc(var(--i)*35ms)}
.hcard:hover{padding-left:10px}
.hnum{font-family:var(--mono);font-size:12px;color:var(--accent)}
.htitle{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.15;transition:color .25s}
.hcard:hover .htitle{color:var(--accent)}
.hen{font-size:13px;color:var(--muted)}
.hdesc{font-size:14px;margin-top:6px;max-width:34ch}
.hmeta{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:10px}
.hcard.spk .htitle{color:var(--accent)}