:root {
  --bg: #fbfaf7; --panel: #fff; --ink: #1d2327; --muted: #5f6b73; --line: #e3e0d8;
  --accent: #0f6e6a; --accent-soft: #e2f1ef;
  --pos: #1f7a3a; --null: #616161; --mixed: #8f5800; --harm: #b3261e; --unk: #5f646a;
}
/* Dark palette: follows the system unless the reader picks day or night (theme toggle, top right). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15191c; --panel: #1d2226; --ink: #e8e6e1; --muted: #9aa4ab; --line: #30373c;
    --accent: #5cc4bc; --accent-soft: #1f3533;
    --pos: #6fcf8a; --null: #a5a5a5; --mixed: #e0a542; --harm: #f2817a; --unk: #a3a8ad;
  }
}
:root[data-theme="dark"] {
    --bg: #15191c; --panel: #1d2226; --ink: #e8e6e1; --muted: #9aa4ab; --line: #30373c;
    --accent: #5cc4bc; --accent-soft: #1f3533;
    --pos: #6fcf8a; --null: #a5a5a5; --mixed: #e0a542; --harm: #f2817a; --unk: #a3a8ad;
}
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); }
.top { display: flex; align-items: center; gap: 24px; padding: 14px 24px; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 2; flex-wrap: wrap; }
.brand { margin: 0; font-size: 1rem; font-weight: 700; }
.brand a { text-decoration: none; color: var(--ink); }
/* Edition logo (build.mjs, edition.brand): woven rings, name, and the foundation's name tracked to the name's width. */
.brand a:has(.brand__mark) { display: flex; align-items: center; gap: 10px; }
.brand__mark { width: 42px; height: 42px; flex: none; }
.brand__txt { display: flex; flex-direction: column; font-family: "Public Sans", system-ui, sans-serif; line-height: 1; }
.brand__name { font-size: 22px; font-weight: 700; letter-spacing: -.022em; }
.brand__sub { margin-top: 4px; font-size: 8.4px; font-weight: 600; text-transform: uppercase; letter-spacing: .148em; color: var(--muted); white-space: nowrap; }
/* The HCF disc is navy; at night it gets a faint rim so it doesn't sink into the dark header. */
:root[data-theme="dark"] .brand__mark:has(#hcfm-disc) { border-radius: 50%; box-shadow: 0 0 0 1.5px #3d5a66; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand__mark:has(#hcfm-disc) { border-radius: 50%; box-shadow: 0 0 0 1.5px #3d5a66; } }
.top nav { display: flex; gap: 16px; }
.top nav a { text-decoration: none; color: var(--muted); padding: 2px 0; }
.top nav a.on { color: var(--ink); border-bottom: 2px solid var(--accent); }
/* Beta banner across the top, the same as SmartSearch's (HealthRAG public/index.html) minus the countdown. */
.beta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 8px 24px; background: #fff4d6; color: #5c3f00; border-bottom: 1px solid #f0d58a; font-size: 14px; line-height: 1.4; }
.beta-link { margin-left: auto; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.beta-tag { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: #5c3f00; color: #fff4d6; padding: 2px 8px; border-radius: 6px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .beta { background: #33280c; color: #f3d48a; border-color: #5c4a17; }
  :root:not([data-theme="light"]) .beta-tag { background: #f3d48a; color: #33280c; } }
:root[data-theme="dark"] .beta { background: #33280c; color: #f3d48a; border-color: #5c4a17; }
:root[data-theme="dark"] .beta-tag { background: #f3d48a; color: #33280c; }
@media (max-width: 660px) { .beta { padding: 8px 16px; } }
.draft { margin-left: auto; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--mixed); border: 1px solid currentColor; border-radius: 4px; padding: 1px 6px; }
main { max-width: 1240px; margin: 0 auto; padding: 16px 24px 48px; }
footer { max-width: 1240px; margin: 0 auto; padding: 16px 24px 40px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); }
.intro p { color: var(--muted); margin: 4px 0 16px; }
/* Edition home pitch (addiction-action.org): one headline, one paragraph, three ways in. */
.pitch h2 { margin: 6px 0 6px; font-size: 1.45rem; line-height: 1.25; }
.pitch p { max-width: 70ch; margin-bottom: 12px; }
.pitch__ways { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pitch__ways a { display: block; height: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); text-decoration: none; }
.pitch__ways a:hover, .pitch__ways a:focus-visible { border-color: var(--accent); }
.pitch__ways b { display: block; color: var(--accent); margin-bottom: 2px; }
.pitch__ways span { color: var(--muted); font-size: .92rem; }
@media (max-width: 760px) { .pitch__ways { grid-template-columns: 1fr; } .pitch h2 { font-size: 1.2rem; } }
/* Search sits above the filters, not inside them, so on a phone it stays on the page while the filters go in the drawer. */
.layout { display: grid; grid-template-columns: 270px 1fr; grid-template-rows: auto 1fr; grid-template-areas: "search results" "facets results"; gap: 10px 28px; align-items: start; }
.lsearch { grid-area: search; }
.facets { grid-area: facets; position: sticky; top: 70px; max-height: calc(100vh - 90px); overflow: auto; padding-right: 6px; }
.results { grid-area: results; min-width: 0; }
input[type=search], select { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); }
.layout input.lsearch { width: 100%; }
input.wide { width: 100%; max-width: 520px; margin-bottom: 14px; }
.facet { border-top: 1px solid var(--line); padding: 8px 0; }
.facet summary { cursor: pointer; font-weight: 600; font-size: 14px; }
/* Group header (Viv-Resource-Library#48): name (count) left; clear × and chevron right. */
.facet > summary { list-style: none; display: flex; align-items: center; gap: 6px; min-height: 26px; }
.facet > summary::-webkit-details-marker { display: none; }
.facet__name { flex: 1; min-width: 0; }
.facet > summary > .chev { width: 24px; display: inline-grid; place-items: center; }
.chev::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) translate(-1px, -1px); color: var(--muted); }
.chev { display: inline-grid; place-items: center; transition: transform .15s; }
.facet[open] > summary > .chev { transform: rotate(180deg); }
button.tx .chev::before { color: inherit; }
.facet__clear { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--accent-soft); color: var(--accent); font: 600 15px/1 system-ui, sans-serif; padding: 0; cursor: pointer; display: grid; place-items: center; }
.facet__clear:hover, .facet__clear:focus-visible { background: var(--accent); color: var(--panel); }
.facet ul { list-style: none; margin: 6px 0 0; padding: 0; max-height: 260px; overflow: auto; }
/* "Show all 60" (#280): an expanded group grows and the rail scrolls, instead of hiding the rest of the
   list behind a second scrollbar inside the rail's own, which made the click look like it did nothing. */
.facet ul.facet__list--all { max-height: none; overflow: visible; }
/* The parent a topic sits under (its MeSH category): a heading in the list, not a filter of its own. */
.facet .facet__head { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 10px 0 2px; }
.facet .facet__head:first-child { margin-top: 2px; }
.facet label { display: flex; gap: 8px; align-items: baseline; font-size: 14px; padding: 2px 0; cursor: pointer; }
/* Count in brackets right after the label (Viv-Resource-Library#48), not in its own column. */
.facet label .flab { flex: 1; min-width: 0; }
.facet em { font-style: normal; color: var(--muted); font-size: 12px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.toolbar select { margin-left: auto; }
.chip { font: inherit; font-size: 13px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--ink); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.clear { font-size: 13px; }
.yrs { color: var(--muted); font-size: 14px; white-space: nowrap; }
.tag { font-style: italic; margin: 4px 0; }
.tag.big { font-size: 20px; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev, .out { font-size: 12px; border-radius: 4px; padding: 1px 7px; border: 1px solid var(--line); }
.ev { background: var(--accent-soft); color: var(--ink); }
.out-positive { color: var(--pos); border-color: var(--pos); }
.out-null { color: var(--null); border-color: var(--null); }
.out-mixed { color: var(--mixed); border-color: var(--mixed); }
.out-harmful { color: var(--harm); border-color: var(--harm); }
.out-unknown { color: var(--unk); }
.empty { color: var(--muted); padding: 20px; }
.detail { max-width: 860px; }
.detail h1 { margin: 4px 0; font-size: 30px; line-height: 1.2; }
.detail h2 { font-size: 17px; margin: 26px 0 8px; }
.back { margin: 0 0 8px; }
.alt { color: var(--muted); margin: 0; }
.lede { font-size: 18px; }
.facts { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; margin: 20px 0; }
.facts dt { color: var(--muted); font-size: 14px; }
.facts dd { margin: 0; }
.pill { display: inline-block; font-size: 13px; padding: 1px 9px; margin: 0 4px 4px 0; border-radius: 999px; background: var(--accent-soft); text-decoration: none; color: var(--ink); }
.pill:hover { outline: 1px solid var(--accent); }
.pill--out { background: var(--panel); border: 1px solid var(--line); }
.pill--out span { color: var(--muted); font-size: 11px; margin-left: 3px; }
.sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.box { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 4px 18px 12px; margin: 20px 0; }
.notes { border-style: dashed; }
.notes p { color: var(--muted); font-size: 15px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 4px 0; border-bottom: 1px solid var(--line); }
.muted { color: var(--muted); }
/* Boot, and the wait while a tab's own slice of the library arrives (#280). */
.loading { color: var(--muted); padding: 48px 0; text-align: center; }
.small { font-size: 13px; }
/* Sources: closed until clicked. */
.srcs { margin: 26px 0 0; border-top: 1px solid var(--line); }
.srcs summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 0; }
.srcs summary::-webkit-details-marker { display: none; }
.srcs summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.srcs[open] summary::after { transform: rotate(-135deg); }
.srcs summary h2, .detail .srcs summary h2 { margin: 0; }
.srcs summary:hover h2 { color: var(--accent); }
.srcs__n { color: var(--muted); font-weight: 400; }
/* Research notes as a timeline: date · kind · what was done. */
.rnotes { list-style: none; margin: 0 0 8px; padding: 0; border-left: 2px solid var(--line); }
.rn { position: relative; display: grid; grid-template-columns: 92px 84px 1fr; gap: 4px 10px; padding: 8px 0 8px 14px; font-size: 14.5px; line-height: 1.5; }
.rn::before { content: ""; position: absolute; left: -6px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--muted); }
.rn + .rn { border-top: 1px dashed var(--line); }
.rn__when { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.rn__kind { justify-self: start; align-self: start; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.rn__text { overflow-wrap: anywhere; }
.rn--open::before { border-color: #b26a00; background: #b26a00; }
.rn--open .rn__kind { background: #fff1db; color: #8a4f00; }
.rn--fix::before { border-color: var(--accent); }
.rn--note .rn__kind, .rn--status .rn__kind { background: transparent; color: var(--muted); border: 1px solid var(--line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rn--open .rn__kind { background: #3a2a10; color: #f0b860; } }
:root[data-theme="dark"] .rn--open .rn__kind { background: #3a2a10; color: #f0b860; }
@media (max-width: 600px) { .rn { grid-template-columns: auto 1fr; } .rn__text { grid-column: 1 / -1; } }
.sources li { margin: 4px 0; font-size: 15px; overflow-wrap: anywhere; }
.tbl { width: 100%; border-collapse: collapse; background: var(--panel); font-size: 15px; }
.tbl th, .tbl td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font-size: 13px; color: var(--muted); font-weight: 600; }
.tbl .num { text-align: right; }
/* Directory (#114): kind, sub-kind and role chips over one table of every organisation */
.lead { font-size: 11px; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; }
@media (max-width: 800px) {
  .layout, .cols { grid-template-columns: 1fr; }
  .layout { grid-template-rows: none; grid-template-areas: "search" "bar" "results"; }
  main, .top, footer { padding-left: 16px; padding-right: 16px; }
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 8px; }
  .tbl { display: block; overflow-x: auto; }
}

/* ---------- Cards (matching the scouts library) ---------- */
:root { --cover-l: 90%; --cover-s: 45%; --cover-ink: 30%; --radius: 14px; --shadow: 0 1px 2px rgba(30,30,20,.06), 0 4px 14px rgba(30,30,20,.06); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cover-l: 24%; --cover-s: 28%; --cover-ink: 85%; --shadow: 0 1px 2px rgba(0,0,0,.4); } }
:root[data-theme="dark"] { --cover-l: 24%; --cover-s: 28%; --cover-ink: 85%; --shadow: 0 1px 2px rgba(0,0,0,.4); }
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.grid > li { display: flex; }
.card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); width: 100%; }
.card:hover { border-color: var(--accent); }
.card > a { display: block; text-decoration: none; }
.cover { position: relative; aspect-ratio: 16 / 9; background: hsl(var(--h) var(--cover-s) var(--cover-l)); color: hsl(var(--h) 40% var(--cover-ink)); display: grid; place-items: center; overflow: hidden; }
.cover svg { width: 44px; height: 44px; margin: 0; opacity: .8; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cover img ~ svg { display: none; }
.cover__blur { display: none !important; }
.cover--fit .cover__blur { display: block !important; filter: blur(16px) saturate(1.2); transform: scale(1.15); opacity: .55; }
.cover--fit .cover__img { object-fit: contain; padding: 6%; }
.cover--logo { background: #fff; }
.cover--on-dark { background: #1f2a30; } /* light logos (logo-tone.py) */
.cover--logo .cover__img { padding: 14% 20%; }
.cover--big.cover--fit .cover__img { padding: 8% 14%; }
.cover--big { aspect-ratio: 16 / 7; border-radius: 10px; margin-bottom: 14px; }
.cover--big svg { width: 60px; height: 60px; }
.cover__host { position: absolute; left: .5rem; bottom: .4rem; font-size: .68rem; font-weight: 600; background: rgba(0,0,0,.55); color: #fff; border-radius: 5px; padding: .05rem .35rem; max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cover__badge { position: absolute; right: .5rem; top: .5rem; background: rgba(0,0,0,.62); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .04em; border-radius: 6px; padding: .1rem .4rem; text-transform: uppercase; }
.cover__play { position: absolute; inset: 0; display: grid; place-items: center; }
.cover__play span { width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,.6); display: grid; place-items: center; color: #fff; }
.card__body { padding: .8rem .9rem .9rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.card__kind { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.card__stats { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .85rem; }
.card__stats small { color: var(--muted); font-size: .72rem; }
.card__title { font-size: 1.02rem; font-weight: 700; margin: 0; line-height: 1.3; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__by { font-size: .82rem; color: var(--muted); margin: 0; }
.card__tagline { font-style: italic; font-size: .9rem; margin: 0; }
.card__why { font-size: .8rem; color: var(--muted); margin: 4px 0 0; }
.meaning-note { color: var(--muted); }
.card__years { margin-left: auto; color: var(--ink); }
.card__notes { font-size: .85rem; color: var(--muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tags { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: auto; padding-top: .3rem; font-size: .8rem; color: var(--muted); }
/* Card footer: labelled Evidence and Outcome on the left, location and years on the right. */
.card__foot { justify-content: space-between; align-items: flex-end; gap: .4rem .8rem; }
.card__grades { display: grid; grid-template-columns: auto auto; gap: .25rem .45rem; align-items: center; margin: 0; }
.card__grades div { display: contents; }
.card__grades dt { font-size: .75rem; color: var(--muted); }
.card__grades dd { margin: 0; }
.card__where { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; margin-left: auto; text-align: right; }
.card__where .card__years { margin-left: 0; }
.card__cty { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .2rem; }

/* ---------- Campaign dialog ---------- */
dialog#modal { width: min(900px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 24px 28px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: auto; }
dialog#modal::backdrop { background: rgba(15,20,22,.55); }
.modal__close { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 16px; cursor: pointer; }
.modal__close:hover { border-color: var(--accent); }
body:has(dialog[open]) { overflow: hidden; }
@media (max-width: 800px) { dialog#modal { padding: 18px 16px 24px; max-height: calc(100vh - 24px); } }

/* Top bar: where you are in the list, and Close. Sticks to the top of the pop-up. */
.mnav { position: sticky; top: -24px; z-index: 2; display: flex; align-items: center; gap: 10px; margin: -24px -28px 14px; padding: 10px 14px 10px 16px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.mnav__seq { flex: 1; min-width: 0; }
.mnav__where { display: block; font-size: 13px; color: var(--muted); line-height: 1.3; }
.mnav__where b { color: var(--ink); white-space: nowrap; }
.mnav__list { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mnav__list:hover { color: var(--accent); }

/* Previous / next: big round arrows outside the pop-up, one each side (Viv pattern: pop-up pager).
   The dialog narrows so there's always room for them beside it. */
@media (min-width: 801px) {
  dialog#modal:has(.mpager:not(:empty)) { width: min(900px, calc(100vw - 168px)); }
  .mpager__mid { display: none; }
  .mpager .mnav__step { position: fixed; top: 50%; z-index: 3; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: 64px; text-decoration: none; color: #fff; }
  .mpager .mnav__step--prev { left: max(12px, calc(50vw - 450px - 76px)); }
  .mpager .mnav__step--next { right: max(12px, calc(50vw - 450px - 76px)); }
  .mpager .mnav__arrow { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--panel); color: var(--accent); border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .12s, background .12s, color .12s; }
  .mpager .mnav__arrow svg { width: 28px; height: 28px; }
  .mpager a.mnav__step:hover .mnav__arrow, .mpager a.mnav__step:focus-visible .mnav__arrow { background: var(--accent); color: var(--panel); transform: scale(1.06); }
  .mpager a.mnav__step:focus-visible { outline: none; }
  .mpager a.mnav__step:focus-visible .mnav__arrow { outline: 3px solid #fff; outline-offset: 2px; }
  .mpager .mnav__step.is-off { opacity: .35; }
  .mpager .mnav__step.is-off .mnav__arrow { box-shadow: none; }
  /* The next title shows under the arrow on hover or focus only, so the sides stay quiet. */
  .mpager .mnav__name { width: 120px; font-size: 12px; line-height: 1.3; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.6); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; opacity: 0; transition: opacity .12s; }
  .mpager a.mnav__step:hover .mnav__name, .mpager a.mnav__step:focus-visible .mnav__name { opacity: 1; }
  .mpager .is-off .mnav__name { display: none; }
}
/* Phone: a bar along the bottom of the pop-up: ‹  22 of 228 · See all  › */
@media (max-width: 800px) {
  .mnav { top: -18px; margin: -18px -16px 12px; padding: 8px 10px; }
  .mnav__where { display: none; }
  .mpager:empty { display: none; }
  .mpager { position: sticky; bottom: -24px; z-index: 2; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 8px; margin: 18px -16px -24px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(6px); border-top: 1px solid var(--line); }
  .mpager .mnav__step { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--accent); text-decoration: none; }
  .mpager .mnav__step--next { grid-column: 3; }
  .mpager a.mnav__step:active { background: var(--accent); color: var(--panel); }
  .mpager .mnav__step.is-off { opacity: .35; }
  .mpager .mnav__name { display: none; }
  .mpager__mid { grid-column: 2; display: flex; flex-direction: column; align-items: center; font-size: 13px; color: var(--muted); line-height: 1.35; }
  .mpager__mid b { color: var(--ink); }
  .mpager__all { font-weight: 600; padding: 2px 8px; }
}

/* Related campaigns: one tab per way of being alike. */
.rtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.rtabs [role=tab] { font: inherit; font-size: 14px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); cursor: pointer; }
.rtabs [role=tab] em { font-style: normal; color: var(--muted); font-size: 12px; }
.rtabs [role=tab]:hover { border-color: var(--accent); }
.rtabs [role=tab][aria-selected=true] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.rtabs [role=tab][aria-selected=true] em { color: inherit; opacity: .8; }
.card__why { font-size: .82rem; margin: 0; }
.more-btn { margin-top: 10px; font: inherit; font-size: 14px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); cursor: pointer; }
.more-btn:hover { border-color: var(--accent); }
.facet label.is-empty { opacity: .45; cursor: default; }

/* ---------- Tooltips and filter chips on cards ---------- */
#tip { position: fixed; z-index: 1000; max-width: 300px; padding: .4rem .6rem; border-radius: 6px; background: var(--ink); color: var(--bg); font-size: .78rem; line-height: 1.4; box-shadow: 0 4px 14px rgba(0,0,0,.25); visibility: hidden; opacity: 0; transition: opacity .12s; }
#tip.on { visibility: visible; opacity: 1; }
#tip span { display: block; }
.tip__title { font-weight: 800; font-size: .8rem; margin-bottom: .2rem; padding-bottom: .2rem; border-bottom: 1px solid color-mix(in srgb, var(--bg) 25%, transparent); }
.tip__see { display: inline-flex; align-items: center; gap: .35em; min-height: 32px; padding: 0 .6rem; border-radius: 5px; background: var(--bg); color: var(--ink); font-weight: 700; text-decoration: none; }
.tip__see:hover { text-decoration: underline; }
.tip__see[hidden] { display: none; }
/* Chips and explained items sit above the card's whole-card link (.card__title a::after). */
.card [data-tip], .card .pick { position: relative; z-index: 1; }
.card .cover__badge, .card .cover__host { position: absolute; z-index: 2; cursor: help; }
.pick { font: inherit; cursor: pointer; border: 1px solid transparent; background: none; color: inherit; padding: 0; text-align: left; }
.card__kind .pick { color: var(--accent); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: .72rem; margin-right: .6rem; }
.card__kind .pick:hover, .stat.pick:hover { text-decoration: underline; }
.stat.pick { font-weight: 700; }
.pick.ev, .pick.out { font-size: 12px; border-radius: 4px; padding: 1px 7px; border: 1px solid var(--line); }
.pick.ev { background: var(--accent-soft); color: var(--ink); }
.pick.ev:hover, .pick.out:hover, .pick.cty:hover { outline: 1px solid var(--accent); }
.pick.cty { font-size: .8rem; color: var(--muted); padding: 1px 4px; border-radius: 4px; }
.card__by span, .stat__reach[data-tip] { cursor: help; }
.card__by span:hover, .stat__reach[data-tip]:hover { text-decoration: underline dotted; }
.pick:focus-visible, [data-tip]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.facet label[data-tip] span { text-decoration: underline dotted var(--line); text-underline-offset: 3px; }
.pick.out-positive { color: var(--pos); border-color: var(--pos); }
.pick.out-null { color: var(--null); border-color: var(--null); }
.pick.out-mixed { color: var(--mixed); border-color: var(--mixed); }
.pick.out-harmful { color: var(--harm); border-color: var(--harm); }
.pick.out-unknown { color: var(--unk); }
.pick.ev, .pick.out { margin-right: 4px; }

/* Touch targets: at least 24px (WCAG 2.5.8) where the pointer is coarse. */
@media (pointer: coarse) {
  .card .pick, .card [data-tip], .pill { min-height: 28px; display: inline-flex; align-items: center; }
  .card__kind .pick { padding: 0 2px; }
}
@media (pointer: coarse) { .card .stat[data-tip] { gap: .3em; } }

/* Tooltip actions and the filter confirmation */
.tip__actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.tip__actions[hidden] { display: none; }
.tip__only { font: inherit; font-weight: 700; min-height: 32px; padding: 0 .6rem; border-radius: 5px; border: 0; background: var(--accent-soft); color: var(--ink); cursor: pointer; }
.tip__only:hover { outline: 2px solid var(--accent); }
.tip__only[hidden] { display: none; }
.tip__see { margin-top: 0; }
#tip.note { max-width: 260px; }
/* Every tooltip points at its item: a triangle on the item's centre, below the box or above it when flipped. */
#tip::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -7px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: var(--ink); }
#tip.below::after { bottom: auto; top: -7px; border: 7px solid transparent; border-top: 0; border-bottom-color: var(--ink); }
.chip.flash { animation: chip-flash 1.6s ease-out 2; }
@keyframes chip-flash { 0% { box-shadow: 0 0 0 0 var(--accent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .chip.flash { animation: none; outline: 2px solid var(--accent); } #tip { transition: none; } }
.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; }
/* Invisible bridge over the gap between the item and its tooltip, so the pointer can cross it (WCAG 1.4.13). */
#tip::before { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; }
#tip.below::before { bottom: auto; top: -12px; }

/* Organisations behind a campaign: "+N" on the card, grouped list in the tooltip */
.card__by span.by, .card__by .by__logo, .card__by .more[data-tip] { cursor: help; }
.card__by .more { display: inline-block; margin-left: .25rem; padding: 0 .35rem; border-radius: 999px; background: var(--accent-soft); color: var(--ink); font-size: .75rem; font-weight: 700; }
.card__by .more[data-tip]:hover, .card__by .by:focus-visible .more { outline: 1px solid var(--accent); }
#tip.wide { max-width: 340px; }
.orgs { display: block; }
.orgs__h { display: block; margin: .15rem 0 .2rem; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.orgs__h:not(:first-child) { margin-top: .55rem; }
.orgs ul { list-style: none; margin: 0; padding: 0; }
.orgs li { display: block; padding: .15rem 0; }
.orgs li b { display: block; font-weight: 600; }
.orgs li span { display: block; font-size: .72rem; opacity: .8; }

/* ---------- Organisation links and pop-up ---------- */
.card .org-link { position: relative; z-index: 1; color: inherit; text-decoration: none; }
.card .org-link:hover, .card .org-link:focus-visible { color: var(--accent); text-decoration: underline; }
.org__head { display: grid; grid-template-columns: 112px 1fr; gap: 20px; align-items: center; margin-bottom: 8px; }
.org__head h1 { margin: 2px 0 4px; }
.org__sum { margin: 0 0 8px; color: var(--muted); }
.org__about { margin: 0 0 8px; max-width: 62ch; }
.org__logo { width: 112px; height: 112px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.org__logo img { max-width: 80%; max-height: 80%; object-fit: contain; }
.org__logo svg { display: none; width: 44px; height: 44px; }
.org__logo--none { background: hsl(var(--h) var(--cover-s) var(--cover-l)); color: hsl(var(--h) 40% var(--cover-ink)); }
.org__logo--none svg { display: block; }
.org .tags { margin-top: 0; padding-top: 0; }
.org .out { cursor: help; }
.names summary { cursor: pointer; color: var(--accent); }
.role-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.role-filter .chip { text-decoration: none; }
.role-filter .chip em { font-style: normal; color: var(--muted); font-size: 12px; margin-left: 2px; }
.chip--off { background: var(--panel); border-color: var(--line); }
.chip--off:hover { border-color: var(--accent); }
.acc { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); margin: 0 0 10px; }
.acc > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; display: flex; gap: 8px; align-items: baseline; list-style: none; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; display: inline-block; }
.acc[open] > summary::before { transform: rotate(90deg); }
.acc > summary em { font-style: normal; color: var(--muted); font-weight: 400; font-size: 14px; }
.acc > :not(summary) { margin-left: 14px; margin-right: 14px; }
.acc > .grid, .acc > ul { margin-bottom: 14px; }
.grid--rows { grid-template-columns: 1fr; gap: .7rem; }
.card--row { flex-direction: row; box-shadow: none; }
.card--row .cover { flex: 0 0 200px; aspect-ratio: auto; min-height: 120px; }
.card--row .card__body { padding: .65rem .85rem .75rem; gap: .3rem; min-width: 0; }
.grid--rows > li { min-width: 0; }
.card--row .tags { margin-top: .2rem; }
.card__roles { list-style: none; margin: .1rem 0 0; padding: .4rem .6rem; font-size: .85rem; background: var(--accent-soft); border-radius: 8px; position: relative; z-index: 1; }
.card__roles li + li { margin-top: .25rem; padding-top: .25rem; border-top: 1px solid var(--line); }
.role-what { font-weight: 600; }
.card__roles .sub { margin: 0; }
.leads li { font-size: 15px; }
@media (max-width: 600px) {
  .org__head { grid-template-columns: 72px 1fr; gap: 14px; }
  .org__logo { width: 72px; height: 72px; }
  .card--row { flex-direction: column; }
  .card--row .cover { flex-basis: auto; aspect-ratio: 21 / 9; min-height: 0; }
}
/* A sponsor's logo standing in for a campaign picture: shown at its own size, never blown up. */
.cover--orglogo .cover__img { position: relative; inset: auto; width: auto; height: auto; max-width: 60%; max-height: 62%; padding: 0; }
#tip .orgs a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
#tip .orgs a:hover { text-decoration-thickness: 2px; }

/* ---------- Org logos in a circle, org tooltip ---------- */
.ologo { display: inline-block; width: 1.55em; height: 1.55em; border-radius: 50%; object-fit: contain; background: #fff; border: 1px solid var(--line); padding: 1px; margin-right: .4em; vertical-align: -.45em; flex: none; }
#tip .ologo { border-color: transparent; }
.ologo--lg { width: 34px; height: 34px; margin: 0; padding: 2px; }
.otip { display: grid; gap: .2rem; }
.otip__head { display: flex; gap: .55rem; align-items: center; margin-bottom: .2rem; }
.otip__head b { font-size: .85rem; }
.otip__kind { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; opacity: .75; }
.otip__more { opacity: .7; margin-top: .15rem; font-style: italic; }
.tbl .org-link, .plain .org-link { white-space: normal; }
.ologo--dark { background: #1f2a30; }
.ologo--wide { width: 64px; height: 34px; border-radius: 6px; }

/* Topic filter: areas over topics, and the ⓘ that explains them (#37) */
.info { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--muted); background: none; color: var(--muted); font: italic 600 12px/1 Georgia, serif; padding: 0; cursor: pointer; display: inline-grid; place-items: center; flex: none; }
.info:hover, .info:focus-visible { color: var(--accent); border-color: var(--accent); }
.facet .ttree { max-height: 420px; }
.ttree .tarea { padding: 1px 0; }
.ttree .trow .flab > span { font-weight: 500; }
/* Topic rows (Viv-Resource-Library#48): one line each, the chevron in a fixed right-hand column. */
.trow { display: flex; align-items: flex-start; gap: 4px; }
.trow > label { flex: 1; min-width: 0; }
.tx { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border: 0; background: none; padding: 0; color: var(--muted); border-radius: 4px; }
button.tx { cursor: pointer; }
button.tx:hover, button.tx:focus-visible { background: var(--accent-soft); color: var(--ink); }
button.tx[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* Child topics are indented so they read as children: their checkbox lines up under the parent's label,
   with a faint guide line down the left. `.facet .tkids` so the generic `.facet ul` margin doesn't flatten it. */
.facet .tkids { list-style: none; margin: 2px 28px 6px 6px; padding: 0 0 0 14px; border-left: 1px solid var(--line); max-height: none; }
.tkids label { font-size: 13px; }
#tip-text p { margin: 6px 0; }
.topics-page { max-width: 1000px; }
.topics-page h3 { margin-top: 28px; }
.topics-page .lede { font-size: 17px; }
.tt-wrap { overflow-x: auto; }
.topic-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.topic-table th, .topic-table td { text-align: left; vertical-align: top; padding: 6px 8px; border-top: 1px solid var(--line); }
.topic-table thead th { border-top: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.topic-table .tt-area th { padding-top: 16px; font-size: 15px; }
.topic-table em { font-style: normal; color: var(--muted); font-size: 12px; }
.topic-table code { font-size: 11px; color: var(--muted); }
.topic-table .muted, .topics-page .muted { color: var(--muted); font-size: 12px; font-weight: 400; }
#tip-text a { color: var(--bg); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
/* Tooltip filter actions: a first choice, a second in outline, and a link to the whole group. */
.tip__only--alt { background: transparent; color: var(--bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg) 45%, transparent); }
.tip__filters { flex-basis: 100%; font: inherit; font-size: .74rem; text-align: left; padding: .1rem 0; border: 0; background: none; color: var(--bg); opacity: .85; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.tip__filters:hover { opacity: 1; text-decoration-thickness: 2px; }
.tip__filters[hidden] { display: none; }
.facet > summary.flash { animation: chip-flash 1.6s ease-out 2; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .facet > summary.flash { animation: none; outline: 2px solid var(--accent); } }
#tip .tip__filters span { display: inline; }
.tip__only { text-align: left; }
#tip:has(.tip__only--alt) { max-width: 330px; }

/* Channel sub-filter (e.g. Social paid > Meta Ad Library) */
.facet li.facet-sub label { padding-left: 22px; font-size: 13px; }
/* Audience holds two trees (#137): Who it's for, Who it's about, each under a small heading. */
.facet__sub { margin: 12px 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.facet--audience .facet__sub:first-of-type { margin-top: 6px; }

/* Contracts and RFPs (documents/) */
.docs .doc { margin: 6px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.docs .doc summary { cursor: pointer; padding: 8px 12px; list-style-position: outside; }
.docs .doc summary .muted { display: block; font-size: 14px; }
.doc__body { padding: 0 14px 10px; }
.doc__body ul { margin: 0; padding-left: 18px; }
.contracts .tbl { margin-bottom: 4px; }

/* Reuse (#47): the card mark, the campaign-page box and the Reuse page */
.reuse { font-size: 12px; border-radius: 4px; padding: 1px 7px; border: 1px solid var(--accent); color: var(--accent); }
.reuse-public-domain-or-cc.reuse { background: var(--accent); color: var(--panel); }
.reuse-box .reuse-pill { font-weight: 600; margin-right: .5rem; }
.reuse-box dl.facts { margin: .5rem 0; }
.reuse-table { border-collapse: collapse; margin: 8px 0 16px; }
.reuse-table th, .reuse-table td { text-align: left; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.reuse-table td:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; }
.reuse-page code { white-space: normal; }
.reuse-caveat { border-left: 3px solid var(--mixed); padding: 6px 12px; margin: 8px 0; background: var(--bg); }
.reuse-caveat p { margin: 4px 0 0; }
.reuse.reuse-public-domain-or-cc[data-tip*="site-wide"] { background: none; color: var(--accent); border-style: dashed; }
.see-all { margin: 10px 0 0; }

/* Topic icons (#60, site/topic-icons.js). On cards the icon carries the tooltip; the word just filters. */
.ticon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; margin-right: .35em; }
.ttag { display: inline-flex; align-items: center; margin-right: .7rem; white-space: nowrap; }
.card__kind .ttag .pick { margin-right: 0; }
.ttag__icon { display: inline-flex; padding: 2px; margin: -2px 0 -2px -2px; border-radius: 4px; cursor: help; }
.ttag__icon .ticon { width: 15px; height: 15px; margin-right: 0; }
.ttag__icon:hover { background: var(--accent-soft); }
.card__kind .ttag__icon + .pick { margin-left: .3rem; }
.facet--topic label .ticon { color: var(--accent); width: 15px; height: 15px; }
.tip__title .ticon { width: 1.1em; height: 1.1em; vertical-align: -.2em; }
.pill .ticon { width: 13px; height: 13px; margin-right: .3em; vertical-align: -2px; }
.topic-table a .ticon { width: 16px; height: 16px; }
.icons-page h3 { display: flex; align-items: center; margin: 28px 0 8px; color: var(--accent); }
.igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.icell { margin: 0; padding: 12px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); text-align: center; color: var(--accent); }
.icell--alt { opacity: .55; border-style: dashed; }
.icell .ticon--big { width: 48px; height: 48px; margin: 0 0 8px; }
.icell figcaption .ttag { margin: 0; white-space: normal; justify-content: center; text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.icell figcaption .ttag .ticon { width: 15px; height: 15px; }
.icell small { display: block; color: var(--muted); margin-top: 4px; font-size: 11px; }

/* Kind-of-organisation drawings (org-icons.js): stand in for a logo that's missing or too wide for a circle.
   The tint is the sector, so it never passes for the org's own brand. */
:root { --o-public-bg: #e3ecf6; --o-public: #2d5a8a; --o-nonprofit-bg: #e2f1e6; --o-nonprofit: #2c6a3d; --o-commercial-bg: #f6ead9; --o-commercial: #8a5418; --o-unknown-bg: #ecebe7; --o-unknown: #6a6f73; }
@media (prefers-color-scheme: dark) { :root { --o-public-bg: #22334a; --o-public: #9cc0e6; --o-nonprofit-bg: #213a2a; --o-nonprofit: #93d0a4; --o-commercial-bg: #3d2e1c; --o-commercial: #e3b47a; --o-unknown-bg: #2c3135; --o-unknown: #a9b0b5; } }
.oicon { display: inline-grid; place-items: center; box-sizing: border-box; }
.oicon svg { width: 62%; height: 62%; }
.oicon--public { background: var(--o-public-bg); color: var(--o-public); }
.oicon--nonprofit { background: var(--o-nonprofit-bg); color: var(--o-nonprofit); }
.oicon--commercial { background: var(--o-commercial-bg); color: var(--o-commercial); }
.oicon--unknown { background: var(--o-unknown-bg); color: var(--o-unknown); }
.ologo.oicon { border-color: transparent; padding: 0; }
.oicon--big { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 8px; }
/* The pop-up's big box keeps a white plate behind a real logo; the sector tint only shows when there's none. */
.org__logo:not(.org__logo--none) { background: #fff; color: inherit; }
/* Agencies table: one circle per row (square logo or drawing), so rows line up. */
.tbl td.tlogo { width: 84px; padding-right: 0; vertical-align: middle; }
.results .tbl th, .results .tbl td { padding: 8px 6px; }
.lplate { width: 84px; height: 39px; box-sizing: border-box; padding: 3px 4px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.lbox { display: grid; place-items: center; }
.lbox .ologo { width: 39px; height: 39px; margin: 0; vertical-align: 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Preview bar: only in preview builds (build.mjs, HCF_PREVIEW_BRANCH). Says what the preview is and links to the main site. */
.preview-bar { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 8px 16px; background: #fff3c4; color: #3b2f00; border-bottom: 1px solid #e0c96a; font-size: 14px; line-height: 1.4; }
.preview-bar a { color: #3b2f00; font-weight: 600; }
.preview-bar__main { margin-left: auto; }

/* Day / night toggle, top right of the header. Shows the moon in day mode and the sun in night mode. */
.theme-toggle { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--muted); cursor: pointer; padding: 0; }
.theme-toggle:hover, .theme-toggle:focus-visible { color: var(--accent); border-color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .i-sun { display: none; }
/* Sign in (account.js, #179): a pill beside the day/night toggle; signed in, it shows the first name. */
.account { flex: none; height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 17px; background: none; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account:hover, .account:focus-visible { color: var(--accent); border-color: var(--accent); }
.account--in { color: var(--ink); }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}

/* Campaign links (#82): official site is the main button, producer page second, funders plain. */
.golinks { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 4px 0 18px; }
.go { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; border-radius: 8px; padding: 8px 14px; font-size: 15px; line-height: 1.2; border: 1px solid var(--accent); max-width: 100%; overflow-wrap: anywhere; }
.go__arrow { font-size: 13px; opacity: .8; }
.go--main { background: var(--accent); color: var(--panel); font-weight: 600; }
.go--main:hover, .go--main:focus-visible { filter: brightness(1.1); }
.go--edition, .go--producer { background: var(--accent-soft); color: var(--ink); }
.go--edition { padding: 6px 12px; font-size: 14px; }
.go--producer:hover, .go--edition:hover, .go--producer:focus-visible, .go--edition:focus-visible { border-color: var(--ink); }
.go--sponsor { border: 0; padding: 4px 2px; color: var(--accent); text-decoration: underline; }

/* Resources from the campaign: its child items. */
.res-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.res { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--panel); display: flex; flex-direction: column; gap: 4px; }
.res__type { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.res__title { font-weight: 600; text-decoration: none; }
.res__title:hover { text-decoration: underline; }
.res__desc { margin: 0; font-size: 14px; color: var(--muted); }
.res__parts summary { cursor: pointer; font-size: 13px; color: var(--accent); }
.res__sub { margin: 6px 0 0; padding-left: 14px; font-size: 14px; list-style: none; border-left: 1px solid var(--line); }
.res__sub li + li { margin-top: 2px; }
/* A row inside a collection, at any depth. The left rule makes the nesting readable
   without indenting the text off the card (#277). */
.res__row { padding-left: 8px; }
.res__row > .res__type { font-size: 11px; text-transform: none; letter-spacing: 0; }
.res__row > .res__desc { font-size: 13px; margin-top: 1px; }
.res__row > .res__parts { margin-top: 2px; }
/* A collection card can get long: keep it scrollable rather than pushing the page down. */
.res--deep .res__sub { max-height: 420px; overflow-y: auto; }

/* "Audiences in these results · 5" rows above the list (#80, Viv-Resource-Library result-breakdown pattern).
   Quiet by default: they repeat the sidebar, so they read as a hint, not a second filter panel. */
.bds { margin: -4px 0 12px; }
.bd > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; cursor: pointer; padding: 4px 0; font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.bd > summary::-webkit-details-marker { display: none; }
.bd > summary:hover { color: var(--ink); }
.bd > summary .chev { width: 20px; height: 20px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: var(--accent-soft); transform: rotate(-90deg); }
.bd[open] > summary .chev { transform: none; }
.bd__n { font-weight: 500; }
.bd__hint { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; color: var(--accent); }
.bd__hint::before { content: "·"; margin-right: 6px; color: var(--muted); }
.bd__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 8px 26px; }
.bd__chip { font: inherit; font-size: 13px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.bd__chip b { font-weight: 600; color: var(--muted); margin-left: 2px; }
.bd__chip:hover, .bd__chip:focus-visible { border-color: var(--accent); }
.bd__chip--out { border-color: var(--accent); background: var(--accent-soft); }
.bd__note { font-size: 12px; color: var(--accent); }
/* Audiences in these results (#137): one block per tree, groups first, a group's values on a line below. */
.bd__body { padding: 2px 0 8px 26px; display: grid; gap: 10px; }
.bd__ax { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bd__body .bd__chips { padding: 0; }
.bd__grp { display: inline-flex; align-items: stretch; }
.bd__grp .bd__chip { border-radius: 999px 0 0 999px; border-right: 0; }
.bd__open { font: inherit; border: 1px solid var(--line); background: var(--panel); border-radius: 0 999px 999px 0; padding: 0 7px 0 5px; cursor: pointer; display: inline-grid; place-items: center; color: var(--muted); }
.bd__open .chev { width: 14px; height: 14px; }
.bd__open[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.bd__open[aria-expanded="true"] .chev { transform: rotate(180deg); }
.bd__grp:has(.bd__open[aria-expanded="true"]) .bd__chip { border-color: var(--accent); }
.bd__open:hover, .bd__open:focus-visible { border-color: var(--accent); }
.bd__kids { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 0 2px 12px; border-left: 2px solid var(--accent-soft); }
.bd__kids[hidden] { display: none; }
.bd__in { font-size: 12.5px; color: var(--muted); margin-right: 2px; }
.bd__chip--sub { font-size: 12.5px; border-style: dashed; }
@media (max-width: 800px) { .bd__chips, .bd__body { padding-left: 0; } .bd__hint { flex-basis: 100%; padding-left: 26px; } .bd__hint::before { display: none; } }

/* Resources tab (#92): the two doors (Help yourself / Help others), then the usual filters and cards. */
.rx-intro h2 { margin: 0 0 4px; font-size: 1.5rem; }
.rx-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 8px 0 22px; }
.rx-door { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 14px; align-items: center; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.rx-door:hover, .rx-door:focus-visible { border-color: var(--accent); }
.rx-door--on { border: 2px solid var(--accent); background: var(--accent-soft); }
.rx-door__icon { grid-row: 1 / 3; width: 52px; height: 52px; }
.rx-door__icon svg { width: 100%; height: 100%; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rx-door__name { font-size: 1.2rem; font-weight: 700; }
.rx-door__name em { font-style: normal; font-weight: 400; color: var(--muted); font-size: .95rem; }
.rx-door__blurb { color: var(--muted); font-size: .9rem; }
.rx-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--accent-soft); }
.rx-card__foot { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; margin-top: auto; font-size: .78rem; }
.rx-helps { padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); }
.rx-case { position: relative; z-index: 1; }
.rx-lang, .rx-pick { color: var(--muted); }
.rx-pick { font-weight: 400; letter-spacing: 0; text-transform: none; margin-left: .4rem; }
@media (max-width: 600px) { .rx-door { padding: 12px 14px; } .rx-door__icon { width: 40px; height: 40px; } }
.rx-links { position: relative; z-index: 1; margin: 0; font-size: .78rem; color: var(--muted); }
.rx-credit { position: relative; z-index: 1; font-size: .78rem; color: var(--muted); }
.rx-credit summary { cursor: pointer; width: fit-content; }
.rx-credit p { margin: 4px 0 0; overflow-wrap: anywhere; }
/* Journals (#191): how open each one is, and one card per owner listing its journals. */
.rx-access { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line, #d0d4da); color: var(--muted); font-size: .75rem; white-space: nowrap; }
.rx-access--open { border-color: #1a7f4b; background: #e6f4ec; color: #145c37; font-weight: 600; }
.rx-jlist { position: relative; z-index: 1; margin: .2rem 0 0; font-size: .85rem; }
.rx-jlist ul, ul.rx-jlist { list-style: none; padding: 0; margin: .3rem 0 0; display: grid; gap: .35rem; }
.rx-jlist summary { cursor: pointer; color: var(--muted); }
.rx-jlist li .rx-access { margin-left: .3rem; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rx-access--open { background: #143d29; color: #a8e3c1; border-color: #3fae74; } }
:root[data-theme="dark"] .rx-access--open { background: #143d29; color: #a8e3c1; border-color: #3fae74; }

/* ---------- Journals tab (#191): a list grouped by owner, three badges per journal ---------- */
.jx-owner { margin: 0 0 1.4rem; }
.jx-owner h3 { font-size: 1.05rem; margin: 0 0 .4rem; display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; }
.jx-owner h3 .muted { font-size: .82rem; font-weight: 400; }
.jx-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line, #d0d4da); }
.jx-row { display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: space-between; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--line, #d0d4da); }
.jx-row__main { flex: 1 1 320px; min-width: 0; }
.jx-row__title { font-weight: 600; }
.jx-row__meta { font-size: .82rem; color: var(--muted); margin-top: .1rem; }
.jx-row__badges { display: flex; flex-wrap: wrap; gap: .3rem; }
.jx-pubmed, .jx-fee { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line, #d0d4da); color: var(--muted); font-size: .75rem; white-space: nowrap; }
.jx-pubmed--medline, .jx-pubmed--pubmed { border-color: #2f5fa7; color: #24497f; }
.jx-pubmed--none, .jx-pubmed--partial { border-style: dashed; }
.jx-toggle { margin-left: auto; font-size: .85rem; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .jx-pubmed--medline, :root:not([data-theme="light"]) .jx-pubmed--pubmed { border-color: #7fa6e0; color: #b9cff0; } }
:root[data-theme="dark"] .jx-pubmed--medline, :root[data-theme="dark"] .jx-pubmed--pubmed { border-color: #7fa6e0; color: #b9cff0; }

/* ---------- "Who do you want to help?" chooser (#123) ---------- */
.ch-open { font: inherit; font-size: 13px; border: 1px solid var(--accent); background: var(--panel); color: var(--accent); border-radius: 999px; padding: 2px 12px; cursor: pointer; }
.ch-open:hover, .ch-open:focus-visible { background: var(--accent); color: var(--panel); }
dialog#rx-chooser { width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--line); border-radius: var(--radius, 10px); background: var(--bg); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden; }
dialog#rx-chooser[open] { display: flex; flex-direction: column; }
dialog#rx-chooser::backdrop { background: rgba(15,20,22,.55); }
.ch-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px 8px; }
.ch-head h2 { margin: 0; font-size: 1.35rem; }
.ch-tabs { display: flex; gap: 4px; padding: 0 24px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ch-tabs button { flex: none; font: inherit; font-size: 14px; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--muted); padding: 8px 10px; cursor: pointer; }
.ch-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.ch-tabs button[data-tab="self"] { margin-left: auto; }
.ch-pane { padding: 16px 24px 20px; overflow: auto; flex: 1; }
.ch-foot { display: flex; align-items: center; gap: 16px; padding: 10px 24px 14px; border-top: 1px solid var(--line); }
.ch-peek { flex: 1; margin: 0; min-height: 2.6em; font-size: 13px; line-height: 1.3; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ch-peek b { color: var(--ink); font-weight: 600; }
.ch-peek i { font-style: normal; color: var(--ink); }
.ch-all { flex: none; }
.ch-all { font: inherit; font-size: 14px; background: none; border: 0; color: var(--accent); text-decoration: underline; cursor: pointer; }
.ch-lede { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 10px; font-weight: 600; }
.ch-note { color: var(--muted); font-size: 13px; margin: 14px 0 0; }
.ch-or { color: var(--muted); font-size: 13px; margin: 18px 0 8px; }
.ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-bottom: 14px; }
.ch-pick { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 8px; text-align: left; font: inherit; font-size: 15px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; cursor: pointer; }
.ch-pick:hover, .ch-pick:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.ch-pick em { grid-row: 1 / span 2; grid-column: 2; font-style: normal; font-size: 13px; color: var(--muted); }
.ch-pick__sub { grid-column: 1; font-size: 12px; color: var(--muted); }
.ch-ask { display: block; }
.ch-ask span { display: block; font-weight: 600; margin-bottom: 6px; }
.ch-ask input { width: 100%; font-size: 16px; padding: 11px 12px; }
#ch-hits:not(:empty) { margin-top: 12px; }
.ch-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.ch-door { text-align: left; font: inherit; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.ch-door span { font-size: 13px; color: var(--muted); }
.ch-door:hover, .ch-door:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.ch-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; font-weight: 400; }
.ch-toggle button { font: inherit; font-size: 13px; border: 0; background: var(--panel); color: var(--muted); padding: 3px 12px; cursor: pointer; }
.ch-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--panel); }
/* Circles of influence: each ring nests the next, "You" in the middle. */
.ch-ring { border: 1px solid var(--line); border-radius: 22px; padding: 10px 12px 12px; background: color-mix(in srgb, var(--accent-soft) 35%, var(--panel)); }
.ch-ring .ch-ring { margin-top: 10px; background: color-mix(in srgb, var(--accent-soft) 60%, var(--panel)); }
.ch-ring .ch-ring .ch-ring { background: color-mix(in srgb, var(--accent-soft) 85%, var(--panel)); }
.ch-ring .ch-ring .ch-ring .ch-ring { background: var(--accent-soft); }
.ch-ring__head { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; margin-bottom: 8px; }
.ch-ring__head span { font-size: 13px; color: var(--muted); }
.ch-ring__head[title] b { cursor: help; text-decoration: underline dotted var(--muted); text-underline-offset: 3px; }
.ch-ring__all { margin-left: auto; font: inherit; font-size: 13px; font-weight: 600; border: 1px solid var(--accent); background: var(--panel); color: var(--accent); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.ch-ring__all:hover, .ch-ring__all:focus-visible { background: var(--accent); color: var(--panel); }
.ch-ring__eg { list-style: none; margin: 0 0 8px; padding: 0; font-size: 13px; }
.ch-ring__eg li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 0; }
.ch-ring__eg li::before { content: "↗ "; color: var(--muted); }
.ch-ring__eg a { color: var(--ink); text-decoration: none; }
.ch-ring__eg a:hover { color: var(--accent); text-decoration: underline; }
.ch-ring__by { font-size: 12px; color: var(--muted); align-self: center; margin-right: 2px; }
.ch-ring__picks { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-ring__picks .ch-pick { font-size: 14px; padding: 5px 10px; grid-template-columns: auto auto; }
.ch-ring__picks .ch-pick em { grid-row: 1; }
.ch-ring--you { display: flex; flex-direction: column; align-items: center; width: 150px; margin: 12px auto 2px; font: inherit; color: var(--panel); background: var(--accent) !important; border: 0; border-radius: 999px; padding: 12px; cursor: pointer; }
.ch-ring--you span { font-size: 12px; opacity: .9; }
.ch-crisis { border: 1px solid var(--harm); border-left-width: 5px; border-radius: 8px; padding: 10px 14px; margin: 0 0 16px; font-size: 14px; background: color-mix(in srgb, var(--harm) 7%, var(--panel)); }
.ch-crisis strong { display: block; margin-bottom: 2px; }
.ch-crisis a { color: inherit; font-weight: 700; }
@media (max-width: 600px) {
  dialog#rx-chooser { inset: 0; margin: 0; width: 100%; max-width: none; height: 100%; max-height: none; border: 0; border-radius: 0; }
  .ch-head, .ch-pane, .ch-foot { padding-left: 16px; padding-right: 16px; }
  .ch-tabs { padding: 0 12px; }
  .ch-tabs button[data-tab="self"] { margin-left: 0; }
  .ch-ring { padding: 8px 8px 10px; border-radius: 16px; }
  .ch-peek { display: none; }
  .ch-all { margin-left: auto; }
}

/* ---------- More filters: Topic, Audience and Type show; the rest open from here ---------- */
.ficon { width: 18px; height: 18px; flex: none; vertical-align: -4px; margin-right: 6px; }
.facet--more > summary { color: var(--accent); }
.facet--more[open] > summary { margin-bottom: 2px; }
.facet--more > .facet:first-of-type { margin-top: 4px; }

/* ---------- Phone filter drawer (Viv-Resource-Library docs/patterns/mobile-filter-drawer.md) ---------- */
.fbar, .drawer__top, .drawer__foot { display: none; }
@media (max-width: 800px) {
  /* The nav scrolls sideways in its own row instead of widening the page (it pushed phones to 483px). */
  .top nav { flex: 1 1 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .top nav a { white-space: nowrap; }
  /* Filter · Sort · Reset all, three equal buttons (EAD's bar). Sort is a native picker laid over its button. */
  .fbar { grid-area: bar; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .fbar__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-height: 44px; padding: 0 8px; font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); text-decoration: none; cursor: pointer; }
  .fbar__btn b { margin-left: 4px; color: var(--accent); }
  .fbar__sort select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
  .fbar__sort:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
  .fbar__reset[aria-disabled="true"] { color: var(--muted); cursor: default; }
  /* Sort and Clear all live in the drawer and the bar; the toolbar keeps the count and the chips. */
  .toolbar #sort, .toolbar #rsort, .toolbar .clear { display: none; }
  .facets { display: none; }
  .facets.is-open { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 1100; max-height: none; padding: 0; background: var(--bg); }
  .facets.is-open .drawer__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 4px 0 8px; border-bottom: 1px solid var(--line); background: var(--panel); }
  .drawer__top h2 { margin: 0; font-size: 17px; }
  .drawer__clear { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
  .drawer__close { justify-self: end; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); font-size: 20px; cursor: pointer; }
  .drawer__body { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 12px 16px 24px; }
  .facets.is-open .facet ul { max-height: none; }
  .facets.is-open .facet > summary { min-height: 44px; }
  .facets.is-open .facet label { min-height: 40px; align-items: center; }
  .facets.is-open .tx { width: 40px; height: 40px; }
  .facets.is-open .drawer__foot { display: block; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--panel); }
  .drawer__show { width: 100%; min-height: 48px; font: inherit; font-weight: 700; border: 0; border-radius: 8px; background: var(--accent); color: var(--panel); cursor: pointer; }
  html.drawer-open { overflow: hidden; }
}

/* Research tab (#130): role doors, takeaway, who should read it. */
.sr-doors { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 8px; }
.sr-door { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; }
.sr-door em { font-style: normal; font-weight: 400; color: var(--muted); }
.sr-door:hover, .sr-door:focus-visible { border-color: var(--accent); }
.sr-door--on { border: 2px solid var(--accent); background: var(--accent-soft); }
.sr-note { color: var(--muted); font-size: .85rem; margin: 6px 0 18px; }
.sr-takeaway { font-size: .95rem; margin: 6px 0; }
.sr-about, .sr-readers { font-size: .82rem; margin: 4px 0; color: var(--muted); }
.sr-about b, .sr-readers b { color: var(--ink); font-weight: 600; }
.sr-for { margin: 4px 0 8px; }
.sr-role { display: inline-block; font-size: .8rem; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); margin: 2px 4px 2px 0; }
.sr-dots { letter-spacing: 1px; color: var(--accent); }
.sr-result { margin-left: 6px; padding: 0 6px; border-radius: 4px; font-size: .75rem; border: 1px solid var(--line); }
.sr-result--positive { border-color: var(--accent); }
.sr-result--negative { border-color: #b3261e; }
.sr-more { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: .9rem; }
.sr-more button { min-height: 44px; padding: 0 18px; font: inherit; font-weight: 600; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); cursor: pointer; }
.sr-more button:hover { border-color: var(--accent); }
@media (max-width: 800px) { .sr-doors { gap: 6px; } .sr-door { padding: 6px 11px; font-size: .84rem; } }

/* Research tab: "More filters" holds the less-used groups; bands head each rating when sorted by role (#130). */
.sr-morefilters > summary .facet__name { color: var(--muted); }
.sr-morefilters > .facet { margin-left: 4px; }
.sr-morefilters > .facet:first-of-type { margin-top: 6px; }
.grid > .sr-band { grid-column: 1 / -1; display: block; margin: .5rem 0 -.25rem; }
.grid > .sr-band:first-child { margin-top: 0; }
.sr-band h3 { margin: 0; font-size: 1.05rem; }
.sr-band h3 em { font-style: normal; color: var(--muted); font-weight: 400; }
.sr-band p { margin: .15rem 0 0; color: var(--muted); font-size: .9rem; }
/* Links that leave the site carry an arrow; leave.js asks before they open. */
.ext { font-weight: 400; color: var(--muted); white-space: nowrap; }
dialog#leave { width: min(440px, calc(100vw - 32px)); padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
dialog#leave::backdrop { background: rgba(15,20,22,.55); }
dialog#leave h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
dialog#leave p { margin: 0 0 .75rem; }
dialog#leave .leave__host { font-weight: 600; overflow-wrap: anywhere; }
dialog#leave label { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: .9rem; margin-bottom: 1rem; }
dialog#leave .leave__btns { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
dialog#leave .leave__btns > * { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; text-decoration: none; }
dialog#leave .leave__go { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
/* About section (#147): sub-pages, the filter tabs, and the feed examples. */
.about-nav, .about-tabs { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 12px; max-width: 1000px; }
.about-nav { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.about-nav a, .about-tabs a { text-decoration: none; color: var(--ink); padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; font-size: 14px; }
.about-nav a { font-weight: 600; }
.about-tabs a { border-color: var(--line); background: var(--panel); font-size: 13px; }
.about-nav a:hover, .about-tabs a:hover { border-color: var(--accent); }
.about-nav a[aria-current], .about-tabs a[aria-current] { background: var(--accent-soft); border-color: var(--accent); }
.about-table code { font-size: 11px; color: var(--muted); }
.about-table td.muted { font-size: 13px; }
.about-how { border-left: 3px solid var(--accent); padding: 4px 0 4px 12px; margin: 10px 0; }
.about-draft { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 8px; padding: 8px 12px; }
.about-counts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.about-counts a { display: block; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 8px 12px; text-decoration: none; color: var(--ink); }
.about-counts b { font-size: 20px; display: block; }
.about-code { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; overflow-x: auto; font-size: 12px; line-height: 1.45; max-width: 100%; }
.about-page h4 { margin: 18px 0 4px; }
@media (max-width: 600px) { .about-table { display: block; overflow-x: auto; } }

/* "Who you are" / "Who you're helping" trees in the chooser (#123): closed accordions, one per row */
.ch-tree { display: grid; gap: 8px; margin: 0 0 14px; }
.ch-acc { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.ch-acc[open] { border-color: var(--accent); }
.ch-acc > summary { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.ch-acc > summary::-webkit-details-marker { display: none; }
.ch-acc > summary::after { content: ""; grid-row: 1 / span 2; grid-column: 3; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: 0 4px 4px; transition: transform .15s; }
.ch-acc[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.ch-acc > summary:hover .ch-acc__name, .ch-acc > summary:focus-visible .ch-acc__name { color: var(--accent); }
.ch-acc__name { font-size: 15px; font-weight: 600; }
.ch-acc__sub { grid-column: 1; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-acc > summary em { grid-row: 1 / span 2; grid-column: 2; font-style: normal; font-size: 13px; color: var(--muted); }
.ch-acc__body { padding: 2px 12px 12px; }
.ch-acc__body ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ch-acc__body li > ul { margin: 6px 0 0 14px; padding-left: 10px; border-left: 2px solid var(--line); }
.ch-acc__body .ch-pick { width: 100%; }
.ch-tree__helps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 5px 0 0 12px; }
.ch-tree__helps > span { font-size: 12px; color: var(--muted); margin-right: 2px; }
.ch-chip { font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); padding: 2px 10px; cursor: pointer; }
.ch-chip em { font-style: normal; color: var(--muted); }
.ch-chip:hover, .ch-chip:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.ch-ring__more { font: inherit; font-size: 13px; border: 0; background: none; color: var(--accent); padding: 5px 4px; cursor: pointer; }
.ch-ring__more:hover, .ch-ring__more:focus-visible { text-decoration: underline; }

/* Site search (#152): one box in the header, results across every kind of record. */
/* Search, Sign in and the day/night toggle are one group: when the header runs out of room they wrap together. */
.top__tools { display: flex; align-items: center; gap: 12px; margin-left: auto; min-width: 0; }
.site-search { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); padding: 0 4px 0 12px; min-width: 0; flex: 1 1 180px; max-width: 280px; }
.site-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.site-search input { border: 0; background: none; color: var(--ink); font: inherit; padding: 6px 0; min-width: 0; flex: 1; outline: none; }
.site-search button { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 50%; padding: 0; }
.site-search button:hover, .site-search button:focus-visible { color: var(--accent); }
.site-search button svg { width: 18px; height: 18px; }
.sx { max-width: 860px; }
.sx h2 { margin: 0 0 12px; }
.sx__kinds { margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.sx__list { list-style: none; padding: 0; margin: 0; }
.sx__hit { padding: 14px 0; border-bottom: 1px solid var(--line); }
.sx__kind { display: inline-block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-right: 8px; }
.sx__title { font-weight: 600; font-size: 1.05rem; }
.sx__blurb { margin: 4px 0; }
.sx__meta { margin: 0; font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.sx__engine { margin-top: 20px; }
/* Header at mid and phone widths (#152): the links take their own row, scrolling sideways if they
   must, instead of the header wrapping item by item into 3-4 rows. Phones: name / search / links. */
@media (max-width: 1200px) {
  .top { gap: 10px 16px; }
  .top nav { order: 10; flex: 1 1 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .top nav a { white-space: nowrap; }
  .site-search { max-width: 340px; }
}
@media (max-width: 660px) {
  .top__tools { order: 5; flex: 1 1 100%; }
  .site-search { max-width: none; }
  /* The home page hides the header search (it has its own), so Sign in and the toggle sit beside the logo. */
  body.is-home .top__tools { order: 0; flex: 0 1 auto; }
}
@media (max-width: 380px) {
  .top { gap: 10px; }
  .draft { font-size: 11px; letter-spacing: .02em; padding: 1px 4px; }
}
.sx__kinds .chip { white-space: nowrap; }
/* The two ways to browse a chooser tab, as a choice at the top (#123) */
.ch-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 14px; }
.ch-switch button { display: grid; gap: 2px; text-align: left; font: inherit; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); cursor: pointer; }
.ch-switch button b { font-size: 15px; }
.ch-switch button span { font-size: 12px; color: var(--muted); }
.ch-switch button:hover, .ch-switch button:focus-visible { border-color: var(--accent); }
.ch-switch button[aria-pressed="true"] { border: 2px solid var(--accent); padding: 9px 13px; background: var(--accent-soft); }
.ch-switch button[aria-pressed="true"] b { color: var(--accent); }
.ch-switch { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.ch-research { display: block; margin: 8px 0 0 12px; font: inherit; font-size: 13px; border: 0; background: none; color: var(--accent); padding: 2px 0; cursor: pointer; }
.ch-research:hover, .ch-research:focus-visible { text-decoration: underline; }
@media (max-width: 600px) { .ch-switch button { padding: 8px 10px; } .ch-switch button[aria-pressed="true"] { padding: 7px 9px; } .ch-switch button span { display: none; } }

.doc-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 8px; }
.doc-filter .chip { text-decoration: none; }

/* Contracts page (#165): one card per document. Campaign first, then buyer → vendor, the amount on the right,
   and which contract terms the document spells out. */
.dcs { display: flex; flex-direction: column; gap: 12px; }
.dc { display: grid; grid-template-columns: 1fr 190px; grid-template-areas: "main side" "more more"; gap: 4px 20px; padding: 14px 16px 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.dc:hover { border-color: var(--accent); }
.dc__main { grid-area: main; min-width: 0; }
.dc__side { grid-area: side; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.dc__kind { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.dc__type { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); }
.dc__type--signed { background: var(--accent); border-color: var(--accent); color: var(--panel); }
.dc__type--choosing { background: var(--accent-soft); border-color: var(--accent-soft); }
.dc__topic { font-size: 12px; padding: 0 7px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.dc__title { margin: 0; font-size: 1.12rem; line-height: 1.3; }
.dc__title a { color: inherit; text-decoration: none; }
.dc__title a:hover, .dc__title a:focus-visible { color: var(--accent); text-decoration: underline; }
.dc__lead { vertical-align: middle; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; border: 1px dashed var(--muted); color: var(--muted); cursor: help; }
.dc__who { margin: 4px 0 6px; font-size: 15px; }
.dc__buyer { font-weight: 600; }
.dc__arrow { color: var(--muted); padding: 0 2px; }
.dc__vendor a { color: inherit; }
.dc__sum { margin: 0 0 8px; font-size: 14px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dc__terms { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.dc__terms li { font-size: 12px; padding: 1px 8px; border-radius: 999px; color: var(--muted); border: 1px solid transparent; }
.dc__terms li.on { color: var(--ink); background: var(--accent-soft); border-color: var(--accent-soft); font-weight: 600; }
.dc__amt { margin: 0; font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.dc__amt--n { font-size: 1.05rem; }
.dc__amtk { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.dc__open { font-size: 14px; font-weight: 600; }
.dc__amt + .dc__open { margin-top: 6px; }
.dc__unchecked { margin: 6px 0 0; font-size: 12px; color: var(--mixed); }
.dc__more { grid-area: more; border-top: 1px solid var(--line); margin-top: 4px; }
.dc__more > summary { cursor: pointer; padding: 6px 0; font-size: 13px; color: var(--accent); }
.dc__more .doc__body { padding: 0 0 8px; }
.dc-facet-note { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.docs .doc .doc__type { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
@media (max-width: 640px) {
  .dc { grid-template-columns: 1fr; grid-template-areas: "main" "side" "more"; padding: 12px 12px 4px; }
  .dc__side { text-align: left; align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
  .dc__amtk { margin: 0; }
  .dc__amt + .dc__open { margin-top: 0; }
}
.dcs { list-style: none; margin: 0; padding: 0; }
.dc__terms li.dc__tn { padding-left: 2px; }
@media (max-width: 800px) { #dsort { display: none; } }

/* Search home (edition `home: "search"`): one big box over the whole site. The header box hides here. */
body.is-home .site-search { visibility: hidden; }
.home { max-width: 720px; margin: 9vh auto 6vh; text-align: center; }
.home__title { font-size: clamp(1.5rem, 4vw, 2.3rem); line-height: 1.2; margin: 0 0 22px; }
.home__search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); padding: 6px 6px 6px 18px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.home__search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.home__search svg { flex: none; width: 22px; height: 22px; color: var(--muted); }
.home__search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 1.15rem; padding: 10px 0; outline: none; }
.home__search button { flex: none; border: 0; border-radius: 999px; background: var(--accent); color: var(--panel); font: inherit; font-weight: 600; padding: 10px 22px; cursor: pointer; }
.home__search button:hover, .home__search button:focus-visible { filter: brightness(1.1); }
.home__try { margin: 14px 0 0; color: var(--muted); font-size: .95rem; }
.home__try a { display: inline-block; margin: 4px 0 0 8px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: .9rem; }
.home__try a:hover, .home__try a:focus-visible { border-color: var(--accent); color: var(--accent); }
.home__ways { list-style: none; padding: 0; margin: 9vh 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; text-align: left; }
.home__ways li { flex: 1 1 150px; max-width: 220px; }
.home__ways a { display: block; height: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); text-decoration: none; }
.home__ways a:hover, .home__ways a:focus-visible { border-color: var(--accent); }
.home__ways b { display: block; color: var(--accent); }
.home__ways em { font-style: normal; font-weight: 400; color: var(--muted); font-size: .9rem; }
.home__ways span { color: var(--muted); font-size: .88rem; }
@media (max-width: 760px) { .home { margin-top: 4vh; } .home__ways li { flex-basis: 140px; max-width: none; } .home__search { padding-left: 12px; } .home__search button { padding: 10px 14px; } body.is-home .site-search { display: none; } }

/* Audience across tabs (#137): the same audience on the other tabs, the explainer link, and a card's audience tags. */
.aud-else { margin: 6px 0 2px; padding: 6px 8px; border-radius: 6px; background: var(--accent-soft); font-size: .8rem; line-height: 1.5; }
.aud-else a { font-weight: 600; color: var(--ink); }
.aud-else em { font-style: normal; font-weight: 400; color: var(--muted); }
.aud-more { margin: 10px 0 2px; font-size: .78rem; }
.aud-more a { color: var(--muted); }
.aud-tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 4px 0; font-size: .8rem; color: var(--muted); }
.aud-tags b { color: var(--ink); font-weight: 600; }
.aud-tags a { color: inherit; }
a.tip__link { display: inline-flex; align-items: center; text-decoration: none; }
.aud-def { margin: 0 0 1.4rem; }
.aud-def dt { font-weight: 700; margin-top: .9rem; }
.aud-def dd { margin: .2rem 0 0; }

/* Ads page (#212): one column of ads, like scrolling a feed. */
.adf-intro, .adf-bar, .adf-count, .adfs, #amore-wrap { max-width: 600px; margin-left: auto; margin-right: auto; }
.adf-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.adf-bar input[type=search] { flex: 1 1 100%; }
.adf-bar select { flex: 1 1 0; min-width: 0; }
.adf-all { flex: 1 1 100%; font-size: 14px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.adf-count { margin-top: 14px; margin-bottom: 10px; font-size: 14px; color: var(--muted); }
.adf-count strong { color: var(--ink); }
.adfs { list-style: none; padding: 0; }
.adfs > li + li { margin-top: 18px; }
.adf { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.adf__camp { margin: 0; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-weight: 600; }
.adf__camp a { color: var(--ink); text-decoration: none; margin-right: 4px; }
.adf__camp a:hover, .adf__camp a:focus-visible { color: var(--accent); text-decoration: underline; }
.adf__camp .dc__topic { font-weight: 400; color: var(--muted); }
.adf__shot { display: block; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.adf__shot img { display: block; width: 100%; height: auto; }
.adf__gone { margin: 0; padding: 28px 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); color: var(--muted); text-align: center; font-size: 14px; }
.adf__facts { margin: 0; padding: 10px 14px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; font-size: 14px; }
.adf__facts div:first-child { grid-column: 1 / -1; }
.adf__facts dt { color: var(--muted); font-size: 12px; }
.adf__facts dd { margin: 0; }
.adf__foot { margin: 0; padding: 10px 14px 12px; font-size: 13px; }

/* Blog (#205): the list at #/blog and one post at #/blog/<id>. */
.blog, .post { max-width: 760px; }
.blog__lede { margin-top: -4px; }
.blog__list { list-style: none; padding: 0; margin: 20px 0 0; }
.blog__item { padding: 16px 0; border-top: 1px solid var(--line); }
.blog__item h3 { margin: 0 0 4px; font-size: 1.2rem; line-height: 1.3; }
.blog__item h3 a { text-decoration: none; }
.blog__item h3 a:hover, .blog__item h3 a:focus-visible { text-decoration: underline; }
.blog__item p { margin: 6px 0 0; }
.blog .meta span::before, .post .meta span::before, .post .meta time::before { content: "·"; margin-right: 8px; }
.blog__flag { color: var(--mixed); }
.post__back { margin: 0 0 12px; font-size: 14px; }
.post__title { font-size: 2rem; line-height: 1.2; margin: 0 0 8px; text-wrap: balance; }
.post__dek { font-size: 1.15rem; color: var(--muted); margin: 0 0 10px; }
.post__draft { border-left: 3px solid var(--mixed); background: var(--panel); padding: 10px 14px; margin: 16px 0; font-size: 15px; }
.post__body { font-size: 17px; line-height: 1.65; }
.post__body h2 { font-size: 1.35rem; margin: 32px 0 8px; line-height: 1.3; }
.post__body h3 { font-size: 1.1rem; margin: 24px 0 6px; }
.post__body li { margin: 4px 0; }
.post__body blockquote { margin: 16px 0; padding: 2px 16px; border-left: 3px solid var(--accent); color: var(--muted); }
.post__table { overflow-x: auto; margin: 16px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.post__table table { border-collapse: collapse; width: 100%; font-size: 14.5px; line-height: 1.45; }
.post__table th, .post__table td { text-align: left; vertical-align: top; padding: 8px 12px; border-top: 1px solid var(--line); }
.post__table thead th { border-top: 0; background: var(--accent-soft); font-weight: 600; }
.post__table tbody th { font-weight: 600; min-width: 11em; }
@media (max-width: 640px) {
  .post__title { font-size: 1.6rem; }
  .post__body { font-size: 16px; }
}

/* Hidden organisations (#221): the bar above the list, the control on an organisation's pop-up, and
   the tooltip's own button. The bar is a status, not an error, so it borrows the accent, not a warning
   colour; it stays until the reader brings the organisation back. */
.hbar { margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--accent); border-left-width: 4px; border-radius: 8px; background: var(--accent-soft); }
.hbar__h { margin: 0; font-size: .88rem; font-weight: 700; }
.hbar__list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .85rem; }
.hbar__list li { display: flex; align-items: center; gap: 8px; }
.hbar__list a { font-weight: 600; }
.hbar__show { font: inherit; font-weight: 600; min-height: 30px; padding: 0 .6rem; border: 1px solid var(--accent); border-radius: 5px; background: var(--panel); color: var(--ink); cursor: pointer; }
.hbar__show:hover { background: var(--accent); color: var(--bg); }
.ohide { margin: 10px 0 0; }
.ohide__btn { font: inherit; font-weight: 700; min-height: 36px; padding: 0 .85rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); cursor: pointer; }
.ohide__btn:hover { border-color: var(--accent); color: var(--accent); }
.ohide__what { margin: 6px 0 0; max-width: 56ch; font-size: .8rem; color: var(--muted); }
.ohide--on { padding: 10px 14px; border: 1px solid var(--accent); border-left-width: 4px; border-radius: 8px; background: var(--accent-soft); }
.ohide--on .ohide__what { margin: 0 0 8px; color: var(--ink); }
.ohide--on .ohide__btn { border-color: var(--accent); }
.tip__hide { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }

/* Directory: the two lists under the tab, and the US health nonprofits view (#256). */
.dir-tabs { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 12px; border-bottom: 1px solid var(--line); }
.dir-tabs a { padding: 8px 0; font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dir-tabs a:hover { color: var(--ink); }
.dir-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.tablewrap { overflow-x: auto; }
.nf-row { align-items: flex-start; }
.nf-row__summary { margin: .3rem 0 .4rem; font-size: 14px; }
.nf-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.nf-tag { font: inherit; font-size: 12.5px; padding: 1px 8px; background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); text-decoration: none; cursor: pointer; }
.nf-tag--who { border-style: dashed; }
.nf-tag:hover, .nf-tag:focus-visible { border-color: var(--accent); color: var(--ink); }
.nf-tag.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
span.nf-tag { cursor: default; }
.nf-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; }
.nf-sources { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.nf-page { max-width: 760px; }
.nf-links { margin: 6px 0 14px; }
.nf-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 18px; margin: 16px 0 8px; padding: 12px 0; border-block: 1px solid var(--line); }
.nf-facts dt { font-size: 12.5px; color: var(--muted); }
.nf-facts dd { margin: 0; font-weight: 600; }
.nf-group { margin: 14px 0; }
.nf-group h3 { margin: 0 0 6px; font-size: 14px; }
.nf-programs { padding-left: 18px; }
.nf-pcs { margin: 14px 0; }
.nf-pcs > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.facet__find { width: 100%; margin: 6px 0 2px; font-size: 14px; }
.facet__all { margin: 4px 0 0; padding: 2px 0; font: inherit; font-size: 13px; border: 0; background: none; color: var(--accent); cursor: pointer; }
.facet__all:hover, .facet__all:focus-visible { text-decoration: underline; }
.facet li[hidden] { display: none; }
.nf-list.is-loading { opacity: .55; }
.nf-peek { margin-bottom: 16px; }
.nf-peek h3 { margin: 0 0 8px; font-size: 16px; }
.nf-peek p { margin: 10px 0 0; }
.nf-peek__next { margin-top: 22px !important; }
.nf-row:hover { background: color-mix(in srgb, var(--accent-soft) 35%, transparent); }
.nf-facts-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 2px; font-size: 13px; color: var(--muted); }
.nf-sep { opacity: .6; }
.nf-fact { font: inherit; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; text-align: left; text-decoration: underline dotted var(--line); text-underline-offset: 3px; }
.nf-fact:hover, .nf-fact:focus-visible { color: var(--ink); text-decoration-color: var(--accent); }
.nf-fact.is-on { color: var(--accent); font-weight: 600; }
.nf-ai { display: inline-block; padding: 0 5px; font-size: 11px; font-weight: 600; line-height: 1.5; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; cursor: help; vertical-align: 1px; }
/* "health is part of its work" (#280): the IRS files it under something other than health, so it sits beside
   the clinics without reading as one. A plain note, not a warning — these organizations belong on the list. */
.nf-part { display: inline-block; padding: 0 6px; font-size: 11.5px; line-height: 1.6; color: var(--muted); background: var(--panel); border: 1px dashed var(--line); border-radius: 4px; cursor: help; }
.nf-part:hover, .nf-part:focus-visible { color: var(--ink); border-color: var(--accent); border-style: solid; }
/* Crosswalk from a ticked MeSH topic to the campaigns we've written up on it (#280). */
.nf-xwalk { font-size: 13px; color: var(--muted); }
.nf-xwalk:empty { display: none; }
.nf-xwalk a { color: var(--accent); }
.nf-more { font-size: 12.5px; align-self: center; }
.nf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 8px; font-size: 13px; }
.nf-actions button { font: inherit; padding: 0; background: none; border: 0; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.nf-actions button:hover { color: var(--ink); }
.facet__sec { margin: 14px 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }


/* ---------- Embed: one record in someone else's frame (#263) ----------
   ?embed=1 is how SmartSearch shows a campaign or an organisation beside its results.
   Its pop-up already carries the title, the link out and the close button, so everything
   of ours that repeats those goes: the beta bar, the header, the footer, the page behind
   the dialog, and the dialog's own frame, counter and pager. */
:root[data-embed] .beta,
:root[data-embed] .preview-bar,
:root[data-embed] .top,
:root[data-embed] #foot,
:root[data-embed] .mnav,
:root[data-embed] .mpager { display: none; }
:root[data-embed] dialog#modal { inset: 0; margin: 0; width: 100%; max-width: none; height: 100%; max-height: none; padding: 20px 26px 28px; border: 0; border-radius: 0; box-shadow: none; }
:root[data-embed] dialog#modal::backdrop { background: var(--bg); }
/* Hiding an organisation changes the reader's own copy of the library, and only for lists
   this frame never shows. Not something to offer from inside someone else's page. */
:root[data-embed] .ohide,
:root[data-embed] .tip__hide { display: none; }
/* The record's cover is a 16/7 band, which in a frame a few hundred pixels tall is most of
   what you see before scrolling. In an embed it shrinks with the frame and stays a strip, so
   the title and the summary are there without scrolling (#269). */
:root[data-embed] .cover--big { aspect-ratio: auto; height: clamp(84px, 20vh, 150px); }
:root[data-embed] .cover--big svg { width: 36px; height: 36px; }
/* The fit and logo paddings are percentages of the width, which on a strip this short
   would be taller than the strip and push the logo out of it. */
:root[data-embed] .cover--big.cover--fit .cover__img,
:root[data-embed] .cover--big.cover--logo .cover__img { padding: 10px; }
/* An organisation logo sits in the flow, sized in percentages of the cover. As a grid item on
   a strip this short the browser won't resolve those against the strip's height, so the logo
   keeps its own size and is cut off. Pixels, smaller than the shortest strip, always fit. */
:root[data-embed] .cover--big.cover--orglogo .cover__img { max-height: 60px; max-width: 32%; padding: 0; }
:root[data-embed] #app { padding: 20px 26px; } /* only ever the loading line or an error here */
:root[data-embed] body:has(dialog#modal[open]) #app { display: none; }
@media (max-width: 800px) { :root[data-embed] dialog#modal { padding: 16px 14px 24px; } }

/* ---------- Collections and issue pages (#277) ----------
   A collection has no picture of its own. Its card either stacks its members' pictures
   (never one of them full-bleed: that breaks one-picture-one-card in featured-images.md)
   or shows a fact cover, which is usually the better default for an advocacy shelf. */
.grid--res { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.card--res .card__notes { font-size: 14px; }
.card--res .cover { aspect-ratio: 16 / 10; }
.card--nopic .card__body { padding-top: 12px; }
.card--coll { border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.cover--stack { display: block; background: hsl(var(--h) var(--cover-s) var(--cover-l)); }
.cover__sheet { position: absolute; border-radius: 5px; object-fit: cover; border: 2px solid var(--panel); box-shadow: 0 2px 7px rgba(0,0,0,.3); }
.cover__sheet--0 { inset: 20% 34% 12% 6%; z-index: 3; }
.cover__sheet--1 { inset: 13% 20% 19% 20%; z-index: 2; transform: rotate(4deg); }
.cover__sheet--2 { inset: 7% 6% 26% 34%; z-index: 1; transform: rotate(8deg); opacity: .9; }
.cover__count { position: absolute; right: .5rem; bottom: .4rem; z-index: 4; background: rgba(0,0,0,.62); color: #fff; font-size: .7rem; font-weight: 700; border-radius: 6px; padding: .1rem .4rem; }
.cover--facts { padding: 10px 12px; text-align: center; }
.cover--facts > div { display: flex; flex-direction: column; gap: 2px; }
.cover__fact { font-size: .78rem; font-weight: 600; opacity: .78; line-height: 1.25; }
.cover__fact--lead { font-size: 1.22rem; font-weight: 800; opacity: 1; letter-spacing: -.01em; }
.cover--plain .cover__fact--lead { font-size: .95rem; font-weight: 700; opacity: .7; text-transform: uppercase; letter-spacing: .06em; }
.res-mark { font-size: 11px; font-weight: 700; letter-spacing: .03em; border-radius: 5px; padding: .05rem .3rem; background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); }
.res-mark--gone { background: color-mix(in srgb, #c0392b 16%, transparent); color: #c0392b; }
.res-mark--paid { background: color-mix(in srgb, #b7791f 18%, transparent); color: #8a5a07; }

/* A collection's own page: breadcrumb up, collections inside first, then items. */
.coll { max-width: 1100px; margin: 0 auto; padding: 8px 0 40px; }
.coll__crumbs { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.coll__crumbs a { color: var(--accent); }
.coll__title { margin: 0 0 6px; font-size: 1.7rem; line-height: 1.15; }
.coll__lede { margin: 0 0 6px; max-width: 70ch; color: var(--ink); }
.coll__meta { margin: 0 0 20px; font-size: 14px; color: var(--muted); }
.coll__h { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 24px 0 10px; }

/* The issue page: one decision, and everything the library holds on it. */
.isx { max-width: 1100px; margin: 0 auto; padding: 8px 0 48px; }
.isx-hero { border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 8px; }
.isx-hero__kind { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.isx-hero__q { margin: 0 0 12px; font-size: 2.1rem; line-height: 1.1; letter-spacing: -.02em; max-width: 22ch; }
.isx-hero__ask { margin: 0 0 12px; font-size: 1.05rem; }
.isx-hero__asklabel { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: block; }
.isx-hero__lede, .isx-hero__who { margin: 0 0 10px; max-width: 68ch; color: var(--muted); }
.isx-hero__who b { color: var(--ink); }
.isx-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 18px; }
.isx-num { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel); }
.isx-num__v { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.isx-num__v[tabindex] { cursor: help; border-bottom: 1px dotted var(--line); }
.isx-num__l { font-size: 13px; color: var(--muted); }
.isx-sec { margin: 34px 0 0; }
.isx-sec > h2 { font-size: 1.25rem; margin: 0 0 4px; }
.isx-sec__lede { margin: 0 0 14px; max-width: 72ch; color: var(--muted); font-size: 14px; }
.isx-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.isx-table th { text-align: left; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); padding: 0 10px 6px 0; }
.isx-table td { border-bottom: 1px solid var(--line); padding: 10px 10px 10px 0; vertical-align: top; }
.isx-yrs { display: block; font-size: 12px; color: var(--muted); }
.isx-ask { color: var(--muted); max-width: 46ch; }
.isx-out { font-weight: 700; font-size: 13px; border-radius: 6px; padding: .1rem .4rem; white-space: nowrap; }
.isx-out--ok { background: color-mix(in srgb, #2e7d32 16%, transparent); color: #1e5c22; }
.isx-out--warn { background: color-mix(in srgb, #b7791f 20%, transparent); color: #8a5a07; }
.isx-out--bad { background: color-mix(in srgb, #c0392b 16%, transparent); color: #a5281b; }
.isx-out--muted { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }
.isx-mechs { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.isx-mech { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel); }
.isx-mech__id { font-size: 14px; }
.isx-mech__n { float: right; font-size: 12px; color: var(--muted); }
.isx-mech__m { margin: 4px 0 6px; font-size: 13px; color: var(--muted); }
.isx-mech__who { margin: 0; font-size: 12px; }
.isx-sec--gap { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; background: var(--panel); }
.isx-sec--gap p { max-width: 72ch; }
.isx-open { margin: 10px 0 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
.isx-srcs { font-size: 13px; color: var(--muted); margin-top: 12px; }
.isx-note { margin-top: 28px; font-size: 12px; color: var(--muted); }
@media (max-width: 640px) {
  .isx-hero__q { font-size: 1.5rem; }
  .isx-table, .isx-table tbody, .isx-table tr, .isx-table td { display: block; width: 100%; }
  .isx-table thead { display: none; }
  .isx-table tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
  .isx-table td { border: 0; padding: 2px 0; }
}
/* Who decides, on the issue table and the campaign record. A flat pill: the advocacy and
   decidedBy facets are not filters, so it must not look like one. */
.pill--flat { background: var(--panel); border: 1px solid var(--line); cursor: default; }
.pill--flat:hover { outline: 0; }
.isx-who { white-space: normal; }
.isx-dec { display: inline-block; font-size: 13px; background: var(--accent-soft); border-radius: 6px; padding: .1rem .4rem; margin: 0 4px 4px 0; }
.policy .facts { margin: 0; }
.policy .facts dd { margin-bottom: 8px; }

/* The Issues index behind the nav entry: a list, not a card grid, because an issue is a
   question and reads as one. The result chips are the same .isx-out as the issue page. */
.ixs { max-width: 820px; }
.ixs__lede { margin-top: -4px; max-width: 72ch; }
.ixs__list { list-style: none; padding: 0; margin: 24px 0 0; }
.ixs__item { padding: 18px 0; border-top: 1px solid var(--line); }
.ixs__item h3 { margin: 0 0 6px; font-size: 1.3rem; line-height: 1.25; }
.ixs__item h3 a { text-decoration: none; }
.ixs__item h3 a:hover, .ixs__item h3 a:focus-visible { text-decoration: underline; }
.ixs__item p { margin: 6px 0 0; }
.ixs__ask { font-size: 14px; }
.ixs__out { display: flex; flex-wrap: wrap; gap: 6px; }
.ixs .meta span::before { content: "\00b7"; margin-right: 8px; }
.issue-of { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 0 8px 8px 0; font-size: 14px; }

/* ---------- Open formats, Feedback and submissions ---------- */
.formats-list { list-style: none; padding: 0; margin: 16px 0 8px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: fmt; }
.formats-list li { counter-increment: fmt; }
.formats-list a { display: block; height: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); background: var(--panel); }
.formats-list a:hover, .formats-list a:focus-visible { border-color: var(--accent); }
.formats-list b::before { content: counter(fmt) ". "; color: var(--accent); }
.formats-list span { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.formats-page h3 { scroll-margin-top: 16px; margin-top: 32px; }
.formats-scroll { overflow-x: auto; max-width: 100%; }
.formats-scores { min-width: 720px; }
.formats-scores td { text-align: center; }
.formats-scores .sc--0 { color: var(--muted); }
.formats-scores .sc--2 { font-weight: 700; color: var(--accent); }
.fb { display: grid; gap: 6px; max-width: 640px; margin: 8px 0 24px; }
.fb label { font-weight: 600; margin-top: 10px; }
.fb .fb-hint { margin: 0; font-size: 14px; }
.fb input, .fb select, .fb textarea { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%; box-sizing: border-box; }
.fb input:focus, .fb select:focus, .fb textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.fb-send { justify-self: start; font: inherit; font-weight: 600; color: var(--bg); background: var(--accent); border: 0; border-radius: 8px; padding: 10px 18px; cursor: pointer; min-height: 44px; }
.fb-send:hover { filter: brightness(1.08); }
.fb .fb-trap { position: absolute; left: -9999px; }
.fb .fb-status { margin: 0; min-height: 1.2em; color: var(--harm); }
.fb-send[disabled] { opacity: .6; cursor: default; }