/* Fix it: the workbench (a string of 32 lights and a tester) and the lamp that will not turn on.
   Tokens only. Ink line, paper fill; blue = the stretch you pick and the bulb you find;
   lamp yellow = light (the tester lamp, the lit string, the lit lamp); red = the one safety line. */

.part-try { padding-top: var(--s5); }

/* ---------- The workbench ---------- */
.bench { position: relative; }
.bench-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3) var(--s6); }
.bench-say { margin: 0; max-width: 46rem; min-height: 2.5em; font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem); line-height: 1.25; font-weight: 640; letter-spacing: -0.01em; display: flex; align-items: flex-end; }
.bench-count { display: flex; gap: var(--s6); margin: 0; }
.bench-count div { display: flex; flex-direction: column-reverse; align-items: flex-end; }
.bench-count dt { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.2; }
.bench-count dd { margin: 0; font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); font-weight: 820; line-height: 1; letter-spacing: -0.02em; min-width: 2ch; text-align: right; }

.bench-fig { margin-top: var(--s3); touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.string-svg { width: 100%; height: auto; overflow: visible; }
.s-cord { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.s-plug { fill: var(--paper); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.s-prong { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.s-nail { fill: var(--ink); }
.s-socket { fill: var(--ink); transition: fill var(--t-mid) var(--ease); }
.s-glass { fill: var(--paper); stroke: var(--ink); stroke-width: 2; transition: fill var(--t-slow) var(--ease), stroke var(--t-mid) var(--ease); }
.s-num { font-family: var(--sans); font-size: 16px; font-weight: 520; fill: var(--ink-2); text-anchor: middle; font-variant-numeric: tabular-nums lining-nums; }
.s-bulb.is-clear .s-glass { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 3 3; }
.s-bulb.is-clear .s-socket { fill: var(--ink-2); }
.s-bulb.is-sel .s-glass { stroke: var(--blue); stroke-width: 2.5; }
.s-bulb.is-sel .s-socket { fill: var(--blue); }
.s-bulb.is-sel.is-clear .s-glass { stroke: var(--blue); stroke-width: 1.5; }
.s-bulb.is-hover .s-glass { stroke: var(--blue); }
.s-bulb.is-sel .s-num { fill: var(--ink); font-weight: 700; }
.s-dim { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linejoin: miter; }
.s-clip { fill: var(--blue); }
.s-lead { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.s-box { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.s-term { fill: var(--ink); }
.s-tlamp { fill: var(--paper); stroke: var(--ink); stroke-width: 2; transition: fill var(--t-mid) var(--ease); }
.s-tester.is-fine .s-tlamp { fill: var(--yellow); }
.s-reading { font-family: var(--sans); font-size: 16px; font-weight: 650; fill: var(--ink-2); }
.s-tester.is-fine .s-reading, .s-tester.is-break .s-reading { fill: var(--ink); font-weight: 760; }
.s-hits rect { fill: transparent; cursor: pointer; }
.is-found .s-hits rect { cursor: default; }

/* Found: the bulb is circled in blue, then the string lights from the plug end. */
.s-found { fill: none; stroke: var(--blue); stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); }
.is-found .s-found { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 480ms var(--ease); }
.is-found .s-glass { fill: var(--yellow); }

/* Controls: the stretch, the test, and quick picks. */
.bench-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s6); margin-top: var(--s2); }
.stretch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); border: 0; margin: 0; padding: 0; min-width: 0; }
.stretch label { font-size: var(--fs-small); font-weight: 560; }
.stretch input { width: 4.25ch; min-height: 44px; padding: 0 var(--s2); border: var(--bw) solid var(--ink); border-radius: var(--r-control); background: var(--paper); font-size: var(--fs-body); font-weight: 650; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.stretch input::-webkit-outer-spin-button, .stretch input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stretch input:disabled { color: var(--ink-2); border-color: var(--hair); }
.btn-test { min-width: 12.5rem; margin-left: var(--s2); font-variant-numeric: tabular-nums lining-nums; }
.picks { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s2); }
.picks .btn[hidden] { display: none; }
.picks .btn:disabled { color: var(--ink-2); border-color: var(--hair); cursor: not-allowed; }
.picks .btn:disabled:hover { background: transparent; }

/* The log: one token per test. A lit dot means current got through (fine). */
.bench-log { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); font-size: var(--fs-small); }
.bench-log:empty { display: none; }
.bench-log li { margin: 0; display: inline-flex; align-items: center; gap: 0.4em; min-height: 32px; padding: 0 var(--s3) 0 var(--s2); border: var(--bw) solid var(--hair); border-radius: var(--r-control); }
.bench-log li::before { content: ""; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); flex: none; }
.bench-log li.is-fine::before { background: var(--yellow); }
.lg-n { color: var(--ink-2); }
.lg-s { font-weight: 700; }
.lg-r { color: var(--ink-2); }
.bench-log li.is-break .lg-r { color: var(--ink); font-weight: 650; }

/* After: the comparison, said once and drawn once. */
.bench-after { margin-top: var(--s6); padding-top: var(--s4); border-top: var(--bw) solid var(--ink); }
.after-lead { margin: 0 0 var(--s4); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); font-weight: 820; line-height: 1.1; letter-spacing: -0.02em; }
.steps-fig { margin: 0; }
.chart-svg { width: 100%; height: auto; overflow: visible; display: block; }
.c-grid { stroke: var(--hair); stroke-width: 1; }
.c-ax { font-family: var(--sans); font-size: 16px; fill: var(--ink-2); font-variant-numeric: tabular-nums lining-nums; }
.c-ax-y { text-anchor: end; }
.c-ax-x, .c-ax-t { text-anchor: middle; }
.c-stair-fill { fill: var(--paper-2); }
.c-stair { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: miter; }
.c-half { fill: var(--yellow); }
.c-base { stroke: var(--ink); stroke-width: 2; }
.c-avg { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 6 5; }
.c-lab { font-family: var(--sans); font-size: 16px; font-weight: 640; fill: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.c-end { text-anchor: end; }
.c-lab-half { text-anchor: end; font-weight: 760; }
.c-you-line { stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 2 4; }
.c-you { fill: var(--blue); stroke: var(--paper); stroke-width: 2; }
.c-you-lab { font-weight: 760; }
.c-hover { fill: none; stroke: var(--ink-2); stroke-width: 1; }
.c-hits rect { fill: transparent; }
.steps-read { margin-top: var(--s2); min-height: 1.5em; font-size: var(--fs-small); color: var(--ink-2); font-variant-numeric: tabular-nums lining-nums; }
.after-sum { margin-top: var(--s4); }

/* ---------- The lamp that will not turn on ---------- */
.lamp { margin-top: var(--s8); padding-top: var(--s4); border-top: var(--bw) solid var(--ink); }
.lamp h3 { margin: 0 0 var(--s3); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 820; letter-spacing: -0.02em; }
.lamp-def { color: var(--ink-2); }
.lamp-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s6) var(--s7); margin-top: var(--s5); align-items: start; }
.lamp-fig { margin: 0; }
.lamp-svg { width: 100%; max-width: 30rem; height: auto; }
.l-floor { stroke: var(--hair); stroke-width: 1; }
.l-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.l-ink { fill: var(--ink); }
.l-paper { fill: var(--paper); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.l-leg { fill: none; stroke: var(--ink); stroke-width: 3; }
.l-cord { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.l-stem { fill: none; stroke: var(--ink); stroke-width: 4; }
.l-bulb { fill: var(--paper); stroke: var(--ink); stroke-width: 2; transition: fill var(--t-slow) var(--ease); }
.l-light { fill: var(--yellow); opacity: 0; transition: opacity var(--t-slow) var(--ease); }
.lamp-svg.is-lit .l-light { opacity: 0.5; }
.lamp-svg.is-lit .l-bulb { fill: var(--yellow); }
.lamp-clock { margin: var(--s3) 0 0; font-size: var(--fs-small); color: var(--ink-2); }
.lamp-clock .num { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); font-weight: 820; color: var(--ink); letter-spacing: -0.02em; margin-right: 0.15em; }

.lamp-ask { margin: 0 0 var(--s2); font-weight: 700; }
.lamp-checks { list-style: none; margin: 0 0 var(--s5); padding: 0; border-bottom: var(--bw) solid var(--hair); }
.lamp-checks li { margin: 0; }
.chk { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 48px; padding: var(--s2) var(--s2); border: 0; border-top: var(--bw) solid var(--hair); background: transparent; color: var(--ink); text-align: left; font-size: var(--fs-small); font-weight: 560; line-height: 1.3; cursor: pointer; transition: background var(--t-fast) var(--ease); }
.chk:hover { background: var(--paper-2); }
.chk-m { flex: none; color: var(--ink-2); font-weight: 500; }

.lamp-path { margin: 0; padding-left: 1.4em; font-size: var(--fs-small); }
.lamp-path:empty { display: none; }
.lamp-path li { margin: 0 0 var(--s3); padding-left: var(--s1); }
.lamp-path li::marker { font-weight: 700; font-variant-numeric: tabular-nums; }
.lp-t strong { font-weight: 680; }
.lp-m { color: var(--ink-2); }
.lp-f { display: block; color: var(--ink); }
.lamp-path li:not(.is-new) .lp-f { color: var(--ink-2); }

.lamp-review { margin-top: var(--s6); padding-top: var(--s4); border-top: var(--bw-strong) solid var(--ink); max-width: var(--measure); }
.lr-head { width: fit-content; margin: 0 0 var(--s3); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 820; letter-spacing: -0.015em; line-height: 1.15; }
.lr-head:focus, .lr-head:focus-visible { outline: none; }
.warn { color: var(--red); font-weight: 720; }
.lr-compare { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s7); margin: var(--s4) 0; }
.lr-compare div { display: flex; flex-direction: column-reverse; }
.lr-compare dt { font-size: var(--fs-small); color: var(--ink-2); }
.lr-compare dd { margin: 0; font-size: 1.5rem; font-weight: 780; letter-spacing: -0.01em; }
.lr-careful { color: var(--ink-2); }
.lr-k { color: var(--ink); font-weight: 650; }
.lr-note { font-weight: 560; }

/* ---------- What just happened: the halving figure ---------- */
.halve { margin: var(--s5) 0 var(--s6); max-width: 52rem; }
.halve-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); border-top: var(--bw) solid var(--ink); padding-top: var(--s3); }
.halve-nums p { margin: 0; display: flex; flex-direction: column; }
.halve-big { font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5.25rem); font-weight: 850; line-height: 1; letter-spacing: -0.035em; overflow-wrap: anywhere; }
.halve-half .halve-big { align-self: flex-start; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 0.16em; text-underline-offset: 0.06em; text-decoration-skip-ink: none; }
.halve-lab { margin-top: var(--s2); font-size: var(--fs-small); color: var(--ink-2); }
.halve-chain { margin: var(--s4) 0 var(--s3); font-size: var(--fs-small); color: var(--ink-2); }
.halve-in { display: block; font-size: var(--fs-small); font-weight: 620; }
.halve-in output { font-weight: 800; }
.halve figcaption { font-size: var(--fs-small); color: var(--ink-2); }

/* ---------- Where you'll meet this ---------- */
.meet-table tbody th { width: 24%; font-size: 1.0625rem; }
.meet-table td:nth-child(2) { width: 30%; }
@media (max-width: 640px) {
  .meet-table thead { display: none; }
  .meet-table, .meet-table tbody, .meet-table tr, .meet-table th, .meet-table td { display: block; width: auto !important; }
  .meet-table tr { padding: var(--s3) 0; border-bottom: var(--bw) solid var(--hair); }
  .meet-table th, .meet-table td { border: 0; padding: 0; }
  .meet-table td:nth-child(2) { margin: var(--s1) 0; font-style: italic; }
  .meet-table td:nth-child(3) { color: var(--ink-2); }
}

.fix-verses .verse:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .lamp-grid { grid-template-columns: 1fr; }
  .lamp-svg { max-width: 22rem; }
}
@media (max-width: 640px) {
  .bench-top { flex-direction: column-reverse; align-items: stretch; gap: var(--s2); }
  .bench-say { min-height: 3.75em; align-items: flex-start; }
  .bench-count { gap: var(--s5); }
  .bench-count div { flex-direction: row-reverse; align-items: baseline; gap: var(--s2); }
  .bench-count dd { font-size: 1.75rem; min-width: 0; text-align: left; }
  .btn-test { min-width: 0; margin-left: 0; flex: 1 1 100%; }
  .bench-controls { justify-content: flex-start; }
  .halve-nums { gap: var(--s4); }
}