/* SkoolBase demo: the few things the real app has no class for. Everything else is app.css. */

/* Who you are signing in as (sign-in card) */
.demo-who { display: grid; gap: 2px; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(242, 181, 68, 0.1); border: 1px solid rgba(242, 181, 68, 0.22); font-size: 0.8125rem; line-height: 1.45; }
.demo-who strong { color: var(--sun); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.demo-who span { color: var(--text-2); }

/* "Demo mode" strip under the top bar */
.demo-banner { flex-wrap: wrap; row-gap: 4px; }
.demo-banner > span:first-of-type { flex: 1 1 260px; }
.demo-banner-links { display: inline-flex; gap: 14px; }
.demo-banner-links a { white-space: nowrap; }

/* Register: name on the left, Present / Late / Absent on the right */
.register-row { flex-wrap: wrap; row-gap: 8px; }
.register-row .segmented { margin-left: auto; }
.register-row .segmented button[data-v="late"][aria-pressed="true"] { background: var(--warning-soft); color: var(--warning); }
.register-row .segmented button[data-v="absent"][aria-pressed="true"] { background: var(--danger-soft); color: var(--danger); }
@media (max-width: 520px) { .register-row .segmented { width: 100%; } .register-row .segmented button { flex: 1; } }

/* Mark sheet inputs */
.mark-input { width: 76px; text-align: right; }
.mark-input[aria-invalid="true"] { border-color: var(--danger); }