/* Returning Whole — P2 course-player styles.
   Purpose-built for the /app surfaces, using ONLY rw.css design tokens so the
   player matches the founder-approved site. Kept in its own file so the
   sacred assets/rw.css is never edited. */
.dev-auth-banner{max-width:640px; margin:0 auto 28px; text-align:center;
  font:500 11px/1.5 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--warmgray); background:color-mix(in srgb,var(--gold) 12%,var(--ivory));
  border:1px dashed color-mix(in srgb,var(--gold) 55%,transparent);
  border-radius:3px; padding:12px 18px;}
.app-course-list{max-width:680px; margin:0 auto; display:flex; flex-direction:column; gap:20px;}
.course-card{display:block; text-decoration:none; color:inherit;
  background:color-mix(in srgb, var(--stone) 22%, var(--ivory));
  border:1px solid color-mix(in srgb, var(--stone) 70%, transparent);
  border-radius:4px; padding:28px 30px; transition:border-color .2s, transform .2s;}
.course-card:hover{border-color:var(--gold); transform:translateY(-1px);}
.course-card h3{font-size:24px; margin:0 0 6px; font-weight:300;}
.course-card .meta{font:400 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:14px;}
.course-card p{color:#4a463f; font-size:15px; margin:0 0 16px;}
.progress-bar{height:5px; border-radius:3px; background:color-mix(in srgb,var(--stone) 60%,transparent); overflow:hidden; max-width:360px;}
.progress-bar span{display:block; height:100%; background:var(--gold); width:0; transition:width .4s;}
.course-progress{max-width:360px; margin:20px auto 0;}
.course-progress .progress-bar{margin:0 auto;}
.progress-label{font:400 12px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--warmgray); margin-top:10px; text-align:center;}
.curriculum .lessons a.lesson-link{text-decoration:none; color:#33302b; display:flex; gap:12px; align-items:baseline; width:100%;}
.curriculum .lessons a.lesson-link:hover .lesson-name{color:var(--gold);}
.curriculum .lessons li.locked{opacity:.55;}
.curriculum .lessons .state{margin-left:auto; font:500 10px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--gold);}
.curriculum .lessons .state.done{color:#5a7d52;}
.curriculum .lessons .state.locked{color:var(--warmgray);}
.lesson-stage{max-width:var(--measure); margin:0 auto;}
.lesson-stage .rw-media{width:100%; margin:0 auto 28px; display:block; border-radius:4px;}
.lesson-stage video.rw-media{background:#000; max-height:60vh;}
.lesson-stage .media-meta{font:400 12px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--warmgray); text-align:center; margin-bottom:8px;}
.lesson-stage .article-body p{margin-bottom:1.4em; color:#33302b;}
.locked-note{max-width:560px; margin:0 auto; text-align:center; color:#3d3a35;}
/* Social sign-in buttons (Google / Apple / …) + the "or" divider. Each button
   is hidden until rw-app.js reveals it (that provider's keys configured). Styled
   with rw.css tokens. */
.social-buttons{display:flex; flex-direction:column;}
.social-btn{display:flex; align-items:center; justify-content:center; gap:10px;}
.social-divider{display:flex; align-items:center; gap:14px; margin:14px 0 4px; color:var(--warmgray);}
.social-divider::before,.social-divider::after{content:""; flex:1; height:1px; background:color-mix(in srgb,var(--stone) 70%,transparent);}
.social-divider span{font:500 10px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase;}