/* Settings: Phone and desktop notifications (push.js). Uses the app's own colour variables, so both themes work. */
.pn{max-width:760px}
.pn-lead{max-width:68ch;margin:0 0 10px}
.pn code{font-family:ui-monospace,Consolas,monospace;font-size:12px;background:var(--sf2);border:1px solid var(--bd);border-radius:4px;padding:1px 5px;overflow-wrap:anywhere}
.pn-steps{border:1px solid var(--bd2);background:var(--sf);border-radius:var(--r);padding:10px 14px;margin:0 0 10px;max-width:68ch}
.pn-steps p{margin:0 0 6px}
.pn-steps ol{margin:0 0 10px;padding-left:20px;display:grid;gap:6px}
.pn-warn{color:var(--warn,#c98a00)}
.pn-ok{color:var(--ok,#2f9e6b)}
.pn-msg{min-height:18px;margin:8px 0 0}
.pn-note{margin-left:10px;font-size:12px}
.pn-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.pn-list li{border:1px solid var(--bd);background:var(--sf);border-radius:var(--r);padding:10px 12px;display:grid;gap:8px}
.pn-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pn-label{min-width:0;flex:1 1 160px;max-width:260px}
.pn-here{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--acc)}
.pn-seen{font-size:12px;margin-left:auto}
.pn-lv{display:flex;flex-wrap:wrap;gap:6px 18px}
.pn-lv label{display:inline-flex;align-items:center;gap:6px;min-height:28px}
.pn-act{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:719px){
  .pn-label{max-width:none;flex-basis:100%}
  .pn-seen{margin-left:0;flex-basis:100%}
  .pn-lv{flex-direction:column}
  .pn-act .btn,.pn .btn.pri{min-height:44px}
  .pn .btn.pri{width:100%;justify-content:center}
}