/* =========================================================================
   SemiLab — visual identity: the orange of a hot junction on the same dark
   board as the two sibling cards. CircuitLab is phosphor green, ACLab is
   scope cyan; this card is warm, because everything on it is about a
   device that heats up when you get it wrong.
   ========================================================================= */
:root {
  --bp-bg: #120d09;
  --bp-bg2: #19110b;
  --bp-panel: #211710;
  --bp-panel2: #2e2116;
  --bp-line: #453424;
  --bp-line2: #5f4832;
  --bp-ink: #f2e8de;
  --bp-ink-dim: #b09a86;
  --bp-cyan: #ff922b;          /* primary accent: junction orange */
  --bp-blue: #4dabf7;
  --bp-amber: #ffd43b;
  --bp-mark: #ffd43b;
  --bp-red: #ff8787;
  --bp-green: #2ee6a8;
  --bp-violet: #b197fc;
  --bp-pink: #f472b6;
  --bp-steel: #c9bcb0;

  /* the quantities, identical in the figures and in the calculator */
  --q-u: #4dabf7;
  --q-i: #ffd43b;
  --q-p: #ff8787;
  --q-a: #ff922b;

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

/* A wafer: a lattice of dies with a scribe grid between them. */
body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='168'%3E%3Cg fill='none' stroke='%23ff922b' stroke-opacity='0.05' stroke-width='1.2'%3E%3Crect x='18' y='18' width='54' height='54' rx='3'/%3E%3Crect x='96' y='18' width='54' height='54' rx='3'/%3E%3Crect x='18' y='96' width='54' height='54' rx='3'/%3E%3Crect x='96' y='96' width='54' height='54' rx='3'/%3E%3Cpath d='M32 32h26M32 40h18M110 32h26M110 40h14M32 110h26M32 118h20M110 110h26'/%3E%3C/g%3E%3Cg fill='%23ff922b' fill-opacity='0.055'%3E%3Ccircle cx='84' cy='84' r='2.5'/%3E%3Ccircle cx='84' cy='6' r='2.5'/%3E%3Ccircle cx='6' cy='84' r='2.5'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(rgba(255, 146, 43, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 146, 43, 0.018) 1px, transparent 1px);
  background-size: 168px 168px, 168px 168px, 168px 168px;
}

/* ------------------------------- SemiLab only --------------------------- */
#schemView, #curveView, #transferView, #waveView {
  background: rgba(10, 7, 4, 0.62);
  border: 1px solid var(--bp-line);
  border-radius: 8px;
  width: 100%;
  height: auto;
  touch-action: manipulation;
}

/* The circuit chooser: a picture beats a name for something you recognise
   by shape, so each entry carries a miniature of its own schematic. */
.topo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.45rem; }
.topo-grid button {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  padding: 0.5rem 0.3rem 0.45rem;
  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; line-height: 1.25; text-align: center;
  transition: 0.15s;
}
.topo-grid button:hover { border-color: var(--bp-cyan); color: var(--bp-ink); }
.topo-grid button.active {
  border-color: var(--bp-cyan); color: var(--bp-cyan);
  background: color-mix(in srgb, var(--bp-cyan) 14%, transparent);
}
.topo-grid button svg { width: 74px; height: 40px; display: block; }

.param-row {
  display: grid; grid-template-columns: 1fr 5.2rem 2.6rem;
  gap: 0.4rem; align-items: center; margin-bottom: 0.35rem;
}
.param-row label { font-family: var(--mono); font-size: 0.76rem; color: var(--bp-ink-dim); }
.param-row label b { color: var(--bp-cyan); font-weight: 600; }
.param-row .punit { font-family: var(--mono); font-size: 0.72rem; color: var(--bp-ink-dim); }
.param-row input[type="number"] { width: 100%; }

.dev-tabs { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.dev-tabs 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.2rem 0.55rem;
}
.dev-tabs button.on { color: var(--bp-cyan); border-color: var(--bp-cyan); }

/* The operating point deserves to be readable across the room — it is the
   one number the whole card is about. */
.op-strip {
  display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: baseline;
  margin-top: 0.55rem; font-family: var(--mono); font-size: 0.74rem; color: var(--bp-ink-dim);
}
.op-strip b { color: var(--bp-ink); font-size: 0.95rem; font-weight: 600; }
.op-strip .region { padding: 0.1rem 0.5rem; border-radius: 4px; font-size: 0.7rem; }
.op-strip .region.ok { color: var(--bp-green); border: 1px solid var(--bp-green); }
.op-strip .region.warn { color: var(--bp-red); border: 1px solid var(--bp-red); }
.op-strip .region.mid { color: var(--bp-amber); border: 1px solid var(--bp-amber); }

.curve-foot, .wave-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);
}
.curve-foot b, .wave-foot b { color: var(--bp-ink); }
.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; }

.wave-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;
}
.wave-play.on { color: var(--bp-cyan); border-color: var(--bp-cyan); }

.note-line { font-family: var(--mono); font-size: 0.74rem; color: var(--bp-ink-dim); margin-top: 0.5rem; line-height: 1.6; }
.note-line 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; }