/* =============================================================================
   styleCbtiIndex.css -- the CBT-I index at /sleep-cbti/ (9 Oct 2026, Chris)
   Markup: sleep_platform/cbti/cbti_index.php. Behaviour: js/cbtiIndex.js.
   Also the small "<- CBT-I" link on the week pages / Module 0 / wait page (.cbx-back).
   Day look first, then Sleep look (#bsm-app-root[data-theme="sleep"]): black background,
   white text, white borders, white fills -- the same three colours as styleSleepMode.css.
   --bsm3-* variables only. Everything is scoped to #cbx-index / .cbx-back.
   ============================================================================= */

/* LAYER (Chris rule): everything below sits in @layer bsm-sleep-mode -- the first layer in style_bsm.css's
   order -- with !important, the only way to beat the Sleep pages' broad !important rules
   ("every span white", "every h1 black") in styleSleepDay.css / styleSleepMode.css. */
@layer bsm-sleep-mode {

/* Reset: the Sleep Day/Sleep styles give every plain span/div/b/summary a white background, black text,
   capitals and wide letter-spacing (!important). Inside the index, plain elements start clean. */
#bsm-app-root #cbx-index :is(div, span, b, small, p, i, ul, li, summary, details, h1, h2, h3, section, a, button, label, form, svg) { background-color: transparent !important; background-image: none !important; color: inherit !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; border-color: transparent; }

#bsm-app-root #cbx-index { max-width: 900px !important; margin: 0 auto !important; padding: 0 0 var(--bsm3-space-xxl) !important; font-family: var(--bsm3-font-body) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
#bsm-app-root #cbx-index *,
#bsm-app-root #cbx-index *::before,
#bsm-app-root #cbx-index *::after { box-sizing: border-box !important; }
#bsm-app-root #cbx-index p { margin: 0 !important; }
#bsm-app-root .cbx-notice { margin: 0 0 var(--bsm3-space-md) !important; padding: var(--bsm3-space-sm) var(--bsm3-space-md) !important; border-left: var(--bsm3-border-thick) solid var(--bsm3-color-status-high-orange-F2994A-use-on-status-high) !important; border-radius: var(--bsm3-radius-status-cards) !important; background: var(--bsm3-color-caution-cream-FEF3C7-use-on-status-warning-background) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
#bsm-app-root #cbx-index .cbx-hero { position: relative !important; overflow: hidden !important; margin: 0 0 var(--bsm3-space-lg) !important; padding: var(--bsm3-space-xl) !important; border-radius: var(--bsm3-radius-primary-cards) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; background:
    radial-gradient(1.5px 1.5px at 12% 22%, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(1px 1px at 28% 68%, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(1.5px 1.5px at 47% 14%, var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(1px 1px at 63% 40%, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(1.5px 1.5px at 82% 18%, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(1px 1px at 91% 58%, var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(1px 1px at 72% 84%, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(120% 90% at 85% 0%, var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) 0%, var(--bsm3-transparent) 60%),
    linear-gradient(160deg, var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) 0%, var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) 130%) !important; }
#bsm-app-root #cbx-index .cbx-hero-top { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: var(--bsm3-space-lg) !important; }
#bsm-app-root #cbx-index .cbx-kicker { margin: 0 0 var(--bsm3-space-xs) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; letter-spacing: 1px !important; color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; }
#bsm-app-root #cbx-index .cbx-title { margin: 0 0 var(--bsm3-space-xs) !important; font-family: var(--bsm3-font-heading) !important; font-size: var(--bsm3-size-page-title-24px-use-on-h1) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; line-height: 1.25 !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
#bsm-app-root #cbx-index .cbx-sub { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; color: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; }
#bsm-app-root #cbx-index .cbx-ring { position: relative !important; flex: 0 0 auto !important; width: 92px !important; height: 92px !important; }
#bsm-app-root #cbx-index .cbx-ring-svg { display: block !important; width: 100% !important; height: 100% !important; transform: rotate(-90deg) !important; }
#bsm-app-root #cbx-index .cbx-ring-track { fill: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; stroke: color-mix(in srgb, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 15%, var(--bsm3-transparent)) !important; stroke-width: 9 !important; }
#bsm-app-root #cbx-index .cbx-ring-fill { fill: none !important; stroke: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; stroke-width: 9 !important; stroke-linecap: round !important; }
#bsm-app-root #cbx-index .cbx-ring-txt { position: absolute !important; inset: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; }
#bsm-app-root #cbx-index .cbx-ring-txt b { font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3) !important; }
#bsm-app-root #cbx-index .cbx-ring-txt small { font-size: var(--bsm3-text-tiny-10px-use-on-text) !important; color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; }
#bsm-app-root #cbx-index .cbx-moons { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 6px !important; margin: var(--bsm3-space-xl) 0 var(--bsm3-space-lg) !important; }
#bsm-app-root #cbx-index .cbx-moon { display: flex !important; flex-direction: column !important; align-items: center !important; gap: var(--bsm3-space-xs) !important; }
#bsm-app-root #cbx-index .cbx-moon-svg { display: block !important; width: 26px !important; height: 26px !important; overflow: visible !important; }
#bsm-app-root #cbx-index .cbx-moon-fill { fill: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; }
#bsm-app-root #cbx-index .cbx-moon-edge { fill: none !important; stroke: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; stroke-width: var(--bsm3-border-default) !important; }
#bsm-app-root #cbx-index .cbx-moon.is-full .cbx-moon-edge { stroke: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; }
#bsm-app-root #cbx-index .cbx-moon.is-full .cbx-moon-svg { filter: drop-shadow(0 0 6px var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline)) !important; }
#bsm-app-root #cbx-index .cbx-moon.is-now .cbx-moon-edge { stroke: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; stroke-width: 2 !important; }
#bsm-app-root #cbx-index .cbx-moon-lbl { font-size: var(--bsm3-text-tiny-10px-use-on-text) !important; color: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; }
#bsm-app-root #cbx-index .cbx-moon.is-now .cbx-moon-lbl { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
#bsm-app-root #cbx-index .cbx-today { display: flex !important; align-items: center !important; gap: var(--bsm3-space-md) !important; padding: var(--bsm3-space-md) var(--bsm3-space-lg) !important; border-radius: var(--bsm3-radius-primary-cards) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; text-decoration: none !important; box-shadow: var(--bsm3-elevation-medium) !important; }
#bsm-app-root #cbx-index .cbx-today-play { flex: 0 0 auto !important; width: 44px !important; height: 44px !important; border-radius: var(--bsm3-radius-pills) !important; display: flex !important; align-items: center !important; justify-content: center !important; background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; }
#bsm-app-root #cbx-index .cbx-today-txt { flex: 1 1 auto !important; min-width: 0 !important; }
#bsm-app-root #cbx-index .cbx-today-txt small { display: block !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; }
#bsm-app-root #cbx-index .cbx-today-txt b { display: block !important; font-size: var(--bsm3-size-card-list-title-15px-use-on-h4) !important; }
#bsm-app-root #cbx-index .cbx-today-go { flex: 0 0 auto !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; }
#bsm-app-root #cbx-index .cbx-stats { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: var(--bsm3-space-sm) !important; margin: 0 0 var(--bsm3-space-xl) !important; }
#bsm-app-root #cbx-index .cbx-stat { padding: var(--bsm3-space-md) !important; border-radius: var(--bsm3-radius-list-rows) !important; background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; text-align: center !important; }
#bsm-app-root #cbx-index .cbx-stat b { display: block !important; font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }
#bsm-app-root #cbx-index .cbx-stat small { font-size: var(--bsm3-text-small-12px-use-on-text) !important; }
#bsm-app-root #cbx-index .cbx-h2 { margin: 0 0 var(--bsm3-space-sm) !important; font-family: var(--bsm3-font-heading) !important; font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
#bsm-app-root #cbx-index .cbx-p { margin: 0 0 var(--bsm3-space-lg) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; color: var(--bsm3-sleep-text-muted-day) !important; }
#bsm-app-root #cbx-index .cbx-how { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--bsm3-space-sm) !important; margin: 0 0 var(--bsm3-space-xl) !important; }
#bsm-app-root #cbx-index .cbx-how-i { padding: var(--bsm3-space-md) !important; border: var(--bsm3-border-thin) solid var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; border-radius: var(--bsm3-radius-list-rows) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; line-height: 1.45 !important; }
#bsm-app-root #cbx-index .cbx-how-i b { display: block !important; margin-bottom: 2px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }
#bsm-app-root #cbx-index .cbx-wk { margin: 0 0 var(--bsm3-space-sm) !important; border: var(--bsm3-border-thin) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers) !important; border-radius: var(--bsm3-radius-primary-cards) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
#bsm-app-root #cbx-index .cbx-wk[open] { border-color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; box-shadow: var(--bsm3-elevation-soft) !important; }
#bsm-app-root #cbx-index .cbx-wk-head { list-style: none !important; display: flex !important; align-items: center !important; gap: var(--bsm3-space-md) !important; padding: var(--bsm3-space-md) var(--bsm3-space-lg) !important; cursor: pointer !important; -webkit-tap-highlight-color: var(--bsm3-transparent) !important; }
#bsm-app-root #cbx-index .cbx-wk-head::-webkit-details-marker { display: none !important; }
#bsm-app-root #cbx-index .cbx-wk-head::marker { content: '' !important; }
#bsm-app-root #cbx-index .cbx-wk-num { flex: 0 0 auto !important; width: 36px !important; height: 36px !important; border-radius: var(--bsm3-radius-pills) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; border: var(--bsm3-border-default) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers) !important; color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text) !important; }
#bsm-app-root #cbx-index .cbx-wk-done .cbx-wk-num { background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; border-color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
#bsm-app-root #cbx-index .cbx-wk-now .cbx-wk-num { background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; border-color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; }
#bsm-app-root #cbx-index .cbx-wk-t { flex: 1 1 auto !important; min-width: 0 !important; }
#bsm-app-root #cbx-index .cbx-wk-t b { display: block !important; font-size: var(--bsm3-size-card-list-title-15px-use-on-h4) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
#bsm-app-root #cbx-index .cbx-wk-t small { font-size: var(--bsm3-text-small-12px-use-on-text) !important; color: var(--bsm3-sleep-text-muted-day) !important; }
#bsm-app-root #cbx-index .cbx-bar { display: block !important; height: 4px !important; margin-top: 6px !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-surface-pale-lavender-F1F0F9-use-on-card-background) !important; overflow: hidden !important; }
#bsm-app-root #cbx-index .cbx-bar i { display: block !important; height: 100% !important; width: 0 !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; }
#bsm-app-root #cbx-index .cbx-bar .cbx-bar-1 { width: calc(100% / 7) !important; }
#bsm-app-root #cbx-index .cbx-bar .cbx-bar-2 { width: calc(200% / 7) !important; }
#bsm-app-root #cbx-index .cbx-bar .cbx-bar-3 { width: calc(300% / 7) !important; }
#bsm-app-root #cbx-index .cbx-bar .cbx-bar-4 { width: calc(400% / 7) !important; }
#bsm-app-root #cbx-index .cbx-bar .cbx-bar-5 { width: calc(500% / 7) !important; }
#bsm-app-root #cbx-index .cbx-bar .cbx-bar-6 { width: calc(600% / 7) !important; }
#bsm-app-root #cbx-index .cbx-bar .cbx-bar-7 { width: 100% !important; }
#bsm-app-root #cbx-index .cbx-pill { flex: 0 0 auto !important; padding: 3px 10px !important; border-radius: var(--bsm3-radius-pills) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; white-space: nowrap !important; }
#bsm-app-root #cbx-index .cbx-pill-done { background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }
#bsm-app-root #cbx-index .cbx-pill-now { background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
#bsm-app-root #cbx-index .cbx-pill-plan { background: var(--bsm3-color-surface-pale-lavender-F1F0F9-use-on-card-background) !important; color: var(--bsm3-sleep-text-muted-day) !important; }
#bsm-app-root #cbx-index .cbx-days { margin: 0 !important; padding: 0 var(--bsm3-space-lg) var(--bsm3-space-md) !important; list-style: none !important; }
#bsm-app-root #cbx-index .cbx-day { margin: 0 !important; padding: 0 !important; border-top: var(--bsm3-border-thin) solid var(--bsm3-color-surface-pale-lavender-F1F0F9-use-on-card-background) !important; }
#bsm-app-root #cbx-index .cbx-day-row { display: flex !important; align-items: center !important; gap: var(--bsm3-space-md) !important; width: 100% !important; padding: 10px 0 !important; border: 0 !important; background: var(--bsm3-transparent) !important; font-family: var(--bsm3-font-body) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; text-align: left !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; text-decoration: none !important; cursor: pointer !important; }
#bsm-app-root #cbx-index .cbx-bite .cbx-day-row { cursor: default !important; padding-left: var(--bsm3-space-xl) !important; }
#bsm-app-root #cbx-index .cbx-dot { flex: 0 0 auto !important; width: 24px !important; height: 24px !important; border-radius: var(--bsm3-radius-pills) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: var(--bsm3-text-tiny-10px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; border: var(--bsm3-border-default) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers) !important; color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text) !important; }
#bsm-app-root #cbx-index .cbx-day.is-done .cbx-dot { background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; border-color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
#bsm-app-root #cbx-index .cbx-day.is-now { margin: var(--bsm3-space-xs) calc(-1 * var(--bsm3-space-sm)) !important; border-top-color: var(--bsm3-transparent) !important; border-radius: var(--bsm3-radius-list-rows) !important; background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; }
#bsm-app-root #cbx-index .cbx-day.is-now .cbx-day-row { padding-left: var(--bsm3-space-sm) !important; padding-right: var(--bsm3-space-sm) !important; }
#bsm-app-root #cbx-index .cbx-day.is-now .cbx-dot { background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; border-color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; }
#bsm-app-root #cbx-index .cbx-day-t { flex: 1 1 auto !important; min-width: 0 !important; }
#bsm-app-root #cbx-index .cbx-day-t b { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
#bsm-app-root #cbx-index .cbx-day-t small { display: block !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; color: var(--bsm3-sleep-text-muted-day) !important; }
#bsm-app-root #cbx-index .cbx-day.is-plan .cbx-day-t { color: var(--bsm3-sleep-text-muted-day) !important; }
#bsm-app-root #cbx-index .cbx-act { flex: 0 0 auto !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; }
#bsm-app-root #cbx-index .cbx-date { flex: 0 0 auto !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; color: var(--bsm3-sleep-text-muted-day) !important; }
#bsm-app-root #cbx-index .cbx-admin { margin-top: var(--bsm3-space-xl) !important; padding: var(--bsm3-space-lg) !important; border: var(--bsm3-border-default) dashed var(--bsm3-color-status-high-orange-F2994A-use-on-status-high) !important; border-radius: var(--bsm3-radius-primary-cards) !important; background: var(--bsm3-color-caution-cream-FEF3C7-use-on-status-warning-background) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
#bsm-app-root #cbx-index .cbx-admin-h { margin: 0 0 var(--bsm3-space-xs) !important; font-size: var(--bsm3-size-card-list-title-15px-use-on-h4) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
#bsm-app-root #cbx-index .cbx-admin-h small { font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; }
#bsm-app-root #cbx-index .cbx-admin-p { margin: 0 0 var(--bsm3-space-md) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; }
#bsm-app-root #cbx-index .cbx-admin-row { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: var(--bsm3-space-sm) !important; margin: 0 0 var(--bsm3-space-sm) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }
#bsm-app-root #cbx-index .cbx-admin-state { padding: 2px var(--bsm3-space-sm) !important; border-radius: var(--bsm3-radius-pills) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; border: var(--bsm3-border-thin) solid var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
#bsm-app-root #cbx-index .cbx-admin-sel { padding: 6px 10px !important; border: var(--bsm3-border-thin) solid var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; border-radius: var(--bsm3-radius-status-cards) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-family: var(--bsm3-font-body) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
#bsm-app-root #cbx-index .cbx-admin-btn { padding: 6px 12px !important; border: var(--bsm3-border-thin) solid var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-family: var(--bsm3-font-body) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; cursor: pointer !important; }
#bsm-app-root #cbx-index .cbx-pop { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: calc(60px + var(--wp-admin--admin-bar--height, 0px)) !important; z-index: 10010 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: var(--bsm3-space-lg) !important; background: color-mix(in srgb, var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) 55%, var(--bsm3-transparent)) !important; }
#bsm-app-root #cbx-index .cbx-pop[hidden] { display: none !important; }
#bsm-app-root #cbx-index .cbx-pop-box { position: relative !important; width: 100% !important; max-width: 420px !important; padding: var(--bsm3-space-xl) var(--bsm3-space-lg) var(--bsm3-space-lg) !important; border-radius: var(--bsm3-radius-primary-cards) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; box-shadow: var(--bsm3-elevation-overlay-soft) !important; text-align: center !important; }
#bsm-app-root #cbx-index .cbx-pop-close { position: absolute !important; top: var(--bsm3-space-sm) !important; right: var(--bsm3-space-sm) !important; border: 0 !important; background: var(--bsm3-transparent) !important; font-family: var(--bsm3-font-body) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; cursor: pointer !important; }
#bsm-app-root #cbx-index .cbx-pop-title { margin: 0 0 var(--bsm3-space-xs) !important; font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
#bsm-app-root #cbx-index .cbx-pop-name { margin: 0 0 var(--bsm3-space-sm) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }
#bsm-app-root #cbx-index .cbx-pop-text { margin: 0 0 var(--bsm3-space-md) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; line-height: 1.5 !important; }
#bsm-app-root #cbx-index .cbx-pop-btn { display: inline-block !important; padding: 10px 18px !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; text-decoration: none !important; }
#bsm-app-root .cbx-back { display: inline-flex !important; align-items: center !important; gap: var(--bsm3-space-xs) !important; margin: 0 0 var(--bsm3-space-md) !important; font-family: var(--bsm3-font-body) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; text-decoration: none !important; }
@media (max-width: 600px) {
#bsm-app-root #cbx-index .cbx-hero { padding: var(--bsm3-space-lg) !important; }
#bsm-app-root #cbx-index .cbx-ring { width: 72px !important; height: 72px !important; }
#bsm-app-root #cbx-index .cbx-title { font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3) !important; }
#bsm-app-root #cbx-index .cbx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
#bsm-app-root #cbx-index .cbx-how { grid-template-columns: minmax(0, 1fr) !important; }
#bsm-app-root #cbx-index .cbx-date { display: none !important; }
#bsm-app-root #cbx-index .cbx-wk-head { padding: var(--bsm3-space-md) !important; }
#bsm-app-root #cbx-index .cbx-days { padding: 0 var(--bsm3-space-md) var(--bsm3-space-sm) !important; }
}
#bsm-app-root[data-theme="sleep"] #cbx-index,
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-h2,
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-p,
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-kicker,
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-sub,
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-ring-txt small,
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-moon-lbl,
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-today-txt small,
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-today-go,
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-stat b,
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-how-i b,
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-wk-t small,
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-day-row,
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-day-t small,
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-day.is-plan .cbx-day-t,
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-act,
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-date,
#bsm-app-root[data-theme="sleep"] .cbx-back { color: var(--bsm3-sleep-text-muted-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-hero { border: var(--bsm3-border-default) solid var(--bsm3-sleep-border-sleep) !important; background:
    radial-gradient(1.5px 1.5px at 12% 22%, var(--bsm3-sleep-text-muted-sleep) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(1px 1px at 28% 68%, var(--bsm3-sleep-text-muted-sleep) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(1.5px 1.5px at 47% 14%, var(--bsm3-sleep-text-muted-sleep) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(1px 1px at 63% 40%, var(--bsm3-sleep-text-muted-sleep) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(1.5px 1.5px at 82% 18%, var(--bsm3-sleep-text-muted-sleep) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(1px 1px at 72% 84%, var(--bsm3-sleep-text-muted-sleep) 50%, var(--bsm3-transparent) 51%),
    var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-ring-track { fill: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; stroke: color-mix(in srgb, var(--bsm3-sleep-border-sleep) 20%, var(--bsm3-transparent)) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-ring-fill { stroke: var(--bsm3-sleep-border-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-moon-fill { fill: var(--bsm3-sleep-border-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-moon-edge { stroke: var(--bsm3-sleep-border-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-moon.is-full .cbx-moon-svg { filter: none !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-today { background: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; color: var(--bsm3-sleep-text-muted-sleep) !important; border: var(--bsm3-border-thick) solid var(--bsm3-sleep-border-sleep) !important; box-shadow: none !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-today-play { background: var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-stat,
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-how-i { background: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; border: var(--bsm3-border-default) solid var(--bsm3-sleep-border-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-wk { background: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; border: var(--bsm3-border-default) solid var(--bsm3-sleep-border-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-wk[open] { border-width: var(--bsm3-border-thick) !important; box-shadow: none !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-wk-num,
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-dot { background: var(--bsm3-transparent) !important; border-color: var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-sleep-text-muted-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-wk-done .cbx-wk-num,
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-day.is-done .cbx-dot { background: var(--bsm3-sleep-border-sleep) !important; border-color: var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-wk-now .cbx-wk-num,
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-day.is-now .cbx-dot { background: var(--bsm3-transparent) !important; border-width: var(--bsm3-border-thick) !important; color: var(--bsm3-sleep-text-muted-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-bar { background: color-mix(in srgb, var(--bsm3-sleep-border-sleep) 20%, var(--bsm3-transparent)) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-bar i { background: var(--bsm3-sleep-border-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-pill { background: var(--bsm3-transparent) !important; color: var(--bsm3-sleep-text-muted-sleep) !important; border: var(--bsm3-border-thin) solid var(--bsm3-sleep-border-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-pill-now { background: var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-day { border-top-color: color-mix(in srgb, var(--bsm3-sleep-border-sleep) 25%, var(--bsm3-transparent)) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-day.is-now { background: var(--bsm3-transparent) !important; border: var(--bsm3-border-default) solid var(--bsm3-sleep-border-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-pop { background: color-mix(in srgb, var(--bsm3-color-black-000000-use-on-bg-sleep) 75%, var(--bsm3-transparent)) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-pop-box { background: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; border: var(--bsm3-border-default) solid var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-sleep-text-muted-sleep) !important; box-shadow: none !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-pop-close,
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-pop-name { color: var(--bsm3-sleep-text-muted-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-pop-btn { background: var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }
/* Sleep look: the day rows that aren't open yet are <button>s -- keep them plain. The Sleep pages' "every button navy" rule
   carries id weight inside its :not(...) list, so this one adds :not(#cbx-wN) to outweigh it. */
#bsm-app-root[data-theme="sleep"] #spa-stage #cbx-index .cbx-day-row:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { background: var(--bsm3-transparent) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: var(--bsm3-sleep-text-muted-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-wk-now .cbx-wk-num,
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-day.is-now .cbx-dot { border-color: var(--bsm3-sleep-border-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage #cbx-index .cbx-pop-close:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { background: var(--bsm3-transparent) !important; border: 0 !important; box-shadow: none !important; color: var(--bsm3-sleep-text-muted-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage #cbx-index .cbx-pop-btn:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3),
#bsm-app-root[data-theme="sleep"] #spa-stage #cbx-index .cbx-admin-btn:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { background: var(--bsm3-sleep-border-sleep) !important; border: var(--bsm3-border-thin) solid var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }
/* Day look: the same buttons stay plain too */
#bsm-app-root[data-theme="day"] #cbx-index .cbx-day-row { background: var(--bsm3-transparent) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }

/* ---------- 9 Oct 2026: admin switch bar (admins only) -- sleep_platform/cbti/cbti_admin_bar.php ---------- */
#bsm-app-root .cbx-adminbar :is(div, span, a, form, label, button) { background-color: transparent !important; background-image: none !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; }
#bsm-app-root .cbx-adminbar { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: var(--bsm3-space-sm) var(--bsm3-space-md) !important; max-width: 900px !important; margin: 0 auto var(--bsm3-space-md) !important; padding: var(--bsm3-space-sm) var(--bsm3-space-md) !important; border: var(--bsm3-border-default) dashed var(--bsm3-color-status-high-orange-F2994A-use-on-status-high) !important; border-radius: var(--bsm3-radius-list-rows) !important; background: var(--bsm3-color-caution-cream-FEF3C7-use-on-status-warning-background) !important; font-family: var(--bsm3-font-body) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; box-sizing: border-box !important; }
#bsm-app-root .cbx-adminbar .cbx-ab-tag { padding: 2px var(--bsm3-space-sm) !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-status-high-orange-F2994A-use-on-status-high) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
#bsm-app-root .cbx-adminbar .cbx-switch { display: inline-flex !important; align-items: center !important; gap: var(--bsm3-space-sm) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; text-decoration: none !important; }
#bsm-app-root .cbx-adminbar .cbx-switch-track { position: relative !important; display: inline-block !important; width: 40px !important; height: 22px !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers) !important; }
#bsm-app-root .cbx-adminbar .cbx-switch.is-on .cbx-switch-track { background: var(--bsm3-color-status-normal-green-2E9E6C-use-on-status-normal) !important; }
#bsm-app-root .cbx-adminbar .cbx-switch-knob { position: absolute !important; top: 3px !important; left: 3px !important; width: 16px !important; height: 16px !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
#bsm-app-root .cbx-adminbar .cbx-switch.is-on .cbx-switch-knob { left: 21px !important; }
#bsm-app-root .cbx-adminbar .cbx-ab-note { color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
#bsm-app-root .cbx-adminbar .cbx-ab-jump { display: inline-flex !important; max-width: 100% !important; align-items: center !important; gap: var(--bsm3-space-xs) !important; margin: 0 0 0 auto !important; }
#bsm-app-root .cbx-adminbar .cbx-ab-jump-lbl { white-space: nowrap !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
#bsm-app-root #spa-stage .cbx-adminbar .cbx-ab-sel:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { max-width: 260px !important; padding: 4px 8px !important; border: var(--bsm3-border-thin) solid var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; border-radius: var(--bsm3-radius-status-cards) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; font-family: var(--bsm3-font-body) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; }
#bsm-app-root #spa-stage .cbx-adminbar .cbx-ab-btn:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { padding: 4px 12px !important; border: var(--bsm3-border-thin) solid var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; font-family: var(--bsm3-font-body) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; }
/* Sleep look: black + white like the rest */
#bsm-app-root[data-theme="sleep"] #spa-stage .cbx-adminbar:not(#cbx-w1):not(#cbx-w2) { background: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; border-color: var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-sleep-text-muted-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage .cbx-adminbar:not(#cbx-w1):not(#cbx-w2) :is(.cbx-switch, .cbx-ab-note, .cbx-ab-jump-lbl) { color: var(--bsm3-sleep-text-muted-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage .cbx-adminbar:not(#cbx-w1):not(#cbx-w2) .cbx-ab-tag { background: var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage .cbx-adminbar:not(#cbx-w1):not(#cbx-w2) .cbx-switch-track { background: color-mix(in srgb, var(--bsm3-sleep-border-sleep) 30%, var(--bsm3-transparent)) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage .cbx-adminbar:not(#cbx-w1):not(#cbx-w2) .cbx-switch.is-on .cbx-switch-track { background: var(--bsm3-sleep-border-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage .cbx-adminbar:not(#cbx-w1):not(#cbx-w2) .cbx-switch.is-on .cbx-switch-knob { background: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }

/* ---------- 9 Oct 2026 (Chris): the DAY STRIP on every CBT-I day page (js/cbtiLesson.js, new frame -- admins first) ----------
   A small version of the index's night-sky card: "<- CBT-I", Night N of 43 + ring, Week N + this week's 7 dots
   (the 7th, a diamond, is the Week Recap & Quiz), Day N . title . time, and Watch / Learn / Apply / Reflect. */
#bsm-app-root .cbx-strip svg { background: var(--bsm3-transparent) !important; background-color: var(--bsm3-transparent) !important; }
#bsm-app-root .cbx-strip :is(div, span, a, h1, small, button) { text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; background-image: none !important; }
#bsm-app-root .cbx-strip { position: relative !important; overflow: hidden !important; margin: 0 0 var(--bsm3-space-lg) !important; padding: var(--bsm3-space-md) var(--bsm3-space-lg) var(--bsm3-space-lg) !important; border-radius: var(--bsm3-radius-primary-cards) !important; font-family: var(--bsm3-font-body) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; box-sizing: border-box !important;
  background:
    radial-gradient(1.5px 1.5px at 10% 30%, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(1px 1px at 26% 78%, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(1.5px 1.5px at 44% 18%, var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(1px 1px at 61% 62%, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(1.5px 1.5px at 78% 24%, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(1px 1px at 92% 70%, var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(110% 120% at 100% 0%, var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) 0%, var(--bsm3-transparent) 55%),
    linear-gradient(150deg, var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) 0%, var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) 140%) !important; }
#bsm-app-root .cbx-strip .cbx-s-top { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: var(--bsm3-space-sm) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-back:not(#cbx-w1):not(#cbx-w2) { display: inline-block !important; padding: 3px 10px 3px 8px !important; border: 0 !important; border-radius: var(--bsm3-radius-pills) !important; background: color-mix(in srgb, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 14%, var(--bsm3-transparent)) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; text-decoration: none !important; }
#bsm-app-root .cbx-strip .cbx-s-pos { display: inline-flex !important; align-items: center !important; gap: var(--bsm3-space-sm) !important; color: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root .cbx-strip .cbx-s-pos span { color: inherit !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root .cbx-strip .cbx-s-ring { display: block !important; width: 22px !important; height: 22px !important; transform: rotate(-90deg) !important; }
#bsm-app-root .cbx-strip .cbx-s-ring-track { fill: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; stroke: color-mix(in srgb, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 22%, var(--bsm3-transparent)) !important; stroke-width: 3 !important; }
#bsm-app-root .cbx-strip .cbx-s-ring-fill { fill: none !important; stroke: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; stroke-width: 3 !important; stroke-linecap: round !important; }
#bsm-app-root .cbx-strip .cbx-s-week { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: var(--bsm3-space-md) !important; margin: var(--bsm3-space-md) 0 2px !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root .cbx-strip .cbx-s-week-name { font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root .cbx-strip .cbx-s-dots { display: inline-flex !important; align-items: center !important; gap: 6px !important; flex: 0 0 auto !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root .cbx-strip .cbx-s-dot { display: inline-block !important; width: 12px !important; height: 12px !important; border-radius: var(--bsm3-radius-pills) !important; border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; background: var(--bsm3-transparent) !important; box-sizing: border-box !important; }
#bsm-app-root .cbx-strip .cbx-s-dot-done { background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; border-color: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; }
#bsm-app-root .cbx-strip .cbx-s-dot-now { width: 16px !important; height: 16px !important; border: 2px solid var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; box-shadow: 0 0 10px var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; }
#bsm-app-root .cbx-strip .cbx-s-dot-quiz { width: 10px !important; height: 10px !important; border-radius: var(--bsm3-radius-tags) !important; transform: rotate(45deg) !important; }
#bsm-app-root .cbx-strip .cbx-s-dot-quiz.cbx-s-dot-now { width: 13px !important; height: 13px !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-title:not(#cbx-w1) { margin: var(--bsm3-space-sm) 0 var(--bsm3-space-md) !important; padding: 0 !important; font-family: var(--bsm3-font-heading) !important; font-size: var(--bsm3-size-section-heading-22px-use-on-h2) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; line-height: 1.2 !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; background: var(--bsm3-transparent) !important; text-align: left !important; }
#bsm-app-root .cbx-strip .cbx-s-dur { margin-left: var(--bsm3-space-xs) !important; font-size: var(--bsm3-size-list-row-subtitle-13px-use-on-h5) !important; font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text) !important; color: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; white-space: nowrap !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root .cbx-strip .cbx-s-sep { color: inherit !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root .cbx-strip .cbx-s-steps { display: grid !important; grid-auto-flow: column !important; grid-auto-columns: minmax(0, 1fr) !important; gap: 6px !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-step:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 0 !important; margin: 0 !important; padding: 7px 4px !important; border: var(--bsm3-border-thin) solid color-mix(in srgb, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 18%, var(--bsm3-transparent)) !important; border-radius: var(--bsm3-radius-pills) !important; background: color-mix(in srgb, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 10%, var(--bsm3-transparent)) !important; color: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; font-family: var(--bsm3-font-body) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; width: auto !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-step.is-done:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; border-color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-step.is-done::before { content: '\2713\00a0' !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-step.is-now:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; border-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }
/* the step's own heading under the strip ("Learn . Core Concepts . 1 of 2") */
#bsm-app-root #spa-stage .cbx-step-h:not(#cbx-w1) { margin: 0 0 var(--bsm3-space-md) !important; padding: 0 !important; font-family: var(--bsm3-font-heading) !important; font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; background: var(--bsm3-transparent) !important; text-transform: none !important; letter-spacing: normal !important; }
#bsm-app-root .cbx-step-h .cbx-step-count { font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text) !important; color: var(--bsm3-sleep-text-muted-day) !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root .cbx-old-hidden { display: none !important; }
@media (max-width: 600px) {
    #bsm-app-root #spa-stage .cbx-strip .cbx-s-title:not(#cbx-w1) { font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3) !important; }
    #bsm-app-root .cbx-strip .cbx-s-dur { display: block !important; margin: 2px 0 0 !important; }
    #bsm-app-root .cbx-strip .cbx-s-sep { display: none !important; }
    #bsm-app-root .cbx-strip .cbx-s-week { flex-wrap: wrap !important; }
    #bsm-app-root #spa-stage .cbx-strip .cbx-s-step:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { font-size: var(--bsm3-text-small-12px-use-on-text) !important; padding: 7px 2px !important; }
}
/* Sleep look: black, white text, white borders */
#bsm-app-root[data-theme="sleep"] #spa-stage .cbx-strip:not(#cbx-w1) { border: var(--bsm3-border-default) solid var(--bsm3-sleep-border-sleep) !important;
  background:
    radial-gradient(1.5px 1.5px at 10% 30%, var(--bsm3-sleep-text-muted-sleep) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(1px 1px at 26% 78%, var(--bsm3-sleep-text-muted-sleep) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(1.5px 1.5px at 44% 18%, var(--bsm3-sleep-text-muted-sleep) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(1px 1px at 61% 62%, var(--bsm3-sleep-text-muted-sleep) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(1.5px 1.5px at 78% 24%, var(--bsm3-sleep-text-muted-sleep) 50%, var(--bsm3-transparent) 51%),
    var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage .cbx-strip .cbx-s-back:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { background: var(--bsm3-transparent) !important; border: var(--bsm3-border-thin) solid var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-sleep-text-muted-sleep) !important; }
#bsm-app-root[data-theme="sleep"] .cbx-strip :is(.cbx-s-pos, .cbx-s-week-name, .cbx-s-dur) { color: var(--bsm3-sleep-text-muted-sleep) !important; }
#bsm-app-root[data-theme="sleep"] .cbx-strip .cbx-s-ring-track { fill: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; stroke: color-mix(in srgb, var(--bsm3-sleep-border-sleep) 25%, var(--bsm3-transparent)) !important; }
#bsm-app-root[data-theme="sleep"] .cbx-strip .cbx-s-ring-fill { stroke: var(--bsm3-sleep-border-sleep) !important; }
#bsm-app-root[data-theme="sleep"] .cbx-strip .cbx-s-dot { border-color: var(--bsm3-sleep-border-sleep) !important; }
#bsm-app-root[data-theme="sleep"] .cbx-strip .cbx-s-dot-done { background: var(--bsm3-sleep-border-sleep) !important; }
#bsm-app-root[data-theme="sleep"] .cbx-strip .cbx-s-dot-now { box-shadow: none !important; border-width: var(--bsm3-border-thick) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage .cbx-strip .cbx-s-step:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { background: var(--bsm3-transparent) !important; border-color: var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-sleep-text-muted-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage .cbx-strip .cbx-s-step.is-done:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { background: var(--bsm3-transparent) !important; border-width: var(--bsm3-border-default) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage .cbx-strip .cbx-s-step.is-now:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { background: var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage .cbx-step-h:not(#cbx-w1) { color: var(--bsm3-sleep-text-muted-sleep) !important; }
#bsm-app-root[data-theme="sleep"] .cbx-step-h .cbx-step-count { color: var(--bsm3-sleep-text-muted-sleep) !important; }

/* ---------- 9 Oct 2026 (Chris): NEW FLOW -- CBT-I home + course intro (sleep_platform/cbti/cbti_home.php) ---------- */
#bsm-app-root #cbx-index.cbh { display: flex !important; flex-direction: column !important; gap: var(--bsm3-space-md) !important; max-width: 640px !important; }
#bsm-app-root #cbx-index .cbh-sky { position: relative !important; overflow: hidden !important; padding: var(--bsm3-space-lg) var(--bsm3-space-lg) var(--bsm3-space-lg) !important; border-radius: var(--bsm3-radius-primary-cards) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important;
  background:
    radial-gradient(1.5px 1.5px at 12% 28%, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(1px 1px at 30% 76%, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(1.5px 1.5px at 52% 16%, var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(1px 1px at 70% 60%, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(1.5px 1.5px at 86% 22%, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 50%, var(--bsm3-transparent) 51%),
    radial-gradient(110% 120% at 100% 0%, var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) 0%, var(--bsm3-transparent) 55%),
    linear-gradient(150deg, var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) 0%, var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) 140%) !important; }
#bsm-app-root #cbx-index .cbh-kicker { margin: 0 0 var(--bsm3-space-xs) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; letter-spacing: 1px !important; color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; }
#bsm-app-root #spa-stage #cbx-index .cbh-h1:not(#cbx-w1) { margin: 0 0 var(--bsm3-space-sm) !important; padding: 0 !important; font-family: var(--bsm3-font-heading) !important; font-size: var(--bsm3-size-section-heading-22px-use-on-h2) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; line-height: 1.2 !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; text-align: left !important; text-wrap: balance !important; }
#bsm-app-root #cbx-index .cbh-lead { margin: 0 !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; line-height: 1.5 !important; color: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; }
#bsm-app-root #cbx-index .cbh-week { display: flex !important; justify-content: space-between !important; align-items: center !important; margin: var(--bsm3-space-sm) 0 0 !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; }
#bsm-app-root #cbx-index .cbh-dots { display: inline-flex !important; gap: 6px !important; align-items: center !important; }
#bsm-app-root #cbx-index .cbh-dot { display: inline-block !important; width: 12px !important; height: 12px !important; border-radius: var(--bsm3-radius-pills) !important; border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; box-sizing: border-box !important; }
#bsm-app-root #cbx-index .cbh-dot-done { background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; border-color: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; }
#bsm-app-root #cbx-index .cbh-dot-now { width: 16px !important; height: 16px !important; border: 2px solid var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; box-shadow: 0 0 10px var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; }
#bsm-app-root #cbx-index .cbh-dot-quiz { width: 10px !important; height: 10px !important; border-radius: var(--bsm3-radius-tags) !important; transform: rotate(45deg) !important; }
#bsm-app-root #cbx-index .cbh-card { display: flex !important; align-items: center !important; gap: var(--bsm3-space-md) !important; margin: var(--bsm3-space-md) 0 0 !important; padding: var(--bsm3-space-md) !important; border-radius: var(--bsm3-radius-primary-cards) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
#bsm-app-root #cbx-index .cbh-card-done { background: color-mix(in srgb, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 12%, var(--bsm3-transparent)) !important; border: var(--bsm3-border-thin) solid color-mix(in srgb, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 22%, var(--bsm3-transparent)) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
#bsm-app-root #cbx-index .cbh-card-ic { flex: 0 0 auto !important; width: 36px !important; height: 36px !important; border-radius: var(--bsm3-radius-pills) !important; display: flex !important; align-items: center !important; justify-content: center !important; background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
#bsm-app-root #cbx-index .cbh-card-done .cbh-card-ic { background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }
#bsm-app-root #cbx-index .cbh-card-txt { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; }
#bsm-app-root #cbx-index .cbh-card-txt b { font-size: var(--bsm3-size-card-list-title-15px-use-on-h4) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
#bsm-app-root #cbx-index .cbh-card-txt small { font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; }
#bsm-app-root #cbx-index .cbh-card-done .cbh-card-txt small { font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text) !important; color: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; line-height: 1.45 !important; }
#bsm-app-root #spa-stage #cbx-index a.cbh-btn:not(#cbx-w1):not(#cbx-w2) { display: block !important; padding: 13px var(--bsm3-space-lg) !important; border: 0 !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; text-align: center !important; text-decoration: none !important; }
#bsm-app-root #cbx-index .cbh-stats { display: flex !important; justify-content: space-between !important; gap: var(--bsm3-space-sm) !important; margin: 0 !important; padding: var(--bsm3-space-sm) var(--bsm3-space-xs) !important; border-top: var(--bsm3-border-thin) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers) !important; border-bottom: var(--bsm3-border-thin) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; color: var(--bsm3-sleep-text-muted-day) !important; }
#bsm-app-root #cbx-index .cbh-stats b { color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
#bsm-app-root #cbx-index .cbh-all > .cbh-all-sum { list-style: none !important; cursor: pointer !important; padding: var(--bsm3-space-xs) 0 !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; }
#bsm-app-root #cbx-index .cbh-all > .cbh-all-sum::-webkit-details-marker { display: none !important; }
#bsm-app-root #cbx-index .cbh-all > .cbh-all-sum::after { content: ' \203A' !important; }
#bsm-app-root #cbx-index .cbh-all[open] > .cbh-all-sum::after { content: ' \2039' !important; }
#bsm-app-root #cbx-index .cbh-all .cbx-weeks { margin-top: var(--bsm3-space-sm) !important; }
#bsm-app-root #spa-stage #cbx-index .cbh-h2:not(#cbx-w1) { margin: var(--bsm3-space-sm) 0 0 !important; font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
#bsm-app-root #cbx-index .cbh-plan { display: flex !important; flex-direction: column !important; gap: var(--bsm3-space-xs) !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
#bsm-app-root #cbx-index .cbh-plan li { display: flex !important; justify-content: space-between !important; gap: var(--bsm3-space-md) !important; padding: var(--bsm3-space-sm) var(--bsm3-space-md) !important; border-radius: var(--bsm3-radius-status-cards) !important; background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
#bsm-app-root #cbx-index .cbh-plan li span { text-align: right !important; color: var(--bsm3-sleep-text-muted-day) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; }
#bsm-app-root #cbx-index .cbh-p { margin: 0 !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; line-height: 1.5 !important; color: var(--bsm3-sleep-text-muted-day) !important; }
/* Sleep look */
#bsm-app-root[data-theme="sleep"] #spa-stage #cbx-index .cbh-sky:not(#cbx-w1) { border: var(--bsm3-border-default) solid var(--bsm3-sleep-border-sleep) !important; background: radial-gradient(1.5px 1.5px at 12% 28%, var(--bsm3-sleep-text-muted-sleep) 50%, var(--bsm3-transparent) 51%), radial-gradient(1px 1px at 30% 76%, var(--bsm3-sleep-text-muted-sleep) 50%, var(--bsm3-transparent) 51%), radial-gradient(1.5px 1.5px at 52% 16%, var(--bsm3-sleep-text-muted-sleep) 50%, var(--bsm3-transparent) 51%), radial-gradient(1.5px 1.5px at 86% 22%, var(--bsm3-sleep-text-muted-sleep) 50%, var(--bsm3-transparent) 51%), var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index :is(.cbh-kicker, .cbh-lead, .cbh-week, .cbh-p, .cbh-stats, .cbh-plan li span, .cbh-all-sum) { color: var(--bsm3-sleep-text-muted-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage #cbx-index :is(.cbh-h2, .cbh-stats b):not(#cbx-w1) { color: var(--bsm3-sleep-text-muted-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbh-dot { border-color: var(--bsm3-sleep-border-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbh-dot-done { background: var(--bsm3-sleep-border-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbh-dot-now { box-shadow: none !important; border-width: var(--bsm3-border-thick) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage #cbx-index .cbh-card:not(#cbx-w1) { background: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; border: var(--bsm3-border-default) solid var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-sleep-text-muted-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbh-card-ic { background: var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbh-card-txt small { color: var(--bsm3-sleep-text-muted-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage #cbx-index a.cbh-btn:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { background: var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage #cbx-index .cbh-plan li:not(#cbx-w1) { background: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; border: var(--bsm3-border-thin) solid var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-sleep-text-muted-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbh-stats { border-color: var(--bsm3-sleep-border-sleep) !important; }

/* ---------- 9 Oct 2026: NEW FLOW lessons (body.cbx-new-flow, set by js/cbtiLesson.js) -- a button that can't be pressed yet
   (tick boxes not done) is grey; it turns solid purple the moment it can. ---------- */
body.cbx-new-flow #bsm-app-root #spa-stage :is(button[disabled], button.bsm-btn-disabled):not(.cbx-s-step):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { background: var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers) !important; border-color: var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; opacity: 1 !important; cursor: not-allowed !important; }
body.cbx-new-flow #bsm-app-root #spa-stage :is(#bsm-btn-commit-0, #bsm-finish-btn):not([disabled]):not(#cbx-w1):not(#cbx-w2) { background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; border-color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; opacity: 1 !important; cursor: pointer !important; }
body.cbx-new-flow #bsm-app-root .cbx-m0-later { display: none !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-m0-eyebrow:not(#cbx-w1) { display: block !important; margin: 0 0 var(--bsm3-space-xs) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; background: var(--bsm3-transparent) !important; text-transform: none !important; letter-spacing: normal !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-m0-cont:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: inline-block !important; margin: var(--bsm3-space-md) 0 0 !important; padding: 10px 18px !important; border: 0 !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-family: var(--bsm3-font-body) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage :is(#bsm-btn-commit-0, #bsm-finish-btn, .cbx-m0-cont):not([disabled]):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { background: var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage .cbx-m0-eyebrow:not(#cbx-w1) { color: var(--bsm3-sleep-text-muted-sleep) !important; }

} /* end @layer bsm-sleep-mode */
@layer bsm-sleep-mode {
/* 9 Oct 2026: Start (Module 0) strip -- a stage not reached yet can't be opened */
#bsm-app-root .cbx-strip .cbx-s-step.is-locked:not(#cbx-w1) { opacity: var(--bsm3-opacity-medium) !important; cursor: not-allowed !important; }
}
@layer bsm-sleep-mode {
/* ---------- 9 Oct 2026 (Chris): Sleep Diary button on every CBT-I screen; one row per week in the course overview;
   the one line above the Start video ---------- */
/* diary button in the lesson strip (top right, next to "Night N of N") */
#bsm-app-root .cbx-strip .cbx-s-pos { margin-left: auto !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-diary:not(#cbx-w1):not(#cbx-w2) { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 3px 10px 3px 8px !important; border: 0 !important; border-radius: var(--bsm3-radius-pills) !important; background: color-mix(in srgb, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 14%, var(--bsm3-transparent)) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; text-decoration: none !important; }
#bsm-app-root .cbx-strip .cbx-s-diary span { color: inherit !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root .cbx-strip svg.cbx-s-diary-ic { width: 14px !important; height: 14px !important; flex: 0 0 auto !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage .cbx-strip .cbx-s-diary:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { background: var(--bsm3-transparent) !important; border: var(--bsm3-border-thin) solid var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-sleep-text-muted-sleep) !important; }
/* diary button on the CBT-I home + course intro (top right of the night-sky card) */
#bsm-app-root #spa-stage #cbx-index .cbh-diary:not(#cbx-w1):not(#cbx-w2) { position: absolute !important; top: var(--bsm3-space-md) !important; right: var(--bsm3-space-md) !important; z-index: 1 !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 4px 10px 4px 8px !important; border: 0 !important; border-radius: var(--bsm3-radius-pills) !important; background: color-mix(in srgb, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 14%, var(--bsm3-transparent)) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; text-decoration: none !important; }
#bsm-app-root #cbx-index .cbh-diary span { color: inherit !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root #cbx-index svg.cbh-diary-ic { width: 14px !important; height: 14px !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage #cbx-index .cbh-diary:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { background: var(--bsm3-transparent) !important; border: var(--bsm3-border-thin) solid var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-sleep-text-muted-sleep) !important; }
#bsm-app-root #cbx-index .cbh-sky .cbh-lead + .cbh-lead { margin-top: var(--bsm3-space-sm) !important; }
/* course overview: one row per week -- name on the left, title + "Days 1-6 · Week N Recap & Tutorial · Diary" on the right */
#bsm-app-root #cbx-index .cbh-plan li .cbh-plan-txt { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 2px !important; min-width: 0 !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }
#bsm-app-root #cbx-index .cbh-plan li .cbh-plan-sub { display: inline-flex !important; flex-wrap: wrap !important; justify-content: flex-end !important; align-items: center !important; gap: 4px !important; color: var(--bsm3-sleep-text-muted-day) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; }
#bsm-app-root #cbx-index svg.cbh-plan-diary { width: 13px !important; height: 13px !important; vertical-align: -2px !important; color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbh-plan li :is(.cbh-plan-txt, .cbh-plan-sub) { color: var(--bsm3-sleep-text-muted-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index svg.cbh-plan-diary { color: var(--bsm3-sleep-text-muted-sleep) !important; }
/* the one line above the Start video */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-m0-oneliner:not(#cbx-w1) { margin: 0 0 var(--bsm3-space-md) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; line-height: 1.5 !important; color: var(--bsm3-sleep-text-muted-day) !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage .cbx-m0-oneliner:not(#cbx-w1) { color: var(--bsm3-sleep-text-muted-sleep) !important; }
}
@layer bsm-sleep-mode {
/* ---------- 9 Oct 2026 (Chris): the CONTEXT ROW -- module name > Watch > Learn > Apply > Reflect > Finish > Recap & Tutorial.
   Wraps onto a second line on phones. ---------- */
#bsm-app-root .cbx-strip .cbx-s-steps { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px 4px !important; grid-auto-flow: initial !important; }
#bsm-app-root .cbx-strip .cbx-s-name { flex: 0 0 100% !important; margin: 0 0 2px !important; font-family: var(--bsm3-font-heading) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root .cbx-strip .cbx-s-arrow { color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root .cbx-strip .cbx-s-name + .cbx-s-arrow { display: none !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-step:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { padding: 6px 10px !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-static:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { cursor: default !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-recap:not(.is-now):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { border-style: dashed !important; }
#bsm-app-root[data-theme="sleep"] .cbx-strip .cbx-s-name { color: var(--bsm3-sleep-border-sleep) !important; }
#bsm-app-root[data-theme="sleep"] .cbx-strip .cbx-s-arrow { color: var(--bsm3-sleep-text-muted-sleep) !important; }
@media (max-width: 480px) {
    #bsm-app-root #spa-stage .cbx-strip .cbx-s-step:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { padding: 5px 8px !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; }
}
}
@layer bsm-sleep-mode {
/* ---------- 9 Oct 2026 (Chris, round 2): SHORTER STRIP -- 3 rows: top bar / title / one-line context row
   (the context row scrolls sideways on a phone instead of wrapping) ---------- */
#bsm-app-root .cbx-strip { padding: var(--bsm3-space-sm) var(--bsm3-space-md) var(--bsm3-space-md) !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-title:not(#cbx-w1) { margin: var(--bsm3-space-xs) 0 var(--bsm3-space-sm) !important; font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3) !important; }
#bsm-app-root .cbx-strip .cbx-s-steps { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; }
#bsm-app-root .cbx-strip .cbx-s-steps::-webkit-scrollbar { display: none !important; }
#bsm-app-root .cbx-strip .cbx-s-steps > * { flex: 0 0 auto !important; white-space: nowrap !important; }
#bsm-app-root .cbx-strip .cbx-s-name { flex: 0 0 auto !important; margin: 0 2px 0 0 !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; }
#bsm-app-root .cbx-strip .cbx-s-name + .cbx-s-arrow { display: inline !important; }
@media (max-width: 480px) {
    #bsm-app-root #spa-stage .cbx-strip .cbx-s-title:not(#cbx-w1) { font-size: var(--bsm3-text-large-16px-use-on-text) !important; }
    #bsm-app-root .cbx-strip .cbx-s-dur { display: inline !important; margin: 0 0 0 4px !important; }
    #bsm-app-root .cbx-strip .cbx-s-night { display: none !important; }
    #bsm-app-root .cbx-strip .cbx-s-diary-txt { display: none !important; }
}

/* ---------- COURSE OVERVIEW: one card per week -- icon, week, name, tags ---------- */
#bsm-app-root #cbx-index .cbh-plan { gap: var(--bsm3-space-sm) !important; }
#bsm-app-root #spa-stage #cbx-index .cbh-plan li.cbh-row:not(#cbx-w1) { display: flex !important; justify-content: flex-start !important; align-items: center !important; gap: var(--bsm3-space-md) !important; padding: var(--bsm3-space-md) !important; border: var(--bsm3-border-thin) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers) !important; border-radius: var(--bsm3-radius-status-cards) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
#bsm-app-root #spa-stage #cbx-index .cbh-row-ic:not(#cbx-w1) { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; font-size: var(--bsm3-icon-size-card) !important; line-height: 1 !important; }
#bsm-app-root #spa-stage #cbx-index .cbh-row-main:not(#cbx-w1) { text-align: left !important; display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root #spa-stage #cbx-index .cbh-row-wk:not(#cbx-w1) { font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; }
#bsm-app-root #spa-stage #cbx-index .cbh-row-title:not(#cbx-w1) { font-family: var(--bsm3-font-heading) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; line-height: 1.25 !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
#bsm-app-root #spa-stage #cbx-index .cbh-row-tags:not(#cbx-w1) { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; margin-top: 4px !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root #spa-stage #cbx-index .cbh-tag:not(#cbx-w1) { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 2px 8px !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
#bsm-app-root #spa-stage #cbx-index .cbh-tag.cbh-tag-recap:not(#cbx-w1) { background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
#bsm-app-root #cbx-index .cbh-tag svg.cbh-plan-diary { width: 12px !important; height: 12px !important; color: inherit !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage #cbx-index .cbh-plan li.cbh-row:not(#cbx-w1):not(#cbx-w2) { background: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; border-color: var(--bsm3-sleep-border-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage #cbx-index .cbh-row-ic:not(#cbx-w1):not(#cbx-w2) { background: var(--bsm3-transparent) !important; border: var(--bsm3-border-thin) solid var(--bsm3-sleep-border-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage #cbx-index :is(.cbh-row-title, .cbh-row-wk):not(#cbx-w1):not(#cbx-w2) { color: var(--bsm3-sleep-border-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage #cbx-index .cbh-tag:not(#cbx-w1):not(#cbx-w2) { background: var(--bsm3-transparent) !important; border: var(--bsm3-border-thin) solid var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-sleep-text-muted-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage #cbx-index .cbh-tag.cbh-tag-recap:not(#cbx-w1):not(#cbx-w2) { background: var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }
}
@layer bsm-sleep-mode {
/* ---------- 9 Oct 2026 (Chris, round 3): course overview cards -- tags on the right, line icons (no background),
   darker + bigger "WEEK N", a "Start ->" link next to "How it works" ---------- */
#bsm-app-root #spa-stage #cbx-index .cbh-plan li.cbh-row:not(#cbx-w1) { flex-wrap: nowrap !important; }
#bsm-app-root #spa-stage #cbx-index .cbh-row-main:not(#cbx-w1) { flex: 1 1 auto !important; }
#bsm-app-root #spa-stage #cbx-index .cbh-plan li.cbh-row .cbh-row-tags:not(#cbx-w1) { flex: 0 1 auto !important; justify-content: flex-end !important; margin: 0 0 0 auto !important; }
#bsm-app-root #spa-stage #cbx-index svg.cbh-row-ic:not(#cbx-w1):not(#cbx-w2) { flex: 0 0 auto !important; width: 30px !important; height: 30px !important; border: 0 !important; border-radius: 0 !important; background: var(--bsm3-transparent) !important; color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; }
#bsm-app-root #spa-stage #cbx-index .cbh-row-wk:not(#cbx-w1):not(#cbx-w2) { font-size: var(--bsm3-text-small-12px-use-on-text) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }
#bsm-app-root #cbx-index .cbh-h2-row { display: flex !important; justify-content: space-between !important; align-items: baseline !important; gap: var(--bsm3-space-md) !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root #spa-stage #cbx-index .cbh-start-link:not(#cbx-w1) { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; text-decoration: none !important; background: var(--bsm3-transparent) !important; }
@media (max-width: 640px) {
    #bsm-app-root #spa-stage #cbx-index .cbh-plan li.cbh-row:not(#cbx-w1) { flex-wrap: wrap !important; }
    #bsm-app-root #spa-stage #cbx-index .cbh-row-main:not(#cbx-w1) { flex: 1 1 0 !important; }
    #bsm-app-root #spa-stage #cbx-index .cbh-plan li.cbh-row .cbh-row-tags:not(#cbx-w1) { flex: 1 1 100% !important; justify-content: flex-start !important; margin: 0 0 0 calc(30px + var(--bsm3-space-md)) !important; }
}
#bsm-app-root[data-theme="sleep"] #spa-stage #cbx-index svg.cbh-row-ic:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { border: 0 !important; color: var(--bsm3-sleep-border-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage #cbx-index .cbh-start-link:not(#cbx-w1):not(#cbx-w2) { color: var(--bsm3-sleep-border-sleep) !important; }

/* ---------- Start, Learn 1 (Myth vs Fact): MYTH / FACT buttons without the lavender box around them ---------- */
body.cbx-new-flow #bsm-app-root #spa-stage #bsm-myth-buttons:not(#cbx-w1) { background: var(--bsm3-transparent) !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
}
@layer bsm-sleep-mode {
/* ---------- 9 Oct 2026 (Chris, round 4) ---------- */
/* overview cards: "WEEK N" and the name sit on the left */
#bsm-app-root #spa-stage #cbx-index .cbh-row-main:not(#cbx-w1):not(#cbx-w2) { align-items: flex-start !important; text-align: left !important; }
#bsm-app-root #spa-stage #cbx-index .cbh-row-main > *:not(#cbx-w1) { text-align: left !important; }
#bsm-app-root #cbx-index .cbh-prev-done { color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }

/* Start, Learn 1 (Myth vs Fact): no boxes in boxes -- statement (question) in dark purple, answer in dark ink, tight spacing */
body.cbx-new-flow #bsm-app-root #spa-stage #bsm-myth-game-container:not(#cbx-w1) { margin: var(--bsm3-space-sm) 0 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage #bsm-myth-statement:not(#cbx-w1) { margin: 0 0 var(--bsm3-space-md) !important; padding: 0 !important; text-align: left !important; font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; line-height: 1.35 !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage #bsm-myth-buttons:not(#cbx-w1):not(#cbx-w2) { justify-content: flex-start !important; gap: var(--bsm3-space-sm) !important; margin: 0 !important; }
body.cbx-new-flow #bsm-app-root #spa-stage #bsm-myth-feedback:not(#cbx-w1) { margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage #bsm-myth-feedback .pg-cbti-module-0-i025:not(#cbx-w1) { gap: var(--bsm3-space-sm) !important; margin: 0 !important; padding: 0 !important; }
body.cbx-new-flow #bsm-app-root #spa-stage :is(#bsm-myth-title, #bsm-myth-desc):not(#cbx-w1) { margin: 0 0 4px !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage #bsm-myth-feedback .pg-cbti-module-0-i027:not(#cbx-w1) { margin: var(--bsm3-space-sm) 0 0 !important; padding: 0 !important; text-align: left !important; }
body.cbx-new-flow #bsm-app-root #spa-stage #bsm-myth-feedback button:not(#cbx-w1):not(#cbx-w2) { margin: 0 !important; padding: 10px 18px !important; min-height: 0 !important; border: 0 !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage #bsm-myth-statement:not(#cbx-w1):not(#cbx-w2) { color: var(--bsm3-sleep-border-sleep) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage :is(#bsm-myth-title, #bsm-myth-desc):not(#cbx-w1):not(#cbx-w2) { color: var(--bsm3-sleep-text-muted-sleep) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage #bsm-myth-feedback button:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { background: var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }

/* Start, Learn 2 (Sleep Paradox check): the two answers look like answers you tap -- a circle to pick, purple edge, hover */
body.cbx-new-flow #bsm-app-root #spa-stage #bsm-paradox-quiz .bsm-roadmap-item[onclick]:not(#cbx-w1) { position: relative !important; padding-left: 48px !important; border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; cursor: pointer !important; transition: background-color 0.15s, border-color 0.15s !important; }
body.cbx-new-flow #bsm-app-root #spa-stage #bsm-paradox-quiz .bsm-roadmap-item[onclick]:not(#cbx-w1)::before { content: '' !important; position: absolute !important; left: 16px !important; top: 50% !important; width: 18px !important; height: 18px !important; margin-top: -9px !important; border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; border-radius: 50% !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage #bsm-paradox-quiz .bsm-roadmap-item[onclick]:not(#cbx-w1):hover { border-color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage #bsm-paradox-quiz .bsm-roadmap-item[onclick]:not(#cbx-w1):not(#cbx-w2) { border-color: var(--bsm3-sleep-border-sleep) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage #bsm-paradox-quiz .bsm-roadmap-item[onclick]:not(#cbx-w1)::before { border-color: var(--bsm3-sleep-border-sleep) !important; }
}
@layer bsm-sleep-mode {
/* 10 Oct 2026 (Chris, walk-through p1): course cards = [icon  Week N] on the left, title on the right. No repeated tags. */
#bsm-app-root #spa-stage #cbx-index .cbh-plan li.cbh-row:not(#cbx-w1) { flex-wrap: nowrap !important; padding: var(--bsm3-space-sm) var(--bsm3-space-md) !important; gap: var(--bsm3-space-sm) !important; }
#bsm-app-root #spa-stage #cbx-index .cbh-plan li.cbh-row .cbh-row-wk:not(#cbx-w1):not(#cbx-w2) { flex: 0 0 auto !important; text-align: left !important; white-space: nowrap !important; }
#bsm-app-root #spa-stage #cbx-index .cbh-plan li.cbh-row .cbh-row-title:not(#cbx-w1):not(#cbx-w2) { flex: 1 1 auto !important; min-width: 0 !important; margin-left: auto !important; text-align: right !important; }
#bsm-app-root #spa-stage #cbx-index .cbh-plan li.cbh-row svg.cbh-row-ic:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { width: 24px !important; height: 24px !important; }
}
@layer bsm-sleep-mode {
/* 10 Oct 2026 (Chris): "Week 1" -- normal capitals (first letter only), bold, 14px, no extra spacing */
#bsm-app-root #spa-stage #cbx-index .cbh-plan li.cbh-row .cbh-row-wk:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { text-transform: none !important; letter-spacing: normal !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
}
@layer bsm-sleep-mode {
/* 10 Oct 2026 (Chris, walk-through p3): Sleep Paradox story box -- darker, bolder border */
body.cbx-new-flow #bsm-app-root #spa-stage #bsm-step-2 .bsm-story-container:not(#cbx-w1) { border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage #bsm-step-2 .bsm-story-container:not(#cbx-w1):not(#cbx-w2) { border-color: var(--bsm3-sleep-border-sleep) !important; }
}
@layer bsm-sleep-mode {
/* 10 Oct 2026 (Chris, walk-through p3): Sleep Paradox story slides -- tight card, full-width Next button */
body.cbx-new-flow #bsm-app-root #spa-stage #bsm-step-2 .bsm-story-container:not(#cbx-w1):not(#cbx-w2) { padding: var(--bsm3-space-md) !important; gap: 0 !important; }
body.cbx-new-flow #bsm-app-root #spa-stage #bsm-step-2 .bsm-story-container .u-font-size-80px-margin-bottom-24px:not(#cbx-w1) { margin: 0 0 var(--bsm3-space-xs) !important; font-size: var(--bsm3-icon-size-container) !important; line-height: 1 !important; }
body.cbx-new-flow #bsm-app-root #spa-stage #bsm-step-2 .bsm-story-container .u-font-size-80px-margin-bottom-24px img.emoji:not(#cbx-w1) { width: 40px !important; height: 40px !important; margin: 0 2px !important; }
body.cbx-new-flow #bsm-app-root #spa-stage #bsm-step-2 .bsm-story-container .u-font-size-28px-font-weight-bold-margin-b:not(#cbx-w1) { margin: 0 0 4px !important; }
body.cbx-new-flow #bsm-app-root #spa-stage #bsm-step-2 .bsm-story-dots:not(#cbx-w1) { margin: var(--bsm3-space-sm) 0 0 !important; }
body.cbx-new-flow #bsm-app-root #spa-stage #bsm-step-2 .bsm-story-container .u-text-align-right-margin-top-24px:not(#cbx-w1) { margin: var(--bsm3-space-sm) 0 0 !important; text-align: center !important; }
body.cbx-new-flow #bsm-app-root #spa-stage #bsm-step-2 .bsm-story-container .u-text-align-right-margin-top-24px button:not(.bsm-d-none):not(#cbx-w1):not(#cbx-w2) { display: block !important; width: 100% !important; margin: 0 !important; padding: 12px 16px !important; }
}
@layer bsm-sleep-mode {
body.cbx-new-flow #bsm-app-root #spa-stage #bsm-step-2 .bsm-story-container button.bsm-btn-purple:not(.bsm-d-none):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4):not(#cbx-w5) { display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 12px 16px !important; border: 0 !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage #bsm-step-2 .bsm-story-container button.bsm-btn-purple:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4):not(#cbx-w5) { background: var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }
}
@layer bsm-sleep-mode {
/* ---------- 10 Oct 2026 (Chris): the same tidy look on EVERY CBT-I lesson page (new flow only) ----------
   cards: darker purple edge, less empty space, smaller big pictures; action buttons inside a lesson: full width, solid purple.
   Not touched: buttons that can't be pressed yet (they stay grey), the strip chips, MYTH/FACT style answer buttons (red/green), anything hidden. */
body.cbx-new-flow #bsm-app-root #spa-stage :is(.cbti-lf-root, #bsm-module-0-wrapper) .bsm-card:not(.bsm-success-block):not(#cbx-w1):not(#cbx-w2) { padding: var(--bsm3-space-md) !important; border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage :is(.cbti-lf-root, #bsm-module-0-wrapper) :is([class*="u-font-size-80px"], [class*="u-font-size-64px"], [class*="u-font-size-60px"], [class*="u-font-size-56px"], [class*="u-font-size-48px"]):not(#cbx-w1) { font-size: var(--bsm3-icon-size-container) !important; line-height: 1 !important; margin-bottom: var(--bsm3-space-xs) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage :is(.cbti-lf-root, #bsm-module-0-wrapper) :is([class*="u-font-size-80px"], [class*="u-font-size-64px"], [class*="u-font-size-60px"], [class*="u-font-size-56px"], [class*="u-font-size-48px"]) img.emoji:not(#cbx-w1) { width: 40px !important; height: 40px !important; }
body.cbx-new-flow #bsm-app-root #spa-stage :is(.cbti-lf-root, #bsm-module-0-wrapper) :is(button.bsm-btn-purple, button.bsm-btn-primary, span.bsm-btn-primary, .cbti-lf-nav .cbti-lf-next):not(.bsm-d-none):not(.bsm-hidden):not([hidden]):not([disabled]):not(.bsm-btn-disabled):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4):not(#cbx-w5) { display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding: 12px 16px !important; border: 0 !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; text-align: center !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage :is(.cbti-lf-root, #bsm-module-0-wrapper) .bsm-card:not(.bsm-success-block):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { border-color: var(--bsm3-sleep-border-sleep) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage :is(.cbti-lf-root, #bsm-module-0-wrapper) :is(button.bsm-btn-purple, button.bsm-btn-primary, span.bsm-btn-primary, .cbti-lf-nav .cbti-lf-next):not(.bsm-d-none):not(.bsm-hidden):not([hidden]):not([disabled]):not(.bsm-btn-disabled):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4):not(#cbx-w5):not(#cbx-w6) { background: var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }
}
@layer bsm-sleep-mode {
/* ---------- 10 Oct 2026 (Chris): HELPER TOOLS step -- one card per helper tool, "Add ... to my Sleep Planner" ---------- */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-helpers:not(#cbx-w1) { display: flex !important; flex-direction: column !important; gap: var(--bsm3-space-sm) !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-helpers-intro:not(#cbx-w1) { margin: 0 !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; line-height: 1.5 !important; color: var(--bsm3-sleep-text-muted-day) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-helper:not(#cbx-w1) { display: flex !important; flex-direction: column !important; gap: var(--bsm3-space-xs) !important; padding: var(--bsm3-space-md) !important; border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; border-radius: var(--bsm3-radius-status-cards) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-helper-name:not(#cbx-w1) { font-family: var(--bsm3-font-heading) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-helper-desc:not(#cbx-w1) { margin: 0 !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; line-height: 1.5 !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage button:is(.cbx-helper-add, .cbx-helper-plan):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: block !important; width: 100% !important; margin: var(--bsm3-space-xs) 0 0 !important; padding: 10px 16px !important; border: 0 !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-family: var(--bsm3-font-body) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; }
body.cbx-new-flow #bsm-app-root #spa-stage button.cbx-helper-add[disabled]:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; cursor: default !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage .cbx-helper:not(#cbx-w1):not(#cbx-w2) { border-color: var(--bsm3-sleep-border-sleep) !important; background: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage :is(.cbx-helper-name, .cbx-helper-desc, .cbx-helpers-intro):not(#cbx-w1):not(#cbx-w2) { color: var(--bsm3-sleep-text-muted-sleep) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage button:is(.cbx-helper-add, .cbx-helper-plan):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4):not(#cbx-w5) { background: var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }
/* 13 Oct 2026 (Chris): support therapy cards -- content central; formal name; media from the Wellness Channel; Coming Soon; admin links */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-helper:not(#cbx-w1):not(#cbx-w2) { align-items: center !important; text-align: center !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-helper-formal:not(#cbx-w1) { font-size: var(--bsm3-text-small-12px-use-on-text) !important; color: var(--bsm3-sleep-text-muted-day) !important; background: var(--bsm3-transparent) !important; }
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-helper-media:not(#cbx-w1) { display: flex !important; flex-direction: column !important; align-items: center !important; gap: var(--bsm3-space-xs) !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: var(--bsm3-transparent) !important; }
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) :is(.cbx-helper-audio, .cbx-helper-video):not(#cbx-w1) { display: block !important; width: 100% !important; max-width: 100% !important; border-radius: var(--bsm3-radius-status-cards) !important; }
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) :is(.cbx-helper-link, .cbx-helper-soon, .cbx-helper-admin-link):not(#cbx-w1):not(#cbx-w2) { background: var(--bsm3-transparent) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; text-decoration: none !important; }
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-helper-soon:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: inline-block !important; padding: var(--bsm3-space-xs) var(--bsm3-space-md) !important; border: var(--bsm3-border-thin) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-helper-choice:not(#cbx-w1) { display: flex !important; flex-direction: column !important; align-items: center !important; gap: var(--bsm3-space-xs) !important; width: 100% !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-helper-choice-t:not(#cbx-w1) { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage .cbx-helper-choice-t:not(#cbx-w1):not(#cbx-w2) { color: var(--bsm3-sleep-text-muted-sleep) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-helper-practice:not(#cbx-w1) { display: flex !important; flex-direction: column !important; gap: var(--bsm3-space-sm) !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: var(--bsm3-transparent) !important; }
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-helper-admin:not(#cbx-w1) { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: var(--bsm3-space-md) !important; background: var(--bsm3-transparent) !important; }
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-helper-admin-link:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { font-size: var(--bsm3-text-small-12px-use-on-text) !important; text-decoration: underline !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage :is(.cbx-helper-formal, .cbx-helper-link, .cbx-helper-soon, .cbx-helper-admin-link):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { color: var(--bsm3-sleep-text-muted-sleep) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage .cbx-helper-soon:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { border-color: var(--bsm3-sleep-border-sleep) !important; background: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }
}
@layer bsm-sleep-mode {
/* 10 Oct 2026 (Chris: "looks like a bug"): anything the lesson hides stays hidden -- the full-width button rules above
   were strong enough to bring back hidden buttons (e.g. the old "Start the Program" button on Complete Start). */
body #bsm-app-root #spa-stage .cbx-old-hidden:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4):not(#cbx-w5):not(#cbx-w6):not(#cbx-w7):not(#cbx-w8):not(#cbx-w9) { display: none !important; }
}
@layer bsm-sleep-mode {
/* ---------- 11 Oct 2026 (Chris): CBT-I home -- "where am I" row: Start > Week 1 ... Week 6 (done ticked, current lit) ---------- */
#bsm-app-root #spa-stage #cbx-index .cbh-path:not(#cbx-w1) { display: flex !important; flex-wrap: nowrap !important; gap: 4px !important; margin: 0 0 var(--bsm3-space-sm) !important; padding: 0 !important; list-style: none !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root #spa-stage #cbx-index .cbh-path-step:not(#cbx-w1) { margin: 0 !important; padding: 3px 10px !important; border: var(--bsm3-border-thin) solid color-mix(in srgb, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 30%, var(--bsm3-transparent)) !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-transparent) !important; color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; white-space: nowrap !important; flex: 1 1 0 !important; min-width: 0 !important; text-align: center !important; }
#bsm-app-root #spa-stage #cbx-index .cbh-path-done:not(#cbx-w1) { border-color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
#bsm-app-root #spa-stage #cbx-index .cbh-path-now:not(#cbx-w1) { border-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }
#bsm-app-root #cbx-index .cbh-path-short { display: none !important; }
#bsm-app-root #spa-stage #cbx-index .cbh-here:not(#cbx-w1) { margin: 0 0 var(--bsm3-space-sm) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; background: var(--bsm3-transparent) !important; }
@media (max-width: 560px) {
    #bsm-app-root #cbx-index .cbh-path-long { display: none !important; }
    #bsm-app-root #cbx-index .cbh-path-short { display: inline !important; }
    #bsm-app-root #spa-stage #cbx-index .cbh-path-step:not(#cbx-w1):not(#cbx-w2) { padding: 3px 4px !important; }
}
#bsm-app-root[data-theme="sleep"] #spa-stage #cbx-index .cbh-path-step:not(#cbx-w1):not(#cbx-w2) { border-color: var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-sleep-text-muted-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage #cbx-index :is(.cbh-path-done, .cbh-path-now):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { background: var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage #cbx-index .cbh-here:not(#cbx-w1):not(#cbx-w2) { color: var(--bsm3-sleep-border-sleep) !important; }
}
/* 11 Oct 2026 (Chris): CBT-I video player in true full screen fills the whole screen */
#bsm-cinematic-overlay:fullscreen { width: 100vw !important; height: 100vh !important; top: 0 !important; left: 0 !important; }
@layer bsm-sleep-mode {
/* =====================================================================================================================
   11 Oct 2026 (Chris, mock-up "CBT-I Key Facts" approved) -- WAVE 1: the shared lesson design for every day, Week 1 Day 1
   to Week 6. Video player controls, Key Facts index, one button pair, Complete Day tick list, "Recap of Week" tooltip.
   ===================================================================================================================== */

/* ---- video player: slim controls over the bottom of the video, title always on top ---- */
body.cbx-new-flow #bsm-cinematic-overlay #bsm-video-overlay-title:not(#cbx-w1):not(#cbx-w2) { display: block !important; top: 16px !important; left: 60px !important; right: 16px !important; bottom: auto !important; transform: none !important; margin: 0 !important; font-family: var(--bsm3-font-body) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
body.cbx-new-flow #bsm-cinematic-overlay #bsm-progress-container:not(#cbx-w1):not(#cbx-w2) { top: auto !important; left: 16px !important; right: 16px !important; bottom: 66px !important; width: auto !important; height: 4px !important; margin: 0 !important; transform: none !important; border: 0 !important; border-radius: var(--bsm3-radius-mini-badges) !important; background: color-mix(in srgb, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 25%, var(--bsm3-transparent)) !important; overflow: hidden !important; cursor: pointer !important; }
body.cbx-new-flow #bsm-cinematic-overlay #bsm-progress-bar:not(#cbx-w1):not(#cbx-w2) { height: 100% !important; background: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; }
body.cbx-new-flow #bsm-cinematic-overlay #bsm-video-controls:not(#cbx-w1):not(#cbx-w2) { top: auto !important; left: 16px !important; right: auto !important; bottom: 16px !important; width: auto !important; margin: 0 !important; padding: 0 !important; transform: none !important; gap: var(--bsm3-space-sm) !important; justify-content: flex-start !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-cinematic-overlay #bsm-video-controls button:not(#cbx-w1):not(#cbx-w2) { position: relative !important; width: 40px !important; height: 40px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: color-mix(in srgb, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 18%, var(--bsm3-transparent)) !important; color: var(--bsm3-transparent) !important; font-size: 0 !important; line-height: 0 !important; box-shadow: none !important; cursor: pointer !important; }
body.cbx-new-flow #bsm-cinematic-overlay #bsm-video-controls button:not(#cbx-w1):hover { background: color-mix(in srgb, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 30%, var(--bsm3-transparent)) !important; }
body.cbx-new-flow #bsm-cinematic-overlay #bsm-video-controls button[data-cbx-ic]::before { content: '' !important; position: absolute !important; inset: 11px !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; -webkit-mask: var(--cbx-ic) center / contain no-repeat !important; mask: var(--cbx-ic) center / contain no-repeat !important; }
body.cbx-new-flow #bsm-cinematic-overlay #bsm-video-controls button[data-cbx-ic="pause"] { --cbx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='5' width='4' height='14' rx='1'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1'/%3E%3C/svg%3E"); }
body.cbx-new-flow #bsm-cinematic-overlay #bsm-video-controls button[data-cbx-ic="play"] { --cbx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); }
body.cbx-new-flow #bsm-cinematic-overlay #bsm-video-controls button[data-cbx-ic="restart"] { --cbx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.3-5.7'/%3E%3Cpath d='M4 4v4h4'/%3E%3C/svg%3E"); }
body.cbx-new-flow #bsm-cinematic-overlay #bsm-video-controls button[data-cbx-ic="muted"] { --cbx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z' fill='black'/%3E%3Cpath d='M17 9l5 6M22 9l-5 6'/%3E%3C/svg%3E"); }
body.cbx-new-flow #bsm-cinematic-overlay #bsm-video-controls button[data-cbx-ic="sound"] { --cbx-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z' fill='black'/%3E%3Cpath d='M17 9a4 4 0 0 1 0 6'/%3E%3C/svg%3E"); }

/* ---- the Key Facts index ---- */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-kf-index:not(#cbx-w1) { padding: var(--bsm3-space-md) !important; border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; border-radius: var(--bsm3-radius-status-cards) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-kf-k:not(#cbx-w1) { margin: 0 !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-kf-h:not(#cbx-w1):not(#cbx-w2) { margin: 2px 0 6px !important; padding: 0 !important; font-family: var(--bsm3-font-heading) !important; font-size: var(--bsm3-size-section-heading-22px-use-on-h2) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; line-height: 1.25 !important; text-transform: none !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; text-wrap: balance !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-kf-p:not(#cbx-w1) { margin: 0 0 var(--bsm3-space-sm) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; line-height: 1.5 !important; color: var(--bsm3-sleep-text-muted-day) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-kf-notes:not(#cbx-w1) { display: flex !important; flex-direction: column !important; gap: var(--bsm3-space-xs) !important; margin: 0 0 var(--bsm3-space-sm) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-kf-notes > *:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { margin: 0 !important; padding: var(--bsm3-space-sm) var(--bsm3-space-md) !important; border: 0 !important; border-radius: var(--bsm3-radius-status-cards) !important; box-shadow: none !important; background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-kf-list:not(#cbx-w1) { display: flex !important; flex-direction: column !important; gap: var(--bsm3-space-xs) !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-kf-item:not(#cbx-w1) { display: flex !important; align-items: center !important; gap: var(--bsm3-space-sm) !important; margin: 0 !important; padding: var(--bsm3-space-sm) var(--bsm3-space-md) !important; border: var(--bsm3-border-thin) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers) !important; border-radius: var(--bsm3-radius-status-cards) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-kf-ic:not(#cbx-w1) { flex: 0 0 40px !important; width: 40px !important; height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: var(--bsm3-radius-status-cards) !important; background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; font-size: var(--bsm3-icon-size-card) !important; line-height: 1 !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-kf-ic img.emoji:not(#cbx-w1) { width: 22px !important; height: 22px !important; margin: 0 !important; }
/* 14 Oct 2026 (Chris): fact card icon (.cbx-card-ic) uses the page classes of W1 D1 / W1 D2; only its emoji needs a clear background */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-card-ic:not(#cbx-w1) { background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-card-ic img.emoji:not(#cbx-w1) { background: var(--bsm3-transparent) !important; }
/* 14 Oct 2026 (Chris): icon top lines up with the top of the card title */
body.cbx-new-flow #bsm-app-root #spa-stage .bsm-slide > .cbx-card-ic:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { align-self: start !important; }
/* 14 Oct 2026 (Chris): every "tap to answer / tap to explain" answer -- light purple background, full black text.
   Not on Start or Week 1 Day 1 (frozen). */
body.cbx-new-flow #bsm-app-root #spa-stage :is([id^="bsm-revealed-"], [id^="bsm-met-exp-"], [id^="bsm-highlight-"], [id^="bsm-compare-detail-"], [id^="w5d2-highlight-"], [id^="w5d4-highlight-"], .w2d4-revealed-content, .w3d4-hygiene-body, .bsm-relax-content, .bsm-audit-content):not(#bsm-week1-day1-root *):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; color: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; padding: var(--bsm3-space-md) !important; border-radius: var(--bsm3-radius-status-cards) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage :is([id^="bsm-revealed-"], [id^="bsm-met-exp-"], [id^="bsm-highlight-"], [id^="bsm-compare-detail-"], [id^="w5d2-highlight-"], [id^="w5d4-highlight-"], .w2d4-revealed-content, .w3d4-hygiene-body, .bsm-relax-content, .bsm-audit-content):not(#bsm-week1-day1-root *) :is(*):not(img):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { color: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-kf-t b:not(#cbx-w1) { font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }

/* ---- one button pair on every page: Previous (outline pill) + Next (solid pill) ---- */
body.cbx-new-flow #bsm-app-root #spa-stage .cbti-lf-nav:not(#cbx-w1) { display: flex !important; gap: var(--bsm3-space-sm) !important; align-items: stretch !important; margin: var(--bsm3-space-md) 0 0 !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbti-lf-nav .cbti-lf-prev:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4):not(#cbx-w5):not(#cbx-w6) { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 12px 20px !important; border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; font-family: var(--bsm3-font-body) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbti-lf-nav .cbti-lf-next:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4):not(#cbx-w5):not(#cbx-w6) { flex: 1 1 auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 12px 16px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

/* ---- less empty space inside Key Facts pages ---- */
body.cbx-new-flow #bsm-app-root #spa-stage .cbti-lf-step:not(#cbx-w1) { padding-top: 0 !important; padding-bottom: 0 !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbti-lf-step .cbx-step-h:not(#cbx-w1):not(#cbx-w2) { margin: 0 0 var(--bsm3-space-sm) !important; font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbti-lf-step .bsm-card:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { margin-top: 0 !important; margin-bottom: var(--bsm3-space-sm) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbti-lf-step :is(h2, h3, h4) img.emoji:not(#cbx-w1) { width: 1.35em !important; height: 1.35em !important; }

/* ---- Complete Day tick list ---- */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-ticks:not(#cbx-w1) { display: flex !important; flex-direction: column !important; gap: var(--bsm3-space-sm) !important; margin: 0 0 var(--bsm3-space-md) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tick-grp:not(#cbx-w1) { padding: var(--bsm3-space-sm) var(--bsm3-space-md) !important; border: var(--bsm3-border-thin) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers) !important; border-radius: var(--bsm3-radius-status-cards) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tick-h:not(#cbx-w1) { display: flex !important; justify-content: space-between !important; align-items: center !important; margin: 0 0 4px !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tick-n:not(#cbx-w1) { font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-sleep-text-muted-day) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tick:not(#cbx-w1) { display: flex !important; align-items: center !important; gap: var(--bsm3-space-sm) !important; padding: 5px 0 !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tick-box:not(#cbx-w1) { flex: 0 0 22px !important; width: 22px !important; height: 22px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; border-radius: var(--bsm3-radius-tags) !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tick.is-on .cbx-tick-box:not(#cbx-w1) { border-color: var(--bsm3-color-body-deep-forest-green-166534-use-on-body-pillar-strong) !important; background: var(--bsm3-color-body-deep-forest-green-166534-use-on-body-pillar-strong) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tick.is-on .cbx-tick-box::after { content: '\2713' !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-size: var(--bsm3-size-list-row-subtitle-13px-use-on-h5) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tick-link:not(#cbx-w1) { margin-left: auto !important; color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; text-decoration: none !important; white-space: nowrap !important; }

/* ---- header chip tips -- 13 Oct 2026 (Chris): one tip box (.cbx-s-tip) under the header card, filled by
   js/cbtiLesson.js tipBox() from the chip's data-tip (Learn: key facts learned, Therapies, Support, Complete, Recap). ---- */
#bsm-app-root #spa-stage .cbx-strip .cbx-s-static[data-tip]:not(#cbx-w1):not(#cbx-w2) { cursor: help !important; }
#bsm-app-root #spa-stage .cbx-strip:has(.cbx-s-tip.is-on):not(#cbx-w1) { overflow: visible !important; z-index: 20 !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-tip:not(#cbx-w1):not(#cbx-w2) { display: none !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-tip.is-on:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: block !important; position: absolute !important; left: var(--bsm3-space-md) !important; right: var(--bsm3-space-md) !important; top: calc(100% + var(--bsm3-space-xs)) !important; z-index: 20 !important; padding: var(--bsm3-space-sm) var(--bsm3-space-md) !important; border-radius: var(--bsm3-radius-status-cards) !important; background: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text) !important; line-height: 1.35 !important; text-align: center !important; pointer-events: none !important; }
/* Support (extra help -- not built yet): greyed and dashed, like Recap before day 7 */
#bsm-app-root #spa-stage .cbx-strip :is(.cbx-s-support, .cbx-s-empty):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { border-style: dashed !important; color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; }   /* no opacity: it would fade the tip too */

/* ---- Sleep mode ---- */
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage :is(.cbx-kf-index, .cbx-kf-item, .cbx-tick-grp):not(#cbx-w1):not(#cbx-w2) { border-color: var(--bsm3-sleep-border-sleep) !important; background: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage :is(.cbx-kf-h, .cbx-kf-t b, .cbx-tick-h, .cbx-tick, .cbx-kf-k):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { color: var(--bsm3-sleep-border-sleep) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage :is(.cbx-kf-p, .cbx-tick-n):not(#cbx-w1):not(#cbx-w2) { color: var(--bsm3-sleep-text-muted-sleep) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage :is(.cbx-kf-ic, .cbx-kf-notes > *):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { background: var(--bsm3-transparent) !important; border: var(--bsm3-border-thin) solid var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-sleep-text-muted-sleep) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage .cbti-lf-nav .cbti-lf-prev:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4):not(#cbx-w5):not(#cbx-w6):not(#cbx-w7) { background: var(--bsm3-transparent) !important; border-color: var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-sleep-border-sleep) !important; }
}
@layer bsm-sleep-mode {
/* 11 Oct 2026: notes moved onto the Key Facts index -- one flat lavender panel (no white boxes inside it) */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-kf-notes > * *:not(img):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { background: var(--bsm3-transparent) !important; border: 0 !important; box-shadow: none !important; margin-top: 0 !important; }
}
@layer bsm-sleep-mode {
/* 11 Oct 2026 (Chris): no flash of the raw lesson page -- hidden until js/cbtiLesson.js has built the new design (body.cbx-ready) */
body:has(#cbti-lesson-ctx[data-new-frame="1"]):not(.cbx-ready) #spa-stage > :not(.bsst-tabs-row):not(.cbx-adminbar):not(.cbx-back):not(#cbti-lesson-ctx):not(script):not(style) { opacity: 0 !important; }
body:has(#cbti-lesson-ctx[data-new-frame="1"]):not(.cbx-ready)::after { content: 'Loading\2026' !important; position: fixed !important; top: 50% !important; left: 50% !important; z-index: 50 !important; transform: translate(-50%, -50%) !important; padding: var(--bsm3-space-sm) var(--bsm3-space-lg) !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; font-family: var(--bsm3-font-body) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
}
@layer bsm-sleep-mode {
/* ===== 11 Oct 2026 (Chris, approved mock-up "Screen 3"): the inside of every Fact page (Weeks 1-6, new flow) =====
   js/cbtiLesson.js factPages() adds .cbx-fact to each Fact page, .cbx-deck when it is cards to tap through. */
/* ---- header line: "Fact 1 · The 5 Core Components" .......... "2 of 5" + thin progress bar ---- */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact .cbx-fh:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: flex !important; justify-content: space-between !important; align-items: baseline !important; gap: var(--bsm3-space-sm) !important; margin: 0 0 var(--bsm3-space-sm) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; line-height: 1.3 !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact .cbx-fh-n:not(#cbx-w1) { flex: 0 0 auto !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; white-space: nowrap !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-deck .cbx-step-count:not(#cbx-w1) { display: none !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fbar:not(#cbx-w1) { display: flex !important; gap: 5px !important; margin: 0 0 var(--bsm3-space-md) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fbar > i:not(#cbx-w1) { flex: 1 1 0 !important; height: 5px !important; border-radius: var(--bsm3-radius-mini-badges) !important; background: var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fbar > i.is-on:not(#cbx-w1) { background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-deck-hint:not(#cbx-w1) { margin: var(--bsm3-space-sm) 0 0 !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-deck-hint:empty:not(#cbx-w1) { display: none !important; }

/* ---- the card: tight, no rivers of white space ---- */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact .bsm-card:not(.bsm-success-block):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { padding: var(--bsm3-space-lg) !important; border-radius: var(--bsm3-radius-primary-cards) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact :is([class*="u-margin-bottom-2"], [class*="u-margin-bottom-3"], [class*="u-margin-bottom-4"]):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { margin-bottom: var(--bsm3-space-md) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact :is([class*="u-margin-top-2"], [class*="u-margin-top-3"], [class*="u-margin-top-4"]):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { margin-top: var(--bsm3-space-md) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact .bsm-slide.active:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { padding: 0 !important; }
/* card heading row: a big icon in a soft square, the title beside it */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact :is(.bsm-icon-circle, .bsm-icon-circle-small):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { flex: 0 0 48px !important; width: 48px !important; height: 48px !important; margin: 0 var(--bsm3-space-md) 0 0 !important; border-radius: var(--bsm3-radius-primary-cards) !important; background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact :is(.bsm-icon-circle, .bsm-icon-circle-small) svg:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { width: 24px !important; height: 24px !important; fill: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact .bsm-title-large:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3) !important; line-height: 1.3 !important; margin: 0 !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact .bsm-meta-text:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; color: var(--bsm3-sleep-text-muted-day) !important; margin: 0 !important; }

/* ---- a card to tap through: icon left, title + line beside it (was: small emoji, everything centred) ---- */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact .bsm-slide.active:has(> [class*="font-size-40px"]:first-child):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { display: grid !important; grid-template-columns: 52px minmax(0, 1fr) !important; column-gap: var(--bsm3-space-md) !important; row-gap: 0 !important; align-items: center !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact .bsm-slide.active:has(> [class*="font-size-40px"]:first-child) > *:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { grid-column: 1 / -1 !important; }
body.cbx-new-flow #bsm-app-root #spa-stage :is(.cbx-fact .bsm-slide.active > [class*="font-size-40px"]:first-child, .cbx-fact .cbx-ttl-row > .cbx-card-ic):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { grid-column: 1 !important; grid-row: 1 / span 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 52px !important; height: 52px !important; margin: 0 !important; border-radius: var(--bsm3-radius-primary-cards) !important; background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; font-size: var(--bsm3-size-page-title-24px-use-on-h1) !important; line-height: 1 !important; }
body.cbx-new-flow #bsm-app-root #spa-stage :is(.cbx-fact .bsm-slide.active > [class*="font-size-40px"]:first-child, .cbx-fact .cbx-ttl-row > .cbx-card-ic) img.emoji:not(#cbx-w1) { width: 28px !important; height: 28px !important; margin: 0 !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact .bsm-slide.active:has(> [class*="font-size-40px"]:first-child) > :is(:nth-child(2), :nth-child(3)):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { grid-column: 2 !important; margin: 0 !important; text-align: left !important; }

/* ---- "What does this do? ▾" opens the answer inside the card ---- */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact .cbx-rv:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { margin: var(--bsm3-space-md) 0 0 !important; padding: var(--bsm3-space-md) 0 0 !important; border: 0 !important; border-top: var(--bsm3-border-thin) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers) !important; border-radius: 0 !important; background: var(--bsm3-transparent) !important; box-shadow: none !important; text-align: left !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact .cbx-rv > *:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: flex !important; justify-content: flex-start !important; gap: 0 !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact .cbx-rv-q:not(#cbx-w1) { display: none !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact .cbx-rv-btn:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { display: inline-block !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: var(--bsm3-transparent) !important; box-shadow: none !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact .bsm-revealed-content:not(.bsm-hidden):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { margin: var(--bsm3-space-sm) 0 0 !important; padding: 0 !important; border: 0 !important; text-align: left !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact .bsm-revealed-content.cbx-rv-closed:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { display: none !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact .bsm-reveal-answer-box:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { margin: 0 0 var(--bsm3-space-xs) !important; padding: 0 !important; border: 0 !important; background: var(--bsm3-transparent) !important; box-shadow: none !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact .bsm-reveal-answer-title:not(#cbx-w1) { display: none !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact .bsm-reveal-answer-text:not(#cbx-w1):not(#cbx-w2) { margin: 0 !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; text-align: left !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact .bsm-reveal-desc:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { padding: 0 !important; border: 0 !important; background: var(--bsm3-transparent) !important; margin: 0 0 var(--bsm3-space-sm) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; line-height: 1.5 !important; text-align: left !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact .bsm-reveal-example:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { margin: 0 !important; padding: 10px var(--bsm3-space-md) !important; border: 0 !important; border-radius: var(--bsm3-radius-list-rows) !important; background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; text-align: left !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact .bsm-reveal-example strong:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: inline !important; margin: 0 !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }

/* ---- answer rows (choices) ---- */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact .bsm-option:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { margin: 0 0 var(--bsm3-space-sm) !important; padding: 10px var(--bsm3-space-md) !important; border-width: var(--bsm3-border-thin) !important; border-radius: var(--bsm3-radius-list-rows) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; }

/* ---- Sleep mode ---- */
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage .cbx-fact :is(.bsm-icon-circle, .bsm-icon-circle-small, .bsm-reveal-example):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { background: var(--bsm3-transparent) !important; border: var(--bsm3-border-thin) solid var(--bsm3-sleep-border-sleep) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage :is(.cbx-fact .bsm-slide.active > [class*="font-size-40px"]:first-child, .cbx-fact .cbx-ttl-row > .cbx-card-ic):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4):not(#cbx-w5) { background: var(--bsm3-transparent) !important; border: var(--bsm3-border-thin) solid var(--bsm3-sleep-border-sleep) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage .cbx-fact :is(.cbx-fh-n, .cbx-rv-btn, .bsm-reveal-answer-text, .cbx-deck-hint):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { color: var(--bsm3-sleep-border-sleep) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage .cbx-fbar > i.is-on:not(#cbx-w1):not(#cbx-w2) { background: var(--bsm3-sleep-border-sleep) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage .cbx-fact :is(.cbx-rv):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { border-top-color: var(--bsm3-sleep-border-sleep) !important; }
}
@layer bsm-sleep-mode {
/* 11 Oct 2026 (Chris, CHANGE 2): Complete Start -- Key Takeaways box gets the same darker purple border as the other boxes */
body.cbx-new-flow #bsm-app-root #spa-stage #bsm-module-0-wrapper .bsm-takeaway-card:not(#cbx-w1):not(#cbx-w2) { border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage #bsm-module-0-wrapper .bsm-takeaway-card:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { border-color: var(--bsm3-sleep-border-sleep) !important; }
}
@layer bsm-sleep-mode {
/* ===== 11 Oct 2026 (Chris): questions move to the Recap of Week ===== */
/* Recap of Week page: "Questions from Week N" -- one card per question, each a small frame of the day page */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-recap-days:not(#cbx-w1):not(#cbx-w2) { display: flex !important; flex-direction: column !important; gap: var(--bsm3-space-md) !important; margin: 0 0 var(--bsm3-space-lg) !important; padding: var(--bsm3-space-lg) !important; border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; border-radius: var(--bsm3-radius-primary-cards) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-recap-days :is(.cbx-kf-k, .cbx-kf-h, .cbx-kf-p):not(#cbx-w1):not(#cbx-w2) { margin: 0 !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-rq:not(#cbx-w1):not(#cbx-w2) { display: flex !important; flex-direction: column !important; gap: var(--bsm3-space-xs) !important; margin: 0 !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-rq-h:not(#cbx-w1):not(#cbx-w2) { margin: 0 !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-rq-frame:not(#cbx-w1):not(#cbx-w2) { display: block !important; width: 100% !important; height: 160px; border: 0 !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage .cbx-recap-days:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { border-color: var(--bsm3-sleep-border-sleep) !important; background: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage .cbx-rq-h:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { color: var(--bsm3-sleep-border-sleep) !important; }
/* inside that frame: only the question shows */
body.cbx-embed .cbx-embed-off:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4):not(#cbx-w5):not(#cbx-w6) { display: none !important; }
html:has(body.cbx-embed) { margin: 0 !important; padding: 0 !important; }
body.cbx-embed, body.cbx-embed .cbx-embed-chain:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { min-height: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
body.cbx-embed:not(#cbx-w1) { overflow: hidden !important; }
/* Complete Day: the save button waits for the tick list (approved mock-up, Screen 4) */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-wait:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4):not(#cbx-w5):not(#cbx-w6):not(#cbx-w7) { opacity: 0.45 !important; cursor: not-allowed !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-wait-note:not(#cbx-w1):not(#cbx-w2) { margin: 0 0 var(--bsm3-space-sm) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage .cbx-wait-note:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { color: var(--bsm3-sleep-border-sleep) !important; }
}
@layer bsm-sleep-mode {
/* 11 Oct 2026: a little space between an answer row's emoji and its words */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact .bsm-option img.emoji:not(#cbx-w1):not(#cbx-w2) { margin: 0 var(--bsm3-space-sm) 0 0 !important; }
}
@layer bsm-sleep-mode {
/* 11 Oct 2026: Recap frame -- no app header offset and no side gutters around the question (the Recap card has its own) */
body.cbx-embed #bsm-app-root:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { top: 0 !important; }
body.cbx-embed:not(#cbx-w1):not(#cbx-w2), body.cbx-embed .cbx-embed-chain:not(.cbx-embed-keep):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
}
@layer bsm-sleep-mode {
body.cbx-embed .bsm-scroll-viewport:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { overflow: hidden !important; }
}
@layer bsm-sleep-mode {
/* 11 Oct 2026: Complete Day -- what the member picked, after the "Your Turn" row */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tick-pick:not(#cbx-w1):not(#cbx-w2) { margin-left: auto !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; text-align: right !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage .cbx-tick-pick:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { color: var(--bsm3-sleep-border-sleep) !important; }
}
@layer bsm-sleep-mode {
/* 11 Oct 2026 (Chris): a picked answer row looks picked (it was identical to the others) */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact :is(.bsm-option, [class*="option"], [class*="chip"]):is(.selected, .active, .is-selected):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage .cbx-fact :is(.bsm-option, [class*="option"], [class*="chip"]):is(.selected, .active, .is-selected):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4):not(#cbx-w5) { border-color: var(--bsm3-sleep-border-sleep) !important; background: var(--bsm3-transparent) !important; color: var(--bsm3-sleep-border-sleep) !important; }
/* 11 Oct 2026 (Chris): video volume control, beside the slim player buttons */
body.cbx-new-flow #bsm-cinematic-overlay #bsm-video-controls .cbx-vol { width: 96px !important; height: 34px !important; margin: 0 0 0 var(--bsm3-space-xs) !important; padding: 0 !important; background: var(--bsm3-transparent) !important; accent-color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; cursor: pointer !important; vertical-align: middle !important; }
}
@layer bsm-sleep-mode {
/* 11 Oct 2026 (Chris): the Sleep Diary panel over a lesson -- "← Back to CBT-I" top left, the diary below */
body .cbx-diary-ov:not(#cbx-w1) { position: fixed !important; inset: 0 !important; z-index: 100000 !important; display: flex !important; flex-direction: column !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
body .cbx-diary-bar:not(#cbx-w1) { flex: 0 0 auto !important; display: flex !important; align-items: center !important; padding: var(--bsm3-space-sm) var(--bsm3-space-md) !important; border-bottom: var(--bsm3-border-thin) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
body .cbx-diary-back:not(#cbx-w1):not(#cbx-w2) { width: auto !important; margin: 0 !important; padding: 6px 14px !important; border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; }
body .cbx-diary-frame:not(#cbx-w1) { flex: 1 1 auto !important; width: 100% !important; min-height: 0 !important; border: 0 !important; }
body.cbx-diary-open:not(#cbx-w1) { overflow: hidden !important; }
}
@layer bsm-sleep-mode {
/* 11 Oct 2026: nothing floats over the Sleep Diary panel */
body.cbx-diary-open :is(#bcc-finder-root, #katie-widget-wrapper):not(#cbx-w1) { display: none !important; }
}
@layer bsm-sleep-mode {
/* ===== 11 Oct 2026 (Chris): CBT-I home -- Progress button + the member's whole record (sleep_platform/cbti/cbti_home.php) ===== */
#bsm-app-root #spa-stage .cbh-prog:not(#cbx-w1) { margin: 0 0 var(--bsm3-space-md) !important; padding: 0 !important; border: 0 !important; background: var(--bsm3-transparent) !important; }
/* 12 Oct 2026 (Chris, IFL3 8): Repeat Course uses the Progress button's look (one style) */
#bsm-app-root #spa-stage .cbh-repeat > .cbh-repeat-btn:not(#cbx-w1):not(#cbx-w2),
#bsm-app-root #spa-stage .cbh-prog > .cbh-prog-btn:not(#cbx-w1):not(#cbx-w2) { display: inline-flex !important; align-items: center !important; gap: var(--bsm3-space-sm) !important; margin: 0 0 var(--bsm3-space-sm) !important; padding: 8px 18px !important; border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; list-style: none !important; }
#bsm-app-root #spa-stage .cbh-prog > .cbh-prog-btn::-webkit-details-marker { display: none !important; }
#bsm-app-root #spa-stage .cbh-prog[open] > .cbh-prog-btn:not(#cbx-w1):not(#cbx-w2) { background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
#bsm-app-root #spa-stage .cbh-prog-body:not(#cbx-w1) { display: flex !important; flex-direction: column !important; gap: var(--bsm3-space-md) !important; padding: var(--bsm3-space-lg) !important; border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; border-radius: var(--bsm3-radius-primary-cards) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
#bsm-app-root #spa-stage .cbh-prog-wk-h:not(#cbx-w1):not(#cbx-w2) { margin: 0 0 var(--bsm3-space-xs) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }
#bsm-app-root #spa-stage :is(.cbh-prog-days, .cbh-prog-items):not(#cbx-w1):not(#cbx-w2) { margin: 0 !important; padding: 0 !important; list-style: none !important; }
#bsm-app-root #spa-stage .cbh-prog-day:not(#cbx-w1):not(#cbx-w2) { margin: 0 !important; padding: 6px 0 !important; border-bottom: var(--bsm3-border-thin) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers) !important; }
#bsm-app-root #spa-stage .cbh-prog-day-h:not(#cbx-w1):not(#cbx-w2) { display: flex !important; justify-content: space-between !important; gap: var(--bsm3-space-sm) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
#bsm-app-root #spa-stage .cbh-prog-day-h span:not(#cbx-w1):not(#cbx-w2) { flex: 0 0 auto !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-sleep-text-muted-day) !important; }
#bsm-app-root #spa-stage .cbh-prog-done .cbh-prog-day-h span:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { color: var(--bsm3-color-body-deep-forest-green-166534-use-on-body-pillar-strong) !important; }
#bsm-app-root #spa-stage .cbh-prog-part .cbh-prog-day-h span:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }
#bsm-app-root #spa-stage .cbh-prog-items:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { margin: 4px 0 0 !important; }
#bsm-app-root #spa-stage .cbh-prog-items > li:not(#cbx-w1):not(#cbx-w2) { margin: 0 !important; padding: 2px 0 2px 22px !important; position: relative !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
#bsm-app-root #spa-stage .cbh-prog-items > li::before { content: '\25CB' !important; position: absolute !important; left: 4px !important; color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text) !important; }
#bsm-app-root #spa-stage .cbh-prog-items > li.is-on::before { content: '\2713' !important; color: var(--bsm3-color-body-deep-forest-green-166534-use-on-body-pillar-strong) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
#bsm-app-root #spa-stage .cbh-prog-items em:not(#cbx-w1) { font-style: normal !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage :is(.cbh-prog-body, .cbh-prog > .cbh-prog-btn, .cbh-repeat > .cbh-repeat-btn):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { background: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; border-color: var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-sleep-border-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage :is(.cbh-prog-wk-h, .cbh-prog-day-h, .cbh-prog-items > li, .cbh-prog-items em):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { color: var(--bsm3-sleep-border-sleep) !important; }
}
@layer bsm-sleep-mode {
/* 12 Oct 2026 (Chris): "← You are here" in green on the member's current day (sleep_platform/cbti/cbti_weeks_list.php) */
#bsm-app-root #spa-stage #cbx-index .cbx-here-tag:not(#cbx-w1):not(#cbx-w2) { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; margin-left: auto !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; color: var(--bsm3-color-body-deep-forest-green-166534-use-on-body-pillar-strong) !important; white-space: nowrap !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root #spa-stage #cbx-index .cbx-here-tag::before { content: '\2190' !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; line-height: 1 !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage #cbx-index .cbx-here-tag:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { color: var(--bsm3-sleep-border-sleep) !important; }
}
@layer bsm-sleep-mode {
/* 12 Oct 2026 (Chris): the volume control needs a visible track to slide along (filled part = current volume) */
body.cbx-new-flow #bsm-cinematic-overlay #bsm-video-controls .cbx-vol { -webkit-appearance: none !important; appearance: none !important; height: 34px !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-cinematic-overlay #bsm-video-controls .cbx-vol::-webkit-slider-runnable-track { height: 4px !important; border-radius: var(--bsm3-radius-mini-badges) !important; background: linear-gradient(to right, var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) var(--cbx-vol, 100%), color-mix(in srgb, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 35%, var(--bsm3-transparent)) var(--cbx-vol, 100%)) !important; }
body.cbx-new-flow #bsm-cinematic-overlay #bsm-video-controls .cbx-vol::-moz-range-track { height: 4px !important; border-radius: var(--bsm3-radius-mini-badges) !important; background: color-mix(in srgb, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 35%, var(--bsm3-transparent)) !important; }
body.cbx-new-flow #bsm-cinematic-overlay #bsm-video-controls .cbx-vol::-moz-range-progress { height: 4px !important; border-radius: var(--bsm3-radius-mini-badges) !important; background: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; }
body.cbx-new-flow #bsm-cinematic-overlay #bsm-video-controls .cbx-vol::-webkit-slider-thumb { -webkit-appearance: none !important; appearance: none !important; width: 14px !important; height: 14px !important; margin-top: -5px !important; border: 0 !important; border-radius: 50% !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
body.cbx-new-flow #bsm-cinematic-overlay #bsm-video-controls .cbx-vol::-moz-range-thumb { width: 14px !important; height: 14px !important; border: 0 !important; border-radius: 50% !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
}
@layer bsm-sleep-mode {
/* 12 Oct 2026 (Chris): Start, Sleep Paradox story -- a small plain "← Back" link above the card (not a button look) */
body.cbx-new-flow #bsm-app-root #spa-stage #bsm-module-0-wrapper .cbx-story-back:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4):not(#cbx-w5) { display: inline-block !important; width: auto !important; margin: 0 0 var(--bsm3-space-xs) !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: var(--bsm3-transparent) !important; box-shadow: none !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage #bsm-module-0-wrapper .cbx-story-back:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4):not(#cbx-w5):not(#cbx-w6) { color: var(--bsm3-sleep-border-sleep) !important; }
}
@layer bsm-sleep-mode {
/* 12 Oct 2026 (Chris): Start, Sleep Paradox story -- "Click next to continue" on each card, just above its Next button */
body.cbx-new-flow #bsm-app-root #spa-stage #bsm-module-0-wrapper .cbx-story-hint:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: block !important; margin: 0 0 var(--bsm3-space-xs) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; color: var(--bsm3-sleep-text-muted-day) !important; text-align: center !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage #bsm-module-0-wrapper .cbx-story-hint:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { color: var(--bsm3-sleep-text-muted-sleep) !important; }
}
@layer bsm-sleep-mode {
/* 12 Oct 2026 (Chris, CBT-I wide): the small "← Back" link above the card on every lesson page but the video (replaces the big Previous button) */
body.cbx-new-flow #bsm-app-root #spa-stage .cbti-lf-step > .cbx-back-link:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4):not(#cbx-w5):not(#cbx-w6) { display: block !important; width: auto !important; min-width: 0 !important; margin: 0 0 var(--bsm3-space-xs) !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: var(--bsm3-transparent) !important; box-shadow: none !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; text-align: left !important; cursor: pointer !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage .cbti-lf-step > .cbx-back-link:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4):not(#cbx-w5):not(#cbx-w6):not(#cbx-w7) { color: var(--bsm3-sleep-border-sleep) !important; }
}
@layer bsm-sleep-mode {
/* 12 Oct 2026 (Chris): Start -- the "Next: ..." buttons (under the video, "Next: Complete Start") full width like the others */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-m0-cont:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { display: block !important; width: 100% !important; max-width: none !important; text-align: center !important; }
}
@layer bsm-sleep-mode {
/* 12 Oct 2026 (Chris, IFL 5): Complete Start button full width before and after the box is ticked */
body.cbx-new-flow #bsm-app-root #spa-stage #bsm-module-0-wrapper #bsm-finish-btn:not(#cbx-w1):not(#cbx-w2) { display: block !important; width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
/* 12 Oct 2026 (Chris, IFL 9): a small grey "Completed" on finished days in the Course Outline */
#bsm-app-root #spa-stage #cbx-index .cbx-day-t .cbx-done-tag:not(#cbx-w1):not(#cbx-w2) { display: block !important; margin: 0 !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text) !important; color: var(--bsm3-sleep-text-muted-day) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage #cbx-index .cbx-day-t .cbx-done-tag:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { color: var(--bsm3-sleep-text-muted-sleep) !important; }
}
@layer bsm-sleep-mode {
/* 12 Oct 2026 (Chris, IFL2 1 + 4): lesson pages -- the emoji icons and the word "Example:" had their own white box
   (day mode paints white on almost everything). Clear it so the light purple behind them shows through. */
body.cbx-new-flow #bsm-app-root #spa-stage .cbti-lf-step :is(img.emoji, .bsm-reveal-example strong):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { background: var(--bsm3-transparent) !important; }
}
@layer bsm-sleep-mode {
/* 12 Oct 2026 (Chris, IFL2 7): Complete Day -- the Sleep Diary row and its "Open Sleep Diary" link are greyed out (and do
   nothing) until every Key Facts row is ticked; then the row is ticked and the link works. */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tick.is-locked:not(#cbx-w1):not(#cbx-w2) { opacity: var(--bsm3-opacity-medium) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tick.is-locked .cbx-tick-link:not(#cbx-w1):not(#cbx-w2) { color: var(--bsm3-sleep-text-muted-day) !important; pointer-events: none !important; cursor: default !important; }
}
@layer bsm-sleep-mode {
/* 12 Oct 2026 (Chris, IFL3 1): drawn icons (SVG) on lesson pages had their own white box inside the purple tile (day mode
   paints white on almost everything) -- clear it, as for the emoji (IFL2 4) */
body.cbx-new-flow #bsm-app-root #spa-stage .cbti-lf-step svg:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { background: var(--bsm3-transparent) !important; }
}
@layer bsm-sleep-mode {
/* 12 Oct 2026 (Chris, IFL3 2): lesson header -- the week name sits under the title, left of the duration
   ("Week 1 · Understanding Your Sleep · 12–15 min"); the step-button row holds only the buttons, never wraps or scrolls,
   and is scaled down as a whole (zoom per data-fit step, set by js/cbtiLesson.js fitChips) when it is wider than the card */
#bsm-app-root #spa-stage .cbx-strip .cbx-s-meta:not(#cbx-w1):not(#cbx-w2) { display: block !important; margin: calc(-1 * var(--bsm3-space-xs)) 0 var(--bsm3-space-sm) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; line-height: 1.35 !important; color: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-meta .cbx-s-wk:not(#cbx-w1):not(#cbx-w2) { font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-meta :is(.cbx-s-meta-sep, .cbx-s-meta-dur):not(#cbx-w1):not(#cbx-w2) { color: inherit !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage .cbx-strip .cbx-s-meta:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { color: var(--bsm3-sleep-text-muted-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage .cbx-strip .cbx-s-meta .cbx-s-wk:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { color: var(--bsm3-sleep-border-sleep) !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-steps:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: flex !important; flex-wrap: nowrap !important; width: max-content !important; max-width: none !important; overflow: visible !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-steps[data-fit="95"]:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { zoom: 0.95 !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-steps[data-fit="90"]:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { zoom: 0.90 !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-steps[data-fit="85"]:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { zoom: 0.85 !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-steps[data-fit="80"]:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { zoom: 0.80 !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-steps[data-fit="75"]:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { zoom: 0.75 !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-steps[data-fit="70"]:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { zoom: 0.70 !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-steps[data-fit="65"]:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { zoom: 0.65 !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-steps[data-fit="60"]:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { zoom: 0.60 !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-steps[data-fit="55"]:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { zoom: 0.55 !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-steps[data-fit="50"]:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { zoom: 0.50 !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-steps > *:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { flex: 0 0 auto !important; white-space: nowrap !important; }
}
@layer bsm-sleep-mode {
/* 12 Oct 2026 (Chris, IFL3 8): Repeat Course sits on its own line under the Course Outline */
#bsm-app-root #spa-stage .cbh-repeat:not(#cbx-w1):not(#cbx-w2) { display: block !important; margin: var(--bsm3-space-md) 0 0 !important; padding: 0 !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root #spa-stage .cbh-repeat > .cbh-repeat-btn:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { cursor: pointer !important; font-family: inherit !important; list-style: none !important; }
#bsm-app-root #spa-stage .cbh-repeat > .cbh-repeat-btn::-webkit-details-marker { display: none !important; }
#bsm-app-root #spa-stage .cbh-repeat .cbh-repeat-box:not(#cbx-w1):not(#cbx-w2) { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: var(--bsm3-space-sm) !important; padding: var(--bsm3-space-md) !important; border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; border-radius: var(--bsm3-radius-primary-cards) !important; background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; }
#bsm-app-root #spa-stage .cbh-repeat .cbh-repeat-q:not(#cbx-w1):not(#cbx-w2) { margin: 0 !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
#bsm-app-root #spa-stage .cbh-repeat .cbh-repeat-form:not(#cbx-w1):not(#cbx-w2) { margin: 0 !important; padding: 0 !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root #spa-stage .cbh-repeat .cbh-repeat-yes:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { padding: var(--bsm3-space-sm) var(--bsm3-space-lg) !important; border: 0 !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-family: inherit !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage .cbh-repeat .cbh-repeat-box:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { border-color: var(--bsm3-sleep-border-sleep) !important; background: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage .cbh-repeat .cbh-repeat-q:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { color: var(--bsm3-sleep-border-sleep) !important; }
}

@layer bsm-sleep-mode {
/* 12 Oct 2026 (Chris, IFL9 5): recap frame -- a part the module had hidden is shown with a class, not an inline style */
body.cbx-embed .cbx-embed-keep.cbx-embed-show:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { display: block !important; }
}
@layer bsm-sleep-mode {
/* 12 Oct 2026 (Chris, IFL10): one video card for every video page (built by js/cbtiLesson.js videoCard) -- the same look
   as the Week 1 cards: play icon in a circle, video title, "<few words> Start video: <length>", then the video */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-vcard:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: block !important; padding: var(--bsm3-space-md) !important; border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; border-radius: var(--bsm3-radius-primary-cards) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; box-shadow: none !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-vcard > .cbx-vcard-head:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: flex !important; align-items: center !important; gap: var(--bsm3-space-lg) !important; margin: 0 !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-vcard .cbx-vcard-head .bsm-icon-circle:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; width: calc(var(--bsm3-space-xxl) + var(--bsm3-space-sm)) !important; height: calc(var(--bsm3-space-xxl) + var(--bsm3-space-sm)) !important; margin: 0 !important; border: var(--bsm3-border-thin) solid var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-vcard .cbx-vcard-head .bsm-icon-circle svg:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { width: var(--bsm3-space-xl) !important; height: var(--bsm3-space-xl) !important; fill: var(--bsm3-color-status-high-orange-F2994A-use-on-status-high) !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-vcard .cbx-vcard-head .bsm-flex-col:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: flex !important; flex-direction: column !important; min-width: 0 !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-vcard .cbx-vcard-head .bsm-title-large:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { margin: 0 0 var(--bsm3-space-xs) !important; font-family: var(--bsm3-font-heading) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-vcard .cbx-vcard-head .cbx-vcard-line:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { margin: 0 !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-vcard > :is(.bsm-video-box, .w3d3-video-frame, [onclick*="bsmOpenCinematicVideo"]):not(#cbx-w1):not(#cbx-w2) { margin-top: var(--bsm3-space-lg) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage .cbx-vcard:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { border-color: var(--bsm3-sleep-border-sleep) !important; background: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage .cbx-vcard .cbx-vcard-head :is(.bsm-title-large, .cbx-vcard-line):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4):not(#cbx-w5) { color: var(--bsm3-sleep-border-sleep) !important; }
}
@layer bsm-sleep-mode {
/* 14 Oct 2026 (Chris): the flip (back) side of every CBT-I flip card -- light purple background, dark purple border, full black text. */
body.cbx-new-flow #bsm-app-root #spa-stage :is(.bsm-flip-back, .w2d1-flip-back, .w2d2-flip-back, .w2d3-flip-back, .w3d6-flip-back):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; color: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage :is(.bsm-flip-back, .w2d1-flip-back, .w2d2-flip-back, .w2d3-flip-back, .w3d6-flip-back) :is(*):not(img):not(svg):not(svg *):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { color: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; background: var(--bsm3-transparent) !important; }
}
@layer bsm-sleep-mode {
/* 14 Oct 2026 (Chris): W1D4 Perpetuating flip back -- small central "Our Focus" box under the title. */
body.cbx-new-flow #bsm-app-root #spa-stage .w1d4-our-focus:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4):not(#cbx-w5):not(#cbx-w6) { display: block !important; width: fit-content !important; margin: 0 auto var(--bsm3-space-sm) !important; padding: var(--bsm3-space-xs) var(--bsm3-space-md) !important; border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; font-size: var(--bsm3-size-list-row-subtitle-13px-use-on-h5) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; text-align: center !important; text-transform: none !important; }
}

@layer bsm-sleep-mode {
/* 14 Oct 2026 (Chris): a one-card fact -- the list icon sits in front of the card title (icon box look shared with the slide facts above) */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact .cbx-ttl-row:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: flex !important; align-items: center !important; gap: var(--bsm3-space-md) !important; }
}
@layer bsm-sleep-mode {
/* 14 Oct 2026 (Chris): "same as Day 4" -- W3D2 cascade: the "Tap to learn" prompt goes once the step is open */
#bsm-app-root #spa-stage .w3d2-cascade-step.revealed .w3d2-cascade-hint:not(#cbx-w1):not(#cbx-w2) { display: none !important; }
}
@layer bsm-sleep-mode {
/* 14 Oct 2026 (Chris): a small space above the answer box on a fact card, so a short fact's icon never touches it (CBT-I wide).
   Only answers in a card that has the fact icon -- not answers joined to a row, like the Day 5 compare grid. */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-fact :has(> .cbx-card-ic) > :is([id^="bsm-revealed-"], [id^="bsm-met-exp-"], [id^="bsm-highlight-"], [id^="w5d2-highlight-"], [id^="w5d4-highlight-"], .w2d4-revealed-content, .bsm-revealed-content):not(#bsm-week1-day1-root *):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4):not(#cbx-w5) { margin-top: var(--bsm3-space-sm) !important; }
}
@layer bsm-sleep-mode {
/* ---------- 14 Oct 2026 (Chris): THERAPY TIME -- list page (Key Facts look) with the two kinds of therapy, one page per
   therapy, "Create sleep plan with this therapy", and the CBT-I sleep plan pop-up (the dashed zones of Sleep Planner). ---------- */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tt-kinds:not(#cbx-w1):not(#cbx-w2) { display: flex !important; flex-direction: column !important; gap: var(--bsm3-space-sm) !important; margin: 0 !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tt-how:not(#cbx-w1):not(#cbx-w2) { display: flex !important; flex-direction: column !important; gap: var(--bsm3-space-sm) !important; margin: var(--bsm3-space-md) 0 0 !important; padding: var(--bsm3-space-md) !important; border-radius: var(--bsm3-radius-primary-cards) !important; background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tt-how-h:not(#cbx-w1):not(#cbx-w2) { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tt-how-p:not(#cbx-w1):not(#cbx-w2) { margin: 0 !important; font-size: var(--bsm3-size-list-row-subtitle-13px-use-on-h5) !important; line-height: 1.5 !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tt-how .cbx-tt-kind-t:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { font-size: var(--bsm3-size-list-row-subtitle-13px-use-on-h5) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage .cbx-tt-how:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { background: var(--bsm3-transparent) !important; border: var(--bsm3-border-thin) solid var(--bsm3-sleep-border-sleep) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tt-kind:not(#cbx-w1):not(#cbx-w2) { display: flex !important; align-items: flex-start !important; gap: var(--bsm3-space-sm) !important; padding: var(--bsm3-space-sm) var(--bsm3-space-md) !important; border: var(--bsm3-border-default) dashed var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; border-radius: var(--bsm3-radius-status-cards) !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tt-kind.cbx-tt-kind-r:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { border-color: var(--bsm3-color-status-severe-red-C0392B-use-on-status-severe) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tt-kind-ic:not(#cbx-w1):not(#cbx-w2) { font-size: var(--bsm3-text-large-16px-use-on-text) !important; line-height: 1.4 !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tt-kind-t:not(#cbx-w1):not(#cbx-w2) { display: flex !important; flex-direction: column !important; gap: 2px !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; line-height: 1.45 !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tt-kind-t > *:not(#cbx-w1):not(#cbx-w2) { background: var(--bsm3-transparent) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tt-index .cbx-kf-t:not(#cbx-w1):not(#cbx-w2) { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tt-formal:not(#cbx-w1):not(#cbx-w2) { display: block !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; color: var(--bsm3-sleep-text-muted-day) !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tt-tag:not(#cbx-w1):not(#cbx-w2) { display: inline-block !important; padding: 2px var(--bsm3-space-sm) !important; border: var(--bsm3-border-thin) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-transparent) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tt-tag.cbx-tt-tag-r:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { border-color: var(--bsm3-color-status-severe-red-C0392B-use-on-status-severe) !important; color: var(--bsm3-color-status-severe-red-C0392B-use-on-status-severe) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-helper-note:not(#cbx-w1):not(#cbx-w2) { margin: 0 !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; color: var(--bsm3-sleep-text-muted-day) !important; background: var(--bsm3-transparent) !important; }
/* 16 Oct 2026 (Chris): "In your plan · View or edit" keeps the normal purple button look, so it reads as tappable */
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage :is(.cbx-tt-kind-t, .cbx-tt-kind-t > *):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { color: var(--bsm3-sleep-text-muted-sleep) !important; }
/* the pop-up sits on <html> (above the page's own layers), so its rules hang off its id */
#cbx-plan-ov.cbx-pov:not(#cbx-x1):not(#cbx-x2) { position: fixed !important; inset: 0 !important; z-index: 2147483647 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: var(--bsm3-space-md) !important; background: color-mix(in srgb, var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) 55%, transparent) !important; font-family: var(--bsm3-font-body) !important; }
#cbx-plan-ov .cbx-pov-box:not(#cbx-x1):not(#cbx-x2) { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 560px !important; max-height: 86vh !important; overflow: hidden !important; border-radius: var(--bsm3-radius-primary-cards) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
#cbx-plan-ov .cbx-pov-bar:not(#cbx-x1):not(#cbx-x2) { display: flex !important; align-items: center !important; gap: var(--bsm3-space-sm) !important; padding: var(--bsm3-space-sm) var(--bsm3-space-md) !important; background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; }
#cbx-plan-ov .cbx-pov-bar-t:not(#cbx-x1):not(#cbx-x2) { flex: 1 1 auto !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
#cbx-plan-ov :is(.cbx-pov-x, .cbx-pov-btn):not(#cbx-x1):not(#cbx-x2) { flex: 0 0 auto !important; padding: var(--bsm3-space-xs) var(--bsm3-space-md) !important; border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-family: var(--bsm3-font-body) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; }
#cbx-plan-ov .cbx-pov-btn.cbx-pov-btn-2:not(#cbx-x1):not(#cbx-x2):not(#cbx-x3) { background: var(--bsm3-transparent) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }
#cbx-plan-ov .cbx-pov-body:not(#cbx-x1):not(#cbx-x2) { display: flex !important; flex-direction: column !important; gap: var(--bsm3-space-md) !important; padding: var(--bsm3-space-md) !important; overflow-y: auto !important; }
#cbx-plan-ov .cbx-pov-p:not(#cbx-x1):not(#cbx-x2) { margin: 0 !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; line-height: 1.5 !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
#cbx-plan-ov .cbx-pov-btns:not(#cbx-x1):not(#cbx-x2) { display: flex !important; flex-wrap: wrap !important; gap: var(--bsm3-space-sm) !important; }
#cbx-plan-ov .cbx-pov-btns > .cbx-pov-btn:not(#cbx-x1):not(#cbx-x2) { flex: 1 1 200px !important; padding: var(--bsm3-space-sm) var(--bsm3-space-md) !important; }
#cbx-plan-ov .cbx-pz:not(#cbx-x1):not(#cbx-x2) { display: flex !important; flex-direction: column !important; gap: var(--bsm3-space-sm) !important; padding: var(--bsm3-space-md) !important; border: var(--bsm3-border-thick) dashed var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; border-radius: var(--bsm3-radius-primary-cards) !important; }
#cbx-plan-ov .cbx-pz.cbx-pz-r:not(#cbx-x1):not(#cbx-x2):not(#cbx-x3) { border-color: var(--bsm3-color-status-severe-red-C0392B-use-on-status-severe) !important; }
#cbx-plan-ov .cbx-pz-h:not(#cbx-x1):not(#cbx-x2) { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }
#cbx-plan-ov .cbx-pz-r .cbx-pz-h:not(#cbx-x1):not(#cbx-x2):not(#cbx-x3) { color: var(--bsm3-color-status-severe-red-C0392B-use-on-status-severe) !important; }
#cbx-plan-ov .cbx-pz-i:not(#cbx-x1):not(#cbx-x2) { position: relative !important; display: flex !important; align-items: center !important; gap: var(--bsm3-space-sm) !important; padding: var(--bsm3-space-sm) var(--bsm3-space-md) !important; border: var(--bsm3-border-thin) solid var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; border-radius: var(--bsm3-radius-status-cards) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
#cbx-plan-ov .cbx-pz-i.is-new:not(#cbx-x1):not(#cbx-x2):not(#cbx-x3) { border-color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; }
#cbx-plan-ov .cbx-pz-f:not(#cbx-x1):not(#cbx-x2) { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; border-radius: 50% !important; background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; }
#cbx-plan-ov .cbx-pz-t:not(#cbx-x1):not(#cbx-x2) { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; }
#cbx-plan-ov .cbx-pz-t b:not(#cbx-x1):not(#cbx-x2) { font-size: var(--bsm3-text-large-16px-use-on-text) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
#cbx-plan-ov .cbx-pz-t span:not(#cbx-x1):not(#cbx-x2) { font-size: var(--bsm3-text-small-12px-use-on-text) !important; color: var(--bsm3-sleep-text-muted-day) !important; }
#cbx-plan-ov .cbx-pz-new:not(#cbx-x1):not(#cbx-x2) { padding: 2px var(--bsm3-space-sm) !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; }
}
@layer bsm-sleep-mode {
/* ---------- 14 Oct 2026 (Chris, APPROVED): Therapy Time banner + "Therapies today" + the therapy page
   (DESIGN_cbti_therapy_page_APPROVED_2026-10-14.md) ---------- */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tt-banner:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: flex !important; align-items: center !important; gap: var(--bsm3-space-md) !important; margin: 0 0 var(--bsm3-space-xs) !important; padding: var(--bsm3-space-md) !important; border-radius: var(--bsm3-radius-primary-cards) !important; background: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tt-banner-ic:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; width: calc(var(--bsm3-icon-size-container) * 1.35) !important; height: calc(var(--bsm3-icon-size-container) * 1.35) !important; border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; border-radius: 50% !important; background: var(--bsm3-transparent) !important; font-size: var(--bsm3-size-page-title-24px-use-on-h1) !important; line-height: 1 !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tt-banner-ic img.emoji:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { width: var(--bsm3-icon-size-empty-states) !important; height: var(--bsm3-icon-size-empty-states) !important; margin: 0 !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tt-banner-t:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: flex !important; flex-direction: column !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tt-banner-t b:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { font-family: var(--bsm3-font-heading) !important; font-size: var(--bsm3-size-section-heading-22px-use-on-h2) !important; font-weight: var(--bsm3-weight-bold-700-use-on-h1) !important; line-height: 1.2 !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tt-banner-t span:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { font-size: var(--bsm3-size-list-row-subtitle-13px-use-on-h5) !important; color: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-kf-h.cbx-tt-h:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3) !important; }
/* the therapy page card: left-aligned (the old helper card was centred) */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-helper.cbx-th:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { align-items: stretch !important; text-align: left !important; gap: var(--bsm3-space-md) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-th-h:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: flex !important; align-items: center !important; gap: var(--bsm3-space-md) !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-th-ic:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; width: calc(var(--bsm3-icon-size-container) * 1.45) !important; height: calc(var(--bsm3-icon-size-container) * 1.45) !important; border-radius: var(--bsm3-radius-primary-cards) !important; background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; font-size: var(--bsm3-size-page-title-24px-use-on-h1) !important; line-height: 1 !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-th-ic img.emoji:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { width: var(--bsm3-icon-size-empty-states) !important; height: var(--bsm3-icon-size-empty-states) !important; margin: 0 !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-th-nm:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: flex !important; flex-direction: column !important; gap: 2px !important; background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-th .cbx-helper-name:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-th .cbx-helper-formal:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { font-size: var(--bsm3-size-list-row-subtitle-13px-use-on-h5) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-th .cbx-helper-desc:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { font-size: var(--bsm3-text-large-16px-use-on-text) !important; line-height: 1.55 !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-th .cbx-tt-tag:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { align-self: flex-start !important; }
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-th-med:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: flex !important; flex-direction: column !important; gap: var(--bsm3-space-sm) !important; padding: var(--bsm3-space-md) !important; border-radius: var(--bsm3-radius-status-cards) !important; background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; text-decoration: none !important; }
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-th-mrow:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: flex !important; align-items: center !important; gap: var(--bsm3-space-md) !important; background: var(--bsm3-transparent) !important; }
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-th-play:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; width: calc(var(--bsm3-icon-size-container) * 1.25) !important; height: calc(var(--bsm3-icon-size-container) * 1.25) !important; border-radius: 50% !important; background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; cursor: pointer !important; }
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-th-med.is-soon .cbx-th-play:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { opacity: var(--bsm3-opacity-medium) !important; }
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-th-mt:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: flex !important; flex-direction: column !important; background: var(--bsm3-transparent) !important; }
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-th-mt b:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; background: var(--bsm3-transparent) !important; }
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-th-mt span:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { font-size: var(--bsm3-text-small-12px-use-on-text) !important; color: var(--bsm3-sleep-text-muted-day) !important; background: var(--bsm3-transparent) !important; }
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-th-med .cbx-helper-media:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { margin: 0 !important; }
/* no media yet: the box says "Audio coming soon", so the old "Coming soon" pill is not repeated (admin links stay) */
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-th-medwrap > .cbx-helper-media > .cbx-helper-soon:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { display: none !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-th .cbx-helper-note:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { text-align: center !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage :is(.cbx-th .cbx-helper-name, .cbx-th-mt b):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { color: var(--bsm3-sleep-text-muted-sleep) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage .cbx-th-med:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { background: var(--bsm3-transparent) !important; border: var(--bsm3-border-thin) solid var(--bsm3-sleep-border-sleep) !important; }
}
@layer bsm-sleep-mode {
/* 14 Oct 2026 (Chris): a paragraph break inside an answer (in place of <br><br>, which was being lost) */
#bsm-app-root #spa-stage .cbx-para-gap:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { margin-top: var(--bsm3-space-sm) !important; }
}

@layer bsm-sleep-mode {
/* 15 Oct 2026 (Chris): eye + bin on each therapy in the CBT-I plan pop-up, and the eye card (name, description, the same player box) */
#cbx-plan-ov .cbx-th-medwrap:not(#cbx-x1):not(#cbx-x2) { display: flex !important; flex-direction: column !important; gap: var(--bsm3-space-sm) !important; }
#cbx-plan-ov .cbx-pz-acts:not(#cbx-x1):not(#cbx-x2) { display: flex !important; align-items: center !important; gap: var(--bsm3-space-sm) !important; margin-left: auto !important; }
#cbx-plan-ov :is(.cbx-pz-eye, .cbx-pz-bin):not(#cbx-x1):not(#cbx-x2) { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border: 0 !important; background: var(--bsm3-transparent) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; line-height: 1 !important; cursor: pointer !important; color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; }
#cbx-plan-ov .cbx-pz-eye svg:not(#cbx-x1):not(#cbx-x2) { width: var(--bsm3-space-lg) !important; height: var(--bsm3-space-lg) !important; }
#cbx-plan-ov .cbx-pz-bin[disabled]:not(#cbx-x1):not(#cbx-x2) { opacity: var(--bsm3-opacity-medium) !important; cursor: default !important; }
#cbx-plan-ov .cbx-pz-card:not(#cbx-x1):not(#cbx-x2) { display: flex !important; flex-direction: column !important; gap: var(--bsm3-space-sm) !important; }
#cbx-plan-ov .cbx-pz-card-n:not(#cbx-x1):not(#cbx-x2) { font-family: var(--bsm3-font-heading) !important; font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
#cbx-plan-ov .cbx-pz-card-f:not(#cbx-x1):not(#cbx-x2) { margin-top: -4px !important; font-size: var(--bsm3-size-list-row-subtitle-13px-use-on-h5) !important; color: var(--bsm3-sleep-text-muted-day) !important; }
#cbx-plan-ov .cbx-pz-card-d:not(#cbx-x1):not(#cbx-x2) { margin: 0 !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; line-height: 1.55 !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
#cbx-plan-ov .cbx-pz-back:not(#cbx-x1):not(#cbx-x2) { align-self: flex-start !important; padding: 0 !important; border: 0 !important; background: var(--bsm3-transparent) !important; font-family: var(--bsm3-font-body) !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; cursor: pointer !important; }
}

/* 16 Oct 2026 (Chris): CBT-I support therapy video = a SQUARE box. The video is trimmed to the middle (talking head).
   Before play: ONE shared background picture for every therapy + the therapy's name + "Start video" (js/cbtiLesson.js helperMedia).
   To change the picture: replace images/therapies/therapy-poster-bg.jpg in the media library (same name) -- this is the ONE place it is set. */
@layer bsm-sleep-mode {
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-th-sq:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { position: relative !important; display: block !important; width: 50% !important; margin-inline: auto !important; /* 16 Oct 2026 (Chris): half size; full width on phones (below) */ aspect-ratio: 1 / 1 !important; overflow: hidden !important; border-radius: var(--bsm3-radius-status-cards) !important; background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; }
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-th-sq > .cbx-helper-video:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; border-radius: 0 !important; }
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-th-sq > .cbx-th-sq-cover:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { position: absolute !important; inset: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: var(--bsm3-space-md) !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: var(--bsm3-space-lg) !important; border: 0 !important; border-radius: 0 !important; cursor: pointer !important; background: url('https://landlordsangel.com/images/therapies/therapy-poster-bg.jpg') center / cover no-repeat, var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; }
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-th-sq.is-playing > .cbx-th-sq-cover:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { display: none !important; }
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-th-sq .cbx-th-sq-title:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { font-family: var(--bsm3-font-heading) !important; font-size: var(--bsm3-size-section-heading-22px-use-on-h2) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; background: var(--bsm3-transparent) !important; text-align: center !important; text-shadow: var(--bsm3-elevation-overlay-strong) !important; }
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-th-sq .cbx-th-sq-btn:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: inline-flex !important; align-items: center !important; padding: var(--bsm3-space-sm) var(--bsm3-space-lg) !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links) !important; box-shadow: var(--bsm3-elevation-medium) !important; }
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-th-sq .cbx-th-sq-badge:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: inline-flex !important; padding: var(--bsm3-space-xs) var(--bsm3-space-md) !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; box-shadow: var(--bsm3-elevation-medium) !important; } /* 16 Oct 2026: "CBT-I Support Therapy" badge above the name */
@media (max-width: 600px) {
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-th-sq:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { width: 100% !important; }
}
} /* end @layer bsm-sleep-mode (square therapy video) */
@layer bsm-sleep-mode {
/* 16 Oct 2026 (Chris): CBT-I home -- the open week's heading gets a light purple background */
#bsm-app-root #cbx-index .cbx-wk[open] > .cbx-wk-head { background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; border-radius: var(--bsm3-radius-primary-cards) var(--bsm3-radius-primary-cards) 0 0 !important; }
#bsm-app-root[data-theme="sleep"] #cbx-index .cbx-wk[open] > .cbx-wk-head { background: color-mix(in srgb, var(--bsm3-sleep-border-sleep) 20%, var(--bsm3-transparent)) !important; }
} /* end @layer bsm-sleep-mode (open week heading) */
@layer bsm-sleep-mode {
/* 16 Oct 2026 (Chris): "My Plan" button right of "← CBT-I" in the lesson header -- same look as the back button */
#bsm-app-root .cbx-strip .cbx-s-left { display: inline-flex !important; align-items: center !important; gap: var(--bsm3-space-xs) !important; background: var(--bsm3-transparent) !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-plan:not(#cbx-w1):not(#cbx-w2) { display: none !important; }
#bsm-app-root #spa-stage .cbx-strip .cbx-s-plan.is-on:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: inline-block !important; padding: 3px 10px !important; border: 0 !important; border-radius: var(--bsm3-radius-pills) !important; background: color-mix(in srgb, var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) 14%, var(--bsm3-transparent)) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; text-decoration: none !important; cursor: pointer !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage .cbx-strip .cbx-s-plan.is-on:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { background: var(--bsm3-transparent) !important; border: var(--bsm3-border-thin) solid var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-sleep-text-muted-sleep) !important; }
} /* end @layer bsm-sleep-mode (My Plan button) */
@layer bsm-sleep-mode {
/* 16 Oct 2026 (Chris): Sound Anchor -- its sound tiles look exactly like the video therapy poster (.cbx-th-sq):
   2 across on wider screens (each about the size of the video poster), 1 across on phones (full width, like the video). */
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-sa-grid:not(#cbx-w1):not(#cbx-w2) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--bsm3-space-md) !important; width: 100% !important; flex: 1 1 100% !important; background: var(--bsm3-transparent) !important; }
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-sa-grid > .cbx-th-sq.cbx-sa-tile:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4):not(#cbx-w5) { width: 100% !important; margin: 0 !important; }
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-sa-tile > .cbx-sa-img:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; border-radius: 0 !important; }
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-sa-tile.has-poster > .cbx-th-sq-cover:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { background: var(--bsm3-transparent) !important; }
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-sa-tile.is-on:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { outline: var(--bsm3-border-thick) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; outline-offset: 2px !important; }
@media (max-width: 600px) {
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-sa-grid:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { grid-template-columns: minmax(0, 1fr) !important; }
}
/* 16 Oct 2026 (Chris): "Make this my sound" under Play; the member's own sound gets a tick */
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-sa-tile .cbx-sa-mine:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: inline-flex !important; padding: 2px var(--bsm3-space-sm) !important; border-radius: var(--bsm3-radius-pills) !important; background: color-mix(in srgb, var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) 45%, var(--bsm3-transparent)) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; cursor: pointer !important; }
:is(body.cbx-new-flow #bsm-app-root #spa-stage, #cbx-plan-ov) .cbx-sa-tile.is-mine .cbx-sa-mine:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; }
} /* end @layer bsm-sleep-mode (Sound Anchor grid) */
@layer bsm-sleep-mode {
/* 16 Oct 2026 (Chris): small "Next Day →" link, bottom right of every day's last page */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-next-day:not(#cbx-w1):not(#cbx-w2) { display: flex !important; justify-content: flex-end !important; margin: var(--bsm3-space-md) 0 96px !important; /* 96px: clears the Katie chat button (fixed, bottom right, ~88px tall) */ background: var(--bsm3-transparent) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-next-day-a:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; background: var(--bsm3-transparent) !important; text-decoration: none !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage .cbx-next-day-a:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { color: var(--bsm3-sleep-border-sleep) !important; }
} /* end @layer bsm-sleep-mode (Next Day link) */
@layer bsm-sleep-mode {
/* 18 Oct 2026 (Chris): Therapy Time banner with both a video and a sound therapy -- 🎬 and 🎧 sit side by side, each smaller, inside the circle */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tt-banner-ic:has(img.emoji + img.emoji):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { gap: 0 !important; font-size: 0 !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-tt-banner-ic:has(img.emoji + img.emoji) img.emoji:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { width: calc(var(--bsm3-icon-size-empty-states) * 0.7) !important; height: calc(var(--bsm3-icon-size-empty-states) * 0.7) !important; }
} /* end @layer bsm-sleep-mode (banner icons) */
@layer bsm-sleep-mode {
/* 18 Oct 2026 (Chris): admin bar "Show only" -- one kind of page across the whole course (sleep_platform/cbti/cbti_admin_bar.php) */
#bsm-app-root #spa-stage .cbx-adminbar .cbx-ab-types:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: inline-flex !important; flex-wrap: wrap !important; align-items: center !important; gap: var(--bsm3-space-xs) !important; }
#bsm-app-root #spa-stage .cbx-adminbar .cbx-ab-type:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { padding: 2px var(--bsm3-space-sm) !important; border: var(--bsm3-border-thin) solid var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; border-radius: var(--bsm3-radius-pills) !important; background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; text-decoration: none !important; }
#bsm-app-root #spa-stage .cbx-adminbar .cbx-ab-type.is-on:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { background: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; }
#bsm-app-root #spa-stage .cbx-adminbar .cbx-ab-type.is-none:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { opacity: 0.45 !important; cursor: default !important; }
#bsm-app-root #spa-stage .cbx-adminbar .cbx-ab-tnote:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { flex: 1 1 100% !important; font-size: var(--bsm3-text-small-12px-use-on-text) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage .cbx-adminbar .cbx-ab-type:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { background: var(--bsm3-transparent) !important; border-color: var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-sleep-text-muted-sleep) !important; }
#bsm-app-root[data-theme="sleep"] #spa-stage .cbx-adminbar .cbx-ab-type.is-on:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { background: var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-color-black-000000-use-on-bg-sleep) !important; }
/* the "Next <type> page ->" link at the end of the last page of that kind in a lesson (admins, filter on) */
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-flt-bar:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; gap: var(--bsm3-space-sm) !important; margin: 0 0 var(--bsm3-space-sm) !important; padding: var(--bsm3-space-xs) var(--bsm3-space-sm) !important; border: var(--bsm3-border-thin) dashed var(--bsm3-color-status-high-orange-F2994A-use-on-status-high) !important; border-radius: var(--bsm3-radius-status-cards) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-flt-bar :is(.cbx-flt-next, .cbx-flt-prev):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { margin: 0 !important; padding: 0 !important; border: 0 !important; background: var(--bsm3-transparent) !important; cursor: pointer !important; text-decoration: underline !important; font-family: var(--bsm3-font-body) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-flt-bar span:is(.cbx-flt-next, .cbx-flt-prev):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4):not(#cbx-w5) { text-decoration: none !important; cursor: default !important; opacity: 0.6 !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-flt-bar .cbx-flt-where:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { font-size: var(--bsm3-text-small-12px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; align-self: center !important; }
body.cbx-new-flow #bsm-app-root #spa-stage :is(.cbx-flt-next, .cbx-flt-end):not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: block !important; margin: var(--bsm3-space-md) 0 96px !important; text-align: right !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-status-high-orange-F2994A-use-on-status-high) !important; }
body.cbx-new-flow #bsm-app-root #spa-stage .cbx-flt-prev:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3) { display: block !important; margin: 0 0 var(--bsm3-space-sm) !important; text-align: left !important; font-size: var(--bsm3-text-medium-14px-use-on-text) !important; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4) !important; color: var(--bsm3-color-status-high-orange-F2994A-use-on-status-high) !important; }
} /* end @layer bsm-sleep-mode (admin page-type filter) */
@layer bsm-sleep-mode {
/* 18 Oct 2026 (Chris): the therapy's sleep plan button ("Create sleep plan with this therapy" / "✔ In your plan · View or edit my sleep plan")
   is an outline button, so it looks different to the solid End Day / Next buttons */
body.cbx-new-flow #bsm-app-root #spa-stage button.cbx-helper-plan:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4) { background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon) !important; }
body.cbx-new-flow #bsm-app-root[data-theme="sleep"] #spa-stage button.cbx-helper-plan:not(#cbx-w1):not(#cbx-w2):not(#cbx-w3):not(#cbx-w4):not(#cbx-w5):not(#cbx-w6) { background: var(--bsm3-transparent) !important; border: var(--bsm3-border-default) solid var(--bsm3-sleep-border-sleep) !important; color: var(--bsm3-sleep-border-sleep) !important; }
} /* end @layer bsm-sleep-mode (therapy plan button) */

/* 20 Oct 2026 (Chris): My Plan pop-up -- CBT-I at the top as the foundation therapy (no eye, no bin) */
#cbx-plan-ov .cbx-pz.cbx-pz-fnd:not(#cbx-x1):not(#cbx-x2):not(#cbx-x3) { border-style: solid !important; background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background) !important; }

/* 20 Oct 2026 (Chris): My Plan eye -- Intervention / Mechanism / Result, as in Sleep Planner's eye */
#cbx-plan-ov .cbx-pz-imr:not(#cbx-x1):not(#cbx-x2) { display: flex !important; flex-direction: column !important; gap: var(--bsm3-space-sm) !important; padding: var(--bsm3-space-md) !important; border: var(--bsm3-border-thin) solid var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; border-radius: var(--bsm3-radius-status-cards) !important; }
#cbx-plan-ov .cbx-pz-imr-l:not(#cbx-x1):not(#cbx-x2) { margin: 0 !important; font-size: var(--bsm3-text-large-16px-use-on-text) !important; line-height: 1.5 !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; }
#cbx-plan-ov .cbx-pz-imr-l b:not(#cbx-x1):not(#cbx-x2) { color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong) !important; }