/* Layout only. Colors and fonts come from theme.css. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); line-height: 1.5; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; }

/* BOLD IS ALLOWED FOR EXACTLY THREE THINGS: headings, the header name (logo),
   and **emphasis** inside paragraphs (Raleway 600). Everything else — buttons,
   labels, badges, banners and future controls — is regular 400, site-wide.
   The browser may never fake a bold. Elements inside a heading set their own weight. */
html { font-synthesis: style; }
body { font-variant-numeric: lining-nums; }
body :not(h1, h2, h3, h4, h5, h6, h1 *, h2 *, h3 *, h4 *, h5 *, h6 *) { font-weight: 400; }
button, input, select, textarea, label { font-family: var(--font-body); font-weight: 400; }
body p strong { font-weight: 600; }  /* **emphasis**: Raleway semibold */
a { color: var(--color-link); }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
img { max-width: 100%; }

/* Background brain: left lobe pinned flush to the far right, full height below
   the header, so it reads as a whole brain with its right half off the page.
   Full strength. Everything else sits above it. Pages that get it: app/layout.py. */
.bg-brain { position: fixed; right: 0; top: var(--chrome-h, 64px); height: calc(100vh - var(--chrome-h, 64px)); width: auto; max-width: none; z-index: 0; pointer-events: none; user-select: none; }
.topbar, .banner, main { position: relative; z-index: 1; }

.topbar { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: center; min-height: 64px; padding: 12px 16px; background: var(--color-header-bg); color: var(--color-header-text); border-bottom: 3px solid var(--color-accent); }
.topbar a, .topbar button.link { color: var(--color-header-text); }
/* The header name is part of the logo: the one exception to the no-bold rule. */
.topbar .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 600; text-decoration: none; }
.topbar .brand img { width: 36px; height: 36px; border-radius: 6px; display: block; flex: none; }
.topbar .right { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; min-width: 0; }
.topbar form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; min-width: 0; }
.topbar .who { font-size: 0.9rem; opacity: 0.85; overflow-wrap: anywhere; }
.topbar select { font: inherit; font-size: 0.9rem; padding: 4px 6px; border-radius: 6px; border: 0; color: var(--navy); background: #FFFFFF; }

.banner { background: var(--color-banner-bg); color: var(--color-banner-text); padding: 10px 16px; text-align: center; }
.banner form { display: inline; margin: 0; }
.banner button.link { color: var(--color-banner-text); }

main { max-width: 960px; margin: 0 auto; padding: 24px 16px; }
.narrow { max-width: 420px; }
button, .button { background: var(--color-button-bg); color: var(--color-button-text); border: 0; padding: 10px 16px; border-radius: 6px; font: inherit; cursor: pointer; text-decoration: none; display: inline-block; }
button.link { background: none; color: var(--color-link); padding: 0; text-decoration: underline; }
input[type=email] { width: 100%; padding: 10px; border: 1px solid var(--color-border); border-radius: 6px; font: inherit; font-size: max(16px, 1rem); margin: 8px 0 12px; background: #FFFFFF; color: var(--color-text); }
.error { color: var(--color-error); }
.muted { color: var(--color-muted); }
.dev-link { margin-top: 24px; padding: 12px; background: var(--color-notice-bg); border: 1px dashed var(--color-notice-border); border-radius: 6px; overflow-wrap: anywhere; }
.dev-link .dev-label { display: block; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.05em; }
.check-email .email { overflow-wrap: anywhere; }

/* Cards are SOLID: opaque backgrounds, no opacity, never see-through. */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card { display: block; padding: 20px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); text-decoration: none; min-height: 140px; }
a.card:hover { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.card h2 { margin: 0 0 8px; font-size: 1.15rem; }
.card h3 { margin: 0 0 4px; font-size: 1rem; }
.card p { margin: 0; }
.card.locked, .card.coming_soon { color: var(--color-muted); cursor: default; }
.card.warm { background: var(--color-warm-surface); color: var(--color-warm-text); border-color: var(--color-warm-border); }
.card.warm h2, .card.warm h3 { color: var(--color-warm-heading); }
.tag { display: inline-block; font-family: var(--font-body); font-weight: 400; font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; margin-left: 6px; vertical-align: middle; }

/* Home page (2026-10-13): Continue learning panel, course cards grouped by area, then the other boxes. */
.continue-panel { display: flex; align-items: center; gap: 24px; margin: 0 0 32px; padding: 20px 24px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.ring { position: relative; flex: none; width: 120px; height: 120px; }
.ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-svg circle { fill: none; stroke-width: 8; }
.ring-track { stroke: var(--color-progress-track); }
.ring-fill { stroke: var(--color-progress-fill); stroke-linecap: round; }
.ring-fill[stroke-dashoffset="100"] { stroke: none; }  /* 0%: no dot at the top */
/* Picture centred inside the ring at every width; .ring > beats .cover-placeholder's own 100% size (fix 2026-10-14). */
.ring > .ring-cover { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); margin: 0; border-radius: 50%; object-fit: cover; display: block; }
.continue-text { min-width: 0; }
.continue-text h2 { margin: 0 0 2px; font-size: 1.2rem; }
.continue-course { margin: 0; font-family: var(--font-heading); font-size: 1.05rem; }
.continue-stats { margin: 4px 0 12px; color: var(--color-muted); }
.button.play { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 10px 20px 10px 16px; }
.play-icon { width: 16px; height: 16px; fill: currentColor; flex: none; }

.course-area { margin: 0 0 28px; }
.course-area > h2 { margin: 0 0 12px; font-size: 1.3rem; }
.course-card.coming-soon { cursor: default; color: var(--color-muted); }
.course-card.coming-soon .cover { filter: grayscale(1); opacity: 0.55; }
.course-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
/* Every course card picture is square (COURSE CARDS SQUARE, founder Q1a 2026-10-16), so titles line up across
   the shelf at every width; wide covers crop to fill (centred unless COVER_FOCUS sets a focus). */
.course-card .cover { position: relative; aspect-ratio: 1 / 1; }
.course-card .cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A square cover (the Holistic Brain app image) shows whole, never cropped, on white (its corners are white). */
.course-card .cover.cover-whole { background: #FFFFFF; }
.course-card .cover.cover-whole img { object-fit: contain; }
.course-card.locked .cover img { filter: grayscale(0.55) brightness(0.92); }  /* gently dimmed; the card stays solid */
.cover-placeholder { display: block; width: 100%; height: 100%; background: url("img/brain-outline-white.png") center / auto 64% no-repeat, linear-gradient(135deg, var(--color-cover-from), var(--color-cover-to)); }
.ring-cover.cover-placeholder { background-size: auto 58%, auto; }
.lock-badge { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--color-lock-bg); color: var(--color-lock-text); font-size: 0.8rem; }
.lock-badge svg { width: 13px; height: 13px; fill: currentColor; }
.course-card-body { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.course-card-body h3 { margin: 0; font-size: 1.1rem; }
.course-card-body p { margin: 0; }
.lesson-count { font-size: 0.9rem; }
.bar { height: 8px; border-radius: 999px; background: var(--color-progress-track); overflow: hidden; margin-top: 6px; }
.bar span { display: block; height: 100%; background: var(--color-progress-fill); border-radius: 999px; }
.bar-label { font-size: 0.85rem; }
.home-boxes { margin-top: 8px; }
.home-boxes .cards { align-items: start; }  /* each box only as tall as its content */
.home-boxes .card { min-height: 0; }
/* Explore cards share the course cards' square picture (EXPLORE ROW, 2026-10-16); titles line up across the row. */
.explore-card .course-card-body h2 { margin: 0; font-size: 1.15rem; }
.explore-card.warm .cover img { filter: none; }  /* the Studies picture stays bright, locked or not */
.explore-card.warm.coming-soon .cover { filter: none; opacity: 1; }  /* Wellness Programs: its approved cover stays in colour though the card is Coming soon */

/* Course pages and the lesson player. */
.crumb { margin: 0 0 8px; color: var(--color-muted); font-size: 0.9rem; }
.button.secondary { background: #FFFFFF; color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-border); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.progress { color: var(--color-muted); }
.section-list { list-style: none; padding: 0; margin: 16px 0 32px; display: grid; gap: 10px; }
.section-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.section-row:hover { border-color: var(--color-accent); }
.section-row.next { background: var(--color-slide-bg); border-color: var(--color-next); box-shadow: inset 5px 0 0 var(--color-next); }
.section-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid currentColor; font-size: 0.85rem; }
.section-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.section-state { flex: none; font-size: 0.85rem; color: var(--color-muted); }
.section-row.next .section-state { color: var(--color-text); }
.home-link { margin: 0 0 4px; font-size: 0.9rem; }
/* Squares are containers, circles are lessons (COURSE PAGE SHAPE, 2026-10-16).
   Topic cards: square, home-card look, 3–4 across on a computer, 2 on a phone (1 on the smallest). */
.topic-cards { list-style: none; padding: 0; margin: 16px 0 32px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.topic-cards li { display: flex; }
.topic-card { width: 100%; text-decoration: none; color: inherit; }
/* Every topic picture (placeholder included) is the same square, cropped to fill (WALK FIXES, 2026-10-16). */
.topic-card .cover { aspect-ratio: 1 / 1; flex: none; }
.topic-card .course-card-body { flex: none; gap: 4px; padding: 12px 16px 14px; }
.topic-card h3 { overflow-wrap: anywhere; }
.topic-card.coming-soon { cursor: default; color: var(--color-muted); }
.topic-card.coming-soon .cover { filter: grayscale(1); opacity: 0.55; }
/* Mini lesson circles: 3 across on a computer, 2 on a phone; circle + label is one tap target. */
.lesson-minis { list-style: none; padding: 0; margin: 16px 0 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; }
.lesson-minis li { display: flex; }
.lesson-mini { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 12px; text-align: center; text-decoration: none; color: inherit; }
a.lesson-mini:hover .lesson-mini-label { text-decoration: underline; }
a.lesson-mini:focus-visible { outline: 2px solid var(--color-next); outline-offset: 2px; }
.lesson-mini-ring { position: relative; display: block; width: min(200px, 100%); margin-bottom: 6px; }
.lesson-mini-ring .lock-badge { top: auto; bottom: 4px; left: 50%; transform: translateX(-50%); }
.lesson-mini-ring .free-badge { top: 0; right: 0; }
.lesson-mini .arc-fill { stroke-dasharray: none; }
.lesson-mini-label { font-family: var(--font-heading); font-size: 1rem; overflow-wrap: anywhere; }
.lesson-mini-status { font-size: 0.85rem; color: var(--color-muted); }
.lesson-mini.is-locked { cursor: default; }
.lesson-mini.is-locked svg { filter: grayscale(0.7); opacity: 0.55; }
.lesson-mini.is-locked .lesson-mini-label { color: var(--color-muted); }
.lesson-mini.is-soon { cursor: default; }  /* a held new lesson: greyed Coming soon, the topic card's look (Q11a) */
.lesson-mini.is-soon svg { filter: grayscale(1); opacity: 0.55; }
.lesson-mini.is-soon .lesson-mini-label { color: var(--color-muted); }
.references { margin-top: 24px; }
.references summary { cursor: pointer; font-family: var(--font-heading); font-size: 1.1rem; margin: 0 0 12px; }
.education-line { font-size: 0.9rem; }
.reference { padding-left: 2em; text-indent: -2em; margin: 0 0 8px; overflow-wrap: anywhere; }

.lesson { max-width: 820px; margin: 0 auto; }
.slide-block { margin: 0 0 16px; }
.slide { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-slide-bg); }
.slide-media { min-width: 0; min-height: 0; }
.slide-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slide-text { padding: 20px 24px; min-width: 0; }
.slide-text h2 { margin: 0 0 6px; font-size: clamp(1.1rem, 2.6vw, 1.6rem); line-height: 1.25; }
.slide-text p { margin: 0; }
.layout-full-bleed .slide-media { position: absolute; inset: 0; }
.layout-full-bleed .slide-text { position: absolute; left: 0; right: 0; bottom: 0; background: var(--color-slide-overlay); color: var(--color-slide-overlay-text); }
.layout-split { display: grid; grid-template-columns: 1fr 1fr; }
.layout-split .slide-text { display: flex; flex-direction: column; justify-content: center; }
.layout-image-above { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
/* "Fit: whole" (exact graphics): the picture sits whole inside its usual area, on cream; nothing is cropped. */
.fit-whole .slide-media { background: var(--color-slide-fit-bg); }
.fit-whole .slide-media img { object-fit: contain; }
.citation { margin-top: 6px; font-size: 0.8rem; color: var(--color-muted); }
.slide-audio { display: block; width: 100%; margin: 0 0 16px; }
.script { margin: 0 0 24px; }
.script p { margin: 0 0 12px; line-height: 1.65; }
.slide-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 16px 0 8px; }
.slide-nav form { margin: 0; }
.slide-count { color: var(--color-muted); }

.quiz-q { margin: 0 0 28px; padding: 16px 20px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); }
.quiz-q h2 { margin: 0 0 6px; font-size: 1.05rem; }
/* Course quizzes: one card per question (course-card look), a comfortable reading width, centred;
   the picture of the slide the question is about sits on top in the slides' wide shape. */
.quiz-column { max-width: 480px; }  /* home link, crumb, heading, cards and buttons share one edge */
.quiz-card { max-width: 480px; margin: 0 auto 28px; padding: 0; overflow: hidden; }
.quiz-card .quiz-image { aspect-ratio: 16 / 9; }
.quiz-card .quiz-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.quiz-card .quiz-body { padding: 16px 20px 18px; }
.answers { border: 0; padding: 0; margin: 12px 0; list-style: none; display: grid; gap: 8px; }
.answer-option { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-slide-bg); cursor: pointer; }
.answer-option input { margin-top: 4px; }
.answer { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-slide-bg); }
.answer .tag { margin-left: 0; }
.answer.right { box-shadow: inset 5px 0 0 var(--color-answer-right); }
.answer.chosen:not(.right) { box-shadow: inset 5px 0 0 var(--color-answer-chosen); }
.why { margin: 8px 0 0; }

/* Studies (warm/botanical side). */
.study { max-width: 820px; margin: 0 auto; }
.placeholder { display: inline-block; padding: 2px 8px; border: 1px dashed var(--color-placeholder-border); border-radius: 4px; background: var(--color-placeholder-bg); color: var(--color-placeholder-text); font-size: 0.9rem; }
.sample-banner { margin: 0 0 16px; padding: 8px 12px; border: 1px dashed var(--color-notice-border); border-radius: 6px; background: var(--color-notice-bg); font-size: 0.9rem; }
.importance { margin: 24px 0; padding: 16px 20px; border-radius: 8px; background: var(--color-warm-surface); color: var(--color-warm-text); border: 1px solid var(--color-warm-border); }
.importance h2 { margin-top: 0; font-size: 1.15rem; color: var(--color-warm-heading); }
.chooser-prompt { margin-bottom: 4px; }
.blend-cards { margin-top: 12px; }
.blend-card { padding: 0; overflow: hidden; }
.blend-card h2, .blend-card p { padding: 0 16px; }
.blend-card h2 { margin-top: 12px; }
.blend-card p { padding-bottom: 16px; }
.blend-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.blend-hero { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; margin: 8px 0 16px; }
.tagline { font-size: 1.1rem; color: var(--color-warm-heading); }
.caveat { color: var(--color-muted); }
.start-row { margin: 24px 0; }
.run-card { margin: 16px 0; min-height: 0; }
.jump-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 12px; }
button.secondary { background: #FFFFFF; color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-border); }
.muted { font-size: 0.9rem; }
.kit-form { margin-top: 14px; }
.kit-form label { display: block; margin-bottom: 6px; }
.kit-row { display: flex; gap: 8px; flex-wrap: wrap; }
.kit-row input { flex: 1 1 140px; min-width: 0; padding: 10px; border: 1px solid var(--color-border); border-radius: 6px; font: inherit; font-size: max(16px, 1rem); letter-spacing: 0.08em; text-transform: uppercase; background: #FFFFFF; color: var(--color-text); }
.kit-code { font-size: 1.4rem; letter-spacing: 0.12em; }
.studies-locked { max-width: 560px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 10; background: var(--color-modal-backdrop); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.modal-backdrop[hidden] { display: none; }
.modal { position: relative; width: 100%; max-width: 520px; background: var(--color-slide-bg); color: var(--color-text); border-radius: 10px; padding: 24px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); }
.modal h2 { margin-top: 0; }
.modal-close { position: absolute; top: 8px; right: 12px; font-size: 1.6rem; line-height: 1; text-decoration: none; color: var(--color-muted); }
.tick { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0; cursor: pointer; }
.tick input { margin-top: 5px; width: 18px; height: 18px; flex: none; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.statement h1 { font-size: 1.5rem; }
.statement h2 { font-size: 1.15rem; margin-top: 28px; }

.day0-form textarea, .card-form textarea { width: 100%; padding: 10px; border: 1px solid var(--color-border); border-radius: 6px; font: inherit; font-size: max(16px, 1rem); background: #FFFFFF; color: var(--color-text); margin: 6px 0 18px; }
.box-label { display: block; margin-top: 8px; }
.scales { border: 0; padding: 0; margin: 16px 0 24px; display: grid; gap: 14px; }
.scale { display: grid; grid-template-columns: 7.5rem 1fr 7.5rem; align-items: center; gap: 10px; padding: 12px; border-radius: 8px; background: var(--color-warm-surface); color: var(--color-warm-text); }
.scale .end.low { text-align: right; }
.points { display: flex; justify-content: space-between; position: relative; }
.points::before { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; border-top: 2px solid var(--color-scale-point); }
.point { position: relative; display: grid; place-items: center; width: 28px; height: 28px; cursor: pointer; }
.point input { appearance: none; -webkit-appearance: none; margin: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-scale-point); background: #FFFFFF; cursor: pointer; }
.point input:checked { background: var(--color-scale-selected); border-color: var(--color-scale-selected); }
.point input:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.reminder { margin: 8px 0 24px; }
.reminder input[type=time] { font: inherit; font-size: max(16px, 1rem); padding: 8px; border: 1px solid var(--color-border); border-radius: 6px; background: #FFFFFF; color: var(--color-text); margin: 6px 0; }
.reminder label { display: block; }
.tz-line { margin: 4px 0; }
.reminder select { max-width: 100%; font: inherit; padding: 6px; }

/* Daily cards, Day 8 post, results. */
.ticks { margin: 8px 0 20px; padding: 14px 16px; border: 1px solid var(--color-warm-border); border-radius: 8px; background: var(--color-slide-bg); }
.ticks h2 { margin: 0 0 8px; font-size: 1.1rem; }
.tick-row { display: flex; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--color-border); cursor: pointer; }
.tick-row:last-of-type { border-bottom: 0; }
.tick-row input { width: 22px; height: 22px; flex: none; accent-color: var(--earth-rust); }
.tick-status { min-height: 1.2em; margin: 6px 0 0; }
.day-image { margin: 0 0 20px; }
.day-image img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.day-image figcaption { margin-top: 8px; }
.card-form { margin-top: 8px; }
.card-form button { display: block; }
.saved-note { white-space: pre-wrap; padding: 10px 12px; border-radius: 6px; background: var(--color-surface); min-height: 1.5em; }
.scales[disabled] { opacity: 0.85; }
.helper { margin: 0 0 4px; }
.yesno { border: 0; padding: 0; margin: 8px 0 18px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.yesno legend { margin-bottom: 8px; padding: 0; }
.yesno label { display: flex; gap: 8px; align-items: center; }
.card-list { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; }
.pairs { list-style: none; padding: 0; margin: 16px 0 24px; display: grid; gap: 8px; }
.pairs li { padding: 10px 14px; border-radius: 6px; background: var(--color-warm-surface); color: var(--color-warm-text); overflow-wrap: anywhere; }
.answers-back h2 { font-size: 1.1rem; margin-top: 24px; }
.own-words { white-space: pre-wrap; margin: 2px 0 14px; padding-left: 12px; border-left: 3px solid var(--color-warm-border); }
.daily-notes { margin: 24px 0 12px; }
.standing-line { margin: 12px 0 20px; font-size: 1.05rem; color: var(--color-warm-heading); }

/* Phones: one column, no sideways scroll, brain hidden so it never crowds the cards. */
@media (max-width: 720px) {
  .bg-brain { display: none; }
  .cards { grid-template-columns: 1fr; }
  .card { min-height: 0; }
  .continue-panel { gap: 16px; padding: 16px; align-items: flex-start; }
  .continue-panel .ring { width: 88px; height: 88px; }
  .ring > .ring-cover { inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); }
  main { padding: 16px; }
  h1 { font-size: 1.6rem; }
  .topbar { padding: 10px 16px; }
  .topbar .right { width: 100%; justify-content: space-between; }
  .topbar .who { font-size: 0.8rem; }
  .narrow { max-width: none; }
  /* Split stacks: image above the text. Image-above lets the text grow below the picture. */
  .layout-split, .layout-image-above { display: block; aspect-ratio: auto; }
  .layout-image-above .slide-media { aspect-ratio: 16 / 9; }
  /* Split on a phone: the picture shows whole in its own shape (8:9 for split pictures) above the text — no 16:9
     band, nothing cropped (founder 2026-10-25 Q1a). The 8:9 holds the space only until the picture has loaded. */
  .layout-split .slide-media img { height: auto; aspect-ratio: auto 8 / 9; }
  .slide-text { padding: 14px 16px; }
  /* Full-bleed keeps its text over the image at the same phone sizes as the other layouts.
     A 16:9 sizer sets the height; if the band needs more room the slide grows, so it never clips. */
  .layout-full-bleed { display: grid; aspect-ratio: auto; }
  .layout-full-bleed::before { content: ""; grid-area: 1 / 1; padding-top: 56.25%; }
  .layout-full-bleed .slide-text { position: relative; grid-area: 1 / 1; align-self: end; }
  /* "Fit: whole" on a phone: the picture area takes the picture's own shape at full width (no 16:9 squeeze). */
  .fit-whole .slide-media, .layout-split.fit-whole .slide-media, .layout-image-above.fit-whole .slide-media { aspect-ratio: auto; }
  .fit-whole .slide-media img { height: auto; }
  .layout-full-bleed.fit-whole::before { content: none; }
  .layout-full-bleed.fit-whole .slide-media { position: relative; grid-area: 1 / 1; }
  .section-row { padding: 12px; gap: 10px; }
  .topic-cards, .lesson-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .quiz-q { padding: 14px; }
  .quiz-card { padding: 0; }
  .quiz-card .quiz-body { padding: 14px; }
  .scale { grid-template-columns: 1fr 1fr; grid-template-areas: "low high" "points points"; }
  .scale .end.low { grid-area: low; text-align: left; }
  .scale .end.high { grid-area: high; text-align: right; }
  .scale .points { grid-area: points; }
  .modal { padding: 20px 16px; }
}

/* Phase 3c: quiet support line, stop link, outbox. */
.support-line { margin: 32px 0 0; font-size: 0.85rem; color: var(--color-muted); }
.support-line .placeholder { font-size: 0.8rem; }
.quiet-link { margin-top: 28px; font-size: 0.85rem; }
.quiet-link a { color: var(--color-muted); }
.ended-run, .closed-run { margin: 6px 0; }
.outbox .email { margin: 0 0 28px; border: 1px solid var(--color-border); border-radius: 8px; background: #FFFFFF; overflow: hidden; }
.email-head { display: grid; grid-template-columns: 6rem 1fr; gap: 4px 12px; margin: 0; padding: 12px 16px; background: var(--color-surface); font-size: 0.9rem; }
.email-head dt { color: var(--color-muted); }
.email-head dd { margin: 0; overflow-wrap: anywhere; }
.email-body { padding: 16px; max-width: 600px; overflow-wrap: anywhere; }
.email-body img { max-width: 100%; height: auto; }

/* Image Studio — Build → Image Studio (founder only; IMAGE STUDIO ON PROD 2026-10-25, founder 20:06 "built in circle
   lessons"). Landing: today's count + ⓘ on one line (the Daily limit sits in a ⋯ drawer), the course pills, a Lesson Circle per lesson (the ONE SEGMENT LOOK from
   _circle.html) with its segment list. Segment: slide cards. Slide page: brief + Generate first, the two options right
   below, then style / extra references / slide text, folded where long. No inner scrolling panels; 44 px targets;
   one column at 390 px. */
.studio-today { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 12px 0 0; }
.studio-today-count { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.studio-drawer-slot > .kit-drawer { margin-top: 12px; }
.studio-limit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.studio-limit-head { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; }
.studio-cap-input { flex: none; width: 5.5em; min-height: var(--kit-target); box-sizing: border-box; padding: 0 10px; border: 1px solid var(--color-border); border-radius: 10px; font: 400 16px var(--font-body); }
.studio-pills { margin: 16px 0; }
.studio-pill-count { margin-left: 6px; font-size: 12px; opacity: 0.8; }
.studio-topic { font-family: var(--font-heading); font-size: 1.15rem; margin: 22px 0 8px; }
.studio-circles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; }
.studio-lesson { display: flex; flex-direction: column; gap: 10px; }
.studio-lesson-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.studio-ring { width: 100%; max-width: 250px; margin: 0 auto; }
.studio-parts { margin-top: 4px; grid-template-columns: 1fr; }
.studio-parts .lab { min-height: var(--kit-target); box-sizing: border-box; }
.studio-cover { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; color: var(--color-text); text-decoration: none; }
.studio-cover img { width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--color-border); }
.studio-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.studio-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: var(--kit-target); padding: 10px; border: 1px solid var(--color-border); border-radius: var(--kit-radius); background: #FFFFFF; color: var(--color-text); text-decoration: none; box-sizing: border-box; height: 100%; }
.studio-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--color-slide-bg); }
.studio-card-title { font-family: var(--font-heading); font-size: 15px; }
.studio-card:focus-visible, .studio-cover:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.studio-export { margin: 18px 0 0; }
.studio-now { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; }
.studio-current { display: block; width: 140px; object-fit: cover; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-slide-bg); }
.studio-now .kit-line { flex: 1 1 200px; margin: 0; overflow-wrap: anywhere; }
.studio-form { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.studio-brief-label { font-family: var(--font-heading); }
.studio-form textarea { width: 100%; box-sizing: border-box; font: 400 16px var(--font-body); padding: 10px; border: 1px solid var(--color-border); border-radius: 10px; }
.studio-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.studio-options-area { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0 0 18px; }
.studio-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
.studio-options figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.studio-options figure > img { display: block; width: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-slide-bg); }
.studio-options form { margin: 0; }
.studio-approved { margin: 0; min-height: var(--kit-target); display: flex; align-items: center; font-family: var(--font-heading); }
.studio-anchors { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.8rem; }
.studio-anchors img { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; border: 1px solid var(--color-border); }
.studio-fold { border: 1px solid var(--color-border); border-radius: var(--kit-radius); margin: 0 0 12px; padding: 10px 14px; background: #FFFFFF; }
.studio-fold > summary { cursor: pointer; min-height: var(--kit-target); display: flex; align-items: center; gap: 6px; font-family: var(--font-heading); }
.studio-style legend { font-family: var(--font-heading); padding: 0 4px; }
.studio-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: var(--kit-target); }
.studio-slide-text p { margin: 0 0 8px; }
.studio-refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; padding-top: 6px; }
.studio-refs label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; min-width: 0; overflow-wrap: anywhere; }
.studio-refs input { width: 22px; height: 22px; }
.studio-refs img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; }
.studio-refs-note { grid-column: 1 / -1; margin: 0; }
/* References picker + ★ Use as reference (founder 2026-10-28, Q83a/Q84a; app/studio.py → picker_groups, star): the picker
   is a studio-fold of groups, each the extras' thumbnail grid; a starred card's line sits under its card. */
.studio-pick-group { margin: 10px 0 0; }
.studio-pick-head { margin: 0; font-family: var(--font-heading); }
.studio-cards > li { display: flex; flex-direction: column; gap: 4px; }
.studio-cards > li > .studio-card { flex: 1 1 auto; }
.studio-star { align-self: flex-start; }
.studio-starred { display: inline-flex; align-items: center; min-height: var(--kit-target); margin: 0; }
/* ☆ Unstar (founder 2026-10-28, Q10a) beside the starred line; wraps under it on a phone. */
.studio-starred-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.studio-sent { font-size: 13px; }
/* Use a photo (2026-10-25): My photos as tap tiles, Top / Centre / Bottom in a row, the fitted preview + Approve. */
.studio-photo-form { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 6px; }
.studio-photo-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; width: 100%; }
.studio-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.studio-photo-choice { display: flex; flex-direction: column; gap: 4px; min-height: var(--kit-target); font-size: 0.8rem; min-width: 0; overflow-wrap: anywhere; cursor: pointer; }
.studio-photo-choice input { width: 22px; height: 22px; }
.studio-photo-choice img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; border: 2px solid transparent; }
.studio-photo-choice input:checked ~ img { border-color: var(--color-next); }
.studio-photo-pos { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.studio-photo-pos legend { width: 100%; }
.studio-photo-preview { margin: 12px 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.studio-photo-preview img { display: block; width: min(100%, 420px); object-fit: cover; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-slide-bg); }
.studio-photo-preview form { margin: 0; }
@media (max-width: 560px) { .studio-options { grid-template-columns: 1fr; } }
.finish-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.finished-banner { margin: 0 0 16px; }

/* Footer (privacy link on every page). */
.site-footer { text-align: center; padding: 24px 16px 32px; font-size: 0.85rem; }

/* The smallest phones: one topic card per row (lesson circles stay 2 across). */
@media (max-width: 380px) { .topic-cards { grid-template-columns: 1fr; } }

/* Lesson Circle + Timeline (decisions.md → LESSON FORMAT, 2026-10-14; look from the approved mock-up).
   Module hub → full-page segment player → back to the hub. The ʻIliahi study uses the same parts. */
.lesson-hub, .study-hub { max-width: 1040px; margin: 0 auto; }
.titlerow { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.titlerow > div { min-width: 0; }
.titlerow h1 { margin: 4px 0 0; font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
.eyebrow { margin: 18px 0 0; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.sub { margin: 6px 0 0; max-width: 60ch; color: var(--color-muted); }
.viewpick { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.viewpick .vlabel { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.switch { display: inline-flex; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: 999px; padding: 3px; }
.switch a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 18px; border-radius: 999px; color: var(--color-text); text-decoration: none; font-size: 0.92rem; }
.switch a svg { width: 16px; height: 16px; }
.switch a[aria-pressed="true"] { background: var(--color-button-bg); color: var(--color-button-text); }
.lesson-hub[data-view="circle"] .timeline-view, .lesson-hub[data-view="timeline"] .circle-view,
.study-hub[data-view="circle"] .timeline-view, .study-hub[data-view="timeline"] .circle-view { display: none; }
.lesson-hub[data-view="timeline"] .mlist:not(.always) { display: none; }

/* Circle */
.circle-stage { margin-top: 24px; }
.circle-stage.positioned { display: grid; grid-template-columns: 1fr minmax(0, 420px) 1fr; grid-template-rows: 1fr 1fr; gap: 8px 28px; align-items: center; }
.circle-box { width: 100%; max-width: 420px; margin: 0 auto; }
.circle-stage.positioned .circle-box { grid-column: 2; grid-row: 1 / span 2; }
.ring-circle { display: block; width: 100%; height: auto; overflow: visible; }
.centre-bg { fill: #FFFFFF; }
.centre-img { transition: opacity 0.45s ease; }
/* THE ONE SEGMENT LOOK (founder 2026-10-24; app/circle.py): every segmented circle — the Lesson Circle, the calls clock,
   the group circle — draws its segments at var(--seg-stroke) (the svg's style, = radius × the Lesson Circle's
   proportion), square ends, the Lesson Circle's gaps, and nothing behind them (no track ring): the gaps show the card. */
.arc-track { fill: none; stroke-width: var(--seg-stroke, 26px); opacity: 0.22; }
.arc-fill { fill: none; stroke-width: var(--seg-stroke, 26px); transition: stroke-dashoffset 0.9s ease; }
.arc-fill[stroke-dashoffset="100"] { stroke: none; }
.arc-hit { fill: none; stroke: transparent; stroke-width: 54; pointer-events: stroke; }
.arc-group { cursor: pointer; outline: none; }
.arc-group:focus-visible .arc-track { opacity: 0.55; }
.arc-group:focus-visible .arc-hit { stroke: var(--color-text); stroke-width: 2; stroke-dasharray: 4 4; }
.arc-group.is-next .arc-track, .arc-group.is-today .arc-track { animation: hb-glow 2.4s ease-in-out infinite; }
.arc-group.is-locked .arc-track { opacity: 0.10; }
.arc-group.is-missed .arc-track { opacity: 0.4; }
.arc-group.is-closed .arc-track { opacity: 0.10; }
.arc-group.is-locked, .arc-group.is-closed { cursor: default; }
.arc-check circle { fill: var(--color-badge-bg); stroke-width: 3; }
.arc-check path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ring-closed { fill: none; stroke: var(--color-accent); stroke-width: 2; opacity: 0.8; }
.ring-num { font-family: var(--font-heading); font-size: 15px; fill: var(--color-text); }
@keyframes hb-glow { 0%, 100% { opacity: 0.22; } 50% { opacity: 0.55; } }
.caption { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; margin-top: 14px; min-height: 3.2em; }
.caption strong { font-family: var(--font-heading); font-size: 1.1rem; display: block; }
.caption span { color: var(--color-muted); font-size: 0.9rem; }
.caption .capbtns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }

/* Labels: "N · Title" outside the ring (4 parts), or a tappable list */
.lab { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 240px; padding: 10px 12px; border-radius: 12px; color: var(--color-text); text-decoration: none; text-align: left; }
a.lab:hover, .lab.is-preview { background: #FFFFFF; }
.lab.corner.l1 { grid-column: 3; grid-row: 1; align-self: end; }
.lab.corner.l2 { grid-column: 3; grid-row: 2; align-self: start; }
.lab.corner.l3 { grid-column: 1; grid-row: 2; align-self: start; justify-self: end; text-align: right; align-items: flex-end; }
.lab.corner.l4 { grid-column: 1; grid-row: 1; align-self: end; justify-self: end; text-align: right; align-items: flex-end; }
.lab .num { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 1.02rem; }
.lab.corner.l3 .num, .lab.corner.l4 .num { flex-direction: row-reverse; }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--c); }
.lab .meta { font-size: 0.85rem; color: var(--color-muted); }
.chip { display: inline-block; font-size: 0.75rem; letter-spacing: 0.03em; padding: 2px 10px; border-radius: 999px; background: var(--color-chip-bg); color: var(--color-chip-text); }
.chip.done { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); }
.chip.open { background: transparent; color: var(--color-text); border: 1px solid var(--color-accent); }
.mlist { display: none; }
.mlist.always { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 26px; }
.mlist .lab, .daylist .lab { max-width: none; width: 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; background: #FFFFFF; border: 1px solid var(--color-border); }
.lab.is-locked, .lab.is-closed { opacity: 0.7; }
.done-actions { text-align: center; margin: 18px 0 0; }
/* SIMPLER LESSON PAGES (founder 2026-10-26, Q24a, Q25a; Build → Rollout "Simpler lesson pages"): the circle + caption +
   ONE Start here / Continue button under the caption (44 px); no segment list, no corner labels, no view switch. */
.caption-action { text-align: center; margin: 12px 0 0; }
.caption-action .button { min-height: 44px; }
/* EVERY LESSON PAGE THE SAME (founder 2026-10-26 18:53): a blend's study circle page is a lesson page (.lesson-hub, the
   same circle, caption and ONE button as every course lesson); the blend's notes under it keep the study's reading
   width. Its Day pages use the course segment pages' layout (.circle-layout); the study page keeps its own column. */
.study-lesson > p, .study-lesson > [data-study-involves] { max-width: 820px; margin-left: auto; margin-right: auto; }
.study-day > .circle-main > .study, .study-day > .circle-main > .lesson { margin-top: 0; }
.foot { border-top: 1px solid var(--color-border); margin-top: 32px; padding-top: 16px; }

/* Timeline */
.tl-hero { position: relative; margin-top: 24px; border-radius: 16px; overflow: hidden; aspect-ratio: 21 / 8; background: var(--color-surface); }
.tl-hero img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.45s ease; }
.tl-hero .band { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; padding: 12px 18px; background: var(--color-slide-overlay); color: var(--color-slide-overlay-text); }
.tl-hero .band strong { font-family: var(--font-heading); font-size: 1.1rem; }
.tl-hero .band span { font-size: 0.88rem; }
.arrow { display: flex; gap: 4px; margin-top: 18px; }
.chev { position: relative; flex: 1 1 0; height: 54px; display: grid; place-items: center; text-decoration: none; cursor: pointer; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%); }
.chev:first-child { clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); }
.chev .tr { position: absolute; inset: 0; background: var(--c); opacity: 0.22; }
.chev .fl { position: absolute; top: 0; bottom: 0; left: 0; background: var(--c); transition: width 0.9s ease; }
.chev .n { position: relative; display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; font-family: var(--font-heading); font-size: 1rem; color: var(--color-text); }
.chev.is-full .n { background: var(--color-badge-bg); }
.chev.is-next .tr, .chev.is-today .tr { animation: hb-glow 2.4s ease-in-out infinite; }
.chev.is-locked .tr, .chev.is-closed .tr { opacity: 0.10; }
.chev.is-missed .tr { opacity: 0.4; }
.chev.is-locked, .chev.is-closed { cursor: default; }
.chev:focus-visible { outline: none; filter: brightness(1.08); }
.chev:focus-visible .n { outline: 3px solid var(--color-text); outline-offset: 1px; }
.arrow-many .chev .n { font-size: 0.95rem; }
.tl-labels { display: flex; gap: 4px; margin-top: 10px; }
.tl-labels .lab { flex: 1 1 0; max-width: none; padding: 8px 10px; }
.tl-labels .lab .num { font-size: 0.95rem; }

/* Segment player */
.segment-player .pbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: -24px -16px 24px; padding: 10px 16px; background: #FFFFFF; border-bottom: 4px solid var(--segc); }
.pbar .back { padding: 6px 0; color: var(--color-text); }
.ptitle { font-family: var(--font-heading); }
.ptitle small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; color: var(--color-muted); }
.steps { display: flex; gap: 6px; align-items: center; }
.steps i { display: block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--segc); }
.steps i.on { background: var(--segc); }
.steps i.now { box-shadow: 0 0 0 3px var(--color-border); }
.pause { padding: 36px 28px; border: 1px solid var(--color-border); border-radius: 20px; background: var(--color-pause-bg); text-align: center; }
.pause .eyebrow { margin-top: 0; }
.pause h2 { margin: 6px 0 0; font-size: 1.6rem; }
.pause p { max-width: 52ch; margin: 0 auto 12px; font-size: 1.08rem; }
.breath { position: relative; display: grid; place-items: center; width: 180px; height: 180px; margin: 26px auto; }
.breath .orb { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--segc) 55%, transparent), color-mix(in srgb, var(--segc) 12%, transparent) 70%); animation: hb-breathe 10s ease-in-out infinite; }
.breath .word { position: relative; font-family: var(--font-heading); color: var(--color-text); }
@keyframes hb-breathe { 0%, 100% { transform: scale(0.62); } 40%, 50% { transform: scale(1); } }
.segment-question { margin: 0 auto 8px; scroll-margin-top: 96px; }  /* clear of the sticky bar after an answer */
.segment-question .eyebrow { margin: 0 0 6px; }
.segment-question h2 { font-size: 1.2rem; }
.tap-answers { margin: 0; }
.answer-button { display: block; width: 100%; text-align: left; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--color-border); border-left: 6px solid transparent; background: var(--color-slide-bg); color: var(--color-text); }
.answer-button:hover { border-color: var(--color-accent); border-left-color: var(--color-accent); }

/* TRUE/FALSE SLIDES (founder 2026-10-26 10:43 + 10:52, Q34a/Q35a; features/lesson-format.md): the statement with two big
   True / False buttons (the question card's answer look, side by side, 56 px tall); once answered, the two as plain
   chips (their pick tagged, the right one with the turquoise bar), "That's right." / "Not quite." and the reveal.
   Next waits for the answer (a greyed button + one calm line under the nav). No grading, no score. */
.truefalse { margin: 4px 0 0; scroll-margin-top: 140px; }  /* clear of the pinned circle bar after an answer */
.tf-statement { font-family: var(--font-heading); font-size: 1.12rem; line-height: 1.45; color: var(--color-text); }
.tf-form { margin: 0 0 12px; }
.tf-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 420px; }
.tf-button { min-height: 56px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--color-border); border-bottom: 4px solid var(--color-border); background: var(--color-slide-bg); color: var(--color-text); font-size: 1.08rem; text-align: center; }
.tf-button:hover, .tf-button:focus-visible { border-color: var(--color-accent); }
.tf-picks { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 420px; }
.tf-pick { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; justify-content: center; min-height: 48px; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-slide-bg); }
.tf-pick.right { box-shadow: inset 5px 0 0 var(--color-answer-right); }
.tf-pick.chosen:not(.right) { box-shadow: inset 5px 0 0 var(--color-answer-chosen); }
.tf-verdict { margin: 0 0 12px; font-family: var(--font-heading); font-size: 1.05rem; }
.button.is-locked { opacity: 0.45; cursor: not-allowed; }
.tf-hint { margin: 0 0 8px; text-align: right; font-size: 0.92rem; }

/* THE PERSISTENT LESSON CIRCLE (founder 2026-10-26 07:43 + 09:17, Q19a–Q21a; templates/_circle.html → circle_nav): the
   Lesson Circle stays on screen while the slides change. Computer / iPad (900 px and wider): circle LEFT (sticky), the
   slide RIGHT, like the landing Explore Circle. Narrower: a small circle pinned at the top replaces the sticky top bar,
   with the segment's line beside it. The current segment is wider (as the Explore Circle's); finished ones are filled.
   Shared by the lesson player and the Image Studio's slide page. */
.circle-nav { flex: 0 0 auto; width: 88px; }
.circle-nav .arc-hit { stroke-width: 100; }  /* a bigger tap band on the small circle */
.arc-group.is-current .arc-track, .arc-group.is-current .arc-fill { stroke-width: calc(var(--seg-stroke) * 1.4); }
.arc-group.is-current .arc-track { opacity: 0.45; }
.centre-link { cursor: pointer; outline: none; }
.centre-link:focus-visible .centre-bg { stroke: var(--color-text); stroke-width: 4; stroke-dasharray: 8 6; }
.circle-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; margin: -24px -16px 24px; padding: 8px 16px; background: #FFFFFF; border-bottom: 4px solid var(--segc, var(--color-border)); }
.circle-bar-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.circle-bar .steps { flex-wrap: wrap; }
.circle-bar .circle-nav .arc-check { display: none; }  /* too small to read on the pinned circle; the fill says it */
@media (min-width: 721px) and (max-width: 899px) { .circle-nav { width: 112px; } }
@media (max-width: 720px) { .circle-bar { margin: -16px -16px 16px; } }
@media (min-width: 900px) {
  .circle-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0 32px; align-items: start; }
  .circle-layout > .circle-bar { position: sticky; top: 16px; flex-direction: column; align-items: stretch; gap: 14px; margin: 0; padding: 0 0 12px; background: none; }
  .circle-layout > .circle-bar .circle-nav { width: 100%; }
  .circle-layout > .circle-bar .circle-nav .arc-check { display: inline; }
  .circle-layout > .circle-main { min-width: 0; }
}
/* The way out (founder review 2026-10-26 11:53): "← <Course>" to the course page, a quiet underlined link (kit), 44 px
   tall. A computer / iPad: above the circle. Narrower: beside the small circle, over the segment's line; one line,
   cut with … when the course name is long, so the pinned bar never scrolls sideways. */
.course-exit { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; font-size: 0.92rem; }
@media (max-width: 899px) {
  .circle-bar.has-exit { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 0; align-items: center; }
  .circle-bar.has-exit > .circle-nav { grid-column: 1; grid-row: 1 / span 2; }
  .circle-bar.has-exit > .course-exit { grid-column: 2; grid-row: 1; display: block; line-height: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .circle-bar.has-exit > .circle-bar-text { grid-column: 2; grid-row: 2; }
}

/* The Studio slide page: the bar sits below the page header (which has no "Back to …" button when the bar shows). On a
   phone / iPad the bar stays compact, so Generate and the start of the slide text are still on the first screen
   (founder 09:17). */
.circle-bar-title { color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-slide-nav { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.studio-slide-nav .kit-btn { min-height: 44px; }
/* The flow (founder 2026-10-26 10:52): "Lesson N of M" before the segment, the end-of-course button, one small link to the
   pill's circles. */
.circle-bar-title { margin: 0; }
.circle-bar-lesson { color: var(--color-muted, inherit); }
.studio-course-done { min-height: 44px; margin-top: 8px; white-space: normal; }
.circle-bar-circles { display: inline-block; margin-top: 4px; font-size: 0.88rem; }
@media (max-width: 899px) {
  .studio-circle-layout > .circle-bar { margin: 0 -16px 12px; padding: 6px 16px; }
  .studio-circle-layout .circle-nav { width: 64px; }
  .studio-circle-layout .circle-bar-text { gap: 4px; }
  .studio-slot-page:has(> .studio-circle-layout) .kit-head-actions { display: none; }
  /* The small circles link shares the "Lesson N of M" row, so the bar stays as tall as before (first screen, 09:17). */
  .studio-circle-layout .circle-bar-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
  .studio-circle-layout .circle-bar-title { grid-column: 1; grid-row: 1; }
  .studio-circle-layout .circle-bar-circles { grid-column: 2; grid-row: 1; margin-top: 0; }
  .studio-circle-layout .studio-slide-nav, .studio-circle-layout .studio-course-done { grid-column: 1 / -1; }
}

/* ʻIliahi study circle */
.study-stage { display: flex; flex-direction: column; align-items: center; margin-top: 18px; }
.study-stage .circle-box { max-width: 440px; }
.daylist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.daylist li { display: flex; }
.peeknote { margin: 0 0 18px; padding: 12px 14px; border: 1px dashed var(--color-accent); border-radius: 10px; background: #FFFFFF; }
.day0-ticks-hint { font-family: var(--font-body); font-weight: 400; font-size: 0.85rem; color: var(--color-muted); }
.tick-row input:disabled { cursor: not-allowed; }

@media (max-width: 720px) {
  .viewpick { align-items: flex-start; }
  .circle-stage.positioned { display: block; }
  .circle-box { max-width: 340px; }
  .circle-stage .lab.corner, .tl-labels { display: none; }
  .mlist, .mlist.always { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 18px; }
  .lesson-hub[data-view="timeline"] .mlist:not(.always) { display: grid; }
  .mlist .lab .num { font-size: 0.98rem; }
  .tl-hero { aspect-ratio: 16 / 9; }
  .chev { height: 40px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); }
  .chev:first-child { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
  .chev .n { min-width: 24px; height: 24px; font-size: 0.85rem; padding: 0 4px; }
  .arrow-many { gap: 2px; }
  .daylist { grid-template-columns: 1fr; }
  .segment-player .pbar { margin: -16px -16px 16px; }
  .pause { padding: 28px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .arc-group.is-next .arc-track, .arc-group.is-today .arc-track, .chev.is-next .tr, .chev.is-today .tr, .breath .orb { animation: none; }
  .arc-fill, .chev .fl, .centre-img, .tl-hero img { transition: none; }
}

/* ʻIliahi study landing page (founder rulings 2026-10-14): picture header → Continue panel → blend cards in mini rings. */
.study-header { position: relative; margin: 8px 0 20px; border-radius: 16px; overflow: hidden; aspect-ratio: 21 / 8; background: var(--color-surface); }
.study-header img { display: block; width: 100%; height: 100%; object-fit: cover; }
.study-header .band { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 20px; background: var(--color-slide-overlay); color: var(--color-slide-overlay-text); }
.study-header h1 { margin: 0 0 2px; font-size: clamp(1.3rem, 3vw, 1.9rem); color: inherit; }
.study-header p { margin: 0; }
.mini-ring { display: block; width: 100%; height: auto; overflow: visible; }
.mini-ring .arc-track, .mini-ring .arc-fill { stroke-width: 22; }
/* The mini Certification Circle (_cert_mini.html: founder Certification list + drawers) is a segmented circle: the
   Lesson Circle's stroke (circle.py → THE ONE SEGMENT LOOK, 2026-10-24); the study / Home mini rings keep 22. */
.mini-ring[data-segments] .arc-track, .mini-ring[data-segments] .arc-fill { stroke-width: var(--seg-stroke); }
.mini-ring .ring-closed { stroke-width: 4; }
.study-panel .mini-ring-box { flex: none; width: 120px; }
.study-panel .continue-course { margin: 0; }
.study-blend-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 12px 0 28px; }
.study-blend-cards .blend-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 16px 18px; text-align: center; }
.study-blend-cards .blend-card h2, .study-blend-cards .blend-card p { padding: 0; margin: 0; }
.study-blend-cards .blend-card h2 a { color: inherit; text-decoration: none; }
.study-blend-cards .mini-ring-box { display: block; width: min(180px, 70%); margin-bottom: 6px; }
.blend-card-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; }
.blend-card-actions .muted { padding: 0; }
.chooser-intro h2 { font-size: 1.15rem; }
@media (max-width: 720px) {
  .study-header { aspect-ratio: 16 / 9; }
  .study-header .band { padding: 10px 14px; }
  .study-panel .mini-ring-box { width: 88px; }
  .study-blend-cards { grid-template-columns: 1fr; }
}

/* EVERY COURSE PAGE THE SAME (founder 2026-10-26 12:10; 12:13/12:14 "The cover page is the reference"): every course page
   wears the ʻIliahi study landing's own banner (_page_cover.html, the .study-header rules above — same height, rounded
   corners, the navy band with the title + one line on the picture). A square cover (the Certification's Holistic Brain
   app image) is shown whole ABOVE the band on the app image's own gradient (teal → navy → magenta), never cropped; a
   course with no cover yet gets the same banner in plain gradient with the band. The course page's column is wider
   (928 px vs the study's 820 px), so the banner is capped at the study banner's height. Then the lessons as unboxed Lesson
   Circles; a course with topics: a heading per topic over its circles. */
.study-header { max-height: calc(820px * 8 / 21); } /* the study banner's own height in its 820 px column: a wider course page's banner is no taller */
.study-header.cover-whole, .study-header.cover-plain { background: linear-gradient(120deg, var(--logo-teal), var(--navy) 50%, var(--logo-magenta)); }
.study-header.cover-whole { display: flex; flex-direction: column; }
.study-header.cover-whole img { flex: 1 1 0; min-height: 0; width: auto; max-width: 100%; aspect-ratio: 1 / 1; margin: 10px auto; object-fit: contain; clip-path: inset(1px round 5%); }
.study-header.cover-whole .band { position: static; }
.topic-lessons-title { margin: 24px 0 0; font-size: 1.2rem; }
.topic-lessons .lesson-minis { margin-bottom: 16px; }
.topic-coming-soon { margin: 8px 0 32px; }

/* Courses with topics + free lessons inside a members course (CERTIFICATION SITE BUILD, 2026-10-16). */
/* Subtitle in logo magenta (WALK FIXES Q2a): #C12776 = 5.09:1 on the page (#F6F6F6), 4.79:1 on a card (#F0EFEE). */
.course-subtitle { margin: -4px 0 10px; font-family: var(--font-heading); font-size: 1.05rem; color: var(--logo-magenta); }
.course-card-body .course-subtitle { font-size: 0.95rem; }
/* One breadcrumb line: small, calm, wraps on phones (WALK FIXES Q3a). */
.breadcrumb { margin: 0 0 8px; font-size: 0.9rem; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 0; }
.breadcrumb li { display: inline-flex; align-items: baseline; min-width: 0; overflow-wrap: anywhere; }
.breadcrumb .sep { margin: 0 8px; color: var(--color-muted); }
.breadcrumb [aria-current="page"] { color: var(--color-muted); }
.free-badge { position: absolute; top: 10px; right: 10px; padding: 3px 10px; border-radius: 999px; background: var(--color-badge-bg); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-border); font-size: 0.8rem; }
.sneak-line { margin: 0 0 12px; color: var(--color-muted); font-size: 0.95rem; }
/* Next-step notes = the normal light card + a magenta button (founder 2026-10-27 11:35, amending Q61a). White on the
   magenta #C12776 button is 5.3:1 (AA). */
.next-banner { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 8px; padding: 14px 18px; margin: 0 0 20px; }
.next-banner p { margin: 0 0 8px; }
.next-banner-headline { margin: 0 0 6px; font-size: 1.2rem; overflow-wrap: anywhere; }
.next-banner .finish-actions { margin: 10px 0 0; }
.next-banner-button, .next-banner-button:visited { background: #C12776; color: #FFFFFF; border: 1px solid #C12776; min-height: 44px; box-sizing: border-box; line-height: 1.6; }
.finished-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; justify-content: space-between; }
.finished-banner p { margin: 0; }
.sample-end { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: 18px 20px; margin: 0 0 24px; }
.sample-end h2 { margin: 0 0 8px; font-size: 1.2rem; }
.sample-end p { margin: 0 0 10px; }
.sample-end .finish-actions { margin: 14px 0 0; }

/* Evidence icons beside a citation: navy outline, always with the word (STUDY ICONS, 2026-10-16). */
.evidence { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; margin-left: 10px; vertical-align: middle; }
.evidence-item { display: inline-flex; align-items: center; gap: 4px; color: var(--navy); font-size: 0.8rem; white-space: nowrap; }
.evidence-item svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--navy); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 480px) { .evidence { display: flex; margin: 4px 0 0; } }

/* --- Left menu (Phase 4a, 2026-10-20): a column on a computer, a drawer from the ☰ button on phones and on
   lesson/study pages (which keep their full width). Built items only. --- */
.menu-toggle { display: none; background: none; color: var(--color-header-text); font-size: 1.5rem; line-height: 1; padding: 4px 8px; border-radius: 6px; }
.menu-toggle:focus-visible, .menu-close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.topbar .brand { margin-right: auto; }
.shell.has-menu { display: flex; align-items: flex-start; }
.shell.has-menu > main { flex: 1 1 auto; min-width: 0; }
.sidenav { flex: none; width: 200px; padding: 24px 0 24px 16px; position: relative; z-index: 2; }
.sidenav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sidenav a { display: block; padding: 10px 14px; border-radius: 6px; color: var(--color-menu-text); text-decoration: none; font-family: var(--font-heading); font-size: 0.98rem; border-left: 3px solid transparent; }
.sidenav a:hover { background: var(--color-menu-current-bg); }
.sidenav a[aria-current="page"] { background: var(--color-menu-current-bg); border-left-color: var(--color-menu-current-bar); }
.menu-close, .menu-backdrop { display: none; }

@media (max-width: 1099px) {
  .menu-toggle { display: inline-block; }
}
@media (min-width: 1100px) { .shell.drawer-only .sidenav { display: none; } body.menu-open .shell.drawer-only .sidenav { display: block; } }
@media (min-width: 1100px) { body:has(.shell.drawer-only) .menu-toggle { display: inline-block; } }
@media (max-width: 1099px) { .shell.has-menu .sidenav { display: none; } }
/* The open drawer, wherever it is a drawer. */
body.menu-open .shell.has-menu .sidenav { display: block; position: fixed; top: 0; left: 0; bottom: 0; width: min(280px, 85vw); padding: 56px 12px 24px; background: var(--color-menu-bg); box-shadow: 0 0 40px rgba(0, 0, 0, 0.25); z-index: 30; overflow-y: auto; }
@media (min-width: 1100px) { body.menu-open .shell:not(.drawer-only) .sidenav { position: relative; width: 200px; padding: 24px 0 24px 16px; box-shadow: none; background: none; } }
body.menu-open .menu-close { display: block; position: absolute; top: 10px; right: 10px; background: none; color: var(--color-menu-text); font-size: 1.6rem; line-height: 1; padding: 4px 10px; }
body.menu-open .menu-backdrop { display: block; position: fixed; inset: 0; background: var(--color-modal-backdrop); z-index: 25; }
@media (min-width: 1100px) { body.menu-open .shell:not(.drawer-only) .menu-backdrop, body.menu-open .shell:not(.drawer-only) .menu-close { display: none; } }

/* --- Become a member, Settings, Members (Phase 4a) --- */
.join, .settings { max-width: 620px; }
.join-intro { font-size: 1.08rem; }
.join-card, .settings-card { background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: 10px; padding: 20px; margin: 20px 0; }
.join-card h2, .settings-card h2 { margin: 0 0 10px; font-size: 1.15rem; }
.settings-card h3 { margin: 16px 0 6px; font-size: 1rem; }
.join-includes { margin: 0 0 16px; padding-left: 20px; }
.join-includes li { margin: 0 0 8px; }
.join-price { font-family: var(--font-heading); font-size: 1.4rem; margin: 8px 0 4px; }
.join-cancel, .hint, .muted { color: var(--color-muted); font-size: 0.92rem; }
.hint { margin: 6px 0 12px; }
.settings-plan { font-family: var(--font-heading); font-size: 1.1rem; margin: 0 0 6px; }
.settings-form label, .settings-label { display: block; margin: 0 0 4px; }
.settings-label { margin-top: 20px; }
.settings-form input[type=text], .settings-form input[type=email], .invite-url input { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--color-border); border-radius: 6px; font: inherit; font-size: max(16px, 1rem); background: #FFFFFF; color: var(--color-text); }
.settings-form input[type=email] { margin: 0 0 12px; }
.settings-email { margin: 0; overflow-wrap: anywhere; }
.settings-switch { border-top: 1px solid var(--color-border); margin-top: 16px; }
.members { max-width: 960px; }
.table-wrap { overflow-x: auto; }
.members-table { width: 100%; border-collapse: collapse; background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: 10px; }
.members-table th, .members-table td { text-align: left; padding: 10px; border-bottom: 1px solid var(--color-border); vertical-align: top; overflow-wrap: anywhere; }
.members-table .actions form { display: inline-block; margin: 0 6px 6px 0; }
.members-table .actions button { padding: 6px 10px; font-size: 0.9rem; }
.invite-list { padding-left: 20px; }

/* Labels as small badges; Certified in calm green (walk fix 2026-10-20). */
.badge { display: inline-block; margin: 0 6px 6px 0; padding: 2px 10px; border-radius: 999px; font-size: 0.85rem; background: var(--color-badge-label-bg); color: var(--color-text); border: 1px solid var(--color-border); }
.badge.certified { background: var(--group-certified-badge-bg); color: var(--group-certified-badge-text); border-color: var(--group-certified-badge-bg); }  /* navy: the one Certified colour (founder 2026-10-23) */
.settings-badges { margin: 0 0 8px; }
/* Name in Settings: plain text + small Edit link; saves on Enter or leaving the field, then a quiet tick fades. */
.name-view { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; overflow-wrap: anywhere; }
.edit-link { font-size: 0.9rem; color: var(--color-link); }
.name-form { margin: 0; }
.name-form input[type=text] { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 6px; font: inherit; font-size: max(16px, 1rem); background: #FFFFFF; color: var(--color-text); }
.tick { color: var(--color-done-text); opacity: 0; }
.tick.show { animation: tick-fade 2.4s ease-out forwards; }
@keyframes tick-fade { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tick.show { animation-duration: 2.4s; animation-timing-function: steps(1, end); } }

/* --- Founder Email tab, Settings announcement emails (Phase 4b piece A) --- */
.email-tab .actions a.button { display: inline-block; margin: 0 6px 6px 0; padding: 6px 10px; font-size: 0.9rem; }
.email-send-all { margin: 0 0 14px; }
.email-compose textarea { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--color-border); border-radius: 6px; font: inherit; font-size: max(16px, 1rem); background: #FFFFFF; color: var(--color-text); }
.email-compose input[type=text] { margin: 0 0 12px; }
.email-compose select { padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 6px; font: inherit; font-size: max(16px, 1rem); background: #FFFFFF; color: var(--color-text); max-width: 100%; }
.email-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.email-preview-body { max-width: 600px; }
.settings-label-first { margin-top: 0; }
.announcements-form { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0; }
.announcements-form .settings-plan { margin: 0; }
.announcements-form button { padding: 6px 12px; font-size: 0.9rem; }

/* --- Live Training, Recordings, founder Live page (Phase 4b piece B) --- */
.live-when { margin: 0 0 8px; }
/* The earlier Recordings list (recordings_old.html), behind the calls circle's preview switch (Q7a, 2026-10-24). */
.recording-list { list-style: none; padding: 0; margin: 0; }
.recording-row { display: flex; gap: 16px; align-items: center; background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: 10px; padding: 14px; margin: 0 0 14px; }
.recording-cover { flex: 0 0 168px; height: 96px; border-radius: 8px; background: var(--color-button-bg); color: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px; box-sizing: border-box; overflow: hidden; }
.recording-cover img { width: 28px; height: 28px; margin-bottom: 4px; }
.recording-cover-topic { font-family: var(--font-heading); font-size: 0.85rem; line-height: 1.2; max-height: 2.4em; overflow: hidden; }
.recording-cover-month { font-size: 0.75rem; opacity: 0.85; }
.recording-text { min-width: 0; }
.recording-text p { margin: 0 0 6px; }
.recording-title { margin: 0 0 4px; font-size: 1.05rem; overflow-wrap: anywhere; }
.recording-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 560px) {
  .recording-row { flex-direction: column; align-items: stretch; }
  .recording-cover { flex-basis: auto; width: 100%; }
}
.recording-player { width: 100%; max-height: 70vh; background: #000; border-radius: 8px; margin: 8px 0 16px; }
.notes-body { max-width: 720px; overflow-wrap: anywhere; }
.founder-live .live-month-form, .founder-live .live-topic-form { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-end; margin: 0; }
.founder-live .live-month-form label { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--color-muted); }
.founder-live input[type=text], .founder-live input[type=date], .founder-live input[type=time] { padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 6px; font: inherit; font-size: max(16px, 1rem); background: #FFFFFF; color: var(--color-text); max-width: 100%; box-sizing: border-box; }
.founder-live .settings-form input[type=text] { width: 100%; margin: 0 0 4px; }
.founder-live button.small, .founder-live .button.small { padding: 6px 10px; font-size: 0.9rem; }
.live-awaiting { margin: 14px 0; padding: 12px; border-radius: 8px; background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); }
.live-awaiting h3 { margin-top: 0; }

/* --- Channels, the menu's "new" dot, profile photos (Phase 4b piece C) --- */
.menu-dot { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--logo-magenta); vertical-align: middle; }
.menu-nowrap { white-space: nowrap; }
.inline-form { display: inline; margin: 0; }
.link-button { background: none; border: none; padding: 0; margin: 0; font: inherit; font-size: 0.9rem; color: var(--color-link); text-decoration: underline; cursor: pointer; }
.channel-posts, .channel-comment-list { list-style: none; padding: 0; margin: 0; }
.channel-post { background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: 10px; padding: 14px 16px; margin: 0 0 14px; }
.channel-comment { border-top: 1px solid var(--color-border); padding: 12px 0; }
.channel-post.is-hidden, .channel-comment.is-hidden { opacity: 0.55; }
.channel-hidden-note { font-size: 0.9rem; margin: 4px 0; }
.channel-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 8px; }
.channel-author { font-family: var(--font-heading); }
.channel-when { font-size: 0.85rem; }
.channel-body { overflow-wrap: anywhere; }
.channel-body p { margin: 0 0 10px; }
/* One action row per post, comment and reply: heart · Comment/Reply · Edit · Delete (· founder controls). Walk fixes 2. */
.channel-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 8px 0 0; font-size: 0.9rem; }
.channel-row > a { font-size: 0.9rem; }
.channel [hidden] { display: none !important; }
.channel-form-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.channel-compose-slot > .channel-form, .channel-edit-form { margin-top: 8px; }
.channel-show-all { margin: 0; padding: 10px 0 2px; font-size: 0.9rem; }
.channel-email-state { margin-top: 10px; }
.channel-form textarea { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--color-border); border-radius: 6px; font: inherit; font-size: max(16px, 1rem); background: #FFFFFF; color: var(--color-text); margin: 0 0 8px; }
.channel-form input[type=text] { width: 100%; max-width: 360px; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 6px; font: inherit; font-size: max(16px, 1rem); margin: 0 0 6px; }
.channel-also-email { display: flex; align-items: center; gap: 8px; }
/* The "Members" slide on #Announcements (founder 2026-10-29 10:03): the kit toggle's look on a real checkbox. */
label.channel-members { position: relative; align-self: flex-start; }
.kit-toggle-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.kit-toggle-input:checked + .kit-toggle-track { background: var(--group-certified); }
.kit-toggle-input:checked + .kit-toggle-track .kit-toggle-knob { left: 23px; }
.kit-toggle-input:focus-visible + .kit-toggle-track { outline: 3px solid var(--navy); outline-offset: 2px; }
.channel-members-tag { align-self: flex-start; margin: 2px 0 6px; }
.call-post-card { margin-top: 24px; }
.call-post-text { margin: 12px 0; padding: 12px 16px; border-left: 3px solid var(--logo-turquoise); background: var(--color-card-bg); }
.channel-comments { margin-top: 10px; }
.channel-pager { display: flex; justify-content: space-between; gap: 12px; }
.name-prompt { margin: 0 0 14px; padding: 12px; border-radius: 8px; background: var(--color-notice-bg); border-left: 3px solid var(--color-notice-border); }
.name-prompt h3 { margin: 0 0 6px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; }
.avatar-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--navy); color: #FFFFFF; font-family: var(--font-heading); font-size: 0.85rem; }
.avatar-large { width: 72px; height: 72px; font-size: 1.4rem; }
.photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 6px 0; }
.photo-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.photo-form input[type=file] { max-width: 100%; font-size: 0.9rem; }

/* --- Menu groups (Q23a), hearts (Q20a/Q21a) and replies (Q22a) — Phase 4b piece C additions --- */
.menu-group + .menu-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.menu-group-label { margin: 2px 0 4px; padding: 0 14px 0 17px; font-family: var(--font-heading); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.heart { position: relative; display: inline-flex; align-items: center; gap: 2px; }
/* The founder's Share to WhatsApp icon (Q15a, 2026-10-26): a 44 px target that keeps the row's height. */
.channel-share { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -12px -10px; border-radius: 22px; color: var(--color-text); }
.channel-share:hover { background: var(--color-surface); }
.channel-share:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.channel-share svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* The founder's "Send as an email" beside it (2026-10-29): envelope icon + its words, a 44 px tall target. */
.channel-email { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -12px 0; }
.channel-email svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.channel-email:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 4px; }
.heart-button { background: none; border: none; padding: 6px; margin: -6px 0 -6px -6px; cursor: pointer; color: var(--logo-magenta); line-height: 0; border-radius: 6px; }
.heart-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.heart-button[aria-pressed="true"] svg { fill: currentColor; }
.heart-button:focus-visible, .heart-who summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.heart-who summary { cursor: pointer; list-style: none; text-decoration: underline; font-size: 0.9rem; padding: 2px 4px; }
.heart-who summary::-webkit-details-marker { display: none; }
.heart-who-list { position: absolute; z-index: 5; top: 100%; left: 0; margin-top: 6px; min-width: 160px; max-width: 260px; max-height: 240px; overflow-y: auto; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); padding: 8px 12px; }
.heart-who-title { margin: 0 0 4px; font-size: 0.8rem; color: var(--color-muted); }
.heart-who-list ul { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.channel-replies { list-style: none; margin: 8px 0 0 20px; padding: 0 0 0 14px; border-left: 2px solid var(--color-border); }
.channel-comment.channel-reply { border-top: none; padding: 8px 0; }
.channel-gone { font-style: italic; margin: 0; }
@media (max-width: 600px) { .channel-replies { margin-left: 6px; padding-left: 10px; } }

/* --- Certification workbook (Phase 4c piece D): the Certification Circle (Lesson Circle style, 7 parts) + forms --- */
.cert-hub .circle-box { max-width: 380px; }
.cert-hub .caption strong { font-size: 1.05rem; }
.cert-parts.mlist.always { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cert-note blockquote { margin: 8px 0; padding: 0 0 0 12px; border-left: 3px solid var(--logo-magenta); }
.cert-note p { margin: 4px 0; }
.cert-submit button { margin-top: 4px; }
.cert-waiting { text-align: center; margin-top: 18px; }
.cert-back { margin: 0 0 8px; font-size: 0.95rem; }
.cert-form-page h1 { margin-bottom: 6px; }
.cert-part-status { margin: 0 0 4px; color: var(--color-muted); }
.cert-part-status.is-complete { color: var(--color-done-text); }
.cert-form .settings-label:first-of-type { margin-top: 0; }
.cert-form input[type=text], .cert-form input[type=date], .cert-form textarea, .cert-form select {
  width: 100%; max-width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 6px;
  font: inherit; font-size: max(16px, 1rem); background: #FFFFFF; color: var(--color-text); }
.cert-form input[type=date] { max-width: 220px; }
.cert-form :disabled { background: var(--color-surface); color: var(--color-text); opacity: 1; cursor: default; }
.cert-field { margin: 0 0 14px; }
.cert-field .settings-label { margin-top: 14px; }
.cert-scale { border: 0; padding: 0; min-width: 0; }
.cert-scale legend { padding: 0; }
.cert-scale-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.cert-scale-choice { position: relative; display: inline-flex; }
.cert-scale-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cert-scale-choice span { display: grid; place-items: center; min-width: 42px; height: 42px; border: 1px solid var(--color-border); border-radius: 999px; background: #FFFFFF; font-family: var(--font-heading); cursor: pointer; }
.cert-scale-choice input:checked + span { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
.cert-scale-choice input:focus-visible + span { outline: 3px solid var(--color-text); outline-offset: 2px; }
.cert-scale-choice input:disabled + span { cursor: default; }
.cert-tick-row { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; cursor: pointer; }
.cert-tick-row input { margin-top: 4px; width: 20px; height: 20px; flex: none; accent-color: var(--logo-teal); }
.cert-session { margin: 26px 0 0; padding-top: 14px; border-top: 1px solid var(--color-border); font-size: 1.05rem; }
.cert-form input[type=number] { width: 120px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 6px;
  font: inherit; font-size: max(16px, 1rem); background: #FFFFFF; color: var(--color-text); }
/* 4c questionnaires (2026-10-22): the 0–5 instruction beside each question, tick lists, word choices. */
.cert-scale-hint { font-weight: normal; color: var(--color-muted); white-space: nowrap; }
.cert-ticks { border: 0; padding: 0; min-width: 0; }
.cert-ticks legend { padding: 0; }
.cert-tick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 16px; }
.cert-tick-list[hidden], .cert-ticks [hidden] { display: none; }
.cert-tick-list .cert-tick-row { margin: 10px 0 0; }
.cert-ticks .hint { margin-top: 8px; }
.cert-program-first { margin: 8px 0 0; }
.cert-choice-word span { padding: 0 16px; }
.cert-problem { margin: 6px 0 0; }
.cert-form .tick { display: inline; margin: 0 0 0 6px; cursor: default; }
.cert-save { margin: 22px 0 0; }
/* Home card (Q1a): a mini Certification Circle beside the title, parts done and Open. */
.cert-home { display: flex; align-items: center; gap: 18px; padding: 18px 20px; }
.cert-home .mini-ring-box { flex: none; width: 96px; }
.cert-home h2 { margin: 0 0 4px; font-size: 1.15rem; }
.cert-home p { margin: 0 0 10px; }
@media (max-width: 720px) {
  .cert-parts.mlist.always { grid-template-columns: 1fr; }
  .cert-home { gap: 14px; padding: 14px; }
  .cert-home .mini-ring-box { width: 76px; }
}
/* CONTINUE LEARNING BARS (founder 2026-10-26, Q22a; Build → Rollout "Continue learning bars"): one row per started
   course / program — its cover thumbnail, title, a thin turquoise bar on a light track, "N of M done", and a small round
   navy ▶ play button on the RIGHT (44 px tap target; founder 18:29 "a small play button to the right of the box, not
   underneath the title") — on a phone too; no full-width button anywhere. The ʻIliahi study's magenta dot = today's
   check-in is not done (spoken words beside it; colour is never the only signal). */
.continue-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.continue-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  background: #FFFFFF; border: 1px solid var(--color-border); border-radius: 16px; padding: 12px 14px; }
.continue-thumb { display: block; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--color-bg); }
.continue-thumb img, .continue-thumb .cover-placeholder { display: block; width: 100%; height: 100%; object-fit: cover; }
.continue-thumb.is-whole img { object-fit: contain; }
.continue-row-title { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.3; }
.continue-bar { display: block; height: 6px; border-radius: 3px; background: #E6F5F7; overflow: hidden; }
.continue-bar-fill { display: block; height: 100%; border-radius: 3px; background: var(--logo-turquoise); }
.continue-row-line { margin: 6px 0 0; font-size: .9rem; color: var(--color-muted); }
.checkin-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--logo-magenta);
  margin-right: 6px; vertical-align: 0; }
.continue-play { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--navy); color: #FFFFFF; flex: none; }
.continue-play .play-icon { width: 16px; height: 16px; margin-left: 2px; }
.continue-play:hover { background: var(--logo-teal); }
.continue-play:focus-visible { outline: 3px solid var(--logo-turquoise); outline-offset: 2px; }
@media (max-width: 600px) {
  .continue-row { grid-template-columns: 56px minmax(0, 1fr) 44px; gap: 12px; padding: 12px; }
  .continue-thumb { width: 56px; height: 56px; }
}

/* --- Certification, Piece E: Live Calls, Lessons, Final Quiz (member) + who attended + the founder's review --- */
.cert-list { list-style: none; margin: 0; padding: 0; }
.cert-list li { padding: 6px 0; border-bottom: 1px solid var(--color-border); }
.cert-list li:last-child { border-bottom: 0; }
.cert-done-mark { color: var(--color-done-text); }
.cert-todo-mark { color: var(--color-muted); }
.cert-lessons { list-style: none; padding: 6px 18px; }
.cert-lesson { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.cert-lesson:last-child { border-bottom: 0; }
.cert-lesson .chip { flex: none; }
.cert-sample { border-left: 4px solid var(--logo-magenta); }
.cert-question { border: 0; margin: 0 0 14px; }
.cert-question-number { margin: 0 0 4px; }
.cert-question-text { margin: 0 0 10px; font-family: var(--font-heading); }
.cert-answer { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; margin: 0 0 6px; border: 1px solid var(--color-border); border-radius: 8px; background: #FFFFFF; cursor: pointer; }
.cert-answer input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--navy); }
.cert-answer:has(input:checked) { border-color: var(--navy); }
.cert-result .cert-score { font-family: var(--font-heading); font-size: 1.4rem; margin: 0 0 4px; }
.cert-result .cert-verdict { font-family: var(--font-heading); margin: 0 0 4px; }
.cert-result.is-passed .cert-verdict { color: var(--color-done-text); }
.cert-marked { list-style: none; margin: 16px 0 0; padding: 0; }
.cert-marked-q { margin: 0 0 12px; }
.cert-marked-q.is-right { border-left: 4px solid var(--color-done-border); }
.cert-marked-q.is-wrong { border-left: 4px solid var(--color-border); }
.cert-marked-head { margin: 0 0 6px; }
.cert-correct { font-family: var(--font-heading); }
.attendance-call { border-top: 1px solid var(--color-border); padding: 10px 0; }
.attendance-call summary { cursor: pointer; }
.attendance-call summary .muted { margin-left: 6px; }
.attendance-list { list-style: none; margin: 10px 0; padding: 0; columns: 2 260px; column-gap: 24px; }
.attendance-list li { break-inside: avoid; }
.attendance-tick { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; }
.attendance-tick input { margin-top: 3px; width: 20px; height: 20px; flex: none; accent-color: var(--logo-teal); }
.attendance-who { min-width: 0; overflow-wrap: anywhere; }
.attendance-email { font-size: 0.85rem; }
.attendance-tick .tick { display: inline; margin: 0; flex: none; cursor: default; }
.cert-dl { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; gap: 6px 14px; margin: 0; }
.cert-dl dt { color: var(--color-muted); }
.cert-dl dd { margin: 0; overflow-wrap: anywhere; }
.cert-dl dd p:first-child { margin-top: 0; }
.cert-notes p:first-child { margin-top: 0; }
.cert-send-back textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 6px; font: inherit; font-size: max(16px, 1rem); }
.badge.cert-status-submitted { border-color: var(--logo-magenta); }
.badge.cert-status-approved, .badge.cert-status-certified { background: var(--group-certified-badge-bg); color: var(--group-certified-badge-text); border-color: var(--group-certified-badge-bg); }
@media (max-width: 600px) { .cert-dl { grid-template-columns: 1fr; gap: 2px; } .cert-dl dd { margin-bottom: 8px; } }

/* --- Certification, Piece F: the certificate (member page + the founder's review) --- */
.certificate-show { margin: 22px 0 8px; text-align: center; }
.certificate-show h2 { margin: 0 0 6px; }
.certificate-congrats { margin: 0 auto 14px; max-width: 46em; }
.certificate-img { display: block; width: 100%; max-width: 1000px; height: auto; margin: 0 auto; border: 1px solid var(--color-border); border-radius: 6px; box-shadow: 0 6px 24px rgba(8, 51, 109, 0.12); background: #FFFDF8; }
.certificate-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; margin: 14px 0 0; }
.certificate-confirm input[type=text], .cert-fix input[type=text] { width: 100%; max-width: 480px; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 6px; font: inherit; font-size: max(16px, 1rem); }
.course-finish .certificate-show, .course-finish .certificate-confirm { text-align: left; }
/* PATH 2 — the confirm-your-name box (founder 2026-10-24 15:32, Q19a): heading, one field, the tick, Submit. */
.cert-name-box h2 { margin: 0 0 12px; font-size: 1.15rem; }
.cert-name-form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cert-name-form input[type=text] { width: 100%; max-width: 480px; box-sizing: border-box; min-height: 44px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 6px; font: inherit; font-size: max(16px, 1rem); }
.cert-name-form .attendance-tick, .cert-name-form button { min-height: 44px; }
.cert-name-box p { margin: 0; }
.cert-name-change { margin-top: 10px; }
.cert-name-change summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; color: var(--color-link, inherit); }
.course-finish .cert-name-box { text-align: left; }
/* The one-press Celebrate (Q8a): its own small line under the certificate. */
.certificate-celebrate { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin: 12px 0; font-size: 0.95rem; }
.certificate-celebrate button { min-height: 44px; }
.course-finish .certificate-show { text-align: center; }
.founder-cert-member .certificate-img { max-width: 720px; margin: 8px 0; }
.channel-certificate { max-width: 560px; margin: 10px 0 4px; }  /* #Wins celebration post (Q6a) */
/* Link previews (founder 2026-10-29 Q18; app/previews.py): an #Announcements post's card for its first site link —
   the cover (1200×630), the title in navy, one muted line. The whole card is the link. */
.link-card { display: block; max-width: 560px; margin: 10px 0 4px; background: #FFFFFF; border: 1px solid var(--color-border);
  border-radius: var(--kit-radius); overflow: hidden; color: var(--color-text); text-decoration: none; }
.link-card:hover, .link-card:focus-visible { border-color: var(--navy); }
.link-card-picture { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.link-card-text { display: block; padding: 10px 14px 12px; }
.link-card-title { display: block; font-family: Montserrat, Arial, sans-serif; color: var(--navy); }
.link-card-line { display: block; margin-top: 2px; font-size: 0.9rem; color: var(--color-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cert-celebration { margin: 8px 0; }
.cert-cert-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 0; }
.cert-cert-actions form { margin: 0; }

/* --- Founder circles view (Q18a, Q19a 2026-10-22): a card per member with a ring per course + the mini circle --- */
.cert-roster { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.cert-roster-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 0; }
.cert-roster-who { min-width: 0; flex: 1 1 220px; overflow-wrap: anywhere; }
.cert-roster-who p { margin: 6px 0 0; }
.cert-roster-rings { display: flex; gap: 14px; align-items: flex-start; }
.cert-ring-link { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 104px; padding: 6px 4px; border-radius: 10px; color: var(--color-text); text-decoration: none; text-align: center; }
.cert-ring-link:hover { background: var(--color-surface); }
.cert-ring-link svg { width: 72px; height: 72px; margin-bottom: 4px; }
.cert-ring-name { font-family: var(--font-heading); font-size: 0.85rem; line-height: 1.2; }
.cert-ring-line { font-size: 0.8rem; color: var(--color-muted); }
.course-ring-track { fill: none; stroke: var(--color-progress-fill); stroke-width: 14; opacity: 0.22; }
.course-ring-fill { fill: none; stroke: var(--color-progress-fill); stroke-width: 14; stroke-linecap: round; }
.course-ring-fill[stroke-dashoffset="100"] { stroke: none; }
.founder-cert-circle { margin: 8px 0 20px; }
.cert-lesson .meta { flex: none; font-size: 0.85rem; color: var(--color-muted); }
@media (max-width: 600px) {
  .cert-roster-rings { width: 100%; justify-content: space-between; gap: 6px; }
  .cert-ring-link { width: auto; flex: 1 1 0; min-width: 0; }
  .cert-ring-link svg { width: 60px; height: 60px; }
}

/* Contacts CRM (2026-10-23): founder Contacts page, CSV import, sign-up links. */
.contacts-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.contacts-groups { display: flex; flex-wrap: wrap; margin: 12px 0; }
.contacts-groups .badge { text-decoration: none; }
.contacts-groups .badge.is-current { border-color: var(--logo-turquoise, #1EACBA); border-width: 2px; }
.contacts-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.contacts-search input[type=search] { flex: 1 1 200px; }
.badge.muted { opacity: 0.75; }
.badge.person-tag { border-style: dashed; }
.contact-edit summary { cursor: pointer; }
.contact-edit form { display: block; margin: 6px 0; }
.contact-edit input[type=text] { max-width: 160px; }
.button.small, button.small { padding: 6px 10px; font-size: 0.9rem; }
.import-examples { margin: 0 0 10px 18px; font-size: 0.9rem; }
.email-audiences { border: 0; padding: 0; margin: 0; }
.email-audiences label { display: block; margin: 4px 0; }

/* ==== Founder control kit (founder 2026-10-23; vault STANDARDS/founder-control-kit.md) ========================
   Every founder page is built from these pieces (macros in templates/_kit.html); colours only from theme.css
   (--group-* / --kit-*). Buttons and tap targets 44px; Montserrat titles 30/18, Raleway body 16, labels 13 spaced.
   The site's type rule stands: no bold outside headings — weight comes from Montserrat, size and colour. */
main:has(.kit-page) { max-width: 1240px; }
.kit-page { display: flex; flex-direction: column; gap: 20px; font-size: 16px; }
.kit-page h1, .kit-page h2, .kit-page h3 { margin: 0; }
.kit-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.kit-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kit-title { font-family: var(--font-heading); font-size: 30px; line-height: 1.2; }
.kit-line { margin: 0; color: var(--color-muted); font-size: 15px; }
.kit-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.kit-card { background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--kit-radius); padding: 24px; box-sizing: border-box; min-width: 0; }
.kit-card-title { font-family: var(--font-heading); font-size: 18px; }
.kit-label { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }

/* Buttons: main navy (one per page) · second white outline · quiet underlined · AI magenta · ⋯ icon. */
.kit-btn, a.kit-btn, button.kit-btn { min-height: var(--kit-target); padding: 0 18px; border-radius: 22px; border: 1px solid var(--color-border); background: #FFFFFF; color: var(--color-text); font: 400 15px var(--font-body); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; box-shadow: none; cursor: pointer; box-sizing: border-box; }
.kit-btn--main, a.kit-btn--main, button.kit-btn--main { background: var(--color-button-bg); color: var(--color-button-text); border-color: var(--color-button-bg); }
.kit-btn--quiet, a.kit-btn--quiet, button.kit-btn--quiet { background: transparent; border-color: transparent; text-decoration: underline; padding: 0 10px; }
.kit-btn--ai, button.kit-btn--ai { background: var(--kit-current); border-color: var(--kit-current); color: #FFFFFF; }
.kit-btn:focus-visible, .kit-chip:focus-visible, .kit-icon-btn:focus-visible, .kit-tab:focus-visible, .kit-person:focus-visible, .kit-menu-items a:focus-visible, .kit-menu-items button:focus-visible, .kit-tip > summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }  /* navy: 12:1 (turquoise was 2.7:1) */
.kit-icon-btn { width: var(--kit-target); height: var(--kit-target); border-radius: 22px; border: 1px solid transparent; background: transparent; color: var(--color-text); font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; padding: 0; box-sizing: border-box; list-style: none; }
.kit-icon-btn::-webkit-details-marker { display: none; }
.kit-icon-btn:hover { background: var(--color-surface); }

/* Group badges, tags, dots, avatars — the fixed group colours (never coloured any other way). */
.kit-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 13px; line-height: 1.3; border: 1.5px solid transparent; white-space: nowrap; }
.kit-badge.is-small { padding: 2px 10px; font-size: 12px; }
.kit-badge.kit-g-newsletter { background: var(--group-newsletter-badge-bg); color: var(--group-newsletter-badge-text); border-color: var(--group-newsletter); }
.kit-badge.kit-g-free { background: var(--group-free-badge-bg); color: var(--group-free-badge-text); }
.kit-badge.kit-g-lifetime { background: var(--group-lifetime-badge-bg); color: var(--group-lifetime-badge-text); }
.kit-badge.kit-g-vip_training { background: var(--group-vip-badge-bg); color: var(--group-vip-badge-text); }
.kit-badge.kit-g-vip_certified { background: var(--group-certified-badge-bg); color: var(--group-certified-badge-text); }
.kit-badge.kit-g-plain { background: var(--color-surface); color: var(--color-text); }
.kit-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 12px; border: 1px dashed var(--kit-tag-border); background: var(--kit-tag-bg); color: var(--kit-tag-text); font-size: 13px; white-space: nowrap; }
.kit-dot { width: 10px; height: 10px; border-radius: 5px; display: inline-block; flex: 0 0 10px; }
.kit-dot.kit-g-newsletter, .kit-avatar.kit-g-newsletter { background: var(--group-newsletter); color: var(--group-newsletter-ink); }
.kit-dot.kit-g-free, .kit-avatar.kit-g-free { background: var(--group-free); color: var(--group-free-ink); }
.kit-dot.kit-g-lifetime, .kit-avatar.kit-g-lifetime { background: var(--group-lifetime); color: var(--group-lifetime-ink); }
.kit-dot.kit-g-vip_training, .kit-avatar.kit-g-vip_training { background: var(--group-vip); color: var(--group-vip-ink); }
.kit-dot.kit-g-vip_certified, .kit-avatar.kit-g-vip_certified { background: var(--group-certified); color: var(--group-certified-ink); }
.kit-avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 20px; background: var(--color-surface); color: var(--color-text); display: inline-flex; align-items: center; justify-content: center; font: 400 14px var(--font-heading); }
.kit-avatar.is-big { width: 52px; height: 52px; flex-basis: 52px; border-radius: 26px; font-size: 18px; }
/* The same colours on the older screens (Members, Certification) — badge.group-<key>. */
.badge.group-newsletter { background: var(--group-newsletter-badge-bg); color: var(--group-newsletter-badge-text); border: 1.5px solid var(--group-newsletter); }
.badge.group-free { background: var(--group-free-badge-bg); color: var(--group-free-badge-text); border-color: var(--group-free-badge-bg); }
.badge.group-lifetime { background: var(--group-lifetime-badge-bg); color: var(--group-lifetime-badge-text); border-color: var(--group-lifetime-badge-bg); }
.badge.group-vip_training { background: var(--group-vip-badge-bg); color: var(--group-vip-badge-text); border-color: var(--group-vip-badge-bg); }
.badge.group-vip_certified { background: var(--group-certified-badge-bg); color: var(--group-certified-badge-text); border-color: var(--group-certified-badge-bg); }

/* Count chips (filters). */
.kit-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.kit-chip { min-height: var(--kit-target); padding: 0 16px; border-radius: 22px; border: 1px solid var(--color-border); background: #FFFFFF; color: var(--color-text); font: 400 15px var(--font-body); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; box-sizing: border-box; }
.kit-chip.is-current { border: 2px solid var(--navy); background: var(--navy); color: #FFFFFF; }
.kit-chip.is-tag { min-height: 36px; border: 1px dashed var(--kit-tag-border); background: var(--kit-tag-bg); color: var(--kit-tag-text); font-size: 14px; position: relative; }
.kit-chip.is-tag::after { content: ""; position: absolute; inset: -4px 0; }  /* 44px tap target */
/* Plan & purchases chips (Contacts, founder 2026-10-24 Q20a): neutral — never group colours; plain labels, not taps. */
.kit-chip.is-plan { min-height: 26px; padding: 0 10px; font-size: 13px; background: #F4F6F9; color: var(--color-text); white-space: nowrap; }
.kit-chip.is-plan.is-purchase { background: #FFFFFF; border-style: dashed; }
.kit-chip.is-tag.is-current { border: 2px solid var(--earth-dark); background: var(--kit-tag-bg); color: var(--kit-tag-text); }

/* The group circle: slices are links (tap to filter, tap again for All). */
.kit-circle { position: relative; width: var(--kit-circle-size, 168px); height: var(--kit-circle-size, 168px); flex: 0 0 auto; }
.kit-circle svg { width: 100%; height: 100%; display: block; overflow: visible; }
.kit-slice path { fill: none; stroke-width: var(--seg-stroke); transition: stroke-width 0.15s; }
.kit-slice path.kit-g-newsletter { stroke: var(--group-newsletter); }
.kit-slice path.kit-g-free { stroke: var(--group-free); }
.kit-slice path.kit-g-lifetime { stroke: var(--group-lifetime); }
.kit-slice path.kit-g-vip_training { stroke: var(--group-vip); }
.kit-slice path.kit-g-vip_certified { stroke: var(--group-certified); }
.kit-slice:hover path, .kit-slice:focus path, .kit-slice.is-current path { stroke-width: calc(var(--seg-stroke) * 1.4); }
.kit-slice:focus { outline: none; }
.kit-slice:focus-visible path { stroke-width: calc(var(--seg-stroke) * 1.4); filter: drop-shadow(0 0 2px var(--navy)); }
.kit-circle-centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; font-size: 13px; color: var(--color-muted); }
.kit-circle-total { font: 400 30px var(--font-heading); color: var(--color-text); }

/* Step circles. */
.kit-steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kit-step, .kit-step a { display: flex; align-items: center; gap: 10px; color: var(--color-muted); text-decoration: none; min-height: var(--kit-target); }
.kit-step.is-done, .kit-step.is-done a, .kit-step.is-current { color: var(--color-text); }
.kit-step-dot { width: 40px; height: 40px; border-radius: 20px; border: 3px solid var(--color-border); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; font: 400 16px var(--font-heading); }
.kit-step.is-done .kit-step-dot { background: var(--kit-done); border-color: var(--kit-done); color: #FFFFFF; }
.kit-step.is-current .kit-step-dot { border-color: var(--kit-current); color: var(--kit-current); }
.kit-step-line { width: 48px; height: 3px; border-radius: 2px; background: var(--color-border); }
.kit-step-line.is-done { background: var(--kit-done); }
@media (max-width: 600px) { .kit-step-line { width: 16px; } .kit-steps { gap: 6px; } }

/* Progress rings. */
.kit-ring { flex: 0 0 auto; }
.kit-ring-track { fill: none; stroke: var(--color-border); stroke-width: 7; }
.kit-ring-fill { fill: none; stroke: var(--color-progress-fill); stroke-width: 7; }
.kit-ring.is-teal .kit-ring-fill { stroke: var(--logo-teal); }
.kit-ring.is-dashed .kit-ring-track { stroke: var(--kit-current); stroke-dasharray: 4 4; }
.kit-ring text { font: 400 13px var(--font-heading); fill: var(--color-text); }

/* The list (data table) with ⋯ menus. */
.kit-list { overflow: hidden; padding: 0; }
.kit-list-bar { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px; border-bottom: 1px solid var(--color-border); align-items: center; }
.kit-list-bar input[type=search], .kit-input { flex: 1 1 220px; min-height: var(--kit-target); border: 1px solid var(--color-border); border-radius: 22px; padding: 0 18px; font: 400 16px var(--font-body); color: var(--color-text); background: var(--color-bg); box-sizing: border-box; }
.kit-list-bar select, .kit-select { min-height: var(--kit-target); border: 1px solid var(--color-border); border-radius: 22px; padding: 0 14px; font: 400 15px var(--font-body); color: var(--color-text); background: #FFFFFF; max-width: 100%; }
.kit-table-wrap { overflow-x: auto; }
.kit-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.kit-table th { text-align: left; padding: 12px 8px; color: var(--color-muted); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.kit-table td { padding: 12px 8px; border-top: 1px solid var(--grey-warm); vertical-align: middle; color: var(--color-muted); }
.kit-table th:first-child, .kit-table td:first-child { padding-left: 16px; }
.kit-table th:last-child, .kit-table td:last-child { padding-right: 16px; text-align: right; }
.kit-table tr.is-current td { background: var(--kit-row-current); }
.kit-person { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--color-text); min-height: var(--kit-target); }
.kit-person-text { display: flex; flex-direction: column; min-width: 0; }
.kit-person-name { color: var(--color-text); overflow-wrap: break-word; }
.kit-person-email { font-size: 13px; color: var(--color-muted); overflow-wrap: break-word; word-break: break-word; }
.kit-cell-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.kit-pages { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 12px; }
.kit-menu { position: relative; display: inline-block; text-align: left; }
.kit-menu[open] > summary { background: var(--color-surface); }
.kit-menu-items { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: 12px; box-shadow: 0 8px 24px rgba(8, 51, 109, 0.14); padding: 6px; display: flex; flex-direction: column; }
.kit-menu-items form { margin: 0; }
.kit-menu-items a, .kit-menu-items button { display: flex; align-items: center; width: 100%; min-height: var(--kit-target); padding: 0 12px; border-radius: 8px; background: transparent; color: var(--color-text); font: 400 15px var(--font-body); text-decoration: none; text-align: left; box-shadow: none; border: 0; cursor: pointer; box-sizing: border-box; }
.kit-menu-items a:hover, .kit-menu-items button:hover, .kit-menu-items a:focus-visible, .kit-menu-items button:focus-visible { background: var(--color-surface); }

/* The side drawer: beside the list on a computer, a full-height panel over the page on a phone. */
.kit-with-drawer { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.kit-with-drawer > .kit-list { flex: 999 1 520px; min-width: 0; }
.kit-drawer { flex: 1 1 320px; max-width: 380px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--kit-radius); padding: 24px; box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; position: relative; }
.kit-drawer-close { position: absolute; top: 14px; right: 14px; background: var(--color-bg); }
.kit-drawer-head { display: flex; align-items: center; gap: 12px; padding-right: 48px; }
.kit-drawer-head > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kit-drawer-name { font: 400 18px var(--font-heading); overflow-wrap: anywhere; }
.kit-drawer-rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kit-drawer-ring { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--color-muted); text-align: center; text-decoration: none; }
.kit-drawer-ring .mini-ring { width: 64px; height: 64px; }
.kit-dl { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 10px 12px; font-size: 14px; }
.kit-dl dt { color: var(--color-muted); }
.kit-dl dd { margin: 0; overflow-wrap: anywhere; }
.kit-drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--grey-warm); padding-top: 16px; }
.kit-drawer-actions form, .kit-inline { margin: 0; display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kit-tag-remove { background: none; border: 0; padding: 0 0 0 4px; color: var(--kit-tag-text); font-size: 14px; cursor: pointer; min-width: 24px; min-height: 24px; box-shadow: none; position: relative; }
.kit-tag-remove::after { content: ""; position: absolute; inset: -10px; }  /* 44px tap target */
.kit-tag-add input { min-height: var(--kit-target); border: 1px solid var(--color-border); border-radius: 22px; padding: 0 12px; font: 400 16px var(--font-body); width: 150px; }
@media (max-width: 760px) {
  .kit-drawer { position: fixed; inset: 0 0 0 auto; width: min(100%, 420px); max-width: none; border-radius: 0; z-index: 40; overflow-y: auto; box-shadow: -8px 0 24px rgba(8, 51, 109, 0.18); }
  .kit-table .kit-hide-phone { display: none; }
  .kit-table td:first-child { width: 100%; }
  .kit-card { padding: 16px; }
  .kit-title { font-size: 26px; }
}

/* Toast, ⓘ tip, empty state, tabs. */
.kit-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; padding: 12px 18px; border-radius: 24px; background: var(--navy); color: #FFFFFF; font-size: 15px; display: inline-flex; gap: 10px; align-items: center; box-shadow: 0 8px 24px rgba(8, 51, 109, 0.25); max-width: calc(100% - 32px); animation: kit-toast 3.6s ease-out forwards; }
.kit-toast-mark { width: 22px; height: 22px; border-radius: 11px; background: var(--logo-turquoise); color: var(--navy-deep); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: 0 0 22px; }
@keyframes kit-toast { 0% { opacity: 0; } 8% { opacity: 1; } 83% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .kit-toast { animation: none; } }  /* stays until ✕ */
.kit-toast.is-warn { background: var(--color-error); }
.kit-toast.has-action { animation: none; }  /* a toast with a button stays until ✕ (Q15a) */
.kit-toast-action { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 22px; background: #FFFFFF; color: var(--navy); text-decoration: none; white-space: nowrap; }
.kit-toast-action:focus-visible { outline: 3px solid var(--logo-turquoise); outline-offset: 2px; }
.kit-toast-close { background: none; border: 0; color: #FFFFFF; font-size: 15px; padding: 0; margin-left: 4px; min-width: 32px; min-height: 32px; cursor: pointer; box-shadow: none; position: relative; }
.kit-toast-close::after { content: ""; position: absolute; inset: -6px; }
.kit-tip { display: inline-block; position: relative; vertical-align: middle; }
.kit-tip > summary { list-style: none; width: 26px; height: 26px; border-radius: 13px; border: 1px solid var(--color-border); background: #FFFFFF; color: var(--color-text); font: 400 13px var(--font-heading); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.kit-tip > summary::after { content: ""; position: absolute; inset: -9px; }  /* 44px tap target */
.kit-tip > summary::-webkit-details-marker { display: none; }
.kit-tip-text { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: max-content; max-width: min(280px, 80vw); background: var(--navy); color: #FFFFFF; font-size: 14px; line-height: 1.4; padding: 10px 12px; border-radius: 10px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.kit-empty { border: 1px dashed var(--color-border); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; color: var(--color-text); }
.kit-tabs { display: flex; flex-wrap: wrap; gap: 6px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: 26px; padding: 4px; }
.kit-tab { min-height: 40px; padding: 0 18px; border-radius: 20px; color: var(--color-text); font: 400 14px var(--font-body); display: inline-flex; align-items: center; text-decoration: none; position: relative; }
.kit-tab::after { content: ""; position: absolute; inset: -2px 0; }  /* 44px tap target */
.kit-tab.is-current { background: var(--navy); color: #FFFFFF; }
.kit-mini-count { font: 400 84px var(--font-heading); fill: var(--color-text); }
.kit-person-page .kit-drawer { max-width: 560px; }
@media (max-width: 760px) { .kit-person-page .kit-drawer { position: relative; inset: auto; width: auto; border-radius: var(--kit-radius); box-shadow: none; } }
.contacts-groups { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; }
.contacts-groups-side { flex: 1 1 420px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.contacts-tags { align-items: center; gap: 8px; }
.contacts-new-tag { display: inline-block; }
.contacts-new-tag > summary { list-style: none; }
.contacts-new-tag > summary::-webkit-details-marker { display: none; }
.contacts-new-tag[open] > summary { display: none; }
.contacts-notyet { cursor: pointer; }
.contacts-notyet:focus-within { outline: 3px solid var(--navy); outline-offset: 2px; }
.contacts-empty { padding: 16px; }
.contacts-drawer-slot:empty { display: none; }
.contacts-drawer-slot { flex: 1 1 320px; max-width: 380px; display: flex; }
.contacts-drawer-slot > .kit-drawer { flex: 1 1 auto; max-width: none; }
.contacts-add > summary { cursor: pointer; min-height: var(--kit-target); display: flex; align-items: center; }
.contacts-add-form { margin-top: 12px; }
@media (max-width: 760px) { .contacts-drawer-slot { flex: 0 0 0; max-width: none; } .contacts-groups { gap: 20px; justify-content: center; } }

/* The Certified toggle (_kit.html toggle, 2026-10-24): a slide switch that is a real button; 44 px tap target. ON =
   navy (the Certified colour); disabled = paler, with its reason beside it. */
.kit-toggle-form { margin: 0; display: inline-flex; align-items: center; gap: 2px; }
.kit-toggle, button.kit-toggle { min-height: var(--kit-target); padding: 0 4px; border: 0; background: transparent; box-shadow: none; color: var(--color-text); font: 400 14px var(--font-body); display: inline-flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; }
.kit-toggle-track { flex: 0 0 48px; width: 48px; height: 28px; border-radius: 14px; background: var(--color-border); position: relative; transition: background 0.2s; }
.kit-toggle-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 11px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(8, 51, 109, 0.3); transition: left 0.2s; }
.kit-toggle.is-on .kit-toggle-track { background: var(--group-certified); }
.kit-toggle.is-on .kit-toggle-knob { left: 23px; }
.kit-toggle:disabled { cursor: not-allowed; }
.kit-toggle:disabled .kit-toggle-track { opacity: 0.5; }
.kit-toggle:disabled .kit-toggle-text { color: var(--color-muted); }
.kit-toggle:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 22px; }
@media (prefers-reduced-motion: reduce) { .kit-toggle-track, .kit-toggle-knob { transition: none; } }

/* The founder Certification page in the kit (2026-10-24): one row per VIP person — who · progress rings · workbook ·
   the toggle. Walk fix 2 (2026-10-24): a grid sized by the LIST's width (a container query, so an open drawer counts),
   the toggle always on the row's right on one line, the submitted date under the status chip. Wide list: one line;
   medium: who above, rings · status · toggle below; narrow (a phone, or the list beside a drawer): who · status /
   rings / the toggle on the right. `.cert-list > .cert-row` so the member pages' `.cert-list li { padding: 6px 0 }` can't take the
   row's side padding (that put the date against the card's edge). */
.kit-head-note { white-space: nowrap; }
.cert-chips { margin: 0 0 20px; }
.cert-page .kit-list { container: certlist / inline-size; }
.cert-list { list-style: none; margin: 0; padding: 0; }
.cert-list > .cert-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who status" "rings rings" "toggle toggle"; align-items: center; gap: 10px 20px; padding: 14px 16px; border-bottom: 1px solid var(--color-border); min-width: 0; }
.cert-row:last-child { border-bottom: 0; }
.cert-row.is-current { background: var(--kit-row-current); }
.cert-row-person { grid-area: who; min-width: 0; }
.cert-row-progress { grid-area: rings; display: flex; gap: 8px; align-items: flex-start; min-width: 0; --cert-ring: 72px; }
.cert-row-progress .cert-ring-link { width: 92px; padding: 6px 2px; box-sizing: border-box; }  /* "Certification" fits */
.cert-row-progress .cert-ring-link svg.kit-ring { width: var(--cert-ring); height: var(--cert-ring); }
/* The mini Certification Circle the same size as the course rings beside it: a kit ring's outside edge is
   (2×26 + 7) / 64 of its box, the circle's (2×168 + 26) / 420 — so its box is 1.067× and the extra is taken back
   from its margins (the labels under all three stay level). */
.cert-row-progress .mini-ring { width: calc(var(--cert-ring) * 1.067); height: calc(var(--cert-ring) * 1.067); margin: calc(var(--cert-ring) * -0.0335) calc(var(--cert-ring) * -0.0335) calc(4px - var(--cert-ring) * 0.0335); }
.cert-row-status { grid-area: status; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cert-row-date { white-space: nowrap; }
.cert-row-toggle { grid-area: toggle; justify-self: end; min-width: 0; }
.cert-row-toggle .kit-toggle-text { white-space: nowrap; }
@container certlist (min-width: 700px) {
  .cert-list > .cert-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "who who who" "rings status toggle"; }
}
@container certlist (min-width: 940px) {
  .cert-list > .cert-row { grid-template-columns: minmax(200px, 1fr) auto auto auto; grid-template-areas: "who rings status toggle"; }
}
.cert-drawer-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.cert-drawer-parts a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.cert-drawer-parts .cert-done-mark { width: 14px; display: inline-block; }
.cert-drawer-section { display: flex; flex-direction: column; gap: 8px; }
.cert-drawer-section > summary { list-style: none; align-self: flex-start; }
.cert-drawer-section > summary::-webkit-details-marker, .cert-drawer-fix > summary::-webkit-details-marker { display: none; }
.cert-drawer-section p { margin: 0; }
.cert-drawer-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin: 0; }
.cert-drawer-form .kit-input { width: 100%; flex: none; }
.cert-drawer-form textarea.kit-input { border-radius: 12px; padding: 10px 14px; min-height: 96px; }
.cert-drawer-fix > summary { list-style: none; }
@media (max-width: 760px) {
  .cert-list .kit-hide-phone { display: none; }
  .cert-list > .cert-row { padding: 12px; gap: 10px; }
  .cert-row-progress { --cert-ring: 60px; }
  .cert-row-progress .cert-ring-link { width: auto; flex: 1 1 0; }
}
/* The calls year circle (Live, 2026-10-23): 12 equal month slices. Past navy · next magenta · coming up a light
   outline · skipped grey dashed. Colour is never the only signal: every slice has a spoken label and the legend. */
.live-page { display: flex; flex-direction: column; gap: 20px; }
.live-page h1 { margin: 0; }
.live-awaiting { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-left: 4px solid var(--logo-magenta); }
.live-awaiting form { margin: 0; }
.live-circle-card { flex: 999 1 520px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.kit-calls { position: relative; width: min(100%, 440px); aspect-ratio: 1 / 1; }
.kit-calls svg { width: 100%; height: 100%; display: block; overflow: visible; }
.kit-calls-hit { fill: none; stroke: transparent; stroke-width: 58; pointer-events: stroke; }
.kit-calls-arc { fill: none; stroke-width: var(--seg-stroke); transition: stroke-width 0.15s; }
.kit-calls-inner { fill: none; stroke: none; stroke-width: calc(var(--seg-stroke) - 5px); transition: stroke-width 0.15s; }
.kit-calls-slice.is-past .kit-calls-arc { stroke: var(--navy); }
.kit-calls-slice.is-next .kit-calls-arc { stroke: var(--logo-magenta); }
.kit-calls-slice.is-future .kit-calls-arc { stroke: var(--kit-coming); }  /* the Lesson Circle's not-started segment: one solid pale segment, no outline (walk fix 2026-10-24) */
.kit-calls-slice.is-skipped .kit-calls-arc { stroke: var(--kit-skipped); stroke-dasharray: 5 4; }
.kit-calls-slice.is-skipped .kit-calls-inner { stroke: #FFFFFF; }
.kit-calls-month { font: 400 13px var(--font-body); fill: var(--color-muted); pointer-events: none; }
.kit-calls-slice.is-this-month .kit-calls-month { font-family: var(--font-heading); fill: var(--navy); }
.kit-calls-year { font: 400 10.5px var(--font-body); fill: var(--color-muted); }  /* the clock's year: small, muted (Q8a) */
.kit-calls-slice:hover .kit-calls-arc, .kit-calls-slice:focus-visible .kit-calls-arc, .kit-calls-slice.is-current .kit-calls-arc { stroke-width: calc(var(--seg-stroke) * 1.33); }
.kit-calls-slice:hover .kit-calls-inner, .kit-calls-slice:focus-visible .kit-calls-inner, .kit-calls-slice.is-current .kit-calls-inner { stroke-width: calc(var(--seg-stroke) * 1.33 - 6px); }
.kit-calls-slice:focus { outline: none; }
.kit-calls-slice:focus-visible .kit-calls-arc { filter: drop-shadow(0 0 2px var(--navy)) drop-shadow(0 0 2px var(--navy)); }
.kit-calls-centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 58%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; color: var(--color-text); pointer-events: none; }
.kit-calls-centre a { pointer-events: auto; }  /* only Join is tappable: the slices' tap area reaches under the centre */
.kit-calls-day { font: 400 24px var(--font-heading); line-height: 1.2; }
.kit-calls-time { font-size: 17px; }
.kit-calls-topic { font-size: 14px; color: var(--color-text); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kit-calls-join { margin-top: 6px; }
.kit-calls-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 14px; color: var(--color-muted); }
.kit-calls-key { display: inline-flex; align-items: center; gap: 8px; }
.kit-calls-key::before { content: ""; width: 22px; height: 10px; border-radius: 5px; box-sizing: border-box; }
.kit-calls-key.is-past::before { background: var(--navy); }
.kit-calls-key.is-next::before { background: var(--logo-magenta); }
.kit-calls-key.is-future::before { background: var(--kit-coming); }
.kit-calls-key.is-skipped::before { border: 2px dashed var(--kit-skipped); background: #FFFFFF; }
.kit-calls-state { align-self: flex-start; font-size: 13px; padding: 2px 10px; border-radius: 12px; border: 1px solid var(--color-border); color: var(--color-text); }
.kit-calls-state.is-past { background: var(--kit-state-past-bg); color: var(--navy); border-color: transparent; }
.kit-calls-state.is-next { background: var(--kit-state-next-bg); color: var(--kit-state-next-text); border-color: transparent; }
.kit-calls-state.is-skipped { border-style: dashed; border-color: var(--kit-skipped); }
.live-join-line { text-align: center; max-width: 420px; }
.live-drawer-slot:empty { display: none; }
.live-drawer-slot { flex: 1 1 340px; max-width: 420px; display: flex; min-width: 0; }
.live-drawer-slot > .kit-drawer { flex: 1 1 auto; max-width: none; }
.live-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.live-form > .kit-btn { align-self: flex-start; }
.live-field { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.live-field .kit-input { flex: none; width: 100%; }
.live-field .kit-inline { flex-wrap: nowrap; width: 100%; }
.live-field .kit-inline .kit-input { flex: 1 1 auto; min-width: 0; width: auto; }
.live-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.live-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.live-section { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--grey-warm); padding-top: 16px; }
.live-section .attendance-list { margin: 0; }
.live-older { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* The centre's time with Hawaii (or, in Hawaii, Pacific) time beside it (walk fix 2026-10-24); Join + its ⓘ tip. */
.kit-calls-when { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 6px; }
.kit-calls-other { font-size: 13px; color: var(--color-muted); }
.kit-calls-join-row { display: inline-flex; align-items: center; gap: 8px; }
.kit-calls-join-row.is-centre { margin-top: 6px; }
.kit-calls-join-row.is-below { display: none; }
.kit-calls-centre .kit-tip { pointer-events: auto; }
.kit-calls-join-row .kit-tip-text { left: auto; right: 0; }
.kit-toggle-form .kit-tip-text { left: auto; right: 0; max-width: min(280px, 70vw); }  /* the ⓘ beside the Certified toggle opens leftwards */
/* The open month's slice: a turquoise outline (2026-10-24). */
.kit-calls-slice.is-current .kit-calls-arc { filter: drop-shadow(0 0 1px var(--logo-turquoise)) drop-shadow(0 0 1px var(--logo-turquoise)) drop-shadow(0 0 1.5px var(--logo-turquoise)); }
/* The panel BELOW the calls circle (2026-10-24, Q4a/Q5a): one month, the square video card, the founder's controls. */
.calls-panel-slot { width: 100%; display: flex; justify-content: center; }
.calls-panel-slot:empty { display: none; }
.calls-panel { width: 100%; max-width: 600px; border-top: 1px solid var(--grey-warm); padding-top: 20px; display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 16px; }
.calls-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.calls-panel-head-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.calls-panel-title { margin: 0; font: 400 22px var(--font-heading); overflow-wrap: anywhere; }
.calls-panel-title:focus { outline: none; }
.calls-panel-close { flex: 0 0 auto; background: var(--color-bg); }
.calls-panel-join { margin: 0; }
.calls-panel-videos { display: flex; flex-direction: column; gap: 16px; }
.calls-panel-rec { display: flex; flex-direction: column; gap: 10px; }
/* One view on all three call pages (founder 2026-10-24 05:31 + 05:32): founder Live keeps the members' page width so
   the clock, the card and the Older recordings row sit exactly where they do on Recordings and Live Training; her
   own controls are one quiet section under the video card. */
main:has(.kit-page.live-page) { max-width: 960px; }
.calls-panel-rec form { margin: 0; }
.calls-panel-more { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 600px; }
.kit-video { width: min(100%, 360px); display: flex; flex-direction: column; gap: 10px; }
.kit-video.is-playing { width: 100%; }
.kit-video-media { aspect-ratio: 1 / 1; border-radius: var(--kit-radius); overflow: hidden; background: var(--color-button-bg); }
.kit-video-media.is-playing { aspect-ratio: 16 / 9; background: #000; }
.kit-video-cover { position: relative; width: 100%; height: 100%; box-sizing: border-box; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: #FFFFFF; text-decoration: none; }
.kit-video-cover:focus-visible { outline: 3px solid var(--logo-turquoise); outline-offset: -6px; }
.kit-video-cover img { width: 56px; height: 56px; }
.kit-video-topic { font: 400 20px var(--font-heading); line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kit-video-month { font-size: 14px; opacity: 0.9; }
.kit-video-play { width: 64px; height: 64px; border-radius: 32px; background: #FFFFFF; color: var(--navy); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; padding-left: 4px; box-sizing: border-box; margin-top: 6px; transition: transform 0.15s; }
.kit-video-cover:hover .kit-video-play { transform: scale(1.06); }
.kit-video-player { display: block; width: 100%; height: 100%; background: #000; }
.kit-video-text { display: flex; flex-direction: column; gap: 2px; }
.kit-video-title { margin: 0; font: 400 18px var(--font-heading); overflow-wrap: anywhere; }
.kit-video-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kit-video-actions form { margin: 0; }
.kit-video-thumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.kit-video-thumb { width: 104px; aspect-ratio: 1 / 1; box-sizing: border-box; padding: 8px; border-radius: 12px; background: var(--color-button-bg); color: #FFFFFF; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; font-size: 12px; line-height: 1.25; }
.kit-video-thumb img { width: 24px; height: 24px; }
.kit-video-thumb-topic { font-family: var(--font-heading); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kit-video-thumb-line { opacity: 0.9; }
.kit-video-thumb.is-current { outline: 3px solid var(--logo-turquoise); outline-offset: 2px; }
.kit-video-thumb:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
@media (max-width: 480px) {
  /* On a phone Join sits directly under the circle, so nothing in the centre touches the ring (walk fix 2026-10-24). */
  .kit-calls-join-row.is-centre { display: none; }
  .kit-calls-join-row.is-below { display: inline-flex; }
  .kit-calls-centre { width: 56%; }
  .kit-calls-day { font-size: 17px; }
  .kit-calls-time { font-size: 14px; }
  .kit-calls-other { font-size: 12px; }
  .kit-calls-topic { font-size: 12px; max-width: 84%; text-wrap: balance; }  /* the circle narrows at the bottom */
  .kit-calls-centre .kit-label { font-size: 11px; }
  .calls-panel-title { font-size: 20px; }
}
@media (max-width: 360px) {
  .kit-calls-centre { width: 52%; gap: 1px; }
  .kit-calls-day { font-size: 16px; }
  .kit-calls-topic { font-size: 11.5px; line-height: 1.3; max-width: 80%; }
}
@media (max-width: 760px) {
  .live-drawer-slot { flex: 0 0 0; max-width: none; }
  .kit-calls-day { font-size: 19px; }
  .kit-calls-time { font-size: 15px; }
  .kit-calls-topic { font-size: 13px; }
  .kit-calls-centre { gap: 2px; width: 60%; }
  .live-two { grid-template-columns: 1fr; }
}

/* Email (founder control kit, Email.dc.html). */
.email-tab .error { margin: 0; }
.email-compose { display: flex; flex-direction: column; gap: 20px; }
.email-who-head, .email-recent-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.email-count { display: flex; align-items: center; gap: 14px; }
.email-count-text { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.email-count .kit-ring text { font-size: 17px; }
.email-tiles { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.email-tiles-label { grid-column: 1 / -1; margin: 8px 0 0; }
.email-tile { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 14px; border: 1px solid var(--color-border); border-radius: 14px; background: #FFFFFF; cursor: pointer; box-sizing: border-box; }
.email-tile.is-tag { border-style: dashed; border-color: var(--kit-tag-border); background: var(--kit-tag-bg); }
.email-tile:has(input:checked) { border: 2px solid var(--navy); background: var(--kit-row-current); }
.email-tile:focus-within { outline: 3px solid var(--navy); outline-offset: 2px; }
.email-tile input { width: 20px; height: 20px; margin: 0; accent-color: var(--navy); flex: 0 0 20px; }
.email-tile-name { flex: 1 1 auto; color: var(--color-text); }
.email-tile-n { font-size: 13px; color: var(--color-muted); white-space: nowrap; }
.email-sending-to { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; }
.email-sending-to-list { display: flex; flex-direction: column; gap: 10px; }
.email-write-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.email-write, .email-review { flex: 1 1 440px; display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.email-ai { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; background: var(--kit-ai-bg); border: 1px solid var(--kit-ai-border); border-radius: 12px; padding: 12px 14px; color: var(--color-text); }
.email-ai svg { color: var(--kit-current); flex: 0 0 22px; }
.email-ai > span { flex: 1 1 200px; font-size: 15px; }
.email-ai .kit-btn--ai:disabled { opacity: 1; background: #FFFFFF; color: var(--kit-current); border-color: var(--kit-ai-border); cursor: not-allowed; }
.email-field-label { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.email-input { border: 1px solid var(--color-border); border-radius: 10px; padding: 12px 14px; font: 400 16px/1.6 var(--font-body); color: var(--color-text); background: #FFFFFF; width: 100%; box-sizing: border-box; min-height: var(--kit-target); }
textarea.email-input { resize: vertical; }
.email-inserts { display: flex; flex-wrap: wrap; gap: 8px; }
.email-insert { font-size: 14px; font-weight: 400; }
.email-preview { flex: 1 1 360px; max-width: 520px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.email-preview-card { background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--kit-radius); overflow: hidden; }
.email-preview-head { padding: 14px 18px; border-bottom: 1px solid var(--grey-warm); font-size: 13px; color: var(--color-muted); display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.email-preview-head strong { color: var(--color-text); }
.email-preview-subject { color: var(--color-text); font-size: 15px; }
.email-preview-bar { height: 6px; background: var(--logo-turquoise); }
.email-preview-body { padding: 22px; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; color: var(--color-text); }
.email-preview-body p { margin: 0 0 14px; }
.email-preview-button { display: inline-block; padding: 12px 22px; background: var(--navy); color: #FFFFFF; text-decoration: none; border-radius: 8px; }
.email-preview-foot { padding: 14px 22px; background: var(--color-bg); font-size: 12px; color: var(--color-muted); }
/* Write with AI (founder 2026-10-26, Q3a–Q12a): the magenta box on the Write step, and the preview in the new light
   design (board "★ Final"; the email itself is app/mailer.py designed_html — tables + inline styles). */
.email-ai--on { align-items: flex-start; }
.email-ai-main { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.email-ai-main .email-field-label { margin: 0; }
.email-ai-main textarea { background: #FFFFFF; }
.email-ai-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.email-ai--on .kit-btn--ai:disabled { opacity: 0.6; cursor: not-allowed; }
.email-preview-card--light .email-preview-body { padding: 16px 22px 6px; font-family: var(--font-body); font-size: 16px; color: #06223F; }
.email-preview-card--light .email-preview-button { background: #C12776; border-radius: 999px; padding: 12px 28px; font-family: var(--font-heading); display: table; margin: 4px auto 10px; }
.email-light-line { display: flex; gap: 4px; }
.email-light-line span { flex: 1; height: 6px; background: #4CC6CF; }
.email-light-line span:nth-child(2) { background: #1B99AE; }
.email-light-line span:nth-child(3) { background: #C12776; }
.email-light-line span:nth-child(4) { background: #08336D; }
.email-light-head { height: 120px; display: flex; justify-content: flex-end; }
.email-light-head img { height: 120px; width: auto; display: block; }
.email-light-title { margin: 4px 22px 0; text-align: center; font-family: var(--font-heading); font-size: 26px; line-height: 1.3; color: #08336D; overflow-wrap: anywhere; }
.email-light-sign { margin: 0 22px 18px; padding-top: 16px; border-top: 1px solid #DDDBD7; display: flex; gap: 14px; align-items: center; }
.email-light-sign img { width: 88px; height: 88px; flex: 0 0 88px; }
.email-light-sign div { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; color: #4E5D73; }
.email-light-sign p { margin: 0; }
.email-light-sign .email-light-signoff { font-size: 16px; color: #06223F; }
.email-light-sign p strong { font-family: var(--font-heading); font-size: 16px; color: #08336D; }
.email-light-sign a { color: #1B99AE; text-decoration: none; }
.email-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.email-nav-right, .email-review-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.email-schedule > summary { list-style: none; align-self: flex-start; display: inline-flex; }
.email-schedule > summary::-webkit-details-marker { display: none; }
.email-schedule-fields { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 12px; }
.email-schedule-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.email-schedule-fields .kit-line { flex: 1 1 100%; margin: 0; }
.email-recent-list { display: flex; flex-wrap: wrap; gap: 12px; }
.email-recent-list .email-recent-item { flex: 1 1 260px; border: 1px solid var(--grey-warm); border-radius: 12px; padding: 12px; }
.email-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.email-list .email-recent-item { border-top: 1px solid var(--grey-warm); padding: 12px 0; }
.email-list .email-recent-item:first-child { border-top: 0; }
.email-recent-item { display: flex; align-items: center; gap: 12px; }
.email-recent-text { display: flex; flex-direction: column; font-size: 14px; flex: 1 1 auto; min-width: 0; }
.email-recent-text .kit-line { font-size: 14px; }
.email-invite-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.email-invite-actions form { margin: 0; }
.email-reminder { align-items: center; margin: 4px 0 12px; }  /* the VIP – In training reminder (2026-10-24) */
/* Contacts → Import a CSV and Sign-up links (control kit). */
.import-upload, .links-form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.links-form .kit-input { width: 100%; max-width: 420px; flex: none; }
.import-file { font: 400 16px var(--font-body); min-height: var(--kit-target); }
.import-columns { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.import-columns label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.import-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 12px; }
.import-count { border: 1px solid var(--grey-warm); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.import-count.is-new { border-color: var(--logo-turquoise); }
.import-examples { margin: 6px 0 0; padding-left: 18px; font-size: 14px; overflow-wrap: anywhere; }
.import-examples-box > summary { cursor: pointer; min-height: 32px; }
.import-apply { display: flex; flex-direction: column; gap: 14px; }
.import-tag { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.import-tag .email-field-label { flex: 1 1 100%; }
.links-url { display: flex; gap: 8px; align-items: center; min-width: 260px; }
.links-url .kit-input { min-width: 0; }
.kit-show-phone { display: none; }
.kit-person-text .kit-show-phone { margin-top: 4px; align-self: flex-start; }
.kit-table td.kit-nowrap { white-space: nowrap; }
.kit-table td:first-child { min-width: 200px; }
.kit-drawer-head .kit-badge { align-self: flex-start; }
@media (max-width: 760px) { .kit-show-phone { display: inline-block; } .kit-table td:first-child { min-width: 0; } }
.import-lifetime { display: flex; align-items: center; gap: 10px; }
.import-lifetime .email-tile { flex: 1 1 auto; }

/* Suicide-Informed Training: the calm crisis band on every page, and the content note at the start (2026-10-24). */
.crisis-band { margin: 0 0 16px; padding: 10px 14px; background: var(--color-crisis-bg); color: var(--color-crisis-text); border-left: 4px solid var(--color-crisis-edge); border-radius: 6px; font-size: 0.95rem; }
.crisis-band a { color: var(--color-crisis-text); font-weight: normal; }
.content-note { margin: 0 0 16px; padding: 10px 14px; background: var(--color-crisis-bg); color: var(--color-text); border-radius: 6px; }
.content-note-label { color: var(--color-muted); }

/* ==== Build page → Rollout (founder 2026-10-24, Q3a–Q5a; app/rollout.py; mirrors Vaultli's Rollout rows) ======
   One row per switch: label + grey one-liner left, the pill "Founder only | Everyone" right (the kit's pill bar:
   white with a hairline, the current side navy). A disabled side is greyed with its ⓘ "Waiting on: …" before it. */
.build-rollout { display: flex; flex-direction: column; gap: 16px; }
.build-rollout-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.build-only-you { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 12px; background: var(--color-surface); color: var(--color-muted); font-size: 13px; }
.build-only-you svg { width: 14px; height: 14px; fill: currentColor; }
.build-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.build-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 0; border-top: 1px solid var(--color-border); }
.build-row:first-child { border-top: 0; padding-top: 0; }
.build-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.build-row-label { font-family: var(--font-heading); font-size: 16px; }
.build-pill-form { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.build-pill { display: inline-flex; gap: 4px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: 26px; padding: 3px; }
.build-pill-btn, button.build-pill-btn { min-height: 38px; padding: 0 14px; border-radius: 19px; border: 0; background: transparent; color: var(--color-text); font: 400 14px var(--font-body); box-shadow: none; cursor: pointer; position: relative; white-space: nowrap; }
.build-pill-btn::after { content: ""; position: absolute; inset: -3px 0; }  /* 44px tap target */
.build-pill-btn.is-current { background: var(--navy); color: #FFFFFF; cursor: default; }
.build-pill-btn:disabled { color: var(--color-muted); opacity: 0.6; cursor: not-allowed; }
.build-pill-btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.build-log-heading { font: 400 13px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.build-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--color-muted); }
.build-confirm { border: 1px solid var(--color-border); border-radius: var(--kit-radius); padding: 24px; max-width: min(420px, calc(100% - 32px)); }
.build-confirm::backdrop { background: rgba(8, 51, 109, 0.35); }
.build-confirm p { margin: 10px 0 18px; }
.build-confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ==== Image Studio → References (IMAGE STUDIO ON PROD, 2026-10-25; app/studio.py → references) =====================
   One kit card per kind: the references (thumbnail + name; the Studio's own with Remove), then the drop box — a dashed
   kit-radius area over the file input (tap to choose on a phone, drop on a desktop). 44 px targets, wraps at 390 px. */
.studio-ref-group { display: flex; flex-direction: column; gap: 14px; }
.studio-ref-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.studio-ref-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.studio-ref-grid li { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.studio-ref-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-slide-bg); }
.studio-ref-name { font-size: 13px; overflow-wrap: anywhere; }
.studio-ref-grid form { margin: 0; }
.studio-ref-grid .kit-btn--quiet { padding: 0; min-height: var(--kit-target); justify-content: flex-start; }
.studio-drop-form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.studio-drop { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 88px; box-sizing: border-box; padding: 14px; border: 2px dashed var(--color-border); border-radius: var(--kit-radius); background: #FFFFFF; color: var(--color-muted); text-align: center; cursor: pointer; }
.studio-drop.is-over, .studio-drop:focus-within { border-color: var(--navy); color: var(--color-text); }
.studio-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* The public landing page (logged-out /, founder 2026-10-26): the Home look, calm, lots of space; phone first.
   The header carries only the logo and a small "Log in" link. */
.topbar .topbar-login { font-size: 0.95rem; }
.landing { max-width: 960px; margin: 0 auto; }
.landing-top { text-align: center; padding: 28px 0 12px; }
.landing-eyebrow { font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); margin: 0 0 10px; }
.landing-top h1 { font-size: 2rem; line-height: 1.25; margin: 0 0 12px; }
.landing-lede { font-size: 1.1rem; max-width: 32em; margin: 0 auto; }
.landing-form { max-width: 460px; }
.landing-row { display: flex; flex-wrap: wrap; gap: 8px; }
.landing-row input[type=email] { flex: 1 1 200px; min-width: 0; margin: 0; }
.landing-row button { flex: 1 0 auto; max-width: 100%; }
.landing-note { margin: 12px 0 0; }
.landing-member { white-space: nowrap; margin-left: 6px; }
.landing-form .hint { margin: 6px 0 0; }
.landing-age { max-width: 460px; margin: 6px 0 0; }
.landing-bottom { text-align: center; padding: 28px 0 24px; }
.landing-bottom p { font-size: 1.1rem; margin: 0 0 14px; }

/* The Explore Circle (founder 2026-10-26 03:58, Q7a–Q9a): the Lesson Circle's ring with her portrait in the centre.
   Unvisited segments are the Lesson Circle's pale state; a visited one takes its colour (light turquoise → teal →
   magenta, the circle's order); "Start free" is always navy. The selected one is wider. Only a gentle
   colour fade, no other motion. Without JavaScript the circle stays hidden and the panels are a plain list. */
.explore { padding: 16px 0 8px; }
.explore-circle { width: 100%; max-width: 440px; margin: 0 auto; }
.explore-ring .arc-track { transition: opacity 0.4s ease; }
.explore-seg.is-visited .arc-track, .explore-seg.is-start .arc-track { opacity: 1; }
.explore-seg.is-current .arc-track { stroke-width: calc(var(--seg-stroke) * 1.4); }
.explore-seg:focus-visible .arc-track { opacity: 1; }
.explore-label { font-family: var(--font-heading); font-size: 17px; fill: var(--color-text); }
.explore-centre { cursor: pointer; outline: none; }
.explore-centre:focus-visible .explore-tap-bg { stroke: var(--logo-turquoise); stroke-width: 3; }
.explore-tap-bg { fill: var(--navy); opacity: 0.9; }
.explore-tap { font-family: var(--font-heading); font-size: 15px; fill: #FFFFFF; }
.explore-panels { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.explore-panel { background: #FFFFFF; border: 1px solid var(--color-border); border-radius: 16px; padding: 16px; outline: none; }
.explore-panel h2 { font-size: 1.3rem; margin: 14px 0 6px; }
.explore-panel > h2:first-child { margin-top: 0; }
.explore-text { margin: 0 0 14px; }
.explore-pic { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #FFFFFF; }
.explore-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.explore-pic.is-whole img { object-fit: contain; }
.explore.is-js .explore-panel:not(.is-current) { display: none; }
.explore.is-js .explore-panels { margin-top: 12px; }
@media (min-width: 900px) {
  .explore.is-js { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 40px; align-items: center; }
  .explore.is-js .explore-panels { margin-top: 0; }
}
@media (max-width: 720px) {
  .landing-top { padding: 16px 0 8px; }
  .landing-top h1 { font-size: 1.6rem; }
  .landing-lede { font-size: 1.02rem; }
}
@media (prefers-reduced-motion: reduce) { .explore-ring .arc-track { transition: none; } }

/* The About Dr. Danielle circle on the logged-in Home (founder 2026-10-26 07:43; _about_circle.html): the Explore Circle
   above, unboxed (no card around the circle), under its Home heading; on a computer the heading spans both columns. */
.about-circle { padding: 0; }
.about-circle.is-js > h2 { grid-column: 1 / -1; }
.about-circle .explore-panel > h3:first-child { margin: 0 0 6px; font-size: 1.3rem; }
.about-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
@media (min-width: 900px) { .about-circle.is-js { row-gap: 12px; } }
/* ONE "Become a member" page (founder 2026-10-26 16:45 + Q23a): Your path to certification above the join box — the page
   widens for the circle (beside its panel on a computer), the words and the join box keep their width. A panel's
   picture sits above its title, as on the landing Explore Circle (founder 16:52). */
.join.join--path { max-width: 960px; }
.join--path > h1, .join--path > .join-intro, .join--path > .join-card { max-width: 620px; }
.join--path .join-card:focus { outline: 3px solid var(--logo-turquoise); outline-offset: 2px; }
.path-circle .explore-pic + h3 { margin: 14px 0 6px; font-size: 1.3rem; }

/* The public page of a shared post with a picture, /p/<token> (founder 2026-10-26 Q16a). */
.share-post { max-width: 640px; margin: 0 auto; text-align: center; padding: 24px 0; }
.share-post-picture { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--color-border); }
.share-post h1 { font-size: 1.5rem; line-height: 1.3; margin: 20px 0 8px; }

/* Help & ideas (founder 2026-10-27, Q28a–Q42a; templates help.html, _help_chat.html, founder_help.html): the chat card on
   the kit look, the two buttons under a reply, her list + drawer. Phone-ready (390 px, no sideways scroll). */
.help-page { max-width: 760px; }
.help-card { display: flex; flex-direction: column; gap: 16px; }
.help-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.help-turns { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.help-turns:empty { display: none; }
.help-turn { max-width: 88%; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--color-border); background: #FFFFFF; overflow-wrap: anywhere; }
.help-turn.is-user { align-self: flex-end; background: var(--color-bg); }
.help-turn.is-helper { align-self: flex-start; border-left: 4px solid var(--logo-magenta); }
.help-turn.is-fixed { border-left-color: var(--logo-turquoise); }
.help-who { display: flex; align-items: center; gap: 6px; font: 400 13px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 4px; }
.help-who .kit-tip { text-transform: none; letter-spacing: 0; }
.help-text p { margin: 0 0 8px; }
.help-text p:last-child { margin-bottom: 0; }
.help-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.help-actions form { margin: 0; }
.help-starters { display: flex; flex-wrap: wrap; gap: 8px; }
.help-starters .kit-chip { cursor: pointer; }
textarea.kit-input.help-box { width: 100%; flex: none; border-radius: 12px; padding: 10px 14px; min-height: 96px; resize: vertical; }
.help-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.help-left { margin-left: auto; }
.help-form.is-busy [data-help-ask] { opacity: 0.7; }
.help-counts .kit-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.help-rows { list-style: none; margin: 0; padding: 0; }
.help-row { border-bottom: 1px solid var(--color-border); }
.help-row:last-child { border-bottom: 0; }
.help-row.is-current { background: rgba(30, 172, 186, 0.08); }
.help-row-link { display: flex; align-items: center; gap: 12px; min-height: var(--kit-target); padding: 12px 16px; color: var(--color-text); text-decoration: none; }
.help-row-link:focus-visible { outline: 3px solid var(--navy); outline-offset: -3px; }
.help-row-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.help-row-summary { overflow-wrap: anywhere; }
.help-kind { flex: none; }
.help-drawer-slot:empty { display: none; }
.help-drawer-slot { flex: 1 1 340px; max-width: 420px; display: flex; min-width: 0; }
.help-drawer-slot > .kit-drawer { flex: 1 1 auto; max-width: none; }
.help-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 12px 0; }
.help-facts dd { margin: 0; overflow-wrap: anywhere; }
.help-turns.is-small .help-turn { max-width: 100%; padding: 8px 12px; font-size: 15px; }
@media (max-width: 760px) { .help-drawer-slot { flex: 0 0 0; max-width: none; } .help-turn { max-width: 100%; } .help-left { margin-left: 0; } }

/* The email typo check (founder 2026-10-27, Q65a–Q67a; Build → Rollout "Email typo check"). As they type: one quiet
   line under the email box, a 44 px tap target that fixes the box. After Send: the Log in card with two full-width
   buttons. Contacts: the person's drawer and the import's Likely typos list use the kit as they are. */
.email-typo-hint { margin: 4px 0 8px; }
.email-typo-fix { min-height: 44px; font-size: 0.92rem; text-align: left; overflow-wrap: anywhere; }
.typo-check .email { overflow-wrap: anywhere; }
.typo-choice { margin: 0 0 12px; }
.typo-choice button { width: 100%; overflow-wrap: anywhere; }
.contacts-typo { margin: 0 0 12px; }
.contacts-typo .kit-inline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.typos-list td { overflow-wrap: anywhere; }

/* Wellness Programs Part 2 — the runs (founder 2026-10-28, Q74a; app/programs.py). The study pieces (.scale, .tick-row,
   .pairs, .own-words, .support-line) as they are; only the oil pick, the feeling chips and the closing card are new.
   Existing brand variables only. */
.program-oils, .program-chips, .program-helped { border: 0; padding: 0; margin: 18px 0; }
.program-oil { display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 6px 4px; border-bottom: 1px solid var(--color-border); cursor: pointer; }
.program-oil:last-of-type { border-bottom: 0; }
.program-oil input { width: 20px; height: 20px; flex: none; accent-color: var(--navy); }
.program-other { display: block; box-sizing: border-box; width: calc(100% - 36px); max-width: 24rem; margin: 6px 0 0 36px; min-height: 44px; padding: 8px 12px; font: inherit; border: 1px solid var(--color-border); border-radius: 6px; background: #FFFFFF; color: var(--color-text); }
/* Wellness oil locked (Q6a 2026-10-29): the choices that aren't their Day 0 oil, greyed like the kit's disabled controls;
   a Day 0 "Other" pick's words read-only. */
.program-oil.is-greyed { opacity: 0.5; color: var(--color-muted); cursor: not-allowed; }
.program-oil.is-greyed input { cursor: not-allowed; }
.program-other[readonly] { background: var(--color-surface); cursor: default; }
.program-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.program-chips legend { width: 100%; margin-bottom: 6px; }
.program-chip { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 4px 14px; border: 1px solid var(--color-border); border-radius: 999px; background: #FFFFFF; cursor: pointer; }
.program-chip input { width: 18px; height: 18px; accent-color: var(--navy); }
.program-your-oil { margin: 4px 0 0; color: var(--color-muted); }
.program-day-line { margin: 12px 0 20px; font-size: 1.1rem; }
.program-share { margin-top: 20px; }
.program-share-form { margin: 24px 0; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 8px; }
.program-closing-card { margin-top: 32px; padding-top: 8px; border-top: 1px solid var(--color-border); }
.program-other-oils { padding-left: 0; list-style: none; display: grid; gap: 6px; }
.program-blend { margin: 20px 0; padding: 14px 16px; border-radius: 8px; background: var(--color-warm-surface); color: var(--color-warm-text); }
.program-blend h3 { margin: 2px 0 8px; }
.program-stop { margin-top: 28px; }