/* ============================================================================
   the balancing cube page: the story format from story.css, plus three things
   to play with. A balance game (one edge of the cube, one wheel), a slider for
   how much room the motors have, and the wiring diagrams with nets you can
   light up. Loaded after site.css and story.css, by that page only.
   ========================================================================== */

/* --- balance it yourself -------------------------------------------------- */

.bal { margin: 18px 0 28px; max-width: 760px; }

.bal-top {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 10px 18px; margin-bottom: 10px;
}
.case-body .bal-status { font-size: 15px; color: var(--text); margin: 0; min-height: 1.5em; }
.bal-speed { display: flex; gap: 16px; align-items: baseline; }
.bal-speed span { font-size: 12px; color: var(--faint); }
.bal-speed .g-btn[aria-pressed="true"] { border-bottom-color: var(--text); }
.bal-speed .g-btn[aria-pressed="false"] { color: var(--muted); }

.bal-stage {
  position: relative; border: 1px solid var(--rule); background: #050505;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.bal-stage svg { display: block; width: 100%; height: auto; }
.bal-stage .ln { fill: none; stroke: #F0F0F0; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bal-stage .thin { stroke-width: 1; opacity: 0.55; }
.bal-stage .body { fill: #050505; }
.bal-stage .dot { fill: #F0F0F0; }
.bal-stage text { font: 400 12px var(--font); fill: rgba(240, 240, 240, 0.6); }
.bal-stage .big { font-size: 15px; fill: var(--text); }
.bal-stage .push { fill: none; stroke: #F0F0F0; stroke-width: 2.2; stroke-linecap: round; opacity: 0; transition: opacity 0.08s; }
.bal-stage .push.on { opacity: 0.9; }

.bal-cover {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55); cursor: pointer;
}
.bal-cover span {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text); border-bottom: 1px solid var(--text); padding-bottom: 3px;
}
.bal-cover[hidden] { display: none; }

.bal-pads { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; margin-top: 12px; }
.bal-pad {
  font: 700 12px/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text); background: none; border: 1px solid var(--rule); padding: 16px 10px;
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.bal-pad:hover { border-color: rgba(240, 240, 240, 0.45); }
.bal-pad.on { background: rgba(240, 240, 240, 0.12); border-color: var(--text); }
.bal-pad:focus-visible { outline: 1px solid var(--text); outline-offset: 2px; }

.bal-read { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 22px; align-content: center; text-align: center; }
.bal-read b { display: block; font-size: 20px; line-height: 1.1; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.bal-read span { font-size: 12px; color: var(--faint); }

.bal-meter { margin-top: 12px; }
.bal-meter-t { display: flex; justify-content: space-between; font-size: 12px; color: var(--faint); margin-bottom: 6px; }
.bal-meter-bar { position: relative; height: 6px; background: rgba(240, 240, 240, 0.08); }
.bal-meter-bar i {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 0;
  background: var(--text); transition: background 0.2s ease;
}
.bal-meter-bar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--faint); }
.bal-meter-bar i.hot { background: #E84834; }

.bal-auto { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline; margin-top: 18px; }
.bal-auto p { margin: 0; font-size: 12px; color: var(--faint); }

/* --- the fit slider ---------------------------------------------------------- */

.fit { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 18px 34px; align-items: center; margin: 14px 0 26px; max-width: 820px; }
.fit svg { display: block; width: 100%; height: auto; overflow: visible; }
.fit .ln { fill: none; stroke: #F0F0F0; stroke-width: 1.5; stroke-linejoin: round; }
.fit .wall { fill: rgba(240, 240, 240, 0.1); stroke: rgba(240, 240, 240, 0.4); stroke-width: 1; }
.fit .can { fill: rgba(240, 240, 240, 0.16); stroke: #F0F0F0; stroke-width: 1.5; }
.fit .can.bad { fill: rgba(232, 72, 52, 0.35); stroke: #E84834; }
.fit .zc { fill: none; stroke: rgba(240, 240, 240, 0.55); stroke-width: 1.2; stroke-dasharray: 3 3; }
.fit .wh { stroke: rgba(240, 240, 240, 0.55); stroke-width: 3; }
.fit .br { fill: rgba(240, 240, 240, 0.3); }
.fit .gap { stroke: #F0F0F0; stroke-width: 1; }
.fit .gap.bad { stroke: #E84834; }
.fit text { font: 400 11px var(--font); fill: rgba(240, 240, 240, 0.6); }

.fit-ctl { display: grid; gap: 16px; }
.fit-ctl label { display: grid; gap: 6px; font-size: 12px; color: var(--faint); }
.fit-ctl label b { color: var(--text); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.fit-ctl input[type="range"] { width: 100%; accent-color: #F0F0F0; }
.case-body .fit-out { font-size: 30px; line-height: 34px; font-weight: 700; color: var(--text); margin: 0; font-variant-numeric: tabular-nums; max-width: none; }
.case-body .fit-out.bad { color: #E84834; }
.case-body .fit-note { font-size: 12px; color: var(--faint); margin: 0; max-width: 40ch; }

/* --- wiring: nets you can light up ------------------------------------------ */

.wd-tabs { display: flex; gap: 22px; margin: 4px 0 12px; }
.wd-tabs .g-btn[aria-selected="false"] { color: var(--muted); border-bottom-color: transparent; }
.wd-tabs .g-btn[aria-selected="true"] { border-bottom-color: var(--text); }

.wd-frame { border: 1px solid var(--rule); background: #050505; overflow-x: auto; }
.wd-frame svg { display: block; width: 100%; min-width: 760px; height: auto; }
.wd-frame svg[hidden] { display: none; }

.wd text { font: 400 12px var(--font); fill: rgba(240, 240, 240, 0.62); }
.wd .tl { font-size: 14px; font-weight: 600; fill: var(--text); }
.wd .tm { font-size: 13px; fill: rgba(240, 240, 240, 0.85); }
.wd .mut { fill: rgba(240, 240, 240, 0.4); }
.wd .box { fill: #050505; stroke: rgba(240, 240, 240, 0.55); stroke-width: 1.3; }
.wd .sym { fill: none; stroke: rgba(240, 240, 240, 0.6); stroke-width: 1.4; }
.wd .w {
  fill: none; stroke: rgba(240, 240, 240, 0.5); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: opacity 0.18s ease, stroke 0.18s ease, stroke-width 0.18s ease;
  pointer-events: stroke; cursor: pointer;
}
.wd .w.thin { stroke-width: 1.4; }
.wd .w.dash { stroke-dasharray: 6 5; }
.wd .dot { fill: rgba(240, 240, 240, 0.6); transition: opacity 0.18s ease, fill 0.18s ease; }

.wd[data-lit] .w, .wd[data-lit] .dot { opacity: 0.13; }
.wd[data-lit="v12"] [data-n="v12"], .wd[data-lit="v5"] [data-n="v5"], .wd[data-lit="v33"] [data-n="v33"],
.wd[data-lit="gnd"] [data-n="gnd"], .wd[data-lit="mx"] [data-n="mx"], .wd[data-lit="my"] [data-n="my"],
.wd[data-lit="mz"] [data-n="mz"], .wd[data-lit="st"] [data-n="st"], .wd[data-lit="i2c"] [data-n="i2c"] {
  opacity: 1; stroke: #F0F0F0;
}
.wd[data-lit] .w[data-n].thin { stroke-width: 1.6; }
.wd[data-lit="v12"] .w[data-n="v12"]:not(.thin), .wd[data-lit="v5"] .w[data-n="v5"]:not(.thin),
.wd[data-lit="v33"] .w[data-n="v33"]:not(.thin), .wd[data-lit="gnd"] .w[data-n="gnd"]:not(.thin),
.wd[data-lit="mx"] .w[data-n="mx"]:not(.thin), .wd[data-lit="my"] .w[data-n="my"]:not(.thin),
.wd[data-lit="mz"] .w[data-n="mz"]:not(.thin), .wd[data-lit="st"] .w[data-n="st"]:not(.thin),
.wd[data-lit="i2c"] .w[data-n="i2c"]:not(.thin) { stroke-width: 3.6; }
.wd[data-lit] .dot[data-n] { fill: #F0F0F0; }

.wd-nets { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 6px; }
.wd-nets .g-btn.on { border-bottom-color: var(--text); }
.case-body .wd-hint { font-size: 12px; color: var(--faint); margin: 0 0 22px; }

/* --- the last check ------------------------------------------------------------ */

.case-body .checks { list-style: none; padding: 0; margin: 4px 0 24px; max-width: 64ch; }
.case-body .checks li { margin: 0 0 4px; padding: 0; }
.checks label { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; cursor: pointer; padding: 6px 0; }
.checks input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.checks .box {
  width: 15px; height: 15px; margin-top: 4px; border: 1px solid var(--muted); border-radius: 50%;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.checks input:checked + .box { background: var(--text); border-color: var(--text); }
.checks input:focus-visible + .box { outline: 1px solid var(--text); outline-offset: 3px; }
.checks .txt { font-size: 15px; line-height: 1.6; color: var(--ink); transition: color 0.15s ease; }
.checks input:checked ~ .txt { color: var(--muted); }

/* --- narrow ---------------------------------------------------------------------- */

@media (max-width: 760px) {
  .bal-pads { grid-template-columns: 1fr 1fr; }
  .bal-read { grid-column: 1 / -1; grid-row: 1; margin-bottom: 4px; }
  .bal-pad { padding: 20px 8px; }
  .fit { grid-template-columns: minmax(0, 1fr); }
  .fit svg { max-width: 320px; }
}