/* Lesson pages: a lab "instrument" (lesson rail · stage · control panel), then the lesson notes.
   Same layout language as the stay add. Physics lab pages. Desktop: the lab fills the
   screen under the nav; below 1100px it becomes one scrolling column. */

/* ---------- Lesson bar ---------- */
.lesson-bar { position: relative; display: flex; align-items: center; gap: 24px; height: 50px; padding: 0 24px; border-bottom: 1px solid var(--line); background: var(--bg); }
.crumb { display: flex; gap: 8px; font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.crumb span { color: var(--ink-4); }
.crumb a:hover { color: var(--ink); }
.crumb b { color: var(--ink); font-weight: 500; }
.stepper { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; }
.stepper a { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 6px; font-size: 13.5px; color: var(--ink-3); transition: color .15s; }
.stepper a + a::before { content: ""; width: 20px; height: 1px; background: var(--line-2); margin: 0 6px 0 -10px; }
.stepper a:hover { color: var(--ink); }
.s-n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 500 11px var(--font-mono); border: 1px solid var(--line-2); }
.stepper [aria-current="step"] { color: var(--ink); font-weight: 500; }
.stepper [aria-current="step"] .s-n { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.bar-r { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.bar-r b { font-weight: 500; color: var(--ink); display: inline-block; min-width: 3.6ch; text-align: right; }

/* ---------- App grid ---------- */
.app { display: grid; grid-template-columns: 232px minmax(0, 1fr) 320px; border-bottom: 1px solid var(--line); }
@media (min-width: 1100px) {
  .app { height: calc(100vh - var(--header-h) - 50px); min-height: 700px; }
}

/* lesson rail */
.rail { display: flex; flex-direction: column; padding: 24px 14px 20px; border-right: 1px solid var(--line); overflow-y: auto; }
.rail > .eyebrow { padding: 0 10px 12px; }
.lessons { list-style: none; }
.lessons a { display: flex; gap: 12px; align-items: flex-start; padding: 9px 10px; border-radius: 7px; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; transition: background-color .15s, color .15s; }
.lessons a[href]:hover { background: var(--bg-2); color: var(--ink); }
.lessons small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.lessons .n { width: 14px; flex: none; text-align: right; font: 12px/1.6 var(--font-mono); color: var(--ink-4); }
.lessons .soon a { color: var(--ink-3); cursor: default; }
.lessons .on a { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: inset 0 0 0 1px var(--line), inset 2px 0 0 var(--c-energy); }
.lessons .on .n { color: var(--c-energy); }
.lessons .on small { font-weight: 400; }
.lessons .tag { margin-left: auto; }
.mastery { margin-top: auto; padding: 18px 10px 0; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }
.m-row { display: flex; justify-content: space-between; margin-bottom: 10px; color: var(--ink-2); }
.mastery p { margin-top: 14px; line-height: 1.5; }
.mastery b { color: var(--ink); font-weight: 500; }

/* centre: stage + data */
.center { display: flex; flex-direction: column; gap: 16px; padding: 20px; min-width: 0; min-height: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.stage { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow); }
.stage-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 500; }
.stage-head .eyebrow { margin-right: 8px; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font: 400 12px var(--font-mono); color: var(--ink-3); }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.key { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.key-a { background: var(--c-a); }
.key-b { background: var(--c-b); }
.key-pair { margin-left: -9px; }
.key-hit { border: 1.5px solid var(--c-energy); }
.cat-badge { color: var(--c-cat); font-weight: 500; }
.stage-body { flex: 1; min-height: 240px; display: grid; place-items: center; padding: 12px; container-type: size; }
.stage-body canvas { width: min(100cqw, 100cqh * 720 / 440); aspect-ratio: 720 / 440; height: auto; }
.stage-tools { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.stage-tools .play .ic, .stage-tools .icon-btn .ic { width: 15px; height: 15px; }
.speed { width: 180px; margin-left: 6px; }
.speed button { font-family: var(--font-mono); font-size: 12px; }
.sw-row { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.sw-row:first-of-type { margin-left: auto; }
.sw-row + .sw-row { margin-left: 14px; }

.data { flex: none; height: 300px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
.data .card { padding: 12px 16px 12px; min-width: 0; display: flex; flex-direction: column; }
.card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card-h h2 { font-size: 13.5px; font-weight: 500; }
.card-h .num { font-size: 12px; color: var(--ink-3); }
.tabs { display: flex; gap: 2px; }
.tabs button { padding: 4px 10px 6px; font-size: 13px; color: var(--ink-3); border-bottom: 1.5px solid transparent; transition: color .15s, border-color .15s; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); }
.panel-c { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chart { flex: 1; min-height: 0; width: 100%; margin-top: 4px; }
.caption { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.done-note { color: var(--c-energy); }
.chart-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.chart-actions { display: flex; gap: 6px; }
.chart-actions .btn { height: 28px; padding: 0 10px; font-size: 12px; }
.pin-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 11px var(--font-mono); color: var(--ink-3); }
.pin-chip { display: inline-flex; align-items: center; gap: 6px; }
.pin-chip i { width: 16px; height: 0; border-top: 1.5px dashed var(--c); }
.pin-chip.is-current i { border-top: 2px solid var(--ink); }

/* chart parts drawn by the simulation */
.chart .gl { stroke: var(--grid); }
.chart .axis { stroke: var(--ink-3); stroke-width: 1; }
.chart .tick { font-size: 10px; fill: var(--ink-3); }
.chart .axis-label { font-size: 10.5px; fill: var(--ink-3); }
.chart .rc-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.chart .rc-area { fill: color-mix(in srgb, var(--ink) 6%, transparent); }
.chart .rc-head { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.chart .rc-pin { fill: none; stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart .ed-curve { fill: none; stroke: var(--ink); stroke-width: 2; }
.chart .ed-base { fill: none; stroke: var(--ink-4); stroke-width: 1.25; stroke-dasharray: 5 4; }
.chart .ed-shade { fill: color-mix(in srgb, var(--c-energy) 18%, transparent); }
.chart .ea-line { stroke: var(--c-energy); stroke-width: 1.5; }
.chart .ea-line.is-cat { stroke: var(--c-cat); }
.chart .ea-line.is-dim, .chart .ea-text.is-dim { opacity: .3; }
.chart .ea-text { fill: var(--c-energy); font-weight: 500; font-size: 11px; }
.chart .ea-text.is-cat { fill: var(--c-cat); }
.chart .ed-note rect { fill: var(--raised); stroke: var(--line-2); }
.chart .ed-note text { fill: var(--ink-2); font-size: 11px; }
.chart .ed-note .strong { fill: var(--ink); font-weight: 500; }
.chart .sw-shade { fill: color-mix(in srgb, var(--c-energy) 40%, transparent); }
.profile .pf-main { fill: none; stroke: var(--ink); stroke-width: 2; }
.profile .pf-cat { fill: none; stroke: var(--c-cat); stroke-width: 2; stroke-dasharray: 6 5; opacity: .15; transition: opacity .3s; }
.profile .pf-arrow { fill: none; stroke: var(--c-energy); stroke-width: 1.25; }
.profile .pf-arrow-cat { fill: none; stroke: var(--c-cat); stroke-width: 1.25; }
.profile .pf-dh { fill: none; stroke: var(--ink-3); stroke-width: 1.25; }
.profile .t-cat { fill: var(--c-cat); font-weight: 500; }
.profile .cat-only { opacity: 0; transition: opacity .3s; }
.profile .cat-off-hint { fill: var(--ink-4); }
.profile.has-cat .cat-only, .profile.has-cat .pf-cat { opacity: 1; }
.profile.has-cat .cat-off-hint { display: none; }

/* readings */
.stats { flex: 1; display: grid; grid-template-columns: 1fr 1fr; margin-top: 8px; border-top: 1px solid var(--line); }
.stats div { position: relative; padding: 12px 4px 10px 0; border-bottom: 1px solid var(--line); }
.stats div:nth-child(odd) { padding-right: 14px; border-right: 1px solid var(--line); }
.stats div:nth-child(even) { padding-left: 14px; }
.stats div:nth-last-child(-n+2) { border-bottom: 0; }
.stats dt { font: italic 400 14px var(--font-display); color: var(--ink-3); }
.stats dd { font: 12px var(--font-mono); color: var(--ink-3); }
.stats b { font: 500 24px var(--font-mono); color: var(--ink); letter-spacing: -0.02em; margin-right: 2px; }
.stats .is-key b { color: var(--c-energy); }
.meter { display: block; height: 2px; margin-top: 8px; background: var(--line-2); }
.meter i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .3s; }

/* control panel */
.panel { border-left: 1px solid var(--line); overflow-y: auto; background: var(--bg); }
.group { padding: 16px 22px 18px; border-bottom: 1px solid var(--line); }
.group:last-child { border-bottom: 0; }
.g-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.g-row .num { font-size: 11px; }
.factor { padding: 10px 8px 8px; margin: 0 -8px; border-radius: 8px; }
.factor + .factor { border-top: 1px dashed var(--line-2); border-radius: 0; }
.factor.is-flash { animation: flash 1.2s var(--ease); }
@keyframes flash { from { background: var(--bg-2); } }
.f-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.f-row label, .f-row .lbl { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--d); }
.big { font: 500 17px var(--font-mono); letter-spacing: -0.02em; white-space: nowrap; }
.scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); }

.explain .explain-tag { display: inline-flex; align-items: center; gap: 7px; font: 500 11px var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.explain .explain-tag .ic { width: 13px; height: 13px; }
.explain h3 { font: 400 22px/1.2 var(--font-display); letter-spacing: -0.01em; margin: 8px 0 12px; }
.explain.is-fresh > * { animation: rise .45s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }
.chain { list-style: none; counter-reset: c; display: grid; }
.chain li { position: relative; counter-increment: c; padding: 0 0 10px 26px; font-size: 13.5px; color: var(--ink-2); }
.chain li::before { content: counter(c); position: absolute; left: 0; top: 1px; width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; font: 500 10px var(--font-mono); color: var(--ink-3); }
.chain li:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 20px; bottom: 2px; width: 1px; background: var(--line); }
.chain li:last-child { color: var(--ink); font-weight: 500; padding-bottom: 2px; }
.chain li:last-child::before { border-color: var(--c-energy); color: var(--c-energy); }
.phrase { margin-top: 12px; padding: 10px 0 0; border-top: 1px dashed var(--line-2); font: italic 400 15px/1.45 var(--font-display); color: var(--ink); }
.phrase span { display: block; font: 500 10.5px var(--font-mono); font-style: normal; letter-spacing: .09em; text-transform: uppercase; color: var(--c-energy); margin-bottom: 4px; }
.explain-note { display: flex; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }
.explain-note .ic { width: 13px; height: 13px; margin-top: 3px; }

.cmp-row { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.cmp-label { font-size: 13px; color: var(--ink-2); }
.cmp-val { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.cmp-val.up { color: var(--ok); }
.cmp-val.down { color: var(--red); }
.cmp-bar { grid-column: 1 / -1; position: relative; height: 2px; background: var(--line-2); }
.cmp-bar i { position: absolute; left: 0; top: -1px; height: 4px; border-radius: 2px; background: var(--ink-2); transition: width .5s var(--ease); }
.cmp-bar b { position: absolute; top: -5px; width: 1px; height: 12px; background: var(--ink-3); }
.cmp-row.is-main { border-bottom: 0; }
.cmp-row.is-main .cmp-label { color: var(--ink); font-weight: 500; }
.cmp-row.is-main .cmp-bar i { background: var(--c-energy); }
.note { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }

/* ---------- Notes ---------- */
.note-sec { padding-top: 104px; }
.sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: end; padding-bottom: 32px; margin-bottom: 36px; border-bottom: 1px solid var(--line); }
.sec-head h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.04; margin-top: 14px; }
.sec-head h2 em { color: var(--c-energy); }
.sec-aside p { color: var(--ink-2); max-width: 36em; }
.sec-aside b { color: var(--ink); font-weight: 500; }

.conditions { list-style: none; border-top: 1px solid var(--ink); }
.conditions li { display: grid; grid-template-columns: 56px minmax(0, 1fr) 260px; gap: 28px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); }
.m-n { font-size: 30px; font-style: italic; line-height: 1; color: var(--ink-3); }
.conditions h3 { font: 400 28px/1.1 var(--font-display); letter-spacing: -0.01em; margin-bottom: 8px; }
.conditions p { color: var(--ink-2); font-size: 14.5px; max-width: 36em; }
.conditions b { color: var(--ink); font-weight: 500; }
.cond-fig { width: 100%; height: auto; }

.factors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.fx { display: flex; flex-direction: column; padding-top: 18px; border-top: 2px solid var(--tc); }
.fx-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fx h3 { font: 400 26px/1.1 var(--font-display); }
.works { font: 500 10.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tc); white-space: nowrap; }
.flow { list-style: none; margin: 16px 0 14px; }
.flow li { position: relative; padding: 7px 0 7px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.flow li::before { content: "→"; position: absolute; left: 0; color: var(--ink-4); }
.flow li:last-child { color: var(--ink); font-weight: 500; }
.flow b { color: var(--ink); font-weight: 500; }
.watch { font-size: 13px; color: var(--ink-3); margin-bottom: 16px; }
.watch b { color: var(--ink-2); font-weight: 500; }
.fx .text-link { margin-top: auto; align-self: flex-start; font-size: 13.5px; }

.summary { width: 100%; margin-top: 48px; border-collapse: collapse; font-size: 14px; }
.summary th { text-align: left; font: 500 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 0 12px 10px 0; border-bottom: 1px solid var(--ink); }
.summary td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.summary td:first-child { font-weight: 500; }
.summary .muted { color: var(--ink-3); }

.model { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; padding: 30px 32px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.model-q { font-size: 26px; line-height: 1.25; margin-top: 10px; }
.marks { list-style: none; border-top: 1px solid var(--line); }
.marks li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); }
.mk { font-size: 12px; color: var(--ok); padding-top: 2px; }

.notes .quiz { max-width: 820px; }
.closing { margin-top: 112px; background: var(--bg-2); border-top: 1px solid var(--line); }
.closing-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: end; padding-top: 80px; padding-bottom: 80px; }
.closing h2 { font-size: clamp(34px, 4.2vw, 54px); line-height: 1.04; }
.closing h2 em { color: var(--c-energy); }
.closing p { color: var(--ink-2); margin-bottom: 20px; }
.footer { border-top: 0; }

/* ---------- Narrow screens: one scrolling column ---------- */
@media (max-width: 1099px) {
  .lesson-bar { height: auto; flex-wrap: wrap; gap: 8px 16px; padding: 10px 20px; }
  .crumb { display: none; }
  .stepper { position: static; transform: none; }
  .app { display: flex; flex-direction: column; }
  .center { order: 1; padding: 16px; }
  .panel { order: 2; border: 0; border-top: 1px solid var(--line); }
  .rail { order: 3; border: 0; border-top: 1px solid var(--line); padding: 20px 16px 28px; }
  .stage-body { flex: none; container-type: normal; padding: 10px; }
  .stage-body canvas { width: 100%; }
  .data { height: auto; grid-template-columns: 1fr; }
  .chart { flex: none; height: auto; }
  .factors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conditions li { grid-template-columns: 56px minmax(0, 1fr); }
  .cond-fig { grid-column: 2; max-width: 280px; }
}
@media (max-width: 720px) {
  .stepper a { padding: 6px 4px; font-size: 13px; }
  .stepper a + a::before { width: 10px; margin-left: -2px; }
  .bar-r { display: none; }
  .stage-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .speed { width: 150px; margin-left: 0; }
  .sw-row:first-of-type { margin-left: 0; }
  .group { padding: 16px 20px; }
  .note-sec { padding-top: 72px; }
  .sec-head, .model, .closing-in { grid-template-columns: 1fr; gap: 20px; }
  .factors { grid-template-columns: 1fr; gap: 32px; }
  .conditions li { grid-template-columns: 36px minmax(0, 1fr); gap: 16px; }
  .model { padding: 22px 20px; }
  .summary { font-size: 13px; }
  .summary th { font-size: 10px; }
  .closing { margin-top: 72px; }
  .closing-in { padding-top: 56px; padding-bottom: 56px; }
}