/* KAHSHE Learn — app styles (brand tokens from kahshe.org) */
:root {
  --app-max: 1120px;
  --nav-w: 248px;
  --topbar-h: 60px;
  --tabbar-h: 66px;
  --scale: 1;
}
html { font-size: calc(100% * var(--scale)); }
body { background: var(--color-bg); }
html[data-font='legible'] { --font-body: 'Atkinson Hyperlegible', 'Work Sans', sans-serif; --font-display: 'Atkinson Hyperlegible', Georgia, serif; }
html[data-easy='on'] body { line-height: 1.85; letter-spacing: 0.01em; word-spacing: 0.06em; }
html[data-easy='on'] .card-body p, html[data-easy='on'] .lesson-card p { max-width: 58ch; }
html[data-motion='reduce'] *, html[data-motion='reduce'] *::before, html[data-motion='reduce'] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-contrast='high'] { --color-text-muted: var(--color-text); --color-border: var(--color-text); --color-divider: var(--color-text-muted); }

.skip-link { position: absolute; left: -999px; top: 8px; background: var(--color-primary); color: var(--color-on-dark); padding: 8px 14px; border-radius: var(--radius-md); z-index: 100; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; border-radius: 4px; }

/* ---------- Top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 40; height: var(--topbar-h); display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); background: color-mix(in oklab, var(--color-bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-divider); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 0; }
.brand img { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.brand-word { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; font-size: 1.05rem; }
.brand-sub { display: block; font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.02em; margin-top: -2px; }
.topbar .spacer { flex: 1; }
.plan-chip { font-size: var(--text-xs); padding: 4px 10px; border-radius: var(--radius-full); background: var(--color-primary-highlight); color: var(--color-primary); font-weight: 600; white-space: nowrap; border: 0; cursor: pointer; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); cursor: pointer; flex: none; }
.icon-btn:hover { background: var(--color-surface-offset); }
.icon-btn svg { width: 20px; height: 20px; }
.help-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: var(--radius-full); border: 0; background: var(--color-error); color: #fff; font-weight: 600; font-size: var(--text-sm); cursor: pointer; white-space: nowrap; }
.help-btn:hover { background: var(--color-error-hover); }
.help-btn svg { width: 18px; height: 18px; }

/* ---------- Shell ---------- */
.shell { display: flex; max-width: calc(var(--app-max) + var(--nav-w)); margin: 0 auto; }
.sidenav { display: none; }
main { flex: 1; min-width: 0; padding: var(--space-6) var(--space-4) calc(var(--tabbar-h) + var(--space-8)); }
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; height: var(--tabbar-h); display: grid; grid-template-columns: repeat(5, 1fr); background: var(--color-surface); border-top: 1px solid var(--color-divider); padding-bottom: env(safe-area-inset-bottom); }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--color-text-muted); font-size: 0.72rem; font-weight: 500; }
.tabbar a svg { width: 22px; height: 22px; }
.tabbar a[aria-current='page'] { color: var(--color-primary); font-weight: 700; }

@media (min-width: 960px) {
  .tabbar { display: none; }
  .sidenav { display: flex; flex-direction: column; gap: 2px; width: var(--nav-w); flex: none; padding: var(--space-6) var(--space-3); position: sticky; top: var(--topbar-h); height: calc(100dvh - var(--topbar-h)); overflow-y: auto; border-right: 1px solid var(--color-divider); }
  .sidenav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-md); text-decoration: none; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 500; }
  .sidenav a svg { width: 18px; height: 18px; flex: none; }
  .sidenav a:hover { background: var(--color-surface-offset); color: var(--color-text); }
  .sidenav a[aria-current='page'] { background: var(--color-primary-highlight); color: var(--color-primary); font-weight: 650; }
  .sidenav .nav-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-faint); padding: 16px 12px 6px; }
  main { padding: var(--space-8) var(--space-8) var(--space-16); }
}

/* ---------- Typography ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; color: var(--color-text); }
.page-title { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.page-lede { color: var(--color-text-muted); max-width: 62ch; margin-bottom: var(--space-6); }
.eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--color-terracotta); margin-bottom: var(--space-2); }
.section-title { font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-3); }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }
.xs { font-size: var(--text-xs); }

/* ---------- Components ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--radius-full); border: 1px solid transparent; font-weight: 600; font-size: var(--text-sm); cursor: pointer; text-decoration: none; transition: background var(--transition-interactive), transform var(--transition-interactive); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-primary); color: var(--color-on-dark); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-gold { background: var(--color-gold); color: #241806; }
.btn-gold:hover { background: var(--color-gold-hover); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--color-border); color: var(--color-text); }
.btn-ghost:hover { background: var(--color-surface-offset); }
.btn-quiet { background: transparent; color: var(--color-primary); padding: 0 8px; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: var(--text-xs); }
.btn svg { width: 18px; height: 18px; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.card { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-xl); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.card + .card { margin-top: var(--space-4); }
.grid { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) and (max-width: 899px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }

.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 650; padding: 3px 9px; border-radius: var(--radius-full); background: var(--color-surface-offset); color: var(--color-text-muted); white-space: nowrap; }
.badge-teal { background: var(--color-primary-highlight); color: var(--color-primary); }
.badge-gold { background: var(--color-gold-highlight); color: var(--color-gold-active); }
.badge-terra { background: var(--color-terracotta-highlight); color: var(--color-terracotta); }
.badge-green { background: var(--color-success-highlight); color: var(--color-success-active); }
[data-theme='dark'] .badge-gold { color: var(--color-gold); }
[data-theme='dark'] .badge-green { color: var(--color-success); }

.notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-gold-highlight); border: 1px solid color-mix(in oklab, var(--color-gold) 30%, transparent); font-size: var(--text-sm); }
.notice svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--color-gold-active); }
[data-theme='dark'] .notice svg { color: var(--color-gold); }
.notice-teal { background: var(--color-primary-highlight); border-color: color-mix(in oklab, var(--color-primary) 30%, transparent); }
.notice-teal svg { color: var(--color-primary); }

.progress { height: 8px; background: var(--color-surface-offset); border-radius: var(--radius-full); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--color-primary); border-radius: inherit; transition: width 400ms var(--ease-signature); }

/* ---------- Hero (home) ---------- */
.hero { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--color-teal-fixed); color: var(--color-on-dark); padding: var(--space-8) var(--space-6); }
.hero h1 { color: var(--color-on-dark); font-size: var(--text-xl); max-width: 22ch; }
.hero p { color: color-mix(in oklab, var(--color-on-dark) 82%, transparent); max-width: 52ch; margin-top: var(--space-3); }
.hero .btn-row { margin-top: var(--space-5); }
.hero .knot { position: absolute; right: -60px; bottom: -60px; width: 260px; height: 260px; opacity: 0.16; pointer-events: none; }
.hero .btn-ghost { color: var(--color-on-dark); border-color: color-mix(in oklab, var(--color-on-dark) 40%, transparent); }
.hero .btn-ghost:hover { background: color-mix(in oklab, var(--color-on-dark) 12%, transparent); }

.stat { display: flex; flex-direction: column; gap: 2px; }
.stat b { font-family: var(--font-display); font-size: var(--text-lg); }
.stat span { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---------- Track + module lists ---------- */
.track-card { display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; color: inherit; border-top: 4px solid var(--accent, var(--color-primary)); transition: transform var(--transition-interactive), box-shadow var(--transition-interactive); }
.track-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.track-card h3 { font-size: 1.15rem; }
.track-card .meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; }
.acc-primary { --accent: var(--color-primary); }
.acc-gold { --accent: var(--color-gold); }
.acc-terracotta { --accent: var(--color-terracotta); }
.acc-success { --accent: var(--color-success); }

.module-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-divider); text-decoration: none; color: inherit; }
.module-row + .module-row { margin-top: var(--space-3); }
.module-row:hover { border-color: var(--color-border); background: var(--color-surface-2); }
.module-num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; background: var(--color-surface-offset); color: var(--color-text-muted); font-size: var(--text-sm); }
.module-row.done .module-num { background: var(--color-success); color: #fff; }
.module-row.locked { opacity: 0.78; }
.module-row .grow { flex: 1; min-width: 0; }
.module-row h3 { font-family: var(--font-body); font-size: var(--text-base); font-weight: 650; }
.module-row .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* ---------- Lesson ---------- */
.lesson-head { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.lesson-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.stepper { display: flex; gap: 6px; margin-bottom: var(--space-4); }
.stepper span { flex: 1; height: 5px; border-radius: 3px; background: var(--color-surface-offset); }
.stepper span.on { background: var(--color-primary); }
.lesson-card { min-height: 200px; }
.lesson-card h2 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.lesson-card p { max-width: 66ch; }
.lesson-nav { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }
.content-note { border-left: 4px solid var(--color-gold); }

textarea, input[type='text'], input[type='number'], input[type='email'], input[type='date'], select { width: 100%; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text); }
textarea { min-height: 88px; resize: vertical; }
label.field { display: block; font-weight: 600; font-size: var(--text-sm); margin: var(--space-4) 0 6px; }
.help { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 4px; }

.quiz-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); cursor: pointer; margin-top: 8px; }
.quiz-opt:hover { background: var(--color-surface-offset); }
.quiz-opt.right { border-color: var(--color-success); background: var(--color-success-highlight); }
.quiz-opt.wrong { border-color: var(--color-error); background: var(--color-error-highlight); }

/* Scales */
.scale { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.scale button { min-height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface-2); font-weight: 600; font-size: var(--text-sm); cursor: pointer; padding: 0; }
.scale button[aria-pressed='true'] { background: var(--color-primary); color: var(--color-on-dark); border-color: var(--color-primary); }
.scale-labels { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 4px; }
.likert { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.likert button { min-height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface-2); font-size: 0.72rem; line-height: 1.2; cursor: pointer; padding: 4px; }
.likert button[aria-pressed='true'] { background: var(--color-primary); color: var(--color-on-dark); border-color: var(--color-primary); }
.q-block { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-divider); }
.q-block:last-child { border-bottom: 0; }
.q-text { font-weight: 550; }
.skip-link-inline { font-size: var(--text-xs); color: var(--color-text-muted); background: none; border: 0; text-decoration: underline; cursor: pointer; margin-top: 6px; }

/* Toggles */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); }
.switch-row:last-child { border-bottom: 0; }
.switch { position: relative; width: 48px; height: 28px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--color-surface-dynamic); transition: background 180ms; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform 180ms var(--ease-signature); }
.switch input:checked + span { background: var(--color-primary); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 3px solid var(--color-gold); outline-offset: 2px; }
.seg { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-full); overflow: hidden; }
.seg button { border: 0; background: transparent; padding: 6px 12px; font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.seg button[aria-pressed='true'] { background: var(--color-primary); color: var(--color-on-dark); }

/* Dialog */
dialog { border: 0; border-radius: var(--radius-xl); padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-lg); }
dialog::backdrop { background: rgb(20 14 6 / 0.55); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: var(--space-5) var(--space-5) var(--space-3); }
.dlg-head h2 { font-size: var(--text-lg); }
.dlg-body { padding: 0 var(--space-5) var(--space-5); overflow-y: auto; }
.help-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-divider); }
.help-line b { display: block; }
.help-line a { font-weight: 700; color: var(--color-primary); white-space: nowrap; text-decoration: none; }

/* Pricing */
.plan { display: flex; flex-direction: column; gap: var(--space-3); }
.plan .price { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; }
.plan .price small { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 500; }
.plan ul { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: var(--text-sm); }
.plan li { display: flex; gap: 8px; }
.plan li::before { content: ''; width: 16px; height: 16px; flex: none; margin-top: 3px; border-radius: 50%; background: var(--color-success-highlight) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7a41' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/10px no-repeat; }
.plan.current { outline: 2px solid var(--color-primary); }
.plan .btn { margin-top: auto; }

/* Books */
.book { display: flex; gap: var(--space-4); align-items: flex-start; }
.book img { width: 96px; border-radius: 4px; box-shadow: var(--shadow-md); flex: none; }

/* Peer */
.peer-item { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-divider); }
.peer-item + .peer-item { margin-top: var(--space-3); }

/* Tables (admin) */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--color-divider); vertical-align: top; }
th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.chart-box { position: relative; height: 260px; }

/* Tools */
.tool-grid { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .tool-grid { grid-template-columns: repeat(2, 1fr); } }
.result { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-primary-highlight); }
.result b { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-primary); }
.canvas-grid { display: grid; gap: var(--space-3); }
@media (min-width: 720px) { .canvas-grid { grid-template-columns: repeat(3, 1fr); } }
.cf-table input { min-width: 80px; padding: 6px 8px; }

/* Grounding */
.breath { width: 160px; height: 160px; margin: var(--space-4) auto; border-radius: 50%; background: radial-gradient(circle, var(--color-primary-highlight), var(--color-primary)); display: grid; place-items: center; color: var(--color-on-dark); font-weight: 700; transform: scale(0.7); }
.breath.run { animation: breathe 10s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(0.7); } 40% { transform: scale(1); } 50% { transform: scale(1); } }

.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 16px); transform: translateX(-50%) translateY(20px); background: var(--color-text); color: var(--color-bg); padding: 10px 18px; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 200ms, transform 200ms; z-index: 80; max-width: calc(100vw - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (min-width: 960px) { .toast { bottom: 24px; } }

.empty { text-align: center; padding: var(--space-8) var(--space-4); color: var(--color-text-muted); }
.divider { height: 1px; background: var(--color-divider); margin: var(--space-5) 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { border: 1px solid var(--color-border); background: var(--color-surface-2); padding: 10px 14px; border-radius: var(--radius-lg); cursor: pointer; text-align: left; font-size: var(--text-sm); }
.chip-btn[aria-pressed='true'] { border-color: var(--color-primary); background: var(--color-primary-highlight); color: var(--color-primary); font-weight: 650; }
.chip-btn small { display: block; font-weight: 400; color: var(--color-text-muted); }
.footer-note { margin-top: var(--space-12); padding-top: var(--space-5); border-top: 1px solid var(--color-divider); font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width: 520px) {
  .plan-chip { display: none; }
  .topbar { gap: 8px; padding: 0 12px; }
  .help-btn { padding: 0 12px; }
  .scale { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .likert button { font-size: 0.66rem; }
}
main a:not(.btn):not(.card):not([class*="card"]) { color: var(--color-primary); text-underline-offset: 3px; }
.foot a, .notice a { color: var(--color-primary); }
.grid-plans { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid > * { min-width: 0; }
.card.plan { display: flex; flex-direction: column; }
.card.plan ul { flex: 1; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 600; }
[data-theme='dark'] .help-btn { color: #1c1410; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .help-btn { color: #1c1410; } }
#dlg { margin: auto; inset: 0; max-height: calc(100dvh - 32px); }
@media (max-width: 520px) { #dlg { width: calc(100vw - 24px); max-width: none; } }
.grid > .card + .card, .grid > * + .card { margin-top: 0; }
#main:focus, #main:focus-visible { outline: none; }

/* ---------- Groups, live sessions, progress (v2) ---------- */
.stat-link { text-decoration: none; color: inherit; }
.stat-link:hover { border-color: var(--color-border); box-shadow: var(--shadow-md); }
.group-card { border-left: 4px solid var(--color-primary); }
.group-card.is-live { border-left-color: var(--color-gold); background: color-mix(in oklab, var(--color-gold-highlight) 55%, var(--color-surface)); }
.group-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.group-head h3 { font-size: 1.1rem; margin-top: 4px; }
.live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 700; color: var(--color-error); white-space: nowrap; }
.live-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.checkin-card { border: 2px solid var(--color-gold); }
.agenda { list-style: none; display: flex; flex-direction: column; gap: 8px; padding: 0; }
.agenda li { display: flex; gap: var(--space-3); align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-lg); border: 1px solid var(--color-divider); background: var(--color-surface); }
.agenda li > div { flex: 1; min-width: 0; }
.agenda li.now { border-color: var(--color-primary); background: var(--color-primary-highlight); box-shadow: inset 4px 0 0 var(--color-primary); }
.agenda li.past { opacity: 0.6; }
.agenda li.past b { text-decoration: line-through; text-decoration-color: var(--color-text-faint); }
.agenda-min { flex: none; width: 58px; font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); font-variant-numeric: tabular-nums; padding-top: 2px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-divider); margin: var(--space-3) 0 var(--space-5); overflow-x: auto; }
.tabs a { padding: 10px 14px; text-decoration: none; color: var(--color-text-muted); font-weight: 600; font-size: var(--text-sm); border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a[aria-selected='true'] { color: var(--color-primary); border-bottom-color: var(--color-primary); }
main .tabs a[role='tab']:not([aria-selected='true']) { color: var(--color-text-muted); }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: var(--space-3); }
.code-pill { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-weight: 700; letter-spacing: 0.08em; padding: 6px 12px; border-radius: var(--radius-md); background: var(--color-teal-fixed); color: var(--color-on-dark); white-space: nowrap; }
.fac-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; margin: var(--space-3) 0 var(--space-4); }
.seg-lg button { padding: 10px 16px; font-size: var(--text-sm); }
@media (max-width: 520px) { .seg-lg { display: flex; width: 100%; } .seg-lg button { flex: 1; padding: 10px 6px; font-size: var(--text-xs); } }
@media (min-width: 1100px) { .fac-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } }
.fac-grid > div > .card + .card { margin-top: var(--space-4); }
.timer-box { display: flex; flex-direction: column; align-items: flex-end; }
.timer-box b { font-family: var(--font-display); font-size: var(--text-xl); font-variant-numeric: tabular-nums; color: var(--color-primary); line-height: 1.1; }
.timer-box b.over { color: var(--color-error); }
.bars { display: grid; grid-template-columns: repeat(11, 1fr); gap: 3px; align-items: end; height: 72px; margin-top: 4px; }
.bars span { position: relative; height: 100%; display: flex; align-items: flex-end; }
.bars span::before { content: ''; display: block; width: 100%; height: max(2px, var(--h)); background: var(--color-primary); border-radius: 3px 3px 0 0; }
.bars span i { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 0.65rem; color: var(--color-text-muted); }
.bars { margin-bottom: 20px; }
.pulse-stats .stat b { font-size: var(--text-base); }
.join-screen { text-align: center; }
.join-code { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: clamp(2.4rem, 9vw, 4rem); font-weight: 800; letter-spacing: 0.12em; color: var(--color-primary); margin: var(--space-4) 0; padding: var(--space-4); border: 2px dashed var(--color-primary); border-radius: var(--radius-xl); }
.cert-preview { margin-top: var(--space-4); padding: var(--space-5); border: 6px solid var(--color-primary); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; background: var(--color-surface-2); }
.cert-preview b { font-family: var(--font-display); font-size: var(--text-lg); }
.cert-preview #certPrevName { font-family: var(--font-display); font-size: 1.2rem; border-bottom: 1px solid var(--color-gold); padding: 0 24px 4px; }
.track-prog { border-top: 4px solid var(--accent, var(--color-primary)); }
td.up { color: var(--color-success); font-weight: 700; }
td.down { color: var(--color-terracotta); font-weight: 700; }

/* ---------- Print ---------- */
@media print {
  .topbar, .sidenav, .tabbar, .toast, .skip-link, .lesson-tools, .lesson-nav, .btn, .btn-row, .footer-note, dialog { display: none !important; }
  body, main, .card { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  main { padding: 0 !important; }
  .shell { display: block; max-width: none; }
  .card { border: 1px solid #999 !important; break-inside: avoid; }
  .hero { background: #fff !important; color: #000 !important; border: 1px solid #999; }
  .hero h1, .hero p { color: #000 !important; }
  a { color: #000 !important; text-decoration: none; }
}
#groupBox:empty { display: none; }
.pulse-stats { grid-template-columns: repeat(3, 1fr) !important; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 1099px) { .fac-col { display: contents; } .fac-grid .card { margin-top: 0 !important; } .fo-1 { order: 1; } .fo-2 { order: 2; } .fo-3 { order: 3; } .fo-4 { order: 4; } }

.join-split { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: var(--space-5); align-items: center; text-align: left; }
.qr-box { background: #fff; padding: 8px; border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.qr-box svg { display: block; width: 100%; height: auto; }
@media (max-width: 560px) { .join-split { grid-template-columns: 1fr; text-align: center; } .qr-box { max-width: 240px; margin: 0 auto; } }
dialog:has(.join-screen) { width: min(860px, calc(100vw - 24px)); }
.join-split .join-code { white-space: nowrap; font-size: clamp(1.8rem, 5vw, 3.4rem); letter-spacing: 0.08em; padding: var(--space-3); }
@media (min-width: 561px) { .join-split { grid-template-columns: minmax(220px, 340px) 1fr; } }

/* ---------------- Slide presenter ---------------- */
body.presenting .topbar, body.presenting .sidenav, body.presenting .tabbar, body.presenting #toastWrap { display: none; }
body.presenting { overflow: hidden; }
.presenter { position: fixed; inset: 0; z-index: 60; background: #14100a; color: #f1e6d2; display: flex; flex-direction: column; }
.pres-stage-wrap { flex: 1; min-height: 0; container-type: size; display: grid; place-items: center; padding: 12px; }
.pres-stage { width: min(100cqw, 100cqh * 16 / 9); aspect-ratio: 16 / 9; container-type: inline-size; border-radius: 6px; overflow: hidden; box-shadow: 0 10px 40px rgb(0 0 0 / .45); cursor: pointer; user-select: none; }
.pres-focus .pres-bar, .pres-focus .pres-notes, .pres-focus .pres-progress { display: none !important; }
.pres-focus .pres-stage-wrap { padding: 0; }
.pres-focus .pres-stage { border-radius: 0; box-shadow: none; }
.pres-notes { max-height: 24vh; overflow-y: auto; padding: 10px 20px; background: #221a10; border-top: 1px solid #3a2e1e; color: #f1e6d2; }
.pres-notes .muted { color: #c9b89a; }
.pres-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; background: #1b150d; flex-wrap: wrap; }
.pres-bar .btn-quiet, .pres-bar .btn-ghost { color: #f1e6d2; border-color: #5a4a33; }
.pres-bar .btn-quiet:hover, .pres-bar .btn-ghost:hover { background: #2d2416; }
.pres-nav { display: flex; align-items: center; gap: 10px; }
.pres-nav span { min-width: 4.5em; text-align: center; font-variant-numeric: tabular-nums; }
.pres-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pres-sync { display: inline-flex; gap: 6px; align-items: center; color: #f1e6d2; }
.pres-progress { height: 3px; background: #2d2416; } .pres-progress span { display: block; height: 100%; background: #bd8322; transition: width .2s; }
@media (max-width: 640px) { .pres-tools .pres-sync { order: 3; width: 100%; } .pres-bar { padding: 6px 8px; } }
.presenter:fullscreen .pres-bar { opacity: .25; transition: opacity .2s; } .presenter:fullscreen .pres-bar:hover { opacity: 1; }

.sl { position: relative; width: 100%; height: 100%; background: #faf3e3; color: #2a2013; padding: 5.2cqw 6cqw; display: flex; flex-direction: column; gap: 1.6cqw; font-family: var(--font-body); font-size: 1.85cqw; line-height: 1.35; }
.sl-dark { background: #1f3f3a; color: #fbf4e6; }
.sl-eyebrow { font-size: 1.25cqw; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #935226; margin: 0; }
.sl-dark .sl-eyebrow { color: #e9c27a; }
.sl-h { font-family: var(--font-display); font-size: 3.8cqw; line-height: 1.1; margin: 0; font-weight: 700; text-wrap: balance; }
.sl-title .sl-h { font-size: 5.6cqw; margin-top: auto; }
.sl-sub { font-size: 2.1cqw; margin: 0; color: #5a4a33; max-width: 80%; } .sl-dark .sl-sub { color: #e7dcc6; }
.sl-meta { margin: 1cqw 0 auto; font-size: 1.5cqw; color: #e9c27a; }
.sl-brand { position: absolute; right: 6cqw; bottom: 4.4cqw; font-family: var(--font-display); font-size: 1.7cqw; letter-spacing: .14em; font-weight: 700; color: #e9c27a; }
.sl-brand sup { font-size: .55em; }
.sl-foot { margin: auto 0 0; font-size: 1.5cqw; color: #6b5a40; } .sl-dark .sl-foot { color: #e7dcc6; }
.sl-list, .sl-num { margin: 0; padding-left: 2.4cqw; display: flex; flex-direction: column; gap: 1cqw; }
.sl-num li::marker { color: #2c5d56; font-weight: 700; }
.sl-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: .9cqw; }
.sl-agenda li { display: grid; grid-template-columns: 7cqw 1fr; gap: 1.6cqw; align-items: baseline; padding: .9cqw 1.4cqw; background: #fffcf5; border: 1px solid #e3d5b8; border-radius: 1cqw; }
.sl-agenda span { color: #2c5d56; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.6cqw; }
.sl-agenda b { font-weight: 600; }
.sl-cards { display: grid; gap: 1.4cqw; } .sl-cards.c2 { grid-template-columns: 1fr 1fr; } .sl-cards.c3 { grid-template-columns: repeat(3, 1fr); } .sl-cards.c4 { grid-template-columns: repeat(4, 1fr); }
.sl-card { background: #fffcf5; border: 1px solid #e3d5b8; border-radius: 1.2cqw; padding: 1.6cqw 1.8cqw; display: flex; flex-direction: column; gap: .5cqw; }
.sl-card b { font-size: 2cqw; color: #2c5d56; } .sl-card span { color: #5a4a33; font-size: 1.6cqw; }
.sl-card.alt { background: #efe3c8; } .sl-card .sl-list { margin-top: .6cqw; gap: .6cqw; }
.sl-dark .sl-card { background: #2c5d56; border-color: #3d6f67; } .sl-dark .sl-card b { color: #fbf4e6; font-size: 1.7cqw; } .sl-dark .sl-card span { color: #e7dcc6; font-size: 1.35cqw; }
.sl-stem b { font-family: var(--font-display); font-size: 2.5cqw; color: #2a2013; font-weight: 600; }
.sl-cards.tight .sl-card { padding: 1.2cqw 1.6cqw; }
.sl-chips { display: flex; flex-wrap: wrap; gap: 1cqw; } .sl-chips span { padding: .6cqw 1.6cqw; border-radius: 99px; background: #d3e2dd; color: #1f3f3a; font-weight: 600; }
.sl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2cqw; }
.sl-steps li { display: flex; gap: 1.6cqw; align-items: center; }
.sl-steps span { flex: none; width: 4cqw; height: 4cqw; border-radius: 50%; background: #2c5d56; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.8cqw; }
.sl-steps b { font-weight: 500; font-size: 2.2cqw; }
.sl-table { width: 100%; border-collapse: collapse; font-size: 1.6cqw; background: #fffcf5; }
.sl-table th, .sl-table td { border: 1px solid #d9c9a8; padding: .8cqw 1.2cqw; text-align: left; }
.sl-table thead th { background: #2c5d56; color: #fff; } .sl-table tbody th { width: 24%; color: #2c5d56; } .sl-table td { height: 3.2cqw; }
.sl-case { background: #1f3f3a; color: #fbf4e6; border-radius: 1.2cqw; padding: 2cqw 2.4cqw; } .sl-case p { margin: 0; font-size: 2.2cqw; font-family: var(--font-display); line-height: 1.3; }
.sl-checkin { flex-direction: row; align-items: center; gap: 4cqw; } .sl-checkin > div:first-child { flex: 1; display: flex; flex-direction: column; gap: 1.6cqw; height: 100%; justify-content: center; }
.sl-checkin .sl-foot { margin-top: 1cqw; }
.sl-scale { display: grid; grid-template-columns: repeat(11, 1fr); gap: .6cqw; margin-top: 1cqw; } .sl-scale span { aspect-ratio: 1; display: grid; place-items: center; border-radius: .8cqw; background: #2c5d56; font-weight: 700; font-size: 1.8cqw; }
.sl-qr { flex: none; width: 26cqw; display: flex; flex-direction: column; align-items: center; gap: .8cqw; } .sl-qr .qr-box { width: 100%; padding: 1cqw; border: 0; }
.sl-qr b { font-family: ui-monospace, Menlo, monospace; font-size: 3.2cqw; letter-spacing: .1em; color: #e9c27a; } .sl-qr span { font-size: 1.4cqw; color: #e7dcc6; }
.sl-close .sl-h { font-size: 4.6cqw; } .sl-close .sl-cards { margin-top: auto; margin-bottom: 3cqw; }
.deck-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.deck-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); flex-wrap: wrap; }
.deck-row > div:first-child { display: flex; flex-direction: column; }
.presenting .toast { z-index: 80; }
/* presenter sizing pass */
.sl { font-size: 2.35cqw; gap: 2cqw; padding: 5cqw 6cqw; }
.sl .sl-h { color: #2a2013; font-size: 4.4cqw; } .sl-dark .sl-h { color: #fbf4e6; }
.sl-title .sl-h { font-size: 6.2cqw; } .sl-close .sl-h { font-size: 5cqw; }
.sl-eyebrow { font-size: 1.45cqw; } .sl-sub { font-size: 2.4cqw; } .sl-meta { font-size: 1.8cqw; } .sl-foot { font-size: 1.8cqw; }
.sl-list, .sl-num { gap: 1.3cqw; padding-left: 3cqw; }
.sl-agenda { gap: 1.1cqw; } .sl-agenda li { grid-template-columns: 9cqw 1fr; padding: 1.1cqw 1.8cqw; } .sl-agenda span { font-size: 2cqw; }
.sl-card { padding: 2cqw 2.2cqw; gap: .8cqw; } .sl-card b { font-size: 2.5cqw; } .sl-card span { font-size: 1.95cqw; }
.sl-card .sl-list { font-size: 2.2cqw; }
.sl-stem b { font-size: 3.1cqw; }
.sl-steps { gap: 1.8cqw; } .sl-steps span { width: 5cqw; height: 5cqw; font-size: 2.3cqw; } .sl-steps b { font-size: 2.8cqw; }
.sl-chips span { font-size: 2.1cqw; padding: .8cqw 2cqw; }
.sl-table { font-size: 2cqw; } .sl-table td { height: 4.6cqw; }
.sl-case p { font-size: 2.7cqw; } .sl-cards.tight .sl-card b { font-size: 2.3cqw; }
.sl-scale span { font-size: 2.3cqw; }
.sl-dark .sl-card b { font-size: 2cqw; } .sl-dark .sl-card span { font-size: 1.6cqw; }
.sl-cards.c4 .sl-card { padding: 1.6cqw 1.6cqw; } .sl-cards.c4:not(.sl-dark *) .sl-card b { font-size: 2.2cqw; }
.sl-num li { padding-left: .4cqw; }
.sl-agenda { gap: .8cqw; } .sl-agenda li { padding: .75cqw 1.8cqw; }
.sl-table th { font-size: inherit; text-transform: none; letter-spacing: 0; font-weight: 700; }
.sl-close .sl-wb { margin: 2cqw 0 0; font-size: 1.9cqw; color: #e7dcc6; max-width: 85%; }
.sl-table { font-size: 1.85cqw; } .sl-table th, .sl-table td { padding: .55cqw 1.2cqw; } .sl-table td { height: 3.7cqw; }
.presenting .toast { top: 16px; bottom: auto; }

.pay-opts { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.pay-opt { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md, 10px); cursor: pointer; }
.pay-opt:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-highlight, rgb(0 0 0 / .03)); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }