/* ── Reset & base ── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--bg);
}

/* Headings set tighter than running text, in both tracking and leading — the
 * editorial contrast the design language asks for. Sizes and margins stay with
 * the components that own them; this is only the shape of the type. */
h1,
h2,
h3,
h4 {
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

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

a {
  color: inherit;
  text-decoration: none;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.hidden {
  display: none !important;
}

.mono {
  font-family: var(--font-mono);
}

/* ── Icons ── */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon svg {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 1.5;
}

.icon-sm svg {
  width: 1rem;
  height: 1rem;
}

.icon-lg svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ── 12-column grid ── */

.grid {
  display: grid;
  gap: var(--grid-gap);
}

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

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

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

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

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

.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-6 { grid-column: span 6; }
.col-span-8 { grid-column: span 8; }
.col-span-12 { grid-column: span 12; }

.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }

/* ── Buttons ── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px;
  /* 1px. The 2px outline made secondary buttons compete with primary ones for
   * attention; .btn-outline still opts back up to 2px, where the border *is*
   * the button. */
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-surface-elevated),
    0 0 0 4px var(--color-accent);
}

.btn:disabled,
.btn[disabled] {
  opacity: 1;
  background: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
  border-color: var(--btn-disabled-border);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  /* Colour and elevation carry the hover; the button no longer moves. A control
   * that shifts under the pointer is a small aim error waiting to happen, and
   * on a toolbar of them the whole row ripples. */
  box-shadow: var(--shadow-md);
}

.btn-primary:active:not(:disabled) {
  box-shadow: var(--shadow-xs);
}

.btn-secondary {
  background: var(--color-surface-elevated);
  border-color: var(--color-border);
  color: var(--color-text);
  box-shadow: var(--shadow-xs);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-surface-muted);
  border-color: var(--color-border-strong);
}

.btn-accent {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.btn-accent:hover:not(:disabled) {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  box-shadow: var(--shadow-md);
}

.btn-accent:active:not(:disabled) {
  box-shadow: var(--shadow-xs);
}

.btn-outline {
  background: var(--color-surface-elevated);
  border-width: 2px;
  border-style: solid;
  box-shadow: var(--shadow-xs);
}

.btn-outline:hover:not(:disabled) {
  box-shadow: var(--shadow-sm);
}

.btn-outline-primary {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-outline-primary:hover:not(:disabled) {
  background: var(--color-primary-muted);
  border-color: var(--color-primary-hover);
  color: var(--color-primary-hover);
}

.btn-outline-accent {
  border-color: var(--color-accent);
  color: var(--color-accent-hover);
}

.btn-outline-accent:hover:not(:disabled) {
  background: var(--color-accent-muted);
  border-color: var(--color-accent-hover);
  color: var(--color-accent-hover);
}

.btn-outline-success {
  border-color: var(--color-success);
  color: var(--color-success);
}

.btn-outline-success:hover:not(:disabled) {
  background: var(--color-success-muted);
  border-color: var(--color-success);
}

.btn-test {
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
}

.btn-destructive {
  background: var(--color-critical-muted);
  color: var(--color-critical);
  border-color: var(--color-critical-border);
  box-shadow: none;
}

.btn-destructive:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-critical) 14%, var(--color-surface-elevated));
  border-color: var(--color-critical);
  color: var(--color-critical-hover);
  box-shadow: var(--shadow-xs);
  transform: translateY(-1px);
}

.btn-destructive:active:not(:disabled) {
  transform: translateY(0);
  background: color-mix(in srgb, var(--color-critical) 18%, var(--color-surface-elevated));
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  box-shadow: none;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--color-primary-muted);
  color: var(--text);
}

.btn-sm {
  min-height: 36px;
  padding: 8px 14px;
  font-size: var(--text-sm);
}

.btn-block {
  width: 100%;
}

.btn-icon {
  width: 40px;
  min-width: 40px;
  padding: 0;
}

/* ── Forms ── */

.field {
  display: grid;
  gap: var(--label-control-gap, 6px);
  margin-bottom: var(--space-3);
}

.field:last-child {
  margin-bottom: 0;
}

.field label,
.field > span:first-child {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  line-height: 1.3;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--color-input-bg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.field select {
  padding-right: 36px;
}

.field input,
.field select {
  height: 42px;
}

.field textarea {
  padding: 10px 12px;
  min-height: 80px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow:
    0 0 0 2px var(--color-accent-muted),
    0 0 0 4px var(--color-primary-muted);
}

/* ── Select controls (global, Windows-native appearance fix) ── */

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-color: var(--color-input-bg);
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 36px;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

select option {
  background: var(--surface);
  color: var(--text);
}

.field select,
select.input,
.filter-select,
.status-select {
  border-radius: var(--radius-md);
}

.input,
textarea.input {
  width: 100%;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--color-input-bg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input,
select.input {
  height: 42px;
  box-sizing: border-box;
}

textarea.input {
  padding: 10px 12px;
  min-height: 80px;
  resize: vertical;
}

.input:focus,
textarea.input:focus,
select.input:focus {
  outline: none;
  border-color: var(--color-accent);
  /* One accent ring instead of two stacked ones. The second, ink-tinted ring
   * put a 4px grey halo around every focused field — busy, and it muddied the
   * accent it was supposed to reinforce. */
  box-shadow: 0 0 0 3px var(--color-accent-muted);
}

.filter-select {
  min-height: 32px;
  height: 32px;
  padding: 0 32px 0 10px;
  border: 1px solid var(--border);
  background-color: var(--color-input-bg);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text);
}

.filter-select:hover:not(:disabled) {
  border-color: var(--color-neutral-strong);
  background-color: var(--color-border-subtle);
}

.filter-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow:
    0 0 0 2px var(--color-accent-muted),
    0 0 0 4px var(--color-primary-muted);
}

.status-select {
  min-height: 30px;
  height: 30px;
  padding: 0 28px 0 8px;
  border: 1px solid var(--border);
  background-color: var(--color-input-bg);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text);
  border-radius: var(--radius-md);
}

.status-select:hover:not(:disabled) {
  border-color: var(--color-neutral-strong);
  background-color: var(--color-border-subtle);
}

.status-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--color-primary-muted);
}

.form-grid {
  display: grid;
  gap: var(--space-3);
  align-items: start;
  box-sizing: border-box;
}

.form-grid--2,
.form-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--label-control-gap, 6px);
  min-width: 0;
  box-sizing: border-box;
}

.radio-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text);
}

.form-field .radio-row + .radio-row {
  margin-top: 8px;
}

.radio-row:has(input:checked) {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.radio-row input {
  margin-top: 2px;
  flex-shrink: 0;
}

.form-field > label,
.form-field > span:first-child:not(.form-hint) {
  display: block;
  margin: 0;
  height: auto;
  min-height: 0;
  line-height: 1.3;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-muted);
}

.form-field .input,
.form-field select,
.form-field textarea.input {
  width: 100%;
  box-sizing: border-box;
}

.form-field .input:not(textarea),
.form-field select {
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  padding: 0 12px;
  border-width: 1px;
}

.form-row-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.form-row-inline .input,
.form-row-inline select {
  flex: 1;
  min-width: 0;
  height: 42px;
}

.form-row-inline .btn {
  flex-shrink: 0;
  height: 42px;
  align-self: center;
}

.form-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  margin-top: var(--space-2);
  cursor: pointer;
}

.form-checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--primary);
}

.form-checkbox-row label,
.form-checkbox-row > span {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  line-height: 1.4;
  cursor: pointer;
}

.form-hint {
  display: block;
  margin: 0;
  min-height: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.form-hint--empty {
  display: none;
}

/* A value the tutor cannot edit, sitting where an input would (the platform LLM
   provider/model — chosen by the super-admin). Matches the input's vertical
   rhythm so a mixed form does not look ragged, without looking clickable. */
.form-static {
  margin: 0;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--text);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}

.ai-config-test-actions,
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
}

.ai-config-section .ai-config-test-actions {
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
}

.ai-config-test-actions .btn,
.form-actions .btn {
  height: 42px;
  flex-shrink: 0;
}

.settings-section-card {
  padding: var(--panel-gap) var(--panel-pad-y);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.settings-section-card + .settings-section-card,
.settings-section-card + .ai-config-section,
.ai-config-section + .settings-section-card,
.ai-config-section + .ai-config-section {
  margin-top: var(--space-3);
}

.settings-section-card h4,
.ai-config-section h4 {
  margin: 0 0 8px;
  padding-bottom: 0;
  border-bottom: none;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.settings-section-card .section-desc {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.field-span-2,
.form-field-span-2 {
  grid-column: span 2;
}

/* Legacy .field cells inside grids align like .form-field */
.form-grid > .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0;
  min-width: 0;
}

.form-grid > .field > label {
  display: flex;
  align-items: flex-end;
  height: 2.75rem;
  min-height: 2.75rem;
  line-height: 1.25;
  overflow: hidden;
}

.form-grid > .field .input,
.form-grid > .field input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.form-grid > .field select,
.form-grid > .field textarea.input {
  width: 100%;
  box-sizing: border-box;
}

.form-grid > .field input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.form-grid > .field select {
  height: 42px;
}

.form-section {
  margin-bottom: var(--space-4);
}

.form-section:last-child {
  margin-bottom: 0;
}

.form-section h4 {
  margin: 0 0 14px;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--primary);
}

.form-note {
  margin: 12px 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.attendance-panel > .form-note {
  margin: var(--panel-gap) var(--panel-pad-x) 0;
}

.checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.checkbox-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  cursor: pointer;
  background: var(--surface);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.checkbox-chip:hover {
  border-color: var(--color-neutral-strong);
  background: var(--color-border-subtle);
}

.checkbox-chip input {
  margin: 0;
  accent-color: var(--primary);
}

/* `.field` is a grid and `.field input` forces width:100%/height:42px on every
   control it contains. Inside a chip that stretched the border across the whole
   row and blew the checkbox up into an empty square; on a colour swatch it made
   a full-width bar. Toggles and swatches keep their native box. */
.field > .checkbox-chip,
.field > .row-color-field {
  justify-self: start;
  width: auto;
  max-width: 100%;
}

.field input[type="checkbox"],
.field input[type="radio"] {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  flex: 0 0 auto;
}

.field .row-color-input[type="color"] {
  width: 48px;
  height: 32px;
  padding: 2px;
  flex: 0 0 auto;
}

/* ── Alerts ── */

.alert {
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}

.alert-error {
  background: var(--color-critical-muted);
  border: 1px solid var(--color-critical-border);
  color: var(--critical);
}

/* ── Badges ── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  background: var(--neutral);
  color: var(--text-secondary);
}

.badge-success {
  background: var(--color-success-muted);
  color: var(--success);
}

.badge-warning {
  background: var(--color-warning-muted);
  color: var(--color-warning);
}

.badge-critical {
  background: var(--color-critical-muted);
  color: var(--critical);
}

.badge-primary {
  background: var(--color-primary-muted);
  color: var(--primary);
}

/* ── Login ── */

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-3);
  background:
    radial-gradient(ellipse 80% 50% at 100% 0%, var(--color-primary-muted), transparent 50%),
    radial-gradient(ellipse 60% 40% at 0% 100%, var(--color-accent-muted), transparent 45%),
    var(--bg);
}

.login-shell {
  width: min(1040px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) min(440px, 100%);
  gap: clamp(20px, 4vw, 52px);
  align-items: center;
}

.login-landing {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}
.login-landing .landing-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: var(--text-md);
}
.login-landing .login-brand-mark { margin: 0; }
.login-landing .overline {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 6px;
}
.login-landing h1 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
}
.login-landing .landing-lede {
  color: var(--text-muted);
  font-size: var(--text-base);
  line-height: 1.55;
  max-width: 46ch;
  margin: 0;
}
/* Feature cards, same shape as Library Core's .landing-features. */
.landing-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.landing-feature {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  background: var(--surface);
  padding: 13px 14px;
}
.landing-feature:hover { border-color: var(--border-strong, var(--border)); }
.landing-feature .lf-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--color-accent-muted, var(--bg));
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}
.landing-feature .lf-icon svg { width: 15px; height: 15px; }
.landing-feature strong { display: block; font-size: var(--text-sm); color: var(--ink); }
.landing-feature small {
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}
.login-landing .landing-news h2 {
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.login-landing .news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.login-landing .news-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.login-landing .news-list strong { font-size: var(--text-sm); }
.login-landing .news-list small {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.4;
  margin-top: 2px;
}
.login-landing .news-tag {
  min-width: 34px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.login-landing .news-tag-new { background: var(--accent); border-color: var(--accent); color: #fff; }
.login-landing .news-tag-ai { background: var(--color-accent-muted); border-color: transparent; color: var(--color-accent-hover); }

@media (max-width: 900px) {
  .login-shell { grid-template-columns: min(440px, 100%); justify-content: center; }
  .login-landing { display: none; }
}

.login-card {
  width: min(440px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
}

.login-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
  pointer-events: none;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.login-brand-mark {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  color: var(--color-text-inverse);
  display: grid;
  place-items: center;
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(224, 123, 48, 0.25);
}

.login-brand h1 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text);
}

.login-brand p {
  margin: 4px 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.login-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: var(--space-3);
  background: var(--color-border-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.login-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  text-align: center;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.login-tab:hover {
  color: var(--text);
}

.login-tab.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-xs);
}

.login-layout {
  display: grid;
  grid-template-columns: minmax(320px, 440px) minmax(280px, 380px);
  gap: var(--space-3);
  width: min(880px, 100%);
  align-items: start;
}

.login-card {
  width: 100%;
}

.login-card--solo {
  width: min(440px, 100%);
}

.login-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: var(--space-2);
}

.login-mode-btn {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--color-border-subtle);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.login-mode-btn:hover {
  color: var(--text);
  border-color: var(--color-primary-muted);
}

.login-mode-btn.active {
  background: var(--surface);
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: var(--shadow-xs);
}

.login-hint {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.login-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.login-footer-sep {
  opacity: 0.5;
}

.login-footer-email,
.login-footer-help {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.login-footer-email:hover,
.login-footer-help:hover {
  color: var(--accent);
}

.login-instructions {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-3) var(--space-4);
}

.login-instructions h2 {
  margin: 0 0 12px;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text);
}

.login-instructions-list {
  margin: 0;
  padding-left: 18px;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.login-instructions-list li {
  margin-bottom: 8px;
}

.login-instructions-list li:last-child {
  margin-bottom: 0;
}

.login-instructions-list code {
  font-size: var(--text-xs);
  background: var(--color-border-subtle);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}

.cabinet-card {
  width: min(520px, 100%);
}

.cabinet-hw-list {
  display: grid;
  gap: 16px;
}

.cabinet-hw-preview {
  margin: 8px 0 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--color-border-subtle);
}

.cabinet-hw-header-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.homework-sections {
  display: grid;
  gap: var(--space-4);
}

.homework-section-title {
  margin: 0 0 12px;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
}

/* Issued homework grouped under the trajectory node it belongs to. */
.homework-node-group { margin-bottom: 1.25rem; }
.homework-node-group:last-child { margin-bottom: 0; }
.homework-node-title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
  font-size: 0.92rem;
  font-weight: 600;
}
.homework-node-count { font-size: 0.78rem; font-weight: 400; }

.homework-draft-list {
  display: grid;
  gap: 10px;
}

.homework-draft-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.homework-draft-card h4 {
  margin: 0 0 4px;
  font-size: var(--text-sm);
}

.homework-draft-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.homework-advanced {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
}

/* Choosing how a task is described: a Library block, or text typed here.
   Two panels, one visible — the same shape as the Markdown editor's own
   edit/preview tabs above, so the form has one idiom for "switch view". */
.hw-source-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  margin-bottom: 10px;
  background: var(--color-border-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.hw-source-tab {
  padding: 6px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.hw-source-tab:hover { color: var(--text); }

.hw-source-tab.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-xs);
}

.hw-block-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
}

/* The picker list. Rows rather than a <select>: a teacher chooses by subject
   and grade as much as by title, and those do not fit in an <option>. */
.hw-block-list {
  display: grid;
  gap: 6px;
  max-height: 46vh;
  overflow-y: auto;
  padding-right: 4px;
}

.hw-block-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.hw-block-row:hover {
  border-color: var(--primary);
  background: var(--color-border-subtle);
}

.hw-block-row-title {
  font-weight: var(--font-semibold);
  color: var(--text);
}

.hw-block-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* The chosen block, shown as the student will see it — capped in height so
   confirming a choice does not push the students and the deadline off screen. */
.hw-block-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--surface);
}

.hw-block-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.hw-block-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0;
}

.hw-block-card-body {
  max-height: 320px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.hw-block-card-body img,
.cabinet-hw-preview img,
.hw-block-card-body video,
.cabinet-hw-preview video {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* Media inside a Library block.
   The block arrives as HTML from `shared_core.markdown`, which emits inert
   `.md-resource` placeholders that teaching-block.js fills in — so these
   classes come from the server, not from anything written here. Kept visually
   in step with the Library's own editor.css: the same block has to look like
   the same block on both sides. */
.md-resource {
  margin: var(--space-3) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.md-media-card { display: grid; width: 100%; }

/* A figure the teacher narrowed in the Library keeps that width here — the size
   rides in the tag and the server puts it on the element inline, precisely so
   this app does not need Library's stylesheet to honour it. */
.md-resource.md-sized { max-width: 100%; }

.md-media-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  background: var(--color-border-subtle);
}

.md-media-kind {
  font-size: 10px;
  font-weight: var(--font-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--primary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  background: var(--surface);
  white-space: nowrap;
}

/* The filename gets a line of its own — it is what the bare player used to
   print in white across the video itself. */
.md-media-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-media-external { white-space: nowrap; }

.md-media-player { display: block; width: 100%; border: 0; }
video.md-media-player {
  aspect-ratio: 16 / 9;
  max-height: 60vh;
  background: #111;
  object-fit: contain;
}
audio.md-media-player { padding: var(--space-3); box-sizing: border-box; }

.md-image { margin: var(--space-3) 0; }
.md-image img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-sm); }

@media (max-width: 520px) {
  .md-media-head { grid-template-columns: auto 1fr; row-gap: var(--space-2); }
  .md-media-external { grid-column: 1 / -1; justify-self: start; }
}

.homework-advanced-body {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.student-picker {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  background: var(--color-border-subtle);
}

.student-picker-toolbar {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.student-picker-list {
  display: grid;
  gap: 4px;
  max-height: 220px;
  overflow: auto;
}

.student-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.student-picker-item:hover {
  background: var(--surface);
}

.attachment-list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.attachment-list-item:last-child {
  border-bottom: none;
}

.attachment-list-actions {
  display: flex;
  gap: 8px;
}

.attachment-preview-body {
  min-height: 240px;
}

.attachment-preview-image {
  max-width: 100%;
  max-height: 70vh;
  display: block;
  margin: 0 auto;
  border-radius: var(--radius);
}

.attachment-preview-frame {
  width: 100%;
  min-height: 70vh;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.attachment-preview-text {
  max-height: 70vh;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--color-border-subtle);
  white-space: pre-wrap;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-sm);
}

.empty-state--compact {
  padding: 16px;
}

.cabinet-hw-grade {
  margin-top: 8px;
}

.homework-grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: rgba(34, 139, 87, 0.14);
  color: var(--color-success, #1f7a4f);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: 1.4;
}

.homework-grade-badge--prominent {
  padding: 6px 14px;
  font-size: var(--text-md);
  background: rgba(34, 139, 87, 0.18);
}

.homework-stats-panel .homework-stats-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-1) var(--filter-gap);
  padding: var(--panel-gap) var(--panel-pad-x) var(--panel-pad-y);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.homework-stats-panel .homework-stats-filters .field {
  margin-bottom: 0;
  gap: var(--label-control-gap, 6px);
  min-width: 0;
}

.homework-stats-panel .homework-stats-filters .input,
.homework-stats-panel .homework-stats-filters select {
  width: 100%;
  min-width: 0;
}

.homework-stats-chart-wrap {
  position: relative;
  height: 240px;
  margin: var(--panel-gap) var(--panel-pad-x);
}

.homework-stats-table .table-sort-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: var(--font-semibold);
  cursor: pointer;
  padding: 0;
}

.homework-stats-table .table-sort-btn:hover {
  color: var(--color-primary);
}

.cabinet-hw-preview {
  margin-top: 12px;
}

.cabinet-hw-preview summary {
  cursor: pointer;
  color: var(--color-accent);
  font-weight: 500;
}

.cabinet-hw-preview .markdown-body {
  margin-top: 8px;
  padding: 12px;
  background: var(--color-surface-muted);
  border-radius: var(--radius-md);
}

.editable-attachment-list .editable-attachment-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--color-surface-muted);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
}

.editable-attachment-list .editable-attachment-item .editable-attachment-remove {
  margin-left: auto;
}

/* ── App shell ── */

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

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(var(--ink-rgb), 0.4);
  z-index: var(--z-overlay);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.shell.sidebar-open .sidebar-backdrop {
  display: block;
  opacity: 1;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  padding: var(--space-3) var(--space-2) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: var(--z-sidebar);
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 var(--space-1);
}

.sidebar-brand-mark {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--sidebar-brand-accent) 100%);
  color: var(--color-text-inverse);
  display: grid;
  place-items: center;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(224, 123, 48, 0.25);
}

.sidebar-brand-text strong {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--sidebar-text);
  line-height: var(--leading-tight);
}

.sidebar-brand-text span {
  display: block;
  font-size: var(--text-xs);
  color: var(--sidebar-text-muted);
  margin-top: 2px;
}

.nav {
  display: grid;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  color: var(--sidebar-text);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.nav-link .icon svg {
  color: var(--sidebar-text-muted);
  transition: color var(--transition-fast);
}

.nav-link:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-active-text);
}

.nav-link:hover .icon svg {
  color: var(--sidebar-active-accent);
}

.nav-link.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  box-shadow: inset 3px 0 0 var(--sidebar-active-accent);
}

.nav-link.active .icon svg {
  color: var(--sidebar-active-text);
}

.sidebar-footer {
  margin-top: auto;
  padding: var(--space-2) var(--space-1) 0;
  border-top: 1px solid var(--sidebar-border);
  font-size: var(--text-xs);
  color: var(--sidebar-text-muted);
}

/* ── Account, at the foot of the sidebar ── */

.sidebar-profile {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px;
  padding: var(--space-1) 4px 0;
  border-top: 1px solid var(--sidebar-border);
}

.sidebar-profile-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  border-radius: var(--radius-md);
  color: var(--sidebar-text);
  transition: background var(--transition-fast);
}

.sidebar-profile-main:hover {
  background: var(--sidebar-hover-bg);
}

.sidebar-profile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--sidebar-active-bg);
  color: var(--sidebar-text);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.02em;
}

.sidebar-profile-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.sidebar-profile-text strong {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-profile-text span {
  font-size: var(--text-xs);
  color: var(--sidebar-text-muted);
}

.sidebar-profile-logout {
  color: var(--sidebar-text-muted);
  flex-shrink: 0;
}

.sidebar-profile-logout:hover {
  color: var(--sidebar-text);
  background: var(--sidebar-hover-bg);
}

.sidebar-profile-version {
  grid-column: 1 / -1;
  padding: 0 8px 6px;
  font-size: var(--text-xs);
  color: var(--sidebar-text-muted);
}

/* Collapsed rail: avatar only, centred, with the name and version hidden. */
body.nav-collapsed .sidebar-profile {
  grid-template-columns: 1fr;
  justify-items: center;
}

body.nav-collapsed .sidebar-profile-text,
body.nav-collapsed .sidebar-profile-version {
  display: none;
}

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  height: var(--topbar-height);
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

[data-theme="dark"] .topbar {
  background: var(--color-navy);
  border-bottom-color: var(--sidebar-border);
  box-shadow: none;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.topbar h2 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.notifications-wrap {
  position: relative;
}

.notifications-toggle {
  position: relative;
}

.notifications-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--critical, #c0392b);
  color: #fff;
  font-size: 10px;
  font-weight: var(--font-semibold);
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

.notifications-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: calc(var(--z-topbar, 40) + 5);
  width: min(360px, calc(100vw - 24px));
  max-height: min(420px, 70vh);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.notifications-panel.hidden {
  display: none;
}

.notifications-panel-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.notifications-panel-header h3 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.notifications-panel-body {
  overflow-y: auto;
  padding: 6px;
}

.notifications-empty {
  padding: 20px 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.notifications-empty--error {
  color: var(--critical, #c0392b);
}

.notifications-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.notifications-item:hover,
.notifications-item:focus-visible {
  background: var(--color-primary-muted, color-mix(in srgb, var(--primary) 10%, transparent));
  outline: none;
}

.notifications-item-title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text);
}

.notifications-item-detail {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.35;
}

.shell-controls {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.lang-switch {
  display: flex;
  padding: 2px;
  background: var(--color-border-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.lang-switch-btn {
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.lang-switch-btn:hover {
  color: var(--text);
}

.lang-switch-btn.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-xs);
}

.topbar-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lang-switch {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--color-border-subtle);
}

.lang-btn {
  min-width: 36px;
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}

.lang-btn:hover {
  color: var(--text);
}

.lang-btn.active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: inset 0 -2px 0 var(--color-accent);
}

.theme-toggle .icon svg {
  color: var(--accent);
}

.login-toolbar,
#pm-global-toolbar {
  position: fixed;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
}

[data-theme="light"] .login-toolbar,
[data-theme="light"] #pm-global-toolbar {
  border-color: var(--color-neutral-strong);
  box-shadow: 0 2px 12px rgba(var(--ink-rgb), 0.14);
}

.login-toolbar .theme-toggle,
#pm-global-toolbar .theme-toggle {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

.login-toolbar .theme-toggle:hover:not(:disabled),
#pm-global-toolbar .theme-toggle:hover:not(:disabled) {
  background: var(--color-primary-muted);
  border-color: var(--primary);
  color: var(--primary);
}

.login-toolbar .theme-toggle .icon svg,
#pm-global-toolbar .theme-toggle .icon svg {
  color: var(--primary);
  stroke: var(--primary);
}

.lang-btn:focus-visible,
.theme-toggle:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-surface-elevated),
    0 0 0 4px var(--color-accent);
}

.login-toolbar .lang-btn:not(.active),
#pm-global-toolbar .lang-btn:not(.active) {
  color: var(--text-secondary);
}

.login-docs-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.login-docs-link:hover {
  color: var(--accent);
}

.help-content {
  max-width: 820px;
}

.help-content h3 {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--text-md);
}

.help-content h3:first-child {
  margin-top: 0;
}

.help-content p,
.help-content li {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.help-content ul {
  margin: 0 0 var(--space-2);
  padding-left: 20px;
}

.help-doc-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  margin: var(--space-3) 0 var(--space-1);
  color: var(--text);
  line-height: var(--leading-tight);
}

.markdown-body h1 { font-size: var(--text-xl); }
.markdown-body h2 { font-size: var(--text-lg); border-bottom: 1px solid var(--border); padding-bottom: var(--space-1); }
.markdown-body h3 { font-size: var(--text-md); }

.markdown-body p,
.markdown-body li {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.markdown-body ul,
.markdown-body ol {
  margin: 0 0 var(--space-2);
  padding-left: 20px;
}

.markdown-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-2);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

.markdown-body pre {
  overflow-x: auto;
  padding: var(--space-2);
  background: var(--surface-2);
  border-radius: var(--radius);
  margin: 0 0 var(--space-2);
}

.markdown-body pre code {
  background: none;
  padding: 0;
}

.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
}

.markdown-body th,
.markdown-body td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
}

.markdown-body th {
  background: var(--surface-2);
  color: var(--text);
}

.markdown-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-3) 0;
}

.markdown-body a {
  color: var(--accent);
}

.markdown-body a:hover {
  text-decoration: underline;
}

/* ── Markdown editor (homework modals) ── */

.markdown-editor-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: var(--space-2);
}

.markdown-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.markdown-editor-label {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text);
  margin: 0;
}

.markdown-editor-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--color-border-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.markdown-editor-tab {
  padding: 6px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.markdown-editor-tab:hover {
  color: var(--text);
}

.markdown-editor-tab.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-xs);
}

.markdown-editor-textarea {
  width: 100%;
  min-height: 320px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  resize: vertical;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.markdown-editor-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow:
    0 0 0 2px var(--color-accent-muted),
    0 0 0 4px var(--color-primary-muted);
}

.markdown-editor-textarea[readonly] {
  color: var(--text-muted);
  background: var(--surface-2);
}

.markdown-editor-preview {
  min-height: 320px;
  max-height: 480px;
  overflow: auto;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.markdown-editor-panel.hidden {
  display: none;
}

.markdown-editor-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.markdown-editor-count {
  flex-shrink: 0;
  color: var(--text-muted);
}

.help-standalone .help-panel {
  margin-top: var(--space-2);
  border: none;
  box-shadow: none;
}

.help-standalone .help-panel .panel-header {
  display: none;
}

.sidebar-help-link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--sidebar-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.sidebar-help-link:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text);
}

.sidebar-help-link.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  box-shadow: inset 3px 0 0 var(--sidebar-active-accent);
}

.sidebar-help-link .icon svg {
  width: 1rem;
  height: 1rem;
}

.sidebar-toggle {
  display: none;
}

.nav-collapse-btn {
  display: inline-flex;
}

body.nav-collapsed .shell {
  grid-template-columns: 0 1fr;
}

body.nav-collapsed .sidebar {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  width: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}

body.nav-collapsed .nav-collapse-btn {
  color: var(--accent, var(--color-primary));
}

.content {
  flex: 1;
  padding: var(--panel-pad-x);
  max-width: var(--content-max-width);
  width: 100%;
}

.content > .panel + .panel,
.content > .grid + .panel,
.content > .panel + .grid {
  margin-top: var(--space-3);
}

/* ── Cards & stats ── */

.card,
.stat-card {
  background: var(--surface);
  /* Hairline, not the full border tone: at this radius the shadow already
   * separates the card from the page, and a second visible outline is what
   * made a screen of cards read as a grid of boxes. */
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3);
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}

.stat-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.stat-card:hover,
.card:hover {
  box-shadow: var(--shadow-md);
  /* One pixel, not two. The lift should register as the card catching light,
   * not as it jumping — at -2px a dashboard of cards twitches under the cursor. */
  transform: translateY(-1px);
  border-color: var(--border);
}

[data-theme="dark"] .stat-card {
  background: var(--color-surface-elevated);
}

.stat-card.stat-card-gold .stat-card-icon {
  background: var(--color-accent-muted);
  color: var(--color-accent);
}

.stat-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-primary-muted);
  color: var(--color-primary);
  font-weight: var(--font-bold);
  flex-shrink: 0;
}

.stat-card-icon.accent {
  background: var(--color-accent-muted);
  color: var(--color-accent);
}

.stat-card-icon.critical {
  background: var(--color-critical-muted);
  color: var(--critical);
}

.stat-card-body {
  min-width: 0;
  flex: 1;
}

.card-label,
.stat-card-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.card-value,
.stat-card-value {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  font-family: var(--font-mono);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.card-value.accent,
.stat-card-value.accent {
  color: var(--accent);
}

.card-value.critical,
.stat-card-value.critical {
  color: var(--critical);
}

.stat-card-hint {
  margin-top: 4px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.stat-card-hint.critical {
  color: var(--critical);
}

.stat-card-warn {
  border-color: color-mix(in srgb, var(--critical) 35%, var(--border));
}

.dashboard {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-2);
  align-items: start;
}

.dashboard-finance {
  display: grid;
  gap: var(--space-2);
}

.dashboard-finance-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.stat-card.stat-card-expense .stat-card-value {
  color: var(--critical);
}

.stat-card.stat-card-profit .stat-card-value {
  color: var(--accent);
}

/* ── Dashboard sections ─────────────────────────────────────────── */
.db-section {
  display: grid;
  gap: var(--space-2);
}

.db-section-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.db-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.dashboard-success-grid {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: var(--space-2);
}

.success-leaderboard {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.success-leaderboard-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  /* --surface-muted is not a token this app defines; the name is
   * --color-surface-muted. The row has been rendering with no fill at all. */
  background: var(--color-surface-muted);
}

.success-rank {
  font-weight: 700;
  color: var(--accent);
  font-size: 0.875rem;
}

.success-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.success-meta {
  font-size: 0.75rem;
  white-space: nowrap;
}

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

/* Fixed 4-col grid — no orphans */
.db-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: start;
}

/* Hero stat card — slightly larger padding, stronger accent */
.stat-card-hero {
  padding: 20px;
}

.stat-card-hero .stat-card-icon {
  width: 40px;
  height: 40px;
}

/* Denominator in "5/12" style values */
.stat-card-denom {
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  margin-left: 2px;
}

/* Empty / zero state — muted dash */
.stat-empty {
  color: var(--text-muted);
  font-weight: var(--font-normal);
  font-size: 1em;
  letter-spacing: 0;
}

/* Next-lesson value — slightly smaller for longer strings */
.stat-card-value--next-lesson {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: 1.2;
  font-family: var(--font-sans);
  letter-spacing: 0;
}

/* ── Activity feed widget ────────────────────────────────────────── */
.db-feed-body {
  height: auto !important;
  max-height: var(--chart-height) !important;
  overflow-y: auto;
  padding: var(--space-1) 0;
}

.feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.feed-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
}

.feed-item:last-child {
  border-bottom: none;
}

.feed-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  flex-shrink: 0;
  margin-top: 2px;
}

.feed-icon svg {
  width: 14px;
  height: 14px;
}

.feed-icon--feed-payment {
  background: var(--color-success-muted);
  color: var(--color-success);
}

.feed-icon--feed-lesson {
  background: var(--color-primary-muted);
  color: var(--color-primary);
}

.feed-icon--feed-homework {
  background: var(--color-warning-muted);
  color: var(--color-warning);
}

.feed-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.feed-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-charts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: start;
}

.chart-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  min-width: 0;
}

.chart-widget-wide {
  grid-column: 1 / -1;
}

.chart-widget-header {
  padding: 14px var(--space-2) 10px;
  border-bottom: 1px solid var(--color-border-subtle);
}

.chart-widget-header h3 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text);
  letter-spacing: 0.01em;
}

.chart-widget-body {
  position: relative;
  height: var(--chart-height);
  /* No max-height: it used to be pinned to the same token as `height`, so the
     box could not grow past it — the drag handle below moved and the chart
     stayed 280px. `resize` also needs a non-visible overflow to apply at all. */
  min-height: 160px;
  padding: var(--space-2);
  overflow: hidden;
  resize: vertical;
}

.chart-widget-wide .chart-widget-body {
  height: var(--chart-height-wide);
}

/* The feed is a scrolling list, not a canvas — it keeps its cap and its own
   height, so `resize` would give it a handle that does nothing useful. */
.chart-widget-body.db-feed-body {
  resize: none;
}

/* The browser's own resize grip is two faint hairlines that nobody finds — the
   charts read as fixed-size, which is exactly how this went unnoticed. Draw a
   corner that is visible on hover, over the same spot the native grip occupies
   so it labels the real drag target rather than inventing a second one. */
.chart-widget-body:not(.db-feed-body) {
  --chart-grip: transparent;
}

.chart-widget:hover .chart-widget-body:not(.db-feed-body) {
  --chart-grip: var(--color-border-strong, var(--border));
}

.chart-widget-body:not(.db-feed-body)::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 12px;
  height: 12px;
  pointer-events: none; /* the native grip underneath must stay grabbable */
  background: linear-gradient(
    135deg,
    transparent 0 45%,
    var(--chart-grip) 45% 55%,
    transparent 55% 70%,
    var(--chart-grip) 70% 80%,
    transparent 80%
  );
  transition: background 120ms ease;
}

.chart-widget-body canvas {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
}

.chart-empty {
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  font-size: var(--text-sm);
}

.stack-list {
  display: grid;
  gap: 10px;
  line-height: 1.8;
}

.settings-instructions h4 {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--text-sm);
}

.settings-instructions ul {
  margin: 0 0 var(--space-2);
  padding-left: 1.25rem;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.phase2-col {
  color: var(--text-muted);
  font-style: italic;
}

.stat-card-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.muted {
  color: var(--text-muted);
}

/* ── Panels ── */

.panel {
  background: var(--surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--panel-gap);
  padding: var(--panel-pad-y) var(--panel-pad-x);
  /* Transparent, on a hairline. The filled grey bar was the single most dated
   * element on every screen: it framed each panel as a titled window, which is
   * the desktop-app look the parchment language is trying not to be. The title
   * carries the hierarchy on its own. */
  border-bottom: 1px solid var(--color-border-subtle);
  background: transparent;
}

.panel-header h3 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-tight);
}

.panel-body {
  padding: var(--panel-pad-x);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.panel-body.muted {
  color: var(--text-muted);
}

.panel-body p {
  margin: 0 0 12px;
}

.panel-body p:last-child {
  margin-bottom: 0;
}

/* ── Tables ── */

.table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--color-neutral-strong) var(--color-border-subtle);
}

.panel > .table-wrap {
  margin: var(--panel-gap) var(--panel-pad-x) var(--panel-pad-x);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.table-wrap::-webkit-scrollbar {
  height: 6px;
}

.table-wrap::-webkit-scrollbar-track {
  background: var(--color-border-subtle);
}

.table-wrap::-webkit-scrollbar-thumb {
  background: var(--color-neutral-strong);
  border-radius: var(--radius-full);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 16px 18px;
  text-align: left;
  /* Rows are separated by the faintest line that still separates them. At the
   * full border tone a long table turns into ruled paper and the eye reads the
   * lines instead of the data. */
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--text-base);
  vertical-align: middle;
}

th {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  /* No fill. The header is already distinguished by caps, weight and colour;
   * the grey band on top of that was doing the job three times over. */
  background: transparent;
  border-bottom-color: var(--border);
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:not(.student-row):not(.parent-row):hover td {
  /* Was the ink tint at 8% — heavy enough to read as a selection rather than a
   * hover. The accent wash says "this row, right now" without claiming it. */
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.board-table-wrap {
  max-width: 100%;
  margin: var(--panel-gap) var(--panel-pad-x) var(--panel-pad-x);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--color-neutral-strong) var(--color-border-subtle);
}

.board-table-wrap::-webkit-scrollbar {
  height: 8px;
}

.board-table-wrap::-webkit-scrollbar-track {
  background: var(--color-border-subtle);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.board-table-wrap::-webkit-scrollbar-thumb {
  background: var(--color-neutral-strong);
  border-radius: var(--radius-full);
}

.board-table {
  min-width: 2320px;
  width: max-content;
  border-collapse: collapse;
}

.board-table th,
.board-table td {
  border: 1px solid var(--color-border);
  background: var(--surface);
}

.board-table th {
  background: var(--color-border-subtle);
}

.board-table tbody tr:last-child td {
  border-bottom: 1px solid var(--color-border);
}

.board-table tbody tr:hover td {
  background: var(--color-primary-muted);
}

.parent-board-table {
  min-width: 920px;
}

.parent-row.clickable-row {
  cursor: pointer;
}

.parent-row--marked {
  --row-accent: var(--row-marker, var(--primary));
}

.parent-row--marked td:first-child {
  background: color-mix(in srgb, var(--row-accent) 7%, var(--surface));
  box-shadow: inset 4px 0 0 var(--row-accent);
}

.parent-row--marked:hover td:first-child {
  background: color-mix(in srgb, var(--row-accent) 8%, var(--color-primary-muted));
  box-shadow: inset 4px 0 0 var(--row-accent);
}

.cell-students {
  min-width: 160px;
}

.student-link-chip {
  text-decoration: none;
  color: inherit;
}

.student-link-chip:hover {
  filter: brightness(0.94);
}

.subject-legend-chip--static {
  cursor: default;
}

.subject-legend-chip--static:hover {
  transform: none;
  box-shadow: none;
}

.clickable-row {
  cursor: pointer;
}

.student-row--marked {
  --row-accent: var(--row-marker, var(--primary));
}

.student-row--debt:not(.student-row--marked) {
  --row-accent: var(--critical);
}

.student-row--shortfall:not(.student-row--marked):not(.student-row--debt) {
  --row-accent: var(--critical);
}

.student-row--shortfall-dismissed:not(.student-row--marked):not(.student-row--debt):not(.student-row--shortfall) {
  --row-accent: color-mix(in srgb, var(--critical) 35%, var(--muted));
}

.student-row--external:not(.student-row--marked):not(.student-row--debt):not(.student-row--shortfall) {
  --row-accent: #9333ea;
}

.board-table th:first-child,
.board-table td.student-row-name-cell {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 160px;
  background: var(--surface);
}

.board-table thead th:first-child {
  z-index: 3;
  /* Opaque because it is horizontally sticky and columns scroll under it —
   * but the page's own paper, matching the now-unfilled header row rather than
   * leaving one grey cell floating at the corner of the table. */
  background: var(--surface);
}

.student-row--marked td.student-row-name-cell,
.student-row--debt:not(.student-row--marked) td.student-row-name-cell,
.student-row--shortfall:not(.student-row--marked):not(.student-row--debt) td.student-row-name-cell,
.student-row--shortfall-dismissed:not(.student-row--marked):not(.student-row--debt):not(.student-row--shortfall) td.student-row-name-cell,
.student-row--external:not(.student-row--marked):not(.student-row--debt):not(.student-row--shortfall) td.student-row-name-cell {
  background: color-mix(in srgb, var(--row-accent) 7%, var(--surface));
  box-shadow: inset 4px 0 0 var(--row-accent);
}

.board-table tbody tr.student-row--marked:hover td.student-row-name-cell,
.board-table tbody tr.student-row--debt:not(.student-row--marked):hover td.student-row-name-cell,
.board-table tbody tr.student-row--shortfall:not(.student-row--marked):not(.student-row--debt):hover td.student-row-name-cell,
.board-table tbody tr.student-row--shortfall-dismissed:not(.student-row--marked):not(.student-row--debt):not(.student-row--shortfall):hover td.student-row-name-cell,
.board-table tbody tr.student-row--external:not(.student-row--marked):not(.student-row--debt):not(.student-row--shortfall):hover td.student-row-name-cell {
  background: color-mix(in srgb, var(--row-accent) 8%, var(--color-primary-muted));
  box-shadow: inset 4px 0 0 var(--row-accent);
}

.board-table tbody tr.student-row--shortfall:not(.student-row--marked):not(.student-row--debt) td.cell-planned-week {
  background: color-mix(in srgb, var(--critical) 8%, var(--surface));
  color: var(--critical);
  font-weight: 600;
}

.board-table tbody tr.student-row--debt .cell-balance-wrap,
.board-table tbody tr.student-row .cell-balance-wrap:has(.cell-badge--danger) {
  background: color-mix(in srgb, var(--critical) 6%, var(--surface));
}

.board-table tbody tr.student-row--debt:hover .cell-balance-wrap,
.board-table tbody tr.student-row:hover .cell-balance-wrap:has(.cell-badge--danger) {
  background: color-mix(in srgb, var(--critical) 6%, var(--color-primary-muted));
}

.board-table .cell-badge {
  --badge-mix-base: transparent;
  background: transparent;
  border-color: transparent;
  padding: 0;
}

.board-table .cell-badge--success {
  color: #15803d;
}

.board-table .cell-badge--warning {
  color: #b45309;
}

.board-table .cell-badge--muted,
.board-table .cell-badge--neutral {
  color: var(--text-muted);
}

.board-table .cell-badge--danger {
  color: #b91c1c;
}

.board-table .cell-badge--info {
  color: #1d4ed8;
}

.board-table .cell-badge--accent {
  color: #92400e;
}

.board-table .cell-badge--external {
  color: #7e22ce;
}

.board-table .cell-badge--toned {
  color: color-mix(in srgb, var(--badge-color, var(--primary)) 85%, var(--text));
}

.cell-balance-wrap {
  padding: 0;
  vertical-align: middle;
}

.cell-balance-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 100%;
  padding: 14px 18px;
  box-sizing: border-box;
}

.student-debt-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.student-row-name-cell {
  padding: 0;
  vertical-align: middle;
}

.student-row-name-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  min-height: 100%;
  padding: 14px 18px;
  box-sizing: border-box;
}

.student-row-name {
  min-width: 0;
}

.student-row-color-btn {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
}

.student-row-color-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
  background: transparent;
  z-index: 1;
}

.student-row-color-btn:hover,
.student-row-color-btn:focus-within {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}

.student-row-color-btn:hover .student-row-color-dot,
.student-row-color-btn:focus-within .student-row-color-dot {
  transform: scale(1.08);
}

.student-row-color-dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  border: 2px solid color-mix(in srgb, var(--text-muted) 45%, transparent);
  background:
    linear-gradient(135deg, transparent 46%, color-mix(in srgb, var(--text-muted) 35%, transparent) 46%, color-mix(in srgb, var(--text-muted) 35%, transparent) 54%, transparent 54%),
    conic-gradient(from 0deg, #ef4444, #eab308, #22c55e, #3b82f6, #a855f7, #ef4444);
  transition: transform 0.15s ease;
  pointer-events: none;
}

.student-row-color-btn--set .student-row-color-dot {
  border-color: color-mix(in srgb, var(--text) 18%, transparent);
  background: var(--dot-color, transparent);
}

.student-row-color-hint {
  margin: 0 var(--panel-pad-x) var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.student-color-legend-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 var(--panel-pad-x);
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-border-subtle) 60%, var(--surface));
}

.student-color-legend-bar--prominent {
  margin-top: var(--panel-gap);
  margin-bottom: var(--space-1);
  padding: 12px 16px;
  gap: 12px 16px;
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

.row-color-field {
  display: flex;
  align-items: center;
  gap: 10px;
}

.row-color-input {
  width: 48px;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--surface);
}

.row-color-preview {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--preview-color, transparent);
}

.cell-badge-wrap {
  white-space: nowrap;
}

.cell-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1.4;
  border: 1px solid transparent;
  --badge-mix-base: var(--surface);
}

.cell-badge--success {
  color: #166534;
  background: color-mix(in srgb, #22c55e 16%, var(--badge-mix-base));
  border-color: color-mix(in srgb, #22c55e 35%, var(--border));
}

.cell-badge--warning {
  color: #92400e;
  background: color-mix(in srgb, #f59e0b 18%, var(--badge-mix-base));
  border-color: color-mix(in srgb, #f59e0b 35%, var(--border));
}

.cell-badge--muted,
.cell-badge--neutral {
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text) 6%, var(--badge-mix-base));
  border-color: var(--border);
}

.cell-badge--danger {
  color: #991b1b;
  background: color-mix(in srgb, #ef4444 14%, var(--badge-mix-base));
  border-color: color-mix(in srgb, #ef4444 35%, var(--border));
}

.cell-badge--info {
  color: #1e3a8a;
  background: color-mix(in srgb, #3b82f6 14%, var(--badge-mix-base));
  border-color: color-mix(in srgb, #3b82f6 30%, var(--border));
}

.cell-badge--accent {
  color: #78350f;
  background: color-mix(in srgb, var(--accent, #bf932a) 18%, var(--badge-mix-base));
  border-color: color-mix(in srgb, var(--accent, #bf932a) 40%, var(--border));
}

.cell-badge--external {
  color: #6b21a8;
  background: color-mix(in srgb, #9333ea 16%, var(--badge-mix-base));
  border-color: color-mix(in srgb, #9333ea 35%, var(--border));
}

.cell-badge--toned {
  color: color-mix(in srgb, var(--badge-color, var(--primary)) 85%, var(--text));
  background: color-mix(in srgb, var(--badge-color, var(--primary)) 22%, var(--badge-mix-base));
  border-color: color-mix(in srgb, var(--badge-color, var(--primary)) 45%, var(--border));
}

.cell-balance--danger {
  color: #b91c1c;
  font-weight: var(--font-medium);
}

.cell-balance--success {
  color: #15803d;
  font-weight: var(--font-medium);
}

.cell-balance--neutral {
  color: var(--text-muted);
}

.student-filters,
.students-filters,
.board-filters {
  padding: var(--panel-pad-y) var(--panel-pad-x);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.lessons-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px 16px;
}

.lessons-filters .field {
  margin-bottom: 0;
  min-width: min(240px, 100%);
}

.lessons-filter-meta {
  padding-bottom: 10px;
}

.student-filters-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.student-filters-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
}

.student-filters-toggle:hover {
  background: var(--color-border-subtle);
  color: var(--text);
}

.student-filters-toggle-icon {
  display: inline-flex;
  transition: transform 0.15s ease;
}

.student-filters-toggle[aria-expanded="false"] .student-filters-toggle-icon {
  transform: rotate(-90deg);
}

.student-filter-search-wrap {
  position: relative;
  flex: 1 1 220px;
  min-width: 180px;
}

.student-filter-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  display: inline-flex;
}

.student-filter-search-icon .icon svg,
.student-filter-search-icon svg {
  width: 14px;
  height: 14px;
}

.student-filter-search-input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--color-border-subtle);
  color: var(--text);
  font-size: var(--text-sm);
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.student-filter-search-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--color-primary-muted);
}

.student-filters-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.student-filter-reset {
  flex-shrink: 0;
}

.student-filters-body {
  margin-top: var(--panel-gap);
}

.student-filters-body.is-collapsed {
  display: none;
}

.student-filters-pills {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: end;
  gap: var(--space-1) var(--filter-gap);
}

.student-filters-pill-group {
  display: flex;
  flex-direction: column;
  gap: var(--label-control-gap, 6px);
  min-width: 0;
}

.student-filters-pill-label {
  font-size: 10px;
  font-weight: var(--font-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.student-filters-toggle-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-bottom: 1px;
}

.filter-toggle-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1.3;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.filter-toggle-chip:hover {
  border-color: var(--color-neutral-strong);
  color: var(--text);
}

.filter-toggle-chip[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background: var(--color-primary-muted);
  color: var(--primary);
}

.pill-select {
  position: relative;
  min-width: 120px;
}

.pill-select-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  white-space: nowrap;
  max-width: 180px;
}

.pill-select-trigger:hover {
  border-color: var(--color-neutral-strong);
  background: var(--color-border-subtle);
}

.pill-select-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
  flex-shrink: 0;
}

.pill-select-value {
  overflow: hidden;
  text-overflow: ellipsis;
}

.pill-select-chevron {
  display: inline-flex;
  color: var(--text-muted);
  margin-left: auto;
}

.pill-select-chevron svg {
  width: 12px;
  height: 12px;
}

.pill-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  min-width: 100%;
  max-height: 240px;
  overflow: auto;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(var(--ink-rgb), 0.12));
}

/* ── Searchable variant (student picker) ── */

/* The menu itself stops scrolling so the search box can stay pinned while the
 * list under it moves; without this the field scrolls out of view the moment
 * the tutor starts reading results. */
.pill-select--search .pill-select-menu {
  max-height: none;
  overflow: visible;
  width: max(100%, 260px);
}

.pill-select-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--text-muted);
}

.pill-select-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  color: var(--text);
  font-size: var(--text-sm);
}

.pill-select-options {
  max-height: 240px;
  overflow-y: auto;
}

.pill-select-empty {
  margin: 0;
  padding: 10px;
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}

/* The unselected trigger reads as a prompt, not as a value — the native select
 * gave no way to tell those apart. */
.pill-select-value.is-placeholder {
  color: var(--text-muted);
}

.pill-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  font-size: var(--text-xs);
  text-align: left;
  cursor: pointer;
}

.pill-select-option:hover,
.pill-select-option.is-selected {
  background: var(--color-primary-muted);
}

.pill-select-option-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  flex-shrink: 0;
}

.pill-select-native {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.pill-select-native-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-height: 30px;
  padding: 4px 28px 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--surface);
  background-image: none;
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  max-width: 160px;
}

.pill-select-native-input:hover {
  border-color: var(--color-neutral-strong);
  background: var(--color-border-subtle);
}

.pill-select-native-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  box-shadow: 0 0 0 3px var(--color-primary-muted);
}

.pill-select-chevron-native {
  position: absolute;
  right: 8px;
  pointer-events: none;
}

.student-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

.student-active-filters[hidden] {
  display: none !important;
}

.active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: var(--primary);
  font-size: 11px;
  font-weight: var(--font-medium);
  cursor: pointer;
}

.active-filter-chip:hover {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
}

.active-filter-chip-x {
  font-size: 14px;
  line-height: 1;
  opacity: 0.7;
}

.subject-legend-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 200px;
}

.subject-legend-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  color: var(--primary);
  flex-shrink: 0;
}

.subject-legend-icon svg {
  width: 16px;
  height: 16px;
}

.subject-legend-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.subject-legend-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text);
}

.subject-legend-instruction {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.student-filters-pill-group--subject {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.student-filter-hint {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.subject-assignment-section .form-note {
  margin-top: 0;
  margin-bottom: 12px;
}

.subject-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.subject-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-fast);
}

.subject-picker-chip .subject-chip-dot {
  opacity: 0.45;
  background: var(--chip-color, var(--neutral));
}

.subject-picker-chip:hover {
  border-color: color-mix(in srgb, var(--chip-color, var(--primary)) 40%, var(--border));
  background: color-mix(in srgb, var(--chip-color, var(--neutral)) 8%, var(--surface));
}

.subject-picker-chip.is-selected {
  border-color: color-mix(in srgb, var(--chip-color, var(--primary)) 55%, var(--border));
  background: color-mix(in srgb, var(--chip-color, var(--neutral)) 28%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chip-color, var(--primary)) 20%, transparent);
}

.subject-picker-chip.is-selected .subject-chip-dot {
  opacity: 1;
  background: var(--chip-color, var(--neutral));
}

.subject-picker-selected {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-border-subtle) 50%, var(--surface));
}

.subject-color-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

.subject-color-row-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.subject-color-row-dot {
  background: var(--chip-color, var(--neutral));
}

.subject-color-row-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.subject-row-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-border-subtle) 40%, var(--surface));
  border: 1px dashed var(--border);
}

.subject-row-preview-bar {
  display: block;
  width: 48px;
  height: 10px;
  border-radius: 0;
  background: var(--preview-color, var(--neutral));
  border: 1px solid color-mix(in srgb, var(--preview-color, var(--neutral)) 60%, var(--text));
  flex-shrink: 0;
}

.subject-row-preview-text {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.subject-add-new-btn {
  margin-bottom: 8px;
}

.subject-new-inline {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.pill-select-field {
  width: 100%;
}

.pill-select-field .pill-select-trigger {
  width: 100%;
  justify-content: flex-start;
}

.subject-legend-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.subject-legend-chip {
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--chip-color, var(--neutral)) 45%, var(--border));
  background: color-mix(in srgb, var(--chip-color, var(--neutral)) 20%, var(--surface));
  border-radius: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.subject-legend-chip:hover {
  border-color: color-mix(in srgb, var(--chip-color, var(--neutral)) 55%, var(--border));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--chip-color, var(--neutral)) 20%, transparent);
}

.subject-legend-chip.is-active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chip-color, var(--primary)) 70%, var(--text));
  background: color-mix(in srgb, var(--chip-color, var(--neutral)) 32%, var(--surface));
}

.empty-filter-cell {
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-4) var(--space-2) !important;
}

.subject-option {
  gap: 8px;
}

.subject-color-input {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.link-inline {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: var(--font-medium);
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.link-inline:hover {
  color: var(--color-primary-hover);
}

/* ── Subject chips ── */

.subject-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  margin: 2px 4px 2px 0;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  --chip-mix-base: var(--surface);
  background: color-mix(in srgb, var(--chip-color, var(--neutral)) 28%, var(--chip-mix-base));
  border: 1px solid color-mix(in srgb, var(--chip-color, var(--neutral)) 55%, var(--border));
}

.subject-chip--quick-color {
  cursor: pointer;
}

.subject-chip--quick-color:hover {
  background: color-mix(in srgb, var(--chip-color, var(--neutral)) 38%, var(--surface));
}

.subject-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--chip-color, var(--neutral));
  border: 1px solid color-mix(in srgb, var(--chip-color, var(--neutral)) 70%, var(--text));
  flex-shrink: 0;
}

.subject-color-picker-hidden {
  position: fixed;
  left: 0;
  top: 0;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: none;
}

/* ── Profile & details ── */

.profile-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.profile-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: var(--space-2);
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.profile-tab {
  border: none;
  background: transparent;
  padding: 0.45rem 0.9rem;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
  border-radius: calc(var(--radius-md) - 2px);
  transition: background 0.15s ease, color 0.15s ease;
}

.profile-tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.profile-tab.active {
  background: var(--surface);
  color: var(--primary);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--border);
}

.profile-tab-panel[hidden] {
  display: none !important;
}

.profile-shortfall-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0 var(--panel-pad-x) var(--space-2);
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.profile-shortfall-banner--active {
  border-color: color-mix(in srgb, var(--critical) 45%, var(--border));
  background: color-mix(in srgb, var(--critical) 10%, var(--surface));
  color: var(--critical);
}

.profile-shortfall-banner--dismissed {
  border-color: color-mix(in srgb, var(--critical) 25%, var(--border));
  background: color-mix(in srgb, var(--critical) 5%, var(--surface));
}

.profile-shortfall-banner--ok {
  border-color: color-mix(in srgb, var(--success, #16a34a) 35%, var(--border));
  background: color-mix(in srgb, var(--success, #16a34a) 8%, var(--surface));
}

.profile-shortfall-banner strong {
  display: block;
  margin-bottom: 0.15rem;
}

.profile-shortfall-banner p {
  margin: 0;
  font-size: var(--text-sm);
}

.detail-list {
  margin: 0;
  padding: var(--panel-pad-x);
  display: grid;
  gap: var(--space-2);
}

.detail-list > div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-1);
  font-size: var(--text-base);
}

.detail-list.compact {
  padding: 0;
}

.detail-list dt {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.detail-list dd {
  margin: 0;
}

.plain-list {
  margin: 0;
  padding-left: 18px;
}

.plain-list li {
  margin-bottom: 6px;
}

.plain-list li:last-child {
  margin-bottom: 0;
}

.parent-contact-item {
  list-style: none;
  margin-left: -18px;
  padding-left: 0;
}

.parent-contact-links {
  margin-top: 4px;
  font-size: var(--text-sm);
}

.parent-contact-sep {
  color: var(--text-muted);
}

/* ── Credentials ── */

.credentials-card {
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--color-border-subtle);
}

.credentials-card:last-child {
  margin-bottom: 0;
}

.credentials-card h4 {
  margin: 0 0 12px;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

.credential-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: 8px;
  font-size: var(--text-sm);
}

.credential-row:last-child {
  margin-bottom: 0;
}

.credential-label {
  min-width: 56px;
  color: var(--text-muted);
  font-weight: var(--font-medium);
}

.credential-row code {
  flex: 1;
  min-width: 120px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  word-break: break-all;
}

/* ── Modals ── */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(var(--ink-rgb), 0.45);
  display: grid;
  place-items: center;
  padding: var(--space-4);
  z-index: var(--z-modal);
}

@media (min-width: 769px) {
  .modal-backdrop {
    left: var(--sidebar-width);
  }
}

[data-theme="dark"] .modal-backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.modal {
  width: min(480px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--color-surface-elevated);
  /* A dialog floating over a dimmed page is already separated from it; the
   * visible outline only made the corner radius look doubled. */
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

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

.modal-header,
.modal-footer {
  padding: var(--space-3) var(--space-4);
}

/* Header and footer sit on the same paper as the body, divided by hairlines
 * rather than by fills. The grey bands read as window chrome, which is exactly
 * the desktop-application look this palette is meant to avoid. */
.modal-header {
  border-bottom: 1px solid var(--color-border-subtle);
  background: transparent;
}

.modal-footer {
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
  background: transparent;
}

.modal-body {
  padding: var(--space-4);
  background: var(--color-surface-elevated);
}

.payment-payer-field {
  overflow: visible;
  position: relative;
  z-index: 2;
}

.payment-payer-field select:not(:disabled) {
  cursor: pointer;
  pointer-events: auto;
}

.modal-header h3 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
}

.ai-config-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.ai-config-section {
  margin-top: 0;
}

.ai-config-section:first-of-type {
  margin-top: 0;
}

.ai-config-row-2,
.ai-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
  box-sizing: border-box;
}

.ai-config-modal {
  width: min(760px, 100%);
}

.ai-config-modal .form-grid--2 {
  align-items: start;
}

@supports (grid-template-rows: subgrid) {
  .form-grid--2:has(> .form-field:nth-child(2)):not(:has(> .form-field:nth-child(3))) {
    grid-template-rows: auto 42px auto;
  }

  .form-grid--2:has(> .form-field:nth-child(2)):not(:has(> .form-field:nth-child(3))) > .form-field {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: var(--label-control-gap, 6px);
  }
}

.ai-config-form .form-note {
  margin-top: var(--space-2);
}

.ai-config-form #ai-config-status {
  white-space: pre-wrap;
}

.ai-config-form #ai-config-status.alert-error {
  color: var(--color-danger, #c53030);
}

.ai-config-form .inline-actions {
  margin-top: var(--space-2);
  justify-content: flex-end;
}

.ai-config-modal .modal-footer {
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 10px;
}

.ai-config-modal .modal-footer .btn-primary {
  width: 100%;
}

.ai-config-modal .modal-footer .ai-config-close {
  width: 100%;
}

#settings-ai-panel #settings-ai-status {
  white-space: pre-wrap;
}

#settings-ai-panel .form-field {
  margin-bottom: 0;
}

#settings-ai-panel .form-row-inline {
  height: 42px;
  min-height: 42px;
}

#settings-ai-panel .form-row-inline .btn {
  align-self: center;
}

.settings-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-3);
  padding: 4px;
  background: var(--color-border-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.settings-tab {
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.settings-tab:hover {
  color: var(--text);
}

.settings-tab.active {
  background: var(--color-surface-elevated);
  color: var(--primary);
  font-weight: var(--font-semibold);
  box-shadow: var(--shadow-xs);
}

.study-plan-panel-wrap {
  margin-top: 0;
}

.study-plan-tabs {
  margin-bottom: var(--space-3);
}

.study-plan-filters,
.study-plan-cards-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.study-plan-student-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Per-student trajectory: a thin header (back + student picker) over the
   detail panel, with the vertical tab rail on the RIGHT. There is no student
   card — you arrived here by picking the student, so restating their name,
   subjects and lesson balance next to the program was noise.
   DOM order stays tabs-then-panel (tab order for keyboard/AT follows the
   heading), so the move is `order`, not row-reverse — row-reverse also mirrors
   the flex line and previously left a dead gap in the middle. The panel must
   grow (flex:1) or the tabs float away from the right edge. */
.study-hub {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: stretch;
  padding: var(--panel-pad-y) var(--panel-pad-x);
}

.study-hub-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle, var(--border));
}

.study-hub-body {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: row;
  gap: var(--space-3);
  align-items: flex-start;
}

.study-hub-tabs {
  order: 2;
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.study-hub-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--font-medium, 500);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.study-hub-tab:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--ink);
}

.study-hub-tab.active {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  color: var(--ink);
  font-weight: var(--font-semibold);
  box-shadow: inset 3px 0 0 var(--primary);
}

.study-hub-tab.active .icon { color: var(--primary); }

.study-hub-panel {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* With the rail on the right the panel always takes the slack — shrinking it
   around an empty hint would push the tabs into the middle of the row. The
   hint itself stays narrow (see the rule below) instead. */

/* Empty / short states stay top-left in the detail column — not centered in
   the full remaining viewport width. */
.study-hub-panel > .empty-state {
  margin: 0;
  max-width: 48ch;
  padding: var(--space-2) 0;
  text-align: left;
}

.study-hub-empty p {
  margin: 0 0 var(--space-3);
}

.study-hub-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.study-hub-program {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}

.study-hub-program-stat {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--ink);
  margin: 0;
}

.study-hub-program-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* PROGRAM AS A PATH
   The tab used to be a single "0/6" counter. The program is a sequence of
   topics, so it is drawn as one: a progress header plus a numbered rail whose
   dots fill in as sessions are marked. */
.program-summary {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  padding: var(--space-3);
  background: var(--surface);
  display: grid;
  gap: var(--space-2);
}
.program-summary-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.program-summary-count {
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-semibold);
  color: var(--muted);
}
.program-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--bg);
  overflow: hidden;
}
.program-progress-fill {
  display: block;
  height: 100%;
  background: var(--accent, #c26a34);
  transition: width 0.25s ease;
}
.program-summary-current {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.program-steps {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.program-step {
  display: grid;
  /* rail · body · the per-topic "pin a session" action */
  grid-template-columns: 32px 1fr auto;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
}
/* The connector line lives on the rail, not between rows, so it survives
   rows of different heights. */
.program-step-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.program-step-rail::after {
  content: "";
  flex: 1;
  width: 2px;
  background: var(--border);
  border-radius: 1px;
}
.program-step:last-child .program-step-rail::after { background: transparent; }
.program-step-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  flex: none;
}
.program-step.is-done .program-step-dot {
  background: var(--success, #2f855a);
  border-color: var(--success, #2f855a);
  color: #fff;
}
.program-step.is-active .program-step-dot {
  border-color: var(--accent, #c26a34);
  color: var(--accent, #c26a34);
}
.program-step-body { min-width: 0; }
.program-step-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.program-step-title { font-size: var(--text-sm); }
.program-step.is-done .program-step-title { color: var(--muted); }
.program-step-meta,
.program-step-note {
  margin: 2px 0 0;
  font-size: var(--text-xs);
  color: var(--muted);
}
.study-hub-program-note { font-size: var(--text-xs); margin: 0; }

/* Attendance → what was covered */
.att-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.topic-choice-list {
  display: grid;
  gap: 4px;
  max-height: 46vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  padding: 6px;
}
.topic-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.topic-choice:hover { background: var(--bg); }
.topic-choice input { width: auto; margin-top: 3px; flex: none; }
.topic-choice small { display: block; color: var(--muted); font-size: var(--text-xs); }
.topic-choice.is-done strong { color: var(--muted); }
.topic-choice-flag { margin-top: var(--space-2); padding-left: 0; }

/* Back link from a student's hub to the students list. */
.study-hub-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 8px;
  margin: -2px 0 2px -8px;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--font-medium, 500);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.study-hub-back:hover { background: var(--surface); color: var(--ink); }

/* Vertical tab rail reads as one grouped card. */
.study-hub-tabs {
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  background: var(--surface);
}

/* Students overview: title + explanatory hint. */
.study-hub-overview-header {
  align-items: flex-start;
}
.study-hub-overview-heading h3 { margin: 0; }
.study-hub-overview-hint {
  margin: 4px 0 0;
  font-size: var(--text-sm);
  max-width: 52ch;
}
/* Make overview rows read as openable. */
.study-plan-overview-row { cursor: pointer; }
.study-plan-overview-row:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }

@media (max-width: 720px) {
  .study-hub {
    padding: var(--space-3);
  }
  .study-hub-body {
    flex-direction: column;
    flex-basis: 100%;
  }
  .study-hub-tabs {
    order: 0; /* stacked layout: the tab strip belongs above the content */
    flex-direction: row;
    flex-wrap: wrap;
    flex-basis: auto;
    width: 100%;
  }
  .study-hub-tab {
    width: auto;
  }
}

.study-plan-lesson-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  color: var(--color-primary, var(--accent));
  white-space: nowrap;
}

.study-plan-lesson-link .icon svg {
  width: 14px;
  height: 14px;
}

.study-plan-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.study-plan-name-cell .student-row-color-dot {
  flex-shrink: 0;
}

.study-plan-overview-row {
  cursor: pointer;
}

.study-plan-card-row {
  cursor: grab;
}

.study-plan-card-row.is-dragging {
  opacity: 0.55;
}

.study-plan-card-row:active {
  cursor: grabbing;
}

.panel-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.panel-header .panel-header-actions,
.attendance-toolbar {
  justify-content: flex-end;
  margin-left: auto;
}

.panel-subtitle {
  margin: 4px 0 0;
  font-size: var(--text-sm);
}

.field.field-checkbox,
label.field.field-checkbox,
.ai-config-checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-2);
  margin-bottom: 0;
  cursor: pointer;
}

.field.field-checkbox input[type="checkbox"],
.ai-config-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--primary);
}

.field.field-checkbox > span,
.ai-config-checkbox > span,
.field-checkbox label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  line-height: 1.4;
  cursor: pointer;
}

.modal-backdrop.hidden {
  display: none;
}

/* ── Schema docs ── */

.schema-docs {
  display: grid;
  gap: var(--space-2);
}

.schema-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-2);
  background: var(--color-border-subtle);
}

.schema-section-title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--primary);
  cursor: pointer;
  list-style: none;
}

.schema-section-title::-webkit-details-marker {
  display: none;
}

.schema-section-desc {
  margin: 8px 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.schema-table {
  margin-bottom: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}

.schema-table summary {
  padding: 10px 12px;
  font-size: var(--text-sm);
  cursor: pointer;
  background: var(--surface);
  border-bottom: 1px solid transparent;
}

.schema-table[open] summary {
  border-bottom-color: var(--border);
}

.schema-fields-table th,
.schema-fields-table td {
  padding: 8px 12px;
  font-size: var(--text-sm);
}

/* ── Loading & empty ── */

.loading {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-base);
  padding: var(--space-2);
}

.empty-state {
  padding: var(--space-5) var(--panel-pad-x);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-base);
}

/* ── Attendance calendar ── */

.attendance-panel .attendance-hint {
  margin: 0 var(--panel-pad-x) var(--panel-gap);
}

.attendance-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.attendance-month-label {
  min-width: 10rem;
  text-align: center;
  font-weight: 600;
  font-size: var(--text-base);
}

.attendance-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: var(--space-3);
  padding: 0 var(--panel-pad-x) var(--panel-pad-x);
}

.attendance-calendar {
  min-width: 0;
}

.attendance-weekdays,
.attendance-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--grid-line);
  border: 1px solid var(--grid-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.attendance-weekdays {
  margin-bottom: 1px;
  background: var(--surface-2);
  border: none;
  border-radius: 0;
}

.attendance-weekday {
  padding: var(--space-1);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
}

.attendance-day {
  min-height: 4.5rem;
  padding: var(--space-1);
  background: var(--surface);
  border: none;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: inherit;
  font: inherit;
  transition: background 0.15s ease;
}

.attendance-day:hover {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.attendance-day--other {
  opacity: 0.45;
}

.attendance-day--today {
  box-shadow: inset 0 0 0 2px var(--primary);
}

.attendance-day--selected {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
}

.attendance-day-num {
  font-size: var(--text-sm);
  font-weight: 600;
}

.attendance-day-count {
  align-self: flex-start;
  font-size: var(--text-xs);
  padding: 0.1rem 0.45rem;
  border-radius: 0;
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
  color: var(--primary);
  font-weight: 600;
}

.attendance-empty-month {
  margin-top: var(--space-2);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.attendance-empty-month .link-inline {
  margin-left: 0.35rem;
}

.attendance-day-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--space-2);
  min-height: 12rem;
}

.attendance-day-panel-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
}

.attendance-day-panel-placeholder {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.attendance-lesson-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.attendance-lesson-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-2);
  align-items: start;
}

.attendance-lesson-select {
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  padding-top: 0.2rem;
}

.attendance-lesson-row .attendance-lesson-meta,
.attendance-lesson-row .attendance-lesson-actions {
  grid-column: 2;
}

.attendance-lesson-row--selected {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

.attendance-chip--selected,
.attendance-lesson-block--selected {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}

.attendance-panel--selecting .attendance-chip--busy:not(.attendance-chip--google),
.attendance-panel--selecting .attendance-lesson-block {
  cursor: pointer;
}

.attendance-panel--selecting .attendance-chip--free,
.attendance-panel--selecting .attendance-slot {
  opacity: 0.55;
  pointer-events: none;
}

#attendance-select-mode.active {
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  color: var(--primary);
}

/* --- Перенос занятия long-press-перетаскиванием --- */

body.attendance-drag-active {
  user-select: none;
  -webkit-user-select: none;
  cursor: grabbing;
}

.attendance-lesson-dragging {
  opacity: 0.45;
  filter: grayscale(0.4);
}

.attendance-drop-target {
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--primary) 14%, transparent) !important;
}

.attendance-drag-ghost {
  position: fixed;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.4rem 0.65rem;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border));
  background: var(--surface);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
  pointer-events: none;
  font-size: 0.8rem;
  max-width: 16rem;
}

/* The range readout that follows the pointer while slots are being dragged
 * over. Same chrome as the lesson-move ghost, one line instead of two. */
.attendance-drag-range {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Slots inside the current drag. Deliberately the accent wash rather than a
 * solid fill: the tutor is reading the lessons around the selection to decide
 * where it ends, so the selection must not black out its own column. */
.attendance-slot--selecting {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

.attendance-drag-ghost-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attendance-drag-ghost-time {
  color: var(--primary);
}

.col-check {
  width: 2.25rem;
  text-align: center;
  vertical-align: middle;
}

.attendance-lesson-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: center;
  font-size: var(--text-sm);
}

.attendance-lesson-time {
  font-family: var(--font-mono, monospace);
  color: var(--text-muted);
}

.attendance-lesson-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.attendance-mark-btn.active {
  background: color-mix(in srgb, var(--primary) 20%, var(--surface));
  border-color: var(--primary);
  color: var(--primary);
}

.attendance-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  justify-content: flex-end;
}

.attendance-view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-2);
}

.attendance-view-btn {
  border: none;
  background: transparent;
  padding: 0.35rem 0.75rem;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.attendance-view-btn:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.attendance-view-btn.active {
  background: var(--surface);
  color: var(--primary);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--border);
}

.attendance-range-label {
  min-width: 9rem;
  text-align: center;
  font-weight: 600;
  font-size: var(--text-base);
}

.attendance-main {
  padding: 0 var(--panel-pad-x) var(--panel-pad-x);
  min-width: 0;
}

.attendance-schedule-scroll {
  overflow: auto;
  max-height: calc(100vh - 14rem);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.attendance-schedule-grid {
  display: grid;
  grid-template-columns: 3.5rem repeat(7, minmax(80px, 1fr));
  min-width: 720px;
  width: 100%;
  background: var(--color-border-strong);
  gap: 1px;
}

.attendance-schedule-grid--day {
  grid-template-columns: 3.5rem minmax(280px, 1fr);
  min-width: 420px;
}

.attendance-schedule-corner {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 4;
  background: var(--surface-2);
  border-bottom: 1px solid var(--color-border-strong);
  border-right: 1px solid var(--color-border-strong);
}

.attendance-schedule-dayhead {
  display: block;
  position: sticky;
  top: 0;
  z-index: 3;
  padding: var(--space-1);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border-bottom: 1px solid var(--color-border-strong);
  border-right: 1px solid var(--color-border-strong);
}

.attendance-schedule-dayhead--today {
  color: var(--primary);
  box-shadow: inset 0 -2px 0 var(--primary);
}

.attendance-schedule-dayname {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attendance-time-label {
  position: sticky;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  font-family: var(--font-mono, monospace);
  background: var(--surface-2);
  border-right: 1px solid var(--color-border-strong);
  transform: translateY(-0.35rem);
}

.attendance-slot {
  border: none;
  border-bottom: 1px solid var(--grid-line);
  border-right: 1px solid var(--grid-line);
  background: var(--surface);
  cursor: pointer;
  padding: 0;
  min-height: 0;
  transition: background 0.12s ease;
}

.attendance-slot:hover {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

.attendance-lesson-block {
  position: relative;
  z-index: 2;
  margin: 1px 2px;
  align-self: stretch;
  justify-self: stretch;
  min-height: 0;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.2rem 0.35rem;
  border: 1px solid color-mix(in srgb, var(--lesson-color, var(--primary)) 55%, var(--border));
  border-left: 3px solid var(--lesson-color, var(--primary));
  border-radius: var(--attendance-chip-radius, 10px);
  background: color-mix(in srgb, var(--lesson-color, var(--primary)) 16%, var(--surface));
  color: var(--text);
  font: inherit;
  font-size: 0.68rem;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}

.attendance-lesson-cluster {
  position: relative;
  z-index: 2;
  margin: 1px 2px;
  align-self: stretch;
  justify-self: stretch;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.2rem;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  border-radius: var(--attendance-chip-radius, 10px);
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
  overflow: auto;
  pointer-events: auto;
}

.attendance-lesson-cluster-head {
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0 0.2rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.attendance-lesson-cluster-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 0;
}

.attendance-lesson-block--cluster-item {
  margin: 0;
  width: 100%;
  min-height: 2.4rem;
  flex: 0 0 auto;
}

.attendance-lesson-block-kind {
  font-size: 0.58rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--lesson-color, var(--primary)) 70%, var(--text-muted));
  text-transform: uppercase;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attendance-lesson-block:hover {
  box-shadow: 0 2px 6px color-mix(in srgb, var(--text) 14%, transparent);
  z-index: 3;
}

.attendance-lesson-block--wide {
  font-size: var(--text-sm);
  padding: 0.35rem 0.5rem;
}

.attendance-lesson-block-time {
  font-size: 0.62rem;
  color: var(--text-muted);
}

.attendance-lesson-block--wide .attendance-lesson-block-time {
  font-size: var(--text-xs);
}

.attendance-lesson-block-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attendance-lesson-block-subject {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}

.attendance-lesson-block--present {
  border-left-color: var(--success, #16a34a);
}

.attendance-lesson-block--absent {
  opacity: 0.55;
  text-decoration: line-through;
}

.attendance-lesson-block--cancelled {
  opacity: 0.4;
}

.attendance-lesson-block--negative {
  background: color-mix(in srgb, var(--danger, #dc2626) 18%, var(--surface));
  border-color: color-mix(in srgb, var(--danger, #dc2626) 45%, var(--border));
}

.attendance-lesson-popover {
  position: absolute;
  z-index: 1200;
  width: min(18rem, calc(100vw - 1.5rem));
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.15));
}

.attendance-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  margin-bottom: 0.35rem;
}

.attendance-popover-meta {
  margin: 0 0 0.25rem;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.attendance-popover-balance {
  margin: 0.35rem 0;
  font-size: var(--text-sm);
}

.attendance-popover-balance--negative {
  color: var(--danger, #dc2626);
  font-weight: 600;
}

/* ── Lesson side panel ──
 *
 * Docked rather than modal so the week stays readable beside it — the whole
 * point of moving the lesson out of a dialog. Fixed rather than a third grid
 * column because .shell is re-rendered on every navigation and the panel has to
 * outlive a grid refresh; .main gets the matching padding so nothing hides
 * underneath. */

:root {
  --lesson-panel-width: 380px;
}

.attendance-side-panel {
  position: fixed;
  top: var(--topbar-height);
  right: 0;
  bottom: 0;
  width: var(--lesson-panel-width);
  display: flex;
  flex-direction: column;
  background: var(--color-surface-elevated);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-overlay);
}

body.attendance-panel-open .main {
  padding-right: var(--lesson-panel-width);
}

.attendance-side-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-2) var(--space-1);
  border-bottom: 1px solid var(--color-border-subtle);
}

.attendance-side-panel-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.attendance-side-panel-title strong {
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
}

.attendance-side-panel-subject {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.attendance-side-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.attendance-side-panel-status {
  margin: 0;
}

.attendance-side-panel-facts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.attendance-side-panel-facts > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.attendance-side-panel-facts dt {
  color: var(--text-muted);
  flex-shrink: 0;
}

.attendance-side-panel-facts dd {
  margin: 0;
  font-size: var(--text-sm);
}

.attendance-side-panel-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.attendance-side-panel-section h4 {
  margin: 0 0 6px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.attendance-side-panel-notes {
  margin: 0;
  font-size: var(--text-sm);
  white-space: pre-wrap;
}

.attendance-side-panel-hw {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding: 8px 0;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border-subtle);
}

.attendance-side-panel-hw:last-child {
  border-bottom: none;
}

.attendance-side-panel-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: var(--space-1) var(--space-2) var(--space-2);
  border-top: 1px solid var(--color-border-subtle);
}

/* Below the width where a docked panel would leave the grid unusable, the
 * panel becomes a full-height sheet and .main stops reserving space for it.
 * openAttendanceLesson also stops choosing the panel at this size — this rule
 * only catches a window resized while one is already open. */
@media (max-width: 1099px) {
  .attendance-side-panel {
    width: min(420px, 100%);
    top: 0;
  }

  body.attendance-panel-open .main {
    padding-right: 0;
  }
}

.attendance-meet {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface-muted);
}

.attendance-meet--empty {
  justify-content: space-between;
}

.attendance-meet-link {
  font-weight: 600;
  color: var(--primary);
}

.attendance-popover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: var(--space-1);
}

/* Chip-style week calendar (vertical day sections) */
.attendance-panel {
  --attendance-chip-radius: 12px;
  --attendance-lesson-bg: color-mix(in srgb, var(--color-primary) 18%, var(--surface));
  --attendance-lesson-bg-hover: color-mix(in srgb, var(--color-primary) 26%, var(--surface));
  --attendance-lesson-border: color-mix(in srgb, var(--color-primary) 48%, var(--border));
  --attendance-lesson-text: var(--color-navy);
  --attendance-lesson-time: var(--color-primary);
  --attendance-free-bg: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-2) 55%, var(--surface)) 0%,
    color-mix(in srgb, var(--surface-2) 30%, var(--surface)) 100%
  );
  --attendance-google-stripe-a: color-mix(in srgb, var(--accent) 20%, var(--surface));
  --attendance-google-stripe-b: color-mix(in srgb, var(--accent) 34%, var(--surface));
  --attendance-google-border: color-mix(in srgb, var(--accent) 50%, var(--border));
  --attendance-google-text: #7c4a03;
}

.attendance-calendar-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--panel-gap);
  padding: var(--panel-pad-y) var(--panel-pad-x);
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
  background: var(--color-surface-muted);
}

.attendance-calendar-header-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--panel-gap);
}

.attendance-calendar-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 700;
}

.attendance-calendar-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin: var(--panel-gap) var(--panel-pad-x) 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.attendance-stat-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.attendance-stat-swatch {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.attendance-stat-swatch--free {
  background: var(--surface);
  border-color: var(--border);
}

.attendance-stat-swatch--lesson {
  background: var(--attendance-lesson-bg);
  border-color: var(--attendance-lesson-border);
}

.attendance-stat-swatch--google {
  background: repeating-linear-gradient(
    -45deg,
    var(--attendance-google-stripe-a),
    var(--attendance-google-stripe-a) 3px,
    var(--attendance-google-stripe-b) 3px,
    var(--attendance-google-stripe-b) 6px
  );
  border-color: var(--attendance-google-border);
}

.attendance-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.1rem;
  margin: var(--panel-gap) var(--panel-pad-x) 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.attendance-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.attendance-legend-swatch {
  flex-shrink: 0;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.attendance-legend-swatch--lesson {
  background: var(--attendance-lesson-bg);
  border-color: var(--attendance-lesson-border);
}

.attendance-legend-swatch--google {
  background: repeating-linear-gradient(
    -45deg,
    var(--attendance-google-stripe-a),
    var(--attendance-google-stripe-a) 3px,
    var(--attendance-google-stripe-b) 3px,
    var(--attendance-google-stripe-b) 6px
  );
  border-color: var(--attendance-google-border);
}

.attendance-legend-swatch--free {
  background: var(--surface);
  border-color: var(--border);
}

.attendance-legend-note {
  flex-basis: 100%;
  font-size: 0.68rem;
  line-height: 1.3;
}

.attendance-chip-week {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.attendance-chip-day {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(var(--ink-rgb), 0.04);
}

.attendance-chip-day--today {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent), 0 4px 14px rgba(var(--ink-rgb), 0.08);
}

.attendance-chip-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-2) 90%, var(--surface)) 0%,
    color-mix(in srgb, var(--surface-2) 55%, var(--surface)) 100%
  );
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.attendance-chip-day-title {
  min-width: 0;
}

.attendance-chip-custom-time {
  flex-shrink: 0;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 600;
}

.attendance-day-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-bottom: var(--space-2);
}

.attendance-day-panel-head .attendance-day-panel-title {
  margin: 0;
}

.attendance-day-panel-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.btn-xs {
  padding: 0.2rem 0.45rem;
  font-size: 0.75rem;
  line-height: 1.2;
  border-radius: var(--radius-sm);
}

.attendance-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.25rem, 1fr));
  gap: 0.55rem;
  padding: 0.85rem 1rem 1.1rem;
}

.attendance-chip-stack {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.attendance-chip-stack .attendance-chip {
  width: 100%;
}

.attendance-chip--add {
  min-height: 2rem;
  padding: 0.3rem 0.55rem;
  justify-content: center;
  align-items: center;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  border-style: dashed;
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}

.attendance-chip--add:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
}

.attendance-chip-more {
  font-size: 0.68rem;
  padding: 0 0.15rem;
}

.attendance-chip--slot-group {
  min-height: 2.75rem;
  justify-content: center;
  border-style: solid;
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

.attendance-chip--slot-group:hover {
  background: color-mix(in srgb, var(--primary) 16%, var(--surface));
}

.attendance-slot-lesson-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.attendance-slot-lesson-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.55rem 0.75rem;
  align-items: center;
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.attendance-slot-lesson-row:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  box-shadow: 0 2px 8px rgba(var(--ink-rgb), 0.06);
}

.attendance-slot-lesson-row-main {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.attendance-slot-lesson-row-time {
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.attendance-slot-lesson-row-hint {
  font-size: 0.72rem;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .attendance-slot-lesson-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

.attendance-chip-kind {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.attendance-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.2rem;
  min-height: 3.35rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--attendance-chip-radius);
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.attendance-chip:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  box-shadow: 0 4px 12px rgba(var(--ink-rgb), 0.08);
  transform: translateY(-1px);
}

.attendance-chip-time {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}

.attendance-chip-label {
  font-size: 0.72rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.attendance-chip-label:not(:empty) {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

.attendance-chip-subject {
  color: var(--text-muted);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.attendance-chip-student {
  color: var(--student-color, var(--color-primary));
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.attendance-chip--free {
  color: var(--text-muted);
  background: var(--attendance-free-bg);
  border-color: color-mix(in srgb, var(--border) 90%, var(--surface-2));
}

.attendance-chip--free:hover {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  color: var(--text-muted);
}

.attendance-chip--free .attendance-chip-time {
  color: color-mix(in srgb, var(--text-muted) 85%, var(--text));
  font-weight: 600;
}

.attendance-chip--lesson,
.attendance-chip--busy:not(.attendance-chip--google) {
  --student-color: var(--color-primary);
  border-left: 4px solid var(--student-color);
  background: color-mix(in srgb, var(--student-color) 15%, var(--surface));
  border-color: color-mix(in srgb, var(--student-color) 35%, var(--border));
  color: var(--attendance-lesson-text);
  box-shadow: 0 1px 4px rgba(var(--ink-rgb), 0.08);
}

.attendance-chip--lesson:hover,
.attendance-chip--busy:not(.attendance-chip--google):hover {
  background: color-mix(in srgb, var(--student-color) 22%, var(--surface));
  border-color: color-mix(in srgb, var(--student-color) 48%, var(--border));
}

.attendance-chip--lesson .attendance-chip-time,
.attendance-chip--busy:not(.attendance-chip--google) .attendance-chip-time {
  color: var(--attendance-lesson-time);
}

.attendance-chip--lesson .attendance-chip-label,
.attendance-chip--busy:not(.attendance-chip--google) .attendance-chip-label {
  color: inherit;
  font-weight: inherit;
}

.attendance-chip--lesson.attendance-chip--present,
.attendance-chip--busy:not(.attendance-chip--google).attendance-chip--present {
  background: color-mix(in srgb, var(--success) 16%, color-mix(in srgb, var(--student-color) 15%, var(--surface)));
  border-color: color-mix(in srgb, var(--success) 42%, color-mix(in srgb, var(--student-color) 35%, var(--border)));
  border-left-color: var(--student-color);
}

.attendance-chip--lesson.attendance-chip--present .attendance-chip-time {
  color: color-mix(in srgb, var(--success) 75%, var(--attendance-lesson-text));
}

.attendance-chip--lesson.attendance-chip--present .attendance-chip-subject {
  color: color-mix(in srgb, var(--success) 55%, var(--text-muted));
}

.attendance-chip--lesson.attendance-chip--absent,
.attendance-chip--busy:not(.attendance-chip--google).attendance-chip--absent {
  background: color-mix(in srgb, var(--danger) 14%, color-mix(in srgb, var(--student-color) 15%, var(--surface)));
  border-color: color-mix(in srgb, var(--danger) 38%, color-mix(in srgb, var(--student-color) 35%, var(--border)));
  border-left-color: var(--student-color);
}

.attendance-chip--lesson.attendance-chip--absent .attendance-chip-label {
  text-decoration: none;
  opacity: 1;
}

.attendance-chip--lesson.attendance-chip--absent .attendance-chip-student {
  text-decoration: line-through;
  opacity: 0.8;
}

.attendance-chip--lesson.attendance-chip--cancelled,
.attendance-chip--busy:not(.attendance-chip--google).attendance-chip--cancelled {
  opacity: 0.55;
}

.attendance-chip--continuation.attendance-chip--lesson .attendance-chip-label:empty,
.attendance-chip--continuation.attendance-chip--google .attendance-chip-label:empty {
  visibility: hidden;
}

.attendance-chip--google {
  background: repeating-linear-gradient(
    -45deg,
    var(--attendance-google-stripe-a),
    var(--attendance-google-stripe-a) 6px,
    var(--attendance-google-stripe-b) 6px,
    var(--attendance-google-stripe-b) 12px
  );
  border-color: var(--attendance-google-border);
  color: var(--attendance-google-text);
  cursor: default;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.attendance-chip--google:hover {
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  filter: brightness(0.97);
}

.attendance-chip--google .attendance-chip-time,
.attendance-chip--google .attendance-chip-label {
  color: var(--attendance-google-text);
  font-weight: 600;
}

.attendance-google-block {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.15rem 0.35rem;
  border-radius: var(--attendance-chip-radius);
  border: 1px dashed var(--attendance-google-border);
  background: repeating-linear-gradient(
    -45deg,
    var(--attendance-google-stripe-a),
    var(--attendance-google-stripe-a) 5px,
    var(--attendance-google-stripe-b) 5px,
    var(--attendance-google-stripe-b) 10px
  );
  font-size: 0.68rem;
  line-height: 1.2;
  overflow: hidden;
  text-align: left;
  color: var(--attendance-google-text);
}

.attendance-google-block .attendance-lesson-block-name {
  color: var(--attendance-google-text);
  font-weight: 600;
}

.attendance-slot--lesson {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--surface));
}

.attendance-slot--google {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.attendance-time-label--occupied {
  color: var(--attendance-lesson-time);
  font-weight: 700;
}

[data-theme="dark"] .attendance-panel {
  --attendance-lesson-bg: color-mix(in srgb, var(--color-primary) 14%, var(--surface));
  --attendance-lesson-bg-hover: color-mix(in srgb, var(--color-primary) 22%, var(--surface));
  --attendance-lesson-border: color-mix(in srgb, var(--color-primary) 40%, var(--border));
  --attendance-lesson-text: var(--color-text);
  --attendance-lesson-time: var(--color-accent-hover);
  --attendance-free-bg: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-2) 80%, var(--surface)) 0%,
    color-mix(in srgb, var(--surface-2) 50%, var(--surface)) 100%
  );
  --attendance-google-stripe-a: color-mix(in srgb, var(--accent) 28%, var(--surface));
  --attendance-google-stripe-b: color-mix(in srgb, var(--accent) 42%, var(--surface));
  --attendance-google-border: color-mix(in srgb, var(--accent) 55%, var(--border));
  --attendance-google-text: #F5D78E;
}

[data-theme="dark"] .attendance-chip--google .attendance-chip-time,
[data-theme="dark"] .attendance-chip--google .attendance-chip-label {
  color: var(--attendance-google-text);
}

[data-theme="dark"] .attendance-google-block {
  border-color: var(--attendance-google-border);
  color: var(--attendance-google-text);
}

[data-theme="dark"] .attendance-google-block .attendance-lesson-block-name {
  color: var(--attendance-google-text);
}

[data-theme="dark"] .attendance-slot--lesson {
  background: color-mix(in srgb, var(--color-primary) 28%, var(--surface));
}

[data-theme="dark"] .attendance-slot--google {
  background: color-mix(in srgb, var(--accent) 22%, var(--surface));
}

.attendance-lesson-modal-section {
  margin-bottom: var(--space-2);
}

.attendance-lesson-modal-section h4 {
  margin: 0 0 0.35rem;
  font-size: var(--text-sm);
  font-weight: 600;
}

.attendance-lesson-modal-summary {
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  font-size: var(--text-sm);
  line-height: 1.45;
  white-space: pre-wrap;
}

.attendance-lesson-modal-video {
  margin-top: 0.35rem;
}

.attendance-lesson-modal-video video,
.attendance-video-player {
  width: 100%;
  max-height: 520px;
  border-radius: var(--radius-md);
  background: #000;
  object-fit: contain;
}

.recordings-video-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 72vh;
  border-radius: var(--radius-lg);
  background: #000;
  object-fit: contain;
}

/* Recording detail modal is a media surface — give the player real estate. */
.recordings-detail-modal {
  width: min(1100px, 96vw);
}

.recordings-video-actions {
  margin-top: 0.35rem;
  justify-content: flex-end;
}

/* «Большой формат»: the modal grows to the viewport and the player dominates. */
.recordings-modal-theater {
  width: min(1500px, 98vw);
}

.recordings-modal-theater .recordings-video-player {
  max-height: 84vh;
}

.recordings-panel .recordings-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
  align-items: end;
  gap: var(--space-1) var(--filter-gap);
  padding: var(--panel-gap) var(--panel-pad-x) var(--panel-pad-y);
  margin: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.recordings-panel .recordings-filters .field {
  margin-bottom: 0;
  gap: var(--label-control-gap, 6px);
  min-width: 0;
}

.recordings-panel .recordings-filters .input,
.recordings-panel .recordings-filters select {
  width: 100%;
  min-width: 0;
}

.recordings-filter-search {
  min-width: 0;
}

.recordings-filter-transcript {
  align-self: end;
  padding-bottom: 10px;
  white-space: nowrap;
}

.recordings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
  padding: var(--panel-gap) var(--panel-pad-x) var(--panel-pad-x);
}

.recordings-panel > .empty-state {
  margin: var(--panel-gap) var(--panel-pad-x) var(--panel-pad-x);
  padding: var(--space-5) var(--panel-gap);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

.recordings-panel .recordings-pagination-label,
.recordings-panel > .form-note {
  margin: 0 var(--panel-pad-x) var(--panel-pad-x);
}

.recordings-panel .recordings-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 var(--panel-pad-x) var(--panel-pad-x);
}

.recordings-panel .recordings-pagination .recordings-pagination-label {
  margin: 0;
}

.recording-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.recording-card:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.recording-card-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-muted, var(--surface)));
  color: var(--primary);
}

.recording-card-thumb .icon {
  width: 2rem;
  height: 2rem;
}

.recording-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.recording-card-meta {
  font-size: 0.82rem;
  color: var(--muted);
}

.recording-card-title {
  font-weight: 600;
}

.recording-card-subject {
  color: var(--muted);
  font-size: 0.92rem;
}

.recording-card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.admins-perm-grid {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
}

.assistants-access-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.assistant-access-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.assistants-modules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.35rem 0.75rem;
  margin: 0.35rem 0 0.5rem;
}

.assistant-access-card,
.assistant-grant-form.settings-section-card {
  margin: 0;
  box-shadow: none;
}

.assistant-access-card .inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.admins-perm-grid .btn {
  margin-top: 0.25rem;
}

.recordings-video-wrap {
  margin: var(--space-3) 0;
}

.recordings-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.recordings-pagination-label {
  text-align: center;
}

[data-theme="dark"] .recording-card {
  background: var(--color-surface-elevated);
}

[data-theme="dark"] .attendance-chip--free {
  background: var(--attendance-free-bg);
}

[data-theme="dark"] .attendance-chip-day {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .attendance-chip:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

/* Work schedule settings */
.schedule-settings-form .schedule-settings-times {
  gap: var(--space-2);
}

.schedule-workdays {
  margin-top: 0.5rem;
}

.schedule-workday-chip {
  border-radius: 10px;
  user-select: none;
}

.schedule-workday-chip:has(input:checked) {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

[data-theme="dark"] .panel,
[data-theme="dark"] .chart-widget {
  border-color: var(--color-border-strong);
  background: var(--color-surface-elevated);
}

/* Dark mode drops its header fills too, or the two themes would diverge:
 * light on hairlines, dark still framing every panel and table in a grey band. */
[data-theme="dark"] .panel-header {
  border-bottom-color: var(--border);
}

[data-theme="dark"] th {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .help-content p,
[data-theme="dark"] .help-content li,
[data-theme="dark"] .markdown-body p,
[data-theme="dark"] .markdown-body li {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .assistants-intro {
  background: linear-gradient(180deg, rgba(var(--ink-rgb), 0.22) 0%, transparent 100%);
}

[data-theme="dark"] .assistants-perm-item:hover,
[data-theme="dark"] .assistants-module-item:hover {
  border-color: var(--color-border-strong);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}

[data-theme="dark"] .assistants-avatar {
  background: var(--color-primary-muted);
  color: var(--color-primary);
}

[data-theme="dark"] .attendance-weekdays,
[data-theme="dark"] .attendance-grid {
  background: var(--grid-line);
  border-color: var(--grid-line);
}

[data-theme="dark"] .attendance-weekday,
[data-theme="dark"] .attendance-schedule-corner,
[data-theme="dark"] .attendance-schedule-dayhead,
[data-theme="dark"] .attendance-time-label,
[data-theme="dark"] .attendance-view-toggle {
  background: var(--surface-2);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .attendance-time-label {
  font-size: 0.7rem;
  font-weight: 500;
}

[data-theme="dark"] .attendance-slot {
  border-bottom-color: var(--grid-line);
  border-right-color: var(--grid-line);
}

[data-theme="dark"] .attendance-panel .attendance-hint,
[data-theme="dark"] .attendance-day-panel-placeholder,
[data-theme="dark"] .attendance-empty-month,
[data-theme="dark"] .form-note {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .attendance-lesson-time,
[data-theme="dark"] .attendance-lesson-block-time,
[data-theme="dark"] .attendance-lesson-block-subject,
[data-theme="dark"] .attendance-popover-meta {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .attendance-view-btn {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .attendance-view-btn.active {
  color: var(--color-text);
  background: var(--color-surface-elevated);
}

[data-theme="dark"] .attendance-schedule-scroll {
  border-color: var(--color-border-strong);
}

@media (max-width: 1100px) {
  .homework-stats-panel .homework-stats-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recordings-panel .recordings-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recordings-filter-transcript {
    grid-column: 1 / -1;
    padding-bottom: 0;
  }

  .student-filters-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .student-filters-toggle-chips {
    grid-column: 1 / -1;
  }
}

@media (max-width: 960px) {
  .attendance-layout {
    grid-template-columns: 1fr;
  }

  .homework-stats-panel .homework-stats-filters {
    grid-template-columns: 1fr;
  }
}

/* ── Responsive ── */

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

  .grid-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .db-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .col-span-3,
  .col-span-4 {
    grid-column: span 6;
  }
}

@media (max-width: 768px) {
  .login-layout {
    grid-template-columns: 1fr;
    max-width: 440px;
  }

  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(var(--sidebar-width), 85vw);
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    box-shadow: var(--shadow-lg);
  }

  .shell.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-toggle {
    display: inline-flex;
  }

  /* On mobile the hamburger drives the off-canvas sidebar; the desktop
     collapse toggle is redundant and its grid override would break layout. */
  .nav-collapse-btn {
    display: none;
  }

  body.nav-collapsed .shell {
    grid-template-columns: 1fr;
  }

  .content {
    padding: var(--space-3);
  }

  .topbar {
    padding: 0 var(--space-2);
  }

  .grid-4,
  .grid-6,
  .grid-3,
  .grid-2,
  .grid-12 {
    grid-template-columns: 1fr;
  }

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

  .db-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-charts {
    grid-template-columns: 1fr;
  }

  .chart-widget-body {
    height: 220px;
    max-height: 220px;
  }

  .chart-widget-wide .chart-widget-body {
    height: 220px;
    max-height: 220px;
  }

  .col-span-3,
  .col-span-4,
  .col-span-6,
  .col-span-8,
  .col-span-12 {
    grid-column: span 1;
  }

  .form-grid--2,
  .form-grid-2,
  .field-span-2,
  .form-field-span-2,
  .ai-config-grid,
  .ai-config-row-2,
  .form-grid--3 {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .detail-list > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .panel-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .panel-header .panel-header-actions,
  .attendance-toolbar {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }

  .content {
    padding: var(--space-3);
  }

  :root {
    --panel-pad-x: var(--space-3);
    --panel-pad-y: var(--space-2);
  }

  .student-filters-pills {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .login-card {
    padding: var(--space-3);
  }

  .login-tabs {
    flex-direction: column;
  }
}

/* ═══════════════ Full mobile support ═══════════════ */

/* Never let the page scroll sideways; media and code stay inside their box.
   Only html (not body) gets overflow-x here: setting it on body too makes
   body an explicit scroll container, which breaks position:sticky on the
   sidebar (it starts scrolling away instead of sticking to the viewport). */
html {
  overflow-x: hidden;
}
.main,
.content {
  min-width: 0;
  max-width: 100%;
}
.content img,
.content video {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  /* Topbar wraps instead of overflowing; controls stay reachable. */
  .topbar {
    height: auto;
    min-height: 52px;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-2);
  }
  .topbar-left {
    min-width: 0;
    flex: 1 1 auto;
  }
  .topbar-left h2 {
    font-size: var(--text-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-meta {
    gap: var(--space-1);
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  /* Panel toolbars, filters and pickers become full-width stacks. */
  .panel-toolbar,
  .study-plan-cards-toolbar,
  .study-plan-filters,
  .attendance-toolbar {
    flex-wrap: wrap;
    width: 100%;
    gap: var(--space-2);
  }
  .filter-select,
  .study-plan-student-picker,
  .study-plan-student-picker .filter-select {
    width: 100%;
    flex: 1 1 100%;
  }
  .panel-toolbar .btn,
  .study-plan-cards-toolbar .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Tabs scroll horizontally rather than squashing. */
  .settings-tabs,
  .study-plan-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .settings-tab,
  .study-plan-tabs .settings-tab {
    white-space: nowrap;
  }

  /* Modals: use the screen, stack footer actions as full-width buttons. */
  .modal-backdrop {
    padding: var(--space-2);
    place-items: end center;
  }
  .modal,
  .modal-wide {
    width: 100%;
    max-height: calc(100vh - 24px);
  }
  .modal-footer {
    flex-direction: column-reverse;
    gap: var(--space-2);
  }
  .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }

  /* Comfortable touch targets. */
  .btn {
    min-height: 42px;
  }
  .nav-link {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

@media (max-width: 480px) {
  :root {
    --panel-pad-x: var(--space-2);
  }
  .content {
    padding: var(--space-2);
  }
  .dashboard-stats {
    grid-template-columns: 1fr;
  }
  .db-grid-4 {
    grid-template-columns: 1fr;
  }
  /* Icon-only secondary controls to save width; keep primary text. */
  .topbar-meta .btn-sm span:not(.icon) {
    display: none;
  }
  .modal-header,
  .modal-footer {
    padding: var(--space-2) var(--space-3);
  }
}

/* ── Assistants / admins settings ── */

.assistants-panel {
  overflow: hidden;
}

.assistants-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--panel-pad-y) var(--panel-pad-x);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(var(--ink-rgb), 0.04) 0%, transparent 100%);
}

.assistants-intro-copy h3 {
  margin: 0 0 6px;
}

.assistants-intro-desc {
  margin: 0;
  max-width: 42rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.assistants-readonly-note {
  margin: 0;
  max-width: 18rem;
  text-align: right;
}

.assistants-card {
  padding: var(--panel-gap) var(--panel-pad-x) var(--panel-pad-x);
}

.assistants-error {
  margin: var(--panel-gap) var(--panel-pad-x) 0;
}

.assistants-error-detail {
  margin: 6px 0 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-sm);
  word-break: break-word;
}

.assistants-table th,
.assistants-table td {
  vertical-align: middle;
}

.assistants-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 10rem;
}

.assistants-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 0;
  background: var(--color-primary-muted);
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.assistants-user-name {
  font-weight: var(--font-medium);
}

.badge-you {
  margin-left: 4px;
}

.badge-role {
  background: #F3F4F6;
  color: #374151;
}

.badge-role-super {
  background: #ECFDF5;
  color: #047857;
}

.assistants-actions {
  width: 1%;
  white-space: nowrap;
}

.assistants-action-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.assistants-action-group .btn-icon {
  width: 34px;
  height: 34px;
}

.assistants-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-3);
}

.assistants-empty-icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: var(--color-border-subtle);
  color: var(--text-muted);
}

.assistants-skeleton {
  padding: var(--space-3);
  display: grid;
  gap: var(--space-2);
}

.assistants-skeleton-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

.assistants-skeleton-lines {
  flex: 1;
  display: grid;
  gap: 8px;
}

.skeleton {
  background: linear-gradient(90deg, #ECEFF5 25%, #F7F8FB 50%, #ECEFF5 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
  border-radius: var(--radius);
}

.skeleton-avatar {
  width: 34px;
  height: 34px;
  border-radius: 0;
  flex-shrink: 0;
}

.skeleton-line {
  height: 12px;
}

.skeleton-line-lg {
  width: 55%;
  height: 14px;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.assistants-perm-grid,
.assistants-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.assistants-perm-item,
.assistants-module-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}

.assistants-perm-item:hover,
.assistants-module-item:hover {
  border-color: #C7D2FE;
  background: #F8FAFF;
}

.assistants-perm-item input,
.assistants-module-item input {
  margin-top: 3px;
}

.assistants-perm-copy {
  display: grid;
  gap: 2px;
}

.assistants-perm-title {
  font-weight: var(--font-medium);
}

.assistants-perm-desc {
  font-size: var(--text-sm);
}

.assistants-module-icon {
  display: inline-flex;
  color: var(--text-muted);
}

.assistants-module-item {
  align-items: center;
}

@media (max-width: 768px) {
  .assistants-intro {
    flex-direction: column;
    align-items: stretch;
  }

  .assistants-readonly-note {
    text-align: left;
    max-width: none;
  }
}

.file-upload-zone {
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  background: var(--surface-muted, var(--bg));
}

.file-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.file-upload-label {
  display: block;
  cursor: pointer;
  color: var(--text-muted);
  text-align: center;
  padding: 8px;
}

.file-upload-list {
  margin-top: 8px;
}

.homework-review-submission {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.homework-review-submission-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.homework-review-submission-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-muted);
}

.homework-review-comment,
.homework-review-files-empty {
  margin: 0;
}

.attachment-list .btn-link {
  padding: 0;
  min-height: 0;
  font-size: inherit;
}

.ai-result-box {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--surface-muted, var(--bg));
  white-space: pre-wrap;
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

/* Select/input + action button on one row (settings AI, homework, modals) */
.inline-actions:has(> .field),
.inline-actions:has(> .input:not([type="checkbox"]):not([type="radio"])) {
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
}

.inline-actions > .field {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.inline-actions > .input:not([type="checkbox"]):not([type="radio"]) {
  flex: 1;
  min-width: 0;
}

.inline-actions > .btn,
.inline-actions > .btn-test {
  flex-shrink: 0;
  align-self: center;
  white-space: nowrap;
}

/* Trials booked in Assistent — visually distinct from the teacher's own lessons. */
.trials-panel {
  border-left: 3px solid var(--color-accent, #e07b30);
}
.trials-table .trial-row td {
  background: color-mix(in srgb, var(--color-accent, #e07b30) 6%, transparent);
}
.trials-table .trial-row--converted td {
  background: color-mix(in srgb, var(--success, #22c55e) 8%, transparent);
}

/* Attendance: upcoming sessions are visible but not markable (see the rail
   comment) — dimmed so the rows you can act on read first. */
.att-row-future { opacity: 0.72; }
.att-future-note { font-size: var(--text-xs); }

/* Attendance filters. Counts sit in the chip so "Не отмечены 0" is a visible
   answer rather than an empty table you have to interpret. */
.att-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-2);
}
.chip-filter {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill, 999px);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chip-filter:hover { color: var(--ink); }
.chip-filter.active {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  color: var(--ink);
  font-weight: var(--font-semibold);
}
.chip-filter b { font-variant-numeric: tabular-nums; }

/* A tab that is honestly empty: say so and point at what does work, instead of
   dressing up placeholder data as a feature. */
.study-hub-wip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5, 32px) var(--space-3);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.study-hub-wip h3 { margin: 0; font-size: var(--text-base); }
.study-hub-wip p { margin: 0; max-width: 56ch; font-size: var(--text-sm); }
.study-hub-wip-icon { color: var(--muted); opacity: 0.7; }

/* PROGRAM GRAPH — the trajectory as a chain of topics in program order, each
   showing the session it is pinned to. Colour is the same mastery scale the
   map legend uses. Scrolls sideways rather than wrapping so the order of the
   program stays a single readable line. */
.program-graph {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.program-graph-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}
.program-graph-head .muted { font-size: var(--text-xs); }
/* The nodes are absolutely positioned onto coordinates the layout computed, and
   the SVG underneath draws the edges between those same coordinates. Flow
   layout cannot do this: an edge has to know where both ends are. */
.program-graph-scroll { overflow: auto; padding: 4px 2px 8px; }
.program-graph-surface { position: relative; margin: 0 auto; }
.program-graph-edges { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.program-edge {
  fill: none;
  stroke: var(--border);
  stroke-width: 2;
  stroke-dasharray: 5 4;
}
/* A path already walked is solid; what is still ahead stays dashed. */
.program-edge.is-walked { stroke: var(--success); stroke-dasharray: none; }
.program-graph-edges marker path { fill: var(--border); }
.program-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: center;
}
.program-node-dot {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.program-node:hover .program-node-dot {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}
.program-node:focus-visible { outline: none; }
.program-node:focus-visible .program-node-dot {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.program-node.is-learning .program-node-dot { border-color: var(--accent); color: var(--accent); }
.program-node.is-weak .program-node-dot { border-color: var(--danger); background: var(--danger); color: #fff; }
.program-node.is-known .program-node-dot { border-color: var(--success); color: var(--success); }
.program-node.is-strong .program-node-dot { border-color: var(--success); background: var(--success); color: #fff; }
/* Where the student stands now — a ring wide enough to find at a glance in a
   graph of twenty nodes. */
.program-node.is-current .program-node-dot {
  border-color: var(--primary);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 20%, transparent);
}
.program-node-title {
  font-size: var(--text-xs);
  font-weight: var(--font-medium, 500);
  color: var(--ink);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.program-node:hover .program-node-title { color: var(--primary); }
.program-node-when { font-size: 0.68rem; color: var(--muted); }
.program-node-unlinked { opacity: 0.75; font-style: italic; }
.program-graph-legend { border-top: none; padding-top: 0; }
.program-graph-head { justify-content: space-between; width: 100%; }
.program-graph-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Full-screen graph: a long program never fits the panel column beside the tab
   rail, and seeing the whole path at once is the point of drawing it. */
.graph-fullscreen {
  position: fixed;
  inset: 0;
  /* Was a hardcoded 120, which sits *below* --z-sidebar (200): the sidebar and
     the topbar drew straight through the "full-screen" graph. It is a modal by
     behaviour — it covers the app and Escape closes it — so it takes the modal
     rung of the scale rather than a number of its own. */
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
body.has-graph-fullscreen { overflow: hidden; }
/* The always-on-top theme/lang toolbar is pinned at 9999 and would float over
   the graph. Nothing on it is needed while the graph is open. */
body.has-graph-fullscreen #pm-global-toolbar { display: none; }
.graph-fullscreen-bar {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4, var(--space-3));
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.graph-fullscreen-bar .muted { font-size: var(--text-xs); flex: 1; min-width: 0; }
.graph-fullscreen-bar .btn { align-self: center; }
.graph-fullscreen-body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-4, var(--space-3)); }
.graph-fullscreen-body .program-graph { border: none; background: transparent; padding: 0; }
.graph-fullscreen-body .program-graph-scroll { overflow: visible; }

/* HOMEWORK BLOCK PICKER — Library blocks ranked against the session's topic.
   Collapsed by default: most visits to this tab are to check submitted work,
   and opening it costs a call across a service boundary. */
.hw-suggest {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: var(--space-3);
}
.hw-suggest > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px var(--space-3);
  cursor: pointer;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  list-style: none;
}
.hw-suggest > summary::-webkit-details-marker { display: none; }
.hw-suggest > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--muted);
  transition: transform 0.15s ease;
}
.hw-suggest[open] > summary::after { transform: rotate(180deg); }
.hw-suggest[open] > summary { border-bottom: 1px solid var(--border); }
.hw-suggest-body { padding: var(--space-3); display: grid; gap: var(--space-2); }
.hw-suggest-hint { margin: 0; font-size: var(--text-xs); max-width: 78ch; }
.hw-suggest-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-end;
}
.hw-suggest-field { display: grid; gap: 4px; min-width: 0; }
.hw-suggest-field > span { font-size: var(--text-xs); color: var(--muted); }
.hw-suggest-search { flex: 1 1 180px; }
.hw-suggest-search input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--text-sm);
}
.hw-suggest-context { margin: 0; font-size: var(--text-xs); }
.hw-suggest-results { display: grid; gap: var(--space-2); }
.hw-suggest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hw-suggest-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.hw-suggest-card:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.hw-suggest-main { min-width: 0; display: grid; gap: 5px; }
.hw-suggest-main strong { font-size: var(--text-sm); }
.hw-suggest-facets { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.hw-suggest-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.hw-suggest-tags .chip {
  font-size: 0.68rem;
  padding: 1px 7px;
  border-radius: var(--radius-pill, 999px);
  background: var(--bg2, var(--color-border-subtle));
  color: var(--muted);
}
/* Why this block was suggested. Relevance is lexical, so the matched signals
   are named instead of showing a score that would look more exact than it is. */
.hw-why {
  font-size: 0.68rem;
  padding: 1px 8px;
  border-radius: var(--radius-pill, 999px);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  font-weight: var(--font-medium, 500);
}
.hw-suggest-card .btn { flex: none; }

/* The entry point control: one explicit action instead of hoping the
   attach-time auto-link guessed right. */
.program-anchor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}
.program-anchor-text { min-width: 0; flex: 1 1 260px; }
.program-anchor-text p { margin: 2px 0 0; font-size: var(--text-xs); max-width: 70ch; }
.program-anchor-stat { font-variant-numeric: tabular-nums; }
.program-step-link { align-self: start; white-space: nowrap; }
@media (max-width: 720px) {
  /* No room for a third column — the action drops under the topic body. */
  .program-step { grid-template-columns: 32px 1fr; }
  .program-step-link { grid-column: 2; justify-self: start; }
  .program-node { flex-basis: 112px; }
}
.program-step-lesson { display: inline-flex; align-items: center; gap: 4px; }
.program-step-lesson.is-empty { opacity: 0.75; font-style: italic; }

/* KNOWLEDGE MAP — one dot per program topic, grouped by subject.
   Colour encodes mastery (status + best homework score), the number is the
   position in the program. Deliberately not a force layout: the axis here is
   the program order, and semantic placement would need embeddings nothing
   writes yet. */
.knowledge-map { display: grid; gap: var(--space-3); }
.knowledge-map-hint { margin: 0; font-size: var(--text-xs); max-width: 70ch; }
.knowledge-clusters { display: grid; gap: var(--space-3); }
.knowledge-cluster h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.knowledge-dots { display: flex; flex-wrap: wrap; gap: 8px; }
.knowledge-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  font-weight: var(--font-semibold);
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease;
}
.knowledge-dot:hover { transform: scale(1.12); }
.knowledge-dot.is-untouched { background: var(--bg); }
.knowledge-dot.is-learning {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 3px var(--color-accent-muted, transparent);
}
.knowledge-dot.is-weak { border-color: var(--danger); background: var(--danger); color: #fff; }
.knowledge-dot.is-known { border-color: var(--success); color: var(--success); }
.knowledge-dot.is-strong { border-color: var(--success); background: var(--success); color: #fff; }
.knowledge-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle, var(--border));
  font-size: var(--text-xs);
  color: var(--muted);
}
.knowledge-legend-item { display: inline-flex; align-items: center; gap: 6px; }
/* Legend swatches are decoration — no hit target, no number inside. */
.knowledge-legend-item .knowledge-dot { width: 14px; height: 14px; border-width: 2px; cursor: default; }
.knowledge-legend-item .knowledge-dot:hover { transform: none; }
.knowledge-dot-index { pointer-events: none; }
.knowledge-legend-item b { color: var(--ink); }
/* Flash the program step a knowledge-map dot points at. */
.program-step.is-flash .program-step-body {
  background: var(--color-accent-muted, var(--bg));
  border-radius: 8px;
  transition: background 0.4s ease;
}