/* ========================================================== FOREST-BASED THERAPY — TOOL · v0.5 Restyled to match the Pocketbook design system. Palette: warm cream paper, low-chroma forest greens, ember accent. Type: Montserrat (display), Open Sans (body), Playfair (occasional serif). ========================================================== */ html { height: 100%; background: transparent; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Open Sans', -apple-system, sans-serif; background: transparent; color: var(--ink); font-weight: 300; -webkit-font-smoothing: antialiased; min-height: calc(var(--vh, 1vh) * 100); overflow-x: hidden; letter-spacing: 0.005em; } body::before { content: ''; position: fixed; inset: 0; background: transparent; pointer-events: none; z-index: 0; } .container { max-width: 960px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; } /* ── LANGUAGE TOGGLE ── */ .lang-bar { position: fixed; top: 16px; right: 24px; display: flex; gap: 4px; z-index: 100; background: var(--paper-pure); border: 1px solid var(--forest-mist); border-radius: var(--r-pill); padding: 4px; box-shadow: var(--shadow-sm); } .lang-btn { font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; padding: 5px 11px; border-radius: var(--r-pill); border: none; background: transparent; color: var(--ink-faint); cursor: pointer; font-family: 'Open Sans', sans-serif; transition: all 0.18s; } .lang-btn.active { background: var(--forest-ink); color: var(--paper-pure); } /* ── ROLE-AWARE VISIBILITY ── */ body[data-role="participant"] [data-role-only="practitioner"] { display: none !important; } body[data-role="practitioner"] [data-role-only="participant"] { display: none !important; } /* The rules above only hide the *wrong* role's content once JS has set data-role on — safe for every [data-role-only] that lives inside a .screen, since .screen defaults to display:none until .active is added by JS regardless. But the persistent nav groups and #entry-screen (which is marked .active directly in the markup, not by JS) have no such default-hidden ancestor, so both variants render together for as long as the page takes to parse and run the scripts that set data-role — briefly showing Plan/Run/Reflect/Reference stacked with the participant nav links, and both entry-screen pathway lists stacked on the main screen. Default these two spots to hidden and opt back in per role, so there's never a frame where both show. */ .site-nav-group[data-role-only], #entry-screen > [data-role-only] { display: none; } body[data-role="practitioner"] .site-nav-group[data-role-only="practitioner"] { display: flex; } body[data-role="participant"] .site-nav-group[data-role-only="participant"] { display: flex; } body[data-role="practitioner"] #entry-screen > [data-role-only="practitioner"], body[data-role="participant"] #entry-screen > [data-role-only="participant"] { display: block; } /* ── HEADER ── */ header { padding: 28px 0 20px; border-bottom: 1px solid var(--forest-mist); margin-bottom: 28px; } .header-inner { display: flex; align-items: center; flex-wrap: wrap; row-gap: 14px; gap: 16px; } .tree-mark { width: 40px; height: 40px; flex-shrink: 0; } .header-text h1 { font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 500; color: var(--forest-ink); line-height: 1.1; letter-spacing: -0.01em; } .header-text p { font-size: 12px; color: var(--ink-faint); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 6px; } /* ── HEADER NAV & SEARCH ── */ /* Skip link (WCAG 2.4.1) — visually hidden until it receives focus, which makes it the very first tab stop on the page. */ .skip-link { position: absolute; top: -60px; left: 8px; z-index: 3000; background: var(--forest-ink); color: var(--paper-pure); padding: 10px 18px; border-radius: var(--r-sm); font-size: 13px; font-weight: 500; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: 8px; } /* Visually-hidden utility (aria-live regions, etc.) — kept distinct from .skip-link, which needs to become visible on focus. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Global keyboard-focus indicator. Nothing in this file provided one before this section, so this doesn't override or duplicate anything — it's the first one. :focus-visible degrades harmlessly (simply unmatched, not an error) on anything old enough not to support it. */ a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; } /* Persistent, role-aware nav. Practitioner mode shows Plan/Run/Reflect/ Reference; participant mode shows the 4 orientation steps. Only the group matching data-role-only is visible (existing rule, reused as-is: body[data-role="…"] […] { display:none }). */ .site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .site-nav-group { display: flex; flex-wrap: wrap; gap: 4px; } .site-nav-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink-soft); text-decoration: none; border: 1px solid transparent; white-space: nowrap; transition: background 0.18s, border-color 0.18s, color 0.18s; } .site-nav-link:hover { color: var(--forest-deep); background: var(--paper-card); } .site-nav-link.active { color: var(--forest-deep); background: var(--paper-pure); border-color: var(--forest-mist); font-weight: 600; } .header-controls { display: flex; align-items: center; gap: 10px; margin-left: auto; } .search-trigger { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--forest-mist); background: var(--paper-pure); color: var(--ink-soft); cursor: pointer; font-family: 'Open Sans', sans-serif; font-size: 12px; font-weight: 500; transition: all 0.18s; } .search-trigger:hover { border-color: var(--forest-soft); color: var(--forest-deep); } .search-trigger-kbd { font-size: 10px; color: var(--ink-faint); border: 1px solid var(--forest-mist); border-radius: 4px; padding: 1px 5px; font-family: 'Open Sans', sans-serif; } /* Mode switch — same pill/segmented-control language as .lang-bar/.lang-btn, just sized up to the 44px minimum hit target since (unlike the pre-existing language toggle) this is a new control. */ .mode-switch { display: flex; gap: 4px; background: var(--paper-pure); border: 1px solid var(--forest-mist); border-radius: var(--r-pill); padding: 3px; box-shadow: var(--shadow-sm); } .mode-btn { min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: none; background: transparent; color: var(--ink-faint); cursor: pointer; font-family: 'Open Sans', sans-serif; font-size: 11.5px; font-weight: 500; letter-spacing: 0.04em; transition: all 0.18s; } .mode-btn.active { background: var(--forest-ink); color: var(--paper-pure); } /* Quick links injected into the focused Pocketbook (Plan) screen so the Pre-Session Checklist and Session Structure Guide are one click away without a trip back through the header nav. */ .plan-quicklinks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: -8px 0 22px; } .plan-quicklinks a { font-size: 12px; font-weight: 500; color: var(--forest-mid); text-decoration: none; border-bottom: 1px dotted var(--forest-soft); } .plan-quicklinks a:hover { color: var(--forest-deep); } /* Generic "found via search" highlight, reused across screens (reference tiers, guide chapters). Distinct from .activity-item.highlight, which is specific to the Pocketbook accordion styling. */ .search-highlight { box-shadow: 0 0 0 3px rgba(127,163,150,0.35); border-radius: var(--r-md); transition: box-shadow 0.3s ease; } /* Locks the page's own scroll while a full-viewport fixed overlay (Run Mode, the search dialog) is open, so scrolling inside the overlay can't also move the page behind it — the overlay being position:fixed;inset:0 makes it LOOK like the only thing on screen, but without this the body underneath was still scrollable, producing exactly the kind of background/foreground double-scroll this class exists to prevent. Toggled by pbStartRunMode()/pbCloseRunMode() in pocketbook.js and openSearch()/closeSearch() in search.js. */ body.no-scroll { overflow: hidden; } /* ─── SEARCH DIALOG (⌘K / Ctrl+K) ─── */ .search-dialog-overlay { display: none; position: fixed; inset: 0; background: rgba(20,48,42,0.45); backdrop-filter: blur(6px); z-index: 2500; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; animation: pbFadeIn 0.2s ease; } .search-dialog-overlay.active { display: flex; } .search-dialog { background: var(--paper-pure); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 560px; max-height: 70vh; display: flex; flex-direction: column; overflow: hidden; animation: pbSlideUp 0.22s ease; } .search-dialog-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--forest-mist); } .search-dialog-head svg { color: var(--ink-faint); flex-shrink: 0; } .search-input { flex: 1; border: none; outline: none; background: transparent; font-family: 'Open Sans', sans-serif; font-size: 15px; color: var(--ink); min-height: 44px; } .search-input::placeholder { color: var(--ink-faint); } .search-close { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: none; background: none; cursor: pointer; font-size: 20px; color: var(--ink-faint); line-height: 1; border-radius: var(--r-sm); flex-shrink: 0; } .search-close:hover { color: var(--ink); background: var(--paper-card); } .search-results { overflow-y: auto; padding: 8px; flex: 1; } .search-group { margin-bottom: 4px; } .search-group-label { font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest-soft); padding: 10px 10px 4px; } .search-result { display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: 8px 10px; border-radius: var(--r-sm); min-height: 44px; font-family: 'Open Sans', sans-serif; } .search-result:hover, .search-result:focus-visible { background: var(--paper-card); } .search-result-title { font-size: 13.5px; font-weight: 500; color: var(--forest-ink); } .search-result-sub { font-size: 12px; color: var(--ink-soft); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-empty { padding: 28px 10px; text-align: center; color: var(--ink-faint); font-size: 13px; } /* ── SCREENS ── */ #entry-screen { animation: fadeUp 0.5s ease both; } .screen { display: none; } .screen.active { display: block; animation: fadeUp 0.4s ease backwards; } /* ── ENTRY ── */ .entry-label { font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--forest-soft); margin-bottom: 18px; } .entry-title { font-family: 'Montserrat', sans-serif; font-size: 36px; font-weight: 500; color: var(--forest-ink); line-height: 1.15; letter-spacing: -0.015em; margin-bottom: 14px; max-width: 560px; } .entry-sub { font-size: 15px; color: var(--ink-soft); font-weight: 300; margin-bottom: 48px; max-width: 480px; line-height: 1.65; } .pathways { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .pathway-card { background: var(--paper-card); border: 1px solid var(--forest-mist); border-radius: var(--r-md); padding: 28px 28px 24px; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; position: relative; overflow: hidden; } .pathway-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--forest-deep); transform: scaleY(0); transition: transform 0.25s ease; transform-origin: top; } .pathway-card:hover { border-color: var(--forest-soft); transform: translateY(-2px); box-shadow: var(--shadow-md); } .pathway-card:hover::before { transform: scaleY(1); } .pathway-icon { font-size: 22px; margin-bottom: 16px; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--paper); border: 1px solid var(--forest-mist); border-radius: var(--r-sm); color: var(--forest-deep); } .pathway-icon svg { width: 20px; height: 20px; } .pathway-card h2 { font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 500; color: var(--forest-ink); margin-bottom: 8px; letter-spacing: -0.005em; } .pathway-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; font-weight: 300; } .pathway-arrow { display: inline-block; margin-top: 20px; font-size: 11px; font-weight: 500; color: var(--forest-deep); letter-spacing: 0.12em; text-transform: uppercase; } /* ── SECTION SCREEN ── */ .back-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-faint); cursor: pointer; margin-bottom: 32px; padding: 6px 0; border: none; background: none; font-family: 'Open Sans', sans-serif; font-weight: 500; letter-spacing: 0.04em; transition: color 0.2s; } .back-btn:hover { color: var(--forest-deep); } .section-header { margin-bottom: 40px; } .section-header .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest-deep); background: transparent; border: 1px solid var(--forest-mist); padding: 5px 12px 5px 10px; border-radius: var(--r-pill); margin-bottom: 18px; } .section-header .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--forest-deep); display: inline-block; } .section-header h2 { font-family: 'Montserrat', sans-serif; font-size: var(--fs-h1); font-weight: 500; color: var(--forest-ink); line-height: 1.15; letter-spacing: -0.015em; margin-bottom: 10px; } .section-header p { font-size: var(--fs-sub); color: var(--ink-soft); font-weight: 300; line-height: 1.65; max-width: 560px; } .section-sub { font-size: var(--fs-sub); color: var(--ink-soft); line-height: 1.65; max-width: 560px; } /* ── MODULES ── */ .modules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 16px; align-items: start; } /* "What is FBT?", "Before your first session", "Learn More", and Implement in Practice's tool cards all stack single-column at every viewport width instead of the auto-fit default above, which would otherwise sit cards side by side on wider screens (only naturally collapsing to one column on narrow/mobile widths, where auto-fit runs out of room anyway). */ #pwhat-screen .modules-grid, #pbefore-screen .modules-grid, #learn-screen .modules-grid, #implement-screen .modules-grid { grid-template-columns: 1fr; } /* Reflect's remaining module-cards (self-reflection, indicators — glossary was removed) stack single-column too, and drop the boxed card look entirely: no border/background/radius, just open content separated by a rule, since this is working reflection material feeding the report, not reference cards to browse. */ #reflect-screen .modules-grid { grid-template-columns: 1fr; gap: 28px; } #reflect-screen .module-card { background: none; border: none; border-radius: 0; overflow: visible; padding-bottom: 24px; border-bottom: 1px solid var(--forest-mist); } #reflect-screen .module-card:last-child { border-bottom: none; padding-bottom: 0; } #reflect-screen .module-card .module-body { padding: 0; } /* Reference page's own search — distinct from the global ⌘K dialog's .search-input, but same visual language (bordered pill, icon inline). */ .reference-search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--forest-mist); border-radius: var(--r-md); padding: 0 14px; min-height: 44px; background: var(--paper-pure); margin-bottom: 18px; color: var(--ink-faint); } .reference-search input { flex: 1; border: none; outline: none; background: transparent; font-family: 'Open Sans', sans-serif; font-size: 15px; color: var(--ink); min-height: 42px; } .reference-search-empty { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--ink-faint); margin: 4px 0 18px; } /* Same-specificity author rule above would otherwise beat the UA stylesheet's [hidden] { display: none }, since author origin wins ties — this one line is what actually lets refApplyFilter() hide the message by toggling the hidden attribute. */ .reference-search-empty[hidden] { display: none; } .ref-clear-btn { padding: 6px 12px; min-height: 36px; border-radius: var(--r-sm); border: 1px solid var(--forest-mist); background: var(--paper-pure); color: var(--forest-deep); font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer; } .ref-clear-btn:hover { border-color: var(--forest-soft); background: var(--paper); } /* ── REFERENCE: type filter chips + result count ── */ .ref-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .ref-filter-chip { display: inline-flex; align-items: center; padding: 7px 13px; min-height: 44px; border-radius: var(--r-pill); border: 1px solid var(--forest-mist); background: var(--paper-pure); color: var(--ink-faint); font-family: inherit; font-size: 11.5px; font-weight: 500; cursor: pointer; transition: all 0.15s; } .ref-filter-chip:hover { border-color: var(--forest-soft); color: var(--ink-soft); } .ref-filter-chip[aria-pressed="true"] { background: var(--forest-ink); border-color: var(--forest-ink); color: var(--paper-pure); } .ref-count { font-size: 12px; color: var(--ink-faint); margin: 0 0 18px; } /* ── REFERENCE: absolute contraindications — always visible, never collapsible, never touched by refApplyFilter(). Kept visually distinct (safety-tinted heading + badge) so it reads as categorically different from the filterable list below it, not just "first in the list". ── */ .ref-absolute { margin-bottom: 28px; } .ref-absolute-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .ref-absolute-head h3 { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--safety-ink); margin: 0; } .ref-absolute-badge { flex-shrink: 0; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ember); background: var(--paper-pure); border: 1px solid #E5C7B2; border-radius: var(--r-pill); padding: 3px 10px; } .module-card { background: var(--paper-pure); border: 1px solid var(--forest-mist); border-radius: var(--r-md); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; } .module-card:hover { border-color: var(--forest-soft); box-shadow: var(--shadow-sm); } .module-card.open { border-color: var(--forest-mid); box-shadow: var(--shadow-md); } .module-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; cursor: pointer; user-select: none; } .module-header-left { display: flex; align-items: center; gap: 12px; } .module-icon { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--paper); border: 1px solid var(--forest-mist); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .module-title { font-family: 'Montserrat', sans-serif; font-size: var(--fs-h3); font-weight: 500; color: var(--forest-ink); letter-spacing: -0.005em; } .module-tag { font-size: 10.5px; color: var(--ink-faint); font-weight: 400; margin-top: 2px; letter-spacing: 0.04em; } .module-toggle { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--forest-mist); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--ink-faint); transition: all 0.2s; flex-shrink: 0; background: var(--paper); } .module-card.open .module-toggle { background: var(--forest-deep); border-color: var(--forest-deep); color: var(--paper-pure); transform: rotate(45deg); } /* Door modules: show an arrow rather than a toggle */ .module-card.is-door .module-toggle { font-size: 0; border-color: transparent; background: transparent; width: 28px; height: 28px; position: relative; } .module-card.is-door .module-toggle::before { content: '→'; font-size: 17px; color: var(--ink-faint); transform: none; transition: transform 0.2s, color 0.2s; display: inline-block; } .module-card.is-door:hover .module-toggle::before { color: var(--forest-deep); transform: translateX(3px); } .module-card.is-door.open .module-toggle { background: transparent; border-color: transparent; transform: none; } .module-body { display: none; padding: 0 20px 20px; border-top: 1px solid var(--forest-mist); } .module-card.open .module-body { display: block; } /* ── MODULE-AS-PAGE (door mode) ── */ .screen.focus-mode .section-header, .screen.focus-mode > .back-btn { display: none; } .screen.focus-mode .modules-grid { display: block; grid-template-columns: 1fr; } .screen.focus-mode .module-card:not(.is-focused) { display: none; } .screen.focus-mode .module-card.is-focused { grid-column: 1 / -1; border: none; background: transparent; box-shadow: none; margin-top: 4px; } .screen.focus-mode .module-card.is-focused .module-header { padding: 0 0 20px 0; cursor: default; border-bottom: 1px solid var(--forest-mist); margin-bottom: 28px; } .screen.focus-mode .module-card.is-focused .module-header .module-toggle { display: none; } .screen.focus-mode .module-card.is-focused .module-header-right { display: none; } /* Pocketbook in focus mode: hide the redundant "Pocket Guide to Activities / 12 activities · select to expand" title strip — the injected back-link already provides navigation context. */ .screen.focus-mode #mod-pocket.is-focused .module-header { display: none; } .screen.focus-mode .module-card.is-focused .module-icon { width: 48px; height: 48px; font-size: 22px; background: var(--paper-card); } .screen.focus-mode .module-card.is-focused .module-title { font-size: 28px; font-weight: 500; letter-spacing: -0.012em; } .screen.focus-mode .module-card.is-focused .module-tag { font-size: 11.5px; margin-top: 4px; letter-spacing: 0.06em; text-transform: uppercase; } .screen.focus-mode .module-card.is-focused .module-body { display: block; padding: 0; border: none; } .module-back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); background: none; border: none; cursor: pointer; padding: 0; margin-bottom: 22px; font-family: inherit; letter-spacing: 0.01em; } .module-back-link:hover { color: var(--forest-deep); } .module-back-link::before { content: '←'; font-size: 15px; } /* ── ACTIVITIES ── */ .activities-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .activity-item { border: 1px solid var(--forest-mist); border-radius: var(--r-md); overflow: hidden; background: var(--paper-pure); transition: border-color 0.2s, box-shadow 0.2s; } .activity-item:hover { border-color: var(--forest-soft); } .activity-item.open { border-color: var(--forest-mid); box-shadow: var(--shadow-sm); } .activity-trigger { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; cursor: pointer; background: var(--paper-card); user-select: none; transition: background 0.18s; } .activity-item.open .activity-trigger { background: var(--paper-pure); border-bottom: 1px solid var(--forest-mist); } .activity-name { font-size: 13.5px; font-weight: 500; color: var(--forest-ink); letter-spacing: -0.005em; } .activity-duration { font-size: 10.5px; color: var(--ink-soft); background: var(--paper); padding: 2px 9px; border-radius: var(--r-pill); border: 1px solid var(--forest-mist); white-space: nowrap; margin-left: 8px; flex-shrink: 0; font-variant-numeric: tabular-nums; font-weight: 400; } .activity-detail { display: none; padding: 18px 18px 20px; background: var(--paper-pure); } .activity-item.open .activity-detail { display: block; } /* ── DEEP LINK HIGHLIGHT ── */ .activity-item.highlight { border-color: var(--forest-mid); box-shadow: 0 0 0 3px rgba(127,163,150,0.18); } .detail-section { margin-bottom: 14px; } .detail-section:last-child { margin-bottom: 0; } .detail-label { font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest-soft); margin-bottom: 6px; } .detail-text { font-size: 13px; color: var(--ink); line-height: 1.65; font-weight: 300; } .detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .detail-tag { font-size: 11px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--paper); color: var(--forest-deep); border: 1px solid var(--forest-mist); font-weight: 400; } .detail-text--example { font-style: italic; color: var(--ink-soft); padding: 10px 14px; background: var(--paper); border-left: 2px solid var(--forest-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; } /* ── COPY LINK ── */ .copy-link-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--forest-mist); border-radius: var(--r-pill); padding: 4px 12px; cursor: pointer; font-family: 'Open Sans', sans-serif; font-weight: 500; margin-top: 12px; transition: all 0.15s; } .copy-link-btn:hover { border-color: var(--forest-soft); color: var(--forest-deep); } .copy-link-btn.copied { background: var(--forest-deep); color: var(--paper-pure); border-color: var(--forest-deep); } /* ── LEARN BLOCKS ── */ /* ── REFLECT CARD ENHANCEMENTS ── */ .module-card .module-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.6; font-weight: 300; margin-top: 6px; max-width: 520px; } .module-header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .module-count-badge { font-size: 10px; font-weight: 500; letter-spacing: 0.08em; color: var(--ink-faint); background: var(--paper); border: 1px solid var(--forest-mist); border-radius: var(--r-pill); padding: 3px 10px; white-space: nowrap; } /* Reflect prompt cards (numbered) */ .reflect-prompts { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; } .reflect-prompt { display: flex; gap: 16px; align-items: flex-start; background: var(--paper-card); border: 1px solid var(--forest-mist); border-radius: var(--r-md); padding: 18px 20px; transition: border-color 0.2s; } .reflect-prompt:hover { border-color: var(--forest-soft); } .reflect-prompt-num { font-family: 'Playfair Display', serif; font-size: 22px; color: var(--forest-mist); line-height: 1; flex-shrink: 0; width: 28px; margin-top: 2px; } .reflect-prompt-body h4 { font-family: 'Montserrat', sans-serif; font-size: 13.5px; font-weight: 500; color: var(--forest-ink); margin-bottom: 6px; letter-spacing: -0.005em; } .reflect-prompt-body p { font-size: 13px; color: var(--ink-soft); line-height: 1.65; font-weight: 300; } .reflect-answer-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; margin: 12px 0 6px; } .reflect-answer { width: 100%; min-height: 56px; padding: 9px 11px; border: 1px solid var(--forest-mist); border-radius: var(--r-sm); background: var(--paper-pure); color: var(--ink); font-family: inherit; font-size: 13px; line-height: 1.55; resize: vertical; } .reflect-answer:focus { border-color: var(--forest-deep); outline: none; } /* Indicators check-list style #2 */ .check-list-v2 { display: flex; flex-direction: column; gap: 0; margin-top: 6px; } .check-item-v2 { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--forest-mist); cursor: pointer; transition: opacity 0.15s; } .check-item-v2:last-child { border-bottom: none; } .check-item-v2 .check-dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--forest-soft); flex-shrink: 0; margin-top: 1px; transition: all 0.15s; display: flex; align-items: center; justify-content: center; } .check-item-v2.checked .check-dot { background: var(--forest-deep); border-color: var(--forest-deep); } .check-item-v2.checked .check-dot::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--paper-pure); } .check-item-v2 label { font-size: 13.5px; color: var(--ink); line-height: 1.55; cursor: pointer; font-weight: 300; transition: all 0.15s; } .check-item-v2.checked label { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--forest-soft); } /* Glossary */ .glossary-list { display: flex; flex-direction: column; gap: 0; margin-top: 6px; } .glossary-item { padding: 18px 0; border-bottom: 1px solid var(--forest-mist); } .glossary-item:last-child { border-bottom: none; } .glossary-term { font-family: 'Montserrat', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--forest-deep); margin-bottom: 5px; letter-spacing: -0.003em; } .glossary-def { font-size: 13px; color: var(--ink-soft); line-height: 1.65; font-weight: 300; } /* ─── REFLECT: SESSION RECAP + HISTORY ─── */ .reflect-session-recap { background: var(--paper-card); border: 1px solid var(--forest-mist); border-left: 3px solid var(--forest-deep); border-radius: var(--r-md); padding: 20px 24px; margin-bottom: 28px; } .reflect-session-recap[hidden] { display: none; } .reflect-session-recap-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .reflect-session-recap-eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest-deep); font-weight: 600; } .reflect-session-recap-when { font-size: 12px; color: var(--ink-faint); } .reflect-session-recap-list { display: flex; flex-direction: column; gap: 10px; } .reflect-recap-row { padding: 10px 0; border-bottom: 1px solid var(--forest-mist); } .reflect-recap-row:last-child { border-bottom: none; } .reflect-recap-name { font-size: 13.5px; font-weight: 500; color: var(--forest-ink); } .reflect-recap-time { float: right; font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; } .reflect-recap-note { clear: both; margin-top: 5px; font-size: 12.5px; color: var(--ink-soft); font-style: italic; white-space: pre-wrap; } .reflect-session-recap-actions { margin-top: 16px; } /* Export action panel — always rendered (never [hidden]) unlike the recap section above it, so the button is disabled-with-a-reason rather than missing whenever the gate (pbUpdateReflectExportGate() in pocketbook.js) isn't satisfied yet. */ .reflect-export-panel { margin-bottom: 28px; } .reflect-export-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #reflect-export-btn { min-height: 44px; padding: 10px 20px; } #reflect-export-png-btn { min-height: 44px; min-width: 44px; } .reflect-export-hint { margin: 8px 0 0; font-size: 12px; color: var(--ink-faint); font-style: italic; } .reflect-export-hint:empty { display: none; } /* Extra report metadata — deliberately plain (no card border/shadow), distinct from the boxed .module-card treatment used for self-reflection/ indicators/glossary above, since this is optional context rather than reflection content. */ .reflect-meta-block { margin-bottom: 24px; } .reflect-meta-block h3 { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 600; color: var(--forest-ink); margin: 0 0 4px; } .reflect-meta-sub { font-size: 13px; color: var(--ink-faint); margin: 0 0 14px; } .reflect-meta-grid { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 420px; } .reflect-meta-field-full { grid-column: 1 / -1; } .reflect-meta-field { display: flex; flex-direction: column; gap: 5px; } .reflect-meta-field span { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; } .reflect-meta-field input, .reflect-meta-field textarea { border: 1px solid var(--forest-mist); border-radius: var(--pb-r-sm, 6px); padding: 9px 11px; font-family: inherit; font-size: 14px; color: var(--ink); background: var(--paper-pure); min-height: 40px; } .reflect-meta-field textarea { resize: vertical; min-height: 60px; } .reflect-meta-field input:focus, .reflect-meta-field textarea:focus { border-color: var(--forest-deep); outline: none; } .reflect-history { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--forest-mist); } .reflect-history[hidden] { display: none; } .reflect-history h3 { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 600; color: var(--forest-ink); margin-bottom: 14px; } .reflect-history-list { display: flex; flex-direction: column; gap: 8px; } .reflect-history-row { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 14px; padding: 10px 14px; background: var(--paper-card); border: 1px solid var(--forest-mist); border-radius: var(--r-sm); } .reflect-history-when { font-size: 11.5px; color: var(--ink-soft); } .reflect-history-bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: var(--paper); border: 1px solid var(--forest-mist); } .reflect-history-seg { height: 100%; min-width: 0; } .reflect-history-meta { font-size: 11px; color: var(--ink-faint); white-space: nowrap; } @media (max-width: 640px) { .reflect-history-row { grid-template-columns: 1fr; } .reflect-history-when, .reflect-history-meta { white-space: normal; } } .learn-blocks { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .learn-block { background: var(--paper-card); border: 1px solid var(--forest-mist); border-radius: var(--r-md); padding: 16px 18px; } .learn-block h4 { font-family: 'Montserrat', sans-serif; font-size: 13.5px; font-weight: 500; color: var(--forest-ink); margin-bottom: 6px; letter-spacing: -0.005em; } .learn-block p { font-size: 13px; color: var(--ink-soft); line-height: 1.65; font-weight: 300; } .evidence-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; padding: 3px 10px; background: transparent; color: var(--forest-deep); border: 1px solid var(--forest-mist); border-radius: var(--r-pill); margin-top: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; } .evidence-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--forest-deep); } .evidence-pill--strong { color: var(--forest-ink); } .evidence-pill--strong::before { background: var(--forest-ink); } .evidence-pill--moderate { color: var(--forest-mid); } .evidence-pill--moderate::before { background: var(--forest-mid); } .evidence-pill--emerging { color: var(--forest-soft); } .evidence-pill--emerging::before { background: var(--forest-soft); } /* ── CHECKLISTS ── */ .assessment-intro { font-size: 13px; color: var(--ink-soft); line-height: 1.65; margin-top: 14px; margin-bottom: 16px; font-weight: 300; } .check-list { display: flex; flex-direction: column; gap: 6px; } .check-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; background: var(--paper-card); border: 1px solid var(--forest-mist); border-radius: var(--r-sm); cursor: pointer; transition: border-color 0.15s, background 0.15s; user-select: none; } .check-item:hover { border-color: var(--forest-soft); background: var(--paper-pure); } .check-item input[type="checkbox"] { margin-top: 2px; accent-color: var(--forest-deep); width: 15px; height: 15px; flex-shrink: 0; } .check-item label { font-size: 13px; color: var(--ink); line-height: 1.55; cursor: pointer; font-weight: 300; } .checklist-note { font-size: 11.5px; color: var(--ink-faint); margin-top: 12px; font-style: italic; } /* ── ANIMATION ── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ── VISUAL PANEL ── */ .activity-visual { margin-bottom: 16px; border-radius: var(--r-sm); overflow: hidden; background: var(--paper); border: 1px solid var(--forest-mist); } .activity-visual svg { display: block; width: 100%; } .activity-visual img { display: block; width: 100%; } .visual-caption { font-size: 10.5px; color: var(--ink-faint); text-align: center; padding: 8px 12px; letter-spacing: 0.04em; font-style: italic; border-top: 1px solid var(--forest-mist); background: var(--paper-pure); line-height: 1.55; } /* ── ROLE SCREEN ── */ .role-screen-inner { text-align: center; padding: 56px 0 32px; } .role-screen-inner .entry-label { text-align: center; margin-bottom: 12px; } .role-screen-inner .entry-title { margin-left: auto; margin-right: auto; } .role-screen-inner .entry-sub { margin-left: auto; margin-right: auto; } .role-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 36px; text-align: left; } .role-card { background: var(--paper-card); border: 1px solid var(--forest-mist); border-radius: var(--r-lg); padding: 36px 32px 28px; cursor: pointer; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; position: relative; overflow: hidden; } .role-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--forest-deep); transform: scaleY(0); transition: transform 0.25s ease; transform-origin: top; } .role-card:hover { border-color: var(--forest-soft); transform: translateY(-2px); box-shadow: var(--shadow-md); } .role-card:hover::before { transform: scaleY(1); } .role-card h2 { font-family: 'Montserrat', sans-serif; font-size: 22px; color: var(--forest-ink); margin-bottom: 10px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; } .role-card .role-card-sub { font-size: 10.5px; color: var(--forest-soft); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; margin-bottom: 16px; } .role-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.65; font-weight: 300; } .role-card .role-examples { font-size: 12px; color: var(--forest-mid); margin-top: 14px; font-style: italic; } .role-card-arrow { display: inline-block; margin-top: 20px; font-size: 11px; font-weight: 500; color: var(--forest-deep); letter-spacing: 0.12em; text-transform: uppercase; } /* ── SESSION TIMELINE (participant) ── */ .timeline { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .timeline-item { background: var(--paper-pure); border: 1px solid var(--forest-mist); border-radius: var(--r-md); overflow: hidden; transition: border-color 0.2s; } .timeline-item:hover { border-color: var(--forest-soft); } .timeline-item.open { border-color: var(--forest-mid); box-shadow: var(--shadow-sm); } .timeline-header { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; user-select: none; } .timeline-phase { width: 32px; height: 32px; border-radius: 50%; background: var(--paper); border: 1px solid var(--forest-mist); color: var(--forest-deep); display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 500; flex-shrink: 0; font-variant-numeric: tabular-nums; } .timeline-item.open .timeline-phase { background: var(--forest-deep); color: var(--paper-pure); border-color: var(--forest-deep); } .timeline-title { font-family: 'Montserrat', sans-serif; font-size: 13.5px; font-weight: 500; color: var(--forest-ink); flex: 1; letter-spacing: -0.005em; } .timeline-duration { font-size: 10.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } .timeline-body { display: none; padding: 0 18px 16px 64px; border-top: 1px solid var(--forest-mist); } .timeline-item.open .timeline-body { display: block; padding-top: 14px; } .timeline-body .sub-section { margin-top: 12px; } .timeline-body .sub-label { font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest-soft); margin-bottom: 5px; } .timeline-body .sub-text { font-size: 13px; color: var(--ink); line-height: 1.65; font-weight: 300; } /* ── DOSAGE GRID ── */ .dosage-grid { display: grid; gap: 8px; margin-top: 14px; } .dosage-row { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr 0.9fr; gap: 12px; padding: 12px 16px; background: var(--paper-card); border: 1px solid var(--forest-mist); border-radius: var(--r-sm); align-items: start; font-size: 12.5px; } .dosage-row.dosage-head { background: var(--forest-ink); border-color: var(--forest-ink); color: var(--paper-pure); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; } .dosage-cell-label { font-family: 'Montserrat', sans-serif; font-weight: 500; color: var(--forest-ink); font-size: 13px; letter-spacing: -0.005em; } .dosage-row.dosage-head .dosage-cell-label { color: var(--paper-pure); font-weight: 500; font-size: 10px; font-family: 'Open Sans', sans-serif; } .dosage-cell { color: var(--ink-soft); line-height: 1.5; font-weight: 300; } .dosage-row.dosage-head .dosage-cell { color: rgba(255,255,255,0.85); } @media (max-width: 640px) { .dosage-row { grid-template-columns: 1fr; gap: 4px; } .dosage-row.dosage-head { display: none; } .dosage-cell::before { content: attr(data-label); display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest-soft); margin-bottom: 2px; } } /* ── INTEGRATION PAIRING (inside a .ref-panel, see REFERENCE ENTRIES below) ── */ .int-pair { font-size: 11.5px; color: var(--forest-mid); font-style: italic; letter-spacing: 0.02em; margin-top: 6px; } /* ── QUESTION LIST ── */ .q-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding: 0; } .q-list li { background: var(--paper-card); border: 1px solid var(--forest-mist); border-left: 3px solid var(--forest-soft); border-radius: var(--r-sm); padding: 10px 14px; font-size: 13px; color: var(--ink); line-height: 1.55; font-weight: 300; list-style: none; } /* ── REFERENCE TIERS ── */ .tier-header { font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--forest-soft); margin: 22px 0 10px; } .tier-header:first-child { margin-top: 0; } /* Two card flavours, shared by both the always-visible absolute contraindications (plain h4+p, no accordion — see .ref-absolute above) and the flat reference list's entries (.ref-entry, below). Keeping these two classnames — rather than inventing new ones for the list — is what keeps search.js's live #mod-indications/#mod-contraindications .closest('.indication-block, .warn-block') lookup working unmodified for every entry type it already indexed. */ .indication-block, .warn-block { background: var(--paper-card); border: 1px solid var(--forest-mist); border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 8px; } .warn-block { background: var(--safety-bg); border: 1px solid #E5C7B2; border-left: 3px solid var(--ember); } .indication-block h4, .warn-block h4 { font-family: 'Montserrat', sans-serif; font-size: 13.5px; font-weight: 500; color: var(--forest-ink); margin-bottom: 4px; letter-spacing: -0.005em; } .warn-block h4 { color: var(--safety-ink); } .indication-block p, .warn-block p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; font-weight: 300; margin-bottom: 6px; } .warn-block p { color: var(--safety-ink); } .ind-meta { font-size: 11.5px; color: var(--forest-mid); line-height: 1.55; margin-top: 6px; } .ind-meta strong { font-weight: 500; color: var(--forest-deep); } /* ── REFERENCE ENTRIES: the flat, independently-expandable list ── .ref-entry layers accordion behaviour onto .indication-block/ .warn-block: trigger row (kind badge, title, optional evidence indicator, chevron) always visible; .ref-panel collapses via the native [hidden] attribute, toggled by refToggleEntry() in router.js. The trigger itself is a real

, keeping that