/* ---------------------------------------------------------------------
   Material's primary sidebar container sits at height:0 (sticky,
   top:2.4rem) and lets its .md-sidebar__scrollwrap child overflow
   visually below it — that's how the "pinned nav that scrolls with the
   page" effect normally works. Nothing caps how far that overflow is
   allowed to extend, though, so on pages where the nav tree is taller
   than the main content column, it bleeds down past the page and gets
   painted over by the prev/next footer, hiding the bottom nav entries.

   Fix: give the sidebar a real, viewport-relative height so its own
   sticky-release point lines up with the end of the content column
   (i.e. the top of the footer) instead of the unbounded height:0
   trick. The sidebar also contains our download button (inserted by
   download.js) above the scrollwrap, so it's made a column flexbox:
   the button keeps its natural size and the scrollwrap flexes to fill
   whatever's left and scrolls internally (min-height:0 is required
   for a flex child's overflow to actually clip/scroll instead of
   forcing the flex box to grow). Net effect: the nav pane always ends
   at or above the footer, on every page, regardless of how tall the
   nav tree or the download button is. Scoped to Material's own
   desktop breakpoint (76.25em) so the mobile drawer sidebar, which is
   already correctly height-bound, is untouched.
   ------------------------------------------------------------------- */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    height: calc(100vh - 2.4rem);
    display: flex;
    flex-direction: column;
  }

  .md-sidebar--primary .qed-download-button {
    flex: 0 0 auto;
  }

  .md-sidebar--primary .md-sidebar__scrollwrap {
    flex: 1 1 auto;
    min-height: 0;
  }
}

.qed-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.6rem 0.8rem 1rem;
  padding: 0.5rem 0.8rem;
  border-radius: 0.2rem;
  background-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color) !important;
  font-weight: 600;
  font-size: 0.7rem;
  text-decoration: none !important;
  transition: opacity 0.1s;
}

.qed-download-button:hover {
  opacity: 0.85;
}

.qed-download-button--disabled {
  background-color: var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color--light) !important;
  cursor: default;
  pointer-events: none;
}

/* Bloch sphere demo (docs/01-foundations/what-is-quantum-computing.md) */
.qed-demo {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.3rem;
  padding: 1rem 1.2rem;
  margin: 1.2rem 0;
}

.qed-demo__layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
}

.qed-demo__controls {
  flex: 1 1 220px;
  min-width: 220px;
}

.qed-demo__controls label {
  display: block;
  font-size: 0.75rem;
  margin-top: 0.6rem;
}

.qed-demo__controls input[type="range"] {
  width: 100%;
}

.qed-demo__state {
  margin-top: 0.8rem;
  font-size: 0.85rem;
}

.qed-demo canvas {
  background: var(--md-code-bg-color);
  border-radius: 0.3rem;
}

/* ---------------------------------------------------------------------
   Module 07 qubit-visualization primitives — shared across the QEC demos
   (Physical vs Logical Qubits, and later Repetition Codes / Syndrome
   Measurement). Color coding is fixed by convention:
     blue = logical information, gray = physical qubit (nominal),
     red/orange = error, green = protected/recovered.
   ------------------------------------------------------------------- */
:root {
  --qed-color-logical: #5c6bc0;
  --qed-color-physical: #9e9e9e;
  --qed-color-error: #e57373;
  --qed-color-protected: #66bb6a;
  --qed-color-noise: #ffa726;
  --qed-color-syndrome: #ab47bc;
  --qed-color-telemetry: #26a69a;
}

.qed-qubit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-width: 4.5rem;
  padding: 0.7rem 0.5rem;
  border-radius: 0.4rem;
  border: 2px solid var(--qed-color-physical);
  background: var(--md-code-bg-color);
  font-family: var(--md-code-font);
  font-size: 0.75rem;
  transition: border-color 0.25s, background-color 0.25s, transform 0.25s;
}

button.qed-qubit {
  cursor: pointer;
  font: inherit;
  color: inherit;
}

button.qed-qubit:disabled {
  cursor: default;
  opacity: 0.55;
}

button.qed-qubit:not(:disabled):hover {
  transform: translateY(-2px);
}

.qed-qubit__label {
  font-weight: 700;
}

.qed-qubit__state {
  opacity: 0.8;
}

.qed-qubit--logical {
  border-color: var(--qed-color-logical);
  background: color-mix(in srgb, var(--qed-color-logical) 12%, var(--md-code-bg-color));
}

.qed-qubit--physical {
  border-color: var(--qed-color-physical);
}

.qed-qubit--error {
  border-color: var(--qed-color-error);
  background: color-mix(in srgb, var(--qed-color-error) 18%, var(--md-code-bg-color));
}

.qed-qubit--protected {
  border-color: var(--qed-color-protected);
  background: color-mix(in srgb, var(--qed-color-protected) 14%, var(--md-code-bg-color));
}

/* Calibration/telemetry info (Hardware-Aware QEC) — a category
   distinct from physical qubits, syndrome/check info, and decoder
   inference. Dashed border doubles as a non-color cue for "measured
   or estimated, not exact" so the distinction never relies on color
   alone. */
.qed-qubit--telemetry {
  border-color: var(--qed-color-telemetry);
  border-style: dashed;
  background: color-mix(in srgb, var(--qed-color-telemetry) 12%, var(--md-code-bg-color));
}

.qed-pill--telemetry {
  border-color: var(--qed-color-telemetry);
  border-style: dashed;
  background: color-mix(in srgb, var(--qed-color-telemetry) 10%, var(--md-code-bg-color));
}

.qed-button {
  display: inline-block;
  margin: 0.3rem 0.5rem 0.3rem 0;
  padding: 0.45rem 1rem;
  border: none;
  border-radius: 0.2rem;
  background-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  font-weight: 600;
  font-size: 0.75rem;
  cursor: pointer;
}

.qed-button:disabled {
  background-color: var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color--light);
  cursor: default;
}

.qed-button--secondary {
  background-color: transparent;
  color: var(--md-primary-fg-color);
  border: 1px solid var(--md-primary-fg-color);
}

.qed-button--secondary:disabled {
  color: var(--md-default-fg-color--light);
  border-color: var(--md-default-fg-color--lightest);
}

.qed-button--active {
  background-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
}

/* Encode demo (docs/07-error-correction/physical-vs-logical-qubits.md) */
.qed-encode-demo__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0;
}

.qed-encode-demo__arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
  line-height: 1.1;
  min-height: 2.2rem;
  justify-content: center;
}

.qed-encode-demo__physical-row {
  display: flex;
  gap: 0.8rem;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.35s, transform 0.35s;
}

.qed-encode-demo__physical-row.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.qed-encode-demo__controls {
  margin-top: 1rem;
  text-align: center;
}

.qed-encode-demo__hint {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
}

.qed-encode-demo__prompt {
  margin-top: 1rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--qed-color-error);
  background: color-mix(in srgb, var(--qed-color-error) 10%, transparent);
  border-radius: 0.2rem;
  font-size: 0.85rem;
}

.qed-comparison-table th:first-child,
.qed-comparison-table td:first-child {
  color: var(--qed-color-physical);
}

.qed-comparison-table th:last-child,
.qed-comparison-table td:last-child {
  color: var(--qed-color-logical);
}

/* ---------------------------------------------------------------------
   Errors and Noise (docs/07-error-correction/errors-and-noise.md) —
   reuses the qed-qubit / qed-button primitives above, plus a small
   pill component for the value/phase readouts used in the X/Z/Y demos.
   ------------------------------------------------------------------- */
.qed-noise-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.qed-noise-flow__arrow {
  font-size: 0.7rem;
  color: var(--qed-color-noise);
  line-height: 1.1;
  text-align: center;
}

.qed-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--qed-color-logical);
  background: color-mix(in srgb, var(--qed-color-logical) 10%, var(--md-code-bg-color));
  font-family: var(--md-code-font);
  font-size: 0.8rem;
  margin: 0.2rem 0.3rem 0.2rem 0;
}

.qed-pill__label {
  opacity: 0.7;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.qed-error-demo__readout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.6rem 0;
}

.qed-error-demo__feedback {
  margin-top: 0.7rem;
  padding: 0.6rem 0.8rem;
  border-radius: 0.2rem;
  border-left: 3px solid var(--qed-color-physical);
  font-size: 0.85rem;
}

.qed-error-demo__feedback--correct {
  border-left-color: var(--qed-color-protected);
  background: color-mix(in srgb, var(--qed-color-protected) 10%, transparent);
}

.qed-error-demo__feedback--incorrect {
  border-left-color: var(--qed-color-error);
  background: color-mix(in srgb, var(--qed-color-error) 10%, transparent);
}

/* ---------------------------------------------------------------------
   Repetition Codes (docs/07-error-correction/repetition-codes.md) —
   parity-check row and code-capability list, reusing qed-qubit / qed-
   button / qed-error-demo__feedback from the sections above.
   ------------------------------------------------------------------- */
.qed-encoded-group {
  border: 1px dashed var(--qed-color-logical);
  border-radius: 0.5rem;
  padding: 0.8rem;
  display: inline-flex;
}

.qed-parity-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin: 0.8rem 0;
}

.qed-parity-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 3rem;
}

.qed-parity-link::before {
  content: "";
  width: 100%;
  border-top: 2px solid var(--qed-color-physical);
}

.qed-parity-link__label {
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
}

.qed-parity-link__value {
  font-family: var(--md-code-font);
  font-weight: 700;
  font-size: 0.85rem;
}

.qed-parity-link__value--agree {
  color: var(--qed-color-protected);
}

.qed-parity-link__value--disagree {
  color: var(--qed-color-error);
}

.qed-cap-yes,
.qed-cap-no {
  font-weight: 700;
  margin-right: 0.3rem;
}

.qed-cap-yes {
  color: var(--qed-color-protected);
}

.qed-cap-no {
  color: var(--qed-color-error);
}

/* ---------------------------------------------------------------------
   Syndrome Measurement (docs/07-error-correction/encoding-and-syndrome-
   measurement.md) — syndrome/check badges get their own purple color so
   they read as visually distinct from a physical error (red) or a
   correction (green), per the module's visual language.
   ------------------------------------------------------------------- */
.qed-syndrome-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 0.6rem 0;
}

.qed-syndrome-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 4rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.4rem;
  border: 2px solid var(--qed-color-syndrome);
  background: color-mix(in srgb, var(--qed-color-syndrome) 12%, var(--md-code-bg-color));
  font-family: var(--md-code-font);
}

.qed-syndrome-badge__label {
  font-size: 0.7rem;
  opacity: 0.75;
}

.qed-syndrome-badge__symbol {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--qed-color-syndrome);
}

.qed-syndrome-badge__value {
  font-size: 0.8rem;
}

.qed-flow-step {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 8rem;
  padding: 0.5rem 0.8rem;
  border-radius: 0.4rem;
  border: 2px solid var(--qed-color-physical);
  font-size: 0.8rem;
  text-align: center;
}

.qed-flow-step__label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.75;
}

.qed-flow-step--error {
  border-color: var(--qed-color-error);
}

.qed-flow-step--syndrome {
  border-color: var(--qed-color-syndrome);
}

.qed-flow-step--inference {
  border-color: var(--qed-color-protected);
}

.qed-compare-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
  margin: 0.8rem 0;
}

/* ---------------------------------------------------------------------
   Circuit-level view (docs/07-error-correction/encoding-and-syndrome-
   measurement.md, "Explore the Circuit"). Kept as its own small SVG
   component rather than a general-purpose circuit renderer — it draws
   exactly one fixed topology (2 checks / 2 ancillas), which is all this
   page needs.
   ------------------------------------------------------------------- */
.qed-circuit-svg {
  max-width: 100%;
  height: auto;
}

.qed-circuit-wire {
  stroke: var(--qed-color-physical);
  stroke-width: 1.5;
}

.qed-circuit-label {
  font-size: 11px;
  fill: var(--md-default-fg-color);
  font-family: var(--md-code-font);
}

.qed-circuit-connector {
  stroke: var(--qed-color-physical);
  stroke-width: 1.5;
}

.qed-circuit-control {
  fill: var(--qed-color-physical);
}

.qed-circuit-target {
  fill: var(--md-code-bg-color);
  stroke: var(--qed-color-physical);
  stroke-width: 1.5;
}

.qed-circuit-target-cross {
  stroke: var(--qed-color-physical);
  stroke-width: 1.5;
}

/* Single-qubit rotation gate box (e.g. RY(theta) in the VQE ansatz
   circuit) — distinct from the CNOT control/target glyphs above, which
   only make sense for two-qubit gates. */
.qed-circuit-gate-box {
  fill: var(--md-code-bg-color);
  stroke: var(--qed-color-logical);
  stroke-width: 1.5;
}

/* Mixer-layer variant (docs/06-algorithms/quantum-approximate-
   optimization-algorithm.md) — dashed + the "noise" color so a mixer
   block (explores/perturbs) reads as visually distinct from a cost
   block (encodes the problem, plain qed-circuit-gate-box). */
.qed-circuit-gate-box--mixer {
  stroke: var(--qed-color-noise);
  stroke-dasharray: 3 2;
}

.qed-circuit-gate.is-active .qed-circuit-control,
.qed-circuit-gate.is-active .qed-circuit-connector,
.qed-circuit-gate.is-active .qed-circuit-target,
.qed-circuit-gate.is-active .qed-circuit-target-cross {
  animation: qed-gate-pulse 0.5s ease;
}

@keyframes qed-gate-pulse {
  0% {
    filter: none;
  }
  50% {
    filter: drop-shadow(0 0 4px var(--qed-color-syndrome));
    stroke: var(--qed-color-syndrome);
  }
  100% {
    filter: none;
  }
}

.qed-circuit-measure-box {
  fill: var(--md-code-bg-color);
  stroke: var(--qed-color-physical);
  stroke-width: 1.5;
}

.qed-circuit-measure-box.is-revealed {
  stroke: var(--qed-color-syndrome);
}

.qed-circuit-measure-outcome {
  font-size: 13px;
  font-weight: 700;
  fill: var(--qed-color-syndrome);
  text-anchor: middle;
}

.qed-circuit-legend {
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
  margin-top: 0.6rem;
}

.qed-circuit-legend li {
  margin: 0.15rem 0;
}

.qed-details {
  border: 1px solid var(--qed-color-syndrome);
  border-radius: 0.3rem;
  padding: 0.7rem 1rem;
  margin: 1.2rem 0;
}

.qed-details > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--qed-color-syndrome);
}

.qed-details[open] > summary {
  margin-bottom: 0.6rem;
}

/* ---------------------------------------------------------------------
   Stabilizer Codes (docs/07-error-correction/stabilizer-codes.md) —
   a small CSS-grid brace that visually spans whichever physical qubits
   a selected stabilizer acts on, plus a nested-box nesting diagram for
   the code-space visual.
   ------------------------------------------------------------------- */
.qed-stabilizer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 0.4rem 0.6rem;
  max-width: 22rem;
  margin: 1rem auto 0.6rem;
}

.qed-stabilizer-brace {
  grid-row: 1;
  position: relative;
  border-top: 2px solid var(--qed-color-syndrome);
  height: 1.4rem;
  margin: 0 0.4rem;
}

.qed-stabilizer-brace::before,
.qed-stabilizer-brace::after {
  content: "";
  position: absolute;
  top: 0;
  width: 2px;
  height: 0.55rem;
  background: var(--qed-color-syndrome);
}

.qed-stabilizer-brace::before {
  left: 0;
}

.qed-stabilizer-brace::after {
  right: 0;
}

.qed-stabilizer-brace__label {
  position: absolute;
  top: -1.2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--qed-color-syndrome);
  white-space: nowrap;
}

.qed-stabilizer-qubit {
  grid-row: 2;
}

.qed-stabilizer-qubit .qed-qubit__op {
  font-family: var(--md-code-font);
  font-weight: 700;
  color: var(--qed-color-syndrome);
}

.qed-stabilizer-qubit.is-identity {
  opacity: 0.5;
}

.qed-stabilizer-qubit.is-identity .qed-qubit__op {
  color: var(--qed-color-physical);
}

.qed-syndrome-badge.qed-just-changed {
  animation: qed-gate-pulse 0.6s ease;
}

.qed-nested-box {
  border: 2px solid var(--qed-color-physical);
  border-radius: 0.4rem;
  padding: 1.4rem;
  text-align: center;
  position: relative;
  margin: 1rem auto;
  max-width: 22rem;
}

.qed-nested-box__label {
  position: absolute;
  top: 0.4rem;
  left: 0.6rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--md-default-fg-color--light);
}

.qed-nested-box__inner {
  border: 2px solid var(--qed-color-logical);
  border-radius: 0.4rem;
  padding: 0.8rem 1.2rem;
  display: inline-block;
  margin-top: 1rem;
  color: var(--qed-color-logical);
  font-weight: 700;
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------------
   Decoding (docs/07-error-correction/decoding.md) — horizontal
   confidence bars for competing decoder hypotheses. The "winning"
   hypothesis is marked via .is-leading (green); others stay neutral
   gray, per the spec's "distinct neutral color for competing
   hypotheses" requirement.
   ------------------------------------------------------------------- */
.qed-confidence-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.5rem 0;
}

.qed-confidence-row__label {
  flex: 0 0 9rem;
  font-size: 0.8rem;
  font-family: var(--md-code-font);
}

.qed-confidence-bar {
  flex: 1 1 auto;
  height: 1.1rem;
  border-radius: 0.2rem;
  background: var(--md-code-bg-color);
  border: 1px solid var(--qed-color-physical);
  overflow: hidden;
}

.qed-confidence-bar__fill {
  display: block;
  height: 100%;
  background: var(--qed-color-physical);
  transition: width 0.2s ease, background-color 0.2s ease;
}

.qed-confidence-row.is-leading .qed-confidence-bar__fill {
  background: var(--qed-color-protected);
}

.qed-confidence-row__pct {
  flex: 0 0 3.2rem;
  font-family: var(--md-code-font);
  font-size: 0.8rem;
  text-align: right;
}

/* ---------------------------------------------------------------------
   Surface Codes (docs/07-error-correction/surface-codes.md) — a
   data-driven lattice renderer (see the QedSurfaceCode script block on
   that page) reused across several interactives. Data qubits are
   circles; checks are squares distinguished by an X/+ glyph as well as
   color, so check type never relies on color alone.
   ------------------------------------------------------------------- */
.qed-lattice-svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.qed-lattice-link {
  stroke: var(--qed-color-physical);
  stroke-width: 1;
  opacity: 0.5;
}

.qed-lattice-data {
  fill: var(--md-code-bg-color);
  stroke: var(--qed-color-physical);
  stroke-width: 2;
  cursor: pointer;
}

.qed-lattice-data:hover {
  stroke: var(--qed-color-logical);
}

.qed-lattice-data.is-error {
  fill: color-mix(in srgb, var(--qed-color-error) 25%, var(--md-code-bg-color));
  stroke: var(--qed-color-error);
}

.qed-lattice-data.is-selected {
  stroke: var(--qed-color-logical);
  stroke-width: 3;
}

.qed-lattice-data-label {
  font-size: 10px;
  font-weight: 700;
  fill: var(--qed-color-error);
  text-anchor: middle;
  pointer-events: none;
}

.qed-lattice-check {
  fill: var(--md-code-bg-color);
  stroke: var(--qed-color-physical);
  stroke-width: 1.5;
}

.qed-lattice-check.is-fired {
  fill: color-mix(in srgb, var(--qed-color-syndrome) 30%, var(--md-code-bg-color));
  stroke: var(--qed-color-syndrome);
  stroke-width: 2.5;
  animation: qed-gate-pulse 0.6s ease;
}

.qed-lattice-check-glyph {
  font-size: 11px;
  font-weight: 700;
  fill: var(--qed-color-physical);
  text-anchor: middle;
  pointer-events: none;
}

.qed-lattice-check.is-fired + .qed-lattice-check-glyph,
.qed-lattice-check-glyph.is-fired {
  fill: var(--qed-color-syndrome);
}

.qed-lattice-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
  margin-top: 0.6rem;
}

.qed-lattice-legend__swatch {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  vertical-align: middle;
  margin-right: 0.3rem;
  border-radius: 2px;
}

/* ---------------------------------------------------------------------
   Minimum-Weight Perfect Matching (docs/07-error-correction/minimum-
   weight-perfect-matching.md) — a small decoding-graph renderer,
   deliberately visually distinct from the qed-lattice-* components
   (different node/edge styling) so learners never confuse "looking at
   the lattice" with "looking at the decoder's graph".
   ------------------------------------------------------------------- */
.qed-graph-svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.qed-graph-edge {
  stroke: var(--qed-color-physical);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  opacity: 0.6;
  cursor: pointer;
}

.qed-graph-edge:hover {
  opacity: 1;
}

.qed-graph-edge.is-selected {
  stroke: var(--qed-color-protected);
  stroke-width: 3;
  stroke-dasharray: none;
  opacity: 1;
}

.qed-graph-edge.is-mwpm {
  stroke: var(--qed-color-logical);
  stroke-width: 3;
  stroke-dasharray: none;
  opacity: 1;
}

.qed-graph-edge-weight {
  font-size: 11px;
  font-weight: 700;
  fill: var(--md-default-fg-color--light);
  text-anchor: middle;
  pointer-events: none;
}

.qed-graph-node {
  fill: color-mix(in srgb, var(--qed-color-syndrome) 25%, var(--md-code-bg-color));
  stroke: var(--qed-color-syndrome);
  stroke-width: 2.5;
  cursor: pointer;
}

.qed-graph-node:hover {
  stroke: var(--qed-color-logical);
}

.qed-graph-node.is-selected {
  stroke: var(--qed-color-logical);
  stroke-width: 3.5;
}

/* Group-membership variant (docs/06-algorithms/quantum-approximate-
   optimization-algorithm.md, MaxCut "Try It By Hand") — overrides the
   default syndrome-purple fill above with the two group colors, since
   this graph represents a partition, not a decoding graph. */
.qed-graph-node--group-a {
  fill: color-mix(in srgb, var(--qed-color-logical) 25%, var(--md-code-bg-color));
  stroke: var(--qed-color-logical);
}

.qed-graph-node--group-b {
  fill: color-mix(in srgb, var(--qed-color-physical) 25%, var(--md-code-bg-color));
  stroke: var(--qed-color-physical);
}

.qed-graph-node-label {
  font-size: 13px;
  font-weight: 700;
  fill: var(--md-default-fg-color);
  text-anchor: middle;
  pointer-events: none;
}

.qed-graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
  margin-top: 0.6rem;
}

.qed-graph-legend__line {
  display: inline-block;
  width: 1.4rem;
  height: 0;
  border-top-width: 2.5px;
  border-top-style: solid;
  vertical-align: middle;
  margin-right: 0.3rem;
}

/* ---------------------------------------------------------------------
   Lattice Surgery (docs/07-error-correction/lattice-surgery.md) —
   composes two QedSurfaceCode-style patches side by side with a
   mergeable shared boundary (see the QedLatticeSurgery script). Reuses
   the qed-lattice-data / qed-lattice-check styling above for visual
   continuity with Surface Codes; joint (boundary) checks get their own
   glyph (J / ✓) and dashed stroke so "new, temporary check" never
   relies on color alone.
   ------------------------------------------------------------------- */
.qed-surgery-svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.qed-surgery-label {
  font-size: 11px;
  font-weight: 700;
  fill: var(--qed-color-logical);
  text-anchor: middle;
}

.qed-lattice-link--joint {
  stroke: var(--qed-color-syndrome);
  stroke-width: 1.5;
  stroke-dasharray: 3 2;
}

.qed-lattice-check.is-joint {
  fill: color-mix(in srgb, var(--qed-color-syndrome) 22%, var(--md-code-bg-color));
  stroke: var(--qed-color-syndrome);
  stroke-width: 2;
  stroke-dasharray: 2.5 1.5;
}

.qed-lattice-check-glyph.is-joint {
  fill: var(--qed-color-syndrome);
}

.qed-lattice-data.is-boundary {
  stroke-width: 3;
  stroke-dasharray: 2 1.5;
}

.qed-lattice-data.is-physical-view {
  stroke: var(--qed-color-physical);
}

.qed-surgery-logical-blob {
  fill: color-mix(in srgb, var(--qed-color-logical) 10%, var(--md-code-bg-color));
  stroke: var(--qed-color-logical);
  stroke-width: 2;
}

.qed-surgery-logical-label {
  font-size: 12px;
  font-weight: 700;
  fill: var(--qed-color-logical);
  text-anchor: middle;
}

.qed-surgery-steps {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.8rem 0 0.4rem;
  font-size: 0.75rem;
}

.qed-surgery-step {
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color--light);
}

.qed-surgery-step.is-active {
  border-color: var(--qed-color-syndrome);
  color: var(--qed-color-syndrome);
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   Energy-landscape plot (docs/06-algorithms/variational-quantum-
   eigensolver.md, "Explore the Energy Landscape"). A small continuous-
   function line plot — distinct from qed-graph-svg (discrete nodes/
   edges) and qed-circuit-svg (gate diagrams), the first component in
   the repo for plotting E(theta) as theta varies.
   ------------------------------------------------------------------- */
.qed-plot-svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.qed-plot-axis {
  stroke: var(--qed-color-physical);
  stroke-width: 1;
}

.qed-plot-curve {
  fill: none;
  stroke: var(--qed-color-logical);
  stroke-width: 2;
}

.qed-plot-target {
  stroke: var(--qed-color-protected);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.qed-plot-label {
  font-size: 10px;
  fill: var(--md-default-fg-color--light);
  font-family: var(--md-code-font);
}

.qed-plot-point {
  fill: var(--qed-color-syndrome);
  stroke: var(--md-code-bg-color);
  stroke-width: 1.5;
  transition: cx 0.25s ease, cy 0.25s ease, fill 0.25s ease;
}

.qed-plot-point.is-converged {
  fill: var(--qed-color-protected);
}

/* ---------------------------------------------------------------------
   Why QEC? (docs/07-error-correction/why-qec.md) — the intro page's
   conceptual "Protect the Information" demo and learning-journey path.
   Reuses qed-qubit / qed-flow-step; only the pieces below are new.
   Dashed borders (is-dim, flagged = double) are the non-color cues for
   "not happened yet" and "error information found".
   ------------------------------------------------------------------- */
.qed-flow-step.is-dim {
  opacity: 0.45;
  border-style: dashed;
}

.qed-qubit--flagged {
  border-color: var(--qed-color-syndrome);
  border-style: double;
  border-width: 4px;
}

.qed-journey {
  display: grid;
  gap: 1rem;
  margin: 1rem 0;
}

.qed-journey__group {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
  padding: 0.8rem 1rem;
}

.qed-journey__group-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--qed-color-logical);
  margin-bottom: 0.5rem;
}

.md-typeset .qed-journey__steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.md-typeset .qed-journey__steps li {
  margin: 0;
  padding: 0;
}

.md-typeset .qed-journey__steps li + li::before {
  content: "\2193";
  display: block;
  padding: 0.1rem 0 0.1rem 1rem;
  font-size: 0.8rem;
  line-height: 1.2;
  color: var(--md-default-fg-color--light);
}

.md-typeset a.qed-journey__step {
  display: block;
  padding: 0.5rem 0.8rem;
  border-left: 3px solid var(--qed-color-logical);
  border-radius: 0.2rem;
  background: color-mix(in srgb, var(--qed-color-logical) 8%, var(--md-code-bg-color));
  color: inherit;
}

.md-typeset a.qed-journey__step:hover {
  background: color-mix(in srgb, var(--qed-color-logical) 16%, var(--md-code-bg-color));
}

.qed-journey__name {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
}

.qed-journey__sub {
  font-weight: 400;
  font-size: 0.75rem;
  opacity: 0.7;
}

.qed-journey__q {
  display: block;
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
}

/* ---------------------------------------------------------------------
   Glossary (docs/glossary.md, rendered from data/glossary by
   glossary_hook.py; filter behavior in assets/javascripts/glossary.js).
   Entries are plain static HTML; this only styles them. Labels
   ("Definition", "Beginner interpretation", ...) carry the structure, so
   nothing here relies on color alone.
   ------------------------------------------------------------------- */
.qed-gloss-controls {
  z-index: 2;
  margin: 1rem 0;
  padding: 0.7rem 0 0.6rem;
  background: var(--md-default-bg-color);
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

@media screen and (min-width: 60em) {
  .qed-gloss-controls {
    position: sticky;
    top: 2.4rem;
  }
}

.qed-gloss-search-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.qed-gloss-search {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 0.2rem;
  background: var(--md-code-bg-color);
  color: var(--md-default-fg-color);
  font: inherit;
  font-size: 0.8rem;
}

.qed-gloss-search:focus {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 1px;
}

.qed-gloss-count {
  margin: 0.45rem 0 0;
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
}

.qed-gloss-empty {
  font-size: 0.8rem;
  padding: 1rem 0;
}

.md-typeset h2[hidden],
.qed-gloss-entry[hidden],
.qed-gloss-cat[hidden],
.qed-gloss-empty[hidden] {
  display: none;
}

.qed-gloss-cat-desc {
  margin-top: 0;
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
}

.qed-gloss-entry {
  margin: 0.7rem 0;
  padding: 0.7rem 1rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-left: 3px solid var(--qed-color-logical);
  border-radius: 0.2rem;
  scroll-margin-top: 7.5rem;
}

.qed-gloss-entry:has(.qed-gloss-term:target),
.qed-gloss-entry:has(.qed-gloss-alias-anchor:target) {
  background: color-mix(in srgb, var(--qed-color-logical) 10%, transparent);
  border-left-width: 6px;
}

.qed-gloss-alias-anchor {
  display: block;
  height: 0;
  scroll-margin-top: 7.5rem;
}

.md-typeset .qed-gloss-term {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.md-typeset .qed-gloss-entry p {
  margin: 0.25rem 0;
  font-size: 0.78rem;
  padding-left: 8.7rem;
  text-indent: -8.7rem;
}

.qed-gloss-label {
  display: inline-block;
  box-sizing: border-box;
  width: 8.7rem;
  padding-right: 0.5rem;
  text-indent: 0;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--md-default-fg-color--light);
}

@media screen and (max-width: 40em) {
  .md-typeset .qed-gloss-entry p {
    padding-left: 0;
    text-indent: 0;
  }

  .qed-gloss-label {
    display: block;
    width: auto;
  }
}

/* ---------------------------------------------------------------------
   Hybrid-loop takeaway diagram (docs/06-algorithms/variational-quantum-
   eigensolver.md and quantum-approximate-optimization-algorithm.md,
   "Takeaway") — a small flowchart showing the loop as an actual cycle
   (a curved return arrow), with a separate exit arrow to the converged
   result, rather than a straight top-to-bottom stack of boxes.
   ------------------------------------------------------------------- */
.qed-loop-svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.qed-loop-box {
  fill: var(--md-code-bg-color);
  stroke: var(--qed-color-physical);
  stroke-width: 1.5;
}

.qed-loop-box--protected {
  stroke: var(--qed-color-protected);
}

.qed-loop-arrow {
  stroke: var(--qed-color-physical);
  stroke-width: 1.5;
  fill: none;
}

.qed-loop-label {
  font-size: 11px;
  fill: var(--md-default-fg-color);
  font-family: var(--md-code-font);
  text-anchor: middle;
}

.qed-loop-arrowhead-fill {
  fill: var(--qed-color-physical);
}

/* ---------------------------------------------------------------------
   Module 05 software-stack explorer (docs/05-software-stack/, driven by
   docs/assets/javascripts/software-stack.js). Module 05 has no palette of
   its own: the groups are told apart by border style AND a text label, never
   by color alone. Device-reported information reuses the telemetry convention
   (teal, dashed border) because it means the same thing as in Module 07.
     solid border  = Application Layer
     double border = Control Layer
     left bar      = where the groups meet (backend / target description)
     rounded pill  = execution target
   ------------------------------------------------------------------- */
.qed-stack__toolbar {
  margin: 0.4rem 0;
  align-items: center;
}

.qed-stack__progress {
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
}

.qed-stack__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0.8rem 0;
}

@media (min-width: 40em) {
  .qed-stack__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.qed-stack__side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.qed-stack__group {
  border-radius: 0.4rem;
  padding: 0.6rem 0.8rem 0.8rem;
  background: var(--md-code-bg-color);
}

.qed-stack__group-title {
  margin: 0 0 0.3rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.qed-stack__group-blurb {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
}

.qed-stack__group--application {
  border: 2px solid var(--md-default-fg-color--light);
}

.qed-stack__group--control {
  border: 5px double var(--md-default-fg-color--light);
}

.qed-stack__group--meeting {
  border: 1px solid var(--md-default-fg-color--lighter);
  border-left: 6px solid var(--md-default-fg-color--light);
}

.qed-stack__group--target {
  border: 2px solid var(--md-default-fg-color--light);
  border-radius: 1.2rem;
}

.qed-stack__cards,
.qed-stack__catalog ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

[dir] .md-typeset .qed-stack__cards,
[dir] .md-typeset .qed-stack__catalog ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

[dir] .md-typeset .qed-stack__cards li {
  margin: 0.35rem 0;
}

[dir] .md-typeset .qed-stack__catalog li {
  margin: 0.3rem 0;
}

.qed-stack__cards li + li {
  position: relative;
}

.qed-stack__group--application .qed-stack__cards li + li::before {
  content: "↓";
  display: block;
  text-align: center;
  line-height: 0.9;
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
}

.qed-stack__card {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--md-default-fg-color);
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 0.3rem;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
}

.qed-stack__card:hover {
  border-color: var(--md-accent-fg-color);
}

.qed-stack__card:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

.qed-stack__card-label {
  font-weight: 600;
}

.qed-stack__step {
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
}

.qed-stack__card.is-visited {
  background: color-mix(in srgb, var(--md-default-fg-color--lightest) 70%, var(--md-default-bg-color));
}

.qed-stack__card.is-related {
  border-style: dashed;
  border-width: 2px;
  border-color: var(--md-accent-fg-color);
}

.qed-stack__card.is-current,
.qed-stack__card.is-selected {
  border-color: var(--md-accent-fg-color);
  border-width: 2px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-accent-fg-color) 25%, transparent);
}

.qed-stack__card.is-selected .qed-stack__card-label::before {
  content: "▶ ";
}

.qed-stack__card.is-inactive {
  border-style: dotted;
  color: var(--md-default-fg-color--light);
  background: transparent;
}

.qed-stack__panel {
  border-left: 4px solid var(--md-accent-fg-color);
  background: var(--md-code-bg-color);
  border-radius: 0 0.3rem 0.3rem 0;
  padding: 0.6rem 0.9rem;
  margin: 0.8rem 0;
  min-height: 3rem;
}

.qed-stack__panel p {
  margin: 0.3rem 0;
}

.qed-stack__field {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

@media (min-width: 60em) {
  .qed-stack__panel p:not(.qed-stack__note):not(.qed-stack__hint):not(.qed-stack__panel-title) {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: 0 0.8rem;
  }
}

.qed-stack__note {
  font-style: italic;
}

.qed-stack__tag {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0 0.4rem;
  border-radius: 0.6rem;
  border: 1px solid var(--md-default-fg-color--light);
  white-space: nowrap;
}

.qed-stack__tag--control {
  border-style: double;
  border-width: 3px;
}

.qed-stack__tag--meeting {
  border-left-width: 4px;
}

.qed-stack__relations {
  margin: 0.8rem 0;
}

.qed-stack__relations ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.qed-stack__relation {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--md-default-fg-color);
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 0.3rem;
  padding: 0.5rem 0.7rem;
  margin: 0.35rem 0;
  cursor: pointer;
}

.qed-stack__relation:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

.qed-stack__relation.is-active {
  border-color: var(--md-accent-fg-color);
  border-width: 2px;
}

.qed-stack__relation.is-inactive {
  border-style: dotted;
  color: var(--md-default-fg-color--light);
}

.qed-stack__relation-title {
  display: block;
  font-weight: 600;
}

.qed-stack__relation-chain {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--md-default-fg-color--light);
}

.qed-stack__relation-note {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.85rem;
}

/* Device-reported information: same meaning as the Module 07 telemetry
   convention (teal, dashed), always paired with a text label. */
.qed-stack__reported {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border: 2px dashed var(--qed-color-telemetry);
  border-radius: 0.3rem;
  background: color-mix(in srgb, var(--qed-color-telemetry) 10%, var(--md-code-bg-color));
  font-size: 0.85rem;
}

.qed-stack__scroll {
  overflow-x: auto;
}

.qed-stack__compare th,
.qed-stack__compare td {
  vertical-align: top;
}

.qed-stack__caption {
  caption-side: top;
  text-align: left;
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
  padding-bottom: 0.3rem;
}

.qed-stack__shared--differs {
  font-weight: 700;
}

.qed-stack__shared--hardware-only {
  font-style: italic;
  font-weight: 700;
}

.qed-stack__catalog {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  margin: 0.8rem 0;
}

@media (min-width: 40em) {
  .qed-stack__catalog {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.qed-stack__catalog li {
  margin: 0.3rem 0;
  font-size: 0.9rem;
}

.qed-stack__circuit {
  display: flex;
  justify-content: center;
  overflow-x: auto;
}

/* ---------------------------------------------------------------------
   Experience levels (docs/assets/javascripts/level.js). One canonical page,
   cumulative levels. Blocks tagged
     <div class="qed-level" data-min-level="intermediate" markdown="1">
   are hidden unless the site-wide level (html[data-qed-level], set before
   first paint by overrides/main.html) is at least that high. With no
   attribute at all, gated blocks stay hidden: essential content is never
   gated, so hiding is the safe default. Each shown block carries a text badge
   and a border treatment, so the level never depends on color alone:
     single left border = Intermediate, double left border = Advanced.
   ------------------------------------------------------------------- */
.qed-level {
  display: none;
}

html[data-qed-level="intermediate"] .qed-level[data-min-level="intermediate"],
html[data-qed-level="advanced"] .qed-level[data-min-level="intermediate"],
html[data-qed-level="advanced"] .qed-level[data-min-level="advanced"] {
  display: block;
}

.qed-level {
  margin: 1.2rem 0;
  padding: 0.2rem 1rem 0.6rem;
  border-left: 4px solid var(--md-accent-fg-color);
  background: color-mix(in srgb, var(--md-accent-fg-color) 5%, transparent);
  border-radius: 0 0.3rem 0.3rem 0;
}

.qed-level[data-min-level="advanced"] {
  border-left: 6px double var(--md-accent-fg-color);
}

.qed-level::before {
  display: block;
  margin: 0.3rem 0 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-accent-fg-color);
}

.qed-level[data-min-level="intermediate"]::before {
  content: "Intermediate";
}

.qed-level[data-min-level="advanced"]::before {
  content: "Advanced";
}

.qed-level-note {
  margin: 0.6rem 0 1rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 0.3rem;
  font-size: 0.85rem;
}

.qed-level-note__button {
  font: inherit;
  font-weight: 600;
  color: var(--md-accent-fg-color);
  background: none;
  border: 1px solid var(--md-accent-fg-color);
  border-radius: 0.3rem;
  padding: 0 0.6rem;
  cursor: pointer;
}

.qed-level-note__button:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

.qed-level-select {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0.4rem;
  font-size: 0.7rem;
  color: var(--md-primary-bg-color);
}

.qed-level-select__label {
  opacity: 0.85;
}

.qed-level-select select {
  font: inherit;
  font-size: 0.75rem;
  color: var(--md-primary-bg-color);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 0.25rem;
  padding: 0.15rem 0.3rem;
  cursor: pointer;
}

.qed-level-select select option {
  color: var(--md-default-fg-color);
  background: var(--md-default-bg-color);
}

.qed-level-select select:focus-visible {
  outline: 2px solid var(--md-primary-bg-color);
  outline-offset: 2px;
}

@media (max-width: 40em) {
  .qed-level-select__label {
    display: none;
  }
}

.qed-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   Simulated measurement results (docs/assets/javascripts/shots.js). Built
   on the shared .qed-confidence-* bar styles; the percentage column is
   widened to hold "count (percent)".
   ------------------------------------------------------------------- */
.qed-shots__summary {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
}

.qed-shots .qed-confidence-row__label {
  flex-basis: 5.5rem;
}

.qed-shots .qed-confidence-row__pct {
  flex-basis: 6rem;
}

/* On narrow screens put the label and count on one line and the bar below
   at full width, so the bar never gets squeezed out. */
@media (max-width: 30em) {
  .qed-shots .qed-confidence-row {
    flex-wrap: wrap;
    row-gap: 0.1rem;
  }

  .qed-shots .qed-confidence-row__label {
    flex: 1 1 auto;
  }

  .qed-shots .qed-confidence-row__pct {
    flex: 0 0 auto;
  }

  .qed-shots .qed-confidence-bar {
    order: 3;
    flex: 1 0 100%;
  }
}

/* ---------------------------------------------------------------------
   Module 02 — Quantum States (docs/02-fundamentals/quantum-states.md).
   Module 02 has no palette of its own and does not reuse Module 07's color
   meanings. The page tells its objects apart by shape and a text label, not
   by color:
     rounded rectangle with a tag = a prepared state or preparation
     circle                       = one measurement outcome
     horizontal bar               = counts (shared .qed-confidence-* styles)
   ------------------------------------------------------------------- */
.qed-prepared {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 11rem;
  padding: 0.6rem 0.8rem;
  border: 2px solid var(--md-default-fg-color--light);
  border-radius: 0.5rem;
  background: var(--md-code-bg-color);
  font-size: 0.9rem;
}

.qed-prepared--live {
  margin: 0.6rem 0;
}

.qed-prepared__tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

.qed-demo__step {
  margin: 0.8rem 0 0.2rem;
}

.qed-demo__hint {
  min-height: 1.2rem;
  margin: 0.2rem 0;
  font-size: 0.85rem;
  color: var(--md-default-fg-color--light);
}

.qed-demo__feedback {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
}

.qed-outcomes {
  margin-top: 0.8rem;
}

.qed-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0.3rem 0 0.6rem;
  min-height: 1.6rem;
}

.qed-outcome-token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 2px solid var(--md-default-fg-color--light);
  border-radius: 50%;
  background: var(--md-default-bg-color);
  font-family: var(--md-code-font);
  font-size: 0.8rem;
  font-weight: 700;
}

.qed-tokens__more {
  align-self: center;
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
}

.qed-quiz__item {
  margin: 0.6rem 0 1rem;
}

.qed-quiz__prompt {
  margin: 0.2rem 0;
}

.qed-quiz__feedback {
  min-height: 1.2rem;
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
}

.qed-quiz__feedback.is-correct::before {
  content: "✓ ";
  font-weight: 700;
}

.qed-quiz__feedback.is-incorrect::before {
  content: "✗ ";
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   Foundations demos (the page scripts of docs/01-foundations/) — comparison
   panels, signed amplitude bars,
   expected-value markers, result tables and small stat displays. Colors
   reuse the shared tokens: blue = quantum state, neutral gray = classical.
   Negative amplitudes are hatched AND carry a "−" sign in text, so sign
   never relies on color alone. Any new accent must reuse a :root token.
   ------------------------------------------------------------------- */
.qed-panel {
  flex: 1 1 15rem;
  min-width: 14rem;
  border: 2px solid var(--qed-color-physical);
  border-radius: 0.4rem;
  padding: 0.7rem 0.9rem;
  background: var(--md-code-bg-color);
}

.qed-panel--quantum {
  border-color: var(--qed-color-logical);
}

.qed-panel__title {
  font-weight: 700;
  font-size: 0.8rem;
}

.qed-panel__state {
  font-family: var(--md-code-font);
  font-size: 0.85rem;
  margin: 0.3rem 0 0.6rem;
  min-height: 1.3rem;
}

.qed-amp-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.35rem 0;
  font-size: 0.75rem;
}

.qed-amp-row__label {
  flex: 0 0 5.2rem;
  font-family: var(--md-code-font);
}

.qed-amp-row__val {
  flex: 0 0 2.8rem;
  text-align: right;
  font-family: var(--md-code-font);
}

.qed-amp-bar {
  position: relative;
  flex: 1 1 auto;
  height: 1rem;
  border: 1px solid var(--qed-color-physical);
  border-radius: 0.2rem;
  background: var(--md-default-bg-color);
}

.qed-amp-bar::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--qed-color-physical);
}

.qed-amp-bar__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  background: var(--qed-color-logical);
  transition: width 0.25s ease;
}

.qed-amp-bar__fill--neg {
  left: auto;
  right: 50%;
  background: repeating-linear-gradient(
    45deg,
    var(--qed-color-logical),
    var(--qed-color-logical) 3px,
    transparent 3px,
    transparent 6px
  );
}

.qed-confidence-bar--marked {
  position: relative;
}

.qed-confidence-bar__marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--md-default-fg-color);
  opacity: 0.8;
}

.qed-confidence-bar__fill--logical {
  background: var(--qed-color-logical);
}

.qed-confidence-bar__fill--protected {
  background: var(--qed-color-protected);
}

.qed-confidence-bar__fill--noise {
  background: var(--qed-color-noise);
}

.qed-confidence-bar__fill--error {
  background: var(--qed-color-error);
}

.qed-pill--neutral {
  border-color: var(--qed-color-physical);
  background: var(--md-code-bg-color);
  opacity: 0.8;
}

.qed-results-table {
  margin: 0.8rem auto;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.qed-results-table th,
.qed-results-table td {
  padding: 0.25rem 0.9rem;
  text-align: center;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.qed-chsh-row {
  margin: 0.9rem 0;
}

.qed-chsh-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
}

.qed-demo__note {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
}

.qed-stat {
  display: flex;
  flex-direction: column;
  margin-top: 0.4rem;
}

.qed-stat__value {
  font-family: var(--md-code-font);
  font-size: 1.1rem;
  font-weight: 700;
}

.qed-stat__label {
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}

.qed-amp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr));
  gap: 0.4rem;
  margin: 0.6rem 0;
}

.qed-amp-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.35rem 0.2rem;
  border: 2px solid var(--qed-color-physical);
  border-radius: 0.3rem;
  background: var(--md-code-bg-color);
  font-family: var(--md-code-font);
  font-size: 0.75rem;
}

.qed-amp-cell__amp {
  color: var(--qed-color-logical);
  font-weight: 700;
}

.qed-amp-cell__count {
  min-height: 1em;
  color: var(--md-default-fg-color--light);
}

.qed-amp-cell--hit {
  border-color: var(--qed-color-logical);
  background: color-mix(in srgb, var(--qed-color-logical) 18%, var(--md-code-bg-color));
}

.qed-logbar {
  margin: 0.7rem 0;
}

.qed-logbar__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2rem 0.8rem;
  margin-bottom: 0.15rem;
  font-size: 0.8rem;
}

.qed-logbar .qed-confidence-bar {
  width: 100%;
  flex: none;
}

.qed-logbar__note {
  margin: 0.15rem 0 0;
}

/* ---------------------------------------------------------------------
   Module 02 — Qubit Representation (docs/02-fundamentals/qubit-
   representation.md): the amplitude editor. Neutral treatment like the rest
   of Module 02. Validity is shown with an icon AND words (a check mark for
   valid, a cross for invalid), and a negative amplitude with its sign and a
   written label, so nothing depends on color alone.
   ------------------------------------------------------------------- */
.qed-editor [hidden] {
  display: none !important;
}

.qed-editor__amps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  margin: 0.6rem 0;
}

@media (min-width: 40em) {
  .qed-editor__amps {
    grid-template-columns: 1fr 1fr;
  }
}

.qed-editor__amp {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 0.4rem;
}

.qed-editor__amp-title {
  margin: 0 0 0.3rem;
}

.qed-editor__inputs {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.qed-editor__inputs input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
}

.qed-editor__inputs input[type="number"] {
  flex: 0 0 4.6rem;
  width: 4.6rem;
  font: inherit;
  font-family: var(--md-code-font);
  color: var(--md-default-fg-color);
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--light);
  border-radius: 0.25rem;
  padding: 0.15rem 0.3rem;
}

.qed-editor__inputs output {
  flex: 0 0 3.2rem;
  font-family: var(--md-code-font);
  text-align: right;
}

.qed-editor__polar label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.qed-editor__global {
  margin: 0.4rem 0 0.8rem;
}

.qed-editor__sign {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
}

.qed-editor__details {
  margin: 0.3rem 0;
  font-size: 0.85rem;
}

.qed-editor__validity {
  margin: 0.2rem 0 0.6rem;
  padding: 0.35rem 0.7rem;
  border-radius: 0.3rem;
  border: 2px solid var(--md-default-fg-color--light);
  font-weight: 600;
}

.qed-editor__validity.is-valid {
  border-style: solid;
}

.qed-editor__validity.is-invalid {
  border-style: dashed;
}

.qed-editor__note {
  min-height: 1.2rem;
  margin: 0.4rem 0;
  font-size: 0.85rem;
  font-style: italic;
}

/* ---------------------------------------------------------------------
   Module 02 - Bloch Sphere (docs/02-fundamentals/bloch-sphere.md): the sphere
   explorer. Neutral treatment like the rest of Module 02. The live point is a
   filled dot, the pinned state a faded diamond, the named points small dots
   with text labels, and the projection a dashed line, so nothing depends on
   color alone.
   ------------------------------------------------------------------- */
.qed-sphere [hidden] {
  display: none !important;
}

.qed-sphere__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0.6rem 0;
  align-items: start;
}

@media (min-width: 48em) {
  .qed-sphere__layout {
    grid-template-columns: minmax(0, 360px) 1fr;
  }
}

.qed-sphere__view canvas,
#bs-bridge canvas,
#bs-compare canvas {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

#bs-compare .qed-demo__layout {
  align-items: flex-start;
}

#bs-compare canvas {
  flex: 0 1 300px;
}

.qed-sphere__bars {
  flex: 1 1 220px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.qed-sphere__controls .qed-editor__amp {
  margin-bottom: 0.7rem;
}

/* ---------------------------------------------------------------------
   Module 02 - Quantum Gates (docs/02-fundamentals/quantum-gates.md): the gate
   explorer. Neutral treatment like the rest of Module 02: the start is a faded
   diamond, the result a filled dot, the two orders sit in labelled panels, and
   gate boxes use the neutral line color rather than Module 07's logical blue,
   so nothing depends on color alone.
   ------------------------------------------------------------------- */
.qed-gates [hidden] {
  display: none !important;
}

.qed-circuit-gate-box--neutral {
  stroke: var(--md-default-fg-color--light);
}

.qed-gates__rotation {
  margin: 0.8rem 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 0.4rem;
}

.qed-gates__result {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0.6rem 0;
  align-items: start;
}

@media (min-width: 48em) {
  .qed-gates__result {
    grid-template-columns: minmax(0, 360px) 1fr;
  }
}

.qed-gates__view canvas {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.qed-gates__arrow {
  margin: 0 0 0.4rem;
  text-align: center;
}

.qed-matrixline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0.3rem 0 0.8rem;
  font-family: var(--md-code-font);
}

.qed-matrix {
  display: inline-grid;
  gap: 0.2rem 0.9rem;
  padding: 0.2rem 0.6rem;
  border-left: 2px solid var(--md-default-fg-color--light);
  border-right: 2px solid var(--md-default-fg-color--light);
  text-align: center;
}

/* ---------------------------------------------------------------------
   Module 02 - Multi-Qubit Systems (docs/02-fundamentals/multi-qubit-
   systems.md): the two-qubit explorer. Neutral treatment like the rest of
   Module 02. The two qubits are named q0 and q1 in text, the control is a dot
   and the target a circled plus, the actual table and the table that
   independent qubits would give sit in labelled panels, and the product-test
   verdict carries an icon and words, so nothing depends on color alone.
   ------------------------------------------------------------------- */
.qed-twoq [hidden] {
  display: none !important;
}

.qed-twoq__tables {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}

@media (min-width: 48em) {
  .qed-twoq__tables {
    grid-template-columns: 1fr 1fr;
  }
}

.qed-jointtable {
  border-collapse: collapse;
}

[dir] .md-typeset .qed-jointtable td,
[dir] .md-typeset .qed-jointtable th {
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  text-align: center;
}

.qed-twoq__tables .qed-circuit-svg {
  display: block;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------
   Module 02 - Quantum Circuits (docs/02-fundamentals/quantum-circuits.md): the
   circuit builder. Neutral treatment like the rest of Module 02. Every gate is
   a labelled box, the control is a dot and the target a circled plus, the
   measurement is a meter, the chosen palette item has a label and a border, and
   a refused placement carries an icon and words, so nothing depends on color
   alone.
   ------------------------------------------------------------------- */
.qed-cb [hidden] {
  display: none !important;
}

.qed-cb__grid {
  display: grid;
  grid-template-columns: 2rem repeat(5, minmax(0, 1fr));
  gap: 0.3rem;
  align-items: center;
  margin: 0.6rem 0;
  max-width: 28rem;
}

.qed-cb__wire {
  font-family: var(--md-code-font);
  font-weight: 700;
}

.qed-cb__cell {
  min-width: 0;
  padding: 0.5rem 0;
  font-size: 0.75rem;
  overflow: hidden;
  text-align: center;
  justify-content: center;
}

.qed-cb__cell.is-empty {
  opacity: 0.6;
  border-style: dashed;
}

.qed-cb__select {
  font: inherit;
  color: var(--md-default-fg-color);
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--light);
  border-radius: 0.25rem;
  padding: 0.3rem 0.5rem;
  max-width: 100%;
}

.qed-cb__step {
  margin: 0 0 1rem;
  padding: 0.3rem 0 0.3rem 0.8rem;
  border-left: 3px solid var(--md-default-fg-color--lighter);
}

.qed-cb__steptitle {
  margin: 0 0 0.3rem;
}

.qed-cb .qed-circuit-svg {
  display: block;
}

/* ---------------------------------------------------------------------
   Module 02 - Measurement (docs/02-fundamentals/measurement.md): the
   measurement lab. Neutral treatment like the rest of Module 02. The predicted
   bars and the sampled bars carry different labels and different bar styles
   (hatched and dashed against solid), one outcome is a labelled token, and the
   stepper panels are labelled BEFORE, OUTCOME, and AFTER, so nothing depends
   on color alone.
   ------------------------------------------------------------------- */
.qed-ml [hidden] {
  display: none !important;
}

/* The bar groups sit side by side on wide screens, so each row puts the label
   and the percentage on one line and the bar below it at full width. */
.qed-ml .qed-confidence-row {
  flex-wrap: wrap;
  row-gap: 0.1rem;
}

.qed-ml .qed-confidence-row__label {
  flex: 1 1 auto;
}

.qed-ml .qed-confidence-row__pct {
  flex: 0 0 auto;
}

.qed-ml .qed-confidence-bar {
  order: 3;
  flex: 1 0 100%;
}

.qed-ml__groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}

@media (min-width: 48em) {
  .qed-ml__groups {
    grid-template-columns: 1fr 1fr;
  }
}

.qed-ml__group {
  min-width: 0;
  padding: 0.5rem 0.8rem;
  border: 2px solid var(--md-default-fg-color--light);
  border-radius: 0.3rem;
}

.qed-ml__group--predicted {
  border-style: dashed;
}

.qed-ml__group--predicted .qed-confidence-bar {
  border-style: dashed;
}

.qed-ml__group--predicted .qed-confidence-bar__fill {
  background: repeating-linear-gradient(45deg, var(--qed-color-physical) 0 4px, transparent 4px 8px);
}

.qed-ml__grouphead {
  margin: 0 0 0.3rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.qed-ml__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  align-items: start;
}

@media (min-width: 48em) {
  .qed-ml__steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.qed-ml__panel {
  min-width: 0;
  padding: 0.5rem 0.8rem;
  border: 2px solid var(--md-default-fg-color--light);
  border-radius: 0.3rem;
}

.qed-ml__panelhead {
  margin: 0 0 0.3rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.qed-ml__token {
  display: inline-block;
  min-width: 2.2rem;
  margin: 0.1rem 0.3rem 0.1rem 0;
  padding: 0.2rem 0.5rem;
  text-align: center;
  font-family: var(--md-code-font);
  font-weight: 700;
  border: 2px solid var(--md-default-fg-color);
  border-radius: 0.3rem;
}

.qed-ml__select {
  font: inherit;
  color: var(--md-default-fg-color);
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--light);
  border-radius: 0.25rem;
  padding: 0.3rem 0.5rem;
  max-width: 100%;
}

.qed-ml__strip {
  position: relative;
  height: 1.6rem;
  margin: 0.2rem 0 0.1rem;
  border: 1px solid var(--md-default-fg-color--light);
  border-radius: 0.2rem;
  background: var(--md-code-bg-color);
}

.qed-ml__band {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 2px dashed var(--md-default-fg-color);
  border-right: 2px dashed var(--md-default-fg-color);
  background: var(--md-default-fg-color--lightest);
}

.qed-ml__dot {
  position: absolute;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  margin: -0.275rem 0 0 -0.275rem;
  border: 2px solid var(--md-default-fg-color);
  border-radius: 50%;
  background: var(--md-default-bg-color);
}

.qed-ml__axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-family: var(--md-code-font);
}

.qed-ml .qed-circuit-svg {
  display: block;
}