/* ============================================================================ styleFoundation.css -- 21 Oct 2026 (Chris) The Sleep "Foundation" and "Support" tabs (sleep_platform/foundation/) and the condition tabs used on every Sleep page (.bsf-cond-row). Rules: --bsm3-* variables only (full names, css/brand.css), no inline styles. Day look is the default; Sleep look under #bsm-app-root[data-theme="sleep"]. Clickable things are (the site-wide day-mode rule restyles every button). ============================================================================ */ /* ---------------------------------------------------------------- page */ #bsm-app-root .bsf-page { display: flex; flex-direction: column; gap: var(--bsm3-space-lg); max-width: var(--bsm3-width-wide); margin: 0 auto; padding: var(--bsm3-space-lg) var(--bsm3-phone-margin-use-on-mobile-page-sides) var(--bsm3-space-xxl); font-family: var(--bsm3-font-body); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); } #bsm-app-root .bsf-head { display: flex; flex-direction: column; gap: var(--bsm3-space-xs); } #bsm-app-root .bsf-title { margin: 0; font-family: var(--bsm3-font-heading); font-size: var(--bsm3-size-page-title-24px-use-on-h1); font-weight: var(--bsm3-weight-bold-700-use-on-h1); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); } #bsm-app-root .bsf-strap { margin: 0; font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); } #bsm-app-root .bsf-lead { margin: 0; font-size: var(--bsm3-text-body-use-on-reading-text); color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text); } #bsm-app-root .bsf-note { margin: 0 0 var(--bsm3-space-sm); font-size: var(--bsm3-text-medium-14px-use-on-text); color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text); } #bsm-app-root .bsf-icon { width: var(--bsm3-icon-size-card); height: var(--bsm3-icon-size-card); } /* ---------------------------------------------------------------- condition tabs (every Sleep page) */ :is(#bsm-app-root, .np-wrapper, #sp-mysleeptherapies-root, #psth-wrapper) .bsf-cond-row { display: flex; flex-wrap: wrap; gap: var(--bsm3-space-sm); } :is(#bsm-app-root, .np-wrapper, #sp-mysleeptherapies-root, #psth-wrapper) .bsf-cond { display: inline-flex; align-items: center; min-height: calc(var(--bsm3-icon-size-container) + var(--bsm3-space-xs)); padding: 0 var(--bsm3-space-md); border-radius: var(--bsm3-radius-pills); border: var(--bsm3-border-thin) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers); background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); text-decoration: none; } :is(#bsm-app-root, .np-wrapper, #sp-mysleeptherapies-root, #psth-wrapper) .bsf-cond:hover { border-color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon); } :is(#bsm-app-root, .np-wrapper, #sp-mysleeptherapies-root, #psth-wrapper) .bsf-cond.bsf-cond-on { background: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); border-color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); } /* ---------------------------------------------------------------- All: programme cards */ #bsm-app-root .bsf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--bsm3-width-narrow), 1fr)); gap: var(--bsm3-space-md); } #bsm-app-root .bsf-card { display: flex; flex-direction: column; gap: var(--bsm3-space-xs); padding: var(--bsm3-space-lg); border-radius: var(--bsm3-radius-primary-cards); border: var(--bsm3-border-thin) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers); background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); text-decoration: none; box-shadow: var(--bsm3-elevation-soft); } #bsm-app-root .bsf-card:hover { border-color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon); } #bsm-app-root .bsf-card-top { display: flex; align-items: center; gap: var(--bsm3-space-sm); color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon); } #bsm-app-root .bsf-card-cond { font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); letter-spacing: var(--bsm3-section-label-tracking); text-transform: uppercase; color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text); } #bsm-app-root .bsf-card-name { font-family: var(--bsm3-font-heading); font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3); font-weight: var(--bsm3-weight-bold-700-use-on-h1); } #bsm-app-root .bsf-card-strap { font-size: var(--bsm3-text-medium-14px-use-on-text); color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); } #bsm-app-root .bsf-card-nofnd, #bsm-app-root .bsf-prog-nofnd { font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); } #bsm-app-root .bsf-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: var(--bsm3-space-sm); font-size: var(--bsm3-text-medium-14px-use-on-text); } #bsm-app-root .bsf-card-prog { color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text); } #bsm-app-root .bsf-card-open { font-weight: var(--bsm3-weight-bold-700-use-on-h1); color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); } /* ---------------------------------------------------------------- one programme */ #bsm-app-root .bsf-prog { display: flex; flex-direction: column; gap: var(--bsm3-space-md); } #bsm-app-root .bsf-prog-head { display: flex; flex-direction: column; gap: var(--bsm3-space-xs); } #bsm-app-root .bsf-prog-name { margin: 0; font-family: var(--bsm3-font-heading); font-size: var(--bsm3-size-section-heading-22px-use-on-h2); font-weight: var(--bsm3-weight-bold-700-use-on-h1); } #bsm-app-root .bsf-prog-strap { margin: 0; font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); } #bsm-app-root .bsf-prog-nofnd, #bsm-app-root .bsf-prog-meta { margin: 0; } #bsm-app-root .bsf-prog-meta { font-size: var(--bsm3-text-medium-14px-use-on-text); color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text); } #bsm-app-root .bsf-prog-grid { display: flex; flex-wrap: wrap; gap: var(--bsm3-space-lg); align-items: flex-start; } #bsm-app-root .bsf-days { flex: 1 1 var(--bsm3-width-narrow); max-width: calc(var(--bsm3-width-narrow) + var(--bsm3-space-xl)); display: flex; flex-direction: column; gap: var(--bsm3-space-xs); padding: var(--bsm3-space-sm); border-radius: var(--bsm3-radius-primary-cards); border: var(--bsm3-border-thin) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers); background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); } #bsm-app-root .bsf-day { display: flex; align-items: center; gap: var(--bsm3-space-sm); min-height: calc(var(--bsm3-icon-size-container) + var(--bsm3-space-sm)); padding: var(--bsm3-space-xs) var(--bsm3-space-sm); border-radius: var(--bsm3-radius-list-rows); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); text-decoration: none; font-size: var(--bsm3-text-medium-14px-use-on-text); } #bsm-app-root .bsf-day:hover { background: var(--bsm3-color-surface-pale-lavender-F1F0F9-use-on-card-background); } #bsm-app-root .bsf-day.bsf-day-on { background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background); color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); font-weight: var(--bsm3-weight-bold-700-use-on-h1); } #bsm-app-root .bsf-day.bsf-day-locked { color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text); } #bsm-app-root .bsf-day-n { flex: 0 0 auto; font-weight: var(--bsm3-weight-bold-700-use-on-h1); } #bsm-app-root .bsf-day-t { flex: 1 1 auto; min-width: 0; } #bsm-app-root .bsf-day-s { flex: 0 0 auto; color: var(--bsm3-color-status-normal-green-2E9E6C-use-on-status-normal); } #bsm-app-root .bsf-dayview { flex: 999 1 var(--bsm3-width-standard); min-width: 0; display: flex; flex-direction: column; gap: var(--bsm3-space-md); } #bsm-app-root .bsf-day-title { margin: 0; font-family: var(--bsm3-font-heading); font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3); font-weight: var(--bsm3-weight-bold-700-use-on-h1); } /* steps row: Watch > Learn > Therapies > Support > Recap */ #bsm-app-root .bsf-steps { display: flex; flex-wrap: wrap; gap: var(--bsm3-space-xs); } #bsm-app-root .bsf-step { display: inline-flex; align-items: center; min-height: calc(var(--bsm3-icon-size-container) + var(--bsm3-space-xs)); padding: 0 var(--bsm3-space-md); border-radius: var(--bsm3-radius-pills); background: var(--bsm3-color-surface-pale-lavender-F1F0F9-use-on-card-background); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); text-decoration: none; } #bsm-app-root .bsf-step.bsf-step-on { background: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); } #bsm-app-root .bsf-pane { display: flex; flex-direction: column; gap: var(--bsm3-space-md); } /* Watch */ #bsm-app-root .bsf-video { border-radius: var(--bsm3-radius-primary-cards); overflow: hidden; background: var(--bsm3-color-black-000000-use-on-bg-sleep); } #bsm-app-root .bsf-video-el { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; } /* Learn */ #bsm-app-root .bsf-learn { display: flex; flex-direction: column; gap: var(--bsm3-space-md); } #bsm-app-root .bsf-fact, #bsm-app-root .bsf-support-note { display: flex; flex-direction: column; gap: var(--bsm3-space-xs); padding: var(--bsm3-space-lg); border-radius: var(--bsm3-radius-primary-cards); border: var(--bsm3-border-thin) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers); background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); } #bsm-app-root .bsf-fact-eyebrow { margin: 0; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); letter-spacing: var(--bsm3-section-label-tracking); text-transform: uppercase; color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon); } #bsm-app-root .bsf-fact-title { margin: 0; font-family: var(--bsm3-font-heading); font-size: var(--bsm3-size-card-list-title-15px-use-on-h4); font-weight: var(--bsm3-weight-bold-700-use-on-h1); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); } #bsm-app-root .bsf-fact-body { margin: 0; font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.55; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); } #bsm-app-root .bsf-fact-list { margin: 0; padding-left: var(--bsm3-space-lg); display: flex; flex-direction: column; gap: var(--bsm3-space-xs); font-size: var(--bsm3-text-body-use-on-reading-text); line-height: 1.5; } #bsm-app-root .bsf-fact-quote { margin: 0; padding: var(--bsm3-space-sm) var(--bsm3-space-md); border-radius: var(--bsm3-radius-list-rows); background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background); font-style: italic; font-size: var(--bsm3-text-body-use-on-reading-text); } #bsm-app-root .bsf-fact-tip { margin: 0; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); } #bsm-app-root .bsf-fact-src, #bsm-app-root .bsf-link { font-size: var(--bsm3-text-small-12px-use-on-text); color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); } #bsm-app-root .bsf-doctor { display: flex; flex-direction: column; gap: var(--bsm3-space-xs); padding: var(--bsm3-space-md) var(--bsm3-space-lg); border-radius: var(--bsm3-radius-status-cards); background: var(--bsm3-color-caution-cream-FEF3C7-use-on-status-warning-background); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); } #bsm-app-root .bsf-doctor-h { margin: 0; font-size: var(--bsm3-size-card-list-title-15px-use-on-h4); font-weight: var(--bsm3-weight-bold-700-use-on-h1); } #bsm-app-root .bsf-doctor-t { margin: 0; font-size: var(--bsm3-text-medium-14px-use-on-text); line-height: 1.5; } /* Therapies */ #bsm-app-root .bsf-thers { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--bsm3-width-narrow), 1fr)); gap: var(--bsm3-space-md); } #bsm-app-root .bsf-ther { display: flex; flex-direction: column; gap: var(--bsm3-space-xs); padding: var(--bsm3-space-md); border-radius: var(--bsm3-radius-primary-cards); border: var(--bsm3-border-thin) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers); background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); } #bsm-app-root .bsf-ther.bsf-ther-fnd { border: var(--bsm3-border-thick) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon); } #bsm-app-root .bsf-ther-top { display: flex; align-items: center; gap: var(--bsm3-space-sm); } #bsm-app-root .bsf-ther-name { margin: 0; font-size: var(--bsm3-size-card-list-title-15px-use-on-h4); font-weight: var(--bsm3-weight-bold-700-use-on-h1); } #bsm-app-root .bsf-ther-fndline { margin: 0; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); } #bsm-app-root .bsf-ther-desc { margin: 0; font-size: var(--bsm3-text-medium-14px-use-on-text); color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text); } #bsm-app-root .bsf-pill { align-self: flex-start; padding: var(--bsm3-pill-chip-padding); border-radius: var(--bsm3-radius-pills); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); } #bsm-app-root .bsf-pill-p { background: var(--bsm3-color-body-light-mint-DCFCE7-use-on-body-pillar-background); color: var(--bsm3-color-body-deep-forest-green-166534-use-on-body-pillar-strong); } #bsm-app-root .bsf-pill-r { background: var(--bsm3-color-attention-pink-FEE2E2-use-on-status-alert-background); color: var(--bsm3-color-status-severe-red-C0392B-use-on-status-severe); } #bsm-app-root .bsf-add { align-self: stretch; display: inline-flex; justify-content: center; align-items: center; min-height: calc(var(--bsm3-icon-size-container) + var(--bsm3-space-sm)); margin-top: var(--bsm3-space-xs); border-radius: var(--bsm3-radius-pills); background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-medium-14px-use-on-text); text-decoration: none; } #bsm-app-root .bsf-add.bsf-add-in { background: var(--bsm3-color-body-light-mint-DCFCE7-use-on-body-pillar-background); color: var(--bsm3-color-body-deep-forest-green-166534-use-on-body-pillar-strong); } /* Support */ #bsm-app-root .bsf-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--bsm3-width-narrow), 1fr)); gap: var(--bsm3-space-md); } #bsm-app-root .bsf-product { display: flex; flex-direction: column; gap: var(--bsm3-space-xs); padding: var(--bsm3-space-md); border-radius: var(--bsm3-radius-primary-cards); border: var(--bsm3-border-thin) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers); background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); } #bsm-app-root .bsf-product-cond { margin: 0; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); letter-spacing: var(--bsm3-section-label-tracking); text-transform: uppercase; color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text); } #bsm-app-root .bsf-product-name { margin: 0; font-size: var(--bsm3-size-card-list-title-15px-use-on-h4); font-weight: var(--bsm3-weight-bold-700-use-on-h1); } #bsm-app-root .bsf-product-desc { margin: 0; font-size: var(--bsm3-text-medium-14px-use-on-text); color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text); } /* Recap */ #bsm-app-root .bsf-recap { display: flex; flex-direction: column; gap: var(--bsm3-space-md); } #bsm-app-root .bsf-q { display: flex; flex-direction: column; gap: var(--bsm3-space-sm); padding: var(--bsm3-space-md); border-radius: var(--bsm3-radius-primary-cards); border: var(--bsm3-border-thin) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers); background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); } #bsm-app-root .bsf-q-t { margin: 0; font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); font-size: var(--bsm3-text-body-use-on-reading-text); } #bsm-app-root .bsf-q-opts { display: flex; flex-wrap: wrap; gap: var(--bsm3-space-sm); } #bsm-app-root .bsf-q-opt { display: inline-flex; align-items: center; min-height: calc(var(--bsm3-icon-size-container) + var(--bsm3-space-xs)); padding: 0 var(--bsm3-space-md); border-radius: var(--bsm3-radius-pills); border: var(--bsm3-border-thin) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); text-decoration: none; font-size: var(--bsm3-text-medium-14px-use-on-text); } #bsm-app-root .bsf-q-opt.bsf-q-right { background: var(--bsm3-color-body-light-mint-DCFCE7-use-on-body-pillar-background); border-color: var(--bsm3-color-status-normal-green-2E9E6C-use-on-status-normal); color: var(--bsm3-color-body-deep-forest-green-166534-use-on-body-pillar-strong); } #bsm-app-root .bsf-q-opt.bsf-q-wrong { background: var(--bsm3-color-attention-pink-FEE2E2-use-on-status-alert-background); border-color: var(--bsm3-color-status-severe-red-C0392B-use-on-status-severe); color: var(--bsm3-color-status-severe-red-C0392B-use-on-status-severe); } #bsm-app-root .bsf-q-why { margin: 0; font-size: var(--bsm3-text-medium-14px-use-on-text); color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text); } #bsm-app-root .bsf-recap-score { margin: 0; font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-large-16px-use-on-text); } /* day end: Next / Finish */ #bsm-app-root .bsf-day-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bsm3-space-sm); } #bsm-app-root .bsf-next, #bsm-app-root .bsf-finish, #bsm-app-root .bsf-go { display: inline-flex; align-items: center; justify-content: center; min-height: calc(var(--bsm3-icon-size-container) + var(--bsm3-space-sm)); padding: 0 var(--bsm3-space-lg); border-radius: var(--bsm3-radius-pills); font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-medium-14px-use-on-text); text-decoration: none; } #bsm-app-root .bsf-next, #bsm-app-root .bsf-go { background: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); } #bsm-app-root .bsf-finish { background: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); } #bsm-app-root .bsf-finish.bsf-finish-done { background: var(--bsm3-color-body-light-mint-DCFCE7-use-on-body-pillar-background); color: var(--bsm3-color-body-deep-forest-green-166534-use-on-body-pillar-strong); } #bsm-app-root .bsf-msg { margin: 0; font-size: var(--bsm3-text-medium-14px-use-on-text); color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text); } #bsm-app-root .bsf-wait { display: flex; flex-direction: column; gap: var(--bsm3-space-md); align-items: flex-start; padding: var(--bsm3-space-lg); border-radius: var(--bsm3-radius-primary-cards); background: var(--bsm3-color-surface-pale-lavender-F1F0F9-use-on-card-background); } #bsm-app-root .bsf-wait-t { margin: 0; font-size: var(--bsm3-text-body-use-on-reading-text); } /* ---------------------------------------------------------------- the therapy pop-up */ #bsm-app-root .bsf-ov:not([hidden]) { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: var(--bsm3-space-md); background: color-mix(in srgb, var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) 55%, var(--bsm3-transparent)); } #bsm-app-root .bsf-ov-box { position: relative; width: 100%; max-width: calc(var(--bsm3-width-standard) * 1.44); max-height: 92vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--bsm3-space-md); padding: var(--bsm3-space-lg); border-radius: var(--bsm3-radius-primary-cards); background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); box-shadow: var(--bsm3-elevation-strong); } #bsm-app-root .bsf-ov-x { position: absolute; top: var(--bsm3-space-sm); right: var(--bsm3-space-md); display: inline-flex; align-items: center; justify-content: center; width: calc(var(--bsm3-icon-size-container) + var(--bsm3-space-sm)); height: calc(var(--bsm3-icon-size-container) + var(--bsm3-space-sm)); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); text-decoration: none; font-size: var(--bsm3-text-large-16px-use-on-text); } #bsm-app-root .bsf-ov-title { margin: 0; padding-right: calc(var(--bsm3-icon-size-container) + var(--bsm3-space-md)); font-family: var(--bsm3-font-heading); font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3); font-weight: var(--bsm3-weight-bold-700-use-on-h1); } #bsm-app-root .bsf-ov-frame { display: block; width: 100%; height: 60vh; border: 0; border-radius: var(--bsm3-radius-list-rows); } #bsm-app-root .bsf-ov-zone { display: flex; flex-direction: column; gap: var(--bsm3-space-xs); } #bsm-app-root .bsf-ov-zone[hidden] { display: none; } #bsm-app-root .bsf-ov-label { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); font-size: var(--bsm3-text-medium-14px-use-on-text); } #bsm-app-root .bsf-ov-sel { min-height: calc(var(--bsm3-icon-size-container) + var(--bsm3-space-sm)); padding: 0 var(--bsm3-space-sm); border-radius: var(--bsm3-radius-list-rows); border: var(--bsm3-border-thin) solid var(--bsm3-color-ink-navy-1E1B48-use-on-border); background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); font-size: var(--bsm3-text-large-16px-use-on-text); } #bsm-app-root .bsf-ov-status { margin: 0; font-size: var(--bsm3-text-medium-14px-use-on-text); color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text); } #bsm-app-root .bsf-aw { display: flex; flex-direction: column; gap: var(--bsm3-space-sm); } #bsm-app-root .bsf-aw-row { display: flex; align-items: center; gap: var(--bsm3-space-sm); min-height: calc(var(--bsm3-icon-size-container) + var(--bsm3-space-sm)); font-size: var(--bsm3-text-body-use-on-reading-text); } /* ---------------------------------------------------------------- phone */ @media (max-width: 640px) { #bsm-app-root .bsf-days { max-width: none; flex-basis: 100%; } #bsm-app-root .bsf-grid, #bsm-app-root .bsf-thers, #bsm-app-root .bsf-products { grid-template-columns: minmax(0, 1fr); } } /* ---------------------------------------------------------------- Sleep look */ #bsm-app-root[data-theme="sleep"] .bsf-page, #bsm-app-root[data-theme="sleep"] .bsf-title, #bsm-app-root[data-theme="sleep"] .bsf-fact-title, #bsm-app-root[data-theme="sleep"] .bsf-fact-body, #bsm-app-root[data-theme="sleep"] .bsf-day, #bsm-app-root[data-theme="sleep"] .bsf-card, #bsm-app-root[data-theme="sleep"] .bsf-q-opt, #bsm-app-root[data-theme="sleep"] .bsf-cond { color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); } #bsm-app-root[data-theme="sleep"] :is(.bsf-card, .bsf-days, .bsf-fact, .bsf-support-note, .bsf-ther, .bsf-product, .bsf-q, .bsf-cond) { background: var(--bsm3-sleep-glass-bg-night); border-color: var(--bsm3-sleep-border-night); } #bsm-app-root[data-theme="sleep"] :is(.bsf-lead, .bsf-note, .bsf-prog-meta, .bsf-ther-desc, .bsf-product-desc, .bsf-q-why, .bsf-msg, .bsf-card-prog, .bsf-card-cond, .bsf-product-cond) { color: var(--bsm3-sleep-text-muted-night); } #bsm-app-root[data-theme="sleep"] :is(.bsf-strap, .bsf-card-strap, .bsf-prog-strap, .bsf-ther-fndline, .bsf-fact-tip, .bsf-card-open, .bsf-fact-src, .bsf-link) { color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline); } #bsm-app-root[data-theme="sleep"] :is(.bsf-step, .bsf-wait, .bsf-day:hover) { background: var(--bsm3-sleep-inner-bg-night); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); } #bsm-app-root[data-theme="sleep"] :is(.bsf-step.bsf-step-on, .bsf-cond.bsf-cond-on, .bsf-next, .bsf-go) { background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); } #bsm-app-root[data-theme="sleep"] .bsf-day.bsf-day-on { background: var(--bsm3-sleep-inner-bg-night); color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline); } #bsm-app-root[data-theme="sleep"] .bsf-fact-quote { background: var(--bsm3-sleep-inner-bg-night); } /* Sleep look for the condition tabs on the other Sleep pages */ :is(.np-wrapper, #sp-mysleeptherapies-root, #psth-wrapper)[data-theme="sleep"] .bsf-cond { background: var(--bsm3-sleep-glass-bg-night); border-color: var(--bsm3-sleep-border-night); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); } :is(.np-wrapper, #sp-mysleeptherapies-root, #psth-wrapper)[data-theme="sleep"] .bsf-cond.bsf-cond-on { background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); } /* ---------------------------------------------------------------- a form page inside a pop-up (?bsm_embed=1) 21 Oct 2026 (Chris): the pop-up shows the FORM only -- no learning stacked on top. BMI Reduction: the learning in its card (the words, the quote, the research) is hidden; the warning and the tool stay. Restless Legs Programme: the 9-card course is hidden; Build Your Day Plan stays. Title badge rows hidden too. */ body.bsm-embed .bsm-bmi-card > p, body.bsm-embed .bsm-bmi-card > .bsm-strat-tip, body.bsm-embed .bsm-bmi-research, body.bsm-embed .bsm-bmi-head, body.bsm-embed .bsm-legs-course-shell, body.bsm-embed .bsm-legs-course-summary-card, body.bsm-embed .bsm-fnd-page-title { display: none !important; } /* ---------------------------------------------------------------- Analytics: condition tabs + Next step (21 Oct 2026) */ #bsm-app-root .bsf-an { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bsm3-space-md); margin: 0 0 var(--bsm3-space-lg); } #bsm-app-root .bsf-an-next { display: inline-flex; align-items: center; min-height: calc(var(--bsm3-icon-size-container) + var(--bsm3-space-sm)); padding: 0 var(--bsm3-space-lg); border-radius: var(--bsm3-radius-pills); border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon); color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-size: var(--bsm3-text-medium-14px-use-on-text); text-decoration: none; } #bsm-app-root[data-theme="sleep"] .bsf-an-next { border-color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline); color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline); } #bsm-app-root .wellness-card .bsf-an-next { min-height: var(--bsm3-icon-size-container); padding: 0 var(--bsm3-space-md); font-size: var(--bsm3-text-small-12px-use-on-text); } /* ---------------------------------------------------------------- Therapies, Planner, Plans (21 Oct 2026, Chris) */ #sp-mysleeptherapies-root .bsf-pg-head { display: flex; flex-direction: column; gap: var(--bsm3-space-xs); margin: 0 0 var(--bsm3-space-md); } #sp-mysleeptherapies-root .bsf-pg-title { margin: 0; font-family: var(--bsm3-font-heading); font-size: var(--bsm3-size-page-title-24px-use-on-h1); font-weight: var(--bsm3-weight-bold-700-use-on-h1); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); } #sp-mysleeptherapies-root .bsf-pg-strap { margin: 0; font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); } #sp-mysleeptherapies-root .bsf-fnd-strap { margin: var(--bsm3-space-xs) 0 0; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); } .np-wrapper #np-plan-conds { margin: 0 0 var(--bsm3-space-md); } .np-wrapper .bsf-pl-note { margin: var(--bsm3-space-sm) 0; padding: var(--bsm3-space-sm) var(--bsm3-space-md); border-radius: var(--bsm3-radius-primary-cards); border: var(--bsm3-border-thin) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon); font-size: var(--bsm3-text-medium-14px-use-on-text); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); } .np-wrapper :is(.bsf-pl-note a, .bsf-pl-learn) { font-weight: var(--bsm3-weight-bold-700-use-on-h1); color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); text-decoration: none; } .np-wrapper .bsf-pl-learn { display: inline-block; margin-top: var(--bsm3-space-xs); font-size: var(--bsm3-text-small-12px-use-on-text); } .np-wrapper .bsf-pl-tag { margin: var(--bsm3-space-xs) 0 0; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); letter-spacing: var(--bsm3-section-label-tracking); text-transform: uppercase; color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon); } #sp-mysleeptherapies-root[data-theme="sleep"] .bsf-pg-title, .np-wrapper[data-theme="sleep"] .bsf-pl-note { color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); } #sp-mysleeptherapies-root[data-theme="sleep"] :is(.bsf-pg-strap, .bsf-fnd-strap), .np-wrapper[data-theme="sleep"] :is(.bsf-pl-note a, .bsf-pl-learn, .bsf-pl-tag) { color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline); } .np-wrapper[data-theme="sleep"] .bsf-pl-note { border-color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline); } /* 23 Oct 2026 (walk-through test): anything the page hides (Learn/Recap panes, Next/Finish, answers, pop-up, filtered plans) must stay hidden even where a rule above gives it a display value. */ #bsm-app-root :is([class*="bsf-"], [id^="bsf-"])[hidden], .np-wrapper :is(.bsf-pl-note, .np-unified-card)[hidden] { display: none !important; } /* [i] tip next to the strap line (23 Oct 2026, Chris): hover, or tap on a phone (focus) */ #bsm-app-root .bsf-strap:has(.bsf-info) { position: relative; } #bsm-app-root .bsf-info { position: static; display: inline-flex; vertical-align: middle; margin-left: var(--bsm3-space-xs); cursor: help; outline: none; } #bsm-app-root .bsf-info-i { display: inline-flex; align-items: center; justify-content: center; width: var(--bsm3-icon-size-list-rows); height: var(--bsm3-icon-size-list-rows); border-radius: var(--bsm3-radius-pills); border: var(--bsm3-border-thin) solid currentColor; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); font-style: normal; line-height: 1; } #bsm-app-root .bsf-info-tip { position: absolute; top: calc(100% + var(--bsm3-space-xs)); left: 0; right: auto; z-index: 20; width: max-content; max-width: min(var(--bsm3-width-narrow), 100%); padding: var(--bsm3-space-sm) var(--bsm3-space-md); border-radius: var(--bsm3-radius-primary-cards); border: var(--bsm3-border-thin) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers); background: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); box-shadow: var(--bsm3-elevation-medium); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); line-height: 1.4; white-space: normal; display: none; } #bsm-app-root .bsf-info:is(:hover, :focus, :focus-within) .bsf-info-tip { display: block; } /* Condition tabs: the selected one is filled navy in the Day look too (Chris, 23 Oct 2026). The Day look (styleSleepDay.css) paints links white inside @layer bsm-day-mode with !important, which beats anything outside the layer -- so, like My Sleep Therapies, this sits INSIDE that layer with a stronger selector. Night look keeps its own (white) selected tab. */ @layer bsm-day-mode { body:not(:has(:is(#bsm-app-root, .np-wrapper)[data-theme="sleep"])) #bsm-app-root #spa-stage .bsf-cond-row .bsf-cond.bsf-cond-on, /* #spa-stage, not #bsm-portal-root: Analytics has no portal root (23 Oct 2026) */ body:not(:has(:is(#bsm-app-root, .np-wrapper)[data-theme="sleep"])) .np-wrapper #np-plan-conds .bsf-cond.bsf-cond-on[data-cond] { background-color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; border-color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; } } /* ---------------------------------------------------------------- ANALYTICS cards (23 Oct 2026, Chris) sleep_platform/pages/dashboard.php: the four assessment cards use the Foundation card look (.bsf-card). Title alongside the icon; "Your Assessment" strap; what the assessment asks; the result as a bigger pill. */ #bsm-app-root .bsf-head { display: flex; flex-direction: column; gap: var(--bsm3-space-xs); margin: 0 0 var(--bsm3-space-md); } #bsm-app-root .bsf-an-grid { margin-top: var(--bsm3-space-lg); } #bsm-app-root .bsf-an-grid .bsf-card-top { gap: var(--bsm3-space-sm); } #bsm-app-root .bsf-an-grid .bsf-card-name { margin: 0; } #bsm-app-root .bsf-an-desc { margin: 0; font-size: var(--bsm3-text-medium-14px-use-on-text); line-height: 1.5; color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text); } #bsm-app-root .bsf-an-stat { display: inline-flex; align-items: center; gap: var(--bsm3-space-sm); padding: var(--bsm3-space-xs) var(--bsm3-space-md); border-radius: var(--bsm3-radius-pills); border: var(--bsm3-border-default) solid; font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); } #bsm-app-root .bsf-an-dot { display: inline-block; width: var(--bsm3-space-md); height: var(--bsm3-space-md); border-radius: var(--bsm3-radius-pills); } /* Result colours. Inside the Day layer (styleSleepDay.css repaints backgrounds with !important there), so they win in the Day look too; the Night look reads the same colours. */ @layer bsm-day-mode { body #bsm-app-root #spa-stage .bsf-an-grid .bsf-an-stat { background-color: var(--bsm3-color-surface-pale-lavender-F1F0F9-use-on-card-background) !important; border-color: var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; } body #bsm-app-root #spa-stage .bsf-an-grid .bsf-an-stat .bsf-an-dot { background-color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text) !important; } body #bsm-app-root #spa-stage .bsf-an-grid .bsf-an-stat.bsf-an-stat-green { background-color: var(--bsm3-color-body-light-mint-DCFCE7-use-on-body-pillar-background) !important; border-color: var(--bsm3-color-body-outline-light-green-86EFAC-use-on-body-pillar-outline) !important; color: var(--bsm3-color-body-deep-forest-green-166534-use-on-body-pillar-strong) !important; } body #bsm-app-root #spa-stage .bsf-an-grid .bsf-an-stat-green .bsf-an-dot { background-color: var(--bsm3-color-status-normal-green-2E9E6C-use-on-status-normal) !important; } body #bsm-app-root #spa-stage .bsf-an-grid .bsf-an-stat.bsf-an-stat-yellow { background-color: var(--bsm3-color-caution-cream-FEF3C7-use-on-status-warning-background) !important; border-color: var(--bsm3-color-status-elevated-yellow-EAB308-use-on-status-elevated) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; } body #bsm-app-root #spa-stage .bsf-an-grid .bsf-an-stat-yellow .bsf-an-dot { background-color: var(--bsm3-color-status-elevated-yellow-EAB308-use-on-status-elevated) !important; } body #bsm-app-root #spa-stage .bsf-an-grid .bsf-an-stat.bsf-an-stat-orange { background-color: var(--bsm3-color-caution-cream-FEF3C7-use-on-status-warning-background) !important; border-color: var(--bsm3-color-status-high-orange-F2994A-use-on-status-high) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; } body #bsm-app-root #spa-stage .bsf-an-grid .bsf-an-stat-orange .bsf-an-dot { background-color: var(--bsm3-color-status-high-orange-F2994A-use-on-status-high) !important; } body #bsm-app-root #spa-stage .bsf-an-grid .bsf-an-stat.bsf-an-stat-red { background-color: var(--bsm3-color-attention-pink-FEE2E2-use-on-status-alert-background) !important; 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 #bsm-app-root #spa-stage .bsf-an-grid .bsf-an-stat-red .bsf-an-dot { background-color: var(--bsm3-color-status-severe-red-C0392B-use-on-status-severe) !important; } } /* Condition tabs on ONE line on every phone (Chris, 23 Oct 2026): smaller words, tighter padding and gaps, each tab stretches to share the row. No wrapping, no hamburger. */ @media (max-width: 640px) { :is(#bsm-app-root, .np-wrapper, #sp-mysleeptherapies-root, #psth-wrapper) .bsf-cond-row { flex-wrap: nowrap; gap: var(--bsm3-space-xs); } :is(#bsm-app-root, .np-wrapper, #sp-mysleeptherapies-root, #psth-wrapper) .bsf-cond { flex: 1 1 auto; justify-content: center; min-width: 0; min-height: var(--bsm3-icon-size-container); padding: 0 var(--bsm3-space-sm); font-size: var(--bsm3-text-small-12px-use-on-text); white-space: nowrap; } } @media (max-width: 380px) { :is(#bsm-app-root, .np-wrapper, #sp-mysleeptherapies-root, #psth-wrapper) .bsf-cond { padding: 0 calc(var(--bsm3-space-xs) * 1.5); font-size: var(--bsm3-text-tiny-10px-use-on-text); } } /* 23 Oct 2026 (Chris): the [i] tip is shown with display, not visibility -- the Night look makes every span visible. It opens under the strap line, lined up on its left edge, so it never runs off the screen. */ /* Night look: the selected condition tab is white with navy words (the Night layer repaints tabs, so this sits inside it). */ @layer bsm-sleep-mode { #bsm-app-root[data-theme="sleep"] #spa-stage .bsf-cond-row .bsf-cond.bsf-cond-on:not(#bsf-x1):not(#bsf-x2), .np-wrapper[data-theme="sleep"] #np-plan-conds .bsf-cond.bsf-cond-on:not(#bsf-x1):not(#bsf-x2) { background-color: 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-ink-navy-1E1B48-use-on-primary-text) !important; } #bsm-app-root[data-theme="sleep"] .bsf-info-tip:not(#bsf-x1):not(#bsf-x2) { background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; } } /* ---------------------------------------------------------------- 24 Oct 2026 (Chris): ONE route -- no Foundation tab */ /* Therapies: what a Foundation therapy is (Insomnia / Apnea / Circadian) */ #sp-mysleeptherapies-root .mst-fnd-intro { display: flex; flex-direction: column; gap: var(--bsm3-space-xs); margin: 0 0 var(--bsm3-space-md); padding: var(--bsm3-space-md); border-radius: var(--bsm3-radius-primary-cards); border: var(--bsm3-border-thin) solid var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline); background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background); } #sp-mysleeptherapies-root .mst-fnd-intro-h { margin: 0; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); letter-spacing: var(--bsm3-section-label-tracking); text-transform: uppercase; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); } #sp-mysleeptherapies-root .mst-fnd-intro-t { margin: 0; font-size: var(--bsm3-text-medium-14px-use-on-text); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); } #sp-mysleeptherapies-root .mst-fnd-intro[hidden] { display: none !important; } #sp-mysleeptherapies-root[data-theme="sleep"] .mst-fnd-intro { background: transparent; } #sp-mysleeptherapies-root[data-theme="sleep"] .mst-fnd-intro-h { color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline); } #sp-mysleeptherapies-root[data-theme="sleep"] .mst-fnd-intro-t { color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); } /* Planner pop-up: Foundation set-up + "Start Day 1 now?" */ .np-fnd-setup { display: flex; flex-direction: column; gap: var(--bsm3-space-sm); } .np-fnd-setup[hidden], .np-fnd-setup [hidden] { display: none !important; } .np-fnd-setup-t { margin: 0; font-size: var(--bsm3-text-medium-14px-use-on-text); } .np-fnd-setup-date { display: flex; flex-direction: column; gap: var(--bsm3-space-xs); } .np-fnd-setup-l { font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); } .np-fnd-setup-n { margin: 0; font-size: var(--bsm3-text-small-12px-use-on-text); color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text); } #np-modal-fnd .np-fnd-box { display: flex; flex-direction: column; gap: var(--bsm3-space-md); } #np-modal-fnd .np-fnd-box .np-save-btn { width: 100%; margin: 0; } #np-modal-fnd .np-fnd-later { background: transparent; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); border: var(--bsm3-border-thin) solid var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline); } /* Plans card: "Continue -> Day N" */ .np-wrapper .bsf-pl-go { display: flex; flex-direction: column; gap: var(--bsm3-space-xs); margin: var(--bsm3-space-sm) 0; padding: var(--bsm3-space-sm) var(--bsm3-space-md); border-radius: var(--bsm3-radius-primary-cards); border: var(--bsm3-border-thin) solid var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline); background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background); } .np-wrapper .bsf-pl-go-h { display: flex; align-items: center; gap: var(--bsm3-space-xs); margin: 0; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); } .np-wrapper .bsf-pl-go-line { margin: 0; font-size: var(--bsm3-text-small-12px-use-on-text); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); } .np-wrapper .bsf-pl-go-link { align-self: flex-start; padding: var(--bsm3-space-xs) var(--bsm3-space-md); border-radius: var(--bsm3-radius-pills); background: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-decoration: none; } .np-wrapper[data-theme="sleep"] .bsf-pl-go { background: transparent; } .np-wrapper[data-theme="sleep"] :is(.bsf-pl-go-h, .bsf-pl-go-line) { color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); } .np-wrapper[data-theme="sleep"] .bsf-pl-go-link { background: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); } /* Programme day page: "<- Back to " + the eyebrow */ #bsm-app-root .bsf-head-plan { display: flex; flex-direction: column; gap: var(--bsm3-space-xs); } #bsm-app-root .bsf-back-plan { align-self: flex-start; font-size: var(--bsm3-text-medium-14px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); text-decoration: none; } #bsm-app-root .bsf-eyebrow { margin: 0; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); letter-spacing: var(--bsm3-section-label-tracking); text-transform: uppercase; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); } #bsm-app-root[data-theme="sleep"] :is(.bsf-back-plan, .bsf-eyebrow) { color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline); } /* the Foundation therapy's own card, full width inside its box (moved there by mstApplyCond) */ #sp-mysleeptherapies-root .mst-fnd-slot { display: flex; flex-direction: column; margin-top: var(--bsm3-space-sm); } #sp-mysleeptherapies-root .mst-fnd-slot:empty { display: none; } #sp-mysleeptherapies-root .mst-fnd-slot .mtd-card { width: 100%; max-width: none; box-sizing: border-box; } /* Foundation therapy View pop-up (24 Oct 2026): three numbered points in violet circles */ .mst-fnd-view { display: flex; flex-direction: column; gap: var(--bsm3-space-md); } .mst-fnd-view .mst-fnd-view-list { counter-reset: mstfv; list-style: none; display: flex; flex-direction: column; gap: var(--bsm3-space-sm); margin: 0; padding: 0; } .mst-fnd-view .mst-fnd-view-li { counter-increment: mstfv; position: relative; display: flex; align-items: flex-start; gap: var(--bsm3-space-sm); margin: 0; padding: var(--bsm3-space-sm) var(--bsm3-space-md); border-radius: var(--bsm3-radius-primary-cards); background: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background); font-size: var(--bsm3-text-medium-14px-use-on-text); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); } .mst-fnd-view .mst-fnd-view-li::before { content: counter(mstfv); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: calc(var(--bsm3-space-md) + var(--bsm3-space-sm)); height: calc(var(--bsm3-space-md) + var(--bsm3-space-sm)); border-radius: var(--bsm3-radius-pills); background: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); } /* Therapies: the Analytics condition menu -- selected tab navy (Day) / white (Night), same as Analytics (24 Oct 2026) */ @layer bsm-day-mode { body:not(:has(#sp-mysleeptherapies-root[data-theme="sleep"])) #sp-mysleeptherapies-root .bsf-cond-row .bsf-cond.bsf-cond-on:not(#bsf-x1):not(#bsf-x2) { background-color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; border-color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text) !important; color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; } } @layer bsm-sleep-mode { #sp-mysleeptherapies-root[data-theme="sleep"] .bsf-cond-row .bsf-cond.bsf-cond-on:not(#bsf-x1):not(#bsf-x2) { background-color: 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-ink-navy-1E1B48-use-on-primary-text) !important; } } /* Therapies: space between the condition menu and the My / All Therapies tabs (24 Oct 2026, Chris) */ #sp-mysleeptherapies-root .mtd-content > .bsf-cond-row { margin-bottom: var(--bsm3-space-md); } /* ---------------------------------------------------------------- 24 Oct 2026 (Chris, mockup P6): Planner pop-up for a Foundation therapy */ #np-modal-config :is(.np-fnd-sub, .np-fnd-course, .np-fnd-how)[hidden], #np-modal-config #conf-detail[hidden], #np-modal-config #conf-cat[hidden] { display: none !important; } #np-modal-config .np-fnd-sub { margin: var(--bsm3-space-sm) 0; font-size: var(--bsm3-text-medium-14px-use-on-text); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); } #np-modal-config .np-fnd-course { display: flex; align-items: center; justify-content: center; gap: var(--bsm3-space-sm); margin: 0 0 var(--bsm3-space-md); padding: var(--bsm3-space-sm) var(--bsm3-space-md); border-radius: var(--bsm3-radius-pills); border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); font-weight: var(--bsm3-weight-bold-700-use-on-h1); text-decoration: none; } #np-modal-config .np-fnd-how { display: flex; flex-direction: column; gap: var(--bsm3-space-sm); margin: 0 0 var(--bsm3-space-md); padding: var(--bsm3-space-md); border-radius: var(--bsm3-radius-primary-cards); background: var(--bsm3-color-surface-pale-lavender-F1F0F9-use-on-card-background); } #np-modal-config .np-fnd-how-h { margin: 0; font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); letter-spacing: var(--bsm3-section-label-tracking); text-transform: uppercase; color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); } #np-modal-config .np-fnd-how-list { counter-reset: npfh; list-style: none; display: flex; flex-direction: column; gap: var(--bsm3-space-sm); margin: 0; padding: 0; } #np-modal-config .np-fnd-how-list li { counter-increment: npfh; display: flex; align-items: flex-start; gap: var(--bsm3-space-sm); margin: 0; font-size: var(--bsm3-text-medium-14px-use-on-text); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); } #np-modal-config .np-fnd-how-list li::before { content: counter(npfh); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: calc(var(--bsm3-space-md) + var(--bsm3-space-sm)); height: calc(var(--bsm3-space-md) + var(--bsm3-space-sm)); border-radius: var(--bsm3-radius-pills); background: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-bold-700-use-on-h1); } @layer bsm-sleep-mode { body:has(.np-wrapper[data-theme="sleep"]) #np-modal-config :is(.np-fnd-sub, .np-fnd-how-list li):not(#x1):not(#x2) { color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; } body:has(.np-wrapper[data-theme="sleep"]) #np-modal-config .np-fnd-how:not(#x1):not(#x2) { background: transparent !important; border: var(--bsm3-border-thin) solid var(--bsm3-color-white-FFFFFF-use-on-bg-day-general) !important; } body:has(.np-wrapper[data-theme="sleep"]) #np-modal-config :is(.np-fnd-course, .np-fnd-how-h):not(#x1):not(#x2) { color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; border-color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline) !important; } } /* BMI Reduction form inside the pop-up: no empty card on top (its learning is hidden there; only the "no weight-loss target" warning may show) */ body.bsm-embed .bsm-strat-grid:has(.bsm-bmi-card):not(:has(.bsm-bmi-warn:not(.is-hidden))) { display: none !important; } /* ---------------------------------------------------------------- 24 Oct 2026 (Chris): OSA / Circadian / Restless Legs course days in the CBT-I lesson look. The cards, header, steps and buttons come from css/styleCbtiIndex.css; only these few inner bits are ours. */ #bsm-app-root #spa-stage .bsf-lesson .bsf-cf-p { margin: var(--bsm3-space-sm) 0 0; font-size: var(--bsm3-text-large-16px-use-on-text); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); } #bsm-app-root #spa-stage .bsf-lesson .bsf-cf-em { font-weight: var(--bsm3-weight-bold-700-use-on-h1); } #bsm-app-root #spa-stage .bsf-lesson :is(.bsf-cf-list, .bsf-fact-list) { margin: var(--bsm3-space-sm) 0 0; padding-left: var(--bsm3-space-lg); font-size: var(--bsm3-text-medium-14px-use-on-text); } #bsm-app-root #spa-stage .bsf-lesson .bsf-cf-src { display: inline-block; margin-top: var(--bsm3-space-sm); font-size: var(--bsm3-text-small-12px-use-on-text); color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); } #bsm-app-root #spa-stage .bsf-lesson .bsf-video { margin-top: var(--bsm3-space-md); } #bsm-app-root #spa-stage .bsf-lesson .bsf-video-el { display: block; width: 100%; border-radius: var(--bsm3-radius-primary-cards); } #bsm-app-root #spa-stage .bsf-lesson .cbx-helpers { display: flex; flex-direction: column; gap: var(--bsm3-space-md); } #bsm-app-root #spa-stage .bsf-lesson .bsf-recap { display: flex; flex-direction: column; gap: var(--bsm3-space-md); } #bsm-app-root #spa-stage .bsf-lesson .bsf-wait { display: flex; flex-direction: column; gap: var(--bsm3-space-md); } /* "In your plan": the CBT-I course's pale "added" look */ body.cbx-new-flow #bsm-app-root #spa-stage .bsf-lesson button.cbx-helper-plan.bsf-add-in: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; } #bsm-app-root[data-theme="sleep"] #spa-stage .bsf-lesson :is(.bsf-cf-p, .bsf-cf-list, .bsf-fact-list) { color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); } #bsm-app-root[data-theme="sleep"] #spa-stage .bsf-lesson .bsf-cf-src { color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline); } /* ---------------------------------------------------------------- 24 Oct 2026 (Chris): Plans list -- two columns on desktop, one on phones; more room inside each card; the course's Continue button in Sleep violet */ .np-wrapper #np-plans-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bsm3-space-lg); align-items: start; } @media (min-width: 900px) { .np-wrapper #np-plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .np-wrapper #np-plans-grid > :not(.np-unified-card) { grid-column: 1 / -1; } .np-wrapper #np-plans-grid .np-unified-card { display: flex; flex-direction: column; gap: var(--bsm3-space-lg); margin: 0; padding: var(--bsm3-space-xl) var(--bsm3-space-lg); } .np-wrapper #np-plans-grid .np-unified-card[hidden] { display: none !important; } .np-wrapper #np-plans-grid .np-unified-card > div:first-of-type, .np-wrapper #np-plans-grid .np-unified-card > div:first-of-type > div { display: flex; flex-direction: column; gap: var(--bsm3-space-md); width: 100%; } .np-wrapper #np-plans-grid .np-unified-card h3 { margin: 0; padding-right: var(--bsm3-space-xxl); } .np-wrapper #np-plans-grid .np-unified-card p { margin: 0; } .np-wrapper #np-plans-grid .bsf-pl-go { margin: 0; padding: var(--bsm3-space-md) var(--bsm3-space-lg); gap: var(--bsm3-space-sm); border: 0; } /* 24 Oct 2026 (Chris): no border inside the card border */ .np-wrapper #np-plans-grid .bsf-pl-go-link { margin-top: var(--bsm3-space-xs); padding: var(--bsm3-space-sm) var(--bsm3-space-lg); } .np-wrapper #np-plans-grid .np-card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bsm3-space-sm); margin: 0; } .np-wrapper #np-plans-grid .np-card-actions > :nth-child(3) { grid-column: 1 / -1; } @layer bsm-day-mode { body:not(:has(.np-wrapper[data-theme="sleep"])) .np-wrapper #np-plans-grid .bsf-pl-go-link:not(#x1):not(#x2) { background-color: 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; border: 0 !important; } } @layer bsm-sleep-mode { .np-wrapper[data-theme="sleep"] #np-plans-grid .bsf-pl-go-link:not(#x1):not(#x2) { background-color: 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; } } /* 24 Oct 2026 (Chris): a Sleep form page shown inside a pop-up (?bsm_embed=1) -- no empty band at the top (the page frame sits 60px down for the site header, which embed mode hides) */ html body.bsm-embed.bsm-sleep-page { padding-top: 0 !important; } body.bsm-embed #bsm-app-root { top: 0 !important; } body.bsm-embed #spa-stage { padding-top: 0 !important; } body.bsm-embed #bsm-bmi-tool { margin-top: 0 !important; }