Study pages: progress bar, collapsible chapters, compact upcoming lessons, class-based badges, cleaner sign-in/enroll gates; v2.10.7

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/App.css

@@ -4033,6 +4033,129 @@
   padding: 0;
 }
 
+/* ── Study index: progress, chapters, lesson badges ── */
+.study-course-meta { margin-bottom: 1.25rem; }
+
+.study-progress {
+  max-width: 460px;
+  margin: 0 0 1.75rem;
+}
+
+.study-progress-label {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.45rem;
+  font-size: 0.82rem;
+  color: var(--brand-muted);
+  letter-spacing: 0.04em;
+}
+
+.study-progress-label strong {
+  color: var(--brand-warm-white);
+  font-weight: 600;
+}
+
+.study-progress-track {
+  height: 8px;
+  border-radius: 999px;
+  background: rgba(201, 168, 76, 0.16);
+  overflow: hidden;
+}
+
+.study-progress-fill {
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #c9a84c, #e0c67a);
+  transition: width 0.4s ease;
+}
+
+.study-chapter + .study-chapter { margin-top: 1.25rem; }
+
+.study-chapter > summary {
+  list-style: none;
+  cursor: pointer;
+}
+
+.study-chapter > summary::-webkit-details-marker { display: none; }
+
+.study-chapter > summary h3::before {
+  content: '▸';
+  display: inline-block;
+  margin-right: 0.55rem;
+  color: var(--brand-gold);
+  font-size: 0.9em;
+  transition: transform 0.15s ease;
+}
+
+.study-chapter[open] > summary h3::before { transform: rotate(90deg); }
+
+/* Upcoming lessons stay compact until they release */
+.study-module-row--coming {
+  grid-template-columns: 1fr;
+  padding: 0.7rem 1.05rem;
+}
+
+.study-module-row--coming .study-module-row-right,
+.study-module-row--coming .study-module-row-left > p { display: none; }
+
+.study-module-row--coming .study-module-row-left h3 { margin: 0.1rem 0 0; font-size: 1.05rem; }
+
+
+.study-chapter-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+  margin: 0 0 0.75rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
+}
+
+.study-chapter-head h3 {
+  margin: 0;
+  font-family: var(--brand-font-heading);
+  font-size: 1.3rem;
+  color: #e8d9b5;
+}
+
+.study-chapter-head span {
+  font-size: 0.8rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--brand-muted);
+}
+
+.study-lesson-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+
+.lesson-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.18rem 0.6rem;
+  border-radius: 999px;
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  border: 1px solid transparent;
+}
+
+.lesson-badge--new { background: rgba(76, 175, 80, 0.16); color: #7fd484; border-color: rgba(76, 175, 80, 0.4); }
+.lesson-badge--coming { background: rgba(255, 183, 77, 0.14); color: #f0b45c; border-color: rgba(255, 183, 77, 0.4); }
+.lesson-badge--enroll { background: rgba(201, 168, 76, 0.12); color: var(--brand-gold); border-color: rgba(201, 168, 76, 0.4); }
+.lesson-badge--locked { background: rgba(255, 255, 255, 0.05); color: var(--brand-muted); border-color: rgba(255, 255, 255, 0.14); }
+.lesson-badge--done { background: rgba(111, 207, 151, 0.12); color: #6fcf97; border-color: rgba(111, 207, 151, 0.4); }
+
+.study-module-row--done {
+  border-left: 3px solid rgba(111, 207, 151, 0.7);
+}
+
 /* ── Sign in / Create account (split layout) ── */
 .auth-page {
   min-height: 70vh;
@@ -4136,6 +4259,10 @@
 
 .auth-card-eyebrow { margin: 0; }
 
+.auth-card--center { text-align: center; }
+
+.auth-card--center .study-signup-actions { justify-content: center; }
+
 .auth-card .study-signup-form { margin-top: 0.5rem; }
 
 .auth-card .study-signup-actions { margin-top: 0.75rem; }