/* Steven Webb Courses: site only styling, loaded after the 37 Years design code.
 * Everything under /design/ is the design standard and is never hand edited.
 * This file holds what the courses site needs on top of it. */

/* The Courses badge must read on the dark header. The Join Weekly Calm button,
 * its glint and the three line menu come from the design code's header-cta.css
 * (HEADER-BUTTON.md there), since 16 Sep 2026. */
.site-header .course-badge{background:var(--family-field);color:var(--family-ink)}

/* Section joins: 3px of canvas between backgrounds, on every page. The design
 * gives the homepage a 3px join between sections and before the footer. Its
 * inner pages have none: sections touch, and the footer sits a whole curve
 * below the last section, leaving a 24px band of canvas above it. Steven's
 * rule, 16 Sep 2026: only ever 3px, header, sections and footer alike. */
@media screen{
 html body.section-shapes main,html body.section-shapes main>:is(section,article)+:is(section,article),html body.section-shapes main+.site-footer{margin-top:3px}
 @supports(mask-image:url('../design/assets/section-edges/solid.svg')){
  html body.section-shapes main,html body.section-shapes main>:is(section,article)+:is(section,article),html body.section-shapes main+.site-footer{margin-top:calc(3px - var(--edge-depth))}
 }
}

/* Homepage section rhythm: oyster, quiet, oyster, quiet, oyster, field, ink. */
.section-shapes.home #who,.section-shapes.home #how{background:var(--color-sage-quiet)}
.section-shapes.home #courses{background:var(--color-canvas)}
.section-shapes.home #courses .course-card{background:var(--color-sage-quiet)}
.section-shapes.home .personal-intro{background:var(--color-canvas)}
.home .reading-layout .prose p{font-size:18px;line-height:1.6}
.home .reading-layout .prose p+p{margin-top:20px}
.home .intro .text-link{margin-top:18px}
.weekly-body>.button{margin-top:24px}

/* Video, wherever it appears: a 16:9 frame holding Vimeo's player or a file. */
.video-frame{position:relative;margin:0;flex:none;background:#000;aspect-ratio:16/9;overflow:hidden}
.video-frame iframe,.video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover;background:#000}
.hero-video{position:relative}
.hero-video.has-video .player-content{flex:1;display:flex;flex-direction:column;justify-content:flex-end}
.hero-video .video-note{font-size:15px;line-height:1.5;margin-top:16px;max-width:34ch}
.lesson-video{margin-top:28px}
.lesson-video .video-frame{border-radius:3px}

/* Course page opening: facts in the right third when there is no introduction to play yet. */
.course-hero .course-facts{list-style:none;margin:18px 0 0;padding:0;font-size:15px;line-height:1.5}
.course-hero .course-facts li{padding:9px 0;border-top:1px solid rgb(36 56 68 / .22)}
.course-hero .course-facts li:first-child{border-top:0;padding-top:0}
.course-hero .course-facts strong{font-weight:600}
.course-hero .course-meta{font-size:15px;color:var(--color-muted);margin-top:18px}
.course-hero .course-rating{font-size:15px;margin-top:6px}
.course-hero .course-rating .stars{margin-right:4px}
.course-hero .hero-actions{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:26px}
.course-hero .hero-actions .button,.course-hero .hero-actions .text-link{margin:0}

/* What you get: one plain list, no icons. */
.includes-list{list-style:none;margin:0;padding:0;max-width:60ch}
.includes-list li{position:relative;padding:14px 0 14px 26px;font-size:18px;line-height:1.5;border-top:1px solid var(--color-rule)}
.includes-list li:first-child{border-top:0;padding-top:0}
.includes-list li::before{content:'';position:absolute;left:0;top:1.05em;width:12px;height:2px;background:var(--course-ink)}
.includes-list li:first-child::before{top:.65em}

/* Choose what you pay. */
.pay-options{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.pay-options .button{min-width:96px}
.pay-note{font-size:16px;line-height:1.55;margin-top:22px;max-width:56ch}
.pay-where{font-size:14px;line-height:1.5;margin-top:14px;color:var(--color-muted);max-width:56ch}

/* Simple reading pages: refunds, sign in, account, locked days, 404. */
.inner-page .simple-reading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:64px;align-items:start}
.inner-page .simple-reading .prose p{font-size:18px;line-height:1.6}
.inner-page .simple-reading .prose p+p{margin-top:20px}
.inner-page .simple-reading .prose .button{margin-top:26px}
.small-note{font-size:15px;color:var(--color-muted);margin-top:22px;line-height:1.5}
.muted{color:var(--color-muted)}
.gap-top{margin-top:28px}

/* Forms in the member area and the admin, in the design's own vocabulary. */
.form-stack{display:grid;gap:22px;max-width:760px;margin-top:26px}
.form-stack .admin-h2{margin-top:18px}
.field label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}
.field input:not([type=checkbox]):not([type=file]),.field textarea,.field select,.form-row select{width:100%;min-height:52px;border:1px solid var(--color-border);border-radius:3px;background:var(--color-canvas);color:var(--color-text);padding:10px 12px;font:inherit;font-size:16px}
.field textarea{min-height:140px;resize:vertical;line-height:1.5}
.field input[type=file]{display:block;font-size:15px;padding:12px 0}
.field .hint,.hint{font-size:14px;color:var(--color-muted);margin-top:8px;max-width:60ch;line-height:1.5}
.field-check{display:flex;align-items:center;gap:12px;font-size:16px;min-height:44px}
.field-check input{width:20px;height:20px;margin:0;accent-color:var(--family-ink);flex:none}
.field-check label{margin:0;font-size:16px;font-weight:400}
/* The Weekly Calm invitation after joining: a long consent line, a hidden field only bots fill. */
.weekly-body>p+p{margin-top:14px}
.weekly-form{margin-top:24px}
.weekly-form .field-check{align-items:flex-start}
.weekly-form .field-check input{margin-top:3px}
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.form-actions{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:8px}
.form-actions .text-link{margin:0}
.form-row select{width:auto;flex:1;min-width:0}
.search-form{max-width:560px;margin-top:26px}
.sign-out{margin-top:36px}
.text-button.danger{color:var(--color-error)}
.notice{padding:14px 18px;border:1px solid var(--family-ink);border-radius:3px;background:var(--color-canvas);font-size:16px;margin:22px 0 0;max-width:760px}
.notice.error{border-color:var(--color-error);color:var(--color-error);background:var(--color-error-surface)}
.current-media{font-size:16px;line-height:1.5;max-width:60ch}

/* Tables and the admin frame. */
.data-table{width:100%;border-collapse:collapse;margin-top:26px;font-size:16px}
.data-table th,.data-table td{text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--color-rule);vertical-align:top;line-height:1.45}
.data-table thead th{font-weight:600;font-size:14px;color:var(--color-muted)}
.data-table tbody th{font-weight:600;white-space:nowrap}
.data-table td form{display:inline;margin:0}
.data-table .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.inline-actions{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.inline-actions form{margin:0}
.inline-actions .text-button{padding:6px 0;min-height:36px}
.admin-h2{font-size:26px;margin-top:40px}
.admin-h2+.data-table,.admin-h2+.form-stack{margin-top:18px}
.admin-nav{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:22px;font-size:16px;font-weight:500}
.admin-nav a{display:inline-flex;align-items:center;min-height:44px}
.admin-nav a[aria-current]{font-weight:650;text-decoration:underline;text-underline-offset:6px}
.inner-page main>.admin-head{padding-bottom:calc(28px + var(--edge-half))}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-top:8px}
.stat{padding:20px;background:var(--color-sage-quiet);border-radius:3px}
.stat strong{display:block;font-size:32px;line-height:1.1;font-weight:500;letter-spacing:-.02em}
.stat span{display:block;font-size:14px;margin-top:8px;color:var(--color-muted)}

/* Your courses. */
.my-courses{list-style:none;padding:0;margin:26px 0 0;max-width:820px}
.my-courses li{padding:26px 0;border-top:1px solid var(--color-rule)}
.my-courses li:first-child{border-top:0;padding-top:0}
.my-courses h2{font-size:28px}
.my-courses h2 a{text-decoration:none}
.my-courses .progress{font-size:15px;color:var(--color-muted);margin-top:10px}
.my-courses .button{margin-top:18px}

/* A day. */
.lesson-notes{margin-top:24px;max-width:60ch;font-size:18px;line-height:1.6}
.lesson-notes p+p{margin-top:18px}
.lesson-transcript{margin-top:26px;max-width:64ch}
.lesson-transcript summary{min-height:48px;padding:10px 0;cursor:pointer;font-weight:500;color:var(--course-ink)}
.lesson-transcript .prose{margin-top:12px;font-size:17px;line-height:1.65}
.lesson-transcript .prose p+p{margin-top:18px}
.lesson-actions form{margin:0}
.course-family .lesson-list a.missing-image{grid-template-columns:28px minmax(0,1fr) auto}
.course-family .lesson-sidebar .lesson-list a.missing-image{grid-template-columns:1fr}

/* A moment to reflect: one question, the answers, then the percentages. */
.reflect .answer-set{border:0;padding:0;margin:0;display:grid;gap:10px;min-width:0}
.answer-option{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--color-rule);border-radius:3px;background:var(--color-canvas);cursor:pointer;font-size:17px;line-height:1.45}
.answer-option input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--course-ink);flex:none}
.answer-option:has(input:checked){border-color:var(--course-ink)}
.answer-form .form-actions{margin-top:20px}
.answer-results{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.answer-line{display:flex;justify-content:space-between;gap:16px;font-size:17px;line-height:1.45}
.answer-line small{display:block;font-size:13px;color:var(--color-muted);margin-top:4px}
.answer-pct{font-variant-numeric:tabular-nums;font-weight:600;flex:none}
.answer-bar{height:8px;margin-top:8px;background:var(--color-sage-quiet);border-radius:4px;overflow:hidden}
.answer-bar span{display:block;height:100%;background:var(--course-ink);border-radius:4px}
.answer-results .is-mine .answer-text{font-weight:600}
.reflect-body>.notice{margin:0 0 20px}
.reflect-body>.hint{margin-top:22px}
.section-shapes .reflect{background:var(--color-canvas)}

/* Comments, on top of the design's discussion styles. */
.comment-actions{display:flex;flex-wrap:wrap;gap:0 20px;align-items:center;margin-top:4px}
.comment-actions form{margin:0;display:inline}
.comment-removed{font-size:15px;color:var(--color-muted)}
.comment-form .notice{margin:0 0 18px}
.reply-context a{font-size:15px}
.inner-page .discussion .section-heading{margin-bottom:14px}

/* Reviews: stars and the words beside them. */
.stars{color:var(--course-ink);letter-spacing:.08em;white-space:nowrap}
.review-average{display:block;font-size:18px;font-weight:400;letter-spacing:0;margin-top:8px}
.review-list{display:grid;gap:22px}
.review{margin:0;padding:24px 26px;background:var(--color-canvas);border:1px solid var(--color-rule);border-radius:3px}
.review .review-stars{margin:0 0 10px;font-size:18px}
.review p{font-size:18px;line-height:1.6;max-width:none}
.review p+p{margin-top:12px}
.review cite{display:block;font-style:normal;font-size:15px;color:var(--color-muted);margin-top:14px}
.review-list>p{font-size:16px;color:var(--color-muted)}
.review-line{font-size:15px;color:var(--color-muted);margin-top:12px}
.review-line .stars{font-size:14px}
.badge{display:inline-block;font-size:12px;font-weight:500;padding:3px 8px;border:1px solid var(--color-rule);border-radius:3px;margin-left:8px;vertical-align:middle;letter-spacing:0;color:var(--color-muted)}
.star-field{border:0;padding:0;margin:0;min-width:0}
.star-field legend{font-size:14px;font-weight:500;margin-bottom:8px;padding:0}
.star-row{display:flex;flex-wrap:wrap;gap:10px}
.star-row label{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:8px 14px;border:1px solid var(--color-rule);border-radius:3px;cursor:pointer;font-size:16px;color:var(--course-ink);letter-spacing:.06em}
.star-row label:has(input:checked){border-color:var(--course-ink);background:var(--color-sage-quiet)}
.star-row input{width:18px;height:18px;margin:0;accent-color:var(--course-ink)}
.section-shapes.home #reviews{background:var(--color-canvas)}
.section-shapes.home.has-reviews .personal-intro{background:var(--color-sage-quiet)}

/* Cookie banner, only present when analytics is configured. */
.cookie-banner{position:fixed;inset:auto 0 0 0;z-index:50;background:var(--family-ink);color:#F7F6F2;padding:16px var(--layout-gutter);font-size:15px}
.cookie-banner__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;max-width:var(--layout-container);margin:auto}
.cookie-banner p{margin:0;max-width:70ch}
.cookie-banner a{color:inherit;text-decoration:underline}
.cookie-banner__actions{display:flex;gap:10px}
.cookie-banner .button{min-height:44px;background:#F7F6F2;color:var(--family-ink);border-color:#F7F6F2}
.cookie-banner .button.secondary{background:transparent;color:#F7F6F2}

@media(max-width:1000px){
 .inner-page .simple-reading{gap:36px}
}
@media(max-width:760px){
 .inner-page .simple-reading{display:block}
 .inner-page .simple-reading .prose{margin-top:24px}
 .field-row{grid-template-columns:1fr}
 .includes-list li{font-size:17px}
 .hero-video .video-note{max-width:none}
 .data-table{display:block;overflow-x:auto}
 .stat strong{font-size:28px}
 .admin-h2{font-size:24px;margin-top:32px}
 .course-family .lesson-list a.missing-image{grid-template-columns:24px minmax(0,1fr)}
 .course-family .lesson-list a.missing-image .lesson-state{grid-column:2}
}
@media print{.cookie-banner,.admin-nav,.form-actions{display:none}}