@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');
:root{
  --bg:#0c1420; --panel:#121e2e; --panel2:#0f1926; --line:#23344a;
  --ink:#dce7f2; --dim:#7d93ab; --accent:#e8b44a; --flag:#e05c5c;
  --true:#4caf7d; --false:#e05c5c; --node:#1b2c42; --nodeline:#3d5a7e;
  --label-vt:" ✓ verified true"; --label-vf:" ✗ verified false";  /* localized by engine from CFG.strings */
}
*{box-sizing:border-box; margin:0; padding:0}
body{background:var(--bg); color:var(--ink); font-family:'Libre Baskerville',Georgia,'Times New Roman',serif; height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; overscroll-behavior:none; touch-action:manipulation}
header{display:flex; align-items:center; gap:18px; padding:10px 18px; border-bottom:1px solid var(--line); background:var(--panel2); flex-wrap:wrap}
header h1{font-family:'Cormorant Garamond',Georgia,serif; font-size:25px; color:var(--accent); font-weight:600; letter-spacing:.5px}
.brand-mark{width:1.1em; height:1.1em; vertical-align:-0.15em; margin-inline-end:.4em; border-radius:5px}
.homeLink{display:inline-block; font-size:11.5px; color:var(--dim); text-decoration:none; margin-bottom:2px; transition:color .18s ease}
.homeLink:hover, .homeLink:focus-visible{color:var(--accent)}
header .sub{font-size:12px; color:var(--dim); font-style:italic}
.hud{margin-inline-start:auto; display:flex; gap:14px; align-items:center; font-size:13px}
.hud .pill{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:4px 12px}
.hud b{color:var(--accent)}
#submitBtn{background:var(--accent); color:#1a1206; border:none; border-radius:14px; padding:8px 16px; font-family:inherit; font-size:13px; cursor:pointer; font-weight:bold; min-height:40px; transition:filter .18s ease}
#submitBtn:hover{filter:brightness(1.1)}
#submitBtn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
#resetViewBtn{background:var(--panel); color:var(--dim); border:1px solid var(--line); border-radius:14px; padding:8px 14px; font-family:inherit; font-size:12.5px; cursor:pointer; min-height:40px; transition:border-color .18s ease, color .18s ease}
#resetViewBtn:hover{border-color:var(--accent); color:var(--ink)}
#resetViewBtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
main{flex:1; display:flex; min-height:0}
#graphWrap{flex:1.5; position:relative; min-width:0}
svg{width:100%; height:100%; display:block; cursor:grab; touch-action:none}
svg.panning{cursor:grabbing}
#graphHint{position:absolute; inset-inline-start:12px; bottom:10px; font-size:11px; color:var(--dim); font-style:italic; pointer-events:none; background:rgba(12,20,32,.62); padding:4px 9px; border-radius:6px; border:1px solid var(--line)}
aside{flex:1; max-width:430px; min-width:330px; border-inline-start:1px solid var(--line); display:flex; flex-direction:column; background:var(--panel2)}
#detail{padding:14px 16px; border-bottom:1px solid var(--line); min-height:172px}
#detail .hint{color:var(--dim); font-size:13px; font-style:italic; line-height:1.5}
#detail .claimText{font-size:17px; line-height:1.5; margin-bottom:10px}
#detail .btns{display:flex; gap:8px; margin-top:6px}
#detail button{font-family:inherit; font-size:13px; padding:8px 14px; border-radius:5px; border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer; min-height:40px; transition:border-color .18s ease, background .18s ease}
#detail button:hover:not(:disabled){border-color:var(--accent)}
#detail button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
#detail button:disabled{opacity:.4; cursor:default}
#detail .verdict{margin-top:10px; font-size:13px; line-height:1.45; padding:9px 11px; border-radius:6px}
.verdict.t{background:rgba(76,175,125,.12); border:1px solid var(--true); color:#9ed8bb}
.verdict.f{background:rgba(224,92,92,.12); border:1px solid var(--false); color:#f0a8a8}
#claims{flex:1; min-height:0; overflow-y:auto; padding:8px 0}
.claim{padding:9px 16px; font-size:15px; line-height:1.5; cursor:pointer; border-inline-start:3px solid transparent; color:var(--dim); transition:background .18s ease, color .18s ease, border-color .18s ease}
.claim:hover{background:rgba(255,255,255,.03); color:var(--ink)}
.claim:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; background:rgba(232,180,74,.06); color:var(--ink)}
.claim.sel{background:rgba(232,180,74,.08); border-inline-start-color:var(--accent); color:var(--ink)}
.claim.flagged{color:#f0a8a8}
.claim.flagged::before{content:"⚑ "; color:var(--flag)}
.claim.vt::after{content:var(--label-vt); color:var(--true); font-size:11px}
.claim.vf::after{content:var(--label-vf); color:var(--false); font-size:11px}
/* graph */
.edge{stroke:#33485f; stroke-width:1.4; fill:none; transition:stroke .2s ease, stroke-width .2s ease}
.edgeHit{stroke:transparent; stroke-width:22; fill:none; cursor:pointer}
.edgeLabel{font-size:11px; fill:var(--dim); cursor:pointer; font-family:Verdana,sans-serif; transition:fill .2s ease}
g.eg.sel .edge{stroke:var(--accent); stroke-width:2.2}
g.eg.sel .edgeLabel{fill:var(--accent)}
g.eg.nbr .edge{stroke:#5e7d9e; stroke-width:1.8}
g.eg.nbr .edgeLabel{fill:#a8bdd1}
g.eg.flagged .edge{stroke:var(--flag); stroke-width:2; stroke-dasharray:5 3}
g.eg.flagged .edgeLabel{fill:var(--flag)}
g.eg.revealT .edge{stroke:var(--true)!important; stroke-dasharray:none}
g.eg.revealF .edge{stroke:var(--false)!important; stroke-width:2.8!important; stroke-dasharray:9 5}  /* lies: red AND dashed (not color-only) */
g.eg.revealT .edgeLabel{fill:var(--true)!important}
g.eg.revealF .edgeLabel{fill:var(--false)!important; font-weight:bold}
.node rect{fill:var(--node); stroke:#3d5a7e; stroke-width:1.5; transition:stroke .2s ease, stroke-width .2s ease; filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.node text{fill:var(--ink); font-size:12px; text-anchor:middle; font-family:Verdana,sans-serif; pointer-events:none}
.node{cursor:grab}
.node.dragging{cursor:grabbing}
.node:hover rect{stroke:#7da0c8; stroke-width:2.4}
.node.hot rect{stroke:var(--accent); stroke-width:2.5}
.node.hot:hover rect, .node.dragging rect{stroke:var(--accent); stroke-width:3.2}
/* modal */
#modal{position:fixed; inset:0; background:rgba(5,9,14,.82); display:none; align-items:center; justify-content:center; z-index:10}
#modal.open{display:flex}
#modalCard{background:var(--panel); border:1px solid var(--line); border-radius:10px; max-width:620px; width:92%; max-height:86vh; overflow-y:auto; padding:26px 30px}
#modalCard h2{font-family:'Cormorant Garamond',Georgia,serif; color:var(--accent); font-weight:600; margin-bottom:6px; font-size:30px; letter-spacing:.3px}
#modalCard .score{font-size:34px; margin:10px 0 2px}
#modalCard .rank{color:var(--dim); font-style:italic; margin-bottom:6px}
#modalCard .bestline{color:var(--accent); font-size:14px; margin-bottom:16px}
.rev{margin:10px 0; padding:10px 13px; border-radius:7px; font-size:13.5px; line-height:1.5}
.rev.good{background:rgba(76,175,125,.1); border:1px solid var(--true)}
.rev.bad{background:rgba(224,92,92,.1); border:1px solid var(--false)}
.rev b{display:block; margin-bottom:3px}
#modalCard button{margin-top:16px; background:var(--accent); border:none; border-radius:6px; padding:9px 20px; font-family:inherit; font-size:14px; cursor:pointer; font-weight:bold; color:#1a1206}
#intro p{font-size:14.5px; line-height:1.65; margin-bottom:12px; color:var(--ink)}
#intro .rules{font-size:13.5px; color:var(--dim); line-height:1.7}
#modalCard button:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
/* colorblind-safe share grid: shapes carry meaning, not color */
#shareBtn{background:var(--panel); color:var(--ink); border:1px solid var(--line); margin-inline-start:10px}
#shareBtn:hover{border-color:var(--accent)}
#shareGrid{margin-top:14px; padding:12px 14px; border:1px solid var(--line); border-radius:7px; background:var(--panel2); font-family:Menlo,Consolas,monospace; font-size:14px; line-height:1.6; white-space:pre-wrap; color:var(--ink)}
.shareNote{font-size:12px; color:var(--dim); font-style:italic; margin-top:6px}
/* screen-reader-only text (graph has a full text equivalent in the claim list) */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
/* staggered entrance for reveal cards */
@keyframes revIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.rev{animation:revIn .28s ease both}
.verdict{animation:revIn .2s ease both}
/* honor reduced-motion: kill transitions and entrance animations */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important; animation:none!important}
}
@media (max-width:820px){
  /* stack: graph on top (fixed share), claim list below scrolls internally */
  main{flex-direction:column}
  #graphWrap{flex:0 0 34dvh; min-height:180px}   /* graph is secondary: fixed, modest share */
  #graphHint{display:none}                       /* touch users drag/pinch naturally */
  aside{max-width:none; min-width:0; flex:1 1 0; min-height:0; border-inline-start:none; border-top:1px solid var(--line)}  /* claim list is primary: takes the rest */
  #claims{overscroll-behavior:contain}           /* no scroll-chaining / pull-to-refresh */
  .claim{padding:12px 16px}                       /* ~44px tall rows for touch */
  /* compact the header so it doesn't swallow the screen */
  header{padding:8px 12px; gap:8px 12px}
  header h1{font-size:20px}
  header .sub{font-size:11px}
  .hud{gap:8px; flex-wrap:wrap; width:100%; margin-inline-start:0}  /* wrap items; no off-screen overflow */
  .hud .pill{padding:4px 9px; font-size:11.5px}
  #submitBtn{margin-inline-start:auto}             /* keep primary CTA prominent at row end */
  #detail{min-height:0; padding:12px 14px}
  /* touch targets */
  #submitBtn, #resetViewBtn, #detail button{min-height:44px}
}