/* Push notification settings (js/push.js), rendered into the settings sheet's
   push slot. Tokens only; 44 px targets. */

.push { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.push h2 { font-size: 1.05rem; margin: 0 0 .5em; }

/* Switch row: a native checkbox with its label; the box shows state. */
.push-switch { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 0; }
.push-switch input { width: 24px; height: 24px; margin: 10px 0 0; flex: none; accent-color: var(--accent); }
.push-switch label { display: grid; gap: 2px; min-height: 44px; padding-top: 8px; cursor: pointer; }
.push-switch input:disabled + label { cursor: default; }
.push-switch-label { font-weight: 600; }
.push-hint { font-size: .85rem; color: var(--muted); font-weight: 400; }

/* Status carries a mark as well as a color. */
.push-status { margin: .3em 0; min-height: 1.2em; font-size: .85rem; color: var(--muted); }
.push-status[data-kind="ok"]::before { content: "✓ "; }
.push-status[data-kind="error"] { color: var(--urgent); }
.push-status[data-kind="error"]::before { content: "! "; }

.push-note { margin: .6em 0 0; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 8px; font-size: .85rem; color: var(--muted); }