/* ===========================================================================
   evidence.css — styles for the Evidence Panel (app/static/evidence.js)

   SELF-CONTAINED AND ADDITIVE. Every selector is prefixed `.ev` or `.ev-`, so
   this file cannot collide with index.html's inline stylesheet or with
   site.css. It is loaded alongside them, never instead of them.

   It reuses index.html's design tokens (--desk-2, --line, --ink, --mint, …)
   through var() with a literal fallback, so it looks native inside the app and
   still renders correctly if mounted anywhere those tokens are absent — a test
   harness, a public card page, an email preview.

   DESIGN INTENT: brokerage clarity, not a spreadsheet. Reading order is
   verdict → what happens next → why → who disagreed → what we actually know.
   Three things are deliberately loud: an UNAVAILABLE price layer, a
   PROJECTION, and a RUMOUR. Each of those has cost a user money somewhere by
   being quiet.
   ======================================================================== */

.ev {
  --ev-desk:  var(--desk-2, #181e28);
  --ev-raise: var(--desk-3, #1f2733);
  --ev-line:  var(--line, #2b3543);
  --ev-ink:   var(--ink, #e8edf2);
  --ev-dim:   var(--ink-dim, #94a3b4);
  --ev-faint: var(--ink-faint, #5f6f80);
  --ev-mint:  var(--mint, #4fe3a3);
  --ev-amber: var(--amber, #f2c14e);
  --ev-coral: var(--coral, #ff6b6b);
  --ev-violet:var(--violet, #9d8cff);
  --ev-mono:  var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  --ev-sans:  var(--sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);

  font-family: var(--ev-sans);
  color: var(--ev-ink);
  background: var(--ev-desk);
  border: 1px solid var(--ev-line);
  border-radius: 12px;
  padding: 0;
  margin: 14px 0 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.5;
}

/* ---- head ------------------------------------------------------------- */
.ev-head {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: flex-start; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ev-line);
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}
.ev-h-title { font-weight: 650; font-size: 14px; letter-spacing: .01em; }
.ev-h-sub {
  font-family: var(--ev-mono); font-size: 10.5px;
  color: var(--ev-faint); margin-top: 2px;
}
.ev-h-note {
  font-size: 11px; color: var(--ev-dim);
  max-width: 42ch; text-align: right;
}

/* ---- verdict bar ------------------------------------------------------ */
.ev-verdict {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 13px 16px 6px;
}
.ev-verdict-label {
  font-family: var(--ev-mono); font-size: 15px; font-weight: 700;
  letter-spacing: .08em;
}
.ev-v-sell  .ev-verdict-label { color: var(--ev-coral); }
.ev-v-short .ev-verdict-label { color: var(--ev-amber); }
.ev-v-long  .ev-verdict-label { color: var(--ev-mint); }
.ev-v-unknown .ev-verdict-label { color: var(--ev-dim); }
.ev-regime { font-size: 12px; color: var(--ev-dim); }

.ev-chiprow {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 16px 12px;
}
.ev-chip {
  font-family: var(--ev-mono); font-size: 10px;
  padding: 3px 8px; border-radius: 20px;
  border: 1px solid var(--ev-line);
  background: var(--ev-raise); color: var(--ev-dim);
  white-space: nowrap;
}
.ev-chip-absent { border-style: dashed; color: var(--ev-faint); }
.ev-conf { color: var(--ev-ink); }
.ev-basis-ok { border-color: rgba(79,227,163,.34); color: var(--ev-mint); }
.ev-basis-weak,
.ev-conflict { border-color: rgba(242,193,78,.40); color: var(--ev-amber); }
.ev-basis-unknown { border-style: dashed; color: var(--ev-faint); }

/* ---- generic block ---------------------------------------------------- */
.ev-block { border-top: 1px solid var(--ev-line); }
.ev-block-h {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 11px 16px 0;
}
.ev-block-h h4 {
  margin: 0; font-family: var(--ev-mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ev-dim);
  font-weight: 600;
}
.ev-block-sub { font-size: 11px; color: var(--ev-faint); }
.ev-block-b { padding: 8px 16px 14px; }

.ev-fine { font-size: 11px; color: var(--ev-faint); margin: 8px 0 0; }
.ev-dim { color: var(--ev-faint); font-family: var(--ev-mono); font-size: 10px; }

/* An absence, styled so it can never be mistaken for a value. */
.ev-absent {
  font-family: var(--ev-mono); font-size: 11px;
  color: var(--ev-faint); font-style: italic;
}
.ev-empty {
  border: 1px dashed var(--ev-line); border-radius: 8px;
  padding: 10px 12px; background: rgba(255,255,255,.015);
}
.ev-empty-h {
  display: block; font-family: var(--ev-mono); font-size: 11px;
  color: var(--ev-dim); margin-bottom: 3px;
}
.ev-empty-why { font-size: 11.5px; color: var(--ev-faint); }

/* ---- projected path --------------------------------------------------- */
.ev-path {
  border: 1px solid var(--ev-line); border-left: 3px solid var(--ev-violet);
  border-radius: 8px; padding: 11px 13px; background: var(--ev-raise);
}
.ev-path-sell { border-left-color: var(--ev-coral); }
.ev-path-long { border-left-color: var(--ev-mint); }
.ev-projection-tag {
  display: inline-block; font-family: var(--ev-mono); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ev-violet); border: 1px solid rgba(157,140,255,.42);
  background: rgba(157,140,255,.12);
  padding: 2px 8px; border-radius: 4px; margin-bottom: 7px;
}
.ev-path-title { font-weight: 620; font-size: 13.5px; margin-bottom: 4px; }
.ev-path-note { margin: 0; color: var(--ev-ink); font-size: 12.5px; }
.ev-path-caveat {
  margin: 8px 0 0; padding: 8px 10px; font-size: 12px;
  color: var(--ev-amber);
  background: rgba(242,193,78,.08);
  border: 1px solid rgba(242,193,78,.28); border-radius: 6px;
}
.ev-path .ev-chiprow { padding: 9px 0 0; }

/* ---- reasons ---------------------------------------------------------- */
.ev-reasons { margin: 0; padding-left: 17px; }
.ev-reasons li { margin: 0 0 5px; font-size: 12.5px; }
.ev-reasons li.ev-counter { color: var(--ev-amber); }

/* ---- cases + signals -------------------------------------------------- */
.ev-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ev-case {
  border: 1px solid var(--ev-line); border-radius: 8px;
  padding: 9px 11px; background: var(--ev-raise);
}
.ev-case-h {
  font-family: var(--ev-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 6px;
}
.ev-case-hold .ev-case-h { color: var(--ev-mint); }
.ev-case-sell .ev-case-h { color: var(--ev-coral); }
.ev-case ul { margin: 0; padding-left: 15px; }
.ev-case li { font-family: var(--ev-mono); font-size: 11px; margin-bottom: 3px; }
.ev-none { font-size: 11px; color: var(--ev-faint); font-style: italic; }

.ev-conflict-box {
  margin-top: 10px; padding: 9px 11px; border-radius: 8px;
  border: 1px solid rgba(242,193,78,.32); background: rgba(242,193,78,.07);
}
.ev-conflict-h {
  display: block; font-family: var(--ev-mono); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ev-amber);
  margin-bottom: 4px;
}
.ev-conflict-box p { margin: 0; font-size: 12px; }
.ev-warn {
  margin-top: 10px; padding: 9px 11px; border-radius: 8px; font-size: 12px;
  border: 1px solid rgba(255,107,107,.32); background: rgba(255,107,107,.07);
  color: var(--ev-coral);
}

.ev-sigs { margin-top: 12px; display: grid; gap: 4px; }
.ev-sig { display: grid; grid-template-columns: 96px 1fr 30px; gap: 8px; align-items: center; }
.ev-sig-n { font-size: 11px; color: var(--ev-dim); }
.ev-sig-bar {
  height: 5px; border-radius: 3px; background: var(--ev-line);
  position: relative; overflow: hidden;
}
.ev-sig-bar.ev-sig-none { background: repeating-linear-gradient(90deg,
  var(--ev-line) 0 4px, transparent 4px 8px); }
.ev-sig-fill { display: block; height: 100%; border-radius: 3px; }
i.ev-sig-hold { background: var(--ev-mint); }
i.ev-sig-sell { background: var(--ev-coral); }
i.ev-sig-mid  { background: var(--ev-dim); }
.ev-sig-v { font-family: var(--ev-mono); font-size: 10.5px; text-align: right; }
span.ev-sig-hold { color: var(--ev-mint); }
span.ev-sig-sell { color: var(--ev-coral); }
span.ev-sig-mid  { color: var(--ev-dim); }

/* ---- flags and credibility -------------------------------------------- */
/* THE POINT OF THIS SECTION: a rumour must not be able to pass for a fact at a
   glance. Confirmed is the only level that gets a solid border and a filled
   dot. Everything else is dashed, and rumour is dashed AND desaturated AND
   carries the word. Three independent cues, so colour-blindness or a
   monochrome screenshot still separates them. */
.ev-legend {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px;
  padding-bottom: 8px; border-bottom: 1px dashed var(--ev-line);
}
.ev-flags { display: grid; gap: 6px; }
.ev-flag {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 8px;
  align-items: start; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--ev-line); background: var(--ev-raise);
}
.ev-flag-icon { font-family: var(--ev-mono); font-size: 11px; color: var(--ev-dim); }
.ev-flag-label { display: block; font-size: 12.5px; font-weight: 600; }
.ev-flag-detail { display: block; font-size: 11.5px; color: var(--ev-dim); margin-top: 2px; }

.ev-cred {
  font-family: var(--ev-mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap;
  padding: 2px 8px; border-radius: 4px; align-self: start;
  border: 1px solid var(--ev-line); color: var(--ev-dim);
}
.ev-cred-dot { font-style: normal; margin-right: 5px; }

.ev-flag.ev-cred-confirmed { border-color: rgba(79,227,163,.36); }
.ev-cred-confirmed .ev-cred, .ev-cred.ev-cred-confirmed {
  color: var(--ev-mint); border-color: rgba(79,227,163,.42);
  background: rgba(79,227,163,.12);
}
.ev-flag.ev-cred-suspected { border-color: rgba(242,193,78,.34); border-style: dashed; }
.ev-cred-suspected .ev-cred, .ev-cred.ev-cred-suspected {
  color: var(--ev-amber); border-color: rgba(242,193,78,.42);
  border-style: dashed; background: rgba(242,193,78,.10);
}
.ev-flag.ev-cred-predicted { border-color: rgba(157,140,255,.30); border-style: dashed; }
.ev-cred-predicted .ev-cred, .ev-cred.ev-cred-predicted {
  color: var(--ev-violet); border-color: rgba(157,140,255,.40);
  border-style: dashed; background: rgba(157,140,255,.10);
}
/* Rumour and unreviewed: dashed, desaturated, and never coloured like a fact. */
.ev-flag.ev-cred-rumor, .ev-flag.ev-cred-pending, .ev-flag.ev-cred-unknown {
  border-style: dashed; border-color: var(--ev-line);
  background: transparent; opacity: .82;
}
.ev-cred-rumor .ev-cred, .ev-cred.ev-cred-rumor,
.ev-cred-pending .ev-cred, .ev-cred.ev-cred-pending,
.ev-cred-unknown .ev-cred, .ev-cred.ev-cred-unknown {
  color: var(--ev-faint); border-style: dashed; background: transparent;
}
.ev-flag.ev-cred-rejected { border-style: dashed; opacity: .6; }
.ev-cred-rejected .ev-cred { color: var(--ev-faint); text-decoration: line-through; }

.ev-notes { margin: 9px 0 0; padding-left: 17px; }
.ev-notes li { font-size: 11.5px; color: var(--ev-dim); margin-bottom: 3px; }

/* ---- cohort ----------------------------------------------------------- */
.ev-cohort-read {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  margin-bottom: 9px;
}
.ev-tier {
  font-family: var(--ev-mono); font-size: 10px; padding: 2px 7px;
  border-radius: 4px; background: rgba(157,140,255,.14);
  color: var(--ev-violet); border: 1px solid rgba(157,140,255,.30);
}
.ev-rings { display: grid; gap: 6px; }
.ev-ring {
  display: grid; grid-template-columns: 148px 1fr auto; gap: 10px;
  align-items: center; font-size: 11.5px;
}
.ev-ring-n { color: var(--ev-dim); }
.ev-ring-b { display: flex; align-items: center; gap: 8px; }
.ev-pctl {
  position: relative; flex: 1; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, var(--ev-line), var(--ev-violet));
  min-width: 60px;
}
.ev-pctl i {
  position: absolute; top: -3px; width: 2px; height: 11px;
  background: var(--ev-ink); border-radius: 1px; transform: translateX(-1px);
}
.ev-ring-v, .ev-ring-m { font-family: var(--ev-mono); font-size: 10.5px; color: var(--ev-dim); }
.ev-ring-none .ev-ring-b { opacity: .75; }

/* ---- price layers ----------------------------------------------------- */
.ev-prov-head {
  font-size: 11.5px; padding: 8px 10px; border-radius: 7px; margin-bottom: 9px;
  border: 1px solid var(--ev-line);
}
.ev-provh-sold { color: var(--ev-mint); border-color: rgba(79,227,163,.32);
  background: rgba(79,227,163,.07); }
.ev-provh-ask { color: var(--ev-amber); border-color: rgba(242,193,78,.30);
  background: rgba(242,193,78,.06); }

.ev-layers { display: grid; gap: 8px; }
.ev-layer {
  border: 1px solid var(--ev-line); border-radius: 8px;
  padding: 10px 12px; background: var(--ev-raise);
}
.ev-layer-top {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}
.ev-layer-label { font-weight: 620; font-size: 12.5px; }
.ev-layer-value {
  margin-left: auto; font-family: var(--ev-mono); font-size: 15px;
  font-weight: 700; letter-spacing: -.01em;
}
.ev-layer-basis { font-size: 11.5px; color: var(--ev-dim); margin-top: 3px; }
.ev-layer-note { font-size: 11.5px; color: var(--ev-dim); margin-top: 7px; }

/* Provenance is the single most load-bearing word in this panel. A realised
   sale reads green; anything that is an offer or a blend reads amber; an
   unstated source reads dashed and grey. They must never look alike. */
.ev-prov {
  font-family: var(--ev-mono); font-size: 9px; letter-spacing: .12em;
  padding: 2px 7px; border-radius: 4px; white-space: nowrap;
  border: 1px solid var(--ev-line); color: var(--ev-dim);
}
.ev-prov-sold { color: var(--ev-mint); border-color: rgba(79,227,163,.42);
  background: rgba(79,227,163,.12); }
.ev-prov-ask { color: var(--ev-amber); border-color: rgba(242,193,78,.40);
  background: rgba(242,193,78,.10); }
.ev-prov-blend { color: var(--ev-violet); border-color: rgba(157,140,255,.40);
  background: rgba(157,140,255,.10); }
.ev-prov-unknown { border-style: dashed; color: var(--ev-faint); background: transparent; }

.ev-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.ev-badge {
  font-family: var(--ev-mono); font-size: 9.5px; padding: 2px 7px;
  border-radius: 4px; border: 1px solid var(--ev-line); color: var(--ev-dim);
  background: rgba(255,255,255,.02); white-space: nowrap;
}
.ev-stale {
  color: var(--ev-amber); border-color: rgba(242,193,78,.45);
  background: rgba(242,193,78,.12); font-weight: 700; letter-spacing: .06em;
}
.ev-fresh { color: var(--ev-mint); border-color: rgba(79,227,163,.30); }
.ev-n-solid { color: var(--ev-mint); border-color: rgba(79,227,163,.28); }
.ev-n-mid { color: var(--ev-dim); }
.ev-n-thin { color: var(--ev-amber); border-color: rgba(242,193,78,.32); }
.ev-n-unknown { border-style: dashed; color: var(--ev-faint); }
.ev-src { color: var(--ev-faint); }

.ev-layer-stale { border-color: rgba(242,193,78,.32); }

/* An UNAVAILABLE layer. Loud on purpose: it is shown, never hidden, and it
   carries its reason instead of a number. */
.ev-layer-empty {
  border-style: dashed; background: transparent;
}
.ev-layer-none {
  font-family: var(--ev-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ev-faint);
}
.ev-layer-why {
  margin-top: 8px; font-size: 11.5px; color: var(--ev-dim);
  border-left: 2px solid var(--ev-line); padding-left: 9px;
}
.ev-why-h {
  display: block; font-family: var(--ev-mono); font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ev-faint);
  margin-bottom: 3px;
}

.ev-spread {
  margin-top: 10px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--ev-line); background: var(--ev-raise);
  display: grid; grid-template-columns: auto auto; gap: 4px 10px;
}
.ev-spread-h {
  font-family: var(--ev-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ev-dim);
}
.ev-spread-v { font-family: var(--ev-mono); font-size: 13px; text-align: right; }
.ev-spread p { grid-column: 1 / -1; margin: 0; font-size: 11.5px; color: var(--ev-dim); }
.ev-spread-none { border-style: dashed; background: transparent; }
.ev-spread-none .ev-spread-v { color: var(--ev-faint); font-size: 11px; }

/* ---- spike ------------------------------------------------------------ */
.ev-spike {
  border: 1px solid var(--ev-line); border-left: 3px solid var(--ev-dim);
  border-radius: 8px; padding: 10px 12px; background: var(--ev-raise);
}
.ev-spike-live { border-left-color: var(--ev-amber); }
.ev-spike-h { font-weight: 640; font-size: 13px; margin-bottom: 5px; }
.ev-spike p { margin: 0 0 6px; font-size: 12px; }
.ev-spike .ev-chiprow { padding: 4px 0 0; }

/* ---- stability -------------------------------------------------------- */
.ev-stab-basis { font-size: 12px; color: var(--ev-dim); }
.ev-pending {
  margin-top: 7px; padding: 9px 11px; border-radius: 8px; font-size: 12px;
  border: 1px solid rgba(157,140,255,.30); background: rgba(157,140,255,.07);
}
.ev-pending-none { border-color: var(--ev-line); background: transparent;
  color: var(--ev-faint); }

/* ---- position --------------------------------------------------------- */
.ev-pos { display: flex; align-items: baseline; gap: 9px; }
.ev-pos-v { font-family: var(--ev-mono); font-size: 17px; font-weight: 700; }
.ev-pos-up .ev-pos-v { color: var(--ev-mint); }
.ev-pos-down .ev-pos-v { color: var(--ev-coral); }
.ev-pos-l { font-size: 11.5px; color: var(--ev-dim); }
.ev-block[data-ev="position"] p { font-size: 12px; margin: 7px 0 0; }

/* ---- data table ------------------------------------------------------- */
.ev-kvs { display: grid; gap: 5px; }
.ev-kv {
  display: grid; grid-template-columns: 170px 1fr; gap: 10px;
  font-size: 11.5px; align-items: baseline;
}
.ev-k { color: var(--ev-faint); font-family: var(--ev-mono); font-size: 10px;
  letter-spacing: .04em; }
.ev-v { color: var(--ev-ink); }
.ev-hs {
  font-family: var(--ev-mono); font-size: 10px; padding: 2px 7px;
  border-radius: 4px; border: 1px solid var(--ev-line);
}
.ev-hs-ok { color: var(--ev-mint); border-color: rgba(79,227,163,.32); }
.ev-hs-bad { color: var(--ev-coral); border-color: rgba(255,107,107,.36);
  background: rgba(255,107,107,.08); }
.ev-hs-unknown { border-style: dashed; color: var(--ev-faint); }

/* ---- foot ------------------------------------------------------------- */
.ev-foot {
  border-top: 1px solid var(--ev-line);
  padding: 9px 16px; font-size: 10.5px; color: var(--ev-faint);
  font-family: var(--ev-mono);
}

/* ---- narrow screens --------------------------------------------------- */
@media (max-width: 620px) {
  .ev-head { flex-direction: column; }
  .ev-h-note { text-align: left; max-width: none; }
  .ev-cases { grid-template-columns: 1fr; }
  .ev-ring { grid-template-columns: 1fr; gap: 3px; }
  .ev-kv { grid-template-columns: 1fr; gap: 1px; }
  .ev-sig { grid-template-columns: 84px 1fr 28px; }
  .ev-layer-value { margin-left: 0; width: 100%; }
}

/* ---- light theme ------------------------------------------------------
   index.html ships dark, and site.css layers light on top twice (media query
   and explicit toggle). The panel inherits whichever token set is active, so
   the only thing it needs to restate is the handful of literal rgba washes
   that assume a dark ground. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ev {
    background: var(--desk-2, #ffffff);
  }
  :root:not([data-theme="dark"]) .ev-layer,
  :root:not([data-theme="dark"]) .ev-case,
  :root:not([data-theme="dark"]) .ev-path,
  :root:not([data-theme="dark"]) .ev-spike,
  :root:not([data-theme="dark"]) .ev-flag,
  :root:not([data-theme="dark"]) .ev-spread {
    background: var(--desk-3, #eef1f6);
  }
  :root:not([data-theme="dark"]) .ev-badge { background: transparent; }
}
:root[data-theme="light"] .ev { background: var(--desk-2, #ffffff); }
:root[data-theme="light"] .ev-layer,
:root[data-theme="light"] .ev-case,
:root[data-theme="light"] .ev-path,
:root[data-theme="light"] .ev-spike,
:root[data-theme="light"] .ev-flag,
:root[data-theme="light"] .ev-spread { background: var(--desk-3, #eef1f6); }