/* learner.css — the learner-facing access pieces: the resend form (/access), the learner sign-in card (/signin)
   and the "sign in on this device" panel on /course. Consumer register, same navy tokens as style.css; the dense
   admin styling stays where it belongs. Loaded only on those three pages. */

/* /access — one field, nothing else on the page to distract from it. */
.access-card { max-width: 520px; margin: var(--sp-5) auto var(--sp-6); }
.access-card h1 { font-size: var(--fs-4); }
.access-card .form { margin-top: var(--sp-4); }
.access-foot { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); font-size: var(--fs-0); color: var(--c-muted); }
.access-foot a { color: var(--c-navy); }

/* /course — the quiet panel under the CPD record. Bordered, not shouted; a learner who is happy with the emailed
   link never needs to read it. */
.pk-panel { border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); padding: var(--sp-5); max-width: 640px; }
.pk-panel h2 { font-size: var(--fs-3); margin-bottom: var(--sp-2); }
.pk-panel p { font-size: var(--fs-1); }
.pk-panel .btn { margin-top: var(--sp-2); }
.pk-panel .pk-status { min-height: 0; }

/* The registered devices, on /course. One row a device: name, when, and a two-click Remove. */
.pk-devices { list-style: none; padding: 0; margin: var(--sp-4) 0 0; border-top: 1px solid var(--c-border); }
.pk-devices li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-border); flex-wrap: wrap; }
.pk-device-name { font-weight: 600; color: var(--c-text); }
.pk-devices li .muted { flex: 1; min-width: 8rem; }
.pk-devices li .btn { margin-top: 0; }
.pk-signout { margin-top: var(--sp-4); }

@media (max-width: 768px) {
    .access-card { margin: var(--sp-3) auto var(--sp-5); }
    .pk-panel { padding: var(--sp-4); }
    .pk-devices li { gap: var(--sp-2); }
}

/* Learner accounts (2026-10-27): /signin's "or" rule, /account's course list and passkey rename, the course picker. */
.or-rule { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0; color: var(--c-muted); font-size: var(--fs-0); }
.or-rule::before, .or-rule::after { content: ""; flex: 1; border-top: 1px solid var(--c-border); }
.account h2 { font-size: var(--fs-3); margin-top: var(--sp-6); }
.account .form { margin-top: var(--sp-3); }
.acct-orders, .course-list { list-style: none; padding: 0; margin: var(--sp-3) 0; }
.acct-orders li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border); }
.acct-course { font-weight: 600; color: var(--c-text); flex: 1 1 100%; }
.acct-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-left: auto; }
.course-list li { margin-bottom: var(--sp-3); }
.pk-rename { min-height: 36px; padding: 0 var(--sp-2); border: 1px solid var(--c-navy); border-radius: var(--radius); font: inherit; flex: 1; min-width: 8rem; }