/**
 * Conductors and Insulators Lab styles.
 *
 * Layout thesis: one shared material picker up top ("material in hand"),
 * two stations side by side below it (Thermal Touch Test | Circuit Tester),
 * and a classification table that fills in as both stations get tested -
 * visual language matches thermal-energy.css (same fonts, palette shape,
 * card/drawer/button conventions) but with its own page-local prefix (`ci-`)
 * and no shared class names, per the house lab convention.
 *
 * WCAG 2.1 AA: 0.75rem minimum font size, 44px touch targets on every
 * button, conductor/insulator status is never color-only (every colored
 * pill/badge also carries its own text label).
 */
:root {
  --bg: #eef3fb;
  --paper: #fff;
  --ink: #15233c;
  --muted: #5c6b85;
  --line: #d7e0ef;
  --grid: rgba(47, 107, 255, .08);

  --accent: #7c3aed;
  --accent-bg: #f5f0ff;

  --hot: #e03131;
  --hot-bg: #fff0f0;
  --warm: #d9730d;
  --warm-bg: #fff4e6;
  --cool: #1971c2;
  --cool-bg: #eaf4ff;

  --conductor: #2f9e44;
  --conductor-bg: #ebfbee;
  --insulator: #495a7a;
  --insulator-bg: #eef1f8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 26px 26px,
    var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.6;
  font-size: 1rem;
}

.ci-wrap { max-width: 1220px; margin: 0 auto; padding: 0 16px 24px; }

/* HERO ---------------------------------------------------------------- */
.ci-hero { padding: 14px 16px 8px; text-align: center; }
.ci-hero-title { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.ci-eyebrow {
  display: inline-block; font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; color: #fff;
  background: var(--accent); padding: 5px 12px; border-radius: 6px;
}
.ci-hero h1 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.02; letter-spacing: -.02em;
}
.ci-hero .ci-sub { max-width: 680px; margin: 4px auto 0; color: var(--muted); font-size: .88rem; font-weight: 500; }

/* LAB SHELL ------------------------------------------------------------ */
.ci-lab {
  background: var(--paper); border: 1px solid var(--line); border-radius: 20px;
  padding: 12px; margin-top: 8px; box-shadow: 0 8px 28px rgba(21, 35, 60, .05);
}

/* MATERIAL PICKER -------------------------------------------------------*/
.ci-materialbar {
  border: 1px solid var(--line); border-radius: 14px; background: #fbfcfe;
  padding: 12px 14px; margin-bottom: 10px;
}
.ci-materialbar h2 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.ci-cat { margin-bottom: 10px; }
.ci-cat:last-child { margin-bottom: 0; }
.ci-cat-label {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.ci-matgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ci-matcard {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  border: 1px solid var(--line); background: #fff; border-radius: 12px;
  padding: 10px 12px; cursor: pointer; font: inherit; min-height: 44px; transition: .13s;
}
.ci-matcard:hover { border-color: var(--accent); box-shadow: 0 3px 10px rgba(124, 58, 237, .12); }
.ci-matcard:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.ci-matcard[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-bg); }
.ci-matcard-name { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .88rem; }
.ci-matcard-formula { color: var(--accent); font-weight: 600; font-size: .75rem; }

/* STATIONS -------------------------------------------------------------- */
.ci-stations { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; align-items: start; }
.ci-station {
  background: #fbfcfe; border: 1px solid var(--line); border-radius: 16px; padding: 12px;
}
.ci-station h3 {
  font-family: 'Space Grotesk', sans-serif; font-size: .78rem; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px;
}
.ci-station-desc { font-size: .82rem; color: var(--muted); margin: -4px 0 10px; }

/* Thermal station -------------------------------------------------------*/
.ci-thermal-rig { display: flex; flex-direction: column; gap: 10px; }
.ci-heat-source { display: flex; align-items: center; gap: 10px; }
.ci-icon { width: 44px; height: 44px; flex: none; }
.ci-icon-plate { fill: #b7c0d1; stroke: #5c6b85; stroke-width: 1.5; }
.ci-icon-flame { fill: var(--warm); }
.ci-heat-label { font-size: .84rem; font-weight: 600; color: var(--muted); }
.ci-thermal-controls { display: flex; flex-direction: column; gap: 8px; }
.ci-heat-progress { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; display: none; }
.ci-heat-fill { height: 100%; width: 0; background: var(--warm); transition: width .08s linear; }
.ci-thermal-readout { min-height: 28px; }
.ci-thermal-hint { font-size: .84rem; color: var(--muted); }
.ci-thermal-nums { font-size: .84rem; color: var(--muted); margin-top: 6px; }
.ci-feel-badge {
  display: inline-block; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: .9rem; padding: 5px 14px; border-radius: 999px;
}
.ci-feel-hot { background: var(--hot-bg); color: var(--hot); }
.ci-feel-warm { background: var(--warm-bg); color: var(--warm); }
.ci-feel-cool { background: var(--cool-bg); color: var(--cool); }

/* Circuit station ---------------------------------------------------------*/
.ci-circuit-diagram {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px;
}
.ci-battery { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.ci-battery-icon { width: 34px; height: 50px; }
.ci-battery-body { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.ci-battery-cap { fill: var(--ink); }
.ci-battery-plus-v, .ci-battery-plus-h, .ci-battery-minus { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.ci-battery-caption { font-size: .7rem; font-weight: 600; color: var(--muted); }

.ci-slot {
  flex: 1 1 120px; min-width: 100px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 2px dashed var(--line); border-radius: 12px; padding: 8px; text-align: center;
  transition: border-color .15s, background .15s;
}
.ci-slot-filled { border-style: solid; border-color: var(--conductor); background: var(--conductor-bg); }
.ci-slot-glyph { width: 56px; height: 28px; }
.ci-slot-bulb .ci-slot-glyph { width: 40px; height: 46px; }
.ci-wire-path { stroke: var(--line); stroke-width: 3; stroke-dasharray: 5 4; fill: none; }
.ci-slot-filled .ci-wire-path { stroke: var(--conductor); stroke-dasharray: none; }
.ci-material-gap { fill: #fff; stroke: var(--line); stroke-width: 2; stroke-dasharray: 4 3; }
.ci-slot-filled .ci-material-gap { stroke: var(--conductor); stroke-dasharray: none; fill: var(--conductor-bg); }
.ci-bulb-globe { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.ci-bulb-filament { stroke: var(--muted); stroke-width: 2; fill: none; }
.ci-bulb-base { fill: #b7c0d1; stroke: #5c6b85; stroke-width: 1.2; }
.ci-bulb-lit .ci-bulb-globe { fill: #fff6cc; stroke: #e0b800; filter: drop-shadow(0 0 6px #ffe066); }
.ci-bulb-lit .ci-bulb-filament { stroke: #e0b800; stroke-width: 2.6; }

.ci-slot-label { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .76rem; }
.ci-slot-material-name { font-size: .74rem; color: var(--conductor); font-weight: 600; }
.ci-slot-material-name[hidden], .ci-slot-remove[hidden], .ci-slot-btn[hidden] { display: none; }

.ci-slot-btn, .ci-slot-remove {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .74rem;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 8px; padding: 6px 10px; cursor: pointer; min-height: 36px;
}
.ci-slot-btn:hover, .ci-slot-remove:hover { border-color: var(--accent); color: var(--accent); }
.ci-slot-btn:focus-visible, .ci-slot-remove:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.ci-slot-remove { color: var(--muted); }

.ci-circuit-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ci-circuit-status { font-size: .84rem; font-weight: 500; color: var(--muted); }
.ci-status-lit { color: var(--conductor); font-weight: 600; }
.ci-status-dark { color: var(--hot); font-weight: 600; }
.ci-status-pending { color: var(--muted); }

.ci-btn {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .84rem;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 10px; padding: 9px 14px; cursor: pointer; min-height: 44px;
}
.ci-btn:hover { border-color: var(--accent); color: var(--accent); }
.ci-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.ci-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.ci-btn-primary:hover { color: #fff; background: #6c2bd9; }
.ci-btn:disabled { opacity: .55; cursor: not-allowed; }

/* CLASSIFICATION TABLE ---------------------------------------------------*/
.ci-panel { background: #fbfcfe; border: 1px solid var(--line); border-radius: 16px; padding: 10px; }
.ci-panel h3 {
  font-family: 'Space Grotesk', sans-serif; font-size: .78rem; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
}
.ci-tablepanel { margin-top: 10px; }
.ci-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.ci-table th, .ci-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.ci-table th {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .74rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.ci-cell-name { font-weight: 600; }
.ci-cell-pending { color: var(--muted); font-style: italic; }
.ci-cell-conductor, .ci-cell-insulator {
  font-weight: 700; border-radius: 999px; padding: 3px 12px; display: inline-block;
}
.ci-cell-conductor { background: var(--conductor-bg); color: var(--conductor); }
.ci-cell-insulator { background: var(--insulator-bg); color: var(--insulator); }

/* NOTEBOOK (labnb-* structural classes come from
   assets/labs/shared/lab-notebook.css; this block only sets the palette
   under .labnb--ci, per that file's convention). */
.labnb--ci {
  --labnb-surface: #fff;
  --labnb-border: var(--line);
  --labnb-ink: var(--ink);
  --labnb-muted: var(--muted);
  --labnb-accent: var(--accent);
}
.ci-panel-h {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .95rem; margin: 12px 0 6px;
}
.ci-obs-field textarea {
  width: 100%; min-height: 70px; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font-family: inherit; font-size: .92rem;
}

/* MISC ------------------------------------------------------------------ */
.ci-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.ci-copyright { text-align: center; font-size: .75rem; color: var(--muted); padding: 12px 0; }

/* RESPONSIVE -------------------------------------------------------------*/
@media (max-width: 900px) {
  .ci-stations { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ci-circuit-diagram { flex-direction: column; }
  .ci-slot { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}