/*
 * Styles shared by figures and interactive widgets.
 *
 * SVG drawings should use these theme-aware classes rather than literal
 * colours, so that they work in light and dark mode:
 *
 *   fill-{hue} / fill-{hue}-soft / fill-ink / fill-surface / fill-paper / fill-none
 *   stroke-{hue} / stroke-ink / stroke-ink-2 / stroke-hair / stroke-none
 *   text classes: fig-label, fig-label-sm, fig-label-lg (+ text-{hue})
 *
 * hues: blue red green orange violet teal pink yellow gray
 */

.widget { max-width: 100%; }
.widget-figure { margin: 0; display: grid; gap: var(--s2); justify-items: center; width: 100%; }
.widget-caption { font-size: var(--fs-sm); color: var(--ink-3); text-align: center; max-width: 52ch; }
.widget-error {
  padding: var(--s3) var(--s4);
  border: var(--bw) dashed var(--red);
  border-radius: var(--r);
  background: var(--red-soft);
  color: var(--red-text);
  font-size: var(--fs-sm);
}

/* ---------------------------------------------------- svg colour classes */
.fill-none { fill: none; }
.fill-ink { fill: var(--ink); }
.fill-ink-2 { fill: var(--ink-2); }
.fill-ink-3 { fill: var(--ink-3); }
.fill-surface { fill: var(--surface); }
.fill-paper { fill: var(--paper); }
.fill-sunken { fill: var(--sunken); }
.fill-hair { fill: var(--hair); }
.fill-blue { fill: var(--blue); } .fill-blue-soft { fill: var(--blue-soft); }
.fill-red { fill: var(--red); } .fill-red-soft { fill: var(--red-soft); }
.fill-green { fill: var(--green); } .fill-green-soft { fill: var(--green-soft); }
.fill-orange { fill: var(--orange); } .fill-orange-soft { fill: var(--orange-soft); }
.fill-violet { fill: var(--violet); } .fill-violet-soft { fill: var(--violet-soft); }
.fill-teal { fill: var(--teal); } .fill-teal-soft { fill: var(--teal-soft); }
.fill-pink { fill: var(--pink); } .fill-pink-soft { fill: var(--pink-soft); }
.fill-yellow { fill: var(--yellow); } .fill-yellow-soft { fill: var(--yellow-soft); }
.fill-gray { fill: var(--gray); } .fill-gray-soft { fill: var(--gray-soft); }

.stroke-none { stroke: none; }
.stroke-ink { stroke: var(--ink); }
.stroke-ink-2 { stroke: var(--ink-2); }
.stroke-ink-3 { stroke: var(--ink-3); }
.stroke-hair { stroke: var(--hair); }
.stroke-surface { stroke: var(--surface); }
.stroke-blue { stroke: var(--blue); }
.stroke-red { stroke: var(--red); }
.stroke-green { stroke: var(--green); }
.stroke-orange { stroke: var(--orange); }
.stroke-violet { stroke: var(--violet); }
.stroke-teal { stroke: var(--teal); }
.stroke-pink { stroke: var(--pink); }
.stroke-yellow { stroke: var(--yellow); }
.stroke-gray { stroke: var(--gray); }

.text-blue { fill: var(--blue-text); } .text-red { fill: var(--red-text); }
.text-green { fill: var(--green-text); } .text-orange { fill: var(--orange-text); }
.text-violet { fill: var(--violet-text); } .text-teal { fill: var(--teal-text); }
.text-pink { fill: var(--pink-text); } .text-yellow { fill: var(--yellow-text); }
.text-gray { fill: var(--gray-text); } .text-ink { fill: var(--ink); } .text-muted { fill: var(--ink-3); }

.fig-label, .fig-label-sm, .fig-label-lg {
  font-family: var(--font-body);
  font-weight: 700;
  fill: var(--ink);
  stroke: none;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.fig-label-sm { font-size: 12px; font-weight: 600; }
.fig-label-lg { font-size: 20px; font-weight: 800; }
.fig-math { font-family: 'KaTeX_Math', 'Times New Roman', serif; font-style: italic; font-weight: 500; }
.fig-mono { font-family: var(--font-mono); font-weight: 600; }

/* --------------------------------------------------------- static figures */
.fig-svg-wrap { width: 100%; max-width: 520px; margin: 0 auto; }
.fig-svg { width: 100%; height: auto; overflow: visible; }
.fig-svg text { user-select: none; -webkit-user-select: none; }
.fig-code { width: 100%; max-width: 560px; }
pre.code.has-lines { display: grid; padding: var(--s3) 0; }
.code-line { display: flex; gap: var(--s3); padding: 0 var(--s4) 0 0; }
.code-line.is-marked { background: var(--yellow-soft); box-shadow: inset 4px 0 0 var(--yellow); }
.code-num { flex: none; width: 2.6em; text-align: right; color: var(--ink-3); user-select: none; -webkit-user-select: none; }
.code-line code { white-space: pre; }

/* ------------------------------------------------- shared widget chrome */
.w-frame {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: grid;
  gap: var(--s3);
}
.w-frame.is-wide { max-width: 680px; }
.w-frame.is-compact { max-width: 260px; gap: var(--s1); }
.w-canvas {
  position: relative;
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
/* Figures let the page scroll vertically under a finger; only draggable parts capture touch. */
.w-canvas svg { display: block; width: 100%; height: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.w-canvas.is-plain { border: 0; background: transparent; border-radius: 0; overflow: visible; }
.w-controls { display: grid; gap: var(--s2); }
.w-slider { display: grid; grid-template-columns: minmax(64px, auto) minmax(0, 1fr) minmax(52px, auto); align-items: center; gap: var(--s3); }
.w-slider-label { font-weight: 700; font-size: var(--fs-sm); }
.w-slider-value { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-sm); text-align: right; font-variant-numeric: tabular-nums; }
.w-readouts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.w-readout {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border: var(--bw) solid var(--hair);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.w-readout b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.w-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.w-hint { text-align: center; font-size: var(--fs-sm); color: var(--ink-3); }

/* draggable handles inside SVG widgets */
.w-handle { cursor: grab; outline: none; touch-action: none; }
.w-handle:active { cursor: grabbing; }
.w-handle .w-handle-dot { transition: r 0.12s ease; }
.w-handle:hover .w-handle-halo, .w-handle:focus-visible .w-handle-halo, .w-handle.is-dragging .w-handle-halo { opacity: 0.28; }
.w-handle-halo { opacity: 0; transition: opacity 0.15s ease; }
.w-handle:focus-visible .w-handle-dot { stroke: var(--focus); stroke-width: 4; }
.is-readonly .w-handle { cursor: default; pointer-events: none; }
.is-readonly .w-handle-halo { display: none; }

.axis-line { stroke: var(--ink); stroke-width: 2; }
.grid-line { stroke: var(--hair); stroke-width: 1; }
.tick-label { font-family: var(--font-body); font-size: 12px; font-weight: 600; fill: var(--ink-3); stroke: none; font-variant-numeric: tabular-nums; }
.axis-label { font-family: var(--font-body); font-size: 13px; font-weight: 800; fill: var(--ink-2); stroke: none; }

.w-controls:empty, .w-readouts:empty, .w-buttons:empty { display: none; }

/* ----------------------------------------------------------------- grid */
.w-grid-frame { justify-items: center; max-width: 100%; }
.w-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, var(--cell)));
  gap: var(--gap);
  max-width: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.w-cell {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: var(--bw) solid var(--edge);
  border-radius: 8px;
  background: var(--cell-soft, var(--surface));
  color: var(--ink);
  font-size: clamp(0.6rem, calc(var(--cell) * 0.36), 1rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: background-color 0.12s ease, transform 0.12s var(--ease-spring), border-color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.w-grid.is-circle .w-cell { border-radius: 50%; }
.w-cell.is-on { background: var(--cell-color); border-color: var(--edge-strong); color: #1D1B26; }
.w-cell:active { transform: scale(0.9); }
.w-cell.is-locked { opacity: 0.45; cursor: default; }
.w-grid.is-compact .w-cell { border-width: 1.5px; border-radius: 5px; }
.is-readonly .w-cell { pointer-events: none; }
.is-readonly .w-grid, .w-grid.is-compact { touch-action: auto; }
.w-grid-withrows { display: flex; gap: var(--s2); align-items: stretch; max-width: 100%; }
.w-grid-rowlabels { display: grid; gap: var(--gap); grid-auto-rows: 1fr; align-items: center; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-3); }
.w-grid-collabels { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, var(--cell))); gap: var(--gap); justify-items: center; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-3); }

/* -------------------------------------------------------------- balance */
.w-balance-eq {
  text-align: center;
  font-size: 1.35rem;
  padding: var(--s2) var(--s4);
  border: var(--bw) dashed var(--hair);
  border-radius: var(--r);
  justify-self: center;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.w-balance-eq.is-solved { border-style: solid; border-color: var(--green); background: var(--green-soft); }
.w-balance-eq.is-off { border-color: var(--red); }
.w-balance-free { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.w-balance-side { display: grid; gap: var(--s2); justify-items: center; }
.w-hint:empty { display: none; }

/* labels drawn over lines stay legible thanks to a background-coloured halo */
.w-canvas text.fig-label, .w-canvas text.fig-label-sm, .w-canvas text.tick-label {
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.w-canvas.is-plain text.fig-label, .w-canvas.is-plain text.fig-label-sm, .w-canvas.is-plain text.tick-label { stroke: var(--paper); }

/* --------------------------------------------------------------- legend */
.w-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s4); font-size: var(--fs-sm); font-weight: 700; }
.w-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.w-legend-item i { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--ink); }
.w-bar-adjust:focus-visible rect:first-child { stroke: var(--focus); stroke-width: 4; }

/* ---------------------------------------------------------- calibration */
.w-calib { gap: var(--s4); padding: var(--s5); border: var(--bw) solid var(--edge); border-radius: var(--r-lg); background: var(--surface); }
.w-calib-count { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.w-calib-statement { font-family: var(--font-display); font-variation-settings: 'SOFT' 100; font-weight: 650; font-size: 1.4rem; line-height: 1.25; text-align: center; text-wrap: balance; }
.w-calib-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.w-calib-row > .btn { min-width: 120px; }
.w-calib-sure { display: grid; gap: var(--s2); justify-items: center; }
.w-calib-verdict { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r); border: var(--bw) solid; }
.w-calib-verdict svg { flex: none; margin-top: 2px; }
.w-calib-verdict.is-right { border-color: var(--green); background: var(--green-soft); }
.w-calib-verdict.is-wrong { border-color: var(--red); background: var(--red-soft); }
.w-calib-results { display: grid; gap: var(--s4); }
.w-calib-result-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin-bottom: var(--s1); }
.w-calib-bars { display: grid; gap: 4px; }
.w-calib-bar { position: relative; height: 26px; border-radius: 8px; background: var(--sunken); overflow: hidden; }
.w-calib-bar i { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 8px; transition: width 0.6s var(--ease-out); }
.w-calib-bar i.is-stated { background: var(--accent-soft); border: 2px dashed var(--accent); }
/* the label sits on its own chip, so it stays readable over the filled and the empty part of the bar */
.w-calib-bar span { position: relative; z-index: 1; display: inline-block; margin: 3px 0 0 4px; padding: 0 7px; line-height: 20px; border-radius: 6px; background: var(--surface); font-weight: 800; color: var(--ink); }
.w-calib-summary { text-align: center; font-size: var(--fs-lg); }

/* SVG figures shrink on phones; enlarge their text so it stays readable. */
@media (max-width: 520px) {
  .w-canvas .tick-label { font-size: 16px; }
  .w-canvas .axis-label { font-size: 17px; }
  .w-canvas .fig-label { font-size: 19px; }
  .w-canvas .fig-label-sm { font-size: 15px; }
  .w-frame.is-compact .tick-label { font-size: 12px; }
}