/* Mechanism and Levels: reading chapters with a working sheet beside each. */
.view-head { max-width: 760px; padding: clamp(12px, 3vw, 36px) 0 clamp(16px, 2vw, 24px); }
.view-head h1 { font-size: clamp(32px, 4.4vw, 56px); }
.lede { font-size: clamp(16px, 1.4vw, 18px); color: var(--text-2); margin-top: 14px; max-width: 66ch; }
.split-note { margin-top: 14px; font-size: 14px; color: var(--text-2); padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); background: rgba(0,0,0,.35); }

.index { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.index a { font-size: 14px; text-decoration: none; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: rgba(14,14,13,.7); color: var(--text-2); }
.index a:hover { color: var(--text); border-color: rgba(236,236,230,.34); }

.chapter { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 40px; padding: clamp(28px, 4vw, 48px) 0; border-top: 1px solid var(--line); align-items: start; }
.chapter:first-of-type { border-top: 0; }
.ch-text { position: sticky; top: calc(var(--head-h) + 20px); display: grid; gap: 14px; }
.ch-text p { color: var(--text-2); max-width: 62ch; }
.chapter > .glass, .chapter > form.glass { padding: clamp(16px, 2vw, 24px); display: grid; gap: 14px; }

/* ladder chart (drawn by mech.js) */
.ladder-chart { min-height: 250px; }
.ladder-svg { display: block; width: 100%; }
.ladder-svg .tick line { stroke: var(--line); }
.ladder-svg .tick text, .ladder-svg .axis-t { fill: var(--text-3); font: 11px var(--mono); text-anchor: end; }
.ladder-svg .band-l line { stroke: var(--line); stroke-dasharray: 3 4; }
.ladder-svg .band-l text { fill: var(--text-2); font: 600 12px var(--body); text-anchor: middle; }
.ladder-svg .band-l text.sub { fill: var(--text-3); font: 11px var(--mono); }
.ladder-svg .ladder-line { fill: none; stroke: var(--text); stroke-width: 2; }
.ladder-svg .open-mark { stroke: var(--acc); stroke-width: 1.5; }
.ladder-svg .open-txt { fill: var(--acc); font: 600 11px var(--mono); }
.ladder-svg .marker line { stroke: var(--acc); stroke-dasharray: 2 3; }
.ladder-svg .marker circle { fill: var(--acc); stroke: var(--bg); stroke-width: 2; }
.finder-row { display: flex; gap: 8px; }
.finder-row input { max-width: 200px; }
.finder-out { font-size: 14px; color: var(--text-2); margin-top: 10px; }
.err-inline { color: var(--bad); }

table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); }
thead th { font-size: 12px; color: var(--text-3); font-weight: 600; }
td, tbody th { font-family: var(--mono); font-weight: 500; }
.all-tiers summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; color: var(--text-2); }
.tier-scroll { max-height: 360px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.tier-scroll thead th { position: sticky; top: 0; background: #151514; }
tr.is-here td { background: var(--acc-soft); color: var(--acc); }

.open-diagram { display: grid; grid-template-columns: 1fr 28px 1.2fr 1fr; gap: 12px; align-items: center; }
.od-h { font-size: 12px; color: var(--text-3); }
.od-big { font: 700 clamp(28px, 3vw, 40px)/1 var(--display); margin: 6px 0; }
.od-s { font: 12px var(--mono); color: var(--text-3); }
.od-arrow { height: 2px; background: var(--steel-d); position: relative; }
.od-arrow::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left-color: var(--steel-d); }
.od-split { display: grid; gap: 8px; font-size: 14px; color: var(--text-2); }
.od-split b { color: var(--text); font-family: var(--mono); }

.kv { margin: 0; display: grid; }
.kv div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.kv dt { font-size: 13px; color: var(--text-3); }
.kv dd { margin: 0; font-size: 14px; }
.formula { font: 500 14px/1.9 var(--mono); color: var(--text); padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(0,0,0,.35); }
.formula span { padding: 2px 6px; border-radius: 4px; background: rgba(236,236,230,.08); }
.calc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.calc-grid label span, .tax-in span { display: block; font-size: 12px; color: var(--text-3); margin-bottom: 6px; }
.calc-out { display: grid; gap: 4px; padding: 12px; border-radius: var(--r-sm); background: rgba(0,0,0,.35); border: 1px solid var(--line); }
.calc-out span { font-size: 12px; color: var(--text-3); }
.calc-out b { font: 700 26px/1.1 var(--display); color: var(--acc); }
.calc-out small { font-size: 12px; color: var(--text-3); }
.ticks { margin: 0; padding-left: 18px; color: var(--text-2); display: grid; gap: 6px; }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line-2); border-radius: 10px; gap: 2px; justify-self: start; }
.seg button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 7px; background: transparent; color: var(--text-2); font: 600 14px var(--body); cursor: pointer; }
.seg button[aria-checked="true"] { background: var(--text); color: var(--acc-ink); }
.tax-in input { max-width: 260px; }
.tax-bar { --dead: 0; --tax: 0; display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: rgba(236,236,230,.1); }
.tax-bar i { display: block; height: 100%; }
.tb-keep { flex: 1; background: var(--text); }
.tb-dead { width: calc(var(--dead) * 6%); background: var(--steel-d); }
.tb-tax { width: calc(var(--tax) * 6%); background: var(--acc); }
.addr { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: rgba(0,0,0,.35); }
.addr code { flex: 1; font-size: 14px; }
.not-h { margin-top: 8px; }
.bncb-sheet > p:last-child { color: var(--text-2); font-size: 14px; }

/* ---------- Levels ---------- */
.board-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.board { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(0,0,0,.3); }
.board span:last-child { font-size: 13px; color: var(--text-2); }
.board-ico svg { width: 28px; height: 28px; fill: none; stroke: var(--steel); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.board-empty { font-size: 14px; color: var(--text-2); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.lv-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; }
.lv { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(0,0,0,.3); color: var(--text); cursor: pointer; font: inherit; }
.lv:hover { border-color: rgba(236,236,230,.3); }
.lv[aria-checked="true"] { border-color: var(--acc); background: var(--acc-soft); }
.lv-fig { width: var(--fig, 30px); display: block; }
.lv b { font: 600 12px/1.15 var(--display); text-align: center; }
.lv > span:last-child { font: 11px var(--mono); color: var(--text-3); }
.lv-detail { font-size: 14px; color: var(--text-2); }

.maker .ch-text { position: static; }
.maker-form { padding: clamp(16px, 2vw, 22px); display: grid; gap: 10px; }
.mf { display: block; }
.mf-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mk-level { font-size: 14px; color: var(--text-2); }
.card-stage { display: grid; place-items: center; }
.card-stage canvas { width: 100%; max-width: 460px; height: auto; border-radius: 6px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); }

@media (max-width: 900px) {
  .chapter { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ch-text { position: static; }
  .open-diagram { grid-template-columns: 1fr; }
  .od-arrow { width: 2px; height: 20px; justify-self: start; margin-left: 20px; }
  .od-arrow::after { right: -4px; top: auto; bottom: -6px; border: 5px solid transparent; border-top-color: var(--steel-d); }
  .calc-grid, .board-row { grid-template-columns: minmax(0, 1fr); }
  .lv-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kv div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (max-width: 560px) {
  .rail-bands b { display: none; }
  .rail-key { font-size: 11px; }
  .quick button { min-width: 44px; }
  .stepper { grid-template-columns: 44px 60px 44px; }
}