/* Fair value pane and its chart overlay (fairvalue.js). Every colour is a custom
   property: the overlay tokens are declared here for paper and for night, the rest are
   the shared tokens of next.css. */
:root {
  --chart-fair: #B45309;
  --chart-fair-band: rgba(180, 83, 9, 0.12);
}
[data-theme="dark"] {
  --chart-fair: #F5B544;
  --chart-fair-band: rgba(245, 181, 68, 0.16);
}

.chart .study-line.study-fair, .chart .study-line.study-fair.study-alt { stroke: var(--chart-fair); stroke-width: 1.75; }
.chart .study-fill.study-fair-band { fill: var(--chart-fair-band); }
.study-swatch.study-swatch-fair_value { border-top-color: var(--chart-fair); }

section.fair { margin-top: 1rem; padding: 0.9rem 1rem 0.8rem; background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--chart-fair); min-width: 0; }
section.fair[hidden] { display: none; }
.fair-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.8rem; }
.fair-head h2 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: var(--label); text-transform: uppercase; }
.fair h3 { margin: 1.1rem 0 0.45rem; font-size: 11px; font-weight: 700; letter-spacing: var(--label); text-transform: uppercase; color: var(--muted); }
.fair-state { padding: 0.18rem 0.45rem; border: 1px solid var(--rule-strong); font-size: 11px; font-weight: 600; color: var(--muted); }
.fair-state[data-state="valid"] { color: var(--pos); border-color: var(--pos); }
.fair-state[data-state="unreliable"] { color: var(--neg); border-color: var(--neg); }
.fair-tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.fair-tab { padding: 0.2rem 0.5rem; border: 1px solid var(--rule); background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.fair-tab[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); font-weight: 600; }
.fair-summary { max-width: 72ch; margin: 0.6rem 0 0; font-size: 13px; line-height: 1.5; }
.fair-refusal { font-weight: 600; }
.fair-scope { padding-left: 0.6rem; border-left: 2px solid var(--rule-strong); color: var(--ink); }
.fair-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.7rem 1.1rem; margin: 0.8rem 0 0; }
.fair-metric dt { font-size: 11px; color: var(--muted); }
.fair-metric dd { margin: 0.12rem 0 0; font-family: var(--mono); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fair-metric small { display: block; margin-top: 0.12rem; font-family: var(--sans); font-size: 11px; font-weight: 400; color: var(--muted); }
.fair-above { color: var(--neg); }
.fair-below { color: var(--pos); }
.fair-reasons { max-width: 80ch; margin: 0.6rem 0 0; padding-left: 1.1rem; font-size: 12px; line-height: 1.5; color: var(--muted); }
.fair-hint { margin: 0.8rem 0 0; font-size: 12.5px; color: var(--muted); }
.fair-drivers { display: grid; gap: 0.7rem; }
.fair-driver-name { font-size: 13px; font-weight: 600; }
.fair-driver-line { display: grid; grid-template-columns: minmax(96px, 9.5rem) minmax(60px, 1fr) 4.2rem; align-items: center; gap: 0.6rem; margin-top: 0.25rem; font-size: 12px; }
.fair-driver-label { color: var(--muted); }
.fair-driver-value { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.fair-track { position: relative; height: 10px; background: var(--rule); }
.fair-track::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--muted); }
.fair-track i { position: absolute; top: 0; bottom: 0; }
.fair-track i.pos { background: var(--pos); }
.fair-track i.neg { background: var(--neg); }
.fair-table td small { display: block; font-size: 11px; color: var(--muted); }
.fair-table .fair-reading { min-width: 16rem; white-space: normal; }
.fair-refused { color: var(--neg); font-weight: 600; }
.fair-beats { color: var(--pos); }
.fair-details { margin-top: 0.8rem; font-size: 12.5px; }
.fair-details > summary { font-weight: 600; cursor: pointer; padding: 0.3rem 0; }
.fair-facts { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: 0.35rem 1rem; margin: 0.5rem 0 0; }
.fair-facts dt { color: var(--muted); }
.fair-facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.fair-asof { margin: 0.4rem 0 0; padding-left: 1.1rem; color: var(--muted); }
.fair-diffs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.fair-diff { min-width: 0; }
.fair-diff-now { margin-top: 0.15rem; font-family: var(--mono); font-size: 12.5px; }
.fair-diff .small { margin: 0.4rem 0 0; }
.fair-spark { display: block; width: 100%; max-width: 360px; height: auto; margin-top: 0.4rem; }
.fair-spark .line { fill: none; stroke: var(--chart-fair); stroke-width: 1.5; }
.fair-spark .zero { stroke: var(--rule-strong); stroke-dasharray: 2 3; }
.fair-disclaimer { margin: 0.9rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--rule); font-size: 12px; color: var(--muted); }

@media (max-width: 600px) {
  section.fair { padding: 0.8rem 0.75rem 0.7rem; }
  .fair-driver-line { grid-template-columns: minmax(0, 1fr) 4.2rem; }
  .fair-driver-line .fair-track { grid-column: 1 / -1; order: 3; }
  .fair-facts { grid-template-columns: 1fr; gap: 0.1rem 0; }
  .fair-facts dd { margin-bottom: 0.4rem; }
}