/* ============================================================================
   NOTIFICATIONS — 5F family composition (date-led timeline · bell panel)
   ============================================================================

   Ported from docs/design/locked/2026-08-11/phase-5f-notifications.html
   (Option B — date-led timeline · FINAL AUTHORITY, NOTIFICATIONS-PORT-001).
   PORT, DO NOT INTERPRET: every value below is copied from that board.

   WHERE THIS FILE IS LOADED — and why it is not a per-page sheet
   -------------------------------------------------------------
   Unlike every earlier family sheet, 5F is loaded by the SHELL LAYOUT rather
   than by one page, because the family has two surfaces and only one of them
   is a page:

     · the notification CENTRE — /notifications, which opts into the ported
       shell with @section('design_shell') like any other ported page; and
     · the bell PANEL — resources/views/notifications/_dropdown.blade.php,
       which the shell's own bell fetches and injects on EVERY authenticated
       page, ported and un-ported alike, because both navbars point at the same
       route and the same partial.

   A partial that renders on an un-ported page cannot rely on the `.la2-pg`
   body class, so the panel CONTAINER carries `class="la2-pg ntf-dd"` itself in
   both navbars. That is why exactly ONE selector in this file is the
   same-element compound `.la2-pg.ntf-dd`; everything inside the panel is an
   ordinary `.la2-pg <member>` descendant rule that resolves identically in
   both shells. foundation.css is loaded unconditionally for the same reason —
   the panel needs the token set wherever it opens. Both files are wholly
   `.la2-pg`-scoped, so a page that does not opt in still renders byte for byte
   as it did before (PARITY_METHOD §9).

   WHAT THIS FILE OWNS
   -------------------
   5F-SPECIFIC composition only: the notification centre's content column and
   page head, the unread summary, Mark-all-as-read, the date-section headers and
   their rule, the timeline rail and its type nodes, the notification plaque
   (open and static variants), the row meta strip — New chip, family label,
   timestamp, destination label, the no-linked-page note — the per-row Mark-read
   control, the Newer/Older paginator, the empty centre, and the bell panel:
   its chrome, pinned header and footer, scrolling list, panel-scale timeline,
   loading skeleton and the empty / failure states.

   WHAT IT DOES NOT OWN — and never redefines
   ------------------------------------------
     · tokens, type scale, `.btn` / `.b-*`, `.ico` / `.i-*`, `.vh`, `.wrap`
                                                          -> foundation.css
     · header, drawer, footer, the bell, `.cnt-badge`, `.ubtn`, `.ubtn-wrap`
                                                          -> public-shell.css
     · flash messages — the shell renders them above <main>; the board draws one
       inside the column, which is a SHELL composition question, not 5F's.

   NAMING — why these are not the board's own class names
   ------------------------------------------------------
   Same rule 5E recorded (ledger §42.2). The board is a self-contained document
   and its short names already have owners in the ported layer: `.cnt` and
   `.rail` are Search's, `.ph` is Item Detail's, `.chip` is Claims', `.dd` and
   `.drop` would collide with Bootstrap's dropdown, and `.wrap` / `.vh` / `.btn`
   are foundation's. Every 5F member therefore carries an `ntf-` prefix applied
   MECHANICALLY to the board's own name, so `.ntf-ob-item` is the board's
   `.ob-item` and nothing else. Correspondence is declared by `data-parity` hook
   in tests/Design/maps/notifications.json, never by name.

   RECORDED DIVERGENCE — the narrow `.wrap` gutter
   -----------------------------------------------
   The 5F board's own copy of the shared wrapper reads
   `.pg.m .wrap{padding:0 16px}`. foundation.css owns `.wrap` and its narrow
   gutter is 18px, ported from Homepage 3-v3 and parity-verified in five closed
   families. The shared owner wins over one board's outlier copy — the same
   ruling the `--warnBg` / `--warnInk` tokens got in 5E — so the gutter stays
   18px and the 2px is declared in the correspondence map, never "fixed" here.

   THE MOBILE SHEET IS NOT IN THIS FILE
   ------------------------------------
   The board's `.dd.sheet` is a full-width sheet opened from a bell that stays in
   the mobile header. The settled Public Shell hides the whole `.util-desktop`
   cluster — bell and panel container together — below 1080 and offers a plain
   link to /notifications in the drawer instead. The sheet therefore has NO
   runtime trigger, and giving it one would change a closed, parity-verified
   family from inside 5F. It is registered as a named gap for the Public Shell
   port rather than shipped as CSS nothing can reach.
   ========================================================================== */


/* ── 0 · ICONS THIS FAMILY ADDS ────────────────────────────────────────────
   The shared icon family is a MASKED `<span class="ico i-*">` painted with
   `background: currentColor` through a `--i` mask — never an inline <svg>. The
   board draws inline <svg>, so the geometry below is transcribed from its own
   paths at its own `.gi` stroke width (1.75).

   WHICH BOARD GLYPHS DID **NOT** BECOME NEW ICONS, and why
   --------------------------------------------------------
   The rule 5E recorded for `i-report-doc` (ledger §42.2) cuts both ways: a
   family takes its own icon name when the shared name draws a DIFFERENT OBJECT,
   and consumes the shared primitive when it draws the SAME one. Six of the
   board's marks draw an object foundation already owns, so 5F consumes the
   shared primitive and the coordinate difference is declared in the
   correspondence map rather than resolved by adding a near-duplicate:

     board glyph                        shared primitive consumed
     bell (empty centre + empty panel)  `i-bell`     — the shell's own bell,
                                        parity-verified in 4A / Homepage
     bare tick (Mark read)              `i-check`
     chevron right (destination, Older) `i-chev-r`   — RTL-flipped by foundation
     chevron left (Newer)               `i-chev-l`   — RTL-flipped by foundation
     magnifier (Match node)             `i-mag`
     chat bubble (Message node)         `i-chat`
     payment card (Subscription node)   `i-wallet`
     double tick (Mark all as read)     `i-seen`     — 5E's seen receipt is the
                                        same double tick, promoted by this port

   Four of those — `i-report-doc`, `i-shield-alert`, `i-shield-check` and
   `i-seen` — were 5E's, drawn by this board as the same objects, so 5F is their
   SECOND consumer and they were PROMOTED to foundation.css by this port with
   their bytes unchanged.

   That leaves the ONE below, which has no shared equivalent at all: foundation's
   `i-info` is an information mark and `i-alert` a warning triangle, neither of
   which is the board's exclamation-in-a-circle. It has exactly one consumer
   today, so it stays with its consumer — move it up when a second family asks. */

.la2-pg .i-alert-circle { --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='9'/%3E%3Cpath%20d='M12%208v4'/%3E%3Cpath%20d='M12%2016h.01'/%3E%3C/svg%3E"); }


/* ============================================================================
   1 · CONTENT COLUMN   (proof `.col`, board line 84)
   ========================================================================== */

.la2-pg .ntf-col {
    max-width: 820px;
    margin: 0 auto;
    padding: 26px 0 30px;
}

/* The board's form reset: every action on this family is its own <form>, and a
   form must not introduce a box of its own between the grid and the control
   (proof `.f`, board line 82). */
.la2-pg .ntf-f {
    margin: 0;
    display: flex;
    min-width: 0;
}


/* ============================================================================
   2 · PAGE HEAD   (proof `.ph`, `.ph h1`, `.ph .cnt`, `.mall`)
   ========================================================================== */

.la2-pg .ntf-ph {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}

.la2-pg .ntf-ph h1 { font-size: 28px; }

.la2-pg .ntf-ph .ntf-cnt {
    font-size: 13.5px;
    color: var(--muted);
    margin: 5px 0 0;
}

/* Mark all as read — a secondary control, never below 44 x 44. */
.la2-pg .ntf-mall {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    min-height: 44px;
    min-width: 44px;
    padding: 0 15px;
    border-radius: var(--r2);
    border: 1px solid var(--secEdge);
    background: var(--sec);
    color: var(--secInk);
    font: 600 13.5px/1 'IBM Plex Sans', sans-serif;
    cursor: pointer;
}
.la2-pg .ntf-mall:hover { background: var(--fill); }
[dir="rtl"] .la2-pg .ntf-mall { font-family: 'IBM Plex Sans Arabic', sans-serif; }

/* The board's `.mall.blk{width:100%}` and its form's `style="display:block"` are
   drawn only on the narrow frames, so they are expressed as the breakpoint they
   really are rather than as a class one template cannot switch on. See §10. */

.la2-pg .ntf-mall .ico { width: 16px; height: 16px; }


/* ============================================================================
   3 · TYPE TONES   (proof `.nu` `.v` `.in` `.ok` `.w` `.er`)
   ----------------------------------------------------------------------------
   One tone per notification FAMILY, exactly as the board's "All verified
   notification families" table assigns them — Match violet, Claim blue, Message
   green, Report amber, Subscription neutral, System red. The tone sets three
   local custom properties the node and the family label read; it paints nothing
   itself.
   ========================================================================== */

.la2-pg .ntf-nu { --ti: var(--muted); --tb: var(--band);  --te: var(--edge); }
.la2-pg .ntf-v  { --ti: var(--vI);    --tb: var(--vBg);   --te: var(--vEd); }
.la2-pg .ntf-in { --ti: var(--inI);   --tb: var(--inBg);  --te: var(--inEd); }
.la2-pg .ntf-ok { --ti: var(--okI);   --tb: var(--okBg);  --te: var(--okEd); }
.la2-pg .ntf-w  { --ti: var(--wI);    --tb: var(--wBg);   --te: var(--wEd); }
.la2-pg .ntf-er { --ti: var(--erI);   --tb: var(--erBg);  --te: var(--erEd); }


/* ============================================================================
   4 · DATE SECTIONS AND THE TIMELINE RAIL   (proof `.ob-day` / `.ob-sect`)
   ----------------------------------------------------------------------------
   Presentational only. The sections are derived from `created_at` INSIDE the
   current paginator page; they never merge pages, never claim a complete day
   and never reorder. A date may legitimately split across two pages.
   ========================================================================== */

.la2-pg .ntf-ob-day {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 28px 0 6px;
}
.la2-pg .ntf-ob-day:first-child { margin-top: 0; }

.la2-pg .ntf-ob-day h2,
.la2-pg .ntf-ob-day p {
    font: 700 11px/1 'IBM Plex Sans', sans-serif;
    font-family: 'IBM Plex Sans', sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    flex: none;
    margin: 0;
}

/* Arabic reads these as ordinary labels, not mechanical uppercase. */
[dir="rtl"] .la2-pg .ntf-ob-day h2,
[dir="rtl"] .la2-pg .ntf-ob-day p {
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    letter-spacing: .04em;
    text-transform: none;
    font-size: 12.5px;
}

.la2-pg .ntf-ob-day .ntf-ln {
    flex: 1;
    height: 1px;
    background: var(--line);
}

.la2-pg .ntf-ob-sect {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

/* The continuous rail the type nodes sit on. */
.la2-pg .ntf-ob-sect::before {
    content: "";
    position: absolute;
    inset-block: 18px;
    inset-inline-start: 19px;
    width: 2px;
    background: var(--line);
}


/* ============================================================================
   5 · THE TIMELINE ROW   (proof `.ob-item`, `.ob-node`, `.tn`, `.ob-open`)
   ----------------------------------------------------------------------------
   Three tracks: the node, the plaque, and the Mark-read sibling. Open and
   Mark read are two SIBLING forms inside the row grid — never nested, and no
   interactive control inside another.
   ========================================================================== */

.la2-pg .ntf-ob-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: start;
    padding: 5px 0;
}

.la2-pg .ntf-ob-node {
    width: 40px;
    display: flex;
    justify-content: center;
    padding-top: 15px;
}

.la2-pg .ntf-tn {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--bg);
    border: 2px solid var(--te);
    color: var(--ti);
    position: relative;
    z-index: 1;
}
.la2-pg .ntf-tn .ico { width: 15px; height: 15px; }

/* Unread carries a FILLED node — a non-colour cue that survives greyscale. */
.la2-pg .ntf-tn.ntf-fill {
    background: var(--tb);
    border-color: var(--ti);
}


/* ── The plaque ────────────────────────────────────────────────────────────
   With a safe target it is the Open submit; with none it is the same box as a
   static <div>. Never a disabled button. */

.la2-pg .ntf-ob-open {
    display: block;
    width: 100%;
    text-align: start;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 12px 16px;
    font: inherit;
    color: inherit;
    cursor: pointer;
    min-width: 0;
}
.la2-pg .ntf-ob-open:hover {
    background: var(--band2);
    border-color: var(--line);
}
[dir="rtl"] .la2-pg .ntf-ob-open { font-family: 'IBM Plex Sans Arabic', sans-serif; }

/* Static — the notification has no reachable target. */
.la2-pg .ntf-ob-open.ntf-st { cursor: default; }
.la2-pg .ntf-ob-open.ntf-st:hover {
    background: transparent;
    border-color: transparent;
}

/* Unread — tinted plaque with a hairline. */
.la2-pg .ntf-ob-item.ntf-un .ntf-ob-open {
    background: var(--inBg);
    border-color: var(--inEd);
}
.la2-pg .ntf-ob-item.ntf-un .ntf-ob-open:hover {
    background: var(--inBg);
    border-color: var(--act);
}

.la2-pg .ntf-ob-t {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--head);
    letter-spacing: -.005em;
}
.la2-pg .ntf-ob-item.ntf-un .ntf-ob-t { font-weight: 700; }

.la2-pg .ntf-ob-b {
    display: block;
    font-size: 13.5px;
    color: var(--body);
    margin: 4px 0 0;
    max-width: 62ch;
}


/* ── The row meta strip ───────────────────────────────────────────────────── */

.la2-pg .ntf-ob-m {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 9px 0 0;
}

.la2-pg .ntf-ob-tm {
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The notification family label, tinted by the row's tone. */
.la2-pg .ntf-ob-lb {
    white-space: nowrap;
    font: 700 10px/1 'IBM Plex Sans', sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ti);
    padding: 4px 7px;
    border-radius: 4px;
    background: var(--tb);
}
[dir="rtl"] .la2-pg .ntf-ob-lb {
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    letter-spacing: .02em;
    text-transform: none;
    font-size: 11px;
}

/* The unread chip. Its dot is a second, non-colour unread cue. */
.la2-pg .ntf-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 21px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--act);
    color: var(--actInk);
    font: 700 10.5px/1 'IBM Plex Sans', sans-serif;
    letter-spacing: .04em;
}
.la2-pg .ntf-chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
[dir="rtl"] .la2-pg .ntf-chip { font-family: 'IBM Plex Sans Arabic', sans-serif; }

/* The destination, named in words. */
.la2-pg .ntf-ob-go {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: auto;
    font: 600 13px/1 'IBM Plex Sans', sans-serif;
    color: var(--act);
}
[dir="rtl"] .la2-pg .ntf-ob-go { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.la2-pg .ntf-ob-go .ico { width: 14px; height: 14px; }

/* No safe target — a quiet note, not a dead control. */
.la2-pg .ntf-ob-no {
    margin-inline-start: auto;
    font-size: 12px;
    color: var(--muted);
    border: 1px dashed var(--edge);
    border-radius: 5px;
    padding: 3px 8px;
}


/* ── Mark as read — never below 44 x 44 in any context ────────────────────── */

.la2-pg .ntf-ob-mr {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 13px;
    padding: 0 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--act);
    border-radius: var(--r2);
    font: 600 12.5px/1 'IBM Plex Sans', sans-serif;
    cursor: pointer;
    white-space: nowrap;
}
.la2-pg .ntf-ob-mr:hover {
    background: var(--fill);
    border-color: var(--edge);
}
[dir="rtl"] .la2-pg .ntf-ob-mr { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.la2-pg .ntf-ob-mr .ico { width: 15px; height: 15px; }


/* ============================================================================
   6 · PAGINATOR   (proof `.pgr`, `.pgb-g`, `.pgb`)
   ----------------------------------------------------------------------------
   The unavailable control is NONINTERACTIVE and not focusable — never a
   disabled-looking button that still takes a tab stop.
   ========================================================================== */

.la2-pg .ntf-pgr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 22px 0 0;
    font-size: 13px;
    color: var(--muted);
}

/* The per-page clause. The board prints "Page 1 of 3 · 15 per page" on its
   desktop frames and drops the clause on every narrow one; with a single
   template the breakpoint is what drops it. Decorative metadata only — no
   function is hidden, and the page position itself always stays. */
.la2-pg .ntf-pgr-per { white-space: nowrap; }

.la2-pg .ntf-pgb-g { display: flex; gap: 8px; }

.la2-pg .ntf-pgb {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border: 1px solid var(--secEdge);
    border-radius: var(--r2);
    font: 600 13.5px/1 'IBM Plex Sans', sans-serif;
    background: var(--sec);
    color: var(--secInk);
}
.la2-pg .ntf-pgb:hover {
    background: var(--fill);
    color: var(--secInk);
    text-decoration: none;
}
.la2-pg .ntf-pgb.ntf-off {
    opacity: .45;
    pointer-events: none;
}

/* THE BOARD'S OWN CASCADE, restored deliberately.
   The board writes `.pgb{...;color:var(--secInk)}` at specificity (0,1,0), where
   its own `.pg a{color:var(--act)}` is (0,1,1) — so on the board a pager LINK
   renders in ACTION BLUE and only the unavailable <span> takes `--secInk`. The
   ported selector is `.la2-pg .ntf-pgb` at (0,2,0), which would have overridden
   that and turned both into `--secInk`. L1 is read off COMPUTED STYLE, never off
   the stylesheet text (PARITY_METHOD §2), so the board's RENDERED result is the
   target and the anchor case is restored explicitly. Found by L2A on
   `pager-control[1]`; NOTIFICATIONS-PORT-001. */
.la2-pg a.ntf-pgb        { color: var(--act); }
.la2-pg a.ntf-pgb:hover  { color: var(--actHov); }
[dir="rtl"] .la2-pg .ntf-pgb { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.la2-pg .ntf-pgb .ico { width: 14px; height: 14px; }


/* ============================================================================
   7 · EMPTY CENTRE   (proof `.emptyc`)
   ========================================================================== */

.la2-pg .ntf-emptyc {
    border: 1px dashed var(--edge);
    border-radius: var(--r3);
    background: var(--band2);
    padding: 56px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.la2-pg .ntf-emptyc .ico {
    width: 34px;
    height: 34px;
    color: var(--pInk);
}
.la2-pg .ntf-emptyc h2 {
    font-size: 19px;
    font-family: 'Source Serif 4', Georgia, serif;
}
.la2-pg .ntf-emptyc p {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
    max-width: 46ch;
}


/* ============================================================================
   8 · THE BELL PANEL   (proof `.dd` and its parts)
   ----------------------------------------------------------------------------
   THE ONE SAME-ELEMENT COMPOUND IN THIS FILE. The panel container is the
   element that carries both the design scope and the panel class, because the
   partial inside it also renders on pages whose <body> is not `.la2-pg` — see
   the file header. Everything below it is an ordinary descendant rule.
   ========================================================================== */

.la2-pg.ntf-dd {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    width: 400px;
    max-width: calc(100vw - 24px);
    background: var(--bg);
    border: 1px solid var(--edge);
    border-radius: var(--r3);
    box-shadow: var(--dsh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 20;
    text-align: start;
}

/* `hidden` must win over the flex display above — the panel is closed until the
   bell opens it, and a closed panel that still laid out would cover the page. */
.la2-pg.ntf-dd[hidden] { display: none; }

/* ── Pinned header ───────────────────────────────────────────────────────── */
.la2-pg .ntf-ddh {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--band2);
}
.la2-pg .ntf-ddh h2 {
    font: 700 14.5px/1.3 'IBM Plex Sans', sans-serif;
    letter-spacing: .01em;
}
[dir="rtl"] .la2-pg .ntf-ddh h2 { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.la2-pg .ntf-ddh .ntf-cnt {
    font-size: 12px;
    color: var(--muted);
    margin: 2px 0 0;
}

.la2-pg .ntf-ddlink {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    white-space: nowrap;
    border-radius: 8px;
    font: 600 12.5px/1 'IBM Plex Sans', sans-serif;
    background: none;
    border: 0;
    color: var(--act);
    cursor: pointer;
    flex: none;
}
[dir="rtl"] .la2-pg .ntf-ddlink { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.la2-pg .ntf-ddlink:hover { background: var(--fill); }

/* ── The only region that scrolls ────────────────────────────────────────── */
.la2-pg .ntf-ddl {
    overflow-y: auto;
    overscroll-behavior: contain;
    max-height: 352px;
    flex: 1 1 auto;
    min-height: 0;
}
.la2-pg .ntf-ddl.ntf-b { padding: 6px 12px 10px; }

/* ── Pinned footer ───────────────────────────────────────────────────────── */
.la2-pg .ntf-ddf {
    flex: none;
    border-top: 1px solid var(--line);
    background: var(--band2);
    padding: 9px 14px;
}
.la2-pg .ntf-ddf a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    font: 600 13.5px/1 'IBM Plex Sans', sans-serif;
    border-radius: 8px;
}
.la2-pg .ntf-ddf a:hover {
    background: var(--fill);
    text-decoration: none;
}
[dir="rtl"] .la2-pg .ntf-ddf a { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.la2-pg .ntf-ddf .ico { width: 15px; height: 15px; }

/* ── Panel states: empty and failure. No retry control — the application has
      none, and the board forbids inventing one. ─────────────────────────── */
.la2-pg .ntf-ddstate {
    padding: 30px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13.5px;
}
.la2-pg .ntf-ddstate .ico {
    width: 26px;
    height: 26px;
    color: var(--pInk);
}
.la2-pg .ntf-ddstate strong {
    color: var(--head);
    font-weight: 600;
}
/* The failure mark keeps the error tone the board gives it inline. */
.la2-pg .ntf-ddstate .ntf-ddstate-err { color: var(--erI); }

/* ── Loading: a placeholder rail, with a polite status for assistive tech ── */
.la2-pg .ntf-sk {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 14px;
}
.la2-pg .ntf-skr {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}
.la2-pg .ntf-skb {
    background: var(--band);
    border-radius: 7px;
    height: 11px;
}
.la2-pg .ntf-skb.ntf-a  { width: 58%; }
.la2-pg .ntf-skb.ntf-b2 { width: 88%; margin-top: 8px; }
.la2-pg .ntf-skb.ntf-rd { height: 24px; width: 24px; border-radius: 999px; }


/* ============================================================================
   9 · THE TIMELINE AT PANEL SCALE   (proof `.ddl.b .ob-*`)
   ----------------------------------------------------------------------------
   The SAME row partial, smaller. One shared partial is what stops the centre
   and the panel drifting apart.
   ========================================================================== */

.la2-pg .ntf-ddl.ntf-b .ntf-ob-sect::before {
    inset-inline-start: 15px;
    inset-block: 14px;
}
.la2-pg .ntf-ddl.ntf-b .ntf-ob-day  { margin: 14px 0 2px; }
.la2-pg .ntf-ddl.ntf-b .ntf-ob-item {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    padding: 2px 0;
}
.la2-pg .ntf-ddl.ntf-b .ntf-ob-node { width: 32px; padding-top: 12px; }
.la2-pg .ntf-ddl.ntf-b .ntf-tn      { width: 24px; height: 24px; }
.la2-pg .ntf-ddl.ntf-b .ntf-tn .ico { width: 12px; height: 12px; }
.la2-pg .ntf-ddl.ntf-b .ntf-ob-open { padding: 9px 11px; border-radius: 11px; }
.la2-pg .ntf-ddl.ntf-b .ntf-ob-t    { font-size: 14px; }
.la2-pg .ntf-ddl.ntf-b .ntf-ob-b {
    font-size: 12.5px;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.la2-pg .ntf-ddl.ntf-b .ntf-ob-m { margin-top: 7px; gap: 8px; }
.la2-pg .ntf-ddl.ntf-b .ntf-ob-go,
.la2-pg .ntf-ddl.ntf-b .ntf-ob-no { margin-inline-start: auto; font-size: 12px; }

/* Icon-only in the panel — the word goes, the 44 x 44 box and the notification
   title in the accessible name both stay. */
.la2-pg .ntf-ddl.ntf-b .ntf-ob-mr {
    margin-top: 10px;
    padding: 0;
    min-width: 44px;
    min-height: 44px;
    font-size: 0;
    gap: 0;
}
.la2-pg .ntf-ddl.ntf-b .ntf-ob-mr .ico { width: 17px; height: 17px; }


/* ============================================================================
   10 · RESPONSIVE
   ============================================================================
   The board carries no @media queries — it proves the narrow composition with
   fixed-width device frames (390 iOS, 360 Android, 375 stress) — so the
   activation width comes from FINAL_DESIGN_FOUNDATION §7 (ledger §10): 5F is a
   "360-390 floor" family, and the narrow composition switches at the same
   767.98 the shared `.wrap` gutter already uses. The values below are the
   board's own `.pg.m` rules, unchanged.
   ========================================================================== */

@media (max-width: 767.98px) {
    .la2-pg .ntf-col { max-width: none; padding: 16px 0 20px; }

    .la2-pg .ntf-ph {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 14px;
    }
    .la2-pg .ntf-ph h1 { font-size: 23px; }

    /* Mark all as read spans the column (board `.mall.blk` + its form's own
       `display:block`). */
    .la2-pg .ntf-ph .ntf-f { display: block; }
    .la2-pg .ntf-mall      { width: 100%; }

    .la2-pg .ntf-pgr-per { display: none; }

    .la2-pg .ntf-ob-day { margin: 20px 0 4px; }
    .la2-pg .ntf-ob-sect::before { inset-inline-start: 15px; }

    /* Two tracks, and Mark read drops to its own line under the plaque. */
    .la2-pg .ntf-ob-item { grid-template-columns: 32px minmax(0, 1fr); }
    .la2-pg .ntf-ob-item > .ntf-f:last-child {
        grid-column: 2;
        justify-content: flex-start;
    }

    .la2-pg .ntf-ob-node { width: 32px; padding-top: 13px; }
    .la2-pg .ntf-tn      { width: 26px; height: 26px; }
    .la2-pg .ntf-ob-open { padding: 10px 12px; }
    .la2-pg .ntf-ob-t    { font-size: 15px; }
    .la2-pg .ntf-ob-mr   { margin: 2px 0 4px; padding: 0 12px; }
    .la2-pg .ntf-pgr     { font-size: 12.5px; }

    /* TWO THINGS THE BOARD'S NARROW FRAMES DELIBERATELY DO NOT DRAW.
       Not specimen abbreviation — all THREE narrow frames (390 iOS, 360 Android,
       375 stress) agree with each other and disagree with all three desktop
       frames, which is a composition instruction rather than a specimen running
       short.

       The FAMILY LABEL goes because the type node beside it already carries the
       family, and at 358px the pair costs the row a wrapped line of the meta
       strip for information the reader can already see. Redundant metadata, not
       function.

       The UNAVAILABLE PAGER CONTROL goes because it offers nothing to remove: the
       board's own note has it "noninteractive and not focusable", so at narrow
       widths the row simply carries the one control that works. The page position
       itself always stays. */
    .la2-pg .ntf-ob-lb        { display: none; }
    .la2-pg .ntf-pgb.ntf-off  { display: none; }

    /* ...and the destination CHEVRON, for the same reason and on the same
       evidence: all three narrow frames print the destination as words alone
       while every desktop frame follows it with the mark. At 358px the mark is
       18px of a meta strip that is already wrapping, and the words are what
       carry the meaning. The DESTINATION ITSELF never goes. */
    .la2-pg .ntf-ob-go .ico   { display: none; }
}