/*
   * Listing filters — the shared filter bar and results surface that sits under
   * each listing hero (energy sectors, articles, research, events). Version 2:
   * one control family (40 px, radius 10–12, soft fills, no outlines), a tab
   * strip for the primary facet, a quiet count, joined Filters / Sort menus and
   * an active-filter row that only appears when a filter is on.
   *
   * Loaded by partials/listing/results.blade.php through Asset::url() and kept
   * apart from mainstyle.css so a customised Theme "main" record cannot drop it.
   * Plain CSS, no preprocessor, no @import. Colours derive from the :root tokens
   * in mainstyle.css (literal fallbacks included) via the --lf-* properties on
   * .lf. Gold is the tab indicator and small accents only; gold *text* on white
   * uses --lf-gold-text (#8a6800, 5.2:1).
   *
   * Conventions: logical properties throughout (ku/ar render RTL, and
   * fonts-arabic.css overrides font-family and letter-spacing with !important,
   * so nothing here depends on tracking or a Latin face); 40 px controls with
   * 44 px targets on touch; navy :focus-visible rings; every animation and
   * transition is switched off under prefers-reduced-motion at the end.
   *
   * Stacking (the bar at 100 matches .section-nav): bar 100 → menus 110 →
   * suggestions 120 → sheet scrim 1499 → sheet 1500. The bar is a stacking
   * context, so the scrim is inserted inside .lf-filters, next to the sheet.
   *
   * Classes only the client script (listing-filters.js) adds — the partials do
   * not render them: is-stuck / is-loading / is-done (bar), is-overflowing
   * (tab strip), has-ink + .lf-ink (tab group), is-pressed (tab / segment),
   * has-value (search), is-updating / is-fresh (results), is-ticking (count),
   * lf-sheet + lf-sheet-handle / lf-sheet-head / lf-sheet-title /
   * lf-sheet-reset / lf-sheet-close / lf-sheet-scrim (mobile sheet),
   * html.lf-lock (scroll lock), lf-suggest-item / lf-suggest-kind, lf-notice,
   * and the per-card --lf-i stagger index.
   */

/* ── Tokens ──────────────────────────────────────────────────────────── */
.lf {
    --lf-navy: var(--navy, #172b54); --lf-navy-hover: #0f1f45; --lf-gold: var(--gold, #c99700);
    --lf-gold-text: #8a6800; --lf-gold-tint: #fdf1c7; --lf-white: var(--white, #ffffff);
    --lf-off-white: var(--off-white, #f7f6f2); --lf-ink: #0f1b33; --lf-text: var(--text, #1a1a1a);
    --lf-muted: #5b6475; --lf-soft: #f3f5f9; --lf-soft-hover: #e6eaf2; --lf-soft-press: #d9dfeb;
    --lf-hairline: rgba(23, 43, 84, 0.10); --lf-hairline-soft: rgba(23, 43, 84, 0.08);
    --lf-divider: rgba(23, 43, 84, 0.14); --lf-disabled-text: #9aa3b2; --lf-ring: rgba(23, 43, 84, 0.18);
    --lf-amber-text: #9a4a00; --lf-amber-bg: #fff7e6; --lf-amber-border: #f0d9a8;
    --lf-shadow-bar: 0 1px 2px rgba(15, 27, 51, 0.04);
    --lf-shadow-stuck: 0 8px 24px -12px rgba(15, 27, 51, 0.18);
    --lf-shadow-pop: 0 24px 60px -16px rgba(15, 27, 51, 0.35), 0 0 0 1px rgba(23, 43, 84, 0.08);
    --lf-shadow-thumb: 0 1px 3px rgba(15, 27, 51, 0.16), 0 0 0 1px rgba(23, 43, 84, 0.06);
    --lf-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --lf-fast: 0.15s;
}

/* Form controls inherit the page face so the Arabic override and Geist both
   reach them; browsers otherwise give buttons and selects a system font. Colour
   is left to each control: an inherited colour here would outrank the primary
   button's white text (this selector is more specific than .lf-btn--primary). */
.lf button,
.lf input,
.lf select,
.lf summary {
    font-family: inherit; font-size: inherit; line-height: inherit;
}

.lf a, .lf button, .lf summary, .lf label { -webkit-tap-highlight-color: transparent; }

.lf-sr {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── The control family ──────────────────────────────────────────────── */
.lf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px;
    padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--lf-navy);
    font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
    cursor: pointer; user-select: none;
    transition: background-color var(--lf-fast), color var(--lf-fast), transform 0.1s;
}

.lf-btn:active { transform: scale(0.98); }
.lf-btn--soft { background: var(--lf-soft); }
.lf-btn--soft:hover { background: var(--lf-soft-hover); }
.lf-btn--primary, .lf .lf-btn--primary { background: var(--lf-navy); color: var(--lf-white); }
.lf-btn--primary:hover { background: var(--lf-navy-hover); }
.lf-btn--ghost { color: var(--lf-muted); padding: 0 12px; }
.lf-btn--ghost:hover { background: var(--lf-soft); color: var(--lf-navy); }
.lf-chevron { flex: none; transition: transform 0.2s var(--lf-ease); }

/* ── Bar ─────────────────────────────────────────────────────────────── */
.lf-bar {
    position: sticky; top: 0; z-index: 100; background: var(--lf-white);
    border-bottom: 1px solid var(--lf-hairline); box-shadow: var(--lf-shadow-bar);
    transition: box-shadow 0.2s ease;
}

.lf-bar.is-stuck { box-shadow: var(--lf-shadow-stuck); }

/* Raise the whole bar above any positioned header while the sheet is open. */
.lf-bar:has(.lf-filters.lf-sheet[open]) { z-index: 1500; }
.lf-bar form { display: flex; flex-direction: column; }

/* Fetch progress: a 2 px gold line along the bar's top edge. */
.lf-progress {
    position: absolute; top: 0; inset-inline: 0; height: 2px; background: var(--lf-gold);
    transform: scaleX(0); transform-origin: left center; opacity: 0; pointer-events: none;
}

[dir="rtl"] .lf-progress { transform-origin: right center; }

.lf-bar.is-loading .lf-progress {
    opacity: 1; transform: scaleX(0.85);
    transition: transform 1.2s cubic-bezier(0.1, 0.6, 0.2, 1), opacity 0.1s;
}

.lf-bar.is-done .lf-progress {
    opacity: 0; transform: scaleX(1); transition: transform 0.18s ease-out, opacity 0.3s ease 0.18s;
}

/* ── Row 1: the tab strip ────────────────────────────────────────────── */
.lf-tabs {
    display: flex; align-items: center; gap: 16px; min-height: 52px;
    border-bottom: 1px solid var(--lf-hairline-soft); overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding-inline: 28px;
}

.lf-tabs::-webkit-scrollbar { display: none; }
.lf-tabs > * { flex: none; }

/* Only once the strip overflows (the script checks) does it bleed past the
   container with 28 px fades at both ends; the mask is symmetric, so RTL
   needs no extra rule. */
.lf-tabs.is-overflowing {
    margin-inline: -28px; padding-inline: 28px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

.lf-chips { position: relative; display: flex; align-items: stretch; gap: 4px; min-height: 52px; }

.lf-chip {
    position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px;
    color: var(--lf-muted); font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap;
    text-decoration: none; cursor: pointer; transition: color var(--lf-fast), transform 0.1s;
}

/* .lf-chip--all ("All …") shares every .lf-chip rule and carries no extras. */
.lf-chip:hover { color: var(--lf-navy); }
.lf-chip[aria-pressed="true"] { color: var(--lf-navy); font-weight: 600; }
.lf-chip[aria-disabled="true"] { color: var(--lf-disabled-text); }
.lf-chip:active, .lf-chip.is-pressed, .lf-seg:active, .lf-seg.is-pressed { transform: scale(0.98); }

/* The indicator: a static underline on the pressed tab; once the script has
   added .lf-ink the underline hides and the ink slides instead. */
.lf-chip[aria-pressed="true"]::after {
    content: ""; position: absolute; inset-inline: 12px; bottom: -1px; height: 2px;
    border-radius: 2px 2px 0 0; background: var(--lf-gold);
}

.lf-chips.has-ink .lf-chip::after { display: none; }

.lf-ink {
    position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; border-radius: 2px 2px 0 0;
    background: var(--lf-gold); pointer-events: none; opacity: 0;
}

.lf-chips.has-ink .lf-ink { opacity: 1; }
.lf-chips.is-ready .lf-ink { transition: transform 0.22s var(--lf-ease), width 0.22s var(--lf-ease); }

/* Counts: a plain muted number everywhere, a badge on the tabs. */
.lf-count { color: var(--lf-muted); font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; }

.lf-chip .lf-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px;
    padding: 0 6px; border-radius: 999px; background: var(--lf-soft); font-size: 11px; font-weight: 600;
    transition: background-color var(--lf-fast), color var(--lf-fast);
}

.lf-chip[aria-pressed="true"] .lf-count { background: var(--lf-navy); color: var(--lf-white); }
.lf-chip[aria-disabled="true"] .lf-count { color: inherit; }

/* Event-type colour dot, painted inline by the partial. */
.lf-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }

/* Segment (events "when"): a soft track with a white sliding thumb. */
.lf-segment {
    display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 10px;
    background: var(--lf-soft);
}

.lf-seg {
    display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 7px;
    color: var(--lf-muted); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
    text-decoration: none; transition: background-color var(--lf-fast), color var(--lf-fast), box-shadow var(--lf-fast), transform 0.1s;
}

.lf-seg:hover { color: var(--lf-navy); }
.lf-seg[aria-pressed="true"] { background: var(--lf-white); color: var(--lf-navy); box-shadow: var(--lf-shadow-thumb); }

.lf-segment + .lf-chips { padding-inline-start: 16px; }

.lf-segment + .lf-chips::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 50%; width: 1px; height: 24px;
    transform: translateY(-50%); background: var(--lf-divider);
}

/* ── Row 2: search, count, menus ─────────────────────────────────────── */
.lf-tools { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.lf-search { position: relative; flex: 0 1 360px; min-width: 200px; }

.lf-search input {
    width: 100%; height: 40px; padding-block: 0; padding-inline: 38px 40px; border: 0;
    border-radius: 12px; background: var(--lf-soft); color: var(--lf-ink); font-size: 14px;
    appearance: none; -webkit-appearance: none;
    transition: background-color var(--lf-fast), box-shadow var(--lf-fast);
}

.lf-search input::-webkit-search-decoration,
.lf-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.lf-search input::placeholder { color: #7a8291; opacity: 1; }
.lf-search input:focus { outline: none; background: var(--lf-white); box-shadow: 0 0 0 3px var(--lf-ring); }

/* inset-inline-start already swaps the icon to the right under RTL; the
   magnifier handle is mirrored too so it reads as "drawn for" that side. */
.lf-search-icon {
    position: absolute; top: 50%; inset-inline-start: 14px; transform: translateY(-50%);
    color: var(--lf-muted); pointer-events: none;
}

[dir="rtl"] .lf-search-icon { transform: translateY(-50%) scaleX(-1); }

.lf-search-clear {
    position: absolute; top: 50%; inset-inline-end: 9px; display: inline-flex; align-items: center;
    justify-content: center; width: 22px; height: 22px; padding: 0; transform: translateY(-50%);
    border: 0; border-radius: 50%; background: var(--lf-soft-hover); color: var(--lf-muted);
    cursor: pointer; transition: background-color var(--lf-fast), color var(--lf-fast);
}

.lf-search-clear:hover { background: var(--lf-soft-press); color: var(--lf-ink); }
.lf-search-clear[hidden] { display: none; }

/* "/" shortcut hint; gone on touch, while typing, and when a value is set. */
.lf-kbd {
    position: absolute; top: 50%; inset-inline-end: 10px; display: inline-flex; align-items: center;
    justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
    transform: translateY(-50%); border-radius: 6px; background: var(--lf-white);
    box-shadow: inset 0 0 0 1px rgba(23, 43, 84, 0.12); color: #7a8291; font-family: inherit;
    font-size: 11px; font-weight: 500; line-height: 1; pointer-events: none;
}

.lf-search input:focus ~ .lf-kbd,
.lf-search input:not(:placeholder-shown) ~ .lf-kbd,
.lf-search.has-value .lf-kbd {
    display: none;
}

@media (hover: none) {
    .lf-kbd { display: none; }
}

/* Suggestions listbox under the input */
.lf-suggest {
    position: absolute; top: calc(100% + 8px); inset-inline: 0; z-index: 120; max-height: 320px;
    margin: 0; padding: 6px; overflow: auto; list-style: none; border-radius: 12px;
    background: var(--lf-white); box-shadow: var(--lf-shadow-pop);
}

.lf-suggest[hidden] { display: none; }

.lf-suggest-item {
    display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px;
    border-radius: 8px; color: var(--lf-ink); font-size: 14px; cursor: pointer;
}

.lf-suggest-item:hover, .lf-suggest-item[aria-selected="true"] { background: var(--lf-soft); }

.lf-suggest-kind {
    margin-inline-start: auto; color: var(--lf-muted); font-size: 11px; font-weight: 600;
    text-transform: uppercase; white-space: nowrap;
}

/* The live count */
.lf-status { display: flex; align-items: center; min-width: 0; }

.lf-count-text {
    margin: 0; margin-inline-start: 4px; color: var(--lf-muted); font-size: 13px; font-weight: 500;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

.lf-count-num { display: inline-block; }
.lf-count-num.is-ticking { animation: lfTick 0.3s ease; }

/* 429 / 503 notice, inserted by the script */
.lf-notice {
    padding: 8px 12px; border: 1px solid var(--lf-amber-border); border-radius: 10px;
    background: var(--lf-amber-bg); color: var(--lf-amber-text); white-space: normal;
}

/* Joined Filters / Sort group at the inline end */
.lf-menus {
    position: relative; display: inline-flex; align-items: center; flex: none; height: 40px;
    margin-inline-start: auto; border-radius: 10px; background: var(--lf-soft);
}

.lf-filters, .lf-sort, .lf-menu { position: static; display: inline-flex; flex: none; }
.lf-filters-btn, .lf-sort-btn { list-style: none; }
.lf-filters-btn::-webkit-details-marker, .lf-sort-btn::-webkit-details-marker { display: none; }
.lf-filters-btn::marker, .lf-sort-btn::marker { content: ""; }
.lf-filters-btn { border-start-end-radius: 0; border-end-end-radius: 0; }
.lf-sort-btn { border-start-start-radius: 0; border-end-start-radius: 0; }
.lf-filters-btn:hover, .lf-sort-btn:hover, .lf-menus details[open] > summary { background: var(--lf-soft-hover); }
.lf-menus details[open] > summary .lf-chevron { transform: rotate(180deg); }
.lf-menus-divider { flex: none; width: 1px; height: 22px; background: var(--lf-divider); }
.lf-sort-label { color: var(--lf-muted); font-weight: 500; }

.lf-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px;
    height: 20px; padding: 0 6px; border-radius: 999px; background: var(--lf-navy);
    color: var(--lf-white); font-size: 11px; font-weight: 700; line-height: 1;
}

.lf-badge[hidden] { display: none; }

/* Sort menu: a listbox-styled menu anchored to the group's inline end */
.lf-menu-list {
    position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 110; min-width: 224px;
    margin: 0; padding: 6px; list-style: none; border-radius: 12px; background: var(--lf-white);
    box-shadow: var(--lf-shadow-pop); text-align: start; animation: lfPop 0.16s var(--lf-ease) both;
}

.lf-menu-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 40px;
    padding: 0 12px; border-radius: 8px; color: var(--lf-ink); font-size: 14px; font-weight: 500;
    white-space: nowrap; text-decoration: none; transition: background-color var(--lf-fast);
}

.lf-menu-item:hover, .lf-menu-item:focus-visible { background: var(--lf-soft); }
.lf-menu-item[aria-checked="true"] { background: var(--lf-soft); color: var(--lf-navy); font-weight: 600; }
.lf-menu-check { display: none; flex: none; color: var(--lf-navy); }
.lf-menu-item[aria-checked="true"] .lf-menu-check { display: block; }

/* ── Filters panel ───────────────────────────────────────────────────── */
.lf-popover {
    position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 110; display: grid;
    gap: 20px; width: min(440px, calc(100vw - 32px)); padding: 20px; box-sizing: border-box;
    border-radius: 16px; background: var(--lf-white); box-shadow: var(--lf-shadow-pop);
    text-align: start; animation: lfPop 0.16s var(--lf-ease) both;
}

.lf-facet { min-width: 0; margin: 0; padding: 0; border: 0; }
.lf-facet-label { display: block; margin-bottom: 12px; padding: 0; color: var(--lf-ink); font-size: 15px; font-weight: 600; }

/* Toggle pills: the real checkbox / radio is visually hidden inside the label. */
.lf-pills { display: flex; flex-wrap: wrap; gap: 8px; }

.lf-pill {
    position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px;
    padding: 0 12px; border-radius: 999px; background: var(--lf-soft); color: var(--lf-navy);
    font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer;
    transition: background-color var(--lf-fast), color var(--lf-fast), transform 0.1s;
}

.lf-pill input {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); border: 0; opacity: 0;
}

.lf-pill:hover { background: var(--lf-soft-hover); }
.lf-pill:active { transform: scale(0.98); }
.lf-pill-check { display: none; align-items: center; }
.lf-pill:has(input:checked) { padding-inline-start: 10px; background: var(--lf-navy); color: var(--lf-white); }
.lf-pill:has(input:checked) .lf-pill-check { display: inline-flex; }
.lf-pill:has(input:checked) .lf-count { color: rgba(255, 255, 255, 0.7); }
.lf-pill:has(input:disabled) { color: var(--lf-disabled-text); cursor: not-allowed; }
.lf-pill:has(input:disabled) .lf-count { color: inherit; }
.lf-pill:has(input:focus-visible) { outline: 2px solid var(--lf-navy); outline-offset: 2px; }

/* A long single-choice list (authors) stays a select; the date range two inputs. */
.lf-select { position: relative; }

.lf-select select {
    width: 100%; height: 40px; padding-block: 0; padding-inline: 12px 36px; border: 0;
    border-radius: 10px; background: var(--lf-soft); color: var(--lf-ink); font-size: 14px;
    appearance: none; -webkit-appearance: none; cursor: pointer;
    transition: background-color var(--lf-fast), box-shadow var(--lf-fast);
}

.lf-select-chevron {
    position: absolute; top: 50%; inset-inline-end: 12px; transform: translateY(-50%);
    color: var(--lf-muted); pointer-events: none;
}

.lf-range {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center; gap: 8px 10px;
}

.lf-range label { color: var(--lf-muted); font-size: 13px; }

.lf-range input {
    width: 100%; min-width: 0; height: 40px; padding: 0 12px; box-sizing: border-box; border: 0;
    border-radius: 10px; background: var(--lf-soft); color: var(--lf-ink); font-size: 13px;
    transition: background-color var(--lf-fast), box-shadow var(--lf-fast);
}

.lf-select select:focus,
.lf-range input:focus {
    outline: none; background: var(--lf-white); box-shadow: 0 0 0 3px var(--lf-ring);
}

.lf-popover-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-top: 16px; border-top: 1px solid var(--lf-hairline-soft);
}

.lf-apply { padding: 0 18px; }
.lf-apply--noscript { background: var(--lf-navy); color: var(--lf-white); }

/* ── Row 3: active filters ───────────────────────────────────────────── */
.lf-active {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0 0 14px;
    list-style: none;
}

.lf-active > li { display: inline-flex; }

.lf-active-chip {
    display: inline-flex; align-items: center; gap: 4px; height: 30px; padding-inline: 12px 6px;
    border-radius: 999px; background: var(--lf-soft); color: var(--lf-navy); font-size: 13px;
    font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none;
    transition: background-color var(--lf-fast);
}

.lf-active-chip:hover { background: var(--lf-soft-hover); }

.lf-x {
    display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
    border-radius: 50%; color: var(--lf-muted); transition: background-color var(--lf-fast), color var(--lf-fast);
}

.lf-active-chip:hover .lf-x { background: var(--lf-navy); color: var(--lf-white); }

.lf-clear {
    display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 8px;
    color: var(--lf-muted); font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none;
    transition: background-color var(--lf-fast), color var(--lf-fast);
}

.lf-clear:hover { background: var(--lf-soft); color: var(--lf-navy); }

/* ── Mobile sheet (the script adds .lf-sheet under 768 px) ───────────── */
.lf-filters.lf-sheet .lf-popover {
    position: fixed; inset: auto 0 0 0; z-index: 1500; width: auto; max-height: 88vh;
    max-height: 88dvh; gap: 22px; padding: 0 16px; border-radius: 24px 24px 0 0; overflow: auto;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    box-shadow: 0 -20px 60px -20px rgba(15, 27, 51, 0.5); animation: lfSheetUp 0.28s var(--lf-ease) both;
}

.lf-sheet-scrim {
    position: fixed; inset: 0; z-index: 1499; background: rgba(15, 27, 51, 0.45);
    animation: lfFadeIn 0.2s ease both;
}

.lf-sheet-handle { width: 36px; height: 4px; margin: 10px auto -16px; border-radius: 999px; background: #d6dbe6; }

.lf-sheet-head {
    position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 4px;
    margin: 0 -16px; padding: 10px 16px 14px; background: var(--lf-white);
}

.lf-sheet-title { flex: 1; margin: 0; color: var(--lf-ink); font-size: 18px; font-weight: 600; }
.lf-sheet-title:focus { outline: none; } /* Focused by script when the sheet opens: a ring on a heading reads as a glitch. */
.lf-sheet-reset { height: 36px; }

.lf-sheet-close {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px;
    height: 36px; padding: 0; border: 0; border-radius: 10px; background: var(--lf-soft);
    color: var(--lf-navy); cursor: pointer; transition: background-color var(--lf-fast);
}

.lf-sheet-close:hover { background: var(--lf-soft-hover); }

.lf-filters.lf-sheet .lf-popover-footer {
    position: sticky; bottom: 0; z-index: 1; margin: 0 -16px;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--lf-white);
}

/* The sheet head carries Reset, so the footer's copy steps aside. */
.lf-filters.lf-sheet .lf-sheet-head ~ .lf-popover-footer .lf-reset { display: none; }
.lf-filters.lf-sheet .lf-apply { flex: 1; height: 48px; border-radius: 12px; font-size: 15px; }
html.lf-lock, html.lf-lock body { overflow: hidden; }

/* "View all N past events" in the events bands' section header */
.lf-band-link {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
    color: var(--lf-gold-text); font-size: 12px; font-weight: 700; text-transform: uppercase;
    text-decoration: none; white-space: nowrap; transition: color var(--lf-fast);
}

.lf-band-link::after { content: "\2192"; transition: transform var(--lf-fast); }
[dir="rtl"] .lf-band-link::after { content: "\2190"; }
.lf-band-link:hover { color: var(--lf-navy); }
.lf-band-link:hover::after { transform: translateX(3px); }
[dir="rtl"] .lf-band-link:hover::after { transform: translateX(-3px); }

/* ── Results ─────────────────────────────────────────────────────────── */
.lf-results { position: relative; view-transition-name: lf-grid; }
.lf-results > .container { padding-top: 24px; }
::view-transition-old(lf-grid), ::view-transition-new(lf-grid) { animation-duration: 0.22s; }

/* Slow fetch (> 300 ms): cards dim and a shimmer sweeps the region. */
.lf-results.is-updating, .lf-results[aria-busy="true"] { cursor: progress; }

.lf-results.is-updating .rp-card,
.lf-results.is-updating .news-card,
.lf-results.is-updating .ei-featured,
.lf-results[aria-busy="true"] .rp-card,
.lf-results[aria-busy="true"] .news-card,
.lf-results[aria-busy="true"] .ei-featured {
    opacity: 0.35; transition: opacity 0.2s ease;
}

.lf-results.is-updating::after,
.lf-results[aria-busy="true"]::after {
    content: ""; position: absolute; inset: 0 auto 0 0; z-index: 2; width: 50%;
    background: linear-gradient(90deg, rgba(235, 232, 224, 0) 0%, rgba(235, 232, 224, 0.65) 50%, rgba(235, 232, 224, 0) 100%);
    transform: translateX(-100%); animation: lfShimmer 1.2s ease-in-out infinite;
    pointer-events: none;
}

[dir="rtl"] .lf-results.is-updating::after,
[dir="rtl"] .lf-results[aria-busy="true"]::after {
    animation-direction: reverse;
}

/* Entrance after a swap: each card carries style="--lf-i: n". `backwards`
   (not `both`) so the finished animation does not pin transform and defeat
   the .rp-card hover lift while .is-fresh is still set. */
.lf-results.is-fresh .rp-card,
.lf-results.is-fresh .news-card,
.lf-results.is-fresh .ei-featured {
    animation: lfIn 0.32s ease backwards; animation-delay: calc(min(var(--lf-i, 0), 11) * 40ms);
}

.lf-mark {
    padding: 0 2px; border-radius: 3px; background: var(--lf-gold-tint); color: inherit;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* Filtered empty state: "Remove ‹x› (N)" options and the primary clear button */
.lf-empty-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 22px; }

.lf-empty-options {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0;
    list-style: none;
}

.lf-empty-option {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px;
    border-radius: 10px; background: var(--lf-soft); color: var(--lf-navy); font-size: 13px;
    font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
    transition: background-color var(--lf-fast);
}

.lf-empty-option:hover { background: var(--lf-soft-hover); }

.lf-clear-btn {
    display: inline-flex; align-items: center; justify-content: center; height: 40px;
    padding: 0 18px; border-radius: 10px; background: var(--lf-navy); color: var(--lf-white);
    font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none;
    transition: background-color var(--lf-fast);
}

.lf-clear-btn:hover { background: var(--lf-navy-hover); }
.lf-results .rp-page-btn { min-height: 44px; }

/* Card read links inside the results: the theme's gold on white is 2.65:1; the
   darker gold-text token clears 4.5:1 without touching mainstyle.css. */
.lf-results .rp-card-read,
.lf-results .news-read-more {
    color: var(--lf-gold-text, #8a6800);
}

/* ── Focus rings (navy, 2 px, offset 2 px; inset where clipped) ──────── */
.lf-chip:focus-visible,
.lf-seg:focus-visible,
.lf-btn:focus-visible,
.lf-search-clear:focus-visible,
.lf-menu-item:focus-visible,
.lf-active-chip:focus-visible,
.lf-clear:focus-visible,
.lf-band-link:focus-visible,
.lf-empty-option:focus-visible,
.lf-clear-btn:focus-visible,
.lf-sheet-close:focus-visible,
.lf-suggest-item:focus-visible {
    outline: 2px solid var(--lf-navy); outline-offset: 2px;
}

.lf-chip:focus-visible, .lf-menu-item:focus-visible { outline-offset: -2px; border-radius: 10px; }

/* ── Keyframes ───────────────────────────────────────────────────────── */
@keyframes lfIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@keyframes lfPop {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@keyframes lfShimmer {
    to { transform: translateX(300%); }
}

@keyframes lfTick {
    0% { transform: scale(1); }
    40% { transform: scale(1.08); color: var(--lf-navy); }
    100% { transform: scale(1); }
}

@keyframes lfSheetUp {
    from { transform: translateY(100%); }
    to { transform: none; }
}

@keyframes lfFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Touch: taller targets ───────────────────────────────────────────── */
@media (hover: none) {
    .lf-seg { height: 36px; }
    .lf-pill { height: 36px; font-size: 14px; }
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* The strip always bleeds to the viewport edge here (.container keeps a
       16 px gutter) with 24 px fades; the mask is symmetric, so RTL needs no extra rule. */
    .lf-tabs, .lf-tabs.is-overflowing {
        gap: 12px; min-height: 48px; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
    }

    .lf-chips { min-height: 48px; gap: 2px; }
    .lf-chip { padding: 0 10px; }
    .lf-tools { flex-wrap: wrap; gap: 10px 12px; padding: 12px 0 14px; }
    .lf-search { flex: 1 1 100%; min-width: 0; }
    .lf-search input { height: 44px; font-size: 16px; }
    .lf-status { flex: 1 1 auto; }
    .lf-count-text { margin-inline-start: 0; }
    .lf-filters-btn, .lf-sort-btn { padding: 0 12px; }
    .lf-sort-value { display: none; }
    .lf-active { padding-bottom: 12px; }
    .lf-range { grid-template-columns: auto minmax(0, 1fr); }
}

/* ── Reduced motion: no transitions, no animations, no shimmer ───────── */
@media (prefers-reduced-motion: reduce) {
    .lf-bar,
    .lf-btn,
    .lf-chevron,
    .lf-chip,
    .lf-chip .lf-count,
    .lf-seg,
    .lf-search input,
    .lf-search-clear,
    .lf-menu-item,
    .lf-pill,
    .lf-select select,
    .lf-range input,
    .lf-active-chip,
    .lf-x,
    .lf-clear,
    .lf-band-link,
    .lf-band-link::after,
    .lf-empty-option,
    .lf-clear-btn,
    .lf-sheet-close,
    .lf-chips.is-ready .lf-ink,
    .lf-results.is-updating .rp-card,
    .lf-results.is-updating .news-card,
    .lf-results.is-updating .ei-featured,
    .lf-results[aria-busy="true"] .rp-card,
    .lf-results[aria-busy="true"] .news-card,
    .lf-results[aria-busy="true"] .ei-featured {
        transition: none;
    }

    .lf-btn:active, .lf-chip:active, .lf-chip.is-pressed, .lf-seg:active, .lf-seg.is-pressed, .lf-pill:active { transform: none; }
    .lf-bar.is-loading .lf-progress { transform: scaleX(1); transition: none; }
    .lf-bar.is-done .lf-progress { transition: none; }
    .lf-results.is-updating::after, .lf-results[aria-busy="true"]::after { display: none; }

    .lf-results.is-fresh .rp-card,
    .lf-results.is-fresh .news-card,
    .lf-results.is-fresh .ei-featured,
    .lf-count-num.is-ticking,
    .lf-popover,
    .lf-menu-list,
    .lf-filters.lf-sheet .lf-popover,
    .lf-sheet-scrim {
        animation: none;
    }

    ::view-transition-old(lf-grid), ::view-transition-new(lf-grid) { animation: none; }
}