/* ---------- Buttons (extra variants) ---------- */
.btn--inline { width: auto; }

.btn--secondary {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-strong);
}
.btn--secondary:hover {
  background: var(--surface-soft);
  color: var(--ink);
  border-color: var(--border-strong);
  text-decoration: none;
}

.btn--sm {
  min-height: 36px;
  padding: .5rem .75rem;
  font-size: var(--text-small);
}

.btn--danger {
  background: var(--surface);
  color: var(--danger);
  border: 1px solid var(--danger-border);
}
.btn--danger:hover {
  background: var(--danger-bg);
  color: var(--danger);
  text-decoration: none;
}

/* Checkbox chip grid (multi-select) */
.check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.check-chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: var(--text-body);
  background: var(--surface);
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.check-chip:has(input:checked) {
  background: var(--brand-light);
  border-color: var(--success-border);
  color: var(--brand-dark);
  font-weight: 600;
}

/* ---------- Searchable multi-select ---------- */
.msel { position: relative; }
.msel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-bottom: .5rem;
}
.msel__tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  overflow-wrap: anywhere;
  gap: .375rem;
  background: var(--brand-light);
  color: var(--brand-dark);
  border: 1px solid var(--success-border);
  border-radius: var(--radius-pill);
  padding: .25rem .25rem .25rem .75rem;
  font-size: var(--text-small);
  font-weight: 600;
}
.msel__tag button {
  flex-shrink: 0;
  border: none;
  background: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--brand-dark);
  border-radius: 50%;
  width: 18px; height: 18px;
  line-height: 1;
  cursor: pointer;
  font-size: var(--text-body);
}
.msel__tag button { display: inline-grid; place-items: center; padding: 0; }
.msel__tag button .app-icon { width: .75rem; height: .75rem; }
.msel__tag button:hover { background: color-mix(in srgb, var(--success) 30%, transparent); }
.msel__search { margin-bottom: .5rem; }
.msel__count { font-size: var(--text-small); color: var(--muted); }
.msel__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  max-height: 220px;
  overflow-y: auto;
  padding: .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: .375rem;
}
.msel__empty { color: var(--muted); font-size: var(--text-body); width: 100%; margin: .25rem; }

/* ---------- Autocomplete (server-backed) ---------- */
.acs { position: relative; }
.acs__field { position: relative; }
.acs__control {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .375rem;
  width: 100%;
  min-height: 44px;
  padding: .25rem .5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.acs__control:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}
.acs__input.input {
  flex: 1 1 9rem;
  width: auto;
  min-width: 7rem;
  min-height: 34px;
  height: 34px;
  padding: .375rem .375rem;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.acs__input.input:focus {
  border: 0;
  box-shadow: none;
}
.acs__results {
  position: absolute;
  z-index: 30;
  inset-inline: 0;
  top: calc(100% + 4px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-height: 240px;
  overflow-y: auto;
  padding: .25rem;
}
.acs__result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .125rem;
  width: 100%;
  text-align: start;
  border: none;
  background: none;
  padding: .5rem .5rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
}
.acs__result:hover,
.acs__result--active { background: var(--brand-light); }
.acs__result mark { color: inherit; background: var(--warning-border); border-radius: var(--radius-sm); padding: 0 .08em; }
.acs__result span { color: var(--muted); font-size: var(--text-small); direction: ltr; }
.acs__empty,
.acs__hint,
.acs__error,
.acs__loading { padding: .5rem; color: var(--muted); font-size: var(--text-body); }
.acs__error { color: var(--danger); }
.acs__loading::before {
  content: "";
  display: inline-block;
  width: .8rem;
  height: .8rem;
  margin-inline-end: .5rem;
  vertical-align: -.08rem;
  border: 2px solid color-mix(in srgb, var(--success) 20%, transparent);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: ui-spin .7s linear infinite;
}
.acs__tags { display: flex; flex-wrap: wrap; gap: .375rem; }
.acs__tags--empty { display: none; }

/* ---------- Interaction feedback ---------- */
@keyframes ui-spin { to { transform: rotate(360deg); } }
.btn--loading { cursor: wait; opacity: .8; }
.btn--loading::after {
  content: "";
  display: inline-block;
  width: .8rem;
  height: .8rem;
  margin-inline-start: .5rem;
  vertical-align: -.08rem;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: ui-spin .7s linear infinite;
}
form[aria-busy="true"] { cursor: progress; }
.flash--dismissible { position: relative; padding-inline-end: 3rem; transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease); }
.flash--leaving { opacity: 0; transform: translateY(-4px); }
.flash__dismiss {
  position: absolute;
  inset-inline-end: .75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.75rem;
  height: 1.75rem;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: var(--text-subtitle);
}
.flash__dismiss:hover { background: color-mix(in srgb, var(--shadow-color) 8%, transparent); }
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: -.5rem 0 1rem;
}
.filter-chip,
.filter-chips__clear {
  padding: .375rem .75rem;
  color: var(--brand-dark);
  background: var(--brand-light);
  border: 1px solid var(--success-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-label);
}
.filter-chips__clear { color: var(--muted); background: transparent; border-color: transparent; text-decoration: underline; }
.filtered-results { display: block; min-width: 0; }

/* ---------- Searchable surah picker ---------- */
.surah-picker { position: relative; }
.surah-picker__search,
.surah-picker__results { display: none; }
.surah-picker--enhanced .surah-picker__search { display: block; }
.surah-picker--enhanced .surah-picker__native { display: none; }
.surah-picker--enhanced .surah-picker__results {
  position: absolute;
  z-index: 40;
  inset-inline: 0;
  top: calc(100% + 4px);
  display: block;
  max-height: 280px;
  overflow-y: auto;
  padding: .375rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.surah-picker--enhanced .surah-picker__results[hidden] { display: none; }
.surah-picker__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: .5rem .75rem;
  color: var(--ink);
  text-align: start;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
}
.surah-picker__result:hover,
.surah-picker__result--active { background: var(--brand-light); }
.surah-picker__result span { color: var(--muted); font-size: var(--text-label); white-space: nowrap; }
.surah-picker__hint,
.surah-picker__empty { padding: .75rem .75rem; color: var(--muted); font-size: var(--text-small); }

/* ---------- Assign existing (halaqah) ---------- */
.assign-existing {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  background: var(--brand-light);
  border: 1px solid var(--success-border);
  border-radius: var(--radius);
  padding: .75rem;
  margin-bottom: 1rem;
}
.assign-existing .field { margin-bottom: 0; }
.assign-existing .acs { flex: 1; }
.assign-existing > .btn { min-height: 44px; }

/* ---------- Surah portion rows ---------- */
.portion-row {
  display: grid;
  grid-template-columns: 2fr 1.3fr 1fr 1fr 1fr auto;
  gap: .5rem;
  align-items: end;
  padding: .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: .5rem;
  background: var(--surface);
}
.portion-row__unit-label { min-width: 0; }
.portion-row__unit-label .readonly-field { min-height: 44px; display: flex; align-items: center; font-weight: 750; }
.portion-row--unit { grid-template-columns: minmax(200px, 2fr) minmax(150px, 1.3fr) minmax(150px, 1fr) auto; }
.portion-row--unit .portion-row__range-field { display: none; }
.portion-hint { color: var(--muted); font-weight: 500; font-size: var(--text-label); }

.portion-quick {
  display: grid;
  grid-template-columns: minmax(130px, .8fr) minmax(240px, 1.5fr) minmax(150px, 1fr) auto;
  gap: .5rem;
  align-items: end;
  padding: .75rem;
  margin: .5rem 0 .75rem;
  background: var(--accent-light);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius);
}
.portion-quick__field { min-width: 0; }
.portion-quick__selection { position: relative; }
.portion-quick__apply { white-space: nowrap; }
.portion-quick__summary {
  grid-column: 1 / -1;
  min-height: 1.2rem;
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: 600;
}

.quick-picker { position: relative; }
.quick-picker__trigger {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 0 .75rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 650;
  list-style: none;
}
.quick-picker__trigger::-webkit-details-marker { display: none; }
.quick-picker__trigger:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 24%, transparent); border-color: var(--brand); }
.quick-picker[open] .quick-picker__trigger { border-color: var(--brand); border-end-start-radius: 0; border-end-end-radius: 0; }
.quick-picker__value { min-width: 0; display: flex; align-items: center; flex: 1; overflow: hidden; }
.quick-picker__caret { flex: 0 0 auto; color: var(--brand); font-size: var(--text-heading); transition: transform var(--duration) var(--ease); }
.quick-picker[open] .quick-picker__caret { transform: rotate(180deg); }
.quick-picker__panel {
  position: absolute;
  z-index: 45;
  inset-inline: 0;
  top: 100%;
  padding: .75rem;
  background: var(--surface);
  border: 1px solid var(--brand);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
}
.quick-picker__search { margin-bottom: .5rem; }
.quick-picker__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .375rem;
  max-height: 260px;
  overflow-y: auto;
  padding-inline-end: .25rem;
}
.quick-picker__option {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--text-body);
}
.quick-picker__option:hover { background: var(--brand-light); border-color: var(--success-border); }
.quick-picker__option:has(input:checked) { color: var(--brand-dark); background: var(--brand-light); border-color: var(--brand); font-weight: 700; }
.quick-picker__option input { width: 18px; height: 18px; accent-color: var(--brand); }
.quick-picker__empty { margin: .5rem; color: var(--muted); font-size: var(--text-body); }
.quick-picker__tags {
  min-width: 0;
  grid-column: 1 / -1;
  display: flex;
  flex: 1;
  gap: .375rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.quick-picker__tags::-webkit-scrollbar { display: none; }
.quick-picker__tags:empty { display: none; }
.quick-picker__tag {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .375rem;
  padding: .25rem .25rem .25rem .5rem;
  color: var(--brand-dark);
  background: var(--brand-light);
  border: 1px solid var(--success-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  font-weight: 700;
}
.quick-picker__tag button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--brand-dark);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.quick-picker__tag button:hover { background: color-mix(in srgb, var(--brand) 24%, transparent); }
.portion-quick__apply:disabled { opacity: .5; cursor: not-allowed; }

.btn-add-row {
  display: block;
  width: 100%;
  margin-top: .5rem;
  padding: .5rem;
  border: 1.5px dashed var(--success-border);
  border-radius: var(--radius);
  background: var(--brand-light);
  color: var(--brand-dark);
  font-weight: 700;
  font-size: var(--text-body);
  cursor: pointer;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.btn-add-row:hover { background: var(--brand-light); border-color: var(--brand); }
.portion-remove {
  border: 1px solid var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: var(--radius);
  width: 44px; height: 44px;
  cursor: pointer;
  font-size: var(--text-heading);
  line-height: 1;
}
.portion-remove:hover { background: var(--danger-bg); }

@media (max-width: 560px) {
  .portion-row { grid-template-columns: 1fr 1fr; }
  .portion-row__surah { grid-column: 1 / -1; }
  .portion-row--unit .portion-row__unit-label { grid-column: 1 / -1; }
  .portion-quick { grid-template-columns: 1fr; }
  .portion-quick__apply { width: 100%; }
  .quick-picker__panel { position: static; }
  .quick-picker__options { grid-template-columns: 1fr; max-height: 240px; }
  form:has(.quick-picker[open]) .form-actions--sticky { position: static; }
}

/* ---------- Full-width record form sections ---------- */
.record-form-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.record-form-stack .card { margin: 0; }
.record-step:has(.quick-picker[open]) {
  position: relative;
  z-index: 1;
}
.card__heading {
  margin: 0 0 1rem;
  font-size: var(--text-heading);
  font-weight: 800;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}
/* ---------- Bulk action bar ---------- */
.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  background: var(--brand-light);
  border: 1px solid var(--success-border);
  border-radius: var(--radius);
  padding: .5rem 1rem;
  margin-bottom: 1rem;
}
.bulk-bar[hidden] { display: none; }

/* ---------- Pagination ---------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  justify-content: center;
  align-items: center;
  margin-top: 1.25rem;
}
.pagination__btn, .pagination__page {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-body);
  font-weight: 600;
  text-decoration: none;
}
a.pagination__btn:hover, a.pagination__page:hover { background: var(--brand-light); text-decoration: none; }
.pagination__page--active { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.pagination__btn--disabled { color: var(--border); background: var(--surface-soft); cursor: default; }
.pagination__btn--disabled:hover { background: var(--surface-soft); }

/* ---------- Settings switch ---------- */
.switch-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  cursor: pointer;
}
.switch-row span { display: flex; flex-direction: column; }
.switch-row small { color: var(--muted); font-size: var(--text-small); }
.switch-row--compact { margin-top: .5rem; }

.field-hint { display: block; margin-top: .375rem; color: var(--muted); font-size: var(--text-small); }
.field-error { display: block; margin-top: .375rem; color: var(--danger); font-size: var(--text-small); font-weight: 650; }
.field-error:empty { display: none; }
.input--error, .input[aria-invalid="true"] { border-color: var(--danger); }
.input--error:focus, .input[aria-invalid="true"]:focus { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent); }
.label-optional { color: var(--muted); font-size: var(--text-label); font-weight: 500; }

/* ---------- Student CSV import ---------- */
.student-import-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  padding: 0;
  margin: 0 0 1rem;
  list-style: none;
}
.student-import-step {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  padding: .75rem;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.student-import-step--active { color: var(--ink); border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
.student-import-step__number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  color: var(--brand);
  font-weight: 800;
  border-radius: 50%;
  background: var(--brand-light);
}
.student-import-step strong,
.student-import-step small { display: block; }
.student-import-step strong { font-size: var(--text-small); }
.student-import-step small { margin-top: .125rem; font-size: var(--text-label); line-height: 1.3; }
.student-import-layout {
  display: grid;
  grid-template-columns: minmax(240px, .75fr) minmax(360px, 1.25fr);
  gap: 1rem;
  align-items: stretch;
}
.student-import-card {
  display: grid;
  align-content: start;
  gap: 1rem;
  margin: 0;
}
.student-import-card > .page__subtitle { margin: 0; }
.student-import-card .card__title { margin: .125rem 0 0; }
.student-import-card__eyebrow {
  color: var(--brand);
  font-size: var(--text-label);
  font-weight: 800;
}
.student-import-download { justify-content: center; width: 100%; }
.student-import-requirements {
  padding: .75rem 1rem;
  border-inline-start: 3px solid var(--brand);
  border-radius: var(--radius);
  background: var(--surface-soft);
}
.student-import-requirements strong { display: block; margin-bottom: .25rem; font-size: var(--text-small); }
.student-import-requirements p { margin: 0; color: var(--muted); font-size: var(--text-small); line-height: 1.45; }
.student-import-upload { display: grid; gap: .75rem; }
.student-import-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.student-import-dropzone {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 1.25rem;
  text-align: center;
  cursor: pointer;
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
  transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.student-import-dropzone:hover,
.student-import-dropzone--dragging,
.student-import-file-input:focus-visible + .student-import-dropzone { border-color: var(--brand); background: var(--brand-light); }
.student-import-dropzone--dragging { transform: scale(1.01); }
.student-import-dropzone--selected { border-style: solid; border-color: var(--brand); }
.student-import-dropzone__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: .5rem;
  color: var(--brand);
  font-size: var(--text-title);
  font-weight: 700;
  border-radius: 50%;
  background: var(--brand-light);
}
.student-import-dropzone__prompt { color: var(--brand); font-size: var(--text-body); font-weight: 750; }
.student-import-dropzone__hint { margin-top: .25rem; color: var(--muted); font-size: var(--text-small); }
.student-import-dropzone__file { margin-top: .75rem; color: var(--ink); font-size: var(--text-small); font-weight: 700; overflow-wrap: anywhere; }
.student-import-dropzone__file:empty { display: none; }
.student-import-submit { justify-content: center; width: 100%; }
.student-import-submit:disabled { opacity: .5; cursor: not-allowed; }
.student-import-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 180px)); gap: .75rem; margin-bottom: 1rem; }
.student-import-summary__item { padding: .75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.student-import-summary__item strong { display: block; font-size: var(--text-title); line-height: 1; }
.student-import-summary__item span { color: var(--muted); font-size: var(--text-label); }
.student-import-summary__item--valid strong { color: var(--success); }
.student-import-summary__item--invalid strong { color: var(--danger); }
.student-import-row--invalid { background: var(--danger-bg); }
.student-import-preview {
  display: grid;
  gap: 1rem;
}
.student-import-table-wrap {
  min-width: 0;
  overflow-x: auto;
  border-radius: var(--radius);
}
.student-import-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.student-import-actions form,
.student-import-actions .chart__empty { margin: 0; }

@media (max-width: 640px) {
  .student-import-steps { grid-template-columns: 1fr; }
  .student-import-step small { display: none; }
  .student-import-layout { grid-template-columns: 1fr; }
  .student-import-summary { grid-template-columns: repeat(2, 1fr); }
  .student-import-actions form,
  .student-import-actions .btn { width: 100%; }
}

/* ---------- Settings logo upload ---------- */
.table-wrap { max-width: 100%; overflow-x: auto; }
.permissions-table { min-width: 560px; }
.permissions-table th:not(:first-child),
.permissions-table td { width: 130px; text-align: center; }
.permissions-table input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--brand); }
@media (max-width: 640px) {
  .permissions-table { display: table; }
  .permissions-table thead { display: table-header-group; }
  .permissions-table tbody { display: table-row-group; }
  .permissions-table tr { display: table-row; border: 0; }
  .permissions-table th, .permissions-table td { display: table-cell; padding: .75rem; }
  .permissions-table td:not([data-label]) { display: table-cell; }
}

.logo-field { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.logo-field__preview {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: clip;
}
.logo-field__image { width: 100%; height: 100%; object-fit: contain; }
.logo-field__placeholder { color: var(--muted); font-size: var(--text-display); display: flex; }
.logo-field__controls { flex: 1; min-width: 220px; }
.file-input-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.file-input-row__name { color: var(--muted); font-size: var(--text-small); }
.logo-field__controls input[type="file"]:focus-visible + .file-input-row label {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.copy-field { display: flex; align-items: center; gap: .5rem; }
.copy-field .input { flex: 1; min-width: 0; }

.calendar-subscription-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.calendar-subscription-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-soft);
}
.calendar-subscription-list span { color: var(--muted); font-size: var(--text-small); }


/* ---------- Stepper (counts such as recitation mistakes) ---------- */
.stepper { display: flex; align-items: stretch; max-width: 11rem; }
.stepper__input.input { min-width: 0; text-align: center; font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.stepper__input::-webkit-inner-spin-button,
.stepper__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__button {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  color: var(--muted);
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.stepper__button:hover:not(:disabled) { color: var(--ink); background: var(--surface-soft); }
.stepper__button:disabled { cursor: not-allowed; opacity: .45; }
.stepper__button:focus-visible { position: relative; outline: 2px solid var(--brand); outline-offset: -2px; }
.stepper__button:first-child { border-start-start-radius: var(--radius); border-end-start-radius: var(--radius); border-inline-end: 0; }
.stepper__button:last-child { border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); border-inline-start: 0; }
.stepper:has(.stepper__button:not([hidden])) .stepper__input.input { border-radius: 0; }

/* ---------- Grade choice (qualitative grading) ---------- */
.grade-choice { min-width: 0; margin: 0; padding: 0; border: 0; container-type: inline-size; }
.grade-choice__legend { margin-bottom: .375rem; padding: 0; font-weight: 600; }
.grade-choice__options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
}
.grade-choice__option { position: relative; display: grid; min-width: 0; }
.grade-choice__input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.grade-choice__option span {
  display: grid;
  place-items: center;
  min-height: 40px;
  padding: .375rem .5rem;
  color: var(--muted);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  font-weight: 600;
  text-align: center;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.grade-choice__option:hover span { color: var(--ink); }
.grade-choice__input:checked + span { color: var(--brand-dark); background: var(--surface); box-shadow: var(--shadow-sm); }
.grade-choice__option--none .grade-choice__input:checked + span { color: var(--ink); }
.grade-choice__input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Six choices: one row when they fit, otherwise a balanced 3 x 2 grid so
   no option is left alone on a second row. */
@container (min-width: 40rem) {
  .grade-choice__options { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}