/* pages/devices.css — Devices + Add device (parent console, kids layer).
 *
 * Shared kids-layer layout utilities (`.kids …`) live in dashboard.css (this
 * layer's stylesheets always load together). The add-device ("enrol") route is
 * registered from devices.js — index.html is frozen and loads no enrol.css — so
 * its styles live here too. Scoped under `.kids`/`.page-*`; kit.css tokens only. */

.page-devices td:nth-child(3) { color: var(--text-muted); }

/* "Added by {name}" provenance line (stage 11d, family-owned devices): a muted
   sub-line under the device name in the list cell and under the title on the detail
   page. .muted already carries the AA-contrast muted token; this only sets size. */
.kids .dev-added-by { font-size: 0.8rem; margin-top: 2px; }
.kids .kids-detail-head .dev-added-by { margin-top: 6px; }

/* ---- delete-device (danger) panel ---- */
.page-device .kids-danger h2 { color: var(--danger); }

/* ---- add-device (enrol) ---- */
.page-enrol .panel { max-width: 560px; }
.kids .kids-instructions { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.kids .kids-instructions h3 { margin-bottom: 8px; }
.kids .kids-instructions code { font-size: 0.9rem; }
.kids .kids-steps { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.kids .kids-steps li { line-height: 1.45; }

/* Device status (stage 10b): the per-device "SafeSurf status" panel and the red
   banner shown on a device whose protection is off. Colours come from .msg.banner.err
   and the chip tones; these rules only handle spacing/layout. */
.kids .page-device-banner { display: block; }
.kids .page-device-banner-main { font-weight: 600; }
.kids .page-device-banner-sub { font-weight: 400; margin-top: 4px; opacity: 0.9; }
.kids .page-device-status-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }

/* Security-update status + "Test my protection" (stage 13). Chip tones + .muted
   carry the AA colours; these rules only handle spacing/layout and sit under the
   device name in the list (a small amber attention chip) and in the detail panel. */
.kids .dev-name-cell .dev-upgrade-chip { margin-top: 4px; }
.kids .page-device-upgrade-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.kids .page-device-upgrade-help { font-size: 0.85rem; }
.kids .page-device-check { margin: 0; line-height: 1.5; }
.kids .page-device-check a { word-break: break-all; }