/* ============================================================================= Portfolio Design System Hand-written CSS. Light mode. Slate-indigo. Inter 14px. No shadows on cards. No rounded-3xl. No dark mode. Motion is structural only — position:sticky layout and a single opacity fade-in on scroll. No marketing flourishes. No parallax, no spinners. Per-vertical theming is a single accent-color swap on . ============================================================================= */ /* --------------------------------------------------------------------------- Tokens --------------------------------------------------------------------------- */ :root { /* Brand */ --brand-accent: #384D70; /* slate-indigo — buttons, links, focus */ --brand-accent-hover: #2b3c59; /* deeper slate for hover on solid buttons */ --brand-accent-soft: #E8ECF3; /* tinted background for active states */ /* Surfaces */ --page-bg: #FAFAF8; /* warm near-white page background */ --card-bg: #FFFFFF; /* card surface */ --card-border: #EAEAEA; /* 1px card borders, no shadows */ --row-hover-bg: #F5F6F8; /* row + card hover fill */ /* Text */ --text-primary: #0A0F1C; /* cool near-black body text */ --text-muted: #6B7280; /* secondary labels, timestamps */ /* Status */ --status-drift: #DC2626; /* drift indicator only, never brand */ --status-drift-bg: #FEE2E2; --status-healthy: #16A34A; /* verified across systems */ --status-healthy-bg: #DCFCE7; --status-warning: #D97706; /* SLA breach, attention needed */ --status-warning-bg: #FEF3C7; /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Radius — cap at 8px */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; /* Layout */ --container-max: 1200px; /* Header removed 2026-04-10 refinement pass — kept as 0 so sticky demos anchor to viewport top with only the space-4 gap for breathing room. */ --header-height: 0px; /* Transitions (functional only) */ --t-fast: 120ms ease-out; --t-base: 150ms ease-out; } /* --------------------------------------------------------------------------- Reset --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--page-bg); color: var(--text-primary); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } button { font-family: inherit; font-size: inherit; cursor: pointer; } a { color: var(--brand-accent); text-decoration: none; transition: color var(--t-fast); } a:hover { text-decoration: underline; } a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* --------------------------------------------------------------------------- Typography --------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text-primary); font-weight: 600; line-height: 1.25; } .page-title { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; margin-bottom: var(--space-2); } .section-title { font-size: 16px; font-weight: 600; margin-bottom: var(--space-3); } .card-title { font-size: 14px; font-weight: 600; color: var(--text-primary); } .data-label { font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--text-muted); } .data-value { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary); } .data-value-lg { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary); } .metric-headline { font-size: 38px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.1; } .caption { font-size: 12px; font-weight: 400; color: var(--text-muted); } .mono { font-family: var(--font-mono); } .num { font-variant-numeric: tabular-nums; } .text-muted { color: var(--text-muted); } .text-primary { color: var(--text-primary); } .micro-copy { font-size: 12px; color: var(--text-primary); margin-top: var(--space-2); margin-bottom: var(--space-5); transition: color 300ms ease-out; } .micro-copy-faded { color: var(--text-muted); } /* --------------------------------------------------------------------------- Layout --------------------------------------------------------------------------- */ .site-main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-7); } .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-4); } .stack > * + * { margin-top: var(--space-4); } .stack-lg > * + * { margin-top: var(--space-5); } /* Header / Navigation / Contact panel removed 2026-04-10 refinement pass. Identity anchor moved to in-scroll footer on vertical_landing.html. */ /* --------------------------------------------------------------------------- Footer --------------------------------------------------------------------------- */ .site-footer { max-width: var(--container-max); margin: 0 auto; padding: var(--space-6) var(--space-4); border-top: 1px solid var(--card-border); margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); font-size: 12px; color: var(--text-muted); } .footer-other-packs a { color: var(--text-muted); } .footer-other-packs a:hover { color: var(--brand-accent); } .footer-links { display: flex; align-items: center; gap: 16px; } .footer-links .footer-name { color: var(--text-muted); } .footer-links a { color: var(--text-muted); font-size: 18px; line-height: 1; display: inline-flex; text-decoration: none; transition: color 180ms ease, transform 180ms ease; } .footer-links a:hover { color: var(--brand-accent); transform: translateY(-1px); } .root-footer-links a { color: var(--text-muted); font-size: 22px; line-height: 1; display: inline-flex; text-decoration: none; transition: color 180ms ease, transform 180ms ease; } .root-footer-links a:hover { color: var(--brand-accent); transform: translateY(-1px); } /* --------------------------------------------------------------------------- Cards --------------------------------------------------------------------------- */ .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: var(--space-5); } .card-sm { padding: var(--space-4); } .card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } .card-body > * + * { margin-top: var(--space-3); } .card-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } /* Dashboard card — reads as a clickable portal */ .dashboard-card { position: relative; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: var(--space-5); cursor: pointer; transition: background var(--t-base), border-color var(--t-base); display: block; color: inherit; text-decoration: none; } .dashboard-card:hover { background: var(--row-hover-bg); border-color: var(--brand-accent); text-decoration: none; } .dashboard-card:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; } .dashboard-card .portal-caret { position: absolute; top: var(--space-4); right: var(--space-4); color: var(--text-muted); font-size: 16px; transition: color var(--t-fast), transform var(--t-fast); } .dashboard-card:hover .portal-caret { color: var(--brand-accent); transform: translateX(2px); } /* --------------------------------------------------------------------------- Tables --------------------------------------------------------------------------- */ .data-table { width: 100%; border-collapse: collapse; font-size: 14px; } .data-table thead th { text-align: left; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: var(--space-3) var(--space-3); border-bottom: 1px solid var(--card-border); background: var(--card-bg); white-space: nowrap; } .data-table tbody td { padding: 0 var(--space-3); height: 36px; border-bottom: 1px solid var(--card-border); vertical-align: middle; } .data-table tbody tr { cursor: pointer; transition: background var(--t-base); } .data-table tbody tr:hover { background: var(--row-hover-bg); } .data-table tbody tr:focus-within { background: var(--row-hover-bg); } .data-table tbody tr.row-visited .visited-dot-cell .visited-dot { background: var(--brand-accent); } .data-table .col-visited { width: 24px; padding-left: var(--space-3); } .data-table .col-num { font-variant-numeric: tabular-nums; text-align: right; } /* Scorecard table scrolls horizontally on narrow screens */ .scorecard-table { overflow-x: auto; border: 1px solid var(--card-border); border-radius: var(--radius-lg); background: var(--card-bg); } .scorecard-table table { min-width: 720px; margin: 0; } .scorecard-table .data-table tbody tr:last-child td { border-bottom: none; } /* --------------------------------------------------------------------------- Visited dot indicator --------------------------------------------------------------------------- */ .visited-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: transparent; transition: background var(--t-fast); } .row-visited .visited-dot { background: var(--brand-accent); } /* --------------------------------------------------------------------------- Buttons --------------------------------------------------------------------------- */ .btn-primary, .btn-secondary, .btn-ghost { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; font-weight: 600; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; line-height: 1.4; transition: background var(--t-base), border-color var(--t-base), color var(--t-base); text-decoration: none; } .btn-primary { background: var(--brand-accent); color: #FFFFFF; border-color: var(--brand-accent); } .btn-primary:hover { background: var(--brand-accent-hover); border-color: var(--brand-accent-hover); color: #FFFFFF; text-decoration: none; } .btn-secondary { background: var(--card-bg); color: var(--text-primary); border-color: var(--card-border); } .btn-secondary:hover { background: var(--row-hover-bg); border-color: var(--brand-accent); color: var(--brand-accent); text-decoration: none; } .btn-ghost { background: transparent; color: var(--text-muted); border-color: transparent; } .btn-ghost:hover { background: var(--row-hover-bg); color: var(--brand-accent); text-decoration: none; } .btn-sm { font-size: 12px; padding: 6px var(--space-3); } /* --------------------------------------------------------------------------- Chips and pills --------------------------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 12px; font-weight: 500; padding: 3px var(--space-2); border-radius: var(--radius-sm); background: var(--row-hover-bg); color: var(--text-primary); border: 1px solid var(--card-border); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); } .chip:hover { border-color: var(--brand-accent); color: var(--brand-accent); text-decoration: none; } .chip.is-active { background: var(--brand-accent-soft); border-color: var(--brand-accent); color: var(--brand-accent); } /* --------------------------------------------------------------------------- Status pills --------------------------------------------------------------------------- */ .pill-status-drift, .pill-status-healthy, .pill-status-warning { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; padding: 3px var(--space-2); border-radius: var(--radius-sm); line-height: 1.3; white-space: nowrap; } .pill-status-drift { background: var(--status-drift-bg); color: var(--status-drift); } .pill-status-healthy { background: var(--status-healthy-bg); color: var(--status-healthy); } .pill-status-warning { background: var(--status-warning-bg); color: var(--status-warning); } /* Status dot — used inline before labels */ .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .status-dot--drift { background: var(--status-drift); } .status-dot--healthy { background: var(--status-healthy); } .status-dot--warning { background: var(--status-warning); } /* Sync indicator — the ONE allowed pulsing element */ .sync-indicator { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-accent); } .sync-indicator.is-syncing { animation: tl-sync-pulse 1.4s ease-in-out infinite; } @keyframes tl-sync-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* --------------------------------------------------------------------------- Forms --------------------------------------------------------------------------- */ label { display: block; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: var(--space-1); } input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="number"], select, textarea { width: 100%; font-family: inherit; font-size: 14px; padding: var(--space-2) var(--space-3); background: var(--card-bg); color: var(--text-primary); border: 1px solid var(--card-border); border-radius: var(--radius-md); transition: border-color var(--t-fast); } input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="number"]:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-accent); outline-offset: 0; border-color: var(--brand-accent); } /* "How it works" component removed 2026-04-10 refinement pass. Technical detail lives on GitHub — no in-page expander. */ /* --------------------------------------------------------------------------- Error page --------------------------------------------------------------------------- */ .error-page { max-width: 480px; margin: 0 auto; padding: 96px var(--space-4); text-align: center; } .error-status { font-size: 72px; font-weight: 800; color: var(--brand-accent); letter-spacing: -0.03em; line-height: 1; margin: 0; } .error-message { font-size: 16px; color: var(--text-primary); margin: var(--space-4) 0 var(--space-6); } /* --------------------------------------------------------------------------- Utility classes --------------------------------------------------------------------------- */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-5 { gap: var(--space-5); } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1 1 0%; } .grid { display: grid; } .grid-cols-2 { grid-template-columns: repeat(2, 1fr); } .grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .grid-cols-4 { grid-template-columns: repeat(4, 1fr); } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); } .mb-6 { margin-bottom: var(--space-6); } .w-full { width: 100%; } .text-right { text-align: right; } .text-center { text-align: center; } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hidden { display: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------------- Responsive --------------------------------------------------------------------------- */ @media (max-width: 768px) { .site-nav { gap: var(--space-3); padding: 0 var(--space-3); } .pack-nav { gap: var(--space-3); overflow-x: auto; -webkit-overflow-scrolling: touch; } .pack-nav::-webkit-scrollbar { display: none; } .contact-panel { position: static; margin: var(--space-3) auto 0; justify-content: center; flex-wrap: wrap; border: none; padding: 0; background: transparent; } .site-main { padding: var(--space-4) var(--space-3) var(--space-6); } .card-grid { grid-template-columns: 1fr; } .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; } .page-title { font-size: 24px; } .metric-headline { font-size: 30px; } /* AE scorecard table scrolls horizontally on narrow screens */ .scorecard-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } .data-table { font-size: 13px; } .error-page { padding: 64px var(--space-3); } .error-status { font-size: 56px; } } /* --------------------------------------------------------------------------- Scrollytelling landing layout ============================= Desktop: each section is a 2-column grid — narrative scrolls on the left, demo component is `position: sticky` on the right. Sticky naturally constrains to the grid cell's containing block so it unsticks at the section boundary and hands off to the next section's demo. Mobile (< 900px): columns collapse to single-column, no sticky, plain vertical flow. No scroll-pin on small screens (notoriously janky). All motion respects `prefers-reduced-motion`. --------------------------------------------------------------------------- */ .vl-hero { padding: var(--space-5) 0 var(--space-4); border-bottom: 1px solid var(--card-border); margin-bottom: var(--space-5); } .vl-hero .container { max-width: 880px; } .vl-eyebrow { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 var(--space-4); } .vl-problem { font-size: 28px; font-weight: 700; color: var(--text-primary); line-height: 1.35; letter-spacing: -0.01em; margin: 0 0 var(--space-4); } .vl-subproblem { font-size: 18px; color: var(--text-muted); line-height: 1.55; margin: 0; max-width: 640px; } /* Added 2026-04-11 credibility pass. Replaces .vl-subproblem in the scrollytelling hero. Makes the "these three scenarios are different shapes of the same disconnect" categorization explicit between the problem headline and the concrete scenario list. Muted-italic so it reads as commentary on the problem, not as a second headline. */ .vl-thesis { font-size: 18px; color: var(--text-muted); line-height: 1.55; font-style: italic; margin: 0; max-width: 640px; } .vl-intro { font-size: 15px; color: var(--text-muted); line-height: 1.65; margin: var(--space-5) 0 0; max-width: 680px; padding-top: var(--space-4); border-top: 1px solid var(--card-border); } /* Phase 6 — per-vertical research prelude. Rendered directly below the intro_paragraph, same width, first-person voice ("I looked into ..."), contains the explicit case-study framing so the reader doesn't have to infer it from tooltips and research footers alone. */ .vl-research-prelude { font-size: 14px; color: var(--text-muted); line-height: 1.65; margin: var(--space-4) 0 0; max-width: 680px; font-style: italic; } .vl-sections { padding: 0 var(--space-4); max-width: 800px; margin: 0 auto; } .vl-section { padding: var(--space-8) 0; border-bottom: 1px solid var(--card-border); } .vl-section:last-child { border-bottom: none; padding-bottom: 0; } .vl-narrative { padding-top: var(--space-4); } .vl-section-eyebrow { font-size: 11px; font-weight: 600; color: var(--brand-accent); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 var(--space-3); } .vl-section-title { font-size: 32px; font-weight: 700; color: var(--text-primary); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 var(--space-5); } .vl-problem-text { margin-bottom: var(--space-4); } .vl-problem-text p { font-size: 15px; line-height: 1.65; color: var(--text-primary); margin: 0 0 var(--space-3); } .vl-solution-text { margin-bottom: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--card-border); } .vl-solution-text p { font-size: 14px; line-height: 1.65; color: var(--text-muted); margin: 0 0 var(--space-3); } .vl-production-link { font-size: 13px; color: var(--text-tertiary); margin: var(--space-3) 0 var(--space-4); } .vl-production-link a { color: var(--brand-accent); text-decoration: none; border-bottom: 1px solid transparent; } .vl-production-link a:hover { border-bottom-color: var(--brand-accent); } .vl-cta { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; font-weight: 600; color: var(--brand-accent); padding: var(--space-3) var(--space-4); border: 1px solid var(--brand-accent); border-radius: var(--radius-md); transition: background var(--t-base), color var(--t-base); } .vl-cta:hover { background: var(--brand-accent); color: #fff; text-decoration: none; } .vl-demo-col { min-width: 0; } .vl-demo-col { margin-top: var(--space-5); } .vl-demo-sticky .demo-module { margin-top: 0; } .vl-footer-cta { padding: var(--space-8) var(--space-4); margin-top: var(--space-6); text-align: center; border-top: 1px solid var(--card-border); } .vl-footer-eyebrow { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 var(--space-2); } .vl-footer-line { font-size: 16px; font-weight: 500; color: var(--text-primary); margin: 0 0 var(--space-4); max-width: 640px; margin-left: auto; margin-right: auto; } .vl-footer-links { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); font-size: 14px; } .vl-footer-links a { color: var(--text-muted); font-size: 22px; line-height: 1; display: inline-flex; text-decoration: none; transition: color 180ms ease, transform 180ms ease; } .vl-footer-links a:hover { color: var(--brand-accent); transform: translateY(-1px); } /* Mobile collapse — single column, no sticky, generous vertical rhythm */ @media (max-width: 900px) { .vl-hero { padding: var(--space-6) 0 var(--space-5); margin-bottom: var(--space-6); } .vl-problem { font-size: 22px; line-height: 1.4; } .vl-subproblem { font-size: 16px; } .vl-section { padding: var(--space-6) 0; } .vl-section-title { font-size: 24px; } .vl-footer-cta { padding: var(--space-6) var(--space-4); } } /* --------------------------------------------------------------------------- Demo modules — shared shell for all 9 per-pack demo partials. Each demo partial lives in templates/components/packs/{pack}/{demo}.html and renders as a self-contained card that can be (a) embedded full-screen on its standalone sub-page or (b) embedded compact in a scrollytelling landing section. Visual identity is consistent across all 9 demos; only the inner layout differs. --------------------------------------------------------------------------- */ .demo-module { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: var(--space-5); margin-top: var(--space-5); /* Phase 5d (2026-04-11): seed-chip pseudo-element anchors here */ position: relative; } /* Seed chip ".demo-module::before" rule removed 2026-04-11 scan-budget pass. Was "illustrative · seeded data", was occluding widget header rows on mobile. The illustrative framing is now carried by (a) the research-prelude paragraph below the hero, (b) the vl-code-artifact caption ("The shape of a …"), (c) the research footer text. See memory rule 20. Do not re-add. */ .demo-module + .demo-module { margin-top: var(--space-5); } .demo-module-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); } .demo-module-stat { flex: 1 1 auto; min-width: 0; } .demo-module-stat .metric-headline { margin-top: var(--space-1); margin-bottom: var(--space-1); } .demo-module-table { margin-top: var(--space-3); } .demo-module-footer { display: flex; justify-content: flex-end; padding-top: var(--space-3); border-top: 1px solid var(--card-border); margin-top: var(--space-4); } .demo-module-cta { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; font-weight: 600; color: var(--brand-accent); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--card-border); transition: border-color var(--t-base), background var(--t-base); } .demo-module-cta:hover { text-decoration: none; border-color: var(--brand-accent); background: var(--brand-accent-soft); } /* --------------------------------------------------------------------------- Demo 1.2 — Stale PQL card stack --------------------------------------------------------------------------- */ .pql-card-stack { display: flex; flex-direction: column; gap: var(--space-3); } .pql-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: var(--space-4); } .pql-card-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } .pql-card-body { display: flex; align-items: flex-start; gap: var(--space-5); margin-bottom: var(--space-4); flex-wrap: wrap; } .pql-score-block, .pql-dollar-block { display: flex; flex-direction: column; gap: var(--space-1); } .pql-score-row { display: inline-flex; align-items: center; gap: var(--space-2); } .pql-score { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; color: var(--status-warning); } .pql-dollar { font-size: 15px; font-weight: 600; color: var(--text-primary); } /* Timeline: simple 2-dot bar that implies routed → decayed duration */ .pql-timeline { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px dashed var(--card-border); } .pql-timeline-track { position: relative; height: 4px; background: linear-gradient(to right, var(--status-healthy), var(--status-warning)); border-radius: 2px; } .pql-timeline-dot { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid var(--card-bg); box-sizing: content-box; } .pql-timeline-dot--start { left: 0; background: var(--status-healthy); } .pql-timeline-dot--end { left: 100%; background: var(--status-warning); } .pql-timeline-labels { display: flex; justify-content: space-between; } /* --------------------------------------------------------------------------- Demo 2.1 — Home Care 6am Call-Off --------------------------------------------------------------------------- */ .call-off-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: var(--space-4); } .call-off-shift-header { margin-bottom: var(--space-4); } .call-off-shift-header .card-title { font-size: 16px; margin-bottom: var(--space-1); } .call-off-shift-meta { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-4); margin: 0 0 var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--card-border); } .call-off-shift-meta > div { min-width: 0; } .call-off-shift-meta dt { text-transform: uppercase; margin-bottom: var(--space-1); } .call-off-shift-meta dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); } .call-off-backups { margin-bottom: var(--space-4); } .call-off-backups > .data-label { display: block; margin-bottom: var(--space-3); text-transform: uppercase; } .call-off-backup-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); } .call-off-backup { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); } .call-off-backup--top { background: var(--brand-accent-soft); border-color: var(--brand-accent); } .call-off-rank { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--card-border); color: var(--text-muted); font-size: 12px; font-weight: 700; } .call-off-backup--top .call-off-rank { background: var(--brand-accent); color: #fff; } .call-off-backup-body { min-width: 0; } .call-off-backup-name { margin: 0 0 2px; font-size: 14px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .call-off-backup .caption { margin: 0; } /* Agent verdict blockquote — shared by multiple demos */ .agent-verdict { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); background: var(--row-hover-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); } .agent-verdict .data-label { margin-bottom: var(--space-1); } .agent-verdict p:last-child { margin: 0; font-size: 14px; color: var(--text-primary); line-height: 1.6; } /* --------------------------------------------------------------------------- Demo 2.2 — EVV Triple Mismatch (the hero moment) --------------------------------------------------------------------------- */ .evv-mismatch-breakdown { margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--card-border); } .evv-mismatch-breakdown > .data-label { display: block; margin-bottom: var(--space-2); text-transform: uppercase; } .evv-mismatch-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); } .evv-mismatch-list li { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--text-primary); } .evv-mismatch-dollars { color: var(--status-drift); font-weight: 600; } .evv-hero-visit { margin-top: var(--space-4); } .evv-hero-header { margin-bottom: var(--space-3); } .evv-three-col { overflow-x: auto; border: 1px solid var(--card-border); border-radius: var(--radius-md); } .evv-three-col-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; } .evv-three-col-table thead th { padding: var(--space-3); background: var(--row-hover-bg); text-align: left; vertical-align: top; border-bottom: 1px solid var(--card-border); } .evv-three-col-table thead th:not(:last-child) { border-right: 1px solid var(--card-border); } .evv-source-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-primary); text-transform: none; letter-spacing: 0; } .evv-three-col-table .caption { display: block; } .evv-three-col-table tbody th, .evv-three-col-table tbody td { padding: var(--space-3); border-bottom: 1px solid var(--card-border); vertical-align: top; } .evv-three-col-table tbody th:not(:last-child), .evv-three-col-table tbody td:not(:last-child) { border-right: 1px solid var(--card-border); } .evv-three-col-table tbody tr:last-child th, .evv-three-col-table tbody tr:last-child td { border-bottom: none; } .evv-three-col-table .evv-row-label { text-align: left; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); background: var(--page-bg); width: 72px; } .evv-cell-drift { background: var(--status-drift-bg); color: var(--status-drift); font-weight: 600; } .evv-impact { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--status-drift-bg); border-radius: var(--radius-md); } .evv-impact p { margin: 0 0 var(--space-1); font-size: 13px; color: var(--text-primary); } .evv-impact p:last-child { margin: 0; } /* --------------------------------------------------------------------------- Shared horizontal bar chart — used by enrichment breakdown, SOR PMS distribution, per-location ROI lift visualization. Handcrafted, no chart library. --------------------------------------------------------------------------- */ .hbar-list { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: flex; flex-direction: column; gap: var(--space-2); } .hbar { display: grid; grid-template-columns: 140px 1fr 52px; gap: var(--space-3); align-items: center; font-size: 13px; } .hbar-label { color: var(--text-primary); display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hbar-track { position: relative; height: 10px; background: var(--card-border); border-radius: var(--radius-sm); overflow: hidden; } .hbar-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--brand-accent); border-radius: var(--radius-sm); transition: width 600ms ease-out; } .hbar-fill--accent { background: var(--brand-accent); } .hbar-fill--healthy { background: var(--status-healthy); } .hbar-fill--drift { background: var(--status-drift); } .hbar--flat .hbar-label { color: var(--status-drift); } .hbar-value { text-align: right; font-weight: 600; color: var(--text-primary); } .hbar--flat .hbar-value { color: var(--status-drift); } /* --------------------------------------------------------------------------- Demo 3.1 — Account Hierarchy Resolver (enrichment waterfall) --------------------------------------------------------------------------- */ .enrichment-waterfall { margin-bottom: var(--space-5); } .enrichment-waterfall > .data-label { display: block; margin-bottom: var(--space-3); text-transform: uppercase; } .waterfall-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); position: relative; } .waterfall-step { display: grid; grid-template-columns: 130px 1fr; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); position: relative; } .waterfall-step:not(:last-child)::after { content: ''; position: absolute; left: 24px; bottom: calc(-1 * var(--space-2) - 1px); width: 1px; height: calc(var(--space-2) + 2px); background: var(--card-border); } .waterfall-step-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .waterfall-step-finding { font-size: 14px; color: var(--text-primary); } .waterfall-step-finding--drift { color: var(--status-drift); font-weight: 500; } .waterfall-step-finding--confirmed { color: var(--status-healthy); font-weight: 500; } .waterfall-step--verdict { background: var(--brand-accent-soft); border-color: var(--brand-accent); } .waterfall-step--verdict .waterfall-step-label { color: var(--brand-accent); } .waterfall-step--verdict .waterfall-step-finding { color: var(--brand-accent); font-weight: 600; } /* Verdict card — the hero practice with its resolver recommendation */ .hierarchy-verdict-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); } .hierarchy-verdict-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); } .hierarchy-verdict-header .card-title { font-size: 16px; margin-bottom: 2px; } .hierarchy-verdict-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin: 0; padding-bottom: var(--space-4); border-bottom: 1px solid var(--card-border); } .hierarchy-verdict-facts > div { min-width: 0; } .hierarchy-verdict-facts dt { text-transform: uppercase; margin-bottom: var(--space-1); } .hierarchy-verdict-facts dd { margin: 0; } .reclassification-breakdown { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--card-border); } .reclassification-breakdown > .data-label { display: block; margin-bottom: var(--space-3); text-transform: uppercase; } /* --------------------------------------------------------------------------- Demo 3.2 — SOR Detection --------------------------------------------------------------------------- */ .pms-distribution { margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--card-border); } .pms-distribution > .data-label { display: block; margin-bottom: var(--space-3); text-transform: uppercase; } .sor-hero-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: var(--space-4); } .sor-hero-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--card-border); } .sor-hero-header .card-title { font-size: 16px; margin-bottom: 2px; } .sor-hero-pms { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .sor-hero-pms-name { font-size: 18px; font-weight: 700; color: var(--text-primary); } .sor-signals { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); } .sor-signal { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-2); align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--text-primary); } .sor-signal-check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--status-healthy-bg); color: var(--status-healthy); font-weight: 700; font-size: 12px; flex-shrink: 0; } /* --------------------------------------------------------------------------- Demo 3.3 — Per-Location ROI --------------------------------------------------------------------------- */ .roi-summary-pills { display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-end; flex-shrink: 0; } .roi-locations { margin-bottom: var(--space-4); } .roi-locations > .data-label { display: block; margin-bottom: var(--space-3); text-transform: uppercase; } .roi-aggregate-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--card-border); font-size: 13px; } .roi-aggregate-row .hbar-label { text-transform: uppercase; font-size: 11px; letter-spacing: 0.05em; color: var(--text-muted); } /* --------------------------------------------------------------------------- Demo 2.3 — Stale Care Plan (LLM shift-note drift) --------------------------------------------------------------------------- */ .care-plan-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: var(--space-4); } .care-plan-header { margin-bottom: var(--space-4); } .care-plan-notes { margin-bottom: var(--space-4); } .care-plan-notes > .data-label { display: block; margin-bottom: var(--space-3); text-transform: uppercase; } .care-plan-note-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); border-left: 2px solid var(--card-border); padding-left: var(--space-4); } .care-plan-note { position: relative; padding-left: var(--space-2); } .care-plan-note::before { content: ''; position: absolute; left: calc(-1 * var(--space-4) - 5px); top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--status-warning); border: 2px solid var(--card-bg); } .care-plan-note-date { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 2px; } .care-plan-note-quote { margin: 0; font-size: 14px; color: var(--text-primary); font-style: italic; line-height: 1.5; } .care-plan-verdict { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3); align-items: center; margin-top: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--row-hover-bg); border-radius: var(--radius-md); } .care-plan-verdict-col { min-width: 0; } .care-plan-verdict-col .data-label { margin-bottom: var(--space-1); } .care-plan-verdict-text { margin: 0; font-size: 13px; line-height: 1.5; } .care-plan-verdict-col--current .care-plan-verdict-text { color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--text-muted); } .care-plan-verdict-col--inferred .care-plan-verdict-text { color: var(--status-drift); font-weight: 500; } .care-plan-verdict-arrow { color: var(--text-muted); font-size: 20px; font-weight: 600; } /* --------------------------------------------------------------------------- Demo 1.3 — Forecast Variance gauge --------------------------------------------------------------------------- */ .forecast-gauge { flex-shrink: 0; width: 140px; height: 80px; padding: var(--space-2); background: var(--row-hover-bg); border-radius: var(--radius-md); } .forecast-gauge svg { width: 100%; height: 100%; } .forecast-scorecard { margin-top: var(--space-4); } .forecast-scorecard .scorecard-table { margin-top: var(--space-2); } .forecast-commission-audit { margin-top: var(--space-5); } .forecast-commission-audit .data-table { margin-top: var(--space-2); } /* --------------------------------------------------------------------------- Page back link — thin affordance that replaces the old page-header .back-link when a demo body partial owns its own visual identity. --------------------------------------------------------------------------- */ .page-back { margin-bottom: var(--space-3); } .page-back .back-link { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; } .page-back .back-link:hover { color: var(--brand-accent); text-decoration: none; } /* --------------------------------------------------------------------------- Per-pack theming ---------------- Each vertical pack gets a subtle accent color shift — nothing else. Same backgrounds, same typography, same spacing, same layout. Think Linear / Vercel / Stripe docs restraint: one token change, nothing more. The default slate-indigo is used on the root portfolio page and /architecture. --------------------------------------------------------------------------- */ body[data-pack="saas"] { /* SaaS: cool blue — tech, confident, 2026-idiomatic for dev-tool buyers. */ --brand-accent: #2563eb; --brand-accent-hover: #1d4ed8; --brand-accent-soft: #dbeafe; } body[data-pack="home-care"] { /* Home care: warm amber/clay — serious but human, not hospital-blue, not pastel. Reads as "care provider" not "software company." */ --brand-accent: #b45309; --brand-accent-hover: #92400e; --brand-accent-soft: #fef3c7; } body[data-pack="vertical-ai"] { /* Muted slate. Distinct from SaaS blue but does not read as "AI startup brand color." Chosen 2026-04-10 refinement pass — replaces the original violet (#6d28d9) which pattern-matched to generic AI startup branding. */ --brand-accent: #475569; --brand-accent-hover: #334155; --brand-accent-soft: #e2e8f0; } body[data-pack="sca"] { /* Teal — technical, security-adjacent without the stereotypical violet. Added 2026-04-12 for the SCA vertical (software supply chain compliance). */ --brand-accent: #0d9488; --brand-accent-hover: #0f766e; --brand-accent-soft: #f0fdfa; } body[data-pack="distribution"] { /* Rose — warm, industrial, distinct from amber (yellow-warm) and the cool tones (blue, teal, slate). Added 2026-04-12 for distribution vertical. */ --brand-accent: #e11d48; --brand-accent-hover: #be123c; --brand-accent-soft: #fff1f2; } /* --------------------------------------------------------------------------- Root portfolio page (`/`) --------------------------------------------------------------------------- */ .root-hero { padding: var(--space-5) 0 var(--space-4); border-bottom: 1px solid var(--card-border); margin-bottom: var(--space-5); } .root-hero .container { max-width: 820px; } /* --------------------------------------------------------------------------- Launchpad root page — photo + plain-text mini bio + 3 clickable tiles + one-line footer. No marketing headline, no card-interior teasers, no mini-case-studies. See templates/root_landing.html for structure. --------------------------------------------------------------------------- */ /* Hero — photo + plain-text mini bio. Identity carries the framing, no marketing headline, no eyebrow label. Avatar is the visual anchor. */ .root-hero-inner { display: flex; align-items: flex-start; gap: var(--space-5); padding: var(--space-4) var(--space-4) var(--space-3); max-width: 820px; margin-left: auto; margin-right: auto; } .root-hero-avatar { width: 120px; height: 120px; flex-shrink: 0; border-radius: 50%; object-fit: cover; object-position: center; background: var(--row-hover-bg); } .root-hero-body { flex: 1 1 auto; min-width: 0; } .root-hero-body p { font-size: 15px; color: var(--text-primary); line-height: 1.6; margin: 0 0 var(--space-4); max-width: 640px; } .root-hero-body p:last-child { margin-bottom: 0; color: var(--text-muted); } /* Tile list — three clickable rows. Each is a full so the whole tile is the affordance, not a tiny button at the bottom. */ .root-tiles { display: flex; flex-direction: column; gap: var(--space-4); padding: 0 var(--space-4) var(--space-6); margin-top: var(--space-3); } /* Root Tile Card Pass 2026-04-11 -- each tile is now a flex-column block with 5 content layers (meta row, title, scenarios, signals, CTA). Was a flex-row with body + arrow in the launchpad pass. */ .root-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-6); background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius-md); text-decoration: none; transition: border-color var(--t-base), background var(--t-base), transform var(--t-base); } .root-tile:hover { border-color: var(--brand-accent); background: var(--brand-accent-soft); text-decoration: none; transform: translateY(-1px); } .root-tile[data-pack="saas"] { --brand-accent: #2563eb; --brand-accent-hover: #1d4ed8; --brand-accent-soft: #eff6ff; } .root-tile[data-pack="home-care"] { --brand-accent: #b45309; --brand-accent-hover: #92400e; --brand-accent-soft: #fffbeb; } .root-tile[data-pack="vertical-ai"] { --brand-accent: #475569; --brand-accent-hover: #334155; --brand-accent-soft: #f8fafc; } .root-tile[data-pack="sca"] { --brand-accent: #0d9488; --brand-accent-hover: #0f766e; --brand-accent-soft: #f0fdfa; } .root-tile[data-pack="distribution"] { --brand-accent: #e11d48; --brand-accent-hover: #be123c; --brand-accent-soft: #fff1f2; } /* Content layers sit above the ghost numeral. */ .root-tile-eyebrow, .root-tile-title, .root-tile-scenarios, .root-tile-signals, .root-tile-cta { position: relative; z-index: 1; } /* Layer 1: eyebrow — vertical label */ /* Layer 2: title — the 1-line umbrella sentence */ .root-tile-title { font-size: 19px; font-weight: 600; color: var(--text-primary); line-height: 1.45; letter-spacing: -0.01em; margin: 0; max-width: 820px; } /* Per-pack title scale — shorter umbrellas get more weight, longer ones compress. Produces subtle rhythm down the stack (18–27 word range). */ .root-tile[data-pack="distribution"] .root-tile-title { font-size: 21px; } .root-tile[data-pack="home-care"] .root-tile-title { font-size: 20px; } .root-tile[data-pack="vertical-ai"] .root-tile-title { font-size: 19px; } .root-tile[data-pack="saas"] .root-tile-title { font-size: 18px; } .root-tile[data-pack="sca"] .root-tile-title { font-size: 18px; } /* Layer 3: scenario preview + artifact callout */ .root-tile-scenarios { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 0; max-width: 820px; } /* Layer 4: tool signals row */ .root-tile-signals { font-size: 12px; color: var(--text-muted); letter-spacing: 0.02em; margin: 0; font-weight: 500; } /* Layer 5: CTA -- "Read the three scenarios" anchored bottom-right */ .root-tile-cta { align-self: flex-end; display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; font-weight: 600; color: var(--brand-accent); margin-top: var(--space-2); transition: transform var(--t-base); } .root-tile:hover .root-tile-cta { transform: translateX(4px); } /* Eyebrow — the pack's vertical label at the top of each tile. */ .root-tile-eyebrow { font-size: 11px; font-weight: 600; color: var(--brand-accent); text-transform: uppercase; letter-spacing: 0.08em; } @media (max-width: 768px) { .root-hero-inner { flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-6) var(--space-4) var(--space-4); } /* Photo centers on its own row; bio stays left-aligned below. */ .root-hero-avatar { width: 96px; height: 96px; align-self: center; } .root-hero-body { align-self: stretch; } .root-hero-body p { font-size: 14px; } .root-tile { padding: var(--space-4) var(--space-5); gap: var(--space-3); } .root-tile-title { font-size: 17px; } .root-tile[data-pack="distribution"] .root-tile-title { font-size: 19px; } .root-tile[data-pack="home-care"] .root-tile-title { font-size: 18px; } .root-tile[data-pack="vertical-ai"] .root-tile-title { font-size: 17px; } .root-tile[data-pack="saas"] .root-tile-title { font-size: 16px; } .root-tile[data-pack="sca"] .root-tile-title { font-size: 16px; } .root-tile-scenarios { font-size: 13px; } } .root-footer-cta { padding: var(--space-5) var(--space-4); text-align: center; border-top: 1px solid var(--card-border); margin-top: var(--space-3); } .root-footer-links { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); font-size: 14px; font-weight: 500; } /* --------------------------------------------------------------------------- Scroll-driven reveal — subtle opacity fade when elements enter view. Layered on top of base styles so no-JS / reduced-motion keeps content immediately visible. See templates/base.html for the IntersectionObserver. --------------------------------------------------------------------------- */ [data-reveal] { opacity: 1; transition: opacity 420ms ease-out; } html.js-scroll-reveal [data-reveal] { opacity: 0; } html.js-scroll-reveal [data-reveal].is-in-view { opacity: 1; } /* --------------------------------------------------------------------------- Reduced motion --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .sync-indicator.is-syncing { animation: none; opacity: 1; } /* Scroll reveals stay visible without JS flicker */ html.js-scroll-reveal [data-reveal] { opacity: 1 !important; } } /* --------------------------------------------------------------------------- Demo module responsive --------------------------------------------------------------------------- */ @media (max-width: 768px) { .demo-module-topline { flex-direction: column; align-items: flex-start; } .forecast-gauge { width: 100%; max-width: 180px; } .pql-card-body { flex-direction: column; gap: var(--space-3); } .call-off-shift-meta { grid-template-columns: 1fr; gap: var(--space-3); } .call-off-backup { grid-template-columns: 24px 1fr; } .call-off-backup .sync-indicator { display: none; } .care-plan-verdict { grid-template-columns: 1fr; gap: var(--space-2); } .care-plan-verdict-arrow { transform: rotate(90deg); text-align: center; } } /* --------------------------------------------------------------------------- Entity detail — /saas/accounts/{uuid} and siblings --------------------------------------------------------------------------- Three-column source comparison grid. Each card walks the same canonical business-field schema so drift rows sit in the same vertical position across columns. No border-left bars, no debug hashes, no raw_snapshot dump — those were the "ugly" shape Ryan flagged. --------------------------------------------------------------------------- */ .entity-detail { padding: var(--space-6) var(--space-4); } .entity-detail .page-header { margin-bottom: var(--space-6); } .entity-detail .back-link { font-size: 13px; color: var(--text-muted); display: inline-block; margin-bottom: var(--space-3); } .entity-detail .back-link:hover { color: var(--brand-accent); text-decoration: none; } .entity-detail .page-subtitle { font-size: 13px; color: var(--text-muted); margin: var(--space-1) 0 0; } .source-comparison { margin-top: var(--space-5); } .source-comparison .section-lede { font-size: 13px; color: var(--text-muted); margin: var(--space-1) 0 var(--space-5); max-width: 640px; } .source-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); } .source-card { padding: var(--space-5); } .source-card-header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--card-border); } .source-card-header .card-title { font-size: 15px; } .source-card-fields { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); } .source-card-row { display: flex; flex-direction: column; gap: 2px; } .source-card-label { font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.01em; margin: 0; } .source-card-value { margin: 0; font-size: 14px; font-weight: 500; color: var(--text-primary); font-variant-numeric: tabular-nums; } .source-card-row.is-missing .source-card-value { color: var(--text-muted); font-weight: 400; } .source-card-value--drift { color: var(--status-drift); font-weight: 600; } .source-card-drift-note { display: inline-block; margin-left: var(--space-2); font-size: 11px; font-weight: 500; color: var(--status-drift); background: var(--status-drift-bg); padding: 1px 6px; border-radius: var(--radius-sm); } /* --------------------------------------------------------------------------- 2026-04-11 research evidence pass Phase 0: identity plumbing — positioning block, craft-line captions, per-vertical footer credibility line. Phase 1: brand-only topnav. --------------------------------------------------------------------------- */ /* Per-vertical footer credibility line. "Real postgres, handcrafted" signal rendered in the vertical_landing.html footer. */ .vl-footer-craft { font-size: 13px; font-weight: 500; color: var(--text-muted); line-height: 1.5; margin: var(--space-3) auto var(--space-4); max-width: 560px; letter-spacing: 0.01em; text-align: center; } /* Phase 1 — brand-only top nav. Every page gets "Ryan Zegalia" at the top as a link to /. Deliberately not a cross-vertical nav. The minimum viable identity signal, nothing more. */ .topnav { padding: var(--space-4) var(--space-4); border-bottom: 1px solid var(--card-border); background: var(--bg-primary, #fff); } .topnav-inner { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; gap: var(--space-3); } .topnav-socials { margin-left: auto; display: flex; gap: 16px; align-items: center; } .topnav-socials a { color: var(--text-muted); font-size: 18px; line-height: 1; display: inline-flex; text-decoration: none; transition: color 180ms ease, transform 180ms ease; } .topnav-socials a:hover { color: var(--brand-accent); transform: translateY(-1px); } .topnav-brand { font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: none; letter-spacing: -0.005em; } .topnav-brand:hover { color: var(--brand-accent); } .topnav-brand.is-root { /* On the root page the brand is non-interactive — no underline on hover, cursor default. Still rendered in the same style so layout is stable. */ pointer-events: none; color: var(--text-primary); } .topnav-subtitle { font-size: 12px; font-weight: 400; color: var(--text-muted); letter-spacing: 0; } @media (max-width: 768px) { .topnav { padding: var(--space-3) var(--space-4); } .topnav-subtitle { display: none; } } /* Phase 2 — glossary term tooltips. Wrapped by the server-side `markup_terms` Jinja filter (see filters.py). Shown as a dotted-underline on the term itself, with a hover tooltip that pops above showing the definition. Mobile (≤768px) disables the hover tooltip — taps can't express "hover" reliably — and the per-vertical glossary

block in the research footer (Phase 3) acts as the touch-friendly fallback. */ .term { border-bottom: 1px dotted var(--text-muted); cursor: help; text-decoration: none; position: relative; } .term[data-tip]:hover::after, .term[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); min-width: 240px; max-width: 360px; padding: 10px 12px; background: rgb(22, 26, 34); color: rgb(245, 246, 248); border-radius: var(--radius-sm, 4px); font-size: 12px; font-weight: 400; line-height: 1.45; text-align: left; letter-spacing: 0.005em; white-space: normal; z-index: 50; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18); pointer-events: none; } .term[data-tip]:hover::before, .term[data-tip]:focus-visible::before { content: ""; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: rgb(22, 26, 34); z-index: 50; pointer-events: none; } @media (max-width: 768px) { .term { /* Keep the dotted underline on mobile as a visual signal that a term has a definition — but the glossary

block in the footer is how touch readers actually get to it. */ border-bottom: 1px dotted var(--text-muted); } .term[data-tip]:hover::after, .term[data-tip]:focus-visible::after, .term[data-tip]:hover::before, .term[data-tip]:focus-visible::before { display: none; } } /* Phase 3 — "What I looked at" research footer + collapsible glossary. Sits between the last scenario and the vl-footer-cta on every vertical landing page. Two-column on desktop (sources left, glossary right), single column on mobile. */ .vl-research-footer { padding: var(--space-6) var(--space-4) 0; margin-top: var(--space-8); } .vl-research-inline { font-size: 13px; color: var(--text-muted); line-height: 1.8; margin: 0; } .vl-research-label { font-weight: 600; color: var(--text-secondary); margin-right: 6px; } .vl-research-link { color: var(--text-muted); text-decoration: none; } .vl-research-link:hover { color: var(--brand-accent); text-decoration: underline; } /* Phase 4 — inline code artifact block. Shown between the solution paragraph and the CTA on the one scenario per vertical that carries a SQL or Python artifact. The inside (.highlight) is Pygments-highlighted server-side; this block styles the container + caption. */ .vl-code-artifact { margin: var(--space-5) 0 var(--space-4); border: 1px solid var(--card-border); border-radius: var(--radius-md, 6px); overflow: hidden; background: #fafbfc; } .vl-code-caption { display: block; padding: 8px var(--space-4); font-size: 11px; font-weight: 500; color: var(--text-muted); background: var(--card-bg, #fff); border-bottom: 1px solid var(--card-border); letter-spacing: 0.02em; text-transform: uppercase; font-family: var(--font-mono, "JetBrains Mono", Menlo, Monaco, monospace); } .vl-code-artifact .highlight { margin: 0; padding: 0; background: #fafbfc; overflow-x: auto; } .vl-code-artifact .highlight pre { margin: 0; padding: var(--space-4) var(--space-4); font-family: var(--font-mono, "JetBrains Mono", Menlo, Monaco, monospace); font-size: 12px; line-height: 1.55; background: transparent; color: #1f2937; white-space: pre; } @media (max-width: 768px) { .vl-code-artifact .highlight pre { font-size: 11px; padding: var(--space-3); } } /* =========================================================================== Phase 6 — Code artifact collapsible wrapper (2026-04-11 scan-budget pass) --------------------------------------------------------------------------- Wraps the existing vl-code-artifact figure in a

element so the 24-35 line SQL / Python block is closed by default. A scan-reading hiring manager skips past it; a curious reader opens it in one click. Reuses the vl-glossary disclosure aesthetic (monospace caption, arrow rotates on open). =========================================================================== */ .vl-code-artifact-details { margin: var(--space-5) 0 var(--space-4); } .vl-code-artifact-details summary { list-style: none; cursor: pointer; } .vl-code-artifact-details summary::-webkit-details-marker { display: none; } .vl-code-artifact-summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); font-size: 11px; font-weight: 500; color: var(--text-muted); background: var(--card-bg, #fff); border: 1px solid var(--card-border); border-radius: var(--radius-md, 6px); letter-spacing: 0.02em; text-transform: uppercase; font-family: var(--font-mono, "JetBrains Mono", Menlo, Monaco, monospace); transition: border-color var(--t-base), color var(--t-base); } .vl-code-artifact-summary::before { content: "▸"; display: inline-block; color: var(--text-muted); font-size: 10px; transition: transform 120ms ease; flex-shrink: 0; } .vl-code-artifact-details[open] .vl-code-artifact-summary::before { transform: rotate(90deg); } .vl-code-artifact-details summary:hover .vl-code-artifact-summary { border-color: var(--brand-accent); color: var(--text-primary); } .vl-code-artifact-meta { color: var(--text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: auto; } .vl-code-artifact-details[open] .vl-code-artifact { margin-top: var(--space-3); } /* =========================================================================== Phase 8 — Mobile stackable tables (2026-04-11 scan-budget pass) --------------------------------------------------------------------------- Desktop-first data tables that don't fit in 390px phone viewports get swapped to a stacked-card layout below 640px. Each row becomes a labeled block; each cell displays its column name via `data-col` attribute content. Applied via the shared `.mobile-stackable-table` class on three widgets: - templates/components/packs/home_care/evv_mismatch.html (3-col reconcile) - templates/components/packs/saas/phantom_seats.html (drift table) - templates/components/packs/saas/forecast_variance.html (AE scorecard + commission audit) Templates add `class="mobile-stackable-table"` to the and `data-col="Column Name"` to each

. `	` row labels are preserved and become stack headers on mobile. Also in this block: the 3-column `.hierarchy-verdict-facts` grid (Stale Care Plan + Account Hierarchy verdict cards) collapses to a single column below 640px. One-line fix, both widgets unblocked. =========================================================================== / @media (max-width: 640px) { .mobile-stackable-table { display: block !important; min-width: 0 !important; width: 100% !important; overflow-x: visible !important; } .mobile-stackable-table thead { display: none !important; } .mobile-stackable-table tbody { display: block; } .mobile-stackable-table tbody tr { display: block; padding: var(--space-4) 0; border: none; border-bottom: 1px solid var(--card-border); } .mobile-stackable-table tbody tr:last-child { border-bottom: none; } / Row label	in tbody (used by the EVV reconciliation table) becomes the header of each stacked block on mobile. / .mobile-stackable-table tbody th { display: block !important; width: auto !important; padding: 0 0 var(--space-2) 0 !important; border: none !important; background: transparent !important; text-align: left !important; font-size: 12px; font-weight: 600; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.04em; } .mobile-stackable-table tbody td { display: flex !important; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: 4px 0 !important; border: none !important; font-size: 13px; text-align: right; } .mobile-stackable-table tbody td::before { content: attr(data-col); color: var(--text-muted); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0; text-align: left; } / Skip cells with explicitly-empty data-col (e.g. leading spacer column) / .mobile-stackable-table tbody td[data-col=""] { display: none !important; } / Drift-cell highlight on mobile: color the value text, not the whole cell (the flex layout makes a full-width red background look like a bug). / .mobile-stackable-table tbody td.evv-cell-drift { background: transparent !important; color: var(--status-drift) !important; font-weight: 600; } / EVV three-col wrapper — drop its own overflow + border so the stacked layout doesn't render inside a box. / .evv-three-col { overflow-x: visible; border: none; border-radius: 0; } / 3-column verdict facts grid used by Stale Care Plan + Account Hierarchy collapses to a single column on mobile. One rule, two widgets. / .hierarchy-verdict-facts { grid-template-columns: 1fr !important; gap: var(--space-4); } / SCA: thread deal cards stack full-width / .thread-deal-card { padding: var(--space-3); } .thread-deal-header { flex-direction: column; gap: var(--space-1); } .thread-bar { flex-direction: column; gap: var(--space-1); } .thread-bar-meta { padding-left: 0; } / SCA: trigger cards / .trigger-card-header { flex-direction: column; gap: var(--space-1); } / SCA: repo grid fewer columns / .repo-grid { grid-template-columns: repeat(5, 1fr) !important; } } / =========================================================================== SCA: The Multi-Threaded Deal (Demo 4.1) --------------------------------------------------------------------------- / .demo-module--thread-deal .thread-deal-card { border: 1px solid var(--card-border); border-radius: var(--radius); padding: var(--space-4); margin-top: var(--space-3); background: var(--card-bg); } .demo-module--thread-deal .thread-deal-card:first-of-type { margin-top: var(--space-4); } .demo-module--thread-deal .thread-deal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .demo-module--thread-deal .thread-deal-company { font-weight: 600; font-size: 15px; color: var(--text-primary); } .demo-module--thread-deal .thread-deal-meta { display: flex; align-items: center; gap: var(--space-2); } .demo-module--thread-deal .thread-deal-amount { font-size: 13px; font-weight: 600; color: var(--text-secondary); } .demo-module--thread-deal .pill-stage { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; background: var(--brand-accent-soft); color: var(--brand-accent); } .demo-module--thread-deal .thread-deal-ae { font-size: 12px; color: var(--text-tertiary); margin-top: var(--space-1); } .demo-module--thread-deal .thread-bars { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); } .demo-module--thread-deal .thread-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius); border: 1px solid var(--card-border); background: var(--page-bg); } .demo-module--thread-deal .thread-bar--active { background: var(--card-bg); } .demo-module--thread-deal .thread-bar--stalled { background: #fffbeb; } .demo-module--thread-deal .thread-bar--no_contact { background: #f8fafc; opacity: 0.65; } .demo-module--thread-deal .thread-bar-role { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); min-width: 72px; flex-shrink: 0; } .demo-module--thread-deal .thread-bar-body { flex: 1; min-width: 0; } .demo-module--thread-deal .thread-bar-contact { display: block; font-size: 13px; font-weight: 500; color: var(--text-primary); } .demo-module--thread-deal .thread-bar-detail { display: block; font-size: 12px; color: var(--text-tertiary); margin-top: 1px; } .demo-module--thread-deal .thread-bar-meta { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .demo-module--thread-deal .thread-bar-recency { font-size: 12px; color: var(--text-tertiary); } .demo-module--thread-deal .pill-thread-status { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; } .demo-module--thread-deal .pill-thread-status--active { background: #ecfdf5; color: #065f46; } .demo-module--thread-deal .pill-thread-status--stalled { background: #fffbeb; color: #92400e; } .demo-module--thread-deal .pill-thread-status--no_contact { background: var(--card-border); color: var(--text-tertiary); } .demo-module--thread-deal .thread-deal-gap { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--card-border); } .demo-module--thread-deal .thread-gap-label { font-size: 12px; color: var(--text-tertiary); } .demo-module--thread-deal .thread-gap-value { font-size: 14px; font-weight: 700; color: #d97706; } / =========================================================================== SCA: The Compliance Event Trigger (Demo 4.2) --------------------------------------------------------------------------- / .demo-module--compliance-trigger .trigger-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); } .demo-module--compliance-trigger .trigger-card { border: 1px solid var(--card-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); background: var(--card-bg); } .demo-module--compliance-trigger .trigger-card-header { display: flex; align-items: center; justify-content: space-between; } .demo-module--compliance-trigger .trigger-company { font-weight: 600; font-size: 14px; color: var(--text-primary); } .demo-module--compliance-trigger .trigger-score { font-size: 20px; font-weight: 700; color: var(--brand-accent); } .demo-module--compliance-trigger .trigger-card-body { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); } .demo-module--compliance-trigger .pill-event-type { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0; } .demo-module--compliance-trigger .pill-event-type--m_and_a { background: #fef3c7; color: #92400e; } .demo-module--compliance-trigger .pill-event-type--cra_deadline { background: #dbeafe; color: #1e40af; } .demo-module--compliance-trigger .pill-event-type--pci_dss { background: #fce7f3; color: #9d174d; } .demo-module--compliance-trigger .pill-event-type--job_signal { background: #ecfdf5; color: #065f46; } .demo-module--compliance-trigger .pill-event-type--ai_code_adoption { background: #f0fdfa; color: #0f766e; } .demo-module--compliance-trigger .trigger-label { font-size: 13px; font-weight: 500; color: var(--text-primary); } .demo-module--compliance-trigger .trigger-detail { font-size: 12px; color: var(--text-tertiary); margin-top: var(--space-2); line-height: 1.5; } .demo-module--compliance-trigger .trigger-card-footer { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--card-border); } .demo-module--compliance-trigger .trigger-decay-bar { flex: 1; height: 6px; background: var(--card-border); border-radius: 3px; overflow: hidden; } .demo-module--compliance-trigger .trigger-decay-fill { height: 100%; background: var(--brand-accent); border-radius: 3px; transition: width 0.3s ease; } .demo-module--compliance-trigger .trigger-days { font-size: 12px; color: var(--text-tertiary); flex-shrink: 0; min-width: 40px; } .demo-module--compliance-trigger .pill-routing { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; flex-shrink: 0; } .demo-module--compliance-trigger .pill-routing--named_ae { background: var(--brand-accent-soft); color: var(--brand-accent); } .demo-module--compliance-trigger .pill-routing--bdr_queue { background: #f1f5f9; color: var(--text-secondary); } / =========================================================================== SCA: The Repo Coverage Gap (Demo 4.3) --------------------------------------------------------------------------- / .demo-module--repo-coverage .repo-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: var(--space-4); } .demo-module--repo-coverage .repo-tile { aspect-ratio: 1; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 600; overflow: hidden; cursor: default; position: relative; } .demo-module--repo-coverage .repo-tile--scanned { background: var(--brand-accent); color: #fff; } .demo-module--repo-coverage .repo-tile--active { background: #cbd5e1; border: 1px solid #94a3b8; } .demo-module--repo-coverage .repo-tile--inactive { background: #f1f5f9; border: 1px solid #e2e8f0; opacity: 0.5; } .demo-module--repo-coverage .repo-tile-name { font-size: 7px; line-height: 1.1; text-align: center; padding: 2px; word-break: break-all; } .demo-module--repo-coverage .repo-coverage-footer { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--card-border); } .demo-module--repo-coverage .repo-coverage-expansion { display: flex; flex-direction: column; gap: 2px; } .demo-module--repo-coverage .repo-expansion-value { font-size: 24px; font-weight: 700; color: var(--brand-accent); } .demo-module--repo-coverage .repo-coverage-table { margin-top: var(--space-4); } / =========================================================================== Distribution: ERP Detection (Demo 5.1) --------------------------------------------------------------------------- / .demo-module--erp-detection .erp-card { border: 1px solid var(--card-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin-top: var(--space-3); background: var(--card-bg); } .demo-module--erp-detection .erp-card:first-of-type { margin-top: var(--space-4); } .demo-module--erp-detection .erp-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); } .demo-module--erp-detection .erp-card-company { display: flex; flex-direction: column; } .demo-module--erp-detection .erp-company-name { font-weight: 600; font-size: 14px; color: var(--text-primary); } .demo-module--erp-detection .erp-sub-vertical { font-size: 12px; color: var(--text-tertiary); } .demo-module--erp-detection .erp-card-verdict { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; } .demo-module--erp-detection .erp-verdict-name { font-weight: 700; font-size: 14px; color: var(--brand-accent); } .demo-module--erp-detection .erp-verdict--unknown { color: var(--text-tertiary); } .demo-module--erp-detection .erp-verdict-confidence { font-size: 20px; font-weight: 700; color: var(--text-primary); } .demo-module--erp-detection .erp-signals { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-3); } .demo-module--erp-detection .erp-signal-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; font-size: 12px; } .demo-module--erp-detection .erp-signal-source { font-weight: 600; color: var(--text-secondary); min-width: 100px; flex-shrink: 0; } .demo-module--erp-detection .erp-signal-detail { flex: 1; color: var(--text-tertiary); min-width: 0; } .demo-module--erp-detection .erp-signal-indicator { font-size: 14px; font-weight: 700; flex-shrink: 0; width: 20px; text-align: center; } .demo-module--erp-detection .erp-signal--found { color: #059669; } .demo-module--erp-detection .erp-signal--missing { color: var(--text-tertiary); } .demo-module--erp-detection .erp-card-footer { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--card-border); } .demo-module--erp-detection .erp-confidence-bar { flex: 1; height: 6px; background: var(--card-border); border-radius: 3px; overflow: hidden; } .demo-module--erp-detection .erp-confidence-fill { height: 100%; background: var(--brand-accent); border-radius: 3px; } / Reuse .pill-routing from SCA trigger styles / / =========================================================================== Distribution: POV Pipeline (Demo 5.2) --------------------------------------------------------------------------- / .demo-module--pov-pipeline .pov-card { border: 1px solid var(--card-border); border-radius: var(--radius); padding: var(--space-4); margin-top: var(--space-3); background: var(--card-bg); } .demo-module--pov-pipeline .pov-card:first-of-type { margin-top: var(--space-4); } .demo-module--pov-pipeline .pov-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); } .demo-module--pov-pipeline .pov-company { font-weight: 600; font-size: 15px; color: var(--text-primary); display: block; } .demo-module--pov-pipeline .pov-meta { font-size: 12px; color: var(--text-tertiary); display: block; margin-top: 2px; } .demo-module--pov-pipeline .pill-pov-status { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 9999px; flex-shrink: 0; } .demo-module--pov-pipeline .pill-pov-status--above_threshold { background: #ecfdf5; color: #065f46; } .demo-module--pov-pipeline .pill-pov-status--below_threshold { background: #fef2f2; color: #991b1b; } .demo-module--pov-pipeline .pill-pov-status--mixed { background: #fffbeb; color: #92400e; } .demo-module--pov-pipeline .pov-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-4); } .demo-module--pov-pipeline .pov-metric { padding: var(--space-3); border-radius: var(--radius); border: 1px solid var(--card-border); text-align: center; } .demo-module--pov-pipeline .pov-metric--pass { border-color: #d1fae5; background: #f0fdf4; } .demo-module--pov-pipeline .pov-metric--fail { border-color: #fecaca; background: #fef2f2; } .demo-module--pov-pipeline .pov-metric-value { display: block; font-size: 24px; font-weight: 700; color: var(--text-primary); } .demo-module--pov-pipeline .pov-metric-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-top: 2px; } .demo-module--pov-pipeline .pov-metric-threshold { display: block; font-size: 11px; color: var(--text-tertiary); margin-top: 2px; } .demo-module--pov-pipeline .pov-verdict { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--card-border); } / =========================================================================== Distribution: PE Trigger Window (Demo 5.3) --------------------------------------------------------------------------- / .demo-module--pe-triggers .pe-trigger-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); } .demo-module--pe-triggers .pe-card { border: 1px solid var(--card-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); background: var(--card-bg); } .demo-module--pe-triggers .pe-card--closing { opacity: 0.65; } .demo-module--pe-triggers .pe-card-header { display: flex; align-items: center; justify-content: space-between; } .demo-module--pe-triggers .pe-firm { font-weight: 600; font-size: 14px; color: var(--text-primary); } .demo-module--pe-triggers .pill-deal-type { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 9999px; background: var(--brand-accent-soft); color: var(--brand-accent); margin-left: var(--space-2); text-transform: uppercase; letter-spacing: 0.04em; } .demo-module--pe-triggers .pe-fit-score { display: flex; flex-direction: column; align-items: flex-end; font-size: 20px; font-weight: 700; color: var(--brand-accent); } .demo-module--pe-triggers .pe-fit-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); } .demo-module--pe-triggers .pe-card-body { margin-top: var(--space-2); } .demo-module--pe-triggers .pe-target { font-weight: 500; font-size: 13px; color: var(--text-primary); display: block; } .demo-module--pe-triggers .pe-target-meta { font-size: 12px; color: var(--text-tertiary); display: block; margin-top: 2px; } .demo-module--pe-triggers .pe-context { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; margin-top: var(--space-2); } .demo-module--pe-triggers .pe-card-footer { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--card-border); } .demo-module--pe-triggers .pe-window-bar { flex: 1; height: 6px; background: var(--card-border); border-radius: 3px; overflow: hidden; } .demo-module--pe-triggers .pe-window-fill { height: 100%; background: var(--brand-accent); border-radius: 3px; } .demo-module--pe-triggers .pe-window-fill--warning { background: #d97706; } .demo-module--pe-triggers .pe-window-fill--critical { background: #dc2626; } .demo-module--pe-triggers .pe-days { font-size: 12px; color: var(--text-tertiary); flex-shrink: 0; } .demo-module--pe-triggers .pe-window-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); flex-shrink: 0; } / Shared pill-routing styles (used by SCA triggers, Distribution ERP + PE) */ .pill-routing { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; flex-shrink: 0; } .pill-routing--named_ae { background: var(--brand-accent-soft); color: var(--brand-accent); } .pill-routing--bdr_queue { background: #f1f5f9; color: var(--text-secondary); } .pill-routing--demo_track { background: var(--brand-accent-soft); color: var(--brand-accent); } .pill-routing--manual_qualification { background: #f1f5f9; color: var(--text-secondary); }