/* Wi-Fi Pro Lab: lesson layout and interactive models. Uses the theme's colour presets so light and dark both work. */

.lab-lesson { --lab-a: var(--wp--preset--color--brand); --lab-b: var(--wp--preset--color--accent); }

/* ---------- Lesson layout ---------- */
.lab-crumbs { font-size: .95rem; color: var(--wp--preset--color--muted); margin: 0 0 8px; }
.lab-crumbs a { color: var(--wp--preset--color--muted); }
.lab-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.lab-lesson { min-width: 0; }
.lab-lesson > * { max-width: 72ch; }
.lab-lesson > .lab-wide, .lab-lesson > .lab-model, .lab-lesson > .wp-block-html, .lab-lesson > .wp-block-shortcode, .lab-lesson > .lab-facts, .lab-lesson > .lab-callout { max-width: none; }
.lab-lesson h2 { margin: 2.6rem 0 .6rem; padding-top: .4rem; scroll-margin-top: 170px; }
.lab-lesson h2 .lab-step { font: 700 .95rem var(--wp--preset--font-family--display); letter-spacing: .12em; color: var(--wp--preset--color--accent); display: block; margin-bottom: 4px; }
.lab-lesson h3 { margin-top: 1.6rem; }
.lab-toc { position: sticky; top: 96px; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--surface); border-radius: 14px; padding: 16px 18px; font-size: .95rem; }
.admin-bar .lab-toc { top: 128px; }
.lab-toc__t { font: 700 .8rem/1 var(--wp--preset--font-family--body); letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0 0 10px; }
.lab-toc__list { list-style: none; margin: 0; padding: 0; }
.lab-toc__list li { margin: 0; padding: 5px 0; line-height: 1.3; }
.lab-toc__list a { color: var(--wp--preset--color--ink); text-decoration: none; }
.lab-toc__list a:hover { color: var(--wp--preset--color--brand); text-decoration: underline; }
@media (max-width: 1000px) { .lab-layout { grid-template-columns: minmax(0, 1fr); } .lab-toc { position: static; order: -1; } }

/* ---------- Facts strip ---------- */
.lab-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 18px 0 8px; }
.lab-fact { border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--surface); border-radius: 12px; padding: 12px 14px; }
.lab-fact b { display: block; font: 700 1.35rem/1.15 var(--wp--preset--font-family--display); color: var(--wp--preset--color--ink); }
.lab-fact span { font-size: .85rem; color: var(--wp--preset--color--muted); }

.lab-callout { border-left: 4px solid var(--wp--preset--color--accent); background: var(--wp--preset--color--surface); border-radius: 0 12px 12px 0; padding: 14px 18px; margin: 1.4rem 0; }
.lab-callout p { margin: 0 0 .5rem; } .lab-callout p:last-child { margin: 0; }
.lab-callout strong:first-child { color: var(--wp--preset--color--accent); }
.lab-refs { font-size: .95rem; }
.lab-refs li { margin-bottom: .5rem; }

/* ---------- Model frame ---------- */
.lab-model {
	background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px; padding: 16px 18px 18px; margin: 1.2rem 0 1.6rem;
}
.lab-model:empty { display: none; }
.lab-controls { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; margin-bottom: 12px; }
.lab-ctl { display: flex; flex-direction: column; gap: 6px; min-width: 150px; font-size: .95rem; }
.lab-ctl--range { flex: 1 1 220px; max-width: 340px; }
.lab-ctl__t { color: var(--wp--preset--color--muted); font-size: .85rem; font-weight: 600; letter-spacing: .02em; }
.lab-ctl output { color: var(--wp--preset--color--ink); font-weight: 700; }
.lab-ctl input[type=range] { width: 100%; accent-color: var(--wp--preset--color--accent); }
.lab-ctl select {
	background: var(--wp--preset--color--bg); color: var(--wp--preset--color--ink); border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px; padding: 8px 10px; font: inherit; min-width: 140px;
}
.lab-seg { display: flex; flex-wrap: wrap; border: 1px solid var(--wp--preset--color--line); border-radius: 8px; overflow: hidden; width: max-content; max-width: 100%; }
.lab-seg button { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); border: 0; border-right: 1px solid var(--wp--preset--color--line); padding: 7px 12px; cursor: pointer; font: 500 .95rem var(--wp--preset--font-family--body); white-space: nowrap; }
.lab-seg button:last-child { border-right: 0; }
.lab-seg button:hover { background: var(--wp--preset--color--bg); }
.lab-seg button[aria-pressed="true"] { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--surface); font-weight: 700; }
.lab-btn { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--surface); border: 0; border-radius: 8px; padding: 8px 16px; font: 600 .95rem var(--wp--preset--font-family--body); cursor: pointer; }
.lab-btn--ghost { background: transparent; color: var(--wp--preset--color--ink); border: 1px solid var(--wp--preset--color--line); }
.lab-btn:disabled { opacity: .4; cursor: default; }

.lab-stage { width: 100%; }
.lab-svg { width: 100%; height: auto; display: block; }
.lab-axis { stroke: var(--wp--preset--color--line); stroke-width: 1.5; }
.lab-grid { stroke: var(--wp--preset--color--line); stroke-width: 1; stroke-dasharray: 3 5; }
.lab-tick { fill: var(--wp--preset--color--muted); font: 500 12px var(--wp--preset--font-family--body); }
.lab-tick--f { font-size: 13px; fill: var(--wp--preset--color--ink); font-weight: 600; }

/* channel map */
.lab-ch.is-a { fill: var(--wp--preset--color--brand); opacity: .85; }
.lab-ch.is-b { fill: var(--wp--preset--color--brand); opacity: .55; }
.lab-ch.is-key { fill: var(--wp--preset--color--accent); opacity: .75; }
.lab-ch.is-other { fill: var(--wp--preset--color--brand); opacity: .22; }
.lab-ch.is-dfs { fill: var(--wp--preset--color--accent); opacity: .7; }
.lab-ch.is-psc { fill: var(--wp--preset--color--accent); opacity: .9; }
.lab-ch.is-indoor { stroke: var(--wp--preset--color--ink); stroke-width: 2; stroke-dasharray: 5 4; }
.lab-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .88rem; color: var(--wp--preset--color--muted); margin: 8px 0 0; }
.lab-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* waves */
.lab-wave { fill: none; stroke: var(--wp--preset--color--muted); stroke-width: 2; opacity: .45; stroke-linecap: round; }
.lab-wave.is-on { stroke: var(--wp--preset--color--brand); stroke-width: 3.5; opacity: 1; }

/* path loss bars */
.lab-bar { opacity: .9; }
.lab-bar.is-good { fill: #2F8A4F; } .lab-bar.is-warn { fill: var(--wp--preset--color--accent); } .lab-bar.is-bad { fill: #C2416B; }

/* readouts */
.lab-reads { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.lab-ro { border: 1px solid var(--wp--preset--color--line); border-radius: 10px; padding: 9px 12px; background: var(--wp--preset--color--bg); }
.lab-ro__v { display: block; font: 700 1.5rem/1.15 var(--wp--preset--font-family--display); }
.lab-ro__l { display: block; font-size: .82rem; color: var(--wp--preset--color--muted); }
.lab-ro[data-tone="good"] .lab-ro__v { color: #2F8A4F; } .lab-ro[data-tone="warn"] .lab-ro__v { color: var(--wp--preset--color--accent); } .lab-ro[data-tone="bad"] .lab-ro__v { color: #C2416B; }
@media (prefers-color-scheme: dark) { .lab-ro[data-tone="good"] .lab-ro__v { color: #5CC27D; } .lab-ro[data-tone="bad"] .lab-ro__v { color: #EC6F95; } .lab-bar.is-good { fill: #5CC27D; } .lab-bar.is-bad { fill: #EC6F95; } }

.lab-note { font-size: .93rem; color: var(--wp--preset--color--muted); margin: 12px 0 0; line-height: 1.5; max-width: none; }
.lab-note--warn { border-left: 3px solid var(--wp--preset--color--accent); padding-left: 10px; }
.lab-eq { font: 500 .95rem/1.5 var(--wp--preset--font-family--mono); background: var(--wp--preset--color--bg); border: 1px solid var(--wp--preset--color--line); border-radius: 8px; padding: 10px 12px; margin: 12px 0 0; overflow-x: auto; }

/* timeline */
.lab-tl__rail { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; }
.lab-tl__dot { flex: 0 0 auto; scroll-snap-align: start; text-align: left; cursor: pointer; background: var(--wp--preset--color--bg); color: var(--wp--preset--color--ink); border: 1px solid var(--wp--preset--color--line); border-radius: 10px; padding: 8px 12px; min-width: 112px; font: inherit; }
.lab-tl__dot[aria-selected="true"] { border-color: var(--wp--preset--color--brand); background: var(--wp--preset--color--surface); box-shadow: 0 0 0 2px var(--wp--preset--color--brand) inset; }
.lab-tl__y { display: block; font: 700 1.05rem var(--wp--preset--font-family--display); color: var(--wp--preset--color--accent); letter-spacing: .06em; }
.lab-tl__n { display: block; font-size: .9rem; font-weight: 600; line-height: 1.2; }
.lab-tl__card { border-top: 1px solid var(--wp--preset--color--line); padding-top: 14px; margin-top: 6px; }
.lab-tl__head { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.lab-tl__head h3 { margin: 0; font-size: 1.5rem; }
.lab-tl__year { font: 700 1.2rem var(--wp--preset--font-family--display); color: var(--wp--preset--color--accent); letter-spacing: .1em; }
.lab-tl__why { margin: 10px 0; max-width: 68ch; }
.lab-kvs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 12px 0; }
.lab-kv { border: 1px solid var(--wp--preset--color--line); border-radius: 10px; padding: 8px 12px; background: var(--wp--preset--color--bg); }
.lab-kv dt { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.lab-kv dd { margin: 2px 0 0; font-weight: 500; }
.lab-tl__src { font-size: .85rem; color: var(--wp--preset--color--muted); margin: 6px 0 0; }
.lab-tl__nav { display: flex; gap: 8px; margin-top: 12px; }

/* rules tables */
.lab-rules__t { margin: 0 0 10px; font-size: 1.35rem; }
.lab-tablewrap { overflow-x: auto; }
.lab-table { border-collapse: collapse; width: 100%; font-size: .95rem; min-width: 480px; }
.lab-table th, .lab-table td { border: 1px solid var(--wp--preset--color--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.lab-table thead th { background: var(--wp--preset--color--bg); font-weight: 700; }
.lab-table tbody th { font-weight: 600; background: var(--wp--preset--color--bg); width: 28%; }
.lab-src__t { font: 700 .8rem/1 var(--wp--preset--font-family--body); letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 14px 0 4px; }
.lab-src { margin: 0; padding-left: 1.1rem; font-size: .93rem; }

/* region bar */
.lab-regionbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.lab-regionbar__t { font-weight: 700; }
.lab-regionbar__h { font-size: .9rem; color: var(--wp--preset--color--muted); flex: 1 1 260px; }
.lab-model--bar { position: sticky; top: 76px; z-index: 20; padding: 10px 16px; margin-top: 0; }
.admin-bar .lab-model--bar { top: 108px; }

/* quiz */
.lab-quiz__q { padding: 12px 0; border-top: 1px solid var(--wp--preset--color--line); }
.lab-quiz__q:first-child { border-top: 0; padding-top: 0; }
.lab-quiz__t { font-weight: 600; margin: 0 0 8px; }
.lab-quiz__opts { display: grid; gap: 8px; }
.lab-quiz__opt { text-align: left; background: var(--wp--preset--color--bg); color: var(--wp--preset--color--ink); border: 1px solid var(--wp--preset--color--line); border-radius: 10px; padding: 10px 14px; font: inherit; cursor: pointer; }
.lab-quiz__opt:hover { border-color: var(--wp--preset--color--brand); }
.lab-quiz__opt.is-right { border-color: #2F8A4F; background: rgba(47, 138, 79, .14); }
.lab-quiz__opt.is-wrong { border-color: #C2416B; background: rgba(194, 65, 107, .14); }
.lab-quiz__fb { margin: 8px 0 0; font-size: .95rem; color: var(--wp--preset--color--muted); }
.lab-quiz__score { font-weight: 700; margin: 14px 0 0; }

/* hub cards */
.lab-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 18px 0; }
.lab-card { display: block; text-decoration: none; color: inherit; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: 14px; padding: 20px; transition: border-color .15s ease, transform .15s ease; }
.lab-card:hover { border-color: var(--wp--preset--color--brand); transform: translateY(-2px); }
.lab-card b { display: block; font: 700 2rem/1.1 var(--wp--preset--font-family--display); color: var(--wp--preset--color--ink); }
.lab-card em { font-style: normal; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.lab-card span { display: block; margin-top: 6px; color: var(--wp--preset--color--muted); font-size: 1rem; }
.lab-path { counter-reset: stage; list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.lab-path li { counter-increment: stage; display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: baseline; border: 1px solid var(--wp--preset--color--line); border-radius: 10px; padding: 9px 12px; background: var(--wp--preset--color--surface); }
.lab-path li::before { content: counter(stage); font: 700 1.1rem var(--wp--preset--font-family--display); color: var(--wp--preset--color--accent); }
.lab-path .lab-live { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--wp--preset--color--brand); border-radius: 999px; padding: 3px 9px; }
.lab-path .lab-soon { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
@media (prefers-reduced-motion: reduce) { .lab-card { transition: none; } .lab-card:hover { transform: none; } }

/* ---------- Lesson navigation ---------- */
.lab-bandnav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 4px 0 18px; }
.lab-bandnav__all { font-size: .95rem; font-weight: 600; text-decoration: none; color: var(--wp--preset--color--muted); }
.lab-bandnav__all:hover { color: var(--wp--preset--color--brand); text-decoration: underline; }
.lab-bandnav ul { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0; border: 1px solid var(--wp--preset--color--line); border-radius: 999px; overflow: hidden; background: var(--wp--preset--color--surface); }
.lab-bandnav li { margin: 0; }
.lab-bandnav li a { display: block; padding: 9px 20px; text-decoration: none; font-weight: 600; color: var(--wp--preset--color--ink); border-right: 1px solid var(--wp--preset--color--line); }
.lab-bandnav li:last-child a { border-right: 0; }
.lab-bandnav li a:hover { background: var(--wp--preset--color--bg); }
.lab-bandnav li a[aria-current="page"] { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--surface); }

.lab-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--wp--preset--color--line); }
.lab-pager a { display: block; text-decoration: none; color: inherit; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: 14px; padding: 16px 20px; transition: border-color .15s ease; }
.lab-pager a:hover { border-color: var(--wp--preset--color--brand); }
.lab-pager span { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.lab-pager b { display: block; margin-top: 4px; font: 700 1.4rem/1.2 var(--wp--preset--font-family--display); color: var(--wp--preset--color--ink); }
.lab-pager__next { text-align: right; }
@media (max-width: 600px) { .lab-pager { grid-template-columns: 1fr; } .lab-pager__next { text-align: left; } }
@media (prefers-reduced-motion: reduce) { .lab-pager a { transition: none; } }

/* ---------- 2.4 GHz overlap chart ---------- */
.lab-ov-zone { fill: var(--wp--preset--color--accent); opacity: .26; }
.lab-ov-row { cursor: pointer; outline: none; }
.lab-ov-row:focus-visible .lab-ov-bar { stroke: var(--wp--preset--color--ink); stroke-width: 2; }
.lab-ov-bar.is-sel { fill: var(--wp--preset--color--accent); }
.lab-ov-bar.is-ov { fill: var(--wp--preset--color--brand); }
.lab-ov-bar.is-none { fill: var(--wp--preset--color--muted); opacity: .28; }
.lab-ov-row:hover .lab-ov-bar { stroke: var(--wp--preset--color--ink); stroke-width: 1.5; }
.lab-ovdetail { margin-top: 14px; }
.lab-who { margin: 0 0 14px; }
.lab-who__t { font: 700 .8rem/1 var(--wp--preset--font-family--body); letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0 0 8px; }
.lab-whol { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; margin: 0; }

/* ---------- waveform models ---------- */
.lab-bits { display: flex; flex-wrap: wrap; gap: 6px; }
.lab-bit__w { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.lab-bit { width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--bg); color: var(--wp--preset--color--ink); font: 700 1.1rem var(--wp--preset--font-family--mono); cursor: pointer; }
.lab-bit[aria-pressed="true"] { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--surface); border-color: var(--wp--preset--color--ink); }
.lab-bit__n { font-size: .72rem; color: var(--wp--preset--color--muted); }
.lab-tog { display: flex; align-items: center; gap: 8px; font-size: .95rem; cursor: pointer; }
.lab-tog input { width: 18px; height: 18px; accent-color: var(--wp--preset--color--accent); }
.lab-pipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin: 8px 0 14px; counter-reset: p; }
.lab-pipe__step { position: relative; border: 1px solid var(--wp--preset--color--line); border-radius: 10px; padding: 10px 12px 12px; background: var(--wp--preset--color--bg); display: flex; flex-direction: column; gap: 2px; }
.lab-pipe__n { font: 700 .95rem var(--wp--preset--font-family--display); color: var(--wp--preset--color--accent); letter-spacing: .08em; }
.lab-pipe__step b { font-weight: 700; }
.lab-pipe__v { font: 700 1.1rem var(--wp--preset--font-family--display); color: var(--wp--preset--color--brand); }
.lab-pipe__d { font-size: .86rem; color: var(--wp--preset--color--muted); line-height: 1.35; }
.lab-sinc { fill: none; stroke: var(--wp--preset--color--brand); stroke-width: 1; opacity: .3; }
.lab-sinc.is-sel { stroke: var(--wp--preset--color--accent); stroke-width: 3; opacity: 1; }
.lab-sinc-zero { fill: var(--wp--preset--color--ink); }

.lab-dual { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 10px; }
@media (max-width: 820px) { .lab-dual { grid-template-columns: minmax(0, 1fr); } }

/* 2.4 GHz overlap chart: one row of channels */
.lab-ov-bell { cursor: pointer; transition: opacity .15s ease; }
.lab-ov-bell.is-none { fill: var(--wp--preset--color--muted); opacity: .16; }
.lab-ov-bell.is-ov { fill: var(--wp--preset--color--brand); }
.lab-ov-bell.is-sel { fill: var(--wp--preset--color--accent); opacity: .92; stroke: var(--wp--preset--color--ink); stroke-width: 2; }
.lab-ov-edge { stroke: var(--wp--preset--color--ink); stroke-width: 1.5; stroke-dasharray: 5 4; }
.lab-tick.is-picked { fill: var(--wp--preset--color--accent); font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .lab-ov-bell { transition: none; } }

/* ---- 2.4 GHz channel combinations: several networks, each with its own width ---- */
.lab-seg--presets button { font-size: .9rem; }
.lab-nets { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 6px; }
.lab-net { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--wp--preset--color--line); border-radius: 10px; background: var(--wp--preset--color--surface); }
.lab-net select { flex: 1 1 240px; max-width: 360px; }
.lab-net__badge { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-weight: 800; font-size: .9rem; }
.lab-net__b { background: transparent; border: 1px solid var(--wp--preset--color--line); border-radius: 8px; padding: 5px 10px; cursor: pointer; color: var(--wp--preset--color--ink); font: 500 .9rem var(--wp--preset--font-family--body); }
.lab-net__b:hover { background: var(--wp--preset--color--bg); }
.lab-net-0, .lab-netbg-0 { --net: #e8590c; } .lab-net-1, .lab-netbg-1 { --net: #1c7ed6; } .lab-net-2, .lab-netbg-2 { --net: #2f9e44; }
.lab-net-3, .lab-netbg-3 { --net: #ae3ec9; } .lab-net-4, .lab-netbg-4 { --net: #c9a100; } .lab-net-5, .lab-netbg-5 { --net: #0c8599; }
.lab-netbg-0, .lab-netbg-1, .lab-netbg-2, .lab-netbg-3, .lab-netbg-4, .lab-netbg-5 { background: var(--net); fill: var(--net); }
.lab-ov-bell.is-net { fill: var(--net); fill-opacity: .34; stroke: var(--net); stroke-width: 2.5; }
.lab-net-letter { fill: #fff; font-weight: 800; font-size: 14px; pointer-events: none; }
.lab-ov-zone.is-bad { fill: #e03131; opacity: .34; }
.lab-ov-zone.is-same { fill: #f08c00; opacity: .26; }
.lab-verdict { margin: 10px 0 0; font-weight: 600; }
.lab-tone-good { color: #2b8a3e; font-weight: 600; } .lab-tone-warn { color: #b25e00; font-weight: 600; } .lab-tone-bad { color: #c92a2a; font-weight: 600; }
@media (prefers-color-scheme: dark) { .lab-tone-good { color: #69db7c; } .lab-tone-warn { color: #ffc078; } .lab-tone-bad { color: #ff8787; } }

/* ---- The book: contents page ---- */
.lab-book { counter-reset: part; display: grid; gap: 10px; margin: 14px 0 22px; }
.lab-part { border: 1px solid var(--wp--preset--color--line); border-radius: 14px; background: var(--wp--preset--color--surface); overflow: hidden; }
.lab-part[open] { border-color: var(--wp--preset--color--brand); }
.lab-part > summary { counter-increment: part; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; grid-template-areas: "n name count" "n blurb count"; column-gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; }
.lab-part > summary::-webkit-details-marker { display: none; }
.lab-part__n::before { content: counter(part); grid-area: n; font: 700 1.5rem var(--wp--preset--font-family--display); color: var(--wp--preset--color--accent); }
.lab-part__n { grid-area: n; }
.lab-part__name { grid-area: name; font: 700 1.35rem/1.2 var(--wp--preset--font-family--display); color: var(--wp--preset--color--ink); }
.lab-part__blurb { grid-area: blurb; color: var(--wp--preset--color--muted); font-size: .95rem; }
.lab-part__count { grid-area: count; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.lab-part > summary:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: -2px; }
.lab-part > summary::after { content: "+"; grid-area: count; justify-self: end; margin-right: -2px; display: none; }
.lab-topics { list-style: none; margin: 0; padding: 0 12px 10px; display: grid; gap: 6px; border-top: 1px solid var(--wp--preset--color--line); padding-top: 10px; }
.lab-topics li { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 10px; }
.lab-topics li > a, .lab-topics li > div { flex: 1 1 auto; display: block; padding: 9px 12px; text-decoration: none; color: inherit; border-radius: 10px; }
.lab-topics b { display: block; font-weight: 700; color: var(--wp--preset--color--ink); }
.lab-topics span { display: block; color: var(--wp--preset--color--muted); font-size: .92rem; }
.lab-topics .is-live > a { border: 1px solid var(--wp--preset--color--line); }
.lab-topics .is-live > a:hover { border-color: var(--wp--preset--color--brand); background: var(--wp--preset--color--bg); }
.lab-topics .is-soon { opacity: .7; }
.lab-topics i { font-style: normal; flex: none; margin-right: 8px; }
.lab-topics .lab-live { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--wp--preset--color--brand); border-radius: 999px; padding: 3px 9px; }
.lab-topics .lab-soon { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.lab-part__more { margin: 0; padding: 0 16px 14px; }

/* ---- Foundations ---- */
.lab-trace { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lab-trace.is-a { stroke: var(--wp--preset--color--brand); }
.lab-trace.is-b { stroke: var(--wp--preset--color--accent); }
.lab-trace.is-sum { stroke: var(--wp--preset--color--ink); stroke-width: 4; }
.lab-panel { border: 1px solid var(--wp--preset--color--line); border-radius: 12px; padding: 14px 16px; margin: 14px 0; background: var(--wp--preset--color--surface); }

/* ---- Generations, checklist, progress ---- */
.lab-gens { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.lab-gen { display: grid; gap: 2px; text-align: left; padding: 8px 14px; border: 1px solid var(--wp--preset--color--line); border-radius: 10px; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); cursor: pointer; font: inherit; }
.lab-gen b { font-weight: 700; } .lab-gen span { font-size: .82rem; color: var(--wp--preset--color--muted); }
.lab-gen.is-on { border-color: var(--wp--preset--color--brand); box-shadow: inset 0 0 0 1px var(--wp--preset--color--brand); }
.lab-gen.is-dim { opacity: .35; }
.lab-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lab-check li { display: flex; gap: 10px; align-items: flex-start; }
.lab-check input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--wp--preset--color--brand); }
.lab-progress { height: 10px; border-radius: 99px; background: var(--wp--preset--color--line); overflow: hidden; margin: 6px 0 12px; }
.lab-progress span { display: block; height: 100%; width: 0; background: var(--wp--preset--color--brand); transition: width .2s ease; }

/* ---- Frames: MAC header builder and bit strips ---- */
.lab-frame { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 6px; }
.lab-frame__f { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border: 1px solid var(--wp--preset--color--line); border-radius: 8px; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); cursor: pointer; font: inherit; }
.lab-frame__f b { font-size: .9rem; line-height: 1.2; } .lab-frame__f span { font-size: .8rem; color: var(--wp--preset--color--muted); }
.lab-frame__f i { font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.lab-frame__f.is-new { border-color: var(--wp--preset--color--accent); }
.lab-frame__f.is-body { background: var(--wp--preset--color--bg); }
.lab-frame__f.is-sec { border-style: dashed; }
.lab-frame__f.is-on { box-shadow: inset 0 0 0 2px var(--wp--preset--color--brand); }
.lab-bits2w { margin: 10px 0; } .lab-bits2__t { margin: 0 0 4px; font-size: .85rem; color: var(--wp--preset--color--muted); font-weight: 600; }
.lab-bits2 { display: flex; flex-wrap: wrap; gap: 3px; }
.lab-bits2__s { display: grid; gap: 1px; text-align: center; padding: 6px 4px; border: 1px solid var(--wp--preset--color--line); border-radius: 6px; background: var(--wp--preset--color--surface); }
.lab-bits2__s.is-new { border-color: var(--wp--preset--color--accent); }
.lab-bits2__s b { font: 700 .95rem var(--wp--preset--font-family--body); font-variant-numeric: tabular-nums; }
.lab-bits2__s span { font-size: .72rem; line-height: 1.15; } .lab-bits2__s i { font-style: normal; font-size: .68rem; color: var(--wp--preset--color--muted); }
.lab-fcrow { cursor: pointer; } .lab-fcrow:hover { background: var(--wp--preset--color--bg); }
.lab-fcrow.is-on { box-shadow: inset 3px 0 0 var(--wp--preset--color--brand); background: var(--wp--preset--color--bg); }
.lab-fcrow.is-retired { opacity: .5; } .lab-fcrow.is-new td:nth-child(2) { color: var(--wp--preset--color--accent); font-weight: 700; }