/* Belt layout diagram (static/js/belt-diagram.js, issue #178).
   Everything is prefixed belt-dg- so it cannot collide with page styles.
   Surfaces and text come from the site tokens in main.css; the --belt-dg-*
   tokens are the drawing-only colours and mirror plot-engine.css so the two
   cards look like one family. The svg is styled from these classes, so the
   theme toggle needs no redraw. */

:root {
    --belt-dg-bg: #16191c;
    --belt-dg-sep: rgba(255,255,255,0.075);
    --belt-dg-line: #8b939b;                 /* pulley outline, dimensions, ghost run */
    --belt-dg-pulley-fill: rgba(255,255,255,0.05);
    --belt-dg-idler: #d95926;
    --belt-dg-idler-fill: rgba(217,89,38,0.16);
    --belt-dg-bad: #f87171;
    --belt-dg-bad-fill: rgba(239,68,68,0.18);
}
[data-theme="light"] {
    --belt-dg-bg: #ffffff;
    --belt-dg-sep: #e4e4ea;
    --belt-dg-line: #7a7a90;
    --belt-dg-pulley-fill: rgba(26,26,46,0.05);
    --belt-dg-idler: #eb6834;
    --belt-dg-idler-fill: rgba(235,104,52,0.16);
    --belt-dg-bad: #dc2626;
    --belt-dg-bad-fill: rgba(220,38,38,0.14);
}

.belt-dg {
    background: var(--belt-dg-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

/* Heading strip: title left, scale note right */
.belt-dg-bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--belt-dg-sep);
}
.belt-dg-title {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-muted);
}
.belt-dg-caption { font-size: 12px; color: var(--fg-muted); white-space: nowrap; }

/* Stage: the svg, with the issue chip and blocker laid over it */
.belt-dg-stage { position: relative; height: clamp(240px, 36vh, 320px); }
@media (max-width: 640px) { .belt-dg-stage { height: 240px; } }
.belt-dg-host { position: absolute; inset: 0; }
.belt-dg-svg { display: block; transition: opacity 0.15s; }
.belt-dg-svg text { font: 11px var(--font-mono); fill: var(--fg-secondary); }

.belt-dg-pulley .body { fill: var(--belt-dg-pulley-fill); stroke: var(--belt-dg-line); stroke-width: 1.5; }
.belt-dg-pulley .hub { fill: var(--belt-dg-line); }
.belt-dg-tensioner .body { fill: var(--belt-dg-idler-fill); stroke: var(--belt-dg-idler); stroke-width: 1.5; }
.belt-dg-tensioner .hub { fill: var(--belt-dg-idler); }
.belt-dg-tensioner .label { fill: var(--belt-dg-idler); dominant-baseline: central; text-anchor: end; }
.belt-dg-svg .name {
    font-weight: 600;
    fill: var(--fg);
    text-anchor: middle;
    dominant-baseline: central;
    transform: translateY(-9px);
    paint-order: stroke;
    stroke: var(--belt-dg-bg);
    stroke-width: 3px;
}
.belt-dg-pulley .label { text-anchor: middle; }

.belt-dg-belt {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.5;
    stroke-linejoin: round;
}
.belt-dg-ghost { stroke: var(--belt-dg-line); stroke-dasharray: 4 4; opacity: 0.75; }

.belt-dg-dim line { stroke: var(--belt-dg-line); stroke-width: 1; }
.belt-dg-dim .ext { opacity: 0.45; }
.belt-dg-arrow { fill: var(--belt-dg-line); }

/* The drawing is either current or visibly not. is-pending: waiting for the
   answer. is-blocked: nothing to draw, the frame stays (no layout jump) and
   the message takes the drawing's place. */
.belt-dg-stage.is-pending .belt-dg-svg { opacity: 0.45; }
.belt-dg-stage.is-blocked .belt-dg-svg { display: none; }
.belt-dg-blocker {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    pointer-events: none;
}
.belt-dg-blocker[hidden] { display: none; }
.belt-dg-blocker p {
    max-width: 46ch;
    margin: 0;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--fg-secondary);
}

/* A rejected layout: the element at fault in red, the reason beside it */
.belt-dg-stage.is-issue .belt-dg-culprit .body { stroke: var(--belt-dg-bad); fill: var(--belt-dg-bad-fill); }
.belt-dg-stage.is-issue .belt-dg-culprit .hub { fill: var(--belt-dg-bad); }
.belt-dg-stage.is-issue .belt-dg-culprit .label { fill: var(--belt-dg-bad); }
.belt-dg-stage.is-issue .belt-dg-belt.belt-dg-culprit { stroke: var(--belt-dg-bad); stroke-dasharray: 6 4; }
.belt-dg-issue {
    position: absolute;
    left: 10px;
    top: 8px;
    max-width: min(62%, 46ch);
    font-size: 12px;
    line-height: 1.4;
    color: var(--error-text);
    background: color-mix(in srgb, var(--belt-dg-bg) 85%, transparent);
    border: 1px solid var(--belt-dg-bad);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    pointer-events: none;
}
.belt-dg-issue[hidden] { display: none; }