/* ============================================================
   BLine — Instructor Dashboard (SaaS Rebuild)
   ============================================================ */

/* ── Tokens ── */
:root {
  --pt-navy:      #0C1E3D;
  --pt-navy-2:    #142847;
  --pt-teal:      #0EA5E9;
  --pt-teal-dark: #0284C7;
  --pt-green:     #10B981;
  --pt-amber:     #F59E0B;
  --pt-red:       #EF4444;
  --pt-bg:        #F1F5F9;
  --pt-card:      #FFFFFF;
  --pt-border:    #E2E8F0;
  --pt-border-2:  #CBD5E1;
  --pt-text:      #0F172A;
  --pt-text-2:    #334155;
  --pt-muted:     #64748B;
  --pt-muted-2:   #94A3B8;
  --pt-radius:    16px;
  --pt-radius-sm: 10px;
  --pt-radius-xs: 6px;
  --pt-shadow:    0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --pt-shadow-md: 0 4px 16px rgba(15,23,42,.10);
  --pt-shadow-lg: 0 8px 32px rgba(15,23,42,.16);
}

/* ── Dashboard shell ── */
/* ══════════════════════════════════════════════════════════════
   UNIFIED TAB SHELL (Session 1)
   Goal: every instructor tab has consistent width + consistent
   top header. Previously .pt-dashboard was full-width while
   .ds-tab-content clamped to 900px → inconsistency.
   ══════════════════════════════════════════════════════════════ */

.pt-shell {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 20px 120px;
    box-sizing: border-box;
    min-height: 100vh;
    font-family: 'DM Sans', system-ui, sans-serif;
}
@media (max-width: 560px) {
    .pt-shell {
        padding: 16px 14px 110px;
    }
}

/* Unified tab header — appears at the top of every tab.
   When used directly inside .pt-shell it inherits the shell's width.
   When used inline (above .ds-tab-content etc.) it provides its own
   max-width + horizontal padding so it doesn't go full-viewport. */
.pt-tab-header {
    max-width: 900px;
    margin: 0 auto;
    padding: 28px 20px 16px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--pt-border, #E2E8F0);
    flex-wrap: wrap;
    box-sizing: border-box;
}

/* When .pt-tab-header is the direct child of .pt-shell (Home),
   the shell already supplies padding — drop ours to avoid doubling. */
.pt-shell > .pt-tab-header {
    padding: 0 0 16px;
    max-width: none;
    margin: 0 0 22px;
}

/* ── PUPILS TAB — self-contained shell ───────────────────────────
   Header and body share ONE wrapper with ONE width system. Previous
   approaches sized header (.pt-tab-header at 900px) and body
   (.ds-content at 1400px) independently, which always misaligned.
   The shell wraps both so they have the same parent and the same
   layout context. */
.pt-pupils-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.pt-pupils-shell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 0 14px;
    flex-wrap: wrap;
}

.pt-pupils-shell-titlewrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pt-pupils-shell-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--pt-text, #0F172A);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}

.pt-pupils-shell-sub {
    font-size: .88rem;
    color: var(--pt-muted, #64748B);
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
}

.pt-pupils-shell-action {
    flex-shrink: 0;
}

.pt-pupils-shell-filterrow {
    padding: 0 0 14px;
    border-bottom: 1px solid var(--pt-border, #E2E8F0);
    margin-bottom: 18px;
}

.pt-pupils-shell-filterrow .pt-pupils-filter {
    margin: 0;
    padding: 0;
    background: transparent;
    border-bottom: none;
}

/* When there's no filter row (no waiting pupils), still need an underline
   between the header and body. */
.pt-pupils-shell-header:last-of-type {
    border-bottom: 1px solid var(--pt-border, #E2E8F0);
    margin-bottom: 18px;
}

/* The body inside the shell — two-pane sidebar + main detail. */
.pt-pupils-shell-body {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    align-items: start;
}

/* On narrow viewports, stack the two panes. */
@media (max-width: 720px) {
    .pt-pupils-shell {
        padding: 0 14px;
    }
    .pt-pupils-shell-body {
        grid-template-columns: 1fr;
    }
    .pt-pupils-shell-body.is-detail .ds-content-sidebar {
        display: none;
    }
    .pt-pupils-shell-body.is-list .ds-content-main {
        display: none;
    }
}
.pt-tab-header-main {
    min-width: 0;
    flex: 1 1 auto;
}
.pt-tab-header-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--pt-text, #0F172A);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 4px;
}
.pt-tab-header-sub {
    font-size: .85rem;
    color: var(--pt-muted, #64748B);
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
}
.pt-tab-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
@media (max-width: 560px) {
    .pt-tab-header {
        padding: 20px 14px 14px;
        margin-bottom: 4px;
    }
    .pt-shell > .pt-tab-header {
        padding: 0 0 14px;
        margin-bottom: 18px;
    }
    .pt-tab-header-title {
        font-size: 1.3rem;
    }
    .pt-tab-header-sub {
        font-size: .8rem;
    }
    .pt-tab-header-actions {
        width: 100%;
    }
}

/* ── Dashboard header ── */
.pt-head {
  margin-bottom: 24px;
}
.pt-head-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--pt-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 6px;
}
.pt-head-sub {
  font-size: .88rem;
  color: var(--pt-muted);
  margin: 0;
  font-weight: 500;
}

/* ── Hero metrics — 2 big at-a-glance numbers ── */
.pt-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.pt-hero-metric {
  background: var(--pt-card);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius);
  padding: 20px 22px;
  box-shadow: var(--pt-shadow);
  transition: box-shadow .15s ease, transform .15s ease;
}
.pt-hero-metric:hover {
  box-shadow: var(--pt-shadow-md);
}
.pt-hero-metric-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--pt-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 10px;
  line-height: 1.2;
}
.pt-hero-metric-value {
  font-family: 'Syne', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--pt-text);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
}
.pt-hero-metric-meta {
  font-size: .8rem;
  color: var(--pt-muted);
  font-weight: 500;
  line-height: 1.3;
}

/* ── Main grid ── */
.pt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.pt-col { display: flex; flex-direction: column; gap: 20px; }

/* ── Card ── */
.pt-card {
  background: var(--pt-card);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius);
  box-shadow: var(--pt-shadow);
  overflow: hidden;
}
.pt-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--pt-border);
  background: #FAFBFC;
  flex-wrap: wrap;
}
.pt-card-head-title {
  font-weight: 700;
  font-size: .92rem;
  color: var(--pt-text);
  flex: 1;
  min-width: 0;
}
.pt-card-head-sub {
  font-size: .78rem;
  color: var(--pt-muted);
  background: var(--pt-bg);
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.pt-card-head-link {
  font-size: .78rem;
  color: var(--pt-teal-dark);
  text-decoration: none;
  font-weight: 600;
  /* v3.8.9.38 — merged from a second declaration further down the file.
     Card-head link sits in a flex container; without these the label can
     wrap or get squeezed by sibling content. */
  white-space: nowrap;
  flex-shrink: 0;
}
.pt-card-head-link:hover { text-decoration: underline; }
.pt-card-body { padding: 20px; }
.pt-card-icon {
  width: 18px; height: 18px;
  color: var(--pt-muted);
  flex-shrink: 0;
}

/* ── Today's Lessons ── */
.pt-lesson-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pt-lesson-row {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--pt-border);
  transition: background .15s;
}
.pt-lesson-row:last-child { border-bottom: none; }
.pt-lesson-row:hover { background: #FAFBFC; }

/* Avatar (first-initial circle) */
.pt-lesson-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F1F5F9, #E2E8F0);
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .95rem;
  font-family: 'Syne', sans-serif;
  flex-shrink: 0;
}

/* Body spans the two rows */
.pt-lesson-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Row 1: pupil name + status pill */
.pt-lesson-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.pt-lesson-pupil {
  font-weight: 700;
  font-size: .95rem;
  color: var(--pt-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Row 2: times + action */
.pt-lesson-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pt-lesson-times {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: .82rem;
  color: var(--pt-muted);
  min-width: 0;
  flex-wrap: wrap;
}
.pt-lesson-time-range {
  color: var(--pt-text-2);
  font-weight: 600;
  white-space: nowrap;
}
.pt-lesson-dur {
  color: var(--pt-muted);
  font-size: .78rem;
  white-space: nowrap;
}
.pt-lesson-dur::before {
  content: '·';
  margin-right: 6px;
  color: var(--pt-muted-2);
}

.pt-lesson-action-btn {
  flex-shrink: 0;
}

/* Status badges */
.pt-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pt-badge--upcoming  { background: #F1F5F9; color: #475569; }
.pt-badge--in-progress {
  background: #ECFDF5; color: #065F46;
  animation: pt-pulse-badge 2s ease-in-out infinite;
}
.pt-badge--completed { background: #EFF6FF; color: #1D4ED8; }
.pt-badge--ended { background: #FEF3E2; color: #B45309; }
.pt-badge--dot::before {
  content: '';
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

@keyframes pt-pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}

/* Action buttons */
.pt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--pt-radius-sm);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .15s;
  white-space: nowrap;
  line-height: 1;
}
.pt-btn:disabled { opacity: .5; cursor: not-allowed; }

.pt-btn--primary {
  background: var(--pt-navy);
  color: #fff;
  box-shadow: 0 4px 12px rgba(12,30,61,.28);
}
.pt-btn--primary:hover { background: var(--pt-navy-2); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(12,30,61,.34); }

.pt-btn--teal {
  background: var(--pt-teal);
  color: #fff;
}
.pt-btn--teal:hover { background: var(--pt-teal-dark); transform: translateY(-1px); }

.pt-btn--green {
  background: var(--pt-green);
  color: #fff;
}
.pt-btn--green:hover { filter: brightness(1.1); }

.pt-btn--outline {
  background: transparent;
  color: var(--pt-navy);
  border: 1.5px solid var(--pt-border-2);
}
.pt-btn--outline:hover { background: var(--pt-bg); border-color: var(--pt-navy); }

.pt-btn--ghost {
  background: transparent;
  color: var(--pt-muted);
  border: 1px solid transparent;
}
.pt-btn--ghost:hover { background: var(--pt-bg); color: var(--pt-text); }

.pt-btn--danger { background: #FEF2F2; color: var(--pt-red); border: 1px solid #FECACA; }
.pt-btn--danger:hover { background: var(--pt-red); color: #fff; }

.pt-btn--sm { padding: 6px 12px; font-size: .78rem; }
.pt-btn--lg { padding: 12px 24px; font-size: .95rem; }
.pt-btn--full { width: 100%; justify-content: center; }

/* ── Empty state ── */
.pt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
  color: var(--pt-muted);
  gap: 12px;
}
.pt-empty svg { color: var(--pt-muted-2); }
.pt-empty p { margin: 0; font-size: .9rem; }

/* ── Upcoming lessons list ── */
.pt-upcoming-day { padding: 8px 20px 4px; }
.pt-upcoming-day-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--pt-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pt-upcoming-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--pt-border);
}
.pt-upcoming-row:last-child { border-bottom: none; }
.pt-upcoming-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pt-teal);
  flex-shrink: 0;
}
.pt-upcoming-time { font-size: .82rem; color: var(--pt-muted); min-width: 48px; font-weight: 500; }
.pt-upcoming-name { font-weight: 600; font-size: .88rem; color: var(--pt-text); flex: 1; }
.pt-upcoming-dur  { font-size: .78rem; color: var(--pt-muted-2); }

/* ── Quick Actions ── */
.pt-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}
.pt-quick-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--pt-radius-sm);
  border: 1.5px solid var(--pt-border);
  background: #fff;
  cursor: pointer;
  transition: all .15s;
  text-align: left;
  font-size: .88rem;
  font-weight: 600;
  color: var(--pt-text);
}
.pt-quick-btn:hover {
  border-color: var(--pt-navy);
  background: #F8FAFC;
  transform: translateX(3px);
}
.pt-quick-btn-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pt-quick-btn-icon--blue  { background: #EFF6FF; color: #2563EB; }
.pt-quick-btn-icon--green { background: #F0FDF4; color: #16A34A; }
.pt-quick-btn-icon--amber { background: #FFFBEB; color: #D97706; }
.pt-quick-btn-text { flex: 1; }
.pt-quick-btn-label { font-weight: 700; margin-bottom: 1px; }
.pt-quick-btn-desc  { font-size: .72rem; color: var(--pt-muted); font-weight: 400; }
.pt-quick-btn-arrow { color: var(--pt-muted-2); }

/* ── Financial snapshot (Pass 3) ── */
.pt-fin {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pt-fin-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--pt-border);
  margin-bottom: 18px;
}
.pt-fin-item {
  min-width: 0;
}
.pt-fin-item--full {
  padding-top: 0;
}
.pt-fin-label {
  font-size: .7rem;
  color: var(--pt-muted);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-fin-value {
  font-family: 'Syne', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--pt-text);
  line-height: 1.05;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-fin-meta {
  font-size: .75rem;
  color: var(--pt-muted);
  margin-top: 6px;
  font-weight: 500;
}
.pt-fin-item--warn .pt-fin-value {
  color: #B45309;
}
.pt-fin-item--zero .pt-fin-value {
  color: #16A34A;
}

/* ── Test performance placeholder ── */
.pt-test-perf {
  padding: 20px;
  text-align: center;
}
.pt-test-perf-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--pt-border);
}
.pt-test-perf-metric:last-child { border-bottom: none; }
.pt-test-perf-key { font-size: .85rem; color: var(--pt-muted); }
.pt-test-perf-val { font-weight: 700; color: var(--pt-text); }
.pt-test-perf-note { font-size: .78rem; color: var(--pt-muted-2); margin-top: 12px; font-style: italic; }

/* ── Lesson Panel (slide-in) ── */
.pt-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12,30,61,.55);
  backdrop-filter: blur(4px);
  z-index: 9990;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s;
}
.pt-panel-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.pt-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(560px, 100vw);
  background: var(--pt-card);
  box-shadow: -8px 0 40px rgba(12,30,61,.18);
  z-index: 9991;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pt-panel.is-open { transform: translateX(0); }

.pt-panel-header {
  background: var(--pt-navy);
  color: #fff;
  padding: 20px 24px 18px;
  flex-shrink: 0;
}
.pt-panel-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.pt-panel-pupil { font-size: 1.15rem; font-weight: 800; font-family: 'Syne', sans-serif; }
.pt-panel-time  { font-size: .85rem; color: rgba(255,255,255,.7); margin-top: 3px; }
.pt-panel-close {
  background: rgba(255,255,255,.12);
  border: none;
  color: #fff;
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.pt-panel-close:hover { background: rgba(255,255,255,.22); }

.pt-timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 1.25rem;
  font-weight: 800;
  font-family: 'Syne', monospace;
  letter-spacing: .06em;
}
.pt-timer-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ADE80;
  animation: pt-blink 1s ease-in-out infinite;
}
@keyframes pt-blink { 0%,100%{opacity:1}50%{opacity:.3} }

.pt-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pt-panel-section {}
.pt-panel-section-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--pt-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.pt-panel-section-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pt-notes-input {
  width: 100%;
  min-height: 100px;
  border: 1.5px solid var(--pt-border);
  border-radius: var(--pt-radius-sm);
  padding: 12px 14px;
  font-size: .9rem;
  font-family: 'DM Sans', sans-serif;
  resize: vertical;
  box-sizing: border-box;
  color: var(--pt-text);
  transition: border-color .15s;
}
.pt-notes-input:focus { outline: none; border-color: var(--pt-teal); }

/* Skills checklist */
.pt-skills-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Fill the available panel height rather than a fixed 220px cap, so a long
     skills list shows as many rows as fit (the old cap wasted space, worst on
     a tablet in portrait). The list scrolls internally; header + self-score CTA
     stay pinned. See #pt-cover-section below for the column that drives this. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-sm);
  padding: 4px 0;
}
/* The "What did you cover?" section becomes the flex child that expands to fill
   the skills screen, so the list inside it can grow. */
#pt-cover-section {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.pt-skill-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  transition: background .1s;
}
.pt-skill-item:hover { background: var(--pt-bg); }
.pt-skill-check {
  width: 18px; height: 18px;
  border: 2px solid var(--pt-border-2);
  border-radius: 4px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--pt-teal);
}
.pt-skill-name { font-size: .85rem; color: var(--pt-text-2); flex: 1; }
.pt-skill-cat {
  font-size: .7rem;
  color: var(--pt-muted-2);
  background: var(--pt-bg);
  padding: 2px 7px;
  border-radius: 10px;
}
.pt-skills-empty { padding: 16px; text-align: center; color: var(--pt-muted); font-size: .85rem; }

/* Pupil reflection (in-lesson self-assessment) */
.pt-reflect-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 11px 14px;
  border: 1.5px dashed var(--pt-border-2);
  border-radius: var(--pt-radius-sm);
  background: #fff;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  color: var(--pt-teal);
  font-family: 'DM Sans', sans-serif;
  transition: all .15s;
}
.pt-reflect-cta:hover { border-color: var(--pt-teal); background: #F0FDFA; }
.pt-reflect-cta-hint { margin-left: auto; font-size: .72rem; font-weight: 500; color: var(--pt-muted-2); }

/* Reflection screen — overlays the panel body when active */
.pt-panel-reflection {
  display: none;
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  flex-direction: column;
  gap: 14px;
}
.pt-panel.is-reflecting .pt-panel-body { display: none; }
.pt-panel.is-reflecting .pt-panel-reflection { display: flex; }

/* ── Lesson type selector ─────────────────────────────────── */
.pt-mode-seg { display: flex; gap: 6px; background: var(--pt-bg-soft, #F1F5F9); padding: 4px; border-radius: 10px; }
.pt-mode-btn {
  flex: 1; padding: 8px 10px; border: none; border-radius: 7px; cursor: pointer;
  font-size: .84rem; font-weight: 600; color: var(--pt-muted, #64748B); background: transparent;
  transition: background .15s, color .15s, box-shadow .15s;
}
.pt-mode-btn.is-active { background: #fff; color: var(--pt-text, #0F172A); box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.pt-mode-mock-note { margin: 10px 2px 0; font-size: .78rem; line-height: 1.45; color: #92400E; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 8px; padding: 8px 11px; }

/* ── Examiner sheet + debrief screens (mock mode) ─────────── */
.pt-panel-mock, .pt-panel-debrief {
  display: none; flex: 1; overflow-y: auto; padding: 20px 24px;
  flex-direction: column; gap: 16px;
}
.pt-panel.is-marking   .pt-panel-body,
.pt-panel.is-marking   .pt-panel-footer,
.pt-panel.is-debriefing .pt-panel-body,
.pt-panel.is-debriefing .pt-panel-footer { display: none; }
.pt-panel.is-marking    .pt-panel-mock    { display: flex; }
.pt-panel.is-debriefing .pt-panel-debrief { display: flex; }

/* ── Toolbox / skills / end-of-lesson screens (standard mode) ─────────────── */
.pt-panel-toolbox, .pt-panel-skills-screen, .pt-panel-end {
  display: none; flex: 1; overflow-y: auto; padding: 20px 24px;
  flex-direction: column; gap: 14px;
}
.pt-panel.is-toolbox .pt-panel-body,
.pt-panel.is-skills  .pt-panel-body,
.pt-panel.is-ending  .pt-panel-body { display: none; }
.pt-panel.is-toolbox .pt-panel-toolbox       { display: flex; }
.pt-panel.is-skills  .pt-panel-skills-screen { display: flex; }
.pt-panel.is-ending  .pt-panel-end           { display: flex; }
/* These screens carry their own actions (and reflection is now reached via the
   toolbox), so hide the shared footer while any of them is active. */
.pt-panel.is-toolbox .pt-panel-footer,
.pt-panel.is-skills  .pt-panel-footer,
.pt-panel.is-ending  .pt-panel-footer,
.pt-panel.is-reflecting .pt-panel-footer { display: none; }

/* Toolbox open button on the opening page */
/* First-page tools row: compact Objectives + Toolbox buttons, side by side. */
.pt-firstpage-tools { display: flex; gap: 10px; margin: 0 0 10px; }
.pt-fp-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  position: relative; padding: 13px 14px; border: 1px solid var(--pt-border, #E2E8F0);
  border-radius: 12px; background: #fff; cursor: pointer;
  font-weight: 700; font-size: .9rem; color: var(--pt-text, #0F172A);
}
.pt-fp-btn:hover { background: var(--pt-bg-soft, #F1F5F9); }
.pt-fp-btn svg { color: var(--pt-navy, #0C1E3D); flex: none; }
.pt-fp-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: var(--pt-navy, #0C1E3D); color: #fff; font-size: .72rem; font-weight: 700;
}
.pt-fp-count[hidden] { display: none; }

/* Toolbox tool grid */
.pt-toolbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pt-tool-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 14px; border: 1px solid var(--pt-border, #E2E8F0);
  border-radius: 12px; background: #fff; cursor: pointer; text-align: left;
  font-weight: 700; font-size: .9rem; color: var(--pt-text, #0F172A);
}
.pt-tool-btn:hover { background: var(--pt-bg-soft, #F1F5F9); }
.pt-tool-btn small { font-weight: 500; font-size: .72rem; color: var(--pt-muted, #64748B); }
.pt-tool-btn--soon { opacity: .5; cursor: not-allowed; }

/* End-of-lesson actions */
.pt-end-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.pt-end-actions .pt-btn--lg { margin-left: auto; }

/* ── Show me / Tell me + Objectives screens (toolbox tools) ───────────────── */
.pt-panel-showtell, .pt-panel-objectives {
  display: none; flex: 1; overflow-y: auto; padding: 20px 24px;
  flex-direction: column; gap: 14px;
}
.pt-panel.is-showtell   .pt-panel-body,
.pt-panel.is-objectives .pt-panel-body,
.pt-panel.is-showtell   .pt-panel-footer,
.pt-panel.is-objectives .pt-panel-footer { display: none; }
.pt-panel.is-showtell   .pt-panel-showtell   { display: flex; }
.pt-panel.is-objectives .pt-panel-objectives { display: flex; }

/* Conditions & experience screen */
.pt-panel-conditions { display: none; flex: 1; overflow-y: auto; padding: 20px 24px; flex-direction: column; gap: 14px; }
.pt-panel.is-conditions .pt-panel-body,
.pt-panel.is-conditions .pt-panel-footer { display: none; }
.pt-panel.is-conditions .pt-panel-conditions { display: flex; }
.pt-cond-list { display: flex; flex-direction: column; gap: 8px; }
.pt-cond-item { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--pt-border, #E2E8F0); border-radius: 10px; font-size: .88rem; color: var(--pt-text, #0F172A); cursor: pointer; }
.pt-cond-item input[type="checkbox"] { width: 18px; height: 18px; flex: none; }

/* ── Mind map screen ─────────────────────────────────────────────────────── */
.pt-panel-mindmap { display: none; flex: 1; flex-direction: column; min-height: 0; }
.pt-panel.is-mindmap .pt-panel-body,
.pt-panel.is-mindmap .pt-panel-footer { display: none; }
.pt-panel.is-mindmap .pt-panel-mindmap { display: flex; }
/* Expand the panel to full screen while mind-mapping (hand-to-pupil moment). */
.pt-panel.is-mindmap { width: 100vw; }
.pt-panel-mindmap > .pt-reflect-head { padding: 16px 20px 8px; }
.pt-mm-chooser { display: flex; flex-direction: column; gap: 6px; padding: 4px 24px 24px; }
.pt-mm-start { margin-top: 16px; align-self: flex-start; }
#pt-panel-mindmap.is-drawing .pt-mm-chooser { display: none; }
.pt-mm-stage { display: none; flex: 1; flex-direction: column; min-height: 0; }
#pt-panel-mindmap.is-drawing .pt-mm-stage { display: flex; }
.pt-mm-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 16px; border-top: 1px solid var(--pt-border, #E2E8F0); border-bottom: 1px solid var(--pt-border, #E2E8F0); }
.pt-mm-colors { display: flex; gap: 8px; }
.pt-mm-color { width: 26px; height: 26px; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--pt-border, #E2E8F0); background: var(--c); cursor: pointer; padding: 0; }
.pt-mm-color.is-active { box-shadow: 0 0 0 2px var(--c); }
.pt-mm-actions { display: flex; gap: 6px; }
.pt-mm-canvas { flex: 1; width: 100%; min-height: 0; display: block; background: #fff; touch-action: none; cursor: crosshair; }

/* Saved mind-map thumbnails (chooser + lesson history) */
.pt-mm-saved { margin-top: 18px; }
.pt-mm-saved-h { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pt-muted, #64748B); margin-bottom: 8px; }
.pt-mm-saved-grid, .pt-mm-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.pt-mm-saved-item { width: 100px; }
.pt-mm-saved-item img, .pt-mm-thumbs img { width: 100px; height: 75px; object-fit: cover; border: 1px solid var(--pt-border, #E2E8F0); border-radius: 8px; display: block; background: #fff; }
.pt-mm-saved-cap { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 3px; font-size: .7rem; color: var(--pt-muted, #64748B); }
.pt-mm-saved-cap span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-mm-saved-del { border: none; background: transparent; color: var(--pt-muted-2, #94A3B8); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; }
.pt-mm-saved-del:hover { color: #dc2626; }
.pt-mm-lesson-details { margin-top: 8px; }
.pt-mm-lesson-details summary { cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--pt-navy, #0C1E3D); }
.pt-mm-lesson-details[open] summary { margin-bottom: 8px; }
.pt-mm-lesson-details .pt-mm-thumbs img { width: 120px; height: 90px; }

/* ── Draw on map screen ──────────────────────────────────────────────────── */
.pt-panel-drawmap { display: none; flex: 1; flex-direction: column; min-height: 0; }
.pt-panel.is-drawmap .pt-panel-body,
.pt-panel.is-drawmap .pt-panel-footer { display: none; }
.pt-panel.is-drawmap .pt-panel-drawmap { display: flex; }
.pt-panel.is-drawmap { width: 100vw; }
.pt-panel-drawmap > .pt-reflect-head { padding: 16px 20px 8px; }

/* #1 — On the canvas-heavy screens (mind map, draw-on-map, scenarios) the full
   navy header wasted vertical space stacked above the screen's own Back/title
   row. Float it into a compact Apple-Maps-style pill (timer + close) top-right
   over the canvas, freeing the height for a larger drawing area. CSS-only —
   the same .pt-timer element keeps updating, just repositioned. */
.pt-panel.is-mindmap .pt-panel-header,
.pt-panel.is-drawmap .pt-panel-header,
.pt-panel.is-scenarios .pt-panel-header {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 1200;
  width: auto;
  padding: 0;
  background: transparent;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
}
.pt-panel.is-mindmap .pt-panel-header-row,
.pt-panel.is-drawmap .pt-panel-header-row,
.pt-panel.is-scenarios .pt-panel-header-row { margin: 0; }
.pt-panel.is-mindmap .pt-panel-pupil,
.pt-panel.is-mindmap .pt-panel-time,
.pt-panel.is-drawmap .pt-panel-pupil,
.pt-panel.is-drawmap .pt-panel-time,
.pt-panel.is-scenarios .pt-panel-pupil,
.pt-panel.is-scenarios .pt-panel-time { display: none; }
.pt-panel.is-mindmap .pt-timer,
.pt-panel.is-drawmap .pt-timer,
.pt-panel.is-scenarios .pt-timer {
  font-size: .95rem;
  padding: 6px 12px;
  background: rgba(12,30,61,.92);
  box-shadow: 0 2px 10px rgba(15,23,42,.28);
}
.pt-panel.is-mindmap .pt-panel-close,
.pt-panel.is-drawmap .pt-panel-close,
.pt-panel.is-scenarios .pt-panel-close {
  background: rgba(12,30,61,.92);
  box-shadow: 0 2px 10px rgba(15,23,42,.28);
}
/* #6 — On phones the floating timer/close pill (top-right) overlapped the mind
   map SETUP screen's header + intro text, which — unlike the drawing canvas —
   is normal-flow content with no space reserved for the pill. It reads fine on
   tablet/desktop, where the extra width keeps the left-aligned text clear of the
   corner pill. On narrow screens, while the chooser is showing (the panel isn't
   yet in .is-drawing), drop that content below the pill. The drawing stage keeps
   the reclaimed full-height canvas. */
@media (max-width: 600px) {
  .pt-panel.is-mindmap .pt-panel-mindmap:not(.is-drawing) .pt-reflect-head { padding-top: 46px; }
}
.pt-dm-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 16px; border-top: 1px solid var(--pt-border, #E2E8F0); border-bottom: 1px solid var(--pt-border, #E2E8F0); }
.pt-dm-modes { display: flex; gap: 6px; background: var(--pt-bg-soft, #F1F5F9); padding: 4px; border-radius: 8px; }
.pt-dm-mode { border: none; background: transparent; padding: 6px 12px; border-radius: 6px; font-size: .82rem; font-weight: 600; color: var(--pt-muted, #64748B); cursor: pointer; }
.pt-dm-mode.is-active { background: #fff; color: var(--pt-text, #0F172A); box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.pt-dm-rotate { display: flex; gap: 4px; }
.pt-dm-rotate .pt-dm-rot { padding: 6px; }
.pt-dm-rotate .pt-dm-rot svg { display: block; }
.pt-dm-stage { position: relative; flex: 1; min-height: 0; }
.pt-dm-map { position: absolute; inset: 0; background: #e8eef3; }
/* z-index above Leaflet's panes (which go up to ~700). .pt-dm-map sets no
   z-index so it doesn't create its own stacking context — without this the
   map's tile/overlay panes render ABOVE the canvas, hiding the ink and
   stealing the pointer events (which is why drawing did nothing). */
.pt-dm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1000; touch-action: none; pointer-events: none; }
.pt-panel-drawmap.is-drawing-mode .pt-dm-canvas { pointer-events: auto; cursor: crosshair; }
.pt-dm-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 500; background: rgba(15,23,42,.85); color: #fff; font-size: .8rem; padding: 6px 12px; border-radius: 999px; pointer-events: none; }
.pt-panel-drawmap.is-drawing-mode .pt-dm-hint { display: none; }

/* ── Scenarios screen ────────────────────────────────────────────────────── */
.pt-panel-scenarios { display: none; flex: 1; flex-direction: column; min-height: 0; }
.pt-panel.is-scenarios .pt-panel-body,
.pt-panel.is-scenarios .pt-panel-footer { display: none; }
.pt-panel.is-scenarios .pt-panel-scenarios { display: flex; }
.pt-panel.is-scenarios { width: 100vw; }
.pt-panel-scenarios > .pt-reflect-head { padding: 16px 20px 8px; }
.pt-sc-chooser { display: flex; flex-direction: column; gap: 6px; padding: 4px 24px 24px; overflow-y: auto; }
#pt-panel-scenarios.is-drawing .pt-sc-chooser { display: none; }
.pt-sc-stage { display: none; flex: 1; flex-direction: column; min-height: 0; }
#pt-panel-scenarios.is-drawing .pt-sc-stage { display: flex; }
/* Scenario picker: image-thumbnail cards. */
.pt-sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 10px; }
.pt-sc-tpl { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--pt-border, #E2E8F0); border-radius: 12px; background: #fff; cursor: pointer; overflow: hidden; text-align: left; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.pt-sc-tpl:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,23,42,.13); border-color: var(--pt-navy, #0C1E3D); }
.pt-sc-thumb { display: block; width: 100%; height: 96px; background: #aab2bd center / cover no-repeat; border-bottom: 1px solid var(--pt-border, #E2E8F0); }
.pt-sc-thumb--blank { display: flex; align-items: center; justify-content: center; }
.pt-sc-thumb--blank svg { width: 100%; height: 100%; display: block; }
.pt-sc-tpl-label { display: block; padding: 9px 11px; font-size: .82rem; font-weight: 600; line-height: 1.3; color: var(--pt-text, #0F172A); }
.pt-sc-tpl--blank { border-style: dashed; border-color: var(--pt-navy, #0C1E3D); }
.pt-sc-canvas { flex: 1; width: 100%; min-height: 0; display: block; background: #fff; touch-action: none; cursor: crosshair; }
/* Blank-road shape switch (segmented control), shown only for the blank road. */
.pt-sc-shapes { display: none; align-items: center; gap: 6px; padding: 8px 16px; border-bottom: 1px solid var(--pt-border, #E2E8F0); flex-wrap: wrap; }
#pt-panel-scenarios.is-blank .pt-sc-shapes { display: flex; }
.pt-sc-shapes-lbl { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--pt-muted, #64748B); margin-right: 2px; }
.pt-sc-shape { border: 1px solid var(--pt-border, #E2E8F0); background: #fff; padding: 6px 12px; border-radius: 8px; font-size: .82rem; font-weight: 600; color: var(--pt-muted, #64748B); cursor: pointer; }
.pt-sc-shape.is-active { background: var(--pt-navy, #0C1E3D); border-color: var(--pt-navy, #0C1E3D); color: #fff; }
/* Draw / Add-hazard mode toggle (segmented control). */
.pt-sc-modes { display: flex; gap: 6px; background: var(--pt-bg-soft, #F1F5F9); padding: 4px; border-radius: 8px; }
.pt-sc-mode { border: none; background: transparent; padding: 6px 12px; border-radius: 6px; font-size: .82rem; font-weight: 600; color: var(--pt-muted, #64748B); cursor: pointer; }
.pt-sc-mode.is-active { background: #fff; color: var(--pt-text, #0F172A); box-shadow: 0 1px 2px rgba(15,23,42,.12); }
/* Colours belong to the pen; hide them in hazard mode. Palette is the inverse. */
#pt-panel-scenarios.is-mode-hazard #pt-sc-colors { display: none; }
.pt-sc-hazards { display: none; gap: 8px; overflow-x: auto; padding: 8px 16px; border-bottom: 1px solid var(--pt-border, #E2E8F0); -webkit-overflow-scrolling: touch; }
#pt-panel-scenarios.is-mode-hazard .pt-sc-hazards { display: flex; }
#pt-panel-scenarios.is-mode-hazard .pt-sc-canvas { cursor: default; }
.pt-sc-haz { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 60px; padding: 6px 2px; border: 1px solid var(--pt-border, #E2E8F0); border-radius: 10px; background: #fff; cursor: pointer; }
.pt-sc-haz:hover { background: var(--pt-bg-soft, #F1F5F9); }
.pt-sc-haz canvas { width: 44px; height: 44px; }
.pt-sc-haz span { font-size: .66rem; font-weight: 600; color: var(--pt-muted, #64748B); white-space: nowrap; }
/* Teaching-prompt overlay: chips floated down the right of the road. pointer-events
   stay off so taps fall through to the canvas (drawing / hazard placement). */
.pt-sc-canvas-wrap { position: relative; flex: 1; min-height: 0; display: flex; }
.pt-sc-prompts { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 46%; pointer-events: none; }
.pt-sc-prompt { background: rgba(255,255,255,.92); color: var(--pt-text, #0F172A); border: 1px solid rgba(15,23,42,.10); border-radius: 14px; padding: 8px 13px; font-size: .82rem; font-weight: 600; line-height: 1.35; text-align: right; box-shadow: 0 2px 8px rgba(15,23,42,.12); backdrop-filter: blur(2px); }
#pt-sc-prompts-btn.is-active { background: var(--pt-bg-soft, #F1F5F9); color: var(--pt-text, #0F172A); }

/* Show me / Tell me list */
.pt-showtell-list { display: flex; flex-direction: column; gap: 8px; }
.pt-st-group { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pt-muted, #64748B); margin: 10px 2px 2px; }
.pt-st-item { border: 1px solid var(--pt-border, #E2E8F0); border-radius: 10px; overflow: hidden; }
.pt-st-q {
  display: flex; gap: 8px; width: 100%; text-align: left; padding: 11px 13px;
  background: #fff; border: none; cursor: pointer; font-size: .86rem; font-weight: 600;
  color: var(--pt-text, #0F172A); line-height: 1.4;
}
.pt-st-q:hover { background: var(--pt-bg-soft, #F1F5F9); }
.pt-st-type { flex: none; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #B45309; background: #FEF3E2; border-radius: 6px; padding: 2px 6px; height: fit-content; }
.pt-st-text { flex: 1 1 auto; min-width: 0; }
.pt-st-a { display: none; padding: 0 13px 12px; font-size: .84rem; line-height: 1.5; color: var(--pt-muted, #64748B); }
.pt-st-item.is-open .pt-st-a { display: block; }
.pt-st-answer { margin: 0 0 10px; }

/* Per-pupil coverage UI */
.pt-st-coverage { display: flex; align-items: baseline; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--pt-muted, #64748B); margin: 0 2px 4px; }
.pt-st-coverage-count { font-size: 1.05rem; font-weight: 800; color: var(--pt-text, #0F172A); }
.pt-st-empty { font-size: .82rem; color: var(--pt-muted, #64748B); padding: 10px 2px; }
.pt-st-item.is-covered { opacity: .72; }

/* Status badge on each question row */
.pt-st-badge { flex: none; align-self: center; font-size: .66rem; font-weight: 700; border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.pt-st-badge--never  { color: #92400E; background: #FEF3C7; }
.pt-st-badge--review { color: #9F1239; background: #FFE4E6; }
.pt-st-badge--got    { color: #166534; background: #DCFCE7; }

/* Outcome buttons inside the expanded answer */
.pt-st-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pt-st-actions-label { font-size: .72rem; font-weight: 600; color: var(--pt-muted, #64748B); margin-right: 2px; }
.pt-st-out { font-size: .76rem; font-weight: 700; border-radius: 8px; padding: 5px 10px; cursor: pointer; border: 1px solid var(--pt-border, #E2E8F0); background: #fff; color: var(--pt-text, #0F172A); }
.pt-st-out:hover { background: var(--pt-bg-soft, #F1F5F9); }
.pt-st-out--got:hover   { background: #DCFCE7; border-color: #86EFAC; }
.pt-st-out--shaky:hover { background: #FEF3C7; border-color: #FCD34D; }
.pt-st-out--no:hover    { background: #FFE4E6; border-color: #FDA4AF; }

/* Pupil Show me / Tell me self-rating (pupil dashboard progress card) */
.stp-self-pill { flex: none; font-size: .64rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.stp-self-pill--confident     { background: #DCFCE7; color: #166534; }
.stp-self-pill--getting_there { background: #FEF3C7; color: #92400E; }
.stp-self-pill--not_yet       { background: #FEE2E2; color: #991B1B; }
.stp-self-pill--none          { background: #F1F5F9; color: #64748B; }

.stp-instr-note { font-size: .76rem; color: #64748B; margin: 8px 0 0; }
.stp-rate-label { font-size: .74rem; font-weight: 700; color: #475569; margin: 12px 0 6px; }
.stp-rate { display: flex; gap: 6px; }
.stp-rate-btn { flex: 1 1 0; font-size: .74rem; font-weight: 700; padding: 8px 6px; border-radius: 8px; border: 1px solid var(--pt-border, #E2E8F0); background: #fff; color: #475569; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.stp-rate-btn:hover { border-color: #94A3B8; }
.stp-rate-btn.is-active[data-level="not_yet"]       { background: #FEE2E2; border-color: #FCA5A5; color: #991B1B; }
.stp-rate-btn.is-active[data-level="getting_there"] { background: #FEF3C7; border-color: #FCD34D; color: #92400E; }
.stp-rate-btn.is-active[data-level="confident"]     { background: #DCFCE7; border-color: #86EFAC; color: #166534; }

/* Lesson objectives */
.pt-obj-add { display: flex; gap: 8px; }
.pt-obj-add .pt-field-input { flex: 1; }
.pt-obj-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pt-obj-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--pt-border, #E2E8F0); border-radius: 10px; }
.pt-obj-row input[type="checkbox"] { width: 18px; height: 18px; flex: none; }
.pt-obj-text { flex: 1; font-size: .88rem; color: var(--pt-text, #0F172A); }
.pt-obj-row.is-done .pt-obj-text { text-decoration: line-through; color: var(--pt-muted, #64748B); }
.pt-obj-remove { flex: none; border: none; background: transparent; color: var(--pt-muted-2, #94A3B8); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 2px 4px; }
.pt-obj-remove:hover { color: #dc2626; }
.pt-obj-empty { font-size: .82rem; color: var(--pt-muted, #64748B); font-style: italic; }

.pt-mock-tally { border: 1px solid var(--pt-border, #E2E8F0); border-radius: 12px; padding: 14px 16px; text-align: center; }
.pt-mock-tally-label { font-size: .82rem; font-weight: 700; color: var(--pt-text, #0F172A); margin-bottom: 10px; }
.pt-mock-tally-ctrl { display: flex; align-items: center; justify-content: center; gap: 18px; }
.pt-mock-step { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--pt-border, #E2E8F0); background: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--pt-text, #0F172A); }
.pt-mock-step:active { background: #F1F5F9; }
.pt-mock-tally-count { font-size: 1.9rem; font-weight: 800; min-width: 48px; color: var(--pt-text, #0F172A); }
.pt-mock-tally-hint { font-size: .72rem; color: var(--pt-muted, #94A3B8); margin-top: 8px; }

.pt-mock-fault-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.pt-mock-fault-empty { font-size: .8rem; color: var(--pt-muted, #94A3B8); padding: 4px 2px; }
.pt-mock-fault-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 1px solid var(--pt-border, #E2E8F0); border-radius: 10px; padding: 9px 10px; }
.pt-mock-fault-cat { flex: 1 1 160px; min-width: 0; padding: 7px 8px; border: 1px solid var(--pt-border, #E2E8F0); border-radius: 7px; font-size: .82rem; background: #fff; }
.pt-mock-sev-toggle { display: flex; gap: 4px; }
.pt-mock-sev { padding: 6px 10px; border: 1.5px solid var(--pt-border, #E2E8F0); border-radius: 7px; background: #fff; font-size: .76rem; font-weight: 600; cursor: pointer; color: var(--pt-muted, #64748B); }
.pt-mock-sev--s.is-active { border-color: #F59E0B; background: #FFFBEB; color: #92400E; }
.pt-mock-sev--d.is-active { border-color: #EF4444; background: #FEF2F2; color: #991B1B; }
.pt-mock-fault-note { flex: 1 1 100%; padding: 7px 9px; border: 1px solid var(--pt-border, #E2E8F0); border-radius: 7px; font-size: .8rem; }
.pt-mock-fault-del { margin-left: auto; width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; color: #dc2626; font-size: 1.15rem; line-height: 1; cursor: pointer; }
.pt-mock-fault-del:hover { background: #fee2e2; border-color: #fca5a5; }

.pt-mock-verdict { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; border: 2px solid #10B981; border-radius: 12px; background: #ECFDF5; }
.pt-mock-verdict[data-verdict="fail"] { border-color: #EF4444; background: #FEF2F2; }
.pt-mock-verdict-text { font-weight: 800; font-size: 1.05rem; color: #065F46; }
.pt-mock-verdict[data-verdict="fail"] .pt-mock-verdict-text { color: #991B1B; }
.pt-mock-verdict-hint { font-size: .72rem; color: var(--pt-muted, #64748B); }
.pt-mock-next { justify-content: center; }

/* Debrief */
.pt-debrief-banner { text-align: center; padding: 24px 16px; border-radius: 16px; background: #ECFDF5; border: 1px solid #A7F3D0; }
.pt-debrief-banner[data-verdict="fail"] { background: #FEF2F2; border-color: #FECACA; }
.pt-debrief-icon { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; background: #10B981; color: #fff; font-size: 1.8rem; line-height: 56px; }
.pt-debrief-banner[data-verdict="fail"] .pt-debrief-icon { background: #EF4444; }
.pt-debrief-title { font-size: 1.3rem; font-weight: 800; color: #065F46; }
.pt-debrief-banner[data-verdict="fail"] .pt-debrief-title { color: #991B1B; }
.pt-debrief-sub { font-size: .85rem; color: var(--pt-muted, #64748B); margin-top: 4px; }
.pt-debrief-summary { display: flex; flex-direction: column; gap: 8px; }
.pt-debrief-line { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border: 1px solid var(--pt-border, #E2E8F0); border-radius: 10px; font-size: .86rem; color: var(--pt-text, #0F172A); }
.pt-debrief-faults-head { font-size: .78rem; font-weight: 700; color: var(--pt-muted, #64748B); margin-top: 4px; text-transform: uppercase; letter-spacing: .03em; }
.pt-debrief-fault { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 9px 12px; border-radius: 10px; border-left: 4px solid #F59E0B; background: #FFFBEB; font-size: .84rem; }
.pt-debrief-fault--d { border-left-color: #EF4444; background: #FEF2F2; }
.pt-debrief-fault-tag { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #92400E; }
.pt-debrief-fault--d .pt-debrief-fault-tag { color: #991B1B; }
.pt-debrief-fault-cat { font-weight: 600; color: var(--pt-text, #0F172A); }
.pt-debrief-fault-note { flex: 1 1 100%; font-size: .78rem; color: var(--pt-muted, #64748B); font-style: italic; }
.pt-debrief-actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.pt-debrief-actions .pt-btn--green { margin-left: auto; }

.pt-reflect-head { display: flex; align-items: center; gap: 10px; }
.pt-reflect-back {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--pt-muted);
  font-size: .85rem;
  font-weight: 600;
  padding: 4px 6px 4px 0;
  font-family: 'DM Sans', sans-serif;
}
.pt-reflect-back:hover { color: var(--pt-text); }

/* Stylus/touch hardening for the whole in-lesson loop.
   A stylus (or finger) press fires text-selection and tap-highlight events a
   mouse never does: the control's label text got selected (the blue selection
   inverts it to unreadable) and the device painted its default tap-highlight
   overlay across the whole element. This first surfaced on the Back button but
   affects every tap target in the panel — mode toggles, toolbox tiles, the
   self-score dots, colour swatches, scenario tiles, condition labels, etc.
   Scope the suppression to buttons / labels / role=button only, so the text
   fields in the panel (lesson notes, objective input, amount, etc.) keep
   normal selection and typing. */
#pt-lesson-panel button,
#pt-lesson-panel label,
#pt-lesson-panel [role="button"] {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.pt-reflect-title { font-size: 1rem; font-weight: 800; color: var(--pt-text); }
.pt-reflect-intro { font-size: .82rem; line-height: 1.5; color: var(--pt-text-2); margin: 0; }
.pt-reflect-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 10px 12px;
  background: var(--pt-bg);
  border-radius: var(--pt-radius-sm);
  font-size: .72rem;
  color: var(--pt-muted);
}
.pt-reflect-legend strong { color: var(--pt-teal); margin-right: 2px; }

.pt-reflect-list { display: flex; flex-direction: column; gap: 10px; }
.pt-reflect-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-sm);
}
.pt-reflect-skill { font-size: .88rem; font-weight: 600; color: var(--pt-text); }
.pt-reflect-scale { display: flex; gap: 8px; }
.pt-reflect-dot {
  flex: 1;
  min-height: 44px;
  border: 1.5px solid var(--pt-border-2);
  border-radius: var(--pt-radius-sm);
  background: #fff;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  color: var(--pt-muted);
  transition: all .12s;
}
.pt-reflect-dot:hover { border-color: var(--pt-teal); color: var(--pt-teal); }
.pt-reflect-dot.is-selected {
  border-color: var(--pt-teal);
  background: var(--pt-teal);
  color: #fff;
}

/* "Earlier: N" anchor shown next to a skill that was scored earlier in the
   lesson, to drive the end-of-lesson "have you improved?" conversation. */
.pt-reflect-earlier {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pt-amber-soft, #FEF3C7);
  color: var(--pt-amber-ink, #92400E);
  font-size: .72rem;
  font-weight: 700;
  vertical-align: middle;
}

/* Live lesson timeline — ephemeral working aid in the lesson panel. */
.pt-timeline-section { }
.pt-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pt-timeline-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-sm);
  background: #fff;
}
.pt-timeline-time {
  flex: 0 0 auto;
  font-size: .72rem;
  font-weight: 700;
  color: var(--pt-muted);
  font-variant-numeric: tabular-nums;
}
.pt-timeline-text {
  font-size: .82rem;
  color: var(--pt-text);
  line-height: 1.4;
}

/* Reflection comparison — shown read-only in both lesson timelines */
.pt-refl { display: flex; flex-direction: column; gap: 8px; }
.pt-refl-row {
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-sm);
  padding: 10px 12px;
  background: #fff;
}
.pt-refl-skill { font-size: .84rem; font-weight: 600; color: var(--pt-text); margin-bottom: 7px; }
.pt-refl-grades { display: flex; align-items: stretch; gap: 8px; }
.pt-refl-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 4px;
  border-radius: 8px;
  background: var(--pt-bg);
}
.pt-refl-chip--pupil { background: #F0F9FF; }
.pt-refl-chip--instr { background: #F8FAFC; }
.pt-refl-chip-who { font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pt-muted-2); }
.pt-refl-chip-num { font-size: 1.15rem; font-weight: 800; color: var(--pt-text); line-height: 1.1; }
.pt-refl-chip-lbl { font-size: .64rem; color: var(--pt-muted); }
.pt-refl-vs { align-self: center; font-size: .7rem; font-weight: 600; color: var(--pt-muted-2); }
.pt-refl-rel {
  margin-top: 7px;
  font-size: .74rem;
  font-weight: 600;
  text-align: center;
  padding: 4px 8px;
  border-radius: 6px;
}
.pt-refl-agree  { color: #065F46; background: #ECFDF5; }
.pt-refl-differ { color: #475569; background: #F1F5F9; }
.pt-refl-wait   { color: #92400E; background: #FFFBEB; }

/* Instructor reflection card — groups comparisons by lesson, each collapsible */
.ds-reflection-lesson { margin-top: 12px; }
.ds-reflection-lesson:first-of-type { margin-top: 6px; }
.ds-reflection-lesson-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  flex-wrap: wrap;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ds-reflection-lesson-head::-webkit-details-marker { display: none; }
.ds-reflection-lesson-date { font-size: .82rem; font-weight: 700; color: var(--pt-text); }
.ds-reflection-lesson-gap { font-size: .72rem; font-weight: 600; color: #475569; }
.ds-reflection-chevron { margin-left: auto; flex-shrink: 0; color: var(--pt-muted); transition: transform .2s; }
.ds-reflection-lesson[open] .ds-reflection-chevron { transform: rotate(180deg); }
.ds-reflection-lesson-body { margin-top: 2px; }

/* Pupil-side reflection block spacing in the timeline detail */
.pt-refl-block { margin-top: 12px; }
.pt-refl-block .ds-skill-group-title { margin-bottom: 8px; }

/* Payment section (optional "record a payment taken today") */
.pt-record-payment-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  color: var(--pt-text);
}
.pt-record-payment-toggle input { cursor: pointer; }
.pt-record-payment-hint {
  margin: 4px 0 10px 24px;
  font-size: .76rem;
  color: var(--pt-muted);
  line-height: 1.35;
}

.pt-payment-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pt-field { display: flex; flex-direction: column; gap: 5px; }
.pt-field-label { font-size: .78rem; font-weight: 600; color: var(--pt-text-2); }
.pt-field-input {
  border: 1.5px solid var(--pt-border);
  border-radius: var(--pt-radius-sm);
  padding: 9px 12px;
  font-size: .88rem;
  font-family: 'DM Sans', sans-serif;
  color: var(--pt-text);
  background: #fff;
  box-sizing: border-box;
  width: 100%;
  transition: border-color .15s;
}
.pt-field-input:focus { outline: none; border-color: var(--pt-teal); }
.pt-field-input--full { grid-column: 1 / -1; }

.pt-panel-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--pt-border);
  background: #FAFBFC;
  flex-shrink: 0;
  display: flex;
  gap: 12px;
  align-items: center;
}
.pt-panel-footer-status { font-size: .82rem; color: var(--pt-muted); flex: 1; }

/* ── Add Lesson / Add Pupil modals ── */
.pt-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12,30,61,.5);
  z-index: 9980;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s;
}
.pt-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.pt-modal {
  background: var(--pt-card);
  border-radius: var(--pt-radius);
  width: 100%;
  max-width: 520px;
  box-shadow: var(--pt-shadow-lg);
  overflow: hidden;
  transform: scale(.96);
  transition: transform .2s;
  /* Cap the modal to the viewport (overlay has 20px padding top+bottom) and
     lay it out as a column so a tall body scrolls internally instead of
     spilling off the top/bottom of the screen where it can't be reached.
     Mirrors the mobile sheet behaviour. */
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}
.pt-modal-overlay.is-open .pt-modal { transform: scale(1); }
.pt-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--pt-border);
  flex-shrink: 0;
}
.pt-modal-title { font-weight: 700; font-size: 1rem; color: var(--pt-text); }
.pt-modal-close {
  background: none;
  border: none;
  color: var(--pt-muted);
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  padding: 4px;
  border-radius: 6px;
  transition: background .15s;
}
.pt-modal-close:hover { background: var(--pt-bg); color: var(--pt-text); }
.pt-modal-body { padding: 22px; display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.pt-modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pt-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 4px;
}

/* Toast */
.pt-toast-container {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.pt-toast {
  background: var(--pt-navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(12,30,61,.3);
  animation: pt-toast-in .25s ease;
  pointer-events: auto;
}
.pt-toast--success { background: #065F46; }
.pt-toast--error   { background: #991B1B; }
@keyframes pt-toast-in {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .pt-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pt-dashboard { padding: 16px 12px 110px; }

  /* Lesson row — tighter padding on phone */
  .pt-lesson-row {
    padding: 14px 16px;
    gap: 12px;
    grid-template-columns: 36px 1fr;
  }
  .pt-lesson-avatar {
    width: 36px;
    height: 36px;
    font-size: .88rem;
  }
  .pt-lesson-pupil {
    font-size: .9rem;
  }
  .pt-lesson-bottom {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .pt-panel { width: 100vw; }
}


/* ══════════════════════════════════════════════════════════
   PASS 5 — HOME REBUILD
   ══════════════════════════════════════════════════════════ */

/* ── Needs your attention strip ──────────────────────────── */
.pt-attention {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.pt-attention-head {
    display: flex; align-items: center; gap: 6px;
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: #475569;
    margin-bottom: 10px;
}
.pt-attention-list {
    display: flex; flex-direction: column; gap: 6px;
}
.pt-attention-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #F8FAFC;
    font-size: .88rem; color: #334155;
    transition: background .12s ease;
}
.pt-attention-row:hover { background: #F1F5F9; }
.pt-attention-row--warn { background: #FFFBEB; }
.pt-attention-row--warn:hover { background: #FEF3C7; }
.pt-attention-row--bad { background: #FEF2F2; }
.pt-attention-row--bad:hover { background: #FEE2E2; }
.pt-attention-icon {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(15, 23, 42, .06);
    color: #475569;
}
.pt-attention-row--warn .pt-attention-icon { background: rgba(245, 158, 11, .15); color: #92400E; }
.pt-attention-row--bad  .pt-attention-icon { background: rgba(239, 68, 68, .15); color: #B91C1C; }
.pt-attention-text {
    flex: 1; min-width: 0;
    line-height: 1.4;
}
.pt-attention-action {
    flex-shrink: 0;
    font-size: .82rem; font-weight: 600;
    color: #0F172A; text-decoration: none;
    padding: 4px 10px; border-radius: 6px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    transition: background .12s, border-color .12s;
}
.pt-attention-action:hover { background: #0F172A; color: #FFFFFF; border-color: #0F172A; }

.pt-attention--clear {
    background: #F0FDF4;
    border-color: #BBF7D0;
    color: #166534;
    display: flex; align-items: center; gap: 8px;
    font-size: .88rem; font-weight: 500;
    padding: 12px 16px;
}

/* ── First-run "Get started" strip ───────────────────────── */
.pt-firstrun {
    background: var(--pt-card);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow);
    padding: 16px 18px;
    margin-bottom: 16px;
}
.pt-firstrun-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
}
.pt-firstrun-title {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; color: var(--pt-text);
    font-size: .98rem;
}
.pt-firstrun-title svg { color: var(--pt-navy); }
.pt-firstrun-progress {
    margin-left: auto;
    font-size: .75rem; font-weight: 700;
    color: var(--pt-navy);
    background: var(--pt-bg);
    padding: 3px 10px; border-radius: 999px;
    white-space: nowrap;
}
.pt-firstrun-dismiss {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border: none; background: transparent; cursor: pointer;
    border-radius: var(--pt-radius-xs);
    color: var(--pt-muted-2);
}
.pt-firstrun-dismiss:hover { background: var(--pt-bg); color: var(--pt-text-2); }
.pt-firstrun-sub {
    margin: 4px 0 14px;
    font-size: .85rem; color: var(--pt-muted);
}
.pt-firstrun-steps { display: flex; flex-direction: column; gap: 10px; }
.pt-firstrun-step {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    background: #FFFFFF;
}
.pt-firstrun-step--done { background: #F0FDF4; border-color: #BBF7D0; }
.pt-firstrun-step-mark {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    font-size: .82rem; font-weight: 700;
    background: var(--pt-bg); color: var(--pt-text-2);
}
.pt-firstrun-step--done .pt-firstrun-step-mark {
    background: var(--pt-green); color: #FFFFFF;
}
.pt-firstrun-step-body { flex: 1 1 auto; min-width: 0; }
.pt-firstrun-step-title {
    font-weight: 600; font-size: .9rem; color: var(--pt-text);
    display: flex; align-items: center; gap: 8px;
}
.pt-firstrun-step--done .pt-firstrun-step-title { color: var(--pt-muted); }
.pt-firstrun-step-opt {
    font-size: .68rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pt-muted-2);
    background: var(--pt-bg);
    padding: 2px 6px; border-radius: var(--pt-radius-xs);
}
.pt-firstrun-step-desc {
    margin-top: 2px; font-size: .8rem; color: var(--pt-muted);
}
.pt-firstrun-step-action { flex: 0 0 auto; }
@media (max-width: 640px) {
    .pt-firstrun-step { flex-wrap: wrap; }
    .pt-firstrun-step-body { flex-basis: calc(100% - 38px); }
    .pt-firstrun-step-action { margin-left: 38px; }
}

/* ── Pupils-of-interest list ─────────────────────────────── */
.pt-poi-list {
    display: flex; flex-direction: column;
    gap: 0;
    padding: 4px 0;
}
.pt-poi-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #F1F5F9;
    text-decoration: none; color: inherit;
    transition: background .12s ease;
}
.pt-poi-row:last-child { border-bottom: none; }
.pt-poi-row:hover { background: #F8FAFC; }
.pt-poi-avatar {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
    color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Syne', sans-serif;
    font-weight: 700; font-size: 14px;
}
.pt-poi-body { flex: 1; min-width: 0; }
.pt-poi-name {
    font-weight: 600; color: #0F172A;
    font-size: .92rem; line-height: 1.3;
}
.pt-poi-meta {
    display: flex; align-items: center; gap: 5px;
    font-size: .78rem; color: #64748B;
    margin-top: 2px;
}
.pt-poi-icon { display: flex; align-items: center; }
.pt-poi-row--test     .pt-poi-icon  { color: #F59E0B; }
.pt-poi-row--owes     .pt-poi-icon  { color: #B91C1C; }
.pt-poi-row--strug    .pt-poi-icon  { color: #DC2626; }
.pt-poi-row--new      .pt-poi-icon  { color: #16A34A; }
.pt-poi-row--waiting  .pt-poi-icon  { color: #0EA5E9; }
.pt-poi-row--dormant  .pt-poi-icon  { color: #7C3AED; }
.pt-poi-arrow {
    flex-shrink: 0;
    color: #CBD5E1;
    transition: transform .12s, color .12s;
}
.pt-poi-row:hover .pt-poi-arrow { color: #0F172A; transform: translateX(2px); }

/* ── Week sparkline ──────────────────────────────────────── */
.pt-spark {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding: 18px 16px 14px;
}
.pt-spark-day {
    display: flex; flex-direction: column; align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: 8px;
    cursor: default;
    transition: background .12s ease;
}
.pt-spark-day:hover { background: #F8FAFC; }
.pt-spark-day--today { background: #FEF3C7; }
.pt-spark-day--today:hover { background: #FDE68A; }

.pt-spark-bar-wrap {
    display: flex; flex-direction: column-reverse; align-items: center;
    height: 64px; width: 100%;
    position: relative;
}
.pt-spark-bar {
    width: 18px;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
    transition: opacity .15s ease;
}
.pt-spark-bar--busy {
    background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%);
}
.pt-spark-bar--zero {
    background: #E2E8F0;
}
.pt-spark-count {
    position: absolute;
    top: -2px;
    font-family: 'Syne', sans-serif;
    font-size: .7rem; font-weight: 700;
    color: #0F172A;
}
.pt-spark-day--today .pt-spark-count { color: #92400E; }
.pt-spark-label {
    font-size: .68rem; font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 4px;
}
.pt-spark-day--today .pt-spark-label { color: #92400E; }
.pt-spark-day-n {
    font-size: .82rem; font-weight: 700;
    color: #0F172A;
    font-family: 'Syne', sans-serif;
    line-height: 1;
}

/* ── Card head: button-style action link ─────────────────── */
.pt-card-head-link--btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 4px 8px;
    border-radius: 6px;
}
.pt-card-head-link--btn:hover { background: rgba(15, 23, 42, .06); }

/* ── ADI footnote (replaces old .pt-adi-actions) ─────────── */
.pt-adi-footnote {
    display: flex; align-items: center; gap: 6px;
    margin-top: 12px;
    padding: 8px 12px;
    font-size: .8rem;
    color: #475569;
    background: #F8FAFC;
    border-radius: 8px;
}

/* ── Compact empty state ─────────────────────────────────── */
.pt-empty--compact {
    padding: 18px 16px;
    text-align: center;
}
.pt-empty--compact p { margin: 0; color: #64748B; font-size: .88rem; }

/* ── Mobile: tighter spacing ─────────────────────────────── */
@media (max-width: 640px) {
    .pt-attention { padding: 12px; margin-bottom: 14px; }
    .pt-attention-row { padding: 9px 10px; gap: 10px; font-size: .85rem; }
    .pt-attention-action { padding: 3px 8px; font-size: .78rem; }
    .pt-spark { padding: 14px 8px 10px; gap: 3px; }
    .pt-spark-bar-wrap { height: 56px; }
    .pt-spark-bar { width: 14px; }
    .pt-spark-label { font-size: .62rem; }
    .pt-poi-row { padding: 10px 14px; gap: 10px; }
    .pt-poi-avatar { width: 32px; height: 32px; font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════
   PUPIL HOME TAB
   ══════════════════════════════════════════════════════════════ */

/* ── Greeting ── */
.pt-pupil-greeting {
  padding: 20px 20px 4px;
}
.pt-pupil-greeting-name {
  font-family: var(--ds-font-display, 'Syne', sans-serif);
  font-size: 1.45rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 2px;
  line-height: 1.2;
}
.pt-pupil-greeting-date {
  font-size: .82rem;
  color: var(--pt-muted);
  margin: 0;
}

/* ── Next lesson card ── */
.pt-pupil-next-lesson-card {
  margin-bottom: 0;
  border-left: 4px solid var(--ds-amber, #F59E0B) !important;
}
.pt-pupil-next-lesson-card--empty {
  border-left-color: var(--pt-border, #E2E8F0) !important;
  opacity: .85;
}
.pt-pupil-next-lesson-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pt-muted);
  padding: 16px 20px 0;
}
.pt-pupil-next-pill {
  margin-left: auto;
  background: #FEF3C7;
  color: #92400E;
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0;
}
.pt-pupil-next-lesson-main {
  padding: 10px 20px 14px;
}
.pt-pupil-next-lesson-date {
  font-family: var(--ds-font-display, 'Syne', sans-serif);
  font-size: 1.3rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.2;
}
.pt-pupil-next-lesson-time {
  font-size: .92rem;
  font-weight: 600;
  color: #334155;
  margin-top: 3px;
}
.pt-pupil-next-lesson-instr {
  font-size: .82rem;
  color: var(--pt-muted);
  margin-top: 2px;
}
.pt-pupil-next-lesson-actions {
  display: flex;
  gap: 8px;
  padding: 0 20px 16px;
}

/* ── Journey snapshot ── */
.pt-pupil-journey-body {
  padding: 12px 20px 16px;
}
.pt-pupil-journey-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.pt-pupil-journey-bar-track {
  flex: 1;
  height: 8px;
  background: #F1F5F9;
  border-radius: 999px;
  overflow: hidden;
}
.pt-pupil-journey-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ds-amber, #F59E0B), #F97316);
  border-radius: 999px;
  transition: width .6s ease;
  min-width: 4px;
}
.pt-pupil-journey-pct {
  font-size: .82rem;
  font-weight: 700;
  color: #0F172A;
  min-width: 34px;
  text-align: right;
}
.pt-pupil-journey-caption {
  font-size: .82rem;
  color: var(--pt-muted);
  margin: 0 0 8px;
}
.pt-pupil-journey-nudge {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: .82rem;
  color: #334155;
  background: #F8FAFC;
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 8px;
}
.pt-pupil-journey-nudge--good {
  background: #F0FDF4;
  color: #166534;
}
.pt-pupil-journey-nudge svg { flex-shrink: 0; margin-top: 1px; }

/* ── Messages nudge banner ── */
.pt-pupil-msg-nudge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  border-radius: 14px;
  padding: 12px 14px;
  text-decoration: none !important;
  color: #92400E !important;
  font-size: .88rem;
  font-weight: 600;
  transition: background .15s;
}
.pt-pupil-msg-nudge:hover { background: #FEF3C7; }
.pt-pupil-msg-nudge-icon {
  position: relative;
  flex-shrink: 0;
  width: 34px; height: 34px;
  background: #FEF3C7;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.pt-pupil-msg-nudge-badge {
  position: absolute;
  top: -3px; right: -3px;
  background: #DC2626;
  color: #fff;
  font-size: .58rem;
  font-weight: 700;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}
.pt-pupil-msg-nudge-text { flex: 1; line-height: 1.4; }
.pt-pupil-msg-nudge-arrow { flex-shrink: 0; color: #B45309; }

/* ── Last lesson recap ── */
.pt-pupil-last-lesson-body {
  padding: 12px 20px 16px;
}
.pt-pupil-last-lesson-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.pt-pupil-last-lesson-grade {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-weight: 800;
}
.pt-pupil-grade-num  { font-size: 2rem; line-height: 1; }
.pt-pupil-grade-denom { font-size: .9rem; color: var(--pt-muted); font-weight: 600; }
.pt-pupil-last-lesson-no-grade {
  font-size: .88rem;
  color: var(--pt-muted);
  font-style: italic;
}
.pt-pupil-last-lesson-meta {
  font-size: .8rem;
  color: var(--pt-muted);
}
.pt-pupil-last-lesson-notes {
  font-size: .88rem;
  color: #334155;
  line-height: 1.55;
  background: #F8FAFC;
  border-radius: 8px;
  padding: 10px 12px;
}
.pt-pupil-last-lesson-expand {
  display: inline-block;
  margin-top: 6px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--pt-teal-dark, #0284C7);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

/* ── Account grid ── */
.pt-pupil-account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--pt-border);
  border-radius: 0 0 14px 14px;
  overflow: hidden;
}
/* When balance tile is hidden (school setting off AND balance ≥ 0):
   single column with lesson price stacked over status. */
.pt-pupil-account-grid--nobalance {
  grid-template-columns: 1fr;
}
.pt-pupil-account-grid--nobalance .pt-pupil-account-tile--status {
  border-top: 1px solid var(--pt-border);
}
.pt-pupil-account-tile {
  background: #FFFFFF;
  padding: 14px 16px;
}
.pt-pupil-account-tile--status {
  grid-column: 1 / -1;
  border-top: 1px solid var(--pt-border);
}
/* Negative-balance highlight — shown even when "show balance" is OFF, so the
   styling needs to make it obvious that money is owed without being alarming. */
.pt-pupil-account-tile--negative {
  background: #FEF2F2;
}
.pt-pupil-account-tile-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--pt-muted);
  margin-bottom: 4px;
}
.pt-pupil-account-tile-value {
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.2;
}
.pt-pupil-account-tile-hint {
  font-size: .75rem;
  color: var(--pt-muted);
  margin-top: 3px;
}

/* ── Buy credit ── */
.pt-pupil-buy-body {
  padding: 4px 20px 18px;
}
.pt-pupil-buy-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
/* The field column grows to fill the modal. v0.9.366: the select sizes to
   its longest option (width:auto = intrinsic width) instead of a fixed
   220px cap, which clipped "10 hours — £0.50 (save £399.50)" on desktop
   too. Capped at 100% so it can never overflow the modal; stretches
   full-width when the row stacks on mobile. */
.pt-pupil-buy-row > div { flex: 1 1 auto; min-width: 0; }
.pt-pupil-buy-row .ds-input { width: auto; min-width: 220px; max-width: 100%; }
@media (max-width: 600px) {
  .pt-pupil-buy-row { flex-direction: column; align-items: stretch; }
  .pt-pupil-buy-row .ds-input { width: 100%; max-width: none; }
}

/* ── Resources strip ── */
.pt-pupil-resources-list {
  display: flex;
  flex-direction: column;
}
.pt-pupil-resource-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-top: 1px solid var(--pt-border);
  text-decoration: none !important;
  color: #0F172A;
  transition: background .12s;
}
.pt-pupil-resource-row:hover { background: #F8FAFC; }
.pt-pupil-resource-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  background: #F1F5F9;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--pt-muted);
}
.pt-pupil-resource-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pt-pupil-resource-title {
  font-size: .9rem;
  font-weight: 600;
  color: #0F172A;
}
.pt-pupil-resource-desc {
  font-size: .78rem;
  color: var(--pt-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-pupil-resource-arrow {
  flex-shrink: 0;
  color: var(--pt-muted);
}

/* ── Home tab cards — gap between cards (no wrapper needed; ds-pupil-main handles width) ── */
.pt-pupil-greeting { padding: 4px 0 0; }
/* Consistent greeting offset below the hero on every tab. The greeting is the
   first element in its tab container, but those containers differ (ds-pupil-main
   on Home/Lessons, ds-pupil-lower-grid on Progress/Messages) and each carried
   different top spacing — making the title creep lower tab to tab. Pin them all
   to the same offset here. */
.ds-pupil-wrap .ds-pupil-lower-grid { margin-top: 0 !important; }
.ds-pupil-main > .pt-pupil-greeting:first-child,
.ds-pupil-lower-grid .pt-pupil-greeting:first-child,
.ds-pupil-lower-left > .pt-pupil-greeting:first-child,
.ds-pupil-lower-right > .pt-pupil-greeting:first-child {
  padding-top: 4px !important;
  margin-top: 0 !important;
}
/* On Progress and Messages tabs the upper grid (ds-pupil-grid > ds-pupil-main)
   renders EMPTY — all content lives in the lower grid below. That empty wrapper
   still carries bottom padding, pushing the greeting lower than on Home/Lessons
   where the greeting lives in the upper grid. Collapse the empty wrapper to zero
   on those two tabs so the greeting sits at the identical offset on all tabs. */
.ds-pupil-wrap[data-ptab="progress"] .ds-pupil-grid,
.ds-pupil-wrap[data-ptab="messages"] .ds-pupil-grid {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
.ds-pupil-wrap[data-ptab="progress"] .ds-pupil-grid > .ds-pupil-main,
.ds-pupil-wrap[data-ptab="messages"] .ds-pupil-grid > .ds-pupil-main {
  display: none !important;
}
/* Empty scroll-anchor divs (#section-upcoming, #section-messages, etc.) are
   grid items, so each one consumed a full 18px gap slot — pushing the greeting
   down by one gap on Lessons and Messages (which have an anchor before their
   greeting) while Home/Progress sat tight. They're dead anchors (nothing
   scrolls to them), so remove them from layout entirely. This is the actual
   cause of the tab-to-tab title drift. */
#section-upcoming,
#section-messages,
#section-progress,
#section-mocks {
  display: none !important;
}
/* Back button in the chat header — only shown in the mobile/portrait
   master-detail view (see mobile.css); hidden on the desktop two-pane layout. */
.pt-chat-back-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 4px;
  margin-right: 8px;
  color: inherit;
  cursor: pointer;
  vertical-align: middle;
}
.pt-pupil-next-lesson-card,
.pt-pupil-journey-card,
.pt-pupil-last-lesson-card,
.pt-pupil-account-card,
.pt-pupil-buy-card,
.pt-pupil-resources-card,
.pt-pupil-waiting-info-card,
.pt-pupil-msg-nudge {
  margin-bottom: 0;
}

/* ── Waiting list info card ── */
.pt-pupil-waiting-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pt-pupil-waiting-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 20px;
  border-top: 1px solid var(--pt-border);
  font-size: .88rem;
  line-height: 1.5;
  color: #334155;
}
.pt-pupil-waiting-step strong { display: block; font-size: .9rem; color: #0F172A; margin-bottom: 2px; }
.pt-pupil-waiting-step p { margin: 0; }
.pt-pupil-waiting-step a { color: var(--pt-teal-dark); text-decoration: underline; }
.pt-pupil-waiting-step-num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  background: var(--ds-navy, #0C1E3D);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  margin-top: 1px;
}

/* ══════════════════════════════════════════════════════════════
   PUPIL LESSONS TAB
   ══════════════════════════════════════════════════════════════ */

/* ── Upcoming list ── */
.pt-pupil-upcoming-list {
  display: flex;
  flex-direction: column;
}
.pt-pupil-upcoming-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-top: 1px solid var(--pt-border);
}
.pt-pupil-upcoming-row:first-child { border-top: none; }
.pt-pupil-upcoming-date {
  flex-shrink: 0;
  width: 46px;
  text-align: center;
  background: var(--ds-navy, #0C1E3D);
  color: #fff;
  border-radius: 10px;
  padding: 8px 0;
  line-height: 1;
}
.pt-pupil-upcoming-day {
  display: block;
  font-family: var(--ds-font-display, 'Syne', sans-serif);
  font-size: 1.15rem;
  font-weight: 800;
}
.pt-pupil-upcoming-month {
  display: block;
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.65);
  margin-top: 2px;
}
.pt-pupil-upcoming-details { flex: 1; min-width: 0; }
.pt-pupil-upcoming-time {
  font-size: .95rem;
  font-weight: 700;
  color: #0F172A;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pt-pupil-upcoming-pill {
  background: #FEF3C7;
  color: #92400E;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.pt-pupil-upcoming-meta {
  font-size: .8rem;
  color: var(--pt-muted);
  margin-top: 2px;
}
.pt-pupil-upcoming-cancel {
  flex-shrink: 0;
  background: transparent;
  color: #B91C1C;
  border: 1px solid #FCA5A5;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}
.pt-pupil-upcoming-cancel:hover { background: #FEE2E2; }

/* ── Request form ── */
.pt-pupil-request-body { padding: 8px 20px 18px; }
.pt-pupil-request-hint {
  font-size: .85rem;
  color: var(--pt-muted);
  margin: 0 0 14px;
}
.pt-pupil-request-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 540px) {
  .pt-pupil-request-row { grid-template-columns: 1fr 1fr; }
  .pt-pupil-request-row > :nth-child(3) { grid-column: 1 / -1; }
}
.pt-pupil-request-field {
  display: flex;
  flex-direction: column;
}
.pt-pupil-request-field--full { margin-bottom: 14px; }
.pt-pupil-request-field label {
  font-size: .8rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}
.pt-pupil-request-policy {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  font-size: .78rem;
  color: var(--pt-muted);
  padding-top: 12px;
  border-top: 1px dashed var(--pt-border);
}
.pt-pupil-request-policy svg { flex-shrink: 0; color: #94A3B8; }

/* ── Available slots ── */
.pt-pupil-slots-list { display: flex; flex-direction: column; }
.pt-pupil-slot-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-top: 1px solid var(--pt-border);
  background: #F0FDF4;
}
.pt-pupil-slot-row:first-child { border-top: none; }
.pt-pupil-slot-info { flex: 1; min-width: 0; }
.pt-pupil-slot-when {
  font-size: .92rem;
  font-weight: 700;
  color: #0F172A;
}
.pt-pupil-slot-meta {
  font-size: .78rem;
  color: var(--pt-muted);
  margin-top: 2px;
}
.pt-pupil-slot-btn { flex-shrink: 0; }

/* ── Recent requests log ── */
.pt-pupil-reqlog-list { display: flex; flex-direction: column; }
.pt-pupil-reqlog-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--pt-border);
  font-size: .88rem;
}
.pt-pupil-reqlog-row:first-child { border-top: none; }
.pt-pupil-reqlog-when {
  color: #334155;
  font-weight: 500;
}
.pt-pupil-reqlog-status {
  flex-shrink: 0;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 10px;
  border-radius: 999px;
}
.pt-pupil-reqlog-status--pending  { background: #FEF3C7; color: #92400E; }
.pt-pupil-reqlog-status--approved { background: #DCFCE7; color: #166534; }
.pt-pupil-reqlog-status--declined { background: #FEE2E2; color: #991B1B; }

/* ── Timeline ── */
.pt-pupil-timeline {
  position: relative;
  padding: 4px 0 4px;
}
.pt-pupil-timeline::before {
  content: '';
  position: absolute;
  left: 30px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: var(--pt-border);
}
.pt-pupil-timeline-item {
  position: relative;
  padding: 12px 20px 12px 50px;
}
.pt-pupil-timeline-dot {
  position: absolute;
  left: 24px;
  top: 22px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #94A3B8;
  border: 3px solid #FFFFFF;
  z-index: 1;
}
.pt-pupil-timeline-item.status-scheduled .pt-pupil-timeline-dot { background: var(--ds-amber, #F59E0B); }
.pt-pupil-timeline-item.status-completed .pt-pupil-timeline-dot { background: #16A34A; }
.pt-pupil-timeline-item.status-cancelled .pt-pupil-timeline-dot { background: #DC2626; }
.pt-pupil-timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
.pt-pupil-timeline-header-main { flex: 1; min-width: 0; }
.pt-pupil-timeline-date {
  font-weight: 700;
  font-size: .92rem;
  color: #0F172A;
}
.pt-pupil-timeline-meta {
  font-size: .78rem;
  color: var(--pt-muted);
  margin-top: 2px;
}
.pt-pupil-timeline-header-side {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.pt-pupil-timeline-status {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 8px;
  border-radius: 999px;
  background: #F1F5F9;
  color: #475569;
}
.pt-pupil-timeline-status.status-scheduled { background: #FEF3C7; color: #92400E; }
.pt-pupil-timeline-status.status-completed { background: #DCFCE7; color: #166534; }
.pt-pupil-timeline-status.status-cancelled { background: #FEE2E2; color: #991B1B; }
.pt-pupil-timeline-grade {
  font-size: .72rem;
  font-weight: 700;
  color: #FFFFFF;
  padding: 3px 8px;
  border-radius: 999px;
}
.pt-pupil-timeline-notes {
  background: #F8FAFC;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .85rem;
  color: #334155;
  margin-bottom: 10px;
  line-height: 1.5;
}
.pt-pupil-timeline-notes strong { color: #0F172A; }
.pt-pupil-timeline-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.pt-pupil-timeline-action-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--pt-teal-dark, #0284C7);
  cursor: pointer;
}
.pt-pupil-timeline-action-link:hover { text-decoration: underline; }
.pt-pupil-timeline-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--pt-border);
}
.pt-pupil-timeline-pupil-notes { margin-top: 10px; }

/* In-app image lightbox for saved mind-map / scenario thumbnails. Replaces the
   old target="_blank" links, which navigated PWA users to a chrome-less raw
   image with no way back. */
.pt-img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(15, 23, 42, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top, 0px)) 20px max(20px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}
.pt-img-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .5);
}
.pt-img-lightbox__close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pt-img-lightbox__close:hover { background: rgba(255, 255, 255, .28); }

/* Pupil-authored notes as shown on the INSTRUCTOR side (pupil-tab lesson
   list + pupil drill-down). Markup is
   <div.ds-pupil-note-item><span.ds-pupil-note-badge>Pupil note</span>…text…</div>.
   The badge previously had no styling at all, so "Pupil note" butted
   straight against the comment — "Pupil note" + "I think…" read as one
   word ("notel think…"). The pill + margin gives a clear gap. */
.ds-pupil-notes-instr { margin-top: 6px; }
.ds-pupil-note-item {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pt-text-2);
}
.ds-pupil-note-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--pt-bg);
  border: 1px solid var(--pt-border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--pt-muted);
  vertical-align: 1px;
}

/* ══════════════════════════════════════════════════════════════
   PUPIL PROGRESS TAB
   ══════════════════════════════════════════════════════════════ */

/* ── Empty state ── */
.pt-pupil-progress-empty .pt-empty {
  text-align: center;
}
.pt-pupil-progress-empty p {
  margin: 10px 0 0;
  color: #475569;
  line-height: 1.55;
}
.pt-pupil-progress-empty p strong {
  display: block;
  color: #0F172A;
  font-size: 1rem;
  margin-bottom: 4px;
}

/* ── Test booked card ── */
.pt-pupil-testbooked-card {
  border-left: 4px solid var(--ds-amber, #F59E0B) !important;
}
.pt-pupil-testbooked-body {
  padding: 6px 20px 16px;
}
.pt-pupil-testbooked-date {
  font-family: var(--ds-font-display, 'Syne', sans-serif);
  font-size: 1.2rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.2;
}
.pt-pupil-testbooked-centre {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  color: var(--pt-muted);
  margin-top: 6px;
}
.pt-pupil-testbooked-pill {
  background: #FEF3C7;
  color: #92400E;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.pt-pupil-testbooked-pill--soon {
  background: #FEE2E2;
  color: #991B1B;
}

/* ── Overview (strongest / needs work) ── */
.pt-pupil-overview-body {
  padding: 6px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pt-pupil-overview-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
}
.pt-pupil-overview-row--strong { background: #F0FDF4; }
.pt-pupil-overview-row--weak   { background: #FEF2F2; }
.pt-pupil-overview-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.pt-pupil-overview-row--strong .pt-pupil-overview-icon { background: #DCFCE7; color: #16A34A; }
.pt-pupil-overview-row--weak   .pt-pupil-overview-icon { background: #FEE2E2; color: #DC2626; }
.pt-pupil-overview-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--pt-muted);
  margin-bottom: 2px;
}
.pt-pupil-overview-value {
  font-size: .95rem;
  font-weight: 700;
  color: #0F172A;
}

/* ── Skill levels by category ── */
.pt-pupil-skillcat-list {
  padding: 4px 0;
  display: flex;
  flex-direction: column;
}
.pt-pupil-skillcat-row {
  padding: 12px 20px;
  border-top: 1px solid var(--pt-border);
}
.pt-pupil-skillcat-row:first-child { border-top: none; }
.pt-pupil-skillcat-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.pt-pupil-skillcat-name {
  font-size: .9rem;
  font-weight: 600;
  color: #0F172A;
}
.pt-pupil-skillcat-grade {
  font-size: .82rem;
  font-weight: 700;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
}
.pt-pupil-skillcat-bar-track {
  height: 8px;
  background: #F1F5F9;
  border-radius: 999px;
  overflow: hidden;
}
.pt-pupil-skillcat-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .6s ease;
  min-width: 4px;
}
.pt-pupil-skillcat-state {
  margin-top: 5px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ── Focus areas (5 weakest) ── */
.pt-pupil-focus-list { display: flex; flex-direction: column; }
.pt-focus-group-label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: #64748B; padding: 12px 20px 4px;
}
.pt-focus-group-label:first-child { padding-top: 6px; }
/* row directly under a group heading shouldn't draw the divider line */
.pt-focus-group-label + .pt-pupil-focus-row { border-top: none; }
.pt-pupil-focus-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--pt-border);
}
.pt-pupil-focus-row:first-child { border-top: none; }
.pt-pupil-focus-rank {
  flex-shrink: 0;
  width: 24px; height: 24px;
  background: var(--ds-navy, #0C1E3D);
  color: #fff;
  border-radius: 50%;
  font-size: .78rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.pt-pupil-focus-name {
  flex: 1;
  min-width: 0;
  font-size: .9rem;
  font-weight: 600;
  color: #0F172A;
}
.pt-pupil-focus-score {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.pt-pupil-focus-bar-track {
  width: 70px;
  height: 6px;
  background: #F1F5F9;
  border-radius: 999px;
  overflow: hidden;
}
.pt-pupil-focus-bar-fill {
  height: 100%;
  border-radius: 999px;
  min-width: 3px;
}
.pt-pupil-focus-grade {
  font-size: .82rem;
  font-weight: 700;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: right;
}

/* ── Readiness card wrap — overrides ds-card to look like pt-card ── */
.pt-pupil-readiness-wrap .ds-readiness-card,
.pt-pupil-readiness-wrap .ds-card {
  background: var(--pt-card);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius);
  box-shadow: var(--pt-shadow);
  margin: 0 !important;
  overflow: hidden;
}
.pt-pupil-readiness-wrap .ds-card-header {
  font-size: .95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #0F172A !important;
  padding: 16px 20px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--pt-border);
}
.pt-pupil-readiness-wrap .ds-card-header svg { display: none; }
.pt-pupil-readiness-wrap .ds-readiness-body { padding: 16px 20px; }
.pt-pupil-readiness-wrap .ds-readiness-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--pt-muted);
  margin-bottom: 4px;
}
.pt-pupil-readiness-wrap .ds-readiness-dates {
  font-family: var(--ds-font-display, 'Syne', sans-serif);
  font-size: 1.2rem;
  font-weight: 800;
  color: #0F172A;
}
.pt-pupil-readiness-wrap .ds-readiness-weeks {
  font-size: .82rem;
  color: var(--pt-muted);
  margin-top: 4px;
}
.pt-pupil-readiness-wrap .ds-readiness-basis {
  margin-top: 14px;
  font-size: .8rem;
  color: var(--pt-muted);
  font-style: italic;
}
.pt-pupil-readiness-wrap .ds-readiness-disclaimer {
  margin-top: 12px;
  padding: 10px 12px;
  background: #F8FAFC;
  border-radius: 8px;
  font-size: .75rem;
  color: var(--pt-muted);
  line-height: 1.5;
}

/* Plain-English coverage note under the readiness card. A direct grid child of
   .ds-pupil-lower-left, so the column's 18px gap spaces it — no margins needed. */
.pt-pupil-coverage-note {
  margin: 0;
  padding: 12px 16px;
  background: #F8FAFC;
  border: 1px solid var(--pt-border, #E2E8F0);
  border-radius: 12px;
  font-size: .86rem;
  line-height: 1.5;
  color: #475569;
}
.pt-pupil-coverage-note strong { color: #0F172A; font-weight: 700; }

/* ── Grade trend chart ── */
.pt-pupil-trend-body { padding: 6px 20px 18px; }
.pt-pupil-trend-loading {
  padding: 24px;
  text-align: center;
  color: var(--pt-muted);
  font-size: .88rem;
}
.pt-pupil-trend-canvas-wrap {
  position: relative;
  height: 200px;
  margin-top: 6px;
}

/* ── Your Tests card (consolidated theory + practical) ── */
.pt-pupil-tests-card--practical-booked {
  border-left: 4px solid var(--ds-amber, #F59E0B) !important;
}
.pt-pupil-tests-body {
  padding: 4px 0;
  display: flex;
  flex-direction: column;
}
.pt-pupil-tests-row {
  padding: 14px 20px;
  border-top: 1px solid var(--pt-border);
}
.pt-pupil-tests-row:first-child { border-top: none; }
.pt-pupil-tests-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.pt-pupil-tests-row-name {
  font-size: .92rem;
  font-weight: 700;
  color: #0F172A;
}
.pt-pupil-tests-row-detail {
  font-size: .82rem;
  color: var(--pt-muted);
  margin-top: 2px;
}
.pt-pupil-tests-row-centre {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  color: var(--pt-muted);
  margin-top: 4px;
}
/* Status pills */
.pt-pupil-tests-status {
  flex-shrink: 0;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.pt-pupil-tests-status--pass    { background: #DCFCE7; color: #166534; }
.pt-pupil-tests-status--fail    { background: #FEE2E2; color: #991B1B; }
.pt-pupil-tests-status--booked  { background: #FEF3C7; color: #92400E; }
.pt-pupil-tests-status--pending { background: #E0F2FE; color: #075985; }
.pt-pupil-tests-status--none    { background: #F1F5F9; color: #64748B; }

/* ══════════════════════════════════════════════════════════════
   PUPIL MESSAGES TAB
   ══════════════════════════════════════════════════════════════ */

.pt-pupil-msg-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 500px;
}

/* Instructor header strip at top of card */
.pt-pupil-msg-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: #F8FAFC;
  border-bottom: 1px solid var(--pt-border);
}
.pt-pupil-msg-header-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ds-navy, #0C1E3D);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pt-pupil-msg-header-text { flex: 1; min-width: 0; }
.pt-pupil-msg-header-name {
  font-weight: 700;
  font-size: .95rem;
  color: #0F172A;
  line-height: 1.2;
}
.pt-pupil-msg-header-sub {
  font-size: .76rem;
  color: var(--pt-muted);
  margin-top: 2px;
}

/* Thread fills the rest of the card */
.pt-pupil-msg-thread {
  flex: 1 1 auto !important;
  min-height: 320px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 16px 20px;
  background: #FAFBFC;
  scroll-behavior: smooth;
}

/* Gap-notification CTA injected by JS into a message bubble */
.pt-pupil-msg-gap-cta {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 12px;
  background: var(--ds-navy, #0C1E3D);
  color: #ffffff !important;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(12,30,61,.28);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: background .12s;
}
.pt-pupil-msg-gap-cta:hover { background: #1A3461; }

/* Pupil composer reuses the instructor .pt-composer markup/classes for an
   identical compact, professional look (38px circular buttons, pill input).
   Only override the send button colour to the pupil-dashboard amber accent
   instead of the instructor blue, so each dashboard stays on-brand. */
.pt-pupil-composer-send {
  background: var(--ds-amber, #F59E0B) !important;
  color: #fff !important;
}
.pt-pupil-composer-send:hover:not(:disabled) {
  background: #D97706 !important;
}
.pt-pupil-composer .pt-composer-input:focus {
  border-color: var(--ds-amber, #F59E0B) !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,.15) !important;
}

/* Empty state inside the thread — server-rendered .pt-msg-empty-state styling pass */
.pt-pupil-msg-thread .pt-msg-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  color: var(--pt-muted);
}
.pt-pupil-msg-thread .pt-msg-empty-icon {
  font-size: 2rem;
  margin-bottom: 10px;
  opacity: .6;
}
.pt-pupil-msg-thread .pt-msg-empty-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 4px;
}
.pt-pupil-msg-thread .pt-msg-empty-desc {
  font-size: .88rem;
  color: var(--pt-muted);
}

/* ══════════════════════════════════════════════════════════════
   INSTRUCTOR MESSAGES — BROADCAST FEATURE
   ══════════════════════════════════════════════════════════════ */

/* Broadcast button sits in the tab header */
.pt-tab-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.pt-msg-broadcast-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

/* Broadcast modal — built on existing .pt-modal foundation but shown via
   inline display:flex (not the .is-open class) so override opacity/visibility */
.pt-msg-broadcast-overlay {
  opacity: 1 !important;
  visibility: visible !important;
}
.pt-msg-broadcast-overlay .pt-modal { transform: scale(1) !important; }
.pt-msg-broadcast-card {
  max-width: 560px !important;
}
.pt-msg-broadcast-hint {
  margin: 0 0 12px;
  font-size: .88rem;
  color: var(--pt-muted);
  line-height: 1.5;
}
.pt-msg-broadcast-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pt-msg-broadcast-label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--pt-text);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* Audience radio rows */
.pt-msg-broadcast-audiences {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pt-msg-broadcast-aud {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--pt-border);
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.pt-msg-broadcast-aud:hover { background: #F8FAFC; }
.pt-msg-broadcast-aud input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--ds-amber, #F59E0B);
}
.pt-msg-broadcast-aud input[type="radio"]:checked + .pt-msg-broadcast-aud-text strong {
  color: var(--ds-navy, #0C1E3D);
}
.pt-msg-broadcast-aud:has(input:checked) {
  background: #FFFBEB;
  border-color: #FCD34D;
}
.pt-msg-broadcast-aud-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: .9rem;
}
.pt-msg-broadcast-aud-text strong { color: var(--pt-text); font-weight: 700; }
.pt-msg-broadcast-aud-text em {
  font-style: normal;
  font-size: .8rem;
  color: var(--pt-muted);
}

/* Message body textarea */
.pt-msg-broadcast-textarea {
  width: 100%;
  border: 1px solid var(--pt-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: .95rem;
  resize: vertical;
  min-height: 100px;
  box-sizing: border-box;
}
.pt-msg-broadcast-textarea:focus {
  outline: none;
  border-color: var(--ds-amber, #F59E0B);
  box-shadow: 0 0 0 3px rgba(245,158,11,.15);
}

/* Confirmation strip shown after Review */
.pt-msg-broadcast-confirm {
  /* Shown only at the review/confirm stage — the element carries inline
     display:none and JS flips it to flex. Must NOT be !important or the inline
     hide (and the JS reset on open) can't win, leaving a stale "0 pupils"
     banner visible the whole time. */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: 10px;
  font-size: .88rem;
  color: #78350F;
}
.pt-msg-broadcast-confirm svg { color: #B45309; flex-shrink: 0; }
/* Live recipient count under the audience picker — updates on open and on every
   audience change so the modal never reads a stale "0 pupils". */
.pt-msg-broadcast-live {
  margin-top: 10px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--pt-muted, #64748B);
  min-height: 1.1em;
}
.pt-msg-broadcast-live--zero { color: #B45309; }

/* ══════════════════════════════════════════════════════════════
   PUPIL "PAYMENT NEEDED" CARD (Pass C3)
   ══════════════════════════════════════════════════════════════ */
.pt-pupil-paynow-card {
  border: 1px solid #FCD34D !important;
  background: #FFFBEB !important;
  overflow: hidden;
}
.pt-pupil-paynow-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 12px;
}
.pt-pupil-paynow-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #FEF3C7;
  color: #B45309;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pt-pupil-paynow-headtext { flex: 1; min-width: 0; }
.pt-pupil-paynow-title {
  font-weight: 800;
  font-size: 1rem;
  color: #92400E;
  line-height: 1.2;
}
.pt-pupil-paynow-sub {
  font-size: .85rem;
  color: #78350F;
  margin-top: 4px;
  line-height: 1.5;
}
.pt-pupil-paynow-cashflag {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 18px 8px;
  padding: 8px 12px;
  background: #DCFCE7;
  border-radius: 8px;
  font-size: .82rem;
  color: #166534;
}
.pt-pupil-paynow-cashflag svg { flex-shrink: 0; color: #16A34A; }

/* Method buttons */
.pt-pupil-paynow-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  padding: 4px 18px 16px;
}
.pt-pupil-paynow-method {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--pt-border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.pt-pupil-paynow-method:hover,
.pt-pupil-paynow-method:focus,
.pt-pupil-paynow-method:focus-visible,
.pt-pupil-paynow-method:active {
  /* v0.9.330 — keep our own light background + readable text on hover/focus.
     Without an explicit background here the host theme's global `button:hover`
     (0,1,1) fills these buttons dark navy and the near-black label becomes
     unreadable. Our (0,2,0) selector already wins for border/shadow, but was
     silent on background/colour — so the theme darkened those. Set them here. */
  background: #fff;
  color: #0F172A;
  border-color: var(--ds-amber, #F59E0B);
  box-shadow: 0 2px 8px rgba(245,158,11,.12);
}
/* The active (cash-intent) card keeps its green tint on hover/focus too —
   (0,3,0) beats the plain hover rule above. */
.pt-pupil-paynow-method.is-active:hover,
.pt-pupil-paynow-method.is-active:focus,
.pt-pupil-paynow-method.is-active:active {
  background: #F0FDF4;
  border-color: #16A34A;
}
.pt-pupil-paynow-method-icon {
  color: var(--ds-navy, #0C1E3D);
  margin-bottom: 4px;
}
.pt-pupil-paynow-method--card  .pt-pupil-paynow-method-icon { color: #6366F1; }
.pt-pupil-paynow-method--bank  .pt-pupil-paynow-method-icon { color: #0EA5E9; }
.pt-pupil-paynow-method--cash  .pt-pupil-paynow-method-icon { color: #16A34A; }
.pt-pupil-paynow-method-label {
  font-weight: 700;
  font-size: .88rem;
  color: #0F172A;
}
.pt-pupil-paynow-method-meta {
  font-size: .72rem;
  color: var(--pt-muted);
}
.pt-pupil-paynow-method.is-active {
  background: #F0FDF4;
  border-color: #16A34A;
}
.pt-pupil-paynow-method.is-active .pt-pupil-paynow-method-label { color: #166534; }

/* Bank details panel */
.pt-pupil-paynow-bankdetails {
  margin: 0 18px 16px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--pt-border);
  border-radius: 10px;
}
.pt-pupil-paynow-bankdetails-title {
  font-weight: 700;
  font-size: .85rem;
  color: #0F172A;
  margin-bottom: 10px;
}
.pt-pupil-paynow-bankgrid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 0;
}
.pt-pupil-paynow-bankgrid dt {
  font-size: .8rem;
  color: var(--pt-muted);
  font-weight: 600;
}
.pt-pupil-paynow-bankgrid dd {
  margin: 0;
  font-size: .88rem;
  font-weight: 700;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
}
.pt-pupil-paynow-banknote {
  margin: 12px 0 0;
  font-size: .76rem;
  color: var(--pt-muted);
  font-style: italic;
  line-height: 1.5;
}


/* ── Covered-this-lesson flag in the grading modal ──
   Skills ticked as "covered" during the end-lesson flow are highlighted in
   the grade grid so the instructor can see what they discussed with the pupil
   and grade those first. They remain free to grade any other skill too. */
.ds-skill-item--covered {
  background: rgba(14, 165, 233, .06);
  border-left: 3px solid var(--pt-teal);
  border-radius: var(--pt-radius-xs);
  padding-left: 8px;
}
.ds-skill-covered-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--pt-teal-dark);
  background: rgba(14, 165, 233, .12);
  border-radius: 999px;
  vertical-align: middle;
}

/* Recommended focus block on the in-lesson loop's first page */
.pt-panel-coaching { background: #F5F3FF; border: 1px solid #DDD6FE; border-radius: 12px; padding: 12px 14px; margin: 0 0 4px; }
.pt-panel-coaching .ds-suggestion-inline { font-size: .82rem; color: #4C1D95; margin-top: 6px; line-height: 1.4; }
.pt-panel-coaching .ds-suggestion-inline b { color: #5B21B6; }
/* Mock mode hides the lesson focus suggestions; !important beats the inline
   display:block that loadCoachingSuggestions sets when its async fetch lands. */
.pt-mock-active #pt-panel-coaching { display: none !important; }
/* Examiner hints shown in place of the coaching panel during a mock. */
.pt-mock-hints { background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 12px; padding: 12px 14px; margin: 0 0 4px; }
.pt-mock-hints-head { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #B45309; margin-bottom: 6px; }
.pt-mock-hints-list { list-style: none; margin: 0; padding: 0; }
.pt-mock-hints-list li { font-size: .82rem; color: #78350F; line-height: 1.45; margin-top: 7px; padding-left: 16px; position: relative; }
.pt-mock-hints-list li:first-child { margin-top: 0; }
.pt-mock-hints-list li::before { content: ''; position: absolute; left: 3px; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: #F59E0B; }
.pt-mock-hints-list li b { color: #92400E; }
/* End-screen objectives recap — talking point for the wrap-up discussion. */
.pt-end-objectives { background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; }
.pt-end-obj-head { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #15803D; margin-bottom: 2px; }
.pt-end-obj-intro { font-size: .8rem; color: #166534; margin: 0 0 8px; line-height: 1.4; }
.pt-end-obj-list { list-style: none; margin: 0; padding: 0; }
.pt-end-obj-row { display: flex; align-items: flex-start; gap: 9px; font-size: .85rem; color: #0F172A; line-height: 1.4; margin-top: 7px; }
.pt-end-obj-row:first-child { margin-top: 0; }
.pt-end-obj-mark { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #CBD5E1; margin-top: 1px; position: relative; }
.pt-end-obj-row.is-done .pt-end-obj-mark { border-color: #16A34A; background: #16A34A; }
.pt-end-obj-row.is-done .pt-end-obj-mark::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pt-end-obj-row.is-done .pt-end-obj-text { color: #475569; }

/* Last-lesson recap on the loop's first page */
.pt-panel-recap { background:#F8FAFC; border:1px solid #E2E8F0; border-radius:12px; padding:12px 14px; margin:0 0 10px; }
.pt-panel-recap .pt-recap-head { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#64748B; margin-bottom:6px; }
.pt-panel-recap .pt-recap-skills { font-size:.85rem; color:#0F172A; line-height:1.4; }
.pt-panel-recap .pt-recap-notes { font-size:.82rem; color:#475569; font-style:italic; margin-top:6px; line-height:1.45; }
/* Pupil's own comment(s) from last lesson — amber accent so it reads as the
   pupil's voice, distinct from the instructor's note above. */
.pt-panel-recap .pt-recap-pupil { margin-top:8px; padding-left:10px; border-left:2px solid #F59E0B; }
.pt-panel-recap .pt-recap-pupil-label { display:block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#B45309; margin-bottom:2px; }
.pt-panel-recap .pt-recap-pupil-quote { font-size:.82rem; color:#475569; font-style:italic; line-height:1.45; margin-top:2px; }

/* Live-lesson banner — prominent in-lesson entry at the top of the home tab.
   --soon = amber (imminent), --inprogress = teal (already started). */
.pt-live-banner { display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:16px; background:#fff; margin:0 0 16px; box-shadow:0 6px 18px rgba(15,23,42,.06); }
.pt-live-banner--soon { border:1px solid #FCD9A6; border-left:5px solid #F59E0B; }
.pt-live-banner--inprogress { border:1px solid #A7E0CE; border-left:5px solid #1D9E75; }
.pt-live-avatar { width:46px; height:46px; flex:none; border-radius:999px; display:grid; place-items:center; font-weight:700; font-size:17px; }
.pt-live-banner--soon .pt-live-avatar { background:#FEF3E2; color:#B45309; }
.pt-live-banner--inprogress .pt-live-avatar { background:#E1F5EE; color:#0F6E56; }
.pt-live-body { flex:1; min-width:0; }
.pt-live-meta { display:flex; align-items:center; gap:8px; margin-bottom:2px; }
.pt-live-kicker { font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.pt-live-banner--soon .pt-live-kicker { color:#B45309; }
.pt-live-banner--inprogress .pt-live-kicker { color:#0F6E56; }
.pt-live-chip { font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.pt-live-banner--soon .pt-live-chip { color:#92400E; background:#FEF3E2; }
.pt-live-banner--inprogress .pt-live-chip { color:#0F6E56; background:#E1F5EE; }
.pt-live-pupil { font-size:1rem; font-weight:700; color:#0F172A; line-height:1.2; }
.pt-live-time { font-size:.8rem; color:#64748B; margin-top:1px; }
.pt-live-cta { flex:none; display:inline-flex; align-items:center; gap:6px; padding:11px 20px; border:none; border-radius:12px; font-weight:700; font-size:.95rem; cursor:pointer; }
.pt-live-banner--soon .pt-live-cta { background:var(--ds-navy, #0C1E3D); color:#fff; box-shadow: 0 4px 12px rgba(12,30,61,.28); }
.pt-live-banner--inprogress .pt-live-cta { background:#1D9E75; color:#fff; }
@media (max-width: 560px) {
  .pt-live-banner { flex-wrap:wrap; }
  .pt-live-cta { width:100%; justify-content:center; }
}

/* Recommended (weak) skill highlight + badge in the cover checklist */
.pt-skill-item--rec { background:#F5F3FF; border-radius:8px; }
.pt-skill-rec-badge { display:inline-block; font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#6D28D9; background:#EDE9FE; border:1px solid #DDD6FE; border-radius:6px; padding:1px 6px; margin-left:6px; vertical-align:middle; }
.ds-suggestion-when { color:#7C3AED; font-weight:600; }

/* ---------------------------------------------------------------------------
   Theme button-state bleed fix.

   The active WordPress theme styles bare <button> :hover/:focus/:active with a
   brand-blue background (and blue text). That bled into in-lesson portal buttons
   that don't define their own state colours: Back buttons went solid blue with
   invisible text, the hazard picker flashed grey then blue, colour swatches
   turned blue, etc.

   This stylesheet only loads on BLine portal pages, but the neutraliser is still
   scoped to the lesson panel / toolbox. It uses :where() (which contributes ZERO
   specificity) wrapped in `body` so the selector lands at (0,1,2): high enough to
   beat the theme's `button:hover` (0,1,1) regardless of load order, but lower than
   our own `.pt-*` class hover/focus rules (0,2,0) so those still win. Solid
   buttons then restore their own background+text on focus/active below.
   --------------------------------------------------------------------------- */
body :where(#pt-lesson-panel, .ds-lesson-menu) button:hover,
body :where(#pt-lesson-panel, .ds-lesson-menu) button:focus,
body :where(#pt-lesson-panel, .ds-lesson-menu) button:focus-visible,
body :where(#pt-lesson-panel, .ds-lesson-menu) button:active {
  background-color: transparent;
  color: inherit;
}
/* Solid buttons keep their fill + white text on every state (their :hover already
   sets the background; these cover :focus/:active so the neutraliser can't blank them). */
.pt-btn--primary:hover, .pt-btn--primary:focus, .pt-btn--primary:active { background: var(--pt-navy-2); color: #fff; }
.pt-btn--teal:hover,    .pt-btn--teal:focus,    .pt-btn--teal:active    { background: var(--pt-teal-dark); color: #fff; }
.pt-btn--green:hover,   .pt-btn--green:focus,   .pt-btn--green:active   { background: var(--pt-green); color: #fff; }
.pt-btn--danger:hover,  .pt-btn--danger:focus,  .pt-btn--danger:active  { background: var(--pt-red); color: #fff; }
.pt-btn--outline:hover, .pt-btn--outline:focus, .pt-btn--outline:active { background: var(--pt-bg); color: var(--pt-navy); border-color: var(--pt-navy); }
/* Plain in-lesson buttons: explicit, readable hover/focus/active (no blue, ever). */
.pt-reflect-back:hover, .pt-reflect-back:focus, .pt-reflect-back:active { background: var(--pt-bg-soft, #F1F5F9); color: var(--pt-text); }
.pt-btn--ghost:hover,   .pt-btn--ghost:focus,   .pt-btn--ghost:active   { background: var(--pt-bg); color: var(--pt-text); }
.pt-sc-haz:hover,       .pt-sc-haz:focus,       .pt-sc-haz:active       { background: var(--pt-bg-soft, #F1F5F9); }
.pt-sc-tpl:focus,       .pt-sc-tpl:active       { background: #fff; }
.pt-sc-shape:hover      { background: var(--pt-bg-soft, #F1F5F9); }
.pt-sc-mode:focus,      .pt-sc-mode:active      { color: var(--pt-text); }
.pt-sc-mode.is-active   { background: #fff; color: var(--pt-text); }
.ds-lesson-menu button:hover, .ds-lesson-menu button:focus, .ds-lesson-menu button:active { background: #f1f5f9; color: var(--pt-text); }
/* Colour swatches must always show their own colour, never the theme blue. */
.pt-mm-color:hover, .pt-mm-color:focus, .pt-mm-color:active { background: var(--c); }