/* ============================================================================
 * La2etlak — LOCKED DESIGN FOUNDATION (L1)
 * ============================================================================
 * Ported by HOMEPAGE-PILOT-PORT-001 from the locked design package:
 *
 *   docs/design/locked/2026-08-11/phase-3-homepage-redesign-v3.html   (values)
 *   docs/design/locked/2026-08-11/FINAL_DESIGN_FOUNDATION.md          (contract)
 *   docs/design/locked/2026-08-11/uploads/DESIGN_RULES.md             (rule layer)
 *
 * PORT, DO NOT INTERPRET. Every value below is copied from the locked source.
 * Do not "tidy", round, or re-derive a number here. A visual change requires a
 * design-change request (FINAL_DESIGN_AUTHORITY.md §14).
 *
 * ── SCOPE ───────────────────────────────────────────────────────────────────
 * The locked proof scopes the whole product under `.pg`. Production uses
 * `.la2-pg` on <body>, applied ONLY by pages whose family has been ported.
 * Un-ported families keep public/css/la2etlak.css untouched.
 *
 *   proof                     production
 *   .pg                    →  .la2-pg
 *   .pg.light              →  .la2-pg                       (default)
 *   .pg.dark / .dark X     →  [data-bs-theme="dark"] .la2-pg
 *   .pg[dir=rtl]           →  [dir="rtl"] .la2-pg
 *   .pg.m                  →  a media query (see homepage.css / public-shell.css)
 *
 * ── BOOTSTRAP POLICY ────────────────────────────────────────────────────────
 * Bootstrap CSS + JS are deliberately KEPT for this pilot. Every rule here is
 * written with at least one extra class over Bootstrap's own selector, so the
 * locked design wins on specificity (0,2,0 vs 0,1,0) and NOT on source order.
 * There is no `!important` in this file. See the `.btn` block for the one
 * collision that needed an explicit, documented neutralisation.
 * ========================================================================== */


/* ============================================================================
 * 1. TOKENS — theme independent   (proof line 63-64)
 * ========================================================================== */
.la2-pg {
    --nav:      #232B52;
    --navDeep:  #1A2142;
    --navSoft:  #4A5390;
    --orn:      #F49B23;
    --ornHov:   #FFB246;
    --ornPress: #DD8A12;
    --ornInk:   #16203F;
    --ornDeep:  #B4650A;

    --r1:   6px;
    --r2:   10px;
    --r3:   16px;
    --ctrl: 52px;

    --heroInk: #FFFFFF;
}

/* --- Light role tokens (proof line 65-69) — the default colourway --------- */
.la2-pg {
    --bg:    #FFFFFF;
    --band:  #F2F5FA;
    --band2: #F7F9FC;
    --stat:  #EEF3FB;
    --edge:  #DBE1EB;
    --line:  #E7EBF2;
    --ink:   #121826;
    --head:  #1B2340;
    --body:  #4A5568;
    --muted: #5C6779;
    --ph:    #6B7688;

    --act:     #2B52C6;
    --actHov:  #1E3FA6;
    --actInk:  #FFFFFF;
    /* Current-navigation pair — FINAL_DESIGN_FOUNDATION.md §1; consumed by the
       4A drawer (`.dnav a[aria-current]`), which 3-v3 does not render. */
    --curEdge:  #2B52C6;
    --curFaint: rgba(43, 82, 198, .07);
    --pri:     #2B52C6;
    --priHov:  #1E3FA6;
    --priInk:  #FFFFFF;
    --sec:     #FFFFFF;
    --secEdge: #C4CBDA;
    --secInk:  #26305A;
    --quiet:   #4A5568;

    --lostInk:   #6E3D6B;
    --lostBg:    #F4EAF3;
    --lostEdge:  #D8BFD6;
    --foundInk:  #1F6B7A;
    --foundBg:   #E6F1F4;
    --foundEdge: #B9D8DF;

    --warnInk:  #7A4A05;
    --warnBg:   #FBF3E4;
    --warnEdge: #E9D5AE;
    --ok:       #0B6B58;
    --danger:   #9E2342;

    /* Quiet fill + error / information role pairs, and the two neutral plate
       steps. Added by SEARCH-PORT-001 from `phase-5a-search-browse.html`
       lines 50-53 — the same values FINAL_DESIGN_FOUNDATION.md §1 names for
       the danger and information roles, so the rule layer and the artifact
       agree. Consumed by the report-card status row and the Search filter,
       map and chip families. */
    --fill: #EFF3F9;
    --erI:  #9E2342;
    --erBg: #FBECEF;
    --erEd: #EFC6D0;
    --inI:  #2B52C6;
    --inBg: #EAF0FD;
    --inEd: #C6D6F6;
    --p1:   #EDF2F9;
    --p2:   #E3EAF4;

    --plate:    #EDF1F8;
    --plateInk: #8895AB;

    /* Ink ON the `--p1`/`--p2` placeholder hatch. Distinct from `--plateInk`,
       which is the no-photo PLATE's ink: the hatch is a lighter ground and needs
       its own contrast partner. Every locked board from 5A onward declares this
       pair identically; `report-form.css` already consumed `var(--pInk)` while
       nothing defined it, so that rule was silently resolving to nothing
       (MESSAGES-PORT-001, finding P1). Declared here because foundation.css is
       the sole token owner. */
    --pInk: #8DA0B6;

    /* The placeholder HATCH's two stripes. SIX locked boards — 5A, 5B, 5C, 5D,
       5J and 5K — declare this pair identically, so it is a shared token and
       this file is the sole token owner, exactly as `--pInk` and `--meBg` were
       (MESSAGES-PORT-001 P1). Promoted here by
       5J-ACCOUNT-COLLECTIONS-STAGE-B-FINAL-PORT-001, the first port that draws
       the hatch outside a report card. Values byte-identical to all six boards. */
    --ph1: #DCE4EF;
    --ph2: #C9D4E3;

    /* Own-message bubble — 5E Messages (phase-5e-messages.html `.pg.light`).
       A role token rather than a Messages-private value because tokens have one
       owner; dark deliberately drops to a muted navy so a long thread does not
       glare, which is why this is not simply `--pri`. */
    --meBg:  #2B52C6;
    --meInk: #FFFFFF;

    /* Success, warning and violet status roles, and the OVERLAY shadow.
       ------------------------------------------------------------------------
       Added by NOTIFICATIONS-PORT-001, and the reason is worth recording: 5F is
       the first ported family to CONSUME them, and a `var()` on a custom property
       nothing declares is invalid at computed-value time — so `border: 2px solid
       var(--te)` computed to `none / 0px` and `color: var(--ti)` fell back to the
       inherited body ink. Three of the six 5F type tones therefore painted NOTHING
       at all, and the bell panel had no shadow. Declared here because foundation
       is the sole token owner, exactly as `--pInk` and `--meBg` were.

       The values are the locked package's own and are UNANIMOUS across it: every
       board that declares `--ok*` gives these bytes (4A, 5A, 5D, 5E, 5F, 6A), and
       `--w*`, `--v*` and `--dsh` are declared identically wherever they appear. No
       existing rule referenced any of them, so no closed family moves by a pixel. */
    --okI:  #0B6B58;
    --okBg: #E8F4F0;
    --okEd: #B7DCD1;
    --wI:   #8A5A00;
    --wBg:  #FDF4E3;
    --wEd:  #EBD7AC;
    --vI:   #5B3E9E;
    --vBg:  #F2EEFB;
    --vEd:  #D6CBEF;

    --sh:  0 1px 2px rgba(24, 30, 60, .05), 0 14px 32px rgba(24, 30, 60, .07);
    --csh: 0 1px 2px rgba(24, 30, 60, .06), 0 6px 18px rgba(24, 30, 60, .05);
    /* The OVERLAY shadow — a floating panel, not a resting card. */
    --dsh: 0 12px 34px rgba(18, 24, 48, .18);
}

/* --- Dark role tokens (proof line 70-74) --------------------------------- *
 * One re-valued role set (FINAL_DESIGN_FOUNDATION.md §9) — never a second
 * design. `data-bs-theme` is server-rendered on <html>; any value other than
 * "dark" (including "auto") stays light, which is exactly what the existing
 * runtime and resources/js/theme.js already do.
 * ------------------------------------------------------------------------- */
[data-bs-theme="dark"] .la2-pg {
    --bg:    #121826;
    --band:  #19202F;
    --band2: #171E2C;
    --stat:  #161E2E;
    --edge:  #2F3849;
    --line:  #28303F;
    --ink:   #EDF1F7;
    --head:  #F3F6FB;
    --body:  #B4C0CF;
    --muted: #9EAAB9;
    --ph:    #8E9AAA;

    --act:     #8FA6F2;
    --actHov:  #AAB9F7;
    --actInk:  #0F1424;
    --curEdge:  #8FA6F2;
    --curFaint: rgba(143, 166, 242, .12);
    --pri:     #2B52C6;
    --priHov:  #3D66DE;
    --priInk:  #FFFFFF;
    --sec:     #1D2536;
    --secEdge: #3C4761;
    --secInk:  #C9D3E6;
    --quiet:   #B4C0CF;

    --lostInk:   #DCA9D8;
    --lostBg:    #2E2233;
    --lostEdge:  #4B3A50;
    --foundInk:  #7CC9DA;
    --foundBg:   #182C33;
    --foundEdge: #2F4A52;

    --warnInk:  #E8C489;
    --warnBg:   #31281A;
    --warnEdge: #4C3D22;
    --ok:       #55C4A4;
    --danger:   #EE93A8;

    --fill: #222B3C;
    --erI:  #EE93A8;
    --erBg: #2A1A20;
    --erEd: #4C2E38;
    --inI:  #8FA6F2;
    --inBg: #1A2236;
    --inEd: #33405F;
    --p1:   #1E2734;
    --p2:   #26303F;

    --plate:    #1E2637;
    --plateInk: #8794A7;
    --pInk:     #8998A7;
    --ph1:      #232D3C;
    --ph2:      #2C3849;

    --meBg:  #2E3E74;
    --meInk: #EEF2FC;

    --okI:  #55C4A4;
    --okBg: #152622;
    --okEd: #2C4A42;
    --wI:   #E7B457;
    --wBg:  #241D10;
    --wEd:  #4A3A1A;
    --vI:   #B9A6EE;
    --vBg:  #1E1A2C;
    --vEd:  #3A3155;

    --sh:  0 1px 2px rgba(0, 0, 0, .4), 0 16px 36px rgba(0, 0, 0, .42);
    --csh: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .3);
    --dsh: 0 14px 38px rgba(0, 0, 0, .5);
}


/* ============================================================================
 * 2. PAGE BASE   (proof lines 11-13, 75-84)
 * ========================================================================== */
.la2-pg *,
.la2-pg *::before,
.la2-pg *::after { box-sizing: border-box; }

.la2-pg {
    background: var(--bg);
    color: var(--body);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    text-wrap: pretty;
}

.la2-pg h1,
.la2-pg h2,
.la2-pg h3 {
    font-family: 'Source Serif 4', Georgia, serif;
    color: var(--head);
    margin: 0;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -.01em;
}

/* Arabic composition — different display face, different rhythm.
   The line-height / letter-spacing declarations exist only to defeat
   la2etlak.css `[dir="rtl"] body { line-height: 1.9 }` (0,1,1); the values are
   the proof's own, not a new choice. */
[dir="rtl"] .la2-pg {
    font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
    line-height: 1.6;
    letter-spacing: 0;
}

[dir="rtl"] .la2-pg h1,
[dir="rtl"] .la2-pg h2,
[dir="rtl"] .la2-pg h3 {
    font-family: 'Noto Naskh Arabic', serif;
    line-height: 1.45;
    letter-spacing: 0;
    font-weight: 600;
}

.la2-pg a { color: var(--act); text-decoration: none; }
.la2-pg a:hover { color: var(--actHov); text-decoration: underline; }

.la2-pg :focus-visible {
    outline: 3px solid var(--act);
    outline-offset: 2px;
    border-radius: 4px;
}

.la2-pg img { display: block; }

/* The Arabic-face binding for the shell's own `.ubtn` / `.dtog` controls
   (EXC-FONT-1) lives with those controls in public-shell.css — `.ubtn` and
   `.dtog` are Public Shell selectors, and a foundation stylesheet must not
   style them. Moved by HOMEPAGE-PILOT-PARITY-VALIDATE-001; values unchanged. */

/* Visually hidden (proof line 154) */
.la2-pg .vh {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Content measure (proof line 83) */
.la2-pg .wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 40px;
}
/* Its narrow gutter (proof line 84, `.pg.m .wrap`). This is the FOUNDATION
   content measure, so its responsive value belongs here beside the rule it
   changes — not in the Public Shell stylesheet, which merely happens to be the
   family that first needed it. Moved by HOMEPAGE-PILOT-PARITY-VALIDATE-001;
   selector, specificity, breakpoint and value all unchanged. */
@media (max-width: 767.98px) {
    .la2-pg .wrap { padding: 0 18px; }
}


/* ============================================================================
 * 3. BUTTONS   (proof lines 86-95; FINAL_DESIGN_FOUNDATION.md §10)
 * ----------------------------------------------------------------------------
 * KNOWN COLLISION — Bootstrap also owns `.btn`.
 * `.la2-pg .btn` is (0,2,0) against Bootstrap's (0,1,0), so the locked design
 * wins on specificity and not on stylesheet order. Every property Bootstrap's
 * `.btn` sets is re-declared here (including `color` and `background-color`,
 * which the proof leaves to the variant classes) so nothing can leak through
 * from `--bs-btn-*`. No `!important`.
 * ========================================================================== */
.la2-pg .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: var(--r2);
    font: 600 15px/1 'IBM Plex Sans', sans-serif;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;

    /* Bootstrap `.btn` neutralisation — same specificity block, explicit. */
    background-color: transparent;
    color: inherit;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    box-shadow: none;
}

/* The proof marks `.btn` text-decoration `!important` because its own `a:hover`
   rule would otherwise underline a button label. Production reproduces the
   intent with specificity instead. */
.la2-pg a.btn:hover,
.la2-pg a.btn:focus { text-decoration: none; }

[dir="rtl"] .la2-pg .btn { font-family: 'IBM Plex Sans Arabic', sans-serif; }

.la2-pg .btn.sm { min-height: 44px; font-size: 14px; padding: 0 16px; }

.la2-pg .b-pri  { background: var(--pri); color: var(--priInk); border-color: var(--pri); }
.la2-pg .b-pri:hover { background: var(--priHov); border-color: var(--priHov); color: var(--priInk); }

.la2-pg .b-cta  { background: var(--orn); color: var(--ornInk); border-color: var(--orn); }
.la2-pg .b-cta:hover  { background: var(--ornHov); border-color: var(--ornHov); color: var(--ornInk); }
.la2-pg .b-cta:active { background: var(--ornPress); border-color: var(--ornPress); color: var(--ornInk); }

/* On dark surfaces a filled primary / signature CTA carries a hairline edge so
   it cannot merge into the surface (FOUNDATION §1). */
[data-bs-theme="dark"] .la2-pg .b-cta,
[data-bs-theme="dark"] .la2-pg .b-cta:hover { border-color: var(--ornPress); }
[data-bs-theme="dark"] .la2-pg .b-pri,
[data-bs-theme="dark"] .la2-pg .b-pri:hover { border-color: var(--act); }

.la2-pg .b-sec { background: var(--sec); color: var(--secInk); border-color: var(--secEdge); }
.la2-pg .b-sec:hover { border-color: var(--act); color: var(--act); background: var(--sec); }

.la2-pg .b-quiet { background: transparent; color: var(--quiet); border-color: transparent; padding: 0 12px; }
.la2-pg .b-quiet:hover { background: var(--band); color: var(--head); }

/* FILLED danger. Added by CLAIMS-PORT-001 for the three confirmation dialogs
   (cancel a claim, reject a claim, reject without a reason), where the
   destructive choice is the one being confirmed and therefore has to be the
   weightiest control in the dialog. The OUTLINE danger `.btn.b-dan` stays with
   its single consumer in item-detail.css until a second family asks for it.
   Same value the locked boards carry (`.pg .b-danf`, 5D line 94). */
.la2-pg .b-danf { background: var(--erI); color: #fff; border-color: var(--erI); }
[data-bs-theme="dark"] .la2-pg .b-danf { color: #201116; }

/* OUTLINE danger, PROMOTED from item-detail.css by
   5H-SETTINGS-FINAL-DESIGN-PORT-001. Its own docblock there said it stays with
   its single 5B consumer "until a second family asks for it"; 5H is that
   family — Remove picture, Disconnect and Turn off two-factor are all quiet
   danger controls. The two declarations are moved BYTE-FOR-BYTE, so 5B renders
   unchanged: the specificity is identical (0,3,0), foundation.css loads before
   item-detail.css, and `.owner-action--danger` still follows and still wins.
   THE 5H BOARD DRAWS `border-color: var(--erI)` HERE, NOT `--erEd`. The ported
   5B value stands: a shared component is settled by the family that ported it,
   and re-pointing this edge would move a CLOSED, parity-verified family to suit
   one later board (the ruling `--warnBg` got in 5E, and the icons in 5F).
   Declared in tests/Design/maps/settings.json, never "fixed" here. */
.la2-pg .btn.b-dan { background: transparent; color: var(--erI); border-color: var(--erEd); }
.la2-pg .btn.b-dan:hover { background: var(--erBg); border-color: var(--erI); color: var(--erI); }

/* Full-bleed action. PROMOTED from item-detail.css by the same task and for the
   same reason: every locked board writes `.blk` as the button's own full-width
   modifier (5B, 5F, and every narrow 5H frame), so it is a shared `.btn`
   modifier rather than one page's. Byte-identical to the rule it replaces. */
.la2-pg .btn.blk { width: 100%; }

/* An UNAVAILABLE control keeps its box and its 44px target and stops being
   pressable — the locked boards' own `.btn[aria-disabled=true]` (5H line 91).
   It is never the ONLY signal that something is unavailable: the reason is
   printed as visible text beside it (5H-13). */
.la2-pg .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }


/* ============================================================================
 * 4. ARROW + ICON SYSTEM   (proof lines 96-98, 333-334)
 * ----------------------------------------------------------------------------
 * The proof paints icons with a CSS mask driven by a per-icon `--i` custom
 * property, so an icon inherits `currentColor`. Ported verbatim. Directional
 * marks mirror in RTL; non-directional ones do not (FOUNDATION §8).
 * ========================================================================== */
.la2-pg {
    --arwm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

.la2-pg .arw {
    width: 14px;
    height: 14px;
    flex: none;
    background: currentColor;
    -webkit-mask: var(--arwm) center/contain no-repeat;
    mask: var(--arwm) center/contain no-repeat;
}
[dir="rtl"] .la2-pg .arw { transform: scaleX(-1); }

.la2-pg .ico {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex: none;
    background: currentColor;
    -webkit-mask: var(--i) center/contain no-repeat;
    mask: var(--i) center/contain no-repeat;
}
[dir="rtl"] .la2-pg .i-chev--inline { transform: scaleX(-1); }

/* -- UI icon family (24 viewBox, 1.75 stroke) ----------------------------- */
.la2-pg .i-mag{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%226.5%22%2F%3E%3Cpath%20d%3D%22M20%2020l-4.3-4.3%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-slider{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h9M17%207h3M4%2017h3M11%2017h9%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%227%22%20r%3D%222.2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2217%22%20r%3D%222.2%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-plus{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-pin{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s7-6.2%207-11a7%207%200%201%200-14%200c0%204.8%207%2011%207%2011z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.6%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-chev{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-x{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%206l12%2012M18%206L6%2018%22%2F%3E%3C%2Fsvg%3E")}
/* Right chevron — phase-4a-public-shell.html line 199 (drawer / submenu marker) */
.la2-pg .i-chevR{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E")}
[dir="rtl"] .la2-pg .i-chevR{transform:scaleX(-1)}
.la2-pg .i-menu{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16M4%2012h16M4%2017h16%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-globe{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22%2F%3E%3Cpath%20d%3D%22M3.5%2012h17M12%203.5c2.4%202.5%203.6%205.4%203.6%208.5s-1.2%206-3.6%208.5c-2.4-2.5-3.6-5.4-3.6-8.5S9.6%206%2012%203.5z%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-sun{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224.2%22%2F%3E%3Cpath%20d%3D%22M12%203v2.2M12%2018.8V21M3%2012h2.2M18.8%2012H21M5.6%205.6l1.6%201.6M16.8%2016.8l1.6%201.6M18.4%205.6l-1.6%201.6M7.2%2016.8l-1.6%201.6%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-moon{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2014.4A8.4%208.4%200%200%201%209.6%204a8.5%208.5%200%201%200%2010.4%2010.4z%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-bell{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%209a6%206%200%201%200-12%200c0%205-2%206.5-2%206.5h16S18%2014%2018%209z%22%2F%3E%3Cpath%20d%3D%22M10.4%2019a2%202%200%200%200%203.2%200%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-mail{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225.5%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%222.4%22%2F%3E%3Cpath%20d%3D%22M3.6%207.2l8.4%206%208.4-6%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-user{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228.5%22%20r%3D%223.7%22%2F%3E%3Cpath%20d%3D%22M4.8%2020a7.4%207.4%200%200%201%2014.4%200%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-eye{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.6%2012S6%206%2012%206s9.4%206%209.4%206-3.4%206-9.4%206-9.4-6-9.4-6z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.8%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-bookmark{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.5%204h11v16l-5.5-4-5.5%204z%22%2F%3E%3C%2Fsvg%3E")}
/* Alert triangle — SEARCH-PORT-001, from the 5A board's own `#s-alert` symbol
   (proof line 346). Used by the Search map fallback. */
.la2-pg .i-alert{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.4l8.5 14.8H3.5z'/%3E%3Cpath d='M12 9.8v4.2M12 16.9h.01'/%3E%3C/svg%3E")}
.la2-pg .i-nophoto{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222.6%22%2F%3E%3Cpath%20d%3D%22M3.6%2016.4l4.6-4.2%203.4%203M14.4%2014.2l1.8-1.6%204.2%203.6%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%229.6%22%20r%3D%221.4%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-hand{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2011V5.6a1.6%201.6%200%200%201%203.2%200V11%22%2F%3E%3Cpath%20d%3D%22M11.2%2010.4V4.4a1.6%201.6%200%200%201%203.2%200V11%22%2F%3E%3Cpath%20d%3D%22M14.4%2011V6.6a1.6%201.6%200%200%201%203.2%200V14c0%203.6-2.6%206.4-6.2%206.4S5.2%2018%205.2%2014.4v-2a1.5%201.5%200%200%201%202.9-.6%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-check{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012.6l4.4%204.4L19%207.4%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-star{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%204l2.5%205.1%205.6.8-4%203.9%201%205.6-5.1-2.7-5.1%202.7%201-5.6-4-3.9%205.6-.8z%22%2F%3E%3C%2Fsvg%3E")}
/* Check in a circle — REPORT-CARD-BADGE-VISUAL-REFINEMENT-001, the Found marker.
   Deliberately a CONTAINED check while `.i-check` stays a bare tick: Found (teal)
   and Claimed (indigo) are adjacent states on the same card, so their markers are
   separated by geometry as well as by colour and never read as the same symbol. */
.la2-pg .i-check-circle{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M8.1 12.3l2.8 2.8 5-5.6'/%3E%3C/svg%3E")}
/* Medal — REPORT-CARD-SEMANTIC-BADGE-POLISH-001, the Reward status marker.
   A circular medal head over two ribbon tails, drawn on this family's own 24
   viewBox / 1.75 stroke so it sits with `.i-star` and `.i-check` at 12px. It is
   a single-path outline painted by the `.ico` currentColor mask, so it takes the
   badge's own semantic ink and never introduces a second colour. Deliberately
   NOT a coin, a gift box or a currency glyph: reward amount and currency are
   runtime values the card does not publish, and a `£`/`EGP` mark would imply one. */
.la2-pg .i-medal{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.6' r='5.2'/%3E%3Cpath d='M9.3 13.1L7.9 21.2l4.1-2.5 4.1 2.5-1.4-8.1'/%3E%3C/svg%3E")}
.la2-pg .i-fb{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.5%208.5h2.2V5.4h-2.4c-2.2%200-3.6%201.5-3.6%203.8v1.6H8.4v3.1h2.3V21h3.2v-7.1h2.3l.4-3.1h-2.7V9.6c0-.7.2-1.1.6-1.1z%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-ig{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%224.6%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223.6%22%2F%3E%3Ccircle%20cx%3D%2216.8%22%20cy%3D%227.3%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-x2{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.5%204.5l15%2015M19.5%204.5l-15%2015%22%2F%3E%3C%2Fsvg%3E")}

/* -- Category glyph family (24 viewBox, 1.75 stroke, 20px optical) --------- */
.la2-pg .i-phone{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%226.6%22%20y%3D%222.8%22%20width%3D%2210.8%22%20height%3D%2218.4%22%20rx%3D%222.6%22%2F%3E%3Cpath%20d%3D%22M10.4%205.6h3.2%22%2F%3E%3Cpath%20d%3D%22M10.8%2018.3h2.4%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-bag{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.6%208.4h14.8l-1.1%2011a1.8%201.8%200%200%201-1.8%201.6H7.5a1.8%201.8%200%200%201-1.8-1.6z%22%2F%3E%3Cpath%20d%3D%22M9%208.4V6.2A3%203%200%200%201%2015%206.2v2.2%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-doc{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.2%22%20y%3D%225%22%20width%3D%2217.6%22%20height%3D%2214%22%20rx%3D%222.4%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2211%22%20r%3D%222.1%22%2F%3E%3Cpath%20d%3D%22M5.9%2016.2a3.3%203.3%200%200%201%206.2%200M14.6%2010h3.6M14.6%2013.4h3.6%22%2F%3E%3C%2Fsvg%3E")}
/* Shared with a second family since REPORT-FORM-PORT-001: the breadcrumb chevron,
   the info glyph and the owner-only lock are used by BOTH Item Detail and the
   Report form, so they belong to the shared icon primitives rather than to
   whichever family happened to need them first. Values are byte-identical to the
   ones item-detail.css carried, so 5B's rendering is unchanged. */
.la2-pg .i-chev-r { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E"); }
.la2-pg .i-info  { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%2016v-4M12%208h.01%22%2F%3E%3C%2Fsvg%3E"); }
.la2-pg .i-lock  { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%2211%22%20width%3D%2216%22%20height%3D%2210%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2011V7a4%204%200%20018%200v4%22%2F%3E%3C%2Fsvg%3E"); }
[dir="rtl"] .la2-pg .i-chev-r { transform: scaleX(-1); }

/* Shared with a second family since CLAIMS-PORT-001: the message glyph is used
   by BOTH Item Detail and the Claims family. Byte-identical to the declaration
   item-detail.css carried, so 5B's rendering is unchanged. */
.la2-pg .i-chat  { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a2%202%200%2001-2%202H7l-4%204V5a2%202%200%20012-2h14a2%202%200%20012%202z%22%2F%3E%3C%2Fsvg%3E"); }

.la2-pg .i-key{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%224.2%22%2F%3E%3Cpath%20d%3D%22M11%2011l8%208M16.4%2016.4l1.8-1.8M14%2014l1.6-1.6%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-watch{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224.9%22%2F%3E%3Cpath%20d%3D%22M9.2%207.4l.5-3.2h4.6l.5%203.2M9.2%2016.6l.5%203.2h4.6l.5-3.2M12%2010v2.4l1.6%201%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-wallet{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.2%22%20y%3D%226%22%20width%3D%2217.6%22%20height%3D%2213%22%20rx%3D%222.6%22%2F%3E%3Cpath%20d%3D%22M3.2%2010h17.6%22%2F%3E%3Ccircle%20cx%3D%2216.6%22%20cy%3D%2214.4%22%20r%3D%221.15%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-pet{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.2%2012.2c-1.5%201-2.3%202.6-2.3%204.2%200%202.4%202.1%203.8%205%203.8s5-1.4%205-3.8c0-1.6-.8-3.2-2.3-4.2%22%2F%3E%3Cpath%20d%3D%22M6.2%2012.2A3.8%203.8%200%200%201%2012%209a3.8%203.8%200%200%201%205.8%203.2%22%2F%3E%3Cpath%20d%3D%22M5.4%208.6L4%204.6l3.6%202M18.6%208.6L20%204.6l-3.6%202%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-shirt{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%203.6l3%202.2%203-2.2%205.2%203-2%204-1.8-.8V20a1%201%200%200%201-1%201H7.6a1%201%200%200%201-1-1V9.8l-1.8.8-2-4z%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-book{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.4%204.6h9.2a3.4%203.4%200%200%201%203.4%203.4V21H7.8a3.4%203.4%200%200%201-3.4-3.4z%22%2F%3E%3Cpath%20d%3D%22M17%208h2.6v13H17M8%209h5M8%2012.6h5%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-ball{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.6%22%2F%3E%3Cpath%20d%3D%22M12%203.4c2.4%202.4%203.6%205.3%203.6%208.6S14.4%2018.2%2012%2020.6C9.6%2018.2%208.4%2015.3%208.4%2012S9.6%205.8%2012%203.4z%22%2F%3E%3Cpath%20d%3D%22M3.6%2012h16.8%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-med{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.2%22%20y%3D%227%22%20width%3D%2217.6%22%20height%3D%2213%22%20rx%3D%222.6%22%2F%3E%3Cpath%20d%3D%22M9%207V5.4a1.6%201.6%200%200%201%201.6-1.6h2.8A1.6%201.6%200%200%201%2015%205.4V7M12%2011.2v4.6M9.7%2013.5h4.6%22%2F%3E%3C%2Fsvg%3E")}
.la2-pg .i-fallback{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.4%2010.6l6.2-6.2a2%202%200%200%201%201.4-.6h5.6a2%202%200%200%201%202%202v5.6a2%202%200%200%201-.6%201.4l-6.2%206.2a2%202%200%200%201-2.8%200l-5.6-5.6a2%202%200%200%201%200-2.8z%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%228%22%20r%3D%221.3%22%2F%3E%3C%2Fsvg%3E")}

/* -- Promoted to shared: a SECOND family now needs these ------------------- *
 * `i-chev-l` was report-form.css's and `i-clock` was claims.css's, each with a
 * single consumer. 5E Messages is the second consumer of both — the rail's
 * "Newer" control and the composer's rate-limit notice — which by the rule those
 * files already record ("move them up when a second family asks") makes them
 * shared primitives. The bytes are UNCHANGED from the definitions 5C and 5D were
 * parity-verified against, so neither family moves by a pixel (MESSAGES-PORT-001).
 * ------------------------------------------------------------------------- */
.la2-pg .i-chev-l  { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%206l-6%206%206%206%22%2F%3E%3C%2Fsvg%3E"); }
.la2-pg .i-clock { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22%2F%3E%3Cpath%20d%3D%22M12%207.5V12l3.2%202%22%2F%3E%3C%2Fsvg%3E"); }

/* -- Promoted to shared: a SECOND family now needs these ------------------- *
 * `i-report-doc`, `i-shield-alert`, `i-shield-check` and `i-seen` were 5E Messages',
 * each with a single consumer. The 5F Notifications board draws the SAME three
 * objects with byte-identical geometry -- the folded-corner document on a claim
 * row, the alert shield on a report row and the check shield on a claim-decision
 * row, and the double tick 5E draws as a seen receipt is the same double tick 5F
 * draws on Mark all as read -- which by the rule messages.css already records
 * ("move them up when a
 * second family asks") makes them shared primitives. The bytes are UNCHANGED from
 * the definitions 5E was parity-verified against, so 5E does not move by a pixel
 * (NOTIFICATIONS-PORT-001).
 * ------------------------------------------------------------------------- */
.la2-pg .i-report-doc { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%205.5A1.5%201.5%200%200%201%205.5%204H14l6%206v8.5A1.5%201.5%200%200%201%2018.5%2020h-13A1.5%201.5%200%200%201%204%2018.5z'/%3E%3Cpath%20d='M14%204v6h6'/%3E%3C/svg%3E"); }
.la2-pg .i-shield-alert { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203.5%2020%206v6c0%204.5-3.2%207.5-8%209-4.8-1.5-8-4.5-8-9V6z'/%3E%3Cpath%20d='M12%209v4'/%3E%3Cpath%20d='M12%2016h.01'/%3E%3C/svg%3E"); }
.la2-pg .i-shield-check { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2012.5%2011%2015l4.5-5'/%3E%3Cpath%20d='M12%203.5%2020%206v6c0%204.5-3.2%207.5-8%209-4.8-1.5-8-4.5-8-9V6z'/%3E%3C/svg%3E"); }
.la2-pg .i-seen { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m3%2012.5%204%204%208-9'/%3E%3Cpath%20d='m13%2016.5%208-9'/%3E%3C/svg%3E"); }
/* -- NEW SHARED PRIMITIVES — 5G Dashboard / account shell ------------------ *
 * Five objects no ported family owned yet, each drawn by the locked 5G board
 * (`s-arrow`, `s-grid`, `s-gear`, `s-card`, `s-out`) and by the 4B account
 * shell that board reuses. They are icon PRIMITIVES, so they belong here rather
 * than in one page stylesheet — the same place `i-clock` and `i-report-doc`
 * were promoted to. Additive only: no existing declaration is touched, so no
 * verified family moves by a pixel (5G-DASHBOARD-FINAL-DESIGN-PORT-001).
 *
 * `i-arrow` is directional but is NOT mirrored here: the 5G board mirrors it on
 * the CONSUMER (`.pg[dir=rtl] .stat .to .gi`), so the rule lives in
 * dashboard.css where the board put it. `i-signout` is left unmirrored because
 * both locked boards draw it unmirrored in their Arabic frames.
 * ------------------------------------------------------------------------- */
.la2-pg .i-arrow { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4.5%2012h14M13.5%207l5%205-5%205'/%3E%3C/svg%3E"); }
.la2-pg .i-grid { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='4'%20width='7'%20height='7'%20rx='1.6'/%3E%3Crect%20x='13'%20y='4'%20width='7'%20height='7'%20rx='1.6'/%3E%3Crect%20x='4'%20y='13'%20width='7'%20height='7'%20rx='1.6'/%3E%3Crect%20x='13'%20y='13'%20width='7'%20height='7'%20rx='1.6'/%3E%3C/svg%3E"); }
.la2-pg .i-gear { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='3.1'/%3E%3Cpath%20d='M12%203.2v2.6M12%2018.2v2.6M3.2%2012h2.6M18.2%2012h2.6M5.8%205.8l1.9%201.9M16.3%2016.3l1.9%201.9M18.2%205.8l-1.9%201.9M7.7%2016.3l-1.9%201.9'/%3E%3C/svg%3E"); }
.la2-pg .i-card { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='6'%20width='18'%20height='12'%20rx='2.4'/%3E%3Cpath%20d='M3.4%2010.4h17.2M6.6%2014.6h3.4'/%3E%3C/svg%3E"); }
.la2-pg .i-signout { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14%204.5H6.4v15H14'/%3E%3Cpath%20d='M12.6%2012h7.4M17.4%208.8l3.2%203.2-3.2%203.2'/%3E%3C/svg%3E"); }

/* --- FOUR MORE OBJECTS NOTHING OWNED YET  (5H-SETTINGS-FINAL-DESIGN-PORT-001)
 * Added from the locked 5H board unchanged (`s-img`, `s-trash`, `s-link`,
 * `s-goo`), on the rule 5F installed and 5G followed: a family CONSUMES a
 * shared icon when the board draws the same OBJECT, and an object nothing owns
 * is promoted here rather than declared inside one page stylesheet. Additive
 * only — no existing declaration is touched, so no verified family moves by a
 * pixel. None of the four is directional, so none is mirrored.
 * ------------------------------------------------------------------------- */
/* PROMOTED from report-form.css by the same task, BYTE-FOR-BYTE: 5C declared
 * it with the note "move them up when a second family asks", and 5H is that
 * family (Remove picture). 5C renders unchanged — same selector, same
 * specificity, and nothing else declares `--i` for this name.
 * ------------------------------------------------------------------------- */
.la2-pg .i-trash   { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18M8%206V4a1%201%200%20011-1h6a1%201%200%20011%201v2M19%206l-1%2014a2%202%200%2001-2%202H8a2%202%200%2001-2-2L5%206%22%2F%3E%3C%2Fsvg%3E"); }

.la2-pg .i-image { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3.4'%20y='5'%20width='17.2'%20height='14'%20rx='2.4'/%3E%3Ccircle%20cx='8.8'%20cy='10'%20r='1.7'/%3E%3Cpath%20d='M4.4%2017l4.8-4.4%203.4%203%203-2.4%204%203.6'/%3E%3C/svg%3E"); }
.la2-pg .i-link  { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10.2%2013.8a4%204%200%200%200%205.7%200l2.6-2.6a4%204%200%200%200-5.7-5.7l-1.3%201.3'/%3E%3Cpath%20d='M13.8%2010.2a4%204%200%200%200-5.7%200l-2.6%202.6a4%204%200%200%200%205.7%205.7l1.3-1.3'/%3E%3C/svg%3E"); }
.la2-pg .i-google { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='8.4'/%3E%3Cpath%20d='M12%209.4h4.4a4.6%204.6%200%201%201-1.4-3.2'/%3E%3C/svg%3E"); }

/* --- ONE MORE OBJECT NOTHING OWNED YET  (5H-SETTINGS-OWNER-REDESIGN-AND-CLOSE-001)
 * The owner's Theme selector draws three cards — sun, moon and the DEVICE whose
 * setting "System" follows. `i-sun` and `i-moon` already exist here; the device
 * did not exist anywhere, so it is declared here rather than inside one page
 * stylesheet, on the rule 5F installed and 5G and 5H followed. Additive only —
 * no existing declaration is touched, so no verified family moves by a pixel.
 * Not directional, so not mirrored.
 * ------------------------------------------------------------------------- */
.la2-pg .i-monitor { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4.5'%20width='18'%20height='12.5'%20rx='2.2'/%3E%3Cpath%20d='M9%2020.5h6M12%2017v3.5'/%3E%3C/svg%3E"); }

/* --- ONE MORE OBJECT, AND ONE PROMOTION  (5K-PUBLIC-OWNER-PROFILE-STAGE-B-FINAL-PORT-001)
 * The public profile draws a CROWN on the Premium badge and a FLAG on the
 * Report-user control.
 *
 * `i-crown` is NEW: no crown existed anywhere in this layer, and the nearest
 * names are `i-star` (a star, which the Featured chip already owns) and
 * `i-medal` (the Reward chip's) — both different pictures. Additive only, so no
 * existing declaration is touched and no verified family moves by a pixel. It
 * encodes its stroke as `%23000`, never a literal `#`, because a `#` opens a
 * URL's FRAGMENT and silently truncates the payload (5E-P10).
 *
 * `i-flag` is a PROMOTION, byte-for-byte: 5B declared it in item-detail.css with
 * the note "each has exactly one consumer today ... move them up when a second
 * family asks", and 5K's Report-user control is that second family. The bytes
 * are unchanged, this file is now the sole owner, and 5B renders exactly what it
 * rendered before — the same move 5H made for `i-trash`, 5F for four messaging
 * glyphs and 5J for the shared paginator.
 *
 * The board's Partner badge draws a shield with a check, which IS
 * `i-shield-check` above, so 5K consumes that one and declares nothing for it —
 * a family takes its own name only when the OBJECT differs (the rule 5F
 * installed and 5G, 5H and 5J followed). By the same rule 5K consumes the
 * INCUMBENT `i-flag` drawing rather than the board's own pole-flag glyph: the
 * product has one icon family, and 5B's is the one already in it.
 * ------------------------------------------------------------------------- */
/* `i-home` — NEW, from the locked 4C V2 board's own `#s-home` symbol. No
   family owned a house mark before the Auth header's real Home destination
   asked for one, so it is declared here, where the shared icon primitives live
   (the same move 5K made for `i-crown`). Stroke encoded `%23000`: a bare `#`
   would open the URL's FRAGMENT and truncate the payload (5E-P10).           */
.la2-pg .i-home { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2010.6%2012%204l8%206.6V20h-5.4v-5.2H9.4V20H4z'/%3E%3C/svg%3E"); }
.la2-pg .i-crown { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.5%207.5l3.6%203.2L12%205l4.9%205.7%203.6-3.2-1.7%2010.5H5.2z'/%3E%3C/svg%3E"); }
.la2-pg .i-flag  { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2015s1-1%204-1%205%202%208%202%204-1%204-1V3s-1%201-4%201-5-2-8-2-4%201-4%201z%22%2F%3E%3Cpath%20d%3D%22M4%2022v-7%22%2F%3E%3C%2Fsvg%3E"); }

/* --- ONE PROMOTION  (ADMIN-F1-AUTH-STAGE-B-FINAL-DESIGN-PORT-001)
 * `i-ext` — the external-link mark, BYTE-FOR-BYTE out of item-detail.css.
 *
 * 5B declared it there with that file's own standing note: "each has exactly one
 * consumer today, and this file's own rule is not to generalise a primitive
 * before a second family asks for it. Move them up when one does." The F1
 * admission masthead's ONE escape control, "Return to site", is that second
 * family — it leaves the control panel for the public site, which is the same
 * OBJECT 5B draws.
 *
 * A family takes its own NAME only when the object differs (the rule 5F
 * installed and 5G, 5H, 5J and 5K followed); this object does not differ, so F1
 * declares nothing of its own and the primitive moves up to its shared owner
 * instead. Exactly the move 5K made for `i-flag`, 5H for `i-trash` and 5F for
 * four messaging glyphs.
 *
 * 5B RENDERS EXACTLY WHAT IT RENDERED BEFORE: same bytes (including its own
 * stroke-width 2), same selector, same specificity (0,2,0), foundation.css loads
 * before item-detail.css, and nothing else declares `--i` for this name. No
 * parity axis is affected.
 *
 * NOT mirrored. The mark is a diagonal "leaves this surface" arrow rather than a
 * reading-direction indicator — which is why the locked F1 board flips only its
 * sequence chevron and leaves this one alone.
 * ------------------------------------------------------------------------- */
.la2-pg .i-ext   { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%2013v6a2%202%200%2001-2%202H5a2%202%200%2001-2-2V8a2%202%200%20012-2h6%22%2F%3E%3Cpath%20d%3D%22M15%203h6v6M10%2014L21%203%22%2F%3E%3C%2Fsvg%3E"); }

/* Directional glyph — follows the reading direction. */
[dir="rtl"] .la2-pg .i-chev-l { transform: scaleX(-1); }


/* ============================================================================
 * 5. MOTION   (FINAL_DESIGN_FOUNDATION.md §20)
 * Reduced motion removes movement, never function.
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .la2-pg *,
    .la2-pg *::before,
    .la2-pg *::after {
        transition-duration: .01ms;
        animation-duration: .01ms;
        animation-iteration-count: 1;
        scroll-behavior: auto;
    }
}


/* ============================================================================
 * 6. PAGINATOR   (5A proof lines 261-266; the same family on the 5J board)
 * ----------------------------------------------------------------------------
 * The rendered markup is components/design/pagination.blade.php, a SHARED Blade
 * paginator view. Its rules lived in search.css while Search was its only
 * consumer; 5J Report collections is the second, and its own locked board draws
 * the identical `.pager` / `.pgl` family — so by the rule this layer already
 * follows (a member two families draw the same way belongs to the shared owner,
 * NOTIFICATIONS-PORT-001) the whole family moved here with its bytes UNCHANGED.
 *
 * MOVED, NOT REWRITTEN. Every declaration below is byte-identical to the one it
 * replaces; this file loads before every page stylesheet and nothing re-declares
 * these selectors, so Search's computed styles do not change and 5A does not
 * move. Search keeps `.pginfo` — its own result-count line, which is not the
 * paginator.
 *
 * `.pgl` carries the 44px floor on the CONTROL itself, never on its container.
 * `.off` is a non-interactive <span> in the shared view, not a disabled link.
 * ========================================================================== */
.la2-pg .pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 26px;
    flex-wrap: wrap;
}
.la2-pg .pgl {
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--body);
}
.la2-pg .pgl:hover { background: var(--band); color: var(--head); text-decoration: none; }
.la2-pg .pgl[aria-current] { background: var(--act); color: var(--actInk); }
.la2-pg .pgl.ell { color: var(--muted); font-weight: 400; min-width: 22px; padding: 0; }
.la2-pg .pgl.off { color: var(--muted); opacity: .55; }