:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f7fafb;
  --surface-strong: #eef6f7;
  --line: #dce6e8;
  --line-strong: #c5d2d5;
  --text: #10202b;
  --muted: #62727f;
  --faint: #8b99a4;
  --teal: #0876bd;
  --teal-dark: #04568d;
  --teal-soft: #e5f4ff;
  --brand-yellow: #ffec00;
  --brand-yellow-soft: #fff8ad;
  --brand-red: #e91f3d;
  --blue: #1f76b9;
  --green: #15803d;
  --green-soft: #e7f7ec;
  --amber: #b96a00;
  --amber-soft: #fff5dd;
  --red: #cf2f3a;
  --red-soft: #fff0f1;
  --shadow: 0 16px 38px rgba(15, 40, 48, 0.08);
  --radius: 8px;
  --sidebar: 248px;
  --right: 338px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Granular quiz-library access */
.library-access-dialog {
  gap: 18px;
}

.library-access-form,
.access-grant-section {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel, #fff) 96%, var(--teal) 4%);
}

.access-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.access-resource-field {
  grid-column: 1 / -1;
}

.access-resource-field[hidden] {
  display: none !important;
}

.access-rights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.access-rights legend {
  margin-bottom: 8px;
  font-size: .78rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.access-rights > label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel, #fff);
  cursor: pointer;
}

.access-rights > label:has(input:checked) {
  border-color: color-mix(in srgb, var(--teal) 60%, var(--line));
  background: color-mix(in srgb, var(--teal) 9%, var(--panel, #fff));
}

.access-rights input {
  margin-top: 4px;
}

.access-rights label > span {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 7px;
  min-width: 0;
}

.access-rights svg {
  grid-row: 1 / 3;
  width: 18px;
  height: 18px;
  color: var(--teal);
}

.access-rights small,
.access-grant-row small,
.access-section-head p {
  color: var(--muted);
}

.access-form-actions,
.access-section-head,
.access-grant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.access-section-head h3,
.access-section-head p {
  margin: 0;
}

.access-grant-list {
  display: grid;
  gap: 8px;
}

.access-grant-row {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel, #fff);
}

.access-grant-row > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.library-access-chip {
  border-color: color-mix(in srgb, var(--teal) 45%, var(--line)) !important;
  background: color-mix(in srgb, var(--teal) 10%, var(--panel, #fff)) !important;
  color: var(--teal) !important;
}

@media (max-width: 700px) {
  .access-form-grid,
  .access-rights {
    grid-template-columns: 1fr;
  }

  .access-grant-row,
  .access-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .access-grant-row .row-actions {
    width: 100%;
  }

  .access-grant-row .row-actions > button {
    flex: 1 1 0;
  }
}

.writing-structure-field {
  border: 1px solid var(--line, #d7e1e5);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface-soft, #f7fafb);
}
.writing-structure-field > summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; }
.writing-structure-field > summary small { color: var(--muted, #63747c); font-weight: 500; }
.writing-structure-field[open] > summary { margin-bottom: 12px; }
.writing-task-group + .writing-task-group,
.writing-response-group + .writing-response-group { border-top: 1px solid var(--line, #d7e1e5); margin-top: 20px; padding-top: 20px; }
.writing-choice-list { border: 0; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.writing-choice-list legend { font-weight: 800; margin-bottom: 8px; }
.writing-choice { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 12px; border: 1px solid var(--line, #d7e1e5); border-radius: 10px; cursor: pointer; }
.writing-choice.selected { border-color: var(--teal, #07869a); background: color-mix(in srgb, var(--teal, #07869a) 8%, white); }
.writing-choice span { display: grid; gap: 3px; }
.writing-choice small { color: var(--muted, #63747c); line-height: 1.4; }
.writing-response-group { display: grid; gap: 10px; }
.writing-response-group > label { display: flex; justify-content: space-between; gap: 12px; }
.writing-response-group > label small { color: var(--muted, #63747c); }
.writing-response-group .writing-answer { min-height: 260px; }

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  letter-spacing: 0;
  font-size: 15px;
  line-height: 1.55;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  min-height: 38px;
  padding: 0 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 650;
}

button {
  transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, transform 0.1s ease;
}

button:hover {
  border-color: #aebdc2;
  background: #fbfdfd;
  box-shadow: 0 3px 10px rgba(15, 40, 48, 0.08);
}

button:active {
  transform: scale(0.97);
}

.danger-button {
  color: var(--red);
  border-color: #f0c7ca;
}

.danger-button:hover {
  background: var(--red-soft);
  border-color: var(--red);
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--teal);
  width: 19px;
  height: 19px;
  min-height: 0;
  margin: 0;
  cursor: pointer;
  flex: 0 0 auto;
}

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

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(8, 127, 130, 0.18);
  outline-offset: 2px;
}

.primary {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.primary:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
}

.ghost {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.danger {
  color: var(--red);
  border-color: #f1c4c8;
  background: #fff;
}

.icon-button {
  width: 38px;
  padding: 0;
}

.boot {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--muted);
}

.boot strong {
  display: block;
  color: var(--text);
  font-size: 18px;
  margin-bottom: 2px;
}

.boot-error {
  flex-direction: column;
  padding: max(24px, env(safe-area-inset-top, 0px)) 20px max(24px, env(safe-area-inset-bottom, 0px));
  text-align: center;
}

.boot-error > div {
  width: min(100%, 430px);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 36px rgba(15, 40, 48, 0.12);
}

.boot-error span {
  display: block;
}

.boot-error button {
  min-width: 140px;
  min-height: 44px;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--teal) 0 62%, var(--brand-yellow) 62% 100%);
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 107, 110, 0.24);
  position: relative;
}

.brand-mark::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--brand-yellow);
  border: 2px solid #fff;
  position: absolute;
  right: -3px;
  bottom: -3px;
}

.brand-logo {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  object-fit: contain;
  background: var(--brand-yellow);
  box-shadow: 0 0 0 1px rgba(4, 86, 141, 0.16), 0 4px 12px rgba(4, 86, 141, 0.12);
  flex: 0 0 auto;
}

.auth-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(520px, 1.3fr);
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 54%, #f4f9fa 54%, #f4f9fa 100%);
}

.auth-copy {
  padding: 44px 54px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.auth-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 360px;
  height: 360px;
  left: -150px;
  bottom: -190px;
  border-radius: 50%;
  background: rgba(255, 236, 0, 0.22);
}

.auth-welcome {
  margin: 56px 0 44px;
}

.auth-copy .auth-welcome h1 {
  font-size: clamp(42px, 5.6vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  margin: 18px 0 22px;
  max-width: 760px;
}

.auth-copy p {
  max-width: 610px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

.auth-kicker,
.auth-panel-kicker,
.auth-community-label {
  display: inline-flex;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: none;
}

.auth-kicker {
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--brand-yellow-soft);
  color: #665d00;
}

.auth-community {
  max-width: 720px;
}

.auth-community-mobile {
  display: none;
}

.auth-community-label {
  margin-bottom: 10px;
}

.auth-social-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.auth-social-links a {
  min-width: 0;
  min-height: 82px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(15, 40, 48, 0.05);
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.auth-social-links a:hover {
  transform: translateY(-2px);
  border-color: var(--teal);
  box-shadow: 0 12px 28px rgba(15, 40, 48, 0.1);
}

.auth-social-links a:focus-visible {
  outline: 3px solid rgba(8, 118, 189, 0.22);
  outline-offset: 3px;
}

.auth-social-links a > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.auth-social-links strong,
.auth-social-links small {
  overflow-wrap: anywhere;
}

.auth-social-links strong {
  font-size: 13px;
}

.auth-social-links small {
  color: var(--muted);
  font-size: 11px;
}

.auth-social-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  font-weight: 900;
  font-size: 20px;
}

.auth-social-mark.facebook { background: #1877f2; }

.auth-panel {
  align-self: center;
  justify-self: center;
  width: min(520px, calc(100% - 48px));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 26px;
}

.auth-panel-kicker {
  margin-bottom: 10px;
}

.auth-panel h2,
.role-card h2 {
  margin: 0 0 10px;
  font-size: 22px;
}

.auth-panel p,
.role-card p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 18px;
}

.google-slot {
  min-height: 42px;
  display: flex;
  align-items: center;
}

.google-slot button {
  width: 100%;
}

.divider {
  height: 1px;
  background: var(--line);
  margin: 22px 0;
}

.demo-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.auth-feature-list {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

.auth-feature-list li {
  display: flex;
  gap: 10px;
  color: var(--muted);
  line-height: 1.5;
}

.role-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--surface);
  padding: 24px;
}

.role-card {
  width: min(820px, 100%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}

.student-name-card {
  width: min(580px, 100%);
}

.student-name-card form {
  display: grid;
  gap: 16px;
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.role-choice {
  display: block;
  text-align: left;
  min-height: 150px;
  padding: 20px;
}

.role-choice strong {
  display: block;
  font-size: 18px;
  margin-bottom: 8px;
}

.role-choice span {
  color: var(--muted);
  line-height: 1.45;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  grid-template-rows: 68px 1fr;
}

.topbar {
  grid-column: 1 / -1;
  height: 68px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 0 22px;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 30;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 18px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-chip {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-strong);
  display: inline-grid;
  place-items: center;
  color: var(--teal);
  font-weight: 800;
  font-size: 12px;
}

.sidebar {
  grid-row: 2;
  border-right: 1px solid var(--line);
  background: #fbfdfd;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-button {
  width: 100%;
  justify-content: flex-start;
  border-color: transparent;
  background: transparent;
  color: var(--text);
  font-weight: 600;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.panel .list {
  margin: 14px 18px;
}

.panel .empty {
  margin: 14px 18px;
}

.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.list-row .muted {
  font-size: 12.5px;
}

.row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.library-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 14px;
}

.library-filter-bar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}

.library-filter-bar select {
  min-width: 180px;
  min-height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  padding: 0 10px;
}

.library-sort-bar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.library-sort-bar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}

.library-sort-bar select {
  min-width: 170px;
  min-height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  padding: 0 10px;
}

.sort-dir-toggle {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}

.sort-dir-toggle button {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.sort-dir-toggle button + button {
  border-left: 1px solid var(--line-strong);
}

.sort-dir-toggle button.active {
  background: var(--teal);
  color: #fff;
}

.library-group + .library-group {
  margin-top: 10px;
}

.library-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 6px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--teal-dark, #0f6b6b);
  text-transform: uppercase;
}

.student-writing-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfdfd;
}

.student-writing-group .list-row {
  background: #fff;
}

.student-writing-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.student-writing-head strong {
  font-size: 14.5px;
}

.student-writing-head .muted {
  flex: 1;
  font-size: 12.5px;
}

.student-writing-empty {
  font-size: 12.5px;
  padding: 2px 2px 4px;
}

.writing-task-thumb {
  display: block;
  max-width: 220px;
  max-height: 130px;
  margin-top: 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  object-fit: cover;
}

.paste-zone {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--muted);
  background: #fbfdfd;
  margin-bottom: 6px;
}

.writing-image-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.writing-image-preview img {
  max-width: 100%;
  max-height: 180px;
  border-radius: 8px;
  border: 1px solid var(--line);
}

a.nav-button {
  border: 1px solid transparent;
  border-radius: var(--radius);
  min-height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.nav-button.active {
  background: var(--teal-soft);
  color: var(--teal);
  border-color: transparent;
  box-shadow: inset 3px 0 0 var(--teal);
}

.sidebar-spacer {
  flex: 1;
}

.main {
  grid-row: 2;
  min-width: 0;
  background: #fff;
}

.workspace {
  padding: 28px;
  max-width: 1480px;
  margin: 0 auto;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.page-head h1 {
  margin: 0 0 6px;
  font-size: 29px;
  line-height: 1.15;
}

.page-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.head-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--right);
  gap: 24px;
  align-items: start;
}

.dashboard-grid.dashboard-grid-wide {
  grid-template-columns: minmax(0, 1fr);
}

.stack {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  min-width: 0;
}

.panel.soft {
  background: var(--surface);
}

.panel-head {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.panel-head h2,
.panel-head h3 {
  margin: 0;
  font-size: 17px;
}

.panel-body {
  padding: 18px;
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-width: 0;
}

.metric {
  min-height: 88px;
  min-width: 0;
  padding: 18px;
  border-right: 1px solid var(--line);
  display: flex;
  gap: 12px;
  align-items: center;
}

.metric:last-child {
  border-right: 0;
}

.metric-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--teal-soft);
  color: var(--teal);
  font-weight: 800;
}

.metric strong {
  display: block;
  font-size: 24px;
  margin-bottom: 3px;
  white-space: normal;
}

.metric span,
.muted {
  color: var(--muted);
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* Soft shadows appear at whichever edge still has columns hidden, so a table
     that is wider than the screen shows that it can be swiped sideways. */
  background:
    linear-gradient(to right, #fff 34%, rgba(255, 255, 255, 0)) left center / 30px 100% no-repeat local,
    linear-gradient(to left, #fff 34%, rgba(255, 255, 255, 0)) right center / 30px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(15, 40, 48, .14), rgba(15, 40, 48, 0)) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(15, 40, 48, .14), rgba(15, 40, 48, 0)) right center / 12px 100% no-repeat scroll;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th,
td {
  text-align: left;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  background: #fbfdfd;
}

.th-filter {
  display: grid;
  gap: 5px;
  min-width: 128px;
}

.th-filter span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.th-filter select {
  min-height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  padding: 0 8px;
  font-size: 13px;
  font-weight: 650;
}

td a,
.linkish {
  color: var(--teal);
  font-weight: 700;
  text-decoration: none;
}

.status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  background: var(--surface-strong);
  color: var(--muted);
}

.status.good {
  background: var(--green-soft);
  color: var(--green);
}

.status.reviewed {
  background: #e5f3f8;
  color: #17607b;
}

.reviewed-text {
  color: #17607b;
}

.status.warn {
  background: var(--amber-soft);
  color: var(--amber);
}

.status.bad {
  background: var(--red-soft);
  color: var(--red);
}

.skill-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 190px;
  white-space: normal;
}

.class-assignment-panel-heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.class-assignment-panel-heading h2 {
  margin: 0;
}

.class-assignment-panel-heading p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.assignment-skill-group {
  border-top: 1px solid var(--line);
}

.assignment-skill-head {
  padding: 10px 18px;
  color: var(--teal);
  font-size: 13px;
  font-weight: 800;
  background: #fff;
}

.assignment-analytics-row > td {
  background: #fbfdfd;
  white-space: normal;
}

.assignment-analytics {
  display: grid;
  gap: 14px;
  padding: 4px 0;
}

.metric-row.compact {
  padding: 0;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
}

.analytics-chart,
.student-analytics-grid {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.student-analytics-grid {
  padding: 18px;
  grid-template-columns: 150px minmax(0, 1fr);
}

.student-analytics-grid > .metric-row.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.student-analytics-grid > .student-score-bars {
  grid-column: 1 / -1;
}

.donut {
  width: 132px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  justify-self: center;
  background:
    radial-gradient(circle at center, #fff 0 57%, transparent 58%),
    conic-gradient(var(--teal) var(--value, 0%), #e5ecee 0);
  box-shadow: inset 0 0 0 1px var(--line);
}

.donut strong {
  font-size: 24px;
  line-height: 1;
}

.donut span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.student-score-bars {
  display: grid;
  gap: 9px;
}

.score-bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 210px) minmax(120px, 1fr) 86px;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}

.score-bar-row > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.score-track {
  height: 10px;
  border-radius: 999px;
  background: #e5ecee;
  overflow: hidden;
}

.score-track span {
  display: block;
  width: var(--value, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--brand-yellow));
}

.skill-list {
  display: grid;
  gap: 22px;
  padding: 18px;
}

.skill-item {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: center;
}

.bar {
  height: 8px;
  background: #e5ecee;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}

.bar span {
  display: block;
  height: 100%;
  width: var(--value, 0%);
  background: var(--teal);
  border-radius: inherit;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 14px;
}

.field {
  display: grid;
  gap: 7px;
}

.field label,
.field-label {
  color: #3d4f5c;
  font-size: 13.5px;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  padding: 10px 12px;
  font-size: 15px;
}

textarea {
  resize: vertical;
  line-height: 1.5;
}

.quiz-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 312px;
  gap: 14px;
  min-width: 0;
  align-items: start;
}

.builder-rail {
  position: sticky;
  top: 14px;
}

.add-question-button {
  width: 100%;
  padding: 14px;
  border-style: dashed;
}

.import-details > summary {
  list-style: none;
  padding: 14px 16px;
}

.import-details > summary::-webkit-details-marker {
  display: none;
}

.import-details[open] > summary {
  border-bottom: 1px solid var(--line);
}

.timer-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  background: #fff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.timer-chip {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* Amber at 5 minutes, red at 1 — see applyTimerUrgency() in app.js. */
.timer-chip.warn {
  border-color: #e5a54b;
  background: #fdf6ea;
  color: #8a5a12;
}

.timer-chip.danger {
  border-color: #c5221f;
  background: #fdecea;
  color: #b3261e;
  font-weight: 700;
  animation: timer-pulse 1s ease-in-out infinite;
}

@keyframes timer-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(197 34 31 / 34%); }
  50% { box-shadow: 0 0 0 6px rgb(197 34 31 / 0%); }
}

@media (prefers-reduced-motion: reduce) {
  .timer-chip.danger { animation: none; }
}

.passage-panel {
  margin: 0 0 14px;
  max-height: 320px;
  overflow-y: auto;
}

.import-steps {
  display: grid;
  gap: 14px;
}

.big-button {
  min-height: 46px;
  padding: 0 22px;
  font-size: 15.5px;
}

.class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.class-card {
  display: grid;
  gap: 14px;
  text-align: left;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 20px;
  min-height: 160px;
  box-shadow: 0 2px 8px rgba(15, 40, 48, 0.05);
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.class-card:hover {
  border-color: #98d8d6;
  box-shadow: 0 10px 24px rgba(8, 127, 130, 0.14);
  transform: translateY(-2px);
}

.class-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.class-card-head h2 {
  margin: 0;
  font-size: 19px;
}

.class-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.class-card-stats div {
  display: grid;
}

.class-card-stats strong {
  font-size: 20px;
}

.class-card-stats span {
  color: var(--muted);
  font-size: 13px;
}

.class-card-open {
  color: var(--teal-dark);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.empty-hero {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
  padding: 40px 20px;
}

.empty-hero .metric-icon {
  border-radius: 16px;
}

.empty-hero p {
  max-width: 440px;
  margin: 0;
}

.builder-section {
  border-left: 4px solid var(--teal);
  box-shadow: 0 4px 14px rgba(15, 40, 48, 0.06);
  background: var(--surface-strong);
}

.builder-section > .panel-head {
  background: var(--teal-soft);
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #bfe6e4;
}

.builder-section .question-card {
  border-color: var(--line-strong);
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.question-card,
.class-card,
.student-section {
  animation: cardIn 0.24s ease both;
}

.student-section {
  margin-bottom: 26px;
  border: 1px solid #cde8e6;
  border-left: 5px solid var(--teal);
  border-radius: 14px;
  background: var(--surface-strong);
  padding: 18px;
}

.student-section .question-card {
  border-color: var(--line-strong);
}

.student-section-plain {
  border: 0;
  background: transparent;
  padding: 0;
}

.student-section-head h2 {
  font-size: 20px;
  margin: 0 0 12px;
  display: inline-block;
  background: var(--teal);
  color: #fff;
  border-radius: 10px;
  padding: 6px 16px;
  border-bottom: 0;
}

.section-title-input {
  border: 0;
  background: transparent;
  font-size: 17px;
  font-weight: 700;
  padding: 4px 0;
  min-width: 0;
  flex: 1;
}

.section-title-input:focus {
  outline: none;
  border-bottom: 2px solid var(--teal);
}

.format-toolbar {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}

.format-toolbar button {
  padding: 2px 10px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  min-width: 32px;
}

.format-toolbar button:hover {
  background: #f3fbfb;
  border-color: #98d8d6;
}

.student-section {
  margin-bottom: 22px;
}

.student-section-head h2 {
  margin: 0 0 10px;
}

.student-section-head {
  margin-bottom: 14px;
}

.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-size: 14px;
  margin-right: 8px;
}

.section-list {
  display: grid;
  gap: 8px;
}

.section-item {
  width: 100%;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: #fff;
  text-align: left;
}

.section-item.active {
  border-color: #98d8d6;
  background: #f3fbfb;
}

.segmented {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  background: #fff;
}

.segmented button {
  border: 0;
  border-radius: 0;
  white-space: nowrap;
}

.segmented button.active {
  background: var(--teal);
  color: #fff;
}

.import-box {
  border: 1px solid #a9dddb;
  background: #f4fcfc;
  border-radius: var(--radius);
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(230px, 0.8fr);
  gap: 14px;
}

.prompt-snippet {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  color: var(--muted);
  line-height: 1.5;
  font-size: 13px;
}

.question-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 18px;
  display: grid;
  gap: 14px;
  min-width: 0;
  box-shadow: 0 2px 8px rgba(15, 40, 48, 0.05);
}

.q-badge {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 10px;
  background: var(--teal-soft);
  color: var(--teal-dark);
  font-weight: 800;
  font-size: 15px;
}

.question-prompt {
  font-size: 16.5px;
  line-height: 1.6;
  margin: 0;
}

.rich-input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.rich-input-tall {
  min-height: 120px;
}

.rich-input:empty::before {
  content: attr(data-placeholder);
  color: var(--faint);
  pointer-events: none;
}

.rich-input mark,
.question-prompt mark,
.notice mark,
.passage-panel mark {
  background: #fff3a3;
  padding: 0 2px;
  border-radius: 3px;
}

.pair-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.pair-arrow {
  color: var(--faint);
  font-weight: 700;
}

.match-grid {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.matching-task-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
  gap: clamp(22px, 4vw, 56px);
  align-items: start;
  min-width: 0;
}

/* A gapped article already owns its response positions in the reading pane. Its
   question pane therefore needs only one efficient answer-bank column. */
.passage-matching-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.match-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.55fr) minmax(190px, 1fr);
  gap: 16px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 4px;
  background: transparent;
  transition: border-color 0.12s ease, background 0.12s ease;
}

/* The row label was only a copy of the question prompt, so it is not printed. The
   numbered answer box then takes the whole row instead of leaving an empty column.
   Two classes deep on purpose: this must also beat the narrow-pane rules below. */
.match-row.match-row-unlabelled {
  grid-template-columns: minmax(0, 1fr);
}

.match-row.slot-ready {
  cursor: pointer;
}

.match-row.slot-ready:focus-within {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.match-row.slot-hover {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.match-item {
  font-size: 15.5px;
  line-height: 1.45;
  padding-left: 4px;
}

.match-bank-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.match-bank-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--text);
}

.match-bank-heading strong {
  font-size: 14px;
}

.match-bank-heading span {
  color: var(--muted);
  font-size: 12.5px;
  text-align: right;
}

.match-bank {
  display: grid;
  gap: 9px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  margin: 0;
  min-height: 54px;
  align-content: start;
}

/* The builder's live student preview occupies only half of the editing card.
   Keep that preview legible while the full student attempt uses two columns. */
.builder-student-preview .matching-task-layout {
  grid-template-columns: 1fr;
  gap: 16px;
}

.builder-student-preview .match-bank-panel {
  order: 2;
}

.builder-student-preview .match-row {
  grid-template-columns: minmax(64px, 0.45fr) minmax(0, 1.55fr);
  gap: 8px;
}

.builder-student-preview .match-bank {
  grid-template-columns: 1fr;
}

.bank-chip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--text);
  border-radius: 9px;
  padding: 8px 12px;
  min-height: 42px;
  font-size: 14.5px;
  font-weight: 500;
  cursor: grab;
  touch-action: none;
  user-select: none;
  text-align: left;
}

.bank-chip:hover {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.bank-chip.chip-in-use,
.bank-chip.chip-in-use:disabled {
  border-color: #8cb8ca;
  background: #edf7fb;
  color: var(--text);
  cursor: default;
  opacity: 1;
}

.chip-use-status {
  display: block;
  margin-top: 3px;
  color: #376d84;
  font-size: 11px;
  font-weight: 750;
}

.chip-selected {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.chip-placed {
  background: #fff;
  border-color: var(--line-strong);
  width: auto;
  min-height: 32px;
  padding: 5px 10px;
}

.chip-clear {
  border: 0;
  background: transparent;
  min-height: 0;
  padding: 0 2px;
  font-size: 16px;
  color: var(--muted);
  cursor: pointer;
}

.chip-clear:hover {
  color: var(--red);
  background: transparent;
  border: 0;
}

.match-slot {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 44px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
}

.match-question-number {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 48px;
  padding: 0 10px;
  border-right: 1px solid var(--line);
  background: var(--teal-soft);
  color: var(--teal-dark);
  font-weight: 850;
  font-size: 14px;
}

.match-slot-content {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  padding: 5px 8px;
}

.slot-hint {
  color: var(--faint);
  padding: 5px 10px;
  font-size: 13.5px;
}

.instruction-note {
  background: var(--amber-soft);
  border: 1px solid #ecd9a8;
  border-left: 4px solid var(--amber);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: #6b4c07;
  font-size: 15px;
  line-height: 1.55;
}

/* Prominent, high-contrast section instructions students read before each part.
   White background so ==highlights== inside the text stand out clearly. */
.section-instructions {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--teal);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 16px;
  color: var(--text);
  font-size: calc(var(--reading-size, 16px) * 1.18);
  line-height: 1.55;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(15, 40, 48, 0.06);
}

.section-instructions mark {
  padding: 0 3px;
  border-radius: 3px;
}

.attempt-shell.theme-sepia .section-instructions {
  background: #fffaf0;
  color: #433422;
  border-color: #e6d8bd;
}

.attempt-shell.theme-dark .section-instructions {
  background: #142832;
  color: #eaf1f5;
  border-color: #244653;
  box-shadow: none;
}

.attempt-shell.theme-contrast .section-instructions {
  background: #fff;
  color: #000;
  border-color: #000;
  border-left-color: #000;
}

.chip-letter {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--teal);
  color: #fff;
  font-weight: 800;
  font-size: 12.5px;
  margin-right: 2px;
}

.chip-selected .chip-letter {
  background: #fff;
  color: var(--teal-dark);
}

.gap-inline-text {
  min-width: 0;
  max-width: 100%;
  font-size: 16.5px;
  line-height: 2.2;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: #fff;
}

.quiz-table-scroll {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 12px 0;
  overflow-x: auto;
  border: 1px solid #b9cbd4;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgb(26 66 83 / 7%);
  overscroll-behavior-inline: contain;
}

.quiz-table-scroll:focus-visible {
  outline: 3px solid rgb(22 133 189 / 42%);
  outline-offset: 2px;
}

.quiz-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  color: inherit;
  font-size: .94em;
  line-height: 1.5;
  table-layout: auto;
}

.quiz-table th,
.quiz-table td {
  min-width: 130px;
  padding: 12px 13px;
  border-right: 1px solid #b9cbd4;
  border-bottom: 1px solid #b9cbd4;
  text-align: left;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}

.quiz-table th {
  background: #eaf3f7;
  color: #234756;
  font-size: .9em;
  font-weight: 850;
  text-align: center;
}

.quiz-table th.is-right,
.quiz-table td.is-right {
  text-align: right;
}

.quiz-table th.is-center,
.quiz-table td.is-center {
  text-align: center;
}

.quiz-table tr:last-child td {
  border-bottom: 0;
}

.quiz-table th:last-child,
.quiz-table td:last-child {
  border-right: 0;
}

.quiz-table .gap-slot {
  margin: 2px 1px;
  vertical-align: middle;
}

.attempt-shell.theme-dark .quiz-table-scroll,
.attempt-shell.theme-yellow .quiz-table-scroll {
  border-color: #48616d;
  background: #132832;
  box-shadow: none;
}

.attempt-shell.theme-dark .quiz-table th,
.attempt-shell.theme-dark .quiz-table td,
.attempt-shell.theme-yellow .quiz-table th,
.attempt-shell.theme-yellow .quiz-table td {
  border-color: #48616d;
}

.attempt-shell.theme-dark .quiz-table th,
.attempt-shell.theme-yellow .quiz-table th {
  background: #203b47;
  color: #edf7fa;
}

.attempt-shell.theme-contrast .quiz-table-scroll,
.attempt-shell.theme-contrast .quiz-table th,
.attempt-shell.theme-contrast .quiz-table td {
  border-color: #000;
}

.attempt-shell.theme-contrast .quiz-table th {
  background: #fff;
  color: #000;
}

.gap-inline {
  display: inline-block;
  width: auto;
  min-width: 70px;
  max-width: 240px;
  min-height: 34px;
  padding: 3px 10px;
  margin: 0 4px;
  border: 0;
  border-bottom: 2px solid var(--teal);
  border-radius: 6px 6px 0 0;
  background: var(--teal-soft);
  font-size: 15.5px;
  text-align: center;
  vertical-align: baseline;
}

.gap-inline:focus-visible {
  outline: 2px solid rgba(8, 127, 130, 0.35);
  outline-offset: 1px;
}

.gap-inline::placeholder {
  color: var(--faint);
  font-size: 13px;
}

/* A numbered inline gap: [number] [input] (GIVEN WORD) kept together on one line. */
.gap-slot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  vertical-align: baseline;
  margin: 0 2px;
}

.gap-slot .gap-inline {
  margin: 0;
}

.gap-number {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 6px;
  background: var(--teal);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.gap-given {
  font-weight: 800;
  font-size: 0.82em;
  letter-spacing: 0.03em;
  color: var(--teal-dark);
}

.option-row .gap-given {
  margin-left: 4px;
}

.drag-handle {
  cursor: grab;
  touch-action: none;
  color: var(--faint);
}

.drag-handle:hover {
  color: var(--teal-dark);
}

.drop-above {
  box-shadow: 0 -4px 0 0 var(--teal) !important;
}

.drop-below {
  box-shadow: 0 4px 0 0 var(--teal) !important;
}

.section-drop {
  outline: 3px dashed var(--teal);
  outline-offset: -3px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 1200;
  max-width: min(560px, calc(100vw - 40px));
  background: #14343c;
  color: #fff;
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 15px;
  line-height: 1.5;
  box-shadow: 0 14px 34px rgba(15, 40, 48, 0.35);
  animation: toastIn 0.25s ease both;
}

.toast.good {
  background: var(--green);
}

.toast.bad {
  background: var(--red);
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.chip-ghost {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  border: 1px solid var(--teal);
  background: var(--teal-soft);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14.5px;
  box-shadow: 0 8px 20px rgba(8, 127, 130, 0.25);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.token-text {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 5px;
  line-height: 2;
  font-size: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface);
}

.token {
  border: 1px solid transparent;
  background: transparent;
  min-height: 0;
  padding: 1px 4px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
}

.token:hover:not(:disabled) {
  background: var(--teal-soft);
  border-color: #98d8d6;
}

.token {
  touch-action: none;
  user-select: none;
}

.token-marked {
  background: var(--amber-soft);
  border-color: #e5c37a;
  text-decoration: line-through;
  font-weight: 600;
}

/* "No mistakes here" affirmation for a correct sentence in an error-correction task. */
.ec-nomistakes-row {
  margin-top: 10px;
}

.ec-nomistakes {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.ec-nomistakes:hover {
  border-color: var(--teal);
  color: var(--teal-dark);
}

.ec-nomistakes.active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.token-text-muted .token:not(.token-marked) {
  opacity: 0.55;
}

.token-dragging {
  background: var(--teal-soft);
  border-color: var(--teal);
}

.correction-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.correction-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.correction-row .token-marked {
  cursor: default;
}

.question-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.option-grid {
  display: grid;
  gap: 8px;
}

.option-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 110px auto;
  gap: 8px;
  align-items: center;
}

.paragraph-choice-builder-row {
  grid-template-columns: 34px minmax(0, 1fr) minmax(180px, 0.55fr);
}

.paragraph-choice-text {
  line-height: 2.65;
}

.paragraph-choice-slot {
  margin: 0 4px;
}

.paragraph-choice-select {
  width: auto;
  max-width: min(320px, 72vw);
  min-height: 34px;
  padding: 3px 30px 3px 9px;
  border: 0;
  border-bottom: 2px solid var(--teal);
  border-radius: 6px 6px 0 0;
  background: var(--teal-soft);
  color: var(--text);
  font: inherit;
  vertical-align: baseline;
}

.paragraph-choice-select.gap-correct,
.paragraph-choice-select.gap-incorrect {
  border-bottom-width: 2px;
}

.toggle-list {
  display: grid;
  gap: 14px;
}

.toggle-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.toggle-row:last-child {
  border-bottom: 0;
}

.switch {
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: var(--teal);
  position: relative;
  flex: 0 0 auto;
  cursor: pointer;
  transition: background 0.15s ease;
}

.switch::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
}

.switch[data-enabled="false"] {
  background: var(--line-strong);
}

.switch[data-enabled="false"]::after {
  transform: translateX(-20px);
}

.media-preview {
  display: grid;
  gap: 8px;
}

.media-drop-zone {
  border: 1.5px dashed color-mix(in srgb, var(--teal) 42%, var(--line));
  border-radius: 12px;
  padding: 12px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

[data-media-drop-target].media-drop-active {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 9%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 16%, transparent);
}

.question-card.media-drop-active {
  outline: 2px dashed var(--teal);
  outline-offset: -5px;
}

.media-item {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 10px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.media-item img {
  max-width: 118px;
  max-height: 70px;
  border-radius: 6px;
  object-fit: cover;
}

.media-item-audio {
  display: block;
}

.media-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.media-item-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--text);
}

.media-item-audio audio {
  width: 100%;
  height: 40px;
  margin-bottom: 6px;
}

/* Audio cropper overlay */
.crop-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(9, 24, 30, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.crop-modal {
  background: #fff;
  border-radius: 16px;
  width: min(820px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(9, 24, 30, 0.4);
}

.crop-modal .panel-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.crop-body {
  padding: 18px;
  display: grid;
  gap: 14px;
}

.crop-status {
  padding: 30px 10px;
  text-align: center;
  color: var(--muted);
}

.crop-wave-wrap {
  position: relative;
  width: 100%;
  height: 120px;
  background: #f2fbfb;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  touch-action: none;
}

.crop-wave {
  display: block;
  width: 100%;
  height: 100%;
}

.crop-shade {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(9, 24, 30, 0.4);
  pointer-events: none;
}

.crop-shade-left { left: 0; }

.crop-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  margin-left: -7px;
  cursor: ew-resize;
  background: var(--teal);
  border-radius: 4px;
  box-shadow: 0 0 0 1px #fff;
  touch-action: none;
}

.crop-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 40px;
  background: #fff;
  transform: translate(-50%, -50%);
  border-radius: 2px;
}

.crop-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #d94a4a;
  pointer-events: none;
}

.crop-times {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 13.5px;
  color: var(--muted);
}

.crop-times strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.crop-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: -2px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.button-like {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.button-proxy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 650;
  font-size: 14px;
  background: #fff;
}

.student-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 340px;
  min-height: calc(100vh - 68px);
}

.student-rail,
.results-rail {
  border-right: 1px solid var(--line);
  background: #fbfdfd;
  padding: 16px;
}

.results-rail {
  border-right: 0;
  border-left: 1px solid var(--line);
  background: var(--surface);
}

.attempt-main {
  padding: 24px 28px;
  min-width: 0;
}

.progress-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.progress-line span {
  height: 5px;
  width: 34px;
  border-radius: 999px;
  background: #d7e1e4;
}

.progress-line span.done {
  background: var(--teal);
}

.audio-bar {
  height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: 44px 72px 1fr 54px 44px;
  gap: 12px;
  align-items: center;
  padding: 0 12px;
  background: #fbfdfd;
  margin: 14px 0;
}

.audio-track {
  height: 6px;
  background: #dfe7ea;
  border-radius: 999px;
}

.question-list {
  display: grid;
  gap: 12px;
}

.answer-choice {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.answer-choice:hover {
  border-color: #98d8d6;
  background: #fbfefe;
}

.answer-choice:has(input:checked) {
  border-color: var(--teal);
  background: var(--teal-soft);
  box-shadow: inset 0 0 0 1px var(--teal);
  font-weight: 600;
}

.answer-choice:has(input:disabled) {
  cursor: default;
}

.answer-choice input {
  width: 19px;
  min-height: 0;
}

.pill-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.notice {
  border: 1px solid #b6d0f4;
  background: #f3f7ff;
  color: #244e84;
  border-radius: var(--radius);
  padding: 12px;
  line-height: 1.45;
}

.notice.warn {
  border-color: #f1d199;
  background: var(--amber-soft);
  color: var(--amber);
}

.score-ring {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 8px solid #cfead5;
  border-top-color: var(--green);
  display: grid;
  place-items: center;
  color: var(--green);
  font-size: 22px;
  font-weight: 850;
  margin-left: auto;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 25, 32, 0.28);
  display: grid;
  place-items: center;
  z-index: 80;
  padding: 20px;
  overflow-y: auto;
}

.modal {
  width: min(620px, 100%);
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  /* Never taller than the screen — the body scrolls inside instead. */
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal.modal-wide {
  width: min(860px, 100%);
}

.modal > .panel-head {
  flex: 0 0 auto;
}

.modal form,
.modal .modal-body {
  padding: 18px;
  display: grid;
  gap: 14px;
  overflow-y: auto;
  min-height: 0;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.form-status {
  margin-top: 12px;
  border-radius: 10px;
  background: var(--teal-soft);
  color: var(--text);
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
}

.form-status.bad {
  background: var(--red-soft);
  color: var(--red);
}

.empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1180px) {
  .dashboard-grid,
  .quiz-builder,
  .student-shell {
    grid-template-columns: 1fr;
  }

  .student-rail,
  .results-rail {
    border: 0;
  }

  .metric-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .metric:nth-child(2) {
    border-right: 0;
  }
}

@media (max-width: 1100px) {
  .auth-social-links {
    grid-template-columns: 1fr;
    max-width: 460px;
  }

  .auth-social-links a:last-child {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .auth-screen,
  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-shell {
    display: block;
  }

  .auth-screen {
    background: #fff;
  }

  .auth-copy {
    min-height: auto;
    padding: 28px;
  }

  .auth-copy .auth-welcome h1 {
    margin-top: 14px;
    font-size: clamp(38px, 12vw, 56px);
  }

  .auth-welcome {
    margin: 44px 0 36px;
  }

  .auth-community {
    margin-bottom: 28px;
  }

  .auth-community-desktop {
    display: none;
  }

  .auth-community-mobile {
    display: block;
    width: calc(100% - 56px);
    margin: 0 auto 32px;
  }

  .auth-panel {
    width: calc(100% - 32px);
    margin: 0 auto 28px;
  }

  .sidebar {
    grid-row: auto;
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .nav-button {
    width: auto;
    white-space: nowrap;
  }

  .workspace {
    padding: 18px;
  }

  .topbar {
    position: static;
    height: auto;
    min-height: 68px;
    padding: 12px 18px;
    align-items: flex-start;
    gap: 10px;
  }

  .page-head,
  .question-head {
    align-items: stretch;
    flex-direction: column;
  }

  .question-head > button {
    flex: none;
  }

  .top-actions,
  .head-actions {
    justify-content: flex-start;
  }

  .metric-row,
  .form-grid,
  .role-grid,
  .import-box,
  .demo-actions {
    grid-template-columns: 1fr;
  }

  .metric {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .metric:last-child {
    border-bottom: 0;
  }

  .option-row {
    grid-template-columns: 1fr;
  }
}

/* ============ Resizable pictures ============ */

.resizable-media {
  resize: both;
  overflow: hidden;
  width: min(100%, 560px);
  max-width: 100%;
  min-width: 140px;
  min-height: 90px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  position: relative;
  display: block;
}

.resizable-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
}

.resizable-media::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 14px;
  height: 14px;
  border-right: 3px solid var(--line-strong);
  border-bottom: 3px solid var(--line-strong);
  border-radius: 0 0 4px 0;
  pointer-events: none;
}

.resizable-media.thumb {
  width: min(100%, 320px);
}

.media-hint {
  display: block;
  color: var(--faint);
  font-size: 12px;
  margin-top: 4px;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(8, 18, 24, 0.88);
  display: grid;
  place-items: center;
  padding: 24px;
  cursor: zoom-out;
}

.lightbox img {
  max-width: 96vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ============ Student landing ============ */

.student-landing {
  max-width: 860px;
  margin: 0 auto;
}

.student-landing .my-classes-panel {
  margin-bottom: 22px;
  border-width: 2px;
  border-color: #bfe6e4;
  box-shadow: 0 10px 30px rgba(8, 127, 130, 0.10);
}

/* "Ready to review" — the fast path to a marked paper, shown first on the
   landing so a returning student never has to hunt for their feedback. */
.review-ready-panel {
  margin-bottom: 22px;
  border-width: 2px;
  border-color: #b7e6c6;
  box-shadow: 0 10px 30px rgba(21, 128, 61, 0.10);
}

.review-ready-hint {
  margin: 0;
  padding: 0 18px;
}

.review-ready-list {
  display: grid;
  gap: 10px;
  padding: 14px 18px 18px;
}

.review-ready-item {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: #fbfefc;
}

.review-ready-item:hover {
  border-color: var(--green);
}

.review-ready-main {
  display: grid;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.review-ready-main strong {
  overflow-wrap: anywhere;
}

.review-ready-score {
  flex: none;
  font-size: 14px;
}

.review-ready-item > button {
  flex: none;
}

/* An owed "to do" row reuses the review-item shape but leans on the warm accent
   and gets a red edge when overdue. */
.owed-item {
  border-color: #e7d7bf;
}

.owed-item.is-overdue {
  border-color: var(--red);
  background: var(--red-soft);
}

.owed-title {
  font-weight: 700;
  color: var(--text) !important;
  padding: 0 !important;
  text-align: left;
  overflow-wrap: anywhere;
}

.owed-brief {
  margin-top: 6px;
}

.review-attempt-links {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 12px;
}

.review-attempt-links button.linkish {
  padding: 0;
  font-size: 12px;
}

.waiting-note {
  padding: 0 18px 14px;
  margin: 0;
}

/* Overview / class-detail metric strip. Same look as .metric-row but wraps to
   two-up on narrow screens instead of squashing four across. */
.overview-metric-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.class-chip-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 9px;
  background: var(--amber);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.class-lessons-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px 18px;
}

.class-lessons-row p {
  margin: 0;
}

.student-all-homework {
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}

.student-all-homework > summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 700;
  list-style: none;
}

.student-all-homework > summary::-webkit-details-marker {
  display: none;
}

.student-all-homework > summary::before {
  content: "▸ ";
  color: var(--muted);
}

.student-all-homework[open] > summary::before {
  content: "▾ ";
}

.review-more {
  padding: 12px 18px 4px;
}

@media (max-width: 620px) {
  .review-ready-item {
    flex-wrap: wrap;
  }
  .review-ready-item > button {
    flex: 1 1 100%;
  }
  .overview-metric-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.class-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  padding: 16px 18px;
}

.class-chip {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background: #fbfdfd;
  display: grid;
  gap: 4px;
}

.class-chip-button {
  width: 100%;
  min-height: 150px;
  color: var(--text);
  text-align: left;
  align-content: start;
  cursor: pointer;
}

.class-chip-button:hover {
  border-color: var(--teal);
  background: var(--teal-soft);
  transform: translateY(-1px);
}

.class-chip-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  margin-top: 10px;
  color: var(--teal);
  font-size: 13px;
  font-weight: 800;
}

.student-homework-class-group + .student-homework-class-group {
  border-top: 1px solid var(--line);
}

.student-homework-class-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: #fbfdfd;
}

.student-homework-class-head button {
  padding-left: 0;
}

.student-class-view {
  display: grid;
  gap: 18px;
}

.student-class-view .page-head,
.student-class-view .metric-row {
  margin-bottom: 0;
}

.join-inline {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding: 0 18px 18px;
  flex-wrap: wrap;
}

.join-inline .field {
  flex: 1;
  min-width: 200px;
}

/* ============ Matching: multi-answer slots ============ */

.slot-count-hint {
  color: var(--faint);
  font-size: 12px;
  font-weight: 700;
  align-self: center;
}

.pair-answers {
  display: grid;
  gap: 6px;
}

.pair-row-multi {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1.1fr) 120px auto;
  gap: 8px;
  align-items: start;
}

.pair-row-multi > .pair-arrow,
.pair-row-multi > .icon-button,
.pair-row-multi > select {
  margin-top: 6px;
}

/* ============ Per-item answer feedback ============ */

.gap-inline.gap-correct,
input.gap-correct {
  background: var(--green-soft) !important;
  border-color: var(--green) !important;
  color: var(--green);
  font-weight: 700;
}

.gap-inline.gap-incorrect,
input.gap-incorrect {
  background: var(--red-soft) !important;
  border-color: var(--red) !important;
  color: var(--red);
  text-decoration: line-through;
}

.gap-correction {
  display: inline-flex;
  align-items: center;
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid #b7e2c3;
  border-radius: 999px;
  padding: 2px 10px;
  margin: 0 4px;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}

.answer-choice.choice-correct {
  border-color: var(--green);
  background: var(--green-soft);
  box-shadow: inset 0 0 0 1px var(--green);
}

.answer-choice.choice-incorrect {
  border-color: var(--red);
  background: var(--red-soft);
  box-shadow: inset 0 0 0 1px var(--red);
}

.match-row.match-correct {
  border-color: var(--green);
  background: var(--green-soft);
}

.match-row.match-incorrect {
  border-color: var(--red);
  background: var(--red-soft);
}

.chip-feedback-correct {
  border-color: var(--green) !important;
  background: var(--green-soft) !important;
}

.chip-feedback-incorrect {
  border-color: var(--red) !important;
  background: var(--red-soft) !important;
  text-decoration: line-through;
}

.feedback-note {
  font-size: 13.5px;
  margin-top: 6px;
  color: var(--muted);
}

.feedback-note .good-text {
  color: var(--green);
  font-weight: 700;
}

.correction-status {
  font-weight: 800;
  font-size: 13px;
}

.correction-status.good-text { color: var(--green); }
.correction-status.bad-text { color: var(--red); }

/* ============ Student attempt: clean split layout ============ */

.attempt-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.attempt-header {
  position: sticky;
  top: 0;
  z-index: 40;
}

.attempt-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

/* Sticky audio strip beneath the top bar: one player per distinct listening file,
   so its progress bar keeps advancing as the student scrolls through the parts. */
.attempt-audio-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  padding: 8px 18px;
  background: #f2fbfb;
  border-bottom: 1px solid var(--line);
}

/* Exam-locked listening: no visible players, just a live status line (and a
   resume button when the browser blocks autoplay after a page refresh). */
.attempt-audio-locked .locked-audio-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  width: 100%;
}

.attempt-audio-locked .attempt-audio-label {
  flex: 1;
  min-width: 240px;
  font-weight: 600;
}

.attempt-audio-locked [data-lock-audio-resume] {
  animation: pulse-soft 1.6s ease-in-out infinite;
}

/* Button styling sets display:flex, which would defeat the hidden attribute. */
.attempt-audio-locked [data-lock-audio-resume][hidden] {
  display: none;
}

/* The exam-locked audio choice sits beside the Timer at the top of the editor;
   when it's on, the label lights up so the exam condition is unmissable. */
.locked-audio-field .answer-choice.locked-audio-on {
  background: #e7f4ff;
  border-color: #1173c7;
  color: #0b4f8a;
  font-weight: 700;
}

@keyframes pulse-soft {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.attempt-audio-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 320px;
  min-width: 240px;
}

.attempt-audio-bar[hidden],
.attempt-audio-item[hidden] {
  display: none;
}

.attempt-audio-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--teal-dark);
  white-space: nowrap;
}

.attempt-audio-item audio {
  flex: 1;
  min-width: 160px;
  height: 38px;
}

.attempt-shell.theme-dark .attempt-audio-bar {
  background: #10222b;
  border-bottom-color: #24424f;
}

.attempt-shell.theme-dark .attempt-audio-label {
  color: #7fd6d8;
}

/* Writing workspace — IELTS computer-based test layout: task left, answer right,
   with a draggable divider between them. */
.writing-shell {
  height: 100vh;
  overflow: hidden;
}

.writing-split {
  flex: 1;
  display: grid;
  grid-template-columns: var(--writing-split, 48%) 12px minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.writing-task-panel {
  position: static;
  max-height: none;
  height: 100%;
  overflow-y: auto;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  padding: 22px 26px;
}

.writing-task-panel h2 {
  margin: 0 0 12px;
  font-size: 1.2em;
}

.writing-attachment-card {
  display: grid;
  gap: 12px;
  margin-top: 22px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.writing-attachment-head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.writing-attachment-head h3 {
  margin: 0 0 3px;
  font-size: 15px;
}

.writing-attachment-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.writing-attachment-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--teal-soft);
  color: var(--teal-dark);
}

.writing-paste-zone {
  margin: 0;
  padding: 14px;
  border-color: var(--teal);
  background: #fff;
  text-align: center;
}

.writing-paste-zone:focus-visible {
  outline: 3px solid rgba(8, 118, 189, 0.2);
  outline-offset: 2px;
}

.writing-file-button {
  width: fit-content;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.writing-workspace-image-preview {
  padding-top: 2px;
}

.writing-workspace-image-preview .resizable-media {
  width: min(100%, 520px);
}

.writing-divider {
  cursor: col-resize;
  background: #eef4f5;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

.writing-divider span {
  width: 4px;
  height: 46px;
  border-radius: 4px;
  background: var(--line-strong);
}

.writing-divider:hover span {
  background: var(--teal);
}

.writing-answer-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px 22px;
  gap: 12px;
}

.writing-title-input {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: calc(var(--reading-size, 16px) * 1.02);
  font-weight: 600;
}

.writing-title-field {
  display: grid;
  gap: 7px;
}

.writing-title-field > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 750;
}

.writing-title-field small {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  text-align: right;
}

.writing-answer {
  flex: 1;
  min-height: 0;
  resize: none;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: var(--reading-size, 16px);
  line-height: var(--reading-line, 1.75);
  font-family: inherit;
  color: var(--reading-text, var(--text));
  background: var(--reading-bg, #fff);
}

.writing-answer:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}

.writing-answer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}

.writing-answer-foot strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}

.writing-shell.theme-dark .writing-task-panel,
.writing-shell.theme-sepia .writing-task-panel {
  border-right-color: rgba(255, 255, 255, 0.12);
}

.writing-shell.theme-dark .writing-attachment-card {
  border-color: #41535d;
  background: #162129;
}

.writing-shell.theme-dark .writing-paste-zone,
.writing-shell.theme-dark .writing-file-button {
  border-color: #526873;
  background: #1d2830;
  color: #e8eef2;
}

.writing-shell.theme-sepia .writing-attachment-card,
.writing-shell.theme-sepia .writing-paste-zone {
  background: #fffaf0;
}

@media (max-width: 820px) {
  .writing-shell {
    height: auto;
    overflow: visible;
  }
  .writing-split {
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }
  .writing-task-panel {
    height: auto;
    max-height: 40vh;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .writing-divider {
    display: none;
  }
  .writing-answer-panel {
    height: auto;
  }
  .writing-answer {
    min-height: 50vh;
  }
}

.attempt-topbar h1 {
  font-size: 17px;
  margin: 0;
  flex: 1;
  min-width: 160px;
  line-height: 1.3;
}

.attempt-topbar .muted {
  font-size: 12.5px;
}

.attempt-body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  min-height: 0;
}

.attempt-body.with-rail {
  grid-template-columns: minmax(0, 1fr) 280px;
}

.attempt-main-col {
  padding: 18px 12px 56px;
  min-width: 0;
  max-width: none;
  width: 100%;
  margin: 0 auto;
}

.attempt-notes-rail {
  border-left: 1px solid var(--line);
  background: #fbfdfd;
  padding: 16px;
  position: sticky;
  top: 54px;
  max-height: calc(100vh - 54px);
  overflow-y: auto;
}

.attempt-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.attempt-split.has-passage {
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
}

/* Lightweight, responsive 16:9 video player — used in the quiz builder preview,
   the student attempt, and the writing workspace. Caps width so a lesson video
   doesn't dwarf the exercises. */
.video-embed {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}

.video-embed iframe,
.video-embed video,
.video-embed .video-yt-mount {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.attempt-video {
  margin: 0 0 18px;
}

.builder-video-panel .builder-video-preview {
  margin-bottom: 10px;
}

/* --- Private YouTube player: our controls, YouTube branding hidden --- */
/* The shield sits over the iframe so YouTube's title / logo / "Watch on YouTube"
   link / context menu are never clickable; a click on it toggles play/pause. */
.video-private .video-shield {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

/* Opaque poster covers the player whenever it is NOT playing, so YouTube's
   initial thumbnail/title and paused "Watch on YouTube" overlay are never seen.
   While playing, the shield blocks hover so no YouTube chrome appears either. */
.video-private .video-poster {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b0b0c;
}

.video-private.is-playing .video-poster {
  display: none;
}

.video-private .video-loading {
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.video-private.is-ready .video-loading {
  display: none;
}

.video-private .video-center-btn {
  width: 64px;
  height: 64px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.video-private.is-ready .video-center-btn {
  display: flex;
}

.video-private .video-center-btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

.video-private .video-center-btn .vg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

.video-private .video-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 12px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  opacity: 0;
  transition: opacity 0.15s ease;
}

.video-private.is-ready:hover .video-controls,
.video-private.is-ready.is-paused .video-controls,
.video-private.is-ready:focus-within .video-controls {
  opacity: 1;
}

.video-private .video-ctl {
  flex: none;
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.video-private .video-ctl:hover {
  background: rgba(255, 255, 255, 0.18);
}

.video-private .video-ctl .vg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.video-private .video-ctl-cc { width: auto; padding: 0 8px; }
.video-private .video-ctl-cc .vg { width: 24px; height: 20px; fill: none; }
.video-private.cc-on .video-ctl-cc { background: rgba(255, 255, 255, 0.28); }

/* Swap play/pause and volume/mute glyphs by state. */
.video-private .vg-pause,
.video-private .vg-mute { display: none; }
.video-private.is-playing .video-ctl-play .vg-play { display: none; }
.video-private.is-playing .video-ctl-play .vg-pause { display: inline; }
.video-private.is-muted .video-ctl-mute .vg-vol { display: none; }
.video-private.is-muted .video-ctl-mute .vg-mute { display: inline; }

.video-private .video-progress {
  flex: 1 1 auto;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.32);
  cursor: pointer;
  position: relative;
  touch-action: none;
}

.video-private .video-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 3px;
  background: #fff;
}

.video-private .video-time {
  flex: none;
  color: #fff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Degraded mode (YouTube API blocked): show the plain iframe, hide our overlay. */
.video-private.is-fallback .video-shield,
.video-private.is-fallback .video-center,
.video-private.is-fallback .video-controls,
.video-private.is-fallback .video-loading { display: none; }

.video-embed:fullscreen {
  max-width: none;
  width: 100vw;
  height: 100vh;
  border-radius: 0;
}

.attempt-passage {
  position: sticky;
  top: 66px;
  max-height: calc(100vh - 86px);
  overflow-y: auto;
  scroll-margin-top: 120px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--reading-bg, #fff);
  padding: 22px 24px;
  font-size: var(--reading-size, 16px);
  line-height: var(--reading-line, 1.75);
  color: var(--reading-text, var(--text));
}

.attempt-passage h2 {
  margin: 0 0 12px;
  font-size: 1.25em;
}

.attempt-questions {
  min-width: 0;
  display: grid;
  gap: 12px;
  align-content: start;
}

.attempt-questions .question-card {
  font-size: var(--reading-size, 16px);
}

/* Question-level maps, plans and diagrams use the same reference-first reading
   pattern as passages. Flex wrapping is intentional: browser zoom reduces the
   CSS viewport, so the layout stacks before either the picture or answers cramp. */
.question-reference-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
  max-width: 100%;
}

.question-reference-media {
  flex: 1 1 22rem;
  max-width: 42rem;
  min-width: 0;
}

.question-reference-content {
  min-width: 0;
  flex: 1 1 32rem;
  display: grid;
  gap: 14px;
  align-content: start;
}

.question-reference-media > .question-media-stack {
  position: sticky;
  top: 132px;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.question-reference-media .resizable-media {
  width: 100%;
  max-width: 100%;
}

.attempt-questions.has-groups {
  gap: 26px;
  /* This pane has a fixed viewport height on wide reading layouts. Keep each
     exercise sheet at its full content height so the pane scrolls; otherwise
     CSS Grid shrinks overflow-hidden groups to equal slivers and clips nearly
     every question. */
  grid-auto-rows: max-content;
}

.attempt-question-group {
  display: grid;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  border: 2px solid #b6cfdd;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(22, 65, 88, 0.08);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.attempt-question-group + .attempt-question-group {
  margin-top: 2px;
}

.attempt-question-group:focus-within {
  border-color: #5b9cbc;
  box-shadow: 0 0 0 3px rgba(8, 118, 189, 0.1), 0 8px 22px rgba(22, 65, 88, 0.1);
}

.attempt-question-group-title {
  margin-bottom: 5px;
  color: #35677f;
  font-size: 0.75em;
  font-weight: 850;
  letter-spacing: 0.045em;
  line-height: 1.25;
  text-transform: uppercase;
}

.attempt-question-group > .attempt-question-group-header {
  display: block;
  margin: 0;
  padding: 10px 16px 11px;
  border: 0;
  border-top: 4px solid #0876bd;
  border-bottom: 1px solid #b6cfdd;
  border-radius: 0;
  background: linear-gradient(135deg, #e6f3fa 0%, #f4f9fc 72%);
  color: #173f54;
  font-size: var(--reading-size, 16px);
  line-height: 1.5;
}

/* "Questions 21-22" and the directions share a line, the way the passage banner
   above already does. The label used to own a line of its own, so the shortest
   possible group still cost three lines of the screen the student works on. */
.attempt-question-group-header .cbt-instructions-range {
  display: inline;
  margin: 0 8px 0 0;
  color: #123f59;
  font-size: 1.05em;
  font-weight: 850;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.attempt-question-group-header .cbt-instructions-body {
  display: inline;
  color: #173f54;
  font-size: 0.98em;
  font-weight: 600;
  line-height: 1.35;
}

/* Directions written as one line flow on after the label. A second or later
   paragraph — a printed TRUE/FALSE/NOT GIVEN definition list is the real case —
   still gets its own line, tightly spaced. */
.attempt-question-group-header .cbt-instructions-body p {
  display: block;
  margin: 2px 0 0;
}

.attempt-question-group-header .cbt-instructions-body p:first-child {
  display: inline;
  margin: 0;
}

.attempt-question-group-body {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #f4f8fa;
}

.attempt-question-group-body > .question-card {
  border-color: #ccdbe3;
  box-shadow: none;
}

.cbt-group-instructions {
  margin-bottom: 0;
}

.cbt-passage-instructions {
  padding-block: 7px;
}

.attempt-section-label {
  display: inline-block;
  background: var(--teal);
  color: #fff;
  border-radius: 10px;
  padding: 5px 14px;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
}

.attempt-section-block {
  margin-bottom: 30px;
}

/* When the sticky audio bar is present the header is taller, so push the sticky
   reading passage and notes rail down to clear it. */
.attempt-shell.has-audio .attempt-passage {
  top: 120px;
  max-height: calc(100vh - 140px);
}

.attempt-shell.has-audio .attempt-notes-rail {
  top: 108px;
  max-height: calc(100vh - 108px);
}

.attempt-questions .question-prompt,
.attempt-questions .gap-inline-text {
  font-size: var(--reading-size, 16px);
  line-height: var(--reading-line, 1.75);
}

/* Notes & highlights */

.annotatable ::selection {
  background: #bfe6ff;
}

mark.user-highlight {
  background: #fff200;
  color: #111827;
  padding: 0 1px;
  border-radius: 2px;
}

mark.user-note-anchor {
  background: #56ccff;
  color: #061827;
  padding: 0 1px;
  border-radius: 2px;
}

/* Teacher navigation stays pinned while long workspaces scroll. */
@media (min-width: 761px) {
  .sidebar {
    position: sticky;
    top: 68px;
    align-self: start;
    height: calc(100vh - 68px);
    max-height: calc(100vh - 68px);
    overflow-y: auto;
  }
}

/* My Classes browser */
.class-browser-toolbar {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.class-browser-toolbar > label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.class-browser-toolbar select {
  min-width: 150px;
}

.class-browser-toolbar .class-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 260px;
}

.class-search .icon {
  position: absolute;
  left: 12px;
  z-index: 1;
  color: var(--faint);
}

.class-search input {
  width: 100%;
  padding-left: 38px;
}

.layout-switcher {
  display: inline-flex;
  margin-left: auto;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
}

.layout-switcher button {
  min-width: 36px;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
}

.layout-switcher button.active {
  background: var(--teal-soft);
  color: var(--teal-dark);
}

.class-card {
  cursor: default;
}

.class-card-head small {
  display: block;
  margin-top: 4px;
  color: var(--faint);
  font-size: 11px;
}

.class-card-stats {
  grid-template-columns: repeat(4, 1fr);
}

.class-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
}

.class-layout-list {
  grid-template-columns: 1fr;
}

.class-layout-list .class-card {
  grid-template-columns: minmax(220px, 1fr) minmax(420px, 2fr) auto;
  align-items: center;
  min-height: 0;
  padding: 15px 18px;
}

.class-layout-list .class-card-stats {
  align-self: stretch;
}

/* Writing feedback: class → student folder → work. */
.writing-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.writing-summary > div {
  padding: 16px 18px;
  border-right: 1px solid var(--line);
}

.writing-summary > div:last-child { border-right: 0; }
.writing-summary strong { display: block; color: #123248; font-size: 27px; line-height: 1.1; }
.writing-summary span { color: var(--muted); font-size: 12px; }

.writing-attention-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  align-items: start;
  gap: 18px;
  margin-bottom: 18px;
}

.writing-attention-grid > .panel,
.writing-folder-panel,
.writing-class-nav,
.writing-assignment-shelf {
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(18, 49, 66, .055);
}

.writing-attention-grid .panel-head {
  min-height: 76px;
  padding: 17px 20px;
}

.writing-attention-grid .panel-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 18px;
}

.writing-attention-grid .teacher-eyebrow {
  margin-bottom: 3px;
}

.writing-priority-list,
.writing-recent-list {
  max-height: 560px;
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.writing-priority-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border-radius: 13px;
}

.writing-recent-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border-radius: 13px;
}

.writing-priority-item + .writing-priority-item,
.writing-recent-item + .writing-recent-item {
  border-top: 1px solid #edf1f2;
}

.writing-priority-item:hover,
.writing-recent-item:hover {
  background: #f7fafb;
}

.writing-priority-item > div,
.writing-recent-item > div:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.writing-priority-item strong,
.writing-recent-item strong {
  overflow: hidden;
  color: #172d3e;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.writing-priority-item span,
.writing-recent-item span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.writing-recent-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #14745e !important;
  background: #e5f6f0;
}

.writing-recent-item .row-actions {
  flex-wrap: nowrap;
}

.writing-recent-item .row-actions button {
  min-height: 34px;
  padding-inline: 10px;
  font-size: 12px;
}

.writing-attention-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 8px 14px 12px;
  border-top: 1px solid #edf1f2;
}

.writing-attention-footer button {
  min-width: 132px;
  color: var(--teal-dark);
}

.writing-dashboard-empty {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  color: var(--muted);
  text-align: left;
}

.writing-dashboard-empty > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 14px;
  color: #177960;
  background: #e7f7f1;
}

.writing-dashboard-empty strong { color: var(--text); }
.writing-dashboard-empty p { margin: 3px 0 0; font-size: 13px; }

.public-papers-folder {
  margin: 18px 0 0;
}

.public-papers-head {
  align-items: flex-start;
}

.public-papers-head > div {
  display: grid;
  gap: 4px;
}

.public-papers-head h2 {
  display: flex;
  align-items: center;
  gap: 7px;
}

.public-papers-head p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.public-paper-list {
  margin: 0;
}

.public-paper-copy {
  display: grid;
  gap: 4px;
  min-width: 180px;
}

.public-paper-copy > div:first-child {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.public-paper-actions {
  justify-content: flex-end;
}

.writing-browser {
  display: grid;
  grid-template-columns: 275px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  scroll-margin-top: 84px;
}

.writing-class-nav {
  position: sticky;
  top: 86px;
}

.writing-folder-list {
  display: grid;
  gap: 6px;
  padding: 10px;
}

.writing-class-folder {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  width: 100%;
  min-height: 66px;
  padding: 9px;
  border-color: transparent;
  text-align: left;
}

.writing-class-folder > span:nth-child(2) { display: grid; min-width: 0; }
.writing-class-folder strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.writing-class-folder small { color: var(--muted); font-size: 11px; }
.writing-class-folder b { align-self: center; min-width: 23px; padding: 3px 7px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); font-size: 11px; text-align: center; }
.writing-class-folder.active { border-color: #a8dcd9; background: var(--teal-soft); color: var(--teal-dark); }

.folder-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #fff;
  color: var(--teal);
}

.writing-folder-panel { min-height: 460px; scroll-margin-top: 84px; }
.writing-folder-head > div { display: grid; gap: 3px; }
.writing-folder-head .eyebrow { font-size: 10px; }
.writing-folder-head h2:focus-visible,
.student-folder-person h2:focus-visible { outline: 3px solid rgba(8, 118, 189, .22); outline-offset: 4px; border-radius: 4px; }

.writing-folder-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 16px 18px 0;
  overflow: hidden;
  border: 1px solid #dfe8ea;
  border-radius: 13px;
  background: #f7fafb;
}

.writing-folder-overview > div {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border-right: 1px solid #e2e9eb;
}

.writing-folder-overview > div:last-child { border-right: 0; }
.writing-folder-overview strong { color: #16334a; font-size: 20px; line-height: 1.1; }
.writing-folder-overview span { color: var(--muted); font-size: 11px; }
.writing-folder-overview .attention { background: #fff7e8; }
.writing-folder-overview .attention strong { color: var(--amber); }

.student-folder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.student-folder {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  min-height: 176px;
  padding: 22px 18px 15px;
  border-color: #e2d7ae;
  border-radius: var(--radius);
  background: #fffdf2;
  text-align: left;
}

/* The folder "tab" used to sit above the card as a detached step, which read as
   a rendering fault. It now runs along the top of the card as a coloured spine. */
.student-folder-tab {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, #d9c47f, #efe3b8);
}

.student-folder:hover { border-color: #b7a355; box-shadow: 0 8px 18px rgba(75, 61, 10, 0.1); }
.student-folder-identity {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.student-folder-avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #075d8f;
  background: #e2f3ff;
  font-size: 13px;
  font-weight: 850;
}
.student-folder-title {
  min-width: 0;
  max-width: 100%;
  padding-top: 2px;
  color: #16334a;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.3;
  overflow-wrap: anywhere;
  white-space: normal;
}

.student-folder-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 16px 0 14px 56px;
}

.student-folder-status,
.student-folder-paper-count {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid #e0e7e9;
  border-radius: 999px;
  color: #607480;
  background: #fff;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
}

.student-folder-status.ready { border-color: #cfe8df; color: #28715c; background: #eef9f4; }
.student-folder-status.attention { border-color: #f0d49a; color: #9d5b00; background: #fff3d8; }
.student-folder-status.not-started { border-color: #e1e7e9; color: #6b7c86; background: #f5f8f9; }
.student-folder-paper-count strong { margin-right: 4px; color: #173449; font-size: 14px; }

.student-folder-open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #eadfb9;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 800;
}

.student-folder-open svg { flex: 0 0 auto; transition: transform .16s ease; }
.student-folder:hover .student-folder-open svg { transform: translateX(3px); }

.student-folder-detail-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.student-folder-detail-head > .linkish { grid-column: 1 / -1; justify-self: start; padding: 0; min-height: 24px; }
.student-folder-person { display: flex; align-items: center; gap: 12px; }
.student-folder-person .avatar { width: 42px; height: 42px; }
.student-folder-person h2 { margin: 2px 0 0; }
.folder-section { padding: 18px; }
.folder-section + .folder-section { border-top: 1px solid var(--line); }
.folder-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.folder-section-head h3 { margin: 0; font-size: 15px; }
.folder-section .list { margin: 0; }
.empty.compact { padding: 18px; border: 1px dashed var(--line-strong); border-radius: 9px; }

.writing-assignment-shelf { margin-top: 18px; }
.writing-assignment-head { align-items: flex-start; }
.writing-assignment-head > div:first-child { display: grid; gap: 3px; }
.writing-assignment-head h2 { margin: 0; font-size: 18px; }
.writing-assignment-head p { margin: 0; color: var(--muted); font-size: 12px; }
.writing-assignment-head .head-actions { align-items: center; }

.writing-assignments-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}

.writing-assignments-table th,
.writing-assignments-table td {
  padding: 13px 15px;
  border-bottom: 1px solid #e8eef0;
  text-align: left;
  vertical-align: middle;
}

.writing-assignments-table th {
  color: #60717d;
  background: #f7fafb;
  font-size: 11px;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.writing-assignments-table tbody tr:last-child td { border-bottom: 0; }
.writing-assignments-table tbody tr:hover { background: #fbfdfd; }
.writing-assignments-table td:nth-child(1) { width: 34%; }
.writing-assignments-table td:nth-child(2) { width: 19%; }
.writing-assignments-table td:nth-child(3) { width: 29%; }
.writing-assignments-table td:last-child { width: 220px; }
.writing-assignments-table td > strong,
.writing-assignments-table td > small,
.writing-assignment-title > small { display: block; }
.writing-assignments-table td > small,
.writing-assignment-title > small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.writing-assignment-title .linkish { justify-content: flex-start; min-height: 28px; padding: 0; text-align: left; font-weight: 800; }

.writing-assignment-activity {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.writing-assignment-activity span {
  padding: 5px 7px;
  border-radius: 8px;
  color: #637580;
  background: #f1f6f7;
  font-size: 10px;
  white-space: nowrap;
}

.writing-assignment-activity strong { color: #173449; font-size: 12px; }
.writing-assignment-activity .attention { color: #9d5b00; background: #fff3d8; }
.writing-assignment-activity .attention strong { color: #a45c00; }

@media (max-width: 1400px) {
  .student-folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .writing-attention-grid { grid-template-columns: 1fr; }
  .writing-recent-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .writing-recent-item:nth-child(2) { border-top: 0; }
  .writing-recent-item .row-actions { flex-wrap: wrap; }
}

@media (max-width: 980px) {
  .class-layout-list .class-card { grid-template-columns: 1fr; }
  .writing-browser { grid-template-columns: 1fr; }
  .writing-class-nav { position: static; }
  .writing-folder-list { display: flex; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; }
  .writing-class-folder { flex: 0 0 min(280px, 85vw); scroll-snap-align: start; }
}

@media (max-width: 760px) {
  .sidebar { position: static; height: auto; max-height: none; }
  .sidebar-spacer { display: none; }
  .writing-summary { grid-template-columns: repeat(2, 1fr); }
  .writing-summary > div:nth-child(2) { border-right: 0; }
  .writing-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .writing-attention-grid { gap: 12px; }
  .writing-priority-item,
  .writing-recent-item { grid-template-columns: 40px minmax(0, 1fr); }
  .writing-priority-item > button,
  .writing-recent-item > .row-actions { grid-column: 2; justify-self: stretch; }
  .writing-priority-item > button { width: 100%; }
  .writing-recent-list { display: block; }
  .writing-recent-item:nth-child(2) { border-top: 1px solid #edf1f2; }
  .student-folder-grid { grid-template-columns: 1fr; }
  .writing-folder-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .writing-folder-overview > div:nth-child(2) { border-right: 0; }
  .writing-folder-overview > div:nth-child(-n+2) { border-bottom: 1px solid #e2e9eb; }
  .writing-assignments-table { min-width: 720px; }
  .writing-assignment-head { align-items: stretch; }
  .writing-assignment-head .head-actions { width: 100%; justify-content: space-between; }
  .student-folder-detail-head { grid-template-columns: 1fr; }
  .student-folder-detail-head .head-actions { justify-content: flex-start; }
  .public-paper-row { align-items: stretch; }
  .public-paper-actions { justify-content: flex-start; }
  .public-paper-actions button { flex: 1 1 145px; }
}

@media (max-width: 480px) {
  .student-folder-grid { padding: 12px; }
  .student-folder { min-height: 164px; padding: 20px 15px 14px; }
  .student-folder-stats { margin-left: 0; }
}

.selection-toolbar {
  position: absolute;
  z-index: 900;
  display: flex;
  gap: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 40, 48, 0.18);
  overflow: hidden;
}

.selection-toolbar button {
  border: 0;
  border-radius: 0;
  min-height: 40px;
  padding: 0 14px;
  display: grid;
  justify-items: center;
  gap: 1px;
  font-size: 11.5px;
  font-weight: 700;
}

.selection-toolbar button + button {
  border-left: 1px solid var(--line);
}

.note-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.note-card .note-quote {
  font-style: italic;
  color: var(--muted);
  font-size: 13px;
  border-left: 3px solid #ffd766;
  padding-left: 8px;
  line-height: 1.45;
}

.note-card textarea {
  min-height: 56px;
  font-size: 13.5px;
  padding: 8px;
}

.note-card .note-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--faint);
  font-size: 11.5px;
}

.note-card .ghost {
  min-height: 28px;
  padding: 0 8px;
  font-size: 12px;
}

.notes-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.notes-rail-head h3 {
  margin: 0;
  font-size: 15px;
}

/* Readability controls */

.readability-pop {
  position: fixed;
  z-index: 950;
  width: min(320px, calc(100vw - 24px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(15, 40, 48, 0.22);
  padding: 16px;
  display: grid;
  gap: 14px;
}

.readability-pop h4 {
  margin: 0;
  font-size: 14px;
}

.readability-row {
  display: grid;
  gap: 6px;
}

.readability-row .pill-row button {
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
}

.readability-row button.active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

/* Reading themes applied to the attempt area */

.attempt-shell.theme-sepia {
  --reading-bg: #f8f1e3;
  --reading-text: #433422;
  background: #f3ead8;
}

.attempt-shell.theme-sepia .question-card,
.attempt-shell.theme-sepia .gap-inline-text {
  background: #fdf8ec;
}

.attempt-shell.theme-dark {
  --reading-bg: #1d2830;
  --reading-text: #e8eef2;
  background: #141d24;
}

.attempt-shell.theme-dark .attempt-topbar {
  background: #1d2830;
  border-color: #33424d;
  color: #e8eef2;
}

.attempt-shell.theme-dark .attempt-topbar h1 { color: #e8eef2; }

.attempt-shell.theme-dark .question-card,
.attempt-shell.theme-dark .gap-inline-text,
.attempt-shell.theme-dark .answer-choice,
.attempt-shell.theme-dark .match-slot,
.attempt-shell.theme-dark .bank-chip,
.attempt-shell.theme-dark .token-text {
  background: #22303a;
  border-color: #3a4a56;
  color: #e8eef2;
}

.attempt-shell.theme-dark .question-prompt,
.attempt-shell.theme-dark .match-item,
.attempt-shell.theme-dark .match-bank-heading,
.attempt-shell.theme-dark .match-bank-heading strong,
.attempt-shell.theme-dark .token,
.attempt-shell.theme-dark label,
.attempt-shell.theme-dark .attempt-passage {
  color: #e8eef2;
}

.attempt-shell.theme-dark .attempt-passage {
  border-color: #3a4a56;
}

.attempt-shell.theme-dark input,
.attempt-shell.theme-dark select,
.attempt-shell.theme-dark textarea {
  background: #1a252d;
  border-color: #3a4a56;
  color: #e8eef2;
}

.attempt-shell.theme-dark .match-row {
  border-color: #3a4a56;
}

.attempt-shell.theme-dark .match-question-number {
  background: #14232c;
  border-color: #3a4a56;
  color: #d7ecec;
}

.attempt-shell.theme-contrast {
  --reading-bg: #ffffff;
  --reading-text: #000000;
  background: #ffffff;
}

.attempt-shell.theme-contrast .attempt-passage,
.attempt-shell.theme-contrast .question-card {
  border-color: #000;
  color: #000;
}

.attempt-shell.theme-contrast .question-prompt,
.attempt-shell.theme-contrast .match-item {
  color: #000;
  font-weight: 600;
}

/* ============ Library sharing ============ */

.share-code-box {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px dashed var(--teal);
  background: var(--teal-soft);
  border-radius: 10px;
  padding: 12px 16px;
}

.share-code-box code {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--teal-dark);
  flex: 1;
}

.student-invite-section {
  padding: 0 18px 18px;
  display: grid;
  gap: 14px;
  overflow-y: auto;
}

.invite-link-box input {
  flex: 1;
  min-width: 0;
  background: #fff;
}

.invite-link-box button {
  white-space: nowrap;
}

.invite-rotate {
  justify-self: start;
  margin-top: 8px;
}

.invite-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* ============ Website administration ============ */

.admin-workspace {
  max-width: 1600px;
}

.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.admin-summary-card {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.admin-summary-card span,
.admin-summary-card small {
  color: var(--muted);
}

.admin-summary-card span {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.admin-summary-card strong {
  color: var(--teal-dark);
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1;
  overflow-wrap: anywhere;
}

.admin-summary-card small {
  font-size: 11px;
  line-height: 1.35;
}

.admin-analytics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  align-items: start;
  gap: 14px;
  margin-bottom: 16px;
}

.admin-activity-panel,
.admin-storage-panel,
.admin-table-panel {
  min-width: 0;
  margin-bottom: 16px;
}

/* Usage chart. The SVG carries its own viewBox, so it scales down to a phone
   without a horizontal scroller and the axis stays readable. */
.admin-chart-wrap {
  padding: 6px 14px 0;
}

.admin-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.admin-chart-grid {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.admin-chart-axis-line {
  stroke: var(--line-strong, #cbd5e1);
  stroke-width: 1;
}

.admin-chart-axis {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.admin-chart-bar {
  transition: opacity .15s ease;
}

.admin-chart-bar.signins { fill: var(--teal); }
.admin-chart-bar.submissions { fill: var(--amber); }

.admin-chart-hit {
  fill: transparent;
}

.admin-chart-day:hover .admin-chart-hit { fill: rgba(15, 40, 48, .05); }
.admin-chart-day:hover .admin-chart-bar { opacity: .82; }

.admin-chart-note {
  padding: 4px 18px 16px;
  margin: 0;
  font-size: 12px;
}

.admin-chart-note b { color: var(--text); }

.admin-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--muted);
  font-size: 11px;
}

.admin-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-chart-legend b {
  color: var(--text);
  font-size: 12px;
}

.admin-chart-legend i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

.admin-chart-legend i.signins { background: var(--teal); }
.admin-chart-legend i.submissions { background: var(--amber); }

/* Storage: one gauge against the Cloudflare limit, then what fills it. */
.admin-storage-body {
  display: grid;
  gap: 14px;
  padding: 16px 18px 18px;
}

/* Database and file storage sit side by side where there is room, and stack on a
   narrow pane. Two limits, two bars — never one number standing for both. */
.admin-storage-gauges {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.admin-storage-gauge {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft, #f8fafc);
}

.admin-storage-gauge-title {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.admin-storage-gauge-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
}

.admin-storage-gauge-head strong {
  color: var(--text);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1;
}

.admin-storage-gauge-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.admin-storage-meter {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e3e9ef;
  box-shadow: inset 0 1px 2px rgba(15, 40, 48, .08);
}

.admin-storage-meter i {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), #2f7f78);
  transition: width .4s ease;
}

.admin-storage-gauge--warn .admin-storage-meter i { background: linear-gradient(90deg, #d79a2b, #b8791a); }
.admin-storage-gauge--danger .admin-storage-meter i { background: linear-gradient(90deg, #d9534f, #b53c38); }

.admin-storage-gauge-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
}

.admin-storage-stack {
  display: flex;
  gap: 2px;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-strong);
}

.admin-storage-stack i { display: block; height: 100%; }

.admin-storage-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-storage-list li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto 46px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
}

.admin-storage-list li:last-child { border-bottom: 0; }
.admin-storage-list li > i { width: 10px; height: 10px; border-radius: 3px; }
.admin-storage-list li > b { color: var(--text); font-size: 13px; }
.admin-storage-list li > small { text-align: right; font-size: 11.5px; }

.admin-storage-list .part-media,
.admin-storage-stack .part-media { background: var(--teal); }
.admin-storage-list .part-quizzes,
.admin-storage-stack .part-quizzes { background: #3f7fbf; }
.admin-storage-list .part-feedback,
.admin-storage-stack .part-feedback { background: var(--amber); }
.admin-storage-list .part-attempts,
.admin-storage-stack .part-attempts { background: #7b6bd6; }
.admin-storage-list .part-writing,
.admin-storage-stack .part-writing { background: #58a794; }
.admin-storage-list .part-other,
.admin-storage-stack .part-other { background: #b8c2cc; }

.admin-storage-note { margin: 0; font-size: 11.5px; line-height: 1.5; }

/* Reconciles the per-database gauge above with the bigger account-wide figure
   Cloudflare's own usage page reports, so the two never look contradictory. */
.admin-storage-limits {
  display: grid;
  gap: 5px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft, #f8fafc);
}

.admin-storage-limits > b {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.admin-storage-limits p {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
}

.admin-storage-limits p b { color: var(--text); font-weight: 650; }

/* Moving pictures and video out of the database and into R2 file storage. */
.admin-media-move { border-color: var(--teal); }
.admin-media-move.is-done { border-color: var(--line); }

.admin-media-move-note {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-strong, #eef2f6);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.admin-media-move-note code {
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(15, 40, 48, .1);
  font-size: 11px;
}

.admin-media-move-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 3px;
}

.admin-media-move-actions .btn { padding: 7px 13px; font-size: 12.5px; }

.admin-media-move-status {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
}

.admin-media-move-meter {
  height: 8px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e3e9ef;
}

.admin-media-move-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), #2f7f78);
  transition: width .3s ease;
}

.admin-summary-card--storage strong { color: var(--text); }

.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid #cfe6df;
  border-radius: 999px;
  background: #eef8f5;
  color: #1f6b60;
  font-size: 11.5px;
  font-weight: 800;
}

.live-chip .icon { width: 14px; height: 14px; }
.admin-table-panel .table-wrap { border: 0; border-radius: 0 0 var(--radius) var(--radius); }
.auth-signin-note { margin: 16px 0 0 !important; font-size: 12px; }

@media (max-width: 1280px) {
  .admin-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .admin-analytics-grid { grid-template-columns: 1fr; }
}

/* ============ Analytics: student detail ============ */

.student-detail-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.big-percent {
  font-size: 42px;
  font-weight: 850;
  color: var(--teal-dark);
  line-height: 1;
}

@media (max-width: 1100px) {
  .analytics-chart,
  .student-analytics-grid {
    grid-template-columns: 1fr;
  }

  .metric-row.compact {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }

  .score-bar-row {
    grid-template-columns: minmax(100px, 1fr) minmax(120px, 1.2fr) 72px;
  }

  .attempt-split.has-passage {
    grid-template-columns: 1fr;
  }

  .attempt-passage {
    position: static;
    max-height: 46vh;
  }

  .attempt-body.with-rail {
    grid-template-columns: 1fr;
  }

  .attempt-notes-rail {
    position: static;
    max-height: none;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 760px) {
  .student-analytics-grid > .metric-row.compact {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Merged 2026-07-15: the former separate stylesheets are inlined
   below (in original load order) so the page makes ONE CSS request.
   ============================================================ */

/* ---- from progress-layout-20260713.css ---- */
/* Cache-isolated student progress layout fix. Keep in sync with styles.css. */
.student-analytics-grid {
  grid-template-columns: 150px minmax(0, 1fr);
}

.student-analytics-grid > .metric-row.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.student-analytics-grid > .student-score-bars {
  grid-column: 1 / -1;
}

@media (max-width: 1100px) {
  .student-analytics-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .student-analytics-grid > .metric-row.compact {
    grid-template-columns: 1fr;
  }
}

/* ---- from library-revamp-20260713.css ---- */
/* Quiz library catalog — cache-isolated release 2026-07-13 */

.library-workspace {
  max-width: 1540px;
  padding-bottom: 56px;
}

.library-page-head {
  align-items: flex-end;
  margin-bottom: 24px;
}

.library-page-head > div:first-child {
  max-width: 720px;
}

.library-page-head h1 {
  max-width: 680px;
  margin-top: 5px;
  font-size: clamp(30px, 3vw, 43px);
  letter-spacing: -0.035em;
}

.library-eyebrow {
  display: block;
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.library-overview {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  margin-bottom: 22px;
  border-radius: 14px;
  background: #0b2738;
  color: #fff;
  box-shadow: 0 16px 34px rgba(7, 35, 52, 0.17);
}

.library-overview::after {
  position: absolute;
  z-index: -1;
  right: -55px;
  bottom: -120px;
  width: 300px;
  height: 300px;
  border: 54px solid rgba(255, 236, 0, 0.16);
  border-radius: 50%;
  content: "";
}

.library-overview > div {
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  min-width: 0;
  padding: 19px 22px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.library-overview > div:last-child {
  border-right: 0;
}

.library-overview > div > span {
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  align-self: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--brand-yellow);
  color: #10202b;
}

.library-overview > div > span .icon {
  width: 19px;
  height: 19px;
}

.library-overview strong {
  align-self: end;
  font-size: 24px;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.library-overview small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-browser {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.library-collections,
.library-catalog {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}

.library-collections {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 6px;
  padding: 13px;
}

.library-collections-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 5px 10px;
}

.library-collections-head span {
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.library-collections-head small {
  color: var(--faint);
  font-size: 11px;
}

.library-collection-button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  width: 100%;
  min-height: 62px;
  padding: 8px 9px;
  border-color: transparent;
  text-align: left;
}

.library-collection-button:hover {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
}

.library-collection-button.active {
  border-color: #a9d8f5;
  background: var(--teal-soft);
  color: var(--teal-dark);
  box-shadow: inset 3px 0 0 var(--teal);
}

.library-collection-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--teal);
}

.library-collection-icon .icon {
  width: 17px;
  height: 17px;
}

.library-collection-button > span:nth-child(2) {
  display: grid;
  align-self: center;
  min-width: 0;
}

.library-collection-button strong {
  overflow: hidden;
  color: inherit;
  font-size: 13.5px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-collection-button small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-collection-button > b {
  align-self: center;
  min-width: 23px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}

.library-collection-button.active > b {
  background: var(--teal);
  color: #fff;
}

.library-tip {
  display: flex;
  gap: 9px;
  margin-top: 7px;
  padding: 12px;
  border-radius: 9px;
  background: #fff9c7;
  color: #473f00;
}

.library-tip > .icon {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 2px;
}

.library-tip p {
  display: grid;
  gap: 2px;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
}

.library-tip strong {
  font-size: 12px;
}

.library-catalog {
  min-width: 0;
  overflow: hidden;
}

.library-toolbar {
  padding: 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fbfdfe 0%, #f7fafb 100%);
}

.library-search {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  align-items: center;
  overflow: hidden;
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(15, 40, 48, 0.05);
}

.library-search:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(8, 118, 189, 0.12);
}

.library-search > span {
  display: grid;
  place-items: center;
  padding-left: 14px;
  color: var(--muted);
}

.library-search > span .icon {
  width: 18px;
  height: 18px;
}

.library-search input {
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 0;
  outline: 0;
  background: transparent;
}

.library-search button {
  min-height: 38px;
  margin-right: 5px;
}

.library-filter-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 13px;
}

.library-filter-controls label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 750;
}

.library-filter-controls select {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
}

.library-results-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px 14px;
}

.library-results-head h2 {
  margin: 3px 0 0;
  font-size: 22px;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.library-results-tools {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;
}

.library-results-tools > .ghost {
  min-height: 36px;
}

.library-results-tools .library-sort-bar {
  margin: 0;
}

.library-results-tools .sort-dir-toggle button {
  width: 40px;
  padding: 0;
  font-size: 0;
}

.library-results-tools .sort-dir-toggle button::first-letter {
  font-size: 15px;
}

.library-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0 18px 20px;
}

.library-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 320px;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 40, 48, 0.055);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.library-card-writing {
  border-top-color: #6750a4;
}

.library-card:hover {
  border-right-color: #b7cbd1;
  border-bottom-color: #b7cbd1;
  border-left-color: #b7cbd1;
  box-shadow: 0 13px 28px rgba(15, 40, 48, 0.1);
  transform: translateY(-2px);
}

.library-card-topline,
.library-card-title-row,
.library-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.library-kind-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The card badge names the skill, so it takes the skill's colour too. These win
   over the kind-based default that used to sit here. */
.library-kind-badge.skill-reading { color: #1967d2; }
.library-kind-badge.skill-listening { color: #7b3fbf; }
.library-kind-badge.skill-use-of-english { color: #0b7b6b; }
.library-kind-badge.skill-reading-and-use-of-english { color: #12628f; }
.library-kind-badge.skill-grammar { color: #1a6b8f; }
.library-kind-badge.skill-vocabulary { color: #a3562a; }
.library-kind-badge.skill-writing { color: #b06000; }
.library-kind-badge.skill-speaking { color: #b3306b; }
.library-kind-badge.skill-mixed { color: #5c6b7a; }
.library-kind-badge.skill-unset { color: #8494a6; }

.library-kind-badge .icon {
  width: 14px;
  height: 14px;
}

.library-card-date {
  color: var(--faint);
  font-size: 11px;
  white-space: nowrap;
}

.library-card-title-row {
  align-items: flex-start;
  margin-top: 12px;
}

.library-card-title-row h3 {
  min-width: 0;
  margin: 0;
}

.library-title-button {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
}

.library-title-button:hover {
  border: 0;
  background: transparent;
  color: var(--teal-dark);
  box-shadow: none;
  text-decoration: underline;
  text-decoration-color: #8ac8ef;
  text-underline-offset: 3px;
}

.library-card-description {
  display: -webkit-box;
  min-height: 44px;
  overflow: hidden;
  margin: 8px 0 11px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.library-card-tags,
.library-card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.library-card-tags > span {
  padding: 3px 8px;
  border: 1px solid #d7e4e7;
  border-radius: 999px;
  background: #f4f8f9;
  color: #40535f;
  font-size: 10.5px;
  font-weight: 700;
}

.library-card-tags > .muted-tag {
  color: var(--faint);
  font-style: italic;
}

.library-assignment-state {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 15px 0;
  padding: 10px;
  border: 1px solid #f0d49c;
  border-radius: 9px;
  background: var(--amber-soft);
}

.library-assignment-state.assigned {
  border-color: #bde3ca;
  background: var(--green-soft);
}

.library-assignment-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #fff;
  color: var(--amber);
}

.library-assignment-state.assigned .library-assignment-icon {
  color: var(--green);
}

.library-assignment-icon .icon {
  width: 16px;
  height: 16px;
}

.library-assignment-state > div {
  display: grid;
  min-width: 0;
}

.library-assignment-state strong {
  font-size: 12.5px;
  line-height: 1.35;
}

.library-assignment-state span:last-child {
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-card-footer {
  align-items: flex-end;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.library-card-facts {
  min-width: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.4;
}

.library-card-facts span + span::before {
  margin-right: 6px;
  color: var(--line-strong);
  content: "•";
}

.library-card-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.library-card-actions button {
  min-height: 36px;
  padding: 0 10px;
  font-size: 12px;
}

.library-card-actions .icon-button {
  width: 36px;
  padding: 0;
}

.library-empty-state {
  display: grid;
  justify-items: center;
  min-height: 340px;
  margin: 0 18px 20px;
  padding: 54px 20px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 11px;
  background: var(--surface);
  text-align: center;
}

.library-empty-state > span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: var(--brand-yellow);
  color: #10202b;
}

.library-empty-state > span .icon {
  width: 23px;
  height: 23px;
}

.library-empty-state h3 {
  margin: 14px 0 4px;
  font-size: 19px;
}

.library-empty-state p {
  max-width: 450px;
  margin: 0 0 17px;
  color: var(--muted);
}

.library-catalog-note {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: #fbfdfe;
  color: var(--faint);
  font-size: 11px;
}

.library-catalog-note .icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

@media (max-width: 1180px) {
  .library-page-head {
    align-items: flex-start;
  }

  .library-browser {
    grid-template-columns: 1fr;
  }

  .library-collections {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .library-collections-head,
  .library-tip {
    grid-column: 1 / -1;
  }

  .library-tip {
    align-items: center;
  }

  .library-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .library-page-head {
    display: grid;
  }

  .library-page-head .head-actions {
    justify-content: flex-start;
  }

  .library-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .library-overview > div:nth-child(2) {
    border-right: 0;
  }

  .library-overview > div:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .library-collections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .library-filter-controls {
    grid-template-columns: 1fr;
  }

  .library-results-head,
  .library-results-tools {
    align-items: flex-start;
  }

  .library-results-head {
    flex-direction: column;
  }

  .library-results-tools {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .library-workspace {
    padding-right: 14px;
    padding-left: 14px;
  }

  .library-page-head h1 {
    font-size: 31px;
  }

  .library-page-head .head-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .library-page-head .head-actions button {
    min-height: 44px;
  }

  .library-overview > div {
    grid-template-columns: 32px 1fr;
    column-gap: 8px;
    padding: 14px 11px;
  }

  .library-overview > div > span {
    width: 32px;
    height: 32px;
  }

  .library-overview strong {
    font-size: 20px;
  }

  .library-overview small {
    font-size: 11px;
  }

  .library-collections {
    grid-template-columns: 1fr;
  }

  .library-toolbar,
  .library-results-head {
    padding-right: 13px;
    padding-left: 13px;
  }

  .library-search {
    grid-template-columns: auto minmax(80px, 1fr);
  }

  .library-search button {
    grid-column: 1 / -1;
    min-height: 44px;
    margin: 0 5px 5px;
  }

  .library-results-tools .library-sort-bar {
    width: 100%;
  }

  .library-results-tools .library-sort-bar label {
    flex: 1;
  }

  .library-results-tools .library-sort-bar select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  .library-results-tools .sort-dir-toggle button,
  .library-results-tools > .ghost {
    min-height: 44px;
  }

  .library-card-grid {
    gap: 12px;
    padding: 0 13px 15px;
  }

  .library-card {
    min-height: 0;
    padding: 15px;
  }

  .library-card-topline,
  .library-card-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .library-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 44px;
    width: 100%;
  }

  .library-card-actions button,
  .library-card-actions .icon-button {
    width: 100%;
    min-height: 44px;
  }

  .library-empty-state {
    margin-right: 13px;
    margin-left: 13px;
  }
}

/* ---- from library-layout-20260713.css ---- */
/* Grid/list library switch — cache-isolated release 2026-07-13 */

.library-layout-toggle {
  display: inline-flex;
  overflow: hidden;
  align-self: flex-end;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
}

.library-layout-toggle button {
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--muted);
  box-shadow: none;
}

.library-layout-toggle button + button {
  border-left: 1px solid var(--line-strong);
}

.library-layout-toggle button:hover {
  background: var(--surface);
  color: var(--teal-dark);
  box-shadow: none;
}

.library-layout-toggle button.active {
  background: var(--teal);
  color: #fff;
}

.library-layout-toggle button.active:hover {
  background: var(--teal-dark);
  color: #fff;
}

.library-layout-toggle .icon {
  width: 17px;
  height: 17px;
}

.library-catalog {
  container-type: inline-size;
}

.library-card-grid-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.library-card-grid-list .library-card {
  display: grid;
  grid-template-columns: minmax(230px, 1.3fr) minmax(95px, 0.55fr) minmax(190px, 0.85fr) auto;
  grid-template-areas:
    "top top assignment actions"
    "title title assignment actions"
    "description description assignment actions"
    "tags facts assignment actions";
  column-gap: 14px;
  row-gap: 4px;
  min-height: 0;
  padding: 14px 15px;
  border-top: 1px solid var(--line);
  border-left: 4px solid var(--teal);
}

.library-card-grid-list .library-card-writing {
  border-left-color: #6750a4;
}

.library-card-grid-list .library-card:hover {
  border-left-color: var(--teal);
  transform: none;
}

.library-card-grid-list .library-card-writing:hover {
  border-left-color: #6750a4;
}

.library-card-grid-list .library-card-topline {
  grid-area: top;
}

.library-card-grid-list .library-card-title-row {
  grid-area: title;
  margin-top: 2px;
}

.library-card-grid-list .library-card-description {
  grid-area: description;
  min-height: 0;
  margin: 2px 0 7px;
  -webkit-line-clamp: 1;
}

.library-card-grid-list .library-card-tags {
  grid-area: tags;
  align-self: end;
}

.library-card-grid-list .library-assignment-state {
  grid-area: assignment;
  align-self: stretch;
  min-width: 0;
  margin: 0;
}

.library-card-grid-list .library-card-footer {
  display: contents;
}

.library-card-grid-list .library-card-facts {
  grid-area: facts;
  align-self: end;
}

.library-card-grid-list .library-card-actions {
  grid-area: actions;
  align-self: center;
  justify-self: end;
}

@media (max-width: 1100px) {
  .library-card-grid-list .library-card {
    grid-template-columns: minmax(0, 1fr) minmax(200px, 0.72fr);
    grid-template-areas:
      "top assignment"
      "title assignment"
      "description assignment"
      "tags assignment"
      "facts actions";
  }
}

@media (max-width: 820px) {
  .library-card-grid-list .library-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "top"
      "title"
      "description"
      "tags"
      "assignment"
      "facts"
      "actions";
    row-gap: 8px;
  }

  .library-card-grid-list .library-card-description {
    margin: 0;
  }

  .library-card-grid-list .library-assignment-state {
    margin-top: 2px;
  }

  .library-card-grid-list .library-card-actions {
    justify-self: stretch;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .library-layout-toggle {
    align-self: auto;
  }

  .library-layout-toggle button {
    min-height: 44px;
  }
}

@container (max-width: 820px) {
  .library-card-grid-list .library-card {
    grid-template-columns: minmax(0, 1fr) minmax(200px, 0.72fr);
    grid-template-areas:
      "top assignment"
      "title assignment"
      "description assignment"
      "tags assignment"
      "facts actions";
  }
}

@container (max-width: 560px) {
  .library-card-grid-list .library-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "top"
      "title"
      "description"
      "tags"
      "assignment"
      "facts"
      "actions";
    row-gap: 8px;
  }

  .library-card-grid-list .library-card-description {
    margin: 0;
  }

  .library-card-grid-list .library-assignment-state {
    margin-top: 2px;
  }

  .library-card-grid-list .library-card-actions {
    justify-self: stretch;
    width: 100%;
  }
}

/* ---- from rewrite-inline-20260713.css ---- */
/* Inline key word transformations — cache-isolated release 2026-07-13 */

.rewrite-builder {
  display: grid;
  gap: 15px;
  padding: 16px;
  border: 1px solid #cfe0e6;
  border-radius: 11px;
  background: linear-gradient(145deg, #f8fcfd 0%, #f2f8fa 100%);
}

.rewrite-settings-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rewrite-target-field input {
  min-height: 46px;
  border: 2px solid #8fc8ec;
  background: #fff;
  font-size: 16px;
  font-weight: 650;
}

.rewrite-target-field .bad-text {
  font-size: 12px;
  font-weight: 750;
}

.rewrite-task {
  display: grid;
  gap: 14px;
  margin-top: 4px;
}

.rewrite-original {
  padding: 13px 16px;
  border-left: 4px solid #a9bdc6;
  border-radius: 0 9px 9px 0;
  background: #f5f8f9;
}

.rewrite-original > span,
.rewrite-target-label {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.rewrite-original p {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.55;
}

.rewrite-rule-row {
  display: flex;
  align-items: stretch;
  gap: 9px;
  flex-wrap: wrap;
}

.rewrite-keyword,
.rewrite-limit {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-radius: 9px;
}

.rewrite-keyword {
  gap: 10px;
  padding: 7px 13px;
  background: var(--brand-yellow);
  color: #222000;
  box-shadow: inset 0 0 0 1px rgba(105, 94, 0, 0.16);
}

.rewrite-keyword small {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rewrite-keyword strong {
  padding-left: 10px;
  border-left: 1px solid rgba(34, 32, 0, 0.22);
  font-size: 17px;
  letter-spacing: 0.05em;
}

.rewrite-limit {
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.rewrite-limit .icon {
  width: 15px;
  height: 15px;
}

.rewrite-target {
  padding: 17px 18px 15px;
  border: 1px solid #bad7e6;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 40, 48, 0.055);
}

.rewrite-sentence {
  color: var(--text);
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 600;
  line-height: 2.65;
}

.rewrite-gap-wrap {
  display: inline-flex;
  align-items: center;
  margin: 0 5px;
  vertical-align: middle;
}

.rewrite-inline-input {
  display: inline-block;
  width: clamp(190px, 31vw, 420px);
  min-height: 48px;
  padding: 5px 11px;
  border: 0;
  border-bottom: 3px solid var(--teal);
  border-radius: 7px 7px 2px 2px;
  background: #eef8ff;
  color: var(--text);
  font-size: 17px;
  font-weight: 750;
  line-height: 1.3;
  text-align: center;
  vertical-align: middle;
}

.rewrite-inline-input:hover {
  background: #e3f3ff;
}

.rewrite-inline-input:focus {
  border-bottom-color: var(--teal-dark);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(8, 118, 189, 0.13);
  outline: 0;
}

.rewrite-inline-input.gap-correct,
.rewrite-inline-input.gap-incorrect {
  border: 2px solid currentColor;
  border-bottom-width: 3px;
}

.rewrite-full-input {
  min-height: 48px;
  margin-top: 7px;
  font-size: 16px;
}

.rewrite-answer-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11.5px;
}

.rewrite-answer-meta .outside-limit {
  color: var(--amber);
  font-weight: 800;
}

.rewrite-task .feedback-note {
  margin-top: -5px;
  border-radius: 9px;
}

@media (max-width: 760px) {
  .rewrite-settings-grid {
    grid-template-columns: 1fr;
  }

  .rewrite-target {
    padding: 14px;
  }

  .rewrite-sentence {
    font-size: 18px;
    line-height: 2.9;
  }

  .rewrite-inline-input {
    width: min(100%, 280px);
    min-height: 48px;
  }
}

/* ---- from rewrite-refined-20260713.css ---- */
/* Refined key word transformations — cache-isolated release 2026-07-13 */

.rewrite-task {
  --rewrite-border: #dce7eb;
  --rewrite-accent: #4b8faa;
  --rewrite-accent-surface: #f5fafc;
  --rewrite-key-surface: #f2f8fb;
  display: grid;
  gap: 16px;
  margin-top: 0;
}

.rewrite-original {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 0 0 16px;
  border: 0;
  border-bottom: 1px solid var(--rewrite-border);
  border-radius: 0;
  background: transparent;
}

.rewrite-original > span,
.rewrite-target-label {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
}

.rewrite-original p {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
}

.rewrite-rule-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 32px;
  flex-wrap: wrap;
}

.rewrite-keyword {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.rewrite-keyword small {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.rewrite-keyword strong {
  padding: 4px 8px;
  border: 1px solid #b9d5e4;
  border-radius: 8px;
  background: var(--rewrite-key-surface);
  color: #17465c;
  font-size: 14px;
  letter-spacing: 0.035em;
}

.rewrite-limit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.rewrite-limit::before {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.rewrite-target {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.rewrite-target-label {
  padding-top: 12px;
}

.rewrite-sentence {
  min-width: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.7;
}

.rewrite-gap-wrap {
  display: inline-flex;
  align-items: center;
  margin: 0 4px;
  vertical-align: middle;
}

.rewrite-inline-input {
  display: inline-block;
  width: clamp(168px, 24vw, 320px);
  min-height: 48px;
  padding: 8px 12px 4px;
  border: 0;
  border-bottom: 2px solid var(--rewrite-accent);
  border-radius: 4px 4px 0 0;
  background: var(--rewrite-accent-surface);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  vertical-align: middle;
}

.rewrite-inline-input::placeholder {
  color: var(--muted);
  font-weight: 500;
}

.rewrite-inline-input:hover {
  background: #edf6f9;
}

.rewrite-inline-input:focus {
  border-bottom-color: var(--teal-dark);
  background: #fff;
  box-shadow: none;
}

.rewrite-inline-input:focus-visible {
  outline: 3px solid var(--teal-dark);
  outline-offset: 2px;
}

.rewrite-inline-input.gap-correct,
.rewrite-inline-input.gap-incorrect {
  border: 2px solid currentColor;
  border-bottom-width: 3px;
  border-radius: 8px;
}

.rewrite-full-input {
  min-height: 48px;
  margin-top: 0;
  font-size: 16px;
}

.rewrite-answer-meta {
  grid-column: 2;
  justify-content: flex-start;
  gap: 8px;
  margin-top: -8px;
  color: var(--muted);
  font-size: 12px;
}

.rewrite-task .feedback-note {
  margin-top: -4px;
  border-radius: 8px;
}

@media (forced-colors: active) {
  .rewrite-inline-input:focus-visible {
    outline: 3px solid ButtonText;
  }
}

@media (max-width: 760px) {
  .rewrite-original,
  .rewrite-target {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .rewrite-target {
    padding: 0;
  }

  .rewrite-target-label {
    padding-top: 0;
  }

  .rewrite-sentence {
    font-size: 18px;
    line-height: 1.7;
  }

  .rewrite-inline-input {
    width: min(100%, 248px);
    min-height: 48px;
  }

  .rewrite-answer-meta {
    grid-column: 1;
    margin-top: 0;
  }
}

/* ---- from audio-transcript-20260713.css ---- */
/* Automatic listening transcripts and synchronized subtitles — release 2026-07-13 */

.audio-script-editor {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.audio-script-editor summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.audio-script-editor label {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.audio-script-editor textarea {
  min-height: 160px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
}

.audio-script-editor p {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 400;
}

.attempt-audio-item,
.question-audio-item {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.attempt-audio-item {
  flex: 1 1 520px;
}

.question-audio-item {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.audio-player-main {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.audio-player-main audio {
  width: 100%;
  min-width: 160px;
  height: 40px;
}

.transcript-toggle {
  min-height: 44px;
  padding: 0 12px;
  white-space: nowrap;
}

.transcript-toggle[aria-pressed="true"] {
  border-color: var(--teal);
  background: var(--teal-soft);
  color: var(--teal-dark);
}

.cc-mark {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 22px;
  padding: 0 4px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.attempt-shell.theme-dark .question-audio-item {
  border-color: #24424f;
  background: #10222b;
}

.attempt-shell.theme-dark .transcript-toggle {
  border-color: #40616f;
  background: #16313c;
  color: #e8f1f4;
}

.attempt-shell.theme-dark .transcript-toggle[aria-pressed="true"] {
  border-color: #7fd6d8;
  color: #7fd6d8;
}

@media (max-width: 760px) {
  .attempt-audio-bar {
    align-items: stretch;
  }

  .audio-player-main {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .audio-player-main .attempt-audio-label {
    white-space: normal;
  }

  .audio-player-main audio {
    min-width: 0;
  }

  .transcript-toggle {
    width: 100%;
  }

}

/* ---- from audio-subtitle-current-20260713.css ---- */
/* Compact current-cue subtitles — release 2026-07-13 */

.audio-transcript-panel {
  display: block;
  padding: 8px 12px;
  border: 1px solid #284957;
  border-radius: 8px;
  background: #102b37;
  color: #fff;
  box-shadow: 0 4px 12px rgba(10, 31, 40, 0.1);
}

.caption-current {
  min-height: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  scrollbar-width: thin;
  white-space: nowrap;
}

.attempt-shell.theme-contrast .audio-transcript-panel {
  border: 2px solid #fff;
  background: #000;
}

@media (max-width: 760px) {
  .caption-current {
    font-size: 14px;
  }
}

@media (forced-colors: active) {
  .audio-transcript-panel {
    border: 2px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
}

/* ============================================================
   CBT attempt shell — Cambridge/IELTS digital-exam look (2026-07-15)
   CrushIELTS colours: blue = var(--teal) #0876bd, red = var(--brand-red),
   yellow = var(--brand-yellow). Layout mirrors the Inspera player:
   white top bar with icon buttons, one part on screen at a time,
   a fixed bottom bar with part tabs + question numbers, and big
   back/next square arrows above it.
   ============================================================ */

.cbt-shell {
  background: #f2f7fa;
}

/* --- Top bar --- */

.cbt-topbar {
  flex-wrap: nowrap;
  gap: 10px;
  padding: 8px 14px;
  min-height: 56px;
}

.cbt-back {
  flex: 0 0 auto;
}

.cbt-logo {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

.cbt-title {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  line-height: 1.25;
}

.cbt-title h1 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cbt-title span {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cbt-status {
  font-size: 12.5px;
  white-space: nowrap;
}

.cbt-iconbtn {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 8px;
  flex: 0 0 auto;
}

.cbt-iconbtn .icon {
  width: 21px;
  height: 21px;
}

.cbt-iconbtn.active {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal-dark);
}

/* --- Bottom navigation bar --- */

.cbt-bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: stretch;
  background: #fff;
  border-top: 1px solid var(--line-strong);
  min-height: 56px;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.cbt-tabs {
  flex: 1;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: thin;
}

.cbt-tab {
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: #eef1f4;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 700;
  padding: 6px 16px;
  min-height: 56px;
  cursor: pointer;
}

.cbt-tab:hover {
  background: #e2e9ee;
  box-shadow: none;
}

.cbt-tab.active {
  background: #fff;
  cursor: default;
}

.cbt-tab-name {
  white-space: nowrap;
}

.cbt-tab-count {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

.cbt-qnums {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.cbt-qnum {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border: 1.6px solid #4b5a66;
  border-radius: 4px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cbt-qnum:hover {
  border-color: var(--teal);
  box-shadow: none;
  background: var(--teal-soft);
}

.cbt-qnum.done {
  background: #2e3d49;
  border-color: #2e3d49;
  color: #fff;
}

.cbt-qnum.done:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
}

.cbt-finish {
  flex: 0 0 auto;
  width: 64px;
  border: 0;
  border-left: 1px solid var(--line-strong);
  border-radius: 0;
  background: #eef1f4;
  min-height: 56px;
}

.cbt-finish .icon {
  width: 22px;
  height: 22px;
}

.cbt-finish:hover {
  background: #e2e9ee;
  box-shadow: none;
}

.cbt-finish.active {
  background: var(--teal);
  color: #fff;
}

/* --- Back / next square arrows ---
   They live inside the bottom bar in the markup: on a wide screen they float
   just above it, and on a phone they stay docked in the bar so they never sit
   on top of the question a student is reading. */

.cbt-arrows {
  position: absolute;
  right: 16px;
  bottom: calc(100% + 14px);
  z-index: 55;
  display: flex;
  gap: 8px;
}

.cbt-arrow {
  width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(15, 40, 48, 0.22);
}

.cbt-arrow .icon {
  width: 22px;
  height: 22px;
}

.cbt-arrow-back {
  background: #cfd6db;
  color: #465059;
}

.cbt-arrow-back:hover {
  background: #bfc9d0;
}

.cbt-arrow-next {
  background: var(--teal);
  color: #fff;
}

.cbt-arrow-next:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
}

.cbt-arrow:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

/* Keep content clear of the fixed bottom bar and arrows. */
.cbt-shell .attempt-body {
  padding-bottom: 140px;
}

.cbt-shell .attempt-notes-rail {
  max-height: calc(100vh - 54px - 56px);
}

/* --- "Questions 1–8" instruction box --- */

.cbt-instructions {
  background: var(--reading-bg, #fff);
  color: var(--reading-text, var(--text));
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  /* Kept deliberately compact: every pixel here is taken from the passage and
     questions below, which is where students actually work. */
  padding: 8px 14px;
  margin-bottom: 10px;
  font-size: calc(var(--reading-size, 16px) * 0.95);
  line-height: 1.5;
}

.cbt-instructions-range {
  display: inline;
  font-weight: 800;
  margin-right: 8px;
}

/* Flow the first instruction line on after the "Questions X–Y" label; any
   further paragraphs keep their own line. */
.cbt-instructions-body {
  display: inline;
}

.cbt-instructions-body p {
  margin: 2px 0 0;
}

.cbt-instructions-body p:first-child {
  display: inline;
}

/* Question number badge: square, exam style. */
.q-badge {
  border-radius: 4px;
  border: 1.6px solid #4b5a66;
  background: #fff;
  color: var(--text);
  min-width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

/* --- Notes panel (Inspera-style) --- */

.notes-rail-empty {
  display: grid;
  gap: 8px;
  text-align: center;
  padding: 26px 10px;
  color: var(--muted);
}

.notes-rail-empty strong {
  font-size: 16px;
  color: var(--text);
}

.notes-rail-empty span {
  font-size: 13px;
}

/* --- Submission page --- */

.cbt-submission {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 0;
}

.cbt-submission h2 {
  font-size: 24px;
  margin: 6px 0 10px;
}

.cbt-submission-parts {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.cbt-submission-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  min-height: 56px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 700;
}

.cbt-submission-row .icon {
  color: var(--muted);
}

.cbt-submission-row:hover {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.warn-text {
  color: var(--amber);
  font-weight: 750;
}

.good-text {
  font-weight: 750;
}

.cbt-submit-btn {
  min-height: 48px;
  font-size: 16px;
  padding: 0 28px;
}

.cbt-results {
  margin-top: 6px;
  display: grid;
  gap: 0;
}

/* --- Options modal --- */

.cbt-options-overlay {
  position: fixed;
  inset: 54px 0 56px;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  background: transparent;
  padding: 12px 18px;
}

.cbt-options {
  width: min(390px, calc(100vw - 24px));
  max-height: calc(100vh - 134px);
  overflow-y: auto;
  margin: 0;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 40, 48, 0.24);
}

.cbt-options-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  min-height: 34px;
}

.cbt-options-head h2 {
  margin: 0;
  font-size: 18px;
}

.cbt-options-close {
  position: absolute;
  right: 0;
  top: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
}

.cbt-options-close .icon {
  width: 20px;
  height: 20px;
}

.opt-group {
  display: grid;
  gap: 8px;
}

.opt-group h3 {
  margin: 5px 0 0;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.opt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  min-height: 42px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.opt-row:hover {
  border-color: var(--teal);
  box-shadow: none;
}

.opt-row.selected {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.opt-row-static {
  cursor: default;
}

.opt-row-static:hover {
  border-color: var(--line-strong);
}

.opt-row-primary {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.opt-row-primary:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
}

.opt-row-primary .opt-label {
  flex: 1;
}

.opt-label {
  flex: 1;
}

.opt-check {
  width: 18px;
  min-width: 18px;
  display: inline-flex;
  justify-content: center;
}

.opt-check .icon {
  width: 16px;
  height: 16px;
}

.opt-swatch {
  width: 38px;
  height: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 4px 6px;
}

.opt-group-text {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.opt-group-text h3,
.opt-group-text .opt-row-static {
  grid-column: 1 / -1;
}

.opt-group-text > .opt-row:not(.opt-row-static) {
  justify-content: center;
  gap: 5px;
  padding-inline: 7px;
  text-align: center;
}

.opt-group-text > .opt-row:not(.opt-row-static) .opt-label {
  flex: 0 1 auto;
}

.opt-group-text > .opt-row:not(.opt-row-static) .opt-check:empty {
  display: none;
}

.opt-group-spacing .opt-row-static {
  min-height: 44px;
}

.opt-group-spacing .pill-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.opt-group-spacing .pill-row button {
  min-height: 32px;
  border-color: transparent;
  background: transparent;
}

.opt-group-spacing .pill-row button.active,
.opt-group-spacing .pill-row button[aria-pressed="true"] {
  border-color: var(--teal);
  background: var(--teal-soft);
  color: var(--teal-dark);
  box-shadow: inset 0 0 0 1px var(--teal);
}

.opt-swatch i {
  display: block;
  height: 2.5px;
  border-radius: 2px;
}

.swatch-default { background: #fff; }
.swatch-default i { background: #111; }
.swatch-sepia { background: #f6ecd9; }
.swatch-sepia i { background: #4b3a25; }
.swatch-dark { background: #111; }
.swatch-dark i { background: #fff; }
.swatch-yellow { background: #111; }
.swatch-yellow i { background: var(--brand-yellow); }
.swatch-contrast { background: #fff; border-color: #000; }
.swatch-contrast i { background: #000; height: 3.5px; }

/* --- Theme support for the new chrome --- */

.attempt-shell.theme-dark .cbt-bottombar,
.attempt-shell.theme-yellow .cbt-bottombar {
  background: #141d23;
  border-top-color: #33454f;
}

.attempt-shell.theme-dark .cbt-tab,
.attempt-shell.theme-yellow .cbt-tab,
.attempt-shell.theme-dark .cbt-finish,
.attempt-shell.theme-yellow .cbt-finish {
  background: #1d2830;
  color: #dbe5ea;
  border-color: #33454f;
}

.attempt-shell.theme-dark .cbt-tab.active,
.attempt-shell.theme-yellow .cbt-tab.active {
  background: #141d23;
}

.attempt-shell.theme-dark .cbt-tab-count,
.attempt-shell.theme-yellow .cbt-tab-count {
  color: #9fb2bc;
}

.attempt-shell.theme-dark .cbt-qnum,
.attempt-shell.theme-yellow .cbt-qnum {
  background: #141d23;
  color: #dbe5ea;
  border-color: #7d919d;
}

.attempt-shell.theme-dark .cbt-qnum.done,
.attempt-shell.theme-yellow .cbt-qnum.done {
  background: #dbe5ea;
  color: #10202b;
  border-color: #dbe5ea;
}

.attempt-shell.theme-dark .cbt-instructions {
  background: #22303a;
  border-color: #3a4a56;
  color: #e8eef2;
}

.attempt-shell.theme-dark .cbt-options-overlay,
.attempt-shell.theme-yellow .cbt-options-overlay {
  background: transparent;
}

.attempt-shell.theme-dark .cbt-options,
.attempt-shell.theme-yellow .cbt-options {
  border-color: #3a4a56;
  background: #10181d;
}

.attempt-shell.theme-dark .cbt-options-head h2,
.attempt-shell.theme-yellow .cbt-options-head h2 {
  color: #e8eef2;
}

.attempt-shell.theme-dark .opt-row,
.attempt-shell.theme-yellow .opt-row {
  background: #1d2830;
  border-color: #3a4a56;
  color: #e8eef2;
}

.attempt-shell.theme-dark .cbt-options-close,
.attempt-shell.theme-yellow .cbt-options-close {
  color: #e8eef2;
}

.attempt-shell.theme-dark .opt-group-spacing .pill-row button.active,
.attempt-shell.theme-dark .opt-group-spacing .pill-row button[aria-pressed="true"],
.attempt-shell.theme-yellow .opt-group-spacing .pill-row button.active,
.attempt-shell.theme-yellow .opt-group-spacing .pill-row button[aria-pressed="true"] {
  border-color: #77d7d7;
  background: #24424a;
  color: #fff;
  box-shadow: inset 0 0 0 1px #77d7d7;
}

.attempt-shell.theme-dark .q-badge {
  background: #141d23;
  color: #dbe5ea;
  border-color: #7d919d;
}

/* Yellow on black — high-visibility theme, exam-style. */
.attempt-shell.theme-yellow {
  --reading-bg: #0d0d0d;
  --reading-text: #ffe867;
  background: #000;
}

.attempt-shell.theme-yellow .attempt-topbar {
  background: #0d0d0d;
  border-bottom-color: #3d3d1f;
}

.attempt-shell.theme-yellow .attempt-topbar h1,
.attempt-shell.theme-yellow .cbt-title span,
.attempt-shell.theme-yellow .cbt-status {
  color: #ffe867;
}

.attempt-shell.theme-yellow .attempt-audio-bar {
  background: #14140a;
  border-bottom-color: #3d3d1f;
}

.attempt-shell.theme-yellow .attempt-audio-label {
  color: #ffe867;
}

.attempt-shell.theme-yellow .question-card,
.attempt-shell.theme-yellow .gap-inline-text,
.attempt-shell.theme-yellow .answer-choice,
.attempt-shell.theme-yellow .match-row,
.attempt-shell.theme-yellow .match-slot,
.attempt-shell.theme-yellow .bank-chip,
.attempt-shell.theme-yellow .token-text,
.attempt-shell.theme-yellow .cbt-instructions,
.attempt-shell.theme-yellow .attempt-passage,
.attempt-shell.theme-yellow .section-instructions,
.attempt-shell.theme-yellow .rewrite-task,
.attempt-shell.theme-yellow .rewrite-original,
.attempt-shell.theme-yellow .rewrite-target {
  background: #0d0d0d;
  border-color: #55552b;
  color: #ffe867;
}

.attempt-shell.theme-yellow .question-prompt,
.attempt-shell.theme-yellow .match-item,
.attempt-shell.theme-yellow .match-bank-heading,
.attempt-shell.theme-yellow .match-bank-heading strong,
.attempt-shell.theme-yellow .token,
.attempt-shell.theme-yellow label,
.attempt-shell.theme-yellow .muted,
.attempt-shell.theme-yellow .attempt-passage,
.attempt-shell.theme-yellow .cbt-instructions-body,
.attempt-shell.theme-yellow p {
  color: #ffe867;
}

.attempt-shell.theme-yellow input,
.attempt-shell.theme-yellow select,
.attempt-shell.theme-yellow textarea {
  background: #000;
  border-color: #6b6b36;
  color: #ffe867;
}

.attempt-shell.theme-yellow .q-badge {
  background: #000;
  color: #ffe867;
  border-color: #b3b35c;
}

.attempt-shell.theme-yellow .match-question-number {
  background: #1a1a0d;
  border-color: #55552b;
  color: #ffe867;
}

.attempt-shell.theme-yellow button:not(.primary):not(.cbt-arrow):not(.cbt-qnum):not(.cbt-tab):not(.cbt-finish) {
  background: #1a1a0d;
  color: #ffe867;
  border-color: #6b6b36;
}

.attempt-shell.theme-yellow .attempt-notes-rail {
  background: #0d0d0d;
  border-left-color: #3d3d1f;
}

.attempt-shell.theme-yellow .note-card {
  background: #14140a;
  border-color: #55552b;
  color: #ffe867;
}

.attempt-shell.theme-yellow .notes-rail-empty strong,
.attempt-shell.theme-yellow .notes-rail-head h3 {
  color: #ffe867;
}

/* A question group is one exercise sheet: its directions are the attached cap,
   and every question below remains inside the same visible boundary. */
.attempt-shell.theme-sepia .attempt-question-group {
  border-color: #cbbd9f;
  background: #fdf8ec;
}

.attempt-shell.theme-sepia .attempt-question-group-header {
  border-top-color: #8a6840;
  border-bottom-color: #cbbd9f;
  background: linear-gradient(135deg, #efe2c8, #f8f0df);
  color: #433422;
}

.attempt-shell.theme-sepia .attempt-question-group-header .cbt-instructions-range,
.attempt-shell.theme-sepia .attempt-question-group-header .cbt-instructions-body,
.attempt-shell.theme-sepia .attempt-question-group-title {
  color: #433422;
}

.attempt-shell.theme-sepia .attempt-question-group-body {
  background: #f6eddb;
}

.attempt-shell.theme-dark .attempt-question-group {
  border-color: #4b6b7b;
  background: #22303a;
  box-shadow: none;
}

.attempt-shell.theme-dark .attempt-question-group:focus-within {
  border-color: #7fcbe9;
  box-shadow: 0 0 0 3px rgba(127, 203, 233, 0.18);
}

.attempt-shell.theme-dark .attempt-question-group-header {
  border-top-color: #7fcbe9;
  border-bottom-color: #4b6b7b;
  background: #183440;
  color: #e8f5fb;
}

.attempt-shell.theme-dark .attempt-question-group-header .cbt-instructions-range,
.attempt-shell.theme-dark .attempt-question-group-header .cbt-instructions-body,
.attempt-shell.theme-dark .attempt-question-group-title {
  color: #e8f5fb;
}

.attempt-shell.theme-dark .attempt-question-group-body {
  background: #18242c;
}

.attempt-shell.theme-yellow .attempt-question-group {
  border-color: #a9a951;
  background: #0d0d0d;
  box-shadow: none;
}

.attempt-shell.theme-yellow .attempt-question-group:focus-within {
  border-color: #ffe867;
  box-shadow: 0 0 0 3px rgba(255, 232, 103, 0.24);
}

.attempt-shell.theme-yellow .attempt-question-group-header {
  border-top-color: #ffe867;
  border-bottom-color: #77773b;
  background: #1a1a0d;
  color: #ffe867;
}

.attempt-shell.theme-yellow .attempt-question-group-header .cbt-instructions-range,
.attempt-shell.theme-yellow .attempt-question-group-header .cbt-instructions-body,
.attempt-shell.theme-yellow .attempt-question-group-title {
  color: #ffe867;
}

.attempt-shell.theme-yellow .attempt-question-group-body {
  background: #050505;
}

.attempt-shell.theme-contrast .attempt-question-group {
  border: 3px solid #000;
  background: #fff;
  box-shadow: none;
}

.attempt-shell.theme-contrast .attempt-question-group:focus-within {
  outline: 3px solid #000;
  outline-offset: 3px;
  box-shadow: none;
}

.attempt-shell.theme-contrast .attempt-question-group-header {
  border-top: 5px solid #000;
  border-bottom: 2px solid #000;
  background: #fff;
  color: #000;
}

.attempt-shell.theme-contrast .attempt-question-group-header .cbt-instructions-range,
.attempt-shell.theme-contrast .attempt-question-group-header .cbt-instructions-body,
.attempt-shell.theme-contrast .attempt-question-group-title {
  color: #000;
}

.attempt-shell.theme-contrast .attempt-question-group-body {
  background: #fff;
}

@media (max-width: 600px) {
  .attempt-questions.has-groups {
    gap: 20px;
  }

  .attempt-question-group {
    border-radius: 10px;
  }

  .attempt-question-group > .attempt-question-group-header {
    padding: 11px 12px 12px;
  }

  .attempt-question-group-body {
    gap: 8px;
    padding: 8px;
  }
}

@media print {
  .attempt-question-group {
    box-shadow: none;
  }

  .attempt-question-group > .attempt-question-group-header {
    break-after: avoid;
  }
}

@media (forced-colors: active) {
  .attempt-question-group {
    border: 2px solid CanvasText;
    background: Canvas;
    box-shadow: none;
  }

  .attempt-question-group > .attempt-question-group-header {
    border-top: 4px solid Highlight;
    border-bottom: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .attempt-question-group-body {
    background: Canvas;
  }
}

/* --- Small screens --- */

@media (max-width: 760px) {
  .question-reference-media > .question-media-stack {
    position: static;
  }

  .matching-task-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .match-grid {
    order: 1;
  }

  .match-bank-panel {
    order: 2;
  }

  .match-row {
    grid-template-columns: minmax(90px, 0.65fr) minmax(0, 1.35fr);
    gap: 10px;
  }

  .match-bank {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  }

  .cbt-status {
    display: none;
  }

  .cbt-topbar {
    flex-wrap: wrap;
  }

  .cbt-title h1 {
    font-size: 14px;
  }

  .cbt-tab {
    padding: 6px 10px;
    font-size: 12.5px;
  }

  /* Docked in the bar on phones — nothing floats over the questions. */
  .cbt-arrows {
    position: static;
    order: -1;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    padding: 6px 6px 6px 8px;
    border-right: 1px solid var(--line);
  }

  .cbt-arrow {
    width: 38px;
    height: 38px;
    min-height: 38px;
    border-radius: 9px;
    box-shadow: none;
  }

  .cbt-shell .attempt-body {
    padding-bottom: 96px;
  }
}

@media (max-width: 480px) {
  .match-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .match-item {
    padding-left: 2px;
  }

  .match-bank-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .match-bank-heading span {
    text-align: left;
  }
}

/* Class answer review: complete source context, submitted responses and item-level keys. */
.class-review-question-card {
  display: grid;
  gap: 18px;
}
.class-review-question-intro {
  display: grid;
  gap: 14px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--line);
}
.class-review-question-intro .question-prompt {
  margin: 0;
}
.class-review-original-question {
  display: grid;
  gap: 7px;
}
.class-review-source-label,
.class-review-context-label {
  display: block;
  width: max-content;
  color: #4c6675;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.class-review-source-label {
  margin-bottom: 12px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #e8f3f7;
  color: #235d70;
}
.class-review-items {
  display: grid;
  gap: 13px;
}
.class-review-item {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid #dbe4eb;
  border-radius: 15px;
  background: #fbfcfe;
  box-shadow: 0 4px 15px rgb(38 56 73 / 5%);
  scroll-margin: 175px;
}
.class-review-item-context {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid #d4e1e7;
  border-radius: 12px;
  background: #fff;
}
.class-review-context-block {
  display: grid;
  gap: 7px;
}
.class-review-context-stem,
.class-review-rewrite-context p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.55;
}
.class-review-choice-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 7px;
}
.class-review-context-choice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #dbe5ea;
  border-radius: 10px;
  background: #f8fbfc;
}
.class-review-context-choice > span {
  display: grid;
  flex: none;
  place-items: center;
  min-width: 24px;
  min-height: 24px;
  border-radius: 7px;
  background: #e5f1f5;
  color: #245f73;
  font-size: 11px;
  font-weight: 850;
}
.class-review-context-choice > strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}
.class-review-given-word {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}
.class-review-given-word strong {
  width: max-content;
  padding: 6px 9px;
  border-radius: 8px;
  background: #eef4f7;
  color: #284e60;
  font-size: 13px;
  letter-spacing: .04em;
}
.class-review-rewrite-target {
  padding: 11px 12px;
  border: 1px solid #d7e2e7;
  border-radius: 10px;
  background: #f8fbfc;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}
.class-review-rewrite-target > span {
  display: inline-block;
  min-width: 86px;
  margin: 0 4px;
  border-bottom: 2px solid #6f8d9a;
  color: #6f8d9a;
  text-align: center;
}
.class-review-context-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.class-review-context-meta > span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #eef4f7;
  color: #526979;
  font-size: 11px;
  font-weight: 700;
}
.class-review-item.is-revealed {
  border-color: #99cfb4;
  background: #f8fffb;
}
.class-review-item-head,
.class-review-item-head > div,
.class-review-item-head > div > span:last-child {
  display: flex;
  align-items: center;
}
.class-review-item-head {
  justify-content: space-between;
  gap: 12px;
}
.class-review-item-head > div {
  gap: 10px;
  min-width: 0;
}
.class-review-item-head > div > span:last-child {
  align-items: flex-start;
  flex-direction: column;
  min-width: 0;
}
.class-review-item-head strong {
  color: var(--text);
  line-height: 1.35;
}
.class-review-item-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.class-review-response-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 9px;
}
.class-review-response-group {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #dbe4eb;
  border-radius: 12px;
  background: #fff;
}
.class-review-response-group > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 9px;
}
.class-review-response-group strong {
  overflow-wrap: anywhere;
  color: #172331;
}
.class-review-response-group span {
  flex: none;
  padding: 2px 7px;
  border-radius: 999px;
  background: #edf4f8;
  color: #4a6172;
  font-size: 11px;
  font-weight: 800;
}
.class-review-response-group small {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.class-review-response-group.is-empty {
  border-style: dashed;
  background: #fafafa;
}
.class-review-no-responses {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px dashed #cfd9e1;
  border-radius: 12px;
  color: var(--muted);
}
.class-review-no-responses .icon {
  flex: none;
}
.attempt-shell.theme-dark .class-review-item,
.attempt-shell.theme-yellow .class-review-item,
.attempt-shell.theme-dark .class-review-response-group,
.attempt-shell.theme-yellow .class-review-response-group,
.attempt-shell.theme-dark .class-review-item-context,
.attempt-shell.theme-yellow .class-review-item-context,
.attempt-shell.theme-dark .class-review-context-choice,
.attempt-shell.theme-yellow .class-review-context-choice,
.attempt-shell.theme-dark .class-review-rewrite-target,
.attempt-shell.theme-yellow .class-review-rewrite-target {
  border-color: #3a4d57;
  background: #162a33;
}
.attempt-shell.theme-dark .class-review-item-head strong,
.attempt-shell.theme-yellow .class-review-item-head strong,
.attempt-shell.theme-dark .class-review-response-group strong,
.attempt-shell.theme-yellow .class-review-response-group strong,
.attempt-shell.theme-dark .class-review-context-choice strong,
.attempt-shell.theme-yellow .class-review-context-choice strong,
.attempt-shell.theme-dark .class-review-context-stem,
.attempt-shell.theme-yellow .class-review-context-stem,
.attempt-shell.theme-dark .class-review-rewrite-context p,
.attempt-shell.theme-yellow .class-review-rewrite-context p {
  color: #f5f8fa;
}
.attempt-shell.theme-dark .class-review-context-label,
.attempt-shell.theme-yellow .class-review-context-label {
  color: #a9c7d3;
}
.attempt-shell.theme-dark .class-review-source-label,
.attempt-shell.theme-yellow .class-review-source-label,
.attempt-shell.theme-dark .class-review-context-choice > span,
.attempt-shell.theme-yellow .class-review-context-choice > span,
.attempt-shell.theme-dark .class-review-given-word strong,
.attempt-shell.theme-yellow .class-review-given-word strong,
.attempt-shell.theme-dark .class-review-context-meta > span,
.attempt-shell.theme-yellow .class-review-context-meta > span {
  background: #233f4b;
  color: #c2e4ef;
}
@media (max-width: 760px) {
  .class-review-item {
    padding: 12px;
  }
  .class-review-item-head {
    align-items: stretch;
    flex-direction: column;
  }
  .class-review-question-toggle {
    width: 100%;
  }
  .class-review-response-groups {
    grid-template-columns: 1fr;
  }
}

/* Submission page in the dark themes. */
.attempt-shell.theme-dark .cbt-submission h2,
.attempt-shell.theme-dark .cbt-submission .muted {
  color: #e8eef2;
}

.attempt-shell.theme-yellow .cbt-submission h2,
.attempt-shell.theme-yellow .cbt-submission .muted {
  color: #ffe867;
}

.attempt-shell.theme-dark .cbt-submission-row {
  background: #1d2830;
  border-color: #3a4a56;
  color: #e8eef2;
}

/* Final overrides for teacher workspace rules declared before the merged legacy CSS. */
@media (min-width: 761px) {
  .app-shell > .sidebar {
    position: sticky;
    top: 68px;
    align-self: start;
    height: calc(100vh - 68px);
    max-height: calc(100vh - 68px);
    overflow-y: auto;
  }
}

.class-card { cursor: default; }
.class-card-stats { grid-template-columns: repeat(4, 1fr); }
.class-card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; }
.class-layout-list { grid-template-columns: 1fr; }
.class-layout-list .class-card { grid-template-columns: minmax(220px, 1fr) minmax(420px, 2fr) auto; align-items: center; min-height: 0; padding: 15px 18px; }

@media (max-width: 980px) {
  .class-layout-list .class-card { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .app-shell > .sidebar { position: sticky; top: 0; z-index: 25; height: auto; max-height: none; }
  .sidebar-spacer { display: none; }
  .sidebar > [data-action="logout"] { position: sticky; right: 0; margin-left: auto; background: #fbfdfd; box-shadow: -10px 0 12px #fbfdfd; }
  .topbar .brand { min-width: 0; gap: 7px; font-size: 13px; }
  .topbar .brand-logo { width: 32px; height: 32px; }
  .topbar .top-actions { flex: 0 0 auto; }
  .topbar .user-chip { min-height: 36px; padding: 0 6px; }
  .topbar .user-chip > span:not(.avatar) { display: none; }
}

/* Mobile and cross-platform compatibility */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
.boot,
.auth-screen,
.auth-copy,
.role-screen,
.app-shell,
.attempt-shell {
  min-height: 100vh;
  min-height: 100dvh;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

input,
select,
textarea,
[contenteditable="true"] {
  min-width: 0;
  max-width: 100%;
}

.table-wrap,
.cbt-tabs,
.attempt-topbar,
.attempt-audio-bar {
  -webkit-overflow-scrolling: touch;
}

@supports (height: 100dvh) {
  .attempt-shell,
  .cbt-shell {
    height: 100dvh;
  }

  .app-shell > .sidebar {
    height: calc(100dvh - 68px);
    max-height: calc(100dvh - 68px);
  }
}

@media (hover: none) {
  button:hover {
    transform: none;
  }
}

@media (pointer: coarse), (max-width: 1024px) {
  button,
  [role="button"],
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea,
  .answer-choice {
    min-height: 44px !important;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px;
  }

  .icon-button,
  .layout-switcher button,
  .cbt-iconbtn,
  .cbt-arrow,
  .cbt-options-close {
    min-width: 44px;
    width: 44px;
    min-height: 44px !important;
    height: 44px;
  }

  .overlay {
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
  }

  .topbar,
  .attempt-topbar {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  .cbt-bottombar {
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
  }

}

@media (max-width: 760px) {
  body {
    overflow-x: clip;
  }

  .app-shell,
  .main,
  .page,
  .panel,
  .list-row,
  .row-actions,
  .attempt-body,
  .attempt-passage,
  .attempt-questions {
    min-width: 0;
    max-width: 100%;
  }

  .list-row,
  .row-actions,
  .modal-actions {
    flex-wrap: wrap;
  }

  .modal-actions > button {
    flex: 1 1 130px;
  }
}

/* Integrated live lesson management */
.live-lessons-workspace {
  max-width: 1480px;
}

.lesson-library-type-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.lesson-library-type-tabs > button {
  min-height: 68px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  border-color: #d2dde3;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.lesson-library-type-tabs > button.active {
  border-color: var(--teal);
  background: var(--teal-soft);
  box-shadow: inset 0 0 0 1px var(--teal);
}

.lesson-library-type-tabs .icon { width: 24px; height: 24px; color: var(--teal-dark); }
.lesson-library-type-tabs span { min-width: 0; display: grid; gap: 2px; }
.lesson-library-type-tabs strong { font-size: 15px; }
.lesson-library-type-tabs small { color: var(--muted); font-size: 11px; }

.lesson-library-shell {
  min-height: 610px;
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgb(15 40 48 / 6%);
}

.lesson-library-rail {
  min-width: 0;
  padding: 16px 12px;
  border-right: 1px solid var(--line);
  background: #f8fbfb;
}

.lesson-library-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding: 0 4px;
}

.lesson-library-rail-head > div { min-width: 0; display: grid; gap: 3px; }
.lesson-library-rail-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.lesson-library-rail-head > button { width: 34px; min-width: 34px; min-height: 34px; padding: 6px; }

.lesson-folder-root,
.lesson-folder-select {
  min-width: 0;
  display: grid;
  align-items: center;
  gap: 8px;
  border-color: transparent;
  background: transparent;
  color: #35505d;
  text-align: left;
}

.lesson-folder-root {
  width: 100%;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  padding: 9px 10px;
}

.lesson-folder-root.active,
.lesson-folder-select.active,
.lesson-folder-root:hover,
.lesson-folder-select:hover {
  border-color: #b9d9dc;
  background: #eaf7f6;
  color: var(--teal-dark);
}

.lesson-folder-root > span,
.lesson-folder-select > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 760; }
.lesson-folder-root small,
.lesson-folder-select small { color: var(--muted); font-size: 10px; }
.lesson-folder-root .icon,
.lesson-folder-select .icon { width: 17px; height: 17px; }

.lesson-library-folder-tree {
  max-height: min(56vh, 560px);
  display: grid;
  gap: 3px;
  margin-top: 5px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.lesson-library-folder-tree > .muted { margin: 10px 8px; font-size: 12px; line-height: 1.45; }
.lesson-library-folder-branch { display: grid; gap: 3px; }
.lesson-library-folder-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 2px;
  padding-left: var(--lesson-folder-indent, 0);
}

.lesson-folder-toggle,
.lesson-folder-toggle-spacer {
  width: 26px;
  min-width: 26px;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 5px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.lesson-folder-toggle .icon { width: 14px; height: 14px; }
.lesson-folder-select { width: 100%; min-height: 36px; grid-template-columns: 18px minmax(0, 1fr) auto; padding: 7px 8px; }

.lesson-library-content { min-width: 0; background: #fff; }
.lesson-library-toolbar,
.lesson-library-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}

.lesson-library-breadcrumbs { min-width: 0; display: flex; align-items: center; gap: 3px; overflow-x: auto; }
.lesson-library-breadcrumbs > button { min-height: 32px; padding: 5px 8px; border-color: transparent; background: transparent; white-space: nowrap; }
.lesson-library-breadcrumbs > .icon { width: 13px; min-width: 13px; color: var(--muted); }
.lesson-library-search { position: relative; width: min(330px, 44%); min-width: 210px; display: flex; align-items: center; }
.lesson-library-search > .icon { position: absolute; left: 11px; width: 16px; color: var(--muted); pointer-events: none; }
.lesson-library-search input { width: 100%; min-height: 39px; padding-left: 35px; }

.lesson-library-context { background: #fbfdfd; }
.lesson-library-context > div:first-child { min-width: 0; display: grid; gap: 2px; }
.lesson-library-context > div:first-child span { color: var(--muted); font-size: 11px; }
.lesson-library-context > div:last-child { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }

.lesson-library-folder-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 10px;
  padding: 16px 18px 0;
}

.lesson-library-folder-tiles > button {
  min-width: 0;
  min-height: 64px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border-color: #cfe0e3;
  background: #f8fbfb;
  color: #294651;
  text-align: left;
}

.lesson-library-folder-tiles > button:hover { border-color: var(--teal); background: var(--teal-soft); }
.lesson-library-folder-tiles .icon { color: var(--teal-dark); }
.lesson-library-folder-tiles span { min-width: 0; display: grid; gap: 2px; }
.lesson-library-folder-tiles strong,
.lesson-library-folder-tiles small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lesson-library-folder-tiles small { color: var(--muted); }

.lesson-library-content > .live-lesson-management-grid { padding: 18px; }
.lesson-library-content > .live-lesson-empty { margin: 18px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: #fbfdfd; }

.lesson-library-dialog { width: min(760px, 100%); }
.lesson-library-dialog .panel-head { align-items: flex-start; }
.lesson-library-dialog .panel-head > div { display: grid; gap: 4px; }
.lesson-library-dialog .panel-head p { margin: 0; color: var(--muted); line-height: 1.45; }
.lesson-library-dialog .panel-head > button { width: 36px; min-width: 36px; min-height: 36px; padding: 7px; }
.lesson-library-dialog form { padding: 18px; }
.lesson-library-dialog fieldset { min-width: 0; display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.lesson-library-dialog legend { margin-bottom: 7px; font-weight: 850; }
.lesson-access-options > label,
.lesson-class-options > label {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fbfdfd;
  cursor: pointer;
}
.lesson-access-options > label:has(input:checked),
.lesson-class-options > label:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); }
.lesson-access-options input,
.lesson-class-options input { width: 18px; min-width: 18px; height: 18px; margin-top: 2px; accent-color: var(--teal); }
.lesson-access-options span,
.lesson-class-options span { min-width: 0; display: grid; gap: 2px; }
.lesson-access-options small,
.lesson-class-options small { color: var(--muted); line-height: 1.35; }
.lesson-audience-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lesson-audience-columns > fieldset { align-content: start; max-height: 300px; padding: 1px 5px 1px 1px; overflow-y: auto; scrollbar-gutter: stable; }

@media (max-width: 700px) {
  .lesson-audience-columns { grid-template-columns: 1fr; }
  .lesson-audience-columns > fieldset { max-height: 230px; }
}

.live-lesson-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.live-lesson-summary > div {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.live-lesson-summary strong {
  color: var(--teal-dark);
  font-size: 24px;
  line-height: 1;
}

.live-lesson-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.live-lesson-management-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
}

.live-lesson-management-card {
  min-width: 0;
  min-height: 330px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 40, 48, 0.05);
}

.live-lesson-card-head,
.live-lesson-card-actions,
.live-lesson-folders {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.live-lesson-card-head {
  justify-content: space-between;
}

.live-lesson-card-head .muted {
  font-size: 11px;
}

.live-lesson-card-copy {
  display: grid;
  gap: 7px;
}

.live-lesson-card-copy h2,
.live-lesson-card-copy p {
  margin: 0;
}

.live-lesson-card-copy h2 {
  font-size: 20px;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.live-lesson-card-copy p {
  color: var(--muted);
  line-height: 1.5;
}

.live-lesson-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.live-lesson-meta > div {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--surface);
}

.live-lesson-meta span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.live-lesson-meta strong {
  overflow-wrap: anywhere;
}

.live-lesson-folders {
  min-height: 28px;
}

.live-lesson-folders > span {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 750;
}

.live-lesson-card-actions {
  margin-top: auto;
}

.live-lesson-card-actions .danger-button {
  margin-left: auto;
}

.live-lesson-empty {
  min-height: 320px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
}

.live-lesson-empty strong {
  color: var(--text);
  font-size: 20px;
}

.live-lesson-empty span {
  margin-bottom: 8px;
}

@media (max-width: 760px) {
  .lesson-library-type-tabs { grid-template-columns: 1fr; }
  .lesson-library-shell { grid-template-columns: minmax(0, 1fr); }
  .lesson-library-rail { border-right: 0; border-bottom: 1px solid var(--line); }
  .lesson-library-folder-tree { max-height: 240px; }
  .lesson-library-toolbar,
  .lesson-library-context { align-items: stretch; flex-direction: column; }
  .lesson-library-search { width: 100%; min-width: 0; }
  .lesson-library-context > div:last-child { justify-content: flex-start; }
  .lesson-library-context > div:last-child > button { flex: 1 1 140px; }
  .lesson-library-folder-tiles { grid-template-columns: 1fr; padding: 14px 14px 0; }
  .lesson-library-content > .live-lesson-management-grid { padding: 14px; }

  .live-lesson-summary {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .live-lesson-management-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .live-lesson-management-card {
    min-height: 0;
    padding: 16px;
  }

  .live-lesson-card-actions > button {
    flex: 1 1 135px;
  }

  .live-lesson-card-actions .danger-button {
    margin-left: 0;
  }
}

/* Sign-in becomes one column before its two desktop columns can overflow. */
@media (max-width: 900px) {
  .auth-screen {
    grid-template-columns: minmax(0, 1fr);
    background: #fff;
  }

  .auth-copy {
    min-height: 0 !important;
    padding: 24px 28px 10px;
    overflow: visible;
  }

  .auth-welcome,
  .auth-community-desktop { display: none; }

  .auth-panel {
    width: min(560px, calc(100% - 32px));
    margin: 18px auto 24px;
  }

  .auth-community-mobile {
    display: block;
    width: min(700px, calc(100% - 56px));
    margin: 0 auto 32px;
  }
}

/* Final phone layout: keep the workspace compact and override desktop dynamic
   viewport heights that otherwise stretch the horizontal navigation. */
@media (max-width: 760px) {
  .app-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    width: 100%;
    min-height: 100dvh;
  }

  .app-shell > .topbar {
    grid-row: 1;
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: 58px;
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    padding-bottom: 8px;
    align-items: center;
    background: rgba(255, 255, 255, .97);
  }

  .app-shell > .sidebar {
    grid-row: 2;
    top: 58px;
    width: 100%;
    height: auto !important;
    max-height: none !important;
    min-height: 54px;
    padding: 6px 8px;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    background: rgba(251, 253, 253, .98);
  }

  .app-shell > .sidebar::-webkit-scrollbar { display: none; }

  /* The sidebar is a horizontal tab strip on phones — "collapsing" it makes no
     sense there, and the button pushed the real tabs off-screen. */
  .app-shell > .sidebar .sidebar-toggle { display: none; }

  .app-shell > .sidebar .nav-button {
    flex: 0 0 auto;
    width: auto;
    min-height: 42px !important;
    padding: 9px 11px;
    border-radius: 8px;
    font-size: 12px;
  }

  .app-shell > .sidebar > [data-action="logout"] {
    position: static;
    right: auto;
    margin-left: 0;
    background: transparent;
    box-shadow: none;
  }

  .app-shell > .main {
    grid-row: 3;
    min-width: 0;
  }

  .topbar .top-actions > button {
    padding: 8px;
    font-size: 0;
  }

  .topbar .top-actions > button .icon { margin: 0; }
  .topbar .user-chip { max-width: 48px; }

  .workspace {
    width: 100%;
    padding: 14px 12px calc(22px + env(safe-area-inset-bottom, 0px));
  }

  .page-head { margin-bottom: 14px; }
  .page-head h1 { font-size: clamp(25px, 8vw, 34px); }
  /* .head-actions is still a row here, so sharing the width is right. */
  .head-actions > button { flex: 1 1 145px; }
  /* .page-head is a column at this width: align-items:stretch already gives the
     button full width, and any flex-grow would stretch it vertically instead. */
  .page-head > button { flex: none; }

  .panel-head,
  .student-folder-detail-head,
  .folder-section,
  .panel .list { padding-left: 14px; padding-right: 14px; }

  .overlay { align-items: flex-end; }
  .modal {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top, 0px)));
    border-radius: 16px 16px 0 0;
  }

  .modal > form,
  .modal-body,
  .student-invite-section { padding-left: 14px; padding-right: 14px; }

  .share-code-box,
  .invite-controls {
    align-items: stretch;
  }

  .invite-link-box { flex-direction: column; }
  .invite-link-box input { width: 100%; }
  .invite-link-box button,
  .invite-controls button { flex: 1 1 145px; }

  .auth-copy {
    padding: 20px 20px 8px;
    min-height: 0 !important;
    overflow: visible;
  }

  .auth-welcome {
    display: none;
  }

  .auth-copy .auth-welcome h1 {
    margin-top: 10px;
    font-size: clamp(32px, 10vw, 44px);
    line-height: 1.02;
  }

  .auth-panel {
    width: calc(100% - 24px);
    margin-bottom: 18px;
    padding: 20px;
  }

  .auth-community-mobile {
    width: calc(100% - 40px);
  }

  .admin-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-summary-card { padding: 13px; }
  .admin-summary-card strong { font-size: 23px; }
  .admin-chart-wrap { padding: 4px 8px 0; }
  .admin-chart-axis { font-size: 13px; }
  .admin-chart-note { padding: 4px 14px 14px; }
  .admin-storage-body { padding: 14px; }
  .admin-storage-list li { grid-template-columns: 10px minmax(0, 1fr) auto 42px; gap: 8px; }

  .table-wrap {
    width: 100%;
    max-width: calc(100vw - 24px);
    overflow-x: auto;
  }

  .table-wrap table { min-width: 680px; }
}

@media (max-width: 420px) {
  .topbar .brand { font-size: 0; }
  .topbar .brand-logo { width: 36px; height: 36px; }
  .admin-summary-grid { grid-template-columns: 1fr; }
}

/* Writing task files and ordered re-attempt history. */
.writing-file-list,
.writing-attempt-list {
  display: grid;
  gap: 10px;
}

.writing-attempt-file {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel, #fff);
  overflow: hidden;
}

.writing-attempt-file.compact { padding-top: 12px; }
.writing-attempt-file.compact > strong { display: block; padding: 0 14px 10px; }

.writing-attempt-file-head,
.writing-attempt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
}

.writing-attempt-file-head {
  background: color-mix(in srgb, var(--teal, #176b70) 7%, white);
  border-bottom: 1px solid var(--line);
}

.writing-attempt-file-head > div,
.writing-attempt-row > div:first-child {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.writing-attempt-file-head .muted,
.writing-attempt-row .muted { flex-basis: 100%; }
.writing-attempt-row + .writing-attempt-row { border-top: 1px solid var(--line); }
.writing-attempt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.writing-reattempt-brief { margin: 14px 0; }
.writing-reattempt-brief > div { margin-top: 6px; }

@media (max-width: 640px) {
  .writing-attempt-file-head,
  .writing-attempt-row { align-items: stretch; flex-direction: column; }
  .writing-attempt-file-head > button,
  .writing-attempt-row .row-actions,
  .writing-attempt-row .row-actions > button { width: 100%; }
}

/* Nested library folders and Gmail-style labels. */
.library-folders-head,
.library-labels-head {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.library-folders-head button,
.library-labels-head button {
  min-width: 44px;
  min-height: 44px;
  padding: 6px;
}

.library-folder-tree,
.library-folder-branch {
  display: grid;
  gap: 4px;
}

.automatic-library-tree {
  max-height: min(46vh, 520px);
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-gutter: stable;
}

.auto-folder-levels {
  display: grid;
  gap: 3px;
  margin: 0 0 4px 23px;
  padding-left: 5px;
  border-left: 1px solid var(--line);
}

.automatic-library-tree .library-folder-button.active {
  box-shadow: inset 3px 0 0 var(--folder-color);
}

.library-folder-button {
  width: 100%;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px 10px 9px calc(10px + var(--folder-indent, 0px));
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  text-align: left;
}

.library-folder-button:hover,
.library-folder-button.active,
.library-folder-button.library-folder-drop-active {
  border-color: color-mix(in srgb, var(--folder-color) 52%, var(--line));
  background: color-mix(in srgb, var(--folder-color) 12%, white);
}

.library-folder-button.library-folder-drop-active {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--folder-color) 20%, transparent);
}

.library-folder-icon { color: var(--folder-color); }
.library-folder-button > span:last-child { min-width: 0; display: grid; gap: 1px; }
.library-folder-button strong,
.library-folder-button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-folder-button small { color: var(--muted); font-size: 11px; }

.library-label-filter-list {
  display: grid;
  gap: 5px;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.library-label-filter-list > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  background: transparent;
  border-color: transparent;
}
.library-label-filter-list > button.active { border-color: var(--teal); background: var(--teal-soft); }

.library-color-tag {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 9px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--tag-color) !important;
  color: var(--tag-text) !important;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.library-color-tag small { font-size: 9px; opacity: .78; text-transform: uppercase; }
.library-color-tag button { min-width: 18px; min-height: 18px; padding: 0; border: 0; background: rgb(255 255 255 / .2); color: inherit; }

.library-folder-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--teal) 5%, white);
}
.library-folder-context > div { display: flex; gap: 8px; flex-wrap: wrap; }
.library-auto-rule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 800;
}
.library-auto-rule .icon { width: 15px; height: 15px; }
.library-breadcrumbs { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; }
.library-breadcrumbs button { min-height: 34px; padding: 6px 9px; white-space: nowrap; }
.library-breadcrumbs .icon { width: 13px; height: 13px; color: var(--muted); }

.library-card-folder { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 750; }
.library-card-folder .icon { width: 15px; height: 15px; }
.library-card-dragging { opacity: .48; transform: scale(.985); }

.library-folder-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  padding: 0 18px 18px;
}

.library-folder-tile {
  min-height: 68px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-color: color-mix(in srgb, var(--folder-color) 42%, var(--line));
  background: color-mix(in srgb, var(--folder-color) 8%, white);
  text-align: left;
}

.library-folder-tile:hover { background: color-mix(in srgb, var(--folder-color) 14%, white); }
.library-folder-tile-icon { color: var(--folder-color); }
.library-folder-tile > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.library-folder-tile strong,
.library-folder-tile small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-folder-tile small { color: var(--muted); }
.library-folder-tile > .icon:last-child { color: var(--muted); width: 16px; height: 16px; }

.library-color-field input[type="color"] { width: 68px; min-height: 44px; padding: 4px; }
.library-label-manager { gap: 18px; }
.library-label-create { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 10px; padding: 0; }
.library-label-create .field { padding: 0; }
.library-label-list { display: grid; gap: 8px; }
.library-label-list .list-row > div:first-child { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.library-label-checkboxes { display: grid; gap: 8px; border: 0; padding: 0; }
.library-label-checkboxes legend { margin-bottom: 8px; font-weight: 800; }
.library-label-checkboxes > label { display: flex; align-items: center; gap: 9px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.library-label-checkboxes input { width: 20px; height: 20px; }

@media (max-width: 760px) {
  .library-folder-tree { max-height: 280px; overflow: auto; }
  .automatic-library-tree { max-height: 340px; }
  .library-folder-context { align-items: stretch; flex-direction: column; }
  .library-folder-context > div > button { flex: 1 1 150px; }
  .library-label-create { grid-template-columns: 1fr; }
  .library-label-create button { width: 100%; }
  .library-folder-tiles { grid-template-columns: 1fr; padding: 0 12px 14px; }
}

/* Shared Drive-style library workspace. */
.library-page-head { align-items: center; }
.library-page-head h1 { color: #182230; }
.library-overview {
  border: 1px solid #d9e2ec;
  background: #f7f9fc;
  color: #182230;
  box-shadow: 0 8px 26px rgb(31 55 82 / 7%);
}
.library-overview::after { border-color: rgb(26 115 232 / 7%); }
.library-overview > div { border-color: #dfe6ee; }
.library-overview small { color: #607083; }
.library-overview > div > span { background: #e8f0fe; color: #1967d2; }

.library-browser {
  grid-template-columns: 286px minmax(0, 1fr);
  gap: 16px;
}

.library-drive-nav {
  top: 78px;
  max-height: calc(100vh - 96px);
  gap: 8px;
  overflow-y: auto;
  padding: 14px 12px 16px;
  border-color: #dfe4ea;
  border-radius: 16px;
  box-shadow: 0 6px 22px rgb(31 55 82 / 6%);
  scrollbar-gutter: stable;
}

.library-drive-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  margin: 0 2px 7px;
  border-color: #d7e0e9;
  border-radius: 14px;
  background: #fff;
  color: #1f2937;
  font-weight: 800;
  box-shadow: 0 3px 10px rgb(31 55 82 / 10%);
}
.library-drive-new:hover { border-color: #a9c7ee; background: #f8fbff; }
.library-drive-new .icon { color: #1967d2; }

.library-drive-nav .library-collections-head {
  min-height: 32px;
  margin: 5px 2px 0;
  padding: 5px 8px;
  border: 0;
}
.library-drive-nav .library-collections-head small {
  min-width: 24px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef2f6;
  color: #657487;
  text-align: center;
}
.library-drive-nav .library-folder-tree {
  max-height: none;
  overflow: visible;
  padding: 0;
}
.library-folder-button {
  grid-template-columns: 26px minmax(0, 1fr);
  min-height: 50px;
  padding: 7px 9px 7px calc(9px + var(--folder-indent, 0px));
  border-radius: 12px;
}
.library-folder-button:hover,
.library-folder-button.active {
  border-color: transparent;
  background: #e8f0fe;
  color: #174ea6;
  box-shadow: none;
}
.library-folder-button.active { box-shadow: inset 3px 0 0 #1a73e8; }
.library-folder-button strong { font-size: 13.5px; }
.library-folder-button small { font-size: 11px; font-weight: 600; }

.library-quick-head,
.library-labels-head { border-top: 1px solid #e4e9ef !important; padding-top: 13px !important; }
.library-quick-filters { display: grid; gap: 3px; }
.library-quick-filters .library-collection-button {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  min-height: 44px;
  padding: 5px 8px;
  border-radius: 11px;
}
.library-quick-filters .library-collection-icon {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
}
.library-quick-filters .library-collection-button small { display: none; }
.library-label-filter-list { max-height: 210px; }
.library-access-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 8px;
  padding: 11px;
  border-radius: 11px;
  background: #f2f6fb;
  color: #40546a;
}
.library-access-note > .icon { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; color: #1967d2; }
.library-access-note > span { display: grid; gap: 2px; min-width: 0; }
.library-access-note strong { font-size: 12px; }
.library-access-note small { color: #6b7888; font-size: 10.5px; line-height: 1.4; }

.library-catalog {
  border-color: #dfe4ea;
  border-radius: 16px;
  box-shadow: 0 6px 22px rgb(31 55 82 / 6%);
}
.library-folder-context {
  min-height: 62px;
  padding: 11px 18px;
  background: #fff;
}
.library-breadcrumbs { flex: 1 1 auto; }
.library-breadcrumbs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-color: transparent;
  background: transparent;
  color: #34465a;
  font-size: 14px;
}
.library-breadcrumbs button:last-child { color: #182230; font-weight: 850; }
.library-folder-context > div { flex: 0 0 auto; }
.library-toolbar { background: #f8fafc; }

.library-folder-tiles {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.library-folder-tile {
  min-width: 0;
  min-height: 70px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 4px;
  padding: 7px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--folder-color) 28%, #dce3ea);
  border-radius: 13px;
  background: color-mix(in srgb, var(--folder-color) 6%, #fff);
}
.library-folder-tile:hover,
.library-folder-tile.library-folder-drop-active {
  border-color: color-mix(in srgb, var(--folder-color) 58%, #cbd5df);
  background: color-mix(in srgb, var(--folder-color) 11%, #fff);
  box-shadow: 0 5px 14px rgb(31 55 82 / 8%);
}
.library-folder-tile-open {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px;
  border: 0;
  background: transparent;
  text-align: left;
  box-shadow: none;
}
.library-folder-tile-open:hover { background: transparent; box-shadow: none; }
.library-folder-tile-open > span:last-child { min-width: 0; display: grid; gap: 3px; }
.library-folder-tile-open strong,
.library-folder-tile-open small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-folder-tile-open small { color: #6a7888; font-size: 11px; }
.library-folder-tile-menu {
  align-self: center;
  min-width: 36px;
  width: 36px;
  height: 36px;
  padding: 8px;
  border-color: transparent;
  border-radius: 50%;
  background: transparent;
  color: #657487;
}
.library-folder-tile-menu:hover { background: rgb(26 115 232 / 9%); color: #1967d2; }
.library-card-folder span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1180px) {
  .library-browser { grid-template-columns: 1fr; }
  .library-drive-nav {
    position: static;
    grid-template-columns: 1fr;
    max-height: none;
  }
  .library-drive-nav .library-collections-head,
  .library-drive-nav .library-access-note,
  .library-drive-nav .library-drive-new { grid-column: auto; }
  .library-drive-nav .library-folder-tree { max-height: 320px; overflow-y: auto; }
}

@media (max-width: 760px) {
  .library-page-head .head-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .library-page-head .head-actions button { min-width: 0; }
  .library-folder-context { align-items: stretch; }
  .library-folder-context > div { display: grid; grid-template-columns: 1fr 1fr; }
  .library-folder-context > div > button { min-width: 0; }
  .library-folder-tiles { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .library-page-head .head-actions,
  .library-folder-context > div { grid-template-columns: 1fr; }
  .library-overview { grid-template-columns: 1fr 1fr; }
}

/* Collapsible, colour-routed library explorer. */
.library-browser { grid-template-columns: 304px minmax(0, 1fr); }

.library-drive-nav {
  background: linear-gradient(180deg, #fbfdff 0%, #f7f9fc 100%);
}

.library-tree-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 3px !important;
}

.library-tree-head > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.library-tree-head > span small {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #e9eef5;
  color: #5e6d80;
  font-size: 11px;
  text-align: center;
}

.library-tree-control {
  display: inline-grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border-color: transparent;
  border-radius: 9px;
  background: transparent;
  color: #5e6d80;
}

.library-tree-control:hover,
.library-tree-control:focus-visible {
  border-color: #cad6e5;
  background: #edf3fa;
  color: #195fbd;
}

.library-tree-control .icon,
.library-nav-section-toggle .icon {
  width: 15px;
  height: 15px;
  transition: transform 150ms ease;
}

.library-tree-control[aria-expanded="true"] .icon,
.library-nav-section-toggle[aria-expanded="true"] .icon {
  transform: rotate(90deg);
}

.library-drive-nav .library-quick-head,
.library-drive-nav .library-labels-head {
  align-items: center;
  min-height: 44px;
  padding-right: 2px !important;
  padding-left: 2px !important;
}

.library-nav-section-toggle {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 5px 7px !important;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #263447;
  text-align: left;
}

.library-nav-section-toggle:hover,
.library-nav-section-toggle:focus-visible {
  background: #edf3fa;
  color: #195fbd;
}

.library-nav-section-toggle > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.library-drive-nav .quiz-library-tree {
  display: block;
  padding: 6px;
  border: 1px solid #dfe7f0;
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%);
}

.library-folder-branch {
  display: block;
  min-width: 0;
}

.library-folder-row {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 44px;
  margin: 2px 0;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #263447;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.library-folder-row-exam {
  margin-top: 5px;
  background: color-mix(in srgb, var(--folder-color) 5%, white);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--folder-color) 58%, transparent);
}

.library-folder-row:hover,
.library-folder-row:focus-within {
  border-color: color-mix(in srgb, var(--folder-color) 28%, #dce5ef);
  background: color-mix(in srgb, var(--folder-color) 9%, white);
}

.library-folder-row.active {
  border-color: color-mix(in srgb, var(--folder-color) 46%, #cbd7e5);
  background: color-mix(in srgb, var(--folder-color) 14%, white);
  color: color-mix(in srgb, var(--folder-color) 72%, #172033);
  box-shadow: inset 4px 0 0 var(--folder-color), 0 1px 3px rgb(24 38 58 / 7%);
}

.library-folder-root {
  --folder-color: #1a73e8;
  margin-bottom: 8px;
  background: #f5f8fc;
  box-shadow: inset 3px 0 0 #9bbbe4;
}

.library-folder-root::after {
  content: "";
  position: absolute;
  right: 9px;
  bottom: -6px;
  left: 9px;
  border-bottom: 1px solid #e4eaf1;
}

.library-folder-toggle,
.library-folder-toggle-spacer {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 40px;
  margin-left: 1px;
}

.library-folder-toggle {
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: color-mix(in srgb, var(--folder-color) 75%, #465569);
}

.library-folder-toggle:hover,
.library-folder-toggle:focus-visible {
  background: color-mix(in srgb, var(--folder-color) 13%, white);
  box-shadow: none;
}

.library-folder-toggle .icon {
  width: 15px;
  height: 15px;
  transition: transform 150ms ease;
}

.library-folder-branch.is-expanded > .library-folder-row .library-folder-toggle .icon {
  transform: rotate(90deg);
}

.library-folder-row .library-folder-button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 5px 7px 5px 1px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  box-shadow: none;
  text-align: left;
}

.library-folder-row .library-folder-button:hover,
.library-folder-row .library-folder-button:focus-visible,
.library-folder-row .library-folder-button.active {
  border-color: transparent;
  background: transparent;
  color: inherit;
  box-shadow: none;
}

.library-folder-row .library-folder-button:focus-visible,
.library-folder-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--folder-color) 64%, white);
  outline-offset: -2px;
}

.library-folder-row .library-folder-icon {
  display: inline-grid;
  place-items: center;
  color: var(--folder-color);
}

.library-folder-row .library-folder-icon .icon {
  width: 18px;
  height: 18px;
}

.library-folder-name,
.library-folder-name strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-folder-name strong {
  display: block;
  font-size: 13.5px;
  line-height: 1.25;
}

.library-folder-count {
  min-width: 25px;
  padding: 3px 7px;
  overflow: visible !important;
  border: 1px solid color-mix(in srgb, var(--folder-color) 15%, #dce4ed);
  border-radius: 999px;
  background: color-mix(in srgb, var(--folder-color) 7%, white);
  color: #667588 !important;
  font-size: 10.5px !important;
  font-variant-numeric: tabular-nums;
  font-weight: 800 !important;
  line-height: 1.2;
  text-align: center;
}

.library-folder-children {
  position: relative;
  display: block;
  margin-left: 17px;
  padding-left: 14px;
  border-left: 1.5px solid color-mix(in srgb, var(--folder-color) 34%, #dfe6ee);
}

.library-folder-children > .library-folder-branch > .library-folder-row::before {
  content: "";
  position: absolute;
  top: 22px;
  left: -15px;
  width: 13px;
  border-top: 1.5px solid color-mix(in srgb, var(--folder-color) 34%, #dfe6ee);
}

.library-folder-button.library-folder-drop-active {
  background: color-mix(in srgb, var(--folder-color) 14%, white) !important;
  outline: 2px solid color-mix(in srgb, var(--folder-color) 54%, white);
  outline-offset: -2px;
}

@media (max-width: 1180px) {
  .library-browser { grid-template-columns: 1fr; }
  .library-drive-nav .quiz-library-tree { max-height: 390px; overflow-y: auto; }
}

@media (max-width: 760px) {
  .library-folder-row { min-height: 48px; }
  .library-folder-toggle,
  .library-folder-toggle-spacer { width: 34px; min-width: 34px; height: 44px; }
  .library-folder-row .library-folder-button { min-height: 46px; }
  .library-folder-children { margin-left: 18px; padding-left: 12px; }

  /* On a phone the folder rail sits above the files, so its lists are kept
     short and faded at the bottom edge — a list that simply stopped mid-row
     looked like a rendering fault rather than something you can scroll. */
  .library-drive-nav .quiz-library-tree {
    max-height: 262px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
  }

  .library-label-filter-list {
    max-height: 148px;
    overscroll-behavior: contain;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
  }

  /* Four "new …" buttons of four different widths looked accidental. */
  .library-workspace .library-topbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-left: 0;
  }

  .library-workspace .library-topbar-actions > button {
    width: 100%;
    justify-content: center;
    padding: 0 10px;
    text-align: center;
  }

  /* The main action leads, full width; the rest pair up underneath. */
  .library-workspace .library-topbar-actions > button.primary {
    grid-column: 1 / -1;
    order: -1;
  }

  .library-workspace .library-topbar-actions > .library-overflow > summary { width: 100%; }
}

/* Teacher-led quiz review: gradual answer reveals over the existing CBT reader. */
.class-review-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--line);
  background: #fff8df;
  color: #4e3b08;
  box-shadow: 0 5px 14px rgb(52 42 8 / 8%);
}

.class-review-toolbar-label,
.class-review-toolbar > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.class-review-toolbar-label small { color: #715f28; }
.class-review-toolbar button { min-height: 44px; }
.class-review-toolbar .icon { width: 17px; height: 17px; }

.class-review-question-toggle {
  flex: 0 0 auto;
  min-height: 44px;
  border-color: #d8b842;
  background: #fff8df;
  color: #584407;
}

.class-review-question-toggle.revealed {
  border-color: color-mix(in srgb, var(--green) 60%, var(--line));
  background: color-mix(in srgb, var(--green) 10%, white);
  color: var(--green);
}

.class-review-answer-hidden {
  cursor: default;
  user-select: none;
}

.class-review-answer-hidden input,
.class-review-answer-hidden select,
.class-review-answer-hidden button,
.class-review-answer-hidden .match-row { cursor: default; }

.class-review-shell .attempt-passage {
  top: 128px;
  max-height: calc(100vh - 148px);
}

.class-review-shell .attempt-notes-rail {
  top: 119px;
  max-height: calc(100vh - 175px);
}

.class-review-shell.has-audio .attempt-passage {
  top: 184px;
  max-height: calc(100vh - 204px);
}

.class-review-shell.has-audio .attempt-notes-rail {
  top: 176px;
  max-height: calc(100vh - 232px);
}

.attempt-shell.theme-dark .class-review-toolbar,
.attempt-shell.theme-yellow .class-review-toolbar {
  border-bottom-color: #4d4524;
  background: #27240f;
  color: #ffe867;
}

.attempt-shell.theme-dark .class-review-toolbar-label small,
.attempt-shell.theme-yellow .class-review-toolbar-label small { color: #dfcf7a; }

.attempt-shell.theme-dark .class-review-question-toggle,
.attempt-shell.theme-yellow .class-review-question-toggle {
  border-color: #75662b;
  background: #27240f;
  color: #ffe867;
}

/* Submitted quiz attempts: one answer-by-answer review surface for students and teachers. */
/* Flex, not a fixed 3-column grid: the row carries an optional "Finish marking"
   button and an optional "Try again" button, so the child count varies. */
.attempt-review-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 9px 18px;
  border-bottom: 1px solid #bfd8e7;
  background: #eef8fd;
  box-shadow: 0 5px 14px rgb(22 82 112 / 8%);
}

.attempt-review-toolbar-label {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 8px;
  color: #164f70;
  white-space: nowrap;
}

.attempt-review-toolbar-label .icon { grid-row: 1 / 3; }
.attempt-review-toolbar-label small { color: #547487; }

.attempt-review-filters {
  display: flex;
  gap: 6px;
  align-items: center;
}

.attempt-review-filters button {
  min-height: 36px;
  padding: 0 10px;
  border-color: #bed5e2;
  background: #fff;
  font-size: 12px;
}

.attempt-review-filters button span {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 3px;
  border-radius: 999px;
  background: #e7f0f5;
}

.attempt-review-filters button.active {
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
}

.attempt-review-filters button.active span { background: rgb(255 255 255 / 20%); }

.quiz-attempt-timeline {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #cadbe4;
  border-radius: 12px;
  background: #f8fbfd;
}

.quiz-attempt-timeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.quiz-attempt-timeline-head > div { display: grid; gap: 2px; }
.quiz-attempt-timeline-head span:not(.status) { color: var(--muted); font-size: 12px; }

.quiz-attempt-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: thin;
}

.quiz-attempt-chip {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 1px 12px;
  flex: 0 0 auto;
  min-width: 142px;
  min-height: 58px;
  padding: 8px 11px;
  border-color: #c7d7df;
  background: #fff;
  text-align: left;
}

.quiz-attempt-chip strong { justify-self: end; color: var(--teal-dark); }
.quiz-attempt-chip small { grid-column: 1 / 3; color: var(--muted); }
.quiz-attempt-chip.selected { border-color: var(--teal); background: var(--teal-soft); box-shadow: inset 3px 0 0 var(--teal); }
/* The attempt that carries the mark. Marked on the chip itself so a student
   scanning the strip can see which try the grade came from without reading
   every score. The selected chip keeps its own teal edge and wins the border. */
.quiz-attempt-chip.counts { border-color: var(--green); background: var(--green-soft); }
.quiz-attempt-chip.counts strong { color: var(--green); }
.quiz-attempt-chip.counts.selected { border-color: var(--teal); box-shadow: inset 3px 0 0 var(--teal); }

.quiz-attempt-timeline.compact {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.quiz-attempt-timeline.compact .quiz-attempt-timeline-head { display: none; }
.quiz-attempt-timeline.compact .quiz-attempt-chip { min-width: 112px; min-height: 40px; padding: 4px 8px; font-size: 11px; }
.quiz-attempt-timeline.compact .quiz-attempt-chip small { display: none; }

.attempt-next-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding: 18px;
  border: 1px solid #bdd9e8;
  border-radius: 12px;
  background: #f0f9fd;
}

.attempt-next-steps h3 { margin: 0 0 4px; font-size: 17px; }
.attempt-next-steps p { max-width: 520px; margin: 0; color: var(--muted); line-height: 1.5; }

.student-attempt-history-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.student-attempt-history-links button {
  min-height: 28px;
  padding: 0 7px;
  border-color: #d5e2e8;
  font-size: 10.5px;
}

.attempt-answer-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 14px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #cbd9df;
  border-left: 4px solid var(--amber);
  border-radius: 8px;
  background: #f8fafb;
}

.attempt-answer-summary.good { border-left-color: var(--green); background: #f3fbf5; }
.attempt-answer-summary.bad { border-left-color: #c94141; background: #fff7f7; }
.attempt-answer-summary.reviewed { border-left-color: #2d7893; background: #f1f8fb; }
/* Matching rows already show each answer marked in place, so only the mark is left. */
.attempt-answer-summary.points-only { grid-template-columns: 1fr; }
.attempt-answer-summary > div { display: grid; gap: 3px; min-width: 0; }
.attempt-answer-summary span { color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.attempt-answer-summary strong { overflow-wrap: anywhere; font-size: 13px; }
.attempt-answer-points { padding-left: 14px; border-left: 1px solid #dbe4e8; }

.cbt-qnum.done.review-correct,
.cbt-qnum.review-correct { border-color: #21834f; background: #21834f; color: #fff; }
.cbt-qnum.done.review-incorrect,
.cbt-qnum.review-incorrect { border-color: #bd3d3d; background: #bd3d3d; color: #fff; }
.cbt-qnum.done.review-reviewed,
.cbt-qnum.review-reviewed { border-color: #2d7893; background: #e5f3f8; color: #174f65; }
.cbt-qnum.done.review-pending,
.cbt-qnum.review-pending { border-color: #ad7600; background: #fff2cb; color: #704b00; }

.attempt-shell.theme-dark .attempt-review-toolbar,
.attempt-shell.theme-yellow .attempt-review-toolbar { border-color: #385b6b; background: #132d38; }
.attempt-shell.theme-dark .attempt-review-toolbar-label,
.attempt-shell.theme-yellow .attempt-review-toolbar-label { color: #9bd7f2; }
.attempt-shell.theme-dark .attempt-review-toolbar-label small,
.attempt-shell.theme-yellow .attempt-review-toolbar-label small { color: #a7c1cc; }
.attempt-shell.theme-dark .attempt-answer-summary,
.attempt-shell.theme-yellow .attempt-answer-summary,
.attempt-shell.theme-dark .quiz-attempt-timeline,
.attempt-shell.theme-yellow .quiz-attempt-timeline,
.attempt-shell.theme-dark .attempt-next-steps,
.attempt-shell.theme-yellow .attempt-next-steps { border-color: #38505c; background: #132630; }

@media (max-width: 760px) {
  .class-review-toolbar { align-items: stretch; flex-direction: column; padding: 9px 12px; }
  .class-review-toolbar > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .class-review-toolbar button { padding: 8px 6px; font-size: 12px; }
  .class-review-question-toggle { width: 100%; }
  .class-review-shell .question-head { align-items: stretch; flex-direction: column; }
  .attempt-review-toolbar { flex-direction: column; align-items: stretch; padding: 9px 12px; }
  .attempt-review-retry { width: 100%; }
  .attempt-review-filters { overflow-x: auto; }
  .attempt-review-filters button { flex: 0 0 auto; }
  .attempt-next-steps { align-items: stretch; flex-direction: column; }
  .attempt-next-steps .head-actions { justify-content: stretch; }
  .attempt-next-steps .head-actions button { flex: 1 1 auto; }
  .attempt-answer-summary { grid-template-columns: 1fr; }
  .attempt-answer-points { padding: 10px 0 0; border-top: 1px solid #dbe4e8; border-left: 0; }
}

/* Visual quiz authoring: student presentation beside the editable answer key. */
.builder-workspace { background: #f2f7fa; }
.builder-location-field {
  grid-column: span 2;
}

.builder-location-summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 11px 12px;
  border: 1px solid #bfd8d7;
  border-radius: 13px;
  background: linear-gradient(135deg, #f3fbfa, #ffffff);
}

.builder-location-summary.needs-decision {
  border-color: #e1c470;
  background: linear-gradient(135deg, #fff9e8, #ffffff);
}

.builder-location-summary-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #dff3f0;
  color: var(--teal-dark);
}

.builder-location-summary.needs-decision .builder-location-summary-icon {
  background: #fff0bc;
  color: #8a6300;
}

.builder-location-summary-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.builder-location-summary-copy strong,
.builder-location-summary-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.builder-location-summary-copy strong {
  color: #1b3743;
  font-size: 14px;
  white-space: nowrap;
}

.builder-location-summary-copy small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.builder-location-summary > button {
  white-space: nowrap;
}

.builder-location-picker {
  gap: 12px !important;
  padding: 16px !important;
}

.builder-location-intro {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 13px;
  border: 1px solid #d6e5e7;
  border-radius: 13px;
  background: #f4fafb;
}

.builder-location-intro > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #dceff2;
  color: #176e88;
}

.builder-location-intro strong {
  display: block;
  margin-bottom: 3px;
  color: #173846;
}

.builder-location-intro p {
  margin: 0;
  color: #5f7480;
  font-size: 13px;
  line-height: 1.45;
}

.builder-location-search {
  position: relative;
  display: block;
}

.builder-location-search .icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 13px;
  width: 17px;
  height: 17px;
  color: #728494;
  transform: translateY(-50%);
  pointer-events: none;
}

.builder-location-search input {
  padding-left: 40px;
  border-color: #cddce5;
  background: #fbfdff;
}

.builder-location-browser {
  display: grid;
  min-height: 0;
  gap: 6px;
}

.builder-location-browser-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
}

.builder-location-browser-head strong {
  color: #253b4b;
  font-size: 13px;
}

.builder-location-browser-head span {
  color: #718291;
  font-size: 11.5px;
  text-align: right;
}

.builder-location-options {
  display: grid;
  align-content: start;
  gap: 3px;
  max-height: min(390px, 43vh);
  padding: 6px;
  overflow-y: auto;
  border: 1px solid #dbe4eb;
  border-radius: 14px;
  background: #f7f9fb;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.builder-location-tree-branch,
.builder-location-tree-children {
  display: grid;
  gap: 3px;
}

.builder-location-tree-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding-left: calc(var(--folder-depth, 0) * 16px);
}

.builder-location-root-row {
  margin-bottom: 3px;
  padding-bottom: 6px;
  border-bottom: 1px solid #dce5ec;
}

.builder-location-toggle,
.builder-location-toggle-spacer {
  display: grid;
  place-items: center;
  width: 28px;
  height: 34px;
}

.builder-location-toggle {
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #667a89;
  box-shadow: none;
}

.builder-location-toggle:hover,
.builder-location-toggle:focus-visible {
  background: color-mix(in srgb, var(--folder-color) 10%, #edf2f6);
  color: var(--folder-color);
}

.builder-location-toggle .icon {
  width: 15px;
  height: 15px;
  transform: rotate(0deg);
  transition: transform 120ms ease;
}

.builder-location-tree-branch.is-expanded > .builder-location-tree-row > .builder-location-toggle .icon {
  transform: rotate(90deg);
}

.builder-location-option {
  display: grid;
  grid-template-columns: 25px 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 50px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-left: 3px solid color-mix(in srgb, var(--folder-color) 28%, #d7e0e8);
  border-radius: 10px;
  background: rgb(255 255 255 / 82%);
  color: #263447;
  box-shadow: none;
  text-align: left;
}

.builder-location-option:hover,
.builder-location-option:focus-visible {
  border-color: color-mix(in srgb, var(--folder-color) 34%, #ced9e3);
  border-left-color: var(--folder-color);
  background: color-mix(in srgb, var(--folder-color) 7%, white);
}

.builder-location-option.is-selected {
  border-color: color-mix(in srgb, var(--folder-color) 52%, #c6d3df);
  border-left-color: var(--folder-color);
  background: color-mix(in srgb, var(--folder-color) 12%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--folder-color) 18%, transparent);
}

.builder-location-option-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid #c8d3dd;
  border-radius: 50%;
  background: #fff;
  color: #fff;
}

.builder-location-option.is-selected .builder-location-option-mark {
  border-color: var(--folder-color);
  background: var(--folder-color);
}

.builder-location-option-mark .icon {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}

.builder-location-option-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--folder-color) 11%, white);
  color: var(--folder-color);
}

.builder-location-option-icon .icon {
  width: 18px;
  height: 18px;
}

.builder-location-option-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.builder-location-option-copy strong,
.builder-location-option-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-location-option-copy strong {
  font-size: 14px;
}

.builder-location-option-copy small {
  color: #6c7c8c;
  font-size: 11.5px;
}

.builder-location-search-row .builder-location-option-copy small {
  color: #617587;
}

.builder-location-empty {
  padding: 16px;
}

.builder-location-selection {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 11px;
  background: #eef6ff;
  color: #27527a;
}

.builder-location-selection span {
  font-size: 12px;
  font-weight: 700;
}

.builder-location-selection strong {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
}

.builder-section { overflow: hidden; }
.builder-section > .panel-body { background: #f5f8fa; }
.builder-section .question-list { gap: 18px; }
.builder-section .question-card {
  padding: 0;
  overflow: hidden;
  border: 1px solid #c8d7dd;
  background: #fff;
  box-shadow: 0 8px 22px rgb(34 67 82 / 7%);
}

.builder-section .question-card > .question-head {
  padding: 10px 14px;
  border-bottom: 1px solid #dbe5e8;
  background: #eef5f6;
}

.builder-question-body {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(390px, 1.1fr);
  align-items: stretch;
}

.builder-student-preview {
  min-width: 0;
  padding: 16px;
  border-right: 1px solid #dbe5e8;
  background: #f8fbfc;
}

.builder-preview-label,
.builder-authoring-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 11px;
  color: var(--teal-dark);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.builder-preview-label span { margin-left: auto; color: var(--muted); font-size: 10px; text-transform: none; letter-spacing: 0; }
.builder-preview-label .icon,
.builder-authoring-label .icon { width: 15px; height: 15px; }

.builder-preview-surface {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid #d3dfe3;
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
  line-height: 1.75;
}

.builder-preview-surface .question-prompt { margin: 0; font-size: 1em; }
.builder-preview-surface input,
.builder-preview-surface select,
.builder-preview-surface button { pointer-events: none; }
.builder-preview-surface .answer-choice { background: #fff; }

.builder-authoring-fields {
  min-width: 0;
  padding: 16px;
  background: #fff;
}

.builder-passage-editor.attempt-passage {
  position: static;
  width: 100%;
  max-height: none;
  min-height: 260px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  background: #fff;
}

.quiz-download-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.quiz-download-options > button {
  min-height: 150px;
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 7px;
  padding: 18px;
  text-align: left;
}
.quiz-download-options > button > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--teal-soft); color: var(--teal); }
.quiz-download-options > button strong { font-size: 16px; }
.quiz-download-options > button small { color: var(--muted); line-height: 1.45; }
.quiz-download-options .notice,
.quiz-download-options .modal-actions { grid-column: 1 / -1; }

@media (max-width: 1120px) {
  .builder-question-body { grid-template-columns: 1fr; }
  .builder-student-preview { border-right: 0; border-bottom: 1px solid #dbe5e8; }
}

@media (max-width: 700px) {
  .builder-location-field {
    grid-column: 1 / -1;
  }

  .builder-location-summary {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .builder-location-summary > button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .builder-location-option {
    height: auto !important;
    min-height: 64px !important;
    padding-left: 8px;
  }

  .builder-location-option-copy small {
    white-space: normal;
  }

  .builder-location-selection {
    grid-template-columns: 1fr;
  }

  .builder-location-selection strong {
    text-align: left;
    white-space: normal;
  }

  .builder-student-preview,
  .builder-authoring-fields { padding: 12px; }
  .builder-preview-surface { padding: 14px; }
  .quiz-download-options { grid-template-columns: 1fr; }
  .quiz-download-options > button { min-height: 108px; }
}

/* Quiz editor 2026-07: use the available teacher workspace and let each card
   respond to its own width. The previous viewport breakpoint left two cramped
   half-cards beside a scoring rail even when the question card was under 1,000px. */
.builder-workspace {
  max-width: none;
  padding: 20px clamp(14px, 1.8vw, 26px) 40px;
}

.builder-workspace .quiz-builder {
  grid-template-columns: minmax(0, 1fr) 284px;
  gap: 18px;
}

.builder-section {
  container-type: inline-size;
}

.builder-question-body {
  display: block;
}

.builder-authoring-label {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  margin: -18px -18px 18px;
  padding: 11px 16px;
  border-bottom: 1px solid #0e3149;
  background: linear-gradient(135deg, #123d5b, #24678f);
  color: #fff;
}

.builder-workspace-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgb(255 255 255 / 14%);
}

.builder-workspace-icon .icon {
  width: 19px;
  height: 19px;
}

.builder-workspace-label-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.builder-workspace-label-copy strong {
  font-size: 13px;
  letter-spacing: .09em;
}

.builder-workspace-label-copy small {
  color: rgb(255 255 255 / 78%);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .055em;
}

.builder-workspace-mode {
  margin-left: auto;
  padding: 5px 9px;
  border: 1px solid rgb(255 255 255 / 36%);
  border-radius: 999px;
  background: rgb(255 255 255 / 14%);
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .07em;
}

.builder-authoring-fields {
  padding: 18px;
  border: 0;
  border-top: 5px solid #24678f;
  background: #fff;
}

.builder-group-instructions-editor {
  margin: 0 0 16px;
  border: 1px solid #b9d7e8;
  border-radius: 10px;
  background: #f4f9fc;
}

.builder-group-instructions-editor > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: #1d6282;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.builder-group-instructions-editor > summary small {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.builder-group-instructions-editor[open] > summary {
  border-bottom: 1px solid #d3e4ed;
}

.builder-group-instructions-editor > .field {
  padding: 12px;
}

.builder-group-instructions-editor .muted {
  font-size: 11px;
  line-height: 1.45;
}

.builder-group-instructions-preview {
  border-left-color: #267da5;
}

.builder-student-preview {
  padding: 0;
  border: 0;
  border-top: 1px solid #b9d5ca;
  background: #edf7f2;
}

.builder-preview-label.builder-preview-toggle {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 10px 16px;
  border: 0;
  border-left: 5px solid #2d8d70;
  border-radius: 0;
  background: linear-gradient(135deg, #e5f5ed, #f5fbf8);
  color: #155b47;
  text-align: left;
  cursor: pointer;
}

.builder-preview-toggle .builder-workspace-icon {
  background: #cceadd;
  color: #176b53;
}

.builder-preview-toggle .builder-workspace-label-copy small {
  color: #5b766d;
}

.builder-preview-state {
  margin-left: auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff;
  color: #216b57;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.builder-preview-chevron {
  display: inline-flex;
  transition: transform .16s ease;
}

.builder-preview-chevron .icon {
  width: 17px;
  height: 17px;
  transform: rotate(90deg);
}

.builder-student-preview.is-open .builder-preview-chevron {
  transform: rotate(180deg);
}

.builder-preview-content {
  padding: 16px;
  border-top: 1px solid #c8ddd5;
  background: #f4f9f6;
}

.matching-question-card .builder-student-preview .matching-task-layout {
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
  gap: 24px;
}

/* Matching authoring uses the same row + answer-bank mental model as the student
   player. Source-order option letters remain visible while the full text is edited. */
.matching-authoring {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.matching-authoring-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid #b9d7e8;
  border-radius: 11px;
  background: #eef7fc;
}

.matching-authoring-intro > div {
  display: grid;
  gap: 3px;
}

.matching-authoring-intro span,
.matching-authoring-heading span {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}

.matching-authoring-controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.matching-label-style {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #405b6f;
  font-size: 12px;
  font-weight: 750;
}

.matching-label-style select {
  width: auto;
  min-height: 36px;
  padding: 5px 30px 5px 9px;
}

.matching-authoring-board {
  display: grid;
  grid-template-columns: minmax(360px, .88fr) minmax(420px, 1.12fr);
  gap: 18px;
  align-items: start;
}

.matching-authoring-rows,
.matching-option-editor {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.matching-authoring-rows {
  align-content: start;
  container-type: inline-size;
  max-height: calc(100dvh - 190px);
  padding-right: 5px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.matching-authoring-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
}

.matching-authoring-row {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 9px;
  border: 1px solid #cedce2;
  border-left: 4px solid #2a8a91;
  border-radius: 12px;
  background: #fbfdfe;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.matching-authoring-row.slot-ready,
.matching-authoring-row.slot-hover {
  border-color: #16898f;
  background: #effafa;
  box-shadow: 0 0 0 3px rgb(22 137 143 / 12%);
}

.matching-row-topline {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) auto auto auto;
  align-items: center;
  gap: 7px;
}

.matching-row-topline label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: #536675;
  font-size: 12px;
  font-weight: 700;
}

.matching-row-topline input,
.matching-row-topline select {
  width: 62px;
  min-height: 34px;
  padding: 5px 8px;
}

.matching-row-topline .matching-item-input {
  display: block;
  min-width: 0;
}

.matching-row-topline .matching-item-input input {
  width: 100%;
  min-height: 36px;
  padding: 6px 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.matching-authoring-row textarea,
.matching-option-card textarea {
  width: 100%;
  min-height: 58px;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.builder-answer-drop {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  min-height: 42px;
  padding: 5px 7px;
  border: 1.5px dashed #9dbbc8;
  border-radius: 10px;
  background: #f5f9fb;
  cursor: pointer;
}

.builder-answer-drop.has-answer {
  border-style: solid;
  border-color: #8fc7be;
  background: #f1faf7;
}

.builder-answer-drop .builder-key-chip {
  width: auto;
  cursor: grab;
}

.builder-key-chip-compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 3px 5px 3px 8px;
  border: 1px solid #77b9a8;
  border-radius: 9px;
  background: #fff;
  color: #1d5f4e;
  font-size: 11px;
  font-weight: 800;
}

.builder-key-chip-caption {
  color: #5c746d;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.builder-key-chip-compact .chip-letter {
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
}

.builder-key-chip-compact .chip-clear {
  position: static;
  width: 26px;
  height: 26px;
}

.matching-add-row {
  width: 100%;
  min-height: 44px;
  border-style: dashed;
}

.matching-option-editor {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  max-height: calc(100dvh - 190px);
  overflow: hidden;
  padding: 12px;
  border: 1px solid #cad8e3;
  border-radius: 12px;
  background: #f5f8fc;
}

.matching-option-list {
  display: grid;
  gap: 9px;
  min-height: 0;
  padding-right: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.matching-option-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 9px;
  border: 1px solid #cbd8e2;
  border-radius: 10px;
  background: #fff;
}

.matching-option-card.is-used {
  border-color: #a8d3c7;
  box-shadow: inset 3px 0 #2a9a76;
}

.matching-option-card.is-distractor {
  border-color: #e7cf9f;
  box-shadow: inset 3px 0 #d59b2c;
}

.matching-option-drag.bank-chip {
  width: 58px;
  min-height: 58px;
  padding: 7px;
  justify-content: center;
  cursor: grab;
}

.matching-option-drag .drag-copy {
  display: inline-flex;
  color: #79909f;
}

.matching-option-usage {
  grid-column: 2 / 3;
  width: max-content;
  margin-top: -2px;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 750;
}

.matching-option-usage.used {
  color: #1f775f;
  background: #e3f5ef;
}

.matching-option-usage.wrong {
  color: #8a5a13;
  background: #fff3d9;
}

.matching-option-card > .icon-button {
  grid-column: 3;
  grid-row: 1;
}

.matching-bank-empty {
  padding: 18px 12px;
}

/* Exam-aware AI import profile. */
.imports-workspace {
  max-width: 1320px;
}

.ai-import-profile {
  display: grid;
  gap: 16px;
}

.ai-import-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}

.ai-import-mode legend {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  color: #344b5c;
  font-size: 13px;
  font-weight: 800;
}

.ai-import-choice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px;
  border: 1px solid #cedbe2;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.ai-import-choice.selected {
  border-color: #187f9f;
  background: #eef8fc;
  box-shadow: 0 0 0 3px rgb(24 127 159 / 10%);
}

.ai-import-choice input {
  width: auto;
  min-height: 0;
  margin-top: 4px;
}

.ai-import-choice span {
  display: grid;
  gap: 3px;
}

.ai-import-choice small,
.ai-import-ready small {
  color: var(--muted);
  line-height: 1.42;
}

.ai-import-selectors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ai-import-ready {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid #b8d7d3;
  border-radius: 12px;
  background: #f0faf7;
}

.ai-import-ready > div {
  display: grid;
  gap: 3px;
}

.import-order-contract {
  display: grid;
  grid-template-columns: auto minmax(130px, .5fr) minmax(0, 1fr);
  gap: 9px 12px;
  align-items: center;
  margin-top: 12px;
  padding: 13px;
  border: 1px solid #d4e0e5;
  border-radius: 11px;
  background: #f8fbfc;
}

.import-order-contract > span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #176e88;
  color: #fff;
  font-weight: 800;
}

.import-order-contract small {
  color: var(--muted);
}

@media (max-width: 1480px) {
  .builder-workspace .quiz-builder {
    grid-template-columns: 1fr;
  }

  .builder-workspace .builder-rail {
    position: static;
    order: -1;
  }
}

@container (max-width: 850px) {
  .matching-authoring-board {
    grid-template-columns: 1fr;
  }

  .matching-authoring-rows {
    max-height: none;
    padding-right: 0;
    overflow: visible;
  }

  .matching-option-editor {
    max-height: none;
    overflow: visible;
  }

  .matching-option-list {
    max-height: min(480px, 58dvh);
  }
}

@container (max-width: 500px) {
  .matching-row-topline {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .matching-row-topline .matching-item-input {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .matching-row-topline > label:nth-of-type(2) {
    grid-column: 1 / 2;
    grid-row: 3;
    justify-content: flex-start;
  }

  .matching-row-topline > label:nth-of-type(3) {
    grid-column: 2 / 4;
    grid-row: 3;
    justify-content: flex-start;
  }

  .matching-row-topline > .icon-button {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
}

@media (max-width: 820px) {
  .matching-question-card .builder-student-preview .matching-task-layout,
  .matching-authoring-board {
    grid-template-columns: 1fr;
  }

  .matching-authoring-rows {
    max-height: none;
    padding-right: 0;
    overflow: visible;
  }

  .matching-option-editor {
    max-height: none;
    overflow: visible;
  }

  .matching-option-list {
    max-height: min(480px, 58dvh);
  }

  .matching-authoring-intro {
    align-items: stretch;
    flex-direction: column;
  }

  .matching-authoring-controls {
    justify-content: flex-start;
  }

  .ai-import-mode,
  .ai-import-selectors {
    grid-template-columns: 1fr;
  }

  .ai-import-ready {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .builder-section .question-card {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
  }

  .builder-section .question-card > .question-head,
  .builder-section .question-card > .builder-question-body,
  .builder-question-body > .builder-authoring-fields,
  .builder-question-body > .builder-student-preview {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .builder-authoring-fields {
    padding: 12px;
  }

  .builder-authoring-label {
    margin: -12px -12px 12px;
    padding: 10px 12px;
  }

  .builder-workspace-mode {
    display: none;
  }

  .builder-preview-label.builder-preview-toggle {
    padding: 9px 11px;
  }

  .builder-preview-state {
    font-size: 10px;
  }

  .builder-preview-content {
    padding: 10px;
  }

  .matching-row-topline {
    grid-template-columns: auto 1fr auto;
  }

  .matching-row-topline .q-badge {
    justify-self: start;
  }

  .matching-row-topline .matching-item-input {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .matching-row-topline > label:not(.matching-item-input) {
    justify-content: flex-start;
  }

  .matching-row-topline > label:nth-of-type(2) {
    grid-column: 1 / 2;
    grid-row: 3;
  }

  .matching-row-topline > label:nth-of-type(3) {
    grid-column: 2 / 4;
    grid-row: 3;
  }

  .matching-row-topline > .icon-button {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .matching-option-card {
    grid-template-columns: 52px minmax(0, 1fr) auto;
  }

  .import-order-contract {
    grid-template-columns: auto 1fr;
  }

  .import-order-contract small {
    grid-column: 2;
  }
}

/* Compact library cards and assignment rows — more room for the learning content. */
.library-card {
  min-height: 276px;
  overflow: visible;
}

.library-card-compact-controls {
  display: grid;
  gap: 9px;
  align-items: center;
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.library-status-chip {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid #efd39b;
  border-radius: 999px;
  background: #fff7e5;
  color: #79510a;
  font-size: 11px;
  white-space: nowrap;
}

.library-status-chip.assigned {
  border-color: #b8dfc5;
  background: #edf9f1;
  color: #16723a;
}

.library-status-chip .icon {
  width: 14px;
  height: 14px;
  margin-right: 5px;
}

.library-card-quick-actions,
.compact-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.library-card-quick-actions > button {
  min-height: 35px;
  padding: 0 10px;
  font-size: 12px;
}

.library-card-more,
.compact-row-more {
  position: relative;
  flex: 0 0 auto;
}

.library-card-more[open],
.compact-row-more[open] {
  z-index: 40;
}

.library-card:has(.library-card-more[open]),
.assignment-compact-table tr:has(.compact-row-more[open]) {
  position: relative;
  z-index: 30;
}

.library-card-more > summary,
.compact-row-more > summary {
  display: grid;
  place-items: center;
  width: 36px;
  min-width: 36px;
  min-height: 35px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.library-card-more > summary::-webkit-details-marker,
.compact-row-more > summary::-webkit-details-marker {
  display: none;
}

.library-card-more > summary:hover,
.compact-row-more > summary:hover {
  border-color: #9bb9c3;
  background: #f3f8fa;
}

.library-card-more > summary .icon,
.compact-row-more > summary .icon {
  width: 17px;
  height: 17px;
}

.library-card-menu,
.compact-row-more > div {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  width: max-content;
  min-width: 176px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 34px rgb(15 40 48 / 18%);
}

.library-card-menu button,
.compact-row-more > div button {
  justify-content: flex-start;
  min-height: 38px;
  padding: 0 10px;
  border-color: transparent;
  background: transparent;
  text-align: left;
}

.library-card-menu button:hover,
.compact-row-more > div button:hover {
  background: #f1f6f8;
}

.library-card-menu button.danger,
.compact-row-more > div button.danger {
  color: var(--red);
}

.library-card-grid-list .library-card {
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-areas:
    "top controls"
    "title controls"
    "description controls"
    "tags controls"
    "folder controls"
    "facts controls";
  column-gap: 18px;
  row-gap: 4px;
}

.library-card-grid-list .library-card-folder {
  grid-area: folder;
  min-width: 0;
  margin-top: 2px;
}

.library-card-grid-list .library-card-facts {
  grid-area: facts;
  align-self: end;
  margin-top: 3px;
}

.library-card-grid-list .library-card-compact-controls {
  grid-area: controls;
  align-self: center;
  justify-items: end;
  min-width: 214px;
  max-width: 238px;
  margin: 0;
  padding: 0 0 0 16px;
  border-top: 0;
  border-left: 1px solid var(--line);
}

.library-card-grid-list .library-card-quick-actions {
  justify-content: flex-end;
}

.assignment-compact-table table {
  min-width: 780px;
  table-layout: fixed;
}

/* The first column is the bulk-select tick box, so the content columns start at
   the second one — keep these in step with any change to the header row. */
.assignment-compact-table th:first-child { width: 38px; }
.assignment-compact-table th:nth-child(2) { width: 39%; }
.assignment-compact-table th:nth-child(3) { width: 16%; }
.assignment-compact-table th:nth-child(4) { width: 20%; }
.assignment-compact-table th:last-child { width: 235px; }

.assignment-compact-table td {
  vertical-align: middle;
}

.assignment-compact-main,
.assignment-compact-status,
.assignment-compact-progress {
  min-width: 0;
}

.assignment-compact-main > div {
  display: flex;
  align-items: center;
  min-width: 0;
}

.assignment-compact-main strong,
.assignment-compact-main > .linkish {
  overflow: hidden;
  color: var(--text);
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assignment-compact-main > .linkish {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  text-align: left;
}

.assignment-compact-main small,
.assignment-compact-status small,
.assignment-compact-progress small {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assignment-expand-toggle {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  margin-right: 7px;
  padding: 0;
  border-color: transparent;
  background: #eef6f8;
  color: var(--teal-dark);
}

.assignment-expand-toggle .icon {
  width: 14px;
  height: 14px;
}

.assignment-compact-status .status {
  width: max-content;
  max-width: 100%;
}

.assignment-compact-progress strong {
  display: block;
  font-size: 12px;
}

.assignment-compact-actions {
  padding-right: 10px;
}

.assignment-compact-actions .compact-row-actions {
  justify-content: flex-end;
}

.assignment-compact-actions .compact-row-actions > button:not(.icon-button) {
  min-height: 35px;
  padding: 0 9px;
  font-size: 12px;
}

.assignment-compact-actions .class-assignment-review-action {
  border-color: #8dc7d8;
  background: #e8f6fa;
  color: #075f7c;
  font-weight: 800;
  white-space: nowrap;
}

.assignment-compact-actions .class-assignment-review-action:hover {
  border-color: #5baabd;
  background: #d8f0f6;
}

@media (max-width: 820px) {
  .library-card-grid-list .library-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "top"
      "title"
      "description"
      "tags"
      "folder"
      "facts"
      "controls";
  }

  .library-card-grid-list .library-card-compact-controls {
    justify-items: stretch;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-top: 7px;
    padding: 11px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .library-card-grid-list .library-card-quick-actions {
    justify-content: flex-start;
  }
}

/* Teacher home — an action-first landing page, isolated from student styles. */
.teacher-app-shell {
  --teacher-ink: #152437;
  --teacher-navy: #173b57;
  --teacher-blue: #176b87;
  --teacher-mint: #2b9b88;
  --teacher-gold: #f3b63f;
  background:
    radial-gradient(circle at 92% 7%, rgba(43, 155, 136, .09), transparent 30rem),
    #f5f8f8;
}

.teacher-app-shell > .main {
  background: transparent;
}

.teacher-sidebar {
  background: linear-gradient(180deg, #142f47 0%, #173b57 55%, #10283e 100%);
  border-right: 0;
}

.teacher-sidebar .sidebar-toggle,
.teacher-sidebar .nav-button {
  border-color: transparent;
  background: transparent;
  color: #d9e9ee;
}

.teacher-sidebar .sidebar-toggle:hover,
.teacher-sidebar .nav-button:hover {
  border-color: transparent;
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.teacher-sidebar .nav-button.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(53, 188, 163, .25), rgba(60, 131, 177, .16));
  box-shadow: inset 3px 0 var(--teacher-gold);
}

.teacher-dashboard {
  width: min(1240px, 100%);
  margin-inline: auto;
}

.teacher-welcome-card {
  position: relative;
  isolation: isolate;
  min-height: 252px;
  padding: clamp(30px, 5vw, 56px);
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 22%, rgba(255,255,255,.16) 0 6px, transparent 7px),
    radial-gradient(circle at 73% 76%, rgba(243,182,63,.38) 0 5px, transparent 6px),
    linear-gradient(120deg, #14344f, #165a68 62%, #1d6c66);
  box-shadow: 0 24px 64px rgba(20, 59, 79, .22);
}

.teacher-welcome-card::before,
.teacher-welcome-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}

.teacher-welcome-card::before {
  width: 330px;
  height: 330px;
  right: -85px;
  top: -145px;
  border: 54px solid rgba(255,255,255,.08);
}

.teacher-welcome-card::after {
  width: 190px;
  height: 190px;
  right: 210px;
  bottom: -150px;
  border: 35px solid rgba(243,182,63,.1);
}

.teacher-welcome-copy {
  max-width: 760px;
}

.teacher-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: #6c7f8e;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.teacher-welcome-card .teacher-eyebrow {
  color: #e0fff9;
}

.teacher-welcome-card h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(32px, 4.3vw, 52px);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.teacher-welcome-card p {
  max-width: 680px;
  margin: 17px 0 0;
  color: rgba(255,255,255,.94);
  font-size: 16px;
}

.teacher-welcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px;
}

.teacher-welcome-actions button {
  min-height: 44px;
  border-color: rgba(255,255,255,.25);
  color: #fff;
  background: rgba(255,255,255,.11);
}

.teacher-welcome-actions button:hover {
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.18);
}

.teacher-welcome-actions button.primary {
  border-color: var(--teacher-gold);
  color: #183147;
  background: var(--teacher-gold);
  box-shadow: 0 10px 24px rgba(50, 38, 5, .22);
}

.teacher-welcome-orbit {
  width: 150px;
  height: 150px;
  flex: 0 0 150px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  display: grid;
  place-content: center;
  justify-items: center;
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 0 0 13px rgba(255,255,255,.05);
}

.teacher-welcome-orbit > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--teacher-gold);
}

.teacher-welcome-orbit strong {
  color: #fff;
  font-size: 42px;
  line-height: 1;
}

.teacher-welcome-orbit small {
  margin-top: 7px;
  color: #d5f4ee;
  font-weight: 750;
}

.teacher-dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin: 20px 0;
}

.teacher-dashboard-metric {
  min-width: 0;
  min-height: 118px;
  padding: 18px;
  border: 1px solid #dfe8ea;
  border-radius: 18px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 32px rgba(18, 49, 66, .06);
}

.teacher-dashboard-metric-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--teacher-blue);
  background: #e5f3f6;
}

.teacher-dashboard-metric-icon svg {
  width: 21px;
  height: 21px;
}

.teacher-dashboard-metric > div {
  min-width: 0;
  display: grid;
}

.teacher-dashboard-metric strong {
  color: var(--teacher-ink);
  font-size: 27px;
  line-height: 1;
}

.teacher-dashboard-metric span:not(.teacher-dashboard-metric-icon) {
  margin-top: 5px;
  color: var(--teacher-ink);
  font-size: 13px;
  font-weight: 780;
}

.teacher-dashboard-metric small {
  margin-top: 3px;
  overflow: hidden;
  color: #6c7b87;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teacher-dashboard-metric.attention .teacher-dashboard-metric-icon,
.teacher-dashboard-metric.overdue .teacher-dashboard-metric-icon {
  color: #b9502a;
  background: #ffede4;
}

.teacher-dashboard-metric.followup .teacher-dashboard-metric-icon {
  color: #84610f;
  background: #fff4d4;
}

.teacher-dashboard-metric.clear .teacher-dashboard-metric-icon {
  color: #1a7f67;
  background: #e4f6f0;
}

.teacher-action-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  align-items: start;
  gap: 18px;
}

.teacher-dashboard .panel {
  border: 1px solid #dfe8ea;
  border-radius: 20px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 14px 38px rgba(18,49,66,.06);
  overflow: hidden;
}

.teacher-action-panel .panel-head,
.teacher-quick-actions .panel-head {
  min-height: 76px;
  padding: 18px 22px;
  border-bottom-color: #e9eff0;
}

.teacher-action-panel .panel-head h2,
.teacher-quick-actions .panel-head h2 {
  margin: 0;
  color: var(--teacher-ink);
  font-size: 19px;
}

.teacher-panel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.teacher-action-panel .panel-head .teacher-eyebrow,
.teacher-quick-actions .panel-head .teacher-eyebrow {
  margin-bottom: 3px;
}

.teacher-marking-list,
.teacher-followup-list {
  padding: 8px;
}

.teacher-marking-item {
  min-width: 0;
  padding: 14px;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.teacher-marking-item + .teacher-marking-item {
  border-top: 1px solid #edf1f2;
}

.teacher-marking-item:hover {
  background: #f6f9f9;
}

.teacher-marking-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #9c5b15;
  background: #fff0dc;
}

.teacher-marking-icon.quiz {
  color: #276994;
  background: #e5f1fb;
}

.teacher-marking-icon svg {
  width: 19px;
  height: 19px;
}

.teacher-marking-copy {
  min-width: 0;
  display: grid;
}

.teacher-marking-copy strong {
  overflow: hidden;
  color: var(--teacher-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teacher-marking-copy span,
.teacher-marking-copy small {
  overflow: hidden;
  color: #6d7d88;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teacher-marking-copy small {
  color: #a25820;
}

.teacher-followup-class {
  width: 100%;
  min-height: 67px;
  padding: 11px 13px;
  border: 0;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 20px;
  justify-content: stretch;
  text-align: left;
  background: transparent;
}

.teacher-followup-class + .teacher-followup-class {
  border-top: 1px solid #edf1f2;
}

.teacher-followup-class:hover {
  border-color: transparent;
  background: #f4f8f8;
  box-shadow: none;
}

.teacher-followup-mark {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 850;
  background: linear-gradient(135deg, var(--teacher-blue), var(--teacher-mint));
}

.teacher-followup-copy {
  min-width: 0;
  display: grid;
}

.teacher-followup-copy strong,
.teacher-followup-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teacher-followup-copy small {
  color: #6d7d88;
}

.teacher-dashboard-empty {
  min-height: 190px;
  margin: 16px;
  padding: 28px;
  border: 1px dashed #bfd1d3;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  text-align: left;
  background: #f6faf9;
}

.teacher-dashboard-empty > span {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #187a66;
  background: #ddf4ed;
}

.teacher-dashboard-empty strong {
  color: var(--teacher-ink);
}

.teacher-dashboard-empty p {
  max-width: 330px;
  margin: 3px 0 0;
  color: #6d7d88;
}

.teacher-quick-actions {
  margin-top: 18px;
}

.teacher-quick-grid {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.teacher-quick-grid > button {
  min-height: 112px;
  padding: 16px;
  border-color: #dce6e8;
  border-radius: 16px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  justify-content: stretch;
  text-align: left;
  background: #f8fafb;
}

.teacher-quick-grid > button:hover {
  border-color: #9ebfc2;
  background: #f0f7f6;
  transform: translateY(-2px);
}

.teacher-quick-grid > button > span {
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--teacher-blue);
  background: #e2f1f2;
}

.teacher-quick-grid > button strong {
  color: var(--teacher-ink);
}

.teacher-quick-grid > button small {
  color: #6d7d88;
  font-weight: 500;
}

.teacher-app-shell button:focus-visible,
.teacher-app-shell input:focus-visible,
.teacher-app-shell select:focus-visible {
  outline-color: rgba(23,107,135,.34);
}

.teacher-manual-score {
  margin: 18px 0;
  padding: 20px;
  border: 1px solid #b8d6d8;
  border-radius: 18px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(150px, .35fr);
  align-items: end;
  gap: 14px;
  background: #f3faf9;
  box-shadow: 0 12px 32px rgba(18, 49, 66, .07);
}

.teacher-manual-score h3 {
  margin: 0;
  color: #152437;
}

.teacher-manual-score p {
  margin: 5px 0 0;
  color: #5d707d;
}

.teacher-manual-score label {
  min-width: 0;
  color: #263b4b;
  font-weight: 750;
}

.teacher-manual-score label span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.teacher-manual-score input {
  width: 100%;
}

.teacher-manual-score label:has(textarea),
.teacher-manual-score .form-status {
  grid-column: 1 / -1;
}

.teacher-manual-score .form-status:empty {
  display: none;
}

.teacher-manual-score textarea {
  width: 100%;
  margin-top: 6px;
  resize: vertical;
}

.teacher-manual-score > button[type="submit"] {
  grid-column: 3;
  justify-self: stretch;
}

@media (max-width: 1100px) {
  .teacher-dashboard-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .teacher-action-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .teacher-welcome-card {
    min-height: 220px;
    padding: 28px 24px;
    border-radius: 22px;
  }

  .teacher-welcome-orbit {
    width: 118px;
    height: 118px;
    flex-basis: 118px;
  }

  .teacher-dashboard-metrics {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .teacher-dashboard-metric {
    min-height: 92px;
  }

  .teacher-action-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .teacher-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .teacher-marking-item {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .teacher-marking-item > button {
    grid-column: 2;
    justify-self: stretch;
  }

  .teacher-manual-score {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .teacher-manual-score label:has(textarea),
  .teacher-manual-score .form-status {
    grid-column: auto;
  }

  .teacher-manual-score > button[type="submit"] {
    grid-column: auto;
  }
}

@media (max-width: 480px) {
  .teacher-welcome-card {
    display: block;
  }

  .teacher-welcome-orbit {
    display: none;
  }

  .teacher-welcome-actions,
  .teacher-welcome-actions button {
    width: 100%;
  }

  .teacher-quick-grid {
    grid-template-columns: 1fr;
  }

  .teacher-followup-class {
    grid-template-columns: 40px minmax(0, 1fr) 18px;
  }

  .teacher-followup-class .status {
    display: none;
  }
}

@media (max-width: 560px) {
  .library-card-quick-actions > button { flex: 1 1 auto; }
  .library-card-more { margin-left: auto; }
  .assignment-compact-table table { min-width: 600px; }
}

/* Assignment-level timing: the reusable quiz/task can stay untimed while each
   class occurrence gets its own explicit limit. */
.assignment-time-field {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fafc;
}

.assignment-time-field.is-timed {
  border-color: #f2c76f;
  background: #fff9e9;
  box-shadow: inset 3px 0 0 #e49a19;
}

.assignment-time-field legend {
  padding: 0 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.assignment-time-toggle {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
}

.assignment-time-toggle input {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  accent-color: #c87800;
}

.assignment-time-toggle span,
.assignment-time-toggle small {
  display: block;
}

.assignment-time-toggle small {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.4;
}

.assignment-time-minutes {
  display: grid;
  grid-template-columns: auto 90px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding-left: 30px;
}

.assignment-time-minutes label {
  font-size: 13px;
  font-weight: 750;
}

.assignment-time-minutes input:disabled {
  opacity: .55;
}

/* Three-way timing choice shown when assigning (see assignmentTimingChoiceField). */
.assignment-timing-choice { gap: 8px; }

.assignment-timing-choice .timing-option {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  cursor: pointer;
}

.assignment-timing-choice .timing-option:hover { background: #eef4fa; }

.assignment-timing-choice .timing-option:has(input:checked) {
  border-color: #1967d2;
  background: #fff;
  box-shadow: 0 0 0 2px rgb(25 103 210 / 12%);
}

.assignment-timing-choice .timing-option input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #1967d2;
  flex: 0 0 auto;
}

.assignment-timing-choice .timing-option span,
.assignment-timing-choice .timing-option small {
  display: block;
}

.assignment-timing-choice .timing-option small {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.4;
}

/* The minutes box belongs to the "set a different limit" option, so it only comes
   forward once that option is chosen. */
.assignment-timing-choice .assignment-time-minutes {
  padding-left: 42px;
  opacity: .5;
  transition: opacity .15s ease;
}

.assignment-timing-choice.is-custom .assignment-time-minutes { opacity: 1; }

.writing-timer-chip {
  flex: 0 0 auto;
}

.writing-timer-banner {
  padding: 0 18px;
}

.writing-timer-banner .notice {
  margin-top: 10px;
}

@media (max-width: 620px) {
  .assignment-time-minutes {
    grid-template-columns: auto 82px;
  }
  .assignment-time-minutes .muted {
    grid-column: 1 / -1;
  }
}

/* ============ Fixed two-pane CBT attempt layout (wide screens) ============
   The shell fills the viewport exactly: header and bottom bar always visible,
   and the reading passage / questions each scroll inside their own full-height
   panel, separated by a draggable divider — like the Inspera digital exams.
   Below 1101px the columns stack and the page scrolls normally, so phones and
   small tablets keep the old behaviour. */

.attempt-divider {
  display: none;
  cursor: col-resize;
  background: transparent;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

.attempt-divider span {
  width: 4px;
  height: 46px;
  border-radius: 4px;
  background: var(--line-strong);
}

.attempt-divider:hover span,
.attempt-divider:active span {
  background: var(--teal);
}

@media (min-width: 1101px) {
  .cbt-shell {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  .cbt-shell .attempt-header,
  .cbt-shell #timerBanner,
  .cbt-shell .cbt-bottombar {
    flex-shrink: 0;
  }

  /* The bottom bar joins the flex column instead of floating over content.
     It stays "relative" rather than "static" so the back / next arrows can be
     anchored to it. */
  .cbt-shell .cbt-bottombar {
    position: relative;
  }

  .cbt-shell .attempt-body {
    flex: 1;
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
    padding-bottom: 0;
  }

  .cbt-shell .attempt-main-col {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 90px;
  }

  .cbt-shell .attempt-notes-rail {
    position: static;
    height: 100%;
    max-height: none;
    overflow-y: auto;
  }

  /* Pages with a reading passage: the column itself stops scrolling and the
     two panels take all the remaining height. */
  .cbt-shell.has-split .attempt-main-col {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 10px;
  }

  .cbt-shell.has-split .attempt-section-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0;
  }

  .cbt-shell.has-split .attempt-split.has-passage {
    flex: 1;
    min-height: 0;
    grid-template-columns: minmax(280px, var(--attempt-split, 53%)) 14px minmax(320px, 1fr);
    gap: 0;
    align-items: stretch;
  }

  .cbt-shell.has-split .attempt-split.has-passage .attempt-divider {
    display: flex;
  }

  .cbt-shell.has-split .attempt-split.has-passage .attempt-passage {
    position: static;
    top: auto;
    height: 100%;
    max-height: none;
    overflow-y: auto;
    min-height: 0;
  }

  .cbt-shell.has-split .attempt-split.has-passage .attempt-questions {
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    min-height: 0;
    padding: 2px 4px 96px 2px;
  }
}

/* ===== Student writing: one card per task, attempts inline ===== */
.writing-group {
  margin-bottom: 26px;
}

.writing-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

.writing-group-head h2 {
  margin: 0;
  font-size: 17px;
}

.writing-group-hint {
  margin: 0 0 12px;
  font-size: 13px;
}

.writing-task-cards {
  display: grid;
  gap: 12px;
}

.writing-task-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 16px 18px;
}

/* The group that still needs doing earns a visible edge; everything else stays quiet. */
.writing-group:first-of-type .writing-task-card {
  border-left: 3px solid var(--teal);
}

.writing-task-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.writing-task-title {
  padding: 0;
  min-height: 0;
  font-size: 16px;
  font-weight: 750;
  text-align: left;
}

.writing-task-meta {
  font-size: 13px;
  margin-top: 2px;
}

.writing-task-prompt {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 10px;
}

.writing-task-prompt p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

/* A fixed thumbnail keeps the task picture from burying the actions below it. */
.writing-task-thumb {
  width: 108px;
  height: 76px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: zoom-in;
  flex: none;
}

.writing-task-brief {
  margin-top: 12px;
}

.writing-task-action {
  margin-top: 14px;
}

.writing-task-note {
  margin: 12px 0 0;
  font-size: 13px;
}

.writing-task-history {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.writing-task-history > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  list-style: none;
}

.writing-task-history > summary::-webkit-details-marker {
  display: none;
}

.writing-task-history > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s ease;
}

.writing-task-history[open] > summary::before {
  content: "▾ ";
}

.writing-attempt-items {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.writing-attempt-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 6px;
}

.writing-attempt-item.is-latest {
  background: var(--surface);
}

.writing-attempt-no {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.writing-attempt-item.is-latest .writing-attempt-no {
  background: var(--teal-soft);
  color: var(--teal-dark);
}

.writing-attempt-body {
  min-width: 0;
  flex: 1;
}

.writing-attempt-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.writing-attempt-body .muted {
  font-size: 12px;
  margin-top: 1px;
}

@media (max-width: 640px) {
  .writing-task-prompt {
    flex-direction: column;
  }

  .writing-task-thumb {
    width: 100%;
    height: 120px;
  }

  .writing-attempt-item {
    flex-wrap: wrap;
  }

  .writing-attempt-item .row-actions {
    width: 100%;
  }
}

/* ===================================================================
   Quiz library — folder-and-file first
   The old layout spent ~540px of a 720px screen on a title, a marketing
   line, four stat tiles, and a two-row filter bar before the first quiz
   appeared. Everything below trades that chrome for content.
   =================================================================== */

/* --- Compact top bar (replaces page-head + the stat tile row) --- */
.library-workspace .library-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.library-topbar-identity { display: flex; align-items: baseline; gap: 14px; min-width: 0; flex-wrap: wrap; }
.library-topbar-identity h1 { margin: 0; font-size: 1.6rem; line-height: 1.2; }
.library-topbar-counts { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: #607083; white-space: nowrap; }
.library-topbar-counts b { color: #1f2937; font-weight: 800; }
.library-topbar-counts i { color: #c3ccd8; font-style: normal; }
.library-topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.library-draft-chip { border-style: dashed; }

.library-overflow { position: relative; }
.library-overflow > summary {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #d7e0e9;
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  list-style: none;
}
.library-overflow > summary::-webkit-details-marker { display: none; }
.library-overflow > summary:hover { border-color: #a9c7ee; background: #f8fbff; }
.library-overflow-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  display: grid;
  gap: 2px;
  min-width: 216px;
  padding: 6px;
  border: 1px solid #dfe4ea;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 14px 38px rgb(31 55 82 / 16%);
}
.library-overflow-menu button { width: 100%; justify-content: flex-start; border: 0; background: transparent; text-align: left; }
.library-overflow-menu button:hover { background: #f2f6fb; }

/* --- Collapsible folder rail --- */
.library-rail-top { display: flex; align-items: center; gap: 6px; }
.library-rail-top .library-drive-new { flex: 1; margin-bottom: 0; }
.library-rail-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  min-height: 48px;
  padding: 0;
  border: 1px solid #d7e0e9;
  border-radius: 12px;
  background: #fff;
  color: #607083;
  cursor: pointer;
}
.library-rail-toggle:hover { border-color: #a9c7ee; background: #f8fbff; color: #1967d2; }

.library-workspace.rail-collapsed .library-browser { grid-template-columns: 58px minmax(0, 1fr); }
.library-workspace.rail-collapsed .library-drive-nav { padding: 12px 8px; overflow: hidden; }
.library-workspace.rail-collapsed .library-drive-nav > *:not(.library-rail-top) { display: none; }
.library-workspace.rail-collapsed .library-rail-top { flex-direction: column; }
.library-workspace.rail-collapsed .library-drive-new { flex: none; width: 38px; min-height: 38px; padding: 0; }
.library-workspace.rail-collapsed .library-drive-new span { display: none; }

/* --- One command row: where you are, search, and tools ---
   Not sticky: .library-catalog sets overflow:hidden and container-type, either of
   which turns viewport sticky into an overlapping mess. */
.library-command-bar {
  padding: 14px 16px 12px;
  border-bottom: 1px solid #e3eaf1;
  background: #fff;
}
/* The two rows are different jobs — "where am I" above, "narrow the list" below —
   so a hairline separates them instead of leaving one undifferentiated slab. */
.library-command-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 11px;
  margin-top: 2px;
  border-top: 1px solid #eef2f6;
}
.library-where { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.library-where-count {
  padding: 3px 9px;
  border-radius: 999px;
  background: #eef2f6;
  color: #607083;
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
}
.library-command-row .library-search { flex: 1 1 260px; min-width: 200px; margin: 0; }
.library-command-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.library-command-tools > button { min-height: 38px; padding: 0 11px; }

.library-filter-pop { position: relative; }
.library-filter-pop > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid #d7e0e9;
  border-radius: 11px;
  background: #fff;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.library-filter-pop > summary::-webkit-details-marker { display: none; }
.library-filter-pop.has-filters > summary { border-color: #1967d2; background: #eef4fe; color: #1967d2; }
.library-filter-pop > summary b {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: #1967d2;
  color: #fff;
  font-size: .68rem;
  text-align: center;
}
.library-filter-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  display: grid;
  gap: 10px;
  min-width: 250px;
  padding: 13px;
  border: 1px solid #dfe4ea;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 14px 38px rgb(31 55 82 / 16%);
}
.library-filter-menu label { display: grid; gap: 5px; font-size: .74rem; font-weight: 800; color: #607083; }

/* --- Folders as a single scannable strip, not full-size cards --- */
.library-folder-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 14px 0;
}
.library-folder-chip {
  display: flex;
  align-items: stretch;
  border: 1px solid #dfe4ea;
  border-left: 3px solid var(--folder-color, #1967d2);
  border-radius: 11px;
  background: #fff;
  overflow: hidden;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.library-folder-chip:hover { border-color: #a9c7ee; box-shadow: 0 4px 14px rgb(31 55 82 / 9%); }
.library-folder-chip.library-folder-drop-active { border-color: #1967d2; background: #eef4fe; }
.library-folder-chip-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
  min-height: 40px;
  padding: 0 4px 0 11px;
  border: 0;
  background: transparent;
  font-size: .84rem;
  cursor: pointer;
}
.library-folder-chip-open .icon { color: var(--folder-color, #1967d2); flex: none; }
.library-folder-chip-open strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.library-folder-chip-open small {
  flex: none;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #eef2f6;
  color: #657487;
  font-size: .7rem;
  text-align: center;
}
.library-folder-chip-menu {
  display: grid;
  place-items: center;
  width: 32px;
  border: 0;
  border-left: 1px solid #eef2f6;
  background: transparent;
  color: #94a3b5;
  cursor: pointer;
}
.library-folder-chip-menu:hover { background: #f2f6fb; color: #1967d2; }

/* --- Who added it, who changed it last --- */
.library-card-people {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e6ebf1;
  font-size: .72rem;
  color: #78879a;
}
.library-card-people span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.library-card-people b { color: #40546a; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
  .library-workspace .library-topbar { gap: 10px; }
  .library-topbar-actions { width: 100%; margin-left: 0; }
  .library-workspace.rail-collapsed .library-browser { grid-template-columns: minmax(0, 1fr); }
  .library-folder-chip-open { max-width: 190px; }
}

/* --- Density: more folders and files visible without scrolling --- */
/* The tree is the primary way around the library, so it earns the space it uses.
   Trimming row height from 50px to 38px roughly doubles the folders on screen. */
.library-drive-nav .library-folder-button { min-height: 38px; padding-top: 4px; padding-bottom: 4px; }
.library-drive-nav .library-folder-row { margin-bottom: 1px; }
.library-quick-filters .library-collection-button { min-height: 36px; }
.library-access-note { padding: 9px; }
.library-access-note small { display: none; }

/* Sort and direction controls are icon-tight inside the command row so the whole
   toolbar fits on one line at laptop widths. */
.library-command-tools .library-sort-bar { gap: 6px; margin: 0; }
.library-command-tools .library-sort-bar label { display: inline-flex; align-items: center; gap: 6px; font-size: 0; }
.library-command-tools .library-sort-bar select { min-height: 38px; font-size: .82rem; }
.library-command-tools .library-layout-toggle button { min-height: 38px; }
.sort-dir-button {
  display: grid;
  place-items: center;
  width: 38px;
  min-height: 38px;
  padding: 0;
  border: 1px solid #d7e0e9;
  border-radius: 11px;
  background: #fff;
  font-size: 1rem;
  font-weight: 800;
  color: #1967d2;
  cursor: pointer;
}
.sort-dir-button:hover { border-color: #a9c7ee; background: #f8fbff; }

/* ===================================================================
   Collapsible main sidebar
   =================================================================== */
.sidebar-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  margin-bottom: 4px;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  color: #8b97a6;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  border-radius: 9px;
}
.sidebar-toggle:hover { background: #eef4f3; color: var(--text); }
.sidebar-toggle > span:first-child { width: 18px; text-align: center; font-size: .95rem; }

.app-shell.sidebar-collapsed { grid-template-columns: 68px 1fr; }
.app-shell.sidebar-collapsed .sidebar { padding: 14px 10px; align-items: center; }
.app-shell.sidebar-collapsed .nav-label { display: none; }
.app-shell.sidebar-collapsed .nav-button,
.app-shell.sidebar-collapsed .sidebar-toggle {
  justify-content: center;
  gap: 0;
  padding: 10px 0;
}
.app-shell.sidebar-collapsed .nav-button .icon { margin: 0; }

/* ===================================================================
   Drive-style library: breadcrumb row, filter chips, unified file list
   =================================================================== */
.library-crumb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.library-crumb-row .library-breadcrumbs { flex: 0 1 auto; font-size: 1.15rem; }
.library-crumb-row .library-breadcrumbs button { font-size: 1.05rem; padding: 4px 7px; border-radius: 8px; }
.library-crumb-row .library-breadcrumbs button:hover { background: #eef2f6; }
.library-crumb-row .library-breadcrumbs button:last-child { font-weight: 700; }
.library-crumb-row .library-search { flex: 1 1 260px; min-width: 260px; margin-left: auto; }

/* Folder actions used to be a bare ▾ glyph that teachers could not find. It is now
   a labelled button that reads as the control it is. */
.library-crumb-menu { position: relative; }
.library-crumb-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #cbd7e3;
  border-radius: 9px;
  background: #fff;
  font-size: .82rem;
  font-weight: 600;
  color: #33475e;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgb(31 55 82 / 6%);
}
.library-crumb-menu > summary::-webkit-details-marker { display: none; }
.library-crumb-menu > summary .icon { width: 15px; height: 15px; opacity: .75; }
.library-crumb-menu > summary:hover { background: #f2f6fb; border-color: #9db4cc; }
.library-crumb-menu[open] > summary {
  background: #e8f0fe;
  border-color: #1967d2;
  color: #174ea6;
}
.library-crumb-menu > summary:focus-visible { outline: 2px solid #1967d2; outline-offset: 2px; }
.library-crumb-menu .library-row-menu { left: 0; right: auto; }
.library-row-menu .danger-item { color: #b3261e; }
.library-row-menu .danger-item:hover { background: #fdecea; }

@media (max-width: 620px) {
  .library-crumb-menu > summary span { display: none; }
  .library-crumb-menu > summary { padding: 0 10px; }
}

.library-chip-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.library-chip { position: relative; }
.library-chip > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid #d7e0e9;
  border-radius: 999px;
  background: #fff;
  font-size: .81rem;
  font-weight: 600;
  color: #40546a;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.library-chip > summary::-webkit-details-marker { display: none; }
.library-chip > summary:hover { background: #f2f6fb; border-color: #9db4cc; }
.library-chip > summary:focus-visible { outline: 2px solid #1967d2; outline-offset: 2px; }
.library-chip > summary .icon { width: 13px; height: 13px; opacity: .6; }
.library-chip .chip-caret { font-size: .72rem; opacity: .6; transition: transform .15s ease; }
/* The open chip has to out-rank the merely-active chips, or you lose track of which
   menu you are actually looking at. */
.library-chip[open] > summary {
  border-color: #1967d2;
  background: #fff;
  color: #174ea6;
  box-shadow: 0 0 0 3px rgb(25 103 210 / 14%);
}
.library-chip[open] .chip-caret { transform: rotate(180deg); }
.library-chip.active > summary { border-color: #1967d2; background: #e8f0fe; color: #174ea6; }
.library-chip-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 5px);
  z-index: 40;
  display: grid;
  gap: 1px;
  min-width: 210px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #dfe4ea;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 34px rgb(31 55 82 / 16%);
}
.library-chip-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: .82rem;
  padding: 7px 9px;
  border-radius: 8px;
}
.library-chip-menu button:hover { background: #f2f6fb; }
.library-chip-menu button.chosen { background: #e8f0fe; color: #174ea6; font-weight: 700; }
.library-chip-menu button b { color: #8b97a6; font-weight: 600; }
.library-chip-reset {
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: .8rem;
}

/* --- The file list itself --- */
.library-list { display: flex; flex-direction: column; }
.library-list-head,
.library-row {
  display: grid;
  /* The name takes every spare pixel; the meta columns are capped so they cannot
     starve it, which is what was truncating both titles and their own headers. */
  grid-template-columns: minmax(0, 1fr) minmax(78px, 132px) minmax(74px, 104px) minmax(84px, 142px) 72px;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
}
.library-list-head {
  min-height: 38px;
  border-bottom: 1px solid #dfe6ee;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8494a6;
}

/* Folders and files are different kinds of thing, so the list says so out loud
   instead of relying on the reader to spot a different icon. */
.library-group-label {
  display: flex;
  align-items: center;
  padding: 14px 14px 6px;
}
.library-group-label span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #8494a6;
}
.library-group-label .icon { width: 13px; height: 13px; }
.library-group-label b {
  padding: 1px 7px;
  border-radius: 999px;
  background: #eef2f6;
  color: #607083;
  font-size: .72rem;
  letter-spacing: 0;
}
.library-list-head > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-list-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  padding: 4px 8px;
  margin-left: -8px;
  border: 0;
  background: transparent;
  border-radius: 7px;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.library-list-sort:hover { background: #eef2f6; color: var(--text); }
.library-list-sort.active { color: #1967d2; }
.library-list-sort i { font-style: normal; font-size: .85rem; }

.library-row {
  min-height: 52px;
  border-bottom: 1px solid #eff3f7;
  border-left: 3px solid transparent;
  border-radius: 0 8px 8px 0;
}
.library-row:hover { background: #f4f8fc; }
.library-row:last-child { border-bottom: 0; }
.library-row.library-folder-drop-active { background: #e8f0fe; border-left-color: #1967d2; }
.library-card-dragging { opacity: .45; }

/* Folder rows carry the folder's own colour and a tinted band, so you can tell a
   container from its contents at a glance rather than by reading the icon. */
.library-row-folder {
  border-left-color: var(--folder-color, #9db4cc);
  background: color-mix(in srgb, var(--folder-color, #5f6368) 5%, #fff);
}
.library-row-folder:hover { background: color-mix(in srgb, var(--folder-color, #5f6368) 11%, #fff); }

.library-row-name {
  display: inline-flex;
  align-items: center;
  /* The global button rule centres its content; a file name must start at the
     same left edge on every row or the column reads as ragged. */
  justify-content: flex-start;
  gap: 11px;
  min-width: 0;
  width: 100%;
  padding: 6px 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
}
/* A filled tile makes the icon a consistent anchor down the left edge. */
.library-row-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #eef2f6;
  color: #607083;
}
.library-row-icon .icon { width: 16px; height: 16px; }
.library-row-icon.folder {
  color: var(--folder-color, #5f6368);
  background: color-mix(in srgb, var(--folder-color, #5f6368) 16%, #fff);
}
.library-row-icon.quiz { color: #1967d2; background: #e8f0fe; }
.library-row-icon.writing { color: #b06000; background: #fdf1e3; }

/* One hue per exam skill. Chosen to stay distinguishable side by side and to keep
   text-on-tint contrast above 4.5:1; the icon is stroke-only so the tint carries
   the meaning and the glyph stays legible. */
.library-row-icon.skill-reading { color: #1967d2; background: #e6effd; }
.library-row-icon.skill-listening { color: #7b3fbf; background: #f1e9fb; }
.library-row-icon.skill-use-of-english { color: #0b7b6b; background: #e2f4f1; }
.library-row-icon.skill-reading-and-use-of-english { color: #12628f; background: #e4eff7; }
.library-row-icon.skill-grammar { color: #1a6b8f; background: #e3f1f8; }
.library-row-icon.skill-vocabulary { color: #a3562a; background: #fbeee4; }
.library-row-icon.skill-writing { color: #b06000; background: #fdf1e3; }
.library-row-icon.skill-speaking { color: #b3306b; background: #fce9f1; }
.library-row-icon.skill-mixed { color: #5c6b7a; background: #eef2f6; }
.library-row-icon.skill-unset { color: #8494a6; background: #f1f4f7; }
.library-row-folder .library-row-title { font-weight: 750; }
.library-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The "open me" affordance, kept quiet until you are on the row. */
.library-row-enter {
  flex: none;
  margin-left: 2px;
  color: var(--folder-color, #8494a6);
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity .15s ease, transform .15s ease;
}
.library-row-folder:hover .library-row-enter,
.library-row-open:focus-visible .library-row-enter { opacity: 1; transform: none; }

/* Folders have no author, edit date or class, so instead of padding three columns
   with em-dashes they get one honest summary spanning the same space. */
.library-row-summary {
  grid-column: span 3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .78rem;
  font-weight: 600;
  color: #7c8b9a;
}
.library-row-tags { display: inline-flex; gap: 4px; flex: none; }
.library-row-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .79rem;
  color: #66788c;
}
.library-row-meta small { margin-left: 5px; color: #97a4b4; }
/* Assigned reads as a badge; unassigned stays deliberately quiet. */
.library-row-assigned {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 3px 9px;
  border-radius: 999px;
  background: #e6f6ef;
  color: #0b6b4a;
  font-size: .74rem;
  font-weight: 700;
}
.library-row-unassigned { color: #a3aebd; font-style: italic; }

.library-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  /* Always the final track, whatever the breakpoint left standing — otherwise a
     folder row with fewer cells wraps its actions onto a second line. */
  grid-column: -2 / -1;
}
.library-row-actions .icon-button { opacity: 0; }
.library-row:hover .library-row-actions .icon-button,
.library-row-actions .icon-button:focus-visible { opacity: 1; }
.library-row-more { position: relative; }
.library-row-more > summary {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #94a3b5;
  cursor: pointer;
  list-style: none;
}
.library-row-more > summary::-webkit-details-marker { display: none; }
.library-row-more > summary:hover { background: #eef2f6; color: #1967d2; }
.library-row-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 45;
  display: grid;
  gap: 1px;
  min-width: 194px;
  padding: 6px;
  border: 1px solid #dfe4ea;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 34px rgb(31 55 82 / 16%);
}
.library-row-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: .82rem;
  padding: 7px 9px;
  border-radius: 8px;
}
.library-row-menu button:hover { background: #f2f6fb; }
.library-row-menu button.danger:hover { background: #fdecea; }

@media (max-width: 1000px) {
  .library-crumb-row .library-search { flex-basis: 100%; margin-left: 0; }
}

/* The catalog sits beside a folder rail, so it is far narrower than the viewport —
   a viewport media query never fired while the Name column was actually starved.
   These key off .library-catalog's own inline size instead, dropping the least
   important column first so the name always keeps the room it needs. */
@container (max-width: 900px) {
  .library-list-head,
  .library-row { grid-template-columns: minmax(0, 1fr) minmax(74px, 104px) minmax(84px, 142px) 72px; }
  .library-col-author { display: none; }
  .library-row-summary { grid-column: span 2; }
}
@container (max-width: 700px) {
  .library-list-head,
  .library-row { grid-template-columns: minmax(0, 1fr) minmax(84px, 142px) 72px; }
  .library-col-modified { display: none; }
  .library-row-summary { grid-column: span 1; }
}
@container (max-width: 520px) {
  .library-list-head,
  .library-row { grid-template-columns: minmax(0, 1fr) 72px; }
  .library-col-classes { display: none; }
  /* No column left to hold it; the folder is obvious from its tint and icon. */
  .library-row-summary { display: none; }
}
@media (max-width: 700px) {
  .app-shell.sidebar-collapsed { grid-template-columns: 56px 1fr; }
}
.chip-caret { font-style: normal; font-size: .7rem; opacity: .65; line-height: 1; }
.library-crumb-menu .chip-caret { font-size: .8rem; }
/* The file name owns the Name column outright — Drive keeps labels out of it. */
.library-row-name { display: flex; width: 100%; min-width: 0; }
.library-row-title { flex: 0 1 auto; min-width: 0; }

/* ----- Administration: teacher approval + per-account activity log ----- */

.role-approval-note { display: block; margin-top: 8px; font-size: .82rem; color: var(--muted, #64748b); }
.pending-teacher-card .notice { margin: 14px 0; }
.pending-teacher-actions { flex-wrap: wrap; justify-content: flex-start; gap: 10px; }

.admin-approval-panel { border: 1px solid rgba(217, 119, 6, .35); background: linear-gradient(180deg, rgba(254, 243, 199, .45), transparent 70%); }
.admin-approval-note { margin: 0 0 10px; }

.admin-user-row { cursor: pointer; }
.admin-user-row:hover td { background: rgba(13, 148, 136, .06); }
.admin-user-row .row-actions button { cursor: pointer; }

.admin-user-activity { display: grid; gap: 14px; }
.activity-identity { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.activity-identity strong { font-size: 1.05rem; }
.activity-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.activity-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: .85rem; color: var(--muted, #64748b); }
.activity-meta span { display: inline-flex; align-items: center; gap: 6px; }
.activity-meta svg { width: 15px; height: 15px; }
.activity-heading { margin: 6px 0 0; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #64748b); }
.activity-section { border: 1px solid var(--line, #e2e8f0); border-radius: 12px; background: #fff; overflow: hidden; }
.activity-section > summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; font-weight: 600; list-style: none; }
.activity-section > summary::-webkit-details-marker { display: none; }
.activity-section > summary::before { content: "▸"; font-size: .75rem; color: var(--muted, #64748b); transition: transform .15s ease; }
.activity-section[open] > summary::before { transform: rotate(90deg); }
.activity-section .table-wrap { border-top: 1px solid var(--line, #e2e8f0); max-height: 300px; overflow-y: auto; }
.activity-section table { font-size: .86rem; }
.activity-line { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--line, #e2e8f0); border-radius: 12px; background: #fff; font-size: .9rem; }
.activity-line svg { width: 16px; height: 16px; color: var(--teal, #0d9488); }

/* ----- Assignment analytics: one chip per attempt, nothing overwritten ----- */

.attempt-average-note { margin: 6px 2px 0; font-size: .8rem; }
.attempt-count-note { font-style: normal; font-size: .72rem; color: var(--muted, #64748b); }
/* Mirrors .score-bar-row's grid so the chips sit under the bar, not the name. */
.attempt-chip-row {
  display: grid;
  grid-template-columns: minmax(120px, 210px) minmax(120px, 1fr);
  gap: 10px;
  margin-top: -2px;
}
.attempt-chip-row > div { display: flex; gap: 6px; flex-wrap: wrap; }
.attempt-chip {
  display: grid;
  gap: 2px;
  align-items: start;
  font-size: .72rem;
}
.attempt-chip small {
  color: inherit;
  font-size: .64rem;
  font-weight: 650;
  opacity: .78;
}
@media (max-width: 700px) {
  .attempt-chip-row { grid-template-columns: 1fr; }
  .attempt-chip-row > span { display: none; }
}

/* ----- Mass assign: tick many quizzes/writing tasks for one class ----- */

.mass-assign-list {
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  background: #fff;
  /* The modal form is a height-constrained grid: without a min-height this
     scrollable row is squeezed to nothing before the form itself scrolls. */
  min-height: 200px;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 14px;
}
.mass-assign-group + .mass-assign-group { border-top: 1px solid var(--line, #e2e8f0); }
.mass-assign-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px 6px;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
.mass-assign-group-head h3 {
  margin: 0;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mass-assign-group-head .row-actions button { font-size: .78rem; padding: 4px 8px; }
.mass-assign-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  border-top: 1px solid #f1f5f9;
}
.mass-assign-row:hover { background: #f8fafc; }
.mass-assign-row input[type="checkbox"] { width: 17px; height: 17px; flex: none; accent-color: var(--teal, #0d9488); }
.mass-assign-title { flex: 1 1 auto; font-weight: 600; font-size: .92rem; }
.mass-assign-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.mass-assign-chips .status { font-size: .7rem; }

/* On phones the sidebar is a horizontal tab strip, so the desktop "collapsed
   sidebar" preference must not shrink the grid or hide the tab labels there. */
@media (max-width: 760px) {
  .app-shell.sidebar-collapsed { grid-template-columns: minmax(0, 1fr); }
  .app-shell.sidebar-collapsed .sidebar { padding: 6px 8px; align-items: center; }
  .app-shell.sidebar-collapsed .nav-label { display: inline; }
  .app-shell.sidebar-collapsed .nav-button { justify-content: flex-start; }
}

/* "Who still owes homework" panel on the class dashboard: one row per student
   who owes work, worst offenders first, with chips for each missing item. */
.todo-head-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.todo-list { display: grid; }
.todo-student { padding: 12px 18px; border-top: 1px solid var(--line, #dce6e8); }
.todo-student:first-child { border-top: 0; }
.todo-student-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.todo-student-head .linkish { padding: 0; font-size: 15px; }
.todo-ratio { font-size: 12px; }
.todo-copy { margin-left: auto; font-size: 12.5px; padding: 4px 10px; }
.todo-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.todo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 10px;
  border: 1px solid var(--line, #dce6e8);
  border-radius: 999px;
  background: var(--surface, #f7fafb);
  font-size: 12.5px;
}
.todo-chip svg { width: 13px; height: 13px; flex: none; color: var(--muted, #62727f); }
.todo-chip b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; min-width: 0; }
.todo-chip small { color: var(--muted, #62727f); white-space: nowrap; }
.todo-chip.overdue { background: var(--red-soft, #fff0f1); border-color: #f3c1c5; }
.todo-chip.overdue svg, .todo-chip.overdue small { color: var(--red, #cf2f3a); }
.todo-note { font-size: 12px; margin-top: 6px; }
.todo-caught-up {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--line, #dce6e8);
  background: var(--green-soft, #e7f7ec);
  color: var(--green, #15803d);
  font-weight: 600;
  font-size: 13.5px;
  border-radius: 0 0 var(--radius, 8px) var(--radius, 8px);
}
.todo-caught-up svg { width: 15px; height: 15px; flex: none; }
.todo-all-clear { border-top: 0; border-radius: 0 0 var(--radius, 8px) var(--radius, 8px); }
@media (max-width: 760px) {
  .todo-student { padding: 10px 12px; }
  .todo-caught-up { padding: 10px 12px; }
  .todo-copy { margin-left: 0; flex: none; }
  /* Long titles + due text can exceed a phone's width; let the chip wrap
     internally instead of stretching the whole panel sideways. */
  .todo-chip { flex-wrap: wrap; row-gap: 2px; }
  .todo-chip b { max-width: 100%; }
  .todo-chip small { white-space: normal; }
}

/* --------------------------------------------------------------------------
   Student learning space
   A warmer, more directional visual system than the teacher workspace: navy
   navigation, bright focus surfaces, obvious task types, and reassuring empty
   states. All selectors stay under .student-app-shell/student-* so the teacher
   interface keeps its existing density.
   -------------------------------------------------------------------------- */
.student-app-shell {
  --student-ink: #15314b;
  --student-blue: #1268a5;
  --student-blue-deep: #0b416a;
  --student-sky: #e9f6ff;
  --student-yellow: #ffed45;
  --student-coral: #ef5a67;
  --student-mint: #dff7eb;
  --student-purple: #6857c8;
}

.student-app-shell > .topbar {
  border-bottom: 3px solid var(--student-yellow);
  box-shadow: 0 7px 24px rgba(13, 65, 101, .08);
}

.student-app-shell > .main {
  background:
    radial-gradient(circle at 92% 4%, rgba(31, 146, 211, .12), transparent 27rem),
    linear-gradient(180deg, #f5fbff 0, #f8fafc 36rem);
}

.student-sidebar {
  color: #ddebfa;
  background: linear-gradient(175deg, #102e48 0%, #0b3e61 58%, #12669a 130%);
  border-right: 0;
  box-shadow: 8px 0 28px rgba(11, 48, 75, .12);
}

.student-sidebar .student-nav-label {
  margin: 8px 12px 3px;
  color: #88b3d0;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.student-sidebar .sidebar-toggle,
.student-sidebar .nav-button {
  color: #d8e9f5;
  border-color: transparent;
  background: transparent;
}

.student-sidebar .sidebar-toggle:hover,
.student-sidebar .nav-button:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .08);
  box-shadow: none;
}

.student-sidebar .nav-button.active {
  color: #12314a;
  background: var(--student-yellow);
  border-color: var(--student-yellow);
  box-shadow: 0 9px 22px rgba(4, 28, 46, .25);
}

.student-sidebar .nav-count {
  color: #fff;
  background: var(--student-coral);
}

.student-sidebar > [data-action="logout"] {
  color: #a9c8dc;
}

.student-overview,
.student-landing,
.student-class-view,
.student-writing-hub {
  width: min(1180px, 100%);
  max-width: none;
  margin-inline: auto;
}

.student-eyebrow {
  display: inline-flex;
  align-items: center;
  color: #42718e;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.student-welcome-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 32px;
  align-items: center;
  min-height: 250px;
  margin-bottom: 20px;
  padding: 40px 44px;
  overflow: hidden;
  color: #fff;
  border: 0;
  border-radius: 24px;
  background:
    radial-gradient(circle at 84% 18%, rgba(255, 237, 69, .27), transparent 12rem),
    linear-gradient(125deg, #0c4168 0%, #126da9 62%, #2498c8 100%);
  box-shadow: 0 22px 50px rgba(16, 80, 122, .22);
}

.student-welcome-card::before,
.student-welcome-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
}

.student-welcome-card::before {
  width: 250px;
  height: 250px;
  right: -40px;
  top: -96px;
}

.student-welcome-card::after {
  width: 150px;
  height: 150px;
  right: 110px;
  bottom: -112px;
}

.student-welcome-card .student-eyebrow {
  color: var(--student-yellow);
}

.student-welcome-card h1 {
  max-width: 720px;
  margin: 10px 0 8px;
  color: #fff;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.student-welcome-card p {
  max-width: 670px;
  margin: 0;
  color: #dceefa;
  font-size: 16px;
}

.student-welcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 23px;
}

.student-welcome-card .student-hero-action {
  min-height: 46px;
  color: #12314a;
  background: #fff;
  border-color: #fff;
  box-shadow: 0 8px 20px rgba(4, 37, 61, .18);
}

.student-welcome-card .student-hero-action.primary {
  background: var(--student-yellow);
  border-color: var(--student-yellow);
}

.student-welcome-orbit {
  display: grid;
  justify-items: center;
  align-content: center;
  width: 154px;
  height: 154px;
  border: 1px solid rgba(255, 255, 255, .31);
  border-radius: 50%;
  background: rgba(255, 255, 255, .11);
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, .045);
  backdrop-filter: blur(5px);
}

.student-welcome-orbit > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #133d5b;
  border-radius: 50%;
  background: var(--student-yellow);
}

.student-welcome-orbit > span svg {
  width: 18px;
  height: 18px;
}

.student-welcome-orbit strong {
  margin-top: 2px;
  color: #fff;
  font-size: 38px;
  line-height: 1;
}

.student-welcome-orbit small {
  margin-top: 6px;
  color: #dceefa;
  font-weight: 750;
}

.student-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.student-stat-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  min-height: 94px;
  padding: 18px;
  border: 1px solid #d7e6ef;
  border-radius: 16px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 9px 24px rgba(21, 68, 98, .07);
}

.student-stat-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--student-blue);
  border-radius: 14px;
  background: var(--student-sky);
}

.student-stat-icon svg {
  width: 21px;
  height: 21px;
}

.student-stat-copy {
  display: grid;
  min-width: 0;
}

.student-stat-copy strong {
  color: var(--student-ink);
  font-size: 14px;
}

.student-stat-copy span {
  overflow: hidden;
  color: #6b8190;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-stat-card > b {
  color: var(--student-ink);
  font-size: 30px;
  line-height: 1;
}

.student-stat-card.action .student-stat-icon {
  color: #b23c48;
  background: #fff0f1;
}

.student-stat-card.waiting .student-stat-icon {
  color: #95610a;
  background: #fff6d9;
}

.student-stat-card.review .student-stat-icon {
  color: #147044;
  background: var(--student-mint);
}

.student-stat-card.total .student-stat-icon {
  color: #5544ae;
  background: #efedff;
}

.student-overview > .panel,
.student-class-view > .panel,
.student-landing > .panel,
.student-all-homework {
  overflow: hidden;
  border-color: #d7e6ef;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(21, 68, 98, .06);
}

.student-overview > .panel + .panel,
.student-class-view > .panel + .panel {
  margin-top: 18px;
}

.student-overview .panel-head,
.student-class-view .panel-head,
.student-landing .panel-head {
  min-height: 60px;
  padding: 14px 20px;
  border-bottom-color: #e4edf2;
}

.student-overview .panel-head h2,
.student-class-view .panel-head h2,
.student-landing .panel-head h2 {
  color: var(--student-ink);
}

.student-todo-panel {
  border-top: 4px solid var(--student-coral) !important;
}

.review-ready-panel {
  border-top: 4px solid #35a96d !important;
  background: linear-gradient(180deg, #f6fffa, #fff 150px);
}

.student-progress-panel {
  border-top: 4px solid var(--student-purple) !important;
}

.review-ready-hint {
  margin: 13px 20px 4px;
}

.student-app-shell .review-ready-list {
  padding: 9px 12px 14px;
  gap: 8px;
}

.student-app-shell .review-ready-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  min-height: 78px;
  padding: 12px 12px;
  border: 1px solid #e2ebf0;
  border-radius: 13px;
  background: #fff;
}

.student-app-shell .review-ready-item:hover {
  border-color: #b8d4e4;
  background: #fbfdff;
  box-shadow: 0 8px 22px rgba(21, 68, 98, .08);
  transform: translateY(-1px);
}

.student-task-icon {
  display: grid;
  place-items: center;
  align-self: start;
  width: 42px;
  height: 42px;
  color: #2b66a3;
  border-radius: 12px;
  background: #eaf4ff;
}

.student-task-icon.writing {
  color: #6a48a9;
  background: #f1ecff;
}

.student-task-icon.is-review {
  color: #13764a;
  background: #e3f8ed;
}

.student-task-icon svg {
  width: 19px;
  height: 19px;
}

.student-app-shell .owed-item.is-overdue {
  border-color: #f3c7cb;
  background: linear-gradient(90deg, #fff4f5, #fff 34%);
}

.student-app-shell .owed-title {
  justify-content: flex-start;
  min-height: 0;
  padding: 0;
  color: var(--student-ink);
  text-align: left;
}

.student-app-shell .review-ready-item > button {
  min-height: 42px;
  border-radius: 10px;
}

.student-empty-state {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 13px;
  padding: 22px;
  color: #286245;
  border: 1px dashed #9cd8b7;
  border-radius: 14px;
  background: #f0fcf5;
}

.student-empty-state.neutral {
  color: #365c75;
  border-color: #b8d5e6;
  background: #f1f9fe;
}

.student-empty-state > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
}

.student-empty-state svg {
  width: 20px;
  height: 20px;
}

.student-empty-state strong {
  color: inherit;
  font-size: 15px;
}

.student-empty-state p {
  margin: 2px 0 0;
  color: #67808f;
}

.student-connect-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(290px, .75fr);
  gap: 20px;
  align-items: center;
  margin-bottom: 18px;
  padding: 22px;
  color: #4a3b08;
  border: 1px solid #e8d33d;
  border-radius: 18px;
  background: linear-gradient(115deg, #fff9bc, #fffdf0);
  box-shadow: 0 10px 26px rgba(116, 92, 7, .09);
}

.student-connect-illustration {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  color: #654f00;
  border-radius: 18px;
  background: var(--student-yellow);
}

.student-connect-illustration svg {
  width: 28px;
  height: 28px;
}

.student-connect-card .student-eyebrow {
  color: #846900;
}

.student-connect-card h2 {
  margin: 3px 0;
  color: #3d3208;
}

.student-connect-card p {
  margin: 0;
  color: #6f622a;
}

/* Which Google account you are on. Sits under the "connect your class" copy and
   in the empty My-classes state, because signing in on the wrong Google account
   is the usual reason a student's class disappears. It gets its own panel: for
   the student this line is the answer, not a footnote. */
.student-connect-account {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 12px !important;
  padding: 10px 12px;
  border: 1px solid rgba(132, 105, 0, .28);
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
  font-size: 13px;
  line-height: 1.55;
}

.student-connect-account span {
  min-width: 0;
}

.student-connect-account strong {
  word-break: break-all;
}

.student-connect-account .linkish {
  flex: none;
  padding: 0;
  font-size: 13px;
  font-weight: 800;
  text-decoration: underline;
}

.student-empty-state .student-connect-account {
  color: var(--muted);
  border-color: var(--line);
  background: var(--card);
}

.student-connect-form label {
  display: block;
  margin-bottom: 6px;
  color: #564705;
  font-size: 12px;
  font-weight: 800;
}

.student-connect-form > div {
  display: flex;
  gap: 8px;
}

.student-connect-form input {
  min-width: 0;
  background: #fff;
}

.student-page-head {
  padding-block: 12px 6px;
}

.student-page-head h1 {
  margin: 5px 0 2px;
  color: var(--student-ink);
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -.03em;
}

.student-home-notice {
  margin-bottom: 16px;
  border-radius: 12px;
}

.student-landing .my-classes-panel {
  margin-top: 12px;
}

.student-app-shell .class-chip-grid {
  gap: 14px;
  padding: 18px;
}

.student-app-shell .class-chip-button {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  min-height: 190px;
  padding: 20px;
  overflow: hidden;
  text-align: left;
  border: 1px solid #d7e6ef;
  border-radius: 17px;
  background:
    linear-gradient(145deg, rgba(234, 246, 255, .9), #fff 52%);
  box-shadow: 0 10px 25px rgba(21, 68, 98, .06);
}

.student-app-shell .class-chip-button::after {
  content: "";
  position: absolute;
  width: 96px;
  height: 96px;
  right: -44px;
  top: -44px;
  border-radius: 50%;
  background: var(--student-yellow);
  opacity: .75;
}

.student-app-shell .class-chip-button:hover {
  border-color: #91bed7;
  box-shadow: 0 15px 32px rgba(21, 68, 98, .13);
  transform: translateY(-2px);
}

.class-chip-mark {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  color: #fff;
  border-radius: 15px;
  background: linear-gradient(145deg, #0f5f95, #2397c7);
  box-shadow: 0 8px 16px rgba(17, 105, 158, .2);
  font-size: 20px;
  font-weight: 850;
}

.class-chip-copy {
  display: grid;
  min-width: 0;
  align-content: start;
}

.student-app-shell .class-chip-copy > strong {
  margin: 5px 0 2px;
  overflow: hidden;
  color: var(--student-ink);
  font-size: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-app-shell .class-chip-tags {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: auto;
}

.student-app-shell .class-chip-open {
  grid-column: 1 / -1;
  justify-self: stretch;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-top: 12px;
  color: var(--student-blue);
  border-top: 1px solid #e2ebf0;
  font-weight: 800;
}

.student-join-inline {
  margin: 4px 18px 18px;
  padding: 16px;
  border: 1px dashed #bad2e1;
  border-radius: 14px;
  background: #f7fbfe;
}

.student-class-hero {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 16px;
  padding: 26px 30px;
  color: #fff;
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 237, 69, .28), transparent 11rem),
    linear-gradient(120deg, #123957, #126ca6);
  box-shadow: 0 16px 36px rgba(13, 67, 103, .18);
}

.student-class-hero .back-button {
  min-height: 32px;
  margin-bottom: 15px;
  padding: 0 10px;
  color: #d6ebf8;
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
}

.student-class-hero .student-eyebrow {
  display: block;
  color: var(--student-yellow);
}

.student-class-hero h1 {
  margin: 5px 0 3px;
  color: #fff;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -.03em;
}

.student-class-hero p {
  margin: 0;
  color: #d5e8f5;
}

.student-class-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.student-class-hero-actions button {
  min-height: 44px;
  color: #15314b;
  border-color: #fff;
  background: #fff;
}

.student-class-hero-actions .primary {
  border-color: var(--student-yellow);
  background: var(--student-yellow);
}

.student-writing-hero {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 237, 69, .24), transparent 11rem),
    linear-gradient(120deg, #403a8d, #6757c8 62%, #2e8bb5);
}

.student-writing-files {
  overflow: hidden;
  border-color: #d7e6ef;
  border-top: 4px solid var(--student-purple);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(21, 68, 98, .06);
}

.student-writing-card-list {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.student-writing-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(150px, auto);
  gap: 14px;
  align-items: start;
  padding: 15px;
  border: 1px solid #e1e5f5;
  border-radius: 14px;
  background: linear-gradient(105deg, #fbfaff, #fff 45%);
}

.student-writing-card-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.student-writing-card-copy > strong,
.student-writing-card-copy > .owed-title {
  justify-content: flex-start;
  min-height: 0;
  padding: 0;
  color: var(--student-ink);
  text-align: left;
}

.student-writing-card-copy .writing-task-history {
  margin-top: 9px;
}

/* The teacher's brief for a rewrite of work that was marked on paper. */
.student-writing-brief {
  margin-top: 6px;
  padding: 9px 11px;
  border-left: 3px solid var(--amber);
  border-radius: 0 9px 9px 0;
  background: #fff8ec;
  color: #6b4b12;
  font-size: 13px;
  line-height: 1.5;
}

.student-writing-brief b { color: #563a08; }

.student-writing-card-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.student-writing-card-actions button {
  min-height: 42px;
}

.student-lessons-panel {
  border-top: 4px solid #2991c2 !important;
  background: linear-gradient(100deg, #f1f9ff, #fff);
}

.student-lessons-panel .class-lessons-row {
  padding: 18px 20px;
}

.student-lessons-panel .class-lessons-row p {
  margin: 2px 0 0;
}

.student-all-homework {
  margin-top: 18px;
  background: #fff;
}

.student-all-homework > summary {
  padding: 17px 20px;
  color: var(--student-ink);
  font-weight: 800;
  background: #f6fafc;
}

.student-progress-panel .donut {
  border-color: #e1ddff;
  background: conic-gradient(var(--student-purple) calc(var(--value) * 1%), #eceafb 0);
}

.student-progress-panel .score-track > span {
  background: linear-gradient(90deg, var(--student-purple), #2f91c2);
}

.student-app-shell button:focus-visible,
.student-app-shell input:focus-visible,
.student-app-shell summary:focus-visible {
  outline: 3px solid rgba(18, 104, 165, .3);
  outline-offset: 2px;
}

@media (max-width: 980px) {
  .student-connect-card {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .student-connect-form {
    grid-column: 1 / -1;
  }

  .student-class-hero {
    align-items: start;
    flex-direction: column;
  }

  .student-class-hero-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .student-sidebar {
    border-bottom: 0;
    box-shadow: 0 7px 20px rgba(11, 48, 75, .16);
  }

  .student-sidebar .student-nav-label,
  .student-sidebar .sidebar-spacer {
    display: none;
  }

  .student-sidebar > [data-action="logout"] {
    background: transparent;
    box-shadow: none;
  }

  .student-welcome-card {
    grid-template-columns: minmax(0, 1fr) 104px;
    min-height: 210px;
    padding: 26px 22px;
    border-radius: 18px;
  }

  .student-welcome-card h1 {
    font-size: clamp(27px, 8vw, 38px);
  }

  .student-welcome-orbit {
    width: 102px;
    height: 102px;
  }

  .student-welcome-orbit strong {
    font-size: 27px;
  }

  .student-welcome-orbit > span {
    width: 28px;
    height: 28px;
  }

  .student-stat-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .student-stat-card {
    min-height: 78px;
    padding: 13px 15px;
  }

  .student-app-shell .review-ready-item {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  .student-app-shell .review-ready-item > .review-ready-score {
    grid-column: 3;
  }

  .student-app-shell .review-ready-item > button {
    grid-column: 2 / -1;
    justify-self: stretch;
  }

  .student-task-icon {
    width: 38px;
    height: 38px;
  }

  .student-connect-card {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 17px;
  }

  .student-connect-illustration {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .student-connect-form > div {
    align-items: stretch;
    flex-direction: column;
  }

  .student-class-hero {
    padding: 21px;
    border-radius: 17px;
  }

  .student-class-hero-actions {
    width: 100%;
  }

  .student-class-hero-actions button {
    flex: 1 1 190px;
  }

  .student-writing-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .student-writing-card-actions {
    grid-column: 2;
    justify-items: stretch;
  }
}

@media (max-width: 480px) {
  .student-welcome-card {
    display: block;
  }

  .student-welcome-orbit {
    display: none;
  }

  .student-welcome-actions,
  .student-welcome-actions button {
    width: 100%;
  }

  .student-app-shell .class-chip-grid {
    padding: 12px;
  }

  .student-app-shell .class-chip-button {
    min-height: 176px;
    padding: 16px;
  }

  .student-join-inline {
    margin: 4px 12px 12px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN REFRESH · 2026-07-25
   Modernises the shared primitives (elevation scale, buttons, form controls,
   notices) and rebuilds the modal/dialog system so pop-ups read as polished
   cards instead of raw browser chrome (the old <fieldset> groove, the
   overflowing form grid). Appended last on purpose: at equal specificity
   these rules win by source order, so the refresh layers cleanly on top of
   the existing look without touching bespoke page layouts.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Rounder corners + a proper radius & elevation scale. */
  --radius: 10px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --focus-ring: 0 0 0 3px rgba(8, 118, 189, 0.24);
  --shadow-sm: 0 1px 2px rgba(15, 40, 48, 0.06), 0 1px 3px rgba(15, 40, 48, 0.05);
  --shadow-md: 0 8px 20px -6px rgba(15, 40, 48, 0.14), 0 3px 8px -4px rgba(15, 40, 48, 0.08);
  --shadow-lg: 0 20px 44px -12px rgba(15, 40, 48, 0.2), 0 8px 18px -10px rgba(15, 40, 48, 0.1);
  --shadow-modal: 0 40px 80px -20px rgba(10, 30, 42, 0.42), 0 14px 30px -18px rgba(10, 30, 42, 0.34);
}

/* ── Sticky topbar gains a whisper of depth ──────────────────────────────── */
.topbar {
  box-shadow: 0 1px 0 rgba(15, 40, 48, 0.04), 0 6px 16px -12px rgba(15, 40, 48, 0.28);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
button {
  border-radius: var(--radius);
  transition: background 0.16s ease, border-color 0.16s ease,
    box-shadow 0.16s ease, transform 0.08s ease, color 0.16s ease;
}
button:hover {
  box-shadow: var(--shadow-sm);
}
button:active {
  transform: translateY(0.5px) scale(0.985);
}
.primary {
  background: linear-gradient(180deg, #0e86ce 0%, var(--teal) 100%);
  border-color: var(--teal-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 18px -8px rgba(8, 118, 189, 0.6);
}
.primary:hover {
  background: linear-gradient(180deg, #0b78ba 0%, var(--teal-dark) 100%);
  border-color: var(--teal-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 10px 22px -8px rgba(8, 118, 189, 0.72);
}
.primary:active {
  box-shadow: inset 0 2px 5px rgba(4, 86, 141, 0.4);
}
.ghost:hover {
  background: rgba(15, 40, 48, 0.055);
  box-shadow: none;
}

/* ── Text inputs, selects, textareas ─────────────────────────────────────── */
input,
select,
textarea {
  border-radius: var(--radius);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
input:hover:not(:focus),
select:hover:not(:focus),
textarea:hover:not(:focus) {
  border-color: #9fb2b8;
}
input:focus,
select:focus,
textarea:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--teal);
  box-shadow: var(--focus-ring);
}
input::placeholder,
textarea::placeholder {
  color: var(--faint);
}

/* Modern chevron on form-level selects. Bespoke toolbar/filter selects keep
   the native control, so their tight custom padding is never disturbed. */
.field select,
.modal select,
.form-grid select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2362727f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
}

/* ── Fieldsets: remove the raw browser groove border everywhere ──────────── */
fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
legend {
  padding: 0;
}
/* A <legend> inside a .field should read exactly like a field label. */
fieldset.field {
  gap: 10px;
}
fieldset.field > legend {
  margin: 0;
  color: #3d4f5c;
  font-size: 13.5px;
  font-weight: 700;
}

/* ── Choice cards: keep multi-line labels inside the card ────────────────── */
/* The control now sits on the first text line, and align-self:start stops the
   card being squeezed to a grid track that was measured for a single line
   (which used to let long labels spill over the card border). */
.answer-choice {
  align-items: flex-start;
  align-self: start;
}
.answer-choice > input[type="radio"],
.answer-choice > input[type="checkbox"] {
  margin-top: 1px;
}

/* ── Notices: cleaner info card with an accent rail ──────────────────────── */
.notice {
  position: relative;
  border-radius: var(--radius-md);
  padding: 12px 14px 12px 18px;
  background: linear-gradient(180deg, #f5f9ff, #eef4ff);
  border-color: #cfe0f6;
}
.notice::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--teal);
}
.notice.warn {
  background: linear-gradient(180deg, #fff8ea, #fff3d8);
  border-color: #f1d199;
}
.notice.warn::before {
  background: var(--amber);
}

/* ══ MODAL / DIALOG SYSTEM ════════════════════════════════════════════════ */
.overlay {
  background: rgba(9, 24, 33, 0.5);
  -webkit-backdrop-filter: blur(4px) saturate(1.05);
  backdrop-filter: blur(4px) saturate(1.05);
  padding: 24px;
  animation: refresh-overlay-in 0.18s ease-out;
}
@keyframes refresh-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(15, 40, 48, 0.06);
  box-shadow: var(--shadow-modal);
  animation: refresh-modal-in 0.24s cubic-bezier(0.16, 0.84, 0.44, 1);
}
@keyframes refresh-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* The header reads as a distinct, gently branded cap on the card. */
.modal > .panel-head {
  padding: 17px 20px;
  background: linear-gradient(180deg, #fbfdfe, #f3f8fa);
  border-bottom: 1px solid var(--line);
}
.modal > .panel-head h2,
.modal > .panel-head h3 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.modal > .panel-head .icon-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius-pill);
}
.modal > .panel-head .icon-button:hover {
  background: rgba(15, 40, 48, 0.08);
  color: var(--text);
  box-shadow: none;
}

/* Roomier body + a clear divider above the footer actions. */
.modal form,
.modal .modal-body {
  padding: 20px;
  gap: 16px;
}
.modal .modal-actions {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* Never let a form grid push a horizontal scrollbar inside a modal. */
.modal .form-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

@media (max-width: 760px) {
  .modal form,
  .modal .modal-body {
    padding: 16px;
  }
  .modal .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Workflow audit: keep large operational lists compact and easy to scan. */
.todo-student {
  overflow: clip;
}
.todo-student summary {
  list-style: none;
  cursor: pointer;
}
.todo-student summary::-webkit-details-marker {
  display: none;
}
.todo-student-name {
  font-size: 15px;
}
.todo-expand-label {
  margin-left: auto;
  color: var(--accent, #087d78);
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}
.todo-expand-label::after {
  content: "⌄";
  display: inline-block;
  margin-left: 5px;
  transition: transform .18s ease;
}
.todo-student[open] .todo-expand-label::after {
  transform: rotate(180deg);
}
.todo-student-body {
  padding-top: 10px;
}
.todo-student-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.todo-student-actions .todo-copy {
  margin-left: 0;
}

.admin-user-tools {
  display: grid;
  grid-template-columns: auto minmax(220px, 440px) auto;
  align-items: center;
  gap: 10px;
  padding: 0 18px 14px;
}
.admin-user-tools label {
  font-weight: 800;
}
.admin-user-tools input {
  min-width: 0;
}

@media (max-width: 760px) {
  .app-shell > .sidebar {
    scroll-snap-type: x proximity;
    scroll-padding-inline: 8px;
    /* Softens the last tab against the screen edge so the strip reads as
       scrollable without a label sitting on top of the first tab. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
  .app-shell > .sidebar .nav-button {
    scroll-snap-align: start;
  }
  .todo-expand-label {
    width: 100%;
    margin-left: 0;
  }
  .admin-user-tools {
    grid-template-columns: 1fr auto;
    padding: 0 12px 12px;
  }
  .admin-user-tools label {
    grid-column: 1 / -1;
  }
}

/* ===== Student attempt: question column scales with the readability controls =====
   The reading passage has always used --reading-size, but every element inside a
   question card carried a hard-coded pixel size, so the Options panel (Text size /
   A− A+) moved the passage and left the questions stuck at ~13–16px. Everything
   below is re-expressed in em relative to `.attempt-questions .question-card`
   (which is --reading-size), so the ratios stay exactly as designed at the 16px
   default and the whole question column now grows and shrinks with the passage.
   Scoped to .attempt-questions so the builder and its preview are untouched. */

.attempt-questions .instruction-note {
  font-size: 0.94em;
}

/* --- Matching --- */

.attempt-questions .match-item {
  font-size: 0.97em;
}

.attempt-questions .slot-count-hint {
  font-size: 0.77em;
}

.attempt-questions .match-question-number {
  font-size: 0.875em;
  min-width: 3.43em;
  padding: 0 0.71em;
}

.attempt-questions .slot-hint {
  font-size: 0.845em;
}

.attempt-questions .match-slot {
  min-height: 2.75em;
}

.attempt-questions .bank-chip {
  font-size: 0.9em;
  min-height: 2.9em;
}

.attempt-questions .chip-placed {
  min-height: 2.2em;
}

.attempt-questions .chip-letter {
  font-size: 0.86em;
  min-width: 1.76em;
  height: 1.76em;
}

.attempt-questions .chip-clear {
  font-size: 1.1em;
}

.attempt-questions .match-bank-heading strong {
  font-size: 0.875em;
}

.attempt-questions .match-bank-heading span {
  font-size: 0.78em;
}

/* --- Multiple choice / true-false --- */

.attempt-questions .answer-choice {
  min-height: 2.5em;
}

.attempt-questions .answer-choice input {
  width: 1.2em;
  height: 1.2em;
}

/* --- Gap fill, word formation, paragraph multiple choice --- */

.attempt-questions .gap-inline {
  font-size: 0.97em;
  min-width: 4.5em;
  max-width: 15.5em;
  min-height: 2.2em;
}

.attempt-questions .gap-inline::placeholder {
  font-size: 0.84em;
}

.attempt-questions .gap-number {
  font-size: 0.75em;
  min-width: 1.83em;
  height: 1.83em;
}

.attempt-questions .paragraph-choice-select {
  min-height: 2.13em;
}

/* --- Open responses / opinion questions --- */

.open-response-task {
  display: grid;
  gap: 0.55em;
}

.open-response-input {
  width: 100%;
  min-height: 8.5em;
  padding: 0.9em 1em;
  resize: vertical;
  font: inherit;
  line-height: 1.55;
}

.open-response-note {
  color: var(--muted);
  font-size: 0.78em;
  font-weight: 650;
}

/* --- Error correction --- */

.attempt-questions .token-text,
.attempt-questions .token {
  font-size: 1em;
}

.attempt-questions .ec-nomistakes {
  font-size: 0.845em;
}

/* --- Sentence rewrite / key word transformation --- */

.attempt-questions .rewrite-original,
.attempt-questions .rewrite-target {
  grid-template-columns: 7em minmax(0, 1fr);
}

.attempt-questions .rewrite-original > span,
.attempt-questions .rewrite-target-label,
.attempt-questions .rewrite-keyword small,
.attempt-questions .rewrite-limit,
.attempt-questions .rewrite-answer-meta {
  font-size: 0.75em;
}

.attempt-questions .rewrite-original p {
  font-size: 1em;
}

.attempt-questions .rewrite-keyword strong {
  font-size: 0.875em;
}

.attempt-questions .rewrite-sentence {
  font-size: 1.125em;
}

.attempt-questions .rewrite-inline-input {
  font-size: 0.889em;
  width: clamp(11.8em, 24vw, 22.5em);
  min-height: 3.38em;
}

.attempt-questions .rewrite-full-input {
  font-size: 1em;
  min-height: 3em;
}

/* --- Marking feedback shown after submitting --- */

.attempt-questions .gap-correction {
  font-size: 0.845em;
}

.attempt-questions .feedback-note {
  font-size: 0.845em;
}

.attempt-questions .correction-status {
  font-size: 0.81em;
}

.attempt-questions .attempt-answer-summary span {
  font-size: 0.69em;
}

.attempt-questions .attempt-answer-summary strong {
  font-size: 0.81em;
}

/* Matching in a narrow question pane.
   `.matching-task-layout` is a fixed two-column grid (rows | answer choices),
   but each row needs ~326px of its own, so once the question pane is narrower
   than roughly 700px — a 1280px screen with the reading-passage split, or a
   divider dragged to the left — the rows overflowed their column and slid
   underneath the answer-choice panel. Measure the question column itself
   (its width depends on the draggable split, not on the viewport) and stack
   the two halves when there isn't room for them side by side. */

.attempt-questions {
  container-type: inline-size;
  container-name: attempt-questions;
  scroll-padding-top: 12px;
}

@container attempt-questions (max-width: 720px) {
  .matching-task-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  /* Same proportions the ≤760px phone rule already uses, so a stacked matching
     task looks the same whether it stacked because of the phone breakpoint or
     because the question pane itself is narrow. */
  .match-row {
    grid-template-columns: minmax(90px, 0.65fr) minmax(0, 1.35fr);
    gap: 10px;
  }

  .match-bank {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  }
}

/* Below ~470px of question pane there is no room for a label column at all:
   a statement chip would be squeezed into four or five words per line. Put the
   person's name on its own line above the drop slot instead. */
@container attempt-questions (max-width: 470px) {
  .match-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .match-item {
    padding-left: 2px;
    font-weight: 700;
  }
}

/* `.gap-correction` sits inside `.feedback-note` for rewrites and word formation.
   Both are em-based now, so without this they would multiply and the answer chip
   would end up smaller than it was before. Match the note it sits in. */
.attempt-questions .feedback-note .gap-correction {
  font-size: 1em;
}

/* ===== Assign many at once: folder-aware picker =====
   The old picker was one flat scrolling list of every quiz in the library, four
   rows tall. This gives it the library's own folder rail, a kind filter, and a
   tray so the teacher can always see what they have ticked. */

.modal.modal-wide:has(.mass-assign-form) {
  width: min(1120px, 100%);
}

.mass-picker-field > label {
  margin-bottom: 2px;
}

.mass-picker {
  display: grid;
  grid-template-columns: minmax(230px, 288px) minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  min-height: 340px;
}

.mass-picker-rail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.mass-picker-rail-head {
  display: grid;
  gap: 7px;
  padding: 10px 10px 9px;
  border-bottom: 1px solid var(--line);
}

.mass-picker-rail-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.mass-picker-rail-title button {
  min-height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.mass-picker-rail-head input[type="search"] {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  font-size: 12.5px;
}

.mass-picker-rail-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 392px;
  overflow-y: auto;
  padding: 8px 8px 10px;
  display: block;
}

/* Each level is nested rather than padded by depth, so the guide line down the
   left of a branch shows at a glance what belongs to what. */
.mass-folder-children {
  margin-left: 15px;
  padding-left: 5px;
  border-left: 1px solid var(--line-strong);
}

.mass-folder-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  margin-bottom: 2px;
}

.mass-folder-toggle,
.mass-folder-toggle-spacer {
  display: inline-grid;
  place-items: center;
  width: 22px;
  min-width: 22px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
}

.mass-folder-toggle:hover,
.mass-folder-toggle:focus-visible {
  background: #fff;
  color: var(--teal-dark);
  box-shadow: none;
}

.mass-folder-toggle .icon {
  width: 13px;
  height: 13px;
  transition: transform 140ms ease;
}

.mass-folder-row.is-open > .mass-folder-toggle .icon {
  transform: rotate(90deg);
}

.mass-folder {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.mass-folder:hover {
  background: #fff;
  border-color: var(--line);
}

.mass-folder.active {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal-dark);
}

.mass-folder-root {
  font-weight: 800;
}

/* Nothing to assign in here under the filters in force — still clickable, but
   it should not compete with the folders that do have work in them. */
.mass-folder.is-empty {
  color: var(--muted);
  font-weight: 600;
}

.mass-folder.is-empty .mass-folder-icon {
  opacity: 0.5;
}

.mass-folder-icon {
  display: inline-flex;
  color: var(--faint);
}

.mass-folder.active .mass-folder-icon {
  color: var(--teal);
}

/* Long folder names wrap onto a second line instead of being cut mid-word:
   "Australian Framew…" and "Reading and U…" told the teacher nothing. */
.mass-folder-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.mass-folder b {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.mass-folder.active b {
  color: var(--teal-dark);
}

.mass-folder-none {
  margin: 8px 6px;
  font-size: 12.5px;
  color: var(--muted);
}

/* Where the list below is coming from, with every step back up it clickable. */
.mass-crumb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.mass-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  min-width: 0;
}

.mass-crumbs i {
  font-style: normal;
  color: var(--faint);
  font-size: 13px;
}

.mass-crumb {
  max-width: 220px;
  min-height: 24px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.mass-crumb:hover {
  background: #fff;
  color: var(--teal-dark);
}

.mass-crumb.is-current {
  color: var(--teal-dark);
  font-weight: 800;
  cursor: default;
}

.mass-crumb-bar .row-actions button {
  min-height: 26px;
  padding: 0 9px;
  font-size: 12px;
}

.mass-picker-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mass-picker-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.mass-picker-toolbar input[type="search"] {
  flex: 1 1 200px;
  min-width: 0;
  min-height: 34px;
}

.mass-kind-row {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.mass-kind {
  min-height: 26px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.mass-kind b {
  font-weight: 700;
  opacity: 0.7;
  margin-left: 3px;
}

.mass-kind:hover {
  color: var(--teal-dark);
  background: #fff;
}

.mass-kind.active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.mass-picker-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.mass-picker-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}

.mass-picker-list {
  flex: 1 1 auto;
  min-height: 220px;
  max-height: 380px;
  overflow-y: auto;
}

.mass-tray {
  margin-top: 10px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  padding: 9px 12px;
}

.mass-tray-empty {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

.mass-tray-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.mass-tray-head strong {
  font-size: 12.5px;
  color: var(--teal-dark);
}

.mass-tray-head button {
  min-height: 26px;
  padding: 0 9px;
  font-size: 12px;
}

.mass-tray-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 96px;
  overflow-y: auto;
}

.mass-tray-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 260px;
  min-height: 26px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--teal);
  border-radius: 999px;
  background: #fff;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mass-tray-chip i {
  font-style: normal;
  font-size: 13px;
  color: var(--muted);
}

.mass-tray-chip:hover {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-soft);
}

.mass-tray-chip:hover i {
  color: var(--red);
}

.mass-assign-row.is-ticked {
  background: var(--teal-soft);
}

/* The picker is two columns of scrolling content, so on a phone it becomes one
   column with a short folder strip above the list. */
@media (max-width: 760px) {
  .mass-picker {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .mass-picker-rail {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  /* Folded branches make this workable on a phone: what used to be a 160px
     window onto a hundred-row flat list is now a handful of top folders. */
  .mass-picker-rail-list {
    max-height: 214px;
  }

  .mass-picker-list {
    max-height: 300px;
  }

  .mass-crumb-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .mass-crumb {
    max-width: 160px;
  }
}

/* ===== Library: the Classes column is now a working menu ===== */

.library-classes-cell {
  min-width: 0;
  display: flex;
  align-items: center;
}

.library-classes-menu {
  position: relative;
  min-width: 0;
  max-width: 100%;
}

.library-classes-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
  padding: 2px 4px 2px 2px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.79rem;
  color: #66788c;
  cursor: pointer;
  list-style: none;
}

.library-classes-menu > summary::-webkit-details-marker {
  display: none;
}

.library-classes-menu > summary:hover,
.library-classes-menu[open] > summary {
  border-color: var(--line-strong);
  background: #fff;
}

.library-classes-menu > summary .chip-caret {
  font-style: normal;
  font-size: 10px;
  color: var(--faint);
}

.library-classes-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 5px);
  z-index: 46;
  width: min(320px, 78vw);
  padding: 12px;
  border: 1px solid #dfe4ea;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 34px rgb(31 55 82 / 16%);
  display: grid;
  gap: 10px;
  text-align: left;
}

.library-classes-head {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.library-classes-head strong {
  font-size: 0.86rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-classes-head small {
  color: var(--muted);
  font-size: 0.74rem;
}

.library-classes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  max-height: 210px;
  overflow-y: auto;
}

.library-classes-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.library-classes-name {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.library-classes-name strong {
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-classes-name small {
  color: var(--muted);
  font-size: 0.71rem;
}

.library-classes-remove {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--faint);
}

.library-classes-remove:hover {
  border-color: var(--red);
  background: var(--red-soft);
  color: var(--red);
}

.library-classes-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.library-classes-actions button {
  flex: 1 1 auto;
  min-height: 32px;
  font-size: 0.79rem;
}

/* Grid layout: the card keeps the same menu where its status chip used to be. */
.library-card-classes-slot {
  min-width: 0;
  display: flex;
  align-items: center;
}

.library-card-classes-slot .library-classes-menu > summary {
  border-color: var(--line);
  background: #fff;
}

.library-card-classes-slot.assigned .library-classes-menu > summary {
  border-color: #bfe6d5;
}

/* ===== Bulk edit and removal of homework ===== */

.bulk-hint {
  margin: -2px 0 10px;
  font-size: 12.5px;
}

.class-assignment-panel > .bulk-hint {
  margin-right: 18px;
  margin-left: 18px;
}

.assignment-select-col {
  width: 34px;
  padding-right: 0 !important;
  text-align: center;
}

.assignment-select-col input[type="checkbox"] {
  width: 17px;
  height: 17px;
  min-height: 0;
  accent-color: var(--teal);
  cursor: pointer;
}

.assignment-compact-table tr.row-selected > td {
  background: var(--teal-soft);
}

/* One floating bar for the whole page: the assignments view splits homework
   into a table per class and per skill, and a batch can span several of them. */
.assignment-bulk-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(940px, calc(100vw - 24px));
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 16px 40px rgb(15 40 48 / 22%);
}

.assignment-bulk-bar[hidden] {
  display: none;
}

.assignment-bulk-count {
  flex: none;
  padding-left: 6px;
  font-size: 13px;
  font-weight: 750;
  color: var(--teal-dark);
  white-space: nowrap;
}

.assignment-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.assignment-bulk-actions button {
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
}

.assignment-bulk-bar > .ghost {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
}

@media (max-width: 760px) {
  .assignment-bulk-bar {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    transform: none;
    max-width: none;
    flex-wrap: wrap;
    border-radius: 16px;
    justify-content: space-between;
  }

  .assignment-bulk-actions {
    order: 3;
    flex-basis: 100%;
  }

  .assignment-bulk-actions button {
    flex: 1 1 auto;
  }
}

.mass-search-note {
  margin: 0;
  padding: 9px 14px 3px;
  color: var(--muted);
  font-size: 12px;
}

/* The search filters by setting `hidden` on rows, but `.mass-assign-row` sets
   `display: flex`, which beats the browser's own `[hidden] { display: none }`.
   Without these the search box marked rows hidden and every one stayed on
   screen. */
.mass-assign-row[hidden],
.mass-assign-group[hidden] {
  display: none;
}

/* ---- Gapped text (FCE/CAE Part 6, sentence insertion) ------------------------
   The gap sits inside the running paragraph where the sentence was removed. It
   used to render as three bare underscores, so teachers were bolding and
   highlighting every gap by hand; this makes the site do it. The slot shows the
   letter of the option the student has dropped into that gap, so the passage can
   be re-read with the answers in place, the way the Cambridge player does it. */
.passage-gap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: baseline;
  margin: 0 3px;
  padding: 1px 7px 1px 3px;
  border-radius: 8px;
  background: #fff6d6;
  box-shadow: inset 0 0 0 1px #e8c95d;
  white-space: nowrap;
}

.passage-gap-number {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 20px;
  padding: 0 5px;
  border-radius: 6px;
  background: var(--teal);
  color: #fff;
  font-size: 0.74em;
  font-weight: 800;
  line-height: 1;
}

.passage-gap-slot {
  min-width: 44px;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #7a5b00;
}

.passage-gap.is-filled {
  background: #e4f1ff;
  box-shadow: inset 0 0 0 1px #7ab0e8;
}

.passage-gap.is-filled .passage-gap-slot {
  color: #124a80;
}

.passage-match-target {
  min-height: 36px;
  padding: 3px 6px 3px 3px;
  vertical-align: middle;
  cursor: pointer;
  transition: background 0.14s ease, box-shadow 0.14s ease, transform 0.1s ease;
}

.passage-match-target .passage-gap-slot {
  min-width: 72px;
  padding: 0 4px;
  font-size: 0.78em;
  letter-spacing: 0;
}

.passage-match-target.slot-ready:hover,
.passage-match-target.slot-ready:focus-within,
.passage-match-target.slot-hover {
  background: var(--teal-soft);
  box-shadow: inset 0 0 0 2px var(--teal), 0 0 0 3px rgba(8, 118, 189, 0.16);
  outline: none;
}

.passage-gap-answer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.passage-gap-answer .chip-clear {
  color: #24536f;
  font-size: 15px;
  line-height: 1;
}

.passage-gap-review-answer {
  min-width: min(240px, 32vw);
}

.passage-gap-review-answer .class-review-inline-answer {
  width: 100%;
  min-width: 0;
}

.passage-match-target .answer-mark {
  flex: 0 0 auto;
  font-size: 0.78em;
}

.passage-gap-correction {
  padding: 0 3px;
  color: var(--green);
  font-size: 0.68em;
  font-weight: 800;
}

.passage-match-target.match-correct {
  background: var(--green-soft);
  box-shadow: inset 0 0 0 1px #6fbd85;
}

.passage-match-target.match-incorrect {
  background: var(--red-soft);
  box-shadow: inset 0 0 0 1px #e59ca3;
}

.attempt-shell.theme-sepia .passage-gap {
  background: #f5e6bf;
  box-shadow: inset 0 0 0 1px #c9a848;
}

.attempt-shell.theme-dark .passage-gap,
.attempt-shell.theme-contrast .passage-gap {
  background: #33424d;
  box-shadow: inset 0 0 0 1px #6f8593;
}

.attempt-shell.theme-dark .passage-gap-slot,
.attempt-shell.theme-contrast .passage-gap-slot {
  color: #ffd873;
}

.attempt-shell.theme-dark .passage-gap.is-filled,
.attempt-shell.theme-contrast .passage-gap.is-filled {
  background: #1f4368;
  box-shadow: inset 0 0 0 1px #7ab0e8;
}

.attempt-shell.theme-dark .passage-gap.is-filled .passage-gap-slot,
.attempt-shell.theme-contrast .passage-gap.is-filled .passage-gap-slot {
  color: #cfe6ff;
}

/* In the builder the passage is contenteditable, so the slot must stay easy to
   click into and never look like a control the teacher cannot type in. */
.builder-passage-editor .passage-gap {
  cursor: text;
}

/* ---- Matching answer key at a glance ---------------------------------------
   The printed answer sheet lists letters, so the builder prints the key the same
   way and takes it back in the same shape. Spotting two swapped rows in a line of
   letters is instant; spotting it in six stacked sentence chips is not. */
.matching-key-strip {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f7fbfc;
}

.matching-key-readout {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.matching-key-readout > strong {
  font-size: 13px;
  letter-spacing: 0.02em;
}

.matching-key-cells {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.matching-key-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #cfe0e4;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.matching-key-cell em {
  font-style: normal;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0;
  color: var(--muted);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.matching-key-cell.is-missing {
  background: #fff4f4;
  box-shadow: inset 0 0 0 1px #e8b4b4;
  color: #a32020;
}

.matching-key-apply {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.matching-key-apply input {
  flex: 1 1 220px;
  min-width: 0;
}

.matching-key-strip p {
  margin: 0;
  font-size: 12px;
}

/* ---- Repeat attempts stay one homework ------------------------------------
   A student who re-does a quiz produces several attempts. Listing them as equal
   rows made the same homework look duplicated, so the latest attempt owns the row
   and the earlier tries fold in underneath it. */
.attempt-history-toggle {
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 12px;
  white-space: nowrap;
}

.attempt-earlier-row > td {
  background: #f7fafb;
  color: var(--muted);
}

.attempt-earlier-row > td:first-child {
  padding-left: 26px;
}

.attempt-earlier-label {
  font-size: 12px;
  font-style: italic;
}

/* ===================================================================
   Quiz library file manager — final interaction and layout layer
   =================================================================== */
.library-workspace {
  --library-blue: #1967d2;
  --library-blue-soft: #e8f0fe;
}

.library-workspace .library-topbar {
  padding: 2px 0;
}

.library-topbar-actions {
  flex-wrap: nowrap;
}

.library-new-menu {
  position: relative;
  order: -1;
}

.library-new-menu > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #0b6fbd;
  border-radius: 11px;
  background: #087dc1;
  color: #fff;
  font-size: .84rem;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
  box-shadow: 0 2px 5px rgb(8 85 143 / 18%);
}

.library-new-menu > summary::-webkit-details-marker {
  display: none;
}

.library-new-menu > summary:hover,
.library-new-menu[open] > summary {
  border-color: #075e9f;
  background: #066faf;
  box-shadow: 0 3px 9px rgb(8 85 143 / 24%);
}

.library-new-menu > summary:focus-visible {
  outline: 3px solid rgb(25 103 210 / 22%);
  outline-offset: 2px;
}

.library-new-menu[open] .chip-caret {
  transform: rotate(180deg);
}

.library-new-menu-panel {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 50;
  display: grid;
  gap: 2px;
  width: min(270px, calc(100vw - 28px));
  padding: 7px;
  border: 1px solid #dce4ed;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 42px rgb(31 55 82 / 18%);
}

.library-new-menu-panel button {
  justify-content: flex-start;
  width: 100%;
  min-height: 39px;
  padding: 7px 10px;
  border: 0;
  background: transparent;
  color: #27384b;
  text-align: left;
}

.library-new-menu-panel button:hover {
  background: #f1f6fc;
  color: #174ea6;
}

.library-menu-heading {
  padding: 6px 10px 4px;
  color: #738397;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.library-menu-divider {
  height: 1px;
  margin: 4px 2px;
  background: #e7ecf2;
}

.library-icon-action {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
}

.library-rail-top {
  justify-content: space-between;
  min-height: 42px;
  padding: 0 2px 4px 5px;
  border-bottom: 1px solid #e6ebf1;
}

.library-rail-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #263447;
  font-size: .8rem;
}

.library-rail-title .icon {
  width: 16px;
  height: 16px;
  color: #65778c;
}

.library-rail-title small {
  min-width: 24px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #e9eef5;
  color: #5e6d80;
  font-size: .67rem;
  font-weight: 800;
  text-align: center;
}

.library-rail-top .library-tree-control,
.library-rail-top .library-rail-toggle {
  flex: none;
  min-height: 34px;
  height: 34px;
}

.library-rail-toggle-label {
  display: none;
}

.library-workspace.rail-collapsed .library-rail-title,
.library-workspace.rail-collapsed .library-tree-control {
  display: none;
}

.library-workspace.rail-collapsed .library-rail-top {
  padding: 0;
  border: 0;
}

.library-command-bar {
  background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
}

.library-crumb-row {
  flex-wrap: nowrap;
}

.library-crumb-row .library-breadcrumbs {
  overflow: hidden;
}

.library-crumb-row .library-breadcrumbs button {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-search {
  grid-template-columns: 22px minmax(0, 1fr) auto;
  min-height: 42px;
  border-radius: 12px;
  background: #f5f8fc;
}

.library-search:focus-within {
  background: #fff;
}

.library-search input {
  min-width: 0;
  padding-right: 4px;
}

.library-search .library-search-clear {
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  margin-right: 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #607083;
  box-shadow: none;
}

.library-search .library-search-clear:hover {
  background: #e8eef6;
  color: #174ea6;
}

.library-command-row {
  justify-content: space-between;
}

.library-chip-row {
  flex: 1 1 460px;
}

.library-command-tools {
  flex: 0 1 auto;
  margin-left: auto;
}

.library-chip-reset {
  gap: 6px;
  border-color: transparent;
  background: transparent;
  color: #54667a;
}

.library-chip-reset:hover {
  border-color: #d7e0e9;
  background: #fff;
}

.library-chip-reset b {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: #e4ebf4;
  color: #40546a;
  font-size: .66rem;
}

.library-where-count {
  background: transparent;
  color: #6a798b;
}

.library-list-column {
  min-width: 0;
}

.library-list-column .library-list-sort {
  max-width: 100%;
  min-width: 0;
}

.library-row {
  min-height: 58px;
}

.library-row-name {
  display: block;
  padding: 0;
  cursor: default;
}

.library-row-open {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  box-shadow: none;
}

.library-row-open:hover {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.library-row-open:focus-visible {
  outline: 2px solid rgb(25 103 210 / 48%);
  outline-offset: 2px;
}

.library-row-title-block {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.library-row-title-block small {
  overflow: hidden;
  color: #7d8b9b;
  font-size: .68rem;
  font-weight: 500;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-row-title-block .library-row-title {
  display: block;
}

.library-row-name:hover .library-row-title {
  color: #174ea6;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.library-row-folder .library-row-name:hover .library-row-title {
  color: inherit;
  text-decoration: none;
}

@media (hover: none) {
  .library-row-actions .icon-button {
    opacity: 1;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .library-browser,
  .library-workspace.rail-collapsed .library-browser {
    grid-template-columns: 264px minmax(0, 1fr);
  }

  .library-workspace.rail-collapsed .library-browser {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .library-drive-nav {
    position: sticky;
    top: 12px;
    display: block;
    max-height: calc(100vh - 32px);
  }

  .library-drive-nav .quiz-library-tree {
    max-height: none;
  }
}

@media (max-width: 900px) {
  .library-workspace .library-topbar {
    align-items: flex-start;
  }

  .library-crumb-row {
    flex-wrap: wrap;
  }

  .library-crumb-row .library-search {
    flex-basis: 100%;
    min-width: 0;
    margin-left: 0;
  }

  .library-command-tools {
    width: 100%;
    margin-left: 0;
  }

  .library-where-count {
    margin-right: auto;
  }

  .library-workspace.rail-collapsed .library-rail-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 0 14px;
  }

  .library-workspace.rail-collapsed .library-rail-toggle-label {
    display: inline;
  }
}

@media (max-width: 760px) {
  .library-workspace .library-topbar-actions {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .library-workspace .library-topbar-actions > button {
    width: auto;
  }

  .library-new-menu {
    flex: 1;
  }

  .library-new-menu > summary {
    width: 100%;
  }

  .library-topbar-actions > button:not(.library-icon-action):not(.library-draft-chip) {
    flex: 1;
  }

  .library-command-row {
    gap: 12px;
  }

  .library-chip-row {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    padding: 2px 0 5px;
    scrollbar-width: thin;
  }

  .library-command-tools {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .library-command-tools > *,
  .library-command-tools .library-sort-bar {
    flex: none;
  }
}

@media (max-width: 560px) {
  .library-topbar-counts {
    white-space: normal;
  }

  .library-workspace .library-topbar-actions {
    flex-wrap: wrap;
  }

  .library-draft-chip {
    flex-basis: 100%;
  }

  .library-command-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    overflow: visible;
  }

  .library-command-tools .library-where-count {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .library-command-tools .library-sort-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    min-width: 0;
  }

  .library-command-tools .library-sort-bar label,
  .library-command-tools .library-sort-bar select {
    width: 100%;
    min-width: 0;
  }

  .library-row-title-block small {
    display: none;
  }
}

/* ==========================================================================
   Administration workspace
   A focused control surface: one dataset at a time, responsive management
   tables, and an account profile with one predictable scroll container.
   ========================================================================== */

.admin-workspace {
  max-width: 1540px;
  padding-bottom: 56px;
}

.admin-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.admin-page-title {
  min-width: 0;
}

.admin-page-title .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
}

.admin-page-title .eyebrow .icon {
  width: 15px;
  height: 15px;
}

.admin-page-title h1 {
  margin: 0;
  font-size: clamp(27px, 3vw, 38px);
  letter-spacing: -0.035em;
}

.admin-page-title p {
  max-width: 660px;
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.admin-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex: none;
}

.admin-page-actions button {
  min-height: 40px;
}

.admin-section-nav {
  display: flex;
  gap: 5px;
  margin-bottom: 18px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 8px 24px rgba(15, 40, 48, 0.045);
  scrollbar-width: thin;
}

.admin-section-nav button {
  position: relative;
  flex: 0 0 auto;
  min-width: 134px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-weight: 800;
}

.admin-section-nav button:hover {
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}

.admin-section-nav button[aria-current="page"] {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 7px 18px rgba(13, 148, 136, 0.2);
}

.admin-section-nav .icon {
  width: 16px;
  height: 16px;
}

.admin-section-nav small {
  min-width: 24px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(15, 40, 48, 0.07);
  color: inherit;
  font-size: 11px;
  text-align: center;
}

.admin-section-nav button[aria-current="page"] small {
  background: rgba(255, 255, 255, 0.2);
}

.admin-section-nav b {
  position: absolute;
  top: 3px;
  right: 5px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #d97706;
  color: #fff;
  font-size: 10px;
}

.admin-section-content {
  min-width: 0;
}

.admin-summary-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.admin-summary-card {
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 116px;
  padding: 16px;
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(15, 40, 48, 0.045);
}

.admin-summary-card > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.admin-summary-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #e7f6f3;
  color: #18786f !important;
}

.admin-summary-icon .icon {
  width: 21px;
  height: 21px;
}

.admin-summary-card--blue .admin-summary-icon { background: #e8f2fd; color: #286da8 !important; }
.admin-summary-card--violet .admin-summary-icon { background: #f0ebff; color: #7053b7 !important; }
.admin-summary-card--amber .admin-summary-icon { background: #fff2db; color: #a66008 !important; }
.admin-summary-card--green .admin-summary-icon { background: #e8f6e9; color: #3e7b46 !important; }

.admin-summary-card strong {
  color: var(--text);
  font-size: clamp(24px, 2.1vw, 31px);
}

.admin-analytics-grid {
  gap: 16px;
  margin-bottom: 0;
}

.admin-activity-panel,
.admin-storage-panel,
.admin-table-panel {
  margin-bottom: 18px;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(15, 40, 48, 0.045);
}

.admin-panel-heading {
  min-height: 76px;
  align-items: flex-start;
}

.admin-panel-heading > div {
  min-width: 0;
}

.admin-panel-heading h2 {
  margin-top: 2px;
  font-size: 19px;
}

.admin-panel-heading p {
  max-width: 760px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.admin-panel-kicker {
  display: block;
  color: var(--teal-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.admin-approval-panel {
  border-color: rgba(217, 119, 6, 0.3);
  background: linear-gradient(180deg, #fffaf0, #fff);
}

.admin-request-list {
  display: grid;
  gap: 10px;
  padding: 14px 18px 18px;
}

.admin-request-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid #ead3a7;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.88);
}

.admin-request-identity {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.admin-request-identity span,
.admin-request-identity small {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
}

.admin-data-panel {
  overflow: hidden;
}

.admin-data-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(140px, 190px)) auto;
  align-items: end;
  gap: 9px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfd;
}

.admin-data-panel[data-admin-data-panel="classes"] .admin-data-toolbar {
  grid-template-columns: minmax(260px, 1fr) minmax(160px, 220px) auto;
}

.admin-data-panel[data-admin-data-panel="assignments"] .admin-data-toolbar {
  grid-template-columns: minmax(260px, 1fr) minmax(140px, 190px) minmax(160px, 220px) auto;
}

.admin-filter-search,
.admin-filter-select {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.admin-filter-search > span,
.admin-filter-select > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.admin-filter-search .icon {
  width: 13px;
  height: 13px;
}

.admin-filter-search input,
.admin-filter-select select {
  width: 100%;
  min-width: 0;
  height: 40px;
  margin: 0;
  background-color: #fff;
}

.admin-clear-filters {
  height: 40px;
  padding-inline: 13px;
}

.admin-clear-filters:disabled {
  opacity: 0.42;
  cursor: default;
}

.admin-table-panel .table-wrap {
  border-radius: 0;
}

.admin-table-panel table {
  table-layout: auto;
}

.admin-table-panel th {
  padding-block: 11px;
  background: #f8fafb;
  font-size: 10.5px;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.admin-table-panel td {
  height: 66px;
  vertical-align: middle;
}

.admin-table-panel td > strong,
.admin-table-panel td > small {
  display: block;
}

.admin-table-panel td > small {
  max-width: 390px;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  text-overflow: ellipsis;
}

.admin-user-row {
  cursor: default;
}

.admin-user-row:hover td,
.admin-management-table tr:hover td {
  background: rgba(13, 148, 136, 0.035);
}

.admin-account-open {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  text-align: left;
}

.admin-account-open:hover {
  color: var(--teal-dark);
  box-shadow: none;
  transform: none;
}

.admin-account-open > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.admin-account-open strong,
.admin-account-open small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-account-open small,
.admin-account-table td[data-label="Activity"] small {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
}

.admin-account-table td[data-label="Account"] {
  min-width: 250px;
  max-width: 390px;
}

.admin-account-table td[data-label="Activity"] strong {
  display: block;
  font-size: 12.5px;
}

.admin-row-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.admin-row-actions button {
  white-space: nowrap;
}

.admin-view-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-view-button .icon {
  width: 15px;
  height: 15px;
}

.admin-table-footer {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.admin-empty-state {
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

.admin-empty-state.compact {
  min-height: 190px;
}

.admin-empty-state > .icon {
  width: 28px;
  height: 28px;
  color: var(--teal);
}

.admin-empty-state h3,
.admin-empty-state p {
  margin: 0;
}

.admin-empty-state h3 {
  color: var(--text);
}

.admin-empty-state p {
  max-width: 420px;
  line-height: 1.5;
}

/* Account profile dialog */
.admin-account-modal {
  width: min(980px, 100%);
  height: min(820px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.admin-account-modal-head {
  min-height: 64px;
}

.admin-account-modal-head > div {
  display: grid;
  gap: 2px;
}

.admin-account-identity {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px 14px;
  padding: 17px 20px 14px;
  background: #fff;
}

.admin-account-identity > .avatar {
  width: 54px;
  height: 54px;
  grid-row: 1 / span 2;
  font-size: 17px;
}

.admin-account-identity .activity-identity {
  min-width: 0;
  flex-wrap: nowrap;
}

.admin-account-identity .activity-identity > div:first-child {
  min-width: 0;
}

.admin-account-identity h3 {
  margin: 0 0 2px;
  overflow: hidden;
  font-size: 18px;
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
}

.admin-account-identity .activity-identity > div:first-child > span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 12.5px;
  text-overflow: ellipsis;
}

.admin-account-identity .activity-meta {
  grid-column: 2;
  gap: 13px;
  font-size: 11.5px;
}

.admin-detail-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px;
  overflow-x: auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #f8fafb;
  scrollbar-width: thin;
}

.admin-detail-tabs button {
  flex: 0 0 auto;
  min-height: 47px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.admin-detail-tabs button:hover {
  background: rgba(13, 148, 136, 0.055);
  color: var(--text);
  box-shadow: none;
}

.admin-detail-tabs button[aria-selected="true"] {
  border-bottom-color: var(--teal);
  color: var(--teal-dark);
}

.admin-detail-tabs button span {
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #e7ecef;
  color: var(--muted);
  font-size: 10.5px;
}

.admin-detail-tabs button[aria-selected="true"] span {
  background: var(--teal-soft);
  color: var(--teal-dark);
}

.admin-account-modal .modal-body.admin-user-activity {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 18px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.admin-detail-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.admin-detail-summary article {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.admin-detail-summary article > span {
  width: 34px;
  height: 34px;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--teal-soft);
  color: var(--teal-dark);
}

.admin-detail-summary article .icon {
  width: 17px;
  height: 17px;
}

.admin-detail-summary strong {
  font-size: 19px;
  line-height: 1;
}

.admin-detail-summary small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-detail-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-detail-overview-card {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}

.admin-detail-overview-card > strong {
  font-size: 15px;
}

.admin-detail-overview-card p {
  min-height: 38px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.admin-detail-overview-card button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  padding: 7px 10px;
}

.admin-detail-overview-card button .icon {
  width: 14px;
  height: 14px;
}

.admin-detail-signin-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 12px;
  background: #eef7fb;
  color: #315f72;
}

.admin-detail-signin-note > .icon {
  width: 17px;
  height: 17px;
  margin-top: 1px;
}

.admin-detail-signin-note div {
  display: grid;
  gap: 2px;
}

.admin-detail-signin-note span {
  font-size: 11.5px;
}

.activity-heading {
  margin: 4px 0 0;
}

.activity-section {
  flex: none;
}

.activity-section > summary {
  justify-content: space-between;
  padding: 11px 14px;
}

.activity-section > summary > span:first-child {
  flex: 1;
}

.activity-section .table-wrap {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}

.activity-section th,
.activity-section td {
  padding: 11px 13px;
}

.activity-line {
  padding: 12px 14px;
}

.admin-detail-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding: 11px 18px;
  border-top: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 -8px 24px rgba(15, 40, 48, 0.045);
}

.admin-detail-loading {
  min-height: 280px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--muted);
  text-align: center;
}

.admin-detail-loading .icon {
  width: 28px;
  height: 28px;
  color: var(--teal);
  animation: refresh-modal-pulse 1.2s ease-in-out infinite;
}

.admin-detail-loading strong {
  color: var(--text);
}

@keyframes refresh-modal-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1); }
}

@media (max-width: 1240px) {
  .admin-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .admin-data-toolbar,
  .admin-data-panel[data-admin-data-panel="assignments"] .admin-data-toolbar {
    grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(140px, 190px)) auto;
  }
  .admin-data-toolbar .admin-filter-search {
    grid-column: 1 / -1;
  }
  .admin-data-panel[data-admin-data-panel="classes"] .admin-data-toolbar {
    grid-template-columns: minmax(240px, 1fr) minmax(160px, 220px) auto;
  }
  .admin-data-panel[data-admin-data-panel="classes"] .admin-filter-search {
    grid-column: auto;
  }
}

@media (max-width: 900px) {
  .admin-page-head {
    align-items: flex-start;
  }
  .admin-section-nav button {
    min-width: 120px;
  }
  .admin-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-account-modal {
    height: calc(100dvh - 32px);
    max-height: calc(100dvh - 32px);
  }
  .admin-detail-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .admin-workspace {
    padding-bottom: 28px;
  }
  .admin-page-head {
    display: grid;
    gap: 13px;
  }
  .admin-page-actions {
    justify-content: flex-start;
  }
  .admin-section-nav {
    margin-inline: -2px;
  }
  .admin-summary-card {
    min-height: 104px;
  }
  .admin-panel-heading {
    align-items: center;
  }
  .admin-panel-heading p {
    display: none;
  }
  .admin-request-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .admin-request-card .row-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
  .admin-data-toolbar,
  .admin-data-panel[data-admin-data-panel="classes"] .admin-data-toolbar,
  .admin-data-panel[data-admin-data-panel="assignments"] .admin-data-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px;
  }
  .admin-data-toolbar .admin-filter-search,
  .admin-data-panel[data-admin-data-panel="classes"] .admin-filter-search {
    grid-column: 1 / -1;
  }
  .admin-data-toolbar .admin-clear-filters {
    align-self: end;
  }
  .admin-account-table,
  .admin-management-table {
    max-width: none;
    overflow: visible;
    padding: 10px;
    background: var(--surface);
  }
  .admin-account-table table,
  .admin-account-table tbody,
  .admin-management-table table,
  .admin-management-table tbody {
    min-width: 0;
    display: grid;
    gap: 9px;
  }
  .admin-account-table thead,
  .admin-management-table thead {
    display: none;
  }
  .admin-account-table tr,
  .admin-management-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
  }
  .admin-account-table td,
  .admin-management-table td {
    display: block;
    width: auto;
    min-width: 0 !important;
    max-width: none !important;
    height: auto;
    padding: 0;
    border: 0;
    white-space: normal;
  }
  .admin-account-table td::before,
  .admin-management-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 850;
    letter-spacing: 0.045em;
    text-transform: uppercase;
  }
  .admin-account-table td:first-child,
  .admin-account-table td:last-child,
  .admin-management-table td:first-child,
  .admin-management-table td:last-child {
    grid-column: 1 / -1;
  }
  .admin-account-table td:first-child::before,
  .admin-account-table td:last-child::before,
  .admin-management-table td:first-child::before,
  .admin-management-table td:last-child::before {
    display: none;
  }
  .admin-account-open {
    width: 100%;
  }
  .admin-row-actions {
    justify-content: flex-end;
    padding-top: 3px;
    border-top: 1px solid var(--line);
  }
  .admin-table-footer {
    padding-inline: 12px;
  }
  .overlay:has(.admin-account-modal) {
    padding: 0;
  }
  .admin-account-modal {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .admin-account-identity {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 13px 14px 11px;
  }
  .admin-account-identity > .avatar {
    width: 44px;
    height: 44px;
    font-size: 14px;
  }
  .admin-account-identity .activity-identity {
    align-items: flex-start;
  }
  .admin-account-identity .activity-badges {
    display: none;
  }
  .admin-account-identity .activity-meta {
    gap: 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .admin-detail-tabs {
    padding-inline: 8px;
  }
  .admin-account-modal .modal-body.admin-user-activity {
    padding: 13px;
  }
  .admin-detail-overview-grid {
    grid-template-columns: 1fr;
  }
  .admin-detail-overview-card p {
    min-height: 0;
  }
  .admin-detail-footer {
    padding: 9px 12px;
  }
}

@media (max-width: 480px) {
  .admin-page-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .admin-page-actions button {
    width: 100%;
  }
  .admin-summary-grid {
    grid-template-columns: 1fr;
  }
  .admin-summary-card {
    min-height: 92px;
  }
  .admin-data-toolbar,
  .admin-data-panel[data-admin-data-panel="classes"] .admin-data-toolbar,
  .admin-data-panel[data-admin-data-panel="assignments"] .admin-data-toolbar {
    grid-template-columns: 1fr;
  }
  .admin-data-toolbar .admin-filter-search,
  .admin-data-panel[data-admin-data-panel="classes"] .admin-filter-search {
    grid-column: auto;
  }
  .admin-request-list {
    padding: 10px;
  }
  .admin-request-card {
    padding: 11px;
  }
  .admin-request-card .row-actions {
    justify-content: stretch;
  }
  .admin-request-card .row-actions button {
    flex: 1;
  }
  .admin-detail-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-detail-summary article {
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 10px;
  }
  .admin-detail-summary article > span {
    width: 30px;
    height: 30px;
  }
  .admin-detail-summary strong {
    font-size: 17px;
  }
  .admin-detail-footer button:first-child {
    flex: 1;
  }
}

/* Class review v5: the student CBT layout with a compact response layer. */
.class-review-shell .attempt-main-col {
  max-width: 1440px;
}

.class-review-toolbar {
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 18px;
  border-bottom-color: #c8dbe6;
  background: #f2f8fb;
  color: #173f55;
  box-shadow: 0 5px 16px rgb(24 72 96 / 8%);
}

.class-review-toolbar-label {
  flex: 1 1 240px;
  min-width: 0;
}

.class-review-toolbar-label > span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.class-review-toolbar-label strong {
  color: #123c52;
  line-height: 1.2;
}

.class-review-toolbar-label small {
  overflow: hidden;
  color: #587386;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-review-toolbar > div {
  flex: none;
}

.class-review-toolbar .class-review-filter-controls {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(190px, 1.15fr);
  gap: 8px;
  flex: 1 1 390px;
}

.class-review-filter-controls label {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.class-review-filter-controls label > span {
  color: #587386;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.class-review-filter-controls select {
  width: 100%;
  min-height: 40px;
  border-color: #b9ceda;
  background: #fff;
  color: #173f55;
  font-size: 12px;
  font-weight: 700;
}

.class-review-toolbar .class-review-reveal-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.class-review-toolbar button {
  min-height: 40px;
}

.class-review-question-card {
  gap: 16px;
  padding: 20px;
  border-color: #d5e1e8;
  box-shadow: 0 8px 26px rgb(30 55 73 / 6%);
}

.class-review-question-head {
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0e8ed;
}

.class-review-question-submissions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #557080;
  font-size: 12px;
  font-weight: 750;
}

.class-review-question-submissions .icon {
  width: 16px;
  height: 16px;
}

.class-review-question-preview {
  margin: 0;
}

.class-review-option-grid {
  gap: 9px;
}

.class-review-option {
  cursor: default;
}

.class-review-option:hover {
  border-color: var(--line);
  background: #fff;
}

.class-review-option-control {
  width: 18px;
  height: 18px;
  flex: none;
  border: 2px solid #9bb0bd;
  border-radius: 50%;
  background: #fff;
}

.class-review-option > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.class-review-gap-slot {
  vertical-align: baseline;
}

.class-review-inline-answer {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-width: 116px;
  min-height: 39px;
  padding: 5px 10px;
  border: 1.5px solid #9db4c1;
  border-radius: 8px;
  background: #fff;
  color: #31576b;
  line-height: 1.05;
  text-align: left;
  vertical-align: middle;
  box-shadow: 0 2px 7px rgb(31 70 91 / 8%);
}

.class-review-inline-answer:hover {
  border-color: #4b8aa5;
  background: #f2f9fc;
}

.class-review-inline-answer .icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.class-review-inline-answer > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.class-review-inline-answer small {
  color: #4d6674;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .045em;
  line-height: 1;
  text-transform: uppercase;
}

.class-review-inline-answer strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: inherit;
  font-size: 12px;
  line-height: 1.15;
}

.class-review-inline-answer.is-revealed {
  border-color: #48a071;
  background: #eaf8f0;
  color: #145c37;
  box-shadow: 0 0 0 3px rgb(72 160 113 / 12%);
}

.class-review-inline-answer.is-revealed small {
  color: #367754;
}

.class-review-answer-row,
.class-review-answer-rail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.class-review-matching-preview .match-slot-content .class-review-inline-answer,
.rewrite-gap-wrap .class-review-inline-answer {
  width: 100%;
  min-width: 0;
}

.class-review-short-answer-preview {
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(100%, 520px);
}

.class-review-matching-preview {
  margin-top: 2px;
}

.class-review-matching-preview .match-row {
  cursor: default;
}

.class-review-match-bank {
  align-self: start;
}

.class-review-bank-chip {
  cursor: default;
}

.class-review-items {
  gap: 11px;
  margin-top: 2px;
}

.class-review-item {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-color: #d6e1e8;
  border-radius: 13px;
  background: #fff;
  box-shadow: none;
}

.class-review-item.is-revealed {
  border-color: #7fc39f;
  background: #fff;
}

.class-review-item-head {
  padding: 11px 12px;
  border-bottom: 1px solid #e4ebef;
  background: #f8fafc;
}

.class-review-item-head strong {
  font-size: 14px;
}

.class-review-item-head small {
  margin-top: 1px;
  color: #6c7f8c;
  font-size: 9.5px;
}

.class-review-question-toggle {
  min-height: 36px;
  padding: 7px 11px;
  border-color: #a9bdc8;
  background: #fff;
  color: #31576b;
  font-size: 12px;
}

.class-review-response-summary {
  display: grid;
  gap: 9px;
  padding: 12px;
}

.class-review-item-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px 12px 0;
}

.class-review-item-options > strong {
  margin-right: 2px;
  color: #607684;
  font-size: 10px;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.class-review-item-options > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 5px;
  border: 1px solid #dbe5ea;
  border-radius: 8px;
  background: #fff;
  color: #344f5e;
  font-size: 11.5px;
  font-weight: 650;
}

.class-review-item-options b {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 6px;
  background: #e7f1f5;
  color: #235e73;
  font-size: 10px;
}

.class-review-response-summary-head,
.class-review-response-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.class-review-response-summary-head strong {
  color: #203c4c;
  font-size: 12px;
}

.class-review-response-summary-head > span {
  color: #607887;
  font-size: 11px;
  font-weight: 700;
}

.class-review-response-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.class-review-response-group {
  display: grid;
  grid-template-columns: minmax(150px, .9fr) minmax(140px, 1.1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #dde7ec;
  border-radius: 9px;
  background: #fff;
}

.class-review-response-line {
  min-width: 0;
}

.class-review-response-line strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #172c38;
  font-size: 13px;
}

.class-review-response-line > span {
  flex: none;
  padding: 2px 6px;
  border-radius: 999px;
  background: #e9f2f6;
  color: #365d70;
  font-size: 10px;
  font-weight: 850;
}

.class-review-response-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7eef2;
}

.class-review-response-bar > span {
  display: block;
  width: var(--response-share);
  min-width: 3px;
  height: 100%;
  border-radius: inherit;
  background: #2b7d9b;
}

.class-review-response-students {
  min-width: 94px;
  color: #5c7584;
  font-size: 11px;
}

.class-review-response-students summary {
  cursor: pointer;
  font-weight: 750;
  white-space: nowrap;
}

.class-review-response-students p {
  grid-column: 1 / -1;
  margin: 7px 0 0;
  color: #5b6d78;
  line-height: 1.45;
}

.class-review-response-students[open] {
  grid-column: 1 / -1;
}

.class-review-response-group.is-empty {
  border-style: dashed;
  background: #fafbfc;
}

.class-review-response-group.is-empty .class-review-response-bar > span {
  background: #97a6af;
}

.class-review-no-responses {
  margin: 12px;
}

.class-review-empty-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px dashed #c9d8df;
  border-radius: 10px;
  background: #f8fbfc;
  color: #607684;
}

.class-review-empty-summary .icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.class-review-empty-summary > span {
  display: grid;
  gap: 2px;
}

.class-review-empty-summary strong {
  color: #344f5e;
  font-size: 12px;
}

.class-review-empty-summary small {
  font-size: 11px;
  line-height: 1.35;
}

.cbt-qnum.class-review-key-shown {
  box-shadow: 0 0 0 3px #f0c84b;
}

.attempt-body.with-review-panel {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 410px);
}

.attempt-body.with-review-panel.with-rail {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 410px) 280px;
}

.class-review-focus-panel {
  min-width: 0;
  border-left: 1px solid #cddde5;
  background: #f5f9fb;
  color: #173344;
}

.class-review-focus-head {
  position: sticky;
  z-index: 3;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 74px;
  padding: 12px 14px;
  border-bottom: 1px solid #cddde5;
  background: rgb(245 249 251 / 96%);
  backdrop-filter: blur(10px);
}

.class-review-focus-title {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.class-review-focus-title > span {
  color: #4d7284;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.class-review-focus-title > strong {
  color: #123c52;
  font-size: 18px;
  line-height: 1.15;
}

.class-review-focus-title > small {
  overflow: hidden;
  color: #607a89;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-review-focus-nav {
  display: flex;
  flex: none;
  gap: 6px;
}

.class-review-focus-nav button {
  display: grid;
  width: 38px;
  min-height: 38px;
  padding: 0;
  place-items: center;
  border-color: #acc2cd;
  background: #fff;
  color: #225e77;
}

.class-review-focus-nav button .icon {
  width: 17px;
  height: 17px;
}

.class-review-focus-nav .class-review-focus-toggle {
  display: none;
}

.class-review-focus-body {
  display: grid;
  gap: 12px;
  padding: 14px 14px 90px;
}

.quiz-part-reattempt-options {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
}

.quiz-part-reattempt-options > legend {
  margin-bottom: 8px;
  font-weight: 800;
}

.quiz-part-reattempt-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
}

.quiz-part-reattempt-option:has(input:checked) {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 18%, transparent);
}

.quiz-part-reattempt-option input {
  flex: none;
  margin-top: 3px;
}

.quiz-part-reattempt-option > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.quiz-part-reattempt-option small {
  color: var(--muted);
}

.focused-reattempt-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 10px 18px 0;
}

.class-review-focus-meta {
  display: flex;
  align-items: center;
  gap: 9px;
}

.class-review-focus-meta > span:last-child {
  display: grid;
  gap: 1px;
}

.class-review-focus-meta strong {
  color: #203c4c;
  font-size: 13px;
}

.class-review-focus-meta small {
  color: #6a818e;
  font-size: 10.5px;
}

.class-review-panel-prompt {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid #d8e4ea;
  border-radius: 10px;
  background: #fff;
}

.class-review-panel-prompt small,
.class-review-panel-choices > strong {
  color: #607684;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.class-review-panel-prompt strong {
  color: #223f4f;
  font-size: 12px;
  line-height: 1.45;
}

.class-review-panel-clues {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.class-review-panel-clues > span {
  display: grid;
  gap: 1px;
  padding: 6px 9px;
  border: 1px solid #d4e2e8;
  border-radius: 9px;
  background: #fff;
}

.class-review-panel-clues small {
  color: #6a818e;
  font-size: 8.5px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.class-review-panel-clues strong {
  color: #245b70;
  font-size: 11.5px;
}

.class-review-panel-choices {
  display: grid;
  gap: 7px;
}

.class-review-panel-choices > div {
  display: grid;
  gap: 6px;
}

.class-review-panel-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid #d8e4ea;
  border-radius: 9px;
  background: #fff;
  color: #304e5e;
  font-size: 12px;
  font-weight: 650;
}

.class-review-panel-choice b {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 7px;
  background: #e6f1f5;
  color: #225f77;
  font-size: 10px;
}

.class-review-panel-choice span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.class-review-panel-open-note {
  margin: 0;
  padding: 9px 10px;
  border-radius: 9px;
  background: #eaf3f7;
  color: #4f6c7b;
  font-size: 11px;
  line-height: 1.45;
}

.class-review-panel-key {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #cfdfe6;
  border-radius: 11px;
  background: #fff;
}

.class-review-panel-key.is-revealed {
  border-color: #7fc39f;
  background: #f0faf5;
}

.class-review-panel-key > div:first-child {
  display: grid;
  gap: 2px;
}

.class-review-panel-key > div:first-child strong {
  color: #294857;
  font-size: 12px;
}

.class-review-panel-key > div:first-child small {
  color: #667f8d;
  font-size: 10px;
}

.class-review-panel-key .class-review-inline-answer {
  min-width: 128px;
}

.class-review-focus-panel .class-review-response-summary {
  padding: 0;
}

.class-review-focus-panel .class-review-response-group {
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.class-review-focus-panel .class-review-response-students,
.class-review-focus-panel .class-review-response-students[open] {
  grid-column: auto;
}

.class-review-focus-panel .class-review-no-responses {
  margin: 0;
}

.class-review-focus-hint {
  margin: 0;
  padding-top: 2px;
  color: #637d8b;
  font-size: 10.5px;
  line-height: 1.5;
}

.class-review-inline-answer.is-focused:not(.is-panel-answer) {
  border-color: #1685bd;
  box-shadow: 0 0 0 3px rgb(22 133 189 / 16%);
}

.cbt-qnum.class-review-current {
  border-color: #1685bd;
  background: #eaf7fc;
  color: #0c5f89;
  box-shadow: 0 0 0 3px rgb(22 133 189 / 15%);
}

@media (min-width: 761px) {
  .class-review-shell {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .class-review-shell .attempt-header {
    flex: none;
  }

  .class-review-shell .attempt-body {
    flex: 1;
    align-items: stretch;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 56px;
  }

  .class-review-shell .attempt-main-col,
  .class-review-shell .class-review-focus-panel,
  .class-review-shell .attempt-notes-rail {
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .class-review-shell .attempt-notes-rail,
  .class-review-focus-panel {
    position: static;
  }
}

.attempt-shell.theme-dark .class-review-toolbar,
.attempt-shell.theme-yellow .class-review-toolbar {
  border-bottom-color: #425762;
  background: #17262e;
  color: #eef6f8;
}

.attempt-shell.theme-dark .class-review-toolbar strong,
.attempt-shell.theme-yellow .class-review-toolbar strong,
.attempt-shell.theme-dark .class-review-question-submissions,
.attempt-shell.theme-yellow .class-review-question-submissions {
  color: #edf7fa;
}

.attempt-shell.theme-dark .class-review-toolbar small,
.attempt-shell.theme-yellow .class-review-toolbar small {
  color: #b3c8d1;
}

.attempt-shell.theme-dark .class-review-filter-controls label > span,
.attempt-shell.theme-yellow .class-review-filter-controls label > span {
  color: #b3c8d1;
}

.attempt-shell.theme-dark .class-review-filter-controls select,
.attempt-shell.theme-yellow .class-review-filter-controls select {
  border-color: #526a76;
  background: #10232c;
  color: #f5f8fa;
}

.attempt-shell.theme-dark .class-review-item,
.attempt-shell.theme-yellow .class-review-item,
.attempt-shell.theme-dark .class-review-response-group,
.attempt-shell.theme-yellow .class-review-response-group,
.attempt-shell.theme-dark .class-review-option,
.attempt-shell.theme-yellow .class-review-option,
.attempt-shell.theme-dark .class-review-inline-answer,
.attempt-shell.theme-yellow .class-review-inline-answer,
.attempt-shell.theme-dark .class-review-empty-summary,
.attempt-shell.theme-yellow .class-review-empty-summary {
  border-color: #3a4d57;
  background: #162a33;
  color: #f5f8fa;
}

.attempt-shell.theme-dark .class-review-inline-answer small,
.attempt-shell.theme-yellow .class-review-inline-answer small,
.attempt-shell.theme-dark .class-review-empty-summary small,
.attempt-shell.theme-yellow .class-review-empty-summary small {
  color: #adc1ca;
}

.attempt-shell.theme-dark .class-review-inline-answer.is-revealed,
.attempt-shell.theme-yellow .class-review-inline-answer.is-revealed {
  border-color: #58bd88;
  background: #173f2d;
  color: #d7fbe7;
}

.attempt-shell.theme-dark .class-review-empty-summary strong,
.attempt-shell.theme-yellow .class-review-empty-summary strong {
  color: #f5f8fa;
}

.attempt-shell.theme-dark .class-review-item-head,
.attempt-shell.theme-yellow .class-review-item-head {
  border-bottom-color: #3a4d57;
  background: #1b313b;
}

.attempt-shell.theme-dark .class-review-response-summary-head strong,
.attempt-shell.theme-yellow .class-review-response-summary-head strong,
.attempt-shell.theme-dark .class-review-response-line strong,
.attempt-shell.theme-yellow .class-review-response-line strong {
  color: #f5f8fa;
}

.attempt-shell.theme-dark .class-review-response-summary-head > span,
.attempt-shell.theme-yellow .class-review-response-summary-head > span,
.attempt-shell.theme-dark .class-review-response-students,
.attempt-shell.theme-yellow .class-review-response-students,
.attempt-shell.theme-dark .class-review-response-students p,
.attempt-shell.theme-yellow .class-review-response-students p {
  color: #adc1ca;
}

.attempt-shell.theme-dark .class-review-item-options > span,
.attempt-shell.theme-yellow .class-review-item-options > span {
  border-color: #3a4d57;
  background: #162a33;
  color: #f5f8fa;
}

.attempt-shell.theme-dark .class-review-focus-panel,
.attempt-shell.theme-yellow .class-review-focus-panel {
  border-left-color: #3a4d57;
  background: #10232c;
  color: #f5f8fa;
}

.attempt-shell.theme-dark .class-review-focus-head,
.attempt-shell.theme-yellow .class-review-focus-head {
  border-bottom-color: #3a4d57;
  background: rgb(16 35 44 / 96%);
}

.attempt-shell.theme-dark .class-review-focus-title > strong,
.attempt-shell.theme-yellow .class-review-focus-title > strong,
.attempt-shell.theme-dark .class-review-focus-meta strong,
.attempt-shell.theme-yellow .class-review-focus-meta strong,
.attempt-shell.theme-dark .class-review-panel-prompt strong,
.attempt-shell.theme-yellow .class-review-panel-prompt strong,
.attempt-shell.theme-dark .class-review-panel-key > div:first-child strong,
.attempt-shell.theme-yellow .class-review-panel-key > div:first-child strong {
  color: #f5f8fa;
}

.attempt-shell.theme-dark .class-review-panel-prompt,
.attempt-shell.theme-yellow .class-review-panel-prompt,
.attempt-shell.theme-dark .class-review-panel-clues > span,
.attempt-shell.theme-yellow .class-review-panel-clues > span,
.attempt-shell.theme-dark .class-review-panel-choice,
.attempt-shell.theme-yellow .class-review-panel-choice,
.attempt-shell.theme-dark .class-review-panel-key,
.attempt-shell.theme-yellow .class-review-panel-key {
  border-color: #3a4d57;
  background: #162a33;
  color: #f5f8fa;
}

.attempt-shell.theme-dark .class-review-panel-open-note,
.attempt-shell.theme-yellow .class-review-panel-open-note {
  background: #1b313b;
  color: #b9ced7;
}

.attempt-shell.theme-dark .class-review-focus-title > span,
.attempt-shell.theme-yellow .class-review-focus-title > span,
.attempt-shell.theme-dark .class-review-focus-title > small,
.attempt-shell.theme-yellow .class-review-focus-title > small,
.attempt-shell.theme-dark .class-review-focus-meta small,
.attempt-shell.theme-yellow .class-review-focus-meta small,
.attempt-shell.theme-dark .class-review-panel-prompt small,
.attempt-shell.theme-yellow .class-review-panel-prompt small,
.attempt-shell.theme-dark .class-review-panel-choices > strong,
.attempt-shell.theme-yellow .class-review-panel-choices > strong,
.attempt-shell.theme-dark .class-review-panel-clues small,
.attempt-shell.theme-yellow .class-review-panel-clues small,
.attempt-shell.theme-dark .class-review-panel-key > div:first-child small,
.attempt-shell.theme-yellow .class-review-panel-key > div:first-child small,
.attempt-shell.theme-dark .class-review-focus-hint,
.attempt-shell.theme-yellow .class-review-focus-hint {
  color: #b9ced7;
}

.attempt-shell.theme-dark .class-review-panel-clues strong,
.attempt-shell.theme-yellow .class-review-panel-clues strong {
  color: #e1f4fa;
}

.attempt-shell.theme-dark .class-review-panel-choice b,
.attempt-shell.theme-yellow .class-review-panel-choice b {
  background: #244652;
  color: #e1f4fa;
}

@media (min-width: 761px) and (max-width: 1399px) {
  .attempt-body.with-review-panel.with-rail {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    grid-template-rows: minmax(0, 3fr) minmax(180px, 2fr);
  }

  .attempt-body.with-review-panel.with-rail .attempt-main-col {
    grid-row: 1 / -1;
  }

  .attempt-body.with-review-panel.with-rail .class-review-focus-panel {
    grid-column: 2;
    grid-row: 1;
  }

  .attempt-body.with-review-panel.with-rail .attempt-notes-rail {
    grid-column: 2;
    grid-row: 2;
    border-top: 1px solid var(--line);
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .attempt-body.with-review-panel,
  .attempt-body.with-review-panel.with-rail {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  }
}

@media (max-width: 760px) {
  .attempt-body.with-review-panel,
  .attempt-body.with-review-panel.with-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .class-review-focus-panel {
    position: fixed;
    z-index: 55;
    right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    left: 0;
    display: flex;
    max-height: min(48dvh, 480px);
    overflow: hidden;
    flex-direction: column;
    border-left: 0;
    border-top: 1px solid #a9c4d0;
    border-bottom: 0;
    box-shadow: 0 -12px 30px rgb(20 57 73 / 18%);
  }

  .class-review-focus-head {
    position: relative;
    flex: none;
    min-height: 64px;
  }

  .class-review-focus-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 16px;
  }

  .class-review-focus-nav .class-review-focus-toggle {
    display: grid;
  }

  .class-review-focus-panel.is-mobile-collapsed {
    max-height: 64px;
  }

  .class-review-focus-panel.is-mobile-collapsed .class-review-focus-head {
    border-bottom: 0;
  }

  .class-review-focus-panel.is-mobile-collapsed .class-review-focus-body {
    display: none;
  }

  .class-review-focus-meta,
  .class-review-panel-prompt,
  .class-review-panel-clues,
  .class-review-panel-choices,
  .class-review-panel-open-note,
  .class-review-panel-key,
  .class-review-response-summary,
  .class-review-no-responses,
  .class-review-focus-hint {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .class-review-toolbar {
    align-items: stretch;
    padding: 9px 12px;
  }

  .class-review-toolbar-label small {
    white-space: normal;
  }

  .class-review-toolbar > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .class-review-toolbar .class-review-filter-controls,
  .class-review-toolbar .class-review-reveal-controls {
    flex: 0 0 auto;
  }

  .class-review-toolbar-label {
    flex: 0 0 auto;
  }

  .class-review-toolbar .class-review-filter-controls {
    grid-template-columns: 1fr;
  }

  .class-review-toolbar .class-review-reveal-controls .primary {
    grid-column: 1 / -1;
  }

  .class-review-question-card {
    gap: 13px;
    padding: 14px;
  }

  .class-review-question-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .class-review-response-group {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .class-review-response-students,
  .class-review-response-students[open] {
    grid-column: auto;
  }

  .class-review-question-toggle {
    width: auto;
  }

  .class-review-focus-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .class-review-panel-key {
    grid-template-columns: minmax(0, 1fr);
  }

  .class-review-panel-key .class-review-inline-answer {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .class-review-item-head {
    align-items: stretch;
  }

  .class-review-question-toggle {
    width: 100%;
  }

  .class-review-response-summary-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .class-review-inline-answer {
    min-width: 104px;
  }

  .class-review-answer-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .class-review-answer-rail .class-review-inline-answer {
    width: 100%;
  }
}

/* Assignment attempt policy */
.attempt-policy-field {
  display: grid;
  gap: 10px;
}

.attempt-policy-field .answer-choice span,
.writing-edit-policy-field .answer-choice span {
  display: grid;
  gap: 3px;
}

.attempt-policy-field .answer-choice small,
.writing-edit-policy-field .answer-choice small {
  color: var(--muted);
  font-weight: 400;
}

.attempt-policy-count {
  display: none;
  margin-left: 30px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft, #f8fafc);
}

.attempt-policy-count.is-enabled {
  display: grid;
  gap: 6px;
}

.attempt-policy-count label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 700;
}

.attempt-policy-count input {
  width: 84px;
}

.writing-primary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 640px) {
  .attempt-policy-count {
    margin-left: 0;
  }

  .attempt-policy-count label,
  .writing-primary-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .attempt-policy-count input {
    width: 100%;
  }
}

/* ══ COMPULSORY ANSWERS + FINDABLE RE-ATTEMPTS ════════════════════════════ */

/* The submission page only ever shows one of these, and it is the reason the
   student cannot hand in yet — so it reads as a stop, not as a hint. */
.notice.bad {
  background: linear-gradient(180deg, #fff4f5, #ffecee);
  border-color: #f0bcc0;
}
.notice.bad::before { background: var(--red); }

.cbt-missing-notice {
  display: grid;
  gap: 10px;
  margin: 16px 0;
  justify-items: start;
}
.cbt-missing-notice strong { font-size: 15px; }
.cbt-missing-notice p { margin: 0; color: var(--muted); line-height: 1.5; }

.cbt-missing-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.cbt-missing-chip {
  min-width: 34px;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid #e3a5aa;
  border-radius: 9px;
  background: #fff;
  color: #a3242e;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.cbt-missing-chip:hover { border-color: var(--red); background: var(--red-soft); }

/* Timeline sits on the right of the review toolbar and takes the slack. */
.attempt-review-toolbar > .quiz-attempt-timeline { flex: 1 1 260px; min-width: 0; }
.attempt-review-retry { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 760px) {
  /* The toolbar is a column here, so "take the slack" would stretch the
     timeline down the screen instead of across it. */
  .attempt-review-toolbar > .quiz-attempt-timeline { flex: 0 0 auto; }
}

/* Why "Try again" is not on offer, said out loud under the results actions. */
.attempt-retry-note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
}

/* Second button in a homework row: below "Review", never stretched across it. */
.student-row-retry { margin-top: 6px; white-space: nowrap; }

/* Both buttons of a finished quiz share the row's single action cell. */
.review-ready-item > .review-ready-actions,
.student-app-shell .review-ready-item > .review-ready-actions {
  display: flex;
  flex: none;
  gap: 8px;
  align-items: center;
  align-self: center;
}
.review-ready-actions > button { flex: none; }
.student-app-shell .review-ready-actions > button {
  min-height: 42px;
  border-radius: 10px;
}

@media (max-width: 760px) {
  .student-app-shell .review-ready-item > .review-ready-actions {
    grid-column: 2 / -1;
    justify-self: stretch;
  }
  .review-ready-item > .review-ready-actions,
  .student-app-shell .review-ready-item > .review-ready-actions { flex-wrap: wrap; }
  .review-ready-actions > button,
  .student-app-shell .review-ready-actions > button { flex: 1 1 auto; }
}

@media (max-width: 620px) {
  .review-ready-item > .review-ready-actions { width: 100%; }
}

.attempt-shell.theme-dark .cbt-missing-chip,
.attempt-shell.theme-yellow .cbt-missing-chip {
  border-color: #7a3d43;
  background: #2a1416;
  color: #ffb3b8;
}
.attempt-shell.theme-dark .notice.bad,
.attempt-shell.theme-yellow .notice.bad {
  background: #2a1416;
  border-color: #7a3d43;
}

/* A blocked hand-in must LOOK blocked: nothing else in the app styles a disabled
   button, so the submit button was fully blue while refusing every click. */
.cbt-submit-btn:disabled {
  opacity: 0.5;
  box-shadow: none;
  cursor: not-allowed;
}

/* ══ REVIEW VERDICTS: ONE SHAPE FOR RIGHT, ONE FOR WRONG ══════════════════ */

/* The old review put a green "✓ <key>" chip beside a crossed-out answer and
   nothing at all beside a correct one — so the only tick on the page sat next to
   the mistakes. Now the student's own answer always carries its own verdict. */
.answer-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0 2px 0 6px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}

.answer-mark.is-correct {
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid var(--green);
}

.answer-mark.is-incorrect {
  background: var(--red-soft);
  color: var(--red);
  border: 1px solid var(--red);
}

/* The key chip is the answer the student SHOULD have given, not a verdict on what
   they wrote, so it says so and drops the tick it used to lead with. */
.gap-correction {
  background: #eef6ff;
  color: #14548a;
  border-color: #bcd8f0;
  font-weight: 600;
}

.attempt-shell.theme-dark .answer-mark.is-correct,
.attempt-shell.theme-yellow .answer-mark.is-correct {
  background: #10321f;
  border-color: #2f7d4f;
  color: #7ee2a8;
}

.attempt-shell.theme-dark .answer-mark.is-incorrect,
.attempt-shell.theme-yellow .answer-mark.is-incorrect {
  background: #33161a;
  border-color: #8b3a42;
  color: #ffb3b8;
}

.attempt-shell.theme-dark .gap-correction,
.attempt-shell.theme-yellow .gap-correction {
  background: #10283a;
  border-color: #2f5f80;
  color: #9bd3f5;
}

/* `.answer-choice:has(input:checked)` is more specific than `.choice-correct`, so
   the teal "this is the one you picked" style was painting over the verdict — the
   student's own answer never went green or red, only an unpicked key row did. */
.answer-choice.choice-correct,
.answer-choice.choice-correct:has(input:checked) {
  border-color: var(--green);
  background: var(--green-soft);
  box-shadow: inset 0 0 0 1px var(--green);
}

.answer-choice.choice-incorrect,
.answer-choice.choice-incorrect:has(input:checked) {
  border-color: var(--red);
  background: var(--red-soft);
  box-shadow: inset 0 0 0 1px var(--red);
}

/* A full-width answer box keeps its verdict beside it, not stranded underneath. */
.answer-with-mark {
  display: flex;
  align-items: center;
  gap: 2px;
}

.answer-with-mark > input { flex: 1 1 auto; min-width: 0; }
.answer-with-mark > .answer-mark { flex: none; }

/* ===== Teacher class workspace: classes, assigned work and insights in one place ===== */
.teacher-workspace-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 22px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #edf3f5;
}

.teacher-workspace-nav > button {
  justify-content: flex-start;
  min-height: 60px;
  padding: 9px 13px;
  text-align: left;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.teacher-workspace-nav > button > .icon {
  width: 20px;
  height: 20px;
  color: var(--muted);
}

.teacher-workspace-nav > button > span {
  display: grid;
  gap: 1px;
}

.teacher-workspace-nav strong { font-size: 13px; }
.teacher-workspace-nav small { color: var(--muted); font-size: 11px; font-weight: 550; }

.teacher-workspace-nav > button.active {
  color: var(--teal-dark);
  border-color: #bddcee;
  background: #fff;
  box-shadow: 0 7px 18px rgba(21, 67, 92, .08);
}

.teacher-workspace-nav > button.active > .icon { color: var(--teal); }

.class-hub-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.class-hub-summary .metric {
  min-height: 86px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}

.teacher-class-hub .class-grid {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  align-items: stretch;
}

.teacher-class-hub .class-grid.class-layout-list { grid-template-columns: 1fr; }

.teacher-class-hub .class-layout-list .class-card {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(410px, 1.7fr) auto;
  grid-template-areas:
    "head stats actions"
    "next stats actions";
  min-height: 0;
  align-items: center;
}

.teacher-class-hub .class-layout-list .class-card-head { grid-area: head; }
.teacher-class-hub .class-layout-list .class-card-stats { grid-area: stats; align-self: stretch; }
.teacher-class-hub .class-layout-list .class-card-next { grid-area: next; }
.teacher-class-hub .class-layout-list .class-card-actions { grid-area: actions; display: grid; align-content: center; }
.teacher-class-hub .class-layout-list .class-card-actions .primary { margin: 0; }

.teacher-class-hub .class-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 350px;
  overflow: hidden;
  border: 1px solid #d5e1e5;
  border-top: 4px solid var(--teal);
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fcff 0, #fff 115px);
  box-shadow: 0 10px 26px rgba(20, 64, 83, .06);
}

.teacher-class-hub .class-card:hover {
  border-color: #a9cfdf;
  box-shadow: 0 15px 34px rgba(20, 64, 83, .11);
  transform: translateY(-2px);
}

.class-card-identity,
.class-work-group-title,
.class-workspace-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.class-folder-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #fff;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--teal-dark), var(--teal));
  box-shadow: 0 7px 16px rgba(8, 118, 189, .22);
  font-size: 17px;
  font-weight: 850;
}

.class-folder-mark.large {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  font-size: 22px;
}

.class-card-alerts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.teacher-class-hub .class-card-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.teacher-class-hub .class-card-stats > div {
  min-width: 0;
  padding: 12px 9px;
  border-right: 1px solid var(--line);
}

.teacher-class-hub .class-card-stats > div:last-child { border-right: 0; }
.teacher-class-hub .class-card-stats strong { font-size: 20px; }
.teacher-class-hub .class-card-stats span { display: grid; color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.teacher-class-hub .class-card-stats small { color: var(--faint); font-size: 9.5px; }

.class-card-next {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 12px;
  color: var(--muted);
  border: 1px solid #e0e8eb;
  border-radius: 11px;
  background: #f8fafb;
}

.class-card-next > .icon { flex: 0 0 auto; color: var(--teal); }
.class-card-next > span { display: grid; min-width: 0; }
.class-card-next small { font-size: 10px; font-weight: 750; }
.class-card-next strong { overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.class-card-next em { color: var(--muted); font-size: 10px; font-style: normal; }

.teacher-class-hub .class-card-actions { margin-top: auto; }
.teacher-class-hub .class-card-actions .primary { margin-left: auto; }

.class-workspace-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
  padding: 22px 24px;
  border: 1px solid #cfe0e7;
  border-radius: 17px;
  background:
    radial-gradient(circle at 90% 5%, rgba(255, 236, 0, .24), transparent 11rem),
    linear-gradient(120deg, #f6fbfd, #fff 62%);
}

.class-workspace-title { display: grid; gap: 12px; }
.class-workspace-title > .linkish { justify-self: start; min-height: 28px; padding: 0; }
.class-workspace-heading h1 { margin: 1px 0 2px; }
.class-workspace-heading p { margin: 0; color: var(--muted); }
.class-workspace-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

.class-workspace-tabs {
  position: sticky;
  z-index: 18;
  top: 76px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 16px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(247, 250, 251, .96);
  box-shadow: 0 7px 20px rgba(18, 58, 73, .06);
  backdrop-filter: blur(10px);
}

.class-workspace-tabs > button {
  min-height: 44px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.class-workspace-tabs > button b {
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #e4ecef;
  font-size: 10px;
}

.class-workspace-tabs > button.active {
  color: var(--teal-dark);
  border-color: #b9d9e8;
  background: #fff;
  box-shadow: 0 5px 14px rgba(18, 58, 73, .08);
}

.class-workspace-tabs > button.active b { color: #fff; background: var(--teal); }
.class-workspace-content,
.class-overview-grid,
.class-students-grid,
.class-insights-grid,
.all-work-groups,
.class-work-snapshot-panel,
.class-work-table {
  min-width: 0;
  max-width: 100%;
}

.class-overview-grid,
.class-students-grid,
.class-insights-grid,
.all-work-groups { display: grid; gap: 16px; }

.class-health-panel { border-top: 4px solid var(--teal); }
.class-work-snapshot-panel { border-top: 4px solid #6d59c7; }
.class-insight-summary { border-top: 4px solid var(--teal); }
.class-skill-panel { border-top: 4px solid #6d59c7; }
.class-student-insights { grid-column: 1 / -1; }
.class-insights-grid { grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); }

.class-work-filter-bar {
  display: flex;
  align-items: end;
  gap: 9px;
  flex-wrap: wrap;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: #f8fafb;
}

.class-work-filter-bar > label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 750;
}

.class-work-filter-bar > .status { margin-left: auto; }
.class-work-search { position: relative; flex: 1 1 230px; }
.class-work-search > .icon { position: absolute; z-index: 1; left: 11px; bottom: 10px; color: var(--faint); }
.class-work-search input { width: 100%; padding-left: 36px; }

.class-work-table { border: 0; border-radius: 0 0 var(--radius) var(--radius); }
.class-work-table table { min-width: 820px; }
.class-work-table th { color: #627681; background: #f4f8f9; }
.class-work-table td { vertical-align: middle; }
.class-work-table.compact table { min-width: 760px; }
.class-work-main { display: grid; grid-template-columns: auto minmax(180px, 1fr); align-items: center; gap: 10px; }
.class-work-main > div { display: grid; min-width: 0; }
.class-work-main .linkish { justify-content: flex-start; min-height: 26px; padding: 0; overflow: hidden; color: var(--text); font-weight: 780; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.class-work-main small,
.class-work-status small,
.class-work-progress small { display: block; color: var(--muted); font-size: 10.5px; }
.class-work-kind { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; color: #225d85; border-radius: 8px; background: #e9f4fc; font-size: 10px; font-weight: 800; }
.class-work-kind.writing { color: #62439c; background: #f0ebfb; }
.class-work-kind .icon { width: 13px; height: 13px; }
.class-work-kind-toggle {
  min-height: 28px;
  border: 1px solid #cce1ed;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.class-work-kind-toggle .icon:last-child { width: 10px; height: 10px; margin-left: 1px; }
.class-work-kind-toggle:hover { border-color: #8fbfd8; background: #dceffc; }
.class-work-kind-toggle[aria-expanded="true"] {
  border-color: #78b3d2;
  background: #d8edf9;
  box-shadow: 0 0 0 2px rgba(8, 125, 193, .08);
}
.class-work-table tr.is-expanded > td { background: #f7fbfd; }
.class-work-table .assignment-analytics-row > td {
  padding: 17px 20px 20px;
  border-left: 3px solid #78b3d2;
  background: linear-gradient(120deg, #f5fbfe, #fbfdfd 65%);
}
.class-work-table .assignment-analytics { max-width: 1180px; margin: 0 auto; }
.class-work-status { min-width: 125px; }
.class-work-progress { min-width: 145px; }
.class-work-marking { min-width: 82px; }
.class-work-actions { width: 1%; white-space: nowrap; }
.class-work-empty { margin: 14px; }

.all-work-controls { margin-bottom: 16px; }
.all-work-controls .panel-head p,
.class-work-group-head p { margin: 1px 0 0; color: var(--muted); font-size: 11px; }
.class-work-group { overflow: hidden; }
.class-work-group-head { background: linear-gradient(90deg, #f5fbfd, #fff); }
.class-work-group-title h2 { margin: 0; }

@media (max-width: 1280px) {
  body {
    overflow-x: hidden;
    overflow-x: clip;
  }
  .teacher-class-hub .class-grid { grid-template-columns: 1fr; }
  .teacher-class-hub .class-layout-list .class-card { display: flex; }
  .class-hub-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .class-insights-grid { grid-template-columns: 1fr; }
  .class-workspace-hero { align-items: flex-start; flex-direction: column; }
  .class-workspace-actions { justify-content: flex-start; }
  .class-student-insights { grid-column: auto; }
}

@media (max-width: 760px) {
  .teacher-workspace-nav {
    display: flex;
    overflow-x: auto;
    padding: 5px;
    scroll-snap-type: x proximity;
  }

  .teacher-workspace-nav > button {
    flex: 0 0 168px;
    min-height: 54px;
    scroll-snap-align: start;
  }

  .teacher-workspace-nav small { display: none; }
  .class-hub-summary { grid-template-columns: 1fr 1fr; }
  .teacher-class-hub .class-card { min-height: 0; }
  .teacher-class-hub .class-card-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teacher-class-hub .class-card-stats > div:nth-child(2) { border-right: 0; }
  .teacher-class-hub .class-card-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .class-card-head { align-items: flex-start; flex-direction: column; }
  .class-card-alerts { justify-content: flex-start; }
  .teacher-class-hub .class-card-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .teacher-class-hub .class-card-actions .primary { grid-column: 1 / -1; grid-row: 1; margin: 0; }
  .class-workspace-hero { padding: 17px; }
  .class-workspace-heading { align-items: flex-start; }
  .class-folder-mark.large { width: 48px; height: 48px; }
  .class-workspace-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .class-workspace-actions .primary { grid-column: 1 / -1; }
  .class-workspace-tabs {
    top: 72px;
    display: flex;
    overflow-x: auto;
    justify-content: flex-start;
    scroll-snap-type: x proximity;
  }
  .class-workspace-tabs > button { flex: 0 0 auto; min-width: 126px; scroll-snap-align: start; }
  .class-work-filter-bar > label { flex: 1 1 140px; }
  .class-work-filter-bar > .class-work-search { flex-basis: 100%; }
  .class-work-filter-bar > .status { margin-left: 0; }
  .class-work-table { overscroll-behavior-x: contain; }
  .class-work-table::after { content: "Scroll sideways to see progress and actions →"; display: block; position: sticky; left: 0; padding: 8px 12px; color: var(--muted); background: #f8fafb; font-size: 10px; }
  .class-work-table.compact::after { content: "Swipe to see progress →"; }
}

/* "A new version is ready" — top-centred so it never collides with .toast, which sits
   bottom-centred. Centred with auto margins rather than translateX(-50%): the shared
   toastIn keyframe sets transform with fill-mode "both", and an animation's value beats
   a normal declaration, so any transform set here would be silently overridden. */
.app-update-notice {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: max-content;
  max-width: min(560px, calc(100vw - 24px));
  z-index: 1300;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  background: #14343c;
  color: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.4;
  box-shadow: 0 14px 34px rgba(15, 40, 48, 0.35);
  animation: appUpdateIn 0.25s ease both;
}

/* Only opacity and the independent translate property, so nothing fights the layout. */
@keyframes appUpdateIn {
  from {
    opacity: 0;
    translate: 0 -8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.app-update-notice button {
  padding: 7px 14px;
  font-size: 14px;
  border-radius: 9px;
  cursor: pointer;
}

.app-update-notice button[data-update-dismiss] {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}

/* An answer the student changed after handing it in. Only drawn when there is
   something to say, so an ordinary attempt row is left exactly as it was. */
.writing-edit-trail {
  margin-top: 6px;
}

.writing-edit-trail > summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--amber);
  list-style: none;
}

.writing-edit-trail > summary::-webkit-details-marker {
  display: none;
}

.writing-edit-trail > summary svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.writing-edit-trail > ol {
  margin: 6px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 2px;
  font-size: 12.5px;
  color: var(--muted);
}

/* Quiz creator outline: keep every part and question within reach. */
.builder-workspace .quiz-builder { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
.builder-workspace .quiz-builder > .stack { grid-column: 2; min-width: 0; }
.builder-workspace .builder-rail { grid-column: 2; position: static; order: initial; }
.builder-outline { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 92px; min-width: 0; }
.builder-outline > summary { padding: 16px; font-weight: 800; cursor: pointer; }
.builder-outline nav { padding: 0 10px 12px; max-height: calc(100dvh - 170px); overflow-y: auto; overscroll-behavior: contain; }
.builder-outline-group { border-top: 1px solid #dce5e3; padding: 8px 0; }
.builder-outline-part { width: 100%; text-align: left; justify-content: flex-start; white-space: normal; overflow-wrap: anywhere; border: 0; box-shadow: none; padding: 10px; }
.builder-outline-questions { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px; font-size: 12px; }
.builder-outline-question { min-height: 36px; padding: 5px 8px; font-size: 12px; }
.builder-outline button[aria-current] { background: #17665c; color: white; border-color: #17665c; }
.builder-outline button:focus-visible { outline: 3px solid #d18c20; outline-offset: 2px; }
.quiz-builder [data-section-card], .quiz-builder [data-question-card], .quiz-builder > .stack > .panel, .quiz-builder .builder-rail { scroll-margin-top: 110px; }
@media (max-width: 1100px) {
  .builder-workspace .quiz-builder { grid-template-columns: minmax(0, 1fr); }
  .builder-workspace .quiz-builder > .stack, .builder-workspace .builder-rail { grid-column: 1; }
  .builder-outline { grid-column: 1; grid-row: auto; top: 78px; z-index: 20; background: #fff; }
  .builder-outline nav { max-height: 45dvh; }
  .quiz-builder [data-section-card], .quiz-builder [data-question-card], .quiz-builder > .stack > .panel, .quiz-builder .builder-rail { scroll-margin-top: 150px; }
}

@media (max-width: 700px) {
  .builder-workspace .quiz-builder > .stack > .panel > .form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .builder-workspace .builder-location-field { grid-column: 1 / -1; min-width: 0; }
}

.builder-outline { top: var(--builder-outline-top, 92px); }
.quiz-builder [data-section-card], .quiz-builder [data-question-card], .quiz-builder > .stack > .panel, .quiz-builder .builder-rail { scroll-margin-top: calc(var(--builder-outline-top, 92px) + 18px); }
@media (max-width: 1100px) {
  .quiz-builder [data-section-card], .quiz-builder [data-question-card], .quiz-builder > .stack > .panel, .quiz-builder .builder-rail { scroll-margin-top: calc(var(--builder-outline-top, 78px) + 72px); }
}


/* --- Internal-use notice printed under every paper --- */

.quiz-footer {
  margin-top: 20px;
  padding: 12px 14px 2px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75em;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}

.quiz-footer p {
  margin: 0;
}

/* A short clip belonging to one question, played beside it. */

.question-audio-stack {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.question-audio-stack .audio-player-main {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.question-audio-stack audio {
  width: 100%;
  min-width: 0;
  height: 38px;
}

@media (max-width: 600px) {
  .question-audio-stack .audio-player-main {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

/* Writing uses the quiz room's header, surfaces and numbered answer cards. */
.writing-author-form .writing-prompt-editor { min-height: 150px; max-height: 380px; overflow: auto; padding: 14px; line-height: 1.75; background: var(--surface, #fff); }
.writing-author-form .field[hidden] { display: none; }
.writing-author-form .format-toolbar { position: sticky; top: 0; z-index: 1; padding: 7px; background: #f0f7fa; border: 1px solid var(--line); border-radius: 8px 8px 0 0; }
.writing-author-form .format-toolbar button { min-width: 36px; min-height: 34px; }
.writing-author-form .writing-structure-field { padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.writing-shell.cbt-shell { display: flex; flex-direction: column; }
.writing-shell .writing-split { margin: 12px; gap: 0; }
.writing-shell .writing-task-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.writing-shell .writing-answer-panel { overflow-y: auto; padding: 0 0 0 12px; }
.writing-shell .writing-response-group { flex: 0 0 auto; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; margin: 0; }
.writing-shell .writing-response-group > label { align-items: center; justify-content: flex-start; }
.writing-shell .writing-response-group > label small { margin-left: auto; }
.writing-shell .writing-title-field { padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.writing-shell .writing-answer { min-height: 320px; border-radius: 8px; }
.quiz-response-feedback { margin-top: 16px; }
.quiz-response-feedback summary { cursor: pointer; font-weight: 700; padding: 10px 0; }
.quiz-response-feedback iframe { width: 100%; height: 560px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.quiz-response-marking-frame { width: 100%; height: 78dvh; border: 0; }
.modal:has(.quiz-response-marking-frame) { width: min(1500px, 98vw); max-width: 98vw; }
@media (max-width: 760px) {
  .writing-shell .writing-split { margin: 8px; gap: 12px; }
  .writing-shell .writing-answer-panel { padding: 0; overflow: visible; }
  .writing-shell .writing-task-panel { max-height: 45dvh; }
  .writing-shell .cbt-status { display: none; }
  .quiz-response-feedback iframe { height: 480px; }
}

.writing-shell .question-number { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line-strong); border-radius: 5px; font-weight: 800; background: var(--surface); }
@media (max-width: 820px) {
  .writing-shell.cbt-shell { height: auto; min-height: 100dvh; overflow: visible; }
  .writing-shell .writing-split { flex: none; display: block; overflow: visible; }
  .writing-shell .writing-task-panel { height: auto; min-height: 180px; max-height: 45dvh; margin-bottom: 12px; }
  .writing-shell .writing-answer-panel { height: auto; overflow: visible; padding: 0; }
}


/* ══════════════════════════════════════════════════════════════════════════
   WRITING QUEUE · whose papers to show
   A co-taught class drops a colleague's submissions into the same "Needs
   marking" list, which made the queue long enough to bury your own work. The
   control in the panel head filters that list only: folders, class totals and
   every Mark button still cover all the writing waiting in your classes.
   ══════════════════════════════════════════════════════════════════════════ */

.writing-queue-head-tools {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
}

.writing-queue-filter {
  padding: 3px;
  gap: 2px;
  border-color: #e3ebed;
  border-radius: var(--radius-pill);
  background: #f2f7f8;
  overflow: visible;
}

.writing-queue-filter button {
  min-height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  box-shadow: none;
}

.writing-queue-filter button:hover {
  background: rgba(15, 40, 48, 0.055);
  color: var(--text);
  box-shadow: none;
}

.writing-queue-filter button.active {
  background: #fff;
  color: var(--teal-dark);
  box-shadow: var(--shadow-sm);
}

.writing-queue-hidden-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.writing-queue-hidden-empty > div {
  display: grid;
  justify-items: start;
}

.writing-queue-hidden-empty button {
  margin-top: 9px;
  color: var(--teal-dark);
}

@media (max-width: 760px) {
  .writing-attention-grid .panel-head {
    flex-wrap: wrap;
  }

  .writing-queue-head-tools {
    width: 100%;
    justify-content: space-between;
  }

  .writing-queue-filter {
    flex: 1 1 auto;
  }

  .writing-queue-filter button {
    flex: 1 1 0;
  }
}