/* Zoozah — Notifications (web)
 *
 * WHAT: the bell in the sidebar rail (partials/head.ejs), its dropdown
 * panel, the /web/notifications page (views/notifications.ejs) and the
 * preferences panel it shares with /web/settings. Loaded AFTER
 * /css/fonts.css and /css/style.css on every app-layout page, so every
 * token below (--nest --beak --terra --linen --leaf --card --bg-soft
 * --red --amber --chrome-*) is already defined for light and dark mode;
 * nothing here names a colour or a font family directly.
 *
 * WHY: a bell that is on every page has to cost nothing and read as part
 * of the rail; the inbox page is one idea per row (a title, a line, a
 * time) with the switches beside it. Pinned by tests/notificationsWeb
 * .test.js to the brand rules the other Kit stylesheets are held to:
 *   - elevation is surface colour with a hairline, never a shadow;
 *   - the page headline and every figure sit in the display face;
 *   - labels are tracked caps in the text face, 11–13px; nothing under
 *     11px; colours only via tokens (#FFFFFF is the one literal, for words
 *     on a Beak fill — the count, the primary — as Beak is dark in both
 *     themes; words on a Nest fill are the card's colour, because the dark
 *     theme turns Nest light and a white word vanished there);
 *   - inputs are ruled — an underline only, Beak on focus;
 *   - focus outlines are never removed;
 *   - one column at 375px.
 * Every class is prefixed .nf- (page) or .sidebar-bell (rail) so nothing
 * leaks into the shared dashboard rules.
 */

/* ── The bell in the rail ───────────────────────────────────────────── */
.sidebar-bell { position: relative; display: flex; justify-content: center; padding: 8px 12px 0; }
.sidebar-bell__btn {
  position: relative; width: 46px; height: 46px; border-radius: 0; padding: 0; border: none;
  background: transparent; color: var(--nest); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font: inherit;
  transition: color 0.15s, background 0.15s;
}
.sidebar-bell__btn .nav-icon {
  display: inline-block; width: 24px; height: 24px; background-color: currentColor;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.nav-icon-bell { -webkit-mask-image: url('/assets/icons/svg/Notifications_NestBlack.svg'); mask-image: url('/assets/icons/svg/Notifications_NestBlack.svg'); }
.sidebar-bell__btn:hover, .sidebar-bell__btn[aria-expanded="true"] { color: var(--beak); }
.sidebar-bell__btn:focus-visible { outline: 2px solid var(--beak); outline-offset: 2px; }
/* The unread count: a figure on a Beak disc, hidden at zero. */
.sidebar-bell__count {
  position: absolute; top: 6px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--beak); color: #FFFFFF;
  font-family: var(--font-body); font-weight: 500; font-size: 11px; line-height: 18px; font-variant-numeric: tabular-nums;   /* a badge, not a figure: the text face (Jared, 2026-09-26) */
  text-align: center;
}
.sidebar-bell__count[hidden] { display: none; }

/* The dropdown: a square ruled panel on the page ground beside the rail
   (like the account menu), top-aligned with the bell — the script sets
   `top` from the bell's position when it opens (2026-09-26). */
.sidebar-bell__panel {
  position: fixed; left: 80px; top: 8px; width: 340px; max-height: min(70vh, 560px);
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--rule); border-radius: 0;   /* the brand's paper white, laid over the page (Jared, 2026-09-27) */
  padding: 0; z-index: 50;
}
.sidebar-bell__panel[hidden] { display: none; }
.sidebar-bell__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--rule);
}
.sidebar-bell__title {
  font-family: var(--font-body); font-weight: 400; font-size: 13px; line-height: 1.2;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--nest);
}
.sidebar-bell__all {
  border: none; background: transparent; padding: 4px 0; border-radius: 0; cursor: pointer;
  font: inherit; font-size: 12px; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--beak);
}
.sidebar-bell__all:hover { text-decoration: underline; }
.sidebar-bell__list { overflow-y: auto; min-height: 0; padding: 0; }
.sidebar-bell__empty { padding: 18px 14px; font-size: 13px; color: var(--terra); text-align: center; }
.sidebar-bell__more {
  display: block; padding: 12px 14px; border-top: 1px solid var(--rule);
  font-size: 12px; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--beak); text-decoration: none; text-align: center;
}
.sidebar-bell__more:hover, .sidebar-bell__more:focus-visible { text-decoration: underline; }

/* ── One notification row (panel and page share it) ─────────────────── */
.nf-row {
  display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 4px 10px; align-items: start;
  width: 100%; padding: 12px 14px; margin: 0; border: none; border-radius: 0;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background 0.12s;
}
.nf-row + .nf-row { border-top: 1px solid var(--rule-soft); }   /* rows on soft rules, like every list on the sheet */
.nf-row:hover, .nf-row:focus-visible { background: var(--stripe); }
.nf-row__dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 999px; background: var(--beak); }
.nf-row--read .nf-row__dot { background: transparent; border: 1px solid var(--linen); }
.nf-row--urgent .nf-row__dot { background: var(--red); }
.nf-row__title { font-size: 14px; line-height: var(--lh-body); color: var(--nest); overflow-wrap: anywhere; }
.nf-row--read .nf-row__title { color: var(--terra); }
.nf-row__body { grid-column: 2; font-size: 12px; line-height: var(--lh-body); color: var(--terra); overflow-wrap: anywhere; }
.nf-row__when { font-size: 11px; color: var(--terra); white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 2px; }
.nf-row__cat { grid-column: 2; font-size: 11px; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--terra); }

/* ── The page ───────────────────────────────────────────────────────── */
.nf-page [hidden] { display: none !important; }
.nf-h1 {
  font-family: var(--font-display); font-weight: 400; margin: 0;
  font-size: clamp(30px, 4vw, 42px); line-height: var(--lh-headline); letter-spacing: 0;
  color: var(--nest); font-feature-settings: var(--font-display-features);
}
.nf-lede { margin: 8px 0 0; max-width: 62ch; font-size: 14px; line-height: var(--lh-body); color: var(--terra); }
/* The page as a ruled sheet (2026-09-26, zoozah.com's grid): the inbox
   and the preferences are two columns of the sheet on a Nest rule, edge
   to edge; notifications are rows on soft rules; the preferences head is
   a ruled band. No cards. */
.nf-split { display: grid; gap: 0; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); align-items: stretch; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: 20px !important; }
@media (max-width: 1023px) { .nf-split { grid-template-columns: 1fr; } }
.nf-panel { background: transparent; border: none; border-radius: 0; padding: 0; min-width: 0; }
.nf-panel:first-child { border-right: 1px solid var(--rule); }
.nf-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; padding: 18px 24px 16px; border-bottom: 1px solid var(--rule); }
.nf-panel__title {
  font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 1.2;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--nest); margin: 0;
}
.nf-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Segmented filter: All / Unread — caps on a Nest hairline, Nest when on. */
.nf-seg { display: inline-flex; border: 1px solid var(--nest); border-radius: 999px; padding: 2px; }
.nf-seg button {
  border: none; background: transparent; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 400; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--nest);
  transition: background-color 0.4s ease, color 0.4s ease;
}
.nf-seg button[aria-pressed="true"] { background: var(--nest); color: var(--card); }
.nf-seg button:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--beak); outline-offset: 1px; }   /* above its neighbours: a filled option painted after it never covers the ring */
/* Pills, as every button is: Roobert regular caps; the one action is Beak. */
.nf-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--nest); background: transparent; color: var(--nest); cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 400; line-height: 1.2; letter-spacing: var(--track-caps); text-transform: uppercase;
  text-decoration: none; transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.nf-btn:hover { background: var(--nest); color: var(--card); }
.nf-btn--primary { background: var(--beak); border-color: var(--beak); color: #FFFFFF; }
.nf-btn--primary:hover { background: var(--nest); border-color: var(--nest); color: var(--card); }
.nf-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.nf-list { display: flex; flex-direction: column; }
.nf-list .nf-row { border-bottom: 1px solid var(--rule-soft); border-radius: 0; padding: 16px 24px; }
.nf-list .nf-row + .nf-row { border-top: none; }
.nf-list .nf-row:last-child { border-bottom: none; }
.nf-list .nf-row__title { font-size: 15px; }
.nf-list > .nf-muted, .nf-list > .nf-empty { padding: 24px; }
.nf-more { padding: 14px 24px; text-align: center; border-top: 1px solid var(--rule); }
.nf-muted { font-size: 13px; color: var(--terra); }
.nf-figure {
  font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: 0;
  color: var(--nest); font-variant-numeric: tabular-nums; font-feature-settings: var(--font-display-features);
}
.nf-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 16px; text-align: center; font-size: 14px; color: var(--terra); }
.nf-empty .brand-illo { width: 120px; margin: 0; }
.nf-empty__title {
  font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: var(--lh-section);
  letter-spacing: 0; color: var(--nest); font-feature-settings: var(--font-display-features);
}

/* ── Preferences (the page and /web/settings) ───────────────────────── */
.nf-prefs { display: flex; flex-direction: column; gap: 0; }
.nf-page .nf-prefs { padding: 4px 24px 24px; }
.nf-page [data-notification-preferences] > .nf-muted { padding: 24px; display: block; }
.nf-prefs__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
.nf-prefs__row:last-child { border-bottom: none; }
.nf-prefs__actions { padding-top: 20px; }
.nf-prefs__label { font-size: 14px; color: var(--nest); }
.nf-prefs__help { font-size: 12px; color: var(--terra); margin-top: 2px; }
.nf-label {
  font-family: var(--font-body); font-weight: 500; font-size: 11px; line-height: 1.2;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--terra);
}
.nf-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--nest); cursor: pointer; }
.nf-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--beak); cursor: pointer; }
/* A ruled select, like every other Kit field. */
.nf-select { position: relative; min-width: 150px; }
.nf-select select {
  width: 100%; margin: 0; padding: 6px 22px 7px 0; border-radius: 0; border: none; border-bottom: 1px solid var(--terra);
  background: transparent; font: inherit; font-size: 16px; line-height: 1.3; color: var(--nest);
  -webkit-appearance: none; appearance: none; cursor: pointer; transition: border-color 0.2s;
}
.nf-select select:focus { border-bottom-color: var(--beak); }
.nf-select::after {
  content: ''; position: absolute; right: 2px; bottom: 12px; width: 12px; height: 12px;
  background-color: var(--terra); pointer-events: none;
  -webkit-mask-image: url('/assets/icons/svg/Down-Carrot_NestBlack.svg'); mask-image: url('/assets/icons/svg/Down-Carrot_NestBlack.svg');
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
}
.nf-prefs__error { min-height: 1.2em; font-size: 13px; color: var(--red); }
.nf-prefs__error:empty { display: none; }
.nf-prefs__actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
/* The company recipients list (notifications.manage): a ruled textarea. */
.nf-prefs__row--stack { flex-direction: column; align-items: stretch; border-bottom: none; padding-bottom: 0; }
.nf-textarea {
  width: 100%; min-width: 0; margin: 0; padding: 8px 0 9px; border-radius: 0; min-height: 72px; resize: vertical;
  border: none; border-bottom: 1px solid var(--terra); background: transparent;
  font: inherit; font-size: 16px; line-height: 1.3; color: var(--nest);
  -webkit-appearance: none; appearance: none; transition: border-color 0.2s;
}
.nf-textarea:focus { border-bottom-color: var(--beak); }
/* Teams / Slack channels (docs/kit/PHASE_FIVE.md §2, W5): a ruled text
   input, one hairline-separated block per channel, categories as a row
   of checks that wraps at phone width. */
.nf-input {
  width: 100%; min-width: 0; margin: 0; padding: 6px 0 7px; border-radius: 0;
  border: none; border-bottom: 1px solid var(--terra); background: transparent;
  font: inherit; font-size: 16px; line-height: 1.3; color: var(--nest);
  -webkit-appearance: none; appearance: none; transition: border-color 0.2s;
}
.nf-input:focus { border-bottom-color: var(--beak); }
.nf-chan { display: flex; flex-direction: column; gap: 8px; padding: 12px 0 16px; border-top: 1px solid var(--linen); }
.nf-chan__head { display: flex; flex-direction: column; gap: 2px; }
.nf-chan__title {
  font-family: var(--font-display); font-weight: 400; font-size: 18px; line-height: var(--lh-section);
  letter-spacing: 0; color: var(--nest); font-feature-settings: var(--font-display-features);
}
.nf-chan__meta { font-size: 12px; color: var(--terra); }
.nf-chan__cats { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-top: 4px; }
@media (max-width: 639px) {
  .nf-prefs__row { flex-direction: column; align-items: stretch; gap: 6px; }
  .nf-select { min-width: 0; }
  .sidebar-bell__panel { left: 8px; right: 8px; width: auto; top: auto; bottom: 72px; }
}