/* The Legal AI Atlas — editorial design system
   Type: Fraunces (display), Newsreader (serif reading), Inter (UI)
   Palette: warm ivory paper, ink, clay accent, muted archival node tones */
:root{
  --paper:#faf8f4; --paper-2:#f3f0ea; --card:#fffdf9; --ink:#1f1b22; --ink-2:#5a5360;
  --ink-3:#615b67; --rule:#e7e1da; --rule-2:#d8d0cb;
  /* accent = Dentons purple */
  --clay:#702082; --clay-deep:#591a68; --clay-tint:#efe6f3;
  --green:#557a52; --ochre:#a9803a; --ochre-text:#7e5d22; --shadow:24px 24px 60px rgba(48,28,52,.12);
  /* node-type tones — purple-anchored, harmonised */
  --t-question:#702082; --t-thesis:#9c3f6b; --t-insight:#42618c; --t-concept:#8a6fb0;
  --t-entity:#a9742b; --t-source:#9a948c; --t-map:#2f8a80; --t-signal:#3f9aa0; --t-bridge:#c79a3e;
}
*{box-sizing:border-box}
/* visible keyboard focus everywhere (inputs/selects/buttons strip the native outline) */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--clay);outline-offset:2px;border-radius:8px}
.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}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
html,body{margin:0;height:100%}
body{
  background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased;
  font-family:"Inter",system-ui,-apple-system,sans-serif; font-size:14px; line-height:1.55;
  background-image:radial-gradient(circle at 18% -8%, #fff 0%, rgba(255,255,255,0) 42%);
}
h1,h2,h3,h4{font-family:"Newsreader",Georgia,serif; font-weight:500; color:var(--ink); letter-spacing:-.01em}
a{color:var(--clay-deep); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:2px}
::selection{background:var(--clay-tint)}
button{font-family:inherit; cursor:pointer}
.hidden{display:none!important}

/* ── masthead ── */
.masthead{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:24px;
  padding:0 26px; height:68px; background:rgba(250,248,243,.86); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--rule);
}
.brand{display:flex; align-items:center; gap:13px; cursor:pointer}
.mark{color:var(--clay); font-size:18px; line-height:1; transform:translateY(1px)}
.wordmark{font-family:"Fraunces",serif; font-weight:600; font-size:20px; letter-spacing:-.015em; line-height:1.05; white-space:nowrap}
.tagline{font-size:11px; color:var(--ink-3); letter-spacing:.01em; margin-top:1px}
.modes{display:flex; gap:4px; margin-left:8px; background:var(--paper-2); padding:4px; border-radius:11px; border:1px solid var(--rule)}
.mode-btn{border:none; background:transparent; color:var(--ink-2); font-size:13px; font-weight:500; padding:7px 15px; border-radius:8px; transition:.15s}
.mode-btn:hover{color:var(--ink)}
.mode-btn.active{background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(40,33,24,.08)}
.masthead-right{margin-left:auto; display:flex; align-items:center; gap:10px; position:relative}
.search-wrap{position:relative; display:flex; align-items:center}
.search-ic{position:absolute; left:11px; color:var(--ink-3); pointer-events:none}
#search{width:248px; background:var(--card); border:1px solid var(--rule-2); border-radius:10px; padding:9px 12px 9px 32px; font-size:13px; color:var(--ink); outline:none; transition:.15s}
#search:focus{border-color:var(--clay); box-shadow:0 0 0 3px var(--clay-tint); width:288px}
#search::placeholder{color:var(--ink-3)}
.ghost-btn{background:transparent; border:1px solid var(--rule-2); color:var(--ink-2); font-size:12.5px; font-weight:500; padding:8px 13px; border-radius:10px; transition:.15s; white-space:nowrap}
.ghost-btn:hover{border-color:var(--clay); color:var(--ink)}
.caret{color:var(--ink-3); font-size:10px}
.menu{position:absolute; top:52px; right:60px; background:var(--card); border:1px solid var(--rule-2); border-radius:12px; box-shadow:var(--shadow); padding:6px; min-width:220px; z-index:50; display:none}
.menu.show{display:block}
.menu .mi{padding:9px 12px; border-radius:8px; cursor:pointer; font-size:13px}
.menu .mi:hover{background:var(--paper-2)}
.menu .mi.on{color:var(--clay-deep); font-weight:600}
.menu .mi small{display:block; color:var(--ink-3); font-size:11px; font-weight:400}

#search-results{position:absolute; top:46px; left:0; width:340px; background:var(--card); border:1px solid var(--rule-2); border-radius:12px; box-shadow:var(--shadow); max-height:360px; overflow-y:auto; display:none; z-index:60}
#search-results.show{display:block}
#search-results .r{padding:9px 13px; cursor:pointer; border-bottom:1px solid var(--rule); display:flex; gap:9px; align-items:baseline}
#search-results .r:last-child{border-bottom:none}
#search-results .r:hover{background:var(--paper-2)}
#search-results .r .dot{width:7px; height:7px; border-radius:50%; flex:none; transform:translateY(-1px)}
#search-results .r .rt{font-size:13.5px; color:var(--ink)}
#search-results .r .rk{font-size:10px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em}

/* ── views ── */
main{height:calc(100vh - 68px); overflow:hidden}
.view{height:100%}

/* ════ BRIEFING ════ */
#briefing,#memo{display:grid; grid-template-columns:300px 1fr; overflow:hidden}
.toc{border-right:1px solid var(--rule); padding:30px 22px 60px; overflow-y:auto; background:linear-gradient(180deg,var(--paper) 0%, var(--paper) 100%)}
.toc .toc-h{font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); margin:22px 0 9px; font-weight:600}
.toc .toc-h:first-child{margin-top:0}
.toc a{display:block; color:var(--ink-2); font-size:13.5px; padding:7px 0 7px 14px; border-left:2px solid transparent; line-height:1.35; overflow-wrap:break-word}
.toc a:hover{color:var(--ink); text-decoration:none; border-left-color:var(--rule-2)}
.toc a.active{color:var(--clay-deep); border-left-color:var(--clay); font-weight:500}
.toc a .toc-t{display:block; font-size:14.5px; font-weight:500; color:var(--ink); line-height:1.25}
.toc a .toc-b{display:block; font-size:11.5px; color:var(--ink-3); margin-top:1px; line-height:1.3}
.toc a:hover .toc-t{color:var(--clay-deep)}
.toc a.active .toc-t{color:var(--clay-deep); font-weight:600}
.toc .toc-cross{display:block; color:var(--clay-deep); font-size:12.5px; padding:6px 0 10px 14px; border-left:2px solid transparent}
.toc .toc-cross:hover{text-decoration:underline}

.doc{overflow-y:auto; overflow-x:hidden; padding:0 0 120px; scroll-behavior:smooth}
.doc-inner{max-width:760px; margin:0 auto; padding:0 40px}
.doc-loading{max-width:760px; margin:80px auto; color:var(--ink-3); padding:0 40px}
.doc-hero{padding:64px 0 40px; border-bottom:1px solid var(--rule); margin-bottom:8px}
.doc-hero .eyebrow{font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--clay); font-weight:600; margin-bottom:18px}
.doc-hero h1{font-family:"Fraunces",serif; font-weight:600; font-size:42px; line-height:1.08; letter-spacing:-.02em; margin:0 0 18px}
.doc-hero p{font-family:"Newsreader",serif; font-size:19px; line-height:1.55; color:var(--ink-2); margin:0}
.doc-hero .hero-meta{display:flex; gap:26px; margin-top:26px; flex-wrap:wrap}
.doc-hero .hm{display:flex; flex-direction:column}
.doc-hero .hm b{font-family:"Fraunces",serif; font-size:24px; font-weight:600; color:var(--ink)}
.doc-hero .hm span{font-size:11.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em}

.domain-sec{padding-top:52px}
.domain-sec > .dh{font-size:16px; text-transform:uppercase; letter-spacing:.07em; color:var(--clay); font-weight:700; padding-bottom:11px; border-bottom:1px solid var(--rule); margin-bottom:6px}
.qcard{padding:28px 0; border-bottom:1px solid var(--rule)}
.qcard h3{font-family:"Newsreader",serif; font-size:24px; font-weight:500; line-height:1.22; margin:0 0 6px; letter-spacing:-.01em}
.qcard .decision{font-size:12px; color:var(--ink-3); margin-bottom:14px; font-style:italic; font-family:"Newsreader",serif}
.qcard .answer{font-family:"Newsreader",serif; font-size:18px; line-height:1.62; color:var(--ink); border-left:3px solid var(--clay); padding:2px 0 2px 18px; margin:0 0 16px}
.qcard .synthesis{font-size:14.5px; line-height:1.7; color:var(--ink-2)}
.qcard .synthesis p{margin:0 0 11px}
.qcard details{margin-top:14px}
.qcard details summary{display:inline-flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
  font-size:12.5px; font-weight:600; letter-spacing:.01em; color:var(--clay-deep);
  background:var(--clay-tint); border:1px solid var(--rule-2); padding:7px 14px; border-radius:9px;
  transition:border-color .15s, box-shadow .15s}
.qcard details summary::-webkit-details-marker{display:none}
.qcard details summary::before{content:"▸"; font-size:10px; line-height:1; color:var(--clay); display:inline-block; transition:transform .18s ease}
.qcard details[open] summary::before{transform:rotate(90deg)}
.qcard details summary:hover{border-color:var(--clay); box-shadow:0 0 0 2px var(--clay-tint)}
.qcard details[open] summary{margin-bottom:12px}
.qcard .evidence{margin-top:14px}
.qcard .evidence .ev-h{font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); margin-bottom:8px; font-weight:600}
.ev-item{display:block; padding:9px 0; border-top:1px solid var(--rule); cursor:pointer}
.ev-item:hover .ev-claim{color:var(--clay-deep)}
.ev-item .ev-claim{display:block; font-size:13.5px; color:var(--ink-2); line-height:1.5; font-family:"Newsreader",serif; overflow-wrap:anywhere}
.ev-item .ev-src{display:block; font-size:11px; color:var(--ink-3); margin-top:3px}
.qcard-actions{display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:12px}
.qcard-actions .ev-details{width:100%; margin:0}
.qcard .open-graph{display:inline-block; font-weight:500; font-size:13.5px}
.qcard>.open-graph{margin-top:14px}   /* breathing room between the "Read the full debate" pill (or teaser) and "Weigh it in the map →"; scoped to direct children so .qcard-actions cards keep their own gap */

/* citation chips inside synthesis */
.cite{display:inline; color:var(--clay-deep); font-weight:500; cursor:pointer; border-bottom:1px dotted var(--clay); font-size:.92em; white-space:nowrap}
.cite:hover{background:var(--clay-tint)}
/* inline citation reference chips ("Publisher Year") — a soft grey pill with a small open-link arrow so they
   stand apart from the prose without shouting; brighten to clay on hover */
.cite-ref{display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:.16em; color:var(--ink-2); font-weight:500; font-size:.8em;
  white-space:normal; overflow-wrap:anywhere; max-width:100%; border-bottom:none; background:var(--paper-2); border:1px solid var(--rule-2);
  border-radius:5px; padding:.05em .4em; line-height:1.3; vertical-align:baseline; transition:.15s}
.cite-ref::after{content:"\2197" / ""; font-size:.92em; opacity:.5}
.cite-ref:hover{color:var(--clay-deep); background:var(--clay-tint); border-color:var(--clay)}
.cite-ref:hover::after{opacity:.85}
/* empty-filter overlay for the Map */
.cy-empty{position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; font-family:"Newsreader",serif; font-size:16px; color:var(--ink-2); pointer-events:none; z-index:5}
.cy-empty span{font-size:13px; color:var(--ink-3)}
#search-results .r.active{background:var(--paper-2)}
#search-results .r-empty{padding:10px 12px; font-size:13px; color:var(--ink-3); cursor:default}
.ask-hint{font-size:11px; color:var(--ink-3); white-space:nowrap; align-self:center}

.stance{display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-3); margin-left:10px; vertical-align:middle}
.tally{display:inline-flex; gap:10px; font-size:12px; margin:6px 0 4px}
.tally .for{color:var(--green)} .tally .against{color:var(--t-thesis)}

/* ════ ASK ════ */
#ask,#news{overflow-y:auto}   /* the view itself is the scroll container (main is overflow:hidden) */
.ask-doc{max-width:760px;margin:0 auto;padding:56px 40px 120px}
.ask-hero .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--clay);font-weight:600;margin-bottom:16px}
.ask-hero h1{font-family:"Fraunces",serif;font-weight:600;font-size:34px;line-height:1.1;letter-spacing:-.02em;margin:0 0 14px}
.ask-hero p{font-family:"Newsreader",serif;font-size:17px;line-height:1.55;color:var(--ink-2);margin:0 0 28px}
.ask-box{background:var(--card);border:1px solid var(--rule-2);border-radius:16px;padding:18px;box-shadow:0 10px 30px rgba(48,28,52,.06)}
#ask-input{width:100%;border:none;outline:none;resize:vertical;background:transparent;font-family:"Newsreader",serif;font-size:18px;line-height:1.5;color:var(--ink);padding:6px 4px;min-height:52px}
#ask-input::placeholder{color:var(--ink-3)}
.ask-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding-top:12px;border-top:1px solid var(--rule)}
.ask-lens-l{font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:8px}
.ask-lens-l select{width:auto;padding:6px 10px;font-size:12.5px}
.primary-btn{background:var(--clay);color:#fff;border:none;border-radius:10px;padding:10px 18px;font-size:13.5px;font-weight:600;transition:.15s}
.primary-btn:hover{background:var(--clay-deep)}
.primary-btn:disabled{opacity:.5;cursor:default}
.ask-examples{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ex-chip{background:var(--paper-2);border:1px solid var(--rule);color:var(--ink-2);border-radius:999px;padding:7px 13px;font-size:12.5px;text-align:left;transition:.12s}
.ex-chip:hover{border-color:var(--clay);color:var(--ink)}
#ask-answer{margin-top:30px}
.ask-loading{font-family:"Newsreader",serif;font-style:italic;font-size:16px;color:var(--ink-3);padding:24px 0;animation:pulse 1.5s ease-in-out infinite}
.ask-loading-sub{font-size:12.5px;font-style:normal;opacity:.7}
.caret-blink{display:inline-block;color:var(--clay);font-weight:400;animation:pulse .9s steps(1) infinite;margin-left:1px}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
.ask-result{animation:rise .4s cubic-bezier(.2,.7,.2,1)}
.ans-body{font-family:"Newsreader",serif;font-size:16px;line-height:1.68;color:var(--ink)}
.ans-body h2{font-family:"Newsreader",serif;font-size:17px;font-weight:600;margin:24px 0 8px;color:var(--ink)}
.ans-body h2:first-child{margin-top:0}
.ans-body strong{font-weight:600}
.ans-body p{margin:0 0 13px}
.ans-body ul,.ans-body ol{padding-left:22px;margin:6px 0 13px}
.ans-body li{margin:3px 0}
.ask-sources{margin-top:28px;border-top:1px solid var(--rule);padding-top:18px}
.ask-sources h4{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);margin:0 0 10px;font-weight:600}
.ask-src{display:block;font-size:12.5px;color:var(--ink-2);padding:4px 0;border-bottom:1px solid var(--rule)}
.ask-src:hover{color:var(--clay-deep);text-decoration:none}
.ask-src .cr{color:var(--ink-3);font-size:11px}
.ask-note{background:var(--clay-tint);border-radius:10px;padding:14px 16px;font-size:13.5px;line-height:1.55;color:#3a1452}
.ask-note code{background:rgba(112,32,130,.1);padding:1px 5px;border-radius:4px}
.ask-context{background:var(--paper-2);border:1px solid var(--rule);border-radius:10px;padding:14px;font-size:12px;line-height:1.5;color:var(--ink-2);white-space:pre-wrap;max-height:480px;overflow-y:auto;margin-top:12px}

/* ════ EXPLORE ════ */
#explore{display:grid; grid-template-columns:280px 1fr; position:relative}
#panel{border-right:1px solid var(--rule); overflow:hidden; background:var(--paper)}
.panel-scroll{height:100%; overflow-y:auto; padding:22px 20px 60px}
.ctl{margin-bottom:22px}
.ctl-h{font-size:10.5px; text-transform:uppercase; letter-spacing:.11em; color:var(--ink-3); font-weight:600; margin-bottom:10px}
.lead-note{font-size:13px; color:var(--ink-2); line-height:1.55; font-family:"Newsreader",serif; margin:0}
.lead-note b{color:var(--ink)}
.ctl-sub{font-size:11.5px; color:var(--ink-3); line-height:1.4; margin:-4px 0 10px}
.q-jump{display:flex; flex-direction:column; gap:8px}
.q-jump a{display:block; font-size:13.5px; color:var(--ink); padding:9px 11px; border-radius:9px; line-height:1.32; border:1px solid var(--rule); border-left:3px solid var(--clay); background:var(--card); cursor:pointer; transition:.14s}
.q-jump a:hover{background:var(--paper-2); color:var(--clay-deep); border-color:var(--clay-deep); transform:translateY(-1px); text-decoration:none}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; background:var(--card); border:1px solid var(--rule-2); font-size:12px; font-family:inherit; color:var(--ink-2); cursor:pointer; user-select:none; transition:.12s}
.chip:hover{border-color:var(--ink-3)}
.chip .dot{width:8px; height:8px; border-radius:50%}
.chip.off{opacity:.62; background:transparent}   /* was .4 (~1.9:1) — raised so the "off" label stays legible */
select{width:100%; background:var(--card); border:1px solid var(--rule-2); border-radius:9px; padding:9px 11px; font-size:13px; color:var(--ink); outline:none}
select:focus{border-color:var(--clay)}
.btn-row{display:flex; gap:8px; margin-bottom:8px}
.soft-btn{flex:1; background:var(--card); border:1px solid var(--rule-2); color:var(--ink-2); border-radius:9px; padding:9px; font-size:12.5px; font-weight:500; transition:.12s}
.soft-btn:hover{border-color:var(--clay); color:var(--ink)}
.soft-btn.wide{width:100%}
.soft-btn.armed{border-color:var(--clay); color:var(--clay-deep); background:var(--clay-tint)}
.conn-status{font-size:11.5px; color:var(--ink-3); min-height:15px; margin-top:6px; line-height:1.4}
#legend .li{display:flex; align-items:center; gap:9px; margin:5px 0; color:var(--ink-2); font-size:12.5px}
#legend .li .dot{width:10px; height:10px; border-radius:50%; flex:none}
#legend .lg-h{font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:700; margin:13px 0 5px}
#legend .lg-h:first-child{margin-top:0}
#legend .lg-dot{display:inline-block; border-radius:50%; background:var(--ink-3); flex:none}
#legend .lg-dot.s{width:7px; height:7px} #legend .lg-dot.l{width:15px; height:15px; margin-left:-3px}
/* all three link swatches = an identical 22x14 box with a vertically-centred 2px line, so they always align */
#legend .lg-edge{display:inline-flex; align-items:center; width:22px; height:14px; flex:none; position:relative}
#legend .lg-edge::before{content:""; width:100%; height:0; border-top:2px solid var(--ink-3)}
#legend .lg-edge.sup::before{border-top-color:var(--green)}
#legend .lg-edge.con::before{border-top-style:dashed; border-top-color:#9c3f6b}
/* solid right-pointing triangle (matches the graph's filled arrowheads), tip flush to the line's end */
#legend .lg-edge.arr::after{content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:7px solid var(--ink-3)}

#stage{position:relative; display:flex; flex-direction:column; min-height:0; min-width:0; background:
  radial-gradient(125% 95% at 50% 40%, #fffefb 0%, var(--paper) 52%, #f1ece2 100%)}
#cy{position:relative; flex:1 1 auto; min-height:0}
#hud{position:absolute; left:16px; bottom:14px; font-size:11px; color:var(--ink-3); background:rgba(250,248,243,.8); border:1px solid var(--rule); padding:5px 10px; border-radius:8px; pointer-events:none}
#overview-btn{position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:8; border:1px solid var(--rule-2); background:var(--card); color:var(--clay-deep); font-family:inherit; font-size:12.5px; font-weight:600; padding:7px 15px; border-radius:20px; cursor:pointer; box-shadow:0 4px 14px rgba(48,28,52,.14); transition:.15s}
#overview-btn:hover{border-color:var(--clay); background:var(--clay-tint)}
/* breadcrumb trail — thin bar between the filter bar and the canvas; hidden until there's a real trail */
#breadcrumb{display:flex; align-items:center; gap:6px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:7px 14px; background:var(--paper); border-bottom:1px solid var(--rule)}
#breadcrumb::-webkit-scrollbar{display:none}
#breadcrumb.empty{display:none}
#breadcrumb .bc-h{flex:none; font-size:9.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--clay); font-weight:700; margin-right:2px}
#breadcrumb .bc-sep{flex:none; color:var(--ink-3)}
#breadcrumb .bc-crumb{flex:none; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:inherit; font-size:12px; color:var(--clay-deep); background:none; border:none; padding:3px 6px; border-radius:6px; cursor:pointer}
#breadcrumb .bc-crumb:hover{background:var(--clay-tint)}
#breadcrumb .bc-crumb.cur{color:var(--ink); font-weight:600; cursor:default}
#breadcrumb .bc-crumb.cur:hover{background:none}
/* mobile-only controls (drawer toggle + scrim) — hidden on desktop */
#tools-btn,#panel-scrim{display:none}
#cy-loading{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:var(--paper); z-index:5; color:var(--ink-3); font-family:"Newsreader",serif; font-style:italic; font-size:15px}
.cyl-spin{width:34px; height:34px; border:3px solid var(--rule-2); border-top-color:var(--clay); border-radius:50%; animation:cyl-rot .8s linear infinite}
@keyframes cyl-rot{to{transform:rotate(360deg)}}

/* detail panel */
#detail{position:absolute; top:0; right:0; height:100%; width:456px; max-width:92vw; z-index:12; background:var(--card); border-left:1px solid var(--rule); overflow-y:auto; padding:26px 28px 80px; transition:transform .22s cubic-bezier(.2,.7,.2,1); box-shadow:var(--shadow)}
#detail.closed{transform:translateX(101%)}
#detail-close{position:absolute; top:12px; right:14px; width:38px; height:38px; border:none; background:transparent; color:var(--ink-3); font-size:23px; line-height:1; border-radius:9px; cursor:pointer}
#detail-close:hover{background:var(--paper-2); color:var(--ink)}
/* "Show all evidence on the map" — primary action in a question/thesis panel */
.reveal-all{display:inline-flex; align-items:center; gap:6px; margin:2px 0 16px; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:600; letter-spacing:.01em; color:#fff; background:var(--clay); border:1px solid var(--clay-deep); padding:8px 15px; border-radius:9px; transition:background .15s, box-shadow .15s}
.reveal-all:hover{background:var(--clay-deep); box-shadow:0 0 0 2px var(--clay-tint)}
.d-eyebrow{display:flex; align-items:center; gap:7px; font-size:10.5px; text-transform:uppercase; letter-spacing:.11em; color:var(--ink-3); font-weight:600; margin-bottom:10px}
.d-eyebrow .dot{width:9px; height:9px; border-radius:50%}
.d-title{font-family:"Newsreader",serif; font-size:24px; font-weight:500; line-height:1.24; letter-spacing:-.01em; margin:0 0 14px}
.badges{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px}
.badge{font-size:11px; padding:3px 9px; border-radius:6px; background:var(--paper-2); border:1px solid var(--rule); color:var(--ink-2); font-weight:500}
.badge.verified{color:var(--green); border-color:#cfe0cb; background:#f1f6ef}
.badge.reported{color:var(--ochre-text); border-color:#ecdcbf; background:#f8f1e3}
.badge.estimated,.badge.inferred{color:var(--clay-deep); border-color:#ecd6cb; background:#f8ece5}
.d-claim{font-family:"Newsreader",serif; font-size:17px; line-height:1.55; color:var(--ink); margin:0 0 16px}
.d-sowhat{background:var(--clay-tint); border-radius:10px; padding:13px 15px; margin:0 0 18px; font-size:13.5px; line-height:1.5; color:#3a1452}
.d-sowhat b{color:var(--clay-deep); font-weight:600; display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:3px}
.d-quote{font-family:"Newsreader",serif; font-style:italic; font-size:15px; line-height:1.55; color:var(--ink-2); border-left:3px solid var(--rule-2); padding:4px 0 4px 18px; margin:0 0 18px}
.d-source{border:1px solid var(--rule); border-radius:11px; padding:14px 16px; margin:0 0 20px; background:var(--paper)}
.d-source .src-grade{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:600; margin-bottom:4px}
.d-source .src-grade.c1{color:var(--green)} .d-source .src-grade.c2{color:var(--ochre-text)} .d-source .src-grade.c3{color:var(--ink-3)}
.d-source .src-pub{font-family:"Newsreader",serif; font-size:15px; color:var(--ink)}
.d-source .src-meta{font-size:12px; color:var(--ink-3); margin:2px 0 10px}
.src-open{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:500; color:var(--clay-deep); border:1px solid var(--rule-2); border-radius:8px; padding:6px 11px; background:var(--card)}
.src-open:hover{border-color:var(--clay); text-decoration:none}
.d-body{font-size:14px; line-height:1.65; color:var(--ink-2)}
.d-body h2{font-size:15px; font-weight:600; margin:20px 0 8px; color:var(--ink)}
.d-body p{margin:0 0 11px}
.d-body blockquote{border-left:3px solid var(--rule-2); margin:12px 0; padding:2px 0 2px 16px; color:var(--ink-3); font-style:italic; font-family:"Newsreader",serif}
.d-body a.xlink{color:var(--clay-deep); border-bottom:1px dotted var(--clay)}
.rel-group{margin-top:20px}
.rel-group h4{font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); margin:0 0 8px; font-weight:600}
.rel-chips{display:flex; flex-wrap:wrap; gap:6px}
.rel{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid var(--rule-2); border-radius:8px; font-size:12px; cursor:pointer; background:var(--card); color:var(--ink-2); max-width:100%}
.rel:hover{border-color:var(--clay); color:var(--ink)}
.rel .dot{width:7px; height:7px; border-radius:50%; flex:none}
.rel .rl{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ── overlays ── */
.overlay{position:fixed; inset:0; z-index:100; background:rgba(33,30,26,.34); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:24px}
.welcome-card{background:var(--card); border:1px solid var(--rule-2); border-radius:22px; max-width:680px; width:100%; padding:46px 48px 32px; box-shadow:var(--shadow); animation:rise .4s cubic-bezier(.2,.7,.2,1)}
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.welcome-mark{color:var(--clay); font-size:22px; margin-bottom:16px}
.welcome-card h1{font-family:"Fraunces",serif; font-weight:600; font-size:33px; line-height:1.12; letter-spacing:-.02em; margin:0 0 14px}
.welcome-sub{font-family:"Newsreader",serif; font-size:17px; line-height:1.55; color:var(--ink-2); margin:0 0 22px}
.welcome-stats{display:flex; gap:26px; padding:16px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); margin-bottom:24px}
.welcome-stats .ws{display:flex; flex-direction:column}
.welcome-stats .ws b{font-family:"Fraunces",serif; font-size:22px; font-weight:600}
.welcome-stats .ws span{font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em}
.welcome-cards{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-bottom:22px}
.enter-card{text-align:left; background:var(--paper); border:1px solid var(--rule-2); border-radius:14px; padding:16px; transition:.15s}
.enter-card:hover{border-color:var(--clay); background:var(--card); transform:translateY(-2px); box-shadow:0 8px 22px rgba(40,33,24,.08)}
.enter-card .ec-k{font-family:"Newsreader",serif; font-size:16px; font-weight:600; margin-bottom:6px}
.enter-card .ec-d{font-size:12px; color:var(--ink-3); line-height:1.45}
.welcome-foot{display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--ink-3)}
.welcome-foot b{color:var(--ink-2)}
.link-btn{background:none; border:none; color:var(--clay-deep); font-size:12.5px; font-weight:500}
.link-btn:hover{text-decoration:underline}

.modal{background:var(--card); border:1px solid var(--rule-2); border-radius:20px; max-width:720px; width:100%; max-height:86vh; overflow-y:auto; padding:42px 48px; box-shadow:var(--shadow); position:relative; animation:rise .35s cubic-bezier(.2,.7,.2,1)}
.modal-close{position:absolute; top:16px; right:18px; width:32px; height:32px; border:none; background:transparent; color:var(--ink-3); font-size:22px; border-radius:8px}
.modal-close:hover{background:var(--paper-2); color:var(--ink)}
.modal-body h2{font-family:"Fraunces",serif; font-size:28px; font-weight:600; letter-spacing:-.02em; margin:0 0 6px}
.modal-body .ribbon{font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--clay); font-weight:600; margin-bottom:16px}
.modal-body h3{font-size:15px; font-weight:600; margin:24px 0 7px; color:var(--ink); font-family:"Newsreader",serif}
.modal-body p, .modal-body li{font-size:14px; line-height:1.66; color:var(--ink-2)}
.modal-body ul{padding-left:20px; margin:6px 0}
.modal-body .grade-row{display:flex; gap:10px; margin:10px 0; flex-wrap:wrap}
.modal-body .grade{flex:1; min-width:150px; border:1px solid var(--rule); border-radius:10px; padding:12px 14px; background:var(--paper)}
.modal-body .grade b{display:block; font-size:13px; margin-bottom:3px}
.modal-body .grade.g1 b{color:var(--green)} .modal-body .grade.g2 b{color:var(--ochre-text)} .modal-body .grade.g3 b{color:var(--ink-3)}
.modal-body .grade small{font-size:12px; color:var(--ink-3); line-height:1.4}

/* auth sign-in gate */
.auth-card{background:var(--card); border:1px solid var(--rule-2); border-radius:22px; max-width:452px; width:100%; padding:32px 30px 26px; box-shadow:var(--shadow); text-align:center; animation:rise .4s cubic-bezier(.2,.7,.2,1)}
.auth-mark{color:var(--clay); font-size:24px; margin-bottom:2px}
/* Clerk OVERWRITES the mount node's class at runtime (-> "cl-rootBox cl-signIn-root …"), so target it by ID,
   not .clerk-auth. Flatten the card so it merges into .auth-card (belt-and-suspenders with the appearance prop). */
#clerk-auth{width:100%}
#clerk-auth .cl-card, #clerk-auth .cl-cardBox{width:100%!important; box-shadow:none!important; border:none!important; background:transparent!important; overflow:visible!important}
/* The combined flow's sign-in start step carries an OPTIONAL inline password ("instant sign-in"). Hide it so
   sign-in is a single password field on its own step (no double-entry; one target for password/passkey managers).
   The sign-UP "Create your account" step reuses the SAME .cl-signIn-start class but its password is REQUIRED, so
   it must NOT be hidden. Tell them apart by the email field's name — sign-in uses input[name=identifier], sign-up
   uses input[name=emailAddress]. :has() degrades safely: if unsupported the rule is skipped and the optional
   password just shows; sign-up keeps its password either way. */
#clerk-auth .cl-signIn-start:has(input[name="identifier"]) .cl-formFieldRow__password{display:none!important}
.auth-msg{margin-top:14px; font-size:12.5px; color:var(--clay-deep)}
.auth-msg:empty{display:none}
.auth-portal-fallback{margin-top:16px; font-size:11px; color:var(--ink-3); text-align:center}
.auth-portal-fallback a{color:var(--ink-3); text-decoration:underline}
.auth-portal-fallback a:hover{color:var(--ink-2)}

::-webkit-scrollbar{width:11px; height:11px}
::-webkit-scrollbar-thumb{background:var(--rule-2); border-radius:6px; border:3px solid var(--paper)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}

/* ── explore filter bar (floats over the map) ── */
#filter-bar{position:relative; z-index:6; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:9px 16px; background:var(--paper); border-bottom:1px solid var(--rule)}
/* When a node-detail panel opens on a wide screen, push the whole stage (filter bar + canvas) beside it
   rather than letting the panel overlay the right of the map. This shrinks #cy to the visible strip, so
   cytoscape's own fit() re-centres the active node between the fixed left panel and the detail panel —
   instead of stranding it ~228px behind the panel's edge. Below this width there isn't room, so it overlays.
   No transition here on purpose: cy.resize() reads the final width once on open; an animating margin would
   make it fit to an intermediate width. The panel's own slide-in + the graph's re-centre animation carry the motion. */
@media(min-width:1180px){ #explore.detail-open #stage{margin-right:456px} }
#filter-bar .fb-title{font-size:10px; text-transform:uppercase; letter-spacing:.13em; color:var(--clay); font-weight:700}
#filter-bar .fb-group{display:flex; align-items:center; gap:8px}
#filter-bar .fb-l{font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-weight:600}
#filter-bar .fb-selects{margin-left:auto; display:flex; align-items:center; gap:14px}
#filter-bar .chips{gap:5px}
#filter-bar .chip{padding:6px 10px; font-size:11.5px}
#filter-bar select{width:auto; min-width:110px; padding:6px 9px; font-size:12.5px; transition:.15s}
#filter-bar select.on{border-color:var(--clay); color:var(--clay-deep); font-weight:600; box-shadow:0 0 0 2px var(--clay-tint)}
#filter-bar .fb-clear{border:1px solid var(--rule-2); background:var(--paper-2); color:var(--clay-deep); font-size:11.5px; font-weight:600; padding:6px 11px; border-radius:9px; cursor:pointer; white-space:nowrap; transition:.15s}
#filter-bar .fb-clear:hover{border-color:var(--clay); background:var(--clay-tint)}

/* ── memo (narrative) reading view ── */
.memo-inner{padding-top:54px; padding-bottom:48px; font-family:"Newsreader",Georgia,serif; color:var(--ink); font-size:17px; line-height:1.66}
.memo-inner > h1:first-child{font-family:"Fraunces",serif; font-weight:600; font-size:37px; line-height:1.1; letter-spacing:-.02em; margin:0 0 14px}
.memo-inner h2{font-family:"Fraunces",serif; font-weight:600; font-size:25px; line-height:1.18; letter-spacing:-.015em; margin:48px 0 14px; padding-top:22px; border-top:1px solid var(--rule)}
.memo-inner h3{font-family:"Newsreader",serif; font-weight:600; font-size:19px; margin:28px 0 8px}
.memo-inner p{margin:0 0 15px}
.memo-inner strong,.memo-inner b{font-weight:600; color:var(--ink)}
.memo-inner ul,.memo-inner ol{padding-left:22px; margin:4px 0 16px}
.memo-inner li{margin:6px 0}
.memo-inner hr{border:none; border-top:1px solid var(--rule); margin:26px 0}
.memo-inner blockquote{border-left:3px solid var(--clay); padding:2px 0 2px 18px; margin:14px 0; color:var(--ink-2)}
.memo-inner table{width:100%; border-collapse:collapse; margin:16px 0; font-family:"Inter",sans-serif; font-size:12.5px; line-height:1.5}
.memo-inner th,.memo-inner td{border:1px solid var(--rule); padding:7px 10px; text-align:left; vertical-align:top}
.memo-inner thead th{background:var(--paper-2); font-weight:600; color:var(--ink)}
.memo-inner code{background:var(--paper-2); border:1px solid var(--rule); border-radius:5px; padding:1px 5px; font-size:.86em}
.ch-tag{display:inline-block; font-family:"Inter",sans-serif; font-size:12.5px; font-weight:500; color:var(--ink-3); margin-left:10px; vertical-align:middle}
.ch-tag.multi{display:block; margin:10px 0 0}
.ch-tag .ch-lead{text-transform:uppercase; letter-spacing:.08em; font-size:10px; color:var(--ink-3); margin-right:7px}
.ch-tag .ch-sep{color:var(--rule-2); margin:0 6px}
.ch-tag .ch-jump{color:var(--clay-deep); border-bottom:1px dotted var(--clay); cursor:pointer; font-style:normal}
.ch-tag .ch-jump:hover{background:var(--clay-tint); text-decoration:none}

@media(max-width:960px){ #search{width:180px} #search:focus{width:200px} }   /* compact the search early so the masthead never overflows in the 881–960 dead-band */
@media(max-width:880px){
  .tagline{display:none}
  #search{width:150px} #search:focus{width:180px}
  #briefing,#memo{grid-template-columns:1fr} .toc{display:none}
  /* keep the "Listen to this memo" player reachable on tablet/phone even though the TOC nav is hidden (audio is ideal for mobile listening) */
  #memo-toc{display:block; border-right:none; background:none; padding:0; overflow:visible}
  #memo-toc a,#memo-toc .toc-h{display:none}
  #memo-toc .toc-row{display:none}                                  /* no full reading TOC on mobile… */
  #memo-toc .toc-row.has-audio{display:flex; padding:2px 18px}      /* …but keep the audio chapters reachable */
  #memo-toc .memo-audio{margin:0; padding:14px 20px 12px}
  .memo-listen-cta{display:none}   /* on mobile the player + chapters are already at the top of the column */
  #explore{grid-template-columns:1fr}
  /* left panel becomes an off-canvas drawer; the Tools FAB / scrim open it so the map gets the full width */
  #panel{position:absolute; z-index:30; width:280px; max-width:86vw; height:100%; box-shadow:var(--shadow); transform:translateX(-100%); transition:transform .25s cubic-bezier(.2,.7,.2,1)}
  #explore.panel-open #panel{transform:none}
  #tools-btn{display:inline-flex; align-items:center; gap:7px; position:absolute; left:12px; bottom:14px; z-index:24; font-family:inherit; font-size:13px; font-weight:600; color:var(--clay-deep); background:var(--card); border:1px solid var(--rule-2); border-radius:22px; padding:9px 16px; box-shadow:var(--shadow); cursor:pointer}
  #explore.panel-open #tools-btn{display:none}
  #explore.panel-open #panel-scrim{display:block; position:absolute; inset:0; z-index:25; background:rgba(31,27,34,.34)}
  #hud{display:none}   /* free the bottom-left corner for the Tools FAB on phones */
  .welcome-cards{grid-template-columns:1fr}
  .welcome-stats{flex-wrap:wrap; row-gap:14px} .welcome-stats .ws{flex:1 1 40%}
  .doc-hero h1{font-size:30px}
}
@media(max-width:640px){   /* phone: wrap the masthead so nothing is pushed off-screen; the 4 mode tabs get their own full-width row */
  .masthead{flex-wrap:wrap; height:auto; min-height:56px; padding:8px 12px; gap:8px 10px}
  .wordmark{font-size:16px}
  .modes{order:3; flex-basis:100%; margin-left:0; justify-content:center}
  .search-wrap{display:none}

  /* Phones read the memo/questions/ask as a normal scrolling document, not a fixed-height pane with
     internal scroll: the desktop app-shell (main = 100vh − 68px) assumes a 68px masthead, but on a
     phone the masthead wraps to ~3 rows, so content was being clipped under it. Let the header scroll
     away and the page flow naturally. The Map keeps an explicit canvas height. Desktop (>640px) is untouched. */
  html,body{height:auto}
  .masthead{position:static}
  main{height:auto; overflow:visible}
  .view{height:auto}
  #memo,#briefing,#ask,#news{display:block; height:auto; overflow:visible}
  .doc{height:auto; overflow:visible; padding-bottom:48px}
  .doc-inner{padding:0 20px}
  .memo-inner{padding-top:22px; font-size:18px; line-height:1.72}
  .memo-inner > h1:first-child{font-size:26px; line-height:1.14}
  .memo-inner h2{font-size:20px; margin-top:30px; padding-top:18px}
  #explore{height:calc(100vh - 60px); height:calc(100dvh - 60px)}   /* the Map still needs a sized canvas in document flow */
}

/* ── Source peek: read a memo citation in an overlay, then return to the same spot ── */
#peek{position:fixed; inset:0; z-index:110; display:flex; justify-content:flex-end}
#peek.closed{pointer-events:none}
#peek .peek-backdrop{position:absolute; inset:0; background:rgba(31,27,34,.34); transition:opacity .22s ease}
#peek.closed .peek-backdrop{opacity:0}
#peek .peek-panel{position:relative; height:100%; width:484px; max-width:94vw; background:var(--card); border-left:1px solid var(--rule); box-shadow:var(--shadow); display:flex; flex-direction:column; transition:transform .24s cubic-bezier(.2,.7,.2,1)}
#peek.closed .peek-panel{transform:translateX(101%)}
#peek .peek-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px 10px 16px; border-bottom:1px solid var(--rule); background:var(--paper)}
#peek .peek-back{border:none; background:transparent; color:var(--clay-deep); font:inherit; font-size:13px; font-weight:600; cursor:pointer; padding:6px 9px; border-radius:8px}
#peek .peek-back:hover{background:var(--clay-tint)}
#peek .peek-close{width:38px; height:38px; border:none; background:transparent; color:var(--ink-3); font-size:23px; line-height:1; border-radius:9px; cursor:pointer}
#peek .peek-close:hover{background:var(--paper-2); color:var(--ink)}
#peek #peek-body{flex:1; overflow-y:auto; padding:24px 28px 18px}
#peek .peek-foot{border-top:1px solid var(--rule); padding:12px 28px; background:var(--paper)}
#peek .peek-map{font-size:12.5px; font-weight:600; color:var(--clay-deep)}
#peek .peek-map:hover{text-decoration:underline}
body.peek-open{overflow:hidden}

/* ── Memo audio narration — custom chaptered player (shown only when an audio file exists) ── */
.memo-audio{margin:0 0 18px; padding:0 0 16px; border-bottom:1px solid var(--rule)}
.memo-audio .ma-audio{display:none}   /* native element is driven by our own controls */
.memo-audio .ma-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:10px}
.memo-audio .ma-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--clay); font-weight:700}
.memo-audio .ma-est{font-size:10.5px; color:var(--ink-3); white-space:nowrap}
.memo-audio .ma-controls{display:flex; align-items:center; gap:4px; margin-bottom:9px}
.memo-audio .ma-btn{flex:none; border:1px solid var(--rule-2); background:var(--card); color:var(--clay-deep); font-family:inherit; font-size:11px; font-weight:600; height:30px; min-width:30px; padding:0 7px; border-radius:8px; cursor:pointer; transition:.12s}
.memo-audio .ma-btn:hover{border-color:var(--clay); background:var(--clay-tint)}
.memo-audio .ma-play{min-width:40px; font-size:13px; background:var(--clay); border-color:var(--clay-deep); color:#fff}
.memo-audio .ma-play:hover{background:var(--clay-deep)}
.memo-audio .ma-speed{margin-left:auto; min-width:42px}
.memo-audio .ma-bar{position:relative; height:6px; background:var(--paper-2); border:1px solid var(--rule); border-radius:6px; cursor:pointer; overflow:hidden}
.memo-audio .ma-bar:focus-visible{outline:2px solid var(--clay); outline-offset:2px}
.memo-audio .ma-fill{position:absolute; left:0; top:0; bottom:0; width:0; background:var(--clay)}
.memo-audio .ma-time{display:flex; justify-content:space-between; font-size:10.5px; color:var(--ink-3); margin-top:5px; font-variant-numeric:tabular-nums}
.memo-audio .ma-now{margin-top:9px; font-size:11px; color:var(--clay-deep); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.memo-audio .ma-now[hidden]{display:none}
/* Unified Contents list: each row's label jumps the text; the time chip (added when audio exists) plays that chapter */
.toc .toc-row{display:flex; align-items:baseline; gap:6px; border-radius:7px}
.toc .toc-jump{flex:1; min-width:0; text-align:left; background:none; border:none; border-left:2px solid transparent; font-family:inherit; color:var(--ink-2); font-size:13.5px; padding:7px 0 7px 14px; line-height:1.35; cursor:pointer; overflow-wrap:break-word}
.toc .toc-jump:hover{color:var(--ink); border-left-color:var(--rule-2)}
.toc .toc-jump.active{color:var(--clay-deep); border-left-color:var(--clay); font-weight:500}
.toc .toc-time{flex:none; font-size:10.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; padding:2px 6px; margin-right:2px; border-radius:6px; cursor:pointer; transition:.12s}
.toc .toc-time:hover{background:var(--clay-tint); color:var(--clay-deep)}
.toc .toc-row.now-playing{background:var(--clay-tint)}
.toc .toc-row.now-playing .toc-jump{color:var(--clay-deep); font-weight:600}
.toc .toc-row.now-playing .toc-time{color:var(--clay); font-weight:600}
/* Listen call-to-action in the memo's reading column */
.memo-listen-cta{display:inline-flex; align-items:center; gap:11px; margin:0 0 28px; padding:11px 18px 11px 12px; border:1px solid var(--rule-2); background:var(--card); border-radius:12px; cursor:pointer; font-family:inherit; transition:.14s}
.memo-listen-cta:hover{border-color:var(--clay); box-shadow:0 0 0 3px var(--clay-tint)}
.memo-listen-cta .mlc-ico{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--clay); color:#fff; font-size:11px; flex:none}
.memo-listen-cta .mlc-t{font-weight:600; font-size:14px; color:var(--clay-deep)}
.memo-listen-cta .mlc-sub{font-size:12px; color:var(--ink-3)}

/* ── "Print / Save as PDF" action (memo rail) ── */
.memo-print{display:flex; align-items:center; gap:8px; width:100%; margin:0 0 18px; padding:10px 13px; background:var(--card); border:1px solid var(--rule-2); border-radius:10px; color:var(--ink-2); font-family:inherit; font-size:13px; font-weight:500; cursor:pointer; transition:.15s; text-align:left}
.memo-print:hover{border-color:var(--clay); color:var(--clay-deep); background:var(--paper-2)}
.memo-print svg{flex:none; opacity:.8}
.memo-print:hover svg{opacity:1}
.print-only{display:none}   /* shown only when printing (see @media print) */

@media(max-width:640px){ #peek .peek-panel{width:100%} }

/* ──────────────────────────────────────────────────────────────────────────
   PRINT / SAVE-AS-PDF — typeset the memo for paper (native browser PDF export →
   real, selectable, vector text; not a screen grab). Memo is first-class; the
   Questions view prints defensively (chrome hidden, evidence auto-expanded in JS).
   ────────────────────────────────────────────────────────────────────────── */
@media print {
  @page { size: A4; margin: 18mm 16mm; }

  /* drop all app chrome and the non-document views */
  .masthead, .search-wrap, #lens-menu, #about-modal, #peek, #welcome, #hud,
  #filter-bar, #panel, #detail, #explore, #ask,
  .toc, .memo-audio, .memo-listen-cta, .memo-print, .ch-tag, .doc-loading { display:none !important; }

  /* un-clip the app shell so the whole document flows across pages (the fixed-height,
     overflow-hidden panes would otherwise print only a single screenful) */
  html, body { height:auto !important; overflow:visible !important; background:#fff !important; }
  body { font-size:11pt; color:#16131a; }
  main { height:auto !important; overflow:visible !important; display:block !important; }
  .view { height:auto !important; }
  .view:not(.hidden) { display:block !important; }          /* the active view only; .hidden stays none */
  #memo, #briefing { height:auto !important; overflow:visible !important; }
  .doc { height:auto !important; overflow:visible !important; padding:0 !important; scroll-behavior:auto !important; }
  .doc-inner { max-width:none !important; margin:0 !important; padding:0 !important; }

  /* memo typography for paper */
  .memo-inner { font-family:"Newsreader",Georgia,serif !important; font-size:11pt !important; line-height:1.5 !important; color:#16131a !important; padding-top:0 !important; }
  .memo-inner > h1:first-child { font-family:"Fraunces",Georgia,serif !important; font-size:22pt !important; line-height:1.12 !important; color:#591a68 !important; margin:0 0 6pt !important; }
  .memo-inner h2 { font-family:"Fraunces",Georgia,serif !important; font-size:15pt !important; color:#591a68 !important; border:none !important; padding:0 !important; margin:16pt 0 7pt !important; break-after:avoid; break-inside:avoid; }
  .memo-inner h3 { font-size:12.5pt !important; color:#16131a !important; margin:10pt 0 5pt !important; break-after:avoid; break-inside:avoid; }
  .memo-inner p { margin:0 0 7pt !important; orphans:3; widows:3; }
  .memo-inner li { orphans:3; widows:3; }
  .memo-inner ul, .memo-inner ol { margin:4pt 0 8pt !important; }
  .memo-inner strong, .memo-inner b { color:#000 !important; }
  .memo-inner hr { display:none !important; }
  .memo-inner blockquote { border-left:2pt solid #591a68 !important; color:#333 !important; margin:8pt 0 !important; padding:2pt 0 2pt 12pt !important; break-inside:avoid; }
  .memo-inner table { font-size:9pt !important; break-inside:avoid; }

  /* citations: clean inline references on paper — no grey box, no ↗ arrow, no link affordance */
  .cite, .cite-ref { display:inline !important; background:none !important; border:none !important; padding:0 !important; border-radius:0 !important; white-space:normal !important; color:#5a5360 !important; font-weight:400 !important; }
  .cite-ref { font-size:.82em !important; }
  .cite-ref::after { content:"" !important; }

  /* print-only provenance line at the foot of the memo */
  .print-foot { display:block !important; margin-top:16pt; padding-top:7pt; border-top:.5pt solid #bbb; font-family:"Inter",sans-serif; font-size:8.5pt; color:#777; }

  /* Questions view, if printed: hide its chrome; answers + (auto-expanded) evidence flow */
  .doc-hero .hero-meta, .qcard-actions, .toc-cross, #briefing .open-graph, #briefing .ev-details summary { display:none !important; }
  .qcard h3 { break-after:avoid; }
  .qcard { break-inside:auto; }
}

/* ───────────── NEWS — the latest-evidence feed ───────────── */
.news-doc{max-width:780px; margin:0 auto; padding:56px 40px 120px}
.news-hero .eyebrow{font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--clay); font-weight:600; margin-bottom:16px}
.news-hero .news-updated{color:var(--ink-3); letter-spacing:.04em}
.news-hero h1{font-family:"Fraunces",serif; font-weight:600; font-size:34px; line-height:1.1; letter-spacing:-.02em; margin:0 0 14px}
.news-hero p{font-family:"Newsreader",serif; font-size:17px; line-height:1.55; color:var(--ink-2); margin:0 0 18px}
.news-digest{font-size:14px; color:var(--ink-2); background:var(--paper-2); border:1px solid var(--rule); border-radius:10px; padding:11px 15px; margin-bottom:26px}
.news-digest b{color:var(--ink); font-weight:600}
.news-filters{display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); margin-bottom:8px; position:sticky; top:0; z-index:5; background:var(--paper)}
.news-filters .nf-l{font-size:12px; color:var(--ink-3); font-weight:600; display:flex; align-items:center; gap:7px}
.news-filters select{width:auto; min-width:150px; padding:7px 10px; font-size:13px}
.news-filters .nf-count{margin-left:auto; font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.news-filters .fb-clear{background:none; border:none; color:var(--clay); font-size:12px; font-weight:600; cursor:pointer; padding:4px 2px}
.news-day{font-family:"Inter",sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:700; margin:26px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--rule-2)}
.news-feed .news-day:first-child{margin-top:18px}
.news-item{display:flex; gap:16px; align-items:flex-start; justify-content:space-between; padding:14px 14px; border:1px solid transparent; border-radius:11px; cursor:pointer; transition:.12s}
.news-item:hover{background:var(--card); border-color:var(--rule-2); box-shadow:0 1px 7px rgba(48,28,52,.07)}   /* clearer "clickable" affordance */
.news-item:focus-visible{outline:2px solid var(--clay); outline-offset:2px}
.ni-main{min-width:0; flex:1}
.ni-claim{font-family:"Newsreader",serif; font-size:17px; line-height:1.4; color:var(--ink); margin-bottom:6px}
.ni-meta{display:flex; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--ink-3)}
.ni-meta .ni-src{color:var(--ink-2); font-weight:600}
.ni-meta .ni-chap{color:var(--clay-deep)}
.ni-meta .ni-date{font-variant-numeric:tabular-nums}
.ni-grades{flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:5px}
.ni-grade{font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:5px; white-space:nowrap; border:1px solid var(--rule); background:var(--paper-2); color:var(--ink-2)}
.ni-grade.g-verified{color:var(--green); border-color:#cfe0cb; background:#f1f6ef}
.ni-grade.g-reported{color:var(--ochre-text); border-color:#ecdcbf; background:#f8f1e3}
.ni-grade.g-estimated,.ni-grade.g-inferred{color:var(--clay-deep); border-color:#ecd6cb; background:#f8ece5}
.ni-cred{font-size:10px; color:var(--ink-3); letter-spacing:.02em}
.ni-cred.c1{color:var(--green)} .ni-cred.c2{color:var(--ochre-text)} .ni-cred.c3{color:var(--ink-3)}
.news-empty{text-align:center; color:var(--ink-3); padding:48px 20px; font-family:"Newsreader",serif; font-size:16px}
.news-empty .link-btn{color:var(--clay); background:none; border:none; cursor:pointer; font-weight:600}
@media(max-width:640px){ .news-doc{padding:36px 20px 100px} .news-hero h1{font-size:27px} .news-item{padding:12px 8px} .ni-grades{gap:4px}
  .news-filters{position:static; gap:10px} .news-filters select{min-width:0; flex:1} .news-filters .nf-count{margin-left:0; width:100%} }   /* mobile: body-scroll, so not sticky; let filters fit */