/* Notification Center: the bell in the app bar and the "notifications" screen (rebrand PR E;
 * behaviour in notifications-ui.js, contract in docs/brand/NOTIFICATIONS.md §8).
 *
 * Like shell-nav.css, this sheet reads the approved palette (--ap-*) and the density tokens
 * (--mh-density-*, on :root in every mode) directly. The bell sits in the bar, outside the views,
 * and the approved sheet scopes its component rules to the view ids it lists, which predate this
 * screen, so its controls are styled here with the same tokens. Text sizes come from the type
 * tokens and never change with density. Every control is at least 44 x 44 px.
 */

/* --------------------------------------------------------------------- bell */
.mh-appbar__bell {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: var(--ap-line-w, 1px) solid var(--ap-glass-border, #ffffff4a);
  border-radius: var(--mh-density-radius-card, 17px);
  background: var(--ap-glass, transparent);
  box-shadow: var(--ap-glass-edge, none);
  color: var(--ap-text, currentColor);
  cursor: pointer;
}

/* A shared rule sizes every .mh-button--icon to the control height with !important
   (saved-parity.css): 49 px wide in Balanced, 54 px in Comfortable. The bell stays 44 x 44 in
   every mode; this selector outranks that rule. */
html[data-theme] .mh-appbar .mh-appbar__bell.mh-button--icon {
  width: 44px !important;
  min-width: 44px !important;
}

.mh-appbar__bell:focus-visible {
  outline: 2px solid var(--ap-focus, #d6e3f5);
  outline-offset: 2px;
}

/* The glyph box is exactly the icon. The badge stands on its top edge (bottom: 100%), so it can
   never cover the bell in any density; at 13 px it stays inside the bar's 2 px padding. */
.mh-appbar__bell-glyph {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: var(--mh-density-icon, 21px);
  height: var(--mh-density-icon, 21px);
}

.mh-appbar__bell-glyph .mh-appbar__icon {
  width: 100%;
  height: 100%;
}

.mh-appbar__badge {
  position: absolute;
  bottom: 100%;
  left: 50%;
  box-sizing: border-box;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--ap-accent, #d6dce5);
  color: var(--ap-accent-ink, #13151a);
  font-family: var(--mh-font, inherit);
  font-size: var(--mh-type-caption, 10px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 13px;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

/* ------------------------------------------------------------------ screen */
#view-notifications {
  font-family: var(--mh-font, inherit);
  color: var(--ap-text, inherit);
}

#view-notifications .mh-notifications__top {
  display: flex;
  align-items: center;
  margin: 0 0 var(--mh-density-space-3, 12px);
  padding: 0;
}

/* the approved glass back control (group 09D) */
#view-notifications .mh-nav-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 14px 8px 10px;
  border: var(--ap-line-w, 1px) solid var(--ap-glass-border, #ffffff4a);
  border-radius: var(--ap-pill, 31px);
  background: var(--ap-glass, transparent);
  box-shadow: var(--ap-glass-edge, none);
  color: #eef1f6;
  font-family: var(--mh-font, inherit);
  font-size: var(--mh-type-button, 12px);
  font-weight: 600;
  line-height: 1.2;
}

#view-notifications .mh-nav-back__chev {
  font-size: var(--mh-type-section, 16px);
  line-height: 1;
}

#view-notifications .mh-notifications__head {
  display: block;
  margin: 0 0 var(--mh-density-space-2, 8px);
}

#view-notifications .mh-notifications__title {
  margin: 0;
  color: var(--ap-text, inherit);
  font-size: var(--mh-type-screen, 20px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: var(--mh-density-leading-title, 1.22);
}

#view-notifications .mh-notifications__title:focus {
  outline: none;
}

/* the unread count (and "Refreshing…") on the left, Mark all as read on the right */
#view-notifications .mh-notifications__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--mh-density-space-2, 8px);
  margin: 0 0 var(--mh-density-space-3, 12px);
}

#view-notifications .mh-notifications__meta {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--ap-muted, inherit);
  font-size: var(--mh-type-body, 12px);
  line-height: var(--mh-density-leading-body, 1.45);
}

#view-notifications .mh-notifications__summary:not(:empty) + .mh-notifications__status:not(:empty)::before {
  content: "·";
  margin: 0 6px;
}

#view-notifications .mh-notifications__mark-all {
  flex: 0 0 auto;
  min-height: 44px;
  margin-left: auto;
  padding: 8px 4px 8px 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ap-accent, inherit);
  font-size: var(--mh-type-button, 12px);
  font-weight: 600;
}

#view-notifications .mh-notifications__mark-all[aria-busy="true"] {
  opacity: 0.6;
}

/* a failure while rows are on screen: the rows stay, this says what happened */
#view-notifications .mh-notifications__notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mh-density-space-2, 8px);
  margin: 0 0 var(--mh-density-space-3, 12px);
  padding: var(--mh-density-space-2, 8px) var(--mh-density-card-pad-x, 14px);
  border: var(--ap-line-w, 1px) solid var(--ap-notice-border, #48536a);
  border-radius: var(--mh-density-radius-card, 17px);
  background: var(--ap-notice-bg, #1a212c);
  color: var(--ap-text-2, inherit);
  font-size: var(--mh-type-body, 12px);
}

#view-notifications .mh-notifications__notice p {
  flex: 1 1 12em;
  margin: 0;
}

/* -------------------------------------------------------------------- list */
#view-notifications .mh-notifications__list {
  display: grid;
  gap: var(--mh-density-list-gap, 10px);
  margin: 0;
  padding: 0;
  list-style: none;
}

#view-notifications .mh-notice-row {
  min-width: 0;
  margin: 0;
  padding: 0;
}

#view-notifications .mh-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--mh-density-space-3, 12px);
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: var(--mh-density-list-card-pad-y, 12px) var(--mh-density-card-pad-x, 14px);
  border: var(--ap-line-w, 1px) solid transparent;
  border-radius: var(--mh-density-radius-card, 17px);
  background: transparent;
  color: var(--ap-text, inherit);
  font: inherit;
  font-size: var(--mh-type-body, 12px);
  line-height: var(--mh-density-leading-body, 1.45);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#view-notifications .mh-notice:focus-visible {
  outline: 2px solid var(--ap-focus, #d6e3f5);
  outline-offset: 2px;
}

/* unread: a raised glass card, a dot and a semibold title; read: flat, quieter text */
#view-notifications .mh-notice.is-unread {
  border-color: var(--ap-card-border, #ffffff38);
  background: var(--ap-card, #1b212b);
  box-shadow: var(--ap-card-edge, none);
}

#view-notifications .mh-notice.is-read {
  border-color: var(--ap-line, #424752);
}

#view-notifications .mh-notice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: calc(var(--mh-density-radius-card, 17px) - 5px);
  background: var(--ap-tag-bg, #222a36);
  color: var(--ap-muted, currentColor);
}

#view-notifications .mh-notice.is-unread .mh-notice__icon {
  background: var(--ap-selected, #303640);
  color: var(--ap-accent, currentColor);
}

#view-notifications .mh-notice__glyph {
  width: var(--mh-density-icon, 21px);
  height: var(--mh-density-icon, 21px);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--ap-icon-stroke, 1.6);
  stroke-linecap: round;
  stroke-linejoin: round;
}

#view-notifications .mh-notice__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#view-notifications .mh-notice__title {
  color: var(--ap-text, inherit);
  font-weight: 600;
  overflow-wrap: anywhere;
}

#view-notifications .mh-notice.is-read .mh-notice__title {
  color: var(--ap-text-2, inherit);
  font-weight: 400;
}

#view-notifications .mh-notice__body {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--ap-text-2, inherit);
  font-size: var(--mh-type-meta, 11px);
  overflow-wrap: anywhere;
}

#view-notifications .mh-notice.is-read .mh-notice__body {
  color: var(--ap-muted, inherit);
}

#view-notifications .mh-notice__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  margin-top: 2px;
  color: var(--ap-muted, inherit);
  font-size: var(--mh-type-caption, 10px);
  font-weight: 600;
  letter-spacing: 0.02em;
}

#view-notifications .mh-notice__time {
  font-weight: 400;
  letter-spacing: 0;
}

#view-notifications .mh-notice__time::before {
  content: "·";
  margin-right: 4px;
}

#view-notifications .mh-notice__dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--ap-accent, #d6dce5);
}

#view-notifications .mh-notice.is-read .mh-notice__dot {
  visibility: hidden;
}

/* loading: the rows' shape, drawn with the shared skeleton (its gradient reads the inset surface,
   raised here so the bars show on the dark canvas) */
#view-notifications .mh-notice--skeleton {
  --mh-surface-inset: var(--ap-selected, #303640);
  border-color: var(--ap-line, #424752);
  cursor: default;
}

#view-notifications .mh-notice__icon-skeleton {
  width: 32px;
  height: 32px;
  border-radius: calc(var(--mh-density-radius-card, 17px) - 5px);
}

#view-notifications .mh-notice__skeleton-title {
  width: 70%;
  height: 12px;
}

#view-notifications .mh-notice__skeleton-line {
  width: 45%;
  height: 10px;
  margin-top: 6px;
}

/* ---------------------------------------------------- empty, offline, error */
#view-notifications .mh-notifications__state {
  display: grid;
  justify-items: center;
  gap: var(--mh-density-space-2, 8px);
  margin: var(--mh-density-space-4, 16px) 0 0;
  padding: var(--mh-density-space-6, 24px) var(--mh-density-card-pad-x, 14px);
  border: var(--ap-line-w, 1px) solid var(--ap-card-border, #ffffff38);
  border-radius: var(--mh-density-radius-card, 17px);
  background: var(--ap-card, #1b212b);
  text-align: center;
}

#view-notifications .mh-notifications__state-title {
  margin: 0;
  color: var(--ap-text, inherit);
  font-size: var(--mh-type-section, 16px);
  font-weight: 600;
  line-height: var(--mh-density-leading-title, 1.22);
}

#view-notifications .mh-notifications__state-text {
  max-width: 28em;
  margin: 0;
  color: var(--ap-muted, inherit);
  font-size: var(--mh-type-body, 12px);
}

/* A shared sheet pins every .mh-button to justify-self/align-self: start with !important
   (saved-parity.css, #736), so buttons are centred by a flex row around them instead. */
#view-notifications .mh-notifications__actions {
  display: flex;
  justify-content: center;
  width: 100%;
}

#view-notifications .mh-notifications__actions:not(:has(> :not([hidden]))) {
  display: none;
}

/* the glass buttons of the approved look (group 02B): retry and load more */
#view-notifications .mh-notifications__button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 18px;
  border: var(--ap-line-w, 1px) solid var(--ap-glass-border, #ffffff4a);
  border-radius: var(--ap-pill, 31px);
  background: var(--ap-glass, transparent);
  box-shadow: var(--ap-glass-edge, none);
  color: #eef1f6;
  font-size: var(--mh-type-button, 12px);
  font-weight: 600;
}

#view-notifications .mh-notifications__button:disabled,
#view-notifications .mh-notifications__button[aria-busy="true"] {
  opacity: 0.6;
  cursor: default;
}

#view-notifications .mh-notifications__more {
  display: grid;
  justify-items: center;
  gap: var(--mh-density-space-2, 8px);
  margin: var(--mh-density-space-4, 16px) 0 var(--mh-density-space-6, 24px);
}

#view-notifications .mh-notifications__more-error {
  margin: 0;
  color: var(--ap-muted, inherit);
  font-size: var(--mh-type-meta, 11px);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  #view-notifications .mh-skeleton {
    animation: none;
  }
}