/* Number Line. The SVG fills the middle; the equation sits above, the hop controls below. */

.nl {
  display: flex; flex-direction: column; gap: clamp(4px, 1.2cqmin, 14px);
  padding: clamp(6px, 2cqmin, 22px) clamp(6px, 2cqmin, 22px) clamp(8px, 2.4cqmin, 26px);
  --nl-fwd: var(--cat);
  --nl-back: #e8590c;
  --nl-mark: #d6336c;
  /* a size unit that does not balloon when the stage is taller than wide */
  --nl-u: min(1cqmin, .62cqw);
  /* the zoom buttons width, kept clear on both sides of the equation */
  --nl-zw: calc(3 * clamp(30px, 6cqmin, 44px) + 8px + clamp(6px, 2cqmin, 20px));
}
:root[data-theme="dark"] .nl { --nl-back: #ff922b; --nl-mark: #f06595; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nl { --nl-back: #ff922b; --nl-mark: #f06595; } }

.nl-box { position: relative; flex: 1 1 auto; min-height: 0; }
.nl-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; touch-action: none; cursor: crosshair; user-select: none; }
.nl.is-panning .nl-svg { cursor: grabbing; }

.nl text { font-family: var(--font-display); font-weight: 600; fill: currentColor; }
.nl-axis { stroke: var(--stage-ink); stroke-linecap: round; }
.nl-arrow { fill: var(--stage-ink); }
.nl-ticks line { stroke: var(--stage-ink); stroke-linecap: round; }
.nl-ticks .is-minor { stroke: color-mix(in srgb, var(--stage-ink) 55%, transparent); }
.nl-ticks .is-medium { stroke: color-mix(in srgb, var(--stage-ink) 75%, transparent); }
.nl-lab { color: var(--stage-ink); }
.nl-lab line { stroke: currentColor; stroke-linecap: round; }
.nl-lab.is-zero { color: var(--cat); }
.nl-lab.is-revealed { color: var(--cat); cursor: pointer; }
.nl-blank { cursor: pointer; }
.nl-blank rect {
  fill: color-mix(in srgb, var(--cat) 10%, var(--stage-bg));
  stroke: color-mix(in srgb, var(--cat) 55%, transparent); stroke-width: 1.5; stroke-dasharray: 4 3;
}
.nl-blank:hover rect { fill: color-mix(in srgb, var(--cat) 22%, var(--stage-bg)); }
.nl-svg [tabindex]:focus { outline: none; }
.nl-svg [tabindex]:focus-visible { outline: 3px solid var(--cat); outline-offset: 3px; }
.nl-blank:focus-visible rect { stroke: var(--cat); stroke-width: 2.5; stroke-dasharray: none; }

/* hops */
.nl-arc { fill: none; stroke: var(--nl-fwd); stroke-linecap: round; }
.nl-head { fill: var(--nl-fwd); }
.nl-hop.is-back .nl-arc { stroke: var(--nl-back); stroke-dasharray: none; }
.nl-hop.is-back .nl-head { fill: var(--nl-back); }
.nl-tag rect { fill: var(--stage-bg); stroke: var(--nl-fwd); stroke-width: 2; }
.nl-tag { color: var(--nl-fwd); }
.nl-hop.is-back .nl-tag { color: var(--nl-back); }
.nl-hop.is-back .nl-tag rect { stroke: var(--nl-back); }
.nl-tag line { stroke: currentColor; }
.nl-taglab { color: inherit; }
.nl-hop.is-new .nl-arc { stroke-dasharray: 1; stroke-dashoffset: 1; animation: nl-draw .45s ease-out forwards; }
.nl-hop.is-new .nl-head, .nl-hop.is-new .nl-tag { opacity: 0; animation: nl-in .2s ease-out .38s forwards; }
@keyframes nl-draw { to { stroke-dashoffset: 0; } }
@keyframes nl-in { to { opacity: 1; } }
.nl-pt { fill: var(--nl-fwd); stroke: var(--stage-bg); stroke-width: 2.5; }
.nl-pt.is-start { fill: var(--stage-bg); stroke: var(--nl-fwd); stroke-width: 4; }
.nl-pt.is-end { fill: var(--nl-fwd); stroke: var(--stage-bg); stroke-width: 3; }

/* markers */
.nl-mdot { fill: var(--nl-mark); stroke: var(--stage-bg); stroke-width: 2.5; }
.nl-mstem { stroke: color-mix(in srgb, var(--nl-mark) 60%, transparent); stroke-dasharray: 3 3; }
.nl-mpill rect { fill: color-mix(in srgb, var(--nl-mark) 14%, var(--stage-bg)); stroke: var(--nl-mark); stroke-width: 1.8; }
.nl-mpill { color: var(--nl-mark); }
.nl-mpill text { fill: currentColor; }
.nl-mlab line { stroke: currentColor; }
.nl-mpill[data-reveal] { cursor: pointer; }
.nl[data-mode="mark"] .nl-marker { cursor: pointer; }

/* the equation */
.nl-eq {
  flex: none; align-self: center; max-width: calc(100% - 2 * var(--nl-zw));
  display: flex; align-items: center; justify-content: center; min-height: clamp(36px, 10cqmin, 120px);
  padding: .1em .8em; border-radius: 999px;
  font: 650 clamp(16px, min(6.4cqmin, (100cqw - 2 * var(--nl-zw) - 4cqmin) / var(--nl-w, 8)), 84px)/1.1 var(--font-display); font-variant-numeric: tabular-nums;
}
.nl-eq[hidden] { display: none; }
.nl-eq.is-hint { font-size: clamp(13px, 3.2cqmin, 30px); font-weight: 500; color: color-mix(in srgb, var(--stage-ink) 60%, transparent); }
.nl-eqline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .1em .3em; }
.nl-op { font-style: normal; color: color-mix(in srgb, var(--stage-ink) 55%, transparent); padding: 0 .08em; }
.nl-n { display: inline-flex; align-items: center; gap: .05em; }
.nl-n.is-fwd { color: var(--nl-fwd); }
.nl-n.is-back, .nl-op.is-back { color: var(--nl-back); }
.nl-n.is-result { padding: 0 .25em; border-radius: .25em; background: color-mix(in srgb, var(--cat) 12%, var(--stage-bg)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cat) 40%, transparent); }
.nl-hf { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; font-size: .78em; vertical-align: middle; }
.nl-hf-n { padding: 0 .16em .08em; border-bottom: max(2px, .09em) solid currentColor; }
.nl-hf-d { padding: .08em .16em 0; }
.nl-hint.is-inline { font: 500 .42em/1.2 var(--font-display); color: color-mix(in srgb, var(--stage-ink) 55%, transparent); margin-left: .6em; }
.nl-q {
  min-width: 1.4em; padding: 0 .3em; border-radius: .25em; font: inherit; color: var(--cat); cursor: pointer;
  background: color-mix(in srgb, var(--cat) 10%, var(--stage-bg)); border: 2px dashed color-mix(in srgb, var(--cat) 55%, transparent);
}

/* zoom buttons */
.nl-zoom { position: absolute; top: clamp(6px, 2cqmin, 20px); right: clamp(6px, 2cqmin, 20px); z-index: 3; display: flex; gap: 4px; }
.nl-zbtn {
  width: clamp(30px, 6cqmin, 44px); height: clamp(30px, 6cqmin, 44px); padding: 0; border-radius: 10px;
  display: grid; place-items: center; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 90%, transparent); color: var(--ink-soft);
}
.nl-zbtn:hover { color: var(--ink); background: var(--card); }

/* controls: the shared stage buttons, sized by --nl-u and never under 44px */
.nl-ctrl .t-btn {
  min-height: clamp(44px, calc(8.4 * var(--nl-u)), 84px); padding: 0 clamp(12px, calc(3 * var(--nl-u)), 34px);
  border-radius: clamp(10px, calc(2.2 * var(--nl-u)), 22px); font-size: clamp(13px, calc(3 * var(--nl-u)), 30px);
}
.nl-ctrl .t-btn-round { width: clamp(44px, calc(8.4 * var(--nl-u)), 84px); padding: 0; }
.nl-ctrl .t-btn-primary { min-width: clamp(90px, calc(22 * var(--nl-u)), 260px); }
.nl-ctrl .t-chip { font-size: clamp(12px, calc(3 * var(--nl-u)), 30px); }
.nl-ctrl { flex: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: clamp(6px, calc(1.6 * var(--nl-u)), 18px); }
.nl-group { display: flex; align-items: center; gap: clamp(4px, 1cqmin, 12px); }
.nl-sizer { gap: 4px; }
.nl-back .icon { transform: scaleX(-1); }
.nl-size { min-width: 4.6em; justify-content: center; gap: .45em; }
.nl-size-l { font-weight: 600; font-size: .8em; color: color-mix(in srgb, var(--stage-ink) 60%, transparent); }
.nl-size .nl-hf { font-size: .82em; }
.nl-ctrl .nl-small { width: clamp(44px, calc(7 * var(--nl-u)), 64px); min-height: clamp(44px, calc(7 * var(--nl-u)), 64px); }
.nl-modes { display: flex; gap: 3px; padding: 3px; border-radius: clamp(10px, 2.2cqmin, 22px); background: color-mix(in srgb, var(--stage-ink) 6%, var(--stage-bg)); border: 1px solid color-mix(in srgb, var(--stage-ink) 10%, transparent); }
.nl-mode {
  border: 0; background: transparent; border-radius: clamp(8px, 1.8cqmin, 18px); padding: 0 clamp(8px, 2cqmin, 20px);
  min-height: clamp(38px, calc(7.4 * var(--nl-u)), 76px); font: 650 clamp(12px, calc(2.8 * var(--nl-u)), 28px)/1 var(--font-display); color: color-mix(in srgb, var(--stage-ink) 70%, transparent);
}
.nl-mode[aria-pressed="true"] { background: var(--card); color: var(--cat); box-shadow: var(--shadow-sm), inset 0 0 0 1.5px color-mix(in srgb, var(--cat) 45%, transparent); }
.nl-hide.is-on { background: color-mix(in srgb, var(--cat) 14%, var(--card)); border-color: color-mix(in srgb, var(--cat) 50%, var(--line)); color: var(--cat); }

@container (max-width: 760px) {
  .nl-modes, .nl-hide { display: none; }
}
@container (max-width: 520px) {
  .nl { --nl-zw: 0px; }
  .nl-zoom { display: none; }
  .nl-back span { display: none; }
}
@container (max-height: 300px) {
  .nl-eq { min-height: 0; font-size: clamp(16px, 7cqmin, 30px); }
  .nl-eq.is-hint { display: none; }
  .nl { --nl-zw: 0px; }
  .nl-zoom { display: none; }
}