/* ============================================================================
   TabDSP Documentation — Signal Flow SVG Block Diagram
   Uses global --module-* tokens promoted to main.css.
   ============================================================================ */

.sf-diagram-wrap {
    background: var(--color-bg-secondary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl) var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    overflow-x: auto;
}

.sf-diagram {
    display: block;
    width: 100%;
    max-width: 800px;
    height: auto;
    margin: 0 auto;
    font-family: var(--font-sans);
}

/* Block group wrapper (a or g). Outer g is always non-clickable; a makes it
   clickable and keyboard-focusable. */
.sf-block-link {
    cursor: pointer;
    outline: none;
    transition: filter 150ms ease;
}

.sf-block-link:hover .sf-block-eq,
.sf-block-link:focus-visible .sf-block-eq {
    filter: drop-shadow(0 0 10px var(--module-eq-glow));
}
.sf-block-link:hover .sf-block-mb,
.sf-block-link:focus-visible .sf-block-mb {
    filter: drop-shadow(0 0 10px var(--module-mb-glow));
}
.sf-block-link:hover .sf-block-comp,
.sf-block-link:focus-visible .sf-block-comp {
    filter: drop-shadow(0 0 10px var(--module-comp-glow));
}
.sf-block-link:hover .sf-block-lim,
.sf-block-link:focus-visible .sf-block-lim {
    filter: drop-shadow(0 0 10px var(--module-lim-glow));
}

.sf-block-link:focus-visible .sf-block-rect {
    stroke-width: 2.5;
}

/* Block rectangles — rounded 8px radius, module-color border, -soft fill */
.sf-block-rect {
    rx: 8;
    ry: 8;
    stroke-width: 1.5;
    transition: stroke-width 150ms ease;
}

.sf-block-eq .sf-block-rect {
    fill: var(--module-eq-soft);
    stroke: var(--module-eq);
}
.sf-block-mb .sf-block-rect {
    fill: var(--module-mb-soft);
    stroke: var(--module-mb);
}
.sf-block-comp .sf-block-rect {
    fill: var(--module-comp-soft);
    stroke: var(--module-comp);
}
.sf-block-lim .sf-block-rect {
    fill: var(--module-lim-soft);
    stroke: var(--module-lim);
}
.sf-block-input .sf-block-rect,
.sf-block-output .sf-block-rect {
    fill: var(--module-input-soft);
    stroke: var(--module-input-line);
}

/* Labels inside blocks */
.sf-block-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.03em;
    fill: var(--color-text-primary);
}

.sf-block-sub {
    font-size: 10.5px;
    fill: var(--color-text-secondary);
}

.sf-block-tag {
    font-size: 10px;
    font-weight: 600;
    fill: var(--color-text-tertiary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Module title gets its module color for pop */
.sf-block-eq .sf-block-title { fill: var(--module-eq); }
.sf-block-mb .sf-block-title { fill: var(--module-mb); }
.sf-block-comp .sf-block-title { fill: var(--module-comp); }
.sf-block-lim .sf-block-title { fill: var(--module-lim); }

/* Connectors — vertical arrows colored to match downstream module */
.sf-connector {
    stroke-width: 2;
    fill: none;
}

.sf-connector-eq   { stroke: var(--module-eq-line); }
.sf-connector-mb   { stroke: var(--module-mb-line); }
.sf-connector-comp { stroke: var(--module-comp-line); }
.sf-connector-lim  { stroke: var(--module-lim-line); }
.sf-connector-output { stroke: var(--module-input-line); }

.sf-arrow-eq   { fill: var(--module-eq); }
.sf-arrow-mb   { fill: var(--module-mb); }
.sf-arrow-comp { fill: var(--module-comp); }
.sf-arrow-lim  { fill: var(--module-lim); }
.sf-arrow-output { fill: var(--module-input); }

/* Bypass tap — dotted line branching off INPUT, rejoining after Limiter */
.sf-bypass-path {
    fill: none;
    stroke: var(--color-text-tertiary);
    stroke-width: 1.25;
    stroke-dasharray: 3 4;
    opacity: 0.6;
}

.sf-bypass-label {
    font-size: 10px;
    font-style: italic;
    fill: var(--color-text-tertiary);
    letter-spacing: 0.02em;
}

/* Analysis / metering tap branches + endpoint nodes — informational only,
   muted styling so they don't compete with the main signal flow. */
.sf-tap-branch {
    fill: none;
    stroke: var(--color-text-tertiary);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
    opacity: 0.7;
}

.sf-tap-rect {
    rx: 6;
    ry: 6;
    fill: var(--color-bg-secondary);
    fill-opacity: 0.6;
    stroke: var(--border-color);
    stroke-width: 1;
}

.sf-tap-label {
    font-size: 10.5px;
    fill: var(--color-text-secondary);
    letter-spacing: 0.01em;
}

/* Optional module-color left-edge accent for spectrum taps */
.sf-tap-accent-eq {
    stroke: var(--module-eq-line);
    stroke-width: 1;
}
.sf-tap-accent-mb {
    stroke: var(--module-mb-line);
    stroke-width: 1;
}

/* Responsive — SVG scales via width=100%, just shrink font sizes on small screens */
@media (max-width: 480px) {
    .sf-block-title { font-size: 13px; }
    .sf-block-sub   { font-size: 9.5px; }
    .sf-block-tag   { font-size: 9px; }
    .sf-bypass-label { font-size: 9px; }
    .sf-tap-label { font-size: 9px; }
    .sf-diagram-wrap {
        padding: var(--spacing-lg) var(--spacing-sm);
    }
}