/* ============================================================================
 * La2etlak — SEARCH / BROWSE (family 5A)
 * ============================================================================
 * Ported from `docs/design/locked/2026-08-11/phase-5a-search-browse.html`
 * (FINAL AUTHORITY, Option A) by SEARCH-PORT-001. Values are the artifact's
 * own; nothing here is estimated from a screenshot.
 *
 * OWNERSHIP — docs/design/PARITY_METHOD.md §8
 * ------------------------------------------
 * This file owns the Search page's OWN sections and composition and nothing
 * else. It contains no copy of a shared rule:
 *
 *     tokens · type · buttons · icons · .wrap  →  foundation.css
 *     header / nav / drawer / footer           →  public-shell.css
 *     the report card itself                   →  report-card.css
 *     Search composition                       →  THIS FILE
 *
 * Where Search legitimately composes a shared component — the mobile row card,
 * for instance — the rule is scoped inside `.sresults`, a container this file
 * owns. That is a composition, not an ownership claim (guarded by
 * DesignCssOwnershipTest).
 *
 * NAMING. Two class names differ from the board because the runtime already
 * owns those names elsewhere; the correspondence map records both sides:
 *
 *     board .sform  →  runtime .sbar     (`.sform` is the Homepage hero form)
 *     board .empty  →  runtime .sempty   (`.rcempty` is the collection empty state)
 *
 * The board also draws the desktop rail and the mobile filter sheet as two
 * separate DOMs (`.rail` and `.oc`). FOUNDATION §15 forbids shipping a second
 * copy of a form, so production ships ONE filter form that is a rail at
 * ≥1080 and a Bootstrap offcanvas sheet below it — §6 below.
 * ========================================================================== */


/* ============================================================================
 * 0. THE SEARCH CONTENT SHELL   (proof line 83; FOUNDATION §6)
 * ----------------------------------------------------------------------------
 * Search does not sit on the shared 1240/40 content measure. Two authorities
 * agree that it is narrower, and they agree with each other:
 *
 *     FINAL_DESIGN_FOUNDATION.md §6   "Search shell — 1120px"
 *     phase-5a-search-browse.html     `.wrap{max-width:1180px;padding:0 28px}`
 *                                     → 1180 - 56 = 1124px of content
 *
 * 1124 IS the Foundation's 1120 shell, expressed the way the board expresses
 * every other container: an outer max-width plus its own gutter. The board's
 * own two-column body then divides it as 264 rail + 28 gap + 832 results.
 *
 * `.wrap` is a FOUNDATION-owned primitive and is NOT redeclared here. These
 * rules style it INSIDE three containers this file owns (`.pgh`, `.fsum`,
 * `.mainpad`), which PARITY_METHOD §8 permits explicitly and which
 * DesignCssOwnershipTest checks: a foreign class may be styled inside an owning
 * context, never bare. The shared shell keeps the 1240/40 measure the Homepage
 * pilot verified — the header and footer are NOT Search's to renarrow, and 5A's
 * own 1180 drawing of them is superseded by ledger §3.2 (3-v3 is the public
 * shell's rendered authority).
 * ========================================================================== */
.la2-pg .pgh > .wrap,
.la2-pg .fsum > .wrap,
.la2-pg .mainpad > .wrap { max-width: 1180px; padding: 0 28px; }

@media (max-width: 767.98px) {
    .la2-pg .pgh > .wrap,
    .la2-pg .fsum > .wrap,
    .la2-pg .mainpad > .wrap { padding: 0 16px; }
}


/* ============================================================================
 * 1. PAGE HEAD — H1 + search control + result count   (proof lines 109-127)
 * ========================================================================== */
.la2-pg .pgh {
    background: var(--band2);
    border-bottom: 1px solid var(--line);
    padding: 20px 0 22px;
}
.la2-pg .pgh h1 { font-size: 28px; margin: 0 0 14px; }
[dir="rtl"] .la2-pg .pgh h1 { font-size: 27px; }

.la2-pg .sbar { display: flex; gap: 10px; max-width: 720px; }
.la2-pg .sbar .inp {
    flex: 1;
    min-width: 0;
    height: 52px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--edge);
    border-radius: var(--r2);
    padding: 0 14px;
    box-shadow: var(--csh);
}
[dir="rtl"] .la2-pg .sbar .inp { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.la2-pg .sbar .inp::placeholder { color: var(--muted); }
.la2-pg .sbar .btn { min-height: 52px; min-width: 124px; }

.la2-pg .cnt {
    margin: 13px 0 0;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--head);
    line-height: 1.25;
}
[dir="rtl"] .la2-pg .cnt { font-family: 'Noto Naskh Arabic', serif; line-height: 1.5; }
.la2-pg .cnt em { font-style: normal; color: var(--body); font-weight: 500; }

/* Mobile filter trigger. Row two of the search grid below 768 (§7), absent on
   the board's desktop frames because the rail is present there instead. */
.la2-pg .fcount { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.la2-pg .fcount .n {
    background: var(--actInk);
    color: var(--act);
    border-radius: 999px;
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}


/* ============================================================================
 * 2. ACTIVE FILTER SUMMARY   (proof lines 133-144)
 * ========================================================================== */
.la2-pg .fsum {
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    padding: 11px 0;
}
.la2-pg .fsum .in { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.la2-pg .fsum .fl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
    margin-inline-end: 2px;
}
[dir="rtl"] .la2-pg .fsum .fl { letter-spacing: 0; text-transform: none; font-size: 12.5px; }

.la2-pg .rmchip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 13px;
    border-radius: 11px;
    background: transparent;
    border: 1px solid var(--edge);
    color: var(--body);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
}
[dir="rtl"] .la2-pg .rmchip { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.la2-pg .rmchip b { color: var(--head); font-weight: 600; }
.la2-pg .rmchip .x { font-size: 17px; line-height: 1; color: var(--muted); }
.la2-pg .rmchip:hover { border-color: var(--erI); color: var(--erI); }
.la2-pg .rmchip:hover b,
.la2-pg .rmchip:hover .x { color: var(--erI); }
/* The board buys this with `!important`; the ported layer never does (ledger
   §16.1), so the anchor states are named explicitly instead. */
.la2-pg a.rmchip:hover,
.la2-pg a.rmchip:focus { text-decoration: none; }

.la2-pg .clrall {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 11px;
    color: var(--act);
    font-size: 13.5px;
    font-weight: 600;
    margin-inline-start: auto;
}
.la2-pg .clrall:hover { background: var(--band); text-decoration: none; }


/* ============================================================================
 * 3. ADVERTISEMENT BAND   (proof lines 146-149)
 * ----------------------------------------------------------------------------
 * `search_top` is the only placement Search renders. The shared <x-ad-slot>
 * component ships its own legacy chrome and an inline `min-height` for CLS
 * reservation (ledger §16.3 #5); every property it sets is re-declared here at
 * a higher specificity so the locked design wins on specificity, never on
 * stylesheet order. The component is shared and was not modified.
 * ========================================================================== */
/* The band's own chrome sits on the rendered slot, not on the wrapper: when the
   placement resolves to null the component prints nothing, and an empty wrapper
   must leave no border, no background and no reserved gap (proof state
   "Advertisement absent — collapsed"). */
.la2-pg .adslot .la2-ad-slot {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--band);
    min-height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 0;
    margin: 0;
}
.la2-pg .adslot .la2-ad-label { padding: 0; background-color: transparent; border: 0; }
.la2-pg .adslot .la2-ad-label__text {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}


/* ============================================================================
 * 4. BODY GRID   (proof lines 151-152)
 * ========================================================================== */
.la2-pg .mainpad { padding: 24px 0 44px; }
.la2-pg .abody {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}


/* ============================================================================
 * 5. FILTER CONTROLS   (proof lines 154-177)
 * ----------------------------------------------------------------------------
 * `.fld`, `.fldl`, `.sel`, `.inps`, `.ck`, `.pbtn` are generic form primitives
 * that later families (5C especially) will also need. They are owned here
 * because Search is their first consumer; when a second family needs them they
 * MOVE to foundation.css — never a second copy (PARITY_METHOD §8).
 * ========================================================================== */
.la2-pg .rail {
    background: var(--band2);
    border: 1px solid var(--line);
    border-radius: var(--r3);
    padding: 16px 15px;
}
.la2-pg .railhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.la2-pg .railhead h2 { font-size: 17px; margin: 0 0 12px; }

/* `.fld` is already owned by homepage.css, whose hero filter panel draws the
   same primitive at its own density. Two boards, two densities — so Search
   composes it inside `.rail`, a container this file owns, rather than
   re-declaring it or forcing one density onto both families (PARITY_METHOD §8).
   When a later family needs a third, the primitive moves to foundation.css. */
.la2-pg .rail .fld { margin-bottom: 13px; }
.la2-pg .rail .fld > label,
.la2-pg .fldl {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--head);
    margin-bottom: 5px;
}

.la2-pg .sel,
.la2-pg .inps {
    width: 100%;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--edge);
    border-radius: 8px;
    height: 44px;
    padding: 0 11px;
    min-width: 0;
}
[dir="rtl"] .la2-pg .sel,
[dir="rtl"] .la2-pg .inps { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.la2-pg .sel {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6779' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-position: calc(100% - 11px) center;
    background-size: 14px 14px;
    background-repeat: no-repeat;
    padding-inline-end: 32px;
}
[data-bs-theme="dark"] .la2-pg .sel {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239EAAB9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
[dir="rtl"] .la2-pg .sel { background-position: 11px center; }
.la2-pg .sel:disabled { opacity: .6; cursor: not-allowed; }

/* Dependent selects sit indented under their parent, on the logical side. */
.la2-pg .sub {
    margin-inline-start: 11px;
    padding-inline-start: 11px;
    border-inline-start: 2px solid var(--edge);
}

.la2-pg .presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
.la2-pg .pbtn {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    min-height: 44px;
    padding: 0 11px;
    border: 1px solid var(--edge);
    border-radius: 9px;
    background: var(--bg);
    color: var(--body);
    cursor: pointer;
}
[dir="rtl"] .la2-pg .pbtn { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.la2-pg .pbtn[aria-pressed="true"] { background: var(--act); border-color: var(--act); color: var(--actInk); }
.la2-pg .pbtn.q { border-color: transparent; background: transparent; color: var(--quiet); }

.la2-pg .dl { font-size: 11.5px; color: var(--muted); margin: 0 0 4px; }
/* Validation / load-failure note under a control — FOUNDATION §12: errors carry
   a word and their own role colour, never colour alone. */
.la2-pg .dl.err { color: var(--erI); margin: 5px 0 0; }

.la2-pg .ck {
    display: flex;
    gap: 9px;
    align-items: center;
    font-size: 13.5px;
    color: var(--body);
    min-height: 44px;
    cursor: pointer;
}
.la2-pg .ck input {
    appearance: none;
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1.5px solid var(--edge);
    background: var(--bg);
    margin: 0;
    position: relative;
    cursor: pointer;
}
.la2-pg .ck input:checked { background: var(--act); border-color: var(--act); }
.la2-pg .ck input:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: 2px solid var(--actInk);
    border-top: 0;
    border-left: 0;
    transform: rotate(40deg);
}

/* SEARCH-RAIL-ORG-MARGIN-001 — the checkbox block's trailing separation.
   The board draws 9px between the checkbox pair and the field that follows it,
   and it names that spacing by POSITION, not by identity: 5A frame 0 carries it
   on Organization and frame 1, which draws no Organization control, carries the
   same 9px on Posted-by.
   The port bound it to the Organization field itself (an inline style inside
   `@if($verifiedOrganizations->isNotEmpty())`), so the separation disappeared
   with the control — on any deployment holding no verified organization, which
   is a fresh install's default, Posted-by butted straight against the last
   checkbox.
   Stated structurally instead, so it belongs to whichever field is first after
   the checkbox block and follows the rewards / organization toggles by itself.
   `.railbody` is the one shared filter DOM the rail and the offcanvas both
   render, so this is a single rule for both compositions. */
.la2-pg .railbody > .ck + .fld { margin-top: 9px; }

/* ONE Apply / Clear pair per filter interface (DESIGN_RULES § Search). */
.la2-pg .railbot {
    border-top: 1px solid var(--line);
    margin-top: 14px;
    padding-top: 13px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    position: sticky;
    bottom: 0;
    background: var(--band2);
}
.la2-pg .railbot .btn { min-height: 46px; font-size: 13.5px; padding: 0 10px; }

/* Area suggestion from a map click — display only, never a submitted filter. */
.la2-pg .areasug {
    border: 1px solid var(--inEd);
    background: var(--inBg);
    border-radius: var(--r2);
    padding: 9px 11px;
    margin-bottom: 13px;
    font-size: 12.5px;
    color: var(--body);
}
.la2-pg .areasug p { margin: 0 0 6px; }
.la2-pg .areasug .sg { color: var(--inI); font-weight: 600; }


/* ============================================================================
 * 6. FILTER SHEET   (proof lines 317-327 — one DOM, two compositions)
 * ----------------------------------------------------------------------------
 * The board draws a separate `.oc` dialog for mobile. Shipping a second copy of
 * the filter form is prohibited (FOUNDATION §15 / 6A), so the SAME `<aside>`
 * is a Bootstrap offcanvas below the rail collapse and a static rail above it.
 * Bootstrap owns the dialog behaviour — scrim, focus trap, ESC, focus return —
 * and every visual property it sets is re-declared here at higher specificity.
 *
 * Collapse point: FOUNDATION §7 "1080 / 1024 — … the account rail becomes an
 * account menu". Search's rail follows that rail rule and the shell's own
 * collapse, so the page has ONE boundary rather than an invented Search one.
 * ========================================================================== */
/* THE SHEET COMPOSITION IS BOUNDED TO THE SHEET'S OWN WIDTHS.
 *
 * One DOM carries both compositions, so every rule that draws the mobile SHEET
 * has to stop at the collapse point. Left unbounded, `.rail.offcanvas .railbot`
 * &c. keep applying above 1080 — where the element is a static rail — and the
 * dialog's own footer treatment (sticky ground, 11px/14px padding, no top
 * margin) silently replaces the rail's. The `min-width: 1080px` block below can
 * only undo what it restates, and it restated the rail but never its children.
 * Bounding the sheet is the fix; adding a third set of counter-rules is not. */
@media (max-width: 1079.98px) {
    .la2-pg .rail.offcanvas {
        width: 344px;
        max-width: 100%;
        background: var(--bg);
        border: 0;
        border-radius: 0;
        padding: 0;
        box-shadow: var(--sh);
    }

    /* The open/closed transform stays Bootstrap's own: it parks the sheet at
       `translateX(100%)` and clears it on `.show`, in both directions, and the
       ported layer has no reason to restate it. */

    .la2-pg .rail.offcanvas .railhead {
        flex: none;
        padding: 9px 8px 9px 16px;
        border-bottom: 1px solid var(--line);
    }
    [dir="rtl"] .la2-pg .rail.offcanvas .railhead { padding: 9px 16px 9px 8px; }
    .la2-pg .rail.offcanvas .railhead h2 {
        font-size: 15.5px;
        margin: 0;
    }
    .la2-pg .rail.offcanvas .railform { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    .la2-pg .rail.offcanvas .railbody { flex: 1; overflow: auto; padding: 13px 14px 16px; }
    .la2-pg .rail.offcanvas .railbot {
        flex: none;
        margin-top: 0;
        padding: 11px 14px;
        border-top: 1px solid var(--line);
        background: var(--bg);
    }
    .la2-pg .rail.offcanvas .railbot .btn { min-height: 48px; }
}

.la2-pg .ocx {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--muted);
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.la2-pg .ocx:hover { background: var(--band); color: var(--head); }
.la2-pg .ocx .ico { width: 20px; height: 20px; }


/* ============================================================================
 * 7. SORT BAR   (proof lines 179-185)
 * ========================================================================== */
/* The results column. Owning this container is what lets Search compose the
   shared report card (§10) without redeclaring a single rule of it. */
.la2-pg .sresults { min-width: 0; }

.la2-pg .sortbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.la2-pg .sortbar .sl { font-size: 12.5px; color: var(--muted); }
.la2-pg .seg {
    display: flex;
    gap: 3px;
    background: var(--band);
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 3px;
}
.la2-pg .seg a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 13px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--body);
}
.la2-pg .seg a:hover { background: var(--bg); color: var(--head); text-decoration: none; }
.la2-pg .seg a[aria-current] { background: var(--act); color: var(--actInk); }
.la2-pg .seg a[aria-current]:hover { background: var(--act); color: var(--actInk); }
.la2-pg .mapbtn { margin-inline-start: auto; }


/* ============================================================================
 * 8. MAP PANEL   (proof lines 187-201)
 * ----------------------------------------------------------------------------
 * The board's `.mapcv` stripes, `.pin` and `.ring` are specimen stand-ins for
 * the real Leaflet tile layer, markers and radius circle, which the runtime
 * already renders from `LocationService::getPublicCoordinates()` (approximate
 * positions only). Only the panel geometry is ported — recoloured Leaflet
 * internals are not part of this family (ledger §21 divergence 3).
 * ========================================================================== */
.la2-pg .mapwrap {
    border: 1px solid var(--edge);
    border-radius: var(--r3);
    overflow: hidden;
    margin-bottom: 18px;
    background: var(--band2);
}
.la2-pg .mapctl {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding: 11px 13px;
    border-bottom: 1px solid var(--line);
}
.la2-pg .mapctl .fldl { margin: 0; font-size: 12.5px; }
.la2-pg .mapctl .sel { width: auto; min-width: 104px; height: 44px; }
.la2-pg .mapcv {
    height: 210px;
    background: repeating-linear-gradient(45deg, var(--p1), var(--p1) 10px, var(--p2) 10px, var(--p2) 20px);
}
.la2-pg .mapnote { font-size: 12px; color: var(--muted); padding: 9px 13px; background: var(--bg); margin: 0; }
.la2-pg .mapfb {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px;
    background: var(--band);
    border-top: 1px solid var(--line);
}
.la2-pg .mapfb .ico { color: var(--erI); margin-top: 2px; width: 20px; height: 20px; flex: none; }
.la2-pg .mapfb p { margin: 0; font-size: 13.5px; color: var(--ink); }
.la2-pg .mapfb p b { color: var(--head); }


/* ============================================================================
 * 9. RESULTS — grid, pagination, empty   (proof lines 203, 261-273)
 * ========================================================================== */
.la2-pg .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

/* THE PAGINATOR MOVED UP. `.pager` / `.pgl` were declared here while Search was
   the only consumer of components/design/pagination.blade.php. 5J Report
   collections is its second consumer and draws the SAME paginator on its own
   board, so by the rule this layer already follows — a member shared by two
   families belongs to the shared owner — the whole family moved to
   foundation.css with its bytes UNCHANGED
   (5J-ACCOUNT-COLLECTIONS-STAGE-B-FINAL-PORT-001). foundation.css loads before
   this file and nothing here re-declares those selectors, so Search's computed
   styles are identical and 5A does not move.

   `.pginfo` below stays: it is Search's own result-count line, not the
   paginator, and 5J's page-position line has its own values on its own board. */
.la2-pg .pginfo { text-align: center; font-size: 12px; color: var(--muted); margin: 10px 0 0; }

.la2-pg .sempty { text-align: center; padding: 52px 24px; }
.la2-pg .sempty .ei {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--fill);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}
.la2-pg .sempty .ei .ico { width: 28px; height: 28px; }
.la2-pg .sempty h2 { font-size: 20px; }
.la2-pg .sempty p { font-size: 13.5px; color: var(--body); margin: 9px auto 18px; max-width: 400px; }


/* ============================================================================
 * 10. RESPONSIVE
 * ----------------------------------------------------------------------------
 * FOUNDATION §7 activation widths only — never a width inferred from a
 * specimen frame (ledger §10). The board proves the mobile composition at 390.
 * ========================================================================== */

/* ≥1080 — the filter form is a static rail, not a dialog (§6). */
@media (min-width: 1080px) {
    .la2-pg .rail.offcanvas {
        position: static;
        visibility: visible;
        transform: none;
        z-index: auto;
        width: auto;
        background: var(--band2);
        border: 1px solid var(--line);
        border-radius: var(--r3);
        padding: 16px 15px;
        box-shadow: none;

        /* Bootstrap's `.offcanvas` is a flex column with its own measure and its
           own ink (`--bs-body-color`). Above the collapse the element is not a
           dialog at all, so those four are returned to the board's rail, which
           is an ordinary block inheriting the ported body ink. */
        display: block;
        flex-direction: initial;
        max-width: none;
        color: var(--body);
    }
    .la2-pg .ocx { display: none; }
    .la2-pg .fbtn { display: none; }
}

/* The dialog's SCRIM. Bootstrap injects `.offcanvas-backdrop` on the body with
   its own undesigned plain black, so neither the board's scrim nor the shared
   shell's was reaching the sheet. Bound to the shared PUBLIC SHELL's own scrim
   (public-shell.css `.la2-pg .scrim`, already parity-verified on the Homepage),
   not to 5A's embedded .52 copy of it — one scrim value for every overlay the
   design shell opens. Set through Bootstrap's own variables at the component
   boundary; the shared stylesheet is not touched. */
.la2-pg .offcanvas-backdrop { --bs-backdrop-bg: #090D1A; --bs-backdrop-opacity: .55; }

/* <1080 — the filter form IS a Bootstrap dialog, and Bootstrap inks it with
   `--bs-offcanvas-color` (#212529), not the ported body ink. The rail above the
   collapse already corrects this with `color: var(--body)`; below it the element
   keeps its dialog role, so the correction belongs on Bootstrap's own variable at
   the component boundary rather than on a colour declaration that its children
   would have to out-specify. Same token, same intent, both states. */
.la2-pg .rail.offcanvas { --bs-offcanvas-color: var(--body); }

/* <1080 — rail collapses; results take the full measure. */
@media (max-width: 1079.98px) {
    .la2-pg .abody { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* ≤767.98 — the board's 390px composition. */
@media (max-width: 767.98px) {
    .la2-pg .pgh { padding: 16px 0 18px; }
    .la2-pg .pgh h1 { font-size: 23px; margin-bottom: 12px; }

    .la2-pg .sbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
    .la2-pg .sbar .btn { min-width: 96px; }
    /* `.la2-pg .sbar .btn` (§1) raises the page-head row to the 52px control
       height; the Filters trigger is NOT that row — the board draws it at the
       canonical 48px `.btn` height (foundation §3). The selector has to carry
       `.sbar` to outrank its own earlier rule, which a bare `.fbtn` does not. */
    .la2-pg .sbar .fbtn { grid-column: 1 / -1; width: 100%; min-height: 48px; }

    /* The board draws the trigger `b-sec` with the sheet shut and `b-pri` with it
       open (proof §04, frames 1 and 2), so the control reports its own state.
       Bootstrap already puts `.show` on the dialog it opened, so the state is
       read off that with `:has()` — no added JS, no second class to keep in sync,
       and nothing to go stale if the sheet is closed by Escape or the backdrop. */
    .la2-pg:has(.rail.offcanvas.show) .sbar .fbtn {
        background: var(--pri);
        color: var(--priInk);
        border-color: var(--pri);
    }
    .la2-pg .cnt { font-size: 18px; }

    /* The board's mobile frames draw the chip row WITHOUT its "Active filters"
       label; both desktop frames draw it. At 390px the label costs 110px of the
       row's 358px measure and pushes the chips onto an extra line — the row
       measures 226px against the board's 120px. Presentation only: the element
       stays in the DOM and the band keeps its own `aria-label`, so the row is
       still announced as the active-filter summary. */
    .la2-pg .fsum .fl { display: none; }

    .la2-pg .mainpad { padding: 18px 0 32px; }
    .la2-pg .sortbar { gap: 6px; }
    .la2-pg .seg { overflow-x: auto; max-width: 100%; }
    .la2-pg .mapbtn { margin-inline-start: 0; width: 100%; }

    .la2-pg .grid3 { grid-template-columns: minmax(0, 1fr); gap: 12px; }

    /* The board's mobile report card is a ROW: a fixed 124px media column beside
       the body, with category and governorate on one line. This is Search's
       composition of a shared component, so it is scoped to a container this
       file owns and no rule is copied into report-card.css. */
    .la2-pg .sresults .rc { flex-direction: row; }
    .la2-pg .sresults .rcm { aspect-ratio: auto; width: 124px; flex: none; align-self: stretch; }
    .la2-pg .sresults .tslot { top: 8px; inset-inline-start: 8px; }
    /* REPORT-CARD-BADGE-VISUAL-REFINEMENT-001 — the mobile `.tchip` shrink that
       used to live here (24px / 11px) is REMOVED, not moved. It sized the type
       badge alone, so once all five badges became one shared family it would have
       inverted the hierarchy: the type badge smaller than the statuses beside it.
       Badge geometry is report-card.css's to own at every width; Search composes
       the slots' POSITION here and nothing about the badges themselves. */
    .la2-pg .sresults .sslot { top: 8px; inset-inline-end: 8px; }
    .la2-pg .sresults .rcb { padding: 11px 13px 13px; min-width: 0; }
    .la2-pg .sresults .rc h3 { font-size: 14.5px; }
    .la2-pg .sresults .rcmetas { display: block; }
    .la2-pg .sresults .rcc,
    .la2-pg .sresults .rcmeta { display: inline; }
    /* The board writes the separator as `<i>·</i>`; generated content keeps the
       single DOM identical at both compositions and stays out of the a11y tree. */
    .la2-pg .sresults .rcmeta::before { content: "·"; color: var(--muted); padding: 0 5px; }
    .la2-pg .sresults .rcfoot { flex-direction: column; gap: 2px; }
}