/* ========================================================================== THE NOTIFICATIONS BELL AND ITS PANEL Built from _incoming/design/ui-change-requests/04-1b (11 Oct 2026), in Madar's own tokens. WHAT WAS TAKEN FROM THE REFERENCE and what was not. The reference is a LAYOUT PATTERN, which is what the change-request README asks for: a rounded panel hanging under the bell, a header carrying the title and one clearing action, a scrolling list of two-line rows, an unread dot at the inline-end of each row and a tinted ground behind the unread ones. Every COLOUR here is a Madar token -- the reference product's translucent charcoal and orange accent are its identity, not ours, and DESIGN_SYSTEM §1.3 forbids a hex outside tokens.css in any case. In dark mode this panel is dark because the tokens are, not because a colour was copied. NO SHADOW, which is §1's rule and the recorded tiebreak for popovers in this product (the account menu's own comment in base.css says the same thing): the 1px border is what separates the panel from the page. ========================================================================== */ /* The bell plus its overlay. `relative` so the panel can hang off the BELL rather than off the bar's end edge the way the account menu does -- the account control is the last thing in the bar and the bell is not, and an offset measured from the bar's end would drift every time the signed-in person's name changes length. */ .notif { position: relative; display: flex; align-items: center; } /* The button itself is `.appbar__icon-btn`, unchanged. This adds only the one thing a