/* Grant Radar.
   Layout: a field instrument on a broadsheet. A finder rail on the left, the list on the right,
   and one dark scope that plots every deadline a funder has actually published.
   Tokens are the Step Up AVL "Broadsheet" palette and faces; the dark set is this page's own. */

@font-face { font-family: "Newsreader"; src: url("assets/fonts/newsreader.woff2") format("woff2-variations"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("assets/fonts/newsreader-italic.woff2") format("woff2-variations"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo.woff2") format("woff2-variations"); font-weight: 400 800; font-style: normal; font-display: swap; }
/* Metric-matched stand-ins, so the page does not jump when the real faces arrive. */
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia"); size-adjust: 91.49%; ascent-override: 80.34%; descent-override: 28.96%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial"); size-adjust: 101.82%; ascent-override: 86.23%; descent-override: 20.62%; line-gap-override: 0%; }

:root {
  --paper: #F6F3EC; --card: #FCFBF4; --panel: #EAEFE9; --panel-2: #EFF3EE;
  --ink: #1D2B2D; --text: #2C3733; --text-2: #55635E;
  --rule: #CFD7D0; --rule-soft: #DDE3DC;
  --green: #2C7569; --green-deep: #216F57; --green-tint: #E4F0EC; --green-edge: #C4DCD3;
  --gold: #DEB249; --gold-text: #7A5C14; --gold-tint: #F1EAD9; --gold-edge: #E3D2A6;
  --red: #A23D29; --red-tint: #F7E5E0; --red-edge: #E8C4BA;
  --scope: #223B33; --scope-line: #4A635B; --scope-text: #33403C; --scope-tick: #B9C6C0;
  --scope-blip: #DEB249; --scope-urgent: #F2674B; --scope-now: #F6F3EC; --scope-sweep: #6ACCA6;
  --shadow: 0 6px 22px rgba(29, 43, 45, .14);
  --serif: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;
  --sans: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --measure: 1200px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121C1B; --card: #182523; --panel: #1C2B28; --panel-2: #172321;
    --ink: #F1F4EF; --text: #D5DDD7; --text-2: #A3B0A9;
    --rule: #34463F; --rule-soft: #27362F;
    --green: #74D1AD; --green-deep: #8EDDBE; --green-tint: #1B352E; --green-edge: #2D5146;
    --gold: #DEB249; --gold-text: #E6C673; --gold-tint: #2E2B1B; --gold-edge: #564D2A;
    --red: #F58A72; --red-tint: #3A211C; --red-edge: #633529;
    --scope: #0A1211; --scope-line: #2F443D; --scope-text: #C2CEC8; --scope-tick: #8D9C95;
    --scope-blip: #DEB249; --scope-urgent: #F2674B; --scope-now: #F1F4EF; --scope-sweep: #6ACCA6;
    --shadow: 0 6px 22px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121C1B; --card: #182523; --panel: #1C2B28; --panel-2: #172321;
  --ink: #F1F4EF; --text: #D5DDD7; --text-2: #A3B0A9;
  --rule: #34463F; --rule-soft: #27362F;
  --green: #74D1AD; --green-deep: #8EDDBE; --green-tint: #1B352E; --green-edge: #2D5146;
  --gold: #DEB249; --gold-text: #E6C673; --gold-tint: #2E2B1B; --gold-edge: #564D2A;
  --red: #F58A72; --red-tint: #3A211C; --red-edge: #633529;
  --scope: #0A1211; --scope-line: #2F443D; --scope-text: #C2CEC8; --scope-tick: #8D9C95;
  --scope-blip: #DEB249; --scope-urgent: #F2674B; --scope-now: #F1F4EF; --scope-sweep: #6ACCA6;
  --shadow: 0 6px 22px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 12px; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--serif); font-size: 17px;
  line-height: 1.5; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: var(--green-deep); text-decoration: underline; text-decoration-color: var(--green-edge); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; }
button, input, select { font: inherit; color: inherit; }
.wrap { max-width: var(--measure); margin-inline: auto; padding-inline: 22px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dot { color: var(--text-2); padding-inline: .3em; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: var(--paper); padding: 8px 14px;
  font-family: var(--sans); font-weight: 600; border-radius: 6px; z-index: 20; }
.skip:focus { top: 12px; }

/* ----------------------------------------------------------------- masthead */
.mast { border-bottom: 3px double var(--ink); }
.mast-in { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 40px; padding-block: 26px 18px; }
.brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.radar-mark { flex: none; }
.bm-disc { fill: var(--scope); }
.bm-ring { fill: none; stroke: var(--scope-line); stroke-width: 1; }
.bm-sweep { fill: var(--scope-sweep); opacity: .3; }
.bm-blip { fill: var(--scope-blip); }
.bm-blip-2 { fill: var(--scope-urgent); }
.brand-name { font-family: var(--serif); font-weight: 800; font-size: clamp(1.9rem, 4.6vw, 2.6rem); line-height: 1.02;
  letter-spacing: -.018em; color: var(--ink); }
.brand-line { font-size: 1.02rem; color: var(--text-2); max-width: 54ch; margin-top: 4px; text-wrap: balance; }
.mast-meta { font-family: var(--sans); font-size: .84rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.mast-meta strong { color: var(--ink); font-weight: 700; }
.draft { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--gold-tint);
  border: 1px solid var(--gold-edge); color: var(--gold-text); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }

/* -------------------------------------------------------------------- bench */
.bench { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 34px; padding-block: 26px 40px; align-items: start; }

/* ------------------------------------------------------------------- finder */
.finder { position: sticky; top: 14px; max-height: calc(100vh - 28px); overflow-y: auto; background: var(--panel-2);
  border: 1px solid var(--rule); border-radius: 12px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 16px;
  font-family: var(--sans); font-size: .9rem; scrollbar-width: thin; }
.finder-title { font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-text); }
.finder-title::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); margin-right: 9px; }
.finder legend, .field > label { display: block; font-weight: 700; color: var(--ink); font-size: .88rem; margin-bottom: 7px; }
.opt { font-weight: 500; color: var(--text-2); font-size: .78rem; margin-left: 4px; }
.help { font-size: .79rem; color: var(--text-2); line-height: 1.42; margin-top: 6px; }
.field input[type="text"], .field input[type="search"], .field select, .sort select {
  width: 100%; min-height: 40px; padding: 8px 10px; background: var(--card); border: 1px solid var(--rule);
  border-radius: 8px; color: var(--ink); }
.field input:focus-visible, .field select:focus-visible, .sort select:focus-visible { outline-offset: 0; border-color: var(--ink); }

.seg-row { display: grid; grid-template-columns: 1fr 1fr; background: var(--card); border: 1px solid var(--rule); border-radius: 9px; padding: 3px; gap: 3px; }
.seg-row input, .chip-row input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.seg-row label { text-align: center; padding: 8px 6px; border-radius: 6px; cursor: pointer; font-weight: 600; color: var(--text-2); line-height: 1.2;
  display: flex; align-items: center; justify-content: center; }
.seg-row input:checked + label { background: var(--ink); color: var(--paper); }
.seg-row input:focus-visible + label, .chip-row input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; position: relative; }
.chip-row label { cursor: pointer; padding: 5px 11px; border: 1px solid var(--rule); border-radius: 999px; background: var(--card);
  color: var(--text); font-size: .83rem; font-weight: 500; line-height: 1.3; user-select: none; }
.chip-row label:hover { border-color: var(--text-2); }
.chip-row input:checked + label { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 600; }
.chip-row input:checked + label::before { content: "✓"; margin-right: 5px; font-weight: 800; }

.combo { position: relative; }
/* the "x" that clears the name: inside the field at its right edge, shown only when there is text */
.combo-input { position: relative; }
.field .combo-input input[type="text"] { padding-right: 42px; }
.combo-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-2); font: 400 1.45rem/1 var(--sans); cursor: pointer; }
.combo-clear:hover { background: var(--panel); color: var(--ink); }
.combo-clear[hidden] { display: none; }
.combo-list { position: absolute; z-index: 15; left: 0; right: 0; top: 68px; background: var(--card); border: 1px solid var(--ink);
  border-radius: 8px; box-shadow: var(--shadow); max-height: 310px; overflow-y: auto; padding: 4px; }
.combo-list li { padding: 7px 9px; border-radius: 6px; cursor: pointer; display: flex; flex-direction: column; line-height: 1.3; }
.combo-list li[aria-selected="true"], .combo-list li[role="option"]:hover { background: var(--green-tint); }
.o-name { font-weight: 600; color: var(--ink); }
.o-where { font-size: .78rem; color: var(--text-2); }
.combo-none { cursor: default; color: var(--text-2); font-size: .82rem; }

.org-card { background: var(--green-tint); border: 1px solid var(--green-edge); border-radius: 10px; padding: 12px 14px; margin-top: -6px;
  display: flex; flex-direction: column; gap: 5px; line-height: 1.4; }
.oc-kicker { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--green-deep); }
.oc-name { font-weight: 700; color: var(--ink); font-size: .95rem; }
.oc-facts, .oc-applied { font-size: .8rem; color: var(--text); }
.oc-applied { font-weight: 600; }
.oc-warn { font-size: .8rem; background: var(--gold-tint); border: 1px solid var(--gold-edge); color: var(--text); border-radius: 7px; padding: 7px 9px; }
.linkish { background: none; border: 0; padding: 0; color: var(--green-deep); text-decoration: underline; cursor: pointer; font-size: inherit; align-self: flex-start; }

.more { border-top: 1px solid var(--rule); padding-top: 12px; }
.more summary, .g-more summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.more[open] summary { margin-bottom: 14px; }
.more > * + * { margin-top: 14px; }
.btn-quiet { background: none; border: 1px solid var(--rule); border-radius: 8px; padding: 8px 12px; cursor: pointer; color: var(--text-2);
  font-family: var(--sans); font-size: .85rem; font-weight: 600; }
.btn-quiet:hover { border-color: var(--text-2); color: var(--ink); }
.finder .jump { display: none; }

/* -------------------------------------------------------------------- scope */
.results { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.scope-panel { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); gap: 8px 30px; align-items: center;
  background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 16px 22px 14px 16px; }
.scope-fig { min-width: 0; }
#scope { display: block; width: 100%; height: auto; max-width: 372px; margin-inline: auto; overflow: visible; }
.scope-fig figcaption { font-family: var(--sans); font-size: .76rem; color: var(--text-2); text-align: center; padding-inline: 12px; line-height: 1.4; }
.sc-disc { fill: var(--scope); }
.sc-ring, .sc-spoke { fill: none; stroke: var(--scope-line); stroke-width: 1; }
.sc-spoke { stroke-dasharray: 2 4; }
.sc-tick { font-family: var(--sans); font-size: 9.5px; fill: var(--scope-tick); letter-spacing: .04em; }
.sc-label { font-family: var(--sans); font-size: 9.6px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; fill: var(--scope-text); }
.sc-none { font-family: var(--sans); font-size: 11.5px; fill: var(--scope-tick); }
.sc-now { fill: var(--scope-now); }
.sc-sweep { transform-box: view-box; transform-origin: 180px 180px; animation: sweep 16s linear infinite; }
.sc-sweep path { fill: var(--scope-sweep); opacity: .15; }
@keyframes sweep { to { transform: rotate(360deg); } }
.sc-blip { outline: none; cursor: pointer; }
.sc-hit { fill: transparent; }
.sc-dot { fill: var(--scope-blip); stroke: var(--scope); stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: transform .12s ease; }
.sc-urgent .sc-dot { fill: var(--scope-urgent); }
.sc-blip:hover .sc-dot, .sc-blip:focus .sc-dot { transform: scale(1.45); stroke: var(--scope-now); }
.tip { position: absolute; z-index: 12; max-width: 270px; background: var(--ink); color: var(--paper); border-radius: 8px; padding: 8px 11px;
  font-family: var(--sans); font-size: .8rem; line-height: 1.35; box-shadow: var(--shadow); pointer-events: none; display: flex; flex-direction: column; gap: 1px; }
.tip-when { font-weight: 700; margin-top: 3px; }

.scope-side { min-width: 0; font-family: var(--sans); }
.scope-side h2, .method h2 { font-family: var(--sans); font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-text); }
.next-list { margin-top: 8px; }
.next-list li + li { border-top: 1px solid var(--rule-soft); }
.next-list a { display: grid; grid-template-columns: 4.3em minmax(0, 1fr); gap: 10px; padding: 7px 0; text-decoration: none; color: var(--ink); align-items: baseline; }
.next-list a:hover .nl-what { text-decoration: underline; }
.nl-date { font-weight: 800; font-size: .86rem; color: var(--green-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nl-urgent { color: var(--red); }
.nl-what { font-weight: 600; font-size: .88rem; line-height: 1.3; min-width: 0; }
.nl-funder { display: block; font-weight: 400; font-size: .78rem; color: var(--text-2); }
.nl-empty { font-size: .85rem; color: var(--text-2); padding: 6px 0; }
.scope-tally { display: flex; flex-wrap: wrap; gap: 3px 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule);
  font-size: .78rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.scope-tally strong { color: var(--ink); }

/* ------------------------------------------------------------- results bar */
.results-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px;
  border-bottom: 2px solid var(--ink); padding-bottom: 9px; margin-top: 4px; }
.count { font-family: var(--sans); font-weight: 800; font-size: 1.22rem; color: var(--ink); line-height: 1.2; text-wrap: balance; }
.sort { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: .84rem; color: var(--text-2); }
.sort label { white-space: nowrap; font-weight: 600; }
.sort select { width: auto; min-height: 36px; padding: 5px 8px; }

/* --------------------------------------------------------------------- list */
.list { margin-top: -18px; }
.g { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 4px 20px; padding: 22px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 10px; }
.g.flash { animation: flash 1.6s ease-out 1; }
@keyframes flash { from { background: var(--gold-tint); } to { background: transparent; } }

.g-when { align-self: start; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); overflow: hidden; text-align: center;
  font-family: var(--sans); display: flex; flex-direction: column; line-height: 1.1; padding-bottom: 7px; }
.w-top { font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 2px; background: var(--panel); color: var(--text-2); margin-bottom: 6px; }
.w-mon { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.w-day { font-size: 1.85rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.w-yr { font-size: .7rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.w-small { font-size: .74rem; font-weight: 700; color: var(--text); padding: 3px 5px 1px; line-height: 1.3; }
.w-word { font-size: .82rem; font-weight: 800; color: var(--green-deep); padding: 14px 6px 7px; line-height: 1.2; }
.k-urgent .w-top { background: var(--red); color: var(--paper); }
.k-urgent .g-when { border-color: var(--red); }
.k-soon .w-top { background: var(--gold); color: #2B2206; }
.k-open .w-top, .k-upcoming .w-top { background: var(--green-deep); color: var(--paper); }
.k-passed .g-when, .k-closed .g-when { opacity: .75; }
.k-closed .w-word { color: var(--text-2); }

.g-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.g-pills { display: flex; flex-wrap: wrap; gap: 5px; font-family: var(--sans); }
.pill { font-size: .72rem; font-weight: 700; letter-spacing: .03em; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--rule-soft);
  background: var(--panel-2); color: var(--text-2); line-height: 1.5; }
.pill-note { background: transparent; border-style: dashed; border-color: var(--rule); font-weight: 600; }
.k-urgent .pill-when { background: var(--red-tint); border-color: var(--red-edge); color: var(--red); }
.k-soon .pill-when { background: var(--gold-tint); border-color: var(--gold-edge); color: var(--gold-text); }
.k-open .pill-when, .k-upcoming .pill-when, .k-rolling .pill-when { background: var(--green-tint); border-color: var(--green-edge); color: var(--green-deep); }
.g-title { font-family: var(--sans); font-weight: 700; font-size: 1.14rem; line-height: 1.25; color: var(--ink); text-wrap: balance; margin-top: 2px; }
.g-title:focus { outline: none; }
.g-funder { font-family: var(--sans); font-size: .9rem; font-weight: 600; color: var(--text-2); margin-top: -3px; }
.g-sum { max-width: 68ch; }
.g-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 26px; margin-top: 4px; font-family: var(--sans); font-size: .86rem; }
.g-facts dt { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.g-facts dd { color: var(--text); line-height: 1.4; }
.g-more { font-family: var(--sans); font-size: .88rem; margin-top: 4px; }
.g-more summary { font-size: .86rem; color: var(--green-deep); font-weight: 600; width: fit-content; }
.g-more-in { margin-top: 10px; padding: 12px 16px 14px; background: var(--panel-2); border: 1px solid var(--rule-soft); border-radius: 10px;
  display: flex; flex-direction: column; gap: 5px; }
.g-more h4 { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); margin-top: 7px; }
.g-more h4:first-child { margin-top: 0; }
.g-more ul { list-style: disc; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.g-more li, .g-more p { line-height: 1.45; max-width: 74ch; }
.g-contact { overflow-wrap: anywhere; }
.g-focus { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tag { font-size: .72rem; padding: 1px 8px; border-radius: 4px; background: var(--card); border: 1px solid var(--rule-soft); color: var(--text-2); }
.tag-hit { border-color: var(--green-edge); background: var(--green-tint); color: var(--green-deep); font-weight: 600; }
.g-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; margin-top: 8px; font-family: var(--sans); }
.g-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.g-site { font-size: .86rem; font-weight: 600; }
.g-checked { font-size: .76rem; color: var(--text-2); }
.g-checked a { color: var(--text-2); }
.g-old, .g-old a { color: var(--gold-text); font-weight: 600; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 7px 14px; border-radius: 8px;
  border: 1px solid var(--ink); background: var(--card); color: var(--ink); font-family: var(--sans); font-weight: 700; font-size: .86rem;
  cursor: pointer; text-decoration: none; line-height: 1.2; }
.btn:hover { background: var(--panel); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--text); }
.btn-go { background: var(--green-deep); border-color: var(--green-deep); color: var(--paper); }
.btn-go:hover { background: var(--green); border-color: var(--green); }
.btn-go::after { content: "↗"; margin-left: 7px; font-weight: 400; }

.g-save { font-family: var(--sans); position: relative; }
.g-save input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.g-save label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid var(--rule); border-radius: 999px;
  padding: 4px 11px 4px 9px; font-size: .78rem; font-weight: 700; color: var(--text-2); background: var(--card); user-select: none; }
.g-save label::before { content: ""; width: 12px; height: 12px; border: 1.5px solid var(--text-2); border-radius: 3px; }
.g-save input:checked + label { background: var(--gold-tint); border-color: var(--gold-edge); color: var(--gold-text); }
.g-save input:checked + label::before { background: var(--gold-text); border-color: var(--gold-text); box-shadow: inset 0 0 0 2px var(--gold-tint); }
.g-save input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
.show-more { align-self: center; }
.empty { font-family: var(--sans); color: var(--text-2); padding: 26px 0; display: flex; flex-direction: column; gap: 12px; }
.empty-acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* ----------------------------------------------------------------- download */
.take { position: sticky; bottom: 12px; z-index: 8; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px;
  background: var(--card); border: 1px solid var(--ink); border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow); font-family: var(--sans); }
.take-note { font-size: .84rem; color: var(--text); flex: 1 1 260px; min-width: 0; line-height: 1.4; }
.take-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.take-btns::before { content: "Download"; align-self: center; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); margin-right: 4px; }

/* ------------------------------------------------------------------- method */
.method { background: var(--panel); border-top: 1px solid var(--rule); }
.method-in { padding-block: 30px 30px; }
.method-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 28px; margin-top: 14px; }
.method h3 { font-family: var(--sans); font-size: .98rem; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.method p { font-size: .95rem; line-height: 1.5; }
.region { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--rule); font-family: var(--sans); font-size: .82rem; color: var(--text-2); }
.foot { border-top: 3px double var(--ink); padding-block: 18px 34px; font-family: var(--sans); font-size: .8rem; color: var(--text-2); }
.noscript { padding-block: 20px; font-family: var(--sans); }

/* ------------------------------------------------------------------- report */
body.report-on > :not(.report) { display: none; }
.report { background: var(--paper); min-height: 100vh; }
.report-bar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; gap: 10px; padding: 10px 22px;
  background: var(--panel); border-bottom: 1px solid var(--rule); }
.report-body { max-width: 860px; margin-inline: auto; padding: 30px 22px 60px; }
.rp-head { border-bottom: 3px double var(--ink); padding-bottom: 14px; margin-bottom: 20px; }
.rp-brand { font-family: var(--sans); font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.rp-head h1 { font-family: var(--serif); font-weight: 800; font-size: 1.9rem; line-height: 1.12; color: var(--ink); margin: 4px 0 8px; letter-spacing: -.012em; text-wrap: balance; }
.rp-meta, .rp-org { font-family: var(--sans); font-size: .86rem; color: var(--text); }
.rp-org { margin-top: 3px; }
.rp-note { font-size: .92rem; color: var(--text-2); margin-top: 10px; max-width: 76ch; }
.report-body h2 { font-family: var(--sans); font-size: .8rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--ink);
  border-bottom: 2px solid var(--ink); padding-bottom: 6px; margin: 26px 0 10px; }
.rp-next table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: .84rem; }
.rp-next th { text-align: left; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); padding: 4px 10px 4px 0; border-bottom: 1px solid var(--rule); }
.rp-next td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; line-height: 1.35; }
.rp-date { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
/* An entry may run across a page break: holding each one whole put one program on a page.
   What stays together is a heading with what follows it, and each label with its value. */
.rp-item { padding: 14px 0 16px; border-bottom: 1px solid var(--rule); }
.report-body h2, .rp-item h3, .rp-funder, .rp-sum { break-after: avoid; }
.rp-item h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.rp-funder { font-family: var(--sans); font-size: .84rem; font-weight: 600; color: var(--text-2); }
.rp-sum { margin: 6px 0 8px; font-size: .98rem; }
.rp-item dl { font-family: var(--sans); font-size: .84rem; }
.rp-item dl > div { display: grid; grid-template-columns: 8.2em minmax(0, 1fr); gap: 10px; break-inside: avoid; }
.rp-item dl > div + div { margin-top: 3px; }
.rp-item dt { font-weight: 700; color: var(--text-2); }
.rp-item dd { line-height: 1.42; overflow-wrap: anywhere; }
.rp-item ul { list-style: disc; padding-left: 16px; }
.rp-foot { font-family: var(--sans); font-size: .78rem; color: var(--text-2); margin-top: 22px; }

/* --------------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .bench { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .finder { position: static; max-height: none; }
  .finder .jump { display: inline-flex; }
  .method-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .wrap { padding-inline: 16px; }
  .scope-panel { grid-template-columns: minmax(0, 1fr); padding: 10px 14px 14px; }
  .g { grid-template-columns: 64px minmax(0, 1fr); gap: 4px 14px; }
  .g-save { grid-column: 2; justify-self: start; margin-top: 6px; }
  .w-day { font-size: 1.5rem; }
  .g-facts { grid-template-columns: minmax(0, 1fr); }
  .method-cols { grid-template-columns: minmax(0, 1fr); }
  .take { bottom: 8px; padding: 9px 10px; }
  .take-note { flex-basis: 100%; font-size: .8rem; }
  .take-hint { display: none; }
  .take-btns { width: 100%; }
  .take-btns .btn { flex: 1 1 auto; padding-inline: 8px; min-height: 40px; }
  .take-btns::before { display: none; }
  .report-bar { padding-inline: 16px; }
  .report-body { padding-inline: 16px; }
  .rp-item dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-sweep, .g.flash { animation: none; }
  .sc-dot { transition: none; }
}

/* -------------------------------------------------------------------- print */
@media print {
  @page { margin: 15mm 14mm; }
  /* All three selectors, so a reader in dark mode still prints black on white. */
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] { --paper: #fff; --card: #fff; --panel: #fff; --ink: #111; --text: #1c1c1c;
    --text-2: #4a4a4a; --rule: #bbb; --rule-soft: #ddd; --gold-text: #5d4610; --green-deep: #1c5c48; color-scheme: light; }
  body { background: #fff; font-size: 10pt; }
  body > :not(.report) { display: none !important; }
  .report { display: block !important; min-height: 0; background: #fff; }
  .report-bar { display: none !important; }
  .report-body { max-width: none; padding: 0; }
  .rp-next tr { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* ---- guide ---- */
/* guide.html, and the one link to it in the search page's masthead. Colours and faces come from
   the tokens at the top of this file only, so the light, dark and print sets all apply here. */
.mast-guide { display: inline-block; margin-top: 8px; font-family: var(--sans); font-size: .86rem; font-weight: 700; }
.brand-name a { color: inherit; text-decoration: none; }
.brand-name a:hover { text-decoration: underline; text-decoration-color: var(--green-edge); text-underline-offset: 5px; }

.guide { display: grid; grid-template-columns: minmax(190px, 236px) minmax(0, 1fr); gap: 0 60px; align-items: start; padding-block: 34px 64px; }
.guide-head { grid-column: 1 / -1; padding-bottom: 26px; }
.guide-head h1 { font-family: var(--serif); font-weight: 800; font-size: clamp(1.7rem, 4.2vw, 2.25rem); line-height: 1.08;
  letter-spacing: -.016em; color: var(--ink); text-wrap: balance; }

.guide-toc { position: sticky; top: 16px; font-family: var(--sans); background: var(--panel-2); border: 1px solid var(--rule);
  border-radius: 12px; padding: 16px 18px 18px; }
.guide-toc h2 { font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-text); }
.guide-toc ol { counter-reset: toc; margin-top: 11px; display: flex; flex-direction: column; gap: 9px; }
.guide-toc li { counter-increment: toc; display: grid; grid-template-columns: 1.35em minmax(0, 1fr); font-size: .9rem; line-height: 1.32; }
.guide-toc li::before { content: counter(toc); font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums; }
.guide-toc a { font-weight: 600; color: var(--ink); text-decoration: none; }
.guide-toc a:hover { text-decoration: underline; text-decoration-color: var(--green-edge); }

/* Running text is held near 65 characters a line; the measure is in ch so it follows the type size. */
.guide-body { min-width: 0; max-width: 51ch; counter-reset: sec; overflow-wrap: break-word; }
.guide-body > section { scroll-margin-top: 14px; }
.guide-body > section + section { margin-top: 48px; }
.guide-body h2 { counter-increment: sec; font-family: var(--serif); font-weight: 800; font-size: 1.62rem; line-height: 1.14;
  letter-spacing: -.012em; color: var(--ink); border-top: 2px solid var(--ink); padding-top: 11px; text-wrap: balance; }
.guide-body h2::before { content: counter(sec); display: block; font-family: var(--sans); font-size: .78rem; font-weight: 800;
  letter-spacing: .13em; color: var(--gold-text); margin-bottom: 3px; }
.guide-body h3 { font-family: var(--sans); font-size: 1.03rem; font-weight: 700; line-height: 1.3; color: var(--ink); margin-top: 28px; }
.guide-body p, .guide-body ul, .guide-body ol, .guide-body dl { margin-top: 12px; }
.guide-body h3 + p, .guide-body h3 + ol, .guide-body h3 + dl { margin-top: 8px; }
.guide-body p { text-wrap: pretty; }
.guide-body ul { list-style: disc; padding-left: 1.15em; }
.guide-body li + li { margin-top: 7px; }
.guide-body li::marker { color: var(--text-2); }
.guide-steps { list-style: decimal; padding-left: 1.35em; }
.guide-steps li { padding-left: .25em; }
.guide-steps li::marker { font-family: var(--sans); font-size: .88em; font-weight: 800; color: var(--green-deep); }
.guide-steps strong { font-family: var(--sans); font-size: .94em; font-weight: 700; color: var(--ink); }
/* <b> marks a label quoted from the search page, so it reads as the label and not as the sentence. */
.guide-body b { font-family: var(--sans); font-size: .84em; font-weight: 600; color: var(--ink); background: var(--panel);
  border: 1px solid var(--rule-soft); border-radius: 5px; padding: 1px 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.guide-terms, .guide-tabs { border-top: 1px solid var(--rule); }
.guide-terms > div, .guide-tabs > div { padding: 10px 0; border-bottom: 1px solid var(--rule-soft); }
.guide-terms dt { font-family: var(--sans); font-size: .9rem; font-weight: 700; line-height: 1.35; color: var(--ink); margin-bottom: 2px; }
/* The five words a card's date tab can carry, drawn the way the tab draws them. */
.guide-tabs > div { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: 3px 20px; align-items: baseline; }
.guide-tabs dt { justify-self: start; font-family: var(--sans); font-size: .66rem; font-weight: 800; letter-spacing: .1em; line-height: 1.25;
  text-transform: uppercase; padding: 4px 8px; border: 1px solid var(--green-deep); border-radius: 5px; background: var(--green-deep); color: var(--paper); }
.guide-tabs dt.gt-word { background: var(--card); border-color: var(--rule); color: var(--green-deep); }
.guide-tabs dt.gt-cycle { background: var(--panel); border-color: var(--rule); color: var(--text-2); }

.guide-item { margin-top: 14px; padding: 15px 18px 17px; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; }
.guide-item h3 { margin-top: 0; }
.guide-item p { margin-top: 9px; }
.guide-body .guide-who { display: inline-block; margin-top: 6px; padding: 1px 9px; border: 1px dashed var(--rule); border-radius: 999px;
  font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .03em; line-height: 1.5; color: var(--text-2); }
.guide-note { padding: 11px 15px; background: var(--gold-tint); border: 1px solid var(--gold-edge); border-radius: 10px; color: var(--text); }
.guide-src { font-family: var(--sans); font-size: .82rem; color: var(--text-2); }
.guide-body .guide-src { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--rule-soft); }

/* ------------------------------------------------------- pinned top block */
/* .gr-top is the site header and the title block under it. On a window at least 981px wide
   and 700px tall it stays at the top while the page scrolls under it. 981px is where the
   finder (and the guide's contents box) take their own column and stick; below that the page
   is one column and nothing else is pinned. 700px tall because the block is about 310px at
   desktop widths: in a 700px window it takes 44% and leaves the finder some 360px of its own,
   and in a 600px window it would take more than half. Smaller windows scroll it away as before.
   top-block.js publishes the block's measured height as --gr-top-h and adds
   .gr-top-measured; without the script none of this applies. z-index 16: above the name list
   (15) and the radar tooltip (12), below the skip link (20). Its bottom edge is .mast's
   double rule. */
@media screen and (min-width: 981px) and (min-height: 700px) {
  html.gr-top-measured { scroll-padding-top: calc(var(--gr-top-h) + 12px); }
  html.gr-top-measured .gr-top { position: sticky; top: 0; z-index: 16; background: var(--paper); }
  html.gr-top-measured .finder { top: calc(var(--gr-top-h) + 14px); max-height: calc(100vh - var(--gr-top-h) - 28px); }
  html.gr-top-measured .guide-toc { top: calc(var(--gr-top-h) + 16px); }
}

@media (max-width: 980px) {
  .guide { grid-template-columns: minmax(0, 1fr); padding-block: 26px 48px; }
  .guide-head { padding-bottom: 20px; }
  .guide-toc { position: static; max-width: 51ch; margin-bottom: 34px; }
}
@media (max-width: 640px) {
  .guide-body h2 { font-size: 1.42rem; }
  .guide-item { padding: 13px 14px 15px; }
}
@media print {
  /* The rule above hides everything but the report. On this page the page itself is what prints. */
  body.guide-page > .gr-top, body.guide-page > .guide, body.guide-page > .foot { display: block !important; }
  .guide-toc, .guide-page .mast-guide, .guide-page .foot a { display: none !important; }
  .guide-page .mast-in { padding-block: 0 8pt; }
  .guide { padding-block: 12pt 0; }
  .guide-head { padding-bottom: 6pt; }
  .guide-body { max-width: none; }
  .guide-body > section + section { margin-top: 18pt; }
  .guide-body h2, .guide-body h3 { break-after: avoid; }
  .guide-item, .guide-note, .guide-terms > div, .guide-tabs > div, .guide-body li { break-inside: avoid; }
  .guide-tabs dt { background: none; border-color: var(--rule); color: var(--ink); }
}