/*
 * Kiros Social – notifications module.
 * Tokens only. Unread rows: text on surface-2 (checked pair) plus a bold
 * title, a brand-ui bar and a dot. No text sits on a brand colour here.
 */

/* Core's .ks-app [hidden] has the same weight as .ks-badge (display: flex) and comes first, so a hidden badge still showed "0". */
.ks-app .ks-nav__item .ks-badge[hidden] { display: none; }

.ks-app .ks-ntf-hero { padding: 22px 26px; }
.ks-app .ks-ntf-hero h1 { font-size: 1.9rem; }
.ks-app .ks-ntf-group { display: grid; gap: 10px; }
.ks-app .ks-ntf-group__title { font-size: 1.1rem; color: var(--ks-heading); padding: 0 4px; }
.ks-app .ks-card.ks-ntf-card { overflow: visible; padding: 0; }
.ks-app .ks-ntf-rows { margin: 0; padding: 0; list-style: none; }
.ks-app .ks-ntf-item { margin: 0; padding: 0; }
.ks-app .ks-ntf-item:first-child .ks-ntf-row { border-radius: var(--ks-r) var(--ks-r) 0 0; }
.ks-app .ks-ntf-item:last-child .ks-ntf-row { border-radius: 0 0 var(--ks-r) var(--ks-r); }
.ks-app .ks-ntf-item:only-child .ks-ntf-row { border-radius: var(--ks-r); }

/* Unread rows sit on the navy tint (ink-soft); the settle-down on "Mark all as read" is just this transition. */
.ks-app .ks-ntf-row { padding: 0 6px 0 0; gap: 0; align-items: center; background: var(--ks-surface); color: var(--ks-text); transition: background-color 420ms var(--ks-ease); }
.ks-app .ks-ntf-row:hover { background: var(--ks-surface-2); }
.ks-app .ks-ntf-row.is-unread { background: var(--ks-ink-soft); }
.ks-app .ks-ntf-row.is-unread:hover { background: var(--ks-ink-soft); }
.ks-app .ks-ntf-row__link { flex: 1 1 auto; min-width: 0; min-height: 72px; display: flex; align-items: center; gap: 14px; padding: 12px 8px 12px 20px; text-decoration: none; color: var(--ks-text); border-radius: inherit; }
.ks-app .ks-ntf-row__avatar { flex: none; display: inline-flex; min-width: 44px; }
.ks-app .ks-ntf-row__stack { padding-right: 8px; }
.ks-app .ks-ntf-row__stack .ks-avatar { border: 2px solid var(--ks-surface); margin-left: -10px; }
.ks-app .ks-ntf-row__stack .ks-avatar:first-child { margin-left: 0; }
.ks-app .ks-ntf-row.is-unread .ks-ntf-row__stack .ks-avatar { border-color: var(--ks-ink-soft); }
.ks-app .ks-ntf-row__body { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.ks-app .ks-ntf-row__text { color: var(--ks-text); line-height: 1.4; font-size: .95rem; }
.ks-app .ks-ntf-row.is-unread .ks-ntf-row__text { font-weight: 600; }
.ks-app .ks-ntf-row__time { font-size: .78rem; color: var(--ks-text-muted); }
.ks-app .ks-ntf-row__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ks-brand-ui); opacity: 0; transition: opacity 420ms var(--ks-ease); }
.ks-app .ks-ntf-row.is-unread .ks-ntf-row__dot { opacity: 1; }
.ks-app .ks-ntf-icon { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ks-avatar-bg); color: var(--ks-on-avatar); }
.ks-app .ks-ntf-row .ks-menu { flex: none; }

/* Account -> Email settings */
.ks-app .ks-ntf-prefs { max-width: 720px; }
.ks-app .ks-ntf-prefs__group { margin: 0; padding: 14px 16px; border: 1px solid var(--ks-border); border-radius: var(--ks-r-md); display: grid; gap: 10px; min-width: 0; background: var(--ks-surface); }
.ks-app .ks-ntf-prefs__head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.ks-app .ks-ntf-prefs__title { font-family: var(--ks-font-display); font-size: 1.05rem; font-weight: 400; color: var(--ks-heading); }
.ks-app .ks-ntf-prefs__mode { display: block; min-width: 220px; }
.ks-app .ks-ntf-prefs__mode .ks-select { min-height: 40px; }
.ks-app .ks-ntf-prefs__row { align-items: center; min-height: 36px; }
.ks-app .ks-ntf-prefs__pause { padding-top: 14px; border-top: 1px solid var(--ks-border); }

/* Stop-all-emails page */
.ks-app.ks-ntf-unsub-page { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; border-radius: 0; }
.ks-app .ks-ntf-unsub { width: min(520px, 100%); }
.ks-app .ks-ntf-unsub__card { padding: 24px; }
.ks-app .ks-ntf-unsub__site { color: var(--ks-text-muted); font-weight: 700; }

@media (max-width: 480px) {
	.ks-app .ks-ntf-row__link { gap: 12px; padding-left: 14px; }
	.ks-app .ks-ntf-hero { padding: 18px 20px; }
	.ks-app .ks-ntf-hero h1 { font-size: 1.6rem; }
	.ks-app .ks-ntf-prefs__mode { min-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.ks-app .ks-ntf-row, .ks-app .ks-ntf-row__dot { transition: none; }
}