/* Guided Meditation Challenge (challenge.py): landing, sign-up and the library dashboard. Classes only, no inline style (strict CSP). */
.ch-tiers { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 12px 0; }
.ch-tiers li { flex: 1 1 140px; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; background: var(--surface); }
.ch-tiers strong { display: block; font-size: 1.6rem; line-height: 1.1; }
.ch-editions { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 12px 0; }
.ch-editions .card { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ch-editions .btn { align-self: flex-start; margin-top: auto; }
.ch-total { font-size: 1.4rem; font-weight: 600; margin: 8px 0; }
.ch-rules li { margin: 4px 0; }
.ch-choice { display: flex; flex-wrap: wrap; gap: 12px; border: 0; padding: 0; margin: 0; }
.ch-choice label { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px; min-height: 44px; }
.ch-opt { display: flex; align-items: flex-start; gap: 8px; }
.ch-dash { border-left: 4px solid var(--accent-fill); }
.ch-stats { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; padding: 0; margin: 8px 0; }
.ch-stats strong { font-size: 1.4rem; display: block; line-height: 1.1; }
.ch-today progress { width: 100%; max-width: 420px; height: 14px; }
.ch-cal { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; list-style: none; padding: 0; margin: 8px 0; max-width: 560px; }
@media (max-width: 520px) { .ch-cal { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ch-d { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: .75rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--muted); }
.ch-s-counted { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); font-weight: 600; }
.ch-s-rest { border-style: dashed; color: var(--text); }
.ch-s-missed { color: var(--muted); border-style: solid; text-decoration: line-through; }      /* full-strength text, not faded (contrast 4.5:1) */
.ch-s-today { outline: 3px solid var(--focus); outline-offset: 1px; color: var(--text); }
.ch-s-before { color: var(--muted); border-style: dotted; }
.ch-s-future { color: var(--muted); }
.ch-l1, .ch-l2, .ch-l3 { border-color: var(--accent-fill); color: var(--text); }
.ch-l2 { border-width: 2px; } .ch-l3 { border-width: 3px; }
.ch-key { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; padding: 0; margin: 4px 0; font-size: .85rem; color: var(--muted); }
.ch-hours { display: flex; align-items: flex-end; gap: 2px; height: 72px; list-style: none; padding: 0; margin: 8px 0 0; max-width: 560px; }
.ch-h { flex: 1; background: var(--accent-fill); min-height: 2px; border-radius: 2px 2px 0 0; opacity: .85; }
.ch-hb0 { height: 2px; opacity: .25; } .ch-hb1 { height: 10%; } .ch-hb2 { height: 20%; } .ch-hb3 { height: 30%; } .ch-hb4 { height: 40%; }
.ch-hb5 { height: 50%; } .ch-hb6 { height: 60%; } .ch-hb7 { height: 70%; } .ch-hb8 { height: 80%; } .ch-hb9 { height: 90%; } .ch-hb10 { height: 100%; }
.ch-axis { display: flex; justify-content: space-between; max-width: 560px; font-size: .75rem; color: var(--muted); }
.ch-badge { display: inline-block; border: 1px solid var(--accent-fill); border-radius: 999px; padding: 2px 12px; font-weight: 600; }
.ch-settings summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }

.ch-stock-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 10px; }
.ch-stock-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 44px; }
.ch-speakers { border-color: var(--accent-fill); }

.ch-notice { margin: 12px 0; }
.ch-danger { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; }

/* ---- the landing page (challenge.html): hero, sections, FAQ. The hero is always a dark night picture, in both themes, so its colours are fixed. ---- */
.ch-hero { position: relative; display: block; margin: 0 0 var(--space-6, 32px); border-radius: var(--radius-lg, 20px); overflow: hidden; background: #0c1424; color: #f4f1ea; }
.ch-hero picture { display: block; }
.ch-hero-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 68%; }   /* short on a phone: the Join button stays in the first screen */
.ch-hero-body { padding: 16px 20px 24px; display: flex; flex-direction: column; }
.ch-hero-body > * { order: 1; }
.ch-hero-body .ch-cta { order: 2; }
.ch-hero-body .ch-fine, .ch-hero-body .ch-sub { order: 3; }
.ch-hero h1 { margin: 0 0 6px; color: #f4f1ea; font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.6rem); line-height: 1.1; text-wrap: balance; }
.ch-hero p { color: #dfe3ec; max-width: 34em; }
.ch-eyebrow { margin: 0 0 6px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: var(--text-xs); color: #f5d2a8 !important; }
.ch-lead { font-size: var(--text-md); font-weight: 600; color: #f4f1ea !important; margin: 4px 0 8px; }
.ch-dates { font-size: var(--text-sm); }
.ch-fine { font-size: var(--text-sm); color: #cbd1dc !important; }
.ch-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 16px 0 8px; }
.ch-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: var(--radius-pill, 999px); background: #e7b994; color: #0f1420; font-weight: 700; text-decoration: none; border: 2px solid #e7b994; }
.ch-btn:hover { background: #f5d2a8; border-color: #f5d2a8; }
.ch-btn:focus-visible, .ch-link:focus-visible { outline: 3px solid #8fb4ff; outline-offset: 3px; }
.ch-link { color: #f4f1ea; text-decoration: underline; text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 700px) {
  .ch-hero { display: grid; }
  .ch-hero picture, .ch-hero-body { grid-area: 1 / 1; }
  .ch-hero-img { height: 100%; min-height: 520px; aspect-ratio: 12 / 5; object-position: 50% 50%; }
  .ch-hero-body { align-self: center; max-width: 560px; padding: 36px 40px; background: linear-gradient(90deg, rgba(7, 10, 20, .78) 0%, rgba(7, 10, 20, .55) 70%, rgba(7, 10, 20, 0) 100%); border-radius: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; }
  .ch-hero-body { max-width: 640px; }
}
.ch-sec, .ch-final { margin: var(--space-6, 40px) 0; }
.ch-sec h2, .ch-final h2 { margin-top: 0; }
.ch-big { font-size: var(--text-md); max-width: 38em; }
.ch-split { display: grid; gap: 24px; align-items: center; }
@media (min-width: 860px) { .ch-split { grid-template-columns: 1fr 1fr; gap: 40px; } .ch-flip .ch-fig { order: 2; } }
.ch-fig { margin: 0; }
.ch-pic { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--radius-card, 14px); background: #0c1424; object-fit: cover; }
.ch-steps { list-style: none; counter-reset: ch; padding: 0; margin: 12px 0; display: grid; gap: 14px; }
.ch-steps li { counter-increment: ch; position: relative; padding-left: 52px; min-height: 40px; }
.ch-steps li::before { content: counter(ch); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.ch-steps h3 { margin: 0 0 2px; font-size: var(--text-md); }
.ch-steps p { margin: 0; }
.ch-teams { margin-top: 16px; }
.ch-faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.ch-faq summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.ch-faq summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ch-faq details p { margin: 4px 0 14px; max-width: 42em; }
.ch-final { text-align: center; padding: 32px 20px; border-radius: var(--radius-lg, 20px); background: #0c1424; color: #f4f1ea; }
.ch-final h2 { color: #f4f1ea; }
.ch-final p { color: #dfe3ec; }
.ch-final .ch-cta { justify-content: center; }
.ch-disclosure { max-width: 44em; }
.ch-main { font-weight: 600; }

/* ---- navigation, banner, account block, next steps, team line ---- */
.ch-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; padding: 8px 14px; border: 1px solid var(--line); border-left: 4px solid var(--accent-fill); border-radius: var(--radius); background: var(--surface); }
.ch-banner[hidden] { display: none; }
.ch-banner a { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.ch-banner-x { min-width: 44px; min-height: 44px; }
.ch-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ch-next { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 16px; margin: 12px 0; background: var(--surface); }
.ch-next h3 { margin: 4px 0; }
.ch-next-list { padding-left: 20px; margin: 4px 0 8px; }
.ch-next-list li { min-height: 32px; }
.ch-teamline { margin: 8px 0; }
.ch-acct .btn { margin: 2px 4px 2px 0; }
.ch-share { margin: 12px 0; }
.ch-share-card { display: block; width: 100%; max-width: 480px; height: auto; aspect-ratio: 1200 / 630; border-radius: var(--radius-card, 14px); }
.ch-share .btn { margin: 2px 4px 2px 0; }