/* pages/encrypted-dns.css — "Apps using their own DNS" (parent console, stage 13b).
 *
 * Scoped under .page-encdns so it can never collide with another page's CSS. Uses
 * only the webkit design tokens (kit.css) — no @import, no inline styles, so the
 * strict CSP holds. Colours come from the semantic tokens, so light/dark and the
 * AA contrast floors are inherited from the kit. Lays out cleanly at phone width. */

.page-encdns h1 { margin-bottom: 4px; }
.page-encdns .encdns-intro { margin: 0 0 16px; max-width: 70ch; }
.page-encdns .encdns-section { margin-bottom: var(--gap); }
.page-encdns .encdns-section h2 { margin: 0 0 10px; }
.page-encdns td, .page-encdns .encdns-app-name, .page-encdns .encdns-sl-app { word-break: break-word; }

/* ---- alert cards ---- */
.page-encdns .encdns-alert { border-left: 4px solid var(--border-strong); }
.page-encdns .encdns-alert.is-first { border-left-color: var(--danger); }
.page-encdns .encdns-alert.is-summary { border-left-color: var(--primary); }
.page-encdns .encdns-alert-head { display: flex; gap: 12px; align-items: flex-start; }
.page-encdns .encdns-alert-icon { flex: none; line-height: 0; margin-top: 2px; }
.page-encdns .encdns-alert-icon.first { color: var(--danger); }
.page-encdns .encdns-alert-icon.sum { color: var(--primary); }
.page-encdns .encdns-alert-title { font-weight: 700; }
.page-encdns .encdns-alert-body { margin-top: 2px; }
.page-encdns .encdns-alert-when { margin-top: 4px; font-size: 0.82rem; }
.page-encdns .encdns-alert-choice { margin-top: 12px; }
.page-encdns .encdns-choice-lbl { font-size: 0.86rem; margin-bottom: 6px; }
.page-encdns .encdns-alert-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* The daily-summary per-app/device lines (counts are running totals, not "today"). */
.page-encdns .encdns-summary-lines { margin: 10px 0 0; padding-left: 20px; }
.page-encdns .encdns-summary-lines li { margin: 3px 0; }
.page-encdns .encdns-sl-app { font-weight: 600; }

/* ---- apps settings list ---- */
.page-encdns .encdns-app-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.page-encdns .encdns-app-name { font-weight: 700; font-size: 1.02rem; }
.page-encdns .encdns-app-meta { margin-top: 4px; font-size: 0.88rem; }

/* ---- per-app segmented choice control ---- */
.page-encdns .encdns-choice { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.page-encdns .encdns-choice-btn { font-weight: 600; }
/* The active choice reads as selected (filled primary) — aria-pressed carries it for
 * assistive tech; the fill is the visual echo. */
.page-encdns .encdns-choice-btn.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.page-encdns .encdns-choice-btn.on:hover { background: var(--primary-strong); border-color: var(--primary-strong); }
.page-encdns .encdns-choice-btn.danger-choice.on { background: var(--warn); border-color: var(--warn); color: #0e1626; }
/* Dark mode: the active primary button keeps dark text for contrast (mirrors the
 * kit's .btn.primary dark-mode rule). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page-encdns .encdns-choice-btn.on { color: #0e1626; }
}
:root[data-theme="dark"] .page-encdns .encdns-choice-btn.on { color: #0e1626; }
.page-encdns .encdns-choice-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.page-encdns .encdns-notes { margin-top: 8px; }
.page-encdns .encdns-note { font-size: 0.84rem; margin-top: 2px; }

/* Lock note (stage 11b): lockControls prepends it INTO .encdns-choice-wrap (a block),
 * above the inline button group. The kit styles .lock-note itself; keep the group a
 * block in this wrapper so the note stacks above it, and give the note breathing room. */
.page-encdns .encdns-choice-wrap { display: block; }
.page-encdns .encdns-choice-wrap.is-locked .encdns-choice { margin-top: 0; }
.page-encdns .encdns-choice-wrap > .lock-note { margin: 0 0 4px; }