/* Free tools: the index, and the lab frame + controls shared by every tool. Boards are SVG; colours come from the tokens.
   Surfaces are tonal (board < controls < control inset); selected controls are cyan (the interactive colour); nothing is outlined.
   A tool is tinted by its subject domain: data-dom sets --tint (tokens.css), and the hero band, board, controls and readouts
   take it. The untinted base rules below remain the fallback for any lab outside a tinted scope. */
.tool-hero { padding-block: var(--sp-7) var(--sp-5); }
.tool-hero h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); max-width: 22ch; }
/* The hero of a lab is a lit glass panel in its subject's tint, with the lab's plate in a night window beside the title:
   the page opens on the mechanism it teaches. */
.tool-hero[data-dom] { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: center; margin-top: var(--sp-5); margin-bottom: var(--sp-5); padding: var(--sp-5); border-radius: var(--r-lg); overflow: hidden;
  background-image: radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--tint) 18%, transparent), transparent 70%), var(--stardust), linear-gradient(180deg, color-mix(in srgb, var(--tint) 13%, var(--glass-top)), color-mix(in srgb, var(--tint) 5%, var(--glass-bottom)));
  background-size: auto, 180px 180px, auto; background-repeat: no-repeat, repeat, no-repeat;
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-shade), var(--glass-shadow); }
.tool-hero[data-dom].has-plate { grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); }
.tool-hero[data-dom] .crumbs { padding-top: 0; }
.tool-hero[data-dom] h1 { margin-bottom: var(--sp-3); }
.tool-hero[data-dom] .read { margin: 0; }
.tool-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: var(--sp-4) 0 var(--sp-3); }
.tool-hero__meta .orb { width: 18px; height: 18px; }
.tool-hero__plate { box-shadow: inset 0 2px 12px var(--glass-shade), inset 0 -1px 0 color-mix(in srgb, var(--tint) 30%, transparent), 0 18px 40px -22px color-mix(in srgb, var(--tint) 60%, transparent); }
@media (max-width: 820px) { .tool-hero[data-dom].has-plate { grid-template-columns: minmax(0, 1fr); } .tool-hero__plate { order: -1; } }

/* The lab: a night instrument window (the board) beside a glass control deck. Selected controls are lit cyan hulls (the
   colour that acts); readouts are small glass gauges with mono numbers. */
.tool-lab { padding-bottom: var(--sp-6); }
.tool-lab__caption { max-width: var(--measure); margin: var(--sp-3) 0 0; color: var(--text-3); font-size: .875rem; }
.lab { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 900px) { .lab { grid-template-columns: 1fr; } }
.lab__board { border-radius: var(--r-lg); padding: var(--sp-3); background-color: var(--bg-raised);
  background-image: radial-gradient(90% 70% at 50% 115%, color-mix(in srgb, var(--tint, var(--cyan)) 12%, transparent), transparent 65%), var(--stardust), linear-gradient(180deg, color-mix(in srgb, var(--tint, var(--cyan)) 6%, var(--bg-raised)), var(--bg));
  background-size: auto, 180px 180px, auto; background-repeat: no-repeat, repeat, no-repeat;
  box-shadow: inset 0 2px 14px var(--glass-shade), inset 0 -1px 0 color-mix(in srgb, var(--tint, var(--cyan)) 24%, transparent), var(--glass-shadow); }
.lab__side { display: grid; gap: var(--sp-4); }
.lab__controls { display: grid; gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-lg);
  background-image: var(--stardust), linear-gradient(180deg, color-mix(in srgb, var(--tint, var(--cyan)) 10%, var(--glass-top)), color-mix(in srgb, var(--tint, var(--cyan)) 4%, var(--glass-bottom)));
  background-size: 180px 180px, auto; background-repeat: repeat, no-repeat;
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-shade), var(--glass-shadow); }
.lab__footer { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lab-board { width: 100%; height: auto; touch-action: none; user-select: none; }
/* Curves on the boards glow faintly in the subject's hue, like traces on an instrument screen. */
.lab__board svg [class*="curve"] { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--tint, var(--cyan)) 65%, transparent)); }
.lab-grid { stroke: var(--line); stroke-width: 1; }
.lab-axis { stroke: var(--text-3); stroke-width: 1.4; }
.lab-tick { fill: var(--text-3); font: 500 11px var(--font-mono); }
.lab-curve { fill: none; stroke: var(--dom-phy); stroke-width: 2.4; }
.lab-curve--b { stroke: var(--accent); }
.lab-curve--c { stroke: var(--dom-aiml); }
.lab-mark { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.lab-label { fill: var(--text-2); font: 500 12px var(--font-ui); }
.lab-slider__head { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: baseline; }
.lab-slider label { margin: 0; font-size: .85rem; color: var(--text-2); }
.lab-slider__value { font-size: .9rem; color: var(--text); }
.lab-field { display: grid; gap: var(--sp-2); }
.lab-field__label { font-size: .85rem; font-weight: 600; color: var(--text-2); }

/* Segmented choice: a recessed track; the chosen segment is a lit cyan hull, the others are glass on hover. */
.lab-seg { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: var(--r-md); background: color-mix(in srgb, var(--bg) 55%, transparent); box-shadow: inset 0 1px 3px var(--glass-shade), inset 0 -1px 0 var(--glass-hi); }
.lab-seg__opt { flex: 1 1 auto; margin: 0; }
.lab-seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
.lab-seg__opt span { display: block; text-align: center; padding: 9px 12px; font-size: .85rem; font-weight: 600; color: var(--text-2); cursor: pointer; border-radius: var(--r-sm); min-height: 40px; transition: color .15s var(--ease), background-color .15s var(--ease), box-shadow .2s var(--ease); }
.lab-seg__opt span:hover { color: var(--text); background: linear-gradient(180deg, var(--glass-top), var(--glass-fill)); box-shadow: inset 0 1px 0 var(--glass-hi); }
.lab-seg__opt input:checked + span { color: var(--accent-ink); background: linear-gradient(180deg, color-mix(in srgb, var(--accent), var(--lit-hi) var(--lit-top)), var(--accent)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--lit-hi) 60%, transparent), inset 0 -2px 0 var(--lit-shade), 0 0 18px -4px var(--halo-strong); }
.lab-seg__opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.lab-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Sliders inside a lab: a recessed groove and a lit cyan knob with a soft halo. */
.tool-lab input[type="range"] { -webkit-appearance: none; appearance: none; height: 26px; margin: 0; background: transparent; cursor: pointer; }
.tool-lab input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--bg) 60%, var(--surface-3)); box-shadow: inset 0 1px 2px var(--glass-shade), 0 1px 0 var(--glass-hi); }
.tool-lab input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--bg) 60%, var(--surface-3)); box-shadow: inset 0 1px 2px var(--glass-shade), 0 1px 0 var(--glass-hi); }
.tool-lab input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border: 0; border-radius: 50%; background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--accent), var(--lit-hi) 60%) 0, var(--accent) 52%, color-mix(in srgb, var(--accent), var(--lit-shade) 55%) 100%); box-shadow: 0 0 14px -2px var(--halo-strong), 0 2px 5px var(--glass-shade); transition: transform .15s var(--ease); }
.tool-lab input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--accent), var(--lit-hi) 60%) 0, var(--accent) 52%, color-mix(in srgb, var(--accent), var(--lit-shade) 55%) 100%); box-shadow: 0 0 14px -2px var(--halo-strong), 0 2px 5px var(--glass-shade); }
.tool-lab input[type="range"]:hover::-webkit-slider-thumb, .tool-lab input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.tool-lab input[type="range"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Readouts: real numbers from the engine, in sentence-case labels, each on a small glass gauge tinted by the subject. */
.lab-readouts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.lab-readouts > div { position: relative; padding: var(--sp-2) var(--sp-3) var(--sp-3); border-radius: var(--r-md); background: linear-gradient(180deg, color-mix(in srgb, var(--tint, var(--cyan)) 10%, color-mix(in srgb, var(--bg) 50%, var(--surface-2))), color-mix(in srgb, var(--bg) 40%, var(--surface))); box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -2px 0 color-mix(in srgb, var(--tint, var(--cyan)) 28%, transparent), var(--glass-shadow-sm); }
.lab-readouts dt { font: 500 .8rem/1.3 var(--font-ui); color: var(--text-3); }
.lab-readouts dd { margin: 4px 0 0; font-size: 1.1rem; font-weight: 600; color: var(--text); }

/* A challenge is a mission card: violet glass with a target glyph; it turns green once solved (a fill, not a stripe). */
.lab-challenge { position: relative; padding: var(--sp-4) var(--sp-4) var(--sp-4) 56px; border-radius: var(--r-lg);
  background-image: var(--stardust), linear-gradient(180deg, color-mix(in srgb, var(--violet) 22%, var(--glass-top)), color-mix(in srgb, var(--violet) 10%, var(--glass-bottom)));
  background-size: 180px 180px, auto; background-repeat: repeat, no-repeat;
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-shade), var(--glass-shadow-sm); }
.lab-challenge::before { content: ""; position: absolute; left: 16px; top: 17px; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle, var(--violet-text) 0 3px, transparent 3.5px 6px, color-mix(in srgb, var(--violet) 75%, transparent) 6.5px 8px, transparent 8.5px 11px, color-mix(in srgb, var(--violet) 45%, transparent) 11.5px 13px, transparent 13.5px); }
.lab-challenge h3 { font-size: 1rem; margin-bottom: var(--sp-1); }
.lab-challenge .hint { color: var(--text-2); }
.lab-challenge[data-solved="true"] { background-image: var(--stardust), linear-gradient(180deg, color-mix(in srgb, var(--ok) 20%, var(--glass-top)), color-mix(in srgb, var(--ok) 9%, var(--glass-bottom))); }
.lab-challenge[data-solved="true"]::before { background: radial-gradient(circle, var(--ok) 0 3px, transparent 3.5px 6px, color-mix(in srgb, var(--ok) 75%, transparent) 6.5px 8px, transparent 8.5px 11px, color-mix(in srgb, var(--ok) 45%, transparent) 11.5px 13px, transparent 13.5px); }

/* Prose under the lab: aligned with the lab's left edge (the shell sets the width), each block held to a reading measure. */
.tool-prose { padding-bottom: var(--sp-7); }
.tool-prose > * { max-width: var(--measure); }
.tool-prose > h2 { margin-top: var(--sp-7); }
.tool-prose > h2:first-child { margin-top: var(--sp-5); }
.tool-prose > p { color: var(--text-2); }
.tool-prose > .tool-related, .tool-prose > .tool-try { max-width: none; }
/* Try this: three missions in order, each a glass tile numbered by a planet in the subject's hue. */
.tool-try { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); counter-reset: none; }
.tool-try li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: start; padding: var(--sp-4); border-radius: var(--r-lg); color: var(--text); font-size: .95rem; line-height: 1.55;
  background-image: var(--stardust), linear-gradient(180deg, color-mix(in srgb, var(--tint) 9%, var(--glass-top)), var(--glass-bottom));
  background-size: 180px 180px, auto; background-repeat: repeat, no-repeat;
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-shade), var(--glass-shadow-sm); }
.tool-try__n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--on-hue); font: 700 .85rem/1 var(--font-mono);
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--tint), var(--lit-hi) 50%) 0, var(--tint) 50%, color-mix(in srgb, var(--tint), var(--bg) 55%) 100%); box-shadow: inset 0 -2px 4px var(--glass-shade), 0 0 14px -3px color-mix(in srgb, var(--tint) 70%, transparent); }
/* The call to action is an upsell panel (see components.css .upsell), lit as violet glass with an aurora in its corner. */
.tool-cta { margin-top: var(--sp-7); padding: var(--sp-6); overflow: hidden;
  background-image: radial-gradient(60% 140% at 100% 100%, color-mix(in srgb, var(--violet) 30%, transparent), transparent 70%), var(--stardust), linear-gradient(180deg, color-mix(in srgb, var(--violet) 18%, var(--glass-top)), color-mix(in srgb, var(--violet) 8%, var(--glass-bottom)));
  background-size: auto, 180px 180px, auto; background-repeat: no-repeat, repeat, no-repeat;
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-shade), var(--glass-shadow); }
.tool-cta p:last-child { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.tool-related__title { margin-top: var(--sp-7); }
/* Related labs: small lab cards (the plate and the title). */
.tool-related { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); }
.tool-related li { display: grid; }
.labcard--sm { padding-bottom: var(--sp-4); }
.labcard--sm strong { font-size: 1.02rem; }
.labcard--sm .labcard__go { width: 26px; height: 26px; }

/* Index: one group per domain, headed by the subject's orb and name; one lit glass card per lab, its plate on top. */
.tool-groups { display: grid; gap: var(--sp-7); padding-bottom: var(--sp-7); }
.tool-group h2 { font-size: 1.5rem; color: var(--tint); margin-bottom: var(--sp-4); }
.tool-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-4); }

/* Lab plate (app/Http/Art/LabArt.php): the lab's own mechanism, drawn from its formula, in a night viewport. The viewport is
   always night (.night) so the instrument reads the same in both themes; the subject's hue lights the curve and the floor of
   the window, bone marks the point you would drag, faint lines are scaffolding. */
.labview { position: relative; display: block; overflow: hidden; border-radius: var(--r-md); aspect-ratio: 16 / 9;
  background-image: radial-gradient(120% 80% at 50% 120%, color-mix(in srgb, var(--tint) 26%, transparent), transparent 62%), var(--stardust), linear-gradient(180deg, color-mix(in srgb, var(--tint) 7%, var(--bg-raised)), var(--bg));
  background-size: auto, 180px 180px, auto; background-repeat: no-repeat, repeat, no-repeat;
  box-shadow: inset 0 2px 12px var(--glass-shade), inset 0 -1px 0 color-mix(in srgb, var(--tint) 30%, transparent); }
.labplate { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.labplate .pl-grid { stroke: var(--text); stroke-opacity: .07; stroke-width: 1; }
.labplate .pl-axis { stroke: var(--text-3); stroke-opacity: .75; stroke-width: 1.2; }
.labplate .pl-line { stroke: var(--tint); stroke-width: 2.4; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--tint) 75%, transparent)); }
.labplate .pl-line2 { stroke: var(--bone); stroke-width: 1.8; }
.labplate .pl-ring { stroke: var(--tint); stroke-opacity: .6; stroke-width: 1.4; }
.labplate .pl-dash { stroke: var(--text-2); stroke-opacity: .7; stroke-width: 1.2; stroke-dasharray: 4 4; }
.labplate .pl-area { fill: var(--tint); fill-opacity: .26; stroke: none; }
.labplate .pl-area2 { fill: var(--text-2); fill-opacity: .2; stroke: none; }
.labplate .pl-bar { stroke: var(--tint); stroke-opacity: .7; stroke-width: 1; }
.labplate .pl-area2.pl-bar { stroke: var(--text-2); stroke-opacity: .5; }
.labplate .pl-hot { fill: var(--tint); stroke: none; }
.labplate .pl-dot { fill: var(--bone); stroke: none; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--bone) 80%, transparent)); }
.labplate .pl-star { fill: var(--bone); stroke: none; filter: drop-shadow(0 0 9px var(--bone)); }
.labplate .pl-halo { fill: var(--tint); fill-opacity: .16; stroke: none; }
.labplate .pl-text { fill: var(--text-2); stroke: none; font: 500 11px var(--font-mono); }
.labplate .pl-thin { stroke-width: 1.1; }
.labplate .pl-bold { stroke-width: 3.4; }
.labplate .pl-soft { opacity: .55; }
.labplate .pl-faint { opacity: .28; }

/* Lab card: lit glass tinted by its subject. The plate sits in its window at the top; hover lifts the card, throws a halo in
   the subject's hue and brightens the plate. The porthole is the way in. */
.labcard { position: relative; display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-5); border-radius: var(--r-lg); color: var(--text); text-decoration: none;
  background-image: var(--stardust), linear-gradient(180deg, color-mix(in srgb, var(--tint) 14%, var(--glass-top)), color-mix(in srgb, var(--tint) 5%, var(--glass-bottom)));
  background-size: 180px 180px, auto; background-repeat: repeat, no-repeat;
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-shade), var(--glass-shadow);
  transition: transform .22s var(--ease), box-shadow .25s var(--ease); }
.labcard:hover { color: var(--text); text-decoration: none; transform: translateY(-3px);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-shade), 0 0 34px -10px color-mix(in srgb, var(--tint) 70%, transparent), var(--glass-shadow); }
.labcard:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.labcard .labview { margin-bottom: var(--sp-3); transition: filter .25s var(--ease); }
.labcard:hover .labview { filter: brightness(1.18) saturate(1.1); }
.labcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding-inline: var(--sp-3); }
.labcard strong { font: 500 1.25rem/1.2 var(--font-display); }
.labcard small { padding-inline: var(--sp-3); color: var(--text-2); font-size: .9rem; line-height: 1.5; }
.labcard__go { width: 30px; height: 30px; margin-top: -2px; transition: transform .22s var(--ease); }
.labcard__go .art { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.labcard:hover .labcard__go { transform: translateX(3px); }

/* A subject's orb: a lit sphere in the domain hue, always beside the subject's name. */
.orb-head { display: flex; align-items: center; gap: var(--sp-3); }
.orb-head::after { content: ""; flex: 1; height: 1px; margin-left: var(--sp-2); background: linear-gradient(90deg, color-mix(in srgb, var(--tint) 45%, transparent), transparent); }