/* EndoCann evidence-library design system.
   Used by /ECS/clinical/ and /ECS/oncology/ — pairs with ec-shell.css (nav/footer)
   and ec-pages.css (tokens, hero, buttons, breadcrumb).

   Replaces the two byte-identical 92KB inline style blocks those pages carried,
   of which ~81% was dead (16 superseded header designs stacked with !important).

   Themes: light (default) / dark / clinical, switched via html[data-theme] and
   implemented as PURE TOKEN SWAPS — no per-component override lists. */

/* ── Theme tokens ─────────────────────────────────────────────────────────── */
:root{
  --ev-bg:var(--bg);
  --ev-panel:#fff;
  --ev-card:#fff;
  --ev-ink:var(--ink);
  --ev-muted:var(--muted);
  --ev-muted2:var(--muted2);
  --ev-line:var(--line);
  --ev-inset:#f7fbf8;          /* logic / evidence sub-panels */
  --ev-chip:#fff;
  --ev-field:#fff;
  --ev-head:var(--ecg);        /* headings */
  --ev-accent:var(--ecg2);
  --ev-shadow:var(--shadow-sm);
  --ev-shadow-md:var(--sh);
}
html[data-theme="dark"]{
  --ev-bg:#08170f;
  --ev-panel:#0d2118;
  --ev-card:#0f2619;
  --ev-ink:#e6f0ea;
  --ev-muted:#9fc0b1;
  --ev-muted2:#7fa694;
  --ev-line:#254034;
  --ev-inset:#0b1e14;
  --ev-chip:#0f2619;
  --ev-field:#0b1e14;
  --ev-head:#eaf5ee;
  --ev-accent:var(--ecgold);
  --ev-shadow:0 1px 2px rgba(0,0,0,.4);
  --ev-shadow-md:0 12px 32px rgba(0,0,0,.5);
}
/* "Clinical" — a flatter, higher-contrast, lower-chroma reading mode. */
html[data-theme="clinical"]{
  --ev-bg:#eef1f4;
  --ev-panel:#fff;
  --ev-card:#fff;
  --ev-ink:#12212b;
  --ev-muted:#4d5f6d;
  --ev-muted2:#6b7c8a;
  --ev-line:#d3dce3;
  --ev-inset:#f4f7f9;
  --ev-chip:#fff;
  --ev-field:#fff;
  --ev-head:#0d3550;
  --ev-accent:#125e9c;
  --ev-shadow:0 1px 2px rgba(18,33,43,.06);
  --ev-shadow-md:0 10px 26px rgba(18,33,43,.10);
}
html[data-theme="dark"] body,html[data-theme="clinical"] body{background:var(--ev-bg);color:var(--ev-ink)}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.ev-wrap{max-width:var(--wrap-wide);margin:0 auto;padding:0 var(--gutter)}
.ev-main{padding-top:clamp(28px,4vw,44px);padding-bottom:clamp(40px,6vw,72px)}
.ev-section{margin:clamp(34px,5vw,54px) 0;scroll-margin-top:90px}
.ev-section-head{max-width:66ch;margin-bottom:22px}
.ev-section-head h2{font-family:var(--font-head);font-size:clamp(23px,3vw,32px);font-weight:800;
  color:var(--ev-head);letter-spacing:-.02em;margin:0 0 10px}
.ev-section-head p{margin:0;color:var(--ev-muted);font-size:16px;line-height:1.65}
.ev-kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ev-accent);margin-bottom:10px}
.ev-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ecgold);
  box-shadow:0 0 0 4px rgba(214,180,93,.18)}

/* ── Hero (extends .ec-hero from ec-pages.css) ────────────────────────────── */
/* ec-pages.css scopes the hero's vertical padding to `.ec-hero .ec-wrap`. These
   pages use the wider .ev-wrap inside the hero, so that rule never matches and
   the hero would render with no top/bottom padding at all. Slightly roomier than
   the content-page scale (44/72 and 48/76) because this hero also carries a stat
   strip and a CTA row. */
.ec-hero .ev-wrap{padding:clamp(48px,6.5vw,80px) var(--gutter) clamp(52px,7vw,84px)}

.ev-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
@media(max-width:760px){.ev-stats{grid-template-columns:repeat(2,1fr)}}
.ev-stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-sm);padding:13px 15px}
.ev-stat b{display:block;font-family:var(--font-head);font-weight:800;font-size:24px;color:#fff;
  line-height:1.1}
.ev-stat span{display:block;font-size:12.5px;color:#a8c6b6;margin-top:3px}

/* ── Property / lens chips ────────────────────────────────────────────────── */
.ev-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.ev-chip{display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;
  background:var(--ev-chip);border:1px solid var(--ev-line);border-radius:var(--r-lg);
  padding:15px 17px;color:inherit;font:inherit;box-shadow:var(--ev-shadow);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.ev-chip:hover{transform:translateY(-3px);box-shadow:var(--ev-shadow-md);border-color:#cfe0d6}
.ev-chip b{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--ev-head)}
.ev-chip span{font-family:var(--font-head);font-weight:800;font-size:20px;color:var(--ev-accent)}
.ev-chip small{color:var(--ev-muted2);font-size:12.5px}
.ev-chip[aria-pressed="true"]{border-color:var(--ecgold);
  box-shadow:0 0 0 2px rgba(214,180,93,.28),var(--ev-shadow-md)}

/* ── Filter toolbar ───────────────────────────────────────────────────────── */
.ev-controls{display:grid;grid-template-columns:1fr 1fr .9fr 1.35fr;gap:12px;
  background:var(--ev-panel);border:1px solid var(--ev-line);border-radius:var(--r-lg);
  padding:16px;box-shadow:var(--ev-shadow);position:sticky;top:8px;z-index:20}
@media(max-width:900px){.ev-controls{grid-template-columns:1fr 1fr;position:static}}
@media(max-width:560px){.ev-controls{grid-template-columns:1fr}}
.ev-field label{display:block;font-family:var(--font-head);font-size:11.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ev-muted2);margin-bottom:5px}
.ev-field select,.ev-field input{width:100%;min-height:44px;font:inherit;font-size:14.5px;
  color:var(--ev-ink);background:var(--ev-field);border:1px solid var(--ev-line);
  border-radius:var(--r-sm);padding:10px 13px}
.ev-field select:focus-visible,.ev-field input:focus-visible{outline:3px solid var(--ecgold);
  outline-offset:2px}
.ev-reset{align-self:end}

/* ── Result meta ──────────────────────────────────────────────────────────── */
.ev-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:20px 0 16px;
  color:var(--ev-muted);font-size:14px}
.ev-pill{display:inline-flex;align-items:center;font-family:var(--font-head);font-weight:700;
  font-size:13px;color:var(--ecg);background:var(--ecgold-soft);border-radius:var(--pill);
  padding:6px 13px}
html[data-theme="dark"] .ev-pill{color:#0b3320}

/* ── Evidence cards ───────────────────────────────────────────────────────── */
.ev-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:900px){.ev-grid{grid-template-columns:1fr}}

/* Desktop: cap the results list in its own scroll pane. Without this the 207
   cards make the page ~70 screens tall and the sections below it (guardrails,
   how-to-cite, related) are effectively unreachable. The GRID scrolls, not the
   section, so the filter toolbar and result count above it stay usable.
   max-height (not height) lets the pane shrink when filters narrow the results.
   overscroll-behavior is left at its default so a continued scroll gesture
   carries on to the page once the pane bottoms out.
   Not applied below 901px: single-column there, so a pane would show ~1 card
   and add nested touch-scrolling. */
@media(min-width:901px){
  #ev-grid{max-height:clamp(520px,75vh,1000px);overflow-y:auto;
    /* room for the scrollbar and the cards' -3px hover lift + shadow */
    padding:4px 14px 6px 4px;
    scrollbar-width:thin;scrollbar-color:var(--ev-line) transparent}
  #ev-grid::-webkit-scrollbar{width:10px}
  #ev-grid::-webkit-scrollbar-track{background:transparent}
  #ev-grid::-webkit-scrollbar-thumb{background:var(--ev-line);border-radius:var(--pill);
    border:3px solid transparent;background-clip:content-box}
  #ev-grid::-webkit-scrollbar-thumb:hover{background:var(--ev-muted2);background-clip:content-box}
  #ev-grid:focus-visible{outline:3px solid var(--ecgold);outline-offset:3px}
}
.ev-card{display:flex;flex-direction:column;gap:11px;background:var(--ev-card);
  border:1px solid var(--ev-line);border-radius:var(--r-lg);padding:22px;
  box-shadow:var(--ev-shadow);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.ev-card:hover{transform:translateY(-3px);box-shadow:var(--ev-shadow-md);border-color:#cfe0d6}
.ev-card[hidden]{display:none}
/* The card a #RES-#### link landed on (ec-evidence.js). The gold ring is also
   its focus indicator, so the default outline is not needed on top of it. */
.ev-card.is-target{border-color:var(--ecgold);
  box-shadow:0 0 0 3px rgba(214,180,93,.45),var(--ev-shadow-md)}
.ev-card.is-target:focus{outline:none}
.ev-card h3{margin:0;font-family:var(--font-head);font-size:16.5px;font-weight:700;
  line-height:1.4;color:var(--ev-head)}
.ev-card h3 small{font-weight:600;color:var(--ev-muted2);font-size:13.5px}
.ev-card-lead{margin:0;font-size:14px;color:var(--ev-muted);line-height:1.55}
.ev-card-lead b{font-family:var(--font-head);color:var(--ev-accent)}
.ev-logic{background:var(--ev-inset);border:1px solid var(--ev-line);border-radius:var(--r-sm);
  padding:11px 13px;font-size:13.5px;line-height:1.6;color:var(--ev-ink)}
.ev-logic b{font-family:var(--font-head);color:var(--ev-head)}

/* Tag badges — semantic palettes */
.ev-tags{display:flex;flex-wrap:wrap;gap:7px}
.ev-tag{font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:5px 10px;border-radius:var(--pill);
  border:1px solid transparent;white-space:nowrap}
.ev-tag.verified{background:#e8f5ee;color:#0b5a37;border-color:#c8e6d5}
.ev-tag.guideline{background:#e7f0fb;color:#125e9c;border-color:#c7dcf3}
.ev-tag.context{background:#fdf3e0;color:#8a6414;border-color:#f0dfba}
.ev-tag.clinical{background:#eef3f7;color:#3c5666;border-color:#d6e2eb}
.ev-tag.source{background:var(--ev-inset);color:var(--ev-muted);border-color:var(--ev-line)}
html[data-theme="dark"] .ev-tag.verified{background:#12331f;color:#8fd6ab;border-color:#255c39}
html[data-theme="dark"] .ev-tag.guideline{background:#12283d;color:#8fc3f0;border-color:#1f456b}
html[data-theme="dark"] .ev-tag.context{background:#33290f;color:#e5c47a;border-color:#5c4a1c}
html[data-theme="dark"] .ev-tag.clinical{background:#182a33;color:#a9c7d6;border-color:#2b4753}

/* ID pills (PMID / PMCID / DOI / source id) */
.ev-ids{display:flex;flex-wrap:wrap;gap:6px}
.ev-idpill{font-size:11.5px;font-family:var(--font-head);font-weight:600;color:var(--ev-muted);
  background:var(--ev-inset);border:1px solid var(--ev-line);border-radius:7px;padding:4px 9px;
  word-break:break-all}

/* Card actions */
.ev-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.ev-src,.ev-copy{font-family:var(--font-head);font-weight:700;font-size:13.5px;
  border-radius:var(--r-sm);padding:9px 15px;cursor:pointer;text-decoration:none;
  border:1.5px solid transparent;transition:transform .16s ease,border-color .16s ease,
  box-shadow .16s ease,background .16s ease}
.ev-src{background:var(--ecg);color:#fff}
.ev-src:hover{background:var(--ecg2);transform:translateY(-2px)}
.ev-copy{background:var(--ev-card);color:var(--ev-head);border-color:var(--ev-line);font:inherit;
  font-family:var(--font-head);font-weight:700;font-size:13.5px}
.ev-copy:hover{border-color:var(--ev-accent);transform:translateY(-2px)}

/* Empty state */
.ev-empty{grid-column:1/-1;text-align:center;padding:48px 20px;color:var(--ev-muted);
  background:var(--ev-panel);border:1px dashed var(--ev-line);border-radius:var(--r-lg)}
.ev-empty[hidden]{display:none}

/* ── Guardrail cards ──────────────────────────────────────────────────────── */
.ev-guards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.ev-guards{grid-template-columns:1fr}}
.ev-guard{background:var(--ev-panel);border:1px solid var(--ev-line);
  border-left:4px solid var(--ecgold);border-radius:var(--r-lg);padding:22px;
  box-shadow:var(--ev-shadow)}
.ev-guard h3{margin:0 0 8px;font-family:var(--font-head);font-size:16.5px;font-weight:700;
  color:var(--ev-head)}
.ev-guard p{margin:0;color:var(--ev-muted);font-size:14.5px;line-height:1.6}

/* ── Table component (none existed site-wide) ─────────────────────────────── */
.ev-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--ev-line);
  border-radius:var(--r-lg);background:var(--ev-panel);box-shadow:var(--ev-shadow);margin:18px 0}
.ev-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:460px}
.ev-table caption{text-align:left;padding:14px 16px 0;font-family:var(--font-head);
  font-weight:700;color:var(--ev-head)}
.ev-table th,.ev-table td{padding:12px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--ev-line);line-height:1.55}
.ev-table thead th{font-family:var(--font-head);font-size:12px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ev-muted2);
  background:var(--ev-inset)}
.ev-table tbody tr:last-child th,.ev-table tbody tr:last-child td{border-bottom:0}
.ev-table tbody th{font-family:var(--font-head);font-weight:700;color:var(--ev-head)}

/* ── Section dock (was a fixed bottom bar) ────────────────────────────────── */
.ev-dock{position:sticky;top:0;z-index:30;display:flex;gap:6px;overflow-x:auto;
  background:color-mix(in srgb,var(--ev-bg) 88%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--ev-line);padding:10px var(--gutter);scrollbar-width:none}
.ev-dock::-webkit-scrollbar{display:none}
.ev-dock a{flex:none;font-family:var(--font-head);font-weight:700;font-size:13.5px;
  color:var(--ev-muted);text-decoration:none;padding:8px 14px;border-radius:var(--pill);
  white-space:nowrap;transition:background .16s ease,color .16s ease}
.ev-dock a:hover{background:var(--ev-inset);color:var(--ev-head)}
.ev-dock a.active{background:var(--ecg);color:#fff}
html[data-theme="dark"] .ev-dock a.active{background:var(--ecgold);color:#0b3320}

/* ── Theme switcher ───────────────────────────────────────────────────────── */
.ev-themes{display:inline-flex;gap:4px;background:var(--ev-inset);border:1px solid var(--ev-line);
  border-radius:var(--pill);padding:4px}
.ev-themes button{font-family:var(--font-head);font-weight:700;font-size:12.5px;
  color:var(--ev-muted);background:none;border:0;border-radius:var(--pill);padding:7px 14px;
  cursor:pointer;transition:background .16s ease,color .16s ease}
.ev-themes button[aria-pressed="true"]{background:var(--ecg);color:#fff}
html[data-theme="dark"] .ev-themes button[aria-pressed="true"]{background:var(--ecgold);color:#0b3320}

/* ── Toast ────────────────────────────────────────────────────────────────── */
.ev-toast{position:fixed;right:16px;bottom:16px;z-index:9999;background:var(--ecg);color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:14px;padding:13px 20px;
  border-radius:var(--r-sm);box-shadow:var(--sh-lg);opacity:0;transform:translateY(10px);
  pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.ev-toast.show{opacity:1;transform:none}

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print{
  .ec-nav,.ec-footer,.ev-dock,.ev-controls,.ev-copy,.ev-themes,.ev-toast{display:none!important}
  .ev-card,.ev-guard{break-inside:avoid;box-shadow:none;border-color:#ccc}
  .ec-hero{background:none!important;color:#000!important}
  /* never clip the results to the on-screen pane when printing */
  #ev-grid{max-height:none!important;overflow:visible!important}
}