/* ==========================================================
   Study Buddy 4 U — design system (mobile-first)
   ========================================================== */
:root {
  --brand: #0f766e;
  --brand-strong: #115e59;
  --brand-soft: #ccfbf1;
  --accent: #f59e0b;
  --accent-soft: #fef3c7;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --success: #15803d;
  --success-soft: #dcfce7;
  --bg: #f6f7f5;
  --surface: #ffffff;
  --surface-2: #f1f3f1;
  --text: #17201e;
  --text-2: #55615e;
  --border: #e1e6e3;
  --input-border: #7d8b86;   /* ≥3:1 against white – form fields must be easy to see (WCAG 1.4.11) */
  --input-border-hover: #55615e;
  --focus: #2563eb;
  --shadow: 0 1px 2px rgba(16, 24, 22, .06), 0 4px 16px rgba(16, 24, 22, .06);
  --radius: 14px;
  --radius-sm: 10px;
  --tap: 48px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Tamil", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand: #2dd4bf; --brand-strong: #5eead4; --brand-soft: #134e4a;
    --accent-soft: #422006; --danger-soft: #450a0a; --success-soft: #052e16;
    --bg: #0e1412; --surface: #161e1c; --surface-2: #1d2724; --text: #e8eeec; --text-2: #9fb0ab;
    --border: #2a3532; --shadow: 0 1px 2px rgba(0,0,0,.4);
    --input-border: #6b7c77; --input-border-hover: #9fb0ab;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--text); background: var(--bg); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .25rem; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.125rem; }
p { margin: 0 0 .75rem; }
a { color: var(--brand-strong); }
.muted { color: var(--text-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.icon { width: 22px; height: 22px; flex: none; }
[hidden] { display: none !important; }

/* ---------- Brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand-mark { width: 40px; height: 40px; flex: none; display: block; object-fit: contain; }
.brand-text { font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; white-space: nowrap; }
/* Wordmark colours taken from the logo (lighter tints in dark mode for contrast) */
:root { --logo-blue: #004893; --logo-green: #359136; --logo-orange: #f59a0c; }
@media (prefers-color-scheme: dark) { :root { --logo-blue: #7fb2ff; --logo-green: #6fcf70; --logo-orange: #ffb547; } }
.brand-study { color: var(--logo-blue); }
.brand-buddy { color: var(--logo-green); }
.brand-text b { color: var(--logo-orange); font-weight: 800; }
a:has(> .brand) { text-decoration: none; }

/* ---------- Buttons & inputs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1px solid transparent; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background .15s, transform .05s; }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 20px; height: 20px; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-strong); }
@media (prefers-color-scheme: dark) { .btn-primary { color: #04201c; } }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-lg { min-height: var(--tap); font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: .9rem; }
.btn[disabled], .btn.is-loading { opacity: .6; pointer-events: none; }
.btn.is-loading::after { content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--text); cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); }

.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: .95rem; }
.field .req { color: var(--danger); }
input, select, textarea { width: 100%; min-height: var(--tap); padding: 10px 14px; font: inherit; color: var(--text); background: var(--surface);
  border: 1.5px solid var(--input-border); border-radius: var(--radius-sm); box-shadow: inset 0 1px 2px rgba(16, 24, 22, .06);
  transition: border-color .15s ease, box-shadow .15s ease; }
input:hover:not(:disabled):not(:focus), select:hover:not(:disabled):not(:focus), textarea:hover:not(:disabled):not(:focus) { border-color: var(--input-border-hover); }
input::placeholder, textarea::placeholder { color: var(--text-2); opacity: .85; }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); border-style: dashed; cursor: not-allowed; }
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); outline: 3px solid color-mix(in srgb, var(--brand) 25%, transparent); outline-offset: 0; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: .875rem; margin: 0; min-height: 0; }
.field-error:empty { display: none; }
.hint { color: var(--text-2); font-size: .85rem; margin: 0; }
.input-group { display: flex; }
.input-group input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-addon { border: 1.5px solid var(--input-border); border-left: 0; background: var(--surface-2); padding: 0 14px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font: inherit; font-size: .9rem; color: var(--text-2); cursor: pointer; }
.form-alert { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); font-size: .95rem; }
.form-alert.is-success { background: var(--success-soft); color: var(--success); }

/* ---------- Cards & chips ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; font-style: normal; white-space: nowrap; }
.chip-active { background: var(--success-soft); color: var(--success); }
.chip-inactive { background: var(--surface-2); color: var(--text-2); }
.chip-muted { background: var(--surface-2); color: var(--text-2); }
.chip-ut { background: var(--accent-soft); color: #92400e; }
@media (prefers-color-scheme: dark) { .chip-ut { color: var(--accent); } }

/* ---------- Skeletons & states ---------- */
.skeleton { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), var(--border), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.skeleton.short { width: 40%; margin-top: 10px; }
.skeleton-num { width: 48px; height: 28px; }
.skeleton-card { display: grid; gap: 8px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.list-state { padding: 40px 16px; text-align: center; color: var(--text-2); }
.list-state .icon { width: 36px; height: 36px; display: block; margin: 0 auto 8px; opacity: .6; }

/* ---------- Toasts & dialogs ---------- */
.toast-region { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: 8px; z-index: 200; width: min(92vw, 420px); pointer-events: none; }
.layout-admin .toast-region, .layout-blank .toast-region { bottom: 24px; }
.toast { pointer-events: auto; background: #17201e; color: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow); font-size: .95rem; animation: toast-in .2s ease-out; }
.toast.is-error { background: var(--danger); }
.toast.is-success { background: var(--success); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

dialog.modal { border: 0; padding: 0; border-radius: 18px; width: min(560px, 100vw); max-height: 92vh; background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
dialog.modal::backdrop { background: rgba(10, 16, 14, .45); }
.modal .form { gap: 0; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 6px 20px; }
.modal-body { padding: 8px 20px 16px; display: grid; gap: 16px; overflow-y: auto; }
.form-fields { display: grid; gap: 16px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px 18px; border-top: 1px solid var(--border); }
@media (max-width: 599px) {
  dialog.modal { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 18px 18px 0 0; }
  .modal-foot { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .modal-foot .btn { flex: 1; }
}

/* ---------- Blank layout (auth, landing, errors) ---------- */
.blank-main { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 28px 22px; box-shadow: var(--shadow); }
.auth-card h1 { margin-top: 20px; }
.auth-brand { display: flex; justify-content: center; text-decoration: none; }
/* Full logo with tagline. Drawn on white, so in dark mode it sits on a white tile. */
.logo-full { display: inline-block; line-height: 0; border-radius: 16px; }
.logo-full img { display: block; width: 100%; height: auto; }
.logo-md { width: min(220px, 70%); }
.logo-lg { width: min(340px, 80vw); }
@media (prefers-color-scheme: dark) { .logo-full { background: #fff; padding: 10px 14px; } }
.auth-links { margin-top: 18px; display: grid; gap: 8px; font-size: .95rem; text-align: center; }
.error-card { text-align: center; }
.error-code { font-size: 3rem; font-weight: 700; color: var(--brand); margin: 16px 0 0; }

.landing { width: 100%; max-width: 560px; text-align: center; }
.landing-hero h1 { font-size: 2rem; margin-top: 24px; letter-spacing: -.02em; }
.landing-hero .lead { margin-top: 8px; }
.landing-hero { display: grid; justify-items: center; gap: 8px; }
.lead { font-size: 1.1rem; color: var(--text-2); }
.portal-grid { display: grid; gap: 12px; margin-top: 28px; text-align: left; }
.portal-card { display: flex; align-items: center; gap: 16px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--text); box-shadow: var(--shadow); min-height: 84px; }
.portal-card:hover { border-color: var(--brand); }
.portal-card b { display: block; font-size: 1.1rem; }
.portal-card small { color: var(--text-2); font-size: .95rem; }
.portal-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; flex: none; }
.portal-icon .icon { width: 28px; height: 28px; }
.tone-teal { background: var(--brand-soft); color: var(--brand-strong); }
.tone-amber { background: var(--accent-soft); color: #b45309; }
.landing-foot { margin-top: 28px; font-size: .9rem; }
@media (min-width: 600px) { .portal-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Admin layout ---------- */
.admin-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar-brand { text-decoration: none; }
.topbar-role { margin-left: auto; font-size: .8rem; color: var(--text-2); }
.admin-nav { position: fixed; inset: 0 auto 0 0; width: 280px; max-width: 86vw; background: var(--surface); border-right: 1px solid var(--border);
  transform: translateX(-100%); transition: transform .2s ease; z-index: 50; display: flex; flex-direction: column; padding: 16px 12px; overflow-y: auto; }
.admin-nav.is-open { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.2); }
.nav-backdrop { position: fixed; inset: 0; background: rgba(10,16,14,.4); z-index: 40; }
.nav-brand { padding: 4px 10px 16px; }
.admin-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav-heading { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); padding: 16px 12px 6px; }
.nav-link { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 500; }
.nav-link:hover { background: var(--surface-2); }
.nav-link.is-active { background: var(--brand-soft); color: var(--brand-strong); }
.nav-link.is-disabled { color: var(--text-2); cursor: default; }
.nav-link .chip { margin-left: auto; }
.nav-foot { margin-top: auto; display: grid; gap: 10px; padding-top: 16px; }
.privacy-note { display: flex; gap: 8px; font-size: .8rem; color: var(--text-2); background: var(--surface-2); padding: 10px; border-radius: 10px; }
.privacy-note .icon { width: 18px; height: 18px; color: var(--brand); }
.nav-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; text-decoration: none; color: var(--text); }
.nav-user:hover { background: var(--surface-2); }
.nav-user-text { display: grid; min-width: 0; }
.nav-user-text small { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; flex: none; }
.admin-main { padding: 20px 16px 40px; max-width: 1200px; outline: none; }

@media (min-width: 1024px) {
  .admin-topbar { display: none; }
  .admin-shell { display: grid; grid-template-columns: 260px 1fr; }
  .admin-nav { position: sticky; top: 0; height: 100vh; transform: none; width: auto; max-width: none; }
  .nav-backdrop { display: none !important; }
  .admin-main { padding: 32px 40px 48px; }
}
@media (max-width: 1023px) { .nav-brand { display: none; } }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.page-head p { margin: 0; }

.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat-card { display: grid; gap: 4px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--text); box-shadow: var(--shadow); }
a.stat-card:hover { border-color: var(--brand); }
.stat-icon { color: var(--brand); }
.stat-value { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; min-height: 2.6rem; display: flex; align-items: center; }
.stat-label { color: var(--text-2); font-size: .9rem; }
.callout, .info-card { display: flex; gap: 14px; align-items: flex-start; }
.callout-icon, .info-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-strong); flex: none; }
.callout p, .info-card p { margin: 0; color: var(--text-2); }

/* ---------- Master data list ---------- */
.toolbar { display: grid; gap: 10px; margin-bottom: 14px; }
.toolbar-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.toolbar-filters select { width: auto; flex: 1 1 160px; }
.search { position: relative; display: block; }
.search .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-2); width: 20px; height: 20px; }
.search input { padding-left: 44px; }
@media (min-width: 768px) { .toolbar { grid-template-columns: minmax(240px, 1fr) auto; align-items: center; } .toolbar-filters { flex-wrap: nowrap; } }

.table-card { padding: 0; overflow: hidden; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); font-weight: 600; padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table th button { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.data-table th button:focus-visible { outline: 3px solid var(--focus); }
.data-table th[aria-sort="ascending"] button::after { content: "▲"; font-size: .65rem; }
.data-table th[aria-sort="descending"] button::after { content: "▼"; font-size: .65rem; }
.data-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td.actions { text-align: right; white-space: nowrap; }
.data-table td.actions .btn + .btn { margin-left: 6px; }
.cell-desc { color: var(--text-2); max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Mobile: rows become cards (no wide tables on phones) */
@media (max-width: 767px) {
  .table-card { background: transparent; border: 0; box-shadow: none; }
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 10px; padding: 12px 14px; }
  .data-table td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; gap: 12px; }
  .data-table td::before { content: attr(data-label); color: var(--text-2); font-size: .85rem; }
  .data-table td.cell-primary { font-weight: 600; font-size: 1.05rem; }
  .data-table td.cell-primary::before { content: none; }
  .data-table td.actions { justify-content: flex-end; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--border); }
  .data-table td.actions::before { content: none; }
  .cell-desc { max-width: 60%; white-space: normal; text-align: right; }
  .list-state { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
}
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.pager-info { color: var(--text-2); font-size: .9rem; }

/* ---------- Parent / Student app ---------- */
.app-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; padding-top: calc(8px + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); }
.app-main { max-width: 720px; margin: 0 auto; padding: 8px 16px calc(96px + env(safe-area-inset-bottom)); display: grid; gap: 18px; outline: none; }
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--surface); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
.tab { display: grid; justify-items: center; gap: 2px; min-height: 60px; padding: 8px 4px; font: inherit; font-size: .72rem; font-weight: 600; color: var(--text-2); text-decoration: none; background: none; border: 0; cursor: pointer; }
.tab .icon { width: 24px; height: 24px; }
.tab.is-active { color: var(--brand); }
.tab.is-soon { opacity: .55; }
@media (min-width: 768px) {
  .bottom-nav { left: 50%; right: auto; transform: translateX(-50%); bottom: 16px; width: 520px; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); padding-bottom: 0; }
}
.greeting { padding-top: 8px; }
.greeting-time { color: var(--text-2); margin: 0; }
.greeting h1 { font-size: 1.75rem; }
.section { display: grid; gap: 10px; }
.section-head { display: flex; align-items: center; justify-content: space-between; }
.eyebrow { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin: 0; }
.academic-card { background: linear-gradient(135deg, var(--brand), var(--brand-strong)); color: #fff; border: 0; }
.academic-card .eyebrow, .academic-card .muted { color: rgba(255,255,255,.85); margin: 0; }
.academic-year { font-size: 1.6rem; font-weight: 700; margin: 2px 0; }
@media (prefers-color-scheme: dark) { .academic-card { color: #04201c; } .academic-card .eyebrow, .academic-card .muted { color: rgba(4,32,28,.8); } }

.student-cards { display: grid; gap: 12px; }
@media (min-width: 600px) { .student-cards { grid-template-columns: 1fr 1fr; } }
.student-card { display: grid; gap: 8px; }
.student-card-head { display: flex; align-items: center; gap: 12px; }
.student-card-head b { font-size: 1.1rem; display: block; }
.student-card-head small { color: var(--text-2); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .95rem; margin: 0; }
.kv dt { color: var(--text-2); }
.kv dd { margin: 0; text-align: right; font-weight: 500; }

.entry-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.entry { display: flex; align-items: center; gap: 12px; }
.entry-time { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; font-size: .85rem; flex: none; text-align: center; line-height: 1.1; }
.entry-main { flex: 1; min-width: 0; }
.entry-main b { display: block; }
.entry-main small { color: var(--text-2); }
.chip-pending { background: var(--accent-soft); color: #92400e; }
.chip-approved { background: var(--success-soft); color: var(--success); }
.chip-rejected { background: var(--danger-soft); color: var(--danger); }
@media (prefers-color-scheme: dark) { .chip-pending { color: var(--accent); } }

.form-card { max-width: 520px; }
.form-card h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Phase 3: accounts ---------- */
.row-link { color: var(--text); font-weight: 600; text-decoration: none; }
.row-link:hover { color: var(--brand-strong); text-decoration: underline; }
.small { font-size: .875rem; }
.btn-danger-text { color: var(--danger); }
.breadcrumb { display: flex; gap: 8px; font-size: .9rem; color: var(--text-2); margin-bottom: 12px; flex-wrap: wrap; }
.breadcrumb a { color: var(--text-2); }
.detail-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.detail-title p { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.2rem; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.detail-grid { display: grid; gap: 14px; margin-bottom: 22px; }
@media (min-width: 900px) { .detail-grid { grid-template-columns: 1fr 1fr; } }
.detail-grid h2 { margin-bottom: 10px; }
.kv-left dd { text-align: left; }
.kv-left { grid-template-columns: minmax(110px, auto) 1fr; }
.account-detail .section { margin-bottom: 18px; }
.account-detail .section-head { flex-wrap: wrap; gap: 10px; }
.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.link-card { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.link-card.is-inactive { opacity: .7; }
.link-main { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.link-main p { margin: 2px 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px !important; }
.link-actions { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 599px) { .link-actions { width: 100%; } .link-actions .btn { flex: 1 1 auto; } }
.privacy-inline { margin-top: 8px; }
.combo-list { list-style: none; margin: 4px 0 0; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); max-height: 240px; overflow-y: auto; box-shadow: var(--shadow); }
.combo-option { all: unset; box-sizing: border-box; display: grid; width: 100%; padding: 10px 12px; border-radius: 8px; cursor: pointer; min-height: 44px; }
.combo-option:hover, .combo-option:focus-visible { background: var(--surface-2); outline: none; }
.combo-option small { color: var(--text-2); }
.combo-empty { padding: 10px 12px; color: var(--text-2); }
.combo-chosen { color: var(--brand-strong); font-weight: 600; }
.credentials { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 4px 0; padding: 14px; background: var(--surface-2); border-radius: var(--radius-sm); }
.credentials dt { color: var(--text-2); }
.credentials dd { margin: 0; }
.credentials code { font-size: 1.05rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; }
.credentials .secret { font-weight: 700; letter-spacing: .04em; }
.notice-card { display: flex; gap: 14px; align-items: flex-start; border-color: var(--accent); background: var(--accent-soft); margin-bottom: 16px; }
.notice-card p { margin: 0; }

/* ---------- Phase 4: parent app ---------- */
.field-check .check { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; cursor: pointer; }
.field-check input[type=checkbox] { width: 22px; height: 22px; min-height: 0; margin-top: 1px; accent-color: var(--brand); flex: none; }
.register-card { max-width: 560px; }
.form-grid { display: grid; gap: 16px; }
@media (min-width: 600px) { .form-grid.two { grid-template-columns: 1fr 1fr; } }
.form-section-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin: 8px 0 -4px; }
.app-page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.app-page-head h1 { margin: 0; }
.student-card { color: inherit; text-decoration: none; transition: border-color .15s; }
a.student-card:hover { border-color: var(--brand); }
.student-card .chev { margin-left: auto; color: var(--text-2); }
.empty-hero { text-align: center; display: grid; gap: 12px; justify-items: center; padding: 32px 20px; }
.empty-hero .info-icon { width: 56px; height: 56px; }
.tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 999px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab-btn { flex: 1 0 auto; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-weight: 600; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.tab-btn[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.tab-panel { display: grid; gap: 12px; }
.year-card { display: grid; gap: 8px; }
.year-card.is-current { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow); }
.year-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.year-card-head b { font-size: 1.15rem; }
.year-card .btn-row, .btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.item-group { display: grid; gap: 10px; }
.item-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.item-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 6px 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-weight: 500; }
.item-chip.is-custom { border-style: dashed; }
.item-chip .icon-btn { width: 32px; height: 32px; font-size: .9rem; color: var(--text-2); }
.item-chip.is-inactive { opacity: .6; padding-right: 6px; }
.item-chip small { color: var(--text-2); font-size: .72rem; }
.subtle-link { background: none; border: 0; color: var(--brand-strong); font: inherit; font-weight: 600; cursor: pointer; padding: 6px 0; text-decoration: underline; }
.profile-kv dd { text-align: left; }
.academic-chip { background: rgba(255,255,255,.18); color: inherit; }
/* mobile polish */
.kv dd { min-width: 0; overflow-wrap: anywhere; }
.kv dt { white-space: nowrap; }
.section-head { flex-wrap: wrap; gap: 8px 12px; }
.tab-btn { flex: 1 1 auto; padding: 0 10px; }
@media (max-width: 380px) { .tab-btn { font-size: .9rem; padding: 0 8px; } }
.item-group .section-head h2 { flex: 1 1 auto; }

/* ---------- Phase 5: student app ---------- */
.mt { margin-top: 18px; }
.stat-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
.stat-sub { font-size: .8rem; color: var(--text-2); }
.stat-value-sm { font-size: 1rem; min-height: 0; line-height: 1.3; }
.notice-inline { margin: 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); color: #92400e; font-weight: 500; }
@media (prefers-color-scheme: dark) { .notice-inline { color: var(--accent); } }
.attention-card { border-color: var(--danger); }
.attention-card h2 { margin-bottom: 10px; }
.live-note { margin: -4px 0 0; font-weight: 600; color: var(--brand-strong); min-height: 1.5em; }

/* entry cards */
.entry { align-items: flex-start; }
.entry-main { display: grid; gap: 2px; }
.entry-notes { color: var(--text-2); font-style: italic; overflow-wrap: anywhere; }
.entry-reason { color: var(--danger); font-weight: 500; }
.entry-actions { margin-top: 6px; }
.entry-main { flex: 1; min-width: 0; }
.entry-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px 10px; flex-wrap: wrap; }
.entry-head .chip { flex: none; }
.entry-rejected { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }

/* filters */
.filter-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chip { flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-weight: 600; color: var(--text-2); cursor: pointer; }
.filter-chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
@media (prefers-color-scheme: dark) { .filter-chip[aria-pressed="true"] { color: #04201c; } }
.day-group { display: grid; gap: 8px; margin-bottom: 14px; }
.day-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .95rem; color: var(--text-2); margin: 4px 2px 0; }
.day-head small { font-weight: 500; }

/* single-series column chart: thin bars, 4px rounded data end on a baseline */
.mini-bars { display: grid; grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr)); gap: 2px; align-items: end; height: 150px; padding-top: 6px; }
.bar-col { display: grid; grid-template-rows: 18px 1fr 18px; height: 100%; justify-items: center; outline: none; position: relative; border-radius: 6px; }
.bar-col:hover, .bar-col:focus-visible { background: var(--surface-2); }
.bar-col:focus-visible { outline: 2px solid var(--focus); }
.bar-track { width: 100%; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--border); }
.bar { width: min(70%, 28px); height: var(--h, 0%); min-height: 0; background: var(--brand); border-radius: 4px 4px 0 0; }
.bar.is-zero { height: 0; }
.bar-value { font-size: .72rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.bar-label { font-size: .72rem; color: var(--text-2); }
.bar-col[data-tip]:hover::after, .bar-col[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  background: #17201e; color: #fff; font-size: .75rem; padding: 4px 8px; border-radius: 6px; white-space: nowrap; z-index: 5; pointer-events: none; }
.mini-bars .bar-col:first-child[data-tip]::after { left: 0; transform: none; }
.mini-bars .bar-col:last-child[data-tip]::after { left: auto; right: 0; transform: none; }

/* horizontal magnitude bars (one hue) */
.bar-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 14px; }
.bar-row { display: grid; gap: 4px; }
.bar-row-head { display: flex; justify-content: space-between; gap: 12px; font-size: .95rem; }
.bar-row-head span { color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar-row-track { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.bar-fill { display: block; height: 100%; width: var(--w, 0%); background: var(--brand); border-radius: 999px; }
.report-filters { display: grid; gap: 12px; }
.approved-note { display: flex; align-items: center; gap: 6px; margin: 0; }
.approved-note .icon { width: 18px; height: 18px; color: var(--success); }

/* ---------- Phase 6: approvals ---------- */
.tab { position: relative; }
.tab-badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; }
.quick-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.quick-reasons .filter-chip { min-height: 34px; font-size: .82rem; font-weight: 500; padding: 0 12px; white-space: normal; text-align: left; }
.entry-actions .btn-primary { min-width: 96px; }
.kpi-line { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .9rem; color: var(--text-2); margin: 0; }
.kpi-line b { color: var(--text); }
.chip-attn { background: var(--accent-soft); color: #92400e; }
@media (prefers-color-scheme: dark) { .chip-attn { color: var(--accent); } }
.approvals-cta { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.approvals-cta span:last-child { display: grid; }

/* ---------- Phase 7: goals & planner ---------- */
.goal-list { display: grid; gap: 12px; }
@media (min-width: 720px) { .goal-list { grid-template-columns: 1fr 1fr; } }
.goal-card { display: grid; gap: 8px; }
.goal-card.is-muted { opacity: .7; }
.goal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.goal-head > div { display: grid; min-width: 0; }
.goal-head small { font-size: .8rem; }
.goal-track { display: block; height: 12px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.goal-fill { display: block; height: 100%; width: var(--w, 0%); background: var(--brand); border-radius: 999px; }
.goal-fill.is-done { background: var(--success); }
.goal-numbers { margin: 0; font-variant-numeric: tabular-nums; }
.goal-history { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.goal-history .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); }
.goal-history .dot.is-met { background: var(--success); border-color: var(--success); }
.mini-goal { display: grid; gap: 4px; }
.today-plan-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.today-plan { display: flex; gap: 10px; align-items: baseline; }
.today-plan.is-done b { text-decoration: line-through; color: var(--text-2); }
.tp-check { width: 1.2em; color: var(--brand); font-weight: 700; }
.week-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.week-nav .icon-btn { font-size: 1.6rem; line-height: 1; border: 1px solid var(--border); }
.week-label { display: grid; text-align: center; }
.day-plan { display: grid; gap: 6px; }
.day-plan.is-today .day-head span { color: var(--brand-strong); font-weight: 700; }
.day-empty { margin: 0 2px 6px; }
.plan-time { font-size: .72rem; }
.weekday-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.weekday-picker .filter-chip { min-width: 52px; justify-content: center; }
.legend { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-size: .85rem; color: var(--text-2); }
.key { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.key-planned { background: var(--planned); }
.key-actual { background: var(--actual); }
.pva-bars { display: grid; gap: 3px; }
.pva-planned, .pva-actual { display: block; height: 8px; width: var(--w, 0%); border-radius: 999px; min-width: 2px; }
.pva-planned { background: var(--planned); }
.pva-actual { background: var(--actual); }
.pva-chart { display: grid; grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr)); gap: 2px; align-items: end; height: 160px; padding-top: 6px; }
.pva-pair { gap: 2px; align-items: flex-end; }
.pva-col-planned, .pva-col-actual { width: min(40%, 14px); height: var(--h, 0%); border-radius: 4px 4px 0 0; }
.pva-col-planned { background: var(--planned); }
.pva-col-actual { background: var(--actual); }
.pva-col-planned.is-zero, .pva-col-actual.is-zero { visibility: hidden; }

/* ---------- Phase 8: assignments ---------- */
.topbar-actions { display: flex; gap: 2px; }
.icon-btn.is-active { color: var(--brand); background: var(--brand-soft); }
.task-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 600px) { .task-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.task-tile { display: grid; gap: 2px; justify-items: start; text-align: left; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow); font: inherit; color: var(--text); cursor: pointer; min-height: 84px; }
.task-tile b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.task-tile small { color: var(--text-2); }
.task-tile-icon { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.task-tile.tone-danger { border-color: var(--danger); }
.task-tile.tone-danger .task-tile-icon { background: var(--danger-soft); color: var(--danger); }
.task-tile.tone-warn .task-tile-icon { background: var(--accent-soft); color: #92400e; }
.task-tile.tone-ok .task-tile-icon { background: var(--success-soft); color: var(--success); }
.task-tile.tone-calm .task-tile-icon { background: var(--surface-2); color: var(--text-2); }
.task-card { display: grid; gap: 6px; }
.task-card.status-overdue { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.task-card.status-completed .task-title { color: var(--text-2); }
.task-title { overflow-wrap: anywhere; }
.task-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.task-due { margin: 0; font-weight: 600; font-size: .95rem; }
.task-due.is-overdue, .text-danger { color: var(--danger); }
.task-desc { margin: 0; color: var(--text-2); white-space: pre-line; overflow-wrap: anywhere; }
.prio { font-size: .78rem; font-weight: 600; color: var(--text-2); }
.prio-high { color: var(--danger); }
.prio-high::before { content: "▲ "; }
.prio-medium::before { content: "■ "; }
.prio-low::before { content: "▼ "; }

/* ---------- Phase 9: exams, marks, performance ---------- */
.segmented { display: flex; gap: 4px; padding: 4px; margin-bottom: 16px; background: var(--surface-2); border-radius: 999px; }
.segmented a { flex: 1 1 0; text-align: center; min-height: 40px; display: grid; place-items: center; padding: 0 12px; border-radius: 999px; font-weight: 600; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.segmented a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
[data-page="student-exams"] > .tabs, [data-panel="exams"] > .tabs { margin-bottom: 16px; }
.exam-card.is-muted { opacity: .7; }
.exam-score { margin: 8px 0; font-size: 1rem; }
.exam-score b { font-size: 1.35rem; }
.marks-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 0; }
.marks-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.4rem; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.marks-row:last-child { border-bottom: 0; }
.marks-name { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.marks-inputs { display: inline-flex; align-items: center; gap: 6px; }
.marks-inputs input { width: 3.9rem; min-height: 44px; padding: 0 8px; text-align: center; font: inherit; border: 1px solid var(--border-strong, var(--border)); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.marks-inputs input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.marks-row[aria-invalid] input, .marks-row .field-error:not(:empty) ~ * input { border-color: var(--danger); }
.marks-pct { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.marks-pct.is-bad { color: var(--danger); }
.marks-read { font-variant-numeric: tabular-nums; }
.marks-row .field-error { grid-column: 1 / -1; margin: 0; }
.marks-row .field-error:empty { display: none; }
.exam-bars { height: 180px; }
.exam-bars .bar { width: min(60%, 40px); }
.result-list { list-style: none; margin: 0; padding: 0; }
.result-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--border); }
.result-list > li:last-child { border-bottom: 0; }
.result-pct { min-width: 3.4rem; text-align: right; font-variant-numeric: tabular-nums; }
.subject-matrix > li { grid-template-columns: 1fr; }
.matrix-cells { display: flex; flex-wrap: wrap; gap: 6px; }
.matrix-cell { padding: 2px 8px; border-radius: 999px; background: var(--surface-2); font-size: .82rem; font-variant-numeric: tabular-nums; }
.perf-card { display: grid; gap: 8px; }
.perf-card .goal-head small { display: block; }
.perf-score { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.perf-trend { margin: 0; font-weight: 600; }
.trend-up { color: var(--success); }
.trend-down { color: var(--danger); }
.trend-flat { color: var(--text-2); }
.perf-card .kv { margin: 0; }
.exam-countdown { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.countdown-num { font-size: 2rem; line-height: 1; min-width: 2.6rem; height: 2.6rem; padding: 0 8px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--brand-soft, var(--surface-2)); color: var(--brand-strong, var(--brand)); }

/* ---------- Phase 10: streaks, parent dashboard, notifications ---------- */
.icon-btn.has-badge { position: relative; }
.icon-btn .tab-badge { top: 2px; left: auto; right: 0; }
.center { text-align: center; }

/* Streak card */
.streak-card { display: grid; gap: 12px; }
.streak-head { display: flex; align-items: center; gap: 12px; }
.streak-head > div { min-width: 0; flex: 1 1 auto; }
.streak-head p { margin: 0; }
.streak-flame { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--accent-soft); font-size: 1.7rem; line-height: 1; }
.streak-flame.is-out { filter: grayscale(1); opacity: .45; background: var(--surface-2); }
.streak-flame.sm { width: 30px; height: 30px; font-size: 1rem; }
.streak-num { font-size: 1rem; color: var(--text-2); }
.streak-num b { font-size: 2rem; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; margin-right: 2px; }
.streak-stats { display: flex; gap: 6px; margin: 0; flex: none; }
.streak-stats > div { display: grid; text-align: center; min-width: 58px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface-2); }
.streak-stats dt { font-size: .72rem; color: var(--text-2); white-space: nowrap; }
.streak-stats dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.streak-status { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); font-weight: 600; font-size: .92rem; }
.streak-status.tone-ok { background: var(--success-soft); color: var(--success); }
.streak-status.tone-warn { background: var(--accent-soft); color: #92400e; }
.streak-status.tone-calm { background: var(--surface-2); color: var(--text-2); }
@media (prefers-color-scheme: dark) { .streak-status.tone-warn { color: var(--accent); } }
.streak-next { display: grid; gap: 6px; }
.streak-next .goal-track { height: 8px; }
.streak-next .goal-fill { background: var(--accent); }

/* 5-week calendar (single hue, level by approved minutes) */
.streak-cal { display: grid; gap: 4px; }
.cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.streak-cal [role="grid"] { display: grid; gap: 4px; }
.cal-head span { text-align: center; font-size: .72rem; color: var(--text-2); }
.cal-cell { position: relative; display: grid; place-items: center; height: 28px; border-radius: 6px; background: var(--surface-2); }
.cal-cell.lv-1 { background: color-mix(in srgb, var(--brand) 25%, var(--surface-2)); }
.cal-cell.lv-2 { background: color-mix(in srgb, var(--brand) 65%, var(--surface-2)); }
.cal-cell.lv-3 { background: var(--brand); }
.cal-cell.is-today { outline: 2px solid var(--text); outline-offset: 1px; }
.cal-cell.is-future { background: transparent; border: 1px dashed var(--border); }
.cal-tick { font-size: .72rem; font-weight: 700; color: #fff; }
@media (prefers-color-scheme: dark) { .cal-tick { color: #04201c; } }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 0; }
.cal-legend .cal-cell { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: middle; }
.cal-legend .cal-cell + .cal-cell, .cal-legend .cal-cell:not(:first-child) { margin-left: 6px; }

/* Parent dashboard cards */
.dash-card { gap: 12px; }
.dash-card .student-card-head { color: inherit; text-decoration: none; }
.dash-card .student-card-head > span:nth-child(2) { min-width: 0; flex: 1 1 auto; }
.dash-streak { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 2px 10px 2px 2px; border-radius: 999px; background: var(--accent-soft); font-variant-numeric: tabular-nums; }
.dash-streak b { font-size: 1.05rem; }
.dash-week { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.week-dots { display: inline-flex; gap: 4px; }
.week-dots .dot { width: 18px; height: 18px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); }
.week-dots .dot.lv-1 { background: color-mix(in srgb, var(--brand) 25%, var(--surface-2)); border-color: transparent; }
.week-dots .dot.lv-2 { background: color-mix(in srgb, var(--brand) 65%, var(--surface-2)); border-color: transparent; }
.week-dots .dot.lv-3 { background: var(--brand); border-color: transparent; }
.dash-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dash-tile { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); text-decoration: none; border: 1px solid transparent; }
.dash-tile:hover { border-color: var(--brand); }
.dash-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dash-label { font-size: .78rem; color: var(--text-2); }
.dash-value { font-size: 1.2rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dash-sub { font-size: .78rem; color: var(--text-2); overflow-wrap: anywhere; }
.dash-tile.tone-warn { background: var(--accent-soft); }
.dash-tile.tone-warn .dash-sub { color: #92400e; }
.dash-tile.tone-danger { background: var(--danger-soft); }
.dash-tile.tone-danger .dash-sub { color: var(--danger); font-weight: 600; }
@media (prefers-color-scheme: dark) { .dash-tile.tone-warn .dash-sub { color: var(--accent); } }
.home-ctas { display: grid; gap: 10px; margin-bottom: 16px; }
.home-ctas:not(:has(> :not([hidden]))) { display: none; }
.home-ctas .approvals-cta { margin: 0; }
.home-ctas [data-role="notif-cta"] { border-color: var(--brand); background: var(--brand-soft); }

/* Notifications page */
.notif-groups { display: grid; gap: 16px; margin-top: 12px; }
.notif-group-title { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin: 0 0 6px 4px; }
.notif-list { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.notif-list > li + li { border-top: 1px solid var(--border); }
.notif { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; color: var(--text); text-decoration: none; }
.notif:hover { background: var(--surface-2); }
.notif:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.notif.is-unread { background: color-mix(in srgb, var(--brand-soft) 45%, var(--surface)); }
.notif-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--surface-2); font-size: 1.05rem; }
.notif-icon.cat-approvals, .notif-icon.cat-reminders { background: var(--accent-soft); }
.notif-icon.cat-study, .notif-icon.cat-goals { background: var(--success-soft); }
.notif-icon.cat-streaks { background: var(--accent-soft); }
.notif-icon.cat-assignments, .notif-icon.cat-exams { background: var(--brand-soft); }
.notif-body { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.notif-msg { color: var(--text-2); overflow-wrap: break-word; }
.notif.is-unread .notif-title { font-weight: 700; }
.notif-dot { width: 10px; height: 10px; flex: none; margin-top: 6px; border-radius: 50%; background: var(--brand); }
[data-page="notifications"] .filter-chips { margin-top: 8px; }
[data-page="notifications"] > .section-head p { margin: 0; }

/* Notification settings switches */
.pref-list { list-style: none; margin: 8px 0 0; padding: 0; }
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.pref-row:last-child { border-bottom: 0; }
.pref-row label { display: flex; align-items: center; gap: 12px; min-width: 0; cursor: pointer; }
.pref-row label > span:last-child { display: grid; min-width: 0; }
.pref-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--surface-2); }
.switch { position: relative; flex: none; width: 50px; height: 30px; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch-ui { position: absolute; inset: 0; border-radius: 999px; background: var(--border); transition: background .15s; }
.switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.switch input:checked + .switch-ui { background: var(--brand); }
.switch input:checked + .switch-ui::after { transform: translateX(20px); }
.switch input:focus-visible + .switch-ui { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch input:disabled + .switch-ui { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .switch-ui, .switch-ui::after { transition: none; } }

/* ---------- Phase 11: reports, PDF & WhatsApp sharing ---------- */
.report-controls { display: grid; gap: 12px; }
.report-controls .approved-note { margin: 0; }
.report-custom { margin: 0; }
.report-custom .field-error { grid-column: 1 / -1; margin: 0; }
.report-custom .field-error:empty { display: none; }
.report-sections > summary { cursor: pointer; font-weight: 600; color: var(--brand-strong); min-height: 32px; display: flex; align-items: center; }
.check-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.check-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); cursor: pointer; font-weight: 500; }
.check-chip input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.check-chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.check-chip:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.report-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.report-actions .btn { flex: 1 1 180px; justify-content: center; }
.report-actions.is-disabled { opacity: .5; pointer-events: none; }
.btn-whatsapp { background: #128c4b; border-color: #128c4b; color: #fff; text-decoration: none; }
.btn-whatsapp:hover { background: #0e7a40; }
.report-preview { display: grid; gap: 0; margin-top: 16px; }
.report-preview > .card { margin-bottom: 16px; }
.report-preview[aria-busy="true"] { opacity: .6; transition: opacity .15s; }
.report-title { margin: 0 4px 12px; }
.report-title h2 { font-size: 1.15rem; }
.report-title p { margin: 0; }
.report-pending { margin-bottom: 16px; }
.report-bars { height: 160px; }
.report-sub { font-size: 1rem; margin: 16px 0 4px; }
.stat-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; }
.stat-sub.trend-up { color: var(--success); font-weight: 600; }
.stat-sub.trend-down { color: var(--danger); font-weight: 600; }
.pva-legend { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; }
.swatch { display: inline-block; width: 18px; height: 10px; border-radius: 999px; }
.swatch-planned { background: var(--planned); }
.swatch-actual { background: var(--actual); margin-left: 10px; }
.child-picker { margin-bottom: 12px; }
.child-picker .filter-chip { display: inline-flex; align-items: center; gap: 8px; padding-left: 6px; }
.avatar-xs { width: 28px; height: 28px; font-size: .75rem; }
.child-picker .filter-chip[aria-pressed="true"] .avatar-xs { background: rgba(255,255,255,.25); color: inherit; }
.share-url-row { display: flex; gap: 8px; margin: 12px 0; }
.share-url { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font: inherit; font-size: .85rem; }
.share-preview summary { cursor: pointer; color: var(--brand-strong); font-weight: 600; margin-bottom: 6px; }
.share-preview pre { white-space: pre-wrap; word-break: break-word; font: inherit; font-size: .88rem; background: var(--surface-2); padding: 10px 12px; border-radius: var(--radius-sm); margin: 0 0 12px; }
.modal-body > .btn-whatsapp { margin-top: 4px; }
.report-cta { text-decoration: none; color: var(--text); }
.report-cta:hover { border-color: var(--brand); }
.result-list > li > span:first-child { min-width: 0; overflow-wrap: break-word; }
.share-url-row .btn { white-space: nowrap; flex: none; }

/* ---------- Phase 12: audit log, sessions ---------- */
.audit-table td.nowrap { white-space: nowrap; }
.audit-what { display: inline-flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.audit-what small { overflow-wrap: anywhere; }
.stat-card.is-alert { border-color: var(--danger); }
.stat-card.is-alert .stat-value { color: var(--danger); }
.audit .toolbar-filters input[type="date"] { width: auto; flex: 1 1 140px; }
@media (min-width: 768px) { .audit .toolbar { grid-template-columns: minmax(200px, 1fr); } .audit .toolbar-filters { flex-wrap: wrap; } }
#devices .btn { margin-top: 4px; }
@media (prefers-color-scheme: dark) { .brand-mark { background: #fff; border-radius: 10px; padding: 3px; } }

/* ---------- Family delegation: Primary Student ---------- */
.context-bar { margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.context-inner { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.context-who { margin: 0; display: grid; line-height: 1.25; }
.context-who small, .context-current small { color: var(--text-2); font-size: .75rem; }
.context-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px 6px 6px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; text-align: left; max-width: 100%; }
.context-switch:hover { border-color: var(--brand); }
.context-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.context-current { display: grid; line-height: 1.2; min-width: 0; }
.context-current b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.context-caret { color: var(--text-2); font-size: 1.1rem; }
.avatar-sm { width: 34px; height: 34px; font-size: .8rem; }
.context-bar.is-delegated { border-color: var(--accent); background: var(--accent-soft); }
.context-bar.is-delegated .context-switch { background: var(--surface); border-color: var(--accent); }
.context-bar.is-delegated .avatar { background: var(--accent); color: #fff; }
.context-note { margin: 8px 2px 0; font-size: .9rem; color: #92400e; }
@media (prefers-color-scheme: dark) { .context-note { color: var(--accent); } .context-bar.is-delegated .avatar { color: #1b1300; } }
@media (max-width: 420px) { .context-who { display: flex; gap: 6px; align-items: baseline; width: 100%; order: 2; font-size: .85rem; } .context-who small { font-size: .8rem; } .context-switch { width: 100%; } .context-caret { margin-left: auto; } }
.family-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.family-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; flex-wrap: wrap; }
.family-option:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.family-option input { width: 20px; height: 20px; margin: 0; accent-color: var(--brand); }
.family-option-text { display: grid; flex: 1 1 140px; min-width: 0; }
.family-option-text small { color: var(--text-2); }
.chip-primary { background: var(--accent-soft); color: #92400e; }
@media (prefers-color-scheme: dark) { .chip-primary { color: var(--accent); } }
.family-card h2 .icon { width: 20px; height: 20px; vertical-align: -3px; }
.family-list { margin: 0 0 10px; padding-left: 20px; }
.entry-by { color: var(--text-2); font-style: italic; }

/* ---------- Planned vs actual: Planned series colour (#0a3f91), distinct from Actual (teal) ---------- */
:root { --planned: #0a3f91; --actual: #0f766e; --actual-text: #115e59; }   /* fixed series colours: never follow a portal theme */
@media (prefers-color-scheme: dark) { :root { --planned: #6d9cf0; --actual: #2dd4bf; --actual-text: #5eead4; } }   /* lighter tints stay visible on dark surfaces */
.pva-nav { display: flex; align-items: center; gap: 6px; margin: 10px 0 4px; flex-wrap: wrap; }
.pva-nav .icon-btn { font-size: 1.5rem; line-height: 1; border: 1px solid var(--border); width: 40px; height: 40px; }
.pva-range { min-width: 9.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.pva-chart { height: 190px; }
.pva-col { grid-template-rows: 30px 1fr 18px; }
.pva-values { display: grid; justify-items: center; font-size: .64rem; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pva-v-planned { color: var(--planned); font-weight: 700; }
.pva-v-actual { color: var(--actual-text); font-weight: 700; }
.pva-chart .pva-col-planned, .pva-chart .pva-col-actual { width: min(42%, 16px); }
.pva-chart.is-weekly .pva-col-planned, .pva-chart.is-weekly .pva-col-actual { width: min(40%, 22px); }
@media (max-width: 380px) { .pva-values { font-size: .58rem; } }
/* Report share links: on/off switch per link (always visible in both states) */
.share-links { list-style: none; margin: 8px 0 0; padding: 0; }
.share-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.share-link:last-child { border-bottom: 0; }
.share-link-text { display: grid; gap: 2px; min-width: 0; cursor: pointer; }
.share-link-text small { overflow-wrap: anywhere; }
.share-link.is-off .share-link-text b { color: var(--text-2); }
.share-state { font-weight: 600; }
.share-state.is-on { color: var(--success); }
.share-state.is-off { color: var(--text-2); }
/* Auto Approval */
.entry-method { color: var(--text-2); font-style: italic; }
.auto-state.is-on { color: var(--success); }
.auto-state.is-off { color: var(--text-2); }

/* ==========================================================
   Parent application theme — blue-dark #0a3f91.
   Scoped to body.portal-parent (set by views/layouts/app.php), so the Student app,
   Admin portal and shared sign-in pages keep their own look. Everything below only
   re-points the shared theme variables; components keep using var(--brand…).
   ========================================================== */
.portal-parent {
  --parent-primary: #0a3f91;
  --parent-primary-strong: #072f6d;
  --parent-on-primary: #ffffff;
  --brand: var(--parent-primary);
  --brand-strong: var(--parent-primary-strong);
  --brand-soft: #dde8fb;
  --bg: #f2f5fa;
  --focus: #0a3f91;
}
@media (prefers-color-scheme: dark) {
  .portal-parent {
    --brand: #8fb3f3; --brand-strong: #b7cff8; --brand-soft: #16284a;
    --bg: #0b111d; --surface: #121a29; --surface-2: #1a2436; --border: #27344b;
    --focus: #8fb3f3;
  }
  .portal-parent .btn-primary { color: #06173a; }
}
/* Header & navigation in the parent primary colour */
.portal-parent .app-topbar { background: var(--parent-primary); color: var(--parent-on-primary); backdrop-filter: none; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.portal-parent .app-topbar .icon-btn { color: var(--parent-on-primary); }
.portal-parent .app-topbar .icon-btn:hover, .portal-parent .app-topbar .icon-btn.is-active { background: rgba(255,255,255,.16); color: #fff; }
.portal-parent .app-topbar .icon-btn:focus-visible { outline: 3px solid #fff; outline-offset: 1px; }
.portal-parent .app-topbar .brand-text, .portal-parent .app-topbar .brand-study, .portal-parent .app-topbar .brand-buddy { color: #fff; }
.portal-parent .app-topbar .brand-text b { color: #ffb547; }
.portal-parent .app-topbar .brand-mark { background: #fff; border-radius: 10px; padding: 3px; }
.portal-parent .app-topbar .tab-badge { box-shadow: 0 0 0 2px var(--parent-primary); }
.portal-parent .bottom-nav { border-top: 3px solid var(--parent-primary); }
.portal-parent .tab.is-active { color: var(--brand); }
.portal-parent .tab.is-active .icon { stroke-width: 2.4; }
.portal-parent .tab.is-active::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand); }
@media (min-width: 768px) { .portal-parent .bottom-nav { border: 2px solid var(--parent-primary); } .portal-parent .tab.is-active::before { top: 0; } }
.portal-parent .tab-btn[aria-selected="true"] { background: var(--parent-primary); color: #fff; }
@media (prefers-color-scheme: dark) { .portal-parent .tab-btn[aria-selected="true"] { background: var(--brand); color: #06173a; } }
.portal-parent .section-head h2, .portal-parent .app-page-head h1 { color: var(--brand-strong); }
@media (prefers-color-scheme: dark) { .portal-parent .section-head h2, .portal-parent .app-page-head h1 { color: var(--text); } }

/* ==========================================================
   Themed sign-in & registration pages (who is this app for?)
   Parent pages reuse .portal-parent (navy #0a3f91); student pages keep the student teal.
   ========================================================== */
.auth-themed { --role: var(--brand); --role-strong: var(--brand-strong); --role-soft: var(--brand-soft); --role-on: #fff; }
.auth-parent { --role: #0a3f91; --role-strong: #072f6d; --role-soft: #dde8fb; --role-band: #0a3f91; }
.auth-student { --role: #0f766e; --role-strong: #115e59; --role-soft: #ccfbf1; --role-band: #0f766e; }
.auth-admin { --role: #334155; --role-strong: #1e293b; --role-soft: #e2e8f0; --role-band: #334155; }
@media (prefers-color-scheme: dark) {
  .auth-parent { --role: #8fb3f3; --role-strong: #b7cff8; --role-soft: #16284a; --role-on: #06173a; }
  .auth-student { --role: #2dd4bf; --role-strong: #5eead4; --role-soft: #134e4a; --role-on: #042f2e; }
  .auth-admin { --role: #94a3b8; --role-strong: #cbd5e1; --role-soft: #1e293b; --role-on: #0f172a; }
}
/* A band of the app colour behind the card */
/* The band keeps the deep app colour in dark mode too (the lighter tints are for text and buttons). */
.auth-themed { background: linear-gradient(180deg, var(--role-band, var(--role)) 0, var(--role-band, var(--role)) 210px, var(--bg) 210px); }
.auth-themed .auth-card { border-top: 6px solid var(--role); }
.auth-themed .btn-primary { background: var(--role); border-color: var(--role); color: var(--role-on); }
.auth-themed .btn-primary:hover { background: var(--role-strong); border-color: var(--role-strong); }
.auth-themed a:not(.btn):not(.auth-brand):not(.auth-switch) { color: var(--role-strong); }
.auth-themed input:focus-visible, .auth-themed select:focus-visible { outline-color: var(--role); border-color: var(--role); }

.auth-role { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 14px 16px; border-radius: 16px; background: var(--role-soft); }
.auth-role h1 { margin: 2px 0 0; font-size: 1.5rem; line-height: 1.2; color: var(--role-strong); }
.auth-role-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--role); color: var(--role-on); }
.auth-role-icon .icon { width: 26px; height: 26px; }
.auth-role-chip { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--role-strong); }
.auth-lead { margin: 14px 0 6px; color: var(--text-2); }
.auth-points { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.auth-points li { display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.auth-points .icon { flex: none; width: 18px; height: 18px; color: var(--role); }
.auth-switch { margin-top: 18px; display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; border: 1px dashed var(--border); text-decoration: none; color: var(--text-2); text-align: center; font-size: .95rem; }
.auth-switch b { color: var(--text); }
.auth-switch:hover, .auth-switch:focus-visible { border-style: solid; }
.auth-switch-parent:hover b, .auth-switch-parent:focus-visible b { color: #0a3f91; }
.auth-switch-student:hover b, .auth-switch-student:focus-visible b { color: #0f766e; }
@media (prefers-color-scheme: dark) {
  .auth-switch-parent:hover b { color: #8fb3f3; } .auth-switch-student:hover b { color: #2dd4bf; }
}
.auth-chip-top { margin-top: 20px; } .auth-chip-top + h1 { margin-top: 4px; }

/* ---------- Icon action buttons (admin Parents / Students tables) ---------- */
.data-table th.th-actions { text-align: right; }
.data-table td.actions-icons { display: table-cell; }
.data-table td.actions-icons .icon-action + .icon-action { margin-left: 4px; }
.icon-action { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; text-decoration: none; vertical-align: middle; transition: background .15s, color .15s, border-color .15s; }
.icon-action:hover { background: var(--surface-2); color: var(--text); }
.icon-action:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.icon-action-view:hover { color: var(--brand-strong); border-color: var(--brand); }
.icon-action-edit:hover { color: #1d4ed8; border-color: #93c5fd; }
.icon-action-deactivate:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.icon-action-activate { color: var(--success); }
.icon-action-activate:hover { border-color: var(--success); background: var(--success-soft); }
@media (prefers-color-scheme: dark) { .icon-action-edit:hover { color: #93c5fd; border-color: #3b82f6; } }
@media (max-width: 767px) { .data-table td.actions-icons { display: flex; gap: 4px; } .data-table td.actions-icons .icon-action { width: 44px; height: 44px; } }

/* ---------- Per-student colour (primary student managing a family) ----------
   Each student of a family gets their own tone (FamilyService::tones), used on the
   "Current academic year" card and the student's avatar in the switcher. White text ≥ 4.5:1 on all. */
.student-tone-0 { --tone: #0f766e; --tone-strong: #115e59; }
.student-tone-1 { --tone: #4338ca; --tone-strong: #3730a3; }
.student-tone-2 { --tone: #be123c; --tone-strong: #9f1239; }
.student-tone-3 { --tone: #b45309; --tone-strong: #92400e; }
.student-tone-4 { --tone: #7e22ce; --tone-strong: #6b21a8; }
.student-tone-5 { --tone: #0369a1; --tone-strong: #075985; }
.academic-card.student-tone { background: linear-gradient(135deg, var(--tone), var(--tone-strong)); color: #fff; }
.academic-card.student-tone .eyebrow, .academic-card.student-tone .muted { color: rgba(255,255,255,.88); }
@media (prefers-color-scheme: dark) {
  .academic-card.student-tone { color: #fff; }
  .academic-card.student-tone .eyebrow, .academic-card.student-tone .muted { color: rgba(255,255,255,.88); }
}
.academic-student { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.25); }
.academic-student b { font-size: 1.2rem; font-weight: 800; }
.academic-student-tag { flex: none; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.2); }
.avatar.student-tone, .context-bar.is-delegated .avatar.student-tone { background: var(--tone); color: #fff; }

/* ---------- Sticky student header (student app + parent student pages) ----------
   Stays under the top bar while scrolling so it is always clear whose data is shown;
   app.js sets --topbar-h and adds .is-stuck to make it compact once pinned. */
.sticky-student { position: sticky; top: var(--topbar-h, 64px); z-index: 20; transition: padding .15s ease, box-shadow .15s ease; }
.sticky-student.is-stuck { box-shadow: 0 6px 18px rgba(16, 24, 22, .14); }
.student-strip { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.student-strip .avatar { background: var(--brand); color: #fff; }
@media (prefers-color-scheme: dark) { .student-strip .avatar { color: #04201c; } }
.student-strip-text { display: grid; line-height: 1.2; min-width: 0; }
.student-strip-text b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.student-strip-text small { color: var(--text-2); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Family context bar: compact when stuck (hide "Logged in as" and the long note) */
.context-bar.sticky-student { margin-bottom: 0; }
.context-bar.is-stuck { padding: 6px 8px; }
.context-bar.is-stuck .context-who, .context-bar.is-stuck .context-note { display: none; }
.context-bar.is-stuck .context-switch { min-height: 40px; width: 100%; }
.context-current b { font-weight: 800; }
/* Parent: the student header on /parent/students/{id} */
.student-header.is-stuck { padding: 10px 14px; border-radius: var(--radius); }
.student-header.is-stuck .avatar-lg { width: 40px; height: 40px; font-size: 1rem; }
.student-header.is-stuck h1 { font-size: 1.1rem; }
.student-header.is-stuck p { font-size: .85rem; }
/* Parent Reports: sticky "Report for" header with the student switcher */
.report-student { display: grid; gap: 8px; }
.report-student-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.report-student .report-for { text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; font-weight: 700; color: var(--brand-strong); }
.report-student .child-picker { margin: 0; }
.report-student.is-stuck { padding: 6px 12px; gap: 6px; }
.report-student.is-stuck .report-for { display: none; }
.report-student.is-stuck .child-picker .filter-chip { min-height: 34px; padding-block: 4px; }

/* ---------- Study timer (Start study / Stop study) ---------- */
.timer-card { display: grid; gap: 10px; }
.timer-card .section-head { align-items: center; }
.timer-clock { font-variant-numeric: tabular-nums; font-size: 1.6rem; font-weight: 800; letter-spacing: .02em; color: var(--text-2); }
.timer-card.is-running { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.timer-card.is-running .timer-clock { color: var(--brand-strong); font-size: 2.2rem; }
.timer-status { margin: 0; }
.timer-btn { font-weight: 700; gap: 10px; }
.timer-btn.is-stop { background: var(--danger); color: #fff; border-color: var(--danger); }
.timer-btn.is-stop:hover { filter: brightness(.95); }
.timer-btn-icon { font-size: .9em; }
.timer-btn:disabled { opacity: .55; cursor: not-allowed; }
.timer-summary { display: grid; justify-items: center; gap: 2px; padding: 12px; border-radius: var(--radius); background: var(--surface-2); text-align: center; }
.timer-summary-clock { font-variant-numeric: tabular-nums; font-size: 2rem; font-weight: 800; color: var(--brand-strong); }
.timer-discard { padding: 0 20px 16px; text-align: center; }
.text-danger { color: var(--danger); }
.timer-pill { position: fixed; z-index: 35; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px;
  border-radius: 999px; background: var(--brand-strong); color: #fff; text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.25); max-width: calc(100vw - 24px); }
.timer-pill b { font-variant-numeric: tabular-nums; }
.timer-pill-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; font-size: .9rem; opacity: .9; }
.timer-pill-stop { padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--danger); font-weight: 700; font-size: .85rem; }
.timer-dot { width: 9px; height: 9px; border-radius: 50%; background: #f87171; animation: timer-blink 1.2s infinite; }
@keyframes timer-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .timer-dot { animation: none; } }
@media (prefers-color-scheme: dark) { .timer-pill { background: #134e4a; } }
@media (min-width: 768px) { .timer-pill { bottom: 100px; right: 24px; } }
.timer-inline-wrap { display: grid; gap: 6px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.timer-inline-wrap .hint { margin: 0; }
.timer-inline-head { display: flex; align-items: center; justify-content: space-between; }
.timer-inline-head .timer-clock { font-size: 1.4rem; }
.timer-inline-wrap.is-running { border-style: solid; border-color: var(--brand); background: var(--brand-soft); }
.timer-inline-wrap.is-running .timer-clock { font-size: 2.6rem; color: var(--brand-strong); }

/* ==========================================================
   Daily Dose (vocabulary) — student word card, history, tests; parent report; admin library
   ========================================================== */
.stat-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .stat-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dd-word-card { display: grid; gap: 10px; border-top: 5px solid var(--accent); }
.dd-word { font-size: 2.2rem; letter-spacing: -.01em; margin: 0; color: var(--brand-strong); }
.dd-word small { font-size: .9rem; font-weight: 600; color: var(--text-2); font-style: italic; }
.dd-pron { margin: -6px 0 0; }
.dd-def { display: grid; gap: 4px; margin: 0; }
.dd-def dt { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin-top: 6px; }
.dd-def dd { margin: 0; font-size: 1.02rem; }
.dd-example { font-style: italic; color: var(--text-2); }
.dd-learned { margin: 0; font-weight: 700; color: var(--success); text-align: center; }
.dd-done { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 10px 0; }
.dd-done-icon { font-size: 2rem; }
.dd-history, .dd-test-list, .dd-report, .dd-pick { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dd-hist { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.dd-hist.is-done { border-left: 4px solid var(--success); }
.dd-test { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.dd-test-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dd-test-score { font-weight: 700; color: var(--brand-strong); }
.dd-report-item { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); display: grid; gap: 2px; }
.dd-report-item p { margin: 0; }
.dd-report-item.is-done { border-left: 4px solid var(--success); }
.dd-report-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dd-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.dd-pick li label { display: flex; gap: 8px; align-items: baseline; padding: 6px 4px; cursor: pointer; }
.dd-home { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; border-left: 5px solid var(--accent); }
.dd-home-icon { font-size: 1.8rem; }
.dd-home-text { display: grid; flex: 1; min-width: 0; }
.dd-home-text b { font-size: 1.15rem; }
.dd-home-text small { overflow-wrap: anywhere; }
/* Exam */
.vt-intro { display: grid; gap: 10px; }
.vt-rules { margin: 0; padding-left: 1.2rem; display: grid; gap: 4px; }
.vt-question { display: grid; gap: 12px; }
.vt-q-head { display: flex; justify-content: space-between; align-items: center; }
.vt-q-text { font-size: 1.35rem; margin: 0; outline: none; }
.vt-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.vt-dot { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: .8rem; cursor: pointer; color: var(--text-2); }
.vt-dot.is-answered { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); }
.vt-dot.is-current { outline: 3px solid var(--brand); outline-offset: 1px; font-weight: 800; }
.vt-options { display: grid; gap: 8px; }
.vt-option { display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-height: var(--tap); border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; background: var(--surface); }
.vt-option input { position: absolute; opacity: 0; pointer-events: none; }
.vt-option:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.vt-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.vt-opt-label { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); font-weight: 800; font-size: .85rem; }
.vt-option:has(input:checked) .vt-opt-label { background: var(--brand); color: #fff; }
.vt-nav { display: flex; justify-content: space-between; gap: 10px; }
.vt-missing { padding-left: 1rem; display: grid; gap: 6px; }
.vt-missing button { text-align: left; }
/* Result */
.vt-score { display: grid; gap: 8px; justify-items: center; padding: 12px; border-radius: var(--radius); background: var(--surface-2); margin: 8px 0 14px; }
.vt-score-main { display: flex; align-items: baseline; gap: 12px; }
.vt-score-main b { font-size: 2rem; }
.vt-score-main span { font-size: 1.3rem; font-weight: 700; color: var(--brand-strong); }
.vt-score-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.vt-review { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vt-review-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: grid; gap: 8px; }
.vt-review-item.is-ok { border-left: 5px solid var(--success); }
.vt-review-item.is-bad { border-left: 5px solid var(--danger); }
.vt-review-item.is-skip { border-left: 5px solid var(--text-2); }
.vt-review-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.vt-mark { font-weight: 700; font-size: .85rem; white-space: nowrap; }
.vt-mark.is-ok { color: var(--success); } .vt-mark.is-bad { color: var(--danger); } .vt-mark.is-skip { color: var(--text-2); }
.vt-review-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.vt-opt { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); }
.vt-opt .vt-tag + .vt-tag { grid-column: 3; }
.vt-opt.is-correct { background: var(--success-soft); }
.vt-opt.is-wrong { background: var(--danger-soft); }
.vt-opt.is-mine { font-weight: 700; }
.vt-tag { justify-self: end; text-align: right; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }
.vt-explain { margin: 0; font-size: .92rem; color: var(--text-2); }
/* Admin library */
.vocab-counts { margin-bottom: 12px; }
.stat-button { font: inherit; text-align: left; cursor: pointer; border: 1px solid var(--border); }
.stat-button:hover { border-color: var(--brand); }
.bulk-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 8px; border-radius: var(--radius-sm); background: var(--brand-soft); }
.th-check, .td-check { width: 36px; }
.vocab-table .cell-primary .chip { margin-left: 6px; }
.dd-next { margin: 0; color: var(--text-2); } .dd-countdown { font-variant-numeric: tabular-nums; color: var(--brand-strong); }
/* Admin: read-only word view with Approve / Reject */
.vocab-view .modal-head h2 small { font-weight: 500; font-style: italic; }
.vv-status { margin: 0; display: flex; gap: 6px; }
.vv-details { margin: 0; }
.vv-h { font-size: 1rem; margin: 6px 0 0; }
.vv-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.vv-options li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.vv-options li.is-correct { background: var(--success-soft); border-color: var(--success); font-weight: 600; }
.vocab-view .modal-foot { flex-wrap: wrap; }
@media (min-width: 768px) { .vocab-view { width: min(640px, 92vw); } }
/* Admin vocabulary: who changed what */
.vocab-last { display: grid; line-height: 1.25; font-size: .85rem; min-width: 140px; }
.vocab-admin .table-card { overflow-x: auto; }
.vocab-table .cell-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 230px; white-space: normal; }
.vocab-table th, .vocab-table td { padding-left: 10px; padding-right: 10px; }
@media (max-width: 767px) { .vocab-table .cell-desc { display: block; max-width: 60%; } }
.vocab-table td.actions-icons { white-space: nowrap; }
.vv-refs { margin: 0; }
.vv-history summary { cursor: pointer; padding: 4px 0; }
.vv-timeline { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 0; max-height: 260px; overflow-y: auto; }
.vv-event { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; padding: 6px 0; position: relative; }
.vv-event p { margin: 0; }
.vv-event::before { content: ""; position: absolute; left: 6px; top: 22px; bottom: -6px; width: 2px; background: var(--border); }
.vv-event:last-child::before { display: none; }
.vv-dot { width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; background: var(--text-2); }
.vv-event.is-approved .vv-dot, .vv-event.is-enabled .vv-dot { background: var(--success); }
.vv-event.is-rejected .vv-dot, .vv-event.is-disabled .vv-dot { background: var(--danger); }
.vv-event.is-updated .vv-dot { background: var(--accent); }
.vv-event.is-created .vv-dot { background: var(--brand); }
.vv-note { color: var(--text); }

.vocab-view .vv-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 14px 0 6px; padding-top: 14px; border-top: 1px solid var(--border); }
@media (max-width: 480px) { .vocab-view .vv-actions .btn { flex: 1 1 auto; } }

/* ---------- Celebrations (Student app) ---------- */
.celebrate-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 300; }
.cheer-card { position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top)); z-index: 310; width: min(94vw, 440px);
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 14px 14px 14px 16px; border-radius: 18px;
  background: linear-gradient(135deg, #fff8e1 0%, #ffffff 55%, #e8f7f2 100%); color: #17201e; border: 2px solid #ffd166;
  box-shadow: 0 14px 40px rgba(20, 30, 28, .22); cursor: pointer;
  transform: translate(-50%, -140%); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.4, .4, 1), opacity .25s ease; }
.cheer-card.is-in { transform: translate(-50%, 0); opacity: 1; }
.cheer-card.is-out { transform: translate(-50%, -30%) scale(.96); opacity: 0; transition: transform .3s ease, opacity .3s ease; }
.cheer-card.cheer-task { border-color: #8ac926; background: linear-gradient(135deg, #effbe0 0%, #ffffff 60%, #e7f3ff 100%); }
.cheer-card.cheer-word { border-color: #b388ff; background: linear-gradient(135deg, #f3ecff 0%, #ffffff 60%, #fff4e0 100%); }
.cheer-card.cheer-exam { border-color: #4cc9f0; background: linear-gradient(135deg, #e5f8ff 0%, #ffffff 60%, #fff0f6 100%); }
.cheer-emoji { font-size: 2.4rem; line-height: 1; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 3px rgba(255, 209, 102, .55); animation: cheer-pop .7s cubic-bezier(.2, 1.6, .4, 1) .1s both; }
.cheer-title { display: block; font-size: 1.15rem; line-height: 1.25; letter-spacing: -.01em; }
.cheer-msg { margin: 2px 0 0; font-size: .92rem; color: #3d4a46; }
.cheer-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cheer-chips:empty { display: none; }
.cheer-chip { display: inline-flex; align-items: center; gap: 2px; font-size: .78rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(23, 32, 30, .07); }
.cheer-chip[hidden] { display: none; }
.cheer-badge { background: #ffe8a3; color: #6a4a00; animation: cheer-shine 1.6s ease-in-out .5s 2; }
.cheer-streak { background: #ffe1d6; color: #9a3412; }
.cheer-side { display: grid; justify-items: end; gap: 10px; }
.cheer-close { border: 0; background: transparent; font-size: .95rem; color: #5b6763; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.cheer-toggle { border: 0; background: transparent; font-size: .72rem; color: #5b6763; text-decoration: underline; cursor: pointer; white-space: nowrap; padding: 0; }
.cheer-close:focus-visible, .cheer-toggle:focus-visible { outline: 2px solid var(--primary, #0f766e); outline-offset: 2px; }
.cheer-card.is-still, .cheer-card.is-still .cheer-emoji, .cheer-card.is-still .cheer-badge { transition: opacity .2s ease; animation: none; }
.cheer-card.is-still { transform: translate(-50%, 0); }
@keyframes cheer-pop { 0% { transform: scale(.2) rotate(-20deg); } 70% { transform: scale(1.15) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes cheer-shine { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 202, 58, 0); } 50% { box-shadow: 0 0 0 6px rgba(255, 202, 58, .35); } }
@media (prefers-reduced-motion: reduce) { .cheer-card, .cheer-emoji, .cheer-badge { animation: none !important; transition: opacity .2s ease !important; } }
@media (prefers-color-scheme: dark) {
  .cheer-card, .cheer-card.cheer-task, .cheer-card.cheer-word, .cheer-card.cheer-exam { background: linear-gradient(135deg, #2b2616 0%, #1b2422 60%, #15302a 100%); color: #f3f6f5; }
  .cheer-msg, .cheer-close, .cheer-toggle { color: #c4cfcb; }
  .cheer-emoji { background: #24302d; }
  .cheer-chip { background: rgba(255, 255, 255, .1); }
  .cheer-badge { background: #5c4800; color: #ffe8a3; }
  .cheer-streak { background: #5a2410; color: #ffd8c7; }
}

/* Streak calendar: this week by default, earlier weeks behind "See history" */
.cal-wk { display: none; font-size: .68rem; color: var(--text-2); align-self: center; white-space: nowrap; }
.streak-cal.is-open .cal-row { grid-template-columns: 80px repeat(7, minmax(0, 1fr)); }
.streak-cal.is-open .cal-wk { display: block; }
.streak-cal.is-open .cal-row.is-current .cal-wk { font-weight: 700; color: var(--text); }
.cal-history { display: grid; gap: 4px; }
.cal-history[hidden] { display: none; }
.cal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 4px; }
.cal-foot .cal-legend { margin: 0; }
.cal-toggle { border: 0; background: transparent; padding: 4px 0; font: inherit; font-size: .85rem; font-weight: 600; color: var(--brand); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cal-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* Checkbox + label on one line (e.g. "Link a parent now" on student sign-up) */
.check-row { margin: 4px 0 8px; }
.check-row-main { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; white-space: nowrap; }
.check-row-main input[type=checkbox] { width: 22px; height: 22px; min-height: 0; margin: 0; flex: none; accent-color: var(--brand); cursor: pointer; }
.check-row-main small { font-weight: 400; }
.check-row-hint { margin: 4px 0 0 32px; }

/* "Create your student account" stays on one line at every screen width (scales with the card) */
.register-card { container-type: inline-size; }
.register-card h1.one-line { white-space: nowrap; font-size: clamp(1.05rem, 6.6cqi, 1.75rem); line-height: 1.2; }

/* Register pages: role line centred under the logo */
.register-card .auth-chip-top { text-align: center; padding-left: .08em; } /* offsets the trailing letter-spacing so it looks truly centred */

/* ---------- Academic Access Delegation ---------- */
.page-intro { margin: -4px 0 16px; max-width: 70ch; }
.link-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
.link-row:first-of-type { border-top: 0; }
.link-row > span:first-child { display: grid; gap: 2px; }
.link-row small { font-size: .85rem; }
.link-row:hover b, .link-row:focus-visible b { color: var(--brand-strong); text-decoration: underline; }
.deleg-list { display: grid; gap: 12px; margin-bottom: 16px; }
.deleg-card { display: grid; gap: 10px; }
.deleg-card.is-suspended { border-left: 4px solid var(--border); }
.deleg-card.is-pending { border-left: 4px solid var(--accent, #f59e0b); }
.deleg-card.is-active { border-left: 4px solid var(--brand); }
.deleg-card.is-revoked, .deleg-card.is-expired, .deleg-card.is-cancelled, .deleg-card.is-rejected { opacity: .8; }
.deleg-head { display: flex; align-items: center; gap: 12px; }
.deleg-who { display: grid; min-width: 0; flex: 1; }
.deleg-who b, .deleg-who small { overflow-wrap: anywhere; }
.deleg-students { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.chip-student { background: var(--surface-2); color: var(--text); }
.chip-shared { background: var(--brand-soft); color: var(--brand-strong); }
.perm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.perm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--surface-2); color: var(--text-2); }
.perm-chip.is-action { background: var(--brand-soft); color: var(--brand-strong); }
.perm-chip.is-sensitive { background: var(--accent-soft); color: #92400e; }
.deleg-facts { margin: 0; font-size: .88rem; }
.deleg-actions { flex-wrap: wrap; gap: 8px; }
.deleg-past summary { cursor: pointer; padding: 4px 0; }
.deleg-past[open] summary { margin-bottom: 12px; }
.deleg-modal { width: min(96vw, 640px); }
.deleg-modal .modal-body { max-height: min(72vh, 720px); overflow-y: auto; }
.deleg-perms { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px 4px; margin: 0 0 12px; display: grid; gap: 2px; }
.deleg-perms legend { padding: 0 6px; }
.deleg-perm { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 8px 4px; border-radius: 8px; cursor: pointer; }
.deleg-perm:hover { background: var(--surface-2); }
.deleg-perm input[type=checkbox] { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; accent-color: var(--brand); }
.deleg-perm > span { display: grid; gap: 2px; }
.deleg-perm .chip { justify-self: start; }
.deleg-perm.is-sensitive b { color: #92400e; }
.deleg-summary { margin: 0 0 12px; font-weight: 600; }
.check-grid { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 6px; }
.deleg-students-pick { border: 0; padding: 0; margin: 0 0 12px; }
.deleg-student-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.delegate-banner { border-left: 4px solid var(--brand); }
.delegate-banner .perm-chips { margin: 4px 0 8px; }
.deleg-links h2 { margin-bottom: 4px; }
.invite-box { display: grid; gap: 10px; margin: 8px 0 16px; }
.invite-lead { font-size: 1.05rem; margin: 0; }
.invite-actions { display: grid; gap: 10px; margin-top: 6px; }
.invite-note { margin: 4px 0 12px; }
.shared-cta { margin-bottom: 16px; }
@media (prefers-color-scheme: dark) { .perm-chip.is-sensitive, .deleg-perm.is-sensitive b { color: var(--accent); } }
[data-page="shared"] > .section { display: grid; gap: 12px; margin-bottom: 24px; }
[data-page="shared"] > .section > h2 { margin: 0; }

/* ---------- Invite someone to help: layout, presets, find an existing person ---------- */
.dg-form { container-type: inline-size; }
.dg-who { display: grid; gap: 12px; margin-bottom: 8px; }
.dg-row { display: grid; gap: 12px; grid-template-columns: 1fr; align-items: start; }
@container (min-width: 440px) { .dg-row { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.dg-row .field { margin: 0; }
.dg-row .field-error:empty { display: none; }
.dg-hint { margin-top: -4px; }
.suggest-field { position: relative; margin: 0; }
.suggest-list { list-style: none; margin: 6px 0 0; padding: 4px; border: 1.5px solid var(--input-border); border-radius: var(--radius-sm); background: var(--surface);
  box-shadow: var(--shadow); max-height: 264px; overflow-y: auto; }
.suggest-item { display: flex; align-items: center; gap: 10px; padding: 10px; min-height: 48px; border-radius: 8px; cursor: pointer; }
.suggest-item:hover, .suggest-item[aria-selected="true"] { background: var(--brand-soft); }
.suggest-item[aria-selected="true"] { outline: 2px solid var(--brand); outline-offset: -2px; }
.suggest-text { display: grid; min-width: 0; flex: 1; }
.suggest-text b, .suggest-text small { overflow-wrap: anywhere; }
.suggest-status { margin: 6px 0 0; min-height: 0; }
.suggest-status:empty { display: none; }
.suggest-status.is-loading::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--brand); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.picked-user { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--brand-soft); }
.picked-user[hidden] { display: none; }
.existing-access { display: grid; gap: 8px; }
.existing-access[hidden] { display: none; }
.existing-row { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--accent-soft); color: #92400e; }
.existing-row p { margin: 0 0 6px; }
.existing-row .btn-row { gap: 8px; flex-wrap: wrap; }
@media (prefers-color-scheme: dark) { .existing-row { color: var(--accent); } }
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.preset-btn { display: grid; gap: 1px; text-align: left; min-height: 48px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--input-border);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer; touch-action: manipulation; }
.preset-btn small { color: var(--text-2); font-size: .75rem; }
.preset-btn:hover { border-color: var(--brand); }
.preset-btn[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.preset-btn[aria-pressed="true"] small { color: rgba(255, 255, 255, .85); }
.preset-btn[aria-pressed="true"] b::before { content: "✓ "; }
.preset-clear { min-height: 44px; padding: 0 6px; }
.preset-custom { align-self: center; }
.deleg-perm { min-height: 48px; }
.check-row-main small { font-weight: 400; }

/* ---------- Academic Access Invitations (Home page, Shared with me) ---------- */
.invite-section { display: grid; gap: 12px; margin-bottom: 20px; }
.invite-section[hidden] { display: none; }
.invite-section .section-head h2 { display: inline-flex; align-items: center; gap: 8px; }
.count-badge { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .8rem; font-weight: 700; }
.invite-card { display: grid; gap: 10px; border-left: 4px solid var(--accent, #f59e0b); }
.invite-head { display: flex; gap: 12px; align-items: center; }
.invite-head h3 { margin: 0; font-size: 1.05rem; }
.invite-text { margin: 0; }
.invite-summary { margin: 0; }
.invite-actions-row { gap: 10px; flex-wrap: wrap; }
.invite-actions-row .btn { min-height: 44px; }
.invite-history summary { cursor: pointer; }
.invite-history-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.invite-history-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--border); }

/* ---- Registration CAPTCHA (ALTCHA widget, assets/vendor/altcha) ---- */
.captcha-field altcha-widget {
  display: block;
  --altcha-max-width: 100%;
  --altcha-border-width: 1.5px;
  --altcha-border-radius: var(--radius-sm, 10px);
  --altcha-color-base: var(--surface);
  --altcha-color-border: var(--input-border);
  --altcha-color-border-focus: var(--focus, var(--brand));
  --altcha-color-text: var(--text);
  --altcha-color-error-text: var(--danger);
}
.captcha-field .altcha-main { min-height: var(--tap, 44px); font-weight: 500; }
.captcha-field .altcha-checkbox input { accent-color: var(--brand); width: 20px; height: 20px; cursor: pointer; }
.captcha-field .altcha[data-state="verified"] { border-color: var(--success); }
.captcha-field .altcha-footer { font-size: .72rem; }

/* ---------- /app — mobile app start screen (choose Student or Parent app) ---------- */
.app-home-body .blank-main { align-items: start; padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.app-home { width: 100%; max-width: 880px; margin: 0 auto; display: grid; gap: 22px; }
.app-home-head { display: grid; justify-items: center; gap: 6px; text-align: center; }
.app-home-head .logo-full img { max-width: 210px; height: auto; }
.app-home-head h1 { font-size: 1.75rem; margin: 10px 0 0; letter-spacing: -.02em; }
.app-home-head .lead { margin: 0; }
.app-choices { display: grid; gap: 14px; }
@media (min-width: 680px) { .app-choices { grid-template-columns: 1fr 1fr; gap: 18px; } }
.app-choice { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--border);
  border-top: 5px solid var(--brand); border-radius: var(--radius); box-shadow: var(--shadow); }
.app-choice-head { display: flex; align-items: flex-start; gap: 14px; }
.app-choice-head h2 { font-size: 1.25rem; margin: 2px 0 4px; color: var(--brand-strong); }
.app-choice-head p { margin: 0; color: var(--text-2); font-size: .95rem; line-height: 1.45; }
.app-choice .portal-icon { background: var(--brand-soft); color: var(--brand-strong); }
.app-choice-actions { display: grid; gap: 10px; margin-top: auto; }
.app-choice-note { margin: 0; font-size: .85rem; color: var(--text-2); text-align: center; }
/* Each card uses the colours of the app it opens: Student = teal, Parent = navy (#0a3f91). */
.app-parent { --brand: #0a3f91; --brand-strong: #072f6d; --brand-soft: #dde8fb; --focus: #0a3f91; }
@media (prefers-color-scheme: dark) {
  .app-parent { --brand: #8fb3f3; --brand-strong: #b7cff8; --brand-soft: #16284a; --focus: #8fb3f3; }
  .app-parent .btn-primary { color: #06173a; }
}
.app-home-foot { text-align: center; font-size: .9rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; }
.app-home-foot p { flex-basis: 100%; margin: 4px 0 0; }
.app-home-foot a { color: var(--text-2); }
@media (max-width: 520px) { .app-home-foot > span[aria-hidden] { display: none; } .app-home-foot a { flex-basis: 100%; } }