/* Faradaem 1.14.0 -- a dark bench instrument, schematics drawn on the night.
 *
 * One cool dark surface everywhere: ink, panel, hairlines, one cyan accent,
 * square corners, no shadows. Figures are drawn directly on the dark ground:
 * light grey wires and symbols, cyan node dots and node labels, cyan traces.
 * Nothing on the page is light-on-light any more.
 *
 * Body type is sans. A mono lane is reserved for numerics, component values and
 * raw simulator output -- anything whose columns must not reflow.
 *
 * Everything measurable comes from a token. Spacing is --s1..--s6, type is the
 * five --t-* steps, and there is one radius and two hairline weights. If a value
 * is not on a scale it is a bug, not a decision.
 *
 * Zero dependencies: system font stacks only, no imports, no remote assets.
 */

:root {
  /* ---- colour ---- */
  --ink: #0A0E14;
  --panel: #101722;
  --line: #1E2A3A;
  --line-strong: #55677F;
  --line-hover: #8A94A6;
  --text: #E6EAF2;
  --muted: #8A94A6;

  --accent: #22D3EE;
  --accent-hover: #67E8F9;
  --accent-underline: rgba(34, 211, 238, 0.4);

  /* The figures: light grey wires on the dark ground, faint grid, firmer axes. */
  --wire: #C6CDDA;
  --fig-grid: rgba(230, 234, 242, 0.08);
  --fig-axis: rgba(230, 234, 242, 0.35);

  --ok: #34D399;
  --fp-well: rgba(138, 148, 166, 0.14);
  --fp-device: rgba(34, 211, 238, 0.16);
  --fp-device-p: rgba(103, 232, 249, 0.28);
  --fp-tap: rgba(198, 205, 218, 0.35);
  --fp-track: rgba(34, 211, 238, 0.55);
  --fp-stub: rgba(34, 211, 238, 0.28);
  --err: #F87171;
  --err-wash: rgba(248, 113, 113, 0.07);

  /* ---- spacing scale ---- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 40px;

  /* ---- type scale: five steps, each with its own metrics ---- */
  --t-label: 12px;
  --lh-label: 1.3333;
  --ls-label: 0.08em;

  --t-small: 14px;
  --lh-small: 1.4286;
  --ls-small: 0;

  --t-body: 16px;
  --lh-body: 1.5;
  --ls-body: 0;

  --t-section: 20px;
  --lh-section: 1.3;
  --ls-section: 0.06em;

  /* The brand step belongs to the header logotype alone. */
  --t-brand: 24px;
  --lh-brand: 1.2;

  --t-numeral: 34px;
  --lh-numeral: 1.05;
  --ls-numeral: -0.01em;

  /* The display step exists for the home hero alone. */
  --t-display: 40px;
  --lh-display: 1.1;
  --ls-display: -0.015em;

  /* Tracking used by every uppercase micro-label, and by the wordmark. */
  --ls-caps: 0.12em;
  --ls-wordmark: 0.18em;

  /* The trademark on the wordmark. Sized from the metrics of the face
     that renders it (Segoe UI Semibold: cap 0.700 em, trademark ink
     0.323 em with its top natively on the cap line), so the symbol's
     ink stands one third of the cap height, top aligned to the cap:
     size = (0.700 / 3) / 0.323 = 0.72 em. Raise = 0.700 x (1 - 0.72)
     = 0.195 wordmark-em = 0.27 symbol-em. The tuck removes the brand
     tracking the M contributes: 0.18 wordmark-em / 0.72 = 0.25. */
  --tm-size: 0.72em;
  --tm-raise: -0.27em;
  --tm-tuck: -0.25em;

  /* ---- everything else ---- */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 0px;
  --hairline-w: 0.8px;
  --hairline: var(--hairline-w) solid var(--line);
  --hairline-strong: var(--hairline-w) solid var(--line-strong);
  --stroke: 2px;
  --dot: 3px;

  --shell: 1400px;
  --col-min: 300px;
  --col-max: 348px;
  --control-height: 36px;
  --step: 140ms;

  /* The version is written once, here, and rendered wherever it is needed. */
  --app-version: "v1.16.0";
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-small);
  line-height: var(--lh-small);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.wrap {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--s5);
}

/* Numerals never reflow as their digits change. */
.metric-value,
.stat-value,
.stat-check,
.field-echo,
input {
  font-variant-numeric: tabular-nums;
}

/* The ring is offset so it cannot fuse with the filled accent button, which
   at zero radius has no corner curve to break the seam. */
:focus-visible {
  outline: var(--stroke) solid var(--accent);
  outline-offset: var(--s1);
}

.run:focus-visible {
  outline-color: var(--text);
}

/* The one utility that has to win. Any rule setting display later in this
   file would otherwise beat it at equal specificity, which is how a badge
   marked hidden went on rendering as an empty box next to the reading. */
.hidden {
  display: none !important;
}

.placeholder {
  color: var(--muted);
}

/* ---- top nav ------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ink);
  border-bottom: var(--hairline);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: calc(var(--s6) + var(--s2));
}

.wordmark {
  display: flex;
  align-items: center;
  gap: var(--s2);
  color: var(--text);
  text-decoration: none;
}

.wordmark-name {
  font-size: var(--t-brand);
  line-height: var(--lh-brand);
  font-weight: 600;
  letter-spacing: var(--ls-wordmark);
  text-transform: uppercase;
}

.wordmark-ae {
  color: var(--accent);
}

/* line-height 0 keeps the raised symbol from growing the header line
   box; letter-spacing 0 stops the brand tracking trailing past it. */
.wordmark-tm {
  font-size: var(--tm-size);
  line-height: 0;
  letter-spacing: 0;
  position: relative;
  top: var(--tm-raise);
  margin-left: var(--tm-tuck);
  color: var(--muted);
}

.wordmark-version {
  padding: var(--s1) var(--s2);
  border: var(--hairline);
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  color: var(--muted);
}

.wordmark-version::after {
  content: var(--app-version);
}

.nav-inner nav {
  display: flex;
  align-items: center;
  gap: var(--s5);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: var(--s1) 0;
  border-bottom: var(--hairline-w) solid transparent;
  transition: color var(--step) ease;
}

.nav-links a:hover {
  color: var(--text);
}

.nav-links a[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ---- page frame ---------------------------------------------------- */

.page {
  flex: 1 0 auto;
  padding: var(--s6) 0;
}

.page-head {
  margin-bottom: var(--s5);
}

.page-title {
  margin: 0;
  font-size: var(--t-section);
  line-height: var(--lh-section);
  letter-spacing: var(--ls-section);
  font-weight: 600;
  text-transform: uppercase;
}

.page-sub {
  margin: var(--s1) 0 0;
  color: var(--muted);
  font-size: var(--t-small);
  line-height: var(--lh-small);
}

/* ---- home hero ------------------------------------------------------ */

.hero {
  padding-bottom: var(--s6);
  margin-bottom: var(--s6);
  border-bottom: var(--hairline);
}

.hero-kicker {
  margin: 0 0 var(--s4);
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--accent);
}

.hero-title {
  margin: 0;
  max-width: 34ch;
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: 600;
}

.hero-sub {
  margin: var(--s4) 0 0;
  max-width: 60ch;
  color: var(--muted);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
}

/* The call to action is the run button's language in link form. */
.hero-cta {
  display: inline-flex;
  align-items: center;
  height: var(--control-height);
  padding: 0 var(--s5);
  background: var(--accent);
  border: var(--hairline-w) solid var(--accent);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-caps);
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--step) ease, border-color var(--step) ease;
}

.hero-cta:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.hero-alt {
  display: inline-flex;
  align-items: center;
  height: var(--control-height);
  padding: 0 var(--s4);
  border: var(--hairline-strong);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--step) ease, border-color var(--step) ease;
}

.hero-alt:hover {
  color: var(--text);
  border-color: var(--line-hover);
}

/* The facts are the page's evidence, so they are read as instrument
   readouts: the number at the numeral step, its meaning under it, each
   tile a cell in one hairline grid. The gap is the hairline itself,
   shown through the grid's own background. */
.hero-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--hairline-w);
  margin: var(--s5) 0 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: var(--hairline);
}

.hero-facts li {
  background: var(--panel);
}

/* Each fact walks to its proof. Quiet until asked. */
.hero-facts a {
  display: block;
  padding: var(--s3) var(--s4);
  color: inherit;
  text-decoration: none;
}

.hero-facts b {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-numeral);
  line-height: var(--lh-numeral);
  letter-spacing: var(--ls-numeral);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
  transition: color var(--step) ease;
}

.hero-facts span {
  display: block;
  margin-top: var(--s1);
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

.hero-facts a:hover b,
.hero-facts a:focus-visible b {
  color: var(--accent);
}

/* The hero arrives like a measurement settling: in order, once, and not
   at all for a reader who asked their machine for no motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero-kicker, .hero-title, .hero-sub, .hero-actions, .hero-facts,
  .hero-figure {
    animation: hero-settle 0.45s ease-out backwards;
  }
  .hero-title { animation-delay: 0.06s; }
  .hero-sub { animation-delay: 0.12s; }
  .hero-actions { animation-delay: 0.18s; }
  .hero-facts { animation-delay: 0.24s; }
  .hero-figure { animation-delay: 0.12s; }
}

@keyframes hero-settle {
  from {
    opacity: 0;
    transform: translateY(var(--s2));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* A published page with no simulator behind it says so once, here. */
.static-note {
  margin: 0 0 var(--s5);
  padding: var(--s3) var(--s4);
  border: var(--hairline);
  border-left: var(--stroke) solid var(--accent);
  background: var(--panel);
  color: var(--muted);
  font-size: var(--t-small);
  line-height: var(--lh-small);
}

/* The first thing in the tab order, and invisible until it is reached.
   Without it, every keyboard visitor pays six presses through the header
   on every page before they arrive anywhere. Moved off-screen rather than
   display:none, because a hidden element is not focusable at all. */
.skip-link {
  position: absolute;
  left: var(--s3);
  top: calc(var(--s6) * -1);
  z-index: 10;
  padding: var(--s2) var(--s3);
  background: var(--panel);
  border: var(--hairline);
  color: var(--text);
  font-size: var(--t-small);
  line-height: var(--lh-small);
  text-decoration: none;
  transition: top var(--step) ease;
}

.skip-link:focus {
  top: var(--s3);
}

/* The published manual keeps every section and marks the ones the demo
   cannot perform. Hiding them would let the document lie by omission about
   what Faradaem is; a chip beside the heading says it in three words. */
.local-only-tag {
  display: inline-block;
  margin-left: var(--s2);
  padding: 0 var(--s2);
  border: var(--hairline);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--muted);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

/* ---- panels -------------------------------------------------------- */

.panel {
  /* Anchored jumps stop clear of the sticky header. */
  scroll-margin-top: calc(var(--s6) + var(--s4));
  background: var(--panel);
  border: var(--hairline);
  border-radius: var(--radius);
}

.panel-head {
  margin: 0;
  padding: var(--s3) var(--s4);
  border-bottom: var(--hairline);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-caps);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
}

/* A bare section label: the panel head without its rule. */
.section-label {
  margin: 0 0 var(--s2);
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-caps);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
}

.panel-body {
  padding: var(--s4);
}

/* ---- simulator layout ---------------------------------------------- */

/* The figure column follows the reader down the control stack. */
.sim-figure {
  position: sticky;
  top: calc(var(--s6) + var(--s4));
}

/* Grid items refuse to shrink below their content by default, so a wide
   drawing would push the whole column, and every panel in it, past the
   screen edge instead of scrolling inside its own figure. */
.sim > * {
  min-width: 0;
}

.sim {
  display: grid;
  grid-template-columns: minmax(var(--col-min), var(--col-max)) 1fr;
  gap: var(--s5);
  align-items: start;
}

/* ---- circuit tabs --------------------------------------------------- */

.modes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: var(--s4);
  border-bottom: var(--hairline);
}

.mode {
  flex: 0 1 auto;
  padding: var(--s2) var(--s3);
  background: none;
  border: var(--hairline-strong);
  border-radius: var(--radius);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--step) ease, border-color var(--step) ease,
              background var(--step) ease;
}

.mode:hover {
  color: var(--text);
  border-color: var(--line-hover);
}

/* The chosen circuit is filled, the same language as the run button. */
.mode[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 600;
}

/* ---- preset chips --------------------------------------------------- */

.presets-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}

.presets-label {
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

.presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.chip {
  padding: var(--s1) var(--s2);
  background: none;
  border: var(--hairline-strong);
  border-radius: var(--radius);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  cursor: pointer;
  transition: color var(--step) ease, border-color var(--step) ease;
}

.chip:hover {
  color: var(--text);
  border-color: var(--line-hover);
}

.chip:active {
  transform: translateY(1px);
}

/* ---- form ----------------------------------------------------------- */

.field + .field {
  margin-top: var(--s3);
}

.field label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s1);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

/* The live engineering rendering of whatever is typed. */
.field-echo {
  font-family: var(--mono);
  color: var(--accent);
  letter-spacing: var(--ls-small);
  text-transform: none;
}

.input-shell {
  position: relative;
  display: flex;
  align-items: center;
}

.input-shell input {
  width: 100%;
  min-width: 0;
  height: var(--control-height);
  background: var(--ink);
  border: var(--hairline-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  padding: 0 var(--s6) 0 var(--s3);
  transition: border-color var(--step) ease;
}

.input-shell input:hover {
  border-color: var(--line-hover);
}

/* The global :focus-visible ring already applies here; a local one would
   reintroduce the offset-0 fusion this retheme just removed. */
.input-shell input:focus {
  border-color: var(--accent);
}

.field.is-invalid .input-shell input {
  border-color: var(--err);
}

/* Native spinners fight the monospace alignment; arrow keys replace them. */
.input-shell input::-webkit-outer-spin-button,
.input-shell input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-shell input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.unit {
  position: absolute;
  right: var(--s3);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t-small);
  line-height: var(--lh-small);
  pointer-events: none;
}

.field-error {
  margin: var(--s1) 0 0;
  color: var(--err);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-small);
}

/* ---- the netlist viewer ---------------------------------------------- */

.netlist-toggle {
  margin-top: var(--s3);
}

/* The deck itself: the one thing on the page that IS the simulation input. */
.netlist-pre {
  margin: var(--s2) 0 0;
  padding: var(--s3);
  max-height: 280px;
  overflow: auto;
  background: var(--ink);
  border: var(--hairline);
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  white-space: pre;
}

/* ---- run button ------------------------------------------------------ */

.run {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--control-height);
  height: auto;
  margin-top: var(--s5);
  padding: var(--s2) var(--s4);
  text-align: center;
  background: var(--accent);
  color: var(--ink);
  border: var(--hairline-w) solid var(--accent);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-caps);
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--step) ease, border-color var(--step) ease;
}

.run:hover:enabled {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.run:active:enabled {
  transform: translateY(1px);
}

.run:disabled {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--muted);
  cursor: default;
}

.run-dots {
  display: inline-flex;
  align-items: center;
  gap: var(--dot);
  margin-left: var(--s2);
}

/* Circular on purpose. Zero radius governs boxes and surfaces, not these. */
.run-dots i {
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: currentColor;
  animation: dot-pulse 900ms ease-in-out infinite;
}

.run-dots i:nth-child(2) {
  animation-delay: 150ms;
}

.run-dots i:nth-child(3) {
  animation-delay: 300ms;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

.hint {
  margin: var(--s3) 0 0;
  color: var(--muted);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-small);
}

/* ---- the ask-for-a-design panel --------------------------------------- */

.advise-panel {
  margin-bottom: var(--s5);
}

/* The published page shows the request rather than a box that cannot send
   it. Quoted like a specification, because that is what it is. */
.advise-example {
  margin: var(--s4) 0;
  padding-left: var(--s4);
  border-left: var(--stroke) solid var(--accent);
}

.advise-example blockquote {
  margin: 0 0 var(--s2);
  color: var(--text);
  font-size: var(--t-section);
  line-height: var(--lh-section);
  text-wrap: balance;
}

.advise-example figcaption {
  margin: 0;
  color: var(--muted);
  font-size: var(--t-small);
  line-height: var(--lh-small);
}

.advise-input {
  width: 100%;
  min-width: 0;
  background: var(--ink);
  border: var(--hairline-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-small);
  line-height: var(--lh-small);
  padding: var(--s2) var(--s3);
  resize: vertical;
}

.advise-input:focus {
  border-color: var(--accent);
}

.advise-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s2);
}

.advise-send {
  margin-top: 0;
  width: auto;
  flex: 1 1 auto;
}

.advise-provider {
  height: var(--control-height);
  background: var(--ink);
  border: var(--hairline-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--t-label);
  padding: 0 var(--s2);
}

/* The conversation. Newest at the bottom, scrolls on its own. */
.advise-log {
  max-height: 340px;
  overflow-y: auto;
  margin-bottom: var(--s3);
  padding: var(--s3);
  border: var(--hairline);
  background: var(--ink);
}

.advise-msg {
  margin-bottom: var(--s3);
}

.advise-msg:last-child {
  margin-bottom: 0;
}

.advise-role {
  display: block;
  margin-bottom: var(--s1);
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

.advise-text {
  margin: 0;
  font-size: var(--t-small);
  line-height: var(--lh-small);
}

.advise-msg.is-question {
  padding-left: var(--s3);
  border-left: var(--stroke) solid var(--accent);
}

.advise-msg.is-error .advise-text {
  color: var(--err);
}

/* One tool result: what ran, what it measured, and a way to load it. */
.advise-card {
  padding: var(--s2) var(--s3);
  border: var(--hairline);
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
}

.advise-card .card-title {
  color: var(--accent);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.advise-card.is-failed .card-title {
  color: var(--err);
}

.advise-card .card-pairs {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s1) var(--s3);
  margin-top: var(--s1);
}

.advise-card .card-pairs .k {
  color: var(--muted);
}

.advise-card .card-pairs .v {
  font-variant-numeric: tabular-nums;
}

.advise-card .chip {
  margin-top: var(--s2);
  color: var(--accent);
  border-color: var(--line-strong);
}

/* ---- the design-to-spec panel ---------------------------------------- */

.design-panel {
  margin-top: var(--s5);
}

.design-intro {
  margin: 0 0 var(--s3);
  color: var(--muted);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-small);
}

.design-actions {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-top: var(--s4);
}

/* The secondary path: optimize whatever is in the form right now. */
.design-secondary {
  align-self: flex-start;
}

.design-statusline {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin-bottom: var(--s2);
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

.design-statusline .design-evals {
  color: var(--accent);
  text-transform: none;
}

.design-statusline .chip {
  margin-left: auto;
}

.design-progress {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: var(--hairline);
}

/* One row per goal: label, measured-so-far, target, verdict. */
.design-best {
  display: grid;
  grid-template-columns: max-content 1fr max-content max-content;
  gap: var(--s1) var(--s3);
  align-items: baseline;
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
}

/* Label and value pairs, where a run reports two columns rather than the
   four a design search reports. Both are grids whose cells are direct
   children: wrapping a pair in a div puts them in one cell, on top of
   each other. */
.metric-pairs {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s1) var(--s3);
  align-items: baseline;
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
}

.goal-label {
  color: var(--muted);
  letter-spacing: var(--ls-small);
}

.goal-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.design-best .goal-target {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.design-best .goal-mark {
  color: var(--err);
}

.design-best .goal-mark.is-met {
  color: var(--ok);
}

.design-reason {
  margin: var(--s3) 0 0;
  color: var(--muted);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-small);
}

.design-apply {
  margin-top: var(--s3);
  color: var(--accent);
  border-color: var(--line-strong);
}

/* ---- the robustness panel --------------------------------------------- */

.robust-panel {
  margin-top: var(--s5);
}

/* Condition rows and the summary, in one scrolling mono grid. */
.robust-table {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
}

.robust-table table {
  border-collapse: collapse;
  min-width: 100%;
}

.robust-table th {
  text-align: left;
  padding: var(--s1) var(--s3) var(--s1) 0;
  border-bottom: var(--hairline);
  color: var(--muted);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 400;
  white-space: nowrap;
}

.robust-table td {
  padding: var(--s1) var(--s3) var(--s1) 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.robust-table tr.is-summary td {
  border-top: var(--hairline);
  color: var(--accent);
}

.robust-table td.is-bad {
  color: var(--err);
}

/* ---- the analysis section ------------------------------------------- */

/* The four deeper analyses, one at a time, across the full width. They are
   not part of setting a circuit up, so they sit below the form that does,
   and each one that draws something keeps its plot beside its numbers. */
.analysis {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: var(--hairline);
  scroll-margin-top: calc(var(--s6) + var(--s4));
}

.analysis-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s4);
}

.analysis-tab {
  padding: var(--s2) var(--s3);
  background: none;
  border: var(--hairline-strong);
  border-radius: var(--radius);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--step) ease, border-color var(--step) ease,
              background var(--step) ease;
}

.analysis-tab:hover {
  color: var(--text);
  border-color: var(--line-hover);
}

.analysis-tab[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 600;
}

/* A pane with a plot puts the controls beside it rather than above it, so
   the numbers and the picture they came from are read together. */
.analysis-pane {
  display: grid;
  grid-template-columns: minmax(var(--col-min), var(--col-max)) 1fr;
  gap: var(--s5);
  align-items: start;
}

/* A pane whose whole content is the panel gets the whole width: a
   datasheet, a design search and their tables have no figure column to
   share with, and squeezing them into a form's width wasted the page.
   The tables want the room; the prose inside stays on its own measure. */
#pane-datasheet,
#pane-design {
  grid-template-columns: minmax(0, 1fr);
}

#pane-datasheet .panel,
#pane-design .panel {
  max-width: 74rem;
}

#pane-datasheet .design-intro,
#pane-design .design-intro {
  max-width: 78ch;
}

/* The panes that do carry a figure keep two columns, but the panel side
   breathes instead of being pinched to the form's width. */
#pane-step,
#pane-sheet,
#pane-layout,
#pane-robust {
  grid-template-columns: minmax(var(--col-min), 460px) 1fr;
}

.analysis-pane > * {
  min-width: 0;
}

.analysis-pane .panel {
  margin-top: 0;
}

/* Design and robustness draw nothing to put beside their controls, so they
   are single column. The corner table earns the full width; a column of
   single-number fields does not, so that one keeps a form's measure. */
#pane-design,
#pane-robust {
  grid-template-columns: 1fr;
}

/* ---- the floorplan ---------------------------------------------------- */

/* Devices to scale on silicon. The bounding box is the one whose area was
   reported, so it is drawn as a frame rather than implied. */
.figure svg .fp-bounds {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

/* The n-well the p-channel devices sit in, behind them. */
.figure svg .fp-well {
  fill: var(--fp-well);
  stroke: var(--line-strong);
  stroke-width: 1;
}

.figure svg .fp-device.is-pfet {
  fill: var(--fp-device-p);
}

.figure svg .fp-device {
  fill: var(--fp-device);
  stroke: var(--accent);
  stroke-width: 1;
}

.figure svg .fp-label {
  fill: var(--text);
  font-family: var(--mono);
  font-size: 10px;
}

.figure svg .fp-scale {
  stroke: var(--fig-axis);
  stroke-width: 1;
}

/* ---- the paper figures ----------------------------------------------- */

.figure {
  margin: 0;
  background: var(--ink);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: var(--s4) var(--s4) var(--s3);
}

/* Complex schematics scroll sideways instead of shrinking away. */
.figure-scroll {
  position: relative;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

/* ---- bias annotations: hover a device, read its operating point ------- */

#schematic.bias-armed g[data-device] {
  cursor: help;
}

#schematic.bias-armed g[data-device]:hover .sch-stroke {
  stroke: var(--accent);
}

.bias-tip {
  position: absolute;
  z-index: 4;
  min-width: 148px;
  padding: var(--s2) var(--s3);
  background: var(--panel);
  border: var(--hairline-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  pointer-events: none;
}

.bias-tip strong {
  color: var(--accent);
  font-weight: 600;
}

.bias-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s1) var(--s2);
  margin-top: var(--s1);
}

.bias-grid .k {
  color: var(--muted);
}

.bias-grid .v {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bias-grid .v.is-ok { color: var(--ok); }
.bias-grid .v.is-thin { color: var(--accent); }
.bias-grid .v.is-bad { color: var(--err); }

.figure-scroll svg {
  display: block;
  margin: 0 auto;
}

.figure + .figure {
  margin-top: var(--s3);
}

.figure svg {
  display: block;
  width: 100%;
  height: auto;
}

.figure figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s3);
  padding-top: var(--s2);
  border-top: var(--hairline);
  color: var(--muted);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-small);
}

.caption-state {
  color: var(--muted);
}

/* A run in flight dims the stale reading instead of blanking it. */
.is-loading {
  opacity: 0.6;
  transition: opacity var(--step) ease;
}

/* ---- schematic ink ---------------------------------------------------- */

.figure svg .sch-stroke {
  fill: none;
  stroke: var(--wire);
  stroke-width: 1.75;
}

/* Node dots carry the accent: they mark where a measurement lives. */
.figure svg .sch-fill {
  fill: var(--accent);
  stroke: none;
}

.figure svg .sch-text {
  fill: var(--muted);
  stroke: none;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-small);
}

.figure svg .sch-text.is-strong {
  fill: var(--text);
  font-weight: 600;
}

/* Net names are part of the measurement story, so they share the accent. */
.figure svg .sch-text.is-node {
  fill: var(--accent);
  font-weight: 600;
}

/* Component values crossfade as they change rather than snapping. */
.figure svg .sch-text.is-value {
  animation: value-fade 100ms ease-out;
}

@keyframes value-fade {
  from { opacity: 0.25; }
  to { opacity: 1; }
}

/* The measured value beside its node: plain accent text, no box. */
.figure svg .sch-tag-text {
  fill: var(--accent);
  stroke: none;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ---- Bode plot -------------------------------------------------------- */

.figure svg .bode-grid {
  stroke: var(--fig-grid);
  stroke-width: 1;
  fill: none;
}

.figure svg .bode-axis {
  stroke: var(--fig-axis);
  stroke-width: 1;
  fill: none;
}

.figure svg .bode-mag {
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
}

.figure svg .bode-phase {
  stroke: var(--wire);
  stroke-width: 1.5;
  stroke-dasharray: 5 3;
  fill: none;
}

/* The held design's response: present, quiet, unmistakably not live. */
.figure svg .bode-ghost {
  stroke: var(--muted);
  stroke-width: 1.5;
  opacity: 0.45;
  fill: none;
}

.ab-block {
  margin-top: var(--s4);
  border-top: var(--hairline);
  padding-top: var(--s3);
}

.ab-block .chip {
  margin-top: var(--s2);
}

/* Traces draw themselves in once, on arrival. The trace carries
   pathLength="1", so one unit is its whole length whatever that is, and
   the dash pattern below is the same constant for every plot. At rest the
   offset is zero and the single dash covers the line, so a trace that is
   never animated is a solid line rather than a dashed one. */
.figure svg .is-drawing {
  stroke-dasharray: 1;
  animation: trace-draw 240ms ease-out 1;
}

@keyframes trace-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

.figure svg .bode-marker {
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 2 3;
  fill: none;
}

.figure svg .bode-text,
.figure svg .bode-title,
.figure svg .bode-marker-text,
.figure svg .bode-label-mag,
.figure svg .bode-placeholder,
.figure svg .bode-readout-text {
  fill: var(--muted);
  stroke: none;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.figure svg .bode-title {
  font-size: var(--t-label);
  letter-spacing: var(--ls-caps);
  fill: var(--muted);
}

.figure svg .bode-marker-text,
.figure svg .bode-label-mag {
  fill: var(--accent);
  font-weight: 600;
}

.figure svg .bode-placeholder {
  fill: var(--muted);
}

/* ---- Bode hover readout ------------------------------------------------ */

.figure svg .bode-hit {
  fill: transparent;
  stroke: none;
}

.figure svg .bode-crosshair {
  stroke: var(--fig-axis);
  stroke-width: 1;
  fill: none;
}

.figure svg .bode-dot-mag {
  fill: var(--accent);
  stroke: var(--ink);
  stroke-width: 1.5;
}

.figure svg .bode-dot-phase {
  fill: var(--wire);
  stroke: var(--ink);
  stroke-width: 1.5;
}

.figure svg .bode-tip-box {
  fill: var(--panel);
  stroke: var(--line-strong);
  stroke-width: 1;
}

/* ---- result strip -------------------------------------------------------- */

.result {
  margin-top: var(--s3);
  padding: var(--s4);
  background: var(--panel);
  border: var(--hairline);
  border-radius: var(--radius);
}

.result-row {
  display: flex;
  align-items: flex-end;
  gap: var(--s5);
  flex-wrap: wrap;
}

.metric-label {
  display: block;
  margin-bottom: var(--s1);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

.metric-primary .metric-value {
  font-family: var(--mono);
  font-size: var(--t-numeral);
  line-height: var(--lh-numeral);
  letter-spacing: var(--ls-numeral);
  font-weight: 600;
}

.metric-check .metric-value {
  font-family: var(--mono);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--muted);
}

.badge {
  display: inline-block;
  font-family: var(--mono);
  margin-left: auto;
  padding: var(--s1) var(--s2);
  border: var(--hairline-w) solid currentColor;
  border-radius: var(--radius);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.badge.is-ok {
  color: var(--ok);
}

.badge.is-warn {
  color: var(--err);
}

.result-note {
  margin: var(--s3) 0 0;
  padding-top: var(--s3);
  border-top: var(--hairline);
  color: var(--err);
  font-size: var(--t-small);
  line-height: var(--lh-small);
}

/* Stat cells share a baseline grid: label row, value row, check row. */
.stat-row {
  display: flex;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: var(--hairline);
}

.stat-row > div {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: var(--s1);
}

.stat-label {
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

.stat-value {
  font-family: var(--mono);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

.stat-check {
  font-family: var(--mono);
  color: var(--muted);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-small);
}

.badge-small {
  margin-left: 0;
  justify-self: start;
}

/* ---- errors -------------------------------------------------------------- */

.error-panel {
  margin-top: var(--s3);
  padding: var(--s3) var(--s4);
  border: var(--hairline-w) solid var(--err);
  border-left-width: var(--s1);
  border-radius: var(--radius);
  background: var(--err-wash);
  color: var(--text);
}

.error-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin: 0 0 var(--s1);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--err);
}

.error-dismiss {
  color: var(--muted);
  font-size: var(--t-label);
  letter-spacing: var(--ls-small);
  text-transform: none;
  font-weight: 400;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
}

.error-dismiss:hover {
  color: var(--text);
}

/* Raw ngspice stderr lands here. Mono is functional: the columns align. */
.error-panel p {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-small);
  line-height: var(--lh-small);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---- prose ---------------------------------------------------------------- */

.prose {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  max-width: 84ch;
}

.prose h2 {
  margin: 0 0 var(--s2);
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-caps);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
}

.prose p {
  margin: 0 0 var(--s3);
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose a,
.foot a,
.entry a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: var(--hairline-w) solid var(--accent-underline);
  transition: color var(--step) ease;
}

.prose a:hover,
.foot a:hover,
.entry a:hover {
  color: var(--accent-hover);
}

.section + .section {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: var(--hairline);
}

/* ---- roadmap ---------------------------------------------------------------- */

.roadmap {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: var(--t-small);
  line-height: var(--lh-small);
}

.roadmap li {
  display: flex;
  gap: var(--s2);
  padding: var(--s1) 0;
  color: var(--muted);
}

.roadmap .ver {
  color: var(--text);
  min-width: 3.4em;
}

.roadmap li.done,
.roadmap li.done .mark,
.roadmap li.done .ver {
  color: var(--accent);
}

.roadmap li.done span:last-child {
  color: var(--text);
}

/* ---- user manual --------------------------------------------------------------- */

/* Term on the left, explanation on the right. Collapses to one column when
   there is not enough width to keep the two readable side by side. */
.manual-list {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(7em, max-content) 1fr;
  gap: var(--s2) var(--s4);
  align-items: baseline;
}

.manual-list dt {
  font-family: var(--mono);
  font-size: var(--t-small);
  line-height: var(--lh-small);
  color: var(--accent);
}

.manual-list dd {
  margin: 0;
  font-size: var(--t-small);
  line-height: var(--lh-small);
}

.prose code {
  padding: 0 var(--s1);
  border: var(--hairline);
  font-family: var(--mono);
  font-size: var(--t-label);
  color: var(--text);
}

.prose strong {
  color: var(--text);
  font-weight: 600;
}

/* ---- changelog ---------------------------------------------------------------- */

.entry {
  padding: var(--s5) 0;
  border-top: var(--hairline);
}

.entry:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.entry-head {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin-bottom: var(--s2);
}

/* An h2 rather than a span: thirty-six releases under one h1 gave a
   screen reader no way to move between them, and a version number is
   exactly what each entry is called. Its own margins are reset because a
   heading brings them and this sits inside a flex header. */
.entry-version {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-small);
  font-weight: 600;
  color: var(--accent);
}

.entry-date {
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-small);
  color: var(--muted);
}

.entry ul {
  margin: 0;
  padding-left: var(--s4);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

.entry li {
  margin-bottom: var(--s1);
}

.entry li::marker {
  color: var(--muted);
}

/* ---- footer ---------------------------------------------------------------- */

.foot {
  flex-shrink: 0;
  border-top: var(--hairline);
  padding: var(--s3) 0;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}

.foot-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  color: var(--muted);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-small);
}

.foot a {
  color: var(--muted);
  border-bottom-color: transparent;
}


/* ---- narrow ---------------------------------------------------------------- */

@media (max-width: 900px) {
  .sim,
  .analysis-pane {
    grid-template-columns: 1fr;
  }

  /* The pane grids are set on ids above, which outrank the class reset
     here; a phone gets one column, stated at the same strength. */
  #pane-step,
  #pane-sheet,
  #pane-layout,
  #pane-robust,
  #pane-datasheet,
  #pane-design {
    grid-template-columns: 1fr;
  }

  .sim-figure {
    position: static;
  }

  /* The schematic used to be ordered above the controls here, on the
     reasoning that the picture explains the form. On a phone it did the
     opposite: it pushed the static-mode notice to 1493 px and the first
     input to 1726 px, so a visitor scrolled past a drawing to reach both
     the controls and the sentence explaining what this page can do. The
     source order is notice, then controls, then drawing, and that is the
     order a narrow screen gets. Same mistake the hero made at this
     breakpoint, and the same fix. */
}

@media (max-width: 560px) {
  .nav-inner nav {
    flex-wrap: wrap;
    gap: var(--s3);
  }

  .wrap {
    padding: 0 var(--s4);
  }

  .nav-inner {
    flex-wrap: wrap;
    gap: var(--s2);
    padding-top: var(--s2);
    padding-bottom: var(--s2);
  }

  .nav-links {
    gap: var(--s4);
  }

  .hero-title {
    font-size: var(--t-numeral);
  }

  .foot-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s1);
  }

  .manual-list {
    grid-template-columns: 1fr;
    gap: var(--s1) 0;
  }

  .manual-list dd {
    margin-bottom: var(--s2);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    /* Duration alone is not enough: a 0.01ms animation held behind a
       0.24s delay is still a quarter second of the page sitting invisible
       under `backwards`, which is the flash this was meant to remove. */
    animation-delay: 0s !important;
  }

  .run-dots i {
    opacity: 0.7;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ---- verification: verdicts, not measurements ---------------------------
   A rule check and a layout-versus-schematic answer a yes-or-no question,
   so they are shown as answers rather than as two more rows of numbers. */
.verify {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: var(--hairline);
}

.verify-title {
  margin: 0 0 var(--s3);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

.verify-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s2);
}

.verify-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--s3);
  min-width: 0;
}

.verify-mark {
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  padding: var(--s1) var(--s2);
  border: var(--hairline-w) solid currentColor;
  white-space: nowrap;
}

.verify-item.is-pass .verify-mark { color: var(--ok); }
.verify-item.is-fail .verify-mark { color: var(--err); }

.verify-text {
  font-size: var(--t-small);
  line-height: var(--lh-small);
  color: var(--text);
  min-width: 0;
}

.verify-text .verify-what {
  display: block;
  color: var(--muted);
  font-size: var(--t-label);
  line-height: var(--lh-label);
}

.verify-problems {
  margin: var(--s2) 0 0;
  padding: 0 0 0 var(--s4);
  color: var(--err);
  font-size: var(--t-label);
  line-height: var(--lh-label);
}

.verify-note {
  margin: var(--s3) 0 0;
  font-size: var(--t-label);
  line-height: var(--lh-label);
  color: var(--muted);
}

/* ---- the manual's contents ---------------------------------------------
   Nineteen sections in one column is a document you scroll through hunting.
   The groups are the order the tool is actually used in, not the order the
   sections happen to sit in. */
.toc {
  margin: 0 0 var(--s6);
  padding-bottom: var(--s5);
  border-bottom: var(--hairline);
}

.toc-title {
  margin: 0 0 var(--s4);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

.toc-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min), 1fr));
  gap: var(--s5);
}

.toc-group {
  min-width: 0;
}

.toc-group-name {
  margin: 0 0 var(--s2);
  font-size: var(--t-small);
  line-height: var(--lh-small);
  font-weight: 600;
  color: var(--text);
}

.toc-list {
  margin: 0;
  padding-left: var(--s4);
  display: grid;
  gap: var(--s1);
}

.toc-list li {
  font-size: var(--t-small);
  line-height: var(--lh-small);
  color: var(--muted);
}

.toc-list a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: var(--hairline-w) solid transparent;
  transition: color var(--step) ease, border-color var(--step) ease;
}

.toc-list a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent-underline);
}

/* A heading landed on from the contents should not sit under the sticky
   nav bar. */
.prose h2[id] {
  scroll-margin-top: calc(var(--s6) + var(--s5));
}

/* The taps, and the routing above them. Both are in the GDS, so both are
   in the picture: a drawing that leaves out what the file holds is not a
   drawing of that file. */
.figure svg .fp-tap {
  fill: var(--fp-tap);
  stroke: var(--line-strong);
  stroke-width: 0.8;
}

.figure svg .fp-track {
  fill: var(--fp-track);
  stroke: none;
}

.figure svg .fp-stub {
  fill: var(--fp-stub);
  stroke: none;
}

.figure svg .fp-net {
  fill: var(--accent);
  font-family: var(--mono);
  font-size: 9px;
}

/* The passives, drawn beside the devices they stabilise. */
.figure svg .fp-passive {
  fill: rgba(52, 211, 153, 0.14);
  stroke: var(--ok);
  stroke-width: 0.8;
}


/* ---- the hero shows the silicon ----------------------------------------
   Claim on the left, evidence on the right: the folded cascode exactly as
   the tool drew it. The frame is the same hairline every panel wears; the
   art needs no decoration because it is the product. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s6);
  align-items: center;
}

/* The drawing is presented as what it is: a file, in a frame with its
   name on it, the way a layout tool shows a cell. */
.hero-figure {
  margin: 0;
  border: var(--hairline);
  background: var(--panel);
}

.hero-figure-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-bottom: var(--hairline);
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

.hero-figure-head span:first-child {
  color: var(--accent);
}

.hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  padding: var(--s4);
}

.hero-figure figcaption {
  padding: 0 var(--s4) var(--s4);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  color: var(--muted);
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  /* The copy leads at every width. A visitor who lands on a picture
     with no words has to work out what the tool is from a picture. */
  .hero-figure img {
    max-height: 300px;
  }
}

/* ---- the bench: four verdicts at a glance -------------------------------
   The checks live in different panels and run at different times. This
   strip is where their answers land, so the state of the circuit on the
   bench is one look, not a tour. */
.bench {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--s2);
  margin-bottom: var(--s4);
}

.bench-slot {
  border: var(--hairline);
  padding: var(--s2) var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-width: 0;
}

.bench-label {
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

.bench-state {
  font-family: var(--mono);
  font-size: var(--t-small);
  line-height: var(--lh-small);
  color: var(--muted);
}

.bench-slot.is-pass .bench-state { color: var(--ok); }
.bench-slot.is-fail .bench-state { color: var(--err); }
.bench-slot.is-run .bench-state { color: var(--accent); }

.advise-card .chip:hover {
  color: var(--accent-hover);
  border-color: var(--line-hover);
}

/* ---- keys, named as keys ------------------------------------------------ */
kbd {
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  color: var(--text);
  border: var(--hairline-strong);
  border-bottom-width: calc(var(--hairline-w) * 2);
  padding: 0 var(--s1);
  margin: 0 1px;
}

/* ---- a tab that has something to show says so --------------------------- */
.analysis-tab {
  position: relative;
}

.analysis-tab.has-result::after {
  content: "";
  position: absolute;
  top: var(--s1);
  right: var(--s1);
  width: var(--dot);
  height: var(--dot);
  background: var(--ok);
}

.analysis-tab.has-error::after {
  content: "";
  position: absolute;
  top: var(--s1);
  right: var(--s1);
  width: var(--dot);
  height: var(--dot);
  background: var(--err);
}

/* ---- what changed since the last run ------------------------------------
   A neutral fact, in the accent that marks every other measured thing.
   No green or red: whether a bigger number is better depends on which
   number it is, and the page does not pretend to know. */
.delta {
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  color: var(--accent);
  margin-left: var(--s2);
  white-space: nowrap;
}

/* ---- the circuit chips carry a glyph ------------------------------------ */
.modes button svg {
  width: 14px;
  height: 14px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}

.modes button {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

/* ---- elapsed time on anything that takes a while ------------------------ */
.elapsed {
  font-family: var(--mono);
  color: var(--muted);
  margin-left: var(--s2);
}

/* ---- the manual reads beside its contents -------------------------------
   On a wide screen the contents becomes a rail that stays put while the
   sections scroll past, which is what a contents is for. */
@media (min-width: 1100px) {
  .manual-grid {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: var(--s6);
    align-items: start;
  }

  .manual-grid .toc {
    position: sticky;
    top: calc(var(--s6) + var(--s5));
    margin: 0;
    padding: 0;
    border-bottom: none;
    max-height: calc(100vh - var(--s6) * 2);
    overflow-y: auto;
  }

  .manual-grid .toc-groups {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }
}


.design-actions .run {
  margin-top: 0;
}

/* ---- the mentor: triage, blame, the sweep -------------------------------
   Three questions under the design goals, answered by measurement. The
   verdict line is a sentence, not a widget, because that is how a senior
   engineer answers. */
.mentor {
  margin-top: var(--s5);
  border-top: var(--hairline);
  padding-top: var(--s4);
}

.mentor-head {
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--s4) 0 var(--s2);
}

.triage-line {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  padding: var(--s2) var(--s3);
  border-left: calc(var(--hairline-w) * 3) solid var(--muted);
  margin: var(--s3) 0;
}

.triage-line.is-met { border-left-color: var(--ok); }
.triage-line.is-missed { border-left-color: var(--err); }

/* ---- shared measurement tables ------------------------------------------ */
.sheet-table-wrap {
  overflow-x: auto;
  margin: var(--s3) 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.sheet-table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--t-small);
  line-height: var(--lh-small);
}

.sheet-table th {
  text-align: left;
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: normal;
  padding: var(--s1) var(--s3) var(--s1) 0;
  border-bottom: var(--hairline-strong);
}

.sheet-table td {
  padding: var(--s2) var(--s3) var(--s2) 0;
  border-bottom: var(--hairline);
  vertical-align: top;
}

.sheet-table .num {
  font-family: var(--mono);
  white-space: nowrap;
}

.sheet-table .num.is-binding { color: var(--accent); }
.sheet-table .num.is-negative { color: var(--err); }
.sheet-table tr.is-missed td { color: var(--err); }
.sheet-at {
  color: var(--muted);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  white-space: nowrap;
}

.sheet-note {
  font-size: var(--t-label);
  line-height: var(--lh-label);
  color: var(--muted);
  max-width: 70ch;
  margin: var(--s2) 0 var(--s4);
}

.sheet-provenance {
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  color: var(--muted);
  margin: var(--s2) 0 var(--s3);
}

.sheet-links a { color: var(--accent); }

.sheet-verdicts { margin: var(--s3) 0; }

/* ---- the sweep plot ------------------------------------------------------ */
.sweep-line {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1;
}

.sweep-dot { fill: var(--accent); }
.sweep-dot.is-missed { fill: var(--err); }

.sweep-axis {
  fill: var(--muted);
  font-size: 11px;
  font-family: var(--mono);
}

/* ---- the pin row and its sparkline -------------------------------------- */
.pin-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s3);
  flex-wrap: wrap;
}

.pin-note {
  font-size: var(--t-label);
  line-height: var(--lh-label);
  color: var(--muted);
}

.pin-spark {
  height: 20px;
  display: block;
  margin: var(--s3) 0 var(--s2);
}

.spark-ok { fill: var(--ok); opacity: 0.7; }
.spark-bad { fill: var(--err); }
.spark-first { stroke: var(--err); stroke-width: 1.5; }

/* ---- stored datasheets --------------------------------------------------- */
.stored-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: var(--hairline);
  flex-wrap: wrap;
}

.stored-when, .stored-circuit {
  font-family: var(--mono);
  font-size: var(--t-small);
  line-height: var(--lh-small);
}

.stored-met { color: var(--ok); font-size: var(--t-label); }
.stored-missed { color: var(--err); font-size: var(--t-label); }
.stored-open { color: var(--muted); font-size: var(--t-label); }
.stored-print { color: var(--accent); font-size: var(--t-label); }

/* ---- the compare picker -------------------------------------------------- */
.compare-pick {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin: var(--s3) 0;
}

.compare-pick select {
  background: var(--ink);
  color: var(--text);
  border: var(--hairline-strong);
  font: inherit;
  font-size: var(--t-small);
  padding: var(--s1) var(--s2);
  max-width: 100%;
}

.compare-vs {
  font-size: var(--t-label);
  color: var(--muted);
}

.static-warn {
  font-size: var(--t-label);
  line-height: var(--lh-label);
  color: var(--err);
  border-left: calc(var(--hairline-w) * 3) solid currentColor;
  padding-left: var(--s3);
  margin: var(--s3) 0;
}

/* ---- the notebook -------------------------------------------------------- */
.run-row {
  padding: var(--s3) 0;
  border-bottom: var(--hairline);
}

.run-head {
  display: flex;
  gap: var(--s3);
  align-items: baseline;
  flex-wrap: wrap;
}

.run-id {
  font-family: var(--mono);
  font-size: var(--t-small);
}

.run-sims {
  font-size: var(--t-label);
  color: var(--muted);
}

.run-damaged {
  font-size: var(--t-label);
  color: var(--err);
}

.run-facts {
  font-size: var(--t-label);
  line-height: var(--lh-label);
  color: var(--muted);
  margin: var(--s1) 0;
}

.run-results {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin: var(--s1) 0 0;
}

.run-result {
  font-family: var(--mono);
  font-size: var(--t-label);
  border: var(--hairline);
  padding: 0 var(--s2);
}

.run-result.is-met { color: var(--ok); }
.run-result.is-missed { color: var(--err); }

/* ---- the printable datasheet ---------------------------------------------
   Black on white on purpose: this page is for the printer and the PDF,
   the artifact that leaves the bench. On screen it wears paper white
   inside the dark chrome, so what you see is what prints. */
.sheet-wrap { max-width: 880px; }

.sheet-toolbar {
  display: flex;
  gap: var(--s3);
  margin-bottom: var(--s4);
  align-items: center;
}

.sheet-toolbar a { text-decoration: none; }

.printsheet {
  background: #FFFFFF;
  color: #14181F;
  padding: var(--s6) var(--s6);
  border: var(--hairline);
}

.printsheet h1 {
  font-size: var(--t-brand);
  line-height: var(--lh-body);
  margin: 0 0 var(--s1);
}

.printsheet h2 {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  margin: var(--s5) 0 var(--s2);
  border-bottom: 1px solid #C6CDDA;
  padding-bottom: var(--s1);
}

.printsheet-sub {
  font-family: var(--mono);
  font-size: var(--t-small);
  color: #55677F;
  margin: 0;
}

.printsheet-prov {
  font-size: var(--t-label);
  line-height: var(--lh-label);
  color: #55677F;
  border-left: 3px solid #C6CDDA;
  padding-left: var(--s3);
  margin: var(--s3) 0 var(--s4);
  max-width: 70ch;
}

.printsheet .sheet-table th {
  color: #55677F;
  border-bottom-color: #8A94A6;
}

.printsheet .sheet-table td { border-bottom-color: #E3E7EE; }
.printsheet .sheet-note { color: #55677F; }
.printsheet .sheet-at { color: #55677F; }
.printsheet tr.is-missed td { color: #B42318; }
/* The loading hint and any error land inside the white sheet, so they
   take paper colours like their neighbours, not the theme's. */
.printsheet .hint { color: #55677F; }
.printsheet .field-error { color: #B42318; }

/* The review's verdict sentence: the reviewer's first question, first. */
.printsheet-verdict {
  font-weight: 600;
  margin-top: var(--s3);
}
.printsheet-verdict.is-met { color: #047857; }
.printsheet-verdict.is-missed { color: #B42318; }

/* The schematic on the sheet draws in paper ink whatever the screen
   theme is: this figure prints. */
.printsheet-figure {
  margin: var(--s4) 0 var(--s2);
}
.printsheet-figure svg {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto;
}
.printsheet-figure svg .sch-stroke {
  fill: none;
  stroke: #45526B;
  stroke-width: 1.75;
}
.printsheet-figure svg .sch-fill {
  fill: #0E7490;
  stroke: none;
}
.printsheet-figure svg .sch-text {
  fill: #55677F;
  stroke: none;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.printsheet-figure svg .sch-tag-text {
  fill: #0E7490;
  stroke: none;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.printsheet-foot {
  font-size: var(--t-label);
  line-height: var(--lh-label);
  color: #55677F;
  margin-top: var(--s5);
  border-top: 1px solid #C6CDDA;
  padding-top: var(--s3);
}

@media print {
  .no-print { display: none !important; }
  body.print-page { background: #FFFFFF; }
  .page { padding: 0; }
  .sheet-wrap { max-width: none; }
  .printsheet { border: none; padding: 0; }

  /* Every page prints as paper: the light palette's tokens, dark ink on
     white, whatever the screen theme was. These values mirror the
     :root[data-theme="light"] block below; a change there belongs here
     too. Paper gets a white ground rather than the light theme's grey. */
  :root {
    --ink: #FFFFFF;
    --panel: #FFFFFF;
    --line: #D9DFE8;
    --line-strong: #74809A;
    --line-hover: #45526B;
    --text: #14181F;
    --muted: #55677F;
    --accent: #0E7490;
    --accent-hover: #155E75;
    --accent-underline: rgba(14, 116, 144, 0.4);
    --wire: #45526B;
    --fig-grid: rgba(20, 24, 31, 0.07);
    --fig-axis: rgba(20, 24, 31, 0.4);
    --ok: #047857;
    --err: #B91C1C;
    --err-wash: rgba(185, 28, 28, 0.06);
    --fp-well: rgba(69, 82, 107, 0.12);
    --fp-device: rgba(14, 116, 144, 0.18);
    --fp-device-p: rgba(14, 116, 144, 0.32);
    --fp-tap: rgba(69, 82, 107, 0.3);
    --fp-track: rgba(14, 116, 144, 0.6);
    --fp-stub: rgba(14, 116, 144, 0.3);
  }
}

/* ---- small shared bits --------------------------------------------------- */
.blame-out, .autopsy-out, .compare-out { margin-top: var(--s3); }

.charact-doc {
  margin-top: var(--s4);
  border-top: var(--hairline);
  padding-top: var(--s3);
}

.charact-stored, .charact-compare, .charact-pins {
  margin-top: var(--s5);
  border-top: var(--hairline);
  padding-top: var(--s3);
}


/* ---- light mode ----------------------------------------------------------
   The dark bench is the default and the identity; light mode is the same
   instrument in a bright lab. Every colour on the site comes off these
   tokens, so the whole page follows. The printable datasheet is already
   paper and ignores the toggle on purpose. */
:root[data-theme="light"] {
  --ink: #F2F4F8;
  --panel: #FFFFFF;
  --line: #D9DFE8;
  --line-strong: #74809A;
  --line-hover: #45526B;
  --text: #14181F;
  --muted: #55677F;
  --accent: #0E7490;
  --accent-hover: #155E75;
  --accent-underline: rgba(14, 116, 144, 0.4);
  --wire: #45526B;
  --fig-grid: rgba(20, 24, 31, 0.07);
  --fig-axis: rgba(20, 24, 31, 0.4);
  --ok: #047857;
  --err: #B91C1C;
  --err-wash: rgba(185, 28, 28, 0.06);
  --fp-well: rgba(69, 82, 107, 0.12);
  --fp-device: rgba(14, 116, 144, 0.18);
  --fp-device-p: rgba(14, 116, 144, 0.32);
  --fp-tap: rgba(69, 82, 107, 0.3);
  --fp-track: rgba(14, 116, 144, 0.6);
  --fp-stub: rgba(14, 116, 144, 0.3);
}

/* Every schematic and plot draws with the tokens, so they follow the
   theme on their own. The hero art has its dark ground baked into the
   file; it stays a framed picture of silicon in either mode. */
.theme-toggle {
  background: none;
  border: var(--hairline-strong);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: var(--s1) var(--s2);
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--text);
  border-color: var(--line-hover);
}