/* ----- VCD waveform directive (.vcd) ----- */
:root {
  --vcd-line: #2E7D32;
  --vcd-x: #c62828;
  /* Hover time cursor: a warm accent that stands apart from the green
     signal lines on the light code background. */
  --vcd-cursor: #E65100;
  /* True-state shading for 1-bit signals: a dark, desaturated green,
     drawn translucently (see .vcd-shade below) so it reads as a wash
     over the signal's full height rather than a solid block. */
  --vcd-shade: #3A5340;
}

[data-theme="dark"] {
  --vcd-line: #8FC225;
  --vcd-x: #ef5350;
  /* Brighter amber to read against the dark code background. */
  --vcd-cursor: #FFB74D;
  /* Lightened a touch so the wash stays visible against the dark
     code background without glowing. */
  --vcd-shade: #4A6B52;
}

.vcd-block {
  margin-bottom: 24px;
}

.vcd-block .vcd-body {
  background: var(--bg-code);
  border: 1px solid var(--border-code);
  border-radius: 0 0 8px 8px;
  padding: 10px 6px 6px;
  overflow-x: auto;
}

/* Without a caption, round the top corners of the body too */
.vcd-block:not(:has(.code-block-caption)) .vcd-body {
  border-radius: 8px;
}

.vcd-svg {
  display: block;
  /* Width is computed at build time: the renderer "zooms to fit" the
     target width (vcd_waveform_width in conf.py) by choosing pixels per
     tick -- GTKWave-style -- so font sizes stay fixed while the waveform
     density adapts.  Only traces longer than the target width overflow;
     they scroll horizontally on .vcd-body below. */
}

/* Two variants of every figure are rendered at build time (vcd_ext.py):
   .vcd-svg--desktop is zoomed to fit the ~680px content column, and
   .vcd-svg--mobile is re-rendered at a ~310px phone column so its text
   stays a true 14px.  Below 768px -- the theme's own breakpoint where
   .wy-nav-content switches to narrow padding -- the desktop SVG no longer
   fits the column and is swapped for the mobile one.  vcd.js attaches the
   hover time cursor to each SVG independently; the hidden variant simply
   never receives mouse events. */
.vcd-svg--mobile {
  display: none;
}

@media (max-width: 768px) {
  .vcd-svg--desktop {
    display: none;
  }

  .vcd-svg--mobile {
    display: block;
    width: 100%;
    height: auto;
  }

  .vcd-svg--mobile.vcd-svg--overflow {
    width: auto;
  }
}

/* Above the breakpoint, the desktop SVG keeps its build-time 680px width
   when the column is wide enough, and scales down proportionally when the
   column is narrower than that -- the 800px content column only exists at
   full desktop width, and between ~769px and ~1050px viewports it is
   smaller than the build target, which would otherwise overflow .vcd-body
   into a horizontal scrollbar for every figure.  The text shrinks with the
   figure, gracefully in between; vcd.js reads the live scale via
   getBoundingClientRect(), so the hover time cursor stays accurate. */
.vcd-svg--desktop {
  max-width: 100%;
  height: auto;
}

/* Traces zoomed all the way out (the MIN_TICK_W floor in vcd_ext.py) are
   wider than their target by design: they scroll horizontally in .vcd-body
   rather than compressing further into unreadably small text.  The
   renderer tags them .vcd-svg--overflow to exempt them from the scaling
   above. */
.vcd-svg--overflow {
  max-width: none;
}

.vcd-svg text {
  font-family: "Fira Mono", monospace;
  /* Keep in sync with FONT_PX in vcd_ext.py: 14px matches the docs'
     .small-code size, one step under the 17px body/code text. */
  font-size: 14px;
}

.vcd-svg .vcd-name {
  fill: var(--text-main);
  font-size: 15px;
}

.vcd-svg .vcd-bitlabel {
  /* true/false annotations for 1-bit signals (drawn by vcd_ext.py's
     bitlabels pass).  Same font, size, and color as multi-bit data
     labels (.vcd-data): no font-size override, so it inherits the
     14px Fira Mono from .vcd-svg text, and the fill matches --
     vcd_ext.py's BITLABEL_CHAR_W assumes this size. */
  fill: var(--text-main);
}

.vcd-svg .vcd-head {
  fill: var(--border-light);
}

.vcd-svg .vcd-label {
  /* Group-title rows (layout 'label <text>'): rendered like a signal
     name but in the muted head color, so a group reads as one visual
     unit without any rule or other ornament across the waveform. */
  fill: var(--border-light);
}

.vcd-svg .vcd-line {
  stroke: var(--vcd-line);
  stroke-width: 1.5;
  fill: none;
  stroke-linejoin: round;
}

.vcd-svg .vcd-clk {
  /* Posedge arrowheads ride the rising edge itself, in the signal's own
     color -- the edge simply reads as an upward arrow. */
  fill: var(--vcd-line);
  stroke: none;
}

.vcd-svg .vcd-zline {
  stroke: var(--vcd-line);
  stroke-width: 1.5;
  fill: none;
  opacity: 0.45;
}

.vcd-svg .vcd-xbox {
  fill: var(--bg-page);
  stroke: var(--vcd-x);
}

.vcd-svg .vcd-cross {
  stroke: var(--vcd-x);
  stroke-width: 1.2;
  fill: none;
}

.vcd-svg .vcd-shade {
  /* Full-height shading under a signal's true level (drawn by
     vcd_ext.py for 1-bit non-clk signals, spanning y_top..y_bot like
     the 'x' and '4' boxes).  Translucent so the code background and
     any hover cursor show through, keeping it a wash rather than a
     solid block. */
  fill: var(--vcd-shade);
  fill-opacity: 0.45;
}

.vcd-svg .vcd-dbox {
  fill: var(--bg-page);
  stroke: var(--vcd-line);
}

.vcd-svg .vcd-data {
  fill: var(--text-main);
}

.vcd-svg .vcd-cursor {
  stroke: var(--vcd-cursor);
  stroke-width: 1.5;
  /* Drawn by vcd.js on hover; never an interaction target itself, so it
     does not interfere with tracking the mouse over the waveform. */
  pointer-events: none;
}