/* =============================================
   BLine — Commercial UI
   Palette: Deep Navy + Amber Gold + Clean White
   Type: Syne (display) + DM Sans (body)
   ============================================= */

:root {
  /* Brand */
  --ds-navy:        #0C1E3D;
  --ds-navy-mid:    #1A3461;
  --ds-navy-light:  #2A4A82;
  --ds-amber:       #F59E0B;
  --ds-amber-light: #FCD34D;
  --ds-amber-dark:  #D97706;

  /* Semantic aliases (keep old names for compatibility) */
  --ds-primary:       var(--ds-navy-mid);
  --ds-primary-light: var(--ds-navy-light);
  --ds-primary-dark:  var(--ds-navy);
  --ds-success:       #059669;
  --ds-success-light: #10B981;
  --ds-warning:       #D97706;
  --ds-warning-light: #F59E0B;
  --ds-danger:        #DC2626;
  --ds-danger-light:  #EF4444;

  /* Surface */
  --ds-bg:           #EEF2F9;
  --ds-surface:      #FFFFFF;
  --ds-surface-hover:#F5F8FC;
  --ds-border:       #E2EAF4;
  --ds-border-mid:   #C8D5E8;

  /* Text */
  --ds-text:        #0C1E3D;
  --ds-text-muted:  #566582;
  --ds-text-subtle: #94A3B8;

  /* Shape */
  --ds-radius:    14px;
  --ds-radius-sm: 9px;
  --ds-radius-xs: 6px;

  /* Shadow */
  --ds-shadow:    0 1px 3px rgba(12,30,61,.05), 0 4px 14px rgba(12,30,61,.07);
  --ds-shadow-md: 0 2px 8px rgba(12,30,61,.08), 0 8px 24px rgba(12,30,61,.09);
  --ds-shadow-lg: 0 8px 32px rgba(12,30,61,.15), 0 2px 8px rgba(12,30,61,.06);

  --ds-header-h: 68px;
  --ds-font-display: 'Syne', system-ui, sans-serif;
  --ds-font-body:    'DM Sans', system-ui, sans-serif;
}

/* ── DARK MODE ──────────────────────────────── */
[data-ds-theme="dark"] {
  --ds-navy:        #0C1E3D;
  --ds-navy-mid:    #2A4A82;
  --ds-navy-light:  #3B5FA0;
  --ds-bg:          #0f172a;
  --ds-surface:     #1e293b;
  --ds-surface-hover:#263347;
  --ds-border:      #2d3f5a;
  --ds-border-mid:  #3a5070;
  --ds-text:        #e2e8f0;
  --ds-text-muted:  #94a3b8;
  --ds-text-subtle: #64748b;
  --ds-shadow:      0 1px 3px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.4);
  --ds-shadow-md:   0 2px 8px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.4);
}
[data-ds-theme="dark"] .ds-header          { background: #0c1628; border-bottom-color: #1e3052; }
[data-ds-theme="dark"] .ds-auth-card       { background: #1e293b; border-color: #2d3f5a; }
[data-ds-theme="dark"] .ds-btn-outline      { background: transparent; border-color: var(--ds-border-mid); color: var(--ds-text); }
[data-ds-theme="dark"] .ds-btn-outline:hover{ background: var(--ds-surface-hover); }
[data-ds-theme="dark"] input, [data-ds-theme="dark"] select, [data-ds-theme="dark"] textarea {
  background: #263347; border-color: #2d3f5a; color: var(--ds-text);
}
[data-ds-theme="dark"] .ds-card            { background: var(--ds-surface); border-color: var(--ds-border); }
[data-ds-theme="dark"] .ds-timeline-content { background: var(--ds-surface); }
[data-ds-theme="dark"] .ds-timeline-header  { background: #263347; }
[data-ds-theme="dark"] .ds-skill-group-title { background: #263347; }
[data-ds-theme="dark"] .ds-pupil-hero       { background: var(--ds-surface); }
[data-ds-theme="dark"] .ds-hero-stat        { background: #263347; }
[data-ds-theme="dark"] .ds-comment-pupil    { background: var(--ds-surface); border-color: var(--ds-border); }
[data-ds-theme="dark"] .ds-comment-header   { background: #263347; }
[data-ds-theme="dark"] .ds-mock-card        { background: var(--ds-surface); border-color: var(--ds-border); }
[data-ds-theme="dark"] .ds-mock-card-header { background: #263347; }
[data-ds-theme="dark"] .ds-sidebar-nav a    { color: var(--ds-text-muted); }
[data-ds-theme="dark"] .ds-sidebar-nav a:hover, [data-ds-theme="dark"] .ds-sidebar-nav a.active { background: #263347; color: var(--ds-text); }

/* Dark mode toggle button */
.ds-dark-toggle {
  background: none; border: none; cursor: pointer;
  color: var(--ds-text-muted); padding: 6px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.ds-dark-toggle:hover { background: rgba(255,255,255,.1); color: var(--ds-text); }
.ds-dark-toggle svg   { display: block; }

/* ── MOBILE BOTTOM NAV (pupil only) ─────────── */
.ds-pupil-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--ds-surface);
  border-top: 1px solid var(--ds-border);
  padding: 0; margin: 0;
  box-shadow: 0 -2px 12px rgba(12,30,61,.12);
  grid-template-columns: repeat(4, 1fr);
}
.ds-pupil-bottom-nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 4px 10px;
  font-size: .65rem; font-weight: 600; letter-spacing: .03em;
  color: var(--ds-text-muted); text-decoration: none;
  gap: 3px; transition: color .15s;
}
.ds-pupil-bottom-nav a svg { flex-shrink: 0; }
.ds-pupil-bottom-nav a.active,
.ds-pupil-bottom-nav a:hover { color: var(--ds-amber); }
@media (max-width: 680px) {
  .ds-pupil-bottom-nav { display: grid; }
  /* padding-bottom now set in mobile.css with safe-area-inset support */
}

/* ── CANCEL LESSON ──────────────────────────── */
.ds-upcoming-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--ds-border); gap: 12px;
}
.ds-cancel-lesson-btn {
  background: none; border: 1px solid #fca5a5; color: #dc2626;
  border-radius: var(--ds-radius-xs); padding: 4px 10px;
  font-size: .78rem; font-weight: 600; cursor: pointer; flex-shrink: 0;
  transition: background .15s;
}
.ds-cancel-lesson-btn:hover { background: #fef2f2; }

/* Cancel confirm modal */
.ds-cancel-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 500; display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.ds-cancel-modal {
  background: var(--ds-surface); border-radius: var(--ds-radius);
  padding: 24px; max-width: 420px; width: 100%;
  box-shadow: var(--ds-shadow-lg);
}
.ds-cancel-modal h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--ds-text); }
.ds-cancel-modal p  { margin: 0 0 16px; font-size: .88rem; color: var(--ds-text-muted); }
.ds-cancel-policy-notice {
  background: #fef9c3; border-left: 3px solid #fcd34d;
  padding: 8px 12px; font-size: .82rem; color: #92400e;
  border-radius: 0 var(--ds-radius-xs) var(--ds-radius-xs) 0;
  margin-bottom: 14px;
}
.ds-cancel-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

/* ── READ RECEIPTS ──────────────────────────── */
.ds-msg-read-tick {
  display: inline-block; margin-left: 5px;
  font-size: .72rem; color: var(--ds-amber);
  transition: opacity .2s;
}
.ds-msg-read-tick.unread { color: var(--ds-text-subtle); }


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

.ds-wrap {
  min-height: 100vh;
  padding-bottom: 80px;
  background: var(--ds-bg);
  font-family: var(--ds-font-body);
  color: var(--ds-text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── HEADER (Session 2 — premium light) ─────────────────────── */
.ds-header {
  background: #FFFFFF;
  height: 56px;
  position: sticky; top: 0; z-index: 200;
  border-bottom: 1px solid #E2E8F0;
  box-shadow: 0 1px 0 rgba(15,23,42,.02);
}
.ds-header-inner {
  max-width: 1400px; margin: 0 auto; height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; gap: 16px;
}
.ds-header-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0;
  min-width: 0;
}
.ds-header-logo-img {
  height: 32px !important;
  max-height: 32px !important;
  width: auto !important;
  max-width: 120px !important;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}
.ds-logo-icon {
  width: 32px !important; height: 32px !important;
  min-width: 32px !important; max-width: 32px !important;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: #fff;
  border-radius: 8px;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0;
  overflow: hidden;
}
.ds-logo-icon svg { width: 18px; height: 18px; }
.ds-brand-text { min-width: 0; }
.ds-brand-name {
  font-family: 'Syne', 'DM Sans', sans-serif;
  font-size: 1rem; font-weight: 700;
  color: #0F172A;
  letter-spacing: -.01em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-header-actions {
  display: flex; align-items: center; gap: 8px;
}

/* ── Avatar menu ──────────────────────────────────────────── */
.ds-header-menu {
  position: relative;
}
.ds-header-menu-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  font-family: inherit;
}
.ds-header-menu-trigger:hover {
  background: #F8FAFC;
  border-color: #E2E8F0;
}
.ds-header-menu.is-open .ds-header-menu-trigger {
  background: #F1F5F9;
  border-color: #E2E8F0;
}
.ds-header-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  border: none;
  object-fit: cover; display: block;
  background: #E2E8F0;
}
.ds-header-avatar-initial {
  display: flex !important;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #fff;
  font-weight: 700;
  font-family: 'Syne', sans-serif;
  font-size: .9rem;
}
.ds-header-menu-name {
  font-size: .85rem;
  font-weight: 600;
  color: #0F172A;
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-header-menu-caret {
  color: #94A3B8;
  transition: transform .15s ease;
}
.ds-header-menu.is-open .ds-header-menu-caret {
  transform: rotate(180deg);
}

/* Dropdown sheet */
.ds-header-menu-sheet {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15,23,42,.12), 0 4px 12px rgba(15,23,42,.06);
  padding: 0;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 250;
  overflow: hidden;
}
.ds-header-menu.is-open .ds-header-menu-sheet {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ds-header-menu-head {
  padding: 14px 16px 12px;
  border-bottom: 1px solid #F1F5F9;
}
.ds-header-menu-name-lg {
  font-family: 'Syne', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.2;
  margin-bottom: 2px;
}
.ds-header-menu-role {
  font-size: .75rem;
  color: #64748B;
  font-weight: 500;
}
.ds-header-menu-items {
  padding: 6px;
}
.ds-header-menu-divider {
  height: 1px;
  background: #F1F5F9;
  margin: 4px 6px;
}
.ds-header-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background .12s ease;
}
.ds-header-menu-item:hover {
  background: #F8FAFC;
  color: #0F172A;
}
.ds-header-menu-item svg {
  color: #64748B;
  flex-shrink: 0;
}
.ds-header-menu-item:hover svg {
  color: #0F172A;
}
.ds-header-menu-footer {
  padding: 6px;
  border-top: 1px solid #F1F5F9;
}
.ds-header-menu-footer .ds-logout,
.ds-header-menu-footer a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: .85rem;
  font-weight: 500;
  color: #DC2626 !important;
  text-decoration: none !important;
  text-align: left;
  box-sizing: border-box;
  transition: background .12s ease;
}
.ds-header-menu-footer .ds-logout:hover,
.ds-header-menu-footer a:hover {
  background: #FEF2F2 !important;
}

/* Hide remnants of the old style still floating around */
.ds-avatar-status { font-size: .7rem; color: #64748B; white-space: nowrap; }
.ds-avatar-camera, .ds-avatar-remove-btn { display: none; }

/* ── NAV TABS ─────────────────────────────────── */
.ds-nav-tabs {
  background: var(--ds-surface);
  border-bottom: 1px solid var(--ds-border);
  display: flex; padding: 0 28px;
  overflow-x: auto; scrollbar-width: none; gap: 2px;
}
.ds-nav-tabs::-webkit-scrollbar { display: none; }
.ds-tab {
  display: flex; align-items: center; gap: 7px;
  padding: 0 16px; height: 52px;
  font-size: .82rem; font-weight: 500;
  color: var(--ds-text-muted); text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap; transition: color .18s, border-color .18s;
}
.ds-tab:hover { color: var(--ds-navy-mid); }
.ds-tab.active { color: var(--ds-navy); border-bottom-color: var(--ds-amber); font-weight: 600; }
.ds-tab svg { opacity: .6; }
.ds-tab.active svg { opacity: 1; }

/* ── CARDS ────────────────────────────────────── */
.ds-card {
  background: var(--ds-surface);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow);
  border: 1px solid var(--ds-border);
  overflow: visible; margin-bottom: 20px;
  transition: box-shadow .2s, transform .2s;
}
.ds-card-full { width: 100%; }
.ds-card-header {
  padding: 14px 20px;
  font-family: var(--ds-font-display);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  border-bottom: 1px solid var(--ds-border);
  display: flex; align-items: center; gap: 8px;
  color: var(--ds-navy);
  background: linear-gradient(180deg, #FAFBFE 0%, var(--ds-surface) 100%);
}
.ds-card-header button, .ds-card-header .ds-btn { margin-left: auto; }
.ds-card-subtitle {
  margin-left: auto; font-size: .74rem; color: var(--ds-text-muted);
  font-weight: 400; font-family: var(--ds-font-body);
  text-transform: none; letter-spacing: 0;
}

/* ── LAYOUT ───────────────────────────────────── */
.ds-content {
  max-width: 1400px; margin: 0 auto; padding: 28px;
  display: grid; grid-template-columns: 300px 1fr;
  gap: 24px; align-items: start;
}
.ds-content-sidebar, .ds-content-main { min-width: 0; }

/* ── BUTTONS ──────────────────────────────────── */
.ds-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-body);
  font-size: .84rem; font-weight: 600;
  cursor: pointer; border: none; text-decoration: none;
  transition: all .18s; line-height: 1.2;
  letter-spacing: -.01em; white-space: nowrap;
}
.ds-btn-primary {
  background: var(--ds-navy-mid); color: white;
  box-shadow: 0 2px 8px rgba(26,52,97,.28);
}
.ds-btn-primary:hover {
  background: var(--ds-navy); color: white;
  box-shadow: 0 4px 14px rgba(12,30,61,.35);
  transform: translateY(-1px);
}
.ds-btn-outline {
  background: transparent; color: var(--ds-navy-mid);
  border: 1.5px solid var(--ds-border-mid);
}
.ds-btn-outline:hover { background: var(--ds-navy-mid); color: white; border-color: var(--ds-navy-mid); }
.ds-btn-danger {
  background: var(--ds-danger-light); color: white;
  box-shadow: 0 2px 6px rgba(239,68,68,.22);
}
.ds-btn-danger:hover { background: var(--ds-danger); }
.ds-btn-sm  { padding: 5px 12px; font-size: .78rem; border-radius: var(--ds-radius-xs); }
.ds-btn-xs  { padding: 3px 9px;  font-size: .72rem; border-radius: 5px; }
.ds-btn-full { width: 100%; justify-content: center; }
.ds-btn-link { background: none; border: none; cursor: pointer; font-size: .8rem; color: var(--ds-navy-mid); padding: 0 4px; font-weight: 500; }
.ds-btn-link.ds-danger { color: var(--ds-danger); }
.ds-logout-btn {
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.14); font-size: .79rem; padding: 7px 14px;
}
.ds-logout-btn:hover { background: rgba(255,255,255,.16); color: white; transform: none; box-shadow: none; }

/* ── FORMS ────────────────────────────────────── */
.ds-form { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.ds-form-group { display: flex; flex-direction: column; gap: 5px; }
.ds-form-group label {
  font-size: .74rem; font-weight: 700; color: var(--ds-text-muted);
  letter-spacing: .04em; text-transform: uppercase;
}
.ds-form-group input, .ds-form-group textarea, .ds-form-group select {
  padding: 10px 14px; border: 1.5px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-body); font-size: .875rem;
  color: var(--ds-text); outline: none;
  transition: border-color .18s, box-shadow .18s;
  background: var(--ds-surface); width: 100%;
}
.ds-form-group input:focus, .ds-form-group textarea:focus, .ds-form-group select:focus {
  border-color: var(--ds-navy-light);
  box-shadow: 0 0 0 3px rgba(42,74,130,.1);
}
.ds-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.ds-form-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }

/* ── AUTH ─────────────────────────────────────── */
.ds-auth-wrap {
  /* Rendered inside the themed site (below the site header), not as a
     standalone full-screen page. Use a comfortable min-height and align the
     panels toward the top so there isn't a tall dark band pushing the boxes
     down beneath the header. */
  min-height: auto;
  background: linear-gradient(150deg, #080F1E 0%, #0C1E3D 50%, #122040 100%);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; position: relative; overflow: hidden;
  border-radius: 18px;
}
.ds-auth-wrap::before {
  content: ''; position: absolute;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(245,158,11,.1) 0%, transparent 65%);
  top: -150px; right: -100px; pointer-events: none;
}
.ds-auth-wrap::after {
  content: ''; position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(42,74,130,.25) 0%, transparent 65%);
  bottom: -100px; left: -100px; pointer-events: none;
}
.ds-auth-card {
  background: white; border-radius: 22px;
  width: 100%; max-width: 440px;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
  overflow: hidden; position: relative; z-index: 1;
}
.ds-auth-logo {
  background: linear-gradient(135deg, var(--ds-navy) 0%, var(--ds-navy-mid) 100%);
  padding: 40px 32px 32px; text-align: center; color: white;
  position: relative; overflow: hidden;
}
.ds-auth-logo::after {
  content: ''; position: absolute;
  width: 220px; height: 220px; border-radius: 50%;
  background: rgba(245,158,11,.08); bottom: -90px; right: -70px;
}
.ds-auth-wordmark {
  font-family: 'Syne', Georgia, serif;
  font-size: 2.4rem; font-weight: 700; letter-spacing: -.02em;
  line-height: 1; margin-bottom: 10px;
  position: relative; z-index: 1;
}
.ds-auth-word-pass  { color: #ffffff; }
.ds-auth-word-track { color: #F59E0B; }
.ds-auth-logo p {
  margin: 0; font-size: .875rem; color: rgba(255,255,255,.6);
  position: relative; z-index: 1;
}
.ds-form-links { text-align: center; font-size: .85rem; }
.ds-form-links a { color: var(--ds-navy-mid); text-decoration: none; font-weight: 600; }
.ds-form-links a:hover { text-decoration: underline; }

/* ── NOTICES ──────────────────────────────────── */
.ds-notice { padding: 12px 16px; border-radius: var(--ds-radius-sm); font-size: .875rem; margin-bottom: 16px; }
.ds-notice-success { background: #F0FDF4; color: #16A34A; border: 1px solid #BBF7D0; }
.ds-notice-error   { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }

/* ── PUPIL LIST ───────────────────────────────── */
.ds-pupil-list { padding: 4px 0; }
.ds-pupil-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; text-decoration: none; color: var(--ds-text);
  transition: background .15s; border-left: 3px solid transparent;
}
.ds-pupil-item:hover { background: var(--ds-surface-hover); }
.ds-pupil-item.active {
  background: linear-gradient(90deg, rgba(26,52,97,.07) 0%, transparent 100%);
  border-left-color: var(--ds-amber);
}
.ds-pupil-avatar {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--ds-navy-mid) 0%, var(--ds-navy-light) 100%);
  color: white; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ds-font-display); font-weight: 700; font-size: .85rem;
  flex-shrink: 0; overflow: hidden;
}
.ds-pupil-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ds-pupil-name { font-weight: 600; font-size: .86rem; }
.ds-pupil-meta { font-size: .72rem; color: var(--ds-text-muted); margin-top: 1px; }

/* ── TRAFFIC LIGHTS ───────────────────────────── */
.ds-traffic-light { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tl-green { background: var(--ds-success-light); box-shadow: 0 0 0 3px rgba(16,185,129,.2); }
.tl-amber { background: var(--ds-warning-light);  box-shadow: 0 0 0 3px rgba(245,158,11,.2); }
.tl-red   { background: var(--ds-danger-light);   box-shadow: 0 0 0 3px rgba(239,68,68,.2); }
.tl-grey  { background: var(--ds-text-subtle); }

/* ── PUPIL DETAIL PANEL ───────────────────────── */
.ds-pupil-detail-header {
  display: flex; align-items: center; gap: 16px; padding: 20px;
  flex-wrap: wrap;
  background: linear-gradient(180deg, #FAFBFE 0%, var(--ds-surface) 100%);
  border-bottom: 1px solid var(--ds-border);
}
.ds-pupil-detail-avatar {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--ds-navy) 0%, var(--ds-navy-mid) 100%);
  color: white; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ds-font-display); font-size: 1.35rem; font-weight: 700;
  flex-shrink: 0; overflow: hidden;
}
.ds-pupil-detail-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.ds-pupil-detail-info { flex: 1; min-width: 180px; }
.ds-pupil-detail-info h2 {
  font-family: var(--ds-font-display); margin: 0 0 5px;
  font-size: 1.15rem; letter-spacing: -.02em;
}
.ds-pupil-detail-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: .78rem; color: var(--ds-text-muted); }
.ds-pupil-detail-badges { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.ds-pupil-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

.ds-badge {
  display: inline-flex; align-items: center;
  background: var(--ds-surface-hover); color: var(--ds-text-muted);
  border: 1px solid var(--ds-border); padding: 3px 10px;
  border-radius: 20px; font-size: .7rem; font-weight: 600; letter-spacing: .02em;
}
.ds-badge-blue { background: rgba(42,74,130,.08); color: var(--ds-navy-mid); border-color: rgba(42,74,130,.2); }

/* ══════════════════════════════════════════════════════════════
   PUPIL DETAIL PANEL — unified layout
   ══════════════════════════════════════════════════════════════ */

/* ── Main 2-col grid (sidebar | lessons) ─────── */
.ds-detail-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}
.ds-detail-left,
.ds-detail-right { min-width: 0; }

/* Sidebar cards stack with uniform gap */
.ds-detail-left { display: flex; flex-direction: column; gap: 16px; }

/* Lessons card stretches to fill right column */
.ds-detail-right .ds-card { height: 100%; }

/* ── Bottom 3-col strip (charts | notes | messages) */
.ds-detail-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}
.ds-detail-bottom > .ds-card { min-width: 0; }

/* ── Mock tests full-width card ──────────────── */
.ds-mock-card-full {
  margin-top: 16px;
}
.ds-mock-outer {
  padding: 0;
}

/* ── Pending requests banner ─────────────────── */
.ds-pending-banner {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: var(--ds-radius);
  padding: 12px 18px;
  margin-top: 16px;
}
.ds-pending-banner-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 700;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 10px;
}
.ds-pending-rows { display: flex; flex-direction: column; gap: 8px; }
.ds-req-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: #fff;
  border-radius: var(--ds-radius-sm);
  border: 1px solid #fde68a;
}
.ds-req-info { font-size: .83rem; color: var(--ds-navy); flex: 1; }
.ds-req-note { display: block; color: var(--ds-text-muted); font-size: .78rem; margin-top: 2px; }
.ds-req-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Messages card ───────────────────────────── */
.ds-messages-card {
  display: flex;
  flex-direction: column;
  min-height: 360px;
}
.ds-msg-header-name {
  margin-left: auto;
  font-size: .72rem;
  font-weight: 500;
  color: var(--ds-text-muted);
  font-family: var(--ds-font-body);
}
.ds-msg-thread {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  background: var(--ds-bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
  max-height: 320px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-msg-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border-top: none;
}
.ds-msg-compose-input {
  flex: 1;
  border: 1px solid var(--ds-border);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: .875rem;
  font-family: var(--ds-font-body);
  resize: none;
  line-height: 1.4;
  outline: none;
  transition: border-color .15s;
  background: var(--ds-surface-hover);
}
.ds-msg-compose-input:focus { border-color: var(--ds-navy); background: #fff; }
.ds-msg-send-btn {
  width: 36px; height: 36px;
  border-radius: 50% !important;
  padding: 0 !important;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── Notes card ──────────────────────────────── */
.ds-notes-card {
  display: flex;
  flex-direction: column;
  min-height: 360px;
}
.ds-notes-private-badge {
  margin-left: auto;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  padding: 1px 7px;
}
.ds-notes-log {
  flex: 1;
  overflow-y: auto;
  max-height: 260px;
  padding: 4px 0;
  border-bottom: 1px solid var(--ds-border);
}
.ds-note-entry {
  padding: 10px 16px;
  border-bottom: 1px solid var(--ds-border);
  transition: background .4s;
}
.ds-note-entry:last-child { border-bottom: none; }
.ds-note-entry.ds-note-new { background: #f0fdf4; }
.ds-note-text {
  font-size: .875rem;
  color: var(--ds-text);
  line-height: 1.5;
  white-space: pre-wrap;
}
.ds-note-ts {
  font-size: .7rem;
  color: var(--ds-text-muted);
  margin-top: 4px;
}
.ds-notes-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: .85rem;
  color: var(--ds-text-muted);
}
.ds-notes-compose {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ds-notes-input {
  width: 100%;
  border-radius: var(--ds-radius-sm);
  font-size: .875rem;
  resize: none;
  box-sizing: border-box;
}
.ds-notes-add-btn {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── Responsive breakpoints ──────────────────── */
@media (max-width: 1100px) {
  .ds-detail-bottom { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .ds-detail-grid   { grid-template-columns: 1fr; }
  .ds-detail-bottom { grid-template-columns: 1fr; }
}



/* ── LESSONS ──────────────────────────────────── */
.ds-lesson-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; border-bottom: 1px solid var(--ds-border);
  transition: background .15s;
}
.ds-lesson-row:last-child { border-bottom: none; }
.ds-lesson-row:hover { background: var(--ds-surface-hover); }

/* Lessons list is capped to the 5 most recent by default so the pupil-detail
   view stays digestible as lesson history grows; the toggle reveals the rest.
   Each lesson is exactly one .ds-lesson-row direct child, so nth-child is safe. */
/* !important needed: a later base rule sets `.ds-lesson-row { display:flex !important }`. */
.pt-pd-lessons-collapsed .ds-lesson-row:nth-child(n+6) { display: none !important; }
.pt-pd-lessons-toggle {
  display: block; width: 100%; margin: 0; padding: 11px 20px;
  background: var(--ds-surface-alt, #F8FAFC);
  border: none; border-top: 1px solid var(--ds-border);
  color: var(--ds-navy-mid, #1A3461); font-weight: 600; font-size: .9rem;
  cursor: pointer; text-align: center;
}
.pt-pd-lessons-toggle:hover { background: var(--ds-surface-hover); }
.ds-lesson-date { text-align: center; min-width: 46px; }
.ds-lesson-day { font-family: var(--ds-font-display); font-size: 1.3rem; font-weight: 700; line-height: 1; color: var(--ds-navy); }
.ds-lesson-month { font-size: .65rem; color: var(--ds-text-muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.ds-lesson-info { flex: 1; min-width: 0; }
.ds-lesson-title { font-weight: 600; font-size: .875rem; }
.ds-lesson-preview { font-size: .75rem; color: var(--ds-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; margin-top: 2px; }
.ds-lesson-grade { font-size: .875rem; font-weight: 700; color: var(--ds-navy-mid); min-width: 40px; }
/* v0.9.331 — per-lesson traffic-light tone (replaces the old X.X/5 number).
   Coarse good/ok/tough so it can't be mistaken for a precise, comparable metric.
   Thresholds mirror ds_get_traffic_light(): avg>=4 good, >=2.5 ok, else tough. */
/* Interactive wrapper: click/tap toggles the inline score (.ds-lesson-gradeval).
   padding+negative-margin enlarges the click/tap target without changing the
   visible footprint. */
.ds-lesson-gradewrap {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  cursor: pointer;
  padding: 6px;
  margin: -6px;
}
.ds-lesson-gradewrap:focus-visible {
  outline: 2px solid var(--ds-navy, #0C1E3D);
  outline-offset: 2px;
  border-radius: 6px;
}
.ds-lesson-gradedot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(0,0,0,.04);
  flex: none;
}
.ds-lesson-gradedot--good  { background: #16A34A; }
.ds-lesson-gradedot--ok    { background: #CA8A04; }
.ds-lesson-gradedot--tough { background: #DC2626; }
.ds-lesson-gradeval {
  display: none;
  margin-left: 6px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ds-navy-mid, #1A3461);
  white-space: nowrap;
}
.ds-lesson-gradewrap.is-open .ds-lesson-gradeval { display: inline; }
.ds-lesson-actions { display: flex; gap: 6px; }

.ds-status-badge { padding: 3px 10px; border-radius: 20px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.status-scheduled { background: rgba(42,74,130,.1);  color: var(--ds-navy-mid); }
.status-completed  { background: rgba(5,150,105,.1);  color: var(--ds-success); }
.status-cancelled  { background: rgba(220,38,38,.08); color: var(--ds-danger); }

/* ── COACHING ─────────────────────────────────── */
.ds-coaching-card .ds-card-header { color: #6D28D9; }
.ds-suggestion { padding: 12px 16px; border-bottom: 1px solid var(--ds-border); }
.ds-suggestion:last-child { border-bottom: none; }
.ds-suggestion-skill { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.ds-suggestion-skill strong { font-size: .875rem; font-weight: 600; }
.ds-suggestion p { margin: 0; font-size: .8rem; color: var(--ds-text-muted); line-height: 1.5; }
.ds-coaching-inline { background: #F5F3FF; border-radius: 8px; padding: 12px; margin-bottom: 16px; }
.ds-coaching-inline .ds-suggestion-inline { margin-bottom: 8px; font-size: .8rem; }

.ds-grade-mini { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: .72rem; font-weight: 700; white-space: nowrap; flex: none; }
.ds-grade-mini-ns { background: #F1F5F9; color: #64748B; }
/* "Needs work" / "Not started yet" group headings — shared by the instructor
   Coaching Suggestions card, the in-lesson focus panel and the booking-modal
   hint, so all three surfaces read the same. */
.ds-coaching-group-label,
.ds-focus-group-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #7C3AED; }
.ds-coaching-group-label { padding: 10px 16px 2px; }
.ds-focus-group-label { margin: 8px 0 2px; }
.grade-0 { background: #F1F5F9; color: #64748B; }
.grade-1 { background: #FEF2F2; color: #DC2626; }
.grade-2 { background: #FEF9C3; color: #854D0E; }
.grade-3 { background: #FFF7ED; color: #C2410C; }
.grade-4 { background: #F0FDF4; color: #16A34A; }
.grade-5 { background: #DCFCE7; color: #15803D; }

/* ── READINESS ────────────────────────────────── */
.ds-readiness-card .ds-card-header { color: #0891B2; }
.ds-readiness-body { padding: 16px; }
.ds-readiness-ready { display: flex; align-items: flex-start; gap: 12px; }
.ds-readiness-icon { width: 40px; height: 40px; background: var(--ds-success-light); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.ds-readiness-label { font-size: .7rem; text-transform: uppercase; color: var(--ds-text-muted); font-weight: 700; letter-spacing: .06em; }
.ds-readiness-dates { font-family: var(--ds-font-display); font-size: 1rem; font-weight: 700; color: var(--ds-navy); margin: 4px 0; }
.ds-readiness-weeks { font-size: .8rem; color: var(--ds-text-muted); margin-bottom: 10px; }
.ds-readiness-bar-track { background: #E5E7EB; border-radius: 20px; height: 7px; overflow: hidden; }
.ds-readiness-bar { background: linear-gradient(90deg, var(--ds-navy-light), var(--ds-success-light)); height: 100%; border-radius: 20px; transition: width 1s ease; }
.ds-readiness-bar-hours { background: linear-gradient(90deg, var(--ds-amber), var(--ds-success-light)); }
.ds-readiness-basis { font-size: .72rem; color: var(--ds-text-muted); margin-top: 10px; font-style: italic; }
.ds-readiness-unknown { font-size: .875rem; color: var(--ds-text-muted); padding: 4px 0; }
.ds-readiness-disclaimer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ds-border); font-size: .72rem; color: var(--ds-text-subtle); line-height: 1.5; }

/* ── SKILLS ───────────────────────────────────── */
.ds-skills-section { padding: 0 20px 16px; }
.ds-skills-section h4 { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ds-text-muted); margin: 0 0 12px; display: flex; align-items: center; font-weight: 700; }
.ds-skill-category { margin-bottom: 16px; }
.ds-skill-cat-header {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ds-navy-mid);
  background: linear-gradient(90deg, rgba(26,52,97,.07) 0%, transparent 100%);
  padding: 7px 8px 7px 12px; margin-bottom: 8px;
  border-left: 3px solid var(--ds-amber); border-radius: 0 4px 4px 0;
}
.ds-skill-grid { display: flex; flex-direction: column; gap: 8px; }
.ds-skill-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ds-skill-name { font-size: .8rem; min-width: 200px; flex: 1; }
.ds-grade-selector { display: flex; gap: 4px; flex-wrap: wrap; }
.ds-grade-opt { cursor: pointer; }
.ds-grade-opt input { display: none; }
.ds-grade-opt span {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--ds-radius-xs);
  background: #F1F5F9; color: var(--ds-text-muted);
  font-size: .78rem; font-weight: 700; transition: all .15s; border: 2px solid transparent;
}
.ds-grade-opt input:checked + span { background: var(--ds-navy-mid); color: white; border-color: var(--ds-navy); box-shadow: 0 2px 6px rgba(26,52,97,.3); }
.ds-grade-opt:hover span { background: #E2E8F0; }
.ds-grade-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  font-size: .73rem; font-weight: 700; white-space: nowrap;
  border: 1.5px solid transparent;
}
.ds-grade-badge.grade-0 { background:#f1f5f9; color:#64748b; border-color:#e2e8f0; }
.ds-grade-badge.grade-1 { background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.ds-grade-badge.grade-2 { background:#fff7ed; color:#9a3412; border-color:#fed7aa; }
.ds-grade-badge.grade-3 { background:#fefce8; color:#854d0e; border-color:#fde68a; }
.ds-grade-badge.grade-4 { background:#f0fdf4; color:#166534; border-color:#bbf7d0; }
.ds-grade-badge.grade-5 { background:#ecfdf5; color:#065f46; border-color:#6ee7b7; }

/* ── SKILL MANAGEMENT ─────────────────────────── */
.ds-skills-manage { max-width: 1400px; margin: 0 auto; padding: 28px; }
.ds-skill-cat-section { padding: 0 0 16px; }
.ds-skill-cat-title {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px;
  background: linear-gradient(90deg, rgba(26,52,97,.06) 0%, transparent 100%);
  border-left: 3px solid var(--ds-amber);
  font-family: var(--ds-font-display); font-weight: 700; font-size: .88rem;
}
.ds-skill-row { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--ds-border); transition: background .15s; }
.ds-skill-row:hover { background: var(--ds-surface-hover); }
.ds-skill-row:last-child { border-bottom: none; }
.ds-skill-row-name { flex: 1; font-size: .875rem; font-weight: 500; }
.ds-skill-row-desc { font-size: .78rem; color: var(--ds-text-muted); }
.ds-skill-row-actions { display: flex; gap: 6px; }
.ds-meta { font-size: .78rem; color: var(--ds-text-muted); }

/* ── WELCOME CARD ─────────────────────────────── */
.ds-welcome-card { padding: 48px 40px; text-align: center; }
.ds-welcome-icon { font-size: 3rem; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; }
.ds-welcome-icon svg { color: var(--ds-navy-mid); opacity: .7; }
.ds-welcome-card h2 { font-family: var(--ds-font-display); font-size: 1.5rem; color: var(--ds-navy); margin: 0 0 8px; letter-spacing: -.02em; }
.ds-welcome-card p { color: var(--ds-text-muted); font-size: .9rem; }
.ds-stats-row { display: flex; justify-content: center; gap: 48px; margin-top: 28px; }
.ds-stat-item { text-align: center; }
.ds-stat-num { font-family: var(--ds-font-display); font-size: 2.6rem; font-weight: 800; color: var(--ds-navy-mid); line-height: 1; }
.ds-stat-label { font-size: .75rem; color: var(--ds-text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .05em; }

/* ── PUPIL HERO ───────────────────────────────── */

/* ── PUPIL HERO (merged identity + stats) ─────── */
.ds-pupil-hero {
  background: linear-gradient(140deg, #0A1830 0%, #0C1E3D 45%, #172D58 100%);
  padding: 0;
  position: relative;
  overflow: hidden;
  display: block;
}
.ds-hero-identity {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 1;
}
.ds-hero-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 3px solid rgba(245,158,11,.45);
  overflow: hidden;
}
.ds-hero-avatar-img {
  width: 100% !important; height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 50% !important;
}
.ds-hero-avatar-initial {
  width: 100% !important; height: 100% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: var(--ds-amber) !important;
  font-family: var(--ds-font-display);
  font-size: 1.5rem !important; font-weight: 700 !important; color: white !important;
}

/* ── PUPIL PROFILE PAGE ─────────────────────── */
.ds-pupil-profile-card {
  max-width: 100%;
  margin: 0 0 16px;
}
.ds-pupil-profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px;
}
.ds-pupil-profile-avatar-display {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 3px solid rgba(245,158,11,.4);
  overflow: hidden;
  flex-shrink: 0;
}
.ds-pupil-profile-avatar-display .ds-hero-avatar-img,
.ds-pupil-profile-avatar-display .ds-hero-avatar-initial {
  width: 100% !important; height: 100% !important;
}
.ds-pupil-profile-avatar-actions {
  flex: 1;
}
.ds-pupil-profile-info-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--ds-border);
  gap: 12px;
  font-size: .9rem;
}
.ds-pupil-profile-info-row:last-child { border-bottom: none; }
.ds-pupil-profile-info-label {
  color: var(--ds-text-muted);
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.ds-pupil-profile-info-value {
  font-weight: 600;
  color: var(--ds-text);
  text-align: right;
}
.ds-hero-identity-text { position: relative; z-index: 1; }
.ds-hero-name {
  font-family: var(--ds-font-display);
  font-size: 1.45rem; font-weight: 700;
  color: white;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.ds-hero-meta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 5px;
  font-size: .82rem; color: rgba(255,255,255,.65);
}
.ds-hero-badge {
  background: rgba(245,158,11,.2);
  border: 1px solid rgba(245,158,11,.4);
  color: #fbbf24;
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  padding: 2px 8px; border-radius: 100px;
}
.ds-hero-meta-sep { opacity: .35; }
/* ds-hero-remove-photo removed */
.ds-hero-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  position: relative; z-index: 1;
}
.ds-stat-card {
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  text-align: center !important;
  min-width: 88px;
  box-shadow: 0 2px 10px rgba(0,0,0,.2) !important;
  transition: box-shadow .2s, transform .15s;
}
.ds-stat-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,.25) !important;
  transform: translateY(-1px);
}
.ds-stat-value {
  font-family: var(--ds-font-display);
  font-size: 1.65rem !important; font-weight: 800 !important;
  line-height: 1 !important;
  color: #0C1E3D !important;
  opacity: 1 !important;
}
.ds-stat-label {
  font-size: .66rem !important;
  color: #566582 !important;
  margin-top: 5px !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.ds-stat-progress { min-width: 110px; }
.ds-stat-progress-bar-track {
  height: 4px;
  background: #E2EAF4;
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.ds-stat-progress-bar {
  height: 100%;
  background: var(--ds-amber);
  border-radius: 2px;
  transition: width .6s ease;
}
@media (max-width: 768px) {
  .ds-pupil-hero { flex-direction: column; align-items: flex-start; padding: 20px; }
  .ds-hero-stats { width: 100%; }
  .ds-stat-card { flex: 1; min-width: 70px; padding: 12px 10px; }
  .ds-stat-value { font-size: 1.3rem; }
}


.ds-pupil-identity-banner { display: flex !important; align-items: center !important; }

/* Fix: theme p margin inside cards */
.ds-card p { margin: 0 !important; }
.ds-card h2, .ds-card h3, .ds-card h4 { margin: 0 !important; padding: 0 !important; }

/* Fix: delete/danger button */
.ds-wrap button[style*="color:#dc2626"],
.ds-wrap button[style*="color:var(--ds-danger)"] {
  background: none !important;
  border: none !important;
  cursor: pointer;
  font-size: .8rem !important;
  font-weight: 600 !important;
  color: var(--ds-danger) !important;
  padding: 4px 8px !important;
}
.ds-wrap button[style*="margin-left:auto"] {
  margin-left: auto !important;
}

/* Fix: the lesson status text (not using status-badge class) */
.ds-lesson-status {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ds-lesson-status.status-scheduled { background: rgba(42,74,130,.1); color: var(--ds-navy-mid); }
.ds-lesson-status.status-completed  { background: rgba(5,150,105,.1); color: var(--ds-success); }
.ds-lesson-status.status-cancelled  { background: rgba(220,38,38,.08); color: var(--ds-danger); }

/* Fix: test card purple header */
.ds-card-header-purple { color: var(--ds-navy-mid) !important; }

/* Fix: text-subtle class */
.ds-text-subtle { color: var(--ds-text-subtle) !important; font-size: .875rem !important; }

/* Responsive layout fixes with !important */
@media (max-width: 1024px) {
  .ds-content      { grid-template-columns: 260px 1fr !important; }
  .ds-detail-grid  { grid-template-columns: 1fr !important; }
  .ds-pupil-grid   { grid-template-columns: 1fr !important; }
  .ds-pupil-lower-grid { grid-template-columns: 1fr !important; }
  .ds-pupil-mock-card  { width: calc(100% - 28px); }
}
@media (max-width: 900px) {
  .ds-content      { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .ds-content      { grid-template-columns: 1fr !important; padding: 14px !important; }
  .ds-pupil-grid       { grid-template-columns: 1fr !important; padding: 14px !important; }
  .ds-pupil-lower-grid { grid-template-columns: 1fr !important; padding: 0 14px 14px !important; }
  .ds-pupil-mock-card  { width: calc(100% - 28px); }
  .ds-detail-grid  { grid-template-columns: 1fr !important; }
  .ds-pupil-hero   { flex-direction: column !important; padding: 16px !important; }
  .ds-hero-stats   { width: 100% !important; justify-content: space-between !important; }
  .ds-stat-card    { flex: 1 !important; min-width: 0 !important; padding: 12px 10px !important; }
}

/* ── FIX: WordPress themes set svg/img { max-width: 100% }
   which blows up our header icon to full width.
   Pin every SVG inside our wrap to its intrinsic size. ── */
.ds-wrap svg {
  max-width: none !important;
  flex-shrink: 0;
}
.ds-logo-icon svg {
  width: 22px !important;
  height: 22px !important;
}
.ds-header-logo-img {
  max-height: 44px !important;
  max-width: 160px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
}

/* ── FIX: Break .ds-wrap out of the theme's narrow content
   column so it fills the full viewport width. ── */


/* ── CONSISTENT TAB LAYOUT ─────────────────────
   Every tab now uses ds-tab-content as its outer
   wrapper — same max-width, padding, and margin
   as ds-content and ds-calendar-wrap.
   ─────────────────────────────────────────────── */
.ds-tab-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px;
  box-sizing: border-box;
}
.ds-tab-content-narrow {
  max-width: 860px;
}
.ds-tab-content-pupil {
  padding: 0;          /* pupil grid has its own padding via ds-pupil-grid */
}

/* Ensure ds-content, ds-calendar-wrap, ds-pupil-grid all share the same rhythm */
.ds-content,
.ds-calendar-wrap,
.ds-skills-manage {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 28px !important;
  box-sizing: border-box;
}
.ds-pupil-grid {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 28px !important;
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: 1fr 340px !important;
  gap: 24px !important;
  align-items: start !important;
}

/* ── PUPIL LOWER GRID (Request + Gaps / Messages) ── */
.ds-pupil-lower-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 28px 28px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.ds-pupil-lower-left,
.ds-pupil-lower-right { display: flex; flex-direction: column; gap: 16px; }

.ds-pupil-messages-card { display: flex; flex-direction: column; }
.ds-pupil-msg-thread   { max-height: 340px; overflow-y: auto; min-height: 80px; }
.ds-pupil-msg-compose  { padding: 12px 16px; display: flex; gap: 8px; border-top: 1px solid var(--ds-border); }

.ds-pupil-mock-card    { max-width: 1400px; margin: 0 auto 28px; width: calc(100% - 56px); }
.ds-pupil-mock-list    { padding: 4px 0; }

.ds-gap-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--ds-border); gap: 12px;
}
.ds-gap-datetime { font-weight: 600; font-size: .95rem; color: #111; }
.ds-gap-meta     { font-size: .84rem; color: var(--ds-text-muted); margin-top: 2px; }

.ds-mock-expand-btn { margin-left: auto; flex-shrink: 0; }
.ds-mock-detail-panel { padding: 0 16px 12px; }

.ds-input {
  width: 100%; padding: 6px 8px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xs);
  font-size: .9em; box-sizing: border-box;
}
.ds-section-label {
  font-size: .78em; font-weight: 700;
  letter-spacing: .05em; color: #9ca3af;
}


/* ── MESSAGING LAYOUT ──────────────────────────
   Replace the inline grid style.
   ─────────────────────────────────────────────── */
.ds-msg-layout {
  display: grid !important;
  grid-template-columns: 240px minmax(0, 1fr) !important;
  gap: 16px !important;
  height: 580px !important;
  align-items: stretch;
}
.ds-msg-sidebar {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  min-height: 0;
  height: 100%;
  /* Definite max-height so the overflow region actually SCROLLS. Relying on
     height:100% alone (a percentage resolved against the layout's fixed height)
     clipped the conversation list but wouldn't scroll it on Safari/iOS — pupils
     below the fold were unreachable. This mirrors the chat pane
     (#ds-chat-messages), which scrolls reliably via a definite max-height.
     Keep this value in sync with .ds-msg-layout's height above. On phones /
     portrait, mobile.css overrides this to max-height:none (page scroll). */
  max-height: 580px;
}
/* Chat panel card must be flex column so inner flex:1 works */
.ds-msg-layout > .ds-card:last-child {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

/* ── CARD CONSISTENCY ──────────────────────────
   Cards should never stretch beyond their grid
   cell. Remove any rogue margin-tops.
   ─────────────────────────────────────────────── */
.ds-tab-content > .ds-card,
.ds-tab-content-narrow > .ds-card {
  margin-bottom: 20px;
}
.ds-tab-content > .ds-card:last-child,
.ds-tab-content-narrow > .ds-card:last-child {
  margin-bottom: 0;
}

/* Remove stray margin-top from inline style="margin-top:16px" cards */
.ds-card[style*="margin-top"] {
  margin-top: 20px !important;
}

/* ── RESPONSIVE ────────────────────────────────── */
@media (max-width: 1024px) {
  .ds-tab-content:not(.ds-tab-content-pupil),
  .ds-content,
  .ds-calendar-wrap,
  .ds-skills-manage,
  .ds-pupil-grid      { padding: 18px !important; }
  .ds-msg-layout      { grid-template-columns: 200px minmax(0,1fr) !important; }
}
@media (max-width: 768px) {
  .ds-tab-content:not(.ds-tab-content-pupil),
  .ds-content,
  .ds-calendar-wrap,
  .ds-skills-manage,
  .ds-pupil-grid      { padding: 14px !important; }
  .ds-msg-layout      { grid-template-columns: 1fr !important; height: auto !important; }
  /* Was a fixed height:200px, which clipped the empty state (the "Add pupils to
     start messaging…" text + Add Pupil button were cut off on phones). Size to
     content instead, capping a long conversation list so it still scrolls. */
  .ds-msg-sidebar     { height: auto !important; max-height: 60vh; }
  .ds-pupil-grid      { grid-template-columns: 1fr !important; }
  .ds-pupil-lower-grid { grid-template-columns: 1fr !important; padding: 0 14px 14px !important; }
}

/* ── BULK SCHEDULE MODAL ───────────────────────── */
.ds-day-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.ds-day-option {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1.5px solid var(--ds-border);
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.ds-day-option:has(input:checked) {
  border-color: var(--ds-navy-mid);
  background: rgba(26,52,97,.08);
  color: var(--ds-navy-mid);
}
.ds-day-option input { width: 0; height: 0; opacity: 0; position: absolute; }
.ds-bulk-preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: .9rem;
}
.ds-bulk-dates-list {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ds-bulk-date-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: .84rem;
  cursor: pointer;
  transition: background .1s;
}
.ds-bulk-date-row:hover { background: var(--ds-surface-hover); }
.ds-bulk-date-row:has(input:checked) { color: var(--ds-text); }
.ds-bulk-date-row:has(input:not(:checked)) { color: var(--ds-text-subtle); text-decoration: line-through; }
.ds-bulk-date-row input[type="checkbox"] { flex-shrink: 0; accent-color: var(--ds-navy-mid); }

/* ── PROGRESS CHARTS ──────────────────────────── */
.ds-progress-chart-card {}

/* ── Chart stats strip ───────────────────────────── */
.ds-chart-stats-wrap { min-height: 0; }
.ds-chart-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  padding: 10px 12px;
  background: var(--ds-surface-hover);
  border-radius: var(--ds-radius-sm);
  margin-bottom: 4px;
}
.ds-chart-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
}
.ds-chart-stat-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ds-navy);
  font-family: var(--ds-font-head);
  line-height: 1.2;
}
.ds-chart-stat-lbl {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ds-text-muted);
  font-weight: 600;
  margin-top: 1px;
}
.ds-chart-stat-best { min-width: 0; }
.ds-chart-stat-badge {
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-badge-green { background: #d1fae5; color: #065f46; }
.ds-badge-red   { background: #fee2e2; color: #991b1b; }
.ds-badge-amber { background: #fef3c7; color: #92400e; }

.ds-chart-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ds-text-muted);
  margin-bottom: 8px;
}
.ds-chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.ds-chart-col {}
.ds-btn-ghost {
  background: none;
  border: none;
  color: var(--ds-text-muted);
  cursor: pointer;
  padding: 2px 6px;
  font-size: .75rem;
}
.ds-btn-ghost:hover { color: var(--ds-navy-mid); }

@media (max-width: 768px) {
  .ds-chart-row { grid-template-columns: 1fr; }
  .ds-day-picker { gap: 4px; }
}

/* ── TEST BOOKED SIDEBAR CARD ─────────────────── */
.ds-test-booked-body {
  padding: 14px 18px;
}
.ds-test-booked-date {
  font-family: var(--ds-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ds-navy);
  line-height: 1.3;
}
.ds-test-booked-centre {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .8rem;
  color: var(--ds-text-muted);
  margin-top: 5px;
}
.ds-test-countdown {
  margin-top: 10px;
  display: inline-block;
  background: var(--ds-surface-hover);
  border: 1px solid var(--ds-border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: .82rem;
  color: var(--ds-text);
}
.ds-test-countdown.ds-test-soon {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}

/* ── CARD CONSISTENCY POLISH ──────────────────── */
.ds-card {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius) !important;
  box-shadow: 0 1px 4px rgba(12,30,61,.06) !important;
  margin-bottom: 20px;
}
.ds-card-header {
  padding: 13px 18px !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--ds-navy) !important;
  border-bottom: 1px solid var(--ds-border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--ds-surface) !important;
}

/* Upcoming lessons */
.ds-upcoming-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--ds-border) !important;
}
.ds-upcoming-item:last-child { border-bottom: none !important; }
.ds-upcoming-date-block {
  width: 44px !important;
  height: 44px !important;
  background: var(--ds-navy) !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.ds-upcoming-day {
  font-family: var(--ds-font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: white !important;
  line-height: 1 !important;
}
.ds-upcoming-month {
  font-size: .6rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.7) !important;
  letter-spacing: .05em !important;
}
.ds-upcoming-time {
  font-weight: 600 !important;
  font-size: .92rem !important;
  color: var(--ds-navy) !important;
}
.ds-upcoming-meta {
  font-size: .78rem !important;
  color: var(--ds-text-muted) !important;
  margin-top: 2px !important;
}

/* Focus areas card */
.ds-improve-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid var(--ds-border) !important;
}
.ds-improve-item:last-child { border-bottom: none !important; }
.ds-improve-rank {
  width: 22px !important; height: 22px !important;
  border-radius: 50% !important;
  background: var(--ds-surface-hover) !important;
  border: 1px solid var(--ds-border) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  color: var(--ds-text-muted) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
.ds-improve-name {
  flex: 1 !important;
  font-size: .85rem !important;
  font-weight: 500 !important;
  color: var(--ds-navy) !important;
}
.ds-improve-score {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: .78rem !important;
  color: var(--ds-text-muted) !important;
  white-space: nowrap !important;
}

/* Lesson timeline */
/* ══════════════════════════════════════════════════════════════
   PUPIL TIMELINE — redesigned v2.1
   ══════════════════════════════════════════════════════════════ */

.ds-timeline {
  padding: 4px 0 0 !important;
  position: relative !important;
}

/* Vertical connecting line */
.ds-timeline::before {
  content: '' !important;
  position: absolute !important;
  left: 18px !important;
  top: 0 !important; bottom: 0 !important;
  width: 2px !important;
  background: linear-gradient(180deg, var(--ds-border-mid) 0%, var(--ds-border) 100%) !important;
  z-index: 0 !important;
}

.ds-timeline-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 0 18px 18px 46px !important;
  position: relative !important;
  border-bottom: none !important;
}
.ds-timeline-item:last-child { padding-bottom: 8px !important; }

/* Circle dot on the line */
.ds-timeline-dot {
  position: absolute !important;
  left: 11px !important;
  top: 14px !important;
  width: 16px !important; height: 16px !important;
  border-radius: 50% !important;
  background: white !important;
  border: 3px solid var(--ds-border-mid) !important;
  z-index: 1 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 0 3px var(--ds-bg) !important;
}
.ds-timeline-item.status-completed .ds-timeline-dot {
  background: #22c55e !important; border-color: #16a34a !important;
}
.ds-timeline-item.status-cancelled .ds-timeline-dot {
  background: #ef4444 !important; border-color: #dc2626 !important;
}
.ds-timeline-item.status-scheduled .ds-timeline-dot {
  background: var(--ds-amber) !important; border-color: #d97706 !important;
}

/* The lesson card */
.ds-timeline-content {
  flex: 1 !important;
  background: white !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-sm) !important;
  box-shadow: 0 1px 4px rgba(12,30,61,.06) !important;
  overflow: hidden !important;
}

/* Card header row */
.ds-timeline-header {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--ds-border) !important;
  background: #f8fafd !important;
}

.ds-timeline-date {
  font-family: var(--ds-font-display) !important;
  font-weight: 700 !important;
  font-size: .88rem !important;
  color: var(--ds-navy) !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.ds-timeline-meta {
  font-size: .75rem !important;
  color: var(--ds-text-muted) !important;
  white-space: nowrap !important;
}

/* Status badge */
.ds-status-badge {
  font-size: .68rem !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  flex-shrink: 0 !important;
}
.ds-status-badge.status-completed { background:#dcfce7; color:#166534; }
.ds-status-badge.status-cancelled { background:#fee2e2; color:#991b1b; }
.ds-status-badge.status-scheduled { background:#fef3c7; color:#92400e; }

/* Overall grade chip */
.ds-grade-overall {
  font-family: var(--ds-font-display) !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  background: var(--ds-navy) !important;
  color: white !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  flex-shrink: 0 !important;
}

/* Instructor note callout */
.ds-lesson-notes {
  display: flex !important;
  gap: 10px !important;
  margin: 12px 16px 4px !important;
  padding: 10px 14px !important;
  background: #f0f4fb !important;
  border-left: 3px solid var(--ds-navy-light, #3b5a8f) !important;
  border-radius: 0 var(--ds-radius-xs) var(--ds-radius-xs) 0 !important;
  font-size: .83rem !important;
  color: #374151 !important;
  line-height: 1.5 !important;
}
.ds-lesson-notes::before {
  content: '📝' !important;
  flex-shrink: 0 !important;
  font-size: .9rem !important;
  margin-top: 1px !important;
}
.ds-lesson-notes strong { display:none !important; } /* hide "Lesson notes:" label, icon replaces it */

/* Instructor comments */
.ds-instr-comments { padding: 12px 16px 4px !important; }
.ds-comment { font-size: .83rem !important; line-height: 1.5 !important; }
.ds-comment-instructor {
  background: #f0f4fb !important;
  border-left: 3px solid var(--ds-navy-light, #3b5a8f) !important;
  border-radius: 0 var(--ds-radius-xs) var(--ds-radius-xs) 0 !important;
  padding: 8px 12px !important;
  margin-bottom: 6px !important;
}
.ds-comment-author {
  font-size: .7rem !important;
  font-weight: 700 !important;
  color: var(--ds-navy-mid, #2a4a82) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  margin-bottom: 3px !important;
}

/* "Skills & Scores" expand button */
.ds-more-info-btn {
  margin: 10px 16px 12px !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
}

/* ── Skills & Scores expandable panel ──────────────── */
.ds-lesson-detail {
  border-top: 1px solid var(--ds-border) !important;
  padding: 0 !important;
  background: #fafbfd !important;
  animation: ds-expand .18s ease !important;
}
@keyframes ds-expand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Category block */
.ds-skill-group {
  border-bottom: 1px solid var(--ds-border) !important;
}
.ds-skill-group:last-child { border-bottom: none !important; }

.ds-skill-group-title {
  padding: 7px 16px !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--ds-navy-mid, #2a4a82) !important;
  background: #f0f4fb !important;
  border-bottom: 1px solid var(--ds-border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.ds-skill-group-title::before {
  content: '' !important;
  display: inline-block !important;
  width: 3px !important; height: 14px !important;
  background: var(--ds-amber) !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}

/* Individual skill row */
.ds-skill-score-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 9px 16px !important;
  border-bottom: 1px solid var(--ds-border) !important;
  transition: background .12s !important;
}
.ds-skill-score-row:last-child { border-bottom: none !important; }
.ds-skill-score-row:hover { background: #f0f4fb !important; }

.ds-skill-score-name {
  font-size: .83rem !important;
  color: #374151 !important;
  flex: 1 !important;
  min-width: 0 !important;
  font-weight: 500 !important;
}

/* Grade pip track (5 dots) — injected via PHP helper */
.ds-skill-score-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
.ds-grade-pips {
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
.ds-grade-pip {
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: var(--ds-border) !important;
  flex-shrink: 0 !important;
}
.ds-grade-pip.filled-1 { background: #ef4444 !important; }
.ds-grade-pip.filled-2 { background: #f97316 !important; }
.ds-grade-pip.filled-3 { background: #f59e0b !important; }
.ds-grade-pip.filled-4 { background: #22c55e !important; }
.ds-grade-pip.filled-5 { background: #10b981 !important; }

/* No skills recorded */
.ds-lesson-detail .ds-meta { padding: 14px 16px !important; }

/* Pupil add-note area below skills */
.ds-pupil-comments { padding: 0 16px 14px !important; }

/* Pupil own notes on a lesson */
.ds-comment-pupil {
  background: white !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-sm) !important;
  overflow: hidden !important;
  margin-bottom: 8px !important;
  margin-top: 4px !important;
}
.ds-comment-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  background: #f8fafd !important;
  border-bottom: 1px solid var(--ds-border) !important;
}
.ds-comment-author {
  font-size: .7rem !important;
  font-weight: 700 !important;
  color: var(--ds-navy) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  flex: 1 !important;
}
.ds-comment-time {
  font-size: .7rem !important;
  color: var(--ds-text-muted) !important;
  white-space: nowrap !important;
}
.ds-comment-body {
  padding: 9px 12px !important;
  font-size: .84rem !important;
  color: #374151 !important;
  line-height: 1.55 !important;
}

.ds-add-comment { margin-top: 10px !important; }

.ds-comment-input {
  width: 100% !important;
  padding: 8px 12px !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-xs) !important;
  font-size: .83rem !important;
  font-family: var(--ds-font-body) !important;
  resize: vertical !important;
  min-height: 56px !important;
  box-sizing: border-box !important;
  margin-bottom: 6px !important;
}
.ds-comment-input:focus {
  outline: 2px solid var(--ds-navy-light, #3b5a8f) !important;
  border-color: var(--ds-navy-light, #3b5a8f) !important;
}



/* ── INSTRUCTOR DASHBOARD CARD POLISH ─────────── */

/* Card header gets top-radius to match parent card without overflow:hidden */
.ds-card > .ds-card-header:first-child {
  border-radius: var(--ds-radius) var(--ds-radius) 0 0;
}
/* First non-header child gets no extra top rounding needed */
.ds-card > *:last-child:not(.ds-card-header) {
  border-radius: 0 0 var(--ds-radius) var(--ds-radius);
}

/* Instructor welcome card stats */
.ds-stats-row {
  display: flex !important;
  justify-content: center !important;
  gap: 48px !important;
  margin-top: 28px !important;
}
.ds-stat-item { text-align: center !important; }
.ds-stat-num {
  font-family: var(--ds-font-display) !important;
  font-size: 2.4rem !important;
  font-weight: 800 !important;
  color: var(--ds-navy) !important;
  line-height: 1 !important;
}

/* Lesson rows in instructor panel */
.ds-lesson-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--ds-border) !important;
  transition: background .15s !important;
  cursor: pointer !important;
}
.ds-lesson-row:last-child { border-bottom: none !important; }
.ds-lesson-row:hover { background: var(--ds-surface-hover) !important; }
.ds-lesson-date {
  width: 44px !important;
  height: 44px !important;
  background: var(--ds-navy) !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.ds-lesson-day {
  font-family: var(--ds-font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: white !important;
}
.ds-lesson-month {
  font-size: .6rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.7) !important;
  letter-spacing: .05em !important;
}
.ds-lesson-info { flex: 1 !important; min-width: 0 !important; }
.ds-lesson-title { font-weight: 600 !important; font-size: .88rem !important; color: var(--ds-navy) !important; }
.ds-lesson-preview {
  font-size: .75rem !important;
  color: var(--ds-text-muted) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin-top: 2px !important;
}

/* Pupil detail header */
.ds-pupil-detail-header {
  border-radius: var(--ds-radius) var(--ds-radius) 0 0 !important;
  overflow: hidden !important;
}

/* Pupil list in sidebar */
.ds-pupil-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--ds-border) !important;
  text-decoration: none !important;
  color: var(--ds-text) !important;
  transition: background .15s !important;
}
.ds-pupil-item:last-child { border-bottom: none !important; }
.ds-pupil-item:hover { background: var(--ds-surface-hover) !important; }
.ds-pupil-item.active { background: rgba(12,30,61,.06) !important; }
.ds-pupil-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--ds-navy) 0%, var(--ds-navy-mid) 100%) !important;
  color: white !important;
  font-family: var(--ds-font-display) !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.ds-pupil-name { font-size: .88rem !important; font-weight: 600 !important; color: var(--ds-navy) !important; }
.ds-pupil-meta { font-size: .72rem !important; color: var(--ds-text-muted) !important; margin-top: 1px !important; }

/* Instruction sidebar card - pupils list */
.ds-pupil-list { padding: 0 !important; }
.ds-content-sidebar .ds-card { margin-bottom: 0 !important; }

/* Suggestion card items */
.ds-suggestion {
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--ds-border) !important;
}
.ds-suggestion:last-child { border-bottom: none !important; }
.ds-suggestion-skill {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 4px !important;
  font-size: .88rem !important;
}
/* Allow the skill name to wrap/shrink so the grade badge keeps its width
   (was squashing "2/5" onto two lines when the name was long). */
.ds-suggestion-skill strong { min-width: 0 !important; }
.ds-suggestion p { font-size: .8rem !important; color: var(--ds-text-muted) !important; margin: 0 !important; }

/* Curriculum card */
.ds-curriculum-picker { padding: 14px 18px !important; }
.ds-curriculum-current {
  font-size: .85rem !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.ds-curriculum-change {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}


/* ══════════════════════════════════════════════
   UPCOMING TESTS CARD (instructor dashboard)
   ══════════════════════════════════════════════ */
.ds-upcoming-test-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--ds-border) !important;
  text-decoration: none !important;
  color: var(--ds-text) !important;
  transition: background .15s !important;
}
.ds-upcoming-test-row:last-child { border-bottom: none !important; }
.ds-upcoming-test-row:hover { background: var(--ds-surface-hover) !important; }
.ds-upcoming-test-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--ds-navy) 0%, var(--ds-navy-mid) 100%) !important;
  color: white !important;
  font-family: var(--ds-font-display) !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.ds-upcoming-test-info { flex: 1 !important; min-width: 0 !important; }
.ds-upcoming-test-name {
  font-weight: 600 !important;
  font-size: .88rem !important;
  color: var(--ds-navy) !important;
}
.ds-upcoming-test-detail {
  font-size: .75rem !important;
  color: var(--ds-text-muted) !important;
  margin-top: 2px !important;
}
.ds-upcoming-test-days {
  font-family: var(--ds-font-display) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  background: var(--ds-surface-hover) !important;
  border: 1px solid var(--ds-border) !important;
  color: var(--ds-navy) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.ds-upcoming-test-days.ds-test-soon {
  background: #fef3c7 !important;
  border-color: #fcd34d !important;
  color: #92400e !important;
}

/* ══════════════════════════════════════════════
   CARD BODY PADDING — universal inner padding
   so cards don't need inline styles
   ══════════════════════════════════════════════ */
.ds-card-body {
  padding: 16px 18px;
}
/* Standardise test booking body (already defined earlier but add safety) */
.ds-test-booking-body { padding: 14px 18px !important; }

/* ══════════════════════════════════════════════
   iMESSAGE-STYLE CHAT BUBBLES
   ══════════════════════════════════════════════ */

/* Chat panel background */
#ds-chat-messages,
div[id^="msg-thread-"] {
  background: #F0F4FB !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Bubble wrapper — controls alignment */
.ds-msg-bubble {
  display: flex !important;
  flex-direction: column !important;
  max-width: 72% !important;
}
.ds-msg-bubble.ds-msg-out {
  align-self: flex-end !important;
  align-items: flex-end !important;
}
.ds-msg-bubble.ds-msg-in {
  align-self: flex-start !important;
  align-items: flex-start !important;
}

/* The actual bubble */
.ds-msg-text {
  padding: 10px 14px !important;
  border-radius: 18px !important;
  font-size: .88rem !important;
  line-height: 1.45 !important;
  word-wrap: break-word !important;
}
.ds-msg-out .ds-msg-text {
  background: var(--ds-navy) !important;
  color: white !important;
  border-bottom-right-radius: 4px !important;
}
.ds-msg-in .ds-msg-text {
  background: white !important;
  color: var(--ds-text) !important;
  border: 1px solid var(--ds-border-mid) !important;
  border-bottom-left-radius: 4px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.07) !important;
}

/* Sender name + timestamp beneath bubble */
.ds-msg-meta {
  font-size: .68rem !important;
  color: var(--ds-text-muted) !important;
  margin-top: 3px !important;
  padding: 0 4px !important;
}

/* Empty/loading state */
.ds-msg-empty {
  text-align: center !important;
  color: var(--ds-text-muted) !important;
  font-size: .85rem !important;
  padding: 24px !important;
  align-self: center !important;
}

/* Pupil conversation list items */
.ds-conv-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  border-bottom: 1px solid var(--ds-border) !important;
  font-size: .88rem !important;
  transition: background .15s !important;
  color: var(--ds-navy) !important;
  font-weight: 500 !important;
}
.ds-conv-item:last-child { border-bottom: none !important; }
.ds-conv-item:hover { background: var(--ds-surface-hover) !important; }
.ds-conv-item.active {
  background: rgba(12,30,61,.07) !important;
  font-weight: 700 !important;
}

/* Input area */
#ds-chat-input {
  padding: 12px 16px !important;
  border-top: 1px solid var(--ds-border) !important;
  background: var(--ds-surface) !important;
}



/* ══════════════════════════════════════════════
   MISSING COMPONENT STYLES
   ══════════════════════════════════════════════ */

/* Empty states */
.ds-empty-state {
  padding: 24px 18px !important;
  text-align: center !important;
  color: var(--ds-text-muted) !important;
  font-size: .85rem !important;
}
.ds-empty-state-sm {
  padding: 12px 18px !important;
  color: var(--ds-text-muted) !important;
  font-size: .82rem !important;
}

/* Parent items */
.ds-parent-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid var(--ds-border) !important;
}
.ds-parent-item:last-child { border-bottom: none !important; }
.ds-parent-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--ds-navy) 0%, var(--ds-navy-mid) 100%) !important;
  color: white !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Skill overview in pupil sidebar */
.ds-skill-overview-cat {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 18px !important;
  border-bottom: 1px solid var(--ds-border) !important;
}
.ds-skill-overview-cat:last-child { border-bottom: none !important; }
.ds-skill-overview-cat-name {
  font-size: .82rem !important;
  font-weight: 500 !important;
  color: var(--ds-navy) !important;
  width: 110px !important;
  flex-shrink: 0 !important;
}
.ds-skill-overview-bar {
  flex: 1 !important;
  height: 6px !important;
  background: var(--ds-border) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}
.ds-skill-overview-fill {
  height: 100% !important;
  border-radius: 3px !important;
  transition: width .4s ease !important;
}
.ds-skill-overview-score {
  font-size: .75rem !important;
  font-weight: 700 !important;
  color: var(--ds-text-muted) !important;
  width: 24px !important;
  text-align: right !important;
  flex-shrink: 0 !important;
}

/* Mini bar (focus areas) */
.ds-mini-bar {
  width: 60px !important;
  height: 5px !important;
  background: var(--ds-border) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}
.ds-mini-bar-fill {
  height: 100% !important;
  background: linear-gradient(90deg, var(--ds-navy-light), var(--ds-navy)) !important;
  border-radius: 3px !important;
}

/* Test booking body */
.ds-test-booking-body {
  padding: 14px 18px !important;
}
.ds-test-booked-date {
  font-family: var(--ds-font-display) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  color: var(--ds-navy) !important;
}
.ds-test-booked-centre {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: .78rem !important;
  color: var(--ds-text-muted) !important;
  margin-top: 4px !important;
}

/* ds-card-header with purple accent */
.ds-card-header-purple {
  color: #7C3AED !important;
  border-left: 3px solid #7C3AED !important;
}

/* Weak skills card (priority) */
.ds-card.ds-card-danger {
  border-left: 4px solid #ef4444 !important;
}

/* Meta text */
.ds-meta, .ds-text-subtle {
  font-size: .78rem !important;
  color: var(--ds-text-muted) !important;
}


/* ══════════════════════════════════════════════════════════════
   MOCK TEST — FORM
   ══════════════════════════════════════════════════════════════ */
.ds-mock-form {
  background: var(--ds-surface-hover);
  border: 1px solid #c7d2fe;
  border-radius: var(--ds-radius-sm);
  padding: 18px;
  margin-bottom: 14px;
}
.ds-mock-form-header-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 560px) { .ds-mock-form-header-row { grid-template-columns: 1fr; } }
.ds-form-field { display: flex; flex-direction: column; gap: 4px; }
.ds-form-label { font-size: .8rem; font-weight: 600; color: #374151; }
.ds-input {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xs);
  font-size: .88rem;
  box-sizing: border-box;
  font-family: var(--ds-font-body);
}
.ds-input:focus { outline: 2px solid var(--ds-navy-light); border-color: var(--ds-navy-light); }
.ds-textarea { resize: vertical; min-height: 64px; }

/* Pass / fail toggle labels */
.ds-mock-result-btn {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 7px 14px;
  border: 2px solid var(--ds-border-mid);
  border-radius: 8px;
  font-weight: 600; font-size: .85rem;
  transition: border-color .15s, background .15s;
  user-select: none;
}
.ds-mock-result-btn input[type="radio"] { display: none; }
.ds-mock-result-btn.pass-active { border-color: #10b981; background: #ecfdf5; color: #065f46; }
.ds-mock-result-btn.fail-active { border-color: #ef4444; background: #fef2f2; color: #991b1b; }

/* Derived verdict chip — replaces the manual pass/fail toggle. Colour follows
   the auto-calculated result via the data-verdict attribute. */
.ds-mock-verdict {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: 7px 14px;
  border: 2px solid #10b981;
  border-radius: 8px;
  background: #ecfdf5;
  min-width: 150px;
}
.ds-mock-verdict[data-verdict="fail"] { border-color: #ef4444; background: #fef2f2; }
.ds-mock-verdict-text { font-weight: 700; font-size: .92rem; color: #065f46; }
.ds-mock-verdict[data-verdict="fail"] .ds-mock-verdict-text { color: #991b1b; }
.ds-mock-verdict-hint { font-size: .68rem; font-weight: 500; color: var(--ds-text-muted); line-height: 1.3; }

/* Fault grid label */
.ds-mock-form-fault-label {
  font-size: .8rem; font-weight: 600; color: #374151;
  margin-bottom: 8px;
}
.ds-mock-form-fault-hint {
  font-weight: 400; color: #9ca3af; font-size: .73rem; display: block; margin-top: 2px;
}

/* Scrollable fault grid */
.ds-mock-fault-grid {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xs);
  background: white;
}

/* Category header rows inside grid */
.ds-mock-cat-header {
  padding: 6px 10px;
  background: var(--ds-navy);
  color: rgba(255,255,255,.9);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Individual fault area rows */
.ds-mock-area-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--ds-border);
  transition: background .12s;
}
.ds-mock-area-row:last-child { border-bottom: none; }
.ds-mock-area-name {
  flex: 1; min-width: 0;
  font-size: .8rem;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-mock-note-input {
  flex: 1.2; min-width: 80px; max-width: 160px;
  padding: 3px 6px;
  border: 1px solid var(--ds-border);
  border-radius: 4px;
  font-size: .72rem;
  color: #374151;
  font-family: var(--ds-font-body);
}
.ds-mock-note-input:focus { outline: 1px solid var(--ds-navy-light); }

/* Counter +/- buttons */
.ds-mock-counter-btn {
  width: 22px; height: 22px;
  border: 1px solid var(--ds-border);
  border-radius: 4px;
  background: var(--ds-surface-hover);
  cursor: pointer;
  font-size: .8rem;
  padding: 0; line-height: 1;
  color: var(--ds-navy);
  flex-shrink: 0;
}
.ds-mock-counter-btn:hover { background: var(--ds-border); }
.mf-count {
  font-size: .82rem; font-weight: 700;
  min-width: 18px; text-align: center;
  color: #374151;
  flex-shrink: 0;
}

/* S / D severity buttons */
.ds-mock-sev-btn {
  padding: 2px 7px;
  border: 1px solid var(--ds-border);
  border-radius: 4px;
  background: var(--ds-surface-hover);
  color: var(--ds-text-muted);
  cursor: pointer;
  font-size: .7rem;
  font-weight: 800;
  flex-shrink: 0;
  transition: background .1s, color .1s;
}
.ds-mock-sev-btn:hover { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.ds-mock-sev-btn.active { background: #ef4444; color: white; border-color: #ef4444; }

/* Row highlight states */
.ds-area-has-minor { background: #fffbeb !important; }
.ds-area-has-minor .mf-count { color: #d97706; }
.ds-area-serious   { background: #fef2f2 !important; }
.ds-area-dangerous { background: #fdf2f8 !important; }

/* ══════════════════════════════════════════════════════════════
   MOCK TEST — RESULTS CARD (shared instructor + pupil)
   ══════════════════════════════════════════════════════════════ */
.ds-mock-card {
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-border);
  margin: 0 18px 14px;
  overflow: hidden;
}
.ds-mock-card:first-child { margin-top: 14px; }
.ds-mock-card.ds-mock-pass { border-left: 4px solid #10b981; }
.ds-mock-card.ds-mock-fail { border-left: 4px solid #ef4444; }

/* Card header */
.ds-mock-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  background: var(--ds-surface-hover);
  border-bottom: 1px solid var(--ds-border);
}
.ds-mock-card-date {
  font-family: var(--ds-font-display);
  font-size: .9rem;
  font-weight: 700;
  color: var(--ds-navy);
}
.ds-mock-card-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Badges */
.ds-mock-badge {
  font-size: .72rem; font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}
.ds-badge-pass      { background: #d1fae5; color: #065f46; }
.ds-badge-fail      { background: #fee2e2; color: #991b1b; }
.ds-badge-minor     { background: #fef3c7; color: #92400e; }
.ds-badge-serious   { background: #fee2e2; color: #991b1b; }
.ds-badge-dangerous { background: #7f1d1d; color: #fff; }

/* Minor fault progress bar */
.ds-mock-score-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-mock-score-track {
  flex: 1;
  height: 7px;
  background: var(--ds-border);
  border-radius: 4px;
  overflow: hidden;
}
.ds-mock-score-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .4s ease;
}
.ds-mock-score-minor     { background: #f59e0b; }
.ds-mock-score-serious   { background: #ef4444; }
.ds-mock-score-dangerous { background: #7f1d1d; }
.ds-mock-score-clean     { background: #10b981; }
.ds-mock-score-label {
  font-size: .72rem;
  color: var(--ds-text-muted);
  white-space: nowrap;
}

/* Fault table */
.ds-mock-fault-table { padding: 0; }
.ds-mock-fault-cat {
  padding: 5px 14px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ds-navy-mid);
  background: #f8fafd;
  border-bottom: 1px solid var(--ds-border);
  border-top: 1px solid var(--ds-border);
}
.ds-mock-fault-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-mock-fault-row:last-child { border-bottom: none; }
.ds-mock-fault-item {
  flex: 1;
  font-size: .84rem;
  font-weight: 500;
  color: var(--ds-navy);
  min-width: 120px;
}
.ds-mock-fault-sev {
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ds-fault-minor     { background: #fef3c7; color: #92400e; }
.ds-fault-serious   { background: #fee2e2; color: #991b1b; }
.ds-fault-dangerous { background: #7f1d1d; color: #fff; }
.ds-mock-fault-note {
  font-size: .76rem;
  color: var(--ds-text-muted);
  font-style: italic;
  width: 100%;
  padding-left: 2px;
}

/* Notes */
.ds-mock-notes {
  padding: 10px 14px;
  font-size: .8rem;
  color: var(--ds-text-muted);
  border-top: 1px solid var(--ds-border);
  background: #fafbfd;
}

/* Actions row */
.ds-mock-actions {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--ds-border);
  background: var(--ds-surface-hover);
}
.ds-btn-ghost {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: .8rem;
  padding: 5px 10px;
  border-radius: var(--ds-radius-xs);
}
.ds-btn-ghost:hover { color: #ef4444; background: #fef2f2; }

/* Empty state */
.ds-mock-empty {
  padding: 16px 18px;
  font-size: .85rem;
  color: var(--ds-text-muted);
}
.ds-mock-no-faults-note {
  padding: 10px 14px;
  font-size: .78rem;
  color: var(--ds-text-muted);
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════
   TEST RECORDS CARD
   ══════════════════════════════════════════════════════════════ */
.ds-test-records-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 640px) {
  .ds-test-records-grid { grid-template-columns: 1fr; }
}
.ds-test-records-grid .ds-test-record-item:first-child {
  border-right: 1px solid var(--ds-border);
}
@media (max-width: 640px) {
  .ds-test-records-grid .ds-test-record-item:first-child {
    border-right: none;
    border-bottom: 1px solid var(--ds-border);
  }
}

.ds-test-record-item {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  transition: background .15s;
}

.ds-test-record-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ds-border);
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, color .2s;
}
.ds-test-record-done .ds-test-record-icon {
  background: #d1fae5;
  color: #059669;
}
.ds-test-record-failed .ds-test-record-icon {
  background: #fee2e2;
  color: #dc2626;
}

.ds-test-record-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ds-test-record-title {
  font-family: var(--ds-font-display);
  font-size: .82rem;
  font-weight: 700;
  color: var(--ds-navy);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ds-test-record-status { min-height: 22px; }

.ds-test-status-badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}
.ds-test-passed  { background: #d1fae5; color: #065f46; }
.ds-test-failed  { background: #fee2e2; color: #991b1b; }
.ds-test-pending { background: var(--ds-border); color: var(--ds-text-muted); }

/* Edit controls (date input + outcome buttons) */
.ds-test-record-edit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.ds-test-date-input {
  padding: 6px 9px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xs);
  font-size: .82rem;
  font-family: var(--ds-font-body);
  color: var(--ds-navy);
  width: 100%;
  box-sizing: border-box;
}
.ds-test-date-input:focus {
  outline: 2px solid var(--ds-navy-light);
  border-color: var(--ds-navy-light);
}

/* Pass / fail / not-taken toggle buttons */
.ds-test-outcome-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ds-test-outcome-btn {
  padding: 5px 12px;
  border: 1.5px solid var(--ds-border-mid);
  border-radius: 7px;
  background: var(--ds-surface);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--ds-text-muted);
  transition: border-color .15s, background .15s, color .15s;
  font-family: var(--ds-font-body);
}
.ds-test-outcome-btn:hover { border-color: var(--ds-border-mid); background: var(--ds-surface-hover); }
.ds-outcome-pass.active  { border-color: #10b981; background: #ecfdf5; color: #065f46; }
.ds-outcome-fail.active  { border-color: #ef4444; background: #fef2f2; color: #991b1b; }
.ds-outcome-none.active  { border-color: var(--ds-navy-light); background: #eff3ff; color: var(--ds-navy); }

/* ══════════════════════════════════════════════════════════════
   MODALS — base rules (restored)
   ══════════════════════════════════════════════════════════════ */
.ds-modal {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.5) !important;
  z-index: 9999 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px;
  box-sizing: border-box;
}
.ds-modal-content {
  background: #fff;
  border-radius: var(--ds-radius);
  max-width: 680px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  position: relative;
}
.ds-modal-lg  { max-width: 800px !important; }
.ds-modal-sm  { max-width: 440px !important; }
.ds-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ds-border);
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ds-navy);
  flex-shrink: 0;
}
.ds-modal-close {
  /* Explicit reset of every visual property a host theme might have touched.
     Prior to this, the button inherited theme styles inconsistently across
     modals (some rendered as a plain X, others as a yellow circle pushed
     left of the title). Now it always renders as a small grey rounded
     square top-right of the header, matching .pt-modal-close. */
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  cursor: pointer;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: var(--ds-text-muted) !important;
  padding: 4px 8px !important;
  margin: 0 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  transition: background .15s, color .15s;
}
.ds-modal-close:hover,
.ds-modal-close:focus-visible {
  background: rgba(15, 23, 42, .06) !important;
  color: var(--ds-navy) !important;
  outline: none !important;
}

/* ── Toast ────────────────────────────────────────────────── */
.ds-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #1e293b;
  color: white;
  padding: 10px 18px;
  border-radius: var(--ds-radius-sm);
  font-size: .875rem;
  z-index: 10000;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  max-width: 320px;
}
.ds-toast.ds-toast-show   { opacity: 1; transform: translateY(0); }
.ds-toast.ds-toast-error  { background: #dc2626; }
.ds-toast.ds-toast-success{ background: #16a34a; }

/* ── Misc ─────────────────────────────────────────────────── */
.ds-loading {
  padding: 24px;
  text-align: center;
  color: var(--ds-text-muted);
  font-size: .9rem;
}
.ds-label {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: #e2e8f0;
  color: #475569;
}

/* ══════════════════════════════════════════════════════════════
   HOME TAB
   ══════════════════════════════════════════════════════════════ */
.ds-home-tab { padding: 0; }

/* ── Greeting ─────────────────────────────────────────────── */
.ds-home-greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
}
.ds-home-greeting-name {
  font-family: var(--ds-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ds-navy);
}
.ds-home-greeting-date {
  font-size: .8rem;
  color: var(--ds-text-muted);
  margin-top: 2px;
}

/* ── Stat row ─────────────────────────────────────────────── */
.ds-home-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
@media (max-width: 700px) { .ds-home-stats { grid-template-columns: repeat(2,1fr); } }
.ds-home-stat {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  padding: 12px 14px;
  text-align: center;
}
.ds-home-stat-alert { border-color: #fcd34d; background: #fffbeb; }
.ds-home-stat-value {
  font-family: var(--ds-font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ds-navy);
  line-height: 1;
}
.ds-home-stat-label {
  font-size: .68rem;
  color: var(--ds-text-muted);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── 2×2 Card grid ────────────────────────────────────────── */
.ds-home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 760px) { .ds-home-grid { grid-template-columns: 1fr; } }

/* Cards: fixed height, internal scroll */
.ds-home-grid .ds-card {
  display: flex;
  flex-direction: column;
  height: 340px;
  overflow: visible;
  margin-bottom: 0;
}
.ds-home-card-body,
.ds-today-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* ── Card header extras ───────────────────────────────────── */
.ds-card-header-sub {
  margin-left: auto;
  font-size: .7rem;
  font-weight: 400;
  color: var(--ds-text-muted);
}
.ds-card-header-link {
  margin-left: auto;
  font-size: .74rem;
  font-weight: 600;
  color: var(--ds-navy-light, #3B5A8F);
  text-decoration: none;
  white-space: nowrap;
}
.ds-card-header-link:hover { text-decoration: underline; }

/* ── Empty states ─────────────────────────────────────────── */
.ds-home-empty {
  padding: 22px 16px;
  text-align: center;
  color: var(--ds-text-muted);
  font-size: .82rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.ds-home-empty svg { opacity: .25; }

/* ── Today's schedule ─────────────────────────────────────── */
.ds-today-list { padding: 2px 0; }
.ds-today-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-today-row:last-child { border-bottom: none; }
.ds-today-done   { opacity: .5; }
.ds-today-active { background: #eff6ff; }
.ds-today-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 48px;
  flex-shrink: 0;
  font-size: .75rem;
  font-weight: 600;
  color: var(--ds-navy);
  padding-top: 1px;
}
.ds-today-dur { font-size: .68rem; font-weight: 400; color: var(--ds-text-muted); }
.ds-today-bar {
  width: 3px;
  align-self: stretch;
  border-radius: 3px;
  background: var(--ds-border);
  flex-shrink: 0;
  margin-top: 2px;
}
.ds-today-upcoming .ds-today-bar { background: #3b82f6; }
.ds-today-active   .ds-today-bar { background: var(--ds-amber); }
.ds-today-done     .ds-today-bar { background: #22c55e; }
.ds-today-info { flex: 1; min-width: 0; }
.ds-today-name { font-size: .84rem; font-weight: 600; color: var(--ds-navy); }
.ds-today-note { font-size: .73rem; color: var(--ds-text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-today-live {
  font-size: .62rem; font-weight: 800;
  background: var(--ds-amber); color: white;
  padding: 2px 6px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: .05em;
  flex-shrink: 0; align-self: center;
}

/* ── This week ────────────────────────────────────────────── */
.ds-week-day-header {
  padding: 5px 16px;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ds-navy-mid, #2a4a82);
  background: #f8fafd;
  border-bottom: 1px solid var(--ds-border);
  border-top: 1px solid var(--ds-border);
  position: sticky;
  top: 0;
}
.ds-week-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--ds-border);
  font-size: .82rem;
}
.ds-week-row:last-child { border-bottom: none; }
.ds-week-time { color: var(--ds-navy); font-weight: 600; min-width: 50px; flex-shrink: 0; font-size: .78rem; }
.ds-week-name { flex: 1; color: var(--ds-text); font-size: .82rem; }
.ds-week-dur  { color: var(--ds-text-muted); font-size: .72rem; flex-shrink: 0; }

/* ── Requests preview ─────────────────────────────────────── */
.ds-home-req-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-home-req-row:last-child { border-bottom: none; }
.ds-home-req-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ds-navy), var(--ds-navy-mid, #2a4a82));
  color: white;
  font-size: .78rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ds-home-req-info { flex: 1; min-width: 0; }
.ds-home-req-name { font-size: .82rem; font-weight: 600; color: var(--ds-navy); }
.ds-home-req-date { font-size: .72rem; color: var(--ds-text-muted); margin-top: 1px; }

/* ── Modal sizing ─────────────────────────────────────────── */
.ds-modal-md { max-width: 520px !important; }
.ds-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .ds-form-row-2 { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════
   CALENDAR ENHANCEMENTS
   ══════════════════════════════════════════════════════════════ */
/* Legend */
.ds-cal-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .75rem;
  color: var(--ds-text-muted);
}
.ds-cal-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Event content */
.ds-fc-event {
  padding: 2px 5px;
  overflow: hidden;
  line-height: 1.3;
}
.ds-fc-event-name {
  font-weight: 700;
  font-size: .78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-fc-event-time {
  font-size: .7rem;
  opacity: .85;
}
/* v0.9.330 — payment marker on calendar lesson events. A compact '£' chip
   with a solid light background so it stays legible on any event colour
   (scheduled blue / completed green / cancelled red). Green = covered,
   red = not paid for. */
.ds-fc-pay {
  display: inline-block;
  min-width: 14px;
  text-align: center;
  padding: 0 3px;
  margin-right: 3px;
  border-radius: 4px;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.4;
  vertical-align: 1px;
}
.ds-fc-pay-ok  { background: #DCFCE7; color: #166534; }
.ds-fc-pay-owe { background: #FEE2E2; color: #B91C1C; }

/* Calendar container */
#ds-calendar {
  padding: 0 4px 8px;
}
.fc-timegrid-slot { cursor: pointer; }
.fc-timegrid-slot:hover { background: rgba(42,74,130,.04) !important; }

/* Calendar intro + mini agenda */
.ds-calendar-intro .ds-card-header,
.ds-calendar-upcoming .ds-card-header {
  padding-bottom: 12px !important;
}
.ds-calendar-hint-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 18px 18px;
}
.ds-calendar-hint-item {
  background: linear-gradient(180deg, rgba(42,74,130,.05), rgba(42,74,130,.02));
  border: 1px solid rgba(42,74,130,.08);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ds-navy);
}
.ds-calendar-mini-list {
  padding: 10px 0 14px;
}
.ds-calendar-mini-row {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid var(--ds-border);
}
.ds-calendar-mini-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--ds-surface-soft);
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  padding: 8px 0;
}
.ds-calendar-mini-day {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ds-navy);
  line-height: 1;
}
.ds-calendar-mini-month {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ds-text-muted);
  margin-top: 2px;
}
.ds-calendar-mini-info { min-width: 0; }
.ds-calendar-mini-name {
  font-weight: 700;
  font-size: .9rem;
  color: var(--ds-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-calendar-mini-meta {
  font-size: .75rem;
  color: var(--ds-text-muted);
  margin-top: 2px;
}
.ds-calendar-mini-status {
  font-size: .7rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.ds-status-scheduled { background: #dbeafe; color: #1d4ed8; }
.ds-status-completed { background: #dcfce7; color: #15803d; }
.ds-status-cancelled { background: #fee2e2; color: #b91c1c; }
@media (max-width: 640px) {
  .ds-calendar-hint-grid {
    grid-template-columns: 1fr;
  }
  .ds-calendar-mini-row {
    grid-template-columns: 46px minmax(0,1fr);
    align-items: start;
  }
  .ds-calendar-mini-status {
    grid-column: 1 / -1;
    justify-self: start;
    margin-left: 58px;
    margin-top: -6px;
  }
}

/* moved to consolidated block — see "CALENDAR — CONSOLIDATED" at bottom of file */

/* ── MANAGER DASHBOARD ──────────────────────── */
.ds-manager-wrap         { max-width:1400px; margin:0 auto; padding:28px; box-sizing:border-box; }

.ds-manager-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.ds-mstat-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: 18px 20px;
  box-shadow: var(--ds-shadow);
}
.ds-mstat-value         { font-family:'Syne',sans-serif; font-size:1.8rem; font-weight:700; color:var(--ds-navy); }
.ds-mstat-label         { font-size:.78rem; color:var(--ds-text-muted); margin-top:2px; text-transform:uppercase; letter-spacing:.04em; }
.ds-mstat-money .ds-mstat-value { color:#059669; }
.ds-mstat-warn  .ds-mstat-value { color:#dc2626; }

[data-ds-theme="dark"] .ds-mstat-value { color: var(--ds-text); }

.ds-manager-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}
.ds-manager-main    { display:flex; flex-direction:column; gap:16px; }
.ds-manager-sidebar { display:flex; flex-direction:column; gap:16px; }

.ds-manager-table-wrap  { overflow-x:auto; }
.ds-manager-table       { width:100%; border-collapse:collapse; font-size:.88rem; }
.ds-manager-table th    { padding:10px 12px; text-align:left; font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ds-text-muted); border-bottom:2px solid var(--ds-border); }
.ds-manager-table td    { padding:10px 12px; border-bottom:1px solid var(--ds-border); vertical-align:middle; }
.ds-manager-table tr:hover td { background:var(--ds-surface-hover); }
.ds-manager-pupil-name  { font-weight:600; color:var(--ds-text); }
.ds-manager-pupil-email { font-size:.78rem; color:var(--ds-text-muted); }

.ds-manager-alert-card .ds-card-header { border-bottom:1px solid #fecaca; background:#fef2f2; }
.ds-manager-assign-row  { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--ds-border); gap:12px; flex-wrap:wrap; }

.ds-manager-instr-row   { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--ds-border); }
.ds-manager-instr-avatar { width:36px; height:36px; border-radius:50%; background:var(--ds-navy-mid); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; flex-shrink:0; }
.ds-manager-instr-name  { font-weight:600; font-size:.9rem; }
.ds-manager-instr-meta  { font-size:.78rem; color:var(--ds-text-muted); margin-top:2px; }

@media (max-width:1100px) {
  .ds-manager-stats { grid-template-columns: repeat(3,1fr); }
  .ds-manager-grid  { grid-template-columns: 1fr; }
}
@media (max-width:640px) {
  .ds-manager-stats { grid-template-columns: repeat(2,1fr); }
  .ds-manager-wrap  { padding:14px; }
}

/* ── MANAGER TABS ───────────────────────────── */
.ds-manager-tabs {
  display: flex; gap: 4px; margin-bottom: 20px;
  border-bottom: 2px solid var(--ds-border); padding-bottom: 0;
}
.ds-manager-tab {
  padding: 10px 20px; font-size: .88rem; font-weight: 600;
  color: var(--ds-text-muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  border-radius: var(--ds-radius-xs) var(--ds-radius-xs) 0 0;
  transition: color .15s, border-color .15s;
}
.ds-manager-tab:hover { color: var(--ds-text); }
.ds-manager-tab.active { color: var(--ds-navy-mid); border-bottom-color: var(--ds-navy-mid); }
[data-ds-theme="dark"] .ds-manager-tab.active { color: var(--ds-amber); border-bottom-color: var(--ds-amber); }

/* ── MANAGER SETTINGS ───────────────────────── */
.ds-settings-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px; margin-bottom: 16px;
}
.ds-settings-body  { padding: 16px 20px 20px; }
.ds-settings-body .ds-form-group { margin-bottom: 14px; }
.ds-settings-body .ds-form-group label { display:block; font-size:.85rem; font-weight:600; margin-bottom:5px; }
.ds-settings-toggle { display:flex; align-items:center; gap:10px; font-size:.9rem; cursor:pointer; }
.ds-settings-toggle input[type=checkbox] { width:16px; height:16px; }

.ds-manager-settings-wrap { max-width: 860px; }

@media (max-width: 700px) {
  .ds-settings-grid { grid-template-columns: 1fr; }
  .ds-manager-tabs  { overflow-x: auto; }
}

/* ── MANAGER SETTINGS PANEL ─────────────────── */
.ds-manager-settings-wrap { max-width: 900px; }
.ds-settings-grid         { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.ds-settings-body         { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.ds-field-hint            { font-size: .79rem; color: var(--ds-text-muted); display: block; margin-top: 3px; }
.ds-settings-toggle       { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .9rem; line-height: 1.5; }
.ds-settings-toggle input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--ds-navy-mid); }
@media (max-width: 700px) {
  .ds-settings-grid { grid-template-columns: 1fr; }
}

/* ── HELP TOOLTIPS ──────────────────────────── */
.ds-help-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: #F1F5F9; color: #64748B;
  cursor: help; flex-shrink: 0; margin-left: 6px;
  border: none;
  transition: background .15s, color .15s, transform .12s;
  position: relative; vertical-align: middle;
  font-size: 0; /* hide any text content; SVG fills it */
}
.ds-help-icon::before {
  content: '';
  display: block;
  width: 16px; height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: center;
}
.ds-help-icon:hover {
  background: #0F172A;
  transform: scale(1.05);
}
.ds-help-icon:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

/* Tooltip via JS-positioned div — not ::after, so it escapes overflow:hidden */
.ds-tooltip-bubble {
  position: fixed;
  background: #0F172A; color: #FFFFFF;
  font-size: .82rem; font-weight: 500; font-family: 'DM Sans', system-ui, sans-serif;
  line-height: 1.5; max-width: 280px; min-width: 160px;
  padding: 10px 14px; border-radius: 8px;
  box-shadow: 0 10px 30px rgba(15,23,42,.18), 0 4px 12px rgba(15,23,42,.08);
  pointer-events: none; z-index: 99999;
  opacity: 0; transition: opacity .15s ease, transform .15s ease;
  transform: translateY(4px);
}
.ds-tooltip-bubble.visible { opacity: 1; transform: translateY(0); }
.ds-tooltip-bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #0F172A;
}

/* Tour button */
.ds-tour-btn {
  background: none; border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px; color: rgba(255,255,255,.8);
  font-size: .78rem; font-weight: 600; padding: 4px 12px;
  cursor: pointer; display: flex; align-items: center; gap: 5px;
  transition: background .15s, color .15s; white-space: nowrap;
}
.ds-tour-btn:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Tour overlay + spotlight */
.ds-tour-overlay {
  position: fixed; inset: 0; z-index: 9998;
  pointer-events: none;
}
.ds-tour-overlay-dark {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9997;
  pointer-events: all;
}
.ds-tour-spotlight {
  position: fixed; z-index: 9998; border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.55);
  pointer-events: none; transition: all .25s ease;
}
.ds-tour-card {
  position: fixed; z-index: 9999;
  background: #fff; border-radius: 12px;
  box-shadow: 0 8px 32px rgba(12,30,61,.25);
  width: 320px; padding: 20px 22px;
  font-family: 'DM Sans', Arial, sans-serif;
  transition: top .25s ease, left .25s ease;
}
.ds-tour-card-title {
  font-family: 'Syne', Arial, sans-serif;
  font-size: 1rem; font-weight: 700; color: #0C1E3D;
  margin: 0 0 8px;
}
.ds-tour-card-desc  { font-size: .875rem; color: #475569; line-height: 1.55; margin: 0 0 16px; }
.ds-tour-card-foot  { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ds-tour-progress   { font-size: .75rem; color: #94A3B8; }
.ds-tour-card-btns  { display: flex; gap: 8px; }
.ds-tour-prev-btn   { padding: 6px 14px; border: 1px solid #e2e8f0; background: #fff; border-radius: 7px; font-size: .82rem; font-weight: 600; cursor: pointer; color: #475569; }
.ds-tour-next-btn   { padding: 6px 14px; background: #0C1E3D; color: #fff; border: none; border-radius: 7px; font-size: .82rem; font-weight: 600; cursor: pointer; }
.ds-tour-close-btn  { position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 1.1rem; cursor: pointer; color: #94A3B8; line-height: 1; }
.ds-tour-prev-btn:hover { background: #f8fafc; }
.ds-tour-next-btn:hover { background: #1a3461; }
[data-ds-theme="dark"] .ds-tour-card { background: #1e293b; }
[data-ds-theme="dark"] .ds-tour-card-title { color: #e2e8f0; }
[data-ds-theme="dark"] .ds-tour-card-desc  { color: #94a3b8; }
[data-ds-theme="dark"] .ds-tour-prev-btn   { background: #263347; border-color: #2d3f5a; color: #94a3b8; }


/* ── MANAGER CURRICULUM EDITOR ─────────────────────────── */
.ds-manager-curr-editor { max-width: 760px; }
.ds-mgr-cat-card { margin-bottom: 12px; }
.ds-mgr-skill-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; border-bottom: 1px solid var(--ds-border);
}
.ds-mgr-skill-row:last-of-type { border-bottom: none; }
.ds-mgr-skill-name { font-size: .88rem; color: var(--ds-text); flex: 1; }
.ds-mgr-skill-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ds-mgr-add-skill-row {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 0 8px;
}
.ds-mgr-add-skill-row .ds-input { flex: 1; font-size: .85rem; padding: 5px 10px; }

/* ── FORCED PASSWORD CHANGE ─────────────────────────────── */
.ds-auth-force-notice {
  display: flex; align-items: flex-start; gap: 8px;
  background: #fef3c7; border: 1px solid #fcd34d;
  border-radius: 8px; padding: 10px 14px;
  font-size: .84rem; color: #92400e; line-height: 1.5;
  margin: 0 0 16px;
}
.ds-auth-force-notice svg { flex-shrink: 0; margin-top: 1px; color: #d97706; }

/* ════════════════════════════════════════════════════════════
   PASSTRACK UI REFRESH — appended overrides
   ════════════════════════════════════════════════════════════ */

/* ── GLOBAL ─────────────────────────────────────────────────── */
.ds-wrap {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
}
.ds-wrap { background: #F0F4FA !important; }

.ds-card {
  border: none !important;
  box-shadow: 0 1px 3px rgba(12,30,61,.04), 0 6px 20px rgba(12,30,61,.06) !important;
  border-radius: 16px !important;
  margin-bottom: 16px !important;
}
.ds-card-header {
  font-size: .72rem !important;
  letter-spacing: .08em !important;
  padding: 16px 20px 14px !important;
  border-bottom: 1px solid rgba(12,30,61,.06) !important;
  color: var(--ds-text-muted) !important;
  background: transparent !important;
}

/* ── HERO ────────────────────────────────────────────────────── */
.ds-pupil-hero {
  background: linear-gradient(140deg, #0A1830 0%, #0C1E3D 45%, #172D58 100%);
  padding: 0;
  position: relative;
  overflow: hidden;
}
.ds-pupil-hero-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 22px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ── Hero left: dial ── */
.ds-hero-dial-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ds-hero-dial { display: block; }
.ds-hero-dial-caption {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  text-align: center;
}

/* ── Hero right: identity + stat list ── */
.ds-hero-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ds-hero-identity-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ds-hero-identity-row .ds-hero-avatar-wrap {
  width: 44px !important;
  height: 44px !important;
  border-width: 2px !important;
  flex-shrink: 0;
}
.ds-hero-identity-row .ds-hero-avatar-initial { font-size: 1.05rem !important; }
.ds-hero-identity-row .ds-hero-identity-text { flex: 1; min-width: 0; }
.ds-hero-identity-row .ds-hero-name {
  font-size: 1.15rem !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-hero-identity-row .ds-hero-meta { margin-top: 3px; }

/* ── Stat list ── */
.ds-hero-statlist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds-hero-statrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: rgba(255,255,255,.85);
  line-height: 1.2;
}
.ds-hero-statrow--next {
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 8px;
  padding: 6px 10px;
  margin-top: 2px;
}
.ds-hero-statrow--next .ds-hero-statrow-value { color: #FCD34D; }
.ds-hero-statrow-icon {
  color: rgba(255,255,255,.4);
  flex-shrink: 0;
}
.ds-hero-statrow--next .ds-hero-statrow-icon { color: #FBBF24; }
.ds-hero-statrow-value {
  font-weight: 800;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.ds-hero-statrow-label {
  color: rgba(255,255,255,.55);
}

/* ── Hero mobile sizing ── */
@media (max-width: 540px) {
  .ds-pupil-hero-inner { gap: 18px; padding: 20px; }
  .ds-hero-dial-wrap svg { width: 96px; height: 96px; }
}
@media (max-width: 380px) {
  .ds-pupil-hero-inner { gap: 14px; padding: 18px 16px; }
  .ds-hero-dial-wrap svg { width: 86px; height: 86px; }
  .ds-hero-statrow { font-size: .78rem; }
  .ds-hero-identity-row .ds-hero-name { font-size: 1.05rem !important; }
}

/* ── TAB NAV ─────────────────────────────────────────────────── */
.dsp-tab-nav {
  display: flex;
  align-items: stretch;
  background: #FFFFFF;
  border-bottom: 2px solid var(--ds-border);
  overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
  position: sticky; top: 0; z-index: 50;
}
.dsp-tab-nav::-webkit-scrollbar { display: none; }
.dsp-tab-link {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 20px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ds-text-muted); text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.dsp-tab-link:hover { color: var(--ds-navy); text-decoration: none; }
.dsp-tab-link.dsp-tab-active { color: var(--ds-navy); border-bottom-color: var(--ds-amber); }
.dsp-tab-link svg { flex-shrink: 0; opacity: .6; }
.dsp-tab-link.dsp-tab-active svg { opacity: 1; }

@media (max-width: 480px) {
  .dsp-tab-link { padding: 12px 14px; font-size: .7rem; gap: 4px; }
  .dsp-tab-link svg { width: 13px; height: 13px; }
}

/* ── UPCOMING LESSONS ────────────────────────────────────────── */
.ds-upcoming-item { padding: 14px 20px !important; transition: background .15s; }
.ds-upcoming-item:hover { background: var(--ds-surface-hover); }
.ds-upcoming-day {
  font-size: 1.1rem !important; font-weight: 800 !important;
  line-height: 1 !important; color: #FFFFFF !important;
  font-family: var(--ds-font-display) !important;
}
.ds-upcoming-month { font-size: .58rem !important; letter-spacing: .08em !important; color: rgba(255,255,255,.75) !important; }
.ds-upcoming-time { font-size: .95rem !important; font-weight: 600 !important; color: var(--ds-navy) !important; }
.ds-upcoming-meta { font-size: .78rem !important; color: var(--ds-text-muted) !important; margin-top: 2px !important; }
.ds-cancel-lesson-btn { font-size: .72rem !important; padding: 5px 12px !important; border-radius: 20px !important; opacity: .7; transition: opacity .15s; }
.ds-cancel-lesson-btn:hover { opacity: 1; }

/* ── LAST LESSON CARD ────────────────────────────────────────── */
.dsp-last-lesson-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.dsp-last-lesson-date { font-size: .82rem; color: var(--ds-text-muted); font-weight: 500; }
.dsp-last-lesson-grade { display: flex; align-items: baseline; gap: 4px; font-weight: 700; }
.dsp-grade-num { font-family: var(--ds-font-display); font-size: 2.4rem; line-height: 1; font-weight: 800; }
.dsp-grade-label { font-size: .9rem; color: var(--ds-text-muted); font-weight: 400; }
.dsp-last-lesson-no-grade { font-size: .85rem; color: var(--ds-text-subtle); font-style: italic; }
.dsp-last-lesson-note {
  font-size: .83rem; color: var(--ds-text-muted); line-height: 1.5;
  border-left: 3px solid var(--ds-amber); padding-left: 10px; margin-top: 4px;
}

/* ── INPUTS & BUTTONS ────────────────────────────────────────── */
.ds-input {
  border-radius: 10px !important; border: 1.5px solid var(--ds-border) !important;
  padding: 10px 14px !important; font-size: .9rem !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.ds-input:focus { border-color: var(--ds-navy-mid) !important; box-shadow: 0 0 0 3px rgba(26,52,97,.1) !important; outline: none !important; }
.ds-btn-primary { border-radius: 10px !important; font-weight: 700 !important; transition: all .15s !important; }
.ds-btn-primary:hover { filter: brightness(1.1) !important; transform: translateY(-1px) !important; }
.ds-btn-outline { border-radius: 10px !important; font-weight: 600 !important; }

/* ── MOBILE ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ds-pupil-grid, .ds-pupil-lower-grid { padding: 12px !important; gap: 18px !important; }
  .ds-pupil-wrap .ds-pupil-lower-grid { padding-top: 0 !important; }
  .ds-hero-name { font-size: 1.3rem !important; }
  .ds-stat-card { padding: 10px 12px !important; min-width: 0 !important; }
  .ds-stat-value { font-size: 1.25rem !important; }
  .ds-card { border-radius: 14px !important; }
}

/* ── MOBILE BOTTOM NAV ───────────────────────────────────────── */
.ds-pupil-bottom-nav {
  background: var(--ds-navy) !important; border-top: none !important;
  box-shadow: 0 -4px 24px rgba(12,30,61,.25) !important;
  padding: 0 !important; height: 60px !important;
}
.ds-pupil-bottom-nav a {
  color: rgba(255,255,255,.45) !important; font-size: .6rem !important;
  font-weight: 700 !important; letter-spacing: .05em !important;
  text-transform: uppercase !important; gap: 4px !important;
  padding: 8px 4px !important; transition: color .15s !important;
}
.ds-pupil-bottom-nav a:hover, .ds-pupil-bottom-nav a.active { color: var(--ds-amber) !important; }


/* ════════════════════════════════════════════════════════════
   BOTTOM NAV — ALL SCREEN SIZES (primary navigation)
   ════════════════════════════════════════════════════════════ */

/* Show on all screens — override the mobile-only rule */
.ds-pupil-bottom-nav {
  display: flex !important;
  position: fixed !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  background: var(--ds-navy) !important;
  border-top: none !important;
  box-shadow: 0 -4px 24px rgba(12,30,61,.3) !important;
  padding: 0 !important;
  height: 64px !important;
  z-index: 100 !important;
}
.ds-pupil-bottom-nav a {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: rgba(255,255,255,.4) !important;
  font-size: .58rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 8px 4px !important;
  transition: color .15s !important;
  position: relative !important;
}
.ds-pupil-bottom-nav a:hover,
.ds-pupil-bottom-nav a.active {
  color: var(--ds-amber) !important;
}
/* Active indicator — amber dot above icon */
.ds-pupil-bottom-nav a.active::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 32px; height: 3px;
  background: var(--ds-amber);
  border-radius: 0 0 3px 3px;
}

/* Give the page body padding so content isn't hidden behind the nav */
.ds-pupil-wrap {
  padding-bottom: 80px !important;
}

/* On desktop: constrain nav width and center it */
@media (min-width: 768px) {
  .ds-pupil-bottom-nav {
    max-width: 480px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    border-radius: 20px 20px 0 0 !important;
  }
}

/* Hide the old top tab nav (replaced by bottom nav) */
.dsp-tab-nav { display: none !important; }


/* ════════════════════════════════════════════════════════════
   LAYOUT FIXES — v2.5.16
   ════════════════════════════════════════════════════════════ */

/* ── BOTTOM NAV — larger, more professional ─────────────────── */
.ds-pupil-bottom-nav {
  height: 72px !important;
}
.ds-pupil-bottom-nav a {
  font-size: .62rem !important;
  gap: 5px !important;
}
.ds-pupil-bottom-nav a svg {
  width: 22px !important;
  height: 22px !important;
}
/* Desktop — wider, floating panel */
@media (min-width: 768px) {
  .ds-pupil-bottom-nav {
    max-width: 560px !important;
    height: 76px !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -8px 40px rgba(12,30,61,.35) !important;
  }
  .ds-pupil-bottom-nav a {
    font-size: .68rem !important;
    gap: 6px !important;
    padding: 10px 8px !important;
  }
  .ds-pupil-bottom-nav a svg {
    width: 24px !important;
    height: 24px !important;
  }
  /* More padding for content so it clears the nav */
  .ds-pupil-wrap { padding-bottom: 96px !important; }
}

/* ── LESSONS TAB — request card full width ──────────────────── */
/* When only the left col is shown, make it span full width */
.ds-pupil-lower-left {
  grid-column: 1 / -1;
  display: grid;
  gap: 18px;
}
.ds-pupil-lower-grid {
  grid-template-columns: 1fr !important;
}

/* ── MESSAGES TAB — full width ──────────────────────────────── */
.ds-pupil-lower-right {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
}
.ds-pupil-messages-card {
  flex: 1;
  min-height: 480px;
}
.ds-pupil-msg-thread {
  min-height: 320px !important;
  max-height: 60vh !important;
}


/* ════════════════════════════════════════════════════════════
   PUPIL DASHBOARD — COMPLETE LAYOUT OVERHAUL v2.5.17
   Single source of truth. All earlier conflicting rules below
   are intentionally overridden here.
   ════════════════════════════════════════════════════════════ */

/* ── CONTENT CONTAINER ──────────────────────────────────────── */
/* Unified container for all tab content — single column, centred */
.ds-pupil-wrap .ds-pupil-grid,
.ds-pupil-wrap .ds-pupil-lower-grid {
  display: block !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  padding: 20px 20px 12px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Sidebar stacks as a normal block inside the grid */
.ds-pupil-wrap .ds-pupil-sidebar {
  display: block !important;
  width: 100% !important;
}

/* ── CARD UNIFORMITY ─────────────────────────────────────────── */
/* Every card: same width, same radius, same shadow, same margin */
.ds-pupil-wrap .ds-card {
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(12,30,61,.06), 0 1px 2px rgba(12,30,61,.04) !important;
  margin-bottom: 16px !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
}
.ds-pupil-wrap .ds-card-header {
  padding: 14px 18px !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--ds-text-muted) !important;
  border-bottom: 1px solid rgba(12,30,61,.06) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ── MESSAGES CARD — full width, proper height ───────────────── */
.ds-pupil-wrap .ds-pupil-lower-grid {
  display: block !important;
}
.ds-pupil-wrap .ds-pupil-lower-left,
.ds-pupil-wrap .ds-pupil-lower-right {
  display: grid !important;
  gap: 18px !important;
  width: 100% !important;
}
.ds-pupil-wrap .ds-pupil-messages-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 500px !important;
}
.ds-pupil-wrap .ds-pupil-msg-thread {
  flex: 1 !important;
  min-height: 300px !important;
  max-height: 55vh !important;
  overflow-y: auto !important;
}

/* ── BOTTOM NAV — polished, app-quality ─────────────────────── */
.ds-pupil-bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 680px !important;  /* matches content width */
  height: 68px !important;
  background: rgba(10, 18, 40, 0.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  display: flex !important;
  align-items: stretch !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,.2) !important;
  border-radius: 0 !important;
  z-index: 200 !important;
}
/* Rounded top corners on desktop */
@media (min-width: 480px) {
  .ds-pupil-bottom-nav {
    border-radius: 20px 20px 0 0 !important;
    border-left: 1px solid rgba(255,255,255,.06) !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
  }
}
.ds-pupil-bottom-nav a {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: rgba(255,255,255,.35) !important;
  font-size: .58rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 10px 6px 8px !important;
  transition: color .2s !important;
  position: relative !important;
}
.ds-pupil-bottom-nav a svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 1.75 !important;
  transition: transform .2s !important;
}
.ds-pupil-bottom-nav a:hover { color: rgba(255,255,255,.65) !important; }
.ds-pupil-bottom-nav a.active {
  color: #FFFFFF !important;
}
.ds-pupil-bottom-nav a.active svg {
  transform: translateY(-1px) !important;
}
/* Amber active dot at top of each active tab */
.ds-pupil-bottom-nav a.active::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 2.5px;
  background: var(--ds-amber);
  border-radius: 0 0 3px 3px;
}
/* Content padding to clear nav */
.ds-pupil-wrap { padding-bottom: 84px !important; }

/* ── MOBILE FINE-TUNING ──────────────────────────────────────── */
@media (max-width: 480px) {
  .ds-pupil-wrap .ds-pupil-grid,
  .ds-pupil-wrap .ds-pupil-lower-grid {
    padding: 14px 14px 8px !important;
  }
  .ds-pupil-bottom-nav { height: 62px !important; }
  .ds-pupil-bottom-nav a { font-size: .54rem !important; gap: 3px !important; }
  .ds-pupil-bottom-nav a svg { width: 20px !important; height: 20px !important; }
}


/* ════════════════════════════════════════════════════════════
   INSTRUCTOR DASHBOARD POLISH — v2.5.19
   CSS only — no PHP changes
   ════════════════════════════════════════════════════════════ */

/* ── TOP TAB NAV ─────────────────────────────────────────────── */
.ds-instructor-wrap .ds-nav-tabs {
  background: var(--ds-navy) !important;
  border-bottom: none !important;
  padding: 0 20px !important;
  gap: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
}
.ds-instructor-wrap .ds-tab {
  color: rgba(255,255,255,.45) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  height: 48px !important;
  padding: 0 14px !important;
  border-bottom: 3px solid transparent !important;
  transition: color .15s, border-color .15s !important;
}
.ds-instructor-wrap .ds-tab:hover {
  color: rgba(255,255,255,.8) !important;
  text-decoration: none !important;
}
.ds-instructor-wrap .ds-tab.active {
  color: #FFFFFF !important;
  border-bottom-color: var(--ds-amber) !important;
  font-weight: 700 !important;
}
.ds-instructor-wrap .ds-tab svg { opacity: .5 !important; }
.ds-instructor-wrap .ds-tab.active svg { opacity: 1 !important; }
.ds-instructor-wrap .ds-badge {
  background: var(--ds-amber) !important;
  color: var(--ds-navy) !important;
}

/* ── CONTENT WIDTH ───────────────────────────────────────────── */
.ds-instructor-wrap .ds-tab-content {
  max-width: 900px !important;
  padding: 24px 20px !important;
}

/* ── STAT PILLS ──────────────────────────────────────────────── */
.ds-instructor-wrap .ds-home-stats {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 20px !important;
}
.ds-instructor-wrap .ds-home-stat {
  flex: 1 !important;
  min-width: 100px !important;
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(12,30,61,.07) !important;
  padding: 14px 16px !important;
  text-align: center !important;
}
.ds-instructor-wrap .ds-home-stat-alert {
  background: #fffbeb !important;
  box-shadow: 0 2px 8px rgba(245,158,11,.15) !important;
}
.ds-instructor-wrap .ds-home-stat-value {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: var(--ds-navy) !important;
}
.ds-instructor-wrap .ds-home-stat-alert .ds-home-stat-value {
  color: var(--ds-amber-dark) !important;
}

/* ── HOME GRID ───────────────────────────────────────────────── */
.ds-instructor-wrap .ds-home-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  align-items: start !important;
}
@media (max-width: 640px) {
  .ds-instructor-wrap .ds-home-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── CARDS ───────────────────────────────────────────────────── */
.ds-instructor-wrap .ds-card {
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(12,30,61,.06), 0 1px 2px rgba(12,30,61,.04) !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;  /* grid gap handles spacing */
}
.ds-instructor-wrap .ds-home-grid .ds-card {
  height: 100% !important;
}
.ds-instructor-wrap .ds-card-header {
  padding: 14px 18px !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--ds-text-muted) !important;
  border-bottom: 1px solid rgba(12,30,61,.06) !important;
}

/* ── TODAY SCHEDULE ──────────────────────────────────────────── */
.ds-today-row {
  padding: 11px 16px !important;
  gap: 12px !important;
}
.ds-today-time span:first-child {
  font-size: .88rem !important;
  font-weight: 700 !important;
  color: var(--ds-navy) !important;
}
.ds-today-dur {
  font-size: .72rem !important;
  color: var(--ds-text-muted) !important;
}
.ds-today-name {
  font-size: .88rem !important;
  font-weight: 600 !important;
  color: var(--ds-navy) !important;
}
.ds-today-live {
  background: #dcfce7 !important;
  color: #15803d !important;
  font-size: .62rem !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
  letter-spacing: .05em !important;
}

/* ── WEEK ROWS ───────────────────────────────────────────────── */
.ds-week-day-header {
  font-size: .65rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--ds-text-subtle) !important;
  padding: 8px 16px 4px !important;
  background: #f8fafc !important;
}
.ds-week-row { padding: 8px 16px !important; font-size: .85rem !important; }
.ds-week-name { font-weight: 600 !important; color: var(--ds-navy) !important; }
.ds-week-time { color: var(--ds-text-muted) !important; min-width: 56px !important; }
.ds-week-dur  { color: var(--ds-text-subtle) !important; font-size: .78rem !important; }

/* ── UPCOMING TESTS ──────────────────────────────────────────── */
.ds-upcoming-test-row { padding: 10px 16px !important; }
.ds-upcoming-test-avatar {
  background: var(--ds-navy) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
  width: 32px !important; height: 32px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: .82rem !important; flex-shrink: 0 !important;
}
.ds-upcoming-test-name  { font-size: .88rem !important; font-weight: 600 !important; }
.ds-upcoming-test-detail{ font-size: .75rem !important; color: var(--ds-text-muted) !important; }
.ds-upcoming-test-days  {
  font-size: .72rem !important; font-weight: 700 !important;
  background: #f1f5f9 !important; color: var(--ds-text-muted) !important;
  padding: 3px 10px !important; border-radius: 20px !important;
  flex-shrink: 0 !important;
}
.ds-test-soon {
  background: #fff1f2 !important; color: #dc2626 !important;
}

/* ── LESSON REQUESTS ─────────────────────────────────────────── */
.ds-home-req-row { padding: 10px 16px !important; }
.ds-home-req-avatar {
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important;
  background: var(--ds-amber) !important;
  color: var(--ds-navy) !important;
  font-weight: 800 !important; font-size: .8rem !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
.ds-home-req-name { font-size: .88rem !important; font-weight: 600 !important; }
.ds-home-req-date { font-size: .75rem !important; color: var(--ds-text-muted) !important; margin-top: 1px !important; }

/* ── GREETING ────────────────────────────────────────────────── */
.ds-instructor-wrap .ds-home-greeting {
  background: linear-gradient(135deg, var(--ds-navy) 0%, #172d58 100%) !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
  margin-bottom: 20px !important;
  color: white !important;
}
.ds-home-greeting-name {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
}
.ds-home-greeting-date {
  color: rgba(255,255,255,.55) !important;
  font-size: .8rem !important;
}
.ds-instructor-wrap .ds-home-greeting .ds-btn-primary {
  background: var(--ds-navy) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(12,30,61,.28) !important;
}

/* ── EMPTY STATES ────────────────────────────────────────────── */
.ds-home-empty {
  padding: 24px 16px !important;
  text-align: center !important;
  color: var(--ds-text-muted) !important;
  font-size: .85rem !important;
}
.ds-home-empty svg { opacity: .3 !important; margin-bottom: 8px !important; }
.ds-home-empty p { margin: 0 0 12px !important; }

/* ── MOBILE ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ds-instructor-wrap .ds-tab-content { padding: 14px !important; }
  .ds-instructor-wrap .ds-nav-tabs { padding: 0 8px !important; }
  .ds-instructor-wrap .ds-tab { padding: 0 10px !important; font-size: .65rem !important; }
}


/* ════════════════════════════════════════════════════════════
   PUPIL MOBILE FIXES — v2.5.20
   Hero overflow, timeline date squashing, request form mobile
   ════════════════════════════════════════════════════════════ */

/* ── HERO — new layout uses ds-pupil-hero-inner, not flex on the outer element ── */
.ds-pupil-hero {
  padding: 0 !important;
  flex-wrap: unset !important;
  align-items: unset !important;
  gap: unset !important;
  overflow: hidden !important;
}
.ds-hero-identity {
  flex-shrink: 0 !important;
  min-width: 0 !important;
}
.ds-hero-identity-text {
  min-width: 0 !important;
}
.ds-hero-name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 180px !important;
}
.ds-hero-stats {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.ds-stat-card {
  flex: 1 1 0 !important;
  min-width: 0 !important;        /* allow shrinking below content width */
  padding: 10px 8px !important;
}
.ds-stat-value {
  font-size: 1.2rem !important;
}
.ds-stat-label {
  font-size: .55rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Hide progress bar on narrow screens to save space */
@media (max-width: 420px) {
  .ds-stat-progress-bar-track { display: none !important; }
  .ds-hero-name { max-width: 120px !important; }
}

/* ── TIMELINE HEADER — clean hierarchy, no squashing ─────────── */
.ds-timeline-header {
  display: grid !important;
  grid-template-columns: 1fr auto !important;  /* date left, badges right */
  align-items: start !important;
  gap: 6px 10px !important;
  padding: 12px 16px !important;
  flex-wrap: unset !important;   /* remove old flex-wrap */
}
.ds-timeline-date {
  font-size: .9rem !important;
  font-weight: 700 !important;
  color: var(--ds-navy) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: unset !important;        /* remove old flex:1 */
  grid-column: 1 !important;
  grid-row: 1 !important;
}
.ds-timeline-meta {
  font-size: .75rem !important;
  color: var(--ds-text-muted) !important;
  white-space: normal !important;   /* allow wrapping on its own line */
  grid-column: 1 !important;
  grid-row: 2 !important;
}
/* Badges (status + grade) sit on the right, rows 1-2 */
.ds-timeline-header .ds-status-badge,
.ds-timeline-header .ds-grade-overall {
  grid-column: 2 !important;
  align-self: center !important;
}
.ds-timeline-header .ds-status-badge { grid-row: 1 !important; }
.ds-timeline-header .ds-grade-overall { grid-row: 2 !important; }

/* Grade pill — more readable */
.ds-grade-overall {
  font-size: .72rem !important;
  padding: 2px 8px !important;
  background: var(--ds-navy) !important;
  color: white !important;
  border-radius: 20px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

/* ── REQUEST A LESSON — stack vertically on mobile ───────────── */
/* Override the inline-style flex row */
.ds-pupil-wrap .ds-pupil-lower-left .ds-card > div[style*="padding"] > div[style*="flex"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
@media (max-width: 480px) {
  .ds-pupil-wrap .ds-pupil-lower-left .ds-card > div[style*="padding"] > div[style*="flex"] {
    grid-template-columns: 1fr !important;  /* full stack on small screens */
  }
}
/* Form inputs — full width, no overflow */
.ds-pupil-wrap .ds-form-group {
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 10px !important;
}
.ds-pupil-wrap .ds-form-group .ds-input {
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Submit button — full width on mobile */
@media (max-width: 480px) {
  .ds-pupil-wrap .ds-btn-primary { width: 100% !important; }
}

/* Recent requests list — prevent overflow */
.ds-pupil-wrap div[style*="display:flex"][style*="justify-content:space-between"] {
  gap: 8px !important;
  flex-wrap: wrap !important;
}


/* ════════════════════════════════════════════════════════════
   DASHBOARD UNIFORMITY — v2.5.21
   Manager + Instructor aligned to pupil dashboard style
   ════════════════════════════════════════════════════════════ */

/* ── SHARED: all dashboard wraps ───────────────────────────── */
.ds-manager-wrap,
.ds-instructor-wrap .ds-tab-content {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 24px 20px !important;
  box-sizing: border-box !important;
}

/* ── SHARED: card uniformity ────────────────────────────────── */
.ds-manager-wrap .ds-card,
.ds-instructor-wrap .ds-card {
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(12,30,61,.06), 0 1px 2px rgba(12,30,61,.04) !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
}
.ds-manager-wrap .ds-card-header,
.ds-instructor-wrap .ds-card-header {
  padding: 14px 18px !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--ds-text-muted) !important;
  border-bottom: 1px solid rgba(12,30,61,.06) !important;
  background: transparent !important;
}

/* ── MANAGER: stats strip ───────────────────────────────────── */
.ds-manager-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  grid-template-columns: unset !important;
}
.ds-mstat-card {
  flex: 1 1 140px !important;
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(12,30,61,.07) !important;
  padding: 16px 18px !important;
}
.ds-mstat-value {
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: var(--ds-navy) !important;
}
.ds-mstat-label {
  font-size: .65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--ds-text-muted) !important;
  margin-top: 5px !important;
}
.ds-mstat-money .ds-mstat-value { color: #059669 !important; }
.ds-mstat-warn  .ds-mstat-value { color: #dc2626 !important; }

/* ── MANAGER: tab nav — navy matching instructor ────────────── */
.ds-manager-tabs {
  background: var(--ds-navy) !important;
  border-bottom: none !important;
  border-radius: 14px 14px 0 0 !important;
  display: flex !important;
  padding: 0 16px !important;
  gap: 0 !important;
  margin-bottom: 20px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.ds-manager-tabs::-webkit-scrollbar { display: none !important; }
.ds-manager-tab {
  color: rgba(255,255,255,.45) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  height: 48px !important;
  padding: 0 14px !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  transition: color .15s, border-color .15s !important;
  white-space: nowrap !important;
}
.ds-manager-tab:hover {
  color: rgba(255,255,255,.8) !important;
  text-decoration: none !important;
}
.ds-manager-tab.active {
  color: #FFFFFF !important;
  border-bottom-color: var(--ds-amber) !important;
}

/* ── MANAGER: grid layout ───────────────────────────────────── */
.ds-manager-grid {
  display: block !important;    /* single column like pupil dashboard */
}
.ds-manager-main,
.ds-manager-sidebar {
  display: block !important;
  width: 100% !important;
}
.ds-manager-main .ds-card,
.ds-manager-sidebar .ds-card {
  margin-bottom: 16px !important;
}

/* ── MANAGER: table polish ──────────────────────────────────── */
.ds-manager-table th {
  font-size: .68rem !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--ds-text-muted) !important;
  padding: 12px 16px !important;
  border-bottom: 2px solid rgba(12,30,61,.08) !important;
  background: #f8fafc !important;
}
.ds-manager-table td {
  padding: 11px 16px !important;
  border-bottom: 1px solid rgba(12,30,61,.05) !important;
  font-size: .88rem !important;
}
.ds-manager-table tr:last-child td { border-bottom: none !important; }
.ds-manager-table tr:hover td { background: #f8fafc !important; }
.ds-manager-pupil-name { font-weight: 600 !important; color: var(--ds-navy) !important; }
.ds-manager-pupil-email { font-size: .75rem !important; color: var(--ds-text-muted) !important; }

/* ── MANAGER: mobile ────────────────────────────────────────── */
@media (max-width: 640px) {
  .ds-manager-wrap { padding: 14px !important; }
  .ds-manager-tabs { padding: 0 8px !important; border-radius: 10px 10px 0 0 !important; }
  .ds-manager-tab  { padding: 0 10px !important; font-size: .65rem !important; }
  .ds-mstat-card   { flex: 1 1 100px !important; padding: 12px 14px !important; }
  .ds-mstat-value  { font-size: 1.4rem !important; }
}

/* ── INSTRUCTOR: verify content width consistency ───────────── */
.ds-instructor-wrap .ds-tab-content {
  padding: 24px 20px !important;
}
@media (max-width: 640px) {
  .ds-instructor-wrap .ds-tab-content { padding: 14px !important; }
}


/* ════════════════════════════════════════════════════════════
   INSTRUCTOR BOTTOM NAV + CARD SPACING + PUPIL DETAIL — v2.5.22
   ════════════════════════════════════════════════════════════ */

/* ── INSTRUCTOR BOTTOM NAV (Session 2 — premium light) ──────── */
.ds-instr-bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 680px !important;
  height: 66px !important;
  background: #FFFFFF !important;
  /* No backdrop-filter: on iOS Safari a position:fixed element with
     backdrop-filter repaints late during momentum scroll / URL-bar
     show-hide, so the nav appears to drift up the page before snapping
     back. The background is opaque, so the blur added nothing visually
     anyway. Removing it keeps the fixed nav glued to the bottom edge. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex !important;
  align-items: stretch !important;
  border-top: 1px solid #E2E8F0 !important;
  box-shadow: 0 -1px 0 rgba(15,23,42,.02), 0 -4px 24px rgba(15,23,42,.06) !important;
  z-index: 200 !important;
  padding: 6px 8px !important;
  box-sizing: border-box !important;
}
@media (min-width: 480px) {
  .ds-instr-bottom-nav {
    border-radius: 20px 20px 0 0 !important;
    border-left: 1px solid #E2E8F0 !important;
    border-right: 1px solid #E2E8F0 !important;
  }
}
.ds-instr-bottom-nav a,
.ds-instr-bottom-nav .ds-nav-more {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: #64748B !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  padding: 6px 2px !important;
  transition: color .15s !important;
  position: relative !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  font-family: inherit !important;
  min-width: 0 !important;
}
.ds-nav-pill {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 34px;
  border-radius: 999px;
  position: relative;
  transition: background .18s ease;
}
.ds-instr-bottom-nav a svg,
.ds-instr-bottom-nav .ds-nav-more svg {
  width: 24px !important; height: 24px !important;
  stroke-width: 1.85 !important;
  display: block;
}
.ds-instr-bottom-nav a:hover,
.ds-instr-bottom-nav .ds-nav-more:hover {
  color: #0F172A !important;
  text-decoration: none !important;
}
.ds-instr-bottom-nav a:hover .ds-nav-pill,
.ds-instr-bottom-nav .ds-nav-more:hover .ds-nav-pill {
  background: #F1F5F9;
}
.ds-instr-bottom-nav a.active,
.ds-instr-bottom-nav .ds-nav-more.active {
  color: #0F172A !important;
}
.ds-instr-bottom-nav a.active .ds-nav-pill,
.ds-instr-bottom-nav .ds-nav-more.active .ds-nav-pill {
  background: #FEF3C7;
}
.ds-instr-bottom-nav a.active svg,
.ds-instr-bottom-nav .ds-nav-more.active svg {
  color: #B45309;
}
.ds-nav-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  /* Explicit line-height so the descenders ('p', 'g') sit inside the label's
     own box. overflow:hidden (above, for the ellipsis) clips in BOTH axes, so
     a tight inherited line-height was shaving the bottom off the wording. */
  line-height: 1.3;
  padding-bottom: 1px;
}

/* Badge inside the pill (top-right) */
.ds-nav-badge {
  position: absolute;
  top: -2px;
  right: 6px;
  background: #DC2626 !important;
  color: #FFFFFF !important;
  font-size: .58rem !important;
  font-weight: 700;
  padding: 1px 6px !important;
  min-width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 999px !important;
  border: 2px solid #FFFFFF;
  box-sizing: border-box;
}
/* Legacy badge support inside nav */
.ds-instr-bottom-nav .ds-badge {
  position: absolute;
  top: -2px;
  right: 6px;
  background: #DC2626 !important;
  color: #FFFFFF !important;
  font-size: .58rem !important;
  padding: 1px 6px !important;
  border-radius: 999px !important;
  border: 2px solid #FFFFFF;
  margin: 0 !important;
}

/* ── More sheet (bottom drawer) ────────────────────────────── */
.ds-nav-more-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 290;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.ds-nav-more-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.ds-nav-more-sheet {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: 680px;
  background: #FFFFFF;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px rgba(15,23,42,.18);
  z-index: 300;
  transition: transform .28s cubic-bezier(.32,.72,0,1);
  padding: 12px 16px 24px;
  box-sizing: border-box;
  max-height: 80vh;
  overflow-y: auto;
}
.ds-nav-more-sheet.is-open {
  transform: translateX(-50%) translateY(0);
}
.ds-nav-more-grabber {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: #CBD5E1;
  margin: 0 auto 12px;
}
.ds-nav-more-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
}
.ds-nav-more-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -.01em;
}
.ds-nav-more-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F1F5F9;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  transition: background .15s ease, color .15s ease;
}
.ds-nav-more-close:hover {
  background: #E2E8F0;
  color: #0F172A;
}
.ds-nav-more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ds-nav-more-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 10px;
  border-radius: 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  text-decoration: none !important;
  color: #334155 !important;
  font-size: .8rem;
  font-weight: 600;
  text-align: center;
  transition: background .15s ease, transform .12s ease, border-color .15s ease;
  position: relative;
}
.ds-nav-more-item:hover {
  background: #F1F5F9;
  border-color: #CBD5E1;
  text-decoration: none !important;
  transform: translateY(-1px);
}
.ds-nav-more-item.is-active {
  background: #FEF3C7;
  border-color: #FCD34D;
  color: #78350F !important;
}
.ds-nav-more-ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  position: relative;
}
.ds-nav-more-item.is-active .ds-nav-more-ico {
  background: #FFFFFF;
  border-color: #FCD34D;
  color: #B45309;
}
.ds-nav-more-ico .ds-nav-badge {
  top: -4px;
  right: -4px;
  border: 2px solid #F8FAFC;
}
.ds-nav-more-item:hover .ds-nav-more-ico .ds-nav-badge {
  border-color: #F1F5F9;
}
.ds-nav-more-label {
  line-height: 1.2;
}

/* Give instructor wrap padding to clear the nav */
.ds-instructor-wrap { padding-bottom: 84px !important; }

/* Hide old top nav styles on instructor (nav is now bottom) */
.ds-instructor-wrap .ds-nav-tabs { display: none !important; }

/* ── CARD SPACING — fix cards being too close ───────────────── */
/* Instructor tab content: consistent gap between all cards */
.ds-instructor-wrap .ds-tab-content .ds-card {
  margin-bottom: 20px !important;
}
.ds-instructor-wrap .ds-tab-content .ds-card:last-child {
  margin-bottom: 0 !important;
}
/* Curriculums tab nests its cards inside .ds-manager-main/.ds-manager-sidebar,
   so each is a :last-child of its wrapper and loses the gap above — restore it
   on the table card so it sits clear of the create-curriculum card below. */
.ds-instructor-wrap .ds-curr-list .ds-manager-main .ds-card { margin-bottom: 20px !important; }
/* Home grid: gap between the two columns */
.ds-instructor-wrap .ds-home-grid {
  gap: 20px !important;
}

/* ── PUPIL DETAIL PANEL — visual organisation ───────────────── */
/* Single column, max width, consistent spacing */
.ds-pupil-detail {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 20px 20px 20px !important;
}
.ds-pupil-detail .ds-card {
  margin-bottom: 20px !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(12,30,61,.06), 0 1px 2px rgba(12,30,61,.04) !important;
}

/* Force single column — remove sidebar layout */
.ds-detail-grid {
  display: block !important;
}
.ds-detail-left,
.ds-detail-right {
  display: block !important;
  width: 100% !important;
}
.ds-detail-bottom {
  display: block !important;
}
.ds-detail-bottom .ds-card {
  margin-bottom: 20px !important;
}

/* Section dividers — visual breathing room between groups */
/* Group 1: test booking + curriculum (admin info) */
.ds-test-booking-card,
.ds-curriculum-card {
  border-left: 3px solid var(--ds-amber) !important;
}

/* Group 2: lessons card gets a slightly stronger header */
.ds-detail-right .ds-card > .ds-card-header,
.ds-pupil-detail [id^="lessons-header"] {
  background: #f8fafc !important;
  font-size: .72rem !important;
}

/* Section break between groups — visual space */
.ds-detail-bottom {
  padding-top: 4px !important;
}

/* Charts, notes, messages — consistent card height */
.ds-detail-bottom .ds-card {
  min-height: 200px !important;
}
.ds-notes-log {
  max-height: 280px !important;
  overflow-y: auto !important;
}
.ds-messages-card .ds-msg-thread {
  max-height: 280px !important;
  overflow-y: auto !important;
}

/* Pupil detail header card — cleaner */
.ds-pupil-detail-header {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 20px !important;
  border-left: none !important;
}
.ds-pupil-detail-avatar {
  width: 48px !important; height: 48px !important;
  font-size: 1.2rem !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.ds-pupil-detail-name {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--ds-navy) !important;
}
.ds-pupil-detail-meta {
  font-size: .8rem !important;
  color: var(--ds-text-muted) !important;
  margin-top: 2px !important;
}

/* ── MOBILE ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ds-instr-bottom-nav { height: 62px !important; }
  .ds-instr-bottom-nav a { font-size: .54rem !important; gap: 3px !important; }
  .ds-instr-bottom-nav a svg { width: 20px !important; height: 20px !important; }
  .ds-pupil-detail { padding: 14px !important; }
}


/* ── CALENDAR TAB: card spacing ─────────────────────────────── */
.ds-calendar-wrap {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 24px 20px 100px !important;
  box-sizing: border-box !important;
}
.ds-calendar-wrap .ds-card {
  margin-bottom: 20px !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(12,30,61,.06), 0 1px 2px rgba(12,30,61,.04) !important;
}
@media (max-width: 640px) {
  .ds-calendar-wrap { padding: 14px 14px 100px !important; }
  .ds-calendar-wrap > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════
   MOBILE OVERFLOW FIXES — v2.5.24
   Header, lesson rows, calendar, diary gaps
   ════════════════════════════════════════════════════════════ */

/* ── HEADER — prevent right overflow on mobile ───────────────── */
.ds-header-inner {
  padding: 0 16px !important;
  gap: 8px !important;
  overflow: hidden !important;
}
/* Brand: allow shrinking, clip long school names */
.ds-header-brand {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.ds-brand-name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: .9rem !important;
}
.ds-brand-role {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: .65rem !important;
}
/* Actions: shrink but don't wrap */
.ds-header-actions {
  flex-shrink: 0 !important;
  gap: 6px !important;
}
/* Tour button: hide label on very small screens */
@media (max-width: 400px) {
  .ds-tour-btn { padding: 4px 8px !important; font-size: 0 !important; }
  .ds-tour-btn svg { display: block !important; }
}
/* Logout button: keep visible, just tighter */
.ds-header-actions .ds-btn-outline,
.ds-header-actions a[href*="logout"] {
  padding: 5px 10px !important;
  font-size: .72rem !important;
  white-space: nowrap !important;
}

/* ── INSTRUCTOR LESSON ROWS — fix date/actions overflow ──────── */
.ds-lesson-row {
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
  padding: 12px 14px !important;
  align-items: flex-start !important;
}
/* Date block: fixed size, never wraps */
.ds-lesson-date {
  flex-shrink: 0 !important;
  align-self: flex-start !important;
}
/* Info: takes remaining space, clips overflow */
.ds-lesson-info {
  flex: 1 1 120px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.ds-lesson-title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.ds-lesson-preview {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: .75rem !important;
}
/* Grade + status + actions: go to second row on narrow screens */
.ds-lesson-grade,
.ds-lesson-status,
.ds-lesson-actions {
  flex-shrink: 0 !important;
}
@media (max-width: 480px) {
  /* Push grade/status/actions to their own row under info */
  .ds-lesson-grade  { order: 3 !important; }
  .ds-lesson-status { order: 4 !important; }
  .ds-lesson-actions {
    order: 5 !important;
    width: 100% !important;
    justify-content: flex-end !important;
  }
}

/* The Notes & scores / Del buttons sit on a white lesson-row background.
   The default outline button uses a near-white fill and a pale-blue border —
   on white that border becomes nearly invisible at xs sizes, so the button
   reads as plain text. Scoped override: stronger border + slate fill to give
   it a clear edge without affecting outline buttons elsewhere in the app. */
.ds-lesson-actions .ds-btn-outline {
  background: #ffffff !important;
  border: 1px solid #94a3b8 !important;
  color: var(--ds-navy) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06) !important;
  font-weight: 600 !important;
}
.ds-lesson-actions .ds-btn-outline:hover,
.ds-lesson-actions .ds-btn-outline:focus-visible {
  background: var(--ds-navy) !important;
  border-color: var(--ds-navy) !important;
  color: #ffffff !important;
  outline: none !important;
}

/* Per-row action menu (Cancel lesson / Delete permanently). The destructive
   delete is demoted in here so Cancel is the obvious everyday action and the
   row no longer carries an always-visible red button. */
.ds-lesson-menu-wrap { position: relative; display: inline-block; }
.ds-lesson-menu-btn { line-height: 1; font-weight: 700 !important; letter-spacing: 1px; padding-left: 10px !important; padding-right: 10px !important; }
.ds-lesson-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
  min-width: 180px;
  z-index: 60;
  overflow: hidden;
}
.ds-lesson-menu.is-open { display: block; }
.ds-lesson-menu.ds-menu-up { top: auto; bottom: calc(100% + 4px); }
.ds-lesson-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  background: none;
  border: none;
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
  color: #0f172a;
}
.ds-lesson-menu button:hover { background: #f1f5f9; }
.ds-lesson-menu .ds-lesson-menu-danger { color: #dc2626; border-top: 1px solid #f1f5f9; }
.ds-lesson-menu .ds-lesson-menu-danger:hover { background: #fef2f2; }

/* ── LESSON PREVIEW MODIFIERS ────────────────────────────────
   --prompt: a button that nudges the instructor to add notes/scores when
             a completed lesson has no data yet. Looks like a subtle inline
             call-to-action rather than a generic button.
   --muted:  the grey-text "No notes" placeholder for non-completed lessons. */
.ds-lesson-preview--prompt {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 8px !important;
  margin-top: 4px !important;
  background: rgba(245, 158, 11, 0.10) !important;
  color: #b45309 !important;
  border: 1px dashed rgba(245, 158, 11, 0.45) !important;
  border-radius: 999px !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  cursor: pointer !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease !important;
  /* override the base preview's nowrap+ellipsis so the prompt is fully readable */
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
}
.ds-lesson-preview--prompt:hover,
.ds-lesson-preview--prompt:focus-visible {
  background: rgba(245, 158, 11, 0.18) !important;
  border-color: rgba(245, 158, 11, 0.7) !important;
  color: #92400e !important;
  outline: none !important;
}
.ds-lesson-preview--muted {
  color: var(--ds-text-muted) !important;
}

/* ── DIARY GAPS GRID — single column on mobile ───────────────── */
/* The inline style uses grid-template-columns:1fr 1fr — override it */
.ds-calendar-wrap > div[style*="grid-template-columns:1fr 1fr"],
.ds-calendar-wrap > div[style*="grid-template-columns: 1fr 1fr"] {
  grid-template-columns: 1fr !important;
}
@media (min-width: 640px) {
  .ds-calendar-wrap > div[style*="grid-template-columns:1fr 1fr"],
  .ds-calendar-wrap > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
/* Inputs inside gap form: full width */
.ds-calendar-wrap .ds-input {
  width: 100% !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}
/* Submit button: full width on mobile */
@media (max-width: 480px) {
  .ds-calendar-wrap .ds-btn-primary { width: 100% !important; }
}

/* ── FULLCALENDAR — prevent dot/event bleed ──────────────────── */
/* Contain the calendar within its card */
.ds-calendar-wrap #ds-calendar {
  overflow: hidden !important;
}
/* Make event dots and titles clip instead of overflow */
.fc-event-title,
.fc-daygrid-event-dot {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}
/* moved to consolidated block — see "CALENDAR — CONSOLIDATED" at bottom of file */


/* ════════════════════════════════════════════════════════════
   DIARY GAP + CALENDAR MOBILE FIX — v2.5.25
   ════════════════════════════════════════════════════════════ */

/* ── Outer gaps grid: two cols on desktop, one on mobile ─────── */
.ds-gaps-outer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 640px) {
  .ds-gaps-outer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Inner date/time row: two cols on desktop, one on mobile ─── */
.ds-gap-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
@media (max-width: 400px) {
  .ds-gap-form-row {
    grid-template-columns: 1fr !important;
  }
}

/* ── FullCalendar: prevent any overflow outside card ─────────── */
.ds-card-full {
  overflow: hidden !important;
}
#ds-calendar {
  overflow: hidden !important;
  max-width: 100% !important;
}
/* Force all FC content to stay within bounds */
.fc {
  max-width: 100% !important;
  overflow: hidden !important;
}
.fc-view-harness {
  overflow: hidden !important;
}
/* Event titles: clip, don't overflow */
.fc-event {
  overflow: hidden !important;
  max-width: 100% !important;
}
.fc-event-title {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* Dot events in month view: clip within cell */
.fc-daygrid-day-events {
  overflow: hidden !important;
  max-width: 100% !important;
}
.fc-daygrid-event-harness {
  overflow: hidden !important;
  max-width: 100% !important;
}
/* moved to consolidated block — see "CALENDAR — CONSOLIDATED" at bottom of file */


/* ════════════════════════════════════════════════════════════
   TARGETED FIXES — v2.5.26
   Calendar legend, diary gap form, header logo
   ════════════════════════════════════════════════════════════ */

/* ── 1. CALENDAR CARD HEADER — legend + button ───────────────── */
/* Wrap the right side so legend drops below button on mobile */
.ds-card-header[style*="justify-content:space-between"] > div,
.ds-card-header > div[style*="display:flex"] {
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.ds-cal-legend {
  flex-wrap: wrap !important;
  gap: 6px 10px !important;
  font-size: .72rem !important;
}
/* On mobile: stack legend below the Add Lesson button */
@media (max-width: 560px) {
  .ds-card-header[style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
  .ds-cal-legend {
    width: 100% !important;
    order: 2 !important;
  }
}

/* ── 2. DIARY GAP FORM — collapse to 1 col below 560px ──────── */
.ds-gap-form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}
@media (max-width: 560px) {
  .ds-gap-form-row {
    grid-template-columns: 1fr !important;
  }
}

/* ── 3. HEADER LOGO — shrink on mobile, never push actions ──── */
.ds-header-brand {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  flex-shrink: 1 !important;
}
.ds-header-logo-img {
  max-width: 100px !important;
  max-height: 36px !important;
}
@media (max-width: 380px) {
  .ds-header-logo-img { max-width: 70px !important; }
  .ds-brand-name { font-size: .8rem !important; }
  .ds-brand-role { display: none !important; }
}
/* Actions: always stay fully visible, never shrink */
.ds-header-actions {
  flex-shrink: 0 !important;
  flex: 0 0 auto !important;
}


/* ════════════════════════════════════════════════════════════
   CALENDAR + GAP CARD FIXES — v2.5.27
   ════════════════════════════════════════════════════════════ */

/* ── Gap card inner padding div — fix bleed ─────────────────── */
/* The div[style="padding:18px"] adds to total width without box-sizing */
.ds-gaps-outer-grid .ds-card,
.ds-gaps-outer-grid .ds-card * {
  box-sizing: border-box !important;
  max-width: 100% !important;
}
.ds-gaps-outer-grid .ds-card > div {
  padding: 16px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* moved to consolidated block — see "CALENDAR — CONSOLIDATED" at bottom of file */


/* ── HEADER: definitive mobile fix ──────────────────────────── */
/* Single authoritative rule block — overrides all earlier attempts */
.ds-header-inner {
  padding: 0 12px !important;
  gap: 6px !important;
  overflow: visible !important;
}
.ds-header-brand {
  flex: 0 1 auto !important;   /* shrink freely, don't grow past content */
  min-width: 0 !important;
  overflow: hidden !important;
  flex-shrink: 1 !important;
  gap: 8px !important;
}
.ds-header-logo-img {
  max-width: 80px !important;
  max-height: 32px !important;
  flex-shrink: 0 !important;
}
.ds-logo-icon { flex-shrink: 0 !important; }
.ds-header-brand > div {
  min-width: 0 !important;
  overflow: hidden !important;
}
.ds-brand-name {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: .85rem !important;
}
.ds-brand-role {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: .62rem !important;
}
.ds-header-actions {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  gap: 4px !important;
  margin-left: auto !important;   /* push actions to the right always */
}
/* On mobile: hide brand text entirely to give actions full room */
@media (max-width: 460px) {
  .ds-brand-role { display: none !important; }
  .ds-brand-name { font-size: .78rem !important; }
  .ds-header-logo-img { max-width: 64px !important; }
}
@media (max-width: 360px) {
  .ds-brand-name { display: none !important; }
}


/* ── HEADER: fix brand text clip — definitive ────────────────── */
.ds-brand-name {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}
.ds-brand-role {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}
/* The text wrapper div must constrain — flex child needs min-width:0 */
.ds-header-brand > div {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  width: 0 !important;  /* force flex to actually shrink this child */
}

/* ── GAP FORM: fix date/time input overflow ──────────────────── */
/* Definitive single-column on mobile — highest specificity */
@media (max-width: 640px) {
  .ds-gap-form-row {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }
  /* Grid children must allow shrinking — critical for date inputs */
  .ds-gap-form-row > div {
    min-width: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
  }
  /* Date/time inputs: force full width override of browser minimum */
  .ds-gap-form-row input[type="date"],
  .ds-gap-form-row input[type="time"] {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}


/* ── DEFINITIVE FIX v2.5.28 ─────────────────────────────────── */

/* 1. Header: clip brand text, never let it bleed into actions */
.ds-header-inner {
  overflow: hidden !important;
  padding: 0 12px !important;
  gap: 6px !important;
}
.ds-header-brand {
  overflow: hidden !important;
  min-width: 0 !important;
  flex-shrink: 1 !important;
  flex: 0 1 auto !important;
}
.ds-header-brand > div {
  overflow: hidden !important;
  min-width: 0 !important;
}
.ds-brand-name,
.ds-brand-role {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
}

/* 2. Gap form: outer grid always 1 col on mobile,
      inner date/time always 1 col on mobile.
      date/time inputs have browser-enforced min-width so
      they MUST have a full-width column to sit in. */
@media (max-width: 640px) {
  .ds-gaps-outer-grid {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }
  .ds-gap-form-row {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }
  /* Ensure inputs don't overflow their cell */
  .ds-gap-form-row > div,
  .ds-gap-form-row input,
  .ds-gap-form-row select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ── GAP FORM DATE/TIME — v2.5.29 ───────────────────────────── */
.ds-gap-dt-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}
.ds-gap-dt-field {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.ds-gap-input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}
/* On narrow screens stack vertically */
@media (max-width: 480px) {
  .ds-gap-dt-row {
    flex-direction: column !important;
  }
  .ds-gap-dt-field {
    width: 100% !important;
  }
}


/* ── GAP FORM FIX v2.5.30 — restore visible inputs ─────────── */
.ds-gap-dt-row {
  display: flex !important;
  flex-wrap: wrap !important;   /* wrap instead of overflow */
  gap: 10px !important;
  margin-bottom: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ds-gap-dt-field {
  flex: 1 1 140px !important;  /* grow/shrink but never below 140px */
  min-width: 140px !important;
  box-sizing: border-box !important;
  overflow: visible !important; /* never clip the input */
}
.ds-gap-input {
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}


/* ── GAP CARD + CALENDAR OVERFLOW FIX v2.5.33 ───────────────── */

/* Prevent instructor wrap cards from overflowing their container */
.ds-instructor-wrap .ds-card {
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* The messages sidebar IS a .ds-card, so the broad
   `.ds-instructor-wrap/.ds-manager-wrap .ds-card { overflow:hidden !important }`
   rules above (lines ~4171/4464/5612) clip its conversation list and kill the
   scroll — the actual cause of the "list won't scroll on desktop" bug, not the
   height (verified in-browser: overflow-y computed to hidden while the list
   overflowed 707px inside a 580px box). Re-enable vertical scroll on the sidebar.
   We qualify with BOTH classes on the element (.ds-card.ds-msg-sidebar) so this
   is (0,3,0) and beats the (0,2,0) `.ds-instructor-wrap .ds-card` offenders by
   SPECIFICITY — not source order, which is unreliable here (the page loads
   style.css after other sheets). Phones/portrait still page-scroll via the
   `.pt-messages-tab .ds-msg-sidebar` override in mobile.css (max-height:none,
   so overflow-y:auto here has nothing to scroll and the page owns it). */
.ds-instructor-wrap .ds-card.ds-msg-sidebar,
.ds-manager-wrap .ds-card.ds-msg-sidebar {
  overflow-y: auto !important;
}

/* Calendar wrap: clip horizontal overflow on all screen sizes */
.ds-calendar-wrap {
  overflow-x: hidden !important;
}

/* The gap form card specifically: ensure all children are contained */
.ds-gaps-outer-grid .ds-card {
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.ds-gaps-outer-grid .ds-card * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Date + time inputs: must not exceed their cell */
#gap-date,
#gap-time {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}


/* ── GAP FORM INPUT CLIP FIX v2.5.34 ────────────────────────── */
/* overflow:hidden on cards was clipping inputs on the right.
   Remove it specifically for the gap form card. */
.ds-gaps-outer-grid .ds-card {
  overflow: visible !important;
}
.ds-gaps-outer-grid .ds-card .ds-input {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}


/* ── iOS DATE/TIME INPUT FIX v2.5.35 ────────────────────────── */
/* iOS Safari ignores width:100% on date/time inputs with default
   -webkit-appearance. Resetting it forces width to be respected. */
#gap-date,
#gap-time,
input[type="date"].ds-input,
input[type="time"].ds-input {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}


/* ════════════════════════════════════════════════════════════
   MANAGER BOTTOM NAV + CARD SPACING — v2.5.37
   ════════════════════════════════════════════════════════════ */

/* Bottom nav — identical style to instructor */
.ds-mgr-bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 680px !important;
  height: 68px !important;
  background: rgba(10,18,40,.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  display: flex !important;
  align-items: stretch !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,.2) !important;
  z-index: 200 !important;
}
@media (min-width: 480px) {
  .ds-mgr-bottom-nav {
    border-radius: 20px 20px 0 0 !important;
    border-left: 1px solid rgba(255,255,255,.06) !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
  }
}
.ds-mgr-bottom-nav a {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: rgba(255,255,255,.35) !important;
  font-size: .58rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 10px 6px 8px !important;
  transition: color .2s !important;
  position: relative !important;
}
.ds-mgr-bottom-nav a svg {
  width: 22px !important; height: 22px !important;
  stroke-width: 1.75 !important;
  transition: transform .2s !important;
}
.ds-mgr-bottom-nav a:hover { color: rgba(255,255,255,.65) !important; text-decoration: none !important; }
.ds-mgr-bottom-nav a.active { color: #FFFFFF !important; }
.ds-mgr-bottom-nav a.active svg { transform: translateY(-1px) !important; }
.ds-mgr-bottom-nav a.active::after {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 24px; height: 2.5px;
  background: var(--ds-amber);
  border-radius: 0 0 3px 3px;
}

/* Hide old top nav */
.ds-manager-wrap .ds-manager-tabs { display: none !important; }

/* Padding to clear nav */
.ds-manager-wrap { padding-bottom: 84px !important; }

/* Card spacing — consistent 20px gaps */
.ds-manager-wrap .ds-card {
  margin-bottom: 20px !important;
}
.ds-manager-main .ds-card,
.ds-manager-sidebar .ds-card {
  margin-bottom: 20px !important;
}

/* Mobile */
@media (max-width: 480px) {
  .ds-mgr-bottom-nav { height: 62px !important; }
  .ds-mgr-bottom-nav a { font-size: .54rem !important; gap: 3px !important; }
  .ds-mgr-bottom-nav a svg { width: 20px !important; height: 20px !important; }
}

/* Grade badge colour in timeline */
.ds-grade-overall {
  border-radius: 20px !important;
  padding: 2px 9px !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  color: white !important;
  white-space: nowrap !important;
}


/* ── Table scroll shadow (v2.6.5) ────────────────────────────── */
.ds-tbl-scroll {
  overflow-x: auto;
  display: block;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, #ffffff 30%, rgba(255,255,255,0)),
    linear-gradient(to left,  #ffffff 30%, rgba(255,255,255,0)),
    radial-gradient(farthest-side at 0%   50%, rgba(12,30,61,.10), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(12,30,61,.10), transparent);
  background-repeat: no-repeat;
  background-color: #ffffff;
  background-size: 40px 100%, 40px 100%, 12px 100%, 12px 100%;
  background-position: left, right, left, right;
  background-attachment: local, local, scroll, scroll;
}



/* ── TARGETS / PROGRESS OVERVIEW ─────────────────────────── */
.ds-target-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 16px 0;
}
.ds-target-overview-metric {
  background: #f8fafc;
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  padding: 12px;
  min-width: 0;
}
.ds-target-overview-value {
  font-family: var(--ds-font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ds-navy);
  line-height: 1.1;
}
.ds-target-overview-label {
  margin-top: 4px;
  font-size: .76rem;
  color: var(--ds-text-muted);
  font-weight: 600;
}
.ds-target-overview-bar {
  margin: 14px 16px 0;
  height: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.ds-target-overview-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ds-navy-light), var(--ds-navy));
  border-radius: inherit;
}
.ds-target-overview-meta {
  padding: 10px 16px 2px;
  font-size: .83rem;
  color: var(--ds-text-muted);
}
.ds-target-priority-list {
  padding: 8px 16px 16px;
  display: grid;
  gap: 8px;
}
.ds-target-priority-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  font-size: .86rem;
}
.ds-target-pill {
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.ds-target-pill-met { background: rgba(34,197,94,.12); color: #166534; }
.ds-target-pill-on-track { background: rgba(14,165,233,.12); color: #075985; }
.ds-target-pill-watch { background: rgba(245,158,11,.14); color: #92400e; }
.ds-target-pill-behind { background: rgba(239,68,68,.12); color: #991b1b; }
.ds-target-pill-overdue { background: rgba(190,18,60,.14); color: #9f1239; }
.ds-target-pill-none { background: #f3f4f6; color: #6b7280; }
.ds-target-inline {
  display: grid;
  gap: 7px;
  min-width: 170px;
}
.ds-target-inline-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
}
.ds-target-mini-track {
  height: 7px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.ds-target-mini-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #60a5fa, #1d4ed8);
}
.ds-target-mini-meta {
  font-size: .72rem;
  color: var(--ds-text-muted);
  line-height: 1.45;
}
.ds-target-card {
  padding: 14px 16px 16px;
}
.ds-target-card .ds-progress-bars {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.ds-target-bar-row {
  display:grid;
  gap: 4px;
}
.ds-target-bar-head {
  display:flex;
  justify-content:space-between;
  gap: 10px;
  font-size: .78rem;
  color: var(--ds-text-muted);
}
.ds-target-bar-track {
  height: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.ds-target-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ds-navy-light), var(--ds-navy));
}
.ds-target-card-summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.ds-target-card-summary strong {
  font-size: 1rem;
}

/* ============================================================
   UI OVERHAUL — modernized dashboard system
   ============================================================ */

:root {
  --ds-page-max: 1420px;
  --ds-page-pad: clamp(16px, 2.4vw, 28px);
  --ds-radius-lg: 22px;
  --ds-radius-xl: 28px;
  --ds-line: rgba(255,255,255,.06);
  --ds-focus: 0 0 0 3px rgba(245,158,11,.24);
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at top left, rgba(245,158,11,.11), transparent 28%),
    radial-gradient(circle at top right, rgba(59,130,246,.10), transparent 24%),
    linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}

.ds-wrap {
  max-width: var(--ds-page-max);
  margin: 0 auto;
  padding: 0 var(--ds-page-pad) 90px;
}

.ds-header {
  background: linear-gradient(135deg, rgba(12,30,61,.97), rgba(26,52,97,.96));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.ds-header-inner {
  max-width: var(--ds-page-max);
  padding: 0 var(--ds-page-pad);
}

.ds-header-brand,
.ds-header-actions {
  gap: 12px;
}

.ds-brand-name {
  font-size: 1.02rem;
  letter-spacing: -.02em;
}

.ds-brand-role {
  font-size: .74rem;
  opacity: .85;
}

.ds-header-avatar,
.ds-header-avatar-initial,
.ds-hero-avatar-img,
.ds-hero-avatar-initial {
  box-shadow: var(--ds-shadow-md);
}

.ds-header-avatar-label:hover .ds-header-avatar,
.ds-header-avatar-label:hover .ds-header-avatar-initial {
  border-color: rgba(245,158,11,.7);
  box-shadow: 0 8px 24px rgba(245,158,11,.18);
}

.ds-dark-toggle,
.ds-tour-btn {
  height: 38px;
  border-radius: 999px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  box-shadow: none;
}

.ds-tour-btn:hover,
.ds-dark-toggle:hover {
  background: rgba(255,255,255,.12);
}

.ds-card,
.ds-auth-card,
.ds-modal-content,
.ds-mock-card,
.ds-comment-pupil,
.ds-target-priority-row,
.ds-calendar-intro,
.ds-calendar-upcoming,
.ds-pupil-hero,
.ds-manager-hero,
.ds-settings-wrap .ds-card,
.ds-manager-settings-wrap .ds-card,
.ds-admin-card,
.ds-auth-box {
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow);
}

.ds-card,
.ds-auth-card,
.ds-modal-content,
.ds-mock-card,
.ds-comment-pupil,
.ds-pupil-hero,
.ds-manager-hero,
.ds-admin-card {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
}

.ds-card,
.ds-modal-content,
.ds-mock-card,
.ds-comment-pupil,
.ds-pupil-hero,
.ds-manager-hero,
.ds-admin-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ds-card:hover,
.ds-pupil-hero:hover,
.ds-manager-hero:hover,
.ds-admin-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-md);
}

.ds-card-header,
.ds-home-greeting,
.ds-section-header,
.ds-card .ds-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ds-font-display);
  font-weight: 700;
  letter-spacing: -.01em;
}

.ds-card-header {
  padding: 16px 18px 14px;
  font-size: 1rem;
  border-bottom: 1px solid var(--ds-border);
}

.ds-card-subtitle,
.ds-card-header-sub,
.ds-home-greeting-date,
.ds-hero-meta,
.ds-target-overview-meta,
.ds-target-mini-meta,
.ds-field-hint,
.ds-text-muted {
  color: var(--ds-text-muted);
}

.ds-card-subtitle {
  margin-left: auto;
  font-size: .78rem;
  font-weight: 700;
  background: #edf4ff;
  border-radius: 999px;
  padding: 5px 10px;
}

.ds-card-header-link,
.ds-form-links a,
.ds-hero-link,
.ds-admin-link {
  color: var(--ds-primary);
  font-weight: 700;
  text-decoration: none;
}

.ds-card-header-link:hover,
.ds-form-links a:hover,
.ds-hero-link:hover,
.ds-admin-link:hover {
  text-decoration: underline;
}

.ds-btn,
button.ds-btn,
input[type=submit].ds-btn {
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  letter-spacing: .01em;
  border: 1px solid transparent;
  box-shadow: 0 1px 1px rgba(12,30,61,.02), 0 10px 22px rgba(12,30,61,.08);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}

.ds-btn:hover,
button.ds-btn:hover,
input[type=submit].ds-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 1px rgba(12,30,61,.03), 0 14px 28px rgba(12,30,61,.10);
}

.ds-btn:focus,
.ds-dark-toggle:focus,
.ds-tour-btn:focus,
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
  box-shadow: var(--ds-focus);
}

/* Primary buttons: navy fill with a soft drop shadow for a tactile, premium
   feel — no colour accent (replaced the amber underline, which read as a bit
   loud/unprofessional). Amber stays elsewhere as an accent (tabs, progress
   bars, pips). Hover lifts with a slightly stronger shadow. */
.ds-btn-primary {
  background: var(--ds-navy);
  color: #fff;
  box-shadow: 0 4px 12px rgba(12,30,61,.28);
}

.ds-btn-outline {
  background: rgba(255,255,255,.8);
  color: var(--ds-text);
  border-color: var(--ds-border-mid);
}

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

.ds-btn-ghost:hover {
  background: rgba(12,30,61,.06);
  box-shadow: none;
}

.ds-btn-sm,
.ds-btn-xs {
  padding: 8px 12px;
  font-size: .82rem;
}

.ds-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid var(--ds-border-mid);
  background: rgba(255,255,255,.96);
  color: var(--ds-text);
  box-shadow: inset 0 1px 1px rgba(12,30,61,.02);
}

.ds-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--ds-text-subtle);
}

.ds-form-group {
  margin-bottom: 16px;
}

.ds-form-group label {
  display: block;
  margin-bottom: 7px;
  font-size: .86rem;
  font-weight: 700;
  color: var(--ds-text);
}

.ds-notice {
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid transparent;
  box-shadow: var(--ds-shadow);
}

.ds-notice-success {
  background: rgba(16,185,129,.10);
  border-color: rgba(16,185,129,.18);
  color: #065f46;
}

.ds-notice-error {
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.18);
  color: #991b1b;
}

.ds-manager-wrap,
.ds-home-tab,
.ds-pupil-grid,
.ds-home-grid,
.ds-instr-home-wrap,
.ds-manager-grid,
.ds-admin-grid,
.ds-settings-grid,
.ds-subgrid,
.ds-calendar-wrap,
.ds-auth-wrap {
  display: grid;
  gap: 18px;
}

.ds-manager-stats,
.ds-home-stats,
.ds-hero-metrics-grid,
.ds-target-overview-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.ds-mstat-card,
.ds-home-stat,
.ds-hero-metric,
.ds-target-overview-metric {
  border-radius: 18px;
  background: rgba(255,255,255,.95);
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow);
}

.ds-mstat-card,
.ds-home-stat {
  padding: 16px 18px;
}

.ds-mstat-value,
.ds-home-stat-value,
.ds-hero-metric strong,
.ds-target-overview-value {
  font-family: var(--ds-font-display);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ds-navy);
}

.ds-mstat-label,
.ds-home-stat-label,
.ds-hero-metric span,
.ds-target-overview-label {
  display: block;
  margin-top: 6px;
  color: var(--ds-text-muted);
  font-size: .82rem;
}

.ds-mstat-value,
.ds-home-stat-value,
.ds-hero-metric strong,
.ds-target-overview-value {
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1;
}

.ds-manager-hero {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 18px;
  padding: 22px;
  background:
    radial-gradient(circle at top right, rgba(245,158,11,.16), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.95));
}

/* Pupil hero keeps dark navy — block layout, no grid */
.ds-pupil-hero {
  display: block !important;
  grid-template-columns: unset !important;
  gap: unset !important;
  padding: 0 !important;
  background: linear-gradient(140deg, #0A1830 0%, #0C1E3D 45%, #172D58 100%) !important;
}

.ds-manager-hero-copy h1 {
  margin: 6px 0 10px;
  font-family: var(--ds-font-display);
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -.04em;
  color: var(--ds-navy);
}

.ds-manager-hero-copy p,
.ds-pupil-hero-copy p {
  margin: 0;
  color: var(--ds-text-muted);
  max-width: 70ch;
}

.ds-hero-kicker,
.ds-home-greeting-name,
.ds-pupil-hero-kicker {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--ds-amber-dark);
}

.ds-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.ds-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.ds-hero-badge,
.ds-pill,
.ds-traffic-light,
.ds-status-chip,
.ds-hero-badge-soft {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .03em;
}

.ds-hero-badge {
  padding: 6px 10px;
  background: rgba(12,30,61,.07);
  color: var(--ds-text);
}

.ds-hero-badge-soft {
  padding: 6px 10px;
  background: rgba(245,158,11,.12);
  color: #92400e;
}

.ds-manager-hero-side {
  align-self: stretch;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(12,30,61,.98), rgba(26,52,97,.95));
  color: #fff;
  box-shadow: 0 18px 40px rgba(12,30,61,.18);
}

.ds-manager-hero-side .ds-hero-badge,
.ds-manager-hero-side .ds-hero-badge-soft {
  background: rgba(255,255,255,.12);
  color: #fff;
}

.ds-hero-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ds-hero-metric {
  padding: 12px 14px;
}

.ds-manager-grid,
.ds-home-grid,
.ds-pupil-grid {
  grid-template-columns: minmax(0, 2.1fr) minmax(280px, .95fr);
  align-items: start;
}

.ds-manager-main,
.ds-pupil-main,
.ds-home-main {
  display: grid;
  gap: 18px;
}

.ds-manager-sidebar,
.ds-pupil-sidebar,
.ds-home-sidebar {
  display: grid;
  gap: 18px;
  position: sticky;
  top: calc(var(--ds-header-h) + 16px);
}

.ds-manager-table-wrap,
.ds-table-wrap,
.ds-admin-table-wrap {
  overflow: auto;
  border-radius: 18px;
  border: 1px solid var(--ds-border);
  background: rgba(255,255,255,.92);
  box-shadow: var(--ds-shadow);
}

.ds-manager-table,
.ds-table,
.ds-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .90rem;
}

.ds-manager-table thead th,
.ds-table thead th,
.ds-admin-table thead th {
  position: sticky;
  top: 0;
  background: #f8fbff;
  text-align: left;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ds-text-muted);
  padding: 14px 14px;
  border-bottom: 1px solid var(--ds-border);
}

.ds-manager-table tbody td,
.ds-table tbody td,
.ds-admin-table tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--ds-border);
  vertical-align: top;
}

.ds-manager-table tbody tr:hover,
.ds-table tbody tr:hover,
.ds-admin-table tbody tr:hover {
  background: #f8fbff;
}

.ds-manager-table tbody tr:last-child td,
.ds-table tbody tr:last-child td,
.ds-admin-table tbody tr:last-child td {
  border-bottom: 0;
}

.ds-manager-table td,
.ds-table td,
.ds-admin-table td {
  white-space: normal;
}

.ds-manager-pupil-name,
.ds-home-stat-value,
.ds-calendar-mini-name,
.ds-week-name {
  font-weight: 700;
  color: var(--ds-text);
}

.ds-manager-pupil-email,
.ds-calendar-mini-meta,
.ds-week-dur,
.ds-week-day-header,
.ds-home-empty,
.ds-empty-state,
.ds-empty-state-sm {
  color: var(--ds-text-muted);
}

.ds-manager-assign-row,
.ds-upcoming-item,
.ds-calendar-mini-row,
.ds-week-row,
.ds-hero-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ds-manager-assign-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--ds-border);
}

.ds-manager-assign-row:last-child { border-bottom: 0; }

.ds-mini-bar,
.ds-target-overview-bar,
.ds-target-mini-track,
.ds-target-bar-track {
  background: #e8eef7;
}

.ds-mini-bar-fill,
.ds-target-overview-bar-fill,
.ds-target-mini-fill,
.ds-target-bar-fill {
  background: linear-gradient(90deg, var(--ds-amber) 0%, var(--ds-amber-dark) 100%);
}

.ds-tabs,
.ds-manager-tabs,
.ds-pupil-tabs,
.ds-instr-bottom-nav,
.ds-pupil-bottom-nav {
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(8px);
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow);
}

.ds-tabs a,
.ds-manager-tabs a,
.ds-pupil-tabs a,
.ds-instr-bottom-nav a,
.ds-pupil-bottom-nav a {
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.ds-tabs a.active,
.ds-manager-tabs a.active,
.ds-pupil-tabs a.active,
.ds-instr-bottom-nav a.active,
.ds-pupil-bottom-nav a.active {
  background: rgba(245,158,11,.14);
  color: var(--ds-amber-dark);
}

.ds-calendar-wrap #ds-calendar,
.ds-calendar-wrap .fc,
.ds-calendar-wrap .fc .fc-view-harness,
.ds-calendar-wrap .fc .fc-scrollgrid,
.ds-calendar-wrap .fc-theme-standard td,
.ds-calendar-wrap .fc-theme-standard th {
  border-color: var(--ds-border);
}

/* moved to consolidated block — see "CALENDAR — CONSOLIDATED" at bottom of file */

.ds-modal-overlay {
  background: rgba(9, 17, 35, .58);
  backdrop-filter: blur(4px);
}

.ds-modal-content {
  padding: 0;
  overflow: hidden;
}

.ds-modal-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--ds-border);
  background: linear-gradient(180deg, #fbfdff, #f5f8fc);
}

.ds-modal-body,
.ds-modal-footer {
  padding: 20px;
}

.ds-auth-wrap {
  min-height: calc(100vh - var(--ds-header-h));
  align-items: center;
  justify-items: center;
  padding: 28px 16px 40px;
}

.ds-auth-card {
  width: min(100%, 460px);
  padding: 26px;
  background:
    radial-gradient(circle at top right, rgba(245,158,11,.12), transparent 25%),
    rgba(255,255,255,.96);
}

.ds-auth-logo p {
  margin-top: 6px;
  color: var(--ds-text-muted);
}

.ds-auth-wordmark {
  font-family: var(--ds-font-display);
  font-size: 2rem;
  line-height: 1;
}

.ds-auth-word-pass { color: var(--ds-navy); }
.ds-auth-word-track { color: var(--ds-amber-dark); }

.ds-auth-force-notice,
.ds-cancel-policy-notice {
  border-radius: 14px;
}

.ds-empty-state,
.ds-empty-state-sm,
.ds-home-empty {
  border: 1px dashed var(--ds-border-mid);
  border-radius: 18px;
  background: rgba(255,255,255,.7);
  padding: 18px;
}

.ds-hero-actions .ds-btn,
.ds-home-greeting .ds-btn {
  min-width: 0;
}

.ds-manager-settings-wrap,
.ds-settings-wrap,
.ds-admin-wrap {
  display: grid;
  gap: 18px;
}

.ds-settings-grid,
.ds-admin-grid,
.ds-subgrid {
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
}

.ds-target-priority-row,
.ds-target-overview-metric,
.ds-target-card,
.ds-mock-card,
.ds-comment-pupil {
  background: rgba(255,255,255,.96);
}

.ds-target-overview-grid {
  margin-top: 14px;
}

.ds-target-overview-metric {
  padding: 14px 16px;
}

.ds-target-inline-top strong {
  color: var(--ds-navy);
}

.ds-pupil-hero {
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .9fr);
  align-items: stretch;
}

.ds-hero-badge {
  line-height: 1;
}

.ds-hero-badge-soft {
  border: 1px solid rgba(245,158,11,.16);
}

.ds-hero-avatar-wrap,
.ds-header-avatar-wrap {
  position: relative;
}

.ds-hero-avatar-img,
.ds-hero-avatar-initial {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  object-fit: cover;
}

.ds-hero-avatar-initial,
.ds-header-avatar-initial {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--ds-amber) 0%, var(--ds-amber-dark) 100%);
  color: #1e293b;
  font-family: var(--ds-font-display);
  font-weight: 800;
}

.ds-home-greeting {
  padding: 8px 2px 4px;
  justify-content: space-between;
}

.ds-home-greeting-name {
  font-size: 1.28rem;
  text-transform: none;
  letter-spacing: -.03em;
  color: var(--ds-navy);
}

.ds-home-greeting-date {
  margin-top: 4px;
}

.ds-instr-bottom-nav,
.ds-pupil-bottom-nav {
  padding: 6px;
  gap: 6px;
}

.ds-instr-bottom-nav a,
.ds-pupil-bottom-nav a {
  border-radius: 16px;
}

.ds-toast {
  border-radius: 999px;
  box-shadow: var(--ds-shadow-lg);
}

@media (max-width: 1100px) {
  .ds-manager-grid,
  .ds-home-grid,
  .ds-pupil-grid,
  .ds-settings-grid,
  .ds-admin-grid,
  .ds-subgrid,
  .ds-manager-hero,
  .ds-pupil-hero {
    grid-template-columns: 1fr;
  }

  .ds-manager-sidebar,
  .ds-pupil-sidebar,
  .ds-home-sidebar {
    position: static;
  }

  .ds-manager-hero-side {
    order: 2;
  }
}

@media (max-width: 820px) {
  .ds-header-inner {
    gap: 10px;
  }

  .ds-user-greeting {
    display: none;
  }

  .ds-card-header {
    padding: 14px 16px;
    flex-wrap: wrap;
  }

  .ds-btn,
  button.ds-btn,
  input[type=submit].ds-btn {
    padding: 9px 14px;
  }

  .ds-manager-table,
  .ds-table,
  .ds-admin-table {
    min-width: 720px;
  }

  .ds-manager-stats,
  .ds-home-stats,
  .ds-hero-metrics-grid,
  .ds-target-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ds-wrap {
    padding-left: 12px;
    padding-right: 12px;
  }

  .ds-header-inner {
    padding: 0 12px;
  }

  .ds-manager-stats,
  .ds-home-stats,
  .ds-hero-metrics-grid,
  .ds-target-overview-grid {
    grid-template-columns: 1fr;
  }

  .ds-auth-card,
  .ds-card,
  .ds-pupil-hero,
  .ds-manager-hero {
    border-radius: 20px;
  }

  .ds-home-greeting {
    align-items: flex-start;
    flex-direction: column;
  }

  .ds-home-greeting .ds-btn,
  .ds-hero-actions .ds-btn {
    width: 100%;
    justify-content: center;
  }

  .ds-pupil-bottom-nav,
  .ds-instr-bottom-nav {
    grid-template-columns: repeat(5, 1fr);
    overflow-x: auto;
  }

  .ds-pupil-bottom-nav a,
  .ds-instr-bottom-nav a {
    min-width: 72px;
  }
}


/* ── AUTH REDESIGN (login + signup) ─────────────────────────────── */
.ds-auth-wrap--split {
  min-height: auto;
  padding: 12px 20px 44px;
  background:
    radial-gradient(circle at top left, rgba(245,158,11,.10), transparent 28%),
    radial-gradient(circle at bottom right, rgba(42,74,130,.12), transparent 32%),
    linear-gradient(135deg, #f7f9fc 0%, #eef3fb 48%, #f8fafc 100%);
  position: relative;
}

.ds-auth-wrap--split::before,
.ds-auth-wrap--split::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(2px);
}

.ds-auth-wrap--split::before {
  width: 280px;
  height: 280px;
  right: -80px;
  top: -60px;
  background: rgba(245,158,11,.12);
}

.ds-auth-wrap--split::after {
  width: 340px;
  height: 340px;
  left: -110px;
  bottom: -120px;
  background: rgba(12,30,61,.08);
}

.ds-auth-shell {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
  gap: 24px;
  align-items: stretch;
  position: relative;
  z-index: 1;
}
.ds-auth-shell--signup {
  grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr);
}

@media (min-width: 1200px) {
  .ds-auth-shell--signup {
    grid-template-columns: minmax(0, 1.2fr) minmax(440px, .8fr);
  }
}

/* ── App / standalone login: hide the marketing blurb ──────────────────────
   Launched from the home screen (iOS PWA / Android TWA) the marketing aside
   pushes the sign-in form ~400px down the page. In standalone display mode
   ONLY, hide it and centre the sign-in card so the form is immediately usable.
   Web browsers are completely unaffected. Two triggers cover all clients: the
   display-mode media query (iOS 16.4+ / Android TWA) and the html.pt-standalone
   class set by an inline script on the login page (older-iOS
   navigator.standalone fallback). Scoped to --login so signup is untouched. */
@media (display-mode: standalone), (display-mode: fullscreen) {
  .ds-auth-wrap--login .ds-auth-panel { display: none !important; }
  .ds-auth-wrap--login .ds-auth-shell {
    grid-template-columns: 1fr !important;
    max-width: 460px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
html.pt-standalone .ds-auth-wrap--login .ds-auth-panel { display: none !important; }
html.pt-standalone .ds-auth-wrap--login .ds-auth-shell {
  grid-template-columns: 1fr !important;
  max-width: 460px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.ds-auth-panel {
  border-radius: 28px;
  padding: 36px;
  background: linear-gradient(160deg, #0b1730 0%, #102b56 52%, #17365f 100%);
  color: #fff;
  box-shadow: 0 30px 70px rgba(12,30,61,.18);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}

.ds-auth-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 14px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.96);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}

.ds-auth-panel h1 {
  margin: 0;
  font-family: var(--ds-font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -.04em;
  color: #fff;
}

.ds-auth-panel p {
  margin: 16px 0 0;
  max-width: 35rem;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255,255,255,.92);
}


.ds-auth-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 12px;
}

.ds-auth-list li {
  position: relative;
  padding-left: 28px;
  color: rgba(255,255,255,.95);
  line-height: 1.55;
  font-size: .97rem;
}

.ds-auth-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(245,158,11,.18);
  color: #fbbf24;
  display: grid;
  place-items: center;
  font-size: .75rem;
  font-weight: 900;
}

.ds-auth-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.ds-auth-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
}

.ds-auth-panel-footer {
  margin-top: 26px;
  display: grid;
  gap: 4px;
  color: rgba(255,255,255,.90);
  font-size: .92rem;
}

/* ── Auth left-panel product preview (decorative) ────────────────────────
   A stylised snapshot of the in-lesson grading UI, shown on the dark panel
   of the login/signup pages to show the product and fill the lower space.
   Purely decorative (aria-hidden in markup); hidden on small screens
   alongside the benefits list (see the max-width:720px block below). */
.ds-auth-preview {
  margin-top: 26px;
  padding: 18px;
  max-width: 360px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  display: grid;
  gap: 14px;
  text-shadow: none;
}
.ds-auth-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ds-auth-preview-tag {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.ds-auth-preview-tag--live { color: #fbbf24; }
.ds-auth-preview-time {
  font-size: .8rem;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  font-variant-numeric: tabular-nums;
}
.ds-auth-preview-pupil {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ds-auth-preview-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(245,158,11,.22);
  color: #fbbf24;
  font-weight: 800;
  font-size: .8rem;
}
.ds-auth-preview-pupil-meta { display: grid; gap: 2px; }
.ds-auth-preview-name { font-weight: 700; color: #fff; font-size: .95rem; }
.ds-auth-preview-sub { font-size: .8rem; color: rgba(255,255,255,.7); }
.ds-auth-preview-skill {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
}
.ds-auth-preview-skill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ds-auth-preview-skill-name { font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.92); }
.ds-auth-preview-skill-trend { font-size: .75rem; color: rgba(255,255,255,.6); }
.ds-auth-preview-skill-trend--up { color: #34d399; }
.ds-auth-preview-scale { display: flex; gap: 6px; }
.ds-auth-preview-scale span {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
}
.ds-auth-preview-scale span.is-on { background: #f59e0b; }
.ds-auth-preview-quote {
  font-size: .85rem;
  font-style: italic;
  line-height: 1.5;
  color: rgba(255,255,255,.82);
  padding-left: 12px;
  border-left: 2px solid rgba(245,158,11,.5);
}

.ds-auth-card--auth,
.ds-auth-card--signup {
  width: 100%;
  max-width: none;
  padding: 0;
  overflow: hidden;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 26px 60px rgba(12,30,61,.12);
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
/* Push the trailing reassurance/footer block to the bottom so the card content
   fills its full height and stays balanced with the navy panel beside it. */
.ds-auth-card--signup .ds-auth-form {
  flex: 1 1 auto;
}

.ds-auth-card--signup {
  max-width: 760px;
}


.ds-auth-logo {
  padding: 28px 28px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  border-bottom: 1px solid rgba(148,163,184,.16);
}

.ds-auth-brand-logo {
  max-height: 64px;
  max-width: 240px;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto 10px;
}

.ds-auth-logo p {
  margin: 0;
  color: var(--ds-text-muted);
  font-size: .95rem;
  text-align: center;
}

.ds-auth-card .ds-notice,
.ds-auth-card .ds-auth-force-notice,
.ds-auth-card .ds-plan-grid,
.ds-auth-card .ds-auth-form,
.ds-auth-card .ds-auth-note,
.ds-auth-card .ds-public-cta {
  margin-left: 28px;
  margin-right: 28px;
}

.ds-auth-card .ds-notice {
  margin-top: 18px;
}

.ds-auth-card .ds-auth-force-notice {
  margin-top: 18px;
}

.ds-auth-form {
  padding: 22px 0 26px;
}

.ds-auth-form .ds-form-group:last-child {
  margin-bottom: 0;
}

.ds-required {
  color: #b91c1c;
  font-weight: 800;
}

.ds-field-hint {
  margin-top: 6px;
  font-size: .82rem;
  line-height: 1.45;
}

.ds-form-row--compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -2px 0 16px;
  font-size: .9rem;
}

.ds-form-row--compact a,
.ds-form-row--compact label {
  font-weight: 700;
}

.ds-checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ds-text);
}

.ds-checkbox-row input[type="checkbox"] {
  /* Force the native checkbox to render. The host theme (or any future
     parent reset) can set appearance:none on inputs globally, which makes
     the box vanish and leaves only the tick. Pin appearance and tint with
     accent-color so it looks the same on every browser and every host. */
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid #94a3b8;
  border-radius: 3px;
  accent-color: var(--ds-navy, #0C1E3D);
  flex-shrink: 0;
  cursor: pointer;
  opacity: 1;
}

.ds-public-cta {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(148,163,184,.18);
  text-align: center;
}

.ds-public-cta p {
  margin: 0 0 10px;
  color: var(--ds-text-muted);
  font-size: .92rem;
}

.ds-auth-note {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  color: #475569;
  font-size: 14px;
  line-height: 1.5;
}

.ds-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 22px 28px 0;
  align-items: stretch;
}

/* Single-plan signup: one centred card rather than a 2-column grid with a gap. */
.ds-plan-grid--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* Option A — clean inline price line (no boxed card) for single-plan signup. */
.ds-signup-price-line {
  margin: 0 28px 18px;
  padding: 0 0 16px;
  border-bottom: 1px solid #e2e8f0;
}
.ds-signup-price-main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.ds-signup-price-amount {
  font-size: 30px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
}
.ds-signup-price-period {
  font-size: 15px;
  font-weight: 500;
  color: #475569;
}
.ds-signup-price-after {
  font-size: 14px;
  color: #64748b;
  margin-left: 4px;
}
.ds-signup-price-sub {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #64748b;
}

@media (min-width: 980px) {
  .ds-plan-grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
  }
  .ds-plan-grid--single {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ds-auth-plan {
  border-radius: 20px;
  padding: 20px;
  border: 1px solid rgba(148,163,184,.18);
  background: linear-gradient(180deg, #fff, #f8fbff);
  box-shadow: 0 10px 24px rgba(12,30,61,.05);
  min-width: 0;
}

.ds-auth-plan.is-featured {
  border: 2px solid #2563eb;
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

.ds-auth-plan.is-disabled {
  opacity: .56;
  pointer-events: none;
  position: relative;
}

.ds-auth-plan-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ds-auth-plan-top > div {
  min-width: 0;
}

.ds-auth-plan h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
}

.ds-auth-plan p {
  margin: 8px 0 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ds-text-muted);
}

.ds-auth-plan-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(37,99,235,.12);
  color: #1d4ed8;
  font-size: .74rem;
  font-weight: 800;
  white-space: nowrap;
}

.ds-auth-plan-pill--soon {
  background: rgba(148,163,184,.16);
  color: #475569;
}

.ds-auth-submit-note {
  text-align: center;
  color: var(--ds-text-muted);
  font-size: .84rem;
  font-weight: 600;
}

.ds-auth-plan-price {
  margin-top: 14px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: nowrap;
  white-space: nowrap;
  font-family: var(--ds-font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ds-navy);
}

.ds-auth-plan-price span {
  font-family: var(--ds-font-body);
  font-size: .82rem;
  font-weight: 700;
  color: var(--ds-text-muted);
  white-space: nowrap;
}

.ds-auth-plan-price--soon {
  color: var(--ds-text-muted);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
}

.ds-auth-plan-note {
  margin-top: 10px;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--ds-text-muted);
}

.ds-auth-submit-trust {
  text-align: center;
  color: #64748b;
  font-size: .8rem;
  line-height: 1.45;
  margin-top: -4px;
}

.ds-auth-wrap--compact {
  min-height: calc(100vh - var(--ds-header-h));
  padding: 28px 20px 44px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f7f9fc 0%, #eef3fb 48%, #f8fafc 100%);
}

.ds-auth-wrap--compact .ds-auth-card {
  width: min(100%, 460px);
}


.ds-form-actions--stacked {
  display: grid;
  gap: 12px;
}

.ds-form-actions--stacked .ds-btn {
  width: 100%;
  justify-content: center;
}

.ds-auth-card .ds-btn.ds-btn-primary {
  font-weight: 600;
  letter-spacing: .3px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(12,30,61,.28);
  transition: transform .2s ease, box-shadow .2s ease;
}

.ds-auth-card .ds-btn.ds-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(12,30,61,.34);
}

@media (max-width: 1100px) {
  .ds-auth-shell,
  .ds-auth-shell--signup {
    grid-template-columns: 1fr;
  }

  .ds-auth-panel {
    min-height: auto;
  }
}

@media (max-width: 720px) {
  .ds-auth-wrap--split,
  .ds-auth-wrap--compact {
    padding: 16px 12px 28px;
  }

  .ds-auth-panel {
    padding: 20px;
    border-radius: 24px;
  }

  .ds-auth-panel h1 {
    font-size: 30px;
    line-height: 1.2;
  }


  .ds-auth-panel ul,
  .ds-auth-panel .ds-auth-pills,
  .ds-auth-panel .ds-auth-preview {
    display: none;
  }

  .ds-auth-card {
    margin-top: 16px;
  }
  .ds-auth-logo,
  .ds-auth-card .ds-notice,
  .ds-auth-card .ds-auth-force-notice,
  .ds-auth-card .ds-plan-grid,
  .ds-auth-card .ds-auth-form,
  .ds-auth-card .ds-auth-note,
  .ds-auth-card .ds-public-cta {
    margin-left: 16px;
    margin-right: 16px;
  }

  .ds-auth-logo {
    padding: 22px 18px 18px;
  }

  .ds-plan-grid {
    grid-template-columns: 1fr;
    padding-top: 18px;
  }

  .ds-auth-card--signup {
    max-width: none;
  }

  .ds-form-row--compact {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── FINAL DASHBOARD POLISH (shared across all portals) ───────────────────── */
.ds-card,
.ds-auth-card,
.ds-modal-content,
.ds-mock-card,
.ds-comment-pupil,
.ds-target-priority-row,
.ds-calendar-intro,
.ds-calendar-upcoming,
.ds-pupil-hero,
.ds-manager-hero,
.ds-admin-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ds-card:hover,
.ds-mock-card:hover,
.ds-comment-pupil:hover,
.ds-target-priority-row:hover,
.ds-calendar-upcoming:hover {
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-lg);
}

.ds-card-header,
.ds-mock-card-header,
.ds-comment-header,
.ds-timeline-header,
.ds-manager-table th,
.ds-admin-table th {
  letter-spacing: .06em;
}

.ds-home-empty,
.ds-empty-state,
.ds-empty-state-sm {
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,251,255,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

.ds-manager-table,
.ds-admin-table,
.ds-table {
  border-collapse: separate;
  border-spacing: 0;
}

.ds-manager-table th,
.ds-admin-table th,
.ds-table th {
  background: rgba(248,251,255,.96);
  position: sticky;
  top: 0;
  z-index: 1;
}

.ds-manager-table td,
.ds-admin-table td,
.ds-table td {
  background: rgba(255,255,255,.86);
}

.ds-manager-table tr:hover td,
.ds-admin-table tr:hover td,
.ds-table tr:hover td {
  background: #f7fbff;
}

.ds-nav-tabs,
.ds-manager-tabs,
.dsp-tab-nav,
.ds-instructor-wrap .ds-nav-tabs {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(226,234,244,.9);
}

.ds-tab,
.ds-manager-tab,
.dsp-tab-link {
  border-radius: 14px 14px 0 0;
  padding-top: 14px;
  padding-bottom: 14px;
}

.ds-tab.active,
.ds-manager-tab.active,
.dsp-tab-link.dsp-tab-active {
  box-shadow: inset 0 -3px 0 var(--ds-amber);
}

.ds-badge,
.ds-auth-badge,
.ds-hero-badge,
.ds-manager-pill,
.ds-pill {
  border-radius: 999px;
}

.ds-btn,
button.ds-btn,
input[type=submit].ds-btn {
  box-shadow: none;
}

/* Re-assert the amber bottom accent on primary buttons. The reset above
   (button.ds-btn, specificity 0,1,1) outranks the plain .ds-btn-primary rule
   and was zeroing the accent on dashboard <button> elements — it only showed
   on the higher-specificity auth-card button. .ds-btn.ds-btn-primary (0,2,0)
   wins over the reset, while the :focus rule below (also 0,2,0, but later)
   still wins on focus so the focus ring is preserved. */
.ds-btn.ds-btn-primary {
  box-shadow: 0 4px 12px rgba(12,30,61,.28);
}

.ds-btn:focus,
.ds-btn-outline:focus,
.ds-btn-primary:focus,
.ds-btn-danger:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: var(--ds-focus);
}

@media (max-width: 820px) {
  .ds-card-header,
  .ds-card-header-link,
  .ds-manager-table th,
  .ds-admin-table th {
    letter-spacing: .04em;
  }

  .ds-manager-table,
  .ds-admin-table,
  .ds-table {
    min-width: 760px;
  }
}



/* Operational status / dashboard-friendly UI */
.ds-status-pill {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:700;
    line-height:1;
    background:#eff6ff;
    color:#1d4ed8;
}

.ds-status-pill--success { background:#ecfdf5; color:#047857; }
.ds-status-pill--warning { background:#fff7ed; color:#c2410c; }
.ds-status-pill--error { background:#fef2f2; color:#b91c1c; }
.ds-status-pill--info { background:#f1f5f9; color:#334155; }

.ds-card table.widefat,
.ds-card .wp-list-table {
    border:1px solid #e2e8f0;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
}

.ds-card .wp-list-table thead th {
    background:#f8fafc;
    border-bottom:1px solid #e2e8f0;
}

.ds-card .wp-list-table tbody tr:hover {
    background:#f8fafc;
}

.ds-support-empty {
    margin:0;
    padding:14px 16px;
    border:1px dashed #cbd5e1;
    border-radius:12px;
    color:#64748b;
    background:#f8fafc;
}

@media (max-width: 782px) {
    .ds-status-pill { margin-bottom:8px; }
    .ds-card table.widefat,
    .ds-card .wp-list-table { display:block; overflow-x:auto; }
}

.passtrack-auth-left{background:#0f172a;color:#fff;} .passtrack-auth-left h1,.passtrack-auth-left p{color:#fff;}

.passtrack-plan-price{white-space:nowrap;font-size:28px;}


/* Step 12d auth page polish */
.ds-auth-brand-logo {
  max-height: 96px;
  max-width: 300px;
  width: auto;
  height: auto;
}

.ds-auth-tagline {
  margin: 6px 0 10px;
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748b;
}

.ds-signup-legal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 14px 0 16px 0;
  font-size: 14px;
  color: #475569;
}

.ds-checkbox-row-legal {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  flex: 1 1 320px;
}

.ds-checkbox-row-legal input {
  margin-top: 3px;
}

.ds-inline-legal-link {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: none;
  padding: 0;
  color: #2563eb;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  line-height: 1.4;
}

.ds-inline-legal-link:hover {
  color: #1d4ed8;
}

.ds-terms-inline {
  margin: 0 0 18px 0;
  padding: 18px 18px 6px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
}

.ds-terms-inline__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.ds-terms-inline__header h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  color: #0f172a;
}

.ds-terms-inline__header p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}

@media (max-width: 640px) {
  .ds-auth-brand-logo {
    max-height: 64px;
    max-width: 240px;
  }

  .ds-auth-tagline {
    font-size: .72rem;
  }

  .ds-terms-inline__header {
    flex-direction: column;
  }
}


/* Step 12g terms presentation */
.ds-terms-inline {
  margin: 0 0 20px 0;
  padding: 22px 22px 8px;
  border: 1px solid #dbe3ee;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.ds-terms-inline__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
}

.ds-terms-inline__header h3 {
  margin: 0 0 6px 0;
  font-size: 20px;
  line-height: 1.2;
  color: #0f172a;
}

.ds-terms-inline__header p,
.ds-legal-meta {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}

.ds-legal-copy {
  color: #334155;
  line-height: 1.75;
  font-size: 15px;
}

.ds-legal-copy h4 {
  margin: 24px 0 10px 0;
  font-size: 17px;
  line-height: 1.35;
  color: #0f172a;
}

.ds-legal-copy p {
  margin: 0 0 14px 0;
}

@media (max-width: 640px) {
  .ds-terms-inline {
    padding: 18px 16px 6px;
  }

  .ds-terms-inline__header {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ── MANAGER ONBOARDING WIZARD ───────────────────────────── */
.ds-onboarding-shell{display:grid;gap:24px;margin-top:18px;}
.ds-onboarding-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.9fr);gap:18px;align-items:stretch;}
.ds-onboarding-hero-copy,.ds-onboarding-progress,.ds-onboarding-card,.ds-onboarding-side-card{background:#fff;border:1px solid #e5e7eb;border-radius:22px;box-shadow:0 20px 45px rgba(15,23,42,.06);}
.ds-onboarding-hero-copy{padding:28px 30px;background:linear-gradient(135deg,#0c1e3d 0%,#15315d 55%,#214a84 100%);color:#fff;}
.ds-onboarding-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.76);margin-bottom:12px;}
.ds-onboarding-hero-copy h2{margin:0 0 10px;font-size:2rem;line-height:1.1;color:#fff;}
.ds-onboarding-hero-copy p{margin:0;max-width:56ch;color:rgba(255,255,255,.82);}
.ds-onboarding-progress{padding:22px 22px 18px;}
.ds-onboarding-progress-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px;color:#0f172a;font-size:.95rem;}
.ds-onboarding-progress-bar{height:10px;border-radius:999px;background:#e5e7eb;overflow:hidden;margin-bottom:18px;}
.ds-onboarding-progress-bar span{display:block;height:100%;width:33.333%;border-radius:999px;background:linear-gradient(90deg,#2563eb 0%,#0ea5e9 100%);transition:width .25s ease;}
.ds-onboarding-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.ds-onboarding-step{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px 12px;min-height:112px;border-radius:16px;border:1px solid #e5e7eb;background:#f8fafc;color:#475569;font-weight:600;cursor:pointer;text-align:center;transition:.2s ease;overflow:hidden;}
.ds-onboarding-step-num{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;background:#ffffff;border:1px solid #dbe3ef;color:currentColor;font-size:1.05rem;line-height:1;font-weight:800;flex:0 0 auto;}
.ds-onboarding-step-label{display:block;font-size:clamp(.9rem,1.25vw,1.02rem);line-height:1.15;white-space:normal;word-break:keep-all;overflow-wrap:normal;text-wrap:pretty;max-width:10ch;}
.ds-onboarding-step.is-active{border-color:#bfdbfe;background:#eff6ff;color:#0f172a;box-shadow:inset 0 0 0 1px #bfdbfe;}
.ds-onboarding-step.is-complete{border-color:#bbf7d0;background:#f0fdf4;color:#166534;}
.ds-onboarding-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.72fr);gap:22px;align-items:start;}
.ds-onboarding-card{padding:0;overflow:hidden;}
.ds-onboarding-card-head{padding:28px 30px 12px;border-bottom:1px solid #eef2f7;}
.ds-onboarding-card-head h3{margin:0 0 6px;font-size:1.35rem;color:#0f172a;}
.ds-onboarding-card-head p{margin:0;color:#64748b;}
.ds-onboarding-step-panel{display:none;padding:26px 30px 10px;}
.ds-onboarding-step-panel.is-active{display:block;}
.ds-onboarding-fields{display:grid;gap:18px;}
.ds-onboarding-logo-card{display:grid;gap:16px;padding:18px;border:1px dashed #cbd5e1;border-radius:18px;background:#f8fafc;}
.ds-onboarding-logo-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.ds-onboarding-choice-grid{display:grid;gap:12px;}
.ds-onboarding-choice{position:relative;display:grid;gap:5px;padding:18px 18px 18px 46px;border:1px solid #e5e7eb;border-radius:18px;background:#fff;cursor:pointer;transition:.2s ease;}
.ds-onboarding-choice input{position:absolute;left:18px;top:20px;}
.ds-onboarding-choice.is-selected{border-color:#bfdbfe;background:#eff6ff;box-shadow:inset 0 0 0 1px #bfdbfe;}
.ds-onboarding-choice-title{font-weight:700;color:#0f172a;}
.ds-onboarding-choice-copy{color:#64748b;font-size:.92rem;line-height:1.5;}
.ds-onboarding-summary{display:grid;gap:10px;margin-top:6px;}
.ds-onboarding-summary-item{padding:14px 16px;border-radius:16px;background:#f8fafc;border:1px solid #e5e7eb;display:grid;gap:4px;}
.ds-onboarding-summary-item strong{color:#0f172a;}
.ds-onboarding-summary-item span{color:#64748b;font-size:.92rem;}
.ds-onboarding-status{min-height:24px;margin:0 30px 8px;color:#64748b;font-size:.92rem;}
.ds-onboarding-status.is-pending{color:#475569;}
.ds-onboarding-status.is-success{color:#047857;}
.ds-onboarding-status.is-error{color:#dc2626;}
.ds-onboarding-actions{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:0 30px 30px;}
.ds-onboarding-actions-right{display:flex;gap:10px;align-items:center;justify-content:flex-end;}
.ds-onboarding-side{display:grid;gap:16px;}
.ds-onboarding-side-card{padding:22px;}
.ds-onboarding-side-card h4{margin:0 0 10px;color:#0f172a;font-size:1rem;}
.ds-onboarding-side-card p{margin:0;color:#64748b;line-height:1.65;}
@media (max-width: 980px){
  .ds-onboarding-hero,.ds-onboarding-grid{grid-template-columns:1fr;}
}
@media (max-width: 540px){
  .ds-onboarding-steps{grid-template-columns:1fr;}
  .ds-onboarding-step{min-height:88px;}
  .ds-onboarding-step-label{max-width:none;}
}

@media (max-width: 680px){
  .ds-onboarding-hero-copy,.ds-onboarding-progress,.ds-onboarding-card-head,.ds-onboarding-step-panel,.ds-onboarding-actions,.ds-onboarding-side-card{padding-left:18px;padding-right:18px;}
  .ds-onboarding-steps{grid-template-columns:repeat(3,minmax(0,1fr));}
  .ds-onboarding-step{justify-content:flex-start;}
  .ds-onboarding-actions{flex-direction:column;align-items:stretch;}
  .ds-onboarding-actions-right{width:100%;display:grid;grid-template-columns:1fr;}
}




/* Finance UI polish v1 */
.ds-pupil-finance-card,
.ds-buy-lessons-card {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}
.ds-pupil-finance-card .ds-pupil-finance-grid{
  max-width: 980px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap:16px;
}
@media (max-width: 980px){
  .ds-pupil-finance-card .ds-pupil-finance-grid{
    grid-template-columns: 1fr !important;
  }
}
.ds-manager-grid{
  grid-template-columns: minmax(0,1fr) 300px !important;
}
.ds-manager-main,
.ds-manager-main .ds-card,
.ds-manager-table-wrap{
  min-width: 0 !important;
}
.ds-manager-table{
  width: 100% !important;
  table-layout: auto !important;
}
.ds-manager-table th,
.ds-manager-table td{
  white-space: normal;
}
.ds-manager-table th[style*="width:120px"],
.ds-manager-table td[style*="width:120px"]{
  width:auto !important;
  white-space:nowrap;
}
.ds-instructor-payment-grid{
  display:grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap:12px;
  align-items:end;
}
@media (max-width: 980px){
  .ds-instructor-payment-grid{
    grid-template-columns:1fr 1fr !important;
  }
}
@media (max-width: 640px){
  .ds-instructor-payment-grid{
    grid-template-columns:1fr !important;
  }
}


/* Finance UI polish v3 fixes */
.ds-pupil-wrap .ds-pupil-hero,
.ds-pupil-wrap .ds-pupil-finance-card,
.ds-pupil-wrap .ds-buy-lessons-card{
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.ds-pupil-wrap .ds-pupil-finance-card .ds-pupil-finance-grid{
  max-width: none !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}
@media (min-width: 900px){
  .ds-pupil-wrap .ds-pupil-finance-card .ds-pupil-finance-grid{
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }
}
.ds-manager-wrap .ds-manager-grid{
  display:block !important;
  grid-template-columns: 1fr !important;
}
.ds-manager-wrap .ds-manager-main,
.ds-manager-wrap .ds-manager-sidebar{
  display:block !important;
  width:100% !important;
}
.ds-manager-wrap .ds-manager-main .ds-card,
.ds-manager-wrap .ds-manager-sidebar .ds-card,
.ds-manager-wrap .ds-manager-table-wrap{
  width:100% !important;
  max-width:none !important;
}



/* Finance UI + manual payments v4 real fixes */
.ds-pupil-wrap .ds-pupil-hero,
.ds-pupil-wrap .ds-pupil-finance-card {
  max-width: 680px !important;
  width: calc(100% - 28px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
.ds-pupil-wrap .ds-pupil-hero {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}
.ds-pupil-wrap .ds-pupil-finance-card {
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}
@media (max-width: 680px) {
  .ds-pupil-wrap .ds-pupil-hero,
  .ds-pupil-wrap .ds-pupil-finance-card {
    width: calc(100% - 20px) !important;
    max-width: none !important;
  }
}

/* Force manager content back into one centered column */
.ds-manager-wrap .ds-manager-grid {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  gap: 16px !important;
}
.ds-manager-wrap .ds-manager-main,
.ds-manager-wrap .ds-manager-sidebar {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.ds-manager-wrap .ds-manager-main .ds-card,
.ds-manager-wrap .ds-manager-sidebar .ds-card,
.ds-manager-wrap .ds-manager-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
.ds-manager-wrap .ds-manager-table {
  width: 100% !important;
  table-layout: auto !important;
}

/* Instructor manual payment card grid */
.ds-instructor-payment-grid {
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 12px !important;
  align-items: end !important;
}
@media (max-width: 900px) {
  .ds-instructor-payment-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .ds-instructor-payment-grid { grid-template-columns: 1fr !important; }
}


/* ════════════════════════════════════════════════════════════
   PUPIL DASHBOARD LAYOUT REFINEMENT v1
   Unify pupil card widths and refine hero presentation
   ════════════════════════════════════════════════════════════ */
.ds-pupil-wrap{
  --ds-pupil-content-max: 920px;
}
.ds-pupil-wrap .ds-pupil-grid,
.ds-pupil-wrap .ds-pupil-lower-grid,
.ds-pupil-wrap .ds-pupil-hero,
.ds-pupil-wrap .ds-pupil-finance-card,
.ds-pupil-wrap .ds-buy-lessons-card{
  width: min(calc(100% - 32px), var(--ds-pupil-content-max)) !important;
  max-width: var(--ds-pupil-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
.ds-pupil-wrap .ds-pupil-grid{
  /* Restore the top gap below the sticky header. This "unify card widths"
     refactor moved the side gutters onto width:min(...) above and set padding to
     `0 0 12px` — which also zeroed the TOP padding, so on tabs/pupils with no
     banner between the header and the hero the hero card sat flush against the
     header. Keep sides at 0 (width handles centring) and bottom at 12; restore a
     20px top gap. Not media-scoped, so this fixes desktop and mobile alike. */
  padding: 20px 0 12px !important;
}
.ds-pupil-wrap .ds-pupil-lower-grid{
  padding: 0 0 12px !important;
  margin-top: 18px !important;
}
.ds-pupil-wrap .ds-card{
  max-width: 100% !important;
}
.ds-pupil-wrap .ds-pupil-hero{
  display: grid !important;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr) !important;
  align-items: center !important;
  gap: 22px !important;
  padding: 24px 26px !important;
  margin-top: 16px !important;
  margin-bottom: 18px !important;
}
.ds-pupil-wrap .ds-hero-identity{
  min-width: 0 !important;
  gap: 16px !important;
}
.ds-pupil-wrap .ds-hero-identity-text{
  min-width: 0 !important;
}
.ds-pupil-wrap .ds-hero-name{
  font-size: clamp(1.65rem, 2.7vw, 2.4rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  margin-bottom: 6px !important;
}
.ds-pupil-wrap .ds-hero-meta{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 10px !important;
  font-size: .95rem !important;
  color: rgba(255,255,255,.78) !important;
}
.ds-pupil-wrap .ds-hero-badge{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  background: rgba(12,30,61,.48) !important;
  border: 1px solid rgba(245,158,11,.42) !important;
  color: #f7c15a !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.ds-pupil-wrap .ds-hero-meta-sep{
  color: rgba(255,255,255,.35) !important;
}
.ds-pupil-wrap .ds-hero-stats{
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 10px !important;
}
.ds-pupil-wrap .ds-stat-card{
  min-width: 0 !important;
  padding: 12px 10px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: none !important;
  backdrop-filter: blur(6px);
}
.ds-pupil-wrap .ds-stat-value{
  color: #ffffff !important;
  font-size: 1.45rem !important;
  line-height: 1 !important;
}
.ds-pupil-wrap .ds-stat-label{
  color: rgba(255,255,255,.74) !important;
  font-size: .72rem !important;
  line-height: 1.25 !important;
  margin-top: 8px !important;
  white-space: normal !important;
  text-overflow: initial !important;
  overflow: visible !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}
.ds-pupil-wrap .ds-stat-progress{
  min-width: 0 !important;
}
.ds-pupil-wrap .ds-stat-progress-bar-track{
  background: rgba(255,255,255,.22) !important;
}
.ds-pupil-wrap .ds-pupil-finance-card{
  margin-top: 0 !important;
}
@media (max-width: 900px){
  .ds-pupil-wrap{
    --ds-pupil-content-max: 760px;
  }
  .ds-pupil-wrap .ds-pupil-hero{
    grid-template-columns: 1fr !important;
  }
  .ds-pupil-wrap .ds-hero-stats{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}
@media (max-width: 640px){
  .ds-pupil-wrap{
    --ds-pupil-content-max: none;
  }
  .ds-pupil-wrap .ds-pupil-grid,
  .ds-pupil-wrap .ds-pupil-lower-grid,
  .ds-pupil-wrap .ds-pupil-hero,
  .ds-pupil-wrap .ds-pupil-finance-card,
  .ds-pupil-wrap .ds-buy-lessons-card{
    width: calc(100% - 20px) !important;
  }
  .ds-pupil-wrap .ds-pupil-hero{
    padding: 18px 18px 16px !important;
    gap: 16px !important;
  }
  .ds-pupil-wrap .ds-hero-identity{
    align-items: flex-start !important;
  }
  .ds-pupil-wrap .ds-hero-avatar-label{
    width: 56px !important;
    height: 56px !important;
  }
  .ds-pupil-wrap .ds-hero-name{
    font-size: 1.8rem !important;
  }
  .ds-pupil-wrap .ds-hero-meta{
    font-size: .86rem !important;
  }
  .ds-pupil-wrap .ds-hero-stats{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}



/* PUPIL HERO STATS REFINEMENT v2 */
.ds-pupil-wrap .ds-pupil-hero{
  grid-template-columns: minmax(0,1.2fr) minmax(420px,0.9fr) !important;
}
.ds-pupil-wrap .ds-hero-stats{
  grid-template-columns: repeat(2, minmax(120px,1fr)) !important;
  gap: 12px !important;
  align-content: start !important;
}
.ds-pupil-wrap .ds-stat-card{
  min-height: 108px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}
.ds-pupil-wrap .ds-stat-label{
  font-size: .78rem !important;
  line-height: 1.2 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
  max-width: 10ch !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
@media (max-width: 1100px){
  .ds-pupil-wrap .ds-pupil-hero{
    grid-template-columns: 1fr !important;
  }
  .ds-pupil-wrap .ds-hero-stats{
    grid-template-columns: repeat(2, minmax(120px,1fr)) !important;
  }
}



/* moved to consolidated block — see "CALENDAR — CONSOLIDATED" at bottom of file */



/* moved to consolidated block — see "CALENDAR — CONSOLIDATED" at bottom of file */

/* Modal must scroll from the top and remain usable.
   The .ds-modal backdrop is the scroll container (overflow-y: auto), so
   .ds-modal-content can be naturally tall (max-height: none). Overflow on
   .ds-modal-content is hidden — without that, the modal-header's flat
   background paints over the rounded corners (set on .ds-modal-content) and
   the modal looks sharp-cornered. The sticky header at top:0 still works
   because the scroll context is the backdrop, not the content. */
.ds-modal{
  align-items:flex-start !important;
  overflow-y:auto !important;
  padding:24px !important;
}
.ds-modal-content{
  margin:0 auto 32px !important;
  max-height:none !important;
  overflow:hidden !important;
}
.ds-modal form{
  max-height:none !important;
}
.ds-modal-header{
  position:sticky;
  top:0;
  background:#fff;
  z-index:2;
}

/* moved to consolidated block — see "CALENDAR — CONSOLIDATED" at bottom of file */

/* moved to consolidated block — see "CALENDAR — CONSOLIDATED" at bottom of file */

/* Regression fix: keep site header/footer visible on staging and use real terms popup */
#masthead,
.site-header,
#colophon,
.site-footer,
.ast-above-header-wrap,
.ast-primary-header-bar,
.site-below-footer-wrap,
.ast-footer-overlay {
  display: block !important;
  visibility: visible !important;
}

body.ds-terms-modal-open {
  overflow: hidden;
}

.ds-inline-legal-link--button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

#ds-terms-copy,
.ds-terms-inline,
.ds-auth-card .ds-terms-inline {
  display: none !important;
}

.ds-terms-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
}

.ds-terms-modal.is-open {
  display: block;
}

.ds-terms-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

.ds-terms-modal__dialog {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.ds-terms-modal__card {
  width: min(860px, 100%);
  max-height: calc(100vh - 48px);
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
  border: 1px solid #e2e8f0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ds-terms-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.ds-terms-modal__header h3 {
  margin: 0;
  font-size: 32px;
  line-height: 1.15;
  color: #0f172a;
}

.ds-terms-modal__header p,
.ds-terms-modal__meta {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 14px;
}

.ds-terms-modal__meta {
  padding: 0 24px 16px;
}

.ds-terms-modal__close {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 14px;
  border: 1px solid #dbe3ee;
  background: #ffffff;
  color: #0f172a;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.ds-terms-modal__close:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  border-color: #cbd5e1;
  background: #f8fafc;
}

.ds-terms-modal__close:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}


.ds-terms-modal__body {
  padding: 0 24px 24px;
  overflow: auto;
}

.ds-terms-modal__body p,
.ds-terms-modal__body li {
  color: #334155;
}

.ds-terms-modal__footer {
  padding: 0 24px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

@media (max-width: 768px) {
  .ds-terms-modal__dialog {
    padding: 12px;
  }
  .ds-terms-modal__card {
    max-height: calc(100vh - 24px);
    border-radius: 16px;
  }
  .ds-terms-modal__header,
  .ds-terms-modal__meta,
  .ds-terms-modal__body,
  .ds-terms-modal__footer {
    padding-left: 16px;
    padding-right: 16px;
  }
  .ds-terms-modal__header h3 {
    font-size: 24px;
  }
}


/* Theme-adaptive auth header spacing */
body.ast-theme-transparent-header .ds-auth-wrap--split,
body.ast-theme-transparent-header .ds-auth-wrap--compact,
body.ast-transparent-header .ds-auth-wrap--split,
body.ast-transparent-header .ds-auth-wrap--compact,
body.transparent-header .ds-auth-wrap--split,
body.transparent-header .ds-auth-wrap--compact,
body.has-transparent-header .ds-auth-wrap--split,
body.has-transparent-header .ds-auth-wrap--compact {
  padding-top: clamp(108px, 11vw, 140px);
}

body.admin-bar.ast-theme-transparent-header .ds-auth-wrap--split,
body.admin-bar.ast-theme-transparent-header .ds-auth-wrap--compact,
body.admin-bar.ast-transparent-header .ds-auth-wrap--split,
body.admin-bar.ast-transparent-header .ds-auth-wrap--compact,
body.admin-bar.transparent-header .ds-auth-wrap--split,
body.admin-bar.transparent-header .ds-auth-wrap--compact,
body.admin-bar.has-transparent-header .ds-auth-wrap--split,
body.admin-bar.has-transparent-header .ds-auth-wrap--compact {
  padding-top: clamp(136px, 13vw, 172px);
}

/* Slightly more resilient shell sizing across themes */
.ds-auth-shell,
.ds-auth-shell--signup {
  align-items: start;
}

@media (max-width: 1280px) {
  .ds-auth-shell--signup {
    grid-template-columns: minmax(280px, .72fr) minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .ds-auth-shell,
  .ds-auth-shell--signup {
    grid-template-columns: 1fr;
  }
}


/* ════════════════════════════════════════════════════════════
   SESSION 2 — AUTHORITATIVE HEADER OVERRIDES
   These rules sit at end of file and use !important so they
   win against legacy navy-themed rules earlier in the cascade.
   ════════════════════════════════════════════════════════════ */

/* ── Top bar: light premium ── */
.ds-header {
  background: #FFFFFF !important;
  background-image: none !important;
  height: 56px !important;
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 0 rgba(15,23,42,.02) !important;
  backdrop-filter: none !important;
}

.ds-header-inner {
  max-width: 1400px !important;
  padding: 0 20px !important;
  gap: 16px !important;
  /* CRITICAL: do NOT clip — dropdown sheet must overflow below header */
  overflow: visible !important;
}

.ds-header-brand {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  gap: 10px !important;
}

.ds-header-brand > div,
.ds-brand-text {
  min-width: 0;
}

.ds-brand-name {
  font-family: 'Syne', 'DM Sans', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  letter-spacing: -.01em !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ds-brand-role {
  display: none !important; /* Removed — was redundant clutter */
}

.ds-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

/* Avatar inside trigger pill — neutralize old border/shadow */
.ds-header-menu-trigger .ds-header-avatar,
.ds-header-menu-trigger .ds-header-avatar-initial {
  border: none !important;
  box-shadow: none !important;
}

/* Hide legacy header bits that have no place in the new layout */
.ds-header-avatar-wrap,
.ds-header-avatar-label,
.ds-avatar-camera,
.ds-avatar-remove-btn,
.ds-user-greeting,
.ds-header > .ds-header-inner > .ds-header-actions > .ds-tour-btn,
.ds-header > .ds-header-inner > .ds-header-actions > .ds-dark-toggle {
  display: none !important;
}

/* Re-show inside the dropdown menu */
.ds-header-menu-items #ds-tour-btn,
.ds-header-menu-items #ds-dark-toggle,
.ds-header-menu-items label[for="ds-avatar-file"] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 9px 10px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: .85rem !important;
  font-weight: 500 !important;
  color: #334155 !important;
  cursor: pointer !important;
  text-align: left !important;
  font-family: inherit !important;
  height: auto !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

.ds-header-menu-items #ds-tour-btn:hover,
.ds-header-menu-items #ds-dark-toggle:hover,
.ds-header-menu-items label[for="ds-avatar-file"]:hover {
  background: #F8FAFC !important;
  color: #0F172A !important;
}

/* Dark theme: keep top bar dark when user has selected dark mode */
[data-ds-theme="dark"] .ds-header {
  background: #0c1628 !important;
  border-bottom-color: #1e3052 !important;
}
[data-ds-theme="dark"] .ds-brand-name {
  color: #F1F5F9 !important;
}
[data-ds-theme="dark"] .ds-header-menu-name {
  color: #F1F5F9 !important;
}
[data-ds-theme="dark"] .ds-header-menu-trigger:hover {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
}
[data-ds-theme="dark"] .ds-header-menu-sheet {
  background: #0F1B33 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #E2E8F0 !important;
}
[data-ds-theme="dark"] .ds-header-menu-name-lg {
  color: #F1F5F9 !important;
}
[data-ds-theme="dark"] .ds-header-menu-item {
  color: #CBD5E1 !important;
}
[data-ds-theme="dark"] .ds-header-menu-item:hover {
  background: rgba(255,255,255,.04) !important;
  color: #F1F5F9 !important;
}


/* (the v21.5 mobile final override has moved into the consolidated block below) */


/* ════════════════════════════════════════════════════════════
   CALENDAR — CONSOLIDATED (v21.6)

   Single source of truth for FullCalendar styling. This block
   replaces 9 scattered "calendar fix" patches that accumulated in
   style.css over time. Earlier locations have been replaced with
   marker comments pointing here so a top-to-bottom reader can find
   the rules by following the trail.

   Organisation (top to bottom):
     1. Themed FC vars and base appearance
     2. Toolbar buttons: colours, hover, active states
     3. Cell content: clipping, font sizing
     4. Event styling: cursor, padding, resize handle
     5. Desktop layout (≥769px): toolbar wraps with title flex
     6. Narrow desktop / large tablet (≤768px): general size tweaks
     7. Mobile (≤560px): compact toolbar
     8. Very narrow (≤480px): smaller cells, tighter buttons
     9. Tiny screens (≤400px): hide month view button
    10. Mobile FINAL OVERRIDE — high-specificity nuclear block that
        guarantees the toolbar stays on a single row. Lives last so
        it wins all source-order ties. Do NOT move or split this.
   ════════════════════════════════════════════════════════════ */

/* ── 1. Themed FC vars and base appearance ─────────────────── */
.ds-calendar-wrap .fc {
  --fc-border-color: var(--ds-border);
  --fc-neutral-bg-color: #fff;
  --fc-page-bg-color: transparent;
  --fc-today-bg-color: rgba(245,158,11,.08);
}
.ds-calendar-wrap .fc .fc-toolbar-title {
  font-family: var(--ds-font-display);
  font-weight: 800;
  color: var(--ds-navy);
  letter-spacing: -.03em;
}
.ds-calendar-wrap .fc .fc-button {
  border-radius: 999px;
  text-transform: none;
  font-weight: 700;
  box-shadow: none;
}

/* ── 2. Base toolbar title + button styling ────────────────── */
.fc .fc-toolbar-title { font-family: var(--ds-font-display) !important; font-size: 1rem !important; }
.fc .fc-button {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border-mid) !important;
  color: var(--ds-navy) !important;
  font-size: .8rem !important;
  font-family: var(--ds-font-body) !important;
  box-shadow: none !important;
}
.fc .fc-button:hover { background: var(--ds-surface-hover) !important; }
.fc .fc-button-active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
  background: var(--ds-navy) !important;
  border-color: var(--ds-navy) !important;
  color: white !important;
}
.fc .fc-today-button { opacity: 1 !important; }

/* ── 3. Cell content + event title clipping ────────────────── */
.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number,
.fc .fc-timegrid-axis-cushion,
.fc .fc-timegrid-slot-label-cushion{
  font-size: 0.88rem !important;
}

/* ── 4. Event styling: cursor, resize, padding ─────────────── */
.fc .fc-event { cursor: pointer !important; padding-bottom: 10px !important; }
.fc .fc-event-resizer {
  display: block !important;
  height: 8px !important;
  background: rgba(255,255,255,0.9);
  cursor: ns-resize !important;
}

/* ── 5. Desktop layout (≥769px): toolbar wraps with flex title ─ */
@media (min-width: 769px) {
  .fc-toolbar {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .fc-toolbar-title {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 180px !important;
  }
  .fc .fc-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  .fc .fc-toolbar-chunk {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .fc .fc-toolbar-chunk:nth-child(2) {
    flex: 1 1 240px !important;
    justify-content: center !important;
    min-width: 0 !important;
  }
  .fc .fc-toolbar-title {
    font-size: clamp(0.95rem, 1.6vw, 1.35rem) !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-overflow: unset !important;
    overflow: visible !important;
    max-width: none !important;
    text-align: center !important;
  }
}

/* ── 6. Tablet / narrow desktop (≤768px): general size tweaks ── */
@media (max-width: 768px) {
  .fc .fc-toolbar { justify-content: center !important; }
  .fc .fc-toolbar-title { font-size: 1rem !important; }
  .fc .fc-button {
    padding: .35rem .55rem !important;
    font-size: .82rem !important;
  }
  .fc .fc-col-header-cell-cushion { font-size: 0.78rem !important; }
}

/* ── 7. Mobile (≤560px): compact toolbar with all 4 view buttons ─ */
@media (max-width: 560px) {
  .fc-toolbar {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .fc-toolbar-chunk {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
  }
  .fc-toolbar-chunk:first-child .fc-button {
    padding: 3px 6px !important;
    font-size: .65rem !important;
  }
  .fc-toolbar-title {
    font-size: .78rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100px !important;
  }
  .fc-dayGridMonth-button,
  .fc-timeGridWeek-button,
  .fc-timeGridDay-button,
  .fc-listWeek-button {
    padding: 3px 5px !important;
    font-size: .6rem !important;
  }
}

/* ── 8. Very narrow (≤480px): smaller cells, tighter toolbar ─── */
@media (max-width: 480px) {
  .fc .fc-toolbar {
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  .fc .fc-toolbar-title { font-size: .95rem !important; }
  .fc .fc-button {
    padding: 5px 8px !important;
    font-size: .72rem !important;
  }
  .fc .fc-toolbar-chunk {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    gap: 4px !important;
  }
  .fc .fc-col-header-cell-cushion,
  .fc .fc-daygrid-day-number {
    font-size: .68rem !important;
    padding: 2px 3px !important;
  }
  .fc-toolbar { gap: 4px !important; }
  .fc-toolbar-title { font-size: .9rem !important; max-width: 130px !important; }
  .fc .fc-button { padding: 3px 7px !important; font-size: .7rem !important; }
  .fc-toolbar-chunk .fc-button { padding: 4px 8px !important; font-size: .72rem !important; }
}

/* ── 9. Tiny screens (≤400px): hide month view button ────────── */
@media (max-width: 400px) {
  .fc-toolbar-title { max-width: 70px !important; font-size: .7rem !important; }
  .fc-dayGridMonth-button { display: none !important; }
}

/* ── 10. Mobile FINAL OVERRIDE — keep toolbar on a single row ── */
/* This block guarantees prev/next | title | today stays as ONE row
   on mobile. High specificity (chained classes) + last source order
   means it wins every cascade tie. If anything else in this file
   tries to set flex-wrap/flex-direction on the toolbar at ≤768px
   in the future, this still wins. Do NOT move or split. */
@media (max-width: 768px) {
  .fc.fc-media-screen .fc-toolbar.fc-header-toolbar,
  .fc .fc-toolbar.fc-header-toolbar,
  .ds-calendar-wrap .fc .fc-toolbar.fc-header-toolbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    padding: 6px 8px !important;
  }
  .fc.fc-media-screen .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk,
  .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk,
  .ds-calendar-wrap .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .fc.fc-media-screen .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:nth-child(2),
  .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:nth-child(2),
  .ds-calendar-wrap .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:nth-child(2) {
    flex: 1 1 0 !important;
    justify-content: center !important;
    min-width: 0 !important;
  }
  .fc.fc-media-screen .fc-toolbar.fc-header-toolbar .fc-toolbar-title,
  .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-title,
  .ds-calendar-wrap .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-title {
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: none !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .fc.fc-media-screen .fc-toolbar.fc-header-toolbar .fc-button,
  .fc .fc-toolbar.fc-header-toolbar .fc-button,
  .ds-calendar-wrap .fc .fc-toolbar.fc-header-toolbar .fc-button {
    padding: 5px 9px !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════
   Requests tab — v3.5.23
   Pupil lesson request cards (pending + recent decisions sections)
   Rebuilt to use proper classes instead of inline styles, with
   icon+text chips that wrap as units on narrow viewports.
   ════════════════════════════════════════════════════════════ */

.pt-requests-section {
    margin-bottom: 18px;
}
.pt-requests-section:last-child {
    margin-bottom: 0;
}
.pt-requests-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: .92rem;
    letter-spacing: -.01em;
    color: var(--ds-text, #0F172A);
    margin: 6px 4px 10px;
}
.pt-requests-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: var(--pt-navy, #0C1E3D);
    color: #fff;
    font-family: inherit;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
}
.pt-requests-section-sub {
    font-family: inherit;
    font-weight: 500;
    font-size: .76rem;
    color: var(--ds-text-muted, #64748B);
    text-transform: none;
}
.pt-requests-section__card {
    padding: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden;
}

/* Subtle tone-down for the recent-decisions section */
.pt-requests-section + .pt-requests-section .pt-requests-section__card {
    background: #FAFBFC;
}

/* "All caught up" banner shown when pending=0 but recent>0 */
.pt-requests-allclear {
    padding: 14px 18px;
    margin-bottom: 18px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 12px;
}
.pt-requests-allclear__title {
    font-weight: 700;
    color: #166534;
    font-size: .95rem;
    margin-bottom: 2px;
}
.pt-requests-allclear__desc {
    color: #15803D;
    font-size: .84rem;
}

/* ── The card itself ─────────────────────────────────────── */
.pt-request-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ds-border, #E2E8F0);
}
.pt-request-card:last-child {
    border-bottom: 0;
}

.pt-request-card__main {
    min-width: 0;        /* allow text inside grid child to shrink and wrap */
}
.pt-request-card__name {
    font-weight: 600;
    font-size: .95rem;
    color: var(--ds-text, #0F172A);
    margin-bottom: 2px;
    line-height: 1.3;
}
.pt-request-card__name-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color .15s, color .15s;
}
.pt-request-card__name-link:hover,
.pt-request-card__name-link:focus {
    color: var(--pt-navy, #0C1E3D);
    border-bottom-color: var(--ds-border, #E2E8F0);
}
.pt-request-card__age {
    font-size: .78rem;
    color: var(--ds-text-muted, #64748B);
    margin-bottom: 8px;
}
.pt-request-card--is-declined .pt-request-card__age {
    color: #B91C1C;
}
.pt-request-card--is-approved .pt-request-card__age {
    color: #047857;
}

/* Meta row — calendar / clock / duration chips that wrap as units */
.pt-request-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: .86rem;
    color: #374151;
}
.pt-request-meta__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.pt-request-meta__icon {
    color: var(--ds-text-muted, #64748B);
    flex-shrink: 0;
}

.pt-request-card__notes {
    font-size: .84rem;
    color: var(--ds-text-muted, #64748B);
    margin-top: 8px;
    font-style: italic;
}
.pt-request-card__decline-reason {
    font-size: .84rem;
    color: #B91C1C;
    margin-top: 6px;
    padding: 6px 10px;
    background: #FEF2F2;
    border-left: 2px solid #FCA5A5;
    border-radius: 4px;
}

/* ── Right column: status pill + buttons ─────────────────── */
.pt-request-card__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.pt-request-status {
    display: inline-flex;
    align-items: center;
    font-size: .76rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: .01em;
    white-space: nowrap;
}
.pt-request-status--is-pending {
    color: #B45309;
    background: #FEF3C7;
}
.pt-request-status--is-approved {
    color: #047857;
    background: #D1FAE5;
}
.pt-request-status--is-declined {
    color: #B91C1C;
    background: #FEE2E2;
}

.pt-request-actions {
    display: flex;
    gap: 8px;
}

.pt-request-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, opacity .15s;
    min-height: 38px;        /* desktop touch target — bumped on mobile below */
}
.pt-request-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.pt-request-btn--approve {
    background: #10B981;
    color: #fff;
    border: 1px solid #10B981;
}
.pt-request-btn--approve:hover:not(:disabled) {
    background: #059669;
    border-color: #059669;
}
.pt-request-btn--decline {
    background: #fff;
    color: #DC2626;
    border: 1px solid #FCA5A5;
}
.pt-request-btn--decline:hover:not(:disabled) {
    background: #FEF2F2;
    border-color: #DC2626;
}

/* ── Mobile (<= 600px): stack main+side vertically and let buttons fill width ── */
@media (max-width: 600px) {
    .pt-request-card {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px 16px;
    }
    .pt-request-card__side {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
    }
    .pt-request-actions {
        flex: 1 1 100%;
        order: 2;
    }
    .pt-request-status {
        order: 1;
    }
    .pt-request-btn {
        flex: 1;            /* split available width 50/50 */
        min-height: 44px;   /* iOS-friendly touch target */
        padding: 10px 16px;
    }
    .pt-requests-allclear {
        margin-left: 8px;
        margin-right: 8px;
    }
    .pt-requests-section-title {
        margin-left: 8px;
    }
}

/* ════════════════════════════════════════════════════════════
   PUPIL HERO — NEW BLOCK LAYOUT (overrides the grid layout above)
   Must come last to win the cascade.
   ════════════════════════════════════════════════════════════ */
.ds-pupil-wrap .ds-pupil-hero {
  display: block !important;
  grid-template-columns: unset !important;
  align-items: unset !important;
  gap: unset !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

/* Banner uses same width formula as hero + grid */
.ds-pupil-wrap .pt-wl-pupil-banner,
.ds-pupil-wrap .pt-test-pupil-banner {
  width: min(calc(100% - 32px), var(--ds-pupil-content-max, 920px)) !important;
  max-width: var(--ds-pupil-content-max, 920px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
@media (max-width: 640px) {
  .ds-pupil-wrap .pt-wl-pupil-banner,
  .ds-pupil-wrap .pt-test-pupil-banner {
    width: calc(100% - 20px) !important;
  }
}

/* ==========================================================================
   PARENT PORTAL  (v0.9.2)
   Purpose-built parent surface. Everything scoped under .ds-parent-portal so
   it can't collide with the pupil/instructor cascades. Reuses theme tokens.
   ========================================================================== */
.ds-parent-portal { --ptp-gap: 16px; }
.ds-parent-portal .pt-card.pt-parent-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-md);
  margin: 0 0 var(--ptp-gap);
  overflow: hidden;
}
.ds-parent-portal .pt-parent-card-head {
  font-family: var(--ds-font-head, inherit);
  font-weight: 700;
  font-size: .95rem;
  color: var(--ds-text);
  padding: 14px 18px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-parent-portal .pt-parent-card-body { padding: 16px 18px; }

/* Child switcher */
.ds-parent-portal .pt-parent-switcher {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 var(--ptp-gap);
}
.ds-parent-portal .pt-parent-switcher-tab {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--ds-border-mid);
  background: var(--ds-surface);
  color: var(--ds-text-muted);
  font-weight: 600; font-size: .88rem;
  text-decoration: none;
  transition: all .15s ease;
}
.ds-parent-portal .pt-parent-switcher-tab:hover { background: var(--ds-surface-hover); }
.ds-parent-portal .pt-parent-switcher-tab.is-active {
  background: var(--ds-navy-mid); border-color: var(--ds-navy-mid); color: #fff;
}

/* Hero */
.ds-parent-portal .pt-parent-hero {
  display: flex; align-items: center; gap: 20px;
  background: linear-gradient(135deg, #0C1E3D 0%, #1A3461 55%, #2A4A82 100%);
  color: #fff;
  border-radius: var(--ds-radius-lg);
  padding: 22px 24px;
  margin: 0 0 var(--ptp-gap);
  box-shadow: var(--ds-shadow-md);
}
.ds-parent-portal .pt-parent-hero-dial { flex: 0 0 auto; line-height: 0; }
.ds-parent-portal .pt-parent-hero-dial-pct { fill: #fff; font-size: 22px; font-weight: 800; font-family: var(--ds-font-head, sans-serif); }
.ds-parent-portal .pt-parent-hero-dial-cap { fill: rgba(255,255,255,.7); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.ds-parent-portal .pt-parent-hero-text { min-width: 0; }
.ds-parent-portal .pt-parent-hero-eyebrow { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 2px; }
.ds-parent-portal .pt-parent-hero-name { font-family: var(--ds-font-display, inherit); font-weight: 800; font-size: 1.5rem; margin: 0 0 10px; color: #fff; line-height: 1.1; }
.ds-parent-portal .pt-parent-hero-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-parent-portal .pt-parent-hero-stat { background: rgba(255,255,255,.12); border-radius: 999px; padding: 4px 12px; font-size: .82rem; }
.ds-parent-portal .pt-parent-hero-stat strong { font-weight: 800; }

/* Tab nav */
.ds-parent-portal .pt-parent-nav {
  display: flex; gap: 4px;
  background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-radius: 999px; padding: 4px; margin: 0 0 var(--ptp-gap);
}
.ds-parent-portal .pt-parent-nav a {
  flex: 1 1 0; text-align: center; padding: 9px 12px;
  border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: .9rem; color: var(--ds-text-muted);
  transition: all .15s ease;
}
.ds-parent-portal .pt-parent-nav a:hover { background: var(--ds-surface-hover); }
.ds-parent-portal .pt-parent-nav a.is-active { background: var(--ds-navy-mid); color: #fff; }

/* Next lesson */
.ds-parent-portal .pt-parent-next-date { font-weight: 700; font-size: 1.05rem; color: var(--ds-text); }
.ds-parent-portal .pt-parent-next-meta { color: var(--ds-text-muted); font-size: .9rem; margin-top: 2px; }
.ds-parent-portal .pt-parent-next-more { margin-top: 10px; font-size: .85rem; color: var(--ds-text-muted); }
.ds-parent-portal .pt-parent-next-more a { color: var(--ds-navy-mid); font-weight: 600; }

/* Balance */
.ds-parent-portal .pt-parent-balance { font-family: var(--ds-font-head, inherit); font-weight: 800; font-size: 1.6rem; }
.ds-parent-portal .pt-parent-balance--owed   { color: var(--ds-danger, #dc2626); }
.ds-parent-portal .pt-parent-balance--credit { color: var(--ds-success, #059669); }
.ds-parent-portal .pt-parent-balance--zero   { color: var(--ds-text); }
.ds-parent-portal .pt-parent-note { color: var(--ds-text-muted); font-size: .88rem; margin: 8px 0 0; line-height: 1.5; }
.ds-parent-portal .pt-parent-note a { color: var(--ds-navy-mid); font-weight: 600; }

/* Contact */
.ds-parent-portal .pt-parent-contact-name { font-weight: 700; font-size: 1.02rem; color: var(--ds-text); margin-bottom: 10px; }
.ds-parent-portal .pt-parent-contact-rows { display: flex; flex-direction: column; gap: 8px; }
.ds-parent-portal .pt-parent-contact-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius, 12px);
  text-decoration: none; background: var(--ds-surface); transition: background .15s ease;
}
.ds-parent-portal .pt-parent-contact-row:hover { background: var(--ds-surface-hover); }
.ds-parent-portal .pt-parent-contact-label { color: var(--ds-text-subtle); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.ds-parent-portal .pt-parent-contact-val { color: var(--ds-navy-mid); font-weight: 600; font-size: .92rem; }

/* Lessons timeline */
.ds-parent-portal .pt-parent-timeline { display: flex; flex-direction: column; gap: 10px; }
.ds-parent-portal .pt-parent-tl-item {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 14px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius, 12px);
  border-left: 4px solid var(--ds-border-mid);
}
.ds-parent-portal .pt-parent-tl-item.status-completed { border-left-color: var(--ds-success, #059669); }
.ds-parent-portal .pt-parent-tl-item.status-scheduled { border-left-color: var(--ds-navy-light); }
.ds-parent-portal .pt-parent-tl-item.status-cancelled { border-left-color: var(--ds-text-subtle); opacity: .7; }
.ds-parent-portal .pt-parent-tl-item.status-no_show   { border-left-color: var(--ds-danger, #dc2626); }
.ds-parent-portal .pt-parent-tl-date { font-weight: 700; color: var(--ds-text); }
.ds-parent-portal .pt-parent-tl-meta { color: var(--ds-text-muted); font-size: .88rem; margin-top: 2px; }
.ds-parent-portal .pt-parent-tl-notes { color: var(--ds-text-muted); font-size: .86rem; margin-top: 8px; line-height: 1.5; }
.ds-parent-portal .pt-parent-tl-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.ds-parent-portal .pt-parent-tl-status { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ds-text-muted); }
.ds-parent-portal .pt-parent-tl-grade { color: #fff; font-weight: 700; font-size: .82rem; padding: 2px 8px; border-radius: 999px; }

/* Progress charts */
.ds-parent-portal .pt-parent-chart-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.ds-parent-portal .pt-parent-chart-block { margin-top: 18px; }
.ds-parent-portal .pt-parent-chart-block:first-child { margin-top: 0; }
.ds-parent-portal .pt-parent-chart-title { font-weight: 700; font-size: .9rem; color: var(--ds-text); margin-bottom: 8px; }

@media (max-width: 600px) {
  .ds-parent-portal .pt-parent-hero { flex-direction: column; text-align: center; gap: 14px; padding: 20px 16px; }
  .ds-parent-portal .pt-parent-hero-stats { justify-content: center; }
  .ds-parent-portal .pt-parent-hero-name { font-size: 1.35rem; }
  .ds-parent-portal .pt-parent-nav a { padding: 9px 6px; font-size: .85rem; }
}

/* Parent portal — chart canvas height constraint + cancellation visibility
   (v0.9.3). Shared chart renderers use maintainAspectRatio:false, so each
   canvas MUST sit in a fixed-height positioned wrapper or it grows unbounded. */
.ds-parent-portal .pt-parent-chart-canvas {
  position: relative;
  height: 240px;
  margin-top: 6px;
}
.ds-parent-portal .pt-parent-chart-canvas canvas {
  max-height: 240px;
}

/* Late-cancel emphasis on a timeline item */
.ds-parent-portal .pt-parent-tl-item.is-late-cancel {
  background: #fef2f2;
  border-color: #fecaca;
}
.ds-parent-portal .pt-parent-tl-cancel {
  margin-top: 6px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ds-danger, #dc2626);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ds-parent-portal .pt-parent-tl-cancel-late {
  display: inline-block;
  background: var(--ds-danger, #dc2626);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 2px 7px;
  border-radius: 999px;
}
.ds-parent-portal .pt-parent-tl-status.status-cancelled { color: var(--ds-danger, #dc2626); }
.ds-parent-portal .pt-parent-tl-status.status-no_show    { color: var(--ds-danger, #dc2626); }

/* Recent-cancellation alert card on the overview */
.ds-parent-portal .pt-parent-cancel-alert {
  border-left: 4px solid var(--ds-danger, #dc2626);
}
.ds-parent-portal .pt-parent-cancel-alert-head {
  font-weight: 700;
  color: var(--ds-danger, #dc2626);
  font-size: 1rem;
  margin-bottom: 2px;
}

/* ==========================================================================
   PARENT PORTAL — width parity + readiness + chart legibility  (v0.9.4)
   The pupil dashboard constrains content to a centred 920px column via
   .ds-pupil-wrap. The parent portal previously inherited the wide .ds-wrap
   break-out, so cards spanned the full page. Match the pupil column exactly.
   ========================================================================== */
.ds-parent-portal {
  --ptp-content-max: 920px;
}
.ds-parent-portal .pt-parent-hero,
.ds-parent-portal .pt-parent-switcher,
.ds-parent-portal .pt-parent-nav,
.ds-parent-portal .pt-parent-body,
.ds-parent-portal .pt-test-pupil-banner {
  width: min(calc(100% - 32px), var(--ptp-content-max)) !important;
  max-width: var(--ptp-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
@media (max-width: 900px) {
  .ds-parent-portal { --ptp-content-max: 760px; }
}
@media (max-width: 640px) {
  .ds-parent-portal { --ptp-content-max: none; }
}

/* Readiness card inherits the shared .ds-readiness-* styling; just give the
   wrapper the same rhythm as the other parent cards. */
.ds-parent-portal .pt-parent-readiness-wrap { margin: 0 0 16px; }
.ds-parent-portal .pt-parent-readiness-wrap .ds-card { margin: 0 !important; }

/* Short plain-English explainer under each chart title */
.ds-parent-portal .pt-parent-chart-explain {
  color: var(--ds-text-muted);
  font-size: .82rem;
  line-height: 1.45;
  margin: -2px 0 8px;
}
.ds-parent-portal .pt-parent-chart-block { margin-top: 26px; }

/* Child-switcher attention dot — presence/colour only, no count */
.ds-parent-portal .pt-parent-switcher-tab { position: relative; }
.ds-parent-portal .pt-parent-switcher-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ds-danger, #dc2626);
  margin-left: 7px;
  vertical-align: middle;
}
.ds-parent-portal .pt-parent-switcher-tab.is-active .pt-parent-switcher-dot {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.6);
}

/* ==========================================================================
   PARENT PORTAL — Payments  (v0.9.7)
   ========================================================================== */
.ds-parent-portal .pt-parent-topup-link {
  display: inline-block;
  margin-top: 12px;
  font-weight: 600;
  font-size: .9rem;
  color: var(--ds-navy-mid);
  text-decoration: none;
}
.ds-parent-portal .pt-parent-topup-link:hover { text-decoration: underline; }

.ds-parent-portal .pt-parent-topup-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.ds-parent-portal .pt-parent-topup-field { display: flex; flex-direction: column; gap: 6px; }
.ds-parent-portal .pt-parent-topup-field label { font-weight: 600; font-size: .88rem; color: var(--ds-text); }
/* v0.9.366 — size to the longest option (was a fixed 220px cap that clipped
   the bulk-discount labels on desktop); 100% cap prevents card overflow. */
.ds-parent-portal .pt-parent-topup-field .ds-input { width: auto; min-width: 220px; max-width: 100%; }

/* Post-payment result banners */
.ds-parent-portal .pt-parent-pay-result--ok    { border-left: 4px solid var(--ds-success, #059669); }
.ds-parent-portal .pt-parent-pay-result--ok strong { color: var(--ds-success, #059669); }
.ds-parent-portal .pt-parent-pay-result--cancel { border-left: 4px solid var(--ds-text-subtle, #94A3B8); }

/* Payment history list */
.ds-parent-portal .pt-parent-pay-list { display: flex; flex-direction: column; }
.ds-parent-portal .pt-parent-pay-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--ds-border);
}
.ds-parent-portal .pt-parent-pay-row:last-child { border-bottom: none; }
.ds-parent-portal .pt-parent-pay-amount { font-weight: 700; font-size: 1.02rem; color: var(--ds-text); }
.ds-parent-portal .pt-parent-pay-meta { color: var(--ds-text-muted); font-size: .85rem; margin-top: 2px; }

@media (max-width: 600px) {
  .ds-parent-portal .pt-parent-topup-row { flex-direction: column; align-items: stretch; }
  .ds-parent-portal .pt-parent-topup-field .ds-input { width: 100%; max-width: none; }
  .ds-parent-portal .pt-parent-nav a { padding: 9px 4px; font-size: .82rem; }
}

/* Instructor curriculum list — card layout (replaces the old responsive table) */
.ds-curr-cards { display:flex; flex-direction:column; gap:12px; padding:16px; }
.ds-curr-card { border:1px solid var(--ds-border,#e5e7eb); border-radius:14px; padding:16px; background:#fff; box-sizing:border-box; }
.ds-curr-card-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ds-curr-card-name { font-weight:700; font-size:1rem; color:var(--ds-text,#0F172A); }
.ds-curr-default-pill { font-size:.72rem; font-weight:700; color:#059669; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:999px; padding:2px 10px; white-space:nowrap; }
.ds-curr-card-desc { color:var(--ds-text-muted,#64748B); font-size:.88rem; margin-top:4px; }
.ds-curr-card-meta { color:var(--ds-text-muted,#94A3B8); font-size:.78rem; margin-top:8px; text-transform:uppercase; letter-spacing:.03em; font-weight:600; }
.ds-curr-card-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.ds-curr-card-actions .ds-btn { flex:0 0 auto; text-align:center; }
.ds-curr-setdefault-btn { color:#059669; background:#f0fdf4; border:1px solid #bbf7d0; }
.ds-curr-delete-btn { color:#dc2626; background:#fef2f2; border:1px solid #fecaca; }
.ds-curr-empty { text-align:center; color:var(--ds-text-muted,#94A3B8); padding:24px 16px; }
@media (max-width:600px) {
  .ds-curr-card-actions .ds-btn { flex:1 1 auto; }
}

/* Skill Mastery breakdown (replaces Grade Trend on the progress card) */
.ds-mastery-wrap { margin-bottom: 4px; }
.ds-mastery-bar { display:flex; width:100%; height:16px; border-radius:8px; overflow:hidden; background:#e5e7eb; }
.ds-mastery-seg { height:100%; }
.ds-mastery-seg:first-child { border-top-left-radius:8px; border-bottom-left-radius:8px; }
.ds-mastery-seg:last-child  { border-top-right-radius:8px; border-bottom-right-radius:8px; }
.ds-mastery-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; }
.ds-mastery-key { display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:var(--ds-text-muted,#64748B); }
.ds-mastery-key i { width:10px; height:10px; border-radius:3px; display:inline-block; flex:none; }

/* Test-readiness mock gate (final step) + mock-passed confirmation */
.ds-readiness-mock-gate { background:#FFFBEB; border:1px solid #FDE68A; border-radius:10px; padding:12px 14px; }
.ds-readiness-mock-gate .ds-readiness-label { color:#B45309; font-weight:700; }
.ds-readiness-mock-gate p { color:var(--ds-text,#0F172A); font-size:.9rem; line-height:1.45; }
.ds-readiness-mock-ok { margin-top:.5em; color:#059669; font-weight:600; font-size:.85em; }

/* ─────────────────────────────────────────────────────────────────────────
   PUBLIC AUTH PAGES — brand-align with the marketing site
   The login (/ds-portal/) and signup (/ds-signup/) pages sit right next to the
   marketing site, which was redesigned to use Inter (not Syne/DM Sans), flat
   gold/navy buttons (8px radius, no shadow) and roomier inputs. Without this the
   portals stood out as off-brand. Scoped to .ds-auth-wrap so the in-app
   dashboards are untouched (they keep Syne/DM Sans). Placed last so it wins on
   cascade order; targeted !important only where base auth rules force a value.
   ───────────────────────────────────────────────────────────────────────── */
.ds-auth-wrap,
.ds-auth-wrap *:not(svg):not(path):not(i) {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
.ds-auth-wrap h1,
.ds-auth-wrap h2,
.ds-auth-wrap h3 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.08;
}
/* Buttons: flat, 8px radius, Inter 700 — matches the site CTA geometry.
   Primary stays navy (the site reserves gold for the marketing CTA). */
.ds-auth-wrap .ds-btn {
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
}
.ds-auth-wrap .ds-btn-outline {
  border: 1px solid var(--ds-border-mid, #C8D5E8) !important;
  background: #fff !important;
}
/* Inputs: 8px radius, roomier padding, larger text (were 3px / cramped). */
.ds-auth-wrap input[type="text"],
.ds-auth-wrap input[type="email"],
.ds-auth-wrap input[type="password"],
.ds-auth-wrap input[type="tel"],
.ds-auth-wrap input[type="number"],
.ds-auth-wrap select {
  border-radius: 8px !important;
  border: 1px solid var(--ds-border-mid, #C8D5E8) !important;
  padding: 11px 13px !important;
  font-size: 15px !important;
}