/* =========================================================================
   ACLab — visual identity: an oscilloscope's cyan on a dark board.
   Same track as CircuitLab, so the printed-circuit background stays; the
   accent moves from phosphor green to scope cyan, which is what tells the
   two cards apart at a glance.
   ========================================================================= */
:root {
  --bp-bg: #08131a;
  --bp-bg2: #0c1a22;
  --bp-panel: #10222c;
  --bp-panel2: #173040;
  --bp-line: #23414f;
  --bp-line2: #345b6e;
  --bp-ink: #e2eef4;
  --bp-ink-dim: #8ba6b4;
  --bp-cyan: #38d9f5;          /* primary accent: scope cyan */
  --bp-blue: #4dabf7;
  --bp-amber: #ffd43b;
  --bp-mark: #ffd43b;
  --bp-red: #ff8787;
  --bp-green: #2ee6a8;
  --bp-violet: #b197fc;
  --bp-pink: #f472b6;
  --bp-steel: #b8c4cc;

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

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

/* Copper traces, with a sine running through them. */
body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='none' stroke='%2338d9f5' stroke-opacity='0.05' stroke-width='1.4'%3E%3Cpath d='M10 40 q 20 -22 40 0 t 40 0 t 40 0 t 40 0'/%3E%3Cpath d='M20 140 h44 l24 -24 h52'/%3E%3Cpath d='M150 60 v46 l-26 26'/%3E%3C/g%3E%3Cg fill='%2338d9f5' fill-opacity='0.06'%3E%3Ccircle cx='20' cy='140' r='3'/%3E%3Ccircle cx='150' cy='60' r='3'/%3E%3Ccircle cx='124' cy='132' r='3'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(rgba(56, 217, 245, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 217, 245, 0.02) 1px, transparent 1px);
  background-size: 180px 180px, 180px 180px, 180px 180px;
}

/* ------------------------------- ACLab only ----------------------------- */
#boardView, #scopeView, #phasorView, #bodeView {
  background: rgba(6, 14, 20, 0.62);
  border: 1px solid var(--bp-line);
  border-radius: 8px;
  width: 100%;
  height: auto;
  touch-action: manipulation;
}
#boardView .hit { cursor: pointer; }

.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; }

.part-row {
  display: grid; grid-template-columns: 3.1rem 1fr 2.4rem 30px;
  gap: 0.4rem; align-items: center; margin-bottom: 0.35rem;
}
.part-row.two { grid-template-columns: 3.1rem 1fr 2.4rem 1fr 2.4rem 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; }

/* The frequency is the master control of the whole page, so it gets a row
   of its own rather than being one number among many. */
.freq-row { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; align-items: center; }
.freq-row input[type="range"] { width: 100%; accent-color: var(--bp-cyan); }
.freq-big {
  font-family: var(--mono); font-size: 1.15rem; color: var(--bp-cyan);
  white-space: nowrap; text-align: right; min-width: 6.5rem;
}
.freq-presets { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.5rem; }
.freq-presets button {
  font-family: var(--mono); font-size: 0.68rem; cursor: pointer;
  background: var(--bp-panel2); color: var(--bp-ink-dim);
  border: 1px solid var(--bp-line); border-radius: 6px; padding: 0.18rem 0.5rem;
}
.freq-presets button:hover { color: var(--bp-cyan); border-color: var(--bp-cyan); }
.freq-presets button.on { color: var(--bp-cyan); border-color: var(--bp-cyan); }

/* Which trace the scope and the sweep are looking at. */
.probe-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; font-size: 0.8rem; }
.probe-row select { flex: 1; min-width: 8rem; }

.scope-foot, .sweep-foot {
  display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center;
  margin-top: 0.5rem; font-family: var(--mono); font-size: 0.72rem; color: var(--bp-ink-dim);
}
.scope-foot b, .sweep-foot b { color: var(--bp-ink); }
.scope-play {
  font-family: var(--mono); font-size: 0.7rem; cursor: pointer; margin-left: auto;
  background: transparent; color: var(--bp-ink-dim);
  border: 1px solid var(--bp-line); border-radius: 5px; padding: 0.18rem 0.55rem;
}
.scope-play.on { color: var(--bp-cyan); border-color: var(--bp-cyan); }

.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); }

/* 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; }