/* Settings ▸ Notifications.
 *
 * One screen's rules, in its own sheet for the reason looks.css, feelui.css and security.css
 * each got one: styles.css is 219 KB that every page on this origin pays for, and the panels
 * being worked on independently of the app around them are the ones that stop being merge
 * conflicts when they move out.
 *
 * It declares no tokens of its own and it reuses `.vw-sw` — the switch from the file-list
 * panel — deliberately. That is the app's switch, not that panel's; giving this screen a second
 * one that had to be kept looking identical is exactly how two switches end up looking
 * different. Only the rows around it are new.
 */

.pn-body { display: flex; flex-direction: column; gap: 5px; }

.pn-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: calc(9 * var(--sp)) calc(12 * var(--sp)) calc(9 * var(--sp)) calc(10 * var(--sp)); border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  background: var(--panel); transition: background .14s, border-color .14s;
}
/* Off is stated by the switch, so the row only steps back. It has to stay legible: deciding to
   turn something on means reading it first. Same rule as .vw-row, same reason. */
.pn-row.off { background: none; border-color: transparent; }
.pn-row.off .pn-nm { color: var(--mut); font-weight: var(--fw-medium); }
.pn-nm {
  flex: 1; min-width: 0; font-size: var(--fs-base); font-weight: var(--fw-semi);
  display: flex; flex-direction: column; gap: 3px;
}
/* `em` is only the tag that was to hand — this is a sentence about the switch, not emphasis. */
.pn-hint { font-style: normal; font-size: calc(var(--fs-sm) + var(--fs-half)); font-weight: var(--fw-medium); color: var(--faint); line-height: 1.45; }

/* The three sentences that are not rows. Sizes match .hint so the panel reads as one thing. */
.pn-off { font-size: var(--fs-base); font-weight: var(--fw-semi); margin: 4px 0 2px; }
.pn-cant { font-size: calc(var(--fs-md) + var(--fs-half)); color: var(--mut); line-height: 1.55; margin: 4px 0; }
.pn-note { margin: 12px 0 4px; line-height: 1.5; }

.pn-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.pn-foot .btn { height: 30px; padding: 0 calc(12 * var(--sp)); font-size: calc(var(--fs-md) + var(--fs-half)); }
/* Pushed to the right so the way out sits apart from the way to test it — the two buttons do
   opposite things and should not read as a pair. */
.pn-dev { flex: 1; min-width: 0; font-size: calc(var(--fs-sm) + var(--fs-half)); color: var(--faint); }

/* One button, at its own size: in the panel's flex column it stretched to the full 760px, the
   loudest thing in Settings for a choice that is entirely optional. */
.pn-on { align-self: flex-start; margin-top: 10px; }