/* Data finder. Built on design system v0.4.3 (site/ds): tokens only, no colors of its own. */
.ic { width: var(--size-icon-sm); height: var(--size-icon-sm); flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.small { font-size: var(--text-sm); }
.mono { font-family: var(--font-mono); font-size: var(--text-xs); }
.n { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-weight-medium); padding: 0 var(--space-1); border-radius: var(--radius-full); background: var(--secondary); color: var(--muted-foreground); vertical-align: .15em; margin-left: var(--space-1); }
.linkish { font: inherit; background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-decoration-color: var(--input); text-underline-offset: .22em; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); }
.linkish:hover { color: var(--primary); text-decoration-color: var(--primary); }
.btn .ic { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.btn.is-done { background: var(--success-soft); color: var(--success); border-color: var(--success); }


/* sub navigation inside the finder */
.finder-nav { display: flex; gap: var(--space-1); margin: 0 0 var(--space-6); overflow-x: auto; scrollbar-width: none; border-bottom: var(--border-hairline) solid var(--border); }
.finder-nav::-webkit-scrollbar { display: none; }
.finder-nav a { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--muted-foreground); text-decoration: none; padding: var(--space-2) var(--space-3); border-bottom: 2px solid transparent; margin-bottom: calc(-1 * var(--border-hairline)); white-space: nowrap; transition: color var(--duration-fast) var(--easing-out), border-color var(--duration-fast) var(--easing-out); }
.finder-nav a:hover { color: var(--foreground); }
.finder-nav a[aria-current="page"] { color: var(--foreground); border-bottom-color: var(--foreground); }
/* PR 8 review MF1 and re-check MF1: the four tabs fit a phone. They need 355 px with 8 px side padding, so
   below 414 px they take 4 px (323 px in all, inside the 328 px row at 360 and the 343 px row at 375); below
   360 px they wrap instead of hiding About past the edge. The [href] selector outranks the 420 px rule below. */
@media (max-width: 479.98px) { .finder-nav { gap: 0; } .finder-nav > a[href] { padding-inline: var(--space-2); } }
@media (max-width: 413.98px) { .finder-nav > a[href] { padding-inline: var(--space-1); } }
@media (max-width: 359.98px) { .finder-nav { flex-wrap: wrap; overflow-x: visible; } }

.stale-note { margin: 0 0 var(--space-5); font-size: var(--text-sm); background: var(--warning-soft); border: var(--border-hairline) solid color-mix(in srgb, var(--warning) 35%, transparent); color: var(--foreground); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }



/* hero and search */
.hero { margin-bottom: var(--space-8); }
.hero-small { margin-bottom: var(--space-6); }


.finder-search { display: flex; gap: var(--space-2); align-items: stretch; max-width: 46rem; }
.search-wrap { flex: 1 1 auto; min-width: 0; }
.search-wrap > .search-ic { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.search-wrap .input { width: 100%; padding-right: calc(var(--space-2) + var(--size-control-sm) + var(--space-2)); }
.search-big .input { height: var(--size-control-lg); font-size: var(--text-base); }
.search-wrap .input::-webkit-search-cancel-button { appearance: none; -webkit-appearance: none; }
.search-wrap .input:focus ~ .kbd-hint, .search-wrap .input:not(:placeholder-shown) ~ .kbd-hint { visibility: hidden; }
.search-wrap .q-clear { position: absolute; right: var(--space-1); }
.search-big + .search-go { height: var(--size-control-lg); }
.finder-search .btn { justify-content: center; }
.q-help { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--muted-foreground); }
.examples { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 0; }
.examples-center { justify-content: center; margin: 0 0 var(--space-4); }
.ex-label { font-size: var(--text-sm); color: var(--muted-foreground); margin-right: var(--space-1); }
.ex-chip { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); border: var(--border-hairline) solid var(--border); background: var(--card); color: var(--foreground); text-decoration: none; transition: background-color var(--duration-fast) var(--easing-out), border-color var(--duration-fast) var(--easing-out); }
.ex-chip:hover { background: var(--accent); border-color: var(--input); color: var(--foreground); }

.ex-chip b { font-family: var(--font-mono); font-weight: var(--font-weight-medium); font-size: var(--text-xs); color: var(--muted-foreground); }
.freshness { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-5) 0 0; font-size: var(--text-sm); color: var(--muted-foreground); }
.pulse { width: var(--size-dot); height: var(--size-dot); margin-top: .45em; border-radius: var(--radius-full); background: var(--success); flex-shrink: 0; }
.freshness.is-stale .pulse { background: var(--warning); }

/* home extras */
.stat-grid { list-style: none; margin: 0 0 var(--space-10); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.stat { height: 100%; display: flex; flex-direction: column; gap: var(--space-1); text-decoration: none; color: inherit; background: var(--card); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); transition: background-color var(--duration-fast) var(--easing-out), border-color var(--duration-fast) var(--easing-out); }
.stat:hover { background: var(--accent); border-color: var(--input); color: inherit; }
.stat-num { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); letter-spacing: -.02em; line-height: var(--leading-xl); color: var(--foreground); font-variant-numeric: tabular-nums; }
.stat-label { font-size: var(--text-sm); color: var(--muted-foreground); line-height: var(--leading-sm); }
.block { margin: 0 0 var(--space-10); }
.block-title .ic { display: inline-block; vertical-align: -.15em; margin-right: var(--space-1); }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.steps li { counter-increment: step; position: relative; background: var(--card); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + var(--space-6) + var(--space-3)); color: var(--muted-foreground); font-size: var(--text-sm); }
.steps li::before { content: counter(step); position: absolute; left: var(--space-4); top: var(--space-4); width: var(--space-6); height: var(--space-6); border-radius: var(--radius-full); display: grid; place-items: center; background: var(--secondary); color: var(--foreground); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-weight-medium); }
.steps strong { color: var(--foreground); display: block; }
.topic-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.topic-card { display: flex; flex-direction: column; gap: var(--space-1); height: 100%; padding: var(--space-4); text-decoration: none; color: inherit; background: var(--card); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-lg); transition: background-color var(--duration-fast) var(--easing-out), border-color var(--duration-fast) var(--easing-out); }
.topic-card:hover { background: var(--accent); border-color: var(--input); color: inherit; }
.topic-card strong { font-weight: var(--font-weight-semibold); }
.topic-card span { font-size: var(--text-sm); color: var(--muted-foreground); }
.topic-card em { font-style: normal; font-size: var(--text-xs); color: var(--muted-foreground); margin-top: auto; padding-top: var(--space-1); font-variant-numeric: tabular-nums; }
.more-link { margin: var(--space-4) 0 0; font-size: var(--text-sm); }
.compact-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-6); }
.compact-list li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--border-hairline) solid var(--border); min-width: 0; }
.compact-list li > a { min-width: 0; }
.compact-list .src-badge, .compact-list .mono { flex-shrink: 0; }
.limits { background: var(--card); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5) var(--space-2); }
.limits .block-title { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--space-2); }
.limit-list { margin: 0 0 var(--space-3); padding-left: var(--space-5); color: var(--muted-foreground); font-size: var(--text-sm); }
.limit-list li { margin: 0 0 var(--space-2); }

/* results */

/* PR 8 review SF3: a 17rem rail fits the longest topic chip ("Spending and use of services") on one line. */
.results-layout { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.facets-col { position: sticky; top: calc(var(--size-header) + var(--space-4)); max-height: calc(100vh - var(--size-header) - var(--space-8)); overflow-y: auto; scrollbar-width: thin; padding: 0 var(--space-1) var(--space-2) 0; }
.facets { display: grid; gap: var(--space-5); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--foreground); padding: 0; margin: 0 0 var(--space-2); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.chip-row label { position: relative; cursor: pointer; max-width: 100%; }
.chip-row input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip-row span { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; font-size: var(--text-sm); padding: var(--space-1) var(--space-3); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-full); color: var(--foreground); background: var(--card); transition: border-color var(--duration-fast) var(--easing-out), background-color var(--duration-fast) var(--easing-out); }
.chip-row label:hover span { background: var(--accent); border-color: var(--input); }

.chip-row input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-soft-foreground); }
.chip-row input:focus-visible + span { outline: var(--focus-width) solid var(--ring); outline-offset: var(--focus-offset); }
.chip-row b { font-family: var(--font-mono); font-weight: var(--font-weight-medium); font-size: var(--text-xs); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.chip-row input:checked + span b { color: var(--primary-soft-foreground); }
.chip-row .is-zero span { border-style: dashed; color: var(--muted-foreground); }
.facet-more { font-size: var(--text-sm); margin-top: var(--space-2); color: var(--muted-foreground); }
.filters-btn { display: none; }
.results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-2); }
.result-count { margin: 0; font-size: var(--text-base); font-weight: var(--font-weight-medium); color: var(--muted-foreground); }
.result-count strong { color: var(--foreground); font-variant-numeric: tabular-nums; }
.result-count q { color: var(--foreground); }
.sort { display: inline-flex; flex-direction: row; align-items: center; gap: var(--space-2); }
.sort .field__label { margin: 0; }
.active { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; margin: 0 0 var(--space-2); }
.active:empty { display: none; }
.tag-x { font: inherit; font-size: var(--text-sm); display: inline-flex; align-items: center; gap: var(--space-1); background: var(--primary-soft); color: var(--primary-soft-foreground); border: var(--border-hairline) solid transparent; border-radius: var(--radius-full); padding: var(--space-0-5) var(--space-1) var(--space-0-5) var(--space-3); cursor: pointer; transition: border-color var(--duration-fast) var(--easing-out); }
.tag-x:hover { border-color: var(--primary); }
.tag-x .x { display: inline-grid; place-items: center; width: var(--space-4); height: var(--space-4); border-radius: var(--radius-full); font-size: var(--text-sm); line-height: 1; }
.clear-all { font: inherit; font-size: var(--text-sm); background: none; border: 0; color: var(--muted-foreground); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; padding: var(--space-1) var(--space-1); }
.clear-all:hover { color: var(--primary); }
.notice { margin: 0 0 var(--space-3); font-size: var(--text-sm); background: var(--info-soft); color: var(--foreground); border: var(--border-hairline) solid color-mix(in srgb, var(--info) 30%, transparent); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.result-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.result article, .sk-card article { background: var(--card); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); transition: border-color var(--duration-fast) var(--easing-out); }
.result article:hover, .result article:focus-within { border-color: var(--input); }
.result article:focus-within { border-color: var(--primary); }
.r-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-2); }
.r-title { font-size: var(--text-base); font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-1); line-height: var(--leading-base); }
.r-title a { text-decoration: none; }
.r-title a:hover { text-decoration: underline; }
.r-sum { margin: 0 0 var(--space-2); color: var(--muted-foreground); font-size: var(--text-sm); max-width: none; } /* PR 8 review SF4: one or two sentences use the card width */
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-2); padding: 0; list-style: none; font-size: var(--text-sm); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.mk { font-size: var(--text-xs); color: var(--subtle-foreground); margin-right: var(--space-1); }
.r-cols { max-width: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.col-chip { font-size: var(--text-xs); padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--secondary); color: var(--muted-foreground); max-width: 100%; }
.r-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
mark { background: var(--primary-soft); color: var(--primary-soft-foreground); border-radius: var(--radius-sm); padding: 0 .08em; }
.src-badge { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--font-weight-medium); padding: 0 var(--space-2); border-radius: var(--radius-full); white-space: nowrap; background: var(--secondary); color: var(--foreground); }
.src-badge::before { content: ""; width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-full); background: var(--muted-foreground); }
.src-cms::before { background: var(--info); }
.src-pdc::before { background: var(--success); }
.src-mcd::before { background: var(--warning); }
.pill { display: inline-flex; align-items: center; font-size: var(--text-xs); font-weight: var(--font-weight-medium); padding: 0 var(--space-2); border-radius: var(--radius-full); white-space: nowrap; background: var(--secondary); color: var(--muted-foreground); }
.pill-notes, .pill-state { background: var(--primary-soft); color: var(--primary-soft-foreground); }
.more-wrap { display: flex; justify-content: flex-start; margin: var(--space-4) 0 0; }

/* states */
.sk-list { display: grid; gap: var(--space-3); }
/* The placeholder cards use the real card classes and one bar per line of the card: source badge, title, three summary
   lines, the dates line, a row of column chips and the three buttons, so they match the result cards that replace them (Testingralph SF3). */
/* Each bar takes the font size of the line it stands for and is 1lh tall, so it is as tall as that line at every width
   (phones use a taller line height). */
.sk-list .sk-badge { font-size: var(--text-xs); width: var(--space-16); height: 1lh; }
.sk-list .sk-title { font-size: var(--text-base); line-height: var(--leading-base); width: 60%; height: 1lh; margin-bottom: var(--space-1); }
.sk-list .sk-sum { font-size: var(--text-sm); width: 100%; height: 1lh; }
.sk-list .sk-sum--short { width: 70%; margin-bottom: var(--space-2); }
.sk-list .sk-meta { font-size: var(--text-sm); width: 50%; height: 1lh; margin-bottom: var(--space-2); }
.sk-list .sk-btn { width: calc(2 * var(--space-16)); height: var(--size-control-sm); }
.sk-list .sk-btn--short { width: var(--space-16); }
/* Most searches match a few column names, so the skeleton keeps a row of column chips like the real card. */
.sk-list .sk-chip { font-size: var(--text-xs); width: calc(1.5 * var(--space-16)); height: 1lh; }
.sk-list .sk-btn--short { width: var(--space-16); }
.slow-note:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); max-width: none; margin: 0 0 var(--space-3); font-size: var(--text-sm); line-height: var(--leading-sm); }
.slow-note { margin: 0; font-size: var(--text-sm); }
.empty { border: var(--border-hairline) dashed var(--input); border-radius: var(--radius-lg); background: var(--card); }
.empty-page > .ic { width: var(--size-icon-md); height: var(--size-icon-md); margin: 0 0 var(--space-3); color: var(--muted-foreground); }
.empty-page { padding: var(--space-6); }
.empty-page h1 { margin: 0 0 var(--space-2); }

.empty-page p { margin: 0 0 var(--space-4); color: var(--muted-foreground); }
.empty .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.empty .examples-center { margin: 0 0 var(--space-4); }
.empty-page { margin: var(--space-4) 0 var(--space-8); }
.finder-search-small { margin: 0 0 var(--space-4); max-width: 30rem; }





/* toast and shortcuts */
.copy-toast { position: fixed; left: 50%; bottom: var(--space-6); transform: translateX(-50%); z-index: var(--z-toast); background: var(--popover); color: var(--popover-foreground); border: var(--border-hairline) solid var(--border); box-shadow: var(--shadow-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); font-size: var(--text-sm); max-width: calc(100vw - var(--space-8)); }
.copy-toast:not([hidden]) { display: flex; align-items: flex-start; gap: var(--space-2); width: max-content; }
/* A warning wraps to two lines on a phone, so it takes the card radius instead of the pill. */
.copy-toast[data-kind="warning"] { border-radius: var(--radius-xl); }
.copy-toast__icon { flex: none; margin-block-start: 2px; }
.copy-toast__icon.status--success { color: var(--success); }
.copy-toast__icon.status--warning { color: var(--warning); }
.copy-toast.is-out { opacity: 0; transition: opacity var(--duration-base) var(--easing-out); }
.shortcuts { border: var(--border-hairline) solid var(--border); border-radius: var(--radius-xl); background: var(--popover); color: var(--popover-foreground); box-shadow: var(--shadow-3); padding: var(--space-5) var(--space-6); max-width: min(30rem, calc(100vw - var(--space-8))); }
.shortcuts::backdrop { background: color-mix(in srgb, var(--foreground) 40%, transparent); }
.shortcuts h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); }
.shortcuts dl { margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.shortcuts dl div { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--space-3); align-items: baseline; }
.shortcuts dt { white-space: nowrap; }
.shortcuts dd { margin: 0; color: var(--muted-foreground); font-size: var(--text-sm); }

.site-footer .linkish { color: var(--muted-foreground); }

/* dataset page */
.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--text-sm); color: var(--muted-foreground); margin: 0 0 var(--space-4); }
.crumbs a { color: var(--muted-foreground); }
.ds-head { margin: 0 0 var(--space-6); }
.ds-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-2); }
.ds-title { font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--font-weight-semibold); letter-spacing: -.02em; margin: 0 0 var(--space-2); }
.ds-summary { font-size: var(--text-base); color: var(--muted-foreground); margin: 0 0 var(--space-5); max-width: var(--size-measure); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fresh-card { background: var(--card); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-8); }
.fresh { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-4) var(--space-5); margin: 0; }
.fresh-item { min-width: 0; }
.fresh dt { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--muted-foreground); margin: 0 0 var(--space-1); }
.fresh dt .ic { color: var(--muted-foreground); width: var(--size-icon-xs); height: var(--size-icon-xs); }
.fresh dd { margin: 0; font-size: var(--text-base); font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; }
.rel { display: block; font-size: var(--text-sm); font-weight: 400; color: var(--muted-foreground); }
.rel-late { color: var(--warning); }
.fresh-note { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: var(--border-hairline) solid var(--border); font-size: var(--text-sm); color: var(--muted-foreground); }
.caveats { background: var(--warning-soft); border: var(--border-hairline) solid color-mix(in srgb, var(--warning) 35%, transparent); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5) var(--space-1); color: var(--foreground); }
.caveats .block-title { color: var(--foreground); border-bottom: 0; }
.caveats .block-title .ic { color: var(--warning); }
.caveats ul { margin: 0 0 var(--space-2); padding-left: var(--space-5); }
.caveats li { margin: 0 0 var(--space-2); }
.block-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); border-bottom: var(--border-hairline) solid var(--border); margin: 0 0 var(--space-4); padding-bottom: var(--space-2); }
.block-head .block-title { border: 0; margin: 0; padding: 0; }
.col-filter { flex: 0 1 20rem; min-width: 0; }
.col-filter > .ic { position: absolute; left: var(--space-3); color: var(--muted-foreground); pointer-events: none; }
.col-filter > .col-count { position: absolute; right: var(--space-3); pointer-events: none; }
.col-filter > .input { width: 100%; padding-right: var(--space-16); }

.col-count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-foreground); white-space: nowrap; }
.col-count:empty { display: none; }
.col-note { font-size: var(--text-sm); margin: 0 0 var(--space-3); }
.table-wrap { overflow: auto; border: var(--border-hairline) solid var(--border); border-radius: var(--radius-lg); background: var(--card); max-height: 36rem; }
.cols-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.cols-table th, .cols-table td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3); border-bottom: var(--border-hairline) solid var(--border); }
.cols-table thead th { position: sticky; top: 0; background: var(--muted); font-size: var(--text-xs); font-weight: var(--font-weight-medium); color: var(--muted-foreground); z-index: var(--z-raised); }
.cols-table tbody tr:last-child > * { border-bottom: 0; }
.cols-table tbody tr:hover { background: var(--accent); }
.col-label { font-weight: var(--font-weight-medium); width: 32%; }
.col-plain { display: block; color: var(--foreground); }
.col-name { display: inline-block; margin-top: var(--space-0-5); font-size: var(--text-xs); color: var(--muted-foreground); word-break: break-all; }
.col-meaning { color: var(--muted-foreground); }
.col-type { width: 1%; white-space: nowrap; }
.type-pill { font-family: var(--font-mono); font-size: var(--text-xs); padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--secondary); color: var(--muted-foreground); }
.empty-inline { margin: var(--space-3) 0 0; color: var(--muted-foreground); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-3) var(--space-6); margin: 0; }
.facts div { min-width: 0; }
.facts dt { font-size: var(--text-xs); color: var(--muted-foreground); }
.facts dd { margin: var(--space-0-5) 0 0; overflow-wrap: anywhere; }
.api-row { display: flex; gap: var(--space-2); align-items: flex-start; }
.api-box { flex: 1 1 auto; min-width: 0; margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); background: var(--muted); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); white-space: pre-wrap; word-break: break-all; }
.version-list, .doc-list { list-style: none; margin: 0; padding: 0; }
.version-list li { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: var(--border-hairline) solid var(--border); flex-wrap: wrap; }
.doc-list li { padding: var(--space-1) 0; }
.more-versions summary { cursor: pointer; margin: var(--space-3) 0 var(--space-1); color: var(--foreground); font-weight: var(--font-weight-medium); }
.desc-text { white-space: pre-line; color: var(--muted-foreground); max-width: 50rem; }

/* browse, changes, about */
.toc { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.topic-section { margin: 0 0 var(--space-10); scroll-margin-top: 5.5rem; }
.topic-section h2 { font-size: var(--text-lg); margin: 0 0 var(--space-1); }
.topic-section > p { margin: 0 0 var(--space-3); }
.prose { max-width: 46rem; }
.prose h2 { font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-2); }
.prose p, .prose li { color: var(--muted-foreground); }
.prose .limits { margin-top: var(--space-8); }
.prose .limits h2 { margin: 0 0 var(--space-2); font-size: var(--text-xs); }


@media (max-width: 960px) {
  .results-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .facets-col { position: static; max-height: none; overflow: visible; padding: 0; }
  .filters-btn { display: inline-flex; }
  .filters-btn[aria-expanded="true"] { background: var(--accent); }
  .facets { display: none; margin-top: var(--space-3); padding: var(--space-4); background: var(--card); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-lg); }
  .facets.is-open { display: grid; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .finder-nav { margin-top: calc(-1 * var(--space-1)); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .compact-list { grid-template-columns: minmax(0, 1fr); }
  .kbd-hint { display: none; }
}
@media (max-width: 640px) {
  .finder-search { flex-direction: column; }
  .q-help { margin-left: var(--space-1); }
  .topic-grid { grid-template-columns: minmax(0, 1fr); }
  .result article, .sk-card article { padding: var(--space-3) var(--space-4); }
  /* Phones: the buttons keep their own whole-pixel width instead of stretching to fractions of the row. */
  .r-actions .btn { width: calc-size(fit-content, round(up, size, 1px)); }
  .empty-page { padding: var(--space-6) var(--space-4); }
  /* Phones: dates take two lines, column chips wrap, and the buttons are 32px and wrap to two rows. */
  .sk-list .sk-meta { width: 80%; height: calc(2lh + var(--space-1)); }
  .sk-list .sk-chip { width: 70%; }
  .sk-list .sk-btn { height: var(--size-control-md); }
  .actions .btn { flex: 1 1 calc(50% - .25rem); justify-content: center; padding-left: var(--space-2); padding-right: var(--space-2); }
  .actions .btn:first-child { flex-basis: 100%; }
  .stat { padding: var(--space-3) var(--space-3); }
  .stat-num { font-size: var(--text-xl); }
  .api-row { flex-direction: column; }
  /* columns become cards so nothing scrolls sideways */
  .table-wrap { overflow-x: visible; max-height: none; border: 0; background: none; }
  .cols-table, .cols-table tbody { display: block; }
  .cols-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cols-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-3); margin: 0 0 var(--space-2); background: var(--card); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-lg); }
  .cols-table tbody tr[hidden] { display: none; }
  .cols-table th, .cols-table td { padding: 0; border: 0; }
  .col-label { width: auto; }
  .col-meaning { grid-column: 1 / -1; grid-row: 2; }
  .col-type { grid-column: 2; grid-row: 1; }
  .block-head { flex-direction: column; align-items: stretch; }
  .col-filter { flex-basis: auto; }
}
@media (max-width: 420px) {
  .finder-nav { gap: 0; }
  .finder-nav a { padding: var(--space-2) var(--space-2); font-size: var(--text-sm); }
  .stat-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); }
  .stat-label { font-size: var(--text-sm); }
  .compact-list li { flex-direction: column; gap: var(--space-1); }
}

/* while results show, the hero gets out of the way */
.is-searching .hero { margin-bottom: var(--space-5); }
.is-searching .hero .lede, .is-searching .hero .kicker, .is-searching .q-help { display: none; }
.is-searching .hero .page-title { font-size: var(--text-xl); }
.is-searching .privacy { margin-bottom: var(--space-4); }
.is-searching .freshness { margin-top: var(--space-3); }
@media (max-width: 640px) {
  .search-go { justify-content: center; }
  .is-searching .hero .examples { display: none; }
}

.is-error .sort, .is-error .facets-col, .is-error .filters-btn,
.is-none .sort, .is-none .facets-col, .is-none .filters-btn { display: none; }
.is-error .results-layout, .is-none .results-layout { grid-template-columns: minmax(0, 1fr); }