/*
 * NPCA notification bell -- Tranche 4 / Workstream 1.
 *
 * Its own stylesheet rather than an appendix to dashboard.css, for the same reason the module is its
 * own module: the bell owns a small, self-contained set of components and nothing else should be
 * reaching into them. Loaded after dashboard.css, so a tie against a dashboard rule resolves here.
 *
 * STRUCTURAL PROPERTIES ARE DECLARED, NOT INHERITED. The 2026-08-24 cascade audit established that
 * automatic.css / Bricks can restructure NPCA layout through exactly four element-level rules, and
 * that they win only where NPCA never DECLARED the property -- an unclaimed property has no contest
 * to win. Two of those rules are:
 *     section:where(:not(.bricks-shape-divider))      { display:flex; flex-direction:column;
 *                                                       align-items:center; gap:var(--container-gap) }
 *     section > div:where(:not(.bricks-shape-divider)) { align-items:flex-start;
 *                                                       gap:var(--content-gap) }
 * with --container-gap at 65.4px and --content-gap at 29.5px. So every container below declares its
 * own `display` and `gap` even where the value looks like the browser default. That is the fix, and
 * no `!important` is needed anywhere in this file.
 *
 * NATIVE DISCLOSURE, ON PURPOSE. The bell is <details>/<summary>, so it opens and closes with no
 * JavaScript at all and is keyboard-operable for free. notification-bell.js only adds what native
 * disclosure lacks: Escape, outside-click, the 'seen' sweep and dismissal. If the script fails to
 * load, the participant can still read and follow every notification.
 */

.npca-v2-notif {
    position: relative;
    display: block;
    margin-right: 10px;
}

/* ------------------------------------------------------------------ the trigger */
.npca-v2-notif__trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--match-ink, #272F3D);
    /* The default disclosure triangle would sit next to a bell icon and read as a dropdown arrow on
       a control that is not a dropdown. Both properties are needed: `list-style` covers Firefox and
       standards-track browsers, the pseudo-element covers WebKit. */
    list-style: none;
}

.npca-v2-notif__trigger::-webkit-details-marker { display: none; }
.npca-v2-notif__trigger::marker { content: ''; }

.npca-v2-notif__trigger:hover {
    background: rgba(39, 47, 61, 0.06);
}

/* A visible focus ring on the trigger, because it is the only way into the panel by keyboard. */
.npca-v2-notif__trigger:focus-visible {
    outline: 2px solid var(--brand-secondary, #76BC21);
    outline-offset: 2px;
}

.npca-v2-notif__icon {
    display: inline-flex;
    align-items: center;
    opacity: 0.8;
}

/* The UNREAD number. Deliberately a quiet neutral pill, not red: nothing here is an error or a
   warning, and a red badge on a Match notification would read as "something has gone wrong". */
.npca-v2-notif__count {
    display: inline-block;
    min-width: 17px;
    padding: 1px 5px;
    border-radius: 9px;
    background: var(--match-ink, #272F3D);
    color: #FFF;
    font-size: 0.72em;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* NEW-ACTIVITY dot -- UNSEEN, which is not the same thing as unread. It means "something arrived
   that has never been displayed", so opening the panel clears it while the unread count stays. */
.npca-v2-notif__dot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-secondary, #76BC21);
}

/* ------------------------------------------------------------------ the panel */
.npca-v2-notif__panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    display: block;
    gap: 0;
    width: 340px;
    max-width: min(340px, calc(100vw - 24px));
    max-height: 60vh;
    overflow-y: auto;
    padding: 0;
    background: #FFF;
    border: 1px solid var(--match-border, #DDE1E6);
    border-radius: var(--radius-card, 8px);
    box-shadow: 0 6px 20px rgba(39, 47, 61, 0.14);
    text-align: left;
    /* The header sets white-space: nowrap for the identity row; notification prose must wrap. */
    white-space: normal;
}

.npca-v2-notif__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--match-border, #DDE1E6);
}

.npca-v2-notif__title {
    font-family: var(--font-heading, inherit);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--match-ink, #272F3D);
}

.npca-v2-notif__markall {
    padding: 2px 4px;
    border: 0;
    background: none;
    color: var(--brand-secondary, #76BC21);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.npca-v2-notif__markall:hover { text-decoration: underline; }

.npca-v2-notif__markall:focus-visible {
    outline: 2px solid var(--brand-secondary, #76BC21);
    outline-offset: 2px;
}

.npca-v2-notif__empty {
    display: block;
    margin: 0;
    padding: 14px 12px;
    color: var(--match-ink, #272F3D);
    opacity: 0.7;
    font-size: 0.86rem;
    line-height: 1.45;
}

/* automatic.css zeroes margin-block on ul/ol/li at (0,0,1), so list spacing has to be declared here
   rather than left to the browser default -- otherwise every item sits flush at 0px. */
.npca-v2-notif__list {
    display: block;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.npca-v2-notif__item {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--match-border, #DDE1E6);
}

.npca-v2-notif__item:last-child { border-bottom: 0; }

/* Unread is marked with a left rail rather than a background tint: a tint on half the rows makes the
   panel look striped and stops reading as state at all. */
.npca-v2-notif__item--unread {
    box-shadow: inset 3px 0 0 var(--brand-secondary, #76BC21);
}

.npca-v2-notif__link {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 4px 10px 12px;
    color: var(--match-ink, #272F3D);
    text-decoration: none;
}

.npca-v2-notif__link:hover { background: rgba(39, 47, 61, 0.04); }

.npca-v2-notif__link:focus-visible {
    outline: 2px solid var(--brand-secondary, #76BC21);
    outline-offset: -2px;
}

.npca-v2-notif__headline {
    display: block;
    font-size: 0.88rem;
    line-height: 1.35;
    /* Two-to-three word Project names and long ones both have to work in a 340px panel. */
    overflow-wrap: break-word;
}

.npca-v2-notif__item--unread .npca-v2-notif__headline { font-weight: 600; }

.npca-v2-notif__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 3px;
    font-size: 0.74rem;
    opacity: 0.75;
}

/* "x21" -- how many times the same thing happened, because the feed shows one line per subject. */
.npca-v2-notif__repeat {
    padding: 0 4px;
    border: 1px solid var(--match-border, #DDE1E6);
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}

/* DERIVED from live relationship state, never stored -- it disappears the moment they respond, from
   anywhere. Given real emphasis because it is the one thing in the panel that asks for something. */
.npca-v2-notif__action-flag {
    padding: 0 5px;
    border-radius: 4px;
    background: var(--brand-secondary, #76BC21);
    color: #FFF;
    font-size: 0.94em;
    font-weight: 700;
    opacity: 1;
}

.npca-v2-notif__dismiss {
    flex: 0 0 auto;
    padding: 10px 10px 10px 4px;
    border: 0;
    background: none;
    color: var(--match-ink, #272F3D);
    font-size: 1rem;
    line-height: 1;
    opacity: 0.45;
    cursor: pointer;
}

.npca-v2-notif__dismiss:hover { opacity: 0.9; }

.npca-v2-notif__dismiss:focus-visible {
    outline: 2px solid var(--brand-secondary, #76BC21);
    outline-offset: -2px;
    opacity: 0.9;
}

/* ------------------------------------------------------------------ open state */
.npca-v2-notif[open] .npca-v2-notif__trigger {
    background: rgba(39, 47, 61, 0.08);
}

/* ------------------------------------------------------------------ mobile */
/* Below 640px a 340px panel anchored to the right of a small trigger either overflows the viewport or
   gets clipped by the header. It becomes a full-width sheet under the header instead. `position:
   fixed` rather than absolute so it is not trapped by any ancestor's overflow. */
@media (max-width: 639px) {
    .npca-v2-notif { margin-right: 6px; }

    .npca-v2-notif__panel {
        position: fixed;
        top: auto;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        max-height: 70vh;
        margin-top: 6px;
    }

    .npca-v2-notif__link { padding: 12px 4px 12px 12px; }

    /* A 44px-tall dismiss target, because on a touch screen it sits a few millimetres from the link
       that navigates away -- a mis-tap there is destructive, not merely annoying. */
    .npca-v2-notif__dismiss {
        min-width: 44px;
        min-height: 44px;
        padding: 0;
    }
}

/* ------------------------------------------------------------------ reduced motion */
/* Nothing here animates by default; this is a guard so that a later addition cannot introduce motion
   for someone who has asked for none. */
@media (prefers-reduced-motion: reduce) {
    .npca-v2-notif,
    .npca-v2-notif__trigger,
    .npca-v2-notif__panel,
    .npca-v2-notif__item,
    .npca-v2-notif__dot {
        transition: none;
        animation: none;
    }
}