/* Rahmah identity, Phase 3 (a): the signed-in dashboard (#screen-my-sessions). * Presentation only. Source: docs/design/mockups/dashboard/dashboard.html (approved by the owner, 2026-10-10) * and the handoff pack (docs/bym/rahmah). Corners: 4px controls, 8px media/hero, square elsewhere. * * SCOPE: one screen, #screen-my-sessions. Every rule starts with #screen-my-sessions. * TO REVERT: delete the one in index.html's * (the four-tab bar markup at the end of #screen-my-sessions is hidden without this file). * * Tokens come from bym/styles/rahmah.css (--bym-*). Fonts: "BYM Afacad" is declared in rahmah-landing.css. */ #screen-my-sessions { --font-display: "BYM Afacad", "Afacad Flux", "Avenir Next", Arial, sans-serif; --font-body: var(--font-display); --font-ui: var(--font-display); --font-mono: var(--font-display); --r-sm: 4px; --r-md: 4px; --r-lg: 8px; --r-pill: 4px; --line: var(--bym-rule); --line-soft: var(--bym-rule); --line-faint: var(--bym-rule); --text: var(--bym-text); --text-body: var(--bym-text); --muted: var(--bym-text-muted); --muted-2: var(--bym-text-muted); --faint: var(--bym-text-muted); --surface: var(--bym-surface); font-family: var(--font-display); font-size: var(--bym-text-base); line-height: 1.55; color: var(--bym-text); } #screen-my-sessions *, #screen-my-sessions *::before, #screen-my-sessions *::after { box-shadow: none !important; text-shadow: none !important; } #screen-my-sessions :where(a, button, input, [tabindex], .dash-sidebar-nav-item, .dash-path-card):focus-visible { outline: 3px solid var(--bym-focus); outline-offset: 3px; } /* ---- Shell: Fig sidebar ---- */ #screen-my-sessions .dash-sidebar { background: var(--bym-primary); border-right: 0; width: 272px; padding: 24px 16px; color: var(--bym-on-primary); } #screen-my-sessions .dash-sidebar-brand { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; color: var(--bym-on-primary); margin-bottom: 24px; padding: 0; } #screen-my-sessions .dash-sidebar-code-block { background: rgba(251,245,237,.08); border: 1px solid rgba(251,245,237,.3); border-radius: 4px; padding: 12px; margin-bottom: 24px; } #screen-my-sessions .dash-sidebar-code-label { font-family: var(--font-display); font-size: .875rem; text-transform: none; letter-spacing: 0; color: var(--bym-on-primary); opacity: .85; margin-bottom: 6px; } #screen-my-sessions .dash-code-pill { background: var(--bym-surface); border: 1px solid var(--bym-rule); border-radius: 4px; color: var(--bym-primary); font-family: var(--font-display); font-weight: 600; letter-spacing: .08em; } #screen-my-sessions .dash-sidebar .dash-code-pill { background: transparent; border: 0; color: var(--bym-on-primary); font-size: 1.125rem; padding: 0; text-align: left; } #screen-my-sessions .dash-sidebar-code-row { gap: 8px; } #screen-my-sessions .dash-sidebar-code-row .dash-code-pill { flex: 1 0 100%; text-align: left; font-size: 1.125rem; padding: 0 0 4px; } #screen-my-sessions .dash-sidebar-code-row .btn { min-height: 44px; padding: 0 14px; border-radius: 4px; background: transparent; color: var(--bym-on-primary); border: 1px solid rgba(251,245,237,.55); font-family: var(--font-display); font-weight: 500; font-size: .9375rem; background-image: none; } #screen-my-sessions .dash-sidebar-code-row .btn.gh-btn-primary { background: var(--bym-on-primary); color: var(--bym-primary); border-color: var(--bym-on-primary); font-weight: 600; } #screen-my-sessions .dash-sidebar-nav { gap: 2px; } #screen-my-sessions .dash-sidebar-nav-item { min-height: 46px; padding: 8px 12px; border-radius: 0; border-inline-start: 3px solid transparent; color: var(--bym-on-primary); font-size: 1.0625rem; font-weight: 500; gap: 12px; } #screen-my-sessions .dash-sidebar-nav-item:hover { background: rgba(251,245,237,.08); color: var(--bym-on-primary); } #screen-my-sessions .dash-sidebar-nav-item.active { background: rgba(251,245,237,.12); color: var(--bym-on-primary); border-inline-start-color: var(--rahmah-copper); font-weight: 600; } #screen-my-sessions .dash-sidebar-nav-icon { width: 20px; font-size: 14px; } #screen-my-sessions .dash-nav-badge { background: var(--rahmah-clay); color: #fff; font-family: var(--font-display); font-size: .8125rem; font-weight: 600; border-radius: 999px; min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; } #screen-my-sessions .dash-sidebar-footer { border-top-color: rgba(251,245,237,.25); } #screen-my-sessions .dash-sidebar-footer .dash-sidebar-nav-item { color: var(--bym-on-primary); font-size: 1rem; opacity: .9; } #screen-my-sessions .dash-mobile-toggle { min-width: 44px; min-height: 44px; border: 1px solid rgba(251,245,237,.55); border-radius: 4px; background: transparent; color: var(--bym-on-primary); } /* ---- Main column ---- */ #screen-my-sessions .dash-main { max-width: 980px; padding: 40px clamp(16px, 4vw, 56px) 96px; } #screen-my-sessions .dash-eyebrow { font-family: var(--font-display); font-size: .875rem; font-weight: 600; letter-spacing: .08em; color: var(--bym-human-text); text-align: left; } #screen-my-sessions .dash-main h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--bym-primary); font-size: var(--bym-text-title); } #screen-my-sessions .dash-main .subtitle { color: var(--bym-text-muted) !important; font-size: var(--bym-text-base) !important; } #screen-my-sessions .dash-section-label { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: .875rem; font-weight: 600; letter-spacing: .08em; color: var(--bym-text-muted); margin: 36px 0 12px; } #screen-my-sessions .dash-section-label::after { content: ""; flex: 1; border-top: 1px solid var(--bym-rule); } #screen-my-sessions .dash-section-label-secondary { opacity: 1; } /* "Begin / Continue questionnaire" hero */ #screen-my-sessions .begin-hero { background: var(--bym-primary); border: 0; border-radius: 8px; padding: 28px; margin-bottom: 32px; display: grid; gap: 14px; justify-content: stretch; } #screen-my-sessions .begin-hero-complete { background: var(--bym-primary); } #screen-my-sessions .begin-hero-text { min-width: 0; } #screen-my-sessions .begin-hero-eyebrow, #screen-my-sessions .begin-hero-complete .begin-hero-eyebrow { font-family: var(--font-display); color: var(--rahmah-dawn); font-size: .875rem; letter-spacing: .08em; } #screen-my-sessions .begin-hero-title { font-family: var(--font-display); font-size: var(--bym-text-xl); font-weight: 600; letter-spacing: -.02em; color: var(--bym-on-primary); } #screen-my-sessions .begin-hero-body, #screen-my-sessions .begin-hero-body strong { color: var(--bym-on-primary); font-size: var(--bym-text-base); max-width: 56ch; } #screen-my-sessions .begin-hero-cta { align-items: flex-start; gap: 12px; } #screen-my-sessions .begin-hero-btn { background: var(--bym-on-primary); background-image: none; color: var(--bym-primary); border: 1px solid var(--bym-on-primary); border-radius: 4px; min-height: 48px; padding: 10px 22px; font-family: var(--font-display); font-weight: 600; font-size: 1rem; transform: none; } #screen-my-sessions .begin-hero-btn:hover { background: var(--bym-surface-soft); transform: none; } #screen-my-sessions .begin-hero-progress { font-family: var(--font-display); text-transform: none; letter-spacing: 0; color: var(--bym-on-primary); font-size: 1rem; } #screen-my-sessions .section-dot { background: rgba(251,245,237,.28); border-radius: 2px; } #screen-my-sessions .section-dot.filled { background: var(--rahmah-copper); } /* Connection requests, notification cards */ #screen-my-sessions .notif-card { background: var(--bym-surface-soft); border: 0; border-inline-start: 3px solid var(--bym-primary); border-radius: 0; padding: 16px 18px; } #screen-my-sessions .notif-card-subtitle { font-family: var(--font-display); font-size: .875rem; letter-spacing: .08em; color: var(--bym-human-text); } #screen-my-sessions .notif-card-title { font-family: var(--font-display); font-size: var(--bym-text-base); } #screen-my-sessions .notif-card-actions a { color: var(--bym-primary); } /* Buttons: 4px, 44px+, Semibold */ #screen-my-sessions .dash-main .btn, #screen-my-sessions .dash-main .gh-btn-primary { border-radius: 4px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 1rem; background-image: none; transform: none; } #screen-my-sessions .dash-main .btn-gold, #screen-my-sessions .dash-main .gh-btn-primary { background: var(--bym-primary); color: var(--bym-on-primary); border: 1px solid var(--bym-primary); } #screen-my-sessions .dash-main .btn-outline { background: transparent; color: var(--bym-primary); border: 1px solid var(--bym-primary); } #screen-my-sessions .dash-main .btn-outline:hover:not(:disabled) { background: var(--bym-surface-soft); } /* Guidance search */ #screen-my-sessions #dash-guidance-search-input { min-height: 48px; border: 1px solid var(--bym-border) !important; border-radius: 4px !important; background: var(--bym-surface) !important; font-family: var(--font-display); font-size: var(--bym-text-base) !important; } /* Ways to connect: three route cards */ #screen-my-sessions .dash-path-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } #screen-my-sessions .dash-path-grid-secondary .dash-path-card { opacity: 1; padding: 20px; } #screen-my-sessions .dash-path-card { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 210px; padding: 20px; background: var(--bym-surface); border: 1px solid var(--bym-rule); border-radius: 0; transform: none; } #screen-my-sessions .dash-path-card:hover { transform: none; border-color: var(--bym-primary); } #screen-my-sessions .dash-path-num, #screen-my-sessions .dash-path-grid-secondary .dash-path-num { width: auto; height: auto; background: none; border: 0; color: var(--bym-text-muted); font-size: .9375rem; font-weight: 400; } #screen-my-sessions .dash-path-text { font-size: 1rem; color: var(--bym-text-muted); flex: 0 1 auto; } #screen-my-sessions .dash-path-text strong { display: block; font-size: var(--bym-text-lg); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--bym-primary); margin-bottom: 8px; } #screen-my-sessions #dash-pool-alert-status { font-size: .9375rem !important; color: var(--bym-success) !important; font-weight: 500; } #screen-my-sessions .dash-path-arrow { margin-top: auto; color: var(--bym-primary); font-weight: 600; } #screen-my-sessions .leave-link { color: var(--bym-primary); font-weight: 500; font-size: 1rem; } #screen-my-sessions .leave-link:hover { color: var(--bym-primary); text-decoration: underline; text-underline-offset: 4px; } @media (max-width: 900px) { #screen-my-sessions .dash-path-grid { grid-template-columns: 1fr; } #screen-my-sessions .dash-path-card { min-height: 0; } } /* ---- Phone: Fig top bar, code strip under it, four-tab bar ---- */ #screen-my-sessions .dash-tabbar { display: none; } @media (max-width: 760px) { #screen-my-sessions .dash-sidebar { width: 100%; padding: 8px 16px 12px; position: sticky; top: 0; z-index: 5; } #screen-my-sessions .dash-sidebar-brand { margin-bottom: 0; } #screen-my-sessions .dash-sidebar-topbar { padding: 0; } /* the personal code stays on show as a compact strip, not behind the menu */ #screen-my-sessions .dash-sidebar-code-block { display: block; margin: 8px 0 0; padding: 8px 12px; } #screen-my-sessions .dash-sidebar-code-label { display: none; } #screen-my-sessions .dash-sidebar-code-row { flex-wrap: nowrap; } #screen-my-sessions .dash-sidebar-code-row .dash-code-pill { flex: 1 1 auto; padding: 0; font-size: 1rem; } #screen-my-sessions .dash-sidebar-code-row .btn { min-height: 44px; padding: 0 12px; } #screen-my-sessions .dash-sidebar-code-row .btn:nth-of-type(n+2) { display: none; } #screen-my-sessions .dash-sidebar.mobile-open .dash-sidebar-code-row .btn:nth-of-type(n+2) { display: inline-flex; } #screen-my-sessions .dash-sidebar.mobile-open .dash-sidebar-code-row { flex-wrap: wrap; } #screen-my-sessions .dash-sidebar:not(.mobile-open) .dash-sidebar-nav, #screen-my-sessions .dash-sidebar:not(.mobile-open) .dash-sidebar-footer { display: none; } #screen-my-sessions .dash-main { padding: 24px 16px 120px; } #screen-my-sessions .begin-hero { padding: 20px; } #screen-my-sessions .begin-hero-btn { width: 100%; } #screen-my-sessions .dash-tabbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 6; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--bym-surface); border-top: 1px solid var(--bym-rule); padding-bottom: env(safe-area-inset-bottom, 0px); } #screen-my-sessions .dash-tab { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 56px; padding: 6px 2px; border: 0; background: transparent; color: var(--bym-text-muted); font-family: var(--font-display); font-size: .8125rem; font-weight: 500; cursor: pointer; position: relative; } #screen-my-sessions .dash-tab[aria-current="true"] { color: var(--bym-primary); font-weight: 600; box-shadow: inset 0 3px 0 var(--bym-primary) !important; } #screen-my-sessions .dash-tab .dash-tab-icon { font-size: 18px; line-height: 1; } } /* the floating Report an issue button must clear the tab bar */ @media (max-width: 760px) { body:has(#screen-my-sessions.active) .bym-ri-btn { bottom: 70px; } } /* ---- Guidance article: sections and coloured boxes (presentation only; see guidanceArticleBodyHtml in index.html) ---- */ #screen-my-sessions .ga { max-width: 760px; } #screen-my-sessions .ga-chip { display: inline-block; font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bym-primary); background: var(--bym-surface-soft); padding: 4px 10px; border-radius: 4px; } #screen-my-sessions .ga-title { margin: 12px 0 8px; } #screen-my-sessions .ga-reviewed { color: var(--bym-text-muted); font-style: italic; margin-bottom: 12px; } #screen-my-sessions .ga-notlive { display: inline-block; font-size: .875rem; font-weight: 600; color: var(--bym-error); background: var(--bym-error-surface); padding: 6px 12px; margin: 4px 0 16px; border-radius: 4px; } #screen-my-sessions .ga-draft { display: flex; background: var(--bym-error-surface); border-inline-start: 4px solid var(--bym-error); padding: 14px 16px; margin: 0 0 24px; font-size: 1rem; } #screen-my-sessions .ga-draft strong { display: block; color: var(--bym-error); font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; } #screen-my-sessions .ga-toc { border: 1px solid var(--bym-rule); background: var(--bym-surface); padding: 16px 18px; margin-bottom: 32px; } #screen-my-sessions .ga-toc b { display: block; font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bym-text-muted); margin-bottom: 8px; } #screen-my-sessions .ga-toc ol { margin: 0; padding-inline-start: 1.6em; display: grid; gap: 8px; } #screen-my-sessions .ga-toc a { color: var(--bym-primary); text-underline-offset: 4px; } #screen-my-sessions .ga-section { margin-bottom: 28px; scroll-margin-top: 80px; } #screen-my-sessions .ga-sh { display: flex; gap: 14px; align-items: baseline; margin-bottom: 12px; } #screen-my-sessions .ga-num { flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: var(--bym-primary); color: var(--bym-on-primary); font-weight: 600; border-radius: 4px; } #screen-my-sessions .ga-sh h3 { margin: 0; font-size: var(--bym-text-lg); line-height: 1.2; letter-spacing: -.02em; color: var(--bym-primary); font-weight: 600; } #screen-my-sessions .ga-p { margin: 0 0 14px; font-size: var(--bym-text-base); line-height: 1.6; color: var(--bym-text); white-space: pre-wrap; } #screen-my-sessions .ga-box { padding: 16px 18px; margin: 0 0 14px; background: var(--bym-surface); border: 1px solid var(--bym-rule); border-inline-start: 4px solid var(--bym-primary); } #screen-my-sessions .ga-box small { display: block; font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; color: var(--bym-primary); } #screen-my-sessions .ga-box p { margin: 0; font-size: var(--bym-text-base); line-height: 1.6; white-space: pre-wrap; } #screen-my-sessions .ga-evidence { border-inline-start-color: var(--rahmah-copper); } #screen-my-sessions .ga-evidence small { color: #7a5530; } #screen-my-sessions .ga-confirm { background: var(--bym-surface-soft); border: 0; border-inline-start: 4px solid var(--bym-human); } #screen-my-sessions .ga-confirm small { color: #7d3f3d; } #screen-my-sessions .ga-refs { border: 1px solid var(--bym-rule); background: var(--bym-surface); padding: 0 18px; margin-top: 8px; } #screen-my-sessions .ga-refs summary { min-height: 52px; display: flex; align-items: center; font-weight: 600; color: var(--bym-primary); cursor: pointer; } #screen-my-sessions .ga-refs div { padding-bottom: 16px; font-size: 1rem; color: var(--bym-text-muted); white-space: pre-wrap; } @media (max-width: 760px) { #screen-my-sessions .ga-section { scroll-margin-top: 150px; } } /* Intro gate overlay ("Before you start"), shown once to a member with no answers. */ body.intro-gate-open { overflow: hidden; } #intro-gate { position: fixed; inset: 0; z-index: 9000; background: var(--bym-canvas); color: var(--bym-text); overflow-y: auto; font-family: var(--font-ui); } #intro-gate .intro-gate-wrap { max-width: 720px; margin: 0 auto; padding: 24px 16px 150px; } #intro-gate .intro-gate-dots { display: flex; gap: 8px; margin: 0 0 20px; } #intro-gate .intro-gate-dots i { height: 6px; flex: 1; background: var(--bym-rule); } #intro-gate .intro-gate-dots i.on { background: var(--bym-primary); } #intro-gate .intro-gate-eyebrow { font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bym-human); } #intro-gate h1 { color: var(--bym-primary); font-size: var(--bym-text-title); font-weight: 600; letter-spacing: -.02em; line-height: 1.12; margin: 8px 0 14px; } #intro-gate .intro-gate-lede { color: var(--bym-text-muted); margin: 0 0 18px; } #intro-gate .intro-gate-points { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; } #intro-gate .intro-gate-points li { display: flex; gap: 14px; align-items: flex-start; background: var(--bym-surface); border: 1px solid var(--bym-rule); padding: 14px 16px; } #intro-gate .intro-gate-n { flex: none; width: 30px; height: 30px; border-radius: 4px; background: var(--bym-primary); color: var(--bym-on-primary); display: grid; place-items: center; font-weight: 600; } #intro-gate .intro-gate-points b { color: var(--bym-primary); } #intro-gate .intro-gate-callout { background: var(--bym-surface-soft); border-inline-start: 3px solid var(--bym-primary); padding: 14px 16px; margin: 0 0 18px; } #intro-gate .intro-gate-foot { position: fixed; bottom: 0; inset-inline: 0; background: var(--bym-surface); border-top: 1px solid var(--bym-rule); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px; justify-content: space-between; } #intro-gate .intro-gate-btn { flex: 1; max-width: 340px; min-height: 48px; padding: 0 22px; border: 1px solid var(--bym-primary); border-radius: 4px; background: var(--bym-primary); color: var(--bym-on-primary); font: 600 1rem var(--font-ui); cursor: pointer; } #intro-gate .intro-gate-btn.secondary { background: transparent; color: var(--bym-primary); } #intro-gate :focus-visible { outline: 3px solid var(--bym-focus); outline-offset: 2px; } @media (max-width: 600px) { #intro-gate .intro-gate-foot { flex-direction: column-reverse; } #intro-gate .intro-gate-btn { max-width: none; } } body.intro-gate-open .bym-ri-btn { display: none !important; } /* Your journey strip: four steps, the current one explained, stages nested under Compare and Decide */ #screen-my-sessions #journey-strip { margin: 0 0 16px; } #screen-my-sessions #journey-strip .js-card { background: var(--bym-surface); border: 1px solid var(--bym-rule); padding: 14px 12px; } #screen-my-sessions #journey-strip .js-label { margin: 0 0 8px; font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bym-human-text); } #screen-my-sessions #journey-strip .js-groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } #screen-my-sessions #journey-strip .js-group { display: block; width: 100%; min-height: 60px; padding: 8px 4px; border: 1px solid var(--bym-border); border-radius: 4px; background: var(--bym-surface); color: var(--bym-primary); text-align: center; font-family: var(--font-ui); cursor: pointer; } #screen-my-sessions #journey-strip .js-n { display: block; font-size: .75rem; color: var(--bym-text-muted); } #screen-my-sessions #journey-strip .js-l { display: block; font-size: 1rem; font-weight: 600; } #screen-my-sessions #journey-strip .js-group.done { background: var(--bym-surface-soft); } #screen-my-sessions #journey-strip .js-group.cur { background: var(--bym-primary); border-color: var(--bym-primary); color: var(--bym-on-primary); } #screen-my-sessions #journey-strip .js-group.cur .js-n { color: var(--bym-on-primary); } #screen-my-sessions #journey-strip .js-group.focus:not(.cur) { border: 2px solid var(--bym-primary); } #screen-my-sessions #journey-strip .js-group:focus-visible { outline: 3px solid var(--bym-focus); outline-offset: 2px; } #screen-my-sessions #journey-strip .js-note { margin: 10px 0 0; font-size: 1rem; line-height: 1.5; color: var(--bym-text); } #screen-my-sessions #journey-strip .js-stages { margin: 10px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--bym-rule); } #screen-my-sessions #journey-strip .js-stages li { display: flex; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--bym-rule); min-height: 44px; } #screen-my-sessions #journey-strip .js-d { flex: none; width: 28px; height: 28px; border: 2px solid var(--bym-primary); border-radius: 50%; display: grid; place-items: center; font-size: .8125rem; font-weight: 600; color: var(--bym-primary); } #screen-my-sessions #journey-strip .js-stages li.done .js-d { background: var(--bym-surface-soft); } #screen-my-sessions #journey-strip .js-stages li.cur .js-d { background: var(--bym-primary); color: var(--bym-on-primary); } #screen-my-sessions #journey-strip .js-stages b { color: var(--bym-primary); font-weight: 600; } #screen-my-sessions #journey-strip .js-here { display: inline-block; margin-left: 8px; font-size: .875rem; font-weight: 600; color: var(--bym-human-text); } #screen-my-sessions #journey-strip .js-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; color: var(--bym-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } #screen-my-sessions #journey-strip .js-link:focus-visible { outline: 3px solid var(--bym-focus); outline-offset: 2px; } /* A connection's own journey, inside its card and named for the person */ #screen-my-sessions .dash-journey { margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--bym-rule); } #screen-my-sessions .dash-journey-label { margin: 0 0 8px; font-size: .875rem; font-weight: 600; letter-spacing: .04em; color: var(--bym-human-text); } #screen-my-sessions .dash-journey-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; list-style: none; margin: 0; padding: 0; } #screen-my-sessions .dash-journey-steps li { display: block; min-height: 52px; padding: 6px 4px; border: 1px solid var(--bym-border); border-radius: 4px; background: var(--bym-surface); color: var(--bym-primary); text-align: center; } #screen-my-sessions .dash-journey-steps li.done { background: var(--bym-surface-soft); } #screen-my-sessions .dash-journey-steps li.cur { background: var(--bym-primary); border-color: var(--bym-primary); color: var(--bym-on-primary); } #screen-my-sessions .dash-journey-n { display: block; font-size: .75rem; } #screen-my-sessions .dash-journey-l { display: block; font-size: .9375rem; font-weight: 600; } /* Stage 3 note and the Stage 4+ exclusive card (fig, apart from early-stage cards) */ #screen-my-sessions .dash-stage3-note { margin: 0 0 12px; padding: 10px 12px; background: var(--bym-surface-soft); border-inline-start: 3px solid var(--bym-accent); font-size: 1rem; line-height: 1.5; color: var(--bym-text); } #screen-my-sessions .dash-scoreline-card.dash-exclusive { background: var(--bym-primary); border-color: var(--bym-primary); border-inline-start: 4px solid var(--bym-accent); color: var(--bym-on-primary); box-shadow: none; } #screen-my-sessions .dash-scoreline-card.dash-exclusive * { color: var(--bym-on-primary); } #screen-my-sessions .dash-scoreline-card.dash-exclusive .dash-journey { border-bottom-color: rgba(255,250,245,.35); } #screen-my-sessions .dash-scoreline-card.dash-exclusive .dash-journey-steps li { background: transparent; border-color: rgba(255,250,245,.5); } #screen-my-sessions .dash-scoreline-card.dash-exclusive .dash-journey-steps li.cur { background: var(--bym-on-primary); } #screen-my-sessions .dash-scoreline-card.dash-exclusive .dash-journey-steps li.cur * { color: var(--bym-primary); } #screen-my-sessions .dash-exclusive-tag { margin: 0 0 12px; font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } #screen-my-sessions .dash-scoreline-card.dash-exclusive .btn, #screen-my-sessions .dash-scoreline-card.dash-exclusive .gh-btn-primary, #screen-my-sessions .dash-scoreline-card.dash-exclusive .btn-gold { background: var(--bym-on-primary); border-color: var(--bym-on-primary); color: var(--bym-primary); } #screen-my-sessions .dash-scoreline-card.dash-exclusive .btn-outline { background: transparent; border-color: var(--bym-on-primary); color: var(--bym-on-primary); }