/* Notification inbox — P4-NTF-02 part 2 (brief 2026-09-04).
   Composes DS tokens only; needs tokens/semantic.css (+ theme.dark.css for dark)
   incl. the one new token --status-emergency-bg-soft.
   Class names are UNIQUE to this feature: .notif-* — never reused, never shared
   with .scope-switcher__* / .toast__* (guard-test rule).
   Logical properties only: one rule set serves en, ar and ckb. */

/* ---- The bell + its panel (topbar) ------------------------------------- */
/* Anchor. Same anchored-menu idiom the scope switcher already uses: absolute,
   block-start +4px, flush to the reading END of the trigger. */
.notif-bell{position:relative;display:inline-flex}
.notif-panel{position:absolute;inset-block-start:calc(100% + 4px);inset-inline-end:0;z-index:60;
  inline-size:var(--panel-w);max-inline-size:calc(100vw - 24px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-md)}
.notif-panel__head{display:flex;align-items:center;gap:var(--space-2);min-block-size:44px;
  padding-block:var(--space-2);padding-inline:var(--space-4) var(--space-2)}
.notif-panel__title{flex:1;min-inline-size:0;font:var(--type-body-strong);color:var(--text-primary)}
/* The list scrolls past ~7 rows; the head stays. */
.notif-list{list-style:none;margin:0;padding:0;max-block-size:min(60vh,440px);overflow-y:auto;border-block-start:1px solid var(--border-subtle)}
.notif-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
  padding-block:var(--space-8);padding-inline:var(--space-4);border-block-start:1px solid var(--border-subtle);
  font:var(--type-small);color:var(--text-muted)}

/* ---- One row — (icon, tone, title, body, time) + the engine's read flag ---- */
.notif-row{display:flex;gap:var(--space-3);padding-block:var(--space-3);padding-inline:var(--space-4);
  border-block-start:1px solid var(--border-subtle);background:var(--surface-raised)}
.notif-row:first-child{border-block-start:0}
/* Emergency rows sit on the soft red ground in BOTH themes (token, not --red-050) */
.notif-row--emergency{background:var(--status-emergency-bg-soft)}
.notif-row__chip{inline-size:26px;block-size:26px;flex:0 0 auto;border-radius:var(--radius-sm);display:grid;place-items:center}
.notif-row__chip--emergency{color:var(--status-emergency-fg);background:var(--status-emergency-bg)}
.notif-row__chip--delay{color:var(--status-delay-fg);background:var(--status-delay-bg)}
.notif-row__chip--arrived{color:var(--status-arrived-fg);background:var(--status-arrived-bg)}
.notif-row__chip--boarding{color:var(--status-boarding-fg);background:var(--status-boarding-bg)}
.notif-row__chip--enroute{color:var(--status-enroute-fg);background:var(--status-enroute-bg)}
.notif-row__chip--info{color:var(--info-fg);background:var(--info-bg)}
.notif-row__chip--unpaid{color:var(--fee-unpaid-fg);background:var(--fee-unpaid-bg)}
.notif-row__text{flex:1;min-inline-size:0}
.notif-row__title{font:var(--type-body);color:var(--text-primary)}
.notif-row.is-unread .notif-row__title{font:var(--type-body-strong)}
.notif-row__body{font:var(--type-caption);color:var(--text-secondary);unicode-bidi:plaintext}
/* Reading end: time (mono, LTR-isolated) then the unread dot. Follows direction. */
.notif-row__end{display:flex;align-items:center;gap:var(--space-2);flex:0 0 auto;align-self:flex-start;margin-inline-start:auto;min-block-size:20px}
.notif-row__time{font:var(--type-mono);font-size:11px;color:var(--text-muted);direction:ltr;unicode-bidi:isolate}
/* Unread dot is INK (--text-primary): reads on white, on the red-050 ground, and
   flips with the theme. Not red — red is the emergency tone, not "new". */
.notif-row__dot{inline-size:8px;block-size:8px;flex:0 0 auto;border-radius:var(--radius-pill);background:var(--text-primary);visibility:hidden}
.notif-row.is-unread .notif-row__dot{visibility:visible}

/* ---- Touch form (parent app Alerts tab) — same row, bigger chip, card ground ---- */
.notif-row--touch{background:var(--surface-card)}
.notif-row--touch.notif-row--emergency{background:var(--status-emergency-bg-soft)}
.notif-row--touch .notif-row__chip{inline-size:30px;block-size:30px}

/* ---- <768px: the panel becomes a sheet under the topbar, full width ---- */
@media (max-width:767px){
  .notif-bell{position:static}
  .notif-panel{position:fixed;inset-block-start:calc(var(--topbar-h) + 4px);inset-inline:12px;inline-size:auto;max-inline-size:none}
  .notif-list{max-block-size:calc(100dvh - var(--topbar-h) - 120px)}
}
/* Demo-only modifier: mirrors the media query inside a fixed-width demo frame.
   The build needs the media query above, not this class. */
.notif-bell--sheet{position:static}
.notif-panel--sheet{position:absolute;inset-block-start:calc(var(--topbar-h) + 4px);inset-inline:12px;inline-size:auto;max-inline-size:none}

/* ---- Repo half: the <details> the bell actually is -----------------------
   The kit writes NotifBell as a button plus hand-rolled outside-click and
   Escape handlers. This product already has that idiom as a <details> (the
   scope switcher beside it), which the browser closes on Escape and on an
   outside click with no script at all — so the trigger is a <summary> and
   these four rules are the whole difference. Everything above is the
   designer's file, untouched. */
.notif-bell{list-style:none}
.notif-bell>summary::-webkit-details-marker{display:none}
.notif-bell>summary{list-style:none}
.notif-bell__btn{position:relative;display:grid;place-items:center;
  inline-size:32px;block-size:32px;flex:0 0 auto;cursor:pointer;
  border:1px solid var(--border-default);border-radius:var(--radius-sm);
  background:var(--surface-card);color:var(--text-secondary)}
.notif-bell__btn:hover{background:var(--surface-hover);color:var(--text-primary)}
/* The badge is a presence dot. IconButton's own rule in the DS used a
   physical `right`, which the designer fixed to a logical property in the
   same drop (CHANGES section B) — this is that fix, in our own class. */
.notif-bell__dot{position:absolute;inset-block-start:5px;inset-inline-end:5px;
  inline-size:6px;block-size:6px;border-radius:var(--radius-pill);
  background:var(--action-danger)}