/* ============================================================
   eval.css — the codebase-evaluation results (radars, heatmaps,
   verdict gates) ported from the execution-based report.
   Chart series/verdict colors live on :root because the radar
   JS reads them via getComputedStyle(documentElement).
   ============================================================ */

:root {
    /* aliases the chart engine expects → mapped to site tokens */
    --mono: var(--font-mono);
    --line: var(--color-border);
    --line-2: var(--color-border);
    --muted: var(--color-muted);
    --ink: var(--color-text);
    --ink-2: var(--color-muted);
    --panel: var(--color-surface);

    /* system series — SingulusAI = brand teal; others kept distinct */
    --sciagi: var(--accent);
    --sciagi-soft: var(--accent-soft);
    --claude: #e05a15;  --claude-soft: rgba(224,90,21,.12);
    --codex:  #7c3aed;  --codex-soft:  rgba(124,58,237,.13);
    --gt: #9a9a90;      --gt-soft: rgba(154,154,144,.10);

    /* verdicts */
    --id: #157a3c;  --cl: #b06a09;  --dv: #b5261f;  --na: #a8a89e;
    --good: var(--id); --warn: var(--cl); --bad: var(--dv);
}
@media (prefers-color-scheme: dark) {
    :root {
        --claude: #d07a3a; --claude-soft: rgba(208,122,58,.16);
        --codex:  #a78bfa; --codex-soft:  rgba(167,139,250,.17);
        --gt: #6b6b74; --gt-soft: rgba(107,107,116,.16);
        --id: #4ade80; --cl: #fbbf24; --dv: #f87171; --na: #84848c;
    }
}

/* body copy inside results */
.body { color: var(--color-muted); line-height: 1.7; font-size: var(--font-size-base); max-width: 76ch; }
.body b, .body strong { color: var(--color-text); font-weight: 600; }
.body + .body { margin-top: 12px; }

/* problem block wrapper */
.evalproblem { margin-top: var(--space-2xl); }
.evalproblem:first-of-type { margin-top: var(--space-lg); }
.eval-grid {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: var(--space-md); margin-top: var(--space-md); align-items: start;
}
@media (max-width: 900px){ .eval-grid { grid-template-columns: 1fr; } }

.chartcard { padding: 18px 14px 12px; }
.chartcard figcaption {
    font-family: var(--font-mono); font-size: 11.5px; color: var(--color-muted);
    text-align: center; padding: 10px 12px 2px; line-height: 1.5;
}

/* radar legend */
.rlegend { display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 6px 6px 4px; font-size: 12px; color: var(--color-muted); }
.rscale { text-align: center; line-height: 1.5; max-width: 46ch; }
.rscale b { color: var(--color-text); font-weight: 600; }
.sseries { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; align-items: center; font-family: var(--font-mono); font-size: 11.5px; }
.sseries span { display: inline-flex; align-items: center; gap: 7px; color: var(--color-text); }
.smark { width: 12px; height: 12px; display: inline-block; flex: none; }
.smark.circ { border-radius: 50%; }
.smark.sq { border-radius: 2px; transform: rotate(45deg); }
.smark.tri { clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* heatmap */
.hmwrap { overflow-x: auto; }
.hm { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; min-width: 460px; }
.hm th { font: 700 10px/1.3 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); padding: 7px 8px; text-align: center; border-bottom: 1px solid var(--color-border); }
.hm th.rowh { text-align: left; width: 42%; }
.hm td { padding: 4px 6px; border-bottom: 1px solid var(--color-border); }
.hm td.rowh { color: var(--color-text); font-weight: 600; font-size: 12px; }
.cell { display: flex; align-items: center; justify-content: center; height: 26px; border-radius: 6px; font: 700 9px/1 var(--font-mono); color: #fff; letter-spacing: .02em; }
.cell.id { background: var(--id); } .cell.cl { background: var(--cl); } .cell.dv { background: var(--dv); }
.cell.na { background: var(--na); color: rgba(255,255,255,.85); }
@media (prefers-color-scheme: dark){ .cell { color: #0b0d12; } .cell.na { color: rgba(11,13,18,.8); } }

/* verdict key */
.vkey { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--color-muted); }
.vkey span { display: inline-flex; align-items: center; gap: 7px; }
.vsw { width: 12px; height: 12px; border-radius: 3px; }
.vsw.id { background: var(--id); } .vsw.cl { background: var(--cl); } .vsw.dv { background: var(--dv); } .vsw.na { background: var(--na); }

/* build/run gate cards (P2) */
.gate { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: var(--space-md); }
@media (max-width: 820px){ .gate { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px){ .gate { grid-template-columns: 1fr; } }
.gcard { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 15px 18px; box-shadow: var(--shadow-sm); }
.section:nth-of-type(even) .gcard { background: var(--color-bg); }
.gcard.gt { border-top: 3px solid var(--gt); }
.gcard.s  { border-top: 3px solid var(--sciagi); }
.gcard.c  { border-top: 3px solid var(--claude); }
.gcard.x  { border-top: 3px solid var(--codex); }
.gcard h4 { margin: 0 0 8px; font-size: 15px; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.gcard .grow { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 3px 0; color: var(--color-muted); }
.gcard .grow b { color: var(--color-text); font-weight: 600; }
.yes { color: var(--good); font-weight: 700; } .no { color: var(--bad); font-weight: 700; } .part { color: var(--warn); font-weight: 700; }

/* finding callouts */
.finding { border: 1px solid var(--color-border); border-left: 3px solid var(--accent); border-radius: 0 14px 14px 0; padding: 16px 20px; margin-top: var(--space-md); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.section:nth-of-type(even) .finding { background: var(--color-bg); }
.finding.good { border-left-color: var(--id); }
.finding.bad  { border-left-color: var(--dv); }
.finding b { color: var(--color-text); }
.finding p { margin: 0; color: var(--color-muted); font-size: 14.5px; line-height: 1.65; }
.finding code, .body code { font-family: var(--font-mono); font-size: .85em; background: var(--accent-soft); color: var(--accent); padding: 1px 5px; border-radius: 4px; }

/* tooltip */
.tooltip { position: fixed; pointer-events: none; background: var(--color-text); color: var(--color-bg); font: 600 12px/1.3 var(--font-mono); padding: 6px 9px; border-radius: 7px; opacity: 0; transition: opacity .12s; z-index: 60; white-space: nowrap; transform: translate(-50%,-140%); }

/* interface screenshot showcase */
.ui-shot { margin: var(--space-xl) auto 0; max-width: 900px; scroll-margin-top: 100px; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); }
.ui-shot img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }
.ui-shot figcaption { margin-top: 14px; text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; color: var(--color-muted); line-height: 1.5; }
.ui-shot--wide { max-width: 1120px; }
html { scroll-padding-top: 96px; }

.evalproblem .ptag { display: inline-block; font: 500 12px/1 var(--font-mono, monospace); letter-spacing: .08em; color: var(--accent); margin-bottom: 8px; text-transform: uppercase; }
.evalproblem h3.eh { font-size: var(--t-disp-md, 2rem); font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; }

/* mobile: charts/heatmaps scroll inside their cards, never the page */
.hmwrap { overflow-x: auto; }
.chartcard svg { max-width: 100%; height: auto; }