/* View-specific layout. Component styles live in components.css; this file is
   only for one-off layout rules. */

/* Login (shared) — polished to match the staff app's brand-logo + login-card pattern. */
.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background:
    radial-gradient(circle at 30% 10%, rgba(37, 99, 235, 0.06), transparent 50%),
    radial-gradient(circle at 70% 90%, rgba(37, 99, 235, 0.05), transparent 55%),
    var(--paper);
}
.login__card {
  width: 100%;
  max-width: 400px;
  text-align: center;
  padding: 40px 32px 32px;
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  border: 1px solid var(--ink-5);
}
.login__brand {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.login__logo {
  width: 64px;
  height: 64px;
  background: #ffffff;
  border-radius: 16px;
  padding: 4px;
  border: 1px solid var(--ink-5);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
  object-fit: contain;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.login__logo:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
}
.login__logo-fallback {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  background: #fff; color: var(--accent);
  border-radius: 16px; padding: 4px;
  border: 1px solid var(--ink-5);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
  font-size: 22px; font-weight: 800; letter-spacing: 0.02em;
}
.login__title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.login__sub {
  color: var(--ink-3);
  font-size: var(--fs-caption);
  margin-bottom: var(--space-6);
}
.login__field { margin-bottom: var(--space-3); text-align: left; }
.login__field .input {
  height: 46px;
  background: var(--paper);
  border-color: var(--ink-5);
}
.login__field .input:focus {
  background: var(--screen);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.login .btn--block { height: 46px; margin-top: var(--space-2); font-size: var(--fs-body); }
.login__err   { margin-top: var(--space-3); color: var(--err); font-size: var(--fs-caption); min-height: 1.2em; text-align: center; }
.login__foot {
  margin-top: var(--space-6);
  font-size: var(--fs-tiny);
  color: var(--ink-3);
  letter-spacing: 0.03em;
}

/* No-access */
.no-access { text-align: center; max-width: 420px; margin: 14vh auto; padding: 0 var(--space-5); }
.no-access h1 { margin-bottom: var(--space-3); }
.no-access p  { color: var(--ink-2); margin-bottom: var(--space-5); }

/* Reusable phone-frame padding */
.layout-phone__pad { padding: var(--space-5); }

/* ═════════════════════════════════════════════════════════════
   INTERN HOME — CLEAN / Notion · Linear · Apple Health hybrid
   - White card + accent border-left for today's lesson
   - GitHub-style 30-day grid
   - Subtle stat row
   - Minimal action cards
   ═════════════════════════════════════════════════════════════ */
.home-clean {
  padding: 20px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.home-clean__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.home-clean__greeting {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.home-clean__sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.home-clean__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ink-6);
  color: var(--ink-2);
  display: grid; place-items: center;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid var(--ink-5);
}
.home-clean__avatar:hover { text-decoration: none; }

/* Today's lesson — clean white card with accent border-left */
.home-clean__lesson {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: 16px;
  align-items: center;
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: 12px;
  padding: 16px 16px 16px 0;
  color: inherit;
  text-decoration: none;
  transition: background 0.12s ease;
}
.home-clean__lesson:hover { background: var(--ink-6); text-decoration: none; }
.home-clean__lesson-bar {
  width: 4px;
  height: 100%;
  min-height: 60px;
  background: var(--accent);
  border-radius: 0 4px 4px 0;
}
.home-clean__lesson-body { min-width: 0; }
.home-clean__lesson-eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.home-clean__lesson-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 4px 0 6px;
}
.home-clean__lesson-meta {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
}
.home-clean__lesson-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  margin-right: 12px;
}

.home-clean__exam-locked {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--warn-soft);
  color: var(--warn);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  margin-top: -16px;
}

/* Section heads */
.home-clean__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home-clean__section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.home-clean__section-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.home-clean__section-meta { font-size: 11px; color: var(--ink-3); font-weight: 500; }
.home-clean__progress-label { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.home-clean__progress-label strong { color: var(--ink); font-weight: 700; }

/* 30-day grid */
.home-clean__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.dg-cell {
  aspect-ratio: 1;
  border: 1px solid var(--ink-5);
  background: var(--screen);
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--ink-3);
  text-decoration: none;
  transition: transform 0.12s ease, border-color 0.12s ease;
  font-variant-numeric: tabular-nums;
}
.dg-cell:hover { transform: scale(1.06); text-decoration: none; }
.dg-cell.is-done { background: var(--accent); color: #fff; border-color: var(--accent); }
.dg-cell.is-today { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); border-width: 2px; font-weight: 700; }
.dg-cell.is-locked { color: var(--ink-4); border-color: var(--ink-5); }
.dg-cell.is-quiz { border-style: dashed; color: var(--ink-2); }
.dg-cell.is-exam { border-color: var(--accent); border-width: 2px; color: var(--accent); border-style: dashed; }

.home-clean__legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 10px;
  color: var(--ink-3);
}
.home-clean__legend span { display: inline-flex; align-items: center; gap: 4px; }
.dg-key {
  width: 10px; height: 10px;
  border-radius: 2px;
  display: inline-block;
  border: 1px solid var(--ink-5);
}
.dg-key--done { background: var(--accent); border-color: var(--accent); }
.dg-key--today { background: var(--accent-soft); border-color: var(--accent); }
.dg-key--quiz { border-style: dashed; }
.dg-key--exam { border-color: var(--accent); border-style: dashed; }
.dg-key--locked { background: var(--ink-5); }

/* Stats row */
.home-clean__stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 14px 0;
  border-top: 1px solid var(--ink-5);
  border-bottom: 1px solid var(--ink-5);
}
.home-clean__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 8px;
  border-right: 1px solid var(--ink-5);
}
.home-clean__stat:last-child { border-right: none; }
.home-clean__stat-num {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.home-clean__stat-num span { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.home-clean__stat-label {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 6px;
  letter-spacing: 0.02em;
}

/* Action cards */
.home-clean__actions { display: flex; flex-direction: column; gap: 6px; }
.home-clean__action {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.home-clean__action:hover { background: var(--ink-6); text-decoration: none; }
.home-clean__action-icon { width: 28px; height: 28px; border-radius: 6px; background: var(--ink-6); color: var(--ink-2); display: grid; place-items: center; }
.home-clean__action-icon--live { background: var(--accent); color: #fff; }
.home-clean__rec-dot {
  width: 8px; height: 8px;
  background: #fff;
  border-radius: 50%;
  animation: pulse 1.6s ease-in-out infinite;
}
.home-clean__action-title { font-weight: 600; font-size: 13px; }
.home-clean__action-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.home-clean__action--done { background: var(--ok-soft); border-color: transparent; }
.home-clean__action--active { background: var(--accent-soft); border-color: var(--accent); }
.home-clean__stop {
  background: var(--err);
  color: #fff;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
}

/* Up next rows */
.home-clean__next-list { display: flex; flex-direction: column; }
.home-clean__next-row {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid var(--ink-5);
  color: inherit;
  text-decoration: none;
}
.home-clean__next-row:last-child { border-bottom: none; }
.home-clean__next-row:hover { text-decoration: none; background: var(--ink-6); }
.home-clean__next-row.is-locked { color: var(--ink-3); cursor: default; }
.home-clean__next-row.is-locked:hover { background: none; }
.home-clean__next-day {
  width: 34px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.home-clean__next-row:not(.is-locked) .home-clean__next-day { color: var(--ink); }
.home-clean__next-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-clean__next-title { font-size: 13px; font-weight: 500; line-height: 1.35; }
.home-clean__next-tag {
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.home-clean__next-tag--quiz { color: var(--warn); }
.home-clean__next-tag--exam { color: var(--accent); }


/* ═════════════════════════════════════════════════════════════
   INTERN HOME — Apple Education style (option A) — legacy
   Big hero card · Fitness-style progress ring · action cards
   ═════════════════════════════════════════════════════════════ */
.home-edu {
  padding: 20px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 100%);
}
.home-edu__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.home-edu__greeting {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.home-edu__sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.home-edu__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid rgba(0,113,227,0.18);
}
.home-edu__avatar:hover { text-decoration: none; }

/* ─── HERO card (big, beautiful, Apple Books-style) ─── */
.home-edu__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 22px 22px;
  background: var(--grad-hero);
  border-radius: var(--radius-xxl);
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 180px;
}
.home-edu__hero:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); text-decoration: none; }
.home-edu__hero.is-exam {
  background: var(--grad-hero-accent);
  color: #fff;
}
.home-edu__hero.is-quiz {
  background: linear-gradient(135deg, #fbf0dd 0%, #f7f3eb 100%);
}
.home-edu__hero-orb {
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
  pointer-events: none;
}
.home-edu__hero.is-exam .home-edu__hero-orb { background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%); }
.home-edu__hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.10em;
  font-weight: 700;
  color: var(--accent);
  position: relative;
  z-index: 1;
}
.home-edu__hero.is-exam .home-edu__hero-eyebrow { color: rgba(255,255,255,0.85); }
.home-edu__hero.is-quiz .home-edu__hero-eyebrow { color: var(--warn); }
.home-edu__hero-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 8px 0 12px;
  position: relative;
  z-index: 1;
}
.home-edu__hero-meta {
  font-size: 12px;
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 18px;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}
.home-edu__hero.is-exam .home-edu__hero-meta { color: rgba(255,255,255,0.85); }
.home-edu__hero-dot { color: var(--ink-4); }
.home-edu__hero.is-exam .home-edu__hero-dot { color: rgba(255,255,255,0.5); }
.home-edu__hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  align-self: flex-start;
  position: relative;
  z-index: 1;
  margin-top: auto;
}
.home-edu__hero.is-exam .home-edu__hero-cta { background: #fff; color: var(--accent); }

/* ─── Stats row — Apple Fitness style ─── */
.home-edu__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.home-edu__ring-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  background: var(--screen);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-1);
}
.home-edu__ring {
  position: relative;
  width: 100px; height: 100px;
}
.home-edu__ring svg { display: block; }
.home-edu__ring-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.home-edu__ring-pct {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  font-family: var(--font-mono);
}
.home-edu__ring-pct span { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.home-edu__ring-sub {
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 4px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.home-edu__stat-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--ink-3);
}
.home-edu__stat-detail { font-size: 12px; color: var(--ink-2); margin-top: 4px; line-height: 1.4; }

.home-edu__mini-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.home-edu__mini {
  padding: 14px 16px;
  background: var(--screen);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.home-edu__mini-num {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  font-family: var(--font-mono);
  margin-bottom: 6px;
}
.home-edu__mini-num span { font-size: 13px; font-weight: 600; color: var(--ink-3); }

/* ─── Sections ─── */
.home-edu__section-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 12px;
}
.home-edu__section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.home-edu__section-head .home-edu__section-title { margin: 0; }
.home-edu__section-meta {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ─── Action cards ─── */
.home-edu__actions { display: flex; flex-direction: column; gap: 10px; }
.home-edu__action-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--screen);
  border-radius: var(--radius);
  border: 0;
  box-shadow: var(--shadow-1);
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-ui);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.home-edu__action-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); text-decoration: none; }
.home-edu__action-card--done { background: var(--ok-soft); box-shadow: none; }
.home-edu__action-card--active { background: var(--accent-soft); box-shadow: none; }
.home-edu__action-icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
}
.home-edu__action-icon--blue { background: var(--accent-soft); color: var(--accent); }
.home-edu__action-icon--ok { background: rgba(19,115,51,0.14); color: var(--ok); }
.home-edu__action-icon--live { background: var(--accent); color: #fff; }
.home-edu__rec-dot {
  width: 10px; height: 10px;
  background: #fff;
  border-radius: 50%;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
.home-edu__action-title { font-weight: 600; font-size: 14px; color: var(--ink); }
.home-edu__action-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.home-edu__stop-pill {
  background: var(--err);
  color: #fff;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
}

/* ─── Journey card ─── */
.home-edu__journey-card {
  background: var(--screen);
  border-radius: var(--radius-xl);
  padding: 18px 14px;
  box-shadow: var(--shadow-1);
}
.home-edu__journey-card svg.day-snake { display: block; width: 100%; max-width: 100%; }
.home-edu__journey-foot {
  display: flex;
  justify-content: space-between;
  padding: 12px 4px 0;
  border-top: 1px solid var(--ink-5);
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-2);
}
.home-edu__journey-foot strong { color: var(--ink); font-weight: 700; }

/* ─── Up next cards ─── */
.home-edu__next-list { display: flex; flex-direction: column; gap: 10px; }
.home-edu__next-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px 14px 14px;
  background: var(--screen);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.home-edu__next-card:hover { transform: translateY(-1px); text-decoration: none; box-shadow: var(--shadow-2); }
.home-edu__next-card.is-locked { opacity: 0.7; cursor: default; box-shadow: none; background: var(--paper-2); }
.home-edu__next-card.is-locked:hover { transform: none; }
.home-edu__next-day {
  width: 56px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius);
  padding: 8px 0;
  text-align: center;
  font-weight: 700;
}
.home-edu__next-card.is-locked .home-edu__next-day { background: var(--ink-5); color: var(--ink-3); }
.home-edu__next-day-num { font-size: 18px; font-family: var(--font-mono); letter-spacing: -0.01em; line-height: 1; }
.home-edu__next-day-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; opacity: 0.8; }
.home-edu__next-title { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.home-edu__next-tag-row { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.home-edu__next-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--ink-3);
}
.home-edu__next-tag--quiz { color: var(--warn); }
.home-edu__next-tag--exam { color: var(--accent); }
.home-edu__next-locked {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
}

/* ─── Intern Home v2 — editorial / Stripe-style ─────────────── */
.home-v2 { padding: 20px 18px 20px; display: flex; flex-direction: column; gap: 28px; }
.home-v2__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.home-v2__brand {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.home-v2__day {
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 500;
}
.home-v2__day span { color: var(--ink-4); }

.home-v2__hero { display: flex; flex-direction: column; gap: 6px; }
.home-v2__lesson-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
  margin: 4px 0 0;
}
.home-v2__meta {
  font-size: 12px;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.5;
}
.home-v2__cta {
  margin-top: 14px;
  align-self: flex-start;
  padding: 10px 18px;
}

.home-v2__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink-5);
  border-bottom: 1px solid var(--ink-5);
  padding: 16px 0;
}
.home-v2__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 8px;
  border-right: 1px solid var(--ink-5);
}
.home-v2__stat:last-child { border-right: none; }
.home-v2__stat-num {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.home-v2__stat-num span { font-size: 13px; font-weight: 500; color: var(--ink-3); }

.home-v2__row { display: flex; flex-direction: column; gap: 6px; }
.home-v2__action {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: 10px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: var(--font-ui);
}
.home-v2__action:hover { background: var(--ink-6); text-decoration: none; }
.home-v2__action svg { color: var(--ink-3); }
.home-v2__action--active { border-color: var(--accent); }
.home-v2__action--active svg:first-child { color: var(--accent); }
.home-v2__action--done { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.home-v2__action--done svg { color: var(--ok); }

.home-v2__section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.home-v2__section-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0;
}

.home-v2__journey { display: flex; flex-direction: column; }
.home-v2__snake {
  padding: 14px 8px;
  background: var(--soft-fill);
  border-radius: 12px;
}
.home-v2__snake svg.day-snake { display: block; width: 100%; }

.home-v2__next-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink-5);
}
.home-v2__next-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 14px 4px;
  border-bottom: 1px solid var(--ink-5);
  text-decoration: none;
  color: var(--ink);
}
.home-v2__next-row:hover { text-decoration: none; background: var(--ink-6); }
.home-v2__next-row.is-locked { color: var(--ink-3); cursor: default; }
.home-v2__next-row.is-locked:hover { background: none; }
.home-v2__next-day {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0;
}
.home-v2__next-row:not(.is-locked) .home-v2__next-day { color: var(--ink); }
.home-v2__next-title { font-size: 14px; line-height: 1.35; min-width: 0; }
.home-v2__next-tag {
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.home-v2__next-chev svg { color: var(--ink-4); }

/* Layout wrapper: drop the giant 100px tabbar gutter, use a tighter one. */
.layout-phone { padding-bottom: 88px; background: var(--paper); }
.layout-phone .home-v2 { padding-bottom: 0; }

/* ─── Intern Home (variant B — Snake / journey trail) ─────────── */
/* Generic phone-screen body — matches wireframes' .screen-body */
.screen-body { padding: var(--space-4) var(--space-4) var(--space-2); display: flex; flex-direction: column; gap: 14px; }
.screen-h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.screen-h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.screen-h3 { font-size: 12px; font-weight: 600; color: var(--ink-2); letter-spacing: 0.04em; text-transform: uppercase; }
.screen-p  { font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.screen-cap{ font-size: 11px; color: var(--ink-3); }

.home-snake { background: var(--paper); min-height: 100dvh; }
.home-snake__head { display: flex; justify-content: space-between; align-items: center; }
.home-snake__pill { padding: 3px 12px; font-size: 11px; font-weight: 600; color: var(--ink); }

.home-snake__hero { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.home-snake__phrase {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
  margin-top: 8px;
}
.home-snake__phrase .squiggle { padding-bottom: 8px; background-size: 80px 6px; }
.home-snake__blurb { font-size: 13px; color: var(--ink-2); margin-top: 2px; line-height: 1.5; }

/* Bento grid layout — modern dashboard look */
.home-bento { padding: var(--space-5) var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: 16px; }
.home-bento__head { display: flex; justify-content: space-between; align-items: center; }
.home-bento__hero { display: flex; flex-direction: column; gap: 4px; }

.home-bento__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.bento {
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.2s ease;
}
.bento:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.bento__icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); }
.bento__icon--warm { color: var(--warn); background: var(--warn-soft); }
.bento__icon--ok { color: var(--ok); background: var(--ok-soft); }
.bento__icon--accent { color: var(--accent); background: var(--accent-soft); }
.bento__stat { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.bento__stat-sub { font-size: 14px; font-weight: 500; color: var(--ink-3); }
.bento__stat-md { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.2; }

.bento--today {
  grid-column: 1 / -1;
  background: var(--grad-accent);
  border-color: transparent;
  border-radius: var(--radius-xl);
  color: #fff;
  text-decoration: none;
  padding: 22px 22px 18px;
  box-shadow: 0 10px 30px rgba(0, 113, 227, 0.28),
              0 2px 6px rgba(0, 88, 180, 0.18);
}
.bento--today::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(255,255,255,0.20) 0%, transparent 50%);
  pointer-events: none;
}
.bento--today:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 113, 227, 0.36),
              0 4px 10px rgba(0, 88, 180, 0.22);
  text-decoration: none;
}
.bento--today .ui-tiny { color: rgba(255, 255, 255, 0.85); }
.bento--today .home-snake__today-title { color: #fff; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-top: 4px; }
.bento--today .screen-cap { color: rgba(255, 255, 255, 0.82); }
.home-bento__today-cta {
  background: #fff !important;
  color: var(--accent) !important;
  border-color: #fff !important;
  font-weight: 700;
  margin-top: 8px;
  width: fit-content;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

.bento--snake {
  grid-column: 1 / -1;
  background: var(--paper-2);
  border-color: var(--ink-5);
  padding: 14px 12px 10px;
  display: flex;
  justify-content: center;
}
.bento--snake svg.day-snake { display: block; width: 100%; max-width: 100%; }

.bento--ring { align-items: center; text-align: center; }
.bento__ring {
  --size: 80px;
  --pct: 0;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--ink-5) 0);
  display: grid; place-items: center;
}
.bento__ring-inner {
  width: calc(var(--size) - 12px);
  height: calc(var(--size) - 12px);
  background: var(--screen);
  border-radius: 50%;
  display: grid; place-items: center;
  text-align: center;
}
.bento__ring-pct { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.bento__ring-label { font-size: 10px; color: var(--ink-3); margin-top: 2px; font-weight: 600; }

.home-bento__next { display: flex; flex-direction: column; gap: 6px; }

/* Legacy snake map — kept for fallback */
.home-snake__map { padding: 14px 12px 8px; display: flex; justify-content: center; }
.home-snake__map svg.day-snake { display: block; max-width: 100%; }
.home-snake__map svg.day-snake a { cursor: pointer; }
.home-snake__map svg.day-snake a:hover circle { stroke-width: 2.5; }

.home-snake__today {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 22px 18px;
  background: var(--grad-accent);
  border-color: transparent;
  border-radius: var(--radius-xl);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 113, 227, 0.28),
              0 2px 6px rgba(0, 88, 180, 0.18);
  transition: transform 0.2s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}
.home-snake__today::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,0.18) 0%, transparent 50%);
  pointer-events: none;
}
.home-snake__today:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0, 113, 227, 0.35),
              0 4px 10px rgba(0, 88, 180, 0.2);
  text-decoration: none;
}
.home-snake__today:active { transform: translateY(0); }
.home-snake__today .ui-tiny { color: rgba(255, 255, 255, 0.85); }
.home-snake__today-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 4px;
  line-height: 1.2;
  color: #fff;
}
.home-snake__today .screen-cap { color: rgba(255, 255, 255, 0.8); }
.home-snake__today .wbtn {
  pointer-events: none;
  background: #fff !important;
  color: var(--accent) !important;
  border-color: #fff !important;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.home-snake__next { display: flex; flex-direction: column; gap: 6px; }

.up-next {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px dashed var(--ink-4);
  text-decoration: none;
  color: inherit;
}
.up-next:hover { text-decoration: none; background: var(--paper-2); }
.up-next.is-locked { color: var(--ink-3); cursor: default; }
.up-next.is-locked:hover { background: none; }
.up-next__badge {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600;
  color: var(--ink-2);
}
.up-next.is-locked .up-next__badge { color: var(--ink-3); border-color: var(--ink-4); }
.up-next__body { min-width: 0; }
.up-next__title { font-size: 13px; line-height: 1.3; color: var(--ink); }
.up-next.is-locked .up-next__title { color: var(--ink-3); }
.up-next__tag { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.up-next__chev { font-size: 16px; color: var(--ink-3); }

.home-snake__progress { display: flex; flex-direction: column; gap: 6px; padding: 6px 2px 4px; }
.home-snake__progress-bar { height: 4px; background: var(--ink-5); border-radius: var(--radius-pill); overflow: hidden; }
.home-snake__progress-bar > span { display: block; height: 100%; background: var(--accent); transition: width 0.4s ease; }

/* ─── Intern Home (legacy variant A — kept for the old route) ─────────── */
.home { padding: var(--space-5) var(--space-4) var(--space-2); display: grid; gap: var(--space-5); }
.home__head { padding: 0 var(--space-1); }
.home__hi { font-size: var(--fs-h2); font-weight: 700; }
.home__sub { color: var(--ink-3); font-size: var(--fs-caption); margin-top: 2px; }

.home__hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: center;
}
.home__hero-kicker { font-size: var(--fs-tiny); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.home__hero-title  { font-size: var(--fs-h3); font-weight: 600; margin: 4px 0 var(--space-3); }
.home__hero .btn   { width: fit-content; }

.home__weeks { display: grid; gap: var(--space-2); }
.week-strip { padding: var(--space-3); background: var(--screen); border: 1px solid var(--ink-5); border-radius: var(--radius); }
.week-strip__head { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2); align-items: center; }
.week-strip__num { font-weight: 600; font-size: var(--fs-caption); }
.week-strip__theme { color: var(--ink-3); font-size: var(--fs-caption); }
.week-strip__count { color: var(--ink-3); font-size: var(--fs-caption); }
.week-strip__bar { margin-top: 8px; height: 4px; background: var(--ink-5); border-radius: var(--radius-pill); overflow: hidden; }
.week-strip__bar > span { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width 0.3s ease; }

.home__section-title { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.trail-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
  justify-items: center;
}
.trail-grid > [role="listitem"] { width: 100%; display: grid; justify-items: center; }
.trail-grid .day-cell { width: 44px; height: 44px; }
.home__legend { color: var(--ink-3); font-size: var(--fs-tiny); margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.home__legend .day-cell { display: inline-grid; }

.next-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border-bottom: 1px solid var(--ink-5);
}
.next-row:last-child { border-bottom: none; }
.next-row__day { font-weight: 600; color: var(--ink); font-size: var(--fs-caption); }
.next-row__title { color: var(--ink-2); font-size: var(--fs-body); }

/* ─── Intern Tasks ─────────────────────────────────────────────── */
.tasks { padding: var(--space-5) var(--space-4) var(--space-2); display: grid; gap: var(--space-4); }
.tasks__head h1 { margin-bottom: 2px; }
.task-group { background: var(--screen); border: 1px solid var(--ink-5); border-radius: var(--radius-lg); overflow: hidden; }
.task-group__head { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-2); align-items: baseline; padding: var(--space-4) var(--space-4) var(--space-2); }
.task-group__title { font-size: var(--fs-h3); }
.task-group__byline { color: var(--ink-3); font-size: var(--fs-caption); }
.task-group__count { color: var(--ink-3); font-size: var(--fs-caption); font-weight: 600; }
.task-list { list-style: none; padding: 0; margin: 0; }
.task-row { border-top: 1px solid var(--ink-5); }
.task-row label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
}
.task-row input { width: 20px; height: 20px; }
.task-row__text { line-height: var(--lh-my); }
.task-row input:checked + .task-row__text { color: var(--ink-3); text-decoration: line-through; }

/* ─── Intern Profile ───────────────────────────────────────────── */
.profile { padding: var(--space-5) var(--space-4) var(--space-2); display: grid; gap: var(--space-4); }
.profile__name { font-size: var(--fs-h2); font-weight: 700; }
.profile__role { color: var(--ink-3); font-size: var(--fs-caption); margin-top: 2px; }
.profile__email { color: var(--ink-3); font-size: var(--fs-caption); margin-top: var(--space-3); }
.profile__row { display: flex; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--ink-5); font-size: var(--fs-caption); }
.profile__row:last-child { border-bottom: none; }
.profile__row > :first-child { color: var(--ink-3); }

/* ─── Lesson viewer (wireframe LessonB_Outline) ───────────── */
.lesson { padding: 0 0 var(--space-2); display: block; }
.lesson-progress {
  height: 4px;
  background: var(--ink-4);
  position: sticky;
  top: 0;
  z-index: 10;
}
.lesson-progress > span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}
.lesson__body-pad { padding: 12px 14px 80px; display: flex; flex-direction: column; gap: 14px; }
.lesson__top { display: flex; justify-content: space-between; align-items: center; }
.lesson__back { text-decoration: none; color: var(--ink-2); }
.lesson__back:hover { color: var(--ink); text-decoration: none; }
.lesson__title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-top: 2px;
}
.lesson__outline-card { padding: 12px; display: flex; flex-direction: column; gap: 6px; border-radius: 12px; }
.lesson__outline-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  cursor: pointer;
  border-radius: 6px;
}
.lesson__outline-row:hover { background: rgba(255, 255, 255, 0.5); }
.lesson__outline-dot {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.lesson__outline-text { font-size: 12px; line-height: 1.4; color: var(--ink-2); }
.lesson__outline-text.is-active { color: var(--ink); font-weight: 600; }
.lesson__section { margin-top: 6px; }
.lesson__section-body { color: var(--ink-2); font-size: 13px; line-height: 1.6; }
.lesson__section-body p { margin: 0 0 12px; }
.lesson__section-body strong { color: var(--ink); }
.lesson__section-body ul { margin: 0 0 12px; padding-left: 18px; }
.lesson__section-body li { margin-bottom: 4px; }
.lesson__section-body h3 { font-size: 14px; font-weight: 600; color: var(--ink); margin: 12px 0 6px; }
.lesson__section-body hr { border: 0; border-top: 1px solid var(--ink-4); margin: 12px 0; }
.lesson__section-body table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 12px; }
.lesson__section-body th, .lesson__section-body td { border: 1px solid var(--ink-4); padding: 6px 8px; text-align: left; }
.lesson__section-body th { background: var(--paper-2); font-weight: 600; color: var(--ink); }
.lesson__section-body .img-slot {
  background-image: repeating-linear-gradient(135deg, var(--ink-4) 0 1px, transparent 1px 9px);
  border: 1.25px solid var(--ink-4);
  border-radius: 10px;
  padding: 24px 16px;
  margin: 8px 0;
  text-align: center;
  color: var(--ink-3);
  font-size: 12px;
}
.lesson__section-body blockquote { border-left: 3px solid var(--ink-4); padding-left: 12px; color: var(--ink-3); margin: 0 0 12px; font-style: italic; }
.lesson__nav { margin-top: 12px; }
.lesson__nav-btn { flex: 1; justify-content: center; }
.lesson__nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* LEGACY lesson styles below — kept for old route references */
.lesson__head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--ink-5);
}
.lesson__head .btn { width: 36px; height: 36px; padding: 0; }
.lesson__head-kicker { font-size: var(--fs-tiny); color: var(--ink-3); }
.lesson__head-progress { margin-top: 4px; height: 3px; background: var(--ink-5); border-radius: var(--radius-pill); overflow: hidden; }
.lesson__head-progress > span { display: block; height: 100%; background: var(--accent); transition: width 0.3s ease; }

.lesson__title-wrap { padding: var(--space-5) var(--space-5) var(--space-3); }
.lesson__title { font-size: var(--fs-h1); }
.lesson__meta { color: var(--ink-3); font-size: var(--fs-caption); margin-top: 4px; }

.lesson__outline {
  position: sticky;
  top: 56px;
  z-index: 9;
  background: var(--paper);
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  overflow-x: auto;
  border-bottom: 1px solid var(--ink-5);
  scrollbar-width: none;
}
.lesson__outline::-webkit-scrollbar { display: none; }
.lesson__outline-item {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 6px;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--screen);
  border: 1px solid var(--ink-5);
  font-size: var(--fs-caption);
  cursor: pointer;
  color: var(--ink-2);
  text-decoration: none;
}
.lesson__outline-num {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  background: var(--paper-2);
  color: var(--ink-2);
  border-radius: 50%;
  font-size: var(--fs-tiny);
  font-weight: 600;
}
.lesson__outline-title { white-space: nowrap; }

.lesson__body { padding: var(--space-4) var(--space-5) var(--space-6); display: grid; gap: var(--space-6); }
.lesson__section { scroll-margin-top: 120px; }
.lesson__h2 { font-size: var(--fs-h2); margin-bottom: var(--space-3); }
.lesson__h3 { font-size: var(--fs-h3); margin: var(--space-4) 0 var(--space-2); color: var(--ink-2); }
.lesson__p { margin-bottom: var(--space-3); color: var(--ink-2); }
.lesson__list { padding-left: 1.2em; }
.lesson__list li { margin-bottom: var(--space-2); line-height: var(--lh-my); color: var(--ink-2); }
.lesson__quote { border-left: 3px solid var(--ink-4); padding-left: var(--space-3); color: var(--ink-2); margin: var(--space-3) 0; }
.lesson__table-wrap { overflow-x: auto; }
.lesson__table { width: 100%; border-collapse: collapse; font-size: var(--fs-caption); }
.lesson__table th, .lesson__table td { border: 1px solid var(--ink-5); padding: var(--space-2) var(--space-3); text-align: left; }
.lesson__table th { background: var(--paper-2); }
.img-slot--inline { display: inline-flex; height: 24px; min-height: auto; border: 1px solid var(--ink-4); border-radius: 6px; padding: 2px 8px; background: var(--paper-2); font-size: 12px; }

.lesson__foot { padding: var(--space-5); display: grid; gap: var(--space-2); }

/* ─── Quiz (wireframe QuizA_OnePerScreen) ─────────────────── */
.quiz-screen { padding: 0 0 80px; display: block; }
.quiz-screen__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 14px; min-height: 80vh; }
.quiz-screen__q { font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }
.quiz-screen__opts { display: flex; flex-direction: column; gap: 8px; }
.quiz-screen__opt {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--screen);
  border: 1.25px solid var(--ink-4);
  cursor: pointer;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.quiz-screen__opt:hover { border-color: var(--ink-3); }
.quiz-screen__opt.is-selected {
  background: var(--paper-2);
  border-color: var(--ink);
}
.quiz-screen__opt-letter {
  width: 28px; height: 28px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 12px;
  font-weight: 700;
  border: 1.25px solid var(--ink-4);
  background: var(--screen);
  color: var(--ink-2);
}
.quiz-screen__opt.is-selected .quiz-screen__opt-letter {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.quiz-screen__opt-text { font-size: 13px; line-height: 1.5; }
.quiz-screen__nav { margin-top: auto; padding-top: 16px; }

/* Quiz results */
.quiz-results { padding: 12px 14px; display: flex; flex-direction: column; gap: 14px; }
.quiz-results__hero {
  padding: 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  border-radius: 16px;
  border-color: var(--ink-4);
}
.quiz-results__ring {
  --size: 86px;
  --pct: 0;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--ink-4) 0);
  display: grid; place-items: center;
}
.quiz-results__ring-inner {
  width: calc(var(--size) - 12px);
  height: calc(var(--size) - 12px);
  background: var(--screen);
  border-radius: 50%;
  display: grid; place-items: center;
  text-align: center;
}
.quiz-results__pct { font-size: 20px; font-weight: 700; line-height: 1; }
.quiz-results__verdict { min-width: 0; }
.quiz-results__row {
  padding: 10px 12px;
  border-radius: 10px;
  border-color: var(--ink-4);
}
.quiz-results__row.is-correct { border-left: 3px solid var(--ok); }
.quiz-results__row.is-wrong { border-left: 3px solid var(--err); }
.quiz-results__icon { font-weight: 700; font-size: 14px; }

/* Legacy quiz styles (kept for older route refs) */
.quiz__body { padding: var(--space-6) var(--space-5); display: grid; gap: var(--space-5); }
.quiz__q { font-size: var(--fs-h2); line-height: var(--lh-my); }
.quiz__options { display: grid; gap: var(--space-3); }
.quiz__option {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--space-3);
  text-align: left;
  width: 100%;
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  color: var(--ink);
  font: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.quiz__option:hover { border-color: var(--ink-3); }
.quiz__option.is-selected { background: var(--accent-soft); border-color: var(--accent); }
.quiz__option-letter { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); font-weight: 700; }
.quiz__option.is-selected .quiz__option-letter { background: var(--accent); color: #fff; }
.quiz__option-text { line-height: var(--lh-my); align-self: center; }

.quiz__foot {
  position: sticky;
  bottom: 80px;
  background: var(--paper);
  padding: var(--space-3) var(--space-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  border-top: 1px solid var(--ink-5);
}

.quiz-results__hero { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; margin: var(--space-5); }
.quiz-results__verdict p { font-size: var(--fs-caption); }
.quiz-results__list { list-style: none; padding: 0 var(--space-5); margin: 0; display: grid; gap: var(--space-3); }
.quiz-results__row { background: var(--screen); border: 1px solid var(--ink-5); border-radius: var(--radius); padding: var(--space-3) var(--space-4); }
.quiz-results__row.is-correct { border-left: 3px solid var(--ok); }
.quiz-results__row.is-wrong { border-left: 3px solid var(--err); }
.quiz-results__row-q { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-2); line-height: var(--lh-my); }
.quiz-results__icon { font-weight: 700; }
.is-correct .quiz-results__icon { color: var(--ok); }
.is-wrong .quiz-results__icon { color: var(--err); }
.quiz-results__row-fix { margin-top: var(--space-2); padding-left: 28px; font-size: var(--fs-caption); color: var(--ink-2); }

/* ─── Day 30 Exam ──────────────────────────────────────── */
.exam { padding: 0 0 var(--space-2); display: grid; gap: 0; }
.exam__intro { padding: var(--space-6) var(--space-5); display: grid; gap: var(--space-3); }
.exam__dots {
  display: flex;
  gap: 6px;
  padding: var(--space-3) var(--space-5);
  overflow-x: auto;
  scrollbar-width: none;
}
.exam__dots::-webkit-scrollbar { display: none; }
.exam__dot {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--ink-5);
  background: var(--screen);
  color: var(--ink-3);
  font-weight: 600;
  font-size: var(--fs-caption);
  cursor: pointer;
}
.exam__dot.is-done { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-soft); }
.exam__dot.is-active { border-color: var(--accent); color: var(--accent); border-width: 2px; }
.exam__q { padding: var(--space-3) var(--space-5); display: grid; gap: var(--space-3); }
.exam__section-pill { width: fit-content; }
.exam__q-text { font-size: var(--fs-h2); line-height: var(--lh-my); }
.exam__cam {
  margin: 0 var(--space-5);
  position: relative;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.exam__cam-video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.exam__cam-rec {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: var(--fs-caption);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  display: flex; align-items: center;
}
.exam__cam-meta {
  position: absolute;
  bottom: 12px; left: 12px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: var(--fs-tiny);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}
.exam__controls {
  padding: var(--space-4) var(--space-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.exam__controls .btn { width: 100%; }
.exam__controls:has(.btn:only-child) { grid-template-columns: 1fr; }

/* Setup diagnostics banner (admin) — surfaces store errors + missing data */
.diag-banner {
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  border-left-width: 4px;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  margin-bottom: var(--space-5);
  color: #7a4a00;
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
}
/* Only the FIRST strong (Setup checklist title) is a block. Inline strongs
   inside list items stay inline so "+ Add intern" doesn't wrap to a new line. */
.diag-banner > strong { display: block; margin-bottom: var(--space-2); color: var(--warn); }
.diag-banner li strong { color: inherit; }
.diag-banner ul { margin: 0; padding-left: 1.2em; }
.diag-banner li { margin-bottom: 6px; }
.diag-banner code { background: rgba(0,0,0,0.06); padding: 1px 6px; border-radius: 4px; font-size: 12px; }
.diag-banner em { color: var(--ink-3); }
.diag-banner__action { margin-top: var(--space-3); display: flex; align-items: center; flex-wrap: wrap; }

/* ─── Admin (shared) — wireframe RosterA_Table style ───────── */
.admin__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.admin__title { font-size: 36px; font-weight: 800; letter-spacing: -0.035em; margin: 4px 0 6px; }
.admin__sub { color: var(--ink-3); font-size: 13px; margin: 0; }
.admin__head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin__count-pill { padding: 3px 12px; font-size: 11px; font-weight: 500; color: var(--ink); background: var(--screen); border-color: var(--ink-4); }

.admin__tabs-row {
  display: flex;
  gap: 0;
  align-items: center;
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--ink-4);
  padding-bottom: 0;
}
.admin__tab {
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid transparent;
  border-radius: 0;
  padding: 8px 14px;
  margin-bottom: -1px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  transition: color 0.15s, border-color 0.15s;
}
.admin__tab:hover { color: var(--ink-2); }
.admin__tab.is-active { border-bottom-color: var(--ink); color: var(--ink); font-weight: 600; }
.admin__tabs-spacer { flex: 1; }
.admin__search { max-width: 240px; height: 32px; font-size: 12px; padding: 0 12px; }

.admin__table-wrap { overflow-x: auto; border-radius: 12px; border: 1.25px solid var(--ink-4); background: var(--screen); }
.admin__table { width: 100%; border-collapse: collapse; }
.admin__table th, .admin__table td { padding: 12px 16px; text-align: left; vertical-align: middle; font-size: 13px; }
.admin__table th {
  background: var(--paper-2);
  font-size: 10px;
  color: var(--ink-3);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink-4);
}
.admin__table tbody tr { border-bottom: 1px solid var(--ink-4); }
.admin__table tbody tr:nth-child(even) { background: rgba(245, 245, 247, 0.4); }
.admin__table tbody tr:last-child { border-bottom: none; }
.admin__table tbody tr:hover { background: var(--paper); }
.admin__inline-table { width: 100%; border-collapse: collapse; font-size: var(--fs-caption); }
.admin__inline-table th, .admin__inline-table td { padding: var(--space-2) 0; text-align: left; border-bottom: 1px solid var(--ink-5); }
.admin__inline-table th { color: var(--ink-3); font-weight: 600; }

.admin__progress { display: flex; align-items: center; gap: var(--space-2); min-width: 120px; }
.admin__progress-bar { flex: 1; height: 4px; background: var(--ink-5); border-radius: var(--radius-pill); overflow: hidden; min-width: 60px; }
.admin__progress-bar > span { display: block; height: 100%; background: var(--accent); transition: width 0.3s ease; }
.admin__progress-pct { font-size: var(--fs-caption); color: var(--ink-2); width: 36px; }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}
.modal {
  background: var(--screen);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  width: 100%;
  max-width: 560px;
  box-shadow: var(--shadow-2);
}
.modal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.modal__head h2 { margin: 0; }
.modal__foot { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }
.modal__err { color: var(--err); font-size: var(--fs-caption); margin-top: var(--space-3); min-height: 1.2em; }
.form-grid { display: grid; gap: var(--space-3); }
.form-grid--2col { grid-template-columns: 1fr 1fr; }
.form-grid.form-grid--2col, .modal .form-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .form-grid--2col, .modal .form-grid { grid-template-columns: 1fr; } }

/* Detail (side-by-side) */
.detail-grid {
  display: grid;
  grid-template-columns: 44% 56%;
  gap: var(--space-5);
}
@media (max-width: 1000px) {
  .detail-grid { grid-template-columns: 1fr; }
}
.detail-days {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  justify-items: center;
}
.detail-days .day-cell { width: 100%; max-width: 40px; height: 36px; font-size: 12px; }
@media (max-width: 720px) { .detail-days { grid-template-columns: repeat(6, 1fr); } }

/* Playback */
.playback { display: grid; gap: var(--space-3); }
.playback__video { width: 100%; max-height: 480px; background: #000; border-radius: var(--radius); }
.playback__caption .pill { background: var(--paper-2); }
.playback__markers { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.playback__marker {
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: var(--radius);
  padding: var(--space-2);
  cursor: pointer;
  min-width: 84px;
  text-align: left;
  font-size: var(--fs-caption);
}
.playback__marker.is-active { border-color: var(--accent); border-width: 2px; }
.playback__marker span { display: block; font-weight: 600; }
.playback__marker small { color: var(--ink-3); }

.grade-picker { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-2); }
.grade-btn {
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: var(--radius);
  padding: var(--space-3);
  cursor: pointer;
  font-weight: 600;
  text-align: center;
  color: var(--ink);
  font: inherit;
}
.grade-btn:hover { border-color: var(--ink-3); }
.grade-btn.pass.is-active { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.grade-btn.borderline.is-active { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.grade-btn.fail.is-active { background: var(--err-soft); color: var(--err); border-color: var(--err); }

/* Curriculum editor */
.curriculum-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-5);
}
@media (max-width: 1000px) {
  .curriculum-grid { grid-template-columns: 1fr; }
}
.curriculum-nav {
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  max-height: 70vh;
  overflow-y: auto;
}
.curriculum-nav__item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: var(--space-2);
  align-items: center;
  background: none;
  border: 0;
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--ink);
  font: inherit;
}
.curriculum-nav__item:hover { background: var(--paper); }
.curriculum-nav__item.is-active { background: var(--accent-soft); color: var(--accent-ink); }
.curriculum-nav__day { font-size: var(--fs-caption); font-weight: 700; }
.curriculum-nav__title { font-size: var(--fs-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.curriculum-nav__kind { font-size: var(--fs-tiny); }

.curriculum-edit {
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.quiz-edit {
  background: var(--paper);
  border: 1px solid var(--ink-5);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

/* ─── Submitted (wireframe SubmittedA_Calm) ────────────────── */
.submitted__body { padding: 32px 22px; display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center; }
.submitted__check {
  width: 96px; height: 96px;
  display: grid; place-items: center;
  font-size: 40px;
  background: var(--screen);
  border-color: var(--ink);
  border-width: 1.5px;
  color: var(--ok);
}
.submitted__heading { gap: 8px; align-items: center; display: flex; flex-direction: column; }
.submitted__title { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.submitted__my { font-style: italic; color: var(--ink-3); max-width: 280px; }
.submitted__card { width: 100%; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; text-align: left; border-color: var(--ink-4); }
.submitted__row { display: flex; justify-content: space-between; align-items: center; }
.submitted__row--grade { padding-top: 8px; border-top: 1px solid var(--ink-4); }
.submitted__cta { margin-top: 6px; width: 100%; justify-content: center; }
.submitted__footer { margin-top: 4px; max-width: 280px; }

/* ─── Intern Tasks (wireframe TasksB_GroupedByMentor) ──────── */
.tasks-screen { padding: 0 0 var(--space-2); display: block; }
.tasks-screen__body { padding: 14px 14px 80px; display: flex; flex-direction: column; gap: 14px; }
.tasks-screen__h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.tasks-screen__group { display: flex; flex-direction: column; gap: 6px; }
.tasks-screen__group-card { padding: 0; border-radius: 10px; border-color: var(--ink-4); overflow: hidden; background: var(--screen); }
.tasks-screen__row { border-bottom: 1px solid var(--ink-4); }
.tasks-screen__row:last-child { border-bottom: none; }
.tasks-screen__label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
}
.tasks-screen__check {
  position: relative;
  width: 18px; height: 18px;
  border: 1.25px solid var(--ink-4);
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: transparent;
  background: var(--screen);
}
.tasks-screen__check input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.tasks-screen__check.is-done { background: var(--ink); border-color: var(--ink); color: #fff; }
.tasks-screen__text { font-size: 13px; color: var(--ink); line-height: 1.5; }
.tasks-screen__text.is-done { color: var(--ink-3); text-decoration: line-through; }
.tasks-screen__empty { padding: 18px; text-align: center; color: var(--ink-2); border-color: var(--ink-4); }
.tasks-screen__footer { margin-top: 4px; }

/* ─── Intern Profile ───────────────────────────────────────── */
.profile-screen { padding: 0 0 var(--space-2); display: block; }
.profile-screen__body { padding: 18px 16px 80px; display: flex; flex-direction: column; gap: 14px; }
.profile-screen__hero {
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border-color: var(--ink-4);
  border-radius: 16px;
  text-align: center;
}
.profile-screen__avatar {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  font-size: 18px; font-weight: 700;
  background: var(--paper-2);
  border-color: var(--ink-4);
  color: var(--ink);
  flex-shrink: 0;
}
.profile-screen__name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin-top: 4px; color: var(--ink); }
.profile-screen__email { word-break: break-all; padding-top: 4px; color: var(--ink-3); }
.profile-screen__facts { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; border-color: var(--ink-4); }
.profile-screen__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.profile-screen__signout { width: 100%; justify-content: center; margin-top: 6px; gap: 8px; }
.profile-screen__theme {
  width: 100%;
  justify-content: space-between;
  margin-top: 6px;
  font-weight: 500;
  color: var(--ink);
}
.profile-screen__theme:hover { background: var(--paper-2); }
.profile-screen__footer { margin-top: 8px; }

/* ─── AI Grade card (admin detail) ───────────────────────── */
.ai-grade-card { border-color: rgba(0, 113, 227, 0.25); background: linear-gradient(180deg, rgba(0, 113, 227, 0.04), transparent); }
.ai-grade__hero { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ink-5); }
.ai-grade__total { text-align: center; padding: 8px 14px; background: var(--accent-soft); border-radius: 16px; min-width: 90px; }
.ai-grade__total-num { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: var(--accent); line-height: 1; }
.ai-grade__total-num span { font-size: 14px; font-weight: 600; margin-left: 2px; }
.ai-grade__sections { display: flex; flex-direction: column; gap: 8px; }
.ai-grade__section-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); margin-bottom: 4px; }
.ai-grade__bar { height: 4px; background: var(--ink-5); border-radius: 99px; overflow: hidden; }
.ai-grade__bar > span { display: block; height: 100%; background: var(--grad-accent); border-radius: 99px; transition: width 0.5s ease; }
.ai-grade__note { font-size: 13px; color: var(--ink-2); margin-top: 8px; line-height: 1.5; }
.ai-grade__note strong { color: var(--ink); }
.admin-settings__hint { font-size: 12px; color: var(--ink-3); margin: 6px 0 0; line-height: 1.5; }
.admin-settings__hint a { color: var(--accent); }

/* ─── Admin tab badge (pending count) ─────────────────────── */
.admin__tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 99px;
  background: var(--err);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

/* ─── Signup form ────────────────────────────────────────── */
.signup__field { margin-bottom: 14px; text-align: left; }
.signup__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.signup__row .signup__field { margin-bottom: 0; }
.signup__footer { margin-top: 14px; text-align: center; font-size: 12px; color: var(--ink-3); }
.signup__footer a { color: var(--accent); font-weight: 600; }

/* ─── Pending screen ─────────────────────────────────────── */
.pending-screen__body { padding: 40px 22px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.pending-screen__icon {
  width: 96px; height: 96px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--ink-5);
  background: var(--screen);
}
.pending-screen__icon.is-pending { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
.pending-screen__icon.is-ok { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }
.pending-screen__icon.is-err { color: var(--err); border-color: var(--err); background: var(--err-soft); }
.pending-screen__title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.pending-screen__body-text { max-width: 320px; line-height: 1.6; }
.pending-screen__card { width: 100%; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; text-align: left; border-color: var(--ink-4); }

/* ─── Clock-in bento tile ─────────────────────────────────── */
.bento--clock { grid-column: 1 / -1; }
.bento__clock-btn { width: 100%; justify-content: center; margin-top: 8px; min-height: 38px; }
.bento--clock-in .bento__stat-md { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--ink); }
.bento--clock-done { background: linear-gradient(180deg, var(--ok-soft) 0%, transparent 70%); }
.bento--journal { text-decoration: none; color: inherit; }
.bento--journal:hover { text-decoration: none; }

/* Tabbar badge */
.tabbar__icon { position: relative; }
.tabbar__badge {
  position: absolute;
  top: -4px; right: -6px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--err);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--paper);
}

/* ─── Inbox screen ──────────────────────────────────────── */
.inbox-screen { padding: 0 0 var(--space-2); }
.inbox-screen__body { padding: 18px 14px; display: flex; flex-direction: column; gap: 14px; }
.inbox-screen__head { display: flex; justify-content: space-between; align-items: baseline; }
.inbox-screen__title { font-size: 28px; font-weight: 800; letter-spacing: -0.025em; margin: 0; }

.inbox-screen__mentor {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  background: var(--screen);
  border-radius: var(--radius-lg);
}
.inbox-screen__mentor:hover { text-decoration: none; transform: translateY(-1px); }
.inbox-screen__mentor-body { min-width: 0; }
.inbox-screen__mentor-name { font-weight: 700; font-size: 15px; color: var(--ink); }
.inbox-screen__mentor-preview { font-size: 12px; color: var(--ink-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-screen__badge {
  min-width: 22px; height: 22px;
  padding: 0 8px;
  background: var(--accent);
  color: #fff;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.inbox-screen__section { display: flex; flex-direction: column; gap: 8px; }
.announcement {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.announcement:hover { transform: translateY(-1px); }
.announcement--urgent { border-left: 3px solid var(--err); }
.announcement--warn   { border-left: 3px solid var(--warn); }
.announcement__head { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.announcement__pill { padding: 2px 8px; font-size: 9px; font-weight: 700; text-transform: uppercase; border-radius: 99px; letter-spacing: 0.05em; }
.pill--info { background: var(--accent-soft); color: var(--accent); }
.pill--warn { background: var(--warn-soft); color: var(--warn); }
.pill--urgent { background: var(--err-soft); color: var(--err); }
.announcement__title { font-weight: 600; font-size: 14px; color: var(--ink); }
.announcement__ago { color: var(--ink-3); font-size: 11px; }
.announcement__body { font-size: 13px; line-height: 1.55; color: var(--ink-2); max-height: 40px; overflow: hidden; transition: max-height 0.3s ease; }
.announcement__body.is-expanded { max-height: 600px; }
.announcement__foot { display: flex; justify-content: space-between; align-items: center; padding-top: 4px; border-top: 1px solid var(--ink-5); margin-top: 4px; }

/* ─── Mentor chat screen ─────────────────────────────────── */
.mentor-screen { padding: 0; display: flex; flex-direction: column; min-height: 100dvh; }
.mentor-screen__head { padding: 14px 14px 8px; display: flex; gap: 12px; align-items: center; border-bottom: 1px solid var(--ink-5); background: var(--paper); }
.mentor-screen__title-block { min-width: 0; }
.mentor-screen__title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.mentor-screen__thread {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mentor-screen__empty { padding: 40px 24px; text-align: center; }
.msg-bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--ink-5);
  background: var(--screen);
}
.msg-bubble--me {
  align-self: flex-end;
  background: var(--grad-accent);
  border-color: transparent;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.msg-bubble--mentor {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.msg-bubble__text { font-size: 13px; line-height: 1.55; word-wrap: break-word; }
.msg-bubble__time { font-size: 10px; margin-top: 4px; opacity: 0.7; }
.msg-bubble--me .msg-bubble__time { color: rgba(255,255,255,0.85); }
.msg-bubble--mentor .msg-bubble__time { color: var(--ink-3); }

.mentor-screen__compose {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px 14px 90px;
  border-top: 1px solid var(--ink-5);
  background: var(--paper);
}
.mentor-screen__compose .textarea { resize: none; }
.mentor-screen__send {
  width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
  align-self: end;
}

/* ─── Journal screen ─────────────────────────────────────── */
.journal-screen__body { padding: 18px 14px; display: flex; flex-direction: column; gap: 18px; }
.journal-screen__title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.journal-screen__editor { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.journal-screen__textarea {
  width: 100%;
  min-height: 140px;
  border: 0;
  background: transparent;
  resize: vertical;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  padding: 0;
  outline: none;
}
.journal-screen__editor-foot { display: flex; justify-content: space-between; align-items: center; }
.journal-screen__history { display: flex; flex-direction: column; gap: 10px; }
.journal-entry { padding: 12px 14px; }
.journal-entry__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.journal-entry__day { font-weight: 700; font-size: 13px; }
.journal-entry__text { line-height: 1.6; }

/* ─── Announcement composer (admin) ──────────────────────── */
.ann-severity { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.ann-severity__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 12px;
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.ann-severity__btn strong { font-size: 13px; }
.ann-severity__btn small { font-size: 11px; color: var(--ink-3); font-weight: 400; }
.ann-severity__btn:hover { border-color: var(--ink-3); }
.ann-severity__btn.is-active { border-color: var(--ink); border-width: 1.5px; box-shadow: inset 0 0 0 1px var(--ink); }
.ann-severity__btn--info.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ann-severity__btn--warn.is-active { border-color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }
.ann-severity__btn--urgent.is-active { border-color: var(--err); box-shadow: inset 0 0 0 1px var(--err); }

/* ─── Certificate ──────────────────────────────────────── */
.cert-screen__body { padding: 18px 14px; }
.cert {
  position: relative;
  background: linear-gradient(135deg, #faf9f6 0%, #f2ede3 100%);
  border: 2px solid var(--accent);
  border-radius: var(--radius-xxl);
  padding: 40px 28px 32px;
  text-align: center;
  overflow: hidden;
  box-shadow: var(--shadow-3);
  min-height: 600px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.cert__corner { position: absolute; width: 40px; height: 40px; border: 2px solid var(--accent); }
.cert__corner--tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; border-top-left-radius: 18px; }
.cert__corner--tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; border-top-right-radius: 18px; }
.cert__corner--bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; border-bottom-left-radius: 18px; }
.cert__corner--br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; border-bottom-right-radius: 18px; }
.cert__brand { display: flex; align-items: center; gap: 10px; }
.cert__logo { width: 36px; height: 36px; border-radius: 8px; background: #fff; padding: 2px; }
.cert__brand-text { font-weight: 800; letter-spacing: -0.01em; }
.cert__eyebrow { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.cert__intro { font-size: 14px; color: var(--ink-2); }
.cert__name { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); padding: 8px 16px; border-bottom: 2px solid var(--accent); margin: 0; }
.cert__body { font-size: 14px; line-height: 1.7; color: var(--ink-2); max-width: 320px; }
.cert__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 8px 0; width: 100%; }
.cert__stat { background: rgba(255,255,255,0.5); border-radius: var(--radius); padding: 10px 12px; }
.cert__stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); font-weight: 600; }
.cert__stat-value { font-size: 16px; font-weight: 700; margin-top: 2px; color: var(--ink); }
.cert__signature { display: flex; gap: 28px; margin-top: auto; padding-top: 16px; }
.cert__sigline { width: 110px; height: 1px; background: var(--ink-3); }
.cert__sigcap { font-size: 10px; color: var(--ink-3); margin-top: 4px; letter-spacing: 0.05em; }
.cert__seal { position: absolute; bottom: 24px; right: 24px; width: 88px; height: 88px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; transform: rotate(-12deg); box-shadow: 0 6px 16px rgba(0,113,227,0.35); }
.cert__seal-inner { text-align: center; }
.cert__seal-text { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; margin-top: -4px; }
@media print {
  .no-print, .tabbar, .layout-phone { padding: 0 !important; }
  .cert { border-color: #0058b4; box-shadow: none; }
}

/* Admin mentor thread inside intern detail */
.mentor-thread { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 6px 4px; }
.mentor-thread .msg-bubble { max-width: 80%; }

/* PWA install banner */
.pwa-banner {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(0,113,227,0.10) 0%, rgba(0,88,180,0.06) 100%);
  border: 1px solid rgba(0,113,227,0.25);
  border-radius: var(--radius);
}
.pwa-banner__icon { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.pwa-banner__title { font-size: 13px; font-weight: 700; }
.pwa-banner__sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.pwa-banner__install { font-size: 12px; padding: 6px 14px; }
.pwa-banner__dismiss { width: 30px; height: 30px; padding: 0; justify-content: center; }

/* KB list row */
.kb-article-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.kb-article-row:hover { transform: translateY(-1px); text-decoration: none; }
.kb-article-row__title { font-weight: 600; font-size: 14px; line-height: 1.3; }
.kb-article-row__body { min-width: 0; }

/* ─── Day 30 Camera Exam (wireframe ExamB_PerQuestion) ──────── */
.exam-screen { padding: 0 0 var(--space-2); display: block; }
.exam-screen__body { padding: 14px 14px 90px; display: flex; flex-direction: column; gap: 10px; }
.exam-screen__hero-title { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); margin-top: 2px; }
.exam-screen__dots {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 2px 0;
}
.exam-screen__dot {
  width: 28px; height: 28px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: var(--screen);
  border: 1.25px solid var(--ink-4);
}
.exam-screen__dot:hover { border-color: var(--ink-2); }
.exam-screen__q-card {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-color: var(--accent);
}
.exam-screen__q-text { color: var(--ink); line-height: 1.4; font-size: 16px; }
.exam-screen__preview {
  height: 200px;
  border-radius: 14px;
  border-color: var(--ink-4);
  background: var(--ink);
  position: relative;
  overflow: hidden;
}
.exam-screen__video { width: 100%; height: 100%; object-fit: cover; background: var(--ink); display: block; }
.exam-screen__preview-status {
  position: absolute;
  top: 10px; left: 10px;
  display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
}
.exam-screen__rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; animation: blink 1.2s infinite; }
.exam-screen__ready { font-size: 11px; font-weight: 500; color: #fff; }
.exam-screen__preview-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.6);
  font-family: var(--font-hand);
  font-size: 15px;
  pointer-events: none;
}
.exam-screen__preview-meta {
  position: absolute;
  bottom: 10px; left: 10px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
}
.exam-screen__pill {
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--screen);
  border-color: var(--ink-4);
}
.exam-screen__controls { margin-top: 4px; }
.exam-screen__btn-grow { flex: 1; justify-content: center; }
.exam-screen__btn-rec {
  background: #ff3b30;
  color: #fff;
  border-color: #ff3b30;
  font-weight: 700;
  flex: 1.2;
  justify-content: center;
}
.exam-screen__btn-rec:hover { background: #e8362d; border-color: #e8362d; }
.exam-screen__upload-title { font-size: 18px; font-weight: 600; color: var(--ink); }
.exam-screen__upload-bar { width: 240px; height: 4px; background: var(--ink-5); border-radius: 999px; overflow: hidden; }
.exam-screen__upload-bar > span { display: block; height: 100%; background: var(--accent); transition: width 0.2s ease; }
.exam-screen__abort { display: block; margin-top: 6px; color: var(--ink-3); text-decoration: none; }
.exam-screen__abort:hover { color: var(--ink); text-decoration: none; }

@keyframes blink { 50% { opacity: 0.3; } }


/* ═════════════════════════════════════════════════════════════
   LESSON — Notion/Linear + Apple Health hybrid (matches home-clean)
   - Thin top progress bar
   - Compact header with back link + step counter
   - 3-column stats strip (section / progress / minutes left)
   - Outline card with done/active/locked state per row
   - Current section card with accent border-left
   - Sticky bottom nav buttons
   ═════════════════════════════════════════════════════════════ */
.lesson-clean__progress-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 3px;
  background: var(--ink-5);
  overflow: hidden;
}
.lesson-clean__progress-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 0.25s ease;
}

.lesson-clean {
  padding: 16px 16px 96px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lesson-clean__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lesson-clean__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding: 4px 0;
}
.lesson-clean__back:hover { color: var(--ink); text-decoration: none; }
.lesson-clean__step {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.lesson-clean__step-of {
  color: var(--ink-3);
  font-weight: 500;
}

.lesson-clean__title-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lesson-clean__eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.lesson-clean__title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}

/* 3-column stats strip — mirrors home-clean__stats-row */
.lesson-clean__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 14px 0;
  border-top: 1px solid var(--ink-5);
  border-bottom: 1px solid var(--ink-5);
}
.lesson-clean__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 8px;
  border-right: 1px solid var(--ink-5);
}
.lesson-clean__stat:last-child { border-right: none; }
.lesson-clean__stat-num {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.lesson-clean__stat-num span { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.lesson-clean__stat-label {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 6px;
  letter-spacing: 0.02em;
}

/* Section heading — re-uses pattern from home-clean__section */
.lesson-clean__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lesson-clean__section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.lesson-clean__section-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.lesson-clean__section-meta { font-size: 11px; color: var(--ink-3); font-weight: 500; }

/* Outline list */
.lesson-clean__outline {
  display: flex;
  flex-direction: column;
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: 12px;
  overflow: hidden;
}
.lesson-clean__outline-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-5);
  font-family: var(--font-ui);
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: var(--ink);
  transition: background 0.12s ease;
}
.lesson-clean__outline-row:last-child { border-bottom: none; }
.lesson-clean__outline-row:hover { background: var(--ink-6); }
.lesson-clean__outline-row.is-active { background: var(--accent-soft); }
.lesson-clean__outline-row.is-done { color: var(--ink-3); }
.lesson-clean__outline-row.is-done .lesson-clean__outline-text {
  text-decoration: line-through;
  text-decoration-color: var(--ink-4);
}
.lesson-clean__outline-num {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--ink-6);
  border: 1px solid var(--ink-5);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.lesson-clean__outline-row.is-active .lesson-clean__outline-num {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.lesson-clean__outline-row.is-done .lesson-clean__outline-num {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  font-size: 13px;
}
.lesson-clean__outline-text {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
.lesson-clean__outline-row.is-active .lesson-clean__outline-text {
  color: var(--accent-ink);
  font-weight: 600;
}
.lesson-clean__outline-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 99px;
  background: var(--accent);
  color: #fff;
}
.lesson-clean__outline-tag--done {
  background: var(--ok-soft);
  color: var(--ok);
}

/* Current section card — clean white with 4px accent strip */
.lesson-clean__current {
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: 16px;
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: 12px;
  overflow: hidden;
}
.lesson-clean__current-bar {
  width: 4px;
  height: 100%;
  min-height: 80px;
  background: var(--accent);
  border-radius: 0 4px 4px 0;
}
.lesson-clean__current-body {
  padding: 18px 18px 22px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lesson-clean__current-eyebrow {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  font-family: var(--font-mono);
}
.lesson-clean__current-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 2px 0 8px;
  color: var(--ink);
}
.lesson-clean__current-content {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-2);
}
.lesson-clean__current-content > * { margin: 0 0 12px; }
.lesson-clean__current-content > *:last-child { margin-bottom: 0; }
.lesson-clean__current-content h1,
.lesson-clean__current-content h2,
.lesson-clean__current-content h3 {
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin-top: 18px;
}
.lesson-clean__current-content h2 { font-size: 16px; font-weight: 700; }
.lesson-clean__current-content h3 { font-size: 14px; font-weight: 600; }
.lesson-clean__current-content ul,
.lesson-clean__current-content ol {
  padding-left: 22px;
}
.lesson-clean__current-content li { margin: 4px 0; }
.lesson-clean__current-content strong { color: var(--ink); font-weight: 600; }
.lesson-clean__current-content code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--ink-6);
  padding: 1px 6px;
  border-radius: 4px;
}
.lesson-clean__current-content blockquote {
  border-left: 3px solid var(--ink-4);
  padding-left: 12px;
  color: var(--ink-2);
  font-style: italic;
}

/* Bottom nav buttons */
.lesson-clean__nav {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: stretch;
}
.lesson-clean__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 16px;
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: 1px solid var(--ink-5);
  background: var(--screen);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.lesson-clean__nav-btn:hover { background: var(--ink-6); text-decoration: none; }
.lesson-clean__nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.lesson-clean__nav-btn--ghost {
  color: var(--ink-2);
}
.lesson-clean__nav-btn--primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.lesson-clean__nav-btn--primary:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
}
.lesson-clean__nav-btn--done {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: transparent;
}
.lesson-clean__nav-btn--done:hover {
  background: var(--ok-soft);
}

.lesson-clean__empty {
  padding: 24px 16px;
  background: var(--ink-6);
  border-radius: 12px;
  color: var(--ink-3);
  font-size: 13px;
  text-align: center;
}


/* ═════════════════════════════════════════════════════════════
   FACE CAPTURE MODAL — full-screen selfie overlay
   Matches the lesson-clean design language
   ═════════════════════════════════════════════════════════════ */
.face-capture {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(20, 20, 26, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.face-capture.is-open { opacity: 1; }

.face-capture__sheet {
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: 16px;
  width: min(420px, 100%);
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-3);
}

.face-capture__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--ink-5);
}
.face-capture__title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.face-capture__sub {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 4px;
}
.face-capture__close {
  background: var(--ink-6);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  cursor: pointer;
}
.face-capture__close:hover { background: var(--ink-5); }

.face-capture__stage {
  position: relative;
  background: #000;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.face-capture__video,
.face-capture__preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Mirror the front-camera feed so the preview matches a regular mirror.
     The captured photo is also mirrored in canvas.drawImage to match. */
  transform: scaleX(-1);
}
.face-capture__hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 99px;
  pointer-events: none;
}

.face-capture__error {
  margin: 12px 16px 0;
  padding: 10px 12px;
  background: var(--err-soft);
  color: var(--err);
  border-radius: 8px;
  font-size: 12px;
  text-align: center;
}

.face-capture__nav {
  display: flex;
  gap: 8px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--ink-5);
}
.face-capture__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--ink-5);
  background: var(--screen);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  flex: 1;
}
.face-capture__btn:hover { background: var(--ink-6); }
.face-capture__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.face-capture__btn--ghost { color: var(--ink-2); }
.face-capture__btn--primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  flex: 1.6;
}
.face-capture__btn--primary:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
}

/* ─── Break-state variants on the home Clock tile ───────────────────────── */
.home-clean__action-icon--break {
  background: #fbe9c2;
  color: #8a5a00;
}
.home-clean__action--break-cta {
  background: var(--paper-2);
  border-color: var(--ink-5);
}
.home-clean__action--break {
  background: #fbf0dd;
  border-color: #f4d99a;
}
.home-clean__action--break.is-over {
  background: var(--err-soft);
  border-color: var(--err);
}
.home-clean__action--break.is-over .home-clean__action-icon--break {
  background: var(--err);
  color: #fff;
}
.home-clean__action--break.is-over .home-clean__stop {
  background: var(--err);
}

/* Dark-mode adjustments for face-capture modal */
:root[data-theme="dark"] .face-capture { background: rgba(0, 0, 0, 0.65); }
:root[data-theme="dark"] .home-clean__action-icon--break {
  background: rgba(255, 159, 10, 0.16);
  color: #ffb84d;
}
:root[data-theme="dark"] .home-clean__action--break {
  background: rgba(255, 159, 10, 0.10);
  border-color: rgba(255, 159, 10, 0.30);
}


/* ═════════════════════════════════════════════════════════════
   QUIZ — Notion/Linear + Apple Health hybrid
   - Reuses lesson-clean primitives for header / title / stats / nav
   - Adds: option list with letter chip, results hero, review rows
   ═════════════════════════════════════════════════════════════ */

/* Progress bar uses ink (dark) instead of accent — visually distinct from
   lesson view so the user knows they're in a quiz. */
.quiz-clean__progress-bar > span { background: var(--ink); }
.quiz-clean__progress-bar--pass > span { background: var(--ok); }
.quiz-clean__progress-bar--fail > span { background: var(--warn); }

.quiz-clean__eyebrow { color: var(--ink); }
.quiz-clean__eyebrow.is-pass { color: var(--ok); }
.quiz-clean__eyebrow.is-fail { color: var(--warn); }

/* Question card override: use the lesson-clean__current shell but tint the
   accent strip a darker ink to read as "quiz" not "lesson". */
.quiz-clean__q-card .lesson-clean__current-bar { background: var(--ink); }

/* ─── Option list ──────────────────────────────────────────────────────── */
.quiz-clean__opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.quiz-clean__opt {
  display: grid;
  grid-template-columns: 32px 1fr 22px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: 10px;
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.quiz-clean__opt:hover { background: var(--ink-6); }
.quiz-clean__opt.is-selected {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.quiz-clean__opt-letter {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--ink-6);
  border: 1px solid var(--ink-5);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  font-family: var(--font-my);
  font-size: 13px;
  font-weight: 700;
}
.quiz-clean__opt.is-selected .quiz-clean__opt-letter {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.quiz-clean__opt-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  min-width: 0;
}
.quiz-clean__opt-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--ink-5);
  display: grid;
  place-items: center;
}
.quiz-clean__opt.is-selected .quiz-clean__opt-check {
  border-color: var(--accent);
}
.quiz-clean__opt-check-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

/* ─── Results hero ─────────────────────────────────────────────────────── */
.quiz-clean__hero {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 18px;
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: 14px;
}
.quiz-clean__hero.is-pass { background: var(--ok-soft); border-color: transparent; }
.quiz-clean__hero.is-fail { background: var(--warn-soft); border-color: transparent; }
.quiz-clean__score {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-right: 18px;
  border-right: 1px solid var(--ink-5);
}
.quiz-clean__hero.is-pass .quiz-clean__score { border-right-color: rgba(19, 115, 51, 0.25); }
.quiz-clean__hero.is-fail .quiz-clean__score { border-right-color: rgba(179, 88, 10, 0.25); }
.quiz-clean__score-num {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.quiz-clean__hero.is-pass .quiz-clean__score-num { color: var(--ok); }
.quiz-clean__hero.is-fail .quiz-clean__score-num { color: var(--warn); }
.quiz-clean__score-num span {
  font-size: 16px;
  font-weight: 600;
  color: inherit;
  opacity: 0.7;
  margin-left: 2px;
}
.quiz-clean__score-frac {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.quiz-clean__hero.is-pass .quiz-clean__score-frac { color: var(--ok); opacity: 0.85; }
.quiz-clean__hero.is-fail .quiz-clean__score-frac { color: var(--warn); opacity: 0.85; }
.quiz-clean__verdict {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.quiz-clean__hero.is-pass .quiz-clean__verdict { color: var(--ok); }
.quiz-clean__hero.is-fail .quiz-clean__verdict { color: var(--warn); }

/* ─── Review rows ──────────────────────────────────────────────────────── */
.quiz-clean__review {
  display: flex;
  flex-direction: column;
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: 12px;
  overflow: hidden;
}
.quiz-clean__review-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ink-5);
  align-items: flex-start;
}
.quiz-clean__review-row:last-child { border-bottom: none; }
.quiz-clean__review-row.is-correct { background: var(--ok-soft); }
.quiz-clean__review-row.is-wrong { background: var(--err-soft); }
.quiz-clean__review-icon { display: grid; place-items: center; height: 22px; }
.quiz-clean__review-icon .dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-block;
}
.quiz-clean__review-icon .dot.ok {
  background: var(--ok);
  position: relative;
}
.quiz-clean__review-icon .dot.ok::after {
  content: "";
  position: absolute;
  top: 5px; left: 4px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.quiz-clean__review-icon .dot.bad {
  background: var(--err);
  position: relative;
}
.quiz-clean__review-icon .dot.bad::before,
.quiz-clean__review-icon .dot.bad::after {
  content: "";
  position: absolute;
  top: 8px; left: 4px;
  width: 10px; height: 2px;
  background: #fff;
}
.quiz-clean__review-icon .dot.bad::before { transform: rotate(45deg); }
.quiz-clean__review-icon .dot.bad::after { transform: rotate(-45deg); }
.quiz-clean__review-body { min-width: 0; }
.quiz-clean__review-q {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.quiz-clean__review-meta {
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-top: 4px;
}
.quiz-clean__review-row.is-correct .quiz-clean__review-q { color: var(--ok); }
.quiz-clean__review-row.is-wrong .quiz-clean__review-q { color: var(--err); }

/* Dark-mode tweaks */
:root[data-theme="dark"] .quiz-clean__hero.is-pass,
:root[data-theme="dark"] .quiz-clean__review-row.is-correct { background: rgba(50, 215, 75, 0.10); }
:root[data-theme="dark"] .quiz-clean__hero.is-fail { background: rgba(255, 159, 10, 0.12); }
:root[data-theme="dark"] .quiz-clean__review-row.is-wrong { background: rgba(255, 69, 58, 0.12); }


/* ═════════════════════════════════════════════════════════════
   PROFILE — Notion/Linear + Apple Health hybrid
   - Centered hero with circular avatar
   - 3-column stat strip (Apple Fitness style)
   - Clean fact rows (label · value)
   - Notion-style nav rows for resources + settings
   ═════════════════════════════════════════════════════════════ */
.profile-clean {
  padding: 24px 16px 96px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ─── Hero ──────────────────────────────────────────────────────────────── */
.profile-clean__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 0 4px;
}
.profile-clean__avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-ink) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: var(--shadow-2);
}
.profile-clean__name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 4px;
  text-align: center;
}
.profile-clean__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.profile-clean__chip {
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--ink-6);
  border: 1px solid var(--ink-5);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.profile-clean__chip--accent {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-ink);
}
.profile-clean__email {
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  margin-top: 2px;
  word-break: break-all;
  text-align: center;
}

/* ─── Stats strip ──────────────────────────────────────────────────────── */
.profile-clean__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 14px 0;
  border-top: 1px solid var(--ink-5);
  border-bottom: 1px solid var(--ink-5);
}
.profile-clean__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 8px;
  border-right: 1px solid var(--ink-5);
}
.profile-clean__stat:last-child { border-right: none; }
.profile-clean__stat-num {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.profile-clean__stat-num span {
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 500;
}
.profile-clean__stat-label {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 8px;
  letter-spacing: 0.02em;
  text-align: center;
}

/* ─── Section heads (reuse pattern from lesson/home) ───────────────────── */
.profile-clean__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile-clean__section-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

/* ─── Onboarding facts card ────────────────────────────────────────────── */
.profile-clean__facts {
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: 12px;
  overflow: hidden;
}
.profile-clean__fact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ink-5);
}
.profile-clean__fact-row:last-child { border-bottom: none; }
.profile-clean__fact-label {
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 500;
}
.profile-clean__fact-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}
.profile-clean__fact-value.ui-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

/* ─── Nav list (Resources, Settings) ───────────────────────────────────── */
.profile-clean__nav {
  display: flex;
  flex-direction: column;
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: 12px;
  overflow: hidden;
}
.profile-clean__nav-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-5);
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.12s ease;
  width: 100%;
}
.profile-clean__nav-row:last-child { border-bottom: none; }
.profile-clean__nav-row:hover { background: var(--ink-6); text-decoration: none; }
.profile-clean__nav-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--ink-6);
  border: 1px solid var(--ink-5);
  color: var(--ink-2);
  display: grid;
  place-items: center;
}
.profile-clean__nav-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.profile-clean__nav-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.profile-clean__nav-sub {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 500;
  line-height: 1.3;
  word-break: break-all;
}
.profile-clean__nav-row--danger .profile-clean__nav-icon {
  background: var(--err-soft);
  border-color: transparent;
  color: var(--err);
}
.profile-clean__nav-row--danger .profile-clean__nav-title { color: var(--err); }

/* ─── Footer ───────────────────────────────────────────────────────────── */
.profile-clean__footer {
  text-align: center;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-top: 8px;
  text-transform: uppercase;
}

/* Dark-mode tweaks */
:root[data-theme="dark"] .profile-clean__avatar {
  background: linear-gradient(135deg, var(--accent) 0%, #0058b4 100%);
}
:root[data-theme="dark"] .profile-clean__nav-row--danger .profile-clean__nav-icon {
  background: rgba(255, 69, 58, 0.16);
  color: #ff453a;
}


/* ═════════════════════════════════════════════════════════════
   EXAM — Notion/Linear + Apple Health hybrid
   Reuses lesson-clean primitives (header / title / stats / nav)
   and adds: intro tips card, locked card, error card, dots row,
   video preview card, record / stop / submit buttons.
   ═════════════════════════════════════════════════════════════ */
.exam-clean {
  padding: 16px 16px 96px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.exam-clean__eyebrow { color: var(--accent); }
.exam-clean__intro-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 4px 0 0;
}
.exam-clean__q-text {
  font-size: 20px;
  line-height: 1.4;
}

/* ─── Locked / error card (shared shell) ──────────────────────────────── */
.exam-clean--locked,
.exam-clean--uploading {
  min-height: 70vh;
}
.exam-clean__locked-card {
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: 16px;
  padding: 32px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  margin-top: 8px;
}
.exam-clean__locked-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ink-6);
  color: var(--ink-2);
  display: grid;
  place-items: center;
}
.exam-clean__error-icon {
  background: var(--err-soft);
  color: var(--err);
}
.exam-clean__locked-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 6px 0 0;
}
.exam-clean__locked-body {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 320px;
  margin: 0;
}
.exam-clean__locked-body strong { color: var(--ink); font-weight: 700; }

.exam-clean__locked-meter {
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.exam-clean__locked-meter-track {
  height: 6px;
  background: var(--ink-5);
  border-radius: 999px;
  overflow: hidden;
}
.exam-clean__locked-meter-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}
.exam-clean__locked-meter-label {
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.exam-clean__locked-meter-label strong { color: var(--ink); font-weight: 700; }

.exam-clean__locked-cta {
  margin-top: 12px;
  align-self: stretch;
  flex: none;
}

/* ─── Intro card (re-uses lesson-clean__current shell) ────────────────── */
.exam-clean__intro-card .lesson-clean__current-bar { background: var(--accent); }
.exam-clean__intro-nav { grid-template-columns: auto 1fr; }

.exam-clean__tips {
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: 12px;
  overflow: hidden;
}
.exam-clean__tip-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--ink-5);
}
.exam-clean__tip-row:last-child { border-bottom: none; }
.exam-clean__tip-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
}
.exam-clean__tip-text {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}

/* ─── Recording phase — progress bar + dots ───────────────────────────── */
.exam-clean__progress-bar > span { background: var(--accent); }
.exam-clean__progress-bar.is-recording > span {
  background: var(--err);
  animation: examProgPulse 1.1s ease-in-out infinite;
}
@keyframes examProgPulse {
  50% { opacity: 0.55; }
}

.exam-clean__dots-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.exam-clean__dots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.exam-clean__dot {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--screen);
  border: 1px solid var(--ink-5);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.exam-clean__dot:hover { transform: scale(1.06); }
.exam-clean__dot.is-done {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.exam-clean__dot.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
  border-width: 2px;
  font-weight: 700;
}
.exam-clean__dots-meta {
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

/* ─── Video preview card ──────────────────────────────────────────────── */
.exam-clean__preview-card {
  position: relative;
  background: #000;
  border: 1px solid var(--ink-5);
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
}
.exam-clean__preview-card.is-recording {
  border-color: var(--err);
  box-shadow: 0 0 0 3px rgba(197, 34, 31, 0.15);
}
.exam-clean__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Mirror the live preview the same way the front-cam selfie did */
  transform: scaleX(-1);
}
/* Don't mirror playback (it's the saved file — should display normally) */
#playback.exam-clean__video { transform: none; }

.exam-clean__preview-status {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 99px;
  letter-spacing: 0.02em;
}
.exam-clean__preview-status--saved {
  background: var(--ok);
  color: #fff;
}
.exam-clean__preview-status--rec {
  background: var(--err);
  color: #fff;
}
.exam-clean__rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: pulse 1.1s ease-in-out infinite;
}
.exam-clean__preview-status--rec .exam-clean__rec-dot {
  background: #fff;
}
.exam-clean__ready-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
}

/* ─── Controls row ────────────────────────────────────────────────────── */
.exam-clean__controls {
  display: flex;
  gap: 8px;
}
.exam-clean__controls .lesson-clean__nav-btn {
  flex: 1;
  padding: 14px 12px;
}
.exam-clean__btn-record {
  background: var(--err);
  color: #fff;
  border-color: var(--err);
  font-weight: 700;
}
.exam-clean__btn-record:hover {
  background: #a8201d;
  border-color: #a8201d;
}
.exam-clean__btn-record .exam-clean__rec-dot {
  background: #fff;
}
.exam-clean__btn-stop {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  flex: 1;
}
.exam-clean__btn-stop:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
}

.exam-clean__caption {
  font-size: 11px;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.5;
  margin: 0;
}

.exam-clean__submit-wrap {
  display: flex;
  flex-direction: column;
}
.exam-clean__submit-btn {
  padding: 16px 18px;
  font-size: 14px;
}

.exam-clean__abort {
  text-align: center;
  font-size: 11px;
  color: var(--ink-3);
  text-decoration: none;
  margin-top: 4px;
}
.exam-clean__abort:hover { color: var(--err); text-decoration: none; }

/* ─── Uploading phase ─────────────────────────────────────────────────── */
.exam-clean--uploading {
  justify-content: center;
}
.exam-clean__upload-card {
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: 16px;
  padding: 36px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin: 32px 0;
}
.exam-clean__upload-eyebrow {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  font-family: var(--font-mono);
}
.exam-clean__upload-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 4px 0 0;
  color: var(--ink);
}
.exam-clean__upload-pct {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  margin: 8px 0;
}
.exam-clean__upload-pct span {
  font-size: 22px;
  color: var(--ink-3);
  font-weight: 600;
}
.exam-clean__upload-bar {
  width: 100%;
  max-width: 280px;
  height: 4px;
  background: var(--ink-5);
  border-radius: 999px;
  overflow: hidden;
}
.exam-clean__upload-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 0.2s ease;
}
.exam-clean__upload-hint {
  font-size: 12px;
  color: var(--ink-3);
  margin: 8px 0 0;
  line-height: 1.6;
}

/* Dark-mode tweaks */
:root[data-theme="dark"] .exam-clean__preview-card { background: #000; }
:root[data-theme="dark"] .exam-clean__error-icon {
  background: rgba(255, 69, 58, 0.16);
  color: #ff453a;
}


/* ═════════════════════════════════════════════════════════════
   INBOX — Notion/Linear + Apple Health hybrid
   - Title bar with "X new" badge
   - Mentor card (4px accent border-left + initials avatar)
   - 3-col stats strip
   - Announcement feed with severity pills and expandable bodies
   ═════════════════════════════════════════════════════════════ */
.inbox-clean {
  padding: 20px 16px 96px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ─── Title bar ────────────────────────────────────────────────────────── */
.inbox-clean__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.inbox-clean__title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  line-height: 1.1;
}
.inbox-clean__sub {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.inbox-clean__top-badge {
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: 99px;
  white-space: nowrap;
}
.inbox-clean__top-chip {
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: 99px;
  white-space: nowrap;
}

/* ─── Mentor card (4px accent strip) ───────────────────────────────────── */
.inbox-clean__mentor {
  display: grid;
  grid-template-columns: 4px 44px 1fr auto;
  gap: 14px;
  align-items: center;
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: 12px;
  padding: 14px 14px 14px 0;
  color: inherit;
  text-decoration: none;
  transition: background 0.12s ease;
}
.inbox-clean__mentor:hover { background: var(--ink-6); text-decoration: none; }
.inbox-clean__mentor-bar {
  width: 4px;
  height: 56px;
  background: var(--accent);
  border-radius: 0 4px 4px 0;
}
.inbox-clean__mentor-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.inbox-clean__mentor-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.inbox-clean__mentor-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: var(--font-mono);
}
.inbox-clean__mentor-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.inbox-clean__mentor-preview {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-clean__mentor-badge {
  background: var(--err);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  min-width: 22px;
  height: 22px;
  border-radius: 99px;
  padding: 0 7px;
  display: inline-grid;
  place-items: center;
  margin-right: 12px;
}
.inbox-clean__mentor-arrow {
  color: var(--ink-3);
  margin-right: 12px;
  display: inline-flex;
}

/* ─── Stats strip ──────────────────────────────────────────────────────── */
.inbox-clean__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 14px 0;
  border-top: 1px solid var(--ink-5);
  border-bottom: 1px solid var(--ink-5);
}
.inbox-clean__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 8px;
  border-right: 1px solid var(--ink-5);
}
.inbox-clean__stat:last-child { border-right: none; }
.inbox-clean__stat-num {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.inbox-clean__stat-num.is-warn { color: var(--warn); }
.inbox-clean__stat-label {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 6px;
  letter-spacing: 0.02em;
}

/* ─── Section heads ────────────────────────────────────────────────────── */
.inbox-clean__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inbox-clean__section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.inbox-clean__section-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.inbox-clean__section-meta {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ─── Empty state ──────────────────────────────────────────────────────── */
.inbox-clean__empty {
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: 12px;
  padding: 32px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.inbox-clean__empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ink-6);
  color: var(--ink-2);
  display: grid;
  place-items: center;
}
.inbox-clean__empty-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.inbox-clean__empty-sub {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.55;
  max-width: 260px;
}

/* ─── Announcement feed ────────────────────────────────────────────────── */
.inbox-clean__feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inbox-clean__ann {
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.inbox-clean__ann:hover { background: var(--ink-6); }
.inbox-clean__ann--critical { border-left: 4px solid var(--err); }
.inbox-clean__ann--warn { border-left: 4px solid var(--warn); }
.inbox-clean__ann--info { border-left: 4px solid var(--accent); }
.inbox-clean__ann--good { border-left: 4px solid var(--ok); }

.inbox-clean__ann-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.inbox-clean__ann-pill {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 99px;
  background: var(--ink-6);
  color: var(--ink-2);
}
.inbox-clean__ann-pill--info {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.inbox-clean__ann-pill--warn {
  background: var(--warn-soft);
  color: var(--warn);
}
.inbox-clean__ann-pill--critical {
  background: var(--err-soft);
  color: var(--err);
}
.inbox-clean__ann-pill--good {
  background: var(--ok-soft);
  color: var(--ok);
}
.inbox-clean__ann-ago {
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.inbox-clean__ann-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 4px;
}
.inbox-clean__ann-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  max-height: 60px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.18s ease;
}
.inbox-clean__ann.is-expanded .inbox-clean__ann-body {
  max-height: 800px;
}
.inbox-clean__ann-body::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 22px;
  background: linear-gradient(to bottom, transparent, var(--screen));
  pointer-events: none;
}
.inbox-clean__ann.is-expanded .inbox-clean__ann-body::after { display: none; }
.inbox-clean__ann:hover .inbox-clean__ann-body::after {
  background: linear-gradient(to bottom, transparent, var(--ink-6));
}

.inbox-clean__ann-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ink-5);
}
.inbox-clean__ann-author {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.inbox-clean__ann-toggle {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
}

/* Dark-mode tweaks */
:root[data-theme="dark"] .inbox-clean__ann-body::after {
  background: linear-gradient(to bottom, transparent, var(--screen));
}
:root[data-theme="dark"] .inbox-clean__ann:hover .inbox-clean__ann-body::after {
  background: linear-gradient(to bottom, transparent, var(--ink-6));
}


/* ═════════════════════════════════════════════════════════════
   MENTOR CHAT — Notion + iMessage hybrid
   ═════════════════════════════════════════════════════════════ */
.mentor-clean {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  height: calc(100dvh - 60px);
  padding-bottom: 56px; /* leave room for tabbar */
}
.mentor-clean__top {
  display: grid;
  grid-template-columns: 32px 40px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ink-5);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 5;
}
.mentor-clean__back {
  background: var(--ink-6);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  cursor: pointer;
  text-decoration: none;
}
.mentor-clean__back:hover { background: var(--ink-5); }
.mentor-clean__head-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
}
.mentor-clean__head-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.mentor-clean__head-sub {
  font-size: 11px;
  color: var(--ink-3);
}

.mentor-clean__thread {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mentor-clean__day-sep {
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
}
.mentor-clean__day-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--ink-6);
  padding: 4px 10px;
  border-radius: 99px;
}

.mentor-clean__bubble-row {
  display: flex;
}
.mentor-clean__bubble-row.is-me { justify-content: flex-end; }
.mentor-clean__bubble-row.is-mentor { justify-content: flex-start; }
.mentor-clean__bubble {
  max-width: 78%;
  padding: 10px 13px;
  border-radius: 16px;
  font-family: var(--font-ui);
}
.mentor-clean__bubble-row.is-me .mentor-clean__bubble {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.mentor-clean__bubble-row.is-mentor .mentor-clean__bubble {
  background: var(--ink-6);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.mentor-clean__bubble-text {
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.mentor-clean__bubble-time {
  font-size: 10px;
  margin-top: 4px;
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.mentor-clean__bubble-row.is-me .mentor-clean__bubble-time { color: rgba(255, 255, 255, 0.7); }
.mentor-clean__bubble-row.is-mentor .mentor-clean__bubble-time { color: var(--ink-3); }

.mentor-clean__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 24px;
  gap: 10px;
}
.mentor-clean__empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
}
.mentor-clean__empty-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 4px 0 0;
}
.mentor-clean__empty-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 300px;
  margin: 0;
}
.mentor-clean__empty-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
}
.mentor-clean__suggest-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 99px;
  background: var(--ink-6);
  border: 1px solid var(--ink-5);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s ease;
}
.mentor-clean__suggest-chip:hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.mentor-clean__compose {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--ink-5);
  background: var(--paper);
}
.mentor-clean__input {
  background: var(--ink-6);
  border: 1px solid var(--ink-5);
  border-radius: 20px;
  padding: 10px 14px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink);
  resize: none;
  min-height: 40px;
  max-height: 120px;
  outline: none;
}
.mentor-clean__input:focus { border-color: var(--accent); }
.mentor-clean__send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.mentor-clean__send:hover { background: var(--accent-ink); }
.mentor-clean__send:disabled { opacity: 0.5; cursor: not-allowed; }


/* ═════════════════════════════════════════════════════════════
   JOURNAL — Daily reflection
   ═════════════════════════════════════════════════════════════ */
.journal-clean {
  padding: 16px 16px 96px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.journal-clean__eyebrow { color: var(--ink); }

.journal-clean__editor {
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: 16px;
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: 12px;
  overflow: hidden;
}
.journal-clean__editor.is-saved { border-color: var(--ok); }
.journal-clean__editor-bar {
  width: 4px;
  background: var(--accent);
}
.journal-clean__editor.is-saved .journal-clean__editor-bar { background: var(--ok); }
.journal-clean__editor-body {
  padding: 16px 16px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.journal-clean__editor-eyebrow {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  font-family: var(--font-mono);
}
.journal-clean__editor.is-saved .journal-clean__editor-eyebrow { color: var(--ok); }
.journal-clean__textarea {
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  resize: vertical;
  min-height: 120px;
  outline: none;
}
.journal-clean__textarea::placeholder { color: var(--ink-3); }
.journal-clean__editor-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--ink-5);
}
.journal-clean__char {
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.journal-clean__save { padding: 10px 16px; font-size: 12px; }

.journal-clean__history {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.journal-clean__entry {
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: 12px;
  padding: 14px 16px;
}
.journal-clean__entry-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.journal-clean__entry-day {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-family: var(--font-mono);
}
.journal-clean__entry-date {
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.journal-clean__entry-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}


/* ═════════════════════════════════════════════════════════════
   TASKS — Grouped checklist
   ═════════════════════════════════════════════════════════════ */
.tasks-clean {
  padding: 20px 16px 96px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.tasks-clean__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.tasks-clean__title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  line-height: 1.1;
}
.tasks-clean__sub {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 4px;
}
.tasks-clean__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tasks-clean__section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.tasks-clean__section-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  margin-bottom: 2px;
}
.tasks-clean__section-eyebrow--mentor { color: var(--accent); }
.tasks-clean__section-eyebrow--learning { color: var(--ink-2); }
.tasks-clean__section-eyebrow--daily { color: var(--warn); }
.tasks-clean__section-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.tasks-clean__section-meter {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 76px;
}
.tasks-clean__section-pct {
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.tasks-clean__section-bar {
  width: 76px;
  height: 3px;
  background: var(--ink-5);
  border-radius: 999px;
  overflow: hidden;
}
.tasks-clean__section-bar > span {
  display: block;
  height: 100%;
  background: var(--ok);
  transition: width 0.25s ease;
}

.tasks-clean__list {
  display: flex;
  flex-direction: column;
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: 12px;
  overflow: hidden;
}
.tasks-clean__row {
  border-bottom: 1px solid var(--ink-5);
  transition: background 0.12s ease;
}
.tasks-clean__row:last-child { border-bottom: none; }
.tasks-clean__row:hover { background: var(--ink-6); }
.tasks-clean__row.is-done { background: var(--ok-soft); }
.tasks-clean__label {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  width: 100%;
}
.tasks-clean__check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--ink-4);
  background: var(--screen);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #fff;
  transition: all 0.12s ease;
}
.tasks-clean__check.is-done {
  background: var(--ok);
  border-color: var(--ok);
}
.tasks-clean__check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 22px;
  height: 22px;
  cursor: pointer;
}
.tasks-clean__text {
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
}
.tasks-clean__row.is-done .tasks-clean__text {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: var(--ink-4);
}
.tasks-clean__footer {
  text-align: center;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  margin: 4px 0 0;
}


/* ═════════════════════════════════════════════════════════════
   KB — Knowledge base
   ═════════════════════════════════════════════════════════════ */
.kb-clean {
  padding: 20px 16px 96px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.kb-clean__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kb-clean__title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  line-height: 1.1;
}
.kb-clean__sub {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 4px;
}
.kb-clean__eyebrow { color: var(--ink); }

.kb-clean__search {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: 10px;
  padding: 0 4px;
}
.kb-clean__search-icon {
  display: grid;
  place-items: center;
  color: var(--ink-3);
}
.kb-clean__search-input {
  background: transparent;
  border: none;
  padding: 11px 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  width: 100%;
}
.kb-clean__search-input::placeholder { color: var(--ink-3); }

.kb-clean__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.kb-clean__chip {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 99px;
  background: var(--ink-6);
  border: 1px solid var(--ink-5);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s ease;
}
.kb-clean__chip:hover { background: var(--ink-5); }
.kb-clean__chip.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.kb-clean__list {
  display: flex;
  flex-direction: column;
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: 12px;
  overflow: hidden;
}
.kb-clean__row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ink-5);
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.12s ease;
}
.kb-clean__row:last-child { border-bottom: none; }
.kb-clean__row:hover { background: var(--ink-6); text-decoration: none; }
.kb-clean__row-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
}
.kb-clean__row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.kb-clean__row-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.kb-clean__row-meta {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 500;
}

.kb-clean__article .lesson-clean__current-bar { background: var(--accent); }
.kb-clean__article-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0 0;
  border-top: 1px solid var(--ink-5);
  font-size: 11px;
  color: var(--ink-3);
}
.kb-clean__article-foot strong { color: var(--ink-2); font-weight: 600; }


/* ═════════════════════════════════════════════════════════════
   COHORT — Read-only cohort list
   ═════════════════════════════════════════════════════════════ */
.cohort-clean {
  padding: 16px 16px 96px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cohort-clean__eyebrow { color: var(--accent); }
.cohort-clean__intro {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 4px 0 0;
}

.cohort-clean__list {
  display: flex;
  flex-direction: column;
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: 12px;
  overflow: hidden;
}
.cohort-clean__row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ink-5);
}
.cohort-clean__row:last-child { border-bottom: none; }
.cohort-clean__row.is-same-start { background: var(--accent-soft); }
.cohort-clean__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink-6);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--ink-5);
}
.cohort-clean__avatar.is-same-start {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.cohort-clean__avatar.is-same-week {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.cohort-clean__body { min-width: 0; }
.cohort-clean__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cohort-clean__meta {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
}
.cohort-clean__row-bar {
  height: 3px;
  background: var(--ink-5);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
  max-width: 200px;
}
.cohort-clean__row-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
}
.cohort-clean__pill {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.cohort-clean__pill--same {
  background: var(--accent);
  color: #fff;
}
.cohort-clean__pill--week {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.cohort-clean__date {
  font-size: 10px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.cohort-clean__footer {
  font-size: 11px;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.55;
  margin: 0;
}


/* ═════════════════════════════════════════════════════════════
   LEAVE REQUEST — Form + status history
   ═════════════════════════════════════════════════════════════ */
.leave-clean {
  padding: 16px 16px 96px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.leave-clean__eyebrow { color: var(--accent); }
.leave-clean__intro {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 4px 0 0;
}

.leave-clean__form {
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.leave-clean__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.leave-clean__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.leave-clean__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.leave-clean__input,
.leave-clean__textarea {
  background: var(--ink-6);
  border: 1px solid var(--ink-5);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.12s ease;
}
.leave-clean__input:focus,
.leave-clean__textarea:focus { border-color: var(--accent); }
.leave-clean__textarea {
  resize: vertical;
  min-height: 70px;
}
.leave-clean__submit { padding: 13px 16px; margin-top: 4px; }
.leave-clean__status {
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.leave-clean__status.is-ok { color: var(--ok); }
.leave-clean__status.is-err { color: var(--err); }

.leave-clean__history {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.leave-clean__hist-row {
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: 12px;
  padding: 12px 14px;
  border-left-width: 4px;
}
.leave-clean__hist-row--pending { border-left-color: var(--warn); }
.leave-clean__hist-row--approved { border-left-color: var(--ok); }
.leave-clean__hist-row--denied { border-left-color: var(--err); }
.leave-clean__hist-dates {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.leave-clean__hist-arrow {
  color: var(--ink-3);
  font-weight: 400;
}
.leave-clean__hist-body {
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 4px;
  line-height: 1.5;
}
.leave-clean__hist-reason { font-weight: 600; }
.leave-clean__hist-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--ink-5);
}
.leave-clean__hist-pill {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
}
.leave-clean__hist-pill--pending {
  background: var(--warn-soft);
  color: var(--warn);
}
.leave-clean__hist-pill--approved {
  background: var(--ok-soft);
  color: var(--ok);
}
.leave-clean__hist-pill--denied {
  background: var(--err-soft);
  color: var(--err);
}
.leave-clean__hist-when {
  font-size: 11px;
  color: var(--ink-3);
}


/* ═════════════════════════════════════════════════════════════
   CERTIFICATE LOCKED — pre-grade gate
   ═════════════════════════════════════════════════════════════ */
.cert-clean {
  padding: 16px 16px 96px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cert-clean--locked .exam-clean__locked-icon {
  background: var(--accent-soft);
  color: var(--accent);
}
.cert-clean__steps {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 320px;
  margin-top: 8px;
  background: var(--ink-6);
  border-radius: 10px;
  overflow: hidden;
}
.cert-clean__step {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ink-5);
  font-size: 12px;
  color: var(--ink-2);
}
.cert-clean__step:last-child { border-bottom: none; }
.cert-clean__step.is-done { color: var(--ok); }
.cert-clean__step-bullet {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink-5);
  display: grid;
  place-items: center;
  color: #fff;
}
.cert-clean__step.is-done .cert-clean__step-bullet { background: var(--ok); }
.cert-clean__step-label {
  font-weight: 500;
  text-align: left;
}
.cert-clean__step-meta {
  font-size: 10px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.cert-clean__print-btn { padding: 8px 12px; font-size: 12px; }

/* Dark-mode tweaks */
:root[data-theme="dark"] .mentor-clean__bubble-row.is-mentor .mentor-clean__bubble {
  background: #2a2a2e;
}
:root[data-theme="dark"] .cohort-clean__row.is-same-start {
  background: rgba(10, 132, 255, 0.10);
}
:root[data-theme="dark"] .tasks-clean__row.is-done { background: rgba(50, 215, 75, 0.10); }