/* CHUMA RADAR Portal — design system (mirrors chumainstitute.com tokens) */
:root{
  --green:#3F5E1E; --green-deep:#2E4616; --green-soft:#EDF2E4;
  --ink:#121409; --paper:#FFFFFF; --paper-2:#FAFAF6; --line:#E3E2D9;
  --muted:#6E7163; --good:#3E7A4E; --warn:#A3651B; --bad:#A8382E;
  --serif:"Source Serif 4", Georgia, serif;
  --sans:"IBM Plex Sans", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
  --sidebar:220px;
  --bar-h:64px;
}
*{box-sizing:border-box; margin:0}
body{font-family:var(--sans); color:var(--ink); background:var(--paper); line-height:1.6}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--green); outline-offset:2px}

/* ── Header ── */
.wrap{max-width:1200px; margin:0 auto; padding:0 24px}
.bracket{position:relative; display:inline-block; padding:5px 14px 5px 10px}
.bracket::before{content:""; position:absolute; inset:0; border:2.5px solid var(--ink); border-right:none}
.bracket::after{content:""; position:absolute; right:0; top:0; bottom:0; width:12px;
  border-top:2.5px solid var(--ink); border-bottom:2.5px solid var(--ink)}
.wordmark{font-weight:600; letter-spacing:.14em; font-size:14px}
.wordmark b{color:var(--green)}
.radar-label{font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:var(--green);
  background:var(--green-soft); border:1px solid var(--green); border-radius:2px;
  padding:2px 8px; font-weight:500}
header{border-bottom:1px solid var(--line); background:var(--paper); position:sticky; top:0; z-index:20}
.nav{display:flex; align-items:center; gap:16px; padding:12px 0}
.nav nav{display:flex; gap:20px; margin-left:auto; font-size:13.5px; color:#3B3E31; align-items:center}
.nav nav a:hover{color:var(--green)}
.nav .cta{background:var(--green); color:#fff; padding:7px 14px; border-radius:3px; font-weight:500; font-size:13px}
.nav .cta:hover{background:var(--green-deep)}
.kicker{font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--green); font-weight:500}

/* ── Portal hero ── */
.portal-hero{background:var(--paper-2); border-bottom:1px solid var(--line); padding:32px 0 28px}
.portal-hero h1{font-family:var(--serif); font-size:clamp(22px,3vw,30px); font-weight:700;
  line-height:1.1; margin:6px 0 8px; letter-spacing:.04em}
.portal-hero .dek{font-size:14.5px; color:var(--muted)}
.hero-access{font-size:13px; margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.access-free{color:var(--good); font-weight:500}
.access-paid{color:var(--warn); font-weight:500}
.access-divider{color:var(--line)}

/* ── Portal layout ── */
.portal-layout{display:flex; gap:0; align-items:flex-start; padding-bottom:120px}

/* ── Sidebar ── */
.sidebar{width:var(--sidebar); flex-shrink:0; position:sticky; top:57px;
  border-right:1px solid var(--line); padding:20px 18px 20px 0; max-height:calc(100vh - 57px); overflow-y:auto}
.filter-section{margin-bottom:20px}
.filter-label{font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--muted);
  font-weight:500; margin-bottom:8px}
.sidebar input[type=search]{width:100%; border:1px solid var(--line); border-radius:3px;
  padding:8px 10px; font-size:13px; font-family:var(--sans); color:var(--ink); background:var(--paper)}
.sidebar input[type=search]:focus{outline:2px solid var(--green); outline-offset:0}
.filter-list{display:flex; flex-direction:column; gap:4px}
.filter-check{display:flex; align-items:center; gap:7px; font-size:13px; cursor:pointer; padding:1px 0}
.filter-check input{accent-color:var(--green); cursor:pointer; width:14px; height:14px}
.filter-count{font-family:var(--mono); font-size:10.5px; color:var(--muted); margin-left:auto}
.btn-clear{font-size:12px; color:var(--muted); background:none; border:none; cursor:pointer;
  padding:0; text-decoration:underline; margin-top:4px}
.btn-clear:hover{color:var(--ink)}
@media(max-width:760px){
  .sidebar{width:100%; position:static; border-right:none; border-bottom:1px solid var(--line);
    padding:16px 0; max-height:none}
  .portal-layout{flex-direction:column}
}

/* ── Doc main ── */
.doc-main{flex:1; min-width:0; padding:20px 0 20px 24px}
.doc-toolbar{display:flex; align-items:center; gap:16px; margin-bottom:16px;
  padding-bottom:12px; border-bottom:1px solid var(--line)}
.doc-count{font-size:13px; color:var(--muted); font-family:var(--mono)}
.select-all-wrap{display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer; margin-left:auto}
.select-all-wrap input{accent-color:var(--green); cursor:pointer}

/* ── Doc grid ── */
.doc-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line)}
.doc-card{background:var(--paper); padding:14px 16px; display:flex; flex-direction:column;
  gap:6px; cursor:pointer; transition:background .1s}
.doc-card:hover{background:var(--paper-2)}
.doc-card.is-selected{background:#EDF6E4; border-left:3px solid var(--green)}
.doc-card-top{display:flex; align-items:center; gap:8px}
.doc-card-top input[type=checkbox]{accent-color:var(--green); width:15px; height:15px;
  flex-shrink:0; cursor:pointer; margin-top:1px}
.state-pill{font-family:var(--mono); font-size:10px; letter-spacing:.1em; font-weight:500;
  padding:1px 6px; border-radius:2px; background:var(--paper-2); border:1px solid var(--line);
  color:var(--ink); flex-shrink:0}
.type-tag{font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  padding:1px 6px; border-radius:2px; flex-shrink:0}
.tag-green{background:var(--green-soft); color:var(--green); border:1px solid var(--green)}
.tag-green-soft{background:var(--green-soft); color:var(--green-deep); border:1px solid #C5D8A4}
.tag-warn{background:#FFF3E0; color:var(--warn); border:1px solid #E8C07A}
.tag-ink{background:var(--paper-2); color:var(--ink); border:1px solid var(--line)}
.tag-muted{background:var(--paper-2); color:var(--muted); border:1px solid var(--line)}
.doc-title{font-size:13px; line-height:1.35; color:var(--ink); flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.doc-meta{display:flex; align-items:center; justify-content:space-between; gap:8px}
.doc-date{font-family:var(--mono); font-size:10.5px; color:var(--muted)}
.doc-source-link{font-size:11.5px; color:var(--green); font-weight:500; white-space:nowrap;
  display:flex; align-items:center; gap:3px}
.doc-source-link:hover{text-decoration:underline}
.no-text-badge{font-family:var(--mono); font-size:9.5px; color:var(--muted); letter-spacing:.05em}

/* ── Load more ── */
.btn{display:inline-block; font-size:13.5px; padding:9px 18px; border-radius:3px;
  font-weight:500; cursor:pointer; border:none; font-family:var(--sans)}
.btn-line{border:1.5px solid var(--green); color:var(--green); background:none}
.btn-line:hover{background:var(--green); color:#fff}
.btn-green{background:var(--green); color:#fff}
.btn-green:hover{background:var(--green-deep)}
.btn-text{background:none; border:none; cursor:pointer; font-size:13px; color:var(--muted);
  font-family:var(--sans); text-decoration:underline; padding:0}
.btn-text:hover{color:var(--ink)}

/* ── Selection bar ── */
.selection-bar{position:fixed; bottom:0; left:0; right:0; z-index:30;
  background:var(--ink); color:#fff; border-top:2px solid var(--green); box-shadow:0 -2px 12px rgba(0,0,0,.18)}
.selection-inner{display:flex; align-items:center; gap:16px; padding:12px 24px; flex-wrap:wrap}
#sel-count{font-family:var(--mono); font-size:13px; white-space:nowrap; min-width:100px}
.sel-actions{display:flex; align-items:center; gap:10px; flex:1; flex-wrap:wrap}
#summary-question{flex:1; min-width:200px; border:1px solid #444; border-radius:3px;
  padding:8px 12px; font-size:13px; font-family:var(--sans); background:#222; color:#fff}
#summary-question::placeholder{color:#888}
#summary-question:focus{outline:2px solid var(--green); border-color:transparent}
#clear-sel{color:#aaa}
#clear-sel:hover{color:#fff}

/* ── Summary panel ── */
.summary-panel{background:var(--paper-2); border-top:1px solid var(--line); padding:32px 0 48px}
.summary-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px}
.summary-output{font-size:15px; line-height:1.7; max-width:760px; white-space:pre-wrap; word-break:break-word}
.summary-output strong{font-weight:600}
.summary-footer{margin-top:20px; padding-top:14px; border-top:1px solid var(--line)}
.mono-note{font-family:var(--mono); font-size:10.5px; color:var(--muted)}
.summary-cursor{display:inline-block; width:2px; height:1em; background:var(--green);
  margin-left:2px; vertical-align:text-bottom; animation:blink .8s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.summary-error{color:var(--bad); font-size:13.5px}

/* ── Gate modal ── */
.gate-modal{position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center}
.gate-backdrop{position:absolute; inset:0; background:rgba(18,20,9,.55)}
.gate-box{position:relative; background:var(--paper); border:1px solid var(--line);
  box-shadow:0 4px 24px rgba(0,0,0,.18); padding:36px 32px; max-width:420px; width:90%;
  text-align:center; border-radius:2px}
.gate-box h2{font-family:var(--serif); font-size:22px; margin:10px 0 12px}
.gate-box p{font-size:14px; color:var(--muted); margin-bottom:20px; line-height:1.6}
.gate-box .btn-green{display:block; width:100%; padding:12px; font-size:15px; margin-bottom:10px}
.gate-box .btn-text{font-size:13px}

/* ── Empty state ── */
.empty-state{grid-column:1/-1; padding:48px 24px; text-align:center; color:var(--muted); font-size:14px}

/* ── Footer ── */
footer{padding:18px 0 30px; font-size:12px; color:var(--muted); border-top:1px solid var(--line)}
footer .wrap{display:flex; gap:20px; flex-wrap:wrap; align-items:center}
footer a{border-bottom:1px solid var(--line)}
footer a:hover{color:var(--ink)}
footer .co{margin-left:auto}

@media(max-width:760px){
  .doc-main{padding:16px 0}
  .selection-inner{padding:10px 16px}
  #summary-question{min-width:140px}
}