/* Signal Dark — filters screen styles (P4, epic #1525)
 *
 * Lifted VERBATIM from tests/parity/mockups/pwa-redesign.html <style>.
 * Shared atoms live in signal-dark.css. .fbody, .hdr live in home.css.
 * This file owns filters-specific modules: past searches, presets, brand grid,
 * chip rows, all-filters panel, model picker, and the sticky CTA footer.
 */

/* past-search rows */
.pastrow { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pastrow:last-child { border-bottom: none; }
.pastrow .pi { color: var(--mut2); flex-shrink: 0; }
.pastrow .pt { flex: 1; min-width: 0; }
.pastrow .pt .a { font-weight: 800; font-size: 12px; }
.pastrow .pt .b { font-family: "JetBrains Mono", monospace; font-size: 8px; color: var(--mut2); margin-top: 2px; letter-spacing: .06em; }
.pastrow .pc { font-family: "JetBrains Mono", monospace; font-size: 9.5px; font-weight: 700; color: var(--accT); }

/* quick-start preset grid */
.presets { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 11px 13px; }
.preset { background: var(--card2); outline: 1px solid var(--line2); padding: 10px 11px; cursor: pointer; }
.preset .pn { font-weight: 800; font-size: 12px; display: flex; align-items: center; gap: 7px; }
.preset .pn iconify-icon { color: var(--accT); }
.preset .pd { font-family: "JetBrains Mono", monospace; font-size: 7.5px; color: var(--mut2); margin-top: 3px; letter-spacing: .05em; }

/* brand grid */
/* min-height reserves two rows (the skeleton/visible top-7 + ALL span two rows
   of 36px tiles + 7px gap + 10px padding) so the panel below doesn't jump when
   /api/brands resolves and the real buttons replace the skeleton (CLS). */
.brandgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; padding: 10px 13px; min-height: 99px; }
/* Uniform-size brand buttons: equal min-height + flex-centred text so long
   names (MERCEDES-BENZ, LAND ROVER) wrap centred instead of breaking row
   alignment. position+overflow host the subtle brand-logo background. */
.brand { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 36px; background: var(--card2); outline: 1px solid var(--line2); padding: 6px 4px; text-align: center; font-weight: 800; font-size: 9.5px; letter-spacing: .03em; line-height: 1.12; cursor: pointer; text-transform: uppercase; }
.brand .brand-txt { position: relative; z-index: 1; }
/* brand logo painted subtly behind the text (grayed-out, slightly cropped) */
.brand .brand-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 0; pointer-events: none; color: var(--mut); opacity: .14; }
.brand .brand-bg svg { width: auto; height: 132%; max-width: none; filter: grayscale(1); }
.brand.on .brand-bg { opacity: .10; }
.brand.on { background: var(--accFill); color: var(--acc-ink); outline: none; }
.brand.all { color: var(--accT); background: transparent; outline: 1px dashed var(--line2); }
/* Folded long-tail bucket (#1637) — a distinct dashed tile reading as a group,
   not a single brand. Selecting it searches across every folded make. */
.brand.other { color: var(--mut); background: transparent; outline: 1px dashed var(--line2); }
.brand.other.on { color: var(--acc-ink); background: var(--accFill); outline: none; }
.brand .brand-c { font-weight: 700; opacity: .65; margin-left: 3px; font-variant-numeric: tabular-nums; }
.brand:focus-visible { outline: 2px solid var(--accT); outline-offset: 1px; }
/* Skeleton brand tiles shown while /api/brands is in flight. Same .brand box
   metrics (min-height 36px) so swapping in the real buttons doesn't reflow the
   panel (CLS). A faint pulse signals "loading" without a spinner. */
.brand.skel { background: var(--card2); outline: 1px solid var(--line2); cursor: default; pointer-events: none; animation: brand-skel-pulse 1.1s ease-in-out infinite; }
@keyframes brand-skel-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .brand.skel { animation: none; opacity: .55; } }

/* expanded all-brands grid — same columns, flush under the initial grid */
.brand-all-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; padding: 0 13px 10px; }
/* Explicit display above beats the UA [hidden] default, so the collapse needs
   its own hidden rule — without it, "LESS" couldn't hide the expanded grid. */
.brand-all-grid[hidden] { display: none; }
.brand-all-grid .brand { /* inherits .brand above */ }

/* chip row (budget / year / body / fuel / gearbox / model) */
.chiprow { display: flex; gap: 7px; padding: 11px 13px; flex-wrap: wrap; }
/* CLS: async-populated chip rows (model cascades from brand; the facet dims +
   generation rows re-render from /api/facets + /api/generations) start empty
   and fill after a round-trip. Reserve one chip-row's height so the section —
   and the panel below it — doesn't jump when the chips arrive. min-height
   covers a single 31px chip (7px padding top/bottom + 17px line). */
#model-chips, #generation-chips,
#engine-chips, #gearbox-chips, #fuel-chips,
#body-chips, #mileage-chips, #seller-chips { min-height: 31px; }
.chip { font-family: "JetBrains Mono", monospace; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; padding: 7px 12px; background: var(--card2); color: var(--mut); outline: 1px solid var(--line2); cursor: pointer; }
.chip.on { background: var(--accFill); color: var(--acc-ink); outline: none; }
/* Semantic fuel coloring (owner request): a selected hybrid option → green,
   electric → blue, overriding the theme accent. Applies to fuel/engine chips
   with EV/hybrid keys and to the model chip when an EV/hybrid fuel is active.
   Explicit hex (not theme tokens) so the semantics read the same in both themes. */
.chip.on.is-hybrid   { background: #1f9d57; color: #fff; outline: none; }
.chip.on.is-electric { background: #2f6bff; color: #fff; outline: none; }
.chip:focus-visible { outline: 2px solid var(--accT); outline-offset: 1px; }

/* Tag chips — MULTI-select description signals. Off-state is the standard chip;
   the selected state is semantically coloured (explicit hex, theme-independent,
   mirroring the tma.html monolith's #chips-tags active colours) so several
   selected tags stay individually legible instead of a wall of one accent.
   Categories: good=lime · ok=green · info=teal · warn=amber · swap=blue ·
   fresh=indigo · pop=rose · repost=orange. */
.tag-chip.on { color: #fff; outline: none; }
.tag-chip.on.t-good   { background: #79922b; color: #10130a; }
.tag-chip.on.t-ok     { background: #1f9d57; }
.tag-chip.on.t-info   { background: #0f9b8e; }
.tag-chip.on.t-warn   { background: #b8801f; }
.tag-chip.on.t-swap   { background: #2f6bff; }
.tag-chip.on.t-fresh  { background: #5b5fe0; }
.tag-chip.on.t-pop    { background: #d6446a; }
.tag-chip.on.t-repost { background: #d97a1f; }

/* all-filters toggle button */
.morefilters { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 18px 0; padding: 11px 0; background: none; border: 1px dashed var(--line2); color: var(--mut); font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 700; letter-spacing: .12em; cursor: pointer; text-transform: uppercase; width: calc(100% - 36px); }
.morefilters.open { border-color: var(--accT); color: var(--accT); }
.morefilters:focus-visible { outline: 2px solid var(--accT); outline-offset: 1px; }

/* active-filter badge on the "All filters" button */
.af-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accFill); color: var(--acc-ink); font-size: 9px; font-weight: 800; letter-spacing: 0; }

/* all-filters expandable panel */
.allfilters-panel { margin: 0 18px; border: 1px solid var(--line); border-top: none; background: var(--card); }
.allfilters-panel[hidden] { display: none; }

/* individual section within the panel */
.af-section { border-bottom: 1px solid var(--line); }
.af-section:last-child { border-bottom: none; }
.af-label { font-family: "JetBrains Mono", monospace; font-size: 8.5px; color: var(--mut2); letter-spacing: .16em; text-transform: uppercase; padding: 9px 13px 4px; }
.af-label-hint { font-size: 8px; color: var(--mut2); letter-spacing: .05em; opacity: .7; text-transform: none; }
.af-chips { padding-top: 0; }

/* sticky CTA footer — Clear all · Show N · alert bell */
.fcta { display: flex; gap: 10px; padding: 14px 18px; margin-top: auto; background: linear-gradient(180deg, transparent, var(--bg) 35%); }
.fcta .btn.p { flex: 1; }
.fcta .btn.s { flex: 0 0 56px; }
/* "Clear all" — a compact ghost button next to the primary CTA. Resets every
   filter to defaults (defaultState) and refreshes the count. Mono so it reads
   as a utility control, not a primary action. */
.fcta .btn.g { flex: 0 0 auto; gap: 5px; padding-left: 13px; padding-right: 13px; background: transparent; color: var(--mut); outline: 1px solid var(--line2); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .1em; }
.fcta .btn.g:hover { color: var(--text); }
.fcta .btn.g:focus-visible { outline: 2px solid var(--accT); outline-offset: 1px; }
.fcta .btn.g iconify-icon { flex-shrink: 0; }
/* CLS: the "Show N cars" count starts as "…" then becomes a number from the
   facets total. Reserve a min width + centre it so the surrounding label text
   doesn't shift when the count lands. */
#cta-count { display: inline-block; min-width: 2.2em; text-align: center; }

/* section shared override for filters */
.sect { margin: 14px 18px 0; background: var(--card); border: 1px solid var(--line); }
.sect .shd { display: flex; justify-content: space-between; align-items: center; font-family: "JetBrains Mono", monospace; font-size: 8.5px; color: var(--mut2); letter-spacing: .16em; text-transform: uppercase; padding: 9px 13px 8px; border-bottom: 1px solid var(--line); }
.sect .shd b { color: var(--accT); }
/* P5: quick-filters hide/show toggle, model "select a brand first" hint,
   and the "everything else — coming soon" note. */
.sect .shd .shd-act { cursor: pointer; color: var(--accT); }
.sect .shd .shd-act:focus-visible { outline: 2px solid var(--accT); outline-offset: 2px; }
.sect .shd .shd-hint { font-weight: 400; font-size: 8px; color: var(--mut2); letter-spacing: .05em; opacity: .7; text-transform: none; }
.af-soon { display: flex; align-items: center; gap: 6px; padding: 6px 13px 11px; font-family: "JetBrains Mono", monospace; font-size: 8px; color: var(--mut2); letter-spacing: .08em; opacity: .65; text-transform: uppercase; }

/* Show sold/removed — SD toggle switch (#1637 / monolith show_old_results parity) */
.af-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px 4px; cursor: pointer; -webkit-user-select: none; user-select: none; }
.af-toggle-lab { display: flex; align-items: center; gap: 6px; font-family: "JetBrains Mono", monospace; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; color: var(--text); text-transform: uppercase; }
.af-toggle-lab .af-i { color: var(--mut); }
.af-switch { position: relative; flex-shrink: 0; width: 34px; height: 18px; border-radius: 9px; background: var(--card2); outline: 1px solid var(--line2); transition: background .15s ease; }
.af-switch .af-knob { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--mut); transition: transform .15s ease, background .15s ease; }
.af-switch.on { background: var(--accFill); outline: none; }
.af-switch.on .af-knob { transform: translateX(16px); background: var(--acc-ink); }
.af-toggle-row:focus-visible { outline: 2px solid var(--accT); outline-offset: 2px; }
.af-toggle-hint { font-size: 8px; color: var(--mut2); letter-spacing: .04em; padding: 0 13px 10px; opacity: .8; }

/* filter-section NAME in the accent colour for visibility (owner request) */
.sect .shd > span:first-child,
.sect .shd > span:first-child .shd-i { color: var(--accT); }
/* collapsible filter drawers — clickable header + a +/- glyph top-right */
.sect[data-collapse] .shd { cursor: pointer; position: relative; padding-right: 34px; }
.sect[data-collapse] .shd::after { content: "−"; position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--accT); font-weight: 700; font-size: 16px; line-height: 1; }
.sect[data-collapse].collapsed .shd::after { content: "+"; }
.sect[data-collapse] .shd:focus-visible { outline: 2px solid var(--accT); outline-offset: -2px; }
.sect.collapsed > :not(.shd) { display: none; }
/* selected-value summary in a (collapsed) section header — Brand-style "BMW"
   badge, now shown for every collapsible section (owner request). Inherits the
   accent colour + uppercase mono from `.sect .shd`; clamps long values. */
.sect .shd b.shd-sum { max-width: 56%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
/* Always-visible From/To min-max range under the Year and Budget preset chips
   (no "Custom" chip — typing a value IS the custom selection). .budget-custom
   reuses the identical .yc-in / .yc-dash inner markup as Year. */
.year-custom, .budget-custom { display: flex; align-items: center; gap: 8px; padding: 2px 13px 11px; }
.year-custom .yc-in, .budget-custom .yc-in { flex: 1 1 0; min-width: 0; background: var(--card2); color: var(--text); border: none; outline: 1px solid var(--line2); border-radius: 7px; font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 8px 10px; -moz-appearance: textfield; appearance: textfield; }
.year-custom .yc-in::placeholder, .budget-custom .yc-in::placeholder { color: var(--mut2); font-weight: 400; letter-spacing: .06em; }
.year-custom .yc-in:focus, .budget-custom .yc-in:focus { outline: 1.5px solid var(--accT); }
.year-custom .yc-in::-webkit-outer-spin-button,
.year-custom .yc-in::-webkit-inner-spin-button,
.budget-custom .yc-in::-webkit-outer-spin-button,
.budget-custom .yc-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.year-custom .yc-dash, .budget-custom .yc-dash { color: var(--mut2); font-weight: 700; flex: 0 0 auto; }

/* ── #1601: section-header + chip icons, facet counts, cascade hint ──────── */
/* header icons (.shd span / .af-label) — align glyph with the label text */
.sect .shd span { display: inline-flex; align-items: center; gap: 6px; }
.af-label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.shd-i, .af-i { color: var(--mut2); flex-shrink: 0; }

/* chips now carry a leading icon + an optional ` · count` */
.chip { display: inline-flex; align-items: center; gap: 5px; }
.chip-i { flex-shrink: 0; opacity: .8; }
.chip.on .chip-i { opacity: 1; }
.chip-c { font-size: 8.5px; font-weight: 700; opacity: .72; }   /* dims vs currentColor — works in both themes + on/off; .72 keeps the count legible (a11y) */

/* "only available options" cascade hint */
.af-hint { display: flex; align-items: center; gap: 5px; font-family: "JetBrains Mono", monospace; font-size: 8px; color: var(--mut2); letter-spacing: .08em; padding: 8px 13px; border-bottom: 1px solid var(--line); }
.af-hint[hidden] { display: none; }
.af-hint iconify-icon { color: var(--accT); flex-shrink: 0; }

/* ── #1601: subtle per-section background iconography ────────────────────── *
 * A faint large glyph behind each filter section. Theme-safe: the glyph is a
 * `mask-image` (alpha only) painted with `background-color: var(--mut2)`, so it
 * follows the active theme instead of baking a fill. Section content sits on
 * z-index:1 (chips have their own opaque card2 background) so text contrast is
 * unaffected — the motif only tints the empty card area. */
.m-brand, .m-budget, .m-body, .m-fuel, .m-gearbox, .m-engine, .m-model, .m-tags { position: relative; overflow: hidden; }
.m-brand > *, .m-budget > *, .m-body > *, .m-fuel > *, .m-gearbox > *, .m-engine > *, .m-model > *, .m-tags > * { position: relative; z-index: 1; }
.m-brand::before, .m-budget::before, .m-body::before, .m-fuel::before, .m-gearbox::before, .m-engine::before, .m-model::before, .m-tags::before {
  content: ""; position: absolute; right: -14px; bottom: -18px; width: 96px; height: 96px;
  pointer-events: none; z-index: 0; background-color: var(--mut2); opacity: .05;
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
  mask-repeat: no-repeat; mask-position: center; mask-size: contain;
}
.m-brand::before   { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M3 13l2-5h14l2 5v4h-2v-2H5v2H3z'/><circle cx='7' cy='15' r='2'/><circle cx='17' cy='15' r='2'/></svg>");   mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M3 13l2-5h14l2 5v4h-2v-2H5v2H3z'/><circle cx='7' cy='15' r='2'/><circle cx='17' cy='15' r='2'/></svg>"); }
.m-budget::before  { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M3 7h15a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a1 1 0 0 1-1-1z'/></svg>");   mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M3 7h15a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a1 1 0 0 1-1-1z'/></svg>"); }
.m-body::before    { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M3 14l2-6h14l2 6v3h-2v-2H5v2H3z'/><circle cx='7' cy='15.5' r='1.8'/><circle cx='17' cy='15.5' r='1.8'/></svg>");   mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M3 14l2-6h14l2 6v3h-2v-2H5v2H3z'/><circle cx='7' cy='15.5' r='1.8'/><circle cx='17' cy='15.5' r='1.8'/></svg>"); }
.m-fuel::before    { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M12 3c4 5 6 7 6 10a6 6 0 0 1-12 0c0-3 2-5 6-10z'/></svg>");   mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M12 3c4 5 6 7 6 10a6 6 0 0 1-12 0c0-3 2-5 6-10z'/></svg>"); }
.m-gearbox::before { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='5'/><rect x='11' y='2' width='2' height='4'/><rect x='11' y='18' width='2' height='4'/><rect x='2' y='11' width='4' height='2'/><rect x='18' y='11' width='4' height='2'/></svg>");   mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='5'/><rect x='11' y='2' width='2' height='4'/><rect x='11' y='18' width='2' height='4'/><rect x='2' y='11' width='4' height='2'/><rect x='18' y='11' width='4' height='2'/></svg>"); }
.m-engine::before  { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4' y='9' width='12' height='7' rx='1'/><rect x='8' y='6' width='4' height='3'/><rect x='16' y='11' width='4' height='4'/><rect x='3' y='7' width='3' height='2'/></svg>");   mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4' y='9' width='12' height='7' rx='1'/><rect x='8' y='6' width='4' height='3'/><rect x='16' y='11' width='4' height='4'/><rect x='3' y='7' width='3' height='2'/></svg>"); }
.m-model::before   { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4' y='6' width='16' height='2.4'/><rect x='4' y='11' width='16' height='2.4'/><rect x='4' y='16' width='16' height='2.4'/></svg>");   mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4' y='6' width='16' height='2.4'/><rect x='4' y='11' width='16' height='2.4'/><rect x='4' y='16' width='16' height='2.4'/></svg>"); }
.m-tags::before    { -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M10 3H4a1 1 0 0 0-1 1v6l9 9 7-7-9-9zM6.5 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/></svg>");   mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M10 3H4a1 1 0 0 0-1 1v6l9 9 7-7-9-9zM6.5 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/></svg>"); }