/* Notifications settings list (public/js/notification-settings.js).
   One component on Account > Notifications (all groups, two columns on wide
   screens) and in Forum settings on /community (the Forum group, folded).
   Rows are compact: title + where it arrives, one line on what it is, the
   default, then the switch. */
.ns{--ns-gap:16px}
.ns-loading{margin:0;font-size:14px;color:var(--ink-2)}
.ns-groups{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ns-gap)}
.ns.is-wide .ns-groups{align-items:start}
@media(min-width:1000px){
 .ns.is-wide .ns-groups{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 1fr;grid-template-areas:"brands forum" "news forum"}
 .ns.is-wide .ns-group-brands{grid-area:brands}.ns.is-wide .ns-group-forum{grid-area:forum}.ns.is-wide .ns-group-news{grid-area:news}
}

/* A group: a light panel on Account; bare inside the Forum settings card. */
.ns-group{min-width:0;padding:16px 18px 6px;background:var(--pane);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--elev-1);scroll-margin-top:90px}
.ns-head{display:flex;align-items:flex-start;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.ns-head-text{display:block;flex:1;min-width:0}
.ns .ns-title{margin:0;font-size:16px;font-weight:700;line-height:1.3;letter-spacing:-.005em;color:var(--ink)}
.ns .ns-lead{margin:2px 0 0;font-size:13px;line-height:1.45;color:var(--ink-2)}
.ns-count{flex:none;margin-top:2px;font-size:12px;font-weight:650;line-height:1.3;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}

.ns-list{list-style:none;margin:0;padding:0}
.ns-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:start;gap:4px 12px;padding:12px 0;border-top:1px solid var(--rule)}
.ns-row:first-child{border-top:0}
.ns-row.is-sub{padding-left:22px}
.ns-row.is-sub .ns-row-ico{visibility:hidden}
.ns-row-ico{width:18px;height:18px;margin-top:2px;color:var(--ink-3)}
.ns-text{min-width:0}
.ns .ns-row-title{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;line-height:1.35}
.ns-label{font-size:15px;font-weight:650;color:var(--ink)}
.ns-chan{display:inline-flex;align-items:center;gap:4px;padding:1px 7px 1px 6px;border-radius:var(--r-pill);font-size:11.5px;font-weight:650;line-height:1.5;white-space:nowrap;
 color:var(--ink-2);background:var(--pane-2);border:1px solid var(--rule)}
.ns-chan-ico{width:12px;height:12px}
.ns-chan-text .ns-chan-ico{color:var(--confirm)}
.ns-chan-email .ns-chan-ico{color:var(--blue)}.ns-chan-bell .ns-chan-ico,.ns-chan-page .ns-chan-ico{color:var(--violet)}.ns-chan-push .ns-chan-ico{color:var(--strike)}
.ns .ns-meta{margin:3px 0 0;font-size:13px;line-height:1.45;color:var(--ink-2)}
.ns .ns-foot{display:flex;flex-wrap:wrap;gap:2px 10px;margin:3px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.ns-default{font-weight:600}
.ns-note{color:var(--blue)}
.ns .ns-status{display:flex;align-items:center;gap:5px;margin:0;font-size:13px;font-weight:600;line-height:1.45}
.ns .ns-status:empty{display:none}
.ns .ns-status{margin-top:4px}
.ns-status.is-busy{color:var(--ink-2)}
.ns-status.is-ok{color:var(--confirm)}
.ns-status.is-error{color:var(--strike)}
.ns-status-ico{width:14px;height:14px;flex:none}

/* Controls: a 44px switch, matching the Account switches. */
.ns-switch,.community .ns .ns-switch{display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;min-height:44px;margin:-10px 0;padding:0;border:0;border-radius:var(--r-pill);background:none;color:var(--ink-2);font:650 13px/1.2 var(--sans);cursor:pointer;filter:none}
.ns-track{position:relative;flex:none;width:44px;height:26px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--ink-3) 40%,var(--rule));transition:background-color .15s ease}
.ns-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.ns-word{min-width:2.2em;text-align:left}
.ns-switch[aria-checked="true"],.community .ns .ns-switch[aria-checked="true"]{color:var(--confirm)}
.ns-switch[aria-checked="true"] .ns-track{background:var(--confirm)}
.ns-switch[aria-checked="true"] .ns-thumb{transform:translateX(18px)}
.ns-switch:disabled{cursor:progress;opacity:.6}
.ns-switch:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:var(--r-pill)}
.ns-pill{display:inline-flex;align-items:center;min-height:24px;padding:2px 9px;border-radius:var(--r-pill);font-size:12px;font-weight:650;line-height:1.3;white-space:nowrap;color:var(--ink-2);background:var(--pane-2);border:1px solid var(--rule)}
.ns-pill.is-on{color:var(--confirm);background:color-mix(in srgb,var(--confirm) 10%,var(--pane));border-color:color-mix(in srgb,var(--confirm) 30%,var(--rule))}
.ns-pill.is-muted{color:var(--ink-3)}
.ns-linked{display:inline-flex;align-items:center;gap:10px}
.ns-link{display:inline-flex;align-items:center;min-height:40px;margin:-8px 0;font-size:14px;font-weight:600;color:var(--violet);text-underline-offset:3px}
.ns-empty{padding:12px 0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.ns-empty a{color:var(--violet)}
.ns-full{margin:12px 0 0;font-size:14px}
.ns-full-link{display:inline-flex;align-items:center;gap:6px;min-height:40px;font-weight:600;color:var(--violet);text-underline-offset:3px}
.ns-full-ico{width:14px;height:14px}
@media (prefers-reduced-motion:reduce){.ns-track,.ns-thumb{transition:none}}

/* Folded (Forum settings on /community): no panel chrome of its own, the
   group is a disclosure whose summary carries the count. */
.ns.is-folded .ns-group{padding:0;background:none;border:0;box-shadow:none}
.ns.is-folded .ns-head{cursor:pointer;list-style:none;align-items:center;min-height:44px;padding:4px 0;border-bottom:0;border-radius:var(--r-sm)}
.ns.is-folded .ns-head::-webkit-details-marker{display:none}
.ns.is-folded .ns-head:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.ns.is-folded .ns-title{font-size:15px}
.ns.is-folded .ns-lead{display:none}
.ns-caret{width:16px;height:16px;flex:none;color:var(--ink-2);transition:transform .18s ease}
.ns.is-folded details[open] .ns-caret{transform:rotate(180deg)}
.ns.is-folded details[open] .ns-head{border-bottom:1px solid var(--rule);padding-bottom:8px}
/* Narrow rows (the rail, phones): no row icon; the title shares the first
   line with its control and the description runs the full width under both. */
.ns.is-folded .ns-row{grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center}
.ns.is-folded .ns-row-ico{display:none}
.ns.is-folded .ns-text{display:contents}
.ns.is-folded .ns-row-title{grid-column:1;grid-row:1}
.ns.is-folded .ns-row>:last-child{grid-column:2;grid-row:1;justify-self:end}
.ns.is-folded :is(.ns-meta,.ns-foot,.ns-status){grid-column:1/-1}
.ns.is-folded .ns-row.is-sub{padding-left:14px}
.ns.is-folded .ns-label{font-size:14px}
.ns.is-folded .ns-word{display:none}

@media(max-width:560px){
 .ns-group{padding:14px 14px 4px}
 .ns-row{grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center}
 .ns-row-ico{display:none}
 .ns-text{display:contents}
 .ns-row-title{grid-column:1;grid-row:1}
 .ns-row>:last-child{grid-column:2;grid-row:1;justify-self:end}
 :is(.ns-meta,.ns-foot,.ns-status){grid-column:1/-1}
 .ns-row.is-sub{padding-left:14px}
 .ns-word{display:none}
}