/* * This is a manifest file that'll be compiled into application.css. * * With Propshaft, assets are served efficiently without preprocessing steps. You can still include * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard * cascading order, meaning styles declared later in the document or manifest will override earlier ones, * depending on specificity. * * Consider organizing styles into separate files for maintainability. */ /* BestPath design tokens — Direction A (Quiet Editorial) */ :root { /* Surfaces */ --bp-paper: #ffffff; --bp-surface: #f8f7f3; --bp-surface-2: #efece4; /* Ink */ --bp-ink: #1a1a1a; --bp-ink-2: #3d3d3d; --bp-ink-muted: #6b6b6b; --bp-ink-subtle: #9a9a9a; /* Lines */ --bp-rule: rgba(0,0,0,0.12); --bp-rule-soft: rgba(0,0,0,0.06); /* Accent — logo blue, deepened to AA against white */ --bp-accent: #1d4f7a; --bp-accent-ink: #ffffff; --bp-accent-soft:#e6eef5; /* Highlight — logo orange. Brand decoration; one moment per view. */ --bp-highlight: #e89826; --bp-highlight-ink: #1a1a1a; --bp-highlight-soft: #fbecd2; /* Roles */ --bp-success: #2d6a4f; --bp-warning: #a8660f; --bp-danger: #8c2a1c; --bp-info: #2b4d7a; /* Status tints */ --bp-tint-done: #e4ede6; --bp-tint-active: #f0ebdd; --bp-tint-warning: #fbeed0; --bp-tint-danger: #f6ddd6; --bp-tint-info: #dde6f0; --bp-tint-ink-done: #1f4432; --bp-tint-ink-active: #6b4f15; --bp-tint-ink-warning: #7a4805; --bp-tint-ink-danger: #5e1c11; --bp-tint-ink-info: #1e3a5f; /* Chart marks — the role a drawn data mark wears (bars, and any future series). An alias rather than a new hue on purpose: the accent is already the one colour this system spends, and a chart that invented its own would be a second accent on a page that is allowed one. There is deliberately no "track" or "remainder" colour here. D16 ruled out any visual whose unfilled portion carries meaning, so the primitives draw the mark and nothing behind it — an empty week leaves short bars, never a conspicuously empty container. A future categorical palette (two or more series on one chart) is a real extension and needs the data-viz validator run on it before it lands; this single role does not. */ --bp-chart-mark: var(--bp-accent); /* Type */ --bp-display-family: 'Lora', Georgia, serif; --bp-display-weight: 500; --bp-serif-family: 'Newsreader', Georgia, serif; --bp-body-family: 'Inter', system-ui, sans-serif; --bp-mono-family: 'JetBrains Mono', ui-monospace, monospace; /* Radii */ --bp-r-sm: 4px; --bp-r-md: 8px; --bp-r-lg: 14px; --bp-r-pill: 999px; /* Spacing */ --bp-s-1: 4px; --bp-s-2: 8px; --bp-s-3: 12px; --bp-s-4: 16px; --bp-s-5: 24px; --bp-s-6: 32px; --bp-s-7: 48px; --bp-s-8: 64px; /* Page width — the ONLY place a page-container width is declared. Every top-level page container reads one of these three; no surface hard-codes a max-width. The three tiers are kept separate even though they currently hold the same value, because they are three different *decisions* — collapsing them to one token would lose which surfaces are dashboards and which are reading columns, and a future narrowing would become another codebase-wide sweep instead of a one-line edit here. --bp-w-page wide hubs and dense tables (journey, search execution, imports) --bp-w-stage stage dashboards and transition screens (was 960px) --bp-w-read coach / chat / prose columns (was 760px) Unified to 1200px 2026-07-27 after the width study (docs/Design/mockups/page-width-study.html). To take dashboards back down, set --bp-w-stage: 960px here and nothing else changes. Same for --bp-w-read at 760px, which is the measure-bound tier: prose runs ~150 characters per line at 1200px, against a comfortable 45-75. */ --bp-w-page: 1200px; --bp-w-stage: 1200px; --bp-w-read: 1200px; /* Stacking order — the ONLY place a z-index is declared. Pick the rung by what the element IS; never invent a number. The gaps between rungs are deliberate so a one-off can slot between two layers without a renumber. --bp-z-base behind a sibling (a ::before rule under its own node) --bp-z-raised above a sibling pseudo-element --bp-z-sticky in-page sticky affordances that scroll with content --bp-z-chrome app chrome: .app-bar, .site-header --bp-z-docked sticky bars that must clear the chrome --bp-z-skip the skip link (#2310) — above ALL page chrome, including a docked bar, because it is the keyboard user's first tab stop and a control that is covered is a control that is not there. Below the drawer and modal rungs, so it can never paint over an open panel — the modal traps Tab, so it is not reachable from one anyway. --bp-z-drawer the non-modal drawer layer (.bp-drawer) — over the page and its chrome, but UNDER the modal layer, because the page it sits over stays live and a real modal must still take over from it (DECISIONS §5.10.2) --bp-z-modal the modal layer and its scrim --bp-z-top legacy "always wins" rung — see the warning below If you reach for a number bigger than the top rung, the answer is a new rung here, not a bigger number in a feature stylesheet. That is how 9999 happened. WARNING on --bp-z-top: it holds 9999 because the older `.modal-overlay` in components.css (still live — feedbacks/_form, shared/_modal) escalated to beat the newer `.modal` at 1000. Two modal systems coexist; until they are reconciled the value is preserved rather than "fixed", because lowering it in a refactor could reorder a real overlay. Do NOT reach for this rung for new work — it exists to name an outlier, not to bless it. */ --bp-z-base: 0; --bp-z-raised: 1; --bp-z-sticky: 20; --bp-z-chrome: 50; --bp-z-docked: 100; --bp-z-skip: 200; --bp-z-drawer: 500; --bp-z-modal: 1000; --bp-z-top: 9999; /* Motion */ --bp-easing: cubic-bezier(.2,.6,.2,1); --bp-dur-fast: 120ms; --bp-dur-med: 200ms; /* Legacy aliases — forward to --bp-* so feature stylesheets not yet migrated keep working */ --bg: var(--bp-paper); --panel: var(--bp-surface); --text: var(--bp-ink); --muted: var(--bp-ink-muted); --border: var(--bp-rule); --primary: var(--bp-accent); --primary-600: var(--bp-accent); --success: var(--bp-success); --danger: var(--bp-danger); --color-border: var(--bp-rule); --color-border-subtle: var(--bp-rule-soft); --color-text: var(--bp-ink); --color-text-muted: var(--bp-ink-muted); --color-text-slate: var(--bp-ink-2); --color-link: var(--bp-accent); --radius-sm: var(--bp-r-md); --radius-md: var(--bp-r-lg); --radius-lg: var(--bp-r-lg); /* Font sizes — no --bp-* equivalent; kept for feature stylesheet compat */ --fs-xs: .875rem; --fs-sm: .95rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; } /* Utility classes */ .hidden { display: none !important; } /* Enforce the HTML spec: the [hidden] attribute must suppress display even when author stylesheets set an explicit display value on the element (e.g. btn classes). */ [hidden] { display: none !important; } /* Global element/link defaults */ a { color: var(--bp-accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Shared utilities */ .form-field { display: grid; gap: .25rem; } .input { font-size: 1.15rem; line-height: 1.35; } /* Layout utilities */ .row-sm { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .row { display: flex; justify-content: space-between; align-items: center; margin-top: 0.4rem; gap: .5rem; flex-wrap: wrap; } .stack-xs { display: grid; gap: .25rem; } .stack-sm { display: grid; gap: .5rem; } /* Unified form control visuals */ .form-control, input.input, textarea.input, .date-selects select { padding: .5rem .65rem; font-size: 1.05rem; background: var(--bp-paper); border: 1px solid var(--bp-rule); border-radius: var(--bp-r-md); color: var(--bp-ink); outline: none; } .form-control:focus, input.input:focus, textarea.input:focus, .date-selects select:focus { border-color: var(--bp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-accent) 15%, transparent); } /* Unified card component applied to existing card-like classes */ .card, .section-card, .we-card, .auth-card { background: var(--bp-paper); border: 1px solid var(--bp-rule); border-radius: var(--bp-r-lg); padding: 1rem; box-shadow: none; } .card--raised { box-shadow: none; } .card--tight { padding: .75rem; } .card--lg { padding: 1.5rem; border-radius: var(--bp-r-lg); } /* Coach Feedback layout helpers */ .coach-feedback-layout { display: grid; gap: 0.75rem; } /* Keep the feedback form visible while data below scrolls. NOTE: no view or controller references this class as of 2026-07-27 — it looks like dead CSS. Left in place (a refactor is the wrong PR to delete from), but it is a candidate for removal. Its z-index was a literal 10; the sticky rung is 20, and adopting it is inert precisely because nothing renders the class. */ .feedback-form-sticky { position: sticky; top: 0; z-index: var(--bp-z-sticky); background: var(--bp-paper); padding-top: 0.25rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--bp-rule); } /* Make the included data area scroll independently when long */ .feedback-included-scroll { max-height: 60vh; overflow: auto; -webkit-overflow-scrolling: touch; } /* Section cards to differentiate tables on coach feedback index */ .section-card { margin-bottom: 1rem; } .section-card h1 { margin-top: 0.25rem; margin-bottom: 0.25rem; font-size: var(--fs-lg); } .section-help { margin-top: 0; margin-bottom: 0.75rem; color: var(--bp-ink-muted); font-size: var(--fs-sm); } /* Emphasis variants */ .section-warning { background: var(--bp-tint-warning); border-left: 4px solid var(--bp-warning); } .section-neutral { background: var(--bp-surface); border-left: 4px solid var(--bp-ink-subtle); }