.cr-page-bg { background: var(--bg); min-height: 100vh; }

/* Classrooms — one scoped stylesheet, not CSS Builder utility output.
   Everything is prefixed .cr- and lives inside .mv-root so the site's theme
   tokens apply in both light and dark. Same approach as for_churches.css. */

.mv-root .cr-wrap { max-width: 980px; margin: 0 auto; padding: 24px 22px 64px; }
.mv-root .cr-head { margin-bottom: 22px; }
.mv-root .cr-head h1 { font-size: 26px; line-height: 1.25; margin: 0 0 6px; color: var(--text-1); }
.mv-root .cr-head p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.6; max-width: 620px; }

.mv-root .cr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 14px); padding: 22px; margin-bottom: 16px; box-shadow: var(--shadow-card, none); }
.mv-root .cr-card h2 { font-size: 17px; margin: 0 0 4px; color: var(--text-1); }
.mv-root .cr-card .cr-sub { font-size: 14px; color: var(--text-2); margin: 0 0 18px; line-height: 1.6; }

.mv-root .cr-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.mv-root .cr-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; min-width: 0; }
.mv-root .cr-field label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.mv-root .cr-field .cr-hint { font-size: 12px; color: var(--text-3); line-height: 1.5; }
.mv-root .cr-field input, .mv-root .cr-field select { width: 100%; min-height: 44px; padding: 10px 12px; font-size: 15px; color: var(--text-1); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); }
.mv-root .cr-field input:focus, .mv-root .cr-field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.mv-root .cr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 20px; font-size: 15px; font-weight: 600; border-radius: var(--radius-sm, 8px); border: 1px solid transparent; cursor: pointer; }
.mv-root .cr-btn-pri { background: var(--accent); color: var(--accent-fg, #fff); }
.mv-root .cr-btn-pri[disabled] { opacity: .55; cursor: default; }
.mv-root .cr-btn-gh { background: transparent; color: var(--text-1); border-color: var(--border); }

.mv-root .cr-msg { margin-top: 12px; font-size: 14px; line-height: 1.6; }
.mv-root .cr-msg.bad { color: var(--danger, #c0392b); }

.mv-root .cr-list { display: flex; flex-direction: column; gap: 12px; }
.mv-root .cr-list + .cr-card, .mv-root .cr-list + .cr-list { margin-top: 16px; }
.mv-root .cr-item { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 14px); }
.mv-root .cr-item .cr-name { font-size: 16px; font-weight: 600; color: var(--text-1); }
.mv-root .cr-item .cr-meta { font-size: 13px; color: var(--text-2); }
.mv-root .cr-spacer { flex: 1 1 auto; }
.mv-root .cr-code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 22px; font-weight: 700; letter-spacing: 4px; color: var(--text-1); }
.mv-root .cr-code-lab { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); display: block; letter-spacing: .08em; }

.mv-root .cr-empty { text-align: center; padding: 40px 22px; }
.mv-root .cr-empty p { color: var(--text-2); font-size: 15px; margin: 0 0 18px; }

/* Empty state — what Classrooms is, before the teacher has one. */
.mv-root .cr-hero { padding: 34px 0 26px; max-width: 680px; }
.mv-root .cr-eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.mv-root .cr-hero h1 { font-family: var(--font-serif); font-size: 40px; line-height: 1.15; margin: 0 0 14px; color: var(--text-1); }
.mv-root .cr-hero p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--text-2); }

.mv-root .cr-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.mv-root .cr-mini h3 { font-size: 15px; margin: 0 0 10px; color: var(--text-1); }
.mv-root .cr-mini p { font-size: 14px; line-height: 1.65; color: var(--text-2); margin: 0 0 10px; }
.mv-root .cr-mini p:last-child { margin-bottom: 0; }

.mv-root .cr-quiet { border: 1px dashed var(--border); border-radius: var(--radius-lg, 14px); padding: 20px 22px; margin-bottom: 26px; }
.mv-root .cr-quiet h3 { font-size: 14px; margin: 0 0 8px; color: var(--text-2); }
.mv-root .cr-quiet p { font-size: 14px; line-height: 1.65; color: var(--text-3); margin: 0; max-width: 720px; }

@media (max-width: 900px) {
  .mv-root .cr-three { grid-template-columns: 1fr; }
  .mv-root .cr-hero h1 { font-size: 30px; }
}

/* ---------- Section shell: our own sidebar in place of the site rail ---------- */
.mv-root .cr-shell { display: flex; align-items: stretch; min-height: 100vh; background: var(--bg); padding-top: 68px; }
.mv-root .cr-nav { flex: 0 0 220px; padding: 26px 14px; border-right: 1px solid var(--border); }
.mv-root .cr-nav-h { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); padding: 18px 10px 8px; }
.mv-root .cr-nav-h:first-child { padding-top: 0; }
.mv-root .cr-nav-i { display: block; min-height: 44px; line-height: 24px; padding: 10px 12px; border-radius: var(--radius-sm, 8px); font-size: 14px; color: var(--text-2); text-decoration: none; }
.mv-root .cr-nav-i:hover { background: var(--surface-2); color: var(--text-1); }
.mv-root .cr-nav-i.on { background: var(--accent-soft, var(--surface-2)); color: var(--text-1); font-weight: 600; }
.mv-root .cr-main { flex: 1 1 auto; min-width: 0; }
.mv-root .cr-main .cr-wrap { max-width: 900px; }

/* ---------- N8 empty state ---------- */
.mv-root .cr-empty-wrap { max-width: 660px; margin: 0 auto; padding: 72px 22px 64px; text-align: center; }
.mv-root .cr-empty-ic { width: 72px; height: 72px; margin: 0 auto 26px; border-radius: 20px; background: var(--accent-soft, var(--surface-2)); }
.mv-root .cr-empty-wrap h1 { font-family: var(--font-serif); font-size: 34px; line-height: 1.2; margin: 0 0 14px; color: var(--text-1); }
.mv-root .cr-empty-wrap > p { font-size: 16px; line-height: 1.65; color: var(--text-2); margin: 0 auto 28px; max-width: 560px; }
.mv-root .cr-empty-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.mv-root .cr-empty-btns .cr-btn { text-decoration: none; }
.mv-root .cr-when { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; text-align: left; }
.mv-root .cr-when-c { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 14px); padding: 16px 18px; }
.mv-root .cr-when-k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.mv-root .cr-when-c strong { display: block; font-size: 15px; color: var(--text-1); margin-bottom: 6px; }
.mv-root .cr-when-s { font-size: 13px; line-height: 1.55; color: var(--text-2); }

@media (max-width: 860px) {
  /* Phones: the sidebar becomes a swipeable row of links above the page (it used to just hide, leaving no way to Assign/Progress/Settings). */
  .mv-root .cr-shell { flex-direction: column; }
  .mv-root .cr-nav { display: flex; flex: none; gap: 6px; overflow-x: auto; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--border); white-space: nowrap; scrollbar-width: none; }
  .mv-root .cr-nav::-webkit-scrollbar { display: none; }
  .mv-root .cr-nav-brand, .mv-root .cr-nav-h { display: none; }
  .mv-root .cr-nav-i { flex: none; display: inline-flex; align-items: center; min-height: 40px; line-height: 20px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; }
  .mv-root .cr-when { grid-template-columns: 1fr; }
}

/* ---------- T4 Class Mode: full-screen projected board ---------- */
.mv-root .cm-root { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: var(--bg-deep, var(--bg)); color: var(--text-1); }
.mv-root .cm-top { flex: none; display: flex; align-items: center; gap: 14px; padding: 14px 24px; border-bottom: 1px solid var(--border); background: var(--bg); }
.mv-root .cm-brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--text-1); text-decoration: none; white-space: nowrap; }
.mv-root .cm-logo { width: 26px; height: 26px; border-radius: 8px; background: var(--brand, var(--accent)); color: #fff; display: grid; place-items: center; }
.mv-root .cm-class { font-family: var(--font-serif); font-size: 19px; font-weight: 600; margin-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-root .cm-class span { color: var(--text-3); font-weight: 500; }
.mv-root .cm-sp { flex: 1 1 auto; }
.mv-root .cm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; font-size: 14px; font-weight: 600; border-radius: 999px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.mv-root .cm-btn-pri { background: var(--brand, var(--accent)); color: #fff; }
.mv-root .cm-btn-pri[disabled] { opacity: .5; cursor: default; }
.mv-root .cm-btn-sec { background: var(--text-1); color: var(--bg); }
.mv-root .cm-btn-gh { background: transparent; color: var(--text-2); border-color: var(--border-strong); }
.mv-root .cm-btn-gh:hover { color: var(--text-1); background: var(--surface-2); }
.mv-root .cm-icon { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-2); display: grid; place-items: center; cursor: pointer; text-decoration: none; }
.mv-root .cm-icon:hover { color: var(--text-1); background: var(--surface-2); }
.mv-root .cm-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 72px; text-align: center; }
.mv-root .cm-ref { font-family: var(--font-mono); font-size: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand, var(--accent)); margin-bottom: 26px; }
.mv-root .cm-verse { font-family: var(--font-serif); font-size: clamp(30px, 4.2vw, 58px); font-weight: 500; line-height: 1.24; letter-spacing: -.02em; margin: 0; max-width: 1100px; text-wrap: balance; }
.mv-root .cm-verse .w { transition: opacity .25s; }
.mv-root .cm-verse .w.gone { opacity: 0; }
.mv-root .cm-verse .w .ghost { opacity: .14; }
.mv-root .cm-none h1 { font-family: var(--font-serif); font-size: 36px; margin: 0 0 12px; }
.mv-root .cm-none p { font-size: 17px; color: var(--text-2); margin: 0 0 24px; }
.mv-root .cm-bot { flex: none; display: flex; align-items: center; gap: 18px; padding: 14px 24px; border-top: 1px solid var(--border); background: var(--bg); }
.mv-root .cm-fade { display: flex; align-items: center; gap: 12px; }
.mv-root .cm-lab { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted, var(--text-3)); }
.mv-root .cm-steps { display: flex; gap: 5px; }
.mv-root .cm-step { width: 54px; height: 44px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 700; cursor: pointer; }
.mv-root .cm-step:hover { border-color: var(--brand, var(--accent)); color: var(--brand, var(--accent)); }
.mv-root .cm-step.on { background: var(--brand, var(--accent)); border-color: var(--brand, var(--accent)); color: #fff; }
.mv-root .cm-step[disabled] { opacity: .4; cursor: default; }
.mv-root .cm-div { width: 1px; height: 32px; background: var(--border); }
.mv-root .cm-hint { font-size: 13px; color: var(--text-3); }

.mv-root .cm-code { position: absolute; inset: 0; z-index: 5; background: var(--bg-deep, var(--bg)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; text-align: center; padding: 24px; }
.mv-root .cm-code-k { font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
.mv-root .cm-code-n { font-family: var(--font-mono); font-size: clamp(90px, 16vw, 170px); font-weight: 700; letter-spacing: .14em; line-height: 1; color: var(--text-1); }
.mv-root .cm-code-how { max-width: 520px; }
.mv-root .cm-code-how p { font-size: 20px; color: var(--text-2); line-height: 1.5; margin: 0; }
.mv-root .cm-code-how p b { color: var(--text-1); }
.mv-root .cm-code-how .cm-code-fine { font-size: 14px; color: var(--text-muted, var(--text-3)); margin-top: 14px; }

.mv-root .cm-pick { position: absolute; inset: 0; z-index: 6; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 24px; }
.mv-root .cm-pick-card { width: 100%; max-width: 640px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 26px 28px; box-shadow: var(--shadow-elev, 0 20px 60px rgba(0,0,0,.3)); }
.mv-root .cm-pick-card h2 { font-family: var(--font-serif); font-size: 26px; margin: 0 0 6px; }
.mv-root .cm-pick-sub { font-size: 14px; color: var(--text-2); margin: 0 0 18px; }
.mv-root .cm-pick-row { display: flex; gap: 12px; flex-wrap: wrap; }
.mv-root .cm-pick-f { display: flex; flex-direction: column; gap: 6px; flex: 1 1 100px; min-width: 0; }
.mv-root .cm-pick-book { flex: 3 1 220px; }
.mv-root .cm-pick-f label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.mv-root .cm-pick-f input, .mv-root .cm-pick-f select { width: 100%; min-height: 44px; padding: 10px 12px; font-size: 15px; color: var(--text-1); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }
.mv-root .cm-pick-prev { margin-top: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); font-family: var(--font-serif); font-size: 17px; line-height: 1.5; color: var(--text-2); min-height: 80px; }
.mv-root .cm-pick-prev b { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand, var(--accent)); margin-bottom: 8px; }
.mv-root .cm-pick-btns { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.mv-root .cm-pick-card { max-height: 100%; overflow-y: auto; }
/* "Other" translation (2026-09-18): name + paste boxes in the verse picker; a typed name is never uppercased. */
.mv-root .cm-pick-tr { margin-top: 12px; }
.mv-root .cm-pick-other { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.mv-root .cm-pick-other[hidden] { display: none; }
.mv-root .cm-pick-other .cm-pick-f { flex: none; }
.mv-root .cm-pick-f textarea { width: 100%; min-height: 96px; padding: 10px 12px; font-family: var(--font-serif); font-size: 15px; line-height: 1.5; color: var(--text-1); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; resize: vertical; }
.mv-root .cr-tr-other { text-transform: none; letter-spacing: normal; }
.mv-root .cr-chip.cr-tr-other { white-space: normal; }
.mv-root .cm-msg { margin-top: 10px; font-size: 14px; color: var(--danger, #c0392b); }

@media (max-width: 900px) {
  .mv-root .cm-stage { padding: 16px 24px; }
  .mv-root .cm-hint { display: none; }
  .mv-root .cm-stage .cm-btn-gh span { display: none; } /* Class Mode only: it was hiding the door's Remember text and "Not ___?" (QA2 T3-12) */
}
/* The site reset gives divs a display value, which beats the hidden attribute. */
.mv-root .cm-code[hidden], .mv-root .cm-pick[hidden] { display: none; }

/* ---------- T1 Roster ---------- */
.mv-root .cr-roster { max-width: 1100px; }
.mv-root .cr-rhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; flex-wrap: wrap; }
.mv-root .cr-rhead h1 { font-family: var(--font-serif); font-size: 32px; line-height: 1.15; margin: 0 0 8px; color: var(--text-1); }
.mv-root .cr-lede { font-size: 14.5px; color: var(--text-2); margin: 0; }
.mv-root .cr-mono { font-family: var(--font-mono); letter-spacing: .08em; color: var(--text-1); }
.mv-root .cr-rhead-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mv-root .cr-rhead-r .cr-btn { text-decoration: none; }
.mv-root .cr-select { min-height: 44px; padding: 8px 12px; font-size: 14px; color: var(--text-1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); }
.mv-root .cr-meter-card { padding: 18px 22px; }
.mv-root .cr-meter-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.mv-root .cr-big { font-family: var(--font-serif); font-size: 26px; font-weight: 600; color: var(--text-1); }
.mv-root .cr-meter-lab { font-size: 14px; color: var(--text-2); }
.mv-root .cr-meter { height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.mv-root .cr-meter i { display: block; height: 100%; background: var(--brand, var(--accent)); border-radius: 999px; }
.mv-root .cr-meter-note { font-size: 12.5px; color: var(--text-3); margin: 10px 0 0; line-height: 1.5; }
.mv-root .cr-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); white-space: nowrap; }
.mv-root .cr-chip.ok { background: var(--success-soft); color: var(--success); border-color: transparent; }
.mv-root .cr-chip.warn { background: var(--warning-soft, #fff4e5); color: var(--warning, #b45309); border-color: transparent; }
.mv-root .cr-chip.mute { color: var(--text-muted, var(--text-3)); }
.mv-root .cr-closed-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--text-2); margin-bottom: 14px; }
.mv-root .cr-chip.acc { background: var(--accent-soft); color: var(--accent); border-color: transparent; margin-left: 8px; }
.mv-root .cr-two { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; align-items: start; }
.mv-root .cr-stack { display: flex; flex-direction: column; gap: 18px; }
.mv-root .cr-card-tight { padding: 0; }
.mv-root .cr-card-hd { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.mv-root .cr-card-hd h2 { margin: 0; font-size: 17px; }
.mv-root .cr-card-hd .cr-sub { display: block; font-size: 12px; color: var(--text-3); margin: 3px 0 0; }
.mv-root .cr-card-hd .cr-hd-inline { display: flex; align-items: baseline; gap: 10px; } .mv-root .cr-card-hd .cr-hd-inline .cr-sub { margin: 0; }
.mv-root .cr-card-bd { padding: 16px 18px; }
.mv-root .cr-quiet-p { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin: 0; }
.mv-root .cr-btn-sm { min-height: 36px; padding: 6px 14px; font-size: 13px; }
.mv-root .cr-btn-danger { color: var(--danger, #c0392b); }
/* Roster: the add row is the table's first row (2026-09-15, Claude Design). */
.mv-root .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mv-root .cr-add-open-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.mv-root .cr-add-open-hd[hidden], .mv-root .cr-rtbl thead[hidden], .mv-root .cr-empty[hidden], .mv-root .cr-roster-card .cr-btn[hidden] { display: none; }
.mv-root .cr-addrow-hint-l { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mv-root .cr-linkbtn { font: inherit; font-size: 13px; font-weight: 600; color: var(--accent); background: none; border: 0; padding: 4px 2px; margin-left: auto; cursor: pointer; }
.mv-root .cr-linkbtn:hover { text-decoration: underline; }
.mv-root .cr-seg { display: inline-flex; flex: none; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.mv-root .cr-seg-b { font: inherit; font-size: 13px; font-weight: 600; color: var(--text-3); background: transparent; border: 0; border-radius: 999px; padding: 7px 13px; cursor: pointer; white-space: nowrap; }
.mv-root .cr-seg-b.on { background: var(--surface); color: var(--text-1); box-shadow: 0 1px 2px rgba(11,20,38,.08); }
.mv-root .cr-seg-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mv-root .cr-rtbl-wrap { overflow-x: auto; }
.mv-root .cr-rtbl th { padding-top: 14px; }
.mv-root .cr-rtbl .cr-rtbl-ini { width: 84px; text-align: center; padding-left: 6px; padding-right: 6px; }
.mv-root .cr-rtbl .cr-rtbl-seat { width: 1%; white-space: nowrap; }
.mv-root .cr-rtbl .cr-num { text-align: right; padding-right: 4px; }
.mv-root .cr-addrow[hidden] { display: none; }
.mv-root .cr-addrow td { border-top: 0; padding-top: 4px; padding-bottom: 4px; }
.mv-root .cr-addin { width: 100%; min-height: 42px; padding: 9px 12px; font: inherit; font-size: 15px; color: var(--text-1); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; }
.mv-root .cr-addin::placeholder { color: var(--text-muted); }
.mv-root .cr-addin:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.mv-root .cr-addin-ini { text-align: center; padding-left: 6px; padding-right: 6px; }
.mv-root .cr-addbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-width: 96px; min-height: 42px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.mv-root .cr-addbtn:hover { color: var(--text-1); border-color: var(--border-strong); }
.mv-root .cr-addbtn:disabled { opacity: .6; cursor: default; }
.mv-root .cr-addrow-hint td { font-size: 12.5px; color: var(--text-3); padding-top: 2px; padding-bottom: 14px; }
.mv-root .cr-addrow-hint b { color: var(--text-1); font-weight: 700; }
.mv-root .cr-addrow-hint .cr-msg:empty, .mv-root .cr-pasterow .cr-msg:empty { display: none; }
.mv-root .cr-addrow-hint .cr-msg, .mv-root .cr-pasterow .cr-msg { margin-top: 8px; }
.mv-root .cr-pasterow td { padding-top: 6px; padding-bottom: 14px; }
.mv-root .cr-paste { display: block; min-height: 140px; resize: vertical; line-height: 1.5; }
.mv-root .cr-paste-ft { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.mv-root .cr-paste-note { font-size: 12.5px; color: var(--text-3); }
.mv-root .cr-rtbl tbody + tbody tr:first-child td { border-top: 1px solid var(--border); }
.mv-root .cr-rtbl .cr-addrow + .cr-addrow tr:first-child td { border-top: 0; }
.mv-root .cr-rtbl tbody.cr-addrow tr td { border-top: 0; }
.mv-root .cr-dotst { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.mv-root .cr-dotst i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); flex: none; }
.mv-root .cr-dotst.claimed { color: var(--success); }
.mv-root .cr-dotst.claimed i { background: var(--success); }
.mv-root .cr-dotst.nopin { color: var(--warning, #b45309); }
.mv-root .cr-dotst.nopin i { background: var(--warning, #b45309); }
.mv-root .cr-rtbl .cr-ico { width: 30px; height: 30px; }
.mv-root .cr-roster-ft { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 13px; color: var(--text-3); border-radius: 0 0 var(--radius-lg, 14px) var(--radius-lg, 14px); }
.mv-root .cr-roster-ft b { color: var(--text-1); font-weight: 700; }
.mv-root .cr-roster-ft .cr-btn { text-decoration: none; }
/* Phones: the table becomes stacked rows - name and initial on top, seat status and actions under. */
@media (max-width: 560px) {
	.mv-root .cr-roster-card .cr-card-hd { flex-wrap: wrap; }
	.mv-root .cr-rtbl thead { display: none; }
	.mv-root .cr-rtbl, .mv-root .cr-rtbl tbody, .mv-root .cr-rtbl td { display: block; }
	.mv-root .cr-rtbl tbody[hidden] { display: none; }
	.mv-root .cr-rtbl tr { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--border); }
	.mv-root .cr-rtbl td { border: 0 !important; padding: 0 !important; width: auto !important; text-align: left; }
	.mv-root .cr-rtbl .cr-addrow tr { border-top: 0; padding-bottom: 4px; }
	.mv-root .cr-rtbl .cr-addrow tr:first-child { padding-top: 14px; }
	.mv-root .cr-rtbl .cr-addrow td[colspan] { grid-column: 2 / -1; margin-top: 8px; }
	.mv-root .cr-rtbl .cr-addrow-hint td[colspan], .mv-root .cr-rtbl .cr-pasterow td[colspan] { margin-top: 0; }
	.mv-root .cr-rtbl .cr-addrow-hint { padding-bottom: 14px !important; }
	.mv-root .cr-rtbl .cr-pasterow { padding-bottom: 14px !important; }
	.mv-root .cr-addin-ini { width: 56px; }
	.mv-root .cr-rtbl .js-seat .cr-rtbl-ini { text-align: right; }
	.mv-root .cr-rtbl .js-seat .cr-rtbl-seat { grid-column: 2; margin-top: 8px; white-space: normal; }
	.mv-root .cr-rtbl .js-seat .cr-right { grid-column: 3; margin-top: 8px; }
	.mv-root .cr-seat-name { white-space: normal; flex-wrap: wrap; }
}
.mv-root .cr-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.mv-root .cr-tbl th { text-align: left; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted, var(--text-3)); font-weight: 700; padding: 12px 12px 8px; }
.mv-root .cr-tbl td { padding: 10px 12px; border-top: 1px solid var(--border); vertical-align: middle; }
.mv-root .cr-tbl .cr-num { width: 34px; color: var(--text-muted, var(--text-3)); font-family: var(--font-mono); font-size: 12px; }
.mv-root .cr-tbl .cr-right { text-align: right; }
.mv-root .cr-seat-name { display: flex; align-items: center; gap: 10px; }
.mv-root .cr-seat-name b { font-weight: 600; color: var(--text-1); }
.mv-root .cr-av { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.mv-root .cr-av svg { width: 100%; height: 100%; display: block; }
.mv-root .cr-row-acts { display: inline-flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.mv-root .cr-sw-list { padding: 4px 18px 8px; }
.mv-root .cr-sw { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; }
.mv-root .cr-sw + .cr-sw { border-top: 1px solid var(--border); }
.mv-root .cr-sw-t { flex: 1; }
.mv-root .cr-sw-t .n { font-size: 14px; font-weight: 600; color: var(--text-1); }
.mv-root .cr-sw-t .d { font-size: 12.5px; color: var(--text-3); margin-top: 3px; line-height: 1.45; }
.mv-root .cr-tog { width: 46px; height: 27px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-strong); position: relative; flex: none; cursor: pointer; margin-top: 2px; padding: 0; display: inline-block; }
.mv-root .cr-tog i { position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: var(--text-muted, var(--text-3)); transition: left .15s, background .15s; }
.mv-root .cr-tog.on { background: var(--brand, var(--accent)); border-color: var(--brand, var(--accent)); }
.mv-root .cr-tog.on i { left: 21px; background: #fff; }
.mv-root .cr-tog.lock { opacity: .55; cursor: not-allowed; }
@media (max-width: 1000px) { .mv-root .cr-two { grid-template-columns: minmax(0, 1fr); } }
.mv-root .cr-seat-name { white-space: nowrap; }
.mv-root .cr-tbl .cr-right { white-space: nowrap; }
.mv-root .cr-row-acts { flex-wrap: nowrap; }
.mv-root .cr-ico { width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.mv-root .cr-ico:hover { border-color: var(--border-strong); color: var(--text-1); }
.mv-root .cr-ico.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.mv-root .cr-ico-danger:hover { color: var(--danger, #c0392b); border-color: var(--danger, #c0392b); }

/* ---------- N1 parent join + family page ---------- */
.mv-root .cr-code-form { max-width: 520px; }
.mv-root .cr-join-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 26px; align-items: start; }
.mv-root .cr-join-h1 { font-family: var(--font-serif); font-size: 31px; margin: 8px 0 8px; color: var(--text-1); line-height: 1.15; }
.mv-root .cr-join-card { margin-top: 18px; }
.mv-root .cr-sect { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted, var(--text-3)); margin: 18px 0 10px; }
.mv-root .cr-sect:first-child { margin-top: 0; }
.mv-root .cr-sect-s { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.mv-root .cr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mv-root .cr-tile { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text-1); font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; }
.mv-root .cr-tile:hover { border-color: var(--border-strong); }
.mv-root .cr-tile.on { border: 2px solid var(--brand, var(--accent)); background: var(--brand-soft, var(--accent-soft)); }
.mv-root .cr-radio { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-1); padding: 6px 0; min-height: 36px; flex-wrap: wrap; }
.mv-root .cr-avs { display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; }
.mv-root .cr-av-pick { aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; cursor: pointer; padding: 0; min-height: 44px; }
.mv-root .cr-av-pick.on { border: 2px solid var(--brand, var(--accent)); background: var(--brand-soft, var(--accent-soft)); }
.mv-root .cr-pin-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mv-root .cr-pin-in { width: 110px; min-height: 52px; padding: 8px 12px; font-family: var(--font-mono); font-size: 24px; font-weight: 700; letter-spacing: .2em; text-align: center; color: var(--text-1); background: var(--surface-2); border: 2px solid var(--border-strong); border-radius: 12px; }
.mv-root .cr-joining { display: flex; align-items: center; gap: 14px; }
.mv-root .cr-joining-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--brand-soft, var(--accent-soft)); color: var(--brand, var(--accent)); display: grid; place-items: center; flex: none; }
.mv-root .cr-joining-n { font-size: 15px; font-weight: 600; color: var(--text-1); margin-top: 2px; }
.mv-root .cr-ul { margin: 0; padding-left: 17px; }
.mv-root .cr-ul li { font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; line-height: 1.45; }
.mv-root .cr-consent { display: flex; gap: 14px; align-items: flex-start; border: 2px solid var(--brand, var(--accent)); background: var(--brand-soft, var(--accent-soft)); border-radius: var(--radius-lg, 14px); padding: 18px 20px; cursor: pointer; }
.mv-root .cr-consent input { width: 22px; height: 22px; flex: none; margin: 2px 0 0; }
.mv-root .cr-consent span { font-size: 13.5px; line-height: 1.5; color: var(--text-1); }
.mv-root .cr-consent-s { font-size: 12.5px; color: var(--text-2); display: block; margin-top: 8px; }
.mv-root .cr-consent a { color: var(--text-1); text-decoration: underline; }
.mv-root .cr-btn-blk { width: 100%; min-height: 52px; font-size: 15.5px; }
.mv-root .cr-done { display: flex; gap: 12px; align-items: flex-start; border-color: var(--success); color: var(--text-1); font-size: 14px; line-height: 1.5; }
.mv-root .cr-done svg { color: var(--success); flex: none; margin-top: 2px; }
.mv-root .cr-fam .cr-meta + .cr-meta { margin-top: 4px; }
.mv-root .cr-link { background: none; border: 0; padding: 0; color: var(--text-1); text-decoration: underline; cursor: pointer; font-size: 13px; }
.mv-root .cr-fam .cr-row-acts .cr-btn { text-decoration: none; }
@media (max-width: 560px) { .mv-root .cr-fam .cr-row-acts { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; } } /* family seat buttons wrap inside the card on a phone (bug 354) */
@media (max-width: 1000px) { .mv-root .cr-join-grid { grid-template-columns: 1fr; } .mv-root .cr-avs { grid-template-columns: repeat(6, 1fr); } }
.mv-root .cr-shell-plain .cr-main .cr-wrap { max-width: 1040px; }
.mv-root .crp-page { min-height: 100vh; }
.mv-root .cr-pin-in::placeholder { font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--text-muted, var(--text-3)); }

/* ---------- S1 student door + S3 student home ---------- */
.mv-root .dr, .mv-root .sh { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text-1); }
.mv-root .dr-top { flex: none; display: flex; align-items: center; gap: 12px; padding: 18px 26px; }
.mv-root .dr-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 40px 40px; }
.mv-root .dr-panel { display: flex; flex-direction: column; align-items: center; width: 100%; }
.mv-root .dr-panel[hidden], .mv-root .dr-msg[hidden] { display: none; }
.mv-root .dr-steps { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.mv-root .dr-dot { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted, var(--text-3)); }
.mv-root .dr-dot i { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: grid; place-items: center; font-size: 11px; font-family: var(--font-mono); font-weight: 700; font-style: normal; }
.mv-root .dr-dot.on { color: var(--text-1); }
.mv-root .dr-dot.on i { background: var(--brand, var(--accent)); border-color: var(--brand, var(--accent)); color: #fff; }
.mv-root .dr-dot.done i { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.mv-root .dr-rule { width: 26px; height: 1px; background: var(--border-strong); }
.mv-root .dr-q { font-family: var(--font-serif); font-size: 38px; text-align: center; margin: 0; line-height: 1.1; }
.mv-root .dr-sub { font-size: 15.5px; color: var(--text-2); margin: 10px 0 0; text-align: center; max-width: 520px; }
.mv-root .dr-who { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.mv-root .pin { display: flex; gap: 14px; margin: 30px 0 22px; }
.mv-root .pin b { width: 76px; height: 92px; border-radius: 16px; border: 2px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; font-family: var(--font-mono); font-size: 44px; font-weight: 700; color: var(--text-1); }
.mv-root .pin b.f { border-color: var(--brand, var(--accent)); box-shadow: 0 0 0 4px var(--brand-soft, var(--accent-soft)); }
.mv-root .pin b.e { color: var(--text-muted, var(--text-3)); }
.mv-root .pin.bad b { border-color: var(--danger, #c0392b); }
.mv-root .pad { display: grid; grid-template-columns: repeat(3, 88px); gap: 10px; }
.mv-root .pad button { height: 66px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-1); font-family: var(--font-mono); font-size: 24px; font-weight: 600; cursor: pointer; }
.mv-root .pad button:hover { background: var(--surface-2); }
.mv-root .pad button.ax { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-2); }
.mv-root .dr-kbhint { font-size: 12.5px; color: var(--text-muted, var(--text-3)); margin-top: 16px; display: flex; align-items: center; gap: 7px; }
.mv-root .dr-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; width: 100%; max-width: 860px; margin-top: 26px; }
.mv-root .dr-tile { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 14px 6px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; min-height: 118px; justify-content: center; }
.mv-root .dr-tile:hover { border-color: var(--brand, var(--accent)); background: var(--brand-soft, var(--accent-soft)); }
.mv-root .dr-tile .nm { font-size: 13px; font-weight: 600; text-align: center; line-height: 1.25; color: var(--text-1); }
.mv-root .dr-msg { max-width: 520px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 30px 32px; box-shadow: var(--shadow-card); }
.mv-root .dr-msg .ic { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; }
.mv-root .dr-msg .ic.warn { background: var(--warning-soft, #fff4e5); color: var(--warning, #b45309); }
.mv-root .dr-msg .ic.acc { background: var(--accent-soft); color: var(--accent); }
.mv-root .dr-msg h2 { font-family: var(--font-serif); font-size: 28px; margin: 0; }
.mv-root .dr-msg p { font-size: 15px; color: var(--text-2); margin: 10px 0 0; }
.mv-root .dr-btns { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.mv-root .sh-class { font-family: var(--font-serif); font-size: 18px; font-weight: 600; margin-left: 10px; }
.mv-root .sh-me { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.mv-root .sh-body { flex: 1; max-width: 880px; width: 100%; margin: 0 auto; padding: 24px 26px 60px; }
.mv-root .hm-verse { background: linear-gradient(165deg, color-mix(in oklab, var(--brand, var(--accent)) 10%, var(--surface)), var(--surface) 58%); border: 1px solid var(--border); border-radius: 22px; padding: 28px 30px 26px; box-shadow: var(--shadow-card); }
.mv-root .hm-verse-eye { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mv-root .hm-verse .txt { font-family: var(--font-serif); font-size: 29px; font-weight: 500; line-height: 1.34; letter-spacing: -.015em; margin: 0; }
.mv-root .hm-verse .ref { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--brand, var(--accent)); margin-top: 14px; }
.mv-root .sh-soon { font-size: 14px; color: var(--text-3); margin: 18px 0 0; }
.mv-root .sh-foot { font-size: 13.5px; color: var(--text-3); margin-top: 18px; }
@media (max-width: 900px) { .mv-root .dr-tiles { grid-template-columns: repeat(3, 1fr); } .mv-root .dr-q { font-size: 30px; } .mv-root .pin b { width: 62px; height: 76px; font-size: 36px; } .mv-root .pad { grid-template-columns: repeat(3, 76px); } }

/* ---------- T2 Assign ---------- */
.mv-root .cr-now { background: linear-gradient(165deg, color-mix(in oklab, var(--brand, var(--accent)) 9%, var(--surface)), var(--surface) 60%); }
.mv-root .cr-now-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.mv-root .cr-now-txt { font-family: var(--font-serif); font-size: 24px; line-height: 1.35; font-weight: 500; margin: 0; color: var(--text-1); }
.mv-root .cr-now-ref { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--brand, var(--accent)); margin-top: 12px; }
.mv-root .cr-now-facts { display: flex; gap: 22px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-2); flex-wrap: wrap; }
.mv-root .cr-now-facts b { color: var(--text-1); }
.mv-root .cr-qlist { padding: 4px 18px 8px; }
.mv-root .cr-qrow { display: flex; align-items: center; gap: 14px; padding: 11px 0; flex-wrap: wrap; }
.mv-root .cr-qrow + .cr-qrow { border-top: 1px solid var(--border); }
.mv-root .cr-qn { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-muted, var(--text-3)); width: 22px; }
.mv-root .cr-qref { font-family: var(--font-serif); font-size: 16px; font-weight: 600; flex: 1; color: var(--text-1); }
.mv-root .cr-qrow .cr-row-acts { margin-left: auto; }
.mv-root .cr-qrow .cr-meta, .mv-root .cr-card-bd > .cr-meta { font-size: 13px; color: var(--text-2); }
.mv-root .sh-go { display: flex; align-items: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.mv-root .sh-go .cm-btn { text-decoration: none; min-height: 52px; font-size: 16px; padding: 12px 22px; }
.mv-root .sh-due { font-size: 13.5px; color: var(--text-3); }
.mv-root .sh-mini { margin-top: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow-card); }
.mv-root .sh-mini h4 { font-size: 14px; font-weight: 700; margin: 0 0 8px; }
.mv-root .sh-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); text-decoration: none; color: var(--text-1); font-family: var(--font-serif); font-size: 16px; font-weight: 600; }
.mv-root .sh-row:first-of-type { border-top: 0; }

/* ---------- S5 recite check ---------- */
.mv-root .mc-top { border-bottom: 1px solid var(--border); padding: 14px 26px; }
.mv-root .mc-top .cm-btn { text-decoration: none; }
.mv-root .mc-title { margin-left: 6px; }
.mv-root .mc-ref { display: flex; align-items: center; gap: 10px; margin-top: 5px; flex-wrap: wrap; }
.mv-root .mc-refpill { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-serif); font-size: 17px; font-weight: 600; padding: 6px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.mv-root .mc-refpill .tr { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--text-3); background: var(--surface-2); padding: 3px 7px; border-radius: 4px; }
.mv-root .mc-eph { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; }
.mv-root .mc-body { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 28px 48px 60px; gap: 20px; }
.mv-root .mc-panel { width: 100%; max-width: 860px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.mv-root .mc-panel[hidden] { display: none; }
.mv-root .mc-h1 { font-family: var(--font-serif); font-size: 34px; text-align: center; margin: 0; line-height: 1.1; }
.mv-root .mc-sub { font-size: 15.5px; color: var(--text-2); text-align: center; max-width: 560px; margin: 0; line-height: 1.5; }
.mv-root .mc-best b { color: var(--text-1); }
.mv-root .mc-type { width: 100%; max-width: 760px; min-height: 230px; border: 2px dashed var(--border-strong); border-radius: 22px; background: var(--surface); padding: 26px 28px; font-family: var(--font-serif); font-size: 22px; line-height: 1.5; color: var(--text-1); resize: vertical; }
.mv-root .mc-type:focus { border-style: solid; border-color: var(--brand, var(--accent)); outline: none; }
.mv-root .mc-body .dr-btns { margin-top: 4px; flex-wrap: wrap; }
.mv-root .mc-body .dr-btns .cm-btn { text-decoration: none; min-height: 48px; }
.mv-root .mc-res { display: flex; align-items: center; gap: 30px; width: 100%; max-width: 760px; flex-wrap: wrap; }
.mv-root .mc-ring { position: relative; width: 150px; height: 150px; flex: none; }
.mv-root .mc-ring-n { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-serif); font-size: 34px; font-weight: 600; }
.mv-root .mc-res-t { flex: 1 1 320px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.mv-root .mc-res-t .mc-h1, .mv-root .mc-res-t .mc-sub { text-align: left; }
.mv-root .mc-res-t .dr-btns { justify-content: flex-start; margin-top: 8px; }
.mv-root .mc-cmp { width: 100%; max-width: 860px; border-top: 1px solid var(--border); padding-top: 20px; margin-top: 6px; text-align: center; }
.mv-root .mc-words { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-family: var(--font-serif); font-size: 20px; line-height: 1.5; margin: 12px 0 0; }
.mv-root .mc-words span { padding: 1px 4px; border-radius: 5px; }
.mv-root .mc-words span.miss { border: 1.5px dashed var(--danger, #c0392b); color: var(--danger, #c0392b); }
.mv-root .mc-fine { font-size: 12px; color: var(--text-muted, var(--text-3)); margin: 14px 0 0; }
.mv-root .sh-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-3); }
.mv-root .mc-ring-n { white-space: nowrap; font-size: 30px; }

/* ---------- T3 Progress ---------- */
.mv-root .cr-tiles3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.mv-root .cr-tile3 { padding: 16px 18px; margin: 0; }
.mv-root .cr-tile3 .l { font-size: 12px; color: var(--text-3); font-weight: 500; }
.mv-root .cr-tile3 .v { font-family: var(--font-serif); font-size: 34px; font-weight: 600; line-height: 1.1; margin-top: 4px; color: var(--text-1); }
.mv-root .cr-tile3 .s { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.mv-root .cr-pcell { width: 170px; }
.mv-root .cr-meter.thin { height: 6px; }
.mv-root .cr-pnote { font-size: 11px; color: var(--text-3); margin-top: 4px; }
.mv-root .cr-ptbl .cr-num { font-size: 15px; color: var(--text-1); }
.mv-root .cr-ptbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 560px) { .mv-root .cr-ptbl th, .mv-root .cr-ptbl td { padding: 10px 8px; } .mv-root .cr-ptbl th { letter-spacing: .04em; font-size: 10px; } .mv-root .cr-ptbl .cr-pcell { width: 110px; min-width: 110px; } .mv-root .cr-ptbl .cr-seat-name .cr-chip { display: none; } .mv-root .cr-ptbl .cr-row-acts { flex-wrap: wrap; justify-content: flex-end; } } /* Progress Every student table spilled off a phone (bug 360) */
.mv-root .cr-btn.js-pass.on { background: var(--success-soft); border-color: var(--success); color: var(--success); }
@media (max-width: 900px) { .mv-root .cr-tiles3 { grid-template-columns: 1fr; } }
@media print { .mv-root .cr-nav, .mv-root .cr-rhead-r, .mv-root .js-pass { display: none !important; } }

/* ---------- Phase 10: goal, board, badges ---------- */
.mv-root .sh-wide { max-width: 1040px; }
.mv-root .sh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; align-items: start; }
.mv-root .sh-mini-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.mv-root .sh-mini-hd h4 { margin: 0; }
.mv-root .sh-big { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--text-2); margin: 6px 0 12px; }
.mv-root .sh-big span { font-family: var(--font-serif); font-size: 38px; font-weight: 600; line-height: 1; color: var(--text-1); }
.mv-root .sh-fine { font-size: 12.5px; color: var(--text-3); margin: 10px 0 0; line-height: 1.45; }
.mv-root .sh-brow { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13.5px; }
.mv-root .sh-brow + .sh-brow { border-top: 1px solid var(--border); }
.mv-root .sh-brow .r { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted, var(--text-3)); width: 20px; font-weight: 700; }
.mv-root .sh-brow .n { flex: 1; font-weight: 500; }
.mv-root .sh-brow.me { font-weight: 700; }
.mv-root .sh-brow .v { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.mv-root .sh-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mv-root .sh-badges.small { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mv-root .sh-badge { aspect-ratio: 1; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; padding: 6px; font-size: 10.5px; font-weight: 600; color: var(--text-3); line-height: 1.2; }
.mv-root .sh-badge small { font-weight: 400; font-size: 9.5px; color: var(--text-muted, var(--text-3)); }
.mv-root .sh-badge.got { background: var(--brand-soft, var(--accent-soft)); border-color: color-mix(in oklab, var(--brand, var(--accent)) 35%, transparent); color: var(--brand, var(--accent)); }
.mv-root .sh-badge.locked { opacity: .5; }
.mv-root .sh-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; margin-bottom: 18px; }
.mv-root .sh-pod { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mv-root .sh-pod.first { border-color: var(--brand, var(--accent)); padding-top: 26px; }
.mv-root .sh-pod .p { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--text-muted, var(--text-3)); margin-bottom: 8px; }
.mv-root .sh-pod .n { font-weight: 700; margin-top: 8px; }
.mv-root .sh-pod .v { font-family: var(--font-serif); font-size: 30px; font-weight: 600; line-height: 1; }
.mv-root .sh-pod .u { font-size: 12px; color: var(--text-3); }
.mv-root .sh-me-row { font-weight: 700; }
.mv-root .sh-prog-head { display: flex; gap: 18px; align-items: center; }
.mv-root .sh-prog-head h1 { margin: 6px 0 4px; font-family: var(--font-serif); font-size: 30px; }
.mv-root .sh-prog-head p { margin: 0; color: var(--text-2); font-size: 14px; }
@media (max-width: 900px) { .mv-root .sh-grid { grid-template-columns: 1fr; } .mv-root .sh-podium { grid-template-columns: 1fr; } }

/* ---------- Phase 11: kid Light Shine ---------- */
.mv-root .ls-card { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-card); overflow: hidden; max-width: 760px; margin: 0 auto; }
.mv-root .ls-glow { height: 96px; background: linear-gradient(180deg, color-mix(in oklab, var(--brand, var(--accent)) 16%, var(--surface)), var(--surface)); display: grid; place-items: center; }
.mv-root .ls-sun { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 50% 34%, color-mix(in oklab, var(--brand, var(--accent)) 88%, white), var(--brand, var(--accent))); box-shadow: 0 0 0 8px color-mix(in oklab, var(--brand, var(--accent)) 16%, transparent), 0 0 0 18px color-mix(in oklab, var(--brand, var(--accent)) 8%, transparent); }
.mv-root .ls-in { padding: 22px 32px 28px; text-align: center; }
.mv-root .ls-in h2 { font-family: var(--font-serif); font-size: 29px; margin: 10px 0 8px; }
.mv-root .ls-in .mc-sub { margin: 0 auto; }
.mv-root .ls-eye { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand, var(--accent)); }
.mv-root .ls-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.mv-root .ls-tile { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text-1); font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; }
.mv-root .ls-tile[hidden] { display: none; }
.mv-root .ls-tile .o { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border-strong); flex: none; }
.mv-root .ls-tile.on { border: 2px solid var(--brand, var(--accent)); background: var(--brand-soft, var(--accent-soft)); }
.mv-root .ls-tile.on .o { background: var(--brand, var(--accent)); border-color: var(--brand, var(--accent)); box-shadow: 0 0 10px 1px color-mix(in oklab, var(--brand, var(--accent)) 55%, transparent); }
.mv-root .ls-foot { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.mv-root .ls-foot .cm-btn { text-decoration: none; }
.mv-root .sh-lights { display: flex; gap: 4px; flex-wrap: wrap; margin: 10px 0; }
.mv-root .sh-ld { width: 14px; height: 14px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); }
.mv-root .sh-ld.lit { background: var(--brand, var(--accent)); border-color: var(--brand, var(--accent)); box-shadow: 0 0 8px 1px color-mix(in oklab, var(--brand, var(--accent)) 50%, transparent); }
.mv-root .sh-ld.today { border: 2px dashed var(--brand, var(--accent)); }
@media (max-width: 700px) { .mv-root .ls-tiles { grid-template-columns: 1fr; } }
.mv-root .sh-switch { margin-left: 10px; } .mv-root .sh-switch .cr-select { min-height: 38px; padding: 6px 10px; font-size: 13px; }
/* A hidden word is a blank tile the width of the word, so the room can see where a word goes and about how long it is. */
.mv-root .cm-verse .w.gone { opacity: 1; color: transparent; background: var(--surface-2); border-bottom: 3px solid var(--border-strong); border-radius: 6px; }

/* ---------- Challenges ---------- */
.mv-root .chb { display: flex; flex-direction: column; gap: 14px; }
.mv-root .chb-side { padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.mv-root .chb-side.lead { border-color: var(--brand, var(--accent)); background: var(--brand-soft, var(--accent-soft)); }
.mv-root .chb-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.mv-root .chb-name { font-family: var(--font-serif); font-size: 18px; font-weight: 600; }
.mv-root .chb-seats { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.mv-root .chb-bar { height: 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.mv-root .chb-bar i { display: block; height: 100%; background: var(--brand, var(--accent)); border-radius: 999px; }
.mv-root .chb-nums { font-size: 13px; color: var(--text-2); margin-top: 8px; }
.mv-root .chb-v { font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--text-1); }
.mv-root .chb-foot { font-size: 14px; color: var(--text-2); }
.mv-root .chb-asof { display: block; font-size: 12px; color: var(--text-3); margin-top: 4px; }
.mv-root .chb.card .chb-name { font-size: 15px; } .mv-root .chb.card .chb-v { font-size: 18px; } .mv-root .chb.card .chb-side { padding: 10px 12px; }
.mv-root .chb.card .chb-hd { flex-wrap: wrap; row-gap: 2px; } /* a long school name pushes 'weeks won' under it instead of squeezing it (bug 351) */
.mv-root .chb.board { gap: 26px; width: min(900px, 90vw); }
.mv-root .chb.board .chb-name { font-size: 40px; } .mv-root .chb.board .chb-bar { height: 34px; } .mv-root .chb.board .chb-v { font-size: 56px; } .mv-root .chb.board .chb-nums { font-size: 22px; } .mv-root .chb.board .chb-foot { font-size: 24px; text-align: center; } .mv-root .chb.board .chb-seats { font-size: 18px; }
.mv-root .cm-stand { position: absolute; inset: 0; z-index: 5; background: var(--bg-deep, var(--bg)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 24px; }
.mv-root .cm-stand[hidden] { display: none; }
.mv-root .cr-school-sug { position: relative; }
.mv-root .cr-sug { position: absolute; left: 0; right: 0; top: 100%; z-index: 4; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-card); max-height: 220px; overflow: auto; }
.mv-root .cr-sug button { display: block; width: 100%; text-align: left; padding: 10px 12px; background: none; border: 0; border-top: 1px solid var(--border); font-size: 14px; color: var(--text-1); cursor: pointer; }
.mv-root .cr-sug button:first-child { border-top: 0; }
.mv-root .cr-sug button:hover { background: var(--surface-2); }
.mv-root .cr-sug small { color: var(--text-3); margin-left: 6px; }
.mv-root .cr-badges-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mv-root .cr-badges-row .cr-chip { margin: 0; font-family: var(--font-serif); font-size: 15px; font-weight: 600; }
.mv-root .cr-field[hidden] { display: none; }
.mv-root .cr-radio.cr-radio-big { align-items: flex-start; flex-wrap: nowrap; gap: 10px; padding: 8px 0; cursor: pointer; }
.mv-root .cr-radio.cr-radio-big input { margin-top: 3px; flex: none; }
.mv-root .cr-radio.cr-radio-big > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mv-root .cr-radio.cr-radio-big .cr-hint { margin: 0; }
.mv-root .cr-nav-brand { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--text-1); padding: 0 10px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.mv-root .cr-nav-brand + .cr-nav-h { padding-top: 8px; }
.mv-root .cr-beta { display: inline-block; font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); vertical-align: middle; margin-left: 4px; }
.mv-root .cr-av-img { overflow: hidden; border-radius: 50%; background: var(--surface-2); display: inline-flex; }
.mv-root .cr-av-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.mv-root .cr-av-picker { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--surface); }
.mv-root .cr-av-chosen { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.mv-root .cr-av-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mv-root .cr-av-tab { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); cursor: pointer; }
.mv-root .cr-av-tab.on { background: var(--brand, var(--accent)); border-color: var(--brand, var(--accent)); color: #fff; }
.mv-root .cr-avs[hidden] { display: none; }
.mv-root .cr-acct-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.mv-root .cr-acct-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.mv-root .cr-acct-row .cr-link { flex: none; }
.mv-root .cr-acct-row .cr-hint, .mv-root .cr-acct-txt .cr-hint { margin: 0; }
.mv-root .cr-tile > span > .cr-hint { display: block; font-weight: 500; margin: 0; }
.mv-root .js-acct-pick .cr-hint { margin-bottom: 8px; }

/* ---- Parent claim page (Claude Design "hierarchy pass", 2026-09-10). Numbered step spine, nested account well, collapsed avatar, PIN panel, consent + button at the end of the column, quiet rail. Terracotta twice: the current selection and the button. ---- */
.mv-root .cr-join .cs-hd { max-width: 620px; margin-bottom: 34px; }
.mv-root .cr-join .cs-eye { font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--text-2); }
.mv-root .cr-join .cs-hd h1 { font-family: var(--font-serif); font-size: 36px; font-weight: 600; letter-spacing: -.018em; line-height: 1.1; margin: 9px 0 0; color: var(--text-1); }
.mv-root .cr-join .cs-hd p { font-size: 15.5px; color: var(--text-2); margin: 11px 0 0; line-height: 1.5; }
.mv-root .cr-join .cs-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
.mv-root .cr-join .cs-step { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 22px; position: relative; }
.mv-root .cr-join .cs-step + .cs-step { margin-top: 40px; }
.mv-root .cr-join .cs-step-n { position: relative; }
.mv-root .cr-join .cs-step-n b { width: 38px; height: 38px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--border-strong); color: var(--text-2); display: grid; place-items: center; font-family: var(--font-serif); font-size: 17px; font-weight: 600; position: relative; z-index: 1; }
.mv-root .cr-join .cs-step-n::after { content: ""; position: absolute; left: 50%; top: 44px; bottom: -46px; width: 1.5px; background: var(--border); transform: translateX(-50%); }
.mv-root .cr-join .cs-step.last .cs-step-n::after { display: none; }
.mv-root .cr-join .cs-step-t { font-family: var(--font-serif); font-size: 23px; font-weight: 600; letter-spacing: -.015em; line-height: 1.1; padding-top: 5px; margin: 0; color: var(--text-1); }
.mv-root .cr-join .cs-step-s { font-size: 13.5px; color: var(--text-2); margin: 5px 0 0; max-width: 52ch; line-height: 1.5; }
.mv-root .cr-join .cs-step-b { margin-top: 16px; }
.mv-root .cr-join .cs-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 1px 2px rgba(11,20,38,.04); }
.mv-root .cr-join .cs-panel-p { padding: 18px; }
.mv-root .cr-join .cs-tiles { display: grid; gap: 10px; }
.mv-root .cr-join .cs-tiles.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
.mv-root .cr-join .cs-tiles.c4 { grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); }
.mv-root .cr-join .cs-tile { display: flex; align-items: center; gap: 11px; min-height: 62px; padding: 11px 14px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; text-align: left; font: inherit; color: var(--text-1); transition: border-color .12s, background .12s; }
.mv-root .cr-join .cs-tile:hover { border-color: var(--border-strong); background: var(--surface-2); }
.mv-root .cr-join .cs-tile .nm { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.mv-root .cr-join .cs-tile .sb { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; line-height: 1.3; }
.mv-root .cr-join .cs-tile.on { border-color: var(--brand, var(--accent)); border-width: 2px; background: var(--brand-soft, var(--accent-soft)); padding: 10px 13px; }
.mv-root .cr-join .cs-tile .tick { display: none; margin-left: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--brand, var(--accent)); color: #fff; place-items: center; flex: none; }
.mv-root .cr-join .cs-tile.on .tick { display: grid; }
.mv-root .cr-join .cs-tile.add { border-style: dashed; color: var(--text-2); }
.mv-root .cr-join .cs-tile.add .nm { color: var(--text-2); }
.mv-root .cr-join .cs-plus { width: 32px; height: 32px; border-radius: 50%; border: 1.5px dashed var(--border-strong); display: grid; place-items: center; flex: none; color: var(--text-3); }
.mv-root .cr-join .cs-sub { margin-top: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); padding: 16px 16px 17px; }
.mv-root .cr-join .cs-sub[hidden] { display: none; }
.mv-root .cr-join .cs-sub-q { font-size: 14px; font-weight: 700; color: var(--text-1); }
.mv-root .cr-join .cs-sub-h { font-size: 12.5px; color: var(--text-2); margin-top: 4px; line-height: 1.5; }
.mv-root .cr-join .cs-sub .cs-tiles { margin-top: 13px; }
.mv-root .cr-join .cs-sub-note { display: flex; gap: 9px; align-items: flex-start; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.mv-root .cr-join .cs-sub-note[hidden] { display: none; }
.mv-root .cr-join .cs-sub-note .i { color: var(--text-3); flex: none; margin-top: 1px; display: inline-flex; }
.mv-root .cr-join .cs-av-row { display: flex; align-items: center; gap: 16px; padding: 15px 16px; }
.mv-root .cr-join .cs-av-ring .cr-av { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--border-strong); }
.mv-root .cr-join .cs-av-row .lbl { flex: 1; min-width: 0; }
.mv-root .cr-join .cs-av-row .lbl .n { font-size: 15px; font-weight: 600; color: var(--text-1); }
.mv-root .cr-join .cs-av-row .lbl .d { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.mv-root .cr-join .cs-chev { transition: transform .15s; }
.mv-root .cr-join .js-av-toggle.open .cs-chev { transform: rotate(180deg); }
.mv-root .cr-join .cs-av-open { border-top: 1px solid var(--border); padding: 16px; }
.mv-root .cr-join .cs-av-open[hidden] { display: none; }
.mv-root .cr-join .cs-segs { display: flex; flex-wrap: wrap; gap: 6px; }
.mv-root .cr-join .cs-seg { font-size: 12.5px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid transparent; border-radius: 999px; padding: 6px 13px; cursor: pointer; font-family: inherit; }
.mv-root .cr-join .cs-seg:hover { color: var(--text-1); border-color: var(--border-strong); }
.mv-root .cr-join .cs-seg.on { background: var(--text-1); color: var(--bg, #fff); }
/* Fixed-size cells (2026-09-15): auto-fit + 1fr stretched a 3-avatar category into giant tiles. Every category now uses the same 76px cell and 56px avatar. */
.mv-root .cr-join .cs-av-grid { display: grid; grid-template-columns: repeat(auto-fill, 76px); justify-content: start; gap: 10px; margin-top: 15px; }
.mv-root .cr-join .cs-av-grid[hidden] { display: none; }
.mv-root .cr-join .cs-av-cell { width: 76px; height: 76px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); display: grid; place-items: center; cursor: pointer; padding: 0; }
.mv-root .cr-join .cs-av-cell:hover { border-color: var(--border-strong); background: var(--surface-2); }
.mv-root .cr-join .cs-av-cell.on { border-color: var(--brand, var(--accent)); border-width: 2.5px; background: var(--brand-soft, var(--accent-soft)); }
.mv-root .cr-join .cs-pin-row { display: flex; flex-wrap: wrap; gap: 26px; padding: 18px; }
.mv-root .cr-join .cs-pin-f .l { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 9px; }
.mv-root .cr-join .cs-pin-in { width: 216px; height: 58px; border-radius: 11px; border: 1.5px dashed var(--border-strong); background: var(--surface); font-family: var(--font-mono); font-size: 25px; font-weight: 700; letter-spacing: .55em; text-align: center; color: var(--text-1); padding: 0 0 0 .55em; }
.mv-root .cr-join .cs-pin-in::placeholder { color: var(--text-muted, var(--text-3)); font-weight: 400; }
.mv-root .cr-join .cs-pin-in:focus { outline: none; border-color: var(--brand, var(--accent)); box-shadow: 0 0 0 3px var(--brand-soft, var(--accent-soft)); }
.mv-root .cr-join .cs-pin-in.filled { border-style: solid; }
.mv-root .cr-join .cs-hintline { display: flex; gap: 9px; align-items: flex-start; border-top: 1px solid var(--border); padding: 13px 18px; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.mv-root .cr-join .cs-hintline .i { flex: none; margin-top: 1px; display: inline-flex; }
.mv-root .cr-join .cs-commit { margin-top: 44px; margin-left: 60px; max-width: 560px; }
.mv-root .cr-join .cs-consent { display: flex; gap: 14px; align-items: flex-start; padding: 17px 18px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); cursor: pointer; }
.mv-root .cr-join .cs-consent input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--border-strong); background: var(--surface); flex: none; margin: 1px 0 0; cursor: pointer; display: grid; place-items: center; }
.mv-root .cr-join .cs-consent input:checked { background: var(--text-1); border-color: var(--text-1); }
.mv-root .cr-join .cs-consent input:checked::after { content: ""; width: 12px; height: 7px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: translateY(-2px) rotate(-45deg); }
.mv-root .cr-join .cs-consent .cp { display: block; font-size: 14px; line-height: 1.5; color: var(--text-1); }
.mv-root .cr-join .cs-consent .cs { display: block; font-size: 12.5px; line-height: 1.5; color: var(--text-3); margin-top: 7px; }
.mv-root .cr-join .cs-consent a { color: var(--text-1); text-decoration: underline; }
.mv-root .cr-join .cs-go { width: 100%; margin-top: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; border-radius: 999px; border: 0; font-size: 16.5px; font-weight: 600; cursor: pointer; background: var(--brand, var(--accent)); color: #fff; font-family: inherit; }
.mv-root .cr-join .cs-go:hover { filter: brightness(1.06); }
.mv-root .cr-join .cs-go[disabled] { background: var(--surface-2); color: var(--text-muted, var(--text-3)); cursor: not-allowed; box-shadow: inset 0 0 0 1px var(--border); filter: none; }
.mv-root .cr-join .cs-after { font-size: 12.5px; color: var(--text-2); text-align: center; margin: 11px 0 0; }
.mv-root .cr-join .cs-commit .cr-msg { margin-top: 10px; }
.mv-root .cr-join .cs-rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 20px; }
.mv-root .cr-join .cs-rail-class { display: flex; align-items: center; gap: 12px; padding: 14px 15px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.mv-root .cr-join .cs-rail-class .ic { width: 38px; height: 38px; border-radius: 11px; background: var(--brand-soft, var(--accent-soft)); color: var(--brand, var(--accent)); display: grid; place-items: center; flex: none; }
.mv-root .cr-join .cs-rail-class .e { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.mv-root .cr-join .cs-rail-class .n { font-size: 14px; font-weight: 600; margin-top: 3px; color: var(--text-1); line-height: 1.4; }
.mv-root .cr-join .cs-rail-class .n span { font-family: var(--font-mono); letter-spacing: .06em; }
.mv-root .cr-join .cs-rail-h { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); margin-bottom: 11px; }
.mv-root .cr-join .cs-rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mv-root .cr-join .cs-rail-list li { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 9px; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.mv-root .cr-join .cs-rail-list li .m { color: var(--text-2); margin-top: 2px; display: inline-flex; }
.mv-root .cr-join .cs-rail-sep { height: 1px; background: var(--border); margin: 17px 0; }
@media (max-width: 820px) { .mv-root .cr-join .cs-cols { grid-template-columns: minmax(0, 1fr); gap: 36px; } .mv-root .cr-join .cs-rail { order: -1; position: static; } .mv-root .cr-join .cs-commit { margin-left: 0; } .mv-root .cr-join .cs-tiles.c2 { max-width: none; } }
@media (max-width: 520px) { .mv-root .cr-join .cs-step { grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; } .mv-root .cr-join .cs-step-n b { width: 32px; height: 32px; font-size: 15px; } .mv-root .cr-join .cs-pin-in { width: 100%; } }

/* ---- Age tier: the setup card + settled row (Claude Design age-gate handoff,
   2026-09-14; design_handoffs/design_handoff_age_gate in site-docs). A setup
   step, not an error, so no brand border. ---- */
.mv-root .cr-agegate[hidden], .mv-root .cr-agesettled[hidden] { display: none !important; }
.mv-root .cr-agegate { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 18px; box-shadow: 0 14px 34px -26px rgba(11,20,38,.45); overflow: hidden; margin-bottom: 20px; }
.mv-root .cr-agegate-hd { padding: 22px 24px 18px; border-bottom: 1px solid var(--border); }
.mv-root .cr-agegate-step { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--brand); background: var(--brand-soft); border-radius: 999px; padding: 5px 11px; }
.mv-root .cr-agegate-hd h2 { font-family: var(--font-serif); font-size: 25px; font-weight: 600; letter-spacing: -.005em; word-spacing: .04em; line-height: 1.1; margin: 12px 0 0; }
.mv-root .cr-agegate-lede { font-size: 14px; line-height: 1.55; color: var(--text-2); margin: 9px 0 0; max-width: 64ch; text-wrap: pretty; }
.mv-root .cr-agegate-lede b { color: var(--text-1); font-weight: 600; }
.mv-root .cr-agegate-bd { padding: 18px 24px 20px; display: flex; flex-direction: column; gap: 12px; }
.mv-root .cr-agegate-ft { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface-2); }
.mv-root .cr-agegate-fine { flex: 1; min-width: 220px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin: 0; }
.mv-root .cr-agegate > .cr-msg { margin: 0 24px 16px; }
.mv-root .cr-ageopt { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; padding: 16px 18px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.mv-root .cr-ageopt:hover { border-color: var(--text-muted); }
.mv-root .cr-ageopt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mv-root .cr-ageopt[aria-checked='true'] { border-color: var(--accent-strong); box-shadow: 0 0 0 1px var(--accent-strong), 0 10px 24px -20px rgba(42,64,96,.65); }
.mv-root .cr-ageopt[aria-disabled='true'] { opacity: .5; cursor: not-allowed; }
.mv-root .cr-ageopt-dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--text-muted); margin-top: 2px; display: grid; place-items: center; }
.mv-root .cr-ageopt-dot b { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-strong); display: none; }
.mv-root .cr-ageopt[aria-checked='true'] .cr-ageopt-dot { border-color: var(--accent-strong); }
.mv-root .cr-ageopt[aria-checked='true'] .cr-ageopt-dot b { display: block; }
.mv-root .cr-ageopt-t { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mv-root .cr-ageopt-t h4 { font-family: var(--font-serif); font-size: 19px; font-weight: 600; letter-spacing: -.005em; line-height: 1.15; margin: 0; }
.mv-root .cr-ageopt-tag { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); }
.mv-root .cr-ageopt-s { font-size: 13.5px; color: var(--text-2); margin: 5px 0 0; }
.mv-root .cr-ageopt-s b { color: var(--text-1); font-weight: 600; }
.mv-root .cr-ageopt-facts { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 26px; margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--border-strong); }
.mv-root .cr-ageopt[aria-checked='true'] .cr-ageopt-facts { display: grid; }
.mv-root .cr-agefact { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; align-items: start; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.mv-root .cr-agefact .ic { margin-top: 2px; color: var(--success); display: inline-flex; }
.mv-root .cr-agefact .ic.off { color: var(--text-muted); }
.mv-root .cr-agefact b { color: var(--text-1); font-weight: 600; }
.mv-root .cr-agesettled { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 15px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow-card, none); margin-bottom: 20px; }
.mv-root .cr-agesettled-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--success-soft); color: var(--success); display: grid; place-items: center; }
.mv-root .cr-agesettled h3 { font-family: var(--font-serif); font-size: 17px; font-weight: 600; letter-spacing: -.018em; margin: 0; }
.mv-root .cr-agesettled p { font-size: 12.5px; color: var(--text-3); margin: 4px 0 0; }
@media (max-width: 1080px) { .mv-root .cr-ageopt-facts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .mv-root .cr-agegate-hd h2 { font-size: 22px; } }
@media (max-width: 520px) { .mv-root .cr-agegate-hd, .mv-root .cr-agegate-bd, .mv-root .cr-agegate-ft { padding-left: 16px; padding-right: 16px; } .mv-root .cr-agesettled { grid-template-columns: 40px minmax(0, 1fr); } .mv-root .cr-agesettled .cr-btn { grid-column: 1 / -1; } }

/* ---- Seat invite: the student's accept + disclosure screen (2026-09-12) ---- */
.mv-root .cr-iv-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.mv-root .cr-iv-list li { font-size: 15px; line-height: 1.55; }
.mv-root .cr-iv-list li b { font-weight: 700; }

/* ---- "What your teacher can see": the standing disclosure on a student's own
   progress page (2026-09-12). Two plain columns, because the useful thing is
   the contrast between what is shared and what is not. ---- */
.mv-root .cr-sees { margin-top: 18px; }
.mv-root .cr-sees h2 { font-family: var(--font-serif); font-size: 20px; font-weight: 600; margin: 0 0 14px; letter-spacing: -0.01em; }
.mv-root .cr-sees-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mv-root .cr-sees-h { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); margin-bottom: 8px; }
.mv-root .cr-sees ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.mv-root .cr-sees li { font-size: 14.5px; line-height: 1.5; }
.mv-root .cr-sees-fine { font-size: 13.5px; color: var(--text-2); margin: 16px 0 0; }
@media (max-width: 780px) { .mv-root .cr-sees-two { grid-template-columns: 1fr; gap: 18px; } }

/* ---- Which screens: the parent's look choice (2026-09-12). Three plain radio
   rows - it is a decision, not a toggle, and the wrong one is easy to undo. ---- */
.mv-root .cr-uimode { margin-top: 18px; }
.mv-root .cr-uimode h3 { font-family: var(--font-serif); font-size: 19px; font-weight: 600; margin: 0 0 6px; }
.mv-root .cr-uimode-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.mv-root .cr-uimode-opt { display: flex; align-items: flex-start; gap: 12px; text-align: left; width: 100%; padding: 13px 15px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-1); cursor: pointer; font-family: var(--font-sans); }
.mv-root .cr-uimode-opt:hover { border-color: var(--border-strong); }
.mv-root .cr-uimode-opt.on { border-color: var(--brand, var(--accent)); border-width: 2px; background: var(--brand-soft, var(--accent-soft)); }
.mv-root .cr-uimode-opt .r { flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--border-strong); margin-top: 2px; }
.mv-root .cr-uimode-opt.on .r { border-color: var(--brand, var(--accent)); box-shadow: inset 0 0 0 3.5px var(--brand, var(--accent)); }
.mv-root .cr-uimode-opt b { display: block; font-size: 15px; font-weight: 700; }
.mv-root .cr-uimode-opt small { display: block; font-size: 13.5px; line-height: 1.45; color: var(--text-2); margin-top: 3px; }
.mv-root .cr-btn:focus-visible, .mv-root .cr-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mv-root .cr-rtbl .cr-same-acct { display: flex; width: max-content; margin: 6px 0 0; }
.mv-root .cr-rtbl .cr-release { font-size: 12px; color: var(--text-3); margin-left: 8px; }
.mv-root .cr-rtbl .cr-release:hover { color: var(--danger, #c0392b); }
.mv-root .cr-field input.cr-code-in { font-family: var(--font-mono); font-size: 22px; letter-spacing: .25em; text-transform: uppercase; }
.mv-root .cr-field input.cr-code-in::placeholder { letter-spacing: .25em; }
/* Class code pad: 10 across - digits, then the code letters, then delete + clear (2026-09-15). */
.mv-root .pad.pad-code { grid-template-columns: repeat(10, minmax(0, 58px)); gap: 8px; width: min(100%, 652px); justify-content: center; }
.mv-root .pad.pad-code button { height: 58px; font-size: 22px; padding: 0; }
.mv-root .pad.pad-code button.lt { font-family: var(--font-sans); font-weight: 700; }
.mv-root .pad.pad-code button.ax-wide { grid-column: span 10; height: 48px; }
@media (max-width: 900px) { .mv-root .pad.pad-code { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; } .mv-root .pad.pad-code button { height: 48px; font-size: 18px; border-radius: 10px; } }
@media (max-width: 560px) { .mv-root .pad.pad-code { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; } .mv-root .pad.pad-code button { height: 50px; font-size: 20px; } .mv-root .pad.pad-code button.ax-wide { grid-column: span 6; } }
/* Class Mode code panel: code + QR side by side (2026-09-15). The QR keeps its own white quiet zone so it scans on the dark theme. */
.mv-root .cm-code-row { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; }
.mv-root .cm-code-qr { background: #fff; border-radius: 16px; padding: 10px; line-height: 0; }
.mv-root .cm-code-qr svg { width: clamp(150px, 20vw, 220px); height: auto; }
/* Door: classes this device remembers (2026-09-15). */
.mv-root .dr-devs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 26px 0 8px; max-width: 760px; }
.mv-root .dr-dev { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 200px; padding: 18px 22px; border-radius: 16px; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text-1); font: inherit; cursor: pointer; }
.mv-root .dr-dev:hover { border-color: var(--brand, var(--accent)); background: var(--surface-2); }
.mv-root .dr-dev .nm { font-size: 18px; font-weight: 700; }
.mv-root .dr-dev .t { font-size: 13px; color: var(--text-3); }
.mv-root .dr-or { margin-top: 18px; }
.mv-root .dr-forget { margin-top: 14px; font-size: 12.5px; color: var(--text-3); }
.mv-root .dr-remember { margin-top: 12px; }
.mv-root .dr-remember[hidden] { display: none; }
/* '+ New class' (2026-09-15): in the side nav on wide screens; on the roster header when the nav is hidden. */
.mv-root .cr-nav-new { margin-top: 10px; border-top: 1px solid var(--border); border-radius: 0; padding-top: 16px; color: var(--accent); font-weight: 600; }
.mv-root .cr-new-class-m { display: none; }
@media (max-width: 860px) { .mv-root .cr-new-class-m { display: inline-flex; } }
/* Your classes list in the section nav (2026-09-16) */
.mv-root .cr-nav-class { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Roster first-run setup: one full-width step at a time (2026-09-16) */
.mv-root .cr-setup-next { display: flex; justify-content: flex-end; margin-top: 14px; }
.mv-root .cr-setup .cr-eyebrow { display: block; margin-bottom: 4px; }
@media (max-width: 860px) { .mv-root .cr-nav-new { margin-top: 0; padding-top: 0; border: 1px solid var(--border); border-radius: 999px; } }
.mv-root p.cr-hint { font-size: 13px; color: var(--text-3); line-height: 1.55; } /* a hint outside a .cr-field rendered as body text (2026-09-17) */
/* Student top bar on a phone (2026-09-18): brand shrinks to its logo and the class name truncates, so the bar never runs off the right edge. */
@media (max-width: 560px) { .mv-root .dr-top { gap: 8px; padding: 14px 16px; } .mv-root .dr-top .cm-brand { font-size: 0; gap: 0; } .mv-root .dr-top .sh-class { flex: 0 1 auto; min-width: 0; margin-left: 4px; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mv-root .dr-top .cm-btn { min-height: 38px; padding: 8px 12px; font-size: 13px; } .mv-root .dr-top .sh-me { font-size: 13px; gap: 6px; } .mv-root .dr-top .sh-switch { margin-left: 0; min-width: 0; } }
/* Two or more classes (bug 344): the class switcher drops to its own full-width row under the top bar. */
.mv-root .dr-top.sh-top-multi .sh-class { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mv-root .dr-top.sh-top-multi .sh-switch { flex: 0 1 240px; min-width: 0; } .mv-root .dr-top.sh-top-multi .sh-switch .cr-select { width: 100%; max-width: 100%; } /* bug 355: long class names truncate instead of widening the bar */
@media (max-width: 900px) { .mv-root .dr-top.sh-top-multi { flex-wrap: wrap; row-gap: 10px; } .mv-root .dr-top.sh-top-multi .sh-class { flex: 1 1 0; } .mv-root .dr-top.sh-top-multi .cm-sp { display: none; } .mv-root .dr-top.sh-top-multi .sh-switch { order: 9; flex: 1 1 100%; } .mv-root .dr-top.sh-top-multi .sh-switch .cr-select { width: 100%; max-width: 100%; } } /* bug 355: switcher row starts at 900px, not 560px */
@media (max-width: 560px) { .mv-root .cr-board-tbl th:nth-child(5), .mv-root .cr-board-tbl td:nth-child(5) { display: none; } } /* class board "Everyone": the This week column ran off a phone screen (2026-09-18) */
/* Class + school leaderboards on a phone (2026-09-18): your row is tinted instead of carrying a pill that wraps, and cells tighten. */
.mv-root .cr-board-tbl .sh-me-row td, .mv-root .cr-sb-tbl .sh-me-row td { background: var(--accent-soft); }
@media (max-width: 560px) { .mv-root .cr-board-tbl th, .mv-root .cr-board-tbl td, .mv-root .cr-sb-tbl td { padding: 10px 8px; } .mv-root .cr-board-tbl .cr-seat-name { flex-wrap: nowrap; gap: 8px; } .mv-root .cr-board-tbl .cr-seat-name .cr-chip { display: none; } .mv-root .cr-board-tbl .cr-seat-name img, .mv-root .cr-board-tbl .cr-seat-name .cr-av { width: 26px; height: 26px; flex: none; } }
@media (max-width: 560px) { .mv-root .cr-board-tbl th { letter-spacing: .04em; font-size: 10px; } .mv-root .cr-board-tbl th:first-child, .mv-root .cr-board-tbl td:first-child, .mv-root .cr-sb-tbl td:first-child { padding-left: 14px; padding-right: 4px; } }
.mv-root .cr-card-tight:has(> .cr-board-tbl), .mv-root #school-board { overflow: hidden; } /* keep the tinted "your row" inside the rounded card */
/* Badge art (2026-09-18): colourful medals; locked ones are the same art in grey. */
.mv-root .sh-badge .cr-badge-art { flex: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.22)); }
.mv-root .sh-badge.got { color: var(--text-1); }
.mv-root .sh-badge.locked { opacity: 1; color: var(--text-3); }
.mv-root .sh-badge.locked .cr-badge-art { filter: grayscale(1); opacity: .35; }
.mv-root .sh-badge.locked span { opacity: .7; }
@media (max-width: 560px) { .mv-root .sh-badges { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .mv-root .sh-badge small { display: none; } } /* My progress badges: 4 across ran off a phone (2026-09-18) */
.mv-root .sh-badges-card { grid-column: 1 / -1; } .mv-root .sh-badges.small { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); } /* home badges: full-width row so the medals never spill out of a narrow grid column (2026-09-18) */
/* My progress verse cards (2026-09-18): one card per class verse, with where this child is on it. */
.mv-root .mp-verses { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.mv-root .mp-verse { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow-card); }
.mv-root .mp-verse.mp-recited { border-color: color-mix(in oklab, var(--success) 45%, var(--border)); }
.mv-root .mp-verse-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mv-root .mp-ref { font-family: var(--font-serif); font-size: 19px; font-weight: 600; color: var(--text-1); }
.mv-root .mp-txt { margin: 0; font-family: var(--font-serif); font-size: 15px; line-height: 1.45; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mv-root .mp-status { margin-top: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: var(--text-3); }
.mv-root .mp-status b { font-weight: 700; color: var(--text-2); } .mv-root .mp-status span { color: var(--text-3); }
.mv-root .mp-recited .mp-status, .mv-root .mp-recited .mp-status b { color: var(--success); }
.mv-root .mp-practiced .mp-status b { color: var(--accent); } .mv-root .mp-practiced .mp-status svg { color: var(--accent); }
.mv-root .mp-new { opacity: .75; }
.mv-root .mp-badges { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
@media (max-width: 560px) { .mv-root .mp-verses { grid-template-columns: minmax(0, 1fr); } .mv-root .mp-badges { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Bonus verse on My progress (2026-09-18): a gold star chip and a warm edge, so extra credit feels like a prize. */
.mv-root .mp-bonus { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #5a3a00; background: linear-gradient(135deg, #ffe27a 0%, #ffc233 55%, #ff9f1c 100%); box-shadow: 0 0 0 1px rgba(255, 194, 51, .45), 0 2px 10px rgba(255, 170, 30, .35); white-space: nowrap; }
.mv-root .mp-bonus svg { color: #fff8d6; filter: drop-shadow(0 0 2px rgba(160, 90, 0, .6)); }
.mv-root .mp-verse.mp-is-bonus { border-color: rgba(255, 194, 51, .55); background: linear-gradient(160deg, rgba(255, 194, 51, .10) 0%, transparent 45%), var(--surface); }
.mv-root .mp-verse.mp-is-bonus.mp-new { opacity: 1; }
/* School board progress chart (school_test.php, 2026-09-21). Drawn by JS at the container's width so text stays 11px on a phone. */
.mv-root .cr-chart { position: relative; width: 100%; }
.mv-root .cr-chart svg { display: block; width: 100%; overflow: visible; }
.mv-root .cr-chart-legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-2); margin: 0 0 10px; }
.mv-root .cr-chart-legend span { display: flex; align-items: center; gap: 6px; }
.mv-root .cr-chart-sw { display: inline-block; width: 16px; height: 3px; border-radius: 2px; background: var(--text-3); opacity: .6; }
.mv-root .cr-chart-sw.me { background: var(--brand); opacity: 1; height: 3px; }
.mv-root .cr-chart-tip { position: absolute; top: 0; pointer-events: none; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; padding: 8px 10px; font-size: 12px; color: var(--text-2); box-shadow: var(--shadow-card); white-space: nowrap; z-index: 2; }
.mv-root .cr-chart-tip b { color: var(--text-1); }
.mv-root .cr-chart-tip .r { display: flex; justify-content: space-between; gap: 14px; }
.mv-root .cr-chart-tip .r.me { color: var(--text-1); font-weight: 600; }
/* This year / Last 30 days pills on the school board card (school_test.php, 2026-09-21). */
.mv-root .cr-seg { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); flex-shrink: 0; }
.mv-root .cr-seg button { font: inherit; font-size: 12px; font-weight: 600; padding: 5px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.mv-root .cr-seg button.on { background: var(--surface); color: var(--text-1); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.mv-root .cr-card-hd [hidden], .mv-root .cr-card [hidden] { display: none !important; }
@media (max-width: 560px) { .mv-root .cr-card-hd:has(.cr-seg) { flex-wrap: wrap; } }
/* Class switcher at the top of the Classrooms nav (nav_test.php, 2026-09-21). Desktop: button + in-flow panel. Phone: native select pill. */
.mv-root .cr-csw { margin: 0 0 6px; }
.mv-root .cr-csw-btn { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'k c' 'n c'; align-items: center; column-gap: 8px; width: 100%; text-align: left; font: inherit; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius-sm, 8px); background: transparent; color: var(--text-1); cursor: pointer; }
.mv-root .cr-csw-btn:hover, .mv-root .cr-csw.open .cr-csw-btn { background: var(--surface-2); border-color: var(--border); }
.mv-root .cr-csw-k { grid-area: k; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.mv-root .cr-csw-n { grid-area: n; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-root .cr-csw-chev { grid-area: c; color: var(--text-3); transition: transform .15s; }
.mv-root .cr-csw.open .cr-csw-chev { transform: rotate(180deg); }
.mv-root .cr-csw-panel { margin: 6px 0 4px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); background: var(--surface); box-shadow: var(--shadow-card); }
.mv-root .cr-csw-i { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 8px 10px; border-radius: 6px; font-size: 14px; color: var(--text-2); text-decoration: none; }
.mv-root .cr-csw-i span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-root .cr-csw-i:hover { background: var(--surface-2); color: var(--text-1); }
.mv-root .cr-csw-i.on { color: var(--text-1); font-weight: 600; }
.mv-root .cr-csw-new { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 6px 6px; color: var(--accent); font-weight: 600; }
.mv-root .cr-csw-sel { display: none; }
@media (max-width: 860px) {
	.mv-root .cr-csw { display: none; }
	.mv-root .cr-csw-sel { display: inline-flex; flex: none; min-height: 40px; max-width: 200px; padding: 0 30px 0 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; color: var(--text-1); font: inherit; font-size: 14px; font-weight: 600; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; }
}
.mv-root .cr-tiles4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .mv-root .cr-tiles4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .mv-root .cr-tiles4 { grid-template-columns: 1fr; } }
/* Rules card on the teacher School board (school_test.php, 2026-09-21). */
.mv-root .cr-rules { list-style: none; margin: 0; padding: 6px 18px 10px; }
.mv-root .cr-rules li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; font-size: 14px; line-height: 1.5; color: var(--text-2); border-top: 1px solid var(--border); }
.mv-root .cr-rules li:first-child { border-top: 0; }
.mv-root .cr-rules li b { color: var(--text-1); font-weight: 600; }
.mv-root .cr-rules-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft, var(--surface-2)); color: var(--accent); margin-top: -3px; }
.mv-root .cr-tiles5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mv-root .cr-tile3 .v .cr-tile-of { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--text-3); }
@media (max-width: 1180px) { .mv-root .cr-tiles5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .mv-root .cr-tiles5 { grid-template-columns: 1fr; } }
/* Release-day buttons on Assign (multi-day release, 2026-09-22): all 7 stay on one row down to 320px. */
.mv-root .cr-ar-seg { flex-shrink: 1; min-width: 0; max-width: 100%; } .mv-root .cr-ar-seg .cr-seg-b { padding: 7px 10px; }
@media (max-width: 480px) { .mv-root .cr-ar-seg { gap: 0; } .mv-root .cr-ar-seg .cr-seg-b { padding: 7px 7px; font-size: 12.5px; } }
/* Recite button on each My progress card (any given verse is recitable, 2026-09-22). Full strength even on a dimmed "not started" card. */
.mv-root .mp-status .mp-recite { margin-left: auto; min-height: 40px; padding: 8px 16px; font-size: 13.5px; text-decoration: none; } .mv-root .mp-new .mp-status .mp-recite { opacity: 1; }
/* Recite check header on a phone: wrap instead of overflowing (QA 2026-09-22, F21). */
@media (max-width: 560px) { .mv-root .mc-top { flex-wrap: wrap; row-gap: 10px; padding: 14px 16px; } .mv-root .mc-top .cm-sp { display: none; } .mv-root .mc-top .mc-title { flex: 1 1 0; min-width: 0; } .mv-root .mc-eph { order: 9; flex: 1 1 100%; justify-content: center; } }
/* Teacher school switcher chips wrap with long names (QA E09). */
.mv-root .cr-rhead-r { min-width: 0; max-width: 100%; } .mv-root .cr-rhead-r .cr-chip { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
/* Archived class roster: read-only, no add / rename / remove / release controls (QA 2026-09-22, A30b). The server refuses them anyway. */
.mv-root .cr-closed .js-seat-add-open, .mv-root .cr-closed .js-add-open-hd, .mv-root .cr-closed .cr-row-acts, .mv-root .cr-closed .js-seat-release { display: none !important; }

/* Student board with the practice count column off: two tiles, no gap (QA2 T1-23). */
@media (min-width: 901px) { .mv-root .cr-tiles3.cr-tiles2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Class Mode top bar on phones and tablets: wrap instead of clipping buttons off-screen (QA2 T8-16). */
.mv-root .cm-icon { flex-shrink: 0; }
@media (max-width: 900px) { .mv-root .cm-top { flex-wrap: wrap; row-gap: 10px; gap: 8px; padding: 12px 16px; } .mv-root .cm-top .cm-sp { display: none; } .mv-root .cm-top .cm-class { flex: 1 1 0; min-width: 0; } .mv-root .cm-top .cm-btn { min-height: 38px; padding: 8px 12px; font-size: 13px; } }
/* Join page seat tiles: one column on phones, and a long name wraps inside its tile (QA2 T8-21). */
.mv-root .cr-join .cs-tile .nm { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .mv-root .cr-join .cs-tiles.c2 { grid-template-columns: minmax(0, 1fr); } }

/* ---- QA2 wave 2/3 visual lows (2026-09-23) ---- */
/* T8-08 / T8-10 / T8-36: a long seat name wraps inside the roster and progress tables instead of running past the edge. */
.mv-root .cr-rtbl .cr-seat-name b, .mv-root .cr-ptbl .cr-seat-name b { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 560px) { .mv-root .cr-rtbl .cr-seat-name, .mv-root .cr-ptbl .cr-seat-name { white-space: normal; } .mv-root .cr-ptbl .cr-seat-name b { max-width: 140px; } }
@media (min-width: 1001px) { .mv-root .cr-two { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
/* T8-23 / T8-36: door name tiles share the row evenly; a long name breaks inside its tile. Join tiles never widen their column. */
@media (min-width: 901px) { .mv-root .dr-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 900px) { .mv-root .dr-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mv-root .dr-tile { min-width: 0; } .mv-root .dr-tile .nm { overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
.mv-root .cr-join .cs-tile, .mv-root .cr-join .cs-tile > * { min-width: 0; }
/* T8-24: the single-class top bar truncates the class name at every width, and the child's name stays on one line. */
.mv-root .dr-top .sh-class { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mv-root .dr-top .sh-me { flex: none; white-space: nowrap; }
/* T8-25: "20%" on one line in the ring; "Romans 8:38-39" never breaks at the hyphen. */
.mv-root .mc-ring-n { display: flex; align-items: center; justify-content: center; }
.mv-root .mc-refpill .mc-refname { white-space: nowrap; }
/* T8-11: on a phone the Past challenges matchup takes its own line; the date, chip and Rematch wrap below it. */
@media (max-width: 560px) { .mv-root .cr-past-row > .cr-qref { flex: 1 1 100%; } }
/* T7-17 / T8-08: the Class closed note lines up with the page instead of touching the screen edge. */
.mv-root .cr-main > .cr-closed-note { max-width: 900px; margin: 0 auto; padding: 20px 22px 0; box-sizing: border-box; }
/* T7-17: a closed class's Assign page is read-only (the server already refuses every change). */
.mv-root .cr-closed .js-open-pick, .mv-root .cr-closed .js-unassign, .mv-root .cr-closed .js-remove, .mv-root .cr-closed .js-publish, .mv-root .cr-closed .js-ar-yn, .mv-root .cr-closed .js-ar-days, .mv-root .cr-closed .js-ar-save, .mv-root .cr-closed .js-ar-skip { display: none !important; }
/* T8-03: the empty-state square holds an icon. */
.mv-root .cr-empty-ic { display: flex; align-items: center; justify-content: center; color: var(--accent); }
/* T8-05: 44px tap targets on phones. */
@media (max-width: 560px) {
	.mv-root .cr-ico, .mv-root .cr-rtbl .cr-ico { width: 44px; height: 44px; }
	.mv-root .cr-btn-sm { min-height: 44px; }
	.mv-root .cr-seg-b { min-height: 44px; } .mv-root .cr-ar-seg { flex-wrap: wrap; }
	.mv-root .cr-link { display: inline-flex; align-items: center; min-height: 44px; }
	.mv-root .cr-tog::after { content: ''; position: absolute; inset: -9px -4px; }
	.mv-root .js-kn-chip { min-height: 44px; }
}
/* Desktop: break long seat names at spaces and hyphens, not mid-word (screenshot follow-up to 21). */
@media (min-width: 561px) { .mv-root .cr-rtbl .cr-seat-name b, .mv-root .cr-ptbl .cr-seat-name b { overflow-wrap: anywhere; min-width: 5em; } } /* wraps inside the card, but never squeezed to a few letters (QA2 w23 37 follow-up) */