/* Stacked-panel plot engine (static/js/plot-engine.js, issue #165).
   Everything is prefixed plot- so it cannot collide with page styles.
   Surfaces and text come from the site tokens in main.css; the --plot-*
   tokens below are the chart-only colours (grid, crosshair, series). The
   svg is styled from these classes, so the theme toggle needs no redraw. */

:root {
    --plot-bg: #16191c;
    --plot-grid: rgba(255,255,255,0.045);
    --plot-sep: rgba(255,255,255,0.075);
    --plot-zero: rgba(255,255,255,0.14);
    --plot-cross: #8b939b;
    --plot-cross-label: #3a4047;
    --plot-cross-ink: #f1f3f5;
    --plot-tag-ink: #0e1013;
    /* Series colours: checked for colour-blind separation and >= 3:1
       contrast against --plot-bg. Assign in this order, never cycle. */
    --plot-s1: #3987e5;
    --plot-s2: #d95926;
    --plot-s3: #199e70;
    --plot-s4: #c98500;
}
[data-theme="light"] {
    --plot-bg: #ffffff;
    --plot-grid: rgba(26,26,46,0.065);
    --plot-sep: #e4e4ea;
    --plot-zero: rgba(26,26,46,0.16);
    --plot-cross: #8a8aa0;
    --plot-cross-label: #2b2b40;
    --plot-cross-ink: #ffffff;
    --plot-tag-ink: #101214;
    --plot-s1: #2a78d6;
    --plot-s2: #eb6834;
    --plot-s3: #1baf7a;
    --plot-s4: #eda100;
}

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

/* Toolbar: panel toggles left, zoom buttons right */
.plot-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--plot-sep);
}
.plot-toggles { display: flex; flex-wrap: wrap; gap: 4px; }
.plot-tog {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 500 12px var(--font-body);
    color: var(--fg-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    cursor: pointer;
}
.plot-tog i { width: 12px; height: 2px; border-radius: 1px; background: var(--plot-c); opacity: 0.35; }
.plot-tog[aria-pressed="true"] { color: var(--fg); border-color: var(--plot-sep); background: var(--bg-card); }
.plot-tog[aria-pressed="true"] i { opacity: 1; }
.plot-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.plot-btn {
    font: 12px var(--font-body);
    color: var(--fg-secondary);
    background: var(--bg-card);
    border: 1px solid var(--plot-sep);
    border-radius: var(--radius-sm);
    height: 28px;
    padding: 0 8px;
    cursor: pointer;
}
.plot-btn--sq { width: 28px; padding: 0; font: 500 15px/1 var(--font-mono); }
.plot-btn:hover { color: var(--fg); border-color: var(--border-hover); }
.plot-tog:focus-visible, .plot-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Stage: the svg, with the legends, wheel hint and blocker laid over it */
.plot-stage { position: relative; height: clamp(420px, 62vh, 620px); }
@media (max-width: 640px) { .plot-stage { height: 460px; } }
.plot-host { position: absolute; inset: 0; }
.plot-legends { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.plot-lg {
    position: absolute;
    left: 8px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    font: 12px/1.35 var(--font-mono);
    padding: 2px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--plot-bg) 78%, transparent);
    white-space: nowrap;
    max-width: calc(100% - 90px);
    overflow: hidden;
}
.plot-lg i { align-self: center; width: 12px; height: 2px; border-radius: 1px; background: var(--plot-c); flex: none; }
.plot-lg-name { color: var(--fg-muted); font-family: var(--font-body); }
.plot-lg b { font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.plot-lg-unit { color: var(--fg-muted); }
.plot-lg-x { color: var(--fg-muted); margin-right: 6px; padding-right: 8px; border-right: 1px solid var(--plot-sep); }
.plot-wheel-hint {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    pointer-events: none;
    background: var(--plot-cross-label);
    color: var(--plot-cross-ink);
    font-size: var(--text-sm);
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity 0.25s;
    white-space: nowrap;
}
.plot-wheel-hint.is-on { opacity: 0.96; }

/* The plot is either current or visibly not. is-pending: waiting for the
   answer. is-blocked: nothing valid to draw, so the frame stays (no layout
   jump) but every curve and number is removed. */
.plot-line, .plot-lg b { transition: opacity 0.15s; }
.plot-stage.is-pending .plot-line, .plot-stage.is-pending .plot-impulses, .plot-stage.is-pending .plot-lg b { opacity: 0.4; }
.plot-stage.is-blocked .plot-host { pointer-events: none; }
.plot-stage.is-blocked .plot-line,
.plot-stage.is-blocked .plot-bands,
.plot-stage.is-blocked .plot-zero,
.plot-stage.is-blocked .plot-impulses,
.plot-stage.is-blocked .plot-axis text,
.plot-stage.is-blocked .plot-cross,
.plot-stage.is-blocked .plot-dot,
.plot-stage.is-blocked .plot-tag,
.plot-stage.is-blocked .plot-xtag { display: none !important; }
.plot-blocker { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; padding: 24px; pointer-events: none; }
.plot-blocker[hidden] { display: none; }
.plot-blocker p {
    max-width: 46ch;
    margin: 0;
    text-align: center;
    font-size: var(--text-base);
    color: var(--fg-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 16px;
}

/* Band strip under the x-axis */
.plot-ribbon { position: relative; height: 26px; border-top: 1px solid var(--plot-sep); overflow: hidden; }
.plot-seg {
    position: absolute;
    top: 4px;
    bottom: 4px;
    border-radius: 3px;
    font: 11px/18px var(--font-mono);
    color: var(--fg-secondary);
    padding: 0 6px;
    white-space: nowrap;
    overflow: hidden;
}
.plot-ribbon-unit { position: absolute; right: 8px; top: 0; font: 11px/26px var(--font-mono); color: var(--fg-muted); }
.plot-hint { font-size: 12px; color: var(--fg-muted); padding: 7px 12px; border-top: 1px solid var(--plot-sep); }
.plot-hint kbd {
    font: 11.5px var(--font-mono);
    padding: 1px 5px;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--fg-secondary);
}

/* The svg */
.plot-svg { display: block; font-family: var(--font-mono); touch-action: pan-y; cursor: crosshair; }
.plot-svg:active { cursor: grabbing; }
.plot-band { fill: transparent; }
.plot-grid line { stroke: var(--plot-grid); shape-rendering: crispEdges; }
.plot-zero { stroke: var(--plot-zero); shape-rendering: crispEdges; }
.plot-sep { stroke: var(--plot-sep); shape-rendering: crispEdges; }
.plot-line { fill: none; stroke-width: 1.5; stroke-linejoin: round; }
.plot-impulse line, .plot-impulse path { stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.plot-impulse text { fill: currentColor; font-family: var(--font-mono); font-size: 12px; }
.plot-axis { color: var(--fg-muted); }
.plot-axis text { font-family: var(--font-mono); font-size: 11px; fill: var(--fg-muted); }
.plot-cross { stroke: var(--plot-cross); stroke-dasharray: 4 4; shape-rendering: crispEdges; pointer-events: none; }
.plot-dot { stroke: var(--plot-bg); stroke-width: 2; pointer-events: none; }
.plot-tag text { font: 600 11px var(--font-mono); fill: var(--plot-tag-ink); }
.plot-xtag rect { fill: var(--plot-cross-label); }
.plot-xtag text { font: 500 11px var(--font-mono); fill: var(--plot-cross-ink); }
.plot-overlay { fill: transparent; }

@media (prefers-reduced-motion: reduce) {
    .plot-line, .plot-lg b, .plot-wheel-hint { transition: none; }
}

/* Overlays: a second, dashed line on a panel (the scaling calculator's
   theoretical line), and markers: dots for measured and check points. */
.plot-line--overlay { stroke: currentColor; stroke-dasharray: 6 4; opacity: 0.7; }
.plot-lg--sub { font-size: 11px; }
.plot-lg .plot-lg-dash { background: repeating-linear-gradient(90deg, var(--plot-c) 0 3px, transparent 3px 5px); }
.plot-marker circle { fill: var(--plot-bg); stroke: currentColor; stroke-width: 2; }
.plot-marker--point circle { fill: currentColor; }
.plot-marker--check circle { stroke: var(--plot-s2); }
.plot-marker--measured circle { fill: var(--plot-s2); stroke: var(--plot-bg); }
.plot-marker--target circle { stroke: var(--plot-s3); }
.plot-stage.is-pending .plot-overlays, .plot-stage.is-pending .plot-markers { opacity: 0.4; }
.plot-stage.is-blocked .plot-overlays,
.plot-stage.is-blocked .plot-markers { display: none !important; }