/* The ad-evidence checkboxes read as chips in the same family as the
   shortlist tabs and the Brand name/Category/Payment model row above them —
   no grey panel, no legend, no lead paragraph. The explanation moved to a
   footnote below the results (see .evidence-footnote). */
.evidence-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.evidence-chip{display:inline-flex;align-items:center;gap:7px;min-height:44px;
  padding:9px 14px;border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--pane);color:var(--ink);font-size:14px;font-weight:650;cursor:pointer}
.evidence-chip input{width:16px;height:16px;accent-color:var(--violet-fill);flex:none}
.evidence-chip:has(input:checked){background:var(--violet-fill);color:#fff;border-color:var(--violet-fill)}
/* A single small footnote, not a panel: the dated coverage line plus the
   "how these are measured" disclosure, reserving two lines so the text
   growing from "Loading…" into a full sentence never shifts the page. */
.evidence-footnote{margin:14px 0 0;min-height:58px}
.evidence-footnote p{margin:0;max-width:70ch;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.evidence-definitions{width:100%;font-size:12.5px;line-height:1.45;color:var(--ink-2);margin-top:4px}
.evidence-definitions summary{cursor:pointer;font-weight:650;color:var(--ink);list-style:none}
.evidence-definitions summary::-webkit-details-marker{display:none}
.evidence-definitions summary::after{content:" \25b8";display:inline-block;transition:transform .15s}
.evidence-definitions[open] summary::after{transform:rotate(90deg)}
.evidence-definitions ul{margin:7px 0 0;padding-left:19px}.evidence-definitions li+li{margin-top:3px}
.result-evidence{grid-column:1/-1;display:flex;flex-direction:column;align-items:start;gap:5px;color:var(--ink);font-size:14px;line-height:1.45;text-decoration:none}.result-evidence strong{font-weight:600}.result-evidence span{color:var(--ink-2)}.result-evidence:hover strong{text-decoration:underline;text-underline-offset:3px}

/* Phones: the four evidence filters scroll sideways in one row instead of stacking. */
@media(max-width:700px){.evidence-chips{flex-wrap:nowrap;overflow-x:auto;gap:8px;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.evidence-chips::-webkit-scrollbar{display:none}.evidence-chips>.evidence-chip{flex:none;white-space:nowrap}.evidence-chips .filter-reset{flex:none;margin-left:0}
.shortlist-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.shortlist-tabs::-webkit-scrollbar{display:none}.shortlist-tabs>*{flex:none;white-space:nowrap}}
/* Design batch 1: DESIGN.md's five shortlists lead one tab row that never
   wraps; the unlisted-brands link sits at its end as a quieter extra. */
#shortlist-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:4px}
#shortlist-tabs::-webkit-scrollbar{display:none}
#shortlist-tabs>*{flex:none;white-space:nowrap}
#shortlist-tabs>button{padding-inline:13px}
#shortlist-tabs>.tab-link{margin-left:auto;font-weight:500}
/* /brands tidy (owner, 10-24): the main row is Brand name, Category, Sort;
   Payment model waits under "More filters"; the market is a chip switch. */
@media(min-width:701px){#main .finder{grid-template-columns:minmax(220px,2fr) repeat(2,minmax(170px,1fr))}}
/* A hidden chip keeps its place in the row: "Pays for images" ships hidden
   and brands.js shows it once the catalogue has loaded, and it hides the
   market switch for an edition without program currencies. Taking or giving
   back a chip's space then would move the list (on phones the chips wrap,
   so "Pays for images" added a second line above it: layout shift, 10-24).
   Invisible, it cannot be clicked, focused or read out. */
#evidence-filters>.evidence-chip[hidden]{display:inline-flex!important;visibility:hidden}
/* An edition with no program currency: the edge ships the market switch collapsed (lib/brands-first-page.js),
   known before the first paint, so no blank slot. */
#evidence-filters>.evidence-chip[data-collapsed]{display:none!important}
/* A name search already looks in every market (and an older edition without currencies always shows every
   market), so the switch is shown off; for a search, with a line under the chips. */
.evidence-chip:has(input:disabled){cursor:default;color:var(--ink-2);background:transparent;border-style:dashed}
.evidence-chip:has(input:disabled):hover{transform:none}
.market-hint{margin:-12px 0 12px;font-size:13px;line-height:1.45;color:var(--ink-2)}
.market-hint[hidden]{display:none}
.more-filters{margin:-6px 0 12px}
.more-filters>summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;border-radius:var(--r-sm);color:var(--violet);font-size:14px;font-weight:650;cursor:pointer;list-style:none}
.more-filters>summary::-webkit-details-marker{display:none}
.more-filters>summary::after{content:'';width:7px;height:7px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin-top:-4px;transition:transform .15s}
.more-filters[open]>summary::after{transform:rotate(-135deg);margin-top:3px}
.more-filters>summary:hover{text-decoration:underline;text-underline-offset:3px}
.more-filters>summary:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.more-filters-body{display:grid;grid-template-columns:minmax(0,300px);gap:12px;padding:4px 0 6px}
.more-filters-body label{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:14px;color:var(--ink)}
.more-filters-body select{width:100%;min-width:0;height:46px;padding:10px 12px;background:var(--pane);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-sm);font-size:15px}
@media(max-width:700px){.more-filters-body{grid-template-columns:minmax(0,1fr)}}
/* Two chips now: on phones they wrap rather than hide one behind a sideways scroll. */
@media(max-width:700px){#evidence-filters{flex-wrap:wrap;overflow-x:visible}}