/* ==========================================================================
   QuantAim — interactive lesson diagrams. Added 2026-09-11.

   Pairs with js/qa-viz.js and includes/academy_viz.php.

   These sit inside a lesson step and support the prose; they never carry a
   concept on their own. A student with JavaScript off gets the lesson intact
   and simply does not see the picture, which is why nothing here hides text.
   ========================================================================== */

.qa-viz {
    margin: 26px 0;
    padding: 18px 20px 14px;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 14px;
    background: var(--surface, #fff);
}

.qa-viz-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; }

.qa-viz-label {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #0369a1;
}
.qa-viz-caption { font-size: 14px; line-height: 1.55; color: var(--ink-3, #64748b); }

.qa-viz-stage { min-height: 40px; }

/* The chart itself. Scales to the column; never causes a horizontal scroll. */
.qa-viz svg { display: block; width: 100%; height: auto; overflow: visible; }

.qa-viz-axis      { stroke: var(--line, #cbd5e1); stroke-width: 1.5; }
.qa-viz-grid      { stroke: var(--line, #e2e8f0); stroke-width: 1; stroke-dasharray: 3 4; }
.qa-viz-axis-text { font-size: 11px; fill: var(--ink-3, #64748b); }

.qa-viz-line   { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.qa-viz-line.a { stroke: #0284c7; }
.qa-viz-line.b { stroke: #f59e0b; }
.qa-viz-line.c { stroke: #94a3b8; stroke-dasharray: 5 5; }

.qa-viz-fill.a { fill: #0284c7; opacity: .12; }
.qa-viz-fill.b { fill: #f59e0b; opacity: .12; }

.qa-viz-dot   { fill: #0f172a; }
.qa-viz-label-text { font-size: 12px; font-weight: 700; }
.qa-viz-label-text.a { fill: #0284c7; }
.qa-viz-label-text.b { fill: #b45309; }
/* Neutral labels on guide lines. Had no rule until 2026-09-14, so ten existing
   tags drew in SVG default black, which vanishes on the dark theme. */
.qa-viz-label-text.c { fill: #475569; }
:root[data-theme="dark"] .qa-viz-label-text.c { fill: #cbd5e1; }

/* --- controls ------------------------------------------------------------ */

.qa-viz-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px 20px;
    margin-top: 16px;
}
.qa-viz-control { display: flex; flex-direction: column; gap: 5px; }
.qa-viz-control label {
    font-size: 12.5px;
    font-weight: 650;
    color: var(--ink-2, #334155);
    display: flex; justify-content: space-between; gap: 10px;
}
.qa-viz-control label b {
    font-variant-numeric: tabular-nums;
    color: #0369a1;
    font-weight: 800;
}
.qa-viz-control input[type=range] { width: 100%; accent-color: #0284c7; }

/* --- readout ------------------------------------------------------------- */

.qa-viz-readout {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line, #e2e8f0);
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ink-2, #334155);
}
.qa-viz-readout b { color: var(--ink, #0f172a); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    .qa-viz * { transition: none !important; }
}

/* Printing a lesson should not print an interactive control it cannot use,
   but the chart itself is worth keeping. */
@media print {
    .qa-viz-controls { display: none; }
    .qa-viz { break-inside: avoid; }
}

/* --- the payoff matrix (W.gametheory, added 2026-09-14) ------------------
   The only widget that is a table rather than a chart, because a 2x2 game IS
   a table and drawing it as anything else loses the thing being taught. */
.qa-viz-matrix { margin: 4px 0 2px; overflow-x: auto; }

.qa-matrix {
    border-collapse: separate;
    border-spacing: 6px;
    width: 100%;
    min-width: 320px;
}
.qa-matrix th {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-3, #64748b);
    text-align: center;
    padding: 4px 6px;
    white-space: nowrap;
}
.qa-matrix td {
    background: #f1f5f9;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 10px;
    padding: 16px 10px 14px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    position: relative;
}
.qa-matrix td span { font-size: 20px; font-weight: 800; color: #0f172a; }
.qa-matrix td i     { font-style: normal; color: #94a3b8; margin: 0 5px; }

/* The equilibrium cell. Marked with a border and a word, not with colour
   alone, so it still reads for a colour-blind student and in print. */
.qa-matrix td.is-nash {
    background: #ecfdf5;
    border-color: #16a34a;
    box-shadow: inset 0 0 0 1px #16a34a;
}
.qa-matrix td.is-nash em {
    display: block;
    font-style: normal;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #15803d;
    margin-top: 5px;
}

:root[data-theme="dark"] .qa-matrix td { background: #16202b; }
:root[data-theme="dark"] .qa-matrix td span { color: #e2e8f0; }
:root[data-theme="dark"] .qa-matrix td.is-nash { background: #0f2a1d; }

/* --- the order book ladder (W.orderbook, 2026-09-14) --------------------- */
.qa-viz-book { margin: 2px 0; overflow-x: auto; }
.qa-book { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 300px; }
.qa-book td { padding: 3px 8px; font-size: 13px; }
.qa-book td.px { width: 72px; font-weight: 700; }
.qa-book td.sz { width: 70px; text-align: right; color: var(--ink-3, #64748b); }
.qa-book td.bar { padding: 3px 4px; }
.qa-book td.bar span { display: block; height: 13px; border-radius: 3px; }
.qa-book tr.ask td.px { color: #b91c1c; }
.qa-book tr.ask td.bar span { background: rgba(185, 28, 28, .30); margin-left: auto; }
.qa-book tr.bid td.px { color: #15803d; }
.qa-book tr.bid td.bar span { background: rgba(21, 128, 61, .30); }
.qa-book tr.is-touch td { background: rgba(2, 132, 199, .09); }
.qa-book tr.spreadrow td {
    text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-3, #64748b);
    border-top: 1px dashed var(--line, #cbd5e1); border-bottom: 1px dashed var(--line, #cbd5e1);
    padding: 5px 0;
}

/* The Ansoff grid reuses the payoff-matrix chrome but holds words, not
   numbers, so the type has to come down and wrap. */
.qa-ansoff td span { font-size: 13.5px; font-weight: 750; line-height: 1.35; display: block; }
.qa-ansoff td { padding: 14px 10px; }
.qa-ansoff td.risk-4 { background: #fff1f2; }
:root[data-theme="dark"] .qa-ansoff td.risk-4 { background: #2a1416; }