/* Visual pass (2026-11-13): figures drawn instead of written. Loaded last on the workspace.
   Every graphic is painted by class from the theme's custom properties (rule 9), and every
   graphic in the markup carries a text alternative with the same numbers. */

/* ── Evidence panel: the AI confidence label and the scorecard as one block (evidence.js) ── */
.workbench .evidence { padding-bottom: 10px; }
.ev-verdict { margin: 16px 18px 2px; padding: 2px 0 2px 14px; border-left: 4px solid var(--rule-strong); }
.ev-verdict[data-tone="pos"] { border-left-color: var(--pos); }
.ev-verdict[data-tone="neg"] { border-left-color: var(--neg); }
.ev-verdict[data-tone="neutral"] { border-left-color: var(--ink-2); }
.ev-verdict-line { margin: 0; font-size: 22px; font-weight: 650; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.workbench .ev-verdict .confidence-summary { max-width: 78ch; margin: 5px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.ev-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.workbench .ev-meta .confidence-model { margin: 0; font-size: 12px; color: var(--muted); }
.ev-meta:empty { display: none; }
.ev-scope { padding: 2px 9px; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface-2); border-radius: var(--pill, 999px); }

.ev-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 16px 18px 6px; background: var(--rule); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.ev-tile { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 13px 15px 12px; background: var(--surface); animation: ev-rise .32s ease both; }
.ev-tile.ev-wide { grid-column: span 2; }
.ev-tile:nth-child(2) { animation-delay: .04s; }
.ev-tile:nth-child(3) { animation-delay: .08s; }
.ev-tile:nth-child(4) { animation-delay: .12s; }
.ev-tile:nth-child(n+5) { animation-delay: .16s; }
.ev-label { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: var(--label, .07em); text-transform: uppercase; color: var(--muted); }
.ev-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; }
.ev-num { font: 600 24px/1.1 var(--mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.ev-num-sm { font-size: 16px; }
.ev-to { color: var(--muted); }
.ev-chip { padding: 2px 8px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border-radius: var(--pill, 999px); }
.ev-caption { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.ev-state { display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 650; color: var(--ink); }
.ev-tile[data-tone="pos"] :is(.ev-chip, .ev-state) { color: var(--pos); }
.ev-tile[data-tone="neg"] :is(.ev-chip, .ev-state) { color: var(--neg); }
.ev-tile[data-tone="muted"] .ev-state { color: var(--muted); }

/* Graphics. Selectors name ev-chart so the chart colour contract reads them. */
.ev-chart { position: relative; height: 14px; margin-top: 2px; }
.ev-chart.ev-diverge::before, .ev-chart.ev-track::before, .ev-chart.ev-timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--rule); }
.ev-chart.ev-diverge { height: 18px; }
.ev-chart.ev-diverge .zone { position: absolute; top: 1px; bottom: 1px; background: var(--surface-2); border-inline: 1px dashed var(--rule-strong); }
.ev-chart.ev-diverge .tie { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); }
.ev-chart.ev-diverge .bar { position: absolute; top: 6px; height: 6px; background: var(--muted); border-radius: 3px; }
.ev-tile[data-tone="pos"] .ev-chart.ev-diverge .bar { background: var(--pos); }
.ev-tile[data-tone="neg"] .ev-chart.ev-diverge .bar { background: var(--neg); }
.ev-tile[data-tone="neutral"] .ev-chart.ev-diverge .bar { background: var(--ink-2); }
.ev-chart .dot { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; background: var(--ink); border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.ev-tile[data-tone="pos"] .ev-chart .dot { background: var(--pos); }
.ev-tile[data-tone="neg"] .ev-chart .dot { background: var(--neg); }
.ev-chart .dot.clipped { border-radius: 2px; }
.ev-axis { position: relative; height: 15px; font: 500 11px/15px var(--mono); color: var(--muted); }
.ev-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.ev-axis span[style="left:0%"] { transform: none; }
.ev-axis span[style="left:100%"] { transform: translateX(-100%); }
.ev-axis em { position: absolute; top: 15px; font: 500 11px/15px var(--sans); font-style: normal; }
.ev-axis em:first-child { left: 0; }
.ev-axis em:last-child { right: 0; }
.ev-tile[data-key="error"] .ev-axis { height: 30px; }
.ev-axis.ev-ends { display: flex; justify-content: space-between; gap: 8px; height: auto; }
.ev-axis.ev-ends span { position: static; transform: none; }

.ev-chart.ev-strip { display: flex; gap: 3px; height: 20px; }
.ev-chart.ev-strip span { flex: 1 1 0; min-width: 3px; background: transparent; border: 1.5px solid var(--rule-strong); border-radius: 4px; }
.ev-chart.ev-strip span[data-result="won"] { background: var(--pos); border-color: var(--pos); }
.ev-chart.ev-strip span[data-result="lost"] { border-color: var(--neg); }
.ev-chart.ev-strip span[data-result="tied"] { border-style: dashed; border-color: var(--muted); }

.ev-chart.ev-track .span { position: absolute; top: 3px; height: 8px; background: var(--rule-strong); border-radius: 4px; }
.ev-chart.ev-track .ref { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--brand); }
.ev-chart.ev-track .trend { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--surface); border: 1.5px solid var(--muted); transform: rotate(45deg); }
.ev-chart.ev-track .fill { position: absolute; left: 0; top: 3px; height: 8px; background: var(--ink-2); border-radius: 4px; }

.ev-chart.ev-turns { display: flex; flex-wrap: wrap; gap: 5px; height: auto; }
.ev-chart.ev-turns span { width: 11px; height: 11px; border: 1.5px solid var(--muted); border-radius: 50%; }
.ev-chart.ev-turns span[data-caught] { background: var(--ink); border-color: var(--ink); }
.ev-tile[data-tone="pos"] .ev-chart.ev-turns span[data-caught] { background: var(--pos); border-color: var(--pos); }

.ev-chart.ev-timeline { height: 16px; }
.ev-chart.ev-timeline .seg { position: absolute; top: 3px; height: 10px; background: var(--surface-2); border: 1px solid var(--rule-strong); border-radius: 3px; }
.ev-chart.ev-timeline .seg:nth-child(even) { background: var(--rule-soft); }
.ev-chart.ev-timeline .seg.last { background: var(--brand-wash); border-color: var(--brand); }
.ev-h { display: inline-flex; align-items: center; gap: 5px; color: var(--brand); }
.ev-h::before { content: ""; width: 14px; height: 8px; background: var(--brand-wash); border: 1px solid var(--brand); border-radius: 2px; }

.ev-gauges { display: grid; gap: 8px; margin-top: 2px; }
.ev-gauge-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 42px; align-items: center; gap: 10px; }
.ev-level { font: 600 11.5px var(--mono); color: var(--muted); }
.ev-obs { font: 600 13px var(--mono); text-align: right; color: var(--ink); }
.ev-chart.ev-gauge { height: 10px; margin: 0; background: var(--surface-2); border-radius: 5px; box-shadow: inset 0 0 0 1px var(--rule); }
.ev-chart.ev-gauge .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brand-wash); border-right: 2px solid var(--brand); border-radius: 5px 0 0 5px; transform-origin: left; animation: ev-grow .5s ease both; }
.ev-chart.ev-gauge .target { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink); }

/* Notes attached to a figure: a disclosure, so each stays one key press away. */
.ev-fn { font-size: 12px; }
.ev-tile > .ev-fn { margin-top: auto; padding-top: 2px; }
.ev-fn summary { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 1px 10px 1px 8px; font-size: 11px; font-weight: 600; color: var(--brand); list-style: none; border: 1px solid var(--rule); border-radius: var(--pill, 999px); cursor: pointer; }
.ev-fn summary::-webkit-details-marker { display: none; }
.ev-fn summary::before { content: "+" / ""; font: 600 12px/1 var(--mono); }
.ev-fn[open] summary::before { content: "\2212" / ""; }
.workbench .ev-fn > summary { border-bottom-color: var(--rule); }
.ev-fn summary:hover { background: var(--surface-hover); }
.ev-fn summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ev-fn ul { margin: 7px 0 0; padding-left: 15px; line-height: 1.45; color: var(--ink-2); }
.ev-fn li + li { margin-top: 4px; }
.ev-meta .ev-fn { display: inline-block; }
.ev-meta .ev-fn[open] { display: block; flex: 1 1 100%; }
.workbench .evidence > #confidenceMethodBlock { margin: 10px 18px 0; }
.workbench .evidence > .confidence-notes { margin: 10px 18px 0; }

@keyframes ev-rise { from { opacity: 0; transform: translateY(4px); } }
@keyframes ev-grow { from { transform: scaleX(0); } }
@media (max-width: 1100px) {
  .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ev-verdict, .ev-grid, .workbench .evidence > #confidenceMethodBlock { margin-inline: 12px; }
  .ev-grid { grid-template-columns: minmax(0, 1fr); }
  .ev-tile.ev-wide { grid-column: auto; }
  .ev-verdict-line { font-size: 19px; }
  .ev-num { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .ev-tile, .ev-chart.ev-gauge .fill { animation: none; }
}

/* ── Equity trends: each statement line and annual key figure drawn by period (equities.js) ── */
.eq-spark { display: block; overflow: visible; }
.eq-spark rect.pos { fill: var(--muted); opacity: .55; }
.eq-spark rect.pos.last { fill: var(--brand); opacity: 1; }
.eq-spark rect.neg { fill: var(--neg); opacity: .75; }
.eq-spark rect.neg.last { opacity: 1; }
.eq-spark line.base { stroke: var(--rule-strong); stroke-width: 1; }
.workbench .eq-statement th.eq-trend-head { width: 92px; text-align: left; }
.eq-trend-head small { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.workbench .eq-statement td.eq-trend { width: 92px; padding-block: 6px; vertical-align: middle; }
.eq-fact-trend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 7px; }
.eq-delta { font: 600 11px/1.3 var(--mono); color: var(--ink-2); white-space: nowrap; }

/* ── Commodity outlook cards: the board row's figures beside the outlook prose (app.html) ── */
.ol-body { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 12px 26px; align-items: start; margin: 12px 0 6px; }
.ol-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; margin: 0; }
.ol-fig { min-width: 0; }
.ol-fig dt { font-size: 10.5px; font-weight: 600; letter-spacing: var(--label, .07em); text-transform: uppercase; color: var(--muted); }
.ol-fig dd { margin: 3px 0 0; font: 600 16px/1.2 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.ol-fig dd.pos { color: var(--pos); }
.ol-fig dd.neg { color: var(--neg); }
.ol-fig small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.35; color: var(--muted); }
.ol-chart { margin-top: 10px; }
.ol-prose { max-width: 70ch; }
.workbench .ol-prose .outlook-summary { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.workbench .ol-prose .outlook-summary.ol-lede { color: var(--ink); }
.workbench .ol-card summary .ol-conf[data-state="supported"] { color: var(--pos); }
.workbench .ol-card summary .ol-conf[data-state="weak"] { color: var(--neg); }
.ol-card .outlook-card-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
@media (max-width: 760px) {
  .ol-body { grid-template-columns: minmax(0, 1fr); }
}

/* ── "How this assessment is made": the grade drawn, then the label's and the figures' method
   side by side (app.html #confidenceMethodBlock, evidence.js gradeScale) ── */
.ev-scale { margin: 12px 0 14px; max-width: 640px; }
.ev-chart.ev-zones { height: 12px; margin-top: 22px; }
.ev-chart.ev-zones .zone { position: absolute; top: 0; bottom: 0; background: var(--surface-2); border: 1px solid var(--rule); }
.ev-chart.ev-zones .zone[data-zone="beats"] { border-color: var(--pos); border-top-width: 3px; border-radius: 6px 0 0 6px; }
.ev-chart.ev-zones .zone[data-zone="trails"] { border-color: var(--neg); border-top-width: 3px; border-radius: 0 6px 6px 0; }
.ev-chart.ev-zones .mark { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--ink); }
.ev-chart.ev-zones .mark b { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 2px; font: 600 11px/1.2 var(--mono); white-space: nowrap; color: var(--ink); }
.ev-chart.ev-zones .mark.clipped b { transform: translateX(-100%); }
.ev-zone-names { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 7px; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.ev-zone-names span:nth-child(2) { text-align: center; }
.ev-zone-names span:last-child { text-align: right; }
.ev-zone-names strong { display: block; font-weight: 650; color: var(--ink); }
.ev-method-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.ev-method-col { min-width: 0; padding-left: 12px; border-left: 2px solid var(--rule); }
.ev-method-col[hidden] { display: none; }
.ev-method-col h3 { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: var(--label, .07em); text-transform: uppercase; color: var(--muted); }
.workbench .ev-method-col .confidence-method { max-width: 66ch; margin: 0 0 8px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 900px) {
  .ev-method-cols { grid-template-columns: minmax(0, 1fr); }
}