/* =========================================================================
   CircuitLab — visual identity: phosphor green on a dark board.
   A different track from mechanika, so it gets a look of its own: the
   background is a printed-circuit pattern rather than a blueprint grid.
   (siblings: BeamLab cyan, FrameLab teal, ShaftLab bronze, GearLab green,
    BearingLab amber, BoltLab indigo-violet, MotionLab pink, DriveLab gold,
    RotLab orchid, KineLab lime, TrajLab indigo)
   ========================================================================= */
:root {
  --bp-bg: #0a1210;
  --bp-bg2: #0e1a17;
  --bp-panel: #12211d;
  --bp-panel2: #1a2f28;
  --bp-line: #26413a;
  --bp-line2: #375b50;
  --bp-ink: #e4efea;
  --bp-ink-dim: #8fa89f;
  --bp-cyan: #2ee6a8;          /* primary accent: phosphor green */
  --bp-blue: #4dabf7;
  --bp-amber: #ffd43b;
  --bp-mark: #ffd43b;
  --bp-red: #ff8787;
  --bp-green: #2ee6a8;
  --bp-violet: #b197fc;
  --bp-pink: #f472b6;
  --bp-steel: #b8bec9;

  /* the four quantities, identical in the figures and on the board */
  --q-u: #4dabf7;
  --q-i: #ffd43b;
  --q-r: #2ee6a8;
  --q-p: #ff8787;

  --page-max: 1520px;
  --calc-col: 430px;
  --learn-col: 300px;
}

/* Copper traces and pads. */
body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%232ee6a8' stroke-opacity='0.055' stroke-width='1.4'%3E%3Cpath d='M20 20 h50 l24 24 h46'/%3E%3Cpath d='M20 90 h30 l26 26 v34'/%3E%3Cpath d='M140 60 v40 l-30 30'/%3E%3C/g%3E%3Cg fill='%232ee6a8' fill-opacity='0.06'%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3Ccircle cx='140' cy='44' r='3'/%3E%3Ccircle cx='76' cy='150' r='3'/%3E%3Ccircle cx='110' cy='130' r='3'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(rgba(46, 230, 168, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 230, 168, 0.02) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 160px 160px;
}

/* ---------------------------- CircuitLab only --------------------------- */
#boardView {
  background: rgba(8, 16, 14, 0.62);
  border: 1px solid var(--bp-line);
  border-radius: 8px;
  width: 100%;
  height: auto;
  touch-action: manipulation;
}
#boardView .hit { cursor: pointer; }
#boardView .hit:hover ~ * { pointer-events: none; }

/* The palette. Each tool is a symbol plus a word, because neither alone is
   enough for someone meeting a schematic for the first time. */
.tool-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem;
}
.tool-grid button {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  padding: 0.5rem 0.2rem 0.4rem;
  background: var(--bp-panel2); border: 1px solid var(--bp-line);
  border-radius: 8px; color: var(--bp-ink-dim); cursor: pointer;
  font-family: var(--mono); font-size: 0.66rem; transition: 0.15s;
}
.tool-grid button:hover { border-color: var(--bp-cyan); color: var(--bp-ink); }
.tool-grid button.active {
  border-color: var(--bp-cyan); color: var(--bp-cyan);
  background: color-mix(in srgb, var(--bp-cyan) 14%, transparent);
}
.tool-grid button svg { width: 42px; height: 22px; display: block; }
.tool-badge {
  margin-left: auto; font-family: var(--mono); font-size: 0.68rem;
  color: var(--bp-cyan); font-weight: 400;
}

/* One row per placed component: name, value, and whatever second number
   that kind of component needs. */
.part-row {
  display: grid; grid-template-columns: 3.1rem 1fr 1.6rem 30px;
  gap: 0.4rem; align-items: center; margin-bottom: 0.35rem;
}
.part-row.two { grid-template-columns: 3.1rem 1fr 1.6rem 1fr 1.9rem 30px; }
.part-row .pname {
  font-family: var(--mono); font-size: 0.78rem; color: var(--bp-cyan);
  cursor: pointer; overflow: hidden; text-overflow: ellipsis;
}
.part-row.sel .pname { color: var(--bp-amber); font-weight: 700; }
.part-row .punit { font-family: var(--mono); font-size: 0.72rem; color: var(--bp-ink-dim); }
.part-row input[type="number"] { width: 100%; }
.part-row .sw {
  grid-column: 2 / 4; font-family: var(--mono); font-size: 0.72rem;
  background: var(--bp-panel2); border: 1px solid var(--bp-line);
  color: var(--bp-ink-dim); border-radius: 6px; padding: 0.25rem; cursor: pointer;
}
.part-row .sw.on { color: var(--bp-cyan); border-color: var(--bp-cyan); }

.board-foot {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  margin-top: 0.55rem;
}
.legend { display: flex; gap: 0.9rem; flex-wrap: wrap; font-family: var(--mono); font-size: 0.68rem; color: var(--bp-ink-dim); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.28rem; vertical-align: -1px; }
.board-foot .icon-btn { margin-left: auto; width: auto; padding: 0.2rem 0.6rem; font-size: 0.7rem; }

.ohm-out {
  font-family: var(--mono); font-size: 0.78rem; color: var(--bp-ink-dim);
  margin-top: 0.5rem; min-height: 1.1rem; line-height: 1.5;
}
.ohm-out b { color: var(--bp-cyan); }
.ohm-out .given { color: var(--bp-amber); }

/* The reduction, one line per step. */
.red-step {
  display: flex; gap: 0.7rem; align-items: baseline;
  font-family: var(--mono); font-size: 0.76rem; padding: 0.22rem 0;
  border-bottom: 1px dashed var(--bp-line);
}
.red-step .n { color: var(--bp-mark); min-width: 1.2rem; }
.red-step .what { color: var(--bp-ink-dim); flex: 1; }
.red-step .val { color: var(--bp-cyan); }
.red-final { margin-top: 0.5rem; font-family: var(--mono); font-size: 0.92rem; color: var(--bp-cyan); }
.red-none { font-size: 0.85rem; color: var(--bp-ink-dim); line-height: 1.6; }

/* The chapters use a coloured letter for each quantity. */
.learn-body .q { font-family: var(--mono); color: var(--bp-cyan); font-weight: 600; }
.learn-body .mini-tbl {
  margin: 0.7rem auto 0; font-size: 0.78rem; width: auto; min-width: 60%;
}
.learn-body .mini-tbl td, .learn-body .mini-tbl th { padding: 0.25rem 0.6rem; }