/* The /learn/labs tools, and the lecture search.
 *
 * Its own file, next to learn.css rather than inside it: the labs are the only learn pages
 * that are instruments rather than prose, and a control panel has nothing to say to a week
 * page. Everything is written against the design system's custom properties
 * (client/design/starcraft.css), so it changes colour when the theme does.
 *
 * Loaded by the lab layout and by the search view, never globally.
 *
 * Phone first, because a lab that needs a desktop is a lab nobody uses: every grid below is a
 * single column until there is room for more, every control is at least 44px tall, and the two
 * places that can overflow (a wide table, a chart) scroll sideways on their own. */

.learn-lab-body { display: grid; gap: var(--sc-space-6); }
.learn-lab-body > .learn-block { margin: 0; }

/* --- the index's grid of labs ------------------------------------------------------------ */

.lab-cards { display: grid; gap: var(--sc-space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .lab-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .lab-cards { grid-template-columns: repeat(3, 1fr); } }
.lab-card > a {
  display: grid; gap: 8px; height: 100%; padding: 18px 20px;
  border: 1px solid var(--sc-edge); background: var(--sc-panel);
  color: var(--sc-ink); text-decoration: none;
}
.lab-card > a:hover { border-color: var(--sc-gold-edge); background: var(--sc-raised); }
.lab-card.is-current > a { border-color: var(--sc-gold-edge); }
.lab-card h3 { margin: 0; font: 600 17px/1.3 var(--sc-font-display); color: var(--sc-gold); }
.lab-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--sc-muted); }
.lab-card-state {
  align-self: end; font: 500 10px/1.4 var(--sc-font-display);
  letter-spacing: .14em; text-transform: uppercase;
}
.lab-card-state[data-state="live"] { color: var(--sc-success); }
.lab-card-state[data-state="model"] { color: var(--sc-ice); }

/* --- a tool ------------------------------------------------------------------------------ */

.lab-tool { border: 1px solid var(--sc-edge); background: var(--sc-panel); }
.lab-tool-head { padding: 18px 20px 0; }
.lab-tool-title { margin: 0; font: 600 18px/1.3 var(--sc-font-display); color: var(--sc-gold); }
.lab-tool-note { margin: 6px 0 0; font-size: 14px; color: var(--sc-muted); }

/* The controls. A plain grid of labelled fields: one column on a phone, more when there is
 * room. Every lab's panel is built out of these three classes and nothing else. */
.lab-controls {
  display: grid; gap: 14px 18px; padding: 18px 20px;
  border-bottom: 1px solid var(--sc-edge);
}
@media (min-width: 620px) { .lab-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .lab-controls { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lab-controls[data-columns="2"] { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .lab-controls[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lab-field { display: grid; gap: 6px; min-width: 0; }
.lab-field > span, .lab-field > label {
  font: 500 10px/1.4 var(--sc-font-display); letter-spacing: .14em;
  text-transform: uppercase; color: var(--sc-muted);
}
.lab-field :is(select, input) { width: 100%; }
.lab-field input[type="range"] { padding: 0; min-height: 34px; }
.lab-field-value { font: 600 14px var(--sc-font-mono); color: var(--sc-ink); }
.lab-field-wide { grid-column: 1 / -1; }
.lab-actions { display: flex; flex-wrap: wrap; gap: 10px; grid-column: 1 / -1; }
.lab-noscript { padding: 0 20px 4px; font-size: 13px; color: var(--sc-muted); }

/* The readout: the numbers the tool exists to produce. */
.lab-readout { padding: 18px 20px; display: grid; gap: var(--sc-space-3); }
.lab-stats { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .lab-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lab-stat { padding: 14px 16px; border: 1px solid var(--sc-edge); background: var(--sc-void); }
.lab-stat-value {
  margin: 0; font: 600 26px/1.1 var(--sc-font-display); color: var(--sc-gold);
  font-variant-numeric: tabular-nums;
}
.lab-stat-unit { margin-left: 4px; font-size: 13px; color: var(--sc-muted); }
.lab-stat-label {
  margin: 6px 0 0; font: 500 10px/1.4 var(--sc-font-display);
  letter-spacing: .14em; text-transform: uppercase; color: var(--sc-muted);
}
.lab-stat-note { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--sc-muted); }
.lab-readout-note { margin: 0; font-size: 14px; line-height: 1.6; color: var(--sc-muted); }
.lab-readout-note strong { color: var(--sc-ink); }

/* --- the things a lab says about itself -------------------------------------------------- */

.lab-caveat {
  padding: 16px 20px; border: 1px solid var(--sc-gold-edge);
  border-left-width: 3px; background: var(--sc-gold-well);
}
.lab-caveat-kicker {
  margin: 0; font: 500 10px/1.4 var(--sc-font-display); letter-spacing: .14em;
  text-transform: uppercase; color: var(--sc-gold);
}
.lab-caveat-title { margin: 6px 0 0; font: 600 16px/1.35 var(--sc-font-display); color: var(--sc-ink); }
.lab-caveat-body { font-size: 14px; line-height: 1.65; color: var(--sc-muted); }
.lab-caveat-body p { margin: 8px 0 0; }

.lab-assumptions { border: 1px solid var(--sc-edge); background: var(--sc-panel); }
.lab-assumptions > summary {
  padding: 12px 18px; cursor: pointer; color: var(--sc-ice);
  font: 500 11px/1.4 var(--sc-font-display); letter-spacing: .14em; text-transform: uppercase;
}
.lab-assumptions[open] > summary { border-bottom: 1px solid var(--sc-edge); }

.lab-note {
  padding: 14px 18px; border: 1px solid var(--sc-edge);
  background: var(--sc-panel); font-size: 14px; line-height: 1.65; color: var(--sc-muted);
}
.lab-note p { margin: 0 0 10px; }
.lab-note p:last-child { margin-bottom: 0; }
.lab-note a { color: var(--sc-ice); }

.lab-links { display: grid; gap: 8px; }
.lab-links-row { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.lab-links-label {
  font: 500 10px/1.4 var(--sc-font-display); letter-spacing: .14em;
  text-transform: uppercase; color: var(--sc-muted);
}
.lab-links-row a { color: var(--sc-ice); font-size: 14px; }
.lab-links-row a:hover { color: var(--sc-gold); }

/* --- charts ------------------------------------------------------------------------------ */

.lab-chart { margin: 0; }
.lab-chart svg { width: 100%; height: auto; display: block; }
.lab-chart-grid { stroke: var(--sc-edge); stroke-width: 1; opacity: .55; }
.lab-chart-tick, .lab-chart-axis {
  fill: var(--sc-muted); font: 10px var(--sc-font-mono);
}
.lab-chart-line { fill: none; stroke: var(--lab-line); stroke-width: 2; stroke-linejoin: round; }
.lab-chart-legend {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px;
  font-size: 12px; color: var(--sc-muted);
}
.lab-chart-key { display: inline-flex; align-items: center; gap: 6px; }
.lab-chart-key::before {
  content: ""; width: 14px; height: 2px; background: var(--lab-line);
}

/* --- the flux field ---------------------------------------------------------------------- */

.lab-field-map { width: 100%; height: auto; display: block; touch-action: none; cursor: grab; }
.lab-field-map:active { cursor: grabbing; }
.lab-flux-terrain { fill: var(--sc-raised); stroke: var(--sc-edge-bright); stroke-width: 1; }
.lab-flux-enemy { fill: color-mix(in srgb, var(--sc-danger) 35%, transparent); stroke: var(--sc-danger); }
.lab-flux-reach { fill: none; stroke: var(--sc-gold); stroke-dasharray: 4 5; opacity: .7; }
.lab-flux-unit { fill: var(--sc-muted); }
.lab-flux-unit[data-firing="true"] { fill: var(--sc-gold); }
.lab-flux-handle { fill: var(--sc-ice); stroke: var(--sc-void); stroke-width: 2; }

/* --- tables ------------------------------------------------------------------------------ */

.lab-grid-cell { font: 600 13px var(--sc-font-mono); }
.lab-grid-cell[data-breakpoint="true"] { color: var(--sc-gold); }
.lab-breakpoints { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.lab-breakpoint {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  padding: 10px 14px; border: 1px solid var(--sc-edge); background: var(--sc-void);
  font-size: 14px; color: var(--sc-ink);
}
.lab-breakpoint[data-kind="armour"] { border-color: color-mix(in srgb, var(--sc-danger) 40%, var(--sc-edge)); }
.lab-breakpoint-level {
  font: 600 12px var(--sc-font-mono); color: var(--sc-gold);
  padding: 2px 8px; border: 1px solid var(--sc-gold-edge);
}
.lab-breakpoint[data-kind="armour"] .lab-breakpoint-level { color: var(--sc-danger); border-color: color-mix(in srgb, var(--sc-danger) 55%, var(--sc-edge)); }
.lab-empty { margin: 0; font-size: 14px; color: var(--sc-muted); }

/* --- the replay room --------------------------------------------------------------------- */

.lab-replays { display: grid; gap: var(--sc-space-4); margin: 0; padding: 0; list-style: none; }
.lab-replay { display: grid; gap: 10px; }
.lab-replay-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.lab-replay-title { margin: 0; font: 600 16px/1.3 var(--sc-font-display); color: var(--sc-ink); }
.lab-replay-matchup { font: 500 13px var(--sc-font-mono); color: var(--sc-gold); }
.lab-replay-facts { margin: 0; font-size: 13px; color: var(--sc-muted); }
.lab-replay-observers { margin: 0; font-size: 12px; color: var(--sc-muted); }
.lab-replay-question {
  padding: 12px 16px; border-left: 3px solid var(--sc-gold-edge);
  background: var(--sc-gold-well); font-size: 14px; line-height: 1.6; color: var(--sc-ink);
}
.lab-replay-question p { margin: 0 0 8px; }
.lab-replay-question p:last-child { margin-bottom: 0; }

/* --- the lecture search ------------------------------------------------------------------ */

.lab-search-box {
  display: grid; gap: 8px; padding: 16px 18px;
  border: 1px solid var(--sc-edge); background: var(--sc-panel);
}
.lab-search-label {
  font: 500 10px/1.4 var(--sc-font-display); letter-spacing: .14em;
  text-transform: uppercase; color: var(--sc-muted);
}
.lab-search-row { display: flex; gap: 10px; }
.lab-search-input { flex: 1 1 auto; min-width: 0; }
.lab-search-hint { margin: 0; font-size: 12px; color: var(--sc-muted); }

.lab-search-results { margin: var(--sc-space-3) 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.lab-search-hit { display: grid; gap: 4px; }
.lab-search-hit > a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
  padding: 12px 16px; border: 1px solid var(--sc-edge); background: var(--sc-panel);
  color: var(--sc-ink); text-decoration: none;
}
.lab-search-hit > a:hover { border-color: var(--sc-gold-edge); background: var(--sc-raised); }
.lab-search-week {
  font: 500 10px/1.4 var(--sc-font-display); letter-spacing: .14em;
  text-transform: uppercase; color: var(--sc-muted); min-width: 64px;
}
.lab-search-time { font: 600 13px var(--sc-font-mono); color: var(--sc-gold); min-width: 60px; }
.lab-search-chapter { flex: 1 1 240px; font-size: 14px; line-height: 1.5; }
.lab-search-note { margin: 0 0 0 16px; font-size: 13px; color: var(--sc-muted); }

@media (prefers-reduced-motion: no-preference) {
  .lab-card > a, .lab-search-hit > a { transition: border-color var(--sc-fast), background-color var(--sc-fast); }
}
/* The field keeps its own aspect ratio exactly, because the drag maps screen pixels straight
 * on to the viewBox: cap the width, never the height. */
.lab-field-map { max-width: 560px; margin-inline: auto; }

/* --- the APM budget ----------------------------------------------------------------------- */

.lab-job { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.lab-job input { flex: none; }


/* --- the measure on a lab page ----------------------------------------------------------- */

/* None. The lab body is a `.cms-article` inside the site's one `.content-column`, so its prose,
   its instruments and its charts share the same two edges as every other content page. */
.learn-lab { display: grid; gap: 20px; padding-block: 48px 80px; }
/* The wrapper already gives the air; the article's own padding would double it under the breadcrumb. */
.learn-lab > .cms-article { padding-block: 0; }