@font-face {
  font-family: 'Stentiga';
  src: url('fonts/stentiga.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0e0806;
  --surface: #1e1009;
  --surface2: #2c1a10;
  --border: #6a3018;
  --text: #faf3ee;
  --text-muted: #d4a088;
  --accent: #d95038;
  --accent-dim: rgba(217,80,56,0.15);
  --rose: #c84030;
  --rose-dim: rgba(200,64,48,0.12);
  --terra: #e08828;
  --terra-dim: rgba(224,136,40,0.15);
  --radius: 10px;
  --sidebar-w: 272px;
  --content-w: 820px; /* shared centered column for tabs + all views */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overflow-x: clip;
}
body.pull-refreshing {
  cursor: progress;
}
html:not(.header-ready) .main-tabs { visibility: hidden; }
html.app-loading #app { visibility: hidden; }

#appSkeleton {
  position: fixed;
  inset: 0;
  z-index: 1999;
  background: linear-gradient(180deg, #120b08 0%, #0e0806 100%);
  display: none;
  overflow: hidden;
}
html.app-loading #appSkeleton { display: block; }

.skeleton-shell {
  display: flex;
  width: 100%;
  height: 100%;
}
.skeleton-sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  padding: 28px 24px;
  border-right: 1px solid rgba(106,48,24,0.55);
}
.skeleton-main {
  flex: 1;
  padding: 24px 24px 32px;
}
.skeleton-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.skeleton-tabs {
  display: flex;
  gap: 28px;
}
.skeleton-tabs span,
.skeleton-logo,
.skeleton-bar,
.skeleton-line,
.skeleton-pill,
.skeleton-chip,
.skeleton-title {
  position: relative;
  overflow: hidden;
  background: rgba(44,26,16,0.9);
  border: 1px solid rgba(106,48,24,0.5);
}
.skeleton-tabs span,
.skeleton-pill,
.skeleton-chip,
.skeleton-title { border-radius: 999px; }
.skeleton-logo { width: 144px; height: 28px; border-radius: 10px; margin-bottom: 26px; }
.skeleton-bar { height: 14px; border-radius: 999px; margin-bottom: 12px; }
.skeleton-bar-lg { width: 88%; height: 6px; margin-bottom: 18px; }
.skeleton-bar-md { width: 64%; height: 18px; margin-bottom: 18px; }
.skeleton-group { margin-top: 20px; }
.skeleton-line { height: 12px; border-radius: 999px; margin-bottom: 12px; }
.skeleton-line-wide { width: 92%; }
.skeleton-pill { width: 120px; height: 36px; }
.skeleton-tabs span { width: 72px; height: 20px; }
.skeleton-content { max-width: var(--content-w); }
.skeleton-chip-row { display: flex; gap: 12px; margin-bottom: 28px; }
.skeleton-chip { width: 110px; height: 56px; }
.skeleton-chip-wide { width: 280px; }
.skeleton-title { width: 72%; height: 70px; margin-bottom: 18px; border-radius: 18px; }
.skeleton-title-short { width: 44%; height: 58px; }
.skeleton-body { margin-top: 28px; max-width: 720px; }
.skeleton-tabs span::after,
.skeleton-logo::after,
.skeleton-bar::after,
.skeleton-line::after,
.skeleton-pill::after,
.skeleton-chip::after,
.skeleton-title::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,211,77,0.08), rgba(255,255,255,0.04), transparent);
  animation: skeletonShimmer 2.1s infinite;
}
@keyframes skeletonShimmer {
  100% { transform: translateX(100%); }
}

@media (max-width: 768px) {
  .skeleton-shell { flex-direction: column; }
  .skeleton-sidebar {
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid rgba(106,48,24,0.55);
    padding: 24px 16px 18px;
  }
  .skeleton-main { padding: 20px 16px 24px; }
  .skeleton-chip-row { flex-wrap: wrap; }
  .skeleton-chip-wide { width: min(240px, 62vw); }
  .skeleton-title { width: 88%; height: 46px; }
  .skeleton-title-short { width: 62%; height: 40px; }
}

#app {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow-x: clip;
}

/* ── Sidebar ─────────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#sidebarOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 240;
}

.sidebar-header {
  position: relative;
}

.sidebar-close {
  display: none;
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
}
.sidebar-close:hover { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }

.sidebar-header {
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--border);
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Stentiga', sans-serif;
  font-size: 17px;
  font-weight: normal;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  color: var(--text);
}
.logo-mark { flex-shrink: 0; display: block; }

.progress-bar-wrap {
  background: var(--border);
  border-radius: 100px;
  height: 4px;
  margin-bottom: 8px;
}

.progress-bar {
  background: var(--accent);
  height: 4px;
  border-radius: 100px;
  width: 0%;
  transition: width 0.4s ease;
}

.progress-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

#weekNav {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0 24px;
}

.week-group { margin-bottom: 4px; }

.week-label {
  font-family: 'Stentiga', sans-serif;
  font-size: 17px;
  font-weight: normal;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  padding: 12px 24px 4px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.week-label-due {
  font-family: 'Noto Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--text-muted);
  opacity: 0.7;
  white-space: nowrap;
}

.lesson-nav-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 24px;
  cursor: pointer;
  transition: background 0.15s;
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  line-height: 1.4;
}

.lesson-nav-item:hover { background: var(--surface2); color: var(--text); }
.lesson-nav-item.active { background: var(--accent-dim); color: var(--text); }
.lesson-nav-item.active .nav-dot { background: var(--accent); margin-top: 6px; }
.lesson-nav-item.done .nav-dot { background: var(--rose); }

/* Continued lessons (carried over from an earlier week) — dimmed + tagged */
.lesson-nav-item.continued { opacity: 0.5; }
.lesson-nav-item.continued .nav-title { font-style: italic; }
.lesson-nav-item.continued .nav-dot { background: transparent; border: 1px solid var(--border); }
.nav-title { flex: 1; }
.nav-cont-tag {
  flex-shrink: 0;
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-top: 3px;
}

.nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
  margin-top: 6px;
  transition: background 0.2s;
}

/* ── Main wrap + tabs ────────────────────────────────────── */
#mainWrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-x: clip;
  min-height: 0;
  min-width: 0;
}

.main-tabs {
  display: flex;
  justify-content: center;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg);
}
/* Centered row (same max-width + gutter as the views) holding tabs on the left
   and the project picker on the right, so both align to the content edges. */
.main-tabs-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
  width: 100%;
  max-width: var(--content-w);
  min-height: 54px; /* keep nav height constant whether tabs or the dropdown shows */
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
.mobile-sidebar-toggle {
  display: none;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.mobile-sidebar-toggle:hover { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.mobile-sidebar-toggle-icon { display: block; }
.mobile-sidebar-close-icon { display: none; }
.sidebar-open .mobile-sidebar-open-icon { display: none; }
.sidebar-open .mobile-sidebar-close-icon { display: block; }
body.sidebar-open .mobile-sidebar-toggle { visibility: hidden; }
/* Whichever of these two is showing (never both) carries the auto margin that
   pins the project picker + profile cluster to the right edge of the row. Doing
   it here rather than on .project-picker means the cluster stays right-aligned
   even when the picker is narrow, empty, or has its margin overridden. */
.main-tabs-inner { display: flex; align-items: center; min-width: 0; margin-right: auto; }
.main-tabs-inner.hidden { display: none; }
.tabs-select-wrap { flex-shrink: 0; margin-right: auto; }

.tab-btn {
  padding: 16px 0;
  margin-right: 32px;
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s;
}

.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--text); font-weight: 700; border-bottom-color: var(--accent); }

#main {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-height: 0;
  min-width: 0;
}

.tab-panel {
  display: none;
  height: 100%;
  overflow-y: auto;
  overflow-x: clip;
  padding: 0;
  min-height: 0;
  min-width: 0;
}

.tab-panel.active {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Every view shares one centered column (matches .main-tabs-inner) */
#lessonView, #questionsView, #assignmentsView, #notesView, #membersView, #quizView, #projectView, #scopeInsightsView {
  flex: 1 0 auto;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 40px 24px 32px;
  box-sizing: border-box;
  overflow-x: clip;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.page-footer {
  flex-shrink: 0;
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  margin-top: auto;
  padding: 8px 24px 8px;
  border-top: 1px solid var(--border);
  font-family: 'Stentiga', sans-serif;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  opacity: 0.82;
}

/* ── Lesson view ─────────────────────────────────────────── */
/* width/centering/padding come from the shared view rule above */

/* ── Members directory ───────────────────────────────────── */
/* Search + Process + role filters stick to the top while scrolling cards */
.member-sticky {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--bg);
  padding: 12px 0 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.member-search-row { display: flex; gap: 8px; align-items: stretch; }
.member-search-row .member-search { flex: 1; }
.member-search-btn { flex-shrink: 0; }
.member-search {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.member-search:focus { border-color: var(--accent); }
.member-search::placeholder { color: var(--text-muted); }

.member-facets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.member-facet {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.member-facet:hover { color: var(--text); background: var(--surface2); }
.member-facet.active { color: var(--text); background: var(--accent-dim); border-color: var(--accent); }
.facet-n { font-size: 11px; opacity: 0.7; }

.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.member-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.member-head { display: flex; align-items: flex-start; gap: 8px; }
.member-avatar {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.member-id { flex: 1; min-width: 0; }
.member-name { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.3; }
.member-loc { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.member-roles { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.member-role {
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
  padding: 1px 8px; border-radius: 100px; white-space: nowrap;
}
.role-mentor { color: var(--terra); background: var(--terra-dim); }
.role-founder { color: var(--accent); background: var(--accent-dim); }
.role-cohort { color: var(--text-muted); background: var(--surface2); }
.role-supporter, .role-sponsor, .role-staff { color: var(--rose); background: var(--rose-dim); }
.role-member { color: var(--text-muted); background: var(--surface2); }

/* Faceted filter groups (Type / Cohort) */
.member-facet-group { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.facet-label {
  flex-shrink: 0; font-family: 'Stentiga', sans-serif; font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-muted); opacity: 0.75; width: 56px;
}
.member-facet-group .member-facets { margin-top: 0; flex: 1; }

.member-headline { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.4; }
.member-bio { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.member-summary {
  font-size: 13px; line-height: 1.6; color: var(--text-muted);
  background: var(--surface2); border-radius: 8px; padding: 12px;
}
.member-summary-label {
  display: inline-block; font-family: 'Stentiga', sans-serif; font-size: 10px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--terra); margin-right: 8px;
}
.member-li-summary .member-summary-label { color: var(--accent); }
.member-links { display: flex; gap: 16px; margin-top: 4px; }
.member-link { font-size: 13px; font-weight: 500; color: var(--accent); text-decoration: none; }
.member-link:hover { text-decoration: underline; }

/* Member toolbar: search + process button */

/* Per-member paste drawer */
.member-paste { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 8px; }
.member-paste > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  cursor: pointer; list-style: none;
  font-size: 12px; font-weight: 500; color: var(--text-muted);
}
.member-paste > summary::-webkit-details-marker { display: none; }
.member-paste[open] > summary .chev { transform: scaleY(-1); }
.member-paste.has-paste > summary { color: var(--terra); }
.paste-dot { color: var(--terra); font-size: 9px; vertical-align: middle; }
.member-paste-body { margin-top: 8px; }
.member-paste-area {
  width: 100%; box-sizing: border-box;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px; color: var(--text); font-size: 13px; line-height: 1.6;
  font-family: inherit; resize: vertical; min-height: 64px; outline: none;
}
.member-paste-area:focus { border-color: var(--accent); }
.member-paste-area::placeholder { color: var(--text-muted); }
.member-paste-save { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-top: 6px; height: 16px; }
.member-paste-save.saved { color: var(--rose); }
.member-paste-save:empty { display: none; }

.lesson-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
/* Launchpad link rides on the chips line, pushed right, centered with the chips —
   frees the title below to use the full width before wrapping. */
.lesson-meta-link { margin-left: auto; white-space: nowrap; }

.tag {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--surface2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.tag.week { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }

.lesson-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.lesson-title-row .lesson-title { margin-bottom: 0; }
.lesson-title {
  font-family: 'Stentiga', sans-serif;
  font-size: 32px;
  font-weight: normal;
  letter-spacing: 0.3px;
  line-height: 1.2;
  margin-bottom: 32px;
  color: var(--text);
}
.lesson-mobile-nav {
  display: none;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}
.lesson-step-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.lesson-step-btn:hover { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.lesson-step-btn:disabled { opacity: 0.4; cursor: default; }

/* ── Sections ────────────────────────────────────────────── */
.section { margin-bottom: 32px; }

.section-header {
  font-family: 'Stentiga', sans-serif;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* PATTERN — subtitle next to a title at this size. Always: Noto Sans, 12px, weight 400,
   sentence case (text-transform none), muted. Reuse this exact spec for every
   title-adjacent subtitle so they read consistently. */
.section-hint, .week-progress-sub {
  font-family: 'Noto Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  opacity: 0.8;
}

/* ── Body text ───────────────────────────────────────────── */
.lesson-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text);
  user-select: text;
}

.lesson-body p { margin-bottom: 8px; }
.lesson-body p:last-child { margin-bottom: 0; }
.lesson-body .body-heading {
  font-family: 'Stentiga', sans-serif;
  font-size: 17px;
  font-weight: normal;
  margin-top: 28px;
  margin-bottom: 6px;
  color: var(--text);
  letter-spacing: 0.3px;
}
.lesson-body .body-heading:first-child { margin-top: 0; }
/* Long-sentence "headings" (e.g. a disclaimer Circle tagged as an h2): use the body
   font, emphasized, so they read as a note rather than a giant decorative title. */
.lesson-body .body-heading.body-heading-longform {
  font-family: 'Noto Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.5;
}
/* Section labels — headings that have no body content directly below them */
.lesson-body .body-section-label {
  font-size: 13px;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 2px;
  margin-top: 24px;
}
/* Level-2 section label (preceded AND followed by another heading)
   opacity 0.75 → rendered ~5.2:1 on --bg (#0e0806). AA pass for 11px text. */
.lesson-body .body-section-label.body-section-label-sub {
  font-size: 11px;
  letter-spacing: 1.4px;
  color: var(--text-muted);
  opacity: 0.75;
  margin-top: 2px;
}
.lesson-body .body-section-label + .body-heading,
.lesson-body .body-section-label-sub + .body-heading { margin-top: 4px; }
.lesson-body .body-question {
  background: var(--accent-dim);
  border-left: 3px solid var(--accent);
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
  margin: 20px 0 8px;
  color: var(--text);
  font-style: italic;
  font-weight: 500;
}

/* Inline answerable question — same typable format as the Questions tab, in context */
.lesson-body .body-question.q-inline {
  display: block;
  font-style: normal;
  padding: 16px;
  border-radius: 0 8px 8px 0;
}
.lesson-body .body-question.q-inline .question-text { font-style: normal; font-weight: 600; margin-bottom: 12px; }
.lesson-body .body-question.q-inline.answered { border-left-color: var(--terra); background: var(--terra-dim); }
.lesson-body .body-question.q-jumped { box-shadow: 0 0 0 2px var(--accent); }
/* Don't reserve empty space below the field — keep box padding symmetric top/bottom */
.lesson-body .body-question.q-inline .question-save { height: auto; margin-top: 8px; }
.lesson-body .body-question.q-inline .question-save:empty { display: none; }

/* Add-your-own-question (Questions tab, per lesson group) */
.lq-add { margin-top: 16px; }
.lq-add-btn {
  background: none; border: 1px dashed var(--border); border-radius: 8px;
  padding: 8px 12px; font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--text-muted); cursor: pointer; transition: all 0.15s;
}
.lq-add-btn:hover { color: var(--text); border-color: var(--text-muted); }
.lq-add-form { display: flex; gap: 8px; align-items: stretch; }
.lq-add-form.hidden, .lq-add-btn.hidden { display: none; }
.lq-add-input {
  flex: 1; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px; color: var(--text);
  font-family: inherit; font-size: 14px;
}
.lq-add-input:focus { outline: none; border-color: var(--accent); }
.lq-add-cancel, .item-edit-cancel {
  flex-shrink: 0; background: none; border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 16px; color: var(--text-muted);
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.lq-add-cancel:hover, .item-edit-cancel:hover { color: var(--text); border-color: var(--text-muted); }

.lesson-body .body-subpoint {
  padding-left: 22px;
  position: relative;
  font-size: 14px;
  color: rgba(250, 243, 238, 0.68);
  margin-bottom: 5px;
  line-height: 1.6;
}
.lesson-body .body-subpoint::before {
  content: '–';
  position: absolute;
  left: 0;
  color: rgba(250, 243, 238, 0.40);
  font-weight: 700;
}
/* A bold-only bullet on Circle (a sub-header inside a nested list, e.g.
   "Patents" under "IPs you can register") — real emphasis, not a section title. */
.lesson-body .body-outline-bold {
  font-weight: 700;
  color: var(--text, #faf3ee);
}
/* More breathing room after the last item in a bullet/action group */
.lesson-body .body-subpoint + p,
.lesson-body .body-subpoint + .body-heading,
.lesson-body .body-subpoint + .body-section-label,
.lesson-body .body-subpoint + .body-question,
.lesson-body .body-subpoint + .body-list-intro,
.lesson-body .body-subpoint + .body-numbered,
.lesson-body .body-subpoint + .body-overview { margin-top: 18px; }
.lesson-body .body-action + p,
.lesson-body .body-action + .body-heading,
.lesson-body .body-action + .body-section-label,
.lesson-body .body-action + .body-question,
.lesson-body .body-action + .body-numbered,
.lesson-body .body-action + .body-overview { margin-top: 18px; }

/* Action tasks: bolder, full-brightness, accent arrow */
.lesson-body .body-action {
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}
/* Consecutive actions: no extra gap between them */
.lesson-body .body-action + .body-action { margin-top: 0; }
/* Consecutive subpoints: same */
.lesson-body .body-subpoint + .body-subpoint { margin-top: 0; }
.lesson-body .body-action::before {
  content: '→';
  color: var(--accent);
  font-weight: 400;
}

.lesson-body .body-kv { letter-spacing: 0.1px; }

.lesson-body .body-list-intro {
  font-weight: 500;
  font-style: italic;
  color: var(--text-muted);
  margin-top: 4px;
  margin-bottom: 4px;
}

/* Numbered list items — hanging indent so "1." stays left, text wraps aligned */
.lesson-body .body-numbered {
  padding-left: 28px;
  text-indent: -28px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-top: 16px;
  margin-bottom: 4px;
  line-height: 1.5;
}
/* A numbered intro ("1. … :") is still part of the 1·2·3 sequence — keep it
   visually identical to other numbered items so the enumeration reads cleanly. */
.lesson-body .body-numbered-intro {
  font-style: normal;
  font-weight: 600;
  color: var(--text);
  font-size: 15px;
}
/* Content that follows a numbered item indents to the text start column (28px) */
/* All content belonging to a numbered item is wrapped in .numbered-group and
   indented together (aligned to the number's text column) so the whole block
   reads as one unit under that number. */
.lesson-body .numbered-group {
  padding-left: 28px;
  margin-top: 4px;
}
/* First heading inside a group sits tight under the number (no extra top gap) */
.lesson-body .numbered-group > .body-heading:first-child { margin-top: 4px; }

/* Overview card: heading + key-value sub-items grouped visually */
.lesson-body .body-overview {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 16px 0;
}
.lesson-body .body-overview:first-child { margin-top: 0; }
/* Spacing after overview cards so following content isn't cramped */
.lesson-body .body-overview + p,
.lesson-body .body-overview + .body-subpoint,
.lesson-body .body-overview + .body-action,
.lesson-body .body-overview + .body-list-intro,
.lesson-body .body-overview + .body-question { margin-top: 16px; }
.lesson-body .body-overview + .body-heading,
.lesson-body .body-overview + .body-section-label { margin-top: 24px; }
.lesson-body .overview-heading {
  font-family: 'Stentiga', sans-serif;
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.lesson-body .overview-kv {
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  padding-left: 12px;
  border-left: 2px solid var(--border);
  margin-bottom: 6px;
}
.lesson-body .overview-kv:last-child { margin-bottom: 0; }

/* ── Video clips ─────────────────────────────────────────── */
.clip-list { display: flex; flex-direction: column; gap: 16px; }

.clip-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ── Interleaved lesson flow (A1) ── */
.flow-embed {
  margin: 16px 0;
}
.flow-embed-image img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.flow-embed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.flow-embed-head .flow-tag { margin-bottom: 0; }
.flow-video-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Read aloud (ElevenLabs) */
.read-aloud-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--border);
  color: var(--accent);
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 16px;
}
.read-aloud-btn:hover { background: var(--accent-dim); border-color: var(--accent); }
.read-aloud-btn.playing { background: var(--accent-dim); border-color: var(--accent); }
.read-aloud-btn.paused { background: var(--terra-dim); border-color: var(--terra); color: var(--terra); }
.read-aloud-btn.loading { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); animation: ra-pulse 0.9s ease-in-out infinite; }
@keyframes ra-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
/* Icon-only variant for headers/questions/sections, sits in the upper-right */
.read-aloud-btn.ra-mini { padding: 4px; margin: 0; border-radius: 6px; line-height: 0; }
.section-header .read-aloud-btn.ra-mini { margin-left: auto; }

.lesson-play-all {
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 8px 12px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.lesson-play-all svg { flex: none; }
.lesson-play-all.playing { background: var(--surface2); color: var(--accent); }
.q-inline { position: relative; }
.q-inline .q-read { position: absolute; top: 8px; right: 8px; }
.q-inline .question-text { padding-right: 32px; }
/* Resource read-aloud: right-aligned icon in the corner, not a labeled button */
.ra-row { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.resource-from { font-size: 12px; color: var(--accent); margin-top: 4px; }
/* Per-section read-aloud icon, right of the heading */
.lesson-body .body-heading { position: relative; padding-right: 28px; }
.lesson-body .body-heading .bh-read { position: absolute; top: 0; right: 0; }
/* Karaoke: the WORD currently being read — same look as the video transcript's active
   cue (terra tint + weight). Works in every browser (just a class on a span). */
.tts-cue { border-radius: 3px; transition: background 0.15s, color 0.15s; }
.tts-cue.active {
  background: var(--terra-dim);
  color: var(--text);
  font-weight: 600;
}

/* Read-aloud highlight — matches the video transcript's active-cue look
   (terra tint, soft rounded edge, smooth fade) so reading an article feels the
   same as following a video. */
.tts-active {
  background: var(--terra-dim);
  color: var(--text);
  border-radius: 4px;
  box-shadow: 0 0 0 4px var(--terra-dim);
  transition: background 0.15s, box-shadow 0.15s;
}
.article-transcript p.tts-active {
  background: var(--terra-dim);
  border-radius: 4px;
  box-shadow: 0 0 0 4px var(--terra-dim);
}
/* Don't double up on the lesson card's own 24px padding at the very top/bottom. */
.lesson-body > .flow-embed:first-child { margin-top: 0; }
.lesson-body > .flow-embed:last-child { margin-bottom: 0; }
.flow-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
  color: var(--accent);
  background: var(--accent-dim);
}
.flow-videos {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.flow-videos-head {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.flow-parked {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}
.flow-parked-head {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #9a8a85);
  margin-bottom: 16px;
}

.clip-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  background: #000;
}

.clip-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

.clip-embed .wistia_embed,
.clip-embed .wistia_embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

/* Facade poster showing the actual frame at the clip's start timestamp */
.clip-facade {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
  padding: 0;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.clip-facade::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(rgba(14,8,6,0.15), rgba(14,8,6,0.45));
  transition: background 0.15s;
}
.clip-facade:hover::before { background: linear-gradient(rgba(14,8,6,0.05), rgba(14,8,6,0.35)); }
.clip-play {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; padding-left: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: transform 0.15s;
}
.clip-facade:hover .clip-play { transform: scale(1.08); }
.clip-facade-time {
  position: absolute;
  bottom: 12px; right: 12px;
  background: rgba(14,8,6,0.8);
  color: var(--text);
  font-size: 12px; font-weight: 600;
  padding: 1px 8px; border-radius: 100px;
}

.clip-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.clip-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: auto;
}
.clip-label-mobile,
.transcript-toggle-mobile { display: none; }

.transcript-toggle {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  margin-left: 16px;
  font-family: inherit;
}

.transcript-toggle:hover { text-decoration: underline; }

.clip-transcript {
  display: none;
  padding: 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  max-height: 280px;
  overflow-y: auto;
  scroll-behavior: smooth;
  user-select: text;
  cursor: text;
}

.clip-transcript.open { display: block; }

.transcript-flow { margin: 0; }

.transcript-cue {
  display: inline;
  border-radius: 3px;
  transition: background 0.15s, color 0.15s;
}

.transcript-cue.active {
  background: var(--terra-dim);
  color: var(--text);
  font-weight: 600;
}

.transcript-plain { line-height: 1.75; }

/* ── Resources ───────────────────────────────────────────── */
.article-list { display: flex; flex-direction: column; gap: 8px; }

.article-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.article-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
}

.article-icon {
  flex-shrink: 0;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

/* Auto-linked URLs in body content */
.body-link {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.body-link:hover { color: var(--text); }
/* Article links: terra color + external-link marker added via ::after so the
   read-aloud voice never speaks the arrow. */
.art-link { color: var(--terra); }
.art-link:hover { color: var(--accent); }
.art-link::after { content: " \2197"; font-size: 0.85em; opacity: 0.7; }

.article-text { flex: 1; min-width: 0; }

.article-title-link {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.article-title-link:hover { color: var(--accent); text-decoration: underline; }

.article-domain { font-size: 14px; font-weight: 500; color: var(--text-muted); margin-top: 2px; }

/* Read-aloud button stays in the header row. Checklist progress now lives in the
   checklist title block so the header doesn't get crowded on mobile. */
.article-head-read { flex-shrink: 0; }
.checklist-count-badge {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: normal;
}
.resource-title-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.article-expand {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  display: flex;
  align-items: center;
}
.article-expand:hover { color: var(--text); background: var(--surface2); }

/* Shared outline chevron (down collapsed, up open) — flip via scaleY, never sideways */
.chev {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: inline-block;
  background-color: currentColor;
  opacity: 0.7;
  -webkit-mask: center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  mask: center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  transition: transform 0.2s ease;
}
.article-card.open .chev { transform: scaleY(-1); }

.article-content {
  display: none;
  padding: 16px;
  border-top: 1px solid var(--border);
  width: 100%;
  box-sizing: border-box;
}
.article-card.open .article-content { display: block; }

.article-transcript {
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-muted);
  max-height: 320px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.article-transcript p { margin-bottom: 10px; max-width: none; }
.article-transcript p:last-child { margin-bottom: 0; }

/* Checklist transcript (TWiST Startup Checklist) */
.checklist-transcript .checklist-title { font-weight: 700; color: var(--text); font-size: 15px; margin-bottom: 4px; }
.checklist-transcript .checklist-byline { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.checklist-transcript .checklist-head {
  font-family: 'Stentiga', sans-serif; font-size: 13px; letter-spacing: 0.5px;
  color: var(--terra); margin: 20px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.checklist-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 0; color: var(--text); cursor: pointer; line-height: 1.5;
}
.checklist-item input { margin-top: 3px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.checklist-item.done span { color: var(--text-muted); text-decoration: line-through; }
.checklist-progress {
  font-size: 12px; font-weight: 600; color: var(--terra);
  background: var(--terra-dim); border-radius: 6px; padding: 6px 10px;
  display: inline-block; margin-bottom: 12px;
}

.article-empty { font-size: 13px; color: var(--text-muted); }
.article-empty a { color: var(--accent); text-decoration: none; }
.article-empty a:hover { text-decoration: underline; }

/* Per-resource notes */
.resource-note { margin-top: 16px; }
.resource-note-area {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
  font-family: inherit;
  resize: vertical;
  min-height: 56px;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.resource-note-area:focus { border-color: var(--accent); }
.resource-note-area::placeholder { color: var(--text-muted); }
.resource-note-save { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-top: 6px; height: 18px; }
.resource-note-save.saved { color: var(--rose); }
/* Collapse the status line when empty so drawer bottom padding matches the top */
.resource-note-save:empty { display: none; }

/* Learning checkboxes (mark video/resource reviewed) */
.learn-check { flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* "Mark lesson content as read" — its own line below the body */
.content-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
}

/* Reusable primary CTA (DESIGN.md §11): filled accent + white */
.primary-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
}
.primary-cta:hover { background: var(--rose); border-color: var(--rose); }
.lesson-complete-cta { margin-top: 16px; }

/* ── Quiz ─────────────────────────────────────────────────── */
.quiz-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}
.quiz-summary {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; cursor: pointer; list-style: none;
}
.quiz-summary::-webkit-details-marker { display: none; }
.quiz-summary-title { flex: 1; font-family: 'Stentiga', sans-serif; font-size: 16px; font-weight: normal; letter-spacing: 0.3px; color: var(--text); }
.quiz-summary .chev { flex-shrink: 0; }
.quiz-card[open] .quiz-summary .chev { transform: scaleY(-1); }
.quiz-status-new, .quiz-status-prog { font-size: 12px; color: var(--text-muted); }
.quiz-score { font-size: 13px; font-weight: 700; color: var(--terra); }

.quiz-body { padding: 0 16px 16px; }
.quiz-q { padding-top: 16px; border-top: 1px solid var(--border); margin-top: 16px; }
.quiz-q:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.quiz-q-text { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.5; margin-bottom: 12px; }
.quiz-opts { display: flex; flex-direction: column; gap: 8px; }
.quiz-opt {
  display: flex; align-items: flex-start; gap: 8px;
  width: 100%; text-align: left;
  padding: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit; font-size: 14px; line-height: 1.5;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.quiz-opt:hover:not(:disabled) { border-color: var(--accent); }
.quiz-opt.picked { border-color: var(--accent); background: var(--accent-dim); }
.quiz-opt.correct { border-color: var(--terra); background: var(--terra-dim); }
.quiz-opt.wrong { border-color: var(--rose); background: var(--rose-dim); }
.quiz-opt:disabled { cursor: default; }
.quiz-opt-letter {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--border); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.quiz-opt.correct .quiz-opt-letter { background: var(--terra); color: #1a0e06; }
.quiz-opt.wrong .quiz-opt-letter { background: var(--rose); color: #fff; }
.quiz-opt-text { flex: 1; }
.quiz-fb { margin-top: 8px; font-size: 13px; line-height: 1.5; }
.quiz-fb.right { color: var(--terra); }
.quiz-fb.wrong { color: var(--text-muted); }
.quiz-actions { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.quiz-retry {
  padding: 12px 16px; border-radius: 8px;
  border: 1px solid var(--accent); background: var(--accent-dim); color: var(--accent);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.quiz-retry:hover { background: var(--accent); color: #fff; }
.quiz-result { font-size: 13px; font-weight: 600; color: var(--text); }

/* Week-level check CTA + score in the sticky header */
.quiz-week-check { padding: 6px 12px; font-size: 12px; }
.quiz-week-score { font-size: 13px; font-weight: 700; color: var(--terra); white-space: nowrap; }

/* "Find in lesson" link in answer feedback */
.quiz-source-link {
  border: none; background: none; padding: 0; margin-left: 4px;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--accent);
  cursor: pointer; white-space: nowrap;
}
.quiz-source-link:hover { text-decoration: underline; }

/* Secondary "Clear answers" CTA */
.quiz-clear {
  padding: 12px 16px; border-radius: 8px;
  border: 1px solid var(--border); background: none; color: var(--text-muted);
  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s;
}
.quiz-clear:hover { color: var(--text); background: var(--surface2); }

/* Flash the spot in the lesson a quiz answer came from */
.quiz-flash { animation: quizFlash 2.2s ease; border-radius: 6px; }
@keyframes quizFlash {
  0% { background: transparent; box-shadow: none; }
  12% { background: var(--accent-dim); box-shadow: -8px 0 0 var(--accent-dim), 8px 0 0 var(--accent-dim); }
  100% { background: transparent; box-shadow: none; }
}
.learn-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  margin-right: 16px;
}

/* Transcript confidence badge */
.conf-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 1px 8px;
  border-radius: 100px;
  margin-left: 8px;
  cursor: help;
  vertical-align: middle;
}
.conf-high { color: var(--terra); background: var(--terra-dim); }
.conf-moderate { color: var(--text-muted); background: var(--surface2); }
.conf-low { color: var(--accent); background: var(--accent-dim); }
.conf-none { color: var(--text-muted); background: transparent; border: 1px solid var(--border); }
.archive-link { color: var(--accent); text-decoration: none; font-weight: 500; }
.archive-link:hover { text-decoration: underline; }
.redirect-note { color: var(--text-muted); font-size: 12px; }
.redirect-note a { color: var(--accent); text-decoration: none; }
.redirect-note a:hover { text-decoration: underline; }

/* Per-week learning progress (top of lesson view) */
.week-progress {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  padding: 16px 0;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.week-progress-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.week-progress-label {
  font-family: 'Stentiga', sans-serif;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* .week-progress-sub styled by the shared title-subtitle pattern above */
.week-progress-count { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; }
.week-progress-foot { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.week-progress-wrap { background: var(--border); border-radius: 100px; height: 4px; }
.week-progress-bar { background: var(--rose); height: 4px; border-radius: 100px; transition: width 0.4s ease; }

/* ── Questions ───────────────────────────────────────────── */
.question-list { display: flex; flex-direction: column; gap: 16px; }

.question-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: box-shadow 0.4s;
}

.question-item.answered { border-color: rgba(200,64,48,0.5); }

.question-item.q-jumped {
  box-shadow: 0 0 0 2px var(--accent);
}

.q-item-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}

.question-text {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
}

.q-jump-btn {
  flex-shrink: 0;
  background: var(--accent-dim);
  border: 1px solid rgba(217,80,56,0.3);
  padding: 4px 6px;
  cursor: pointer;
  color: var(--accent);
  border-radius: 5px;
  opacity: 1;
  transition: background 0.15s, border-color 0.15s;
  margin-top: 0;
  line-height: 0;
}

.q-jump-btn:hover {
  background: rgba(217,80,56,0.25);
  border-color: var(--accent);
}

.answer-area {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.15s;
  outline: none;
}

.answer-area:focus { border-color: var(--accent); }
.answer-area::placeholder { color: var(--text-muted); }

.question-save { font-size: 14px; font-weight: 500; color: var(--text-muted); margin-top: 6px; height: 20px; }
.question-save.saved { color: var(--rose); }

/* ── Add question ────────────────────────────────────────── */
.add-question-form {
  display: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 16px;
}

.add-question-form.open { display: block; }

.add-question-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  font-family: inherit;
  outline: none;
  margin-bottom: 8px;
  transition: border-color 0.15s;
}

.add-question-input:focus { border-color: var(--accent); }
.add-question-input::placeholder { color: var(--text-muted); }

.add-q-actions { display: flex; gap: 8px; }

.btn-ghost {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-muted);
  transition: all 0.15s;
  font-family: inherit;
}

.btn-ghost:hover { color: var(--text); border-color: var(--text-muted); }

.btn-primary {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
  transition: all 0.15s;
  font-family: inherit;
}

.btn-primary:hover { background: var(--accent); color: var(--text); }

/* ── Notes textarea ──────────────────────────────────────── */
.notes-area {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  font-family: inherit;
  resize: vertical;
  min-height: 120px;
  transition: border-color 0.15s;
  outline: none;
}

.notes-area:focus { border-color: var(--accent); }
.notes-area::placeholder { color: var(--text-muted); }

.save-indicator {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 6px;
  height: 20px;
}

.save-indicator.saved { color: var(--rose); }

/* ── Inline highlight marks ──────────────────────────────── */
.hl-mark {
  background: rgba(224,146,90,0.25);
  color: var(--text);
  border-bottom: 2px solid var(--terra);
  border-radius: 2px;
  cursor: pointer;
  padding: 0 1px;
  transition: background 0.15s;
}

/* Hovering any fragment lights up the WHOLE highlight (all its fragments). */
.hl-mark:hover, .hl-mark.hl-hover { background: rgba(224,146,90,0.45); }

/* In transcript cue flows, consecutive marks must appear as one continuous band — no gaps. */
.article-transcript .hl-mark,
.clip-transcript .hl-mark { border-radius: 0; padding: 0; }

/* ── Highlight boundary drag handles ── */
.hl-handle {
  position: fixed;
  z-index: 150;                /* above page content, BELOW the note popover (200) + tooltip (1000) */
  width: 16px;
  margin-left: -8px;           /* center the grip on the boundary */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  touch-action: none;          /* let pointer drag work on touch */
}
.hl-handle-right { margin-left: -8px; }
.hl-handle-grip {
  width: 4px;
  height: 100%;
  min-height: 18px;
  background: var(--terra);
  border-radius: 3px;
  box-shadow: 0 0 0 3px rgba(224,146,90,0.25);
}
.hl-handle-grip::after {
  content: '';
  position: absolute;
  top: -7px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--terra);
}
.hl-handle-left .hl-handle-grip::after { left: -4px; }
.hl-handle-right .hl-handle-grip::after { right: -4px; }
.hl-pop-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* Live highlight shown while you're writing the note for a selection */
.pending-highlight {
  background: rgba(224,146,90,0.45);
  box-shadow: 0 0 0 2px rgba(224,146,90,0.45);
  border-radius: 2px;
  color: var(--text);
}
/* Cross-cue pending selection: applied to each cue span when surroundContents can't wrap */
.transcript-cue.cue-pending {
  background: rgba(224,146,90,0.35);
  border-radius: 2px;
  outline: 1px solid rgba(224,146,90,0.6);
  outline-offset: -1px;
}

/* ── Highlight popover ───────────────────────────────────── */
.hl-popover {
  position: fixed;
  z-index: 200;
  background: var(--surface2);
  border: 1px solid var(--terra);
  border-radius: var(--radius);
  padding: 12px 16px;
  min-width: 200px;
  max-width: 320px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.hl-pop-note {
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 10px;
}

.hl-pop-empty { color: var(--text-muted); font-style: italic; }

.hl-pop-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.hl-pop-edit, .hl-pop-delete, .hl-pop-save-edit, .hl-pop-cancel-edit {
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
}

.hl-pop-edit { color: var(--accent); }
.hl-pop-edit:hover { text-decoration: underline; }
.hl-pop-delete { color: var(--text-muted); }
.hl-pop-delete:hover { color: var(--accent); }
.hl-pop-save-edit { color: var(--accent); }
.hl-pop-save-edit:hover { text-decoration: underline; }
.hl-pop-cancel-edit { color: var(--text-muted); }
.hl-pop-cancel-edit:hover { color: var(--text); }

.hl-pop-textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  font-family: inherit;
  resize: none;
  outline: none;
  margin-bottom: 8px;
  transition: border-color 0.15s;
}

.hl-pop-textarea:focus { border-color: var(--accent); }

/* ── Notes view highlight cards ──────────────────────────── */
.hl-note-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

.hl-note-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--terra);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 16px;
}

.hl-note-source-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.hl-note-source {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
.hl-note-goto {
  flex: none;
  background: none;
  border: 1px solid var(--border);
  color: var(--accent);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.hl-note-goto:hover { background: var(--accent-dim); border-color: var(--accent); }
/* Flash a highlight when jumped to from the Notes tab */
.hl-mark.hl-flash {
  background: rgba(224,146,90,0.7);
  box-shadow: 0 0 0 2px var(--terra);
  transition: background 0.2s, box-shadow 0.2s;
}

.hl-note-quote {
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 6px;
}

.hl-note-body {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.6;
}

.hl-note-empty { color: var(--text-muted); font-style: italic; font-weight: 400; }

.hl-note-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.hl-note-edit-btn, .hl-note-save-btn, .hl-note-cancel-btn, .hl-note-delete-btn,
.note-freeform-edit-btn, .note-freeform-save-btn, .note-freeform-cancel-btn, .note-freeform-delete-btn,
.res-note-edit-btn, .res-note-save-btn, .res-note-cancel-btn, .res-note-delete-btn {
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
}

.hl-note-edit-btn, .hl-note-save-btn, .note-freeform-edit-btn, .note-freeform-save-btn, .res-note-edit-btn, .res-note-save-btn { color: var(--accent); }
.hl-note-edit-btn:hover, .hl-note-save-btn:hover, .note-freeform-edit-btn:hover, .note-freeform-save-btn:hover, .res-note-edit-btn:hover, .res-note-save-btn:hover { text-decoration: underline; }
.hl-note-cancel-btn, .note-freeform-cancel-btn, .res-note-cancel-btn { color: var(--text-muted); }
.hl-note-cancel-btn:hover, .note-freeform-cancel-btn:hover, .res-note-cancel-btn:hover { color: var(--text); }
.hl-note-delete-btn, .note-freeform-delete-btn, .res-note-delete-btn { color: var(--text-muted); }
.hl-note-delete-btn:hover, .note-freeform-delete-btn:hover, .res-note-delete-btn:hover { color: var(--accent); }

.hl-note-edit-area, .note-freeform-edit-area { margin-top: 8px; }

.hl-note-edit-textarea, .note-freeform-textarea {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}

.hl-note-edit-textarea:focus, .note-freeform-textarea:focus { border-color: var(--accent); }

.note-freeform-block { margin-bottom: 16px; }

.note-group-meta { flex: 1; min-width: 0; }
.note-group-weeks { font-size: 14px; font-weight: 500; color: var(--text-muted); margin-top: 2px; }

/* ── Complete button ─────────────────────────────────────── */
.complete-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  transition: all 0.15s;
  font-family: inherit;
}

.complete-btn:hover { border-color: var(--rose); color: var(--rose); background: var(--rose-dim); }
.complete-btn.done { border-color: var(--rose); color: var(--rose); background: var(--rose-dim); }

/* "Mark lesson as complete" — own line at the bottom of the lesson content box */
.complete-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }

/* Jump-to-video link on body episode citations */
.jump-to-video {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
}
.jump-to-video:hover { text-decoration: underline; }

/* ── Questions view ──────────────────────────────────────── */
/* width/centering/padding come from the shared view rule near the top.
   Sticky week headers pin to the panel top; the view's 40px top padding
   scrolls away above them. */

/* Assignments tab (weekly deliverables from the syllabus) */
.program-goal {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}
.program-goal-label {
  display: inline-block;
  font-family: 'Stentiga', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--terra);
  margin-right: 8px;
}

.assignment-list { display: flex; flex-direction: column; gap: 16px; }

.assignment-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: border-color 0.15s;
}
.assignment-item.done { border-color: rgba(200,64,48,0.5); }

.assignment-main {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}
.assignment-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}
.assignment-text {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
}
.assignment-item.done .assignment-text {
  color: var(--text-muted);
  text-decoration: line-through;
}

.assignment-notes {
  width: 100%;
  margin-top: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  font-family: inherit;
  resize: vertical;
  min-height: 56px;
  transition: border-color 0.15s;
  outline: none;
}
.assignment-notes:focus { border-color: var(--accent); }
.assignment-notes::placeholder { color: var(--text-muted); }

.assignment-save { font-size: 14px; font-weight: 500; color: var(--text-muted); margin-top: 6px; height: 20px; }
.assignment-save.saved { color: var(--rose); }

/* Activity items (folded in from lesson companion pages) */
.assignment-item.activity { border-left: 2px solid var(--terra-dim); }
.assignment-detail {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 8px;
  padding-left: 26px;
}
.assignment-source {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  margin-top: 8px;
}
.assignment-source:hover { text-decoration: underline; }

/* Weekly Update drawer (the Typeform survey, tracked per week) */
.weekly-update {
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.wu-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.wu-summary::-webkit-details-marker { display: none; }

/* Outline chevron (SVG): points DOWN when collapsed, UP when open — never
   sideways. Flip via scaleY only, which passes through flat, never an angle. */
.wu-summary::after,
.wu-context > summary::after {
  content: '';
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: currentColor;
  opacity: 0.7;
  -webkit-mask: center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  mask: center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  transition: transform 0.2s ease;
}
.weekly-update[open] .wu-summary::after,
.wu-context[open] > summary::after {
  transform: scaleY(-1);
}
.wu-summary-title { font-size: 15px; font-weight: 600; color: var(--text); flex: 1; }
.wu-summary-meta { font-size: 12px; color: var(--text-muted); margin-left: auto; margin-right: 8px; }
.wu-done-badge { color: var(--terra); font-size: 12px; font-weight: 500; margin-left: 8px; }

.wu-body { padding: 0 16px 16px; }
.wu-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 0 16px;
  border-top: 1px solid var(--border);
}
.wu-done-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
}
.wu-done { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

.wu-context {
  background: var(--surface2);
  border-radius: 8px;
  margin-bottom: 16px;
}
.wu-context > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--terra);
  list-style: none;
}
.wu-context > summary::-webkit-details-marker { display: none; }
.wu-context-body { padding: 0 12px 12px; }
.wu-context-body p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.wu-context-body p:first-child { color: var(--text); font-weight: 600; }
.wu-context-body p:last-child { margin-bottom: 0; }

.wu-questions { display: flex; flex-direction: column; gap: 16px; }
.wu-q-title { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.5; margin-bottom: 4px; }
.wu-q-hint { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-bottom: 8px; }
.wu-answer {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  font-family: inherit;
  resize: vertical;
  min-height: 56px;
  transition: border-color 0.15s;
  outline: none;
}
.wu-answer:focus { border-color: var(--accent); }
.wu-answer::placeholder { color: var(--text-muted); }
.wu-save { font-size: 14px; font-weight: 500; color: var(--text-muted); margin-top: 8px; height: 20px; }
.wu-save.saved { color: var(--rose); }
.wu-save:empty { display: none; }

/* Weekly update questions progress bar */
.wu-prog-wrap { background: var(--border); border-radius: 100px; height: 4px; margin-bottom: 16px; }
.wu-prog-bar { background: var(--rose); height: 4px; border-radius: 100px; transition: width 0.4s ease; }

/* Auto-growing textareas: hide the scrollbar since height tracks content */
.answer-area, .assignment-notes, .resource-note-area, .wu-answer, .notes-area, .hl-note-edit-textarea { overflow-y: hidden; }

.view-header { margin-bottom: 32px; }

.view-title {
  font-family: 'Stentiga', sans-serif;
  font-size: 26px;
  font-weight: normal;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}

.view-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.view-source-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.view-source-link:hover { text-decoration: underline; }

.view-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}

.q-progress-bar-wrap {
  background: var(--border);
  border-radius: 100px;
  height: 4px;
  margin-top: 16px;
}

.q-progress-bar {
  background: var(--rose);
  height: 4px;
  border-radius: 100px;
  transition: width 0.4s ease;
}

/* Week grouping in Questions tab */
.week-q-section { margin-bottom: 48px; }

/* Sticky week header: stays pinned to the top of the questions area while
   scrolling so the current week (+ its progress and due date) is always visible. */
.week-q-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  padding: 16px 0;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.week-q-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

/* var(--border) was 1.95:1 — AA fail. var(--text-muted) → 8.7:1. */
.week-q-heading {
  font-family: 'Stentiga', sans-serif;
  font-size: 11px;
  font-weight: normal;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.75;
}

.week-q-due {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--text-muted);
  white-space: nowrap;
}
.week-q-due.overdue { color: var(--accent); font-weight: 600; }
.week-q-due.done { color: var(--terra); }

.week-q-progress-wrap {
  background: var(--border);
  border-radius: 100px;
  height: 4px;
}
.week-q-progress-bar {
  background: var(--rose);
  height: 4px;
  border-radius: 100px;
  transition: width 0.4s ease;
}
.week-q-progress-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}

.lesson-q-group { margin-bottom: 40px; margin-left: 0; }

.lesson-q-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.lesson-q-title {
  font-family: 'Stentiga', sans-serif;
  font-size: 16px;
  font-weight: normal;
  color: var(--text);
}

.lesson-q-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
}

.lesson-q-link:hover { text-decoration: underline; }

/* ── Notes view ──────────────────────────────────────────── */
.note-group { margin-bottom: 40px; }

.note-group-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 12px 0 8px;
  border-bottom: 1px solid var(--border);
  gap: 16px;
  position: sticky;          /* pin "Lesson · Week" while scrolling that lesson's notes */
  top: 0;
  z-index: 5;
  background: var(--bg);
}

.note-group-title {
  font-family: 'Stentiga', sans-serif;
  font-size: 16px;
  font-weight: normal;
  color: var(--text);
}

.note-body {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text);
  white-space: pre-wrap;
}

.empty-state {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  font-style: italic;
  padding: 16px 0;
}

/* ── Annotation tooltip ──────────────────────────────────── */
.annotation-tooltip {
  position: absolute;
  z-index: 1000;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  width: 320px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.annotation-tooltip.hidden { display: none; }

.annotation-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.annotation-header .annotation-save { margin-left: auto; }

.annotation-listen-btn,
.annotation-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 0;
}
.annotation-listen-btn:hover,
.annotation-close:hover { background: var(--surface); color: var(--text); border-color: var(--text-muted); }

.annotation-tooltip textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  font-family: inherit;
  resize: none;
  outline: none;
  margin-bottom: 0;
  transition: border-color 0.15s;
}

.annotation-tooltip textarea:focus { border-color: var(--accent); }

.annotation-save {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
  font-family: inherit;
}


/* ── Utility ─────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Project picker (top-right of the tab bar) ────────────────────────────── */
.project-picker {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.project-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  padding: 8px 0;
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
}
.project-picker-btn:hover { color: var(--terra); }
.project-picker-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-caret { display: block; flex-shrink: 0; }

/* Account / profile menu — sits to the right of the project picker. No extra
   margin: the row's own 16px gap is the single source of spacing, so the gap
   either side of every right-cluster control matches. */
.profile-wrap { position: relative; flex-shrink: 0; display: flex; align-items: center; }
.profile-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: none; border: 1px solid var(--border); color: var(--text);
  cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.profile-btn:hover { color: var(--terra); border-color: var(--terra); }
.profile-btn.signed-in { border-color: var(--border); color: var(--text); }
.profile-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 300;
  min-width: 200px; padding: 8px;
  background: var(--bg-elevated, #1a1310); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; gap: 4px;
}
.profile-menu.hidden { display: none; }
.profile-menu-status {
  font-family: 'Stentiga', sans-serif; text-transform: uppercase; letter-spacing: 0.4px;
  font-size: 11px; color: var(--text-muted);
  padding: 8px 12px 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-menu-item {
  display: block; width: 100%; text-align: left;
  font-family: 'Noto Sans', sans-serif; font-size: 14px; font-weight: 500; color: var(--text);
  background: none; border: none; border-radius: 8px; padding: 8px 12px; cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.profile-menu-item:hover { background: var(--accent-dim); color: var(--accent); }
.profile-menu-item.hidden { display: none; }

.scope-insights-page { max-width: 920px; margin: 0 auto; padding-bottom: 32px; }
.scope-insights-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.scope-insights-header h1 { margin: 0; }
.scope-insights-header p:not(.scope-insights-eyebrow) { max-width: 680px; margin: 10px 0 0; color: var(--text-muted); line-height: 1.55; }
.scope-insights-eyebrow { margin: 0 0 8px; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.scope-insights-content { display: flex; flex-direction: column; gap: 10px; }
.scope-insights-back, .scope-global-set { appearance: none; border: 0; padding: 0; color: var(--accent); background: transparent; font: inherit; font-size: 13px; font-weight: 700; line-height: 1.35; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.scope-insights-back:hover, .scope-global-set:hover { color: var(--text); }
.scope-insights-back:focus-visible, .scope-global-set:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.scope-insights-empty { padding: 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.scope-insights-callout { padding: 10px 12px; border-radius: 8px; color: var(--accent); background: var(--accent-dim); font-size: 12px; font-weight: 600; }
.scope-insight-row { padding: 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); }
.scope-insight-meta { margin-bottom: 5px; color: var(--text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.scope-insight-label { color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.4; }
.scope-insight-result { margin-top: 7px; color: var(--text-muted); font-size: 13px; }
.scope-insight-result strong { color: var(--text); }
.scope-insight-result span { color: var(--text-muted); }
.scope-global-set { display: inline-block; margin-top: 10px; }

.project-menu {
  position: absolute;
  top: calc(100% - 4px);
  right: 0;
  min-width: 248px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  padding: 8px;
  z-index: 200;
}
.project-menu-check, .project-menu-icon {
  width: 14px;
  flex-shrink: 0;
  text-align: center;
  color: var(--terra);
}
.project-menu-label {
  font-family: 'Stentiga', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 8px 8px;
}
.project-menu-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
}
.kebab-menu {
  position: absolute;
  top: calc(100% - 2px);
  right: 0;
  min-width: 184px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  padding: 4px;
  z-index: 210;
}
.kebab-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Noto Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.kebab-item:hover { background: var(--surface); color: var(--terra); }
.project-menu-row:hover { background: var(--surface2); }
.project-menu-row.active { background: var(--terra-dim); }
.project-menu-pick {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  color: var(--text);
  text-align: left;
}
.project-menu-pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-menu-kebab {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-right: 4px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.project-menu-kebab:hover { background: var(--surface); color: var(--text); }
.project-add { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }
.project-add-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  background: none;
  border: none;
  color: var(--terra);
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
}
.project-add-btn .project-menu-pname { color: var(--terra); }
.project-add-btn:hover { background: var(--surface2); }
.project-add-form { display: flex; gap: 8px; padding: 4px; }
.project-add-input {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
}
.project-add-input:focus { outline: none; border-color: var(--terra); }
.project-add-save {
  padding: 8px 16px;
  background: var(--terra);
  color: var(--bg);
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

/* ── Scope toggle (shared ⇄ project-specific) ────────────────────────────── */
.q-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}
.scope-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-family: 'Noto Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.scope-toggle:hover { color: var(--text); background: var(--surface2); }
.scope-toggle.specific { color: var(--terra); border-color: var(--terra); background: var(--terra-dim); }

/* ── Project detail page ──────────────────────────────────────────────────── */
.project-back {
  display: inline-flex;
  align-items: center;
  padding: 6px 0;
  margin-bottom: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: 'Noto Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.project-back:hover { color: var(--text); }
/* Wrap the Active badge under the project name when the row gets tight. */
.project-title-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.project-title-wrap .view-title { flex: 0 1 auto; margin-bottom: 0; }
.project-title-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.project-parent-badge {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.project-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.project-active-badge {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--terra);
  background: var(--terra-dim);
  border: 1px solid var(--terra);
  border-radius: 999px;
}
.project-delete { color: var(--rose) !important; }
.project-delete:hover { background: var(--rose-dim) !important; }
.project-body { display: flex; flex-direction: column; gap: 32px; padding-top: 8px; }
.project-section { }
.project-overview {
  width: 100%;
  min-height: 96px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: 'Noto Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  resize: none;
}
.project-overview:focus { outline: none; border-color: var(--terra); }
.project-overview-save { min-height: 16px; margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.project-overview-save.saved { color: var(--terra); }

.pstat-row { display: flex; gap: 16px; flex-wrap: wrap; }
.pstat {
  flex: 1;
  min-width: 200px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.pstat-num { font-family: 'Stentiga', sans-serif; font-size: 32px; color: var(--text); line-height: 1; }
.pstat-den { font-size: 18px; color: var(--text-muted); }
.pstat-bar-wrap { height: 6px; background: var(--surface2); border-radius: 999px; margin: 12px 0 8px; overflow: hidden; }
.pstat-bar { height: 100%; background: var(--terra); border-radius: 999px; transition: width 0.3s; }
.pstat-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.pstat-note { margin-top: 16px; margin-bottom: 24px; font-size: 13px; color: var(--text-muted); line-height: 1.6; }

.project-week-table { width: 100%; border-collapse: collapse; }
.project-week-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.project-week-table td { padding: 12px; border-bottom: 1px solid var(--surface2); vertical-align: middle; }
.pw-week { font-weight: 600; color: var(--text); white-space: nowrap; }
.pw-cell { width: 40%; }
.pw-cellinner { display: flex; align-items: center; gap: 8px; }
.pw-mini { flex: 1; min-width: 80px; height: 6px; background: var(--surface2); border-radius: 999px; overflow: hidden; }
.pw-mini-bar { height: 100%; background: var(--terra); border-radius: 999px; }
.pw-frac { font-size: 12px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.audit-body { gap: 24px; }
.audit-shot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.audit-shot {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.audit-shot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.audit-shot-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.audit-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.audit-shot-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.audit-shot-label {
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--terra);
  background: var(--terra-dim);
  border: 1px solid var(--terra);
  border-radius: 999px;
  flex-shrink: 0;
}
.audit-shot-frame {
  overflow: hidden;
  border: 1px solid var(--surface2);
  border-radius: 8px;
  background: #120b08;
}
.audit-shot-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.audit-shot-note {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}
.audit-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.audit-list li {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}
.audit-list-ok li { border-color: rgba(224,136,40,0.38); }
.audit-list-warn li { border-color: rgba(217,80,56,0.38); }
.audit-list-fix li { border-color: rgba(224,136,40,0.55); background: var(--terra-dim); color: var(--text); }

/* ── Responsive tabs dropdown (custom, matches the project picker) ─────────── */
.tabs-select-wrap {
  display: flex;
  align-items: center;
}
.tabs-select-wrap.hidden { display: none; }
.tabs-dd { position: relative; }
.tabs-dd-menu {
  left: 0;
  right: auto;
  min-width: 200px;
}
.tabs-dd-item { width: 100%; border-radius: 8px; }
.tabs-dd-item:hover { background: var(--surface2); }
.tabs-dd-item.active { background: var(--terra-dim); }

/* ── Rename text CTA (no container) + bottom Delete CTA ────────────────────── */
.text-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.15s;
}
.text-cta:hover { color: var(--text); }
.text-cta svg { display: block; }

.cta-danger {
  background: var(--rose);
  border-color: var(--rose);
  color: #fff;
}
.cta-danger:hover { background: #d6493a; border-color: #d6493a; }
.project-danger-section { margin-top: 24px; }

/* ── Confirm / info modal ─────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
  padding: 24px;
}
.modal {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  padding: 24px;
}
.modal-title {
  font-family: 'Stentiga', sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text);
  margin-bottom: 12px;
}
.modal-message { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin-bottom: 24px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.modal-actions .btn-ghost, .modal-actions .primary-cta { padding: 12px 16px; }

/* ── Piper read-aloud onboarding ──────────────────────────────────────────── */
.modal.piper-setup { max-width: 560px; }
.piper-optional { font-family: 'Noto Sans', sans-serif; font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-muted); background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; vertical-align: middle; margin-left: 8px; }
.piper-status { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; padding: 12px; border-radius: 10px; border: 1px solid var(--border); margin-bottom: 24px; }
.piper-status .piper-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); }
.piper-status.checking .piper-dot { background: var(--accent); animation: ra-pulse 0.9s ease-in-out infinite; }
.piper-status.checking { color: var(--text-muted); }
.piper-status.notfound .piper-dot { background: var(--text-muted); }
.piper-status.notfound { color: var(--text-muted); }
.piper-status.connected { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.piper-status.connected .piper-dot { background: var(--accent); animation: none; }
.piper-steps { list-style: none; counter-reset: piper; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 16px; }
.piper-steps li { counter-increment: piper; position: relative; padding-left: 40px; }
.piper-steps li::before { content: counter(piper); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.piper-step-h { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.piper-step-b { font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.piper-step-cta { margin-top: 12px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.piper-download { text-decoration: none; }
.piper-download:disabled { opacity: 0.55; cursor: default; }
.piper-other { font-size: 12px; color: var(--text-muted); }
.piper-other-link { color: var(--accent); }

/* ── Settings modal ───────────────────────────────────────────────────────── */
.modal.settings-modal { max-width: 520px; }
.settings-section { margin-bottom: 24px; }
.settings-h { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin-bottom: 12px; }
.speed-row { display: flex; align-items: center; gap: 12px; }
.speed-row input[type=range] { flex: 1; accent-color: var(--accent); height: 4px; }
.speed-end { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.speed-val { font-size: 14px; font-weight: 700; color: var(--accent); min-width: 40px; text-align: right; flex-shrink: 0; }
.voice-list { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 4px; }
.voice-group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); padding: 12px 8px 4px; }
.voice-row { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; cursor: pointer; }
.voice-row:hover { background: var(--accent-dim); }
.voice-row input[type=radio] { accent-color: var(--accent); flex-shrink: 0; }
.voice-name { flex: 1; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-sample { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--accent); background: none; border: 1px solid var(--border); border-radius: 8px; padding: 4px 12px; cursor: pointer; }
.voice-sample:hover { border-color: var(--accent); background: var(--accent-dim); }
.voice-empty, .voice-hint { font-size: 13px; color: var(--text-muted); padding: 12px 8px; line-height: 1.5; }
.voice-hint a { color: var(--accent); }

/* ── Add-question scope choice ────────────────────────────────────────────── */
.lq-add-form { display: flex; flex-direction: column; gap: 12px; }
.lq-add-actions { display: flex; gap: 8px; }
.lq-add-scope { display: inline-flex; gap: 8px; }
.scope-opt {
  padding: 8px 12px;
  font-family: 'Noto Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.scope-opt:hover { color: var(--text); }
.scope-opt.active { color: var(--terra); border-color: var(--terra); background: var(--terra-dim); }

@media (max-width: 768px) {
  .project-title-wrap { gap: 10px; }
  .project-title-meta { width: 100%; }
  .project-parent-badge,
  .project-active-badge { padding-inline: 8px; }
  .audit-compare { grid-template-columns: 1fr; }
  .audit-shot-grid { grid-template-columns: 1fr; }
  .audit-shot-head { align-items: flex-start; flex-direction: column; }
}

/* ── User-added questions/assignments: badge, kebab, source, edit ──────────── */
.added-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--terra);
  background: var(--terra-dim);
  border: 1px solid var(--terra);
  border-radius: 999px;
}
.assignment-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.assignment-top-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.item-kebab-wrap { position: relative; flex-shrink: 0; }
.item-kebab {
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.item-kebab:hover { background: var(--surface2); color: var(--text); }
.item-kebab-menu {
  position: absolute;
  top: calc(100% - 2px);
  right: 0;
  min-width: 140px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  padding: 4px;
  z-index: 60;
}
.item-kebab-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Noto Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.item-kebab-menu button:hover { background: var(--surface2); }
.item-kebab-del { color: var(--rose) !important; }
.item-kebab-del:hover { background: var(--rose-dim) !important; }

.item-source { margin: 4px 0 8px; }
.item-source-link { font-size: 13px; }

.question-item.user-added .q-item-header { align-items: center; }
.item-edit-form { display: flex; flex-direction: column; gap: 12px; }
.lq-add-source {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
}
.lq-add-source:focus { outline: none; border-color: var(--terra); }

/* Inline title icons (replacing emoji) */
.t-icon { vertical-align: -3px; margin-right: 2px; }

/* Linked reading references inside assignment text */
.asg-link { color: var(--terra); text-decoration: underline; text-underline-offset: 2px; }
.asg-link:hover { color: var(--text); }

/* Loom (and similar) embed under a weekly-update answer */
.wu-embed:not(:empty) { margin-top: 8px; }
.wu-embed-frame {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: block;
  background: #000;
}

/* Prompt-modal text input */
.modal-input {
  width: 100%;
  margin-bottom: 24px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: 'Noto Sans', sans-serif;
  font-size: 15px;
}
.modal-input:focus { outline: none; border-color: var(--terra); }

/* Clickable project-page stats */
.pstat-link {
  font-family: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.pstat-link:hover { border-color: var(--terra); background: var(--surface2); }
.pw-cell-link { cursor: pointer; transition: background 0.15s; }
.pw-cell-link:hover { background: var(--surface2); }

/* Project archive (Danger Zone + picker) */
.project-danger-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.project-danger-hint { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.project-menu-archived-label { margin-top: 8px; }
.project-menu-row.archived { opacity: 0.7; }
.project-archived-name { flex: 1; padding: 8px 12px; }
.project-unarchive { background: none; border: 1px solid var(--border); color: var(--accent); border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.project-unarchive:hover { background: var(--accent-dim); border-color: var(--accent); }
.article-truncated { color: var(--text-muted); font-style: italic; margin-top: 8px; }
.article-truncated a { color: var(--accent); font-style: normal; }

/* "Likely not a real article" flag on junk resources */
.resource-maybe-junk { display: inline-block; font-size: 11px; font-weight: 600; color: var(--text-muted); background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; margin-left: 6px; }

/* Notes "Sort" toggle (right-aligned, custom button pair matching app style) */
.notes-view-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.notes-sort { display: flex; align-items: center; gap: 8px; flex: none; }
.notes-sort-label { font-size: 13px; color: var(--text-muted); }
.notes-sort-toggle { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.notes-sort-btn {
  background: var(--surface2);
  color: var(--text-muted);
  border: none;
  border-left: 1px solid var(--border);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.notes-sort-btn:first-child { border-left: none; }
.notes-sort-btn:hover { background: var(--surface); color: var(--text); }
.notes-sort-btn.active { background: var(--accent-dim); color: var(--accent); font-weight: 600; }

/* ── Read-aloud mini player (progress bar + transport) ───────────────────── */
/* ── Floating HUD stack (video + read-aloud, stacked with gap) ─────────────── */
#hudStack {
  position: fixed;
  /* Center over the content column (page minus the left nav) */
  left: calc(50% + var(--sidebar-w) / 2);
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(560px, calc(100vw - var(--sidebar-w) - 32px));
  pointer-events: none;
}
#hudStack > * { pointer-events: auto; }

/* Shared card style for both HUDs */
.ra-mini-player, .yt-hud {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  width: 100%;
  box-sizing: border-box;
}
.ra-mini-player.hidden, .yt-hud.hidden { display: none; }

/* Top control row: transport buttons, timestamp, and dismiss button */
.hud-top-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

/* Left button group: play/pause, stop, go-to — all side by side */
.hud-left-btns { flex: none; display: flex; gap: 4px; }

.ra-mp-toggle, .ra-mp-stop, .ra-mp-close, .hud-skip-back, .hud-skip-fwd {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  line-height: 0;
}
.ra-mp-toggle:hover, .ra-mp-stop:hover, .ra-mp-close:hover,
.hud-skip-back:hover, .hud-skip-fwd:hover { background: var(--accent-dim); border-color: var(--accent); }
.hud-goto {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(217,80,56,0.3);
  border-radius: 8px;
  background: var(--accent-dim);
  color: var(--accent);
  cursor: pointer;
  line-height: 0;
}
.hud-goto:hover { background: rgba(217,80,56,0.25); border-color: var(--accent); }
.ra-mp-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.ra-mp-label {
  flex: 0 1 auto;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ra-mp-bar {
  flex: 1 1 auto;
  min-width: 72px;
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  overflow: hidden;
}
.ra-mp-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--terra);
  border-radius: 4px;
  transition: width 0.2s linear;
}
.ra-mp-time { flex: none; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Current time is bold on both HUDs; total remains muted */
.ra-mp-cur, .yt-hud-cur { font-weight: 600; color: var(--text); }
.ra-mp-time { margin-left: auto; white-space: nowrap; }

/* Video HUD — reuses .ra-mp-main, .ra-mp-bar, .ra-mp-fill, .ra-mp-time, .ra-mp-toggle, .ra-mp-close */
.yt-hud-main { flex: 1; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 12px; }
.yt-hud-label { flex: 0 1 auto; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 768px) {
  .ra-mp-main, .yt-hud-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .ra-mp-label, .yt-hud-label {
    width: 100%;
    white-space: normal;
  }
  .ra-mp-bar {
    width: 100%;
    min-width: 0;
  }
}


/* ---- Cereal sign-in wall (public build only) ---- */
.cereal-wall {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: var(--bg);
}
.cereal-wall.hidden { display: none; }
.cereal-wall-card {
  width: 100%; max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 32px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.cereal-wall-logo { margin-bottom: 16px; }
.cereal-wall-title {
  font-size: 28px; font-weight: 700; color: var(--text);
  letter-spacing: -0.01em; margin-bottom: 8px;
}
.cereal-wall-sub { font-size: 15px; color: var(--text-muted); line-height: 1.5; margin-bottom: 24px; }
.cereal-wall-note {
  font-size: 14px; color: var(--text); line-height: 1.5;
  background: var(--accent-dim); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px; margin-bottom: 24px;
}
.cereal-wall-form { display: flex; flex-direction: column; gap: 12px; }
.cereal-wall-form input {
  width: 100%; padding: 12px 16px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 15px; font-family: inherit;
}
.cereal-wall-form input:focus { outline: none; border-color: var(--accent); }
.cereal-wall-form .primary-cta { width: 100%; padding: 12px 16px; justify-content: center; text-align: center; }
.cereal-wall-fine { font-size: 12px; color: var(--text-muted); margin-top: 16px; opacity: 0.8; }
/* While gated, keep the app from flashing behind the wall. */
html.cereal-gated body > #app { filter: blur(4px); pointer-events: none; user-select: none; }

/* ============================================================
   Cereal motion layer — tasteful, restrained, reduced-motion safe.
   Fast (150–400ms), ease-out cubic; entrances + micro-interactions.
   ============================================================ */
@keyframes cerealFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cerealPop    { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cerealOverlayIn { from { opacity: 0; } to { opacity: 1; } }

/* Modal + sign-in wall entrances */
.modal-overlay { animation: cerealOverlayIn .18s ease-out; }
.modal { animation: cerealPop .32s cubic-bezier(.22,1,.36,1); }
.cereal-wall-card { animation: cerealPop .42s cubic-bezier(.22,1,.36,1); }

/* Dropdown menus ease open */
.profile-menu:not(.hidden) { animation: cerealPop .16s ease-out; transform-origin: top right; }

/* Tab panels cross-fade up as they become active */
.tab-panel.active { animation: cerealFadeUp .34s cubic-bezier(.22,1,.36,1); }

/* Resource/article cards: change the outline color on hover (no vertical bounce) */
.article-card { transition: border-color .18s ease; }
.article-card:hover { border-color: var(--accent); }

/* Left-nav lessons nudge on hover (transform = no reflow) */
.lesson-nav-item { transition: background .15s ease, color .15s ease, transform .15s ease; }
.lesson-nav-item:hover { transform: translateX(2px); }

/* Buttons give a little press feedback */
.primary-cta { transition: all .15s, transform .08s ease; }
.primary-cta:active { transform: scale(.97); }
.btn-ghost { transition: background .15s ease, color .15s ease, transform .08s ease; }
.btn-ghost:active { transform: scale(.97); }

/* Progress bars fill with a spring instead of a linear crawl */
.progress-bar { transition: width .6s cubic-bezier(.22,1,.36,1); }
.week-progress-bar, .week-q-progress-bar { transition: width .6s cubic-bezier(.22,1,.36,1); }

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }
  #app { position: relative; }
  #sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 100%;
    min-width: 100%;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 250;
  }
  body.sidebar-open #sidebar { transform: translateX(0); }
  body.sidebar-open #sidebarOverlay { opacity: 1; pointer-events: auto; }
  .sidebar-header { padding-right: 64px; }
  /* top:18px puts its 36px centre on the same line as the 28px search button
     that now shares the logo row. */
  .sidebar-close { display: inline-flex; top: 18px; }
  .mobile-sidebar-toggle { display: inline-flex; }
  .main-tabs-row { gap: 8px; padding: 0 12px; justify-content: flex-start; }
  .mobile-sidebar-toggle { order: 1; }
  .lesson-mobile-nav { order: 2; }
  .lesson-step-btn:disabled { display: none; }
  .main-tabs-inner { flex: 1; min-width: 0; }
  .tabs-select-wrap { order: 3; }
  .project-picker {
    min-width: 0;
    flex: 0 1 150px;
    max-width: 150px;
  }
  .project-picker-btn {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  .project-picker-name {
    flex: 1 1 auto;
    min-width: 0;
  }
  .project-picker { order: 4; }
  .profile-wrap { order: 5; }
  #mainWrap { width: 100%; min-width: 0; }
  #main, .tab-panel {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    min-height: 0;
  }
  #lessonView, #questionsView, #assignmentsView, #notesView, #membersView, #quizView, #projectView, #scopeInsightsView {
    padding: 24px 16px 16px;
    max-width: 100%;
  }
  .page-footer {
    max-width: none;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    position: static;
    background: transparent;
    z-index: auto;
    margin-bottom: 0;
  }
  .view-header { margin-bottom: 24px; }
  .scope-insights-header { flex-direction: column; gap: 16px; margin-bottom: 24px; }
  .lesson-mobile-nav { display: inline-flex; margin-bottom: 0; }
  .lesson-title-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .lesson-title-row .lesson-title { width: 100%; }
  .section-header {
    align-items: flex-start;
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .section-header .section-hint {
    flex: 1 1 100%;
    margin-top: 0;
  }
  .section-header .read-aloud-btn.ra-mini {
    margin-left: 0;
  }
  .lesson-play-all { display: inline-flex; }
  .clip-label-desktop,
  .transcript-toggle-desktop {
    display: none;
  }
  .clip-label-mobile,
  .transcript-toggle-mobile {
    display: inline;
  }
  .clip-label-mobile-start {
    display: none !important;
  }
  .clip-footer {
    justify-content: flex-start;
    gap: 8px;
  }
  .clip-label {
    margin-left: 0;
    white-space: nowrap;
  }
  .transcript-toggle {
    margin-left: auto;
    white-space: nowrap;
  }
  #hudStack {
    left: 0;
    right: 0;
    bottom: calc(12px + env(safe-area-inset-bottom));
    transform: none;
    width: auto;
    max-width: none;
    padding: 0 12px;
    box-sizing: border-box;
    z-index: 650;
  }
  .ra-mini-player, .yt-hud {
    gap: 10px;
  }
  .hud-left-btns {
    flex-wrap: nowrap;
  }
  .ra-mp-main, .yt-hud-main {
    width: 100%;
    gap: 10px;
  }
  .ra-mp-time {
    margin-left: auto;
    white-space: nowrap;
  }
  .ra-mp-close {
    margin-left: 0;
  }
}

/* Confetti burst used when the lesson-content checkbox is checked. */
.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 500;
}
.confetti-piece {
  position: absolute;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: confettiFly 1100ms cubic-bezier(.16,.84,.22,1) forwards;
}
@keyframes confettiFly {
  0% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(.92); }
}

@keyframes cerealFadeOut { to { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes cerealLogoIn  { from { opacity: 0; transform: scale(.6) translateY(6px); }
  60% { transform: scale(1.06); } to { opacity: 1; transform: none; } }

/* Onboarding screens: the card's contents cascade in for a premium, deliberate feel. */
.cereal-onboard .cereal-wall-logo,
.cereal-onboard .cereal-wall-title,
.cereal-onboard .cereal-wall-sub,
.cereal-onboard .cereal-wall-form {
  animation: cerealFadeUp .55s cubic-bezier(.22,1,.36,1) backwards;
}
.cereal-onboard .cereal-wall-logo  { animation: cerealLogoIn .6s cubic-bezier(.34,1.56,.64,1) .06s backwards; }
.cereal-onboard .cereal-wall-title { animation-delay: .15s; }
.cereal-onboard .cereal-wall-sub   { animation-delay: .24s; }
.cereal-onboard .cereal-wall-form  { animation-delay: .34s; }

.cereal-piper-onboard {
  max-width: 560px;
  padding: 40px 32px;
  text-align: center;
}

.cereal-piper-onboard .cereal-wall-sub {
  max-width: 496px;
  margin: 0 auto 24px;
}

.piper-explainer {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
  margin: 6px 0 24px;
  text-align: left;
}

.piper-preview-shell {
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.piper-preview-bubble {
  width: 100%;
  margin: 0;
  padding: 20px 20px 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #dadce0;
  box-shadow: 0 10px 24px rgba(60,64,67,0.14);
}
.piper-preview-site { font-size: 15px; font-weight: 700; color: #202124; }
.piper-preview-wants { margin-top: 4px; font-size: 13px; color: #5f6368; font-weight: 600; text-transform: lowercase; }
.piper-preview-perm {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.45;
  color: #202124;
}
.piper-preview-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 4px;
  border: 1px solid #dadce0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #5f6368;
}
.piper-preview-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}
.piper-preview-btn {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #d2d6dc;
  background: #fff;
  color: #5f6368;
  font-size: 13px;
  font-weight: 600;
}
.piper-preview-btn.primary {
  background: #d2e3fc;
  border-color: #d2e3fc;
  color: #174ea6;
}
.piper-preview-btn:disabled { opacity: 1; }
.piper-allow-callout {
  position: relative;
  display: inline-flex;
}
.piper-allow-callout::before,
.piper-allow-callout::after {
  content: '';
  position: absolute;
  inset: -9px -12px -8px -12px;
  border: 5px solid var(--accent);
  border-radius: 56% 45% 52% 48% / 46% 58% 44% 55%;
  pointer-events: none;
  transform: rotate(-4deg);
}
.piper-allow-callout::after {
  inset: -7px -10px -10px -14px;
  border-width: 3px;
  opacity: 0.78;
  transform: rotate(5deg);
}

.piper-explainer-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: stretch;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  border: none;
  box-shadow: none;
}
.piper-copy-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
  text-align: center;
}
.piper-callout {
  padding: 18px 18px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}
.piper-benefits {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}
.piper-benefit {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.piper-benefit-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  margin-bottom: 4px;
}
.piper-benefit-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}
.cereal-piper-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.cereal-piper-actions .btn-ghost,
.cereal-piper-actions .primary-cta {
  width: 100%;
  min-width: 0;
  justify-content: center;
  min-height: 48px;
  padding: 12px 16px;
  line-height: 1.2;
}

@media (max-width: 900px) {
  .cereal-piper-actions .btn-ghost,
  .cereal-piper-actions .primary-cta {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .cereal-piper-onboard .cereal-wall-title { font-size: 28px; }
  .piper-preview-bubble { padding: 16px; }
}

/* Respect the OS "reduce motion" setting — kill all of the above. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Piper integration promo (top of Voice settings) ---- */
.piper-promo { background: var(--accent-dim); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px; margin-bottom: 16px; }
.piper-promo-title { font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 4px; }
.piper-promo-body { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; }
.piper-promo-cta { width: 100%; justify-content: center; text-align: center; }
.piper-promo.connected { display: flex; align-items: center; gap: 8px; font-size: 13px;
  color: var(--text-muted); background: transparent; padding: 0 0 16px; border: none; }
.piper-promo-dot { width: 8px; height: 8px; border-radius: 50%; background: #5aa469; flex-shrink: 0; }

/* ---- Personal info fields ---- */
.pi-field { display: block; margin-bottom: 16px; }
.pi-label { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted);
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.4px; }
.pi-sub { text-transform: none; letter-spacing: 0; font-weight: 400; }
.pi-input { width: 100%; padding: 12px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; font-size: 15px; font-family: inherit; }
.pi-input:focus { outline: none; border-color: var(--accent); }
.pi-msg { font-size: 13px; margin-top: 4px; line-height: 1.4; }
.pi-msg.ok { color: #5aa469; }
.pi-msg.err { color: var(--accent); }

/* ---- Profile photo (Personal info + top-right button) ---- */
.pi-avatar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.pi-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted); }
.pi-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pi-avatar svg { width: 28px; height: 28px; }
.pi-avatar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pi-photo-remove { background: none; border: none; color: var(--text-muted); font: inherit;
  font-size: 13px; cursor: pointer; padding: 4px 8px; }
.pi-photo-remove:hover { color: var(--accent); }
.pi-photo-remove.hidden { display: none; }
.profile-btn { overflow: hidden; padding: 0; }
.profile-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* ── Search (⌘K palette) ─────────────────────────────────────────────────── */
/* Sits on the sidebar logo line, pushed to its right edge and vertically
   centred against "Cereal" (.logo is align-items: center). Sized so it does not
   grow the logo row. */
.search-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; margin: -4px 0 -4px auto;
  flex-shrink: 0;
  background: transparent; border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-muted); cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.search-trigger:hover { color: var(--text); border-color: var(--accent); background: var(--accent-dim); }

.search-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 96px 16px 16px;
  background: rgba(10, 5, 3, 0.68); backdrop-filter: blur(3px);
}
.search-overlay.hidden { display: none; }

.search-modal {
  width: 100%; max-width: 640px; max-height: 72vh;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.search-input-row { display: flex; align-items: center; gap: 8px; padding: 16px; border-bottom: 1px solid var(--border); }
.search-input-icon { color: var(--text-muted); flex: none; }
.search-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font-size: 18px; font-family: inherit;
}
.search-input::placeholder { color: var(--text-muted); }
.search-close {
  flex: none; padding: 4px 8px; font-size: 12px; line-height: 1;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-muted); cursor: pointer; font-family: inherit;
}
.search-close:hover { color: var(--text); }

.search-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 16px 0; }
.search-chips:empty { display: none; }
.search-chip {
  padding: 12px; padding-top: 6px; padding-bottom: 6px;
  font-size: 13px; line-height: 1; font-family: inherit;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-muted); cursor: pointer; transition: color .15s, border-color .15s;
}
.search-chip:hover { color: var(--text); }
.search-chip.active { color: var(--text); border-color: var(--accent); background: var(--accent-dim); }
.search-chip-n { opacity: .6; margin-left: 4px; }

.search-results { overflow-y: auto; padding: 8px; }
.search-hint, .search-empty { padding: 24px 16px; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.search-hint kbd {
  display: inline-block; padding: 1px 6px; margin: 0 1px; font-size: 11px; font-family: inherit;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; color: var(--text);
}

.search-section-label {
  padding: 16px 8px 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
}
.search-section-label:first-child { padding-top: 8px; }

.search-row {
  display: flex; align-items: flex-start; gap: 12px;
  width: 100%; padding: 12px; text-align: left;
  background: transparent; border: none; border-radius: var(--radius);
  color: var(--text); cursor: pointer; font-family: inherit;
}
.search-row.sel { background: var(--surface2); }
.search-row-type {
  flex: none; margin-top: 2px; padding: 12px; padding-top: 3px; padding-bottom: 3px;
  font-size: 11px; font-weight: 600; line-height: 1.3; white-space: nowrap;
  background: var(--accent-dim); border-radius: 6px; color: var(--accent);
}
.search-type-answer, .search-type-note, .search-type-update {
  background: rgba(212, 160, 136, 0.16); color: var(--text-muted);
}
.search-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.search-row-title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-row-snippet { font-size: 13px; line-height: 1.45; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-row-snippet mark { background: rgba(217, 80, 56, 0.28); color: var(--text); border-radius: 2px; padding: 0 1px; }
.search-row-meta { font-size: 11px; color: var(--text-muted); opacity: .7; }

/* Flash the target element after jumping to a result. */
.search-flash { animation: searchFlash 1.6s ease-out; border-radius: var(--radius); }
@keyframes searchFlash {
  0%, 30% { box-shadow: 0 0 0 3px var(--accent); background: var(--accent-dim); }
  100% { box-shadow: 0 0 0 0 transparent; background: transparent; }
}

@media (max-width: 640px) {
  .search-overlay { padding: 16px; align-items: stretch; }
  .search-modal { max-height: 100%; }
}

/* ── Export answers → printable PDF ──────────────────────────────────────── */
.export-overlay {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; flex-direction: column;
  background: #3a2c24; /* warm neutral behind the "paper" */
}
.export-overlay.hidden { display: none; }

.export-toolbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 24px; background: var(--surface); border-bottom: 1px solid var(--border);
  color: var(--text);
}
/* Header font, same as every other title in the app. */
.export-toolbar-title {
  font-family: 'Stentiga', sans-serif;
  font-size: 18px; font-weight: normal; letter-spacing: 0.4px;
  color: var(--text);
}
.export-scope { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
/* Custom caret so its gap from the right edge matches the text's 12px gap from
   the left edge — the native select arrow sits at a UA-chosen offset instead. */
.export-select {
  appearance: none; -webkit-appearance: none;
  padding: 8px 32px 8px 12px; font-family: inherit; font-size: 13px;
  background: var(--surface2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.export-toolbar-actions { margin-left: auto; display: flex; gap: 8px; }
.export-print-btn, .export-close-btn {
  padding: 12px 16px; font-family: inherit; font-size: 14px; font-weight: 600;
  border-radius: 8px; cursor: pointer; border: 1px solid var(--border);
}
.export-print-btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.export-print-btn:hover { filter: brightness(1.08); }
.export-close-btn { background: transparent; color: var(--text-muted); }
.export-close-btn:hover { color: var(--text); }

.export-scroll { flex: 1; overflow: auto; padding: 32px 16px; }

/* The export is previewed as individual letter-size sheets, matching the PDF. */
.print-doc {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  color: #1a1a1a;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px; line-height: 1.6;
}
.print-pagination-stage {
  position: absolute; top: 0; left: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  visibility: hidden; pointer-events: none;
}
.print-page {
  width: 8.5in; min-width: 8.5in; height: 11in;
  display: flex; flex-direction: column;
  padding: 0.72in 0.75in;
  background: #fff; color: #1a1a1a; border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.print-head { border-bottom: 2px solid #1a1a1a; padding-bottom: 16px; margin-bottom: 32px; }
.print-title { font-family: 'Stentiga', sans-serif; font-size: 26px; font-weight: normal; letter-spacing: 0.01em; }
.print-meta { font-family: 'Noto Sans', system-ui, sans-serif; font-size: 13px; color: #666; margin-top: 8px; }
.print-page-content { flex: 1; }
.print-page-footer {
  margin-top: 32px; padding-top: 12px; border-top: 1px solid #ccc;
  font-family: 'Noto Sans', system-ui, sans-serif; font-size: 11px; color: #777;
  text-align: right;
}

.print-week { margin: 0; }
.print-week-title {
  font-family: 'Stentiga', sans-serif; font-size: 20px; font-weight: normal;
  margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid #ccc;
}
.print-sec {
  font-family: 'Stentiga', sans-serif; font-size: 12px; font-weight: normal;
  text-transform: uppercase; letter-spacing: 0.06em; color: #888;
  margin: 24px 0 8px;
}
.print-qa { margin-bottom: 16px; }
.print-q { font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
.print-a { color: #2a2a2a; white-space: normal; }
.print-quote { font-style: italic; color: #444; border-left: 3px solid #ccc; padding-left: 12px; margin-bottom: 4px; }
.print-src { font-family: 'Noto Sans', system-ui, sans-serif; font-size: 12px; color: #999; margin-top: 4px; }
.print-empty { color: #666; font-style: italic; padding: 24px 0; }
/* Her answers are set apart from the question/assignment text above them. */
.print-answer { margin-top: 8px; padding-left: 12px; border-left: 3px solid #1a1a1a; }
.print-answer-label {
  display: block; margin-bottom: 2px;
  font-family: 'Noto Sans', system-ui, sans-serif; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: #888;
}

/* Print / Save-as-PDF: show ONLY the document, ink on paper. */
@media print {
  body.export-open > *:not(#exportOverlay) { display: none !important; }
  body.export-open .no-print { display: none !important; }
  body.export-open .export-overlay { position: static; background: #fff; display: block; }
  body.export-open .export-scroll { overflow: visible; padding: 0; }
  body.export-open .print-doc { display: block; }
  body.export-open .print-page {
    width: auto; height: 11in; padding: 18mm; margin: 0;
    box-shadow: none; border-radius: 0; break-after: page;
  }
  body.export-open .print-page:last-child { break-after: auto; }
  body.export-open .print-week { page-break-inside: auto; }
  body.export-open .print-week-title { page-break-after: avoid; }
  body.export-open .print-sec { page-break-after: avoid; }
  body.export-open .print-qa { page-break-inside: avoid; }
  @page { size: letter; margin: 0; }
}