/* ═══════════════════════════════════════════════════════════════════ ATLAS — Requirement Smart View variant (WP02) ──────────────────────────────────────────────────────────────────── Restyles the Smart View (.sv-*) ONLY inside the requirement detail, so it adopts the rich card/pill look while resolving to the ATLAS light/dark theme tokens instead of Smart View's standalone palette. ISOLATION CONTRACT (do not break): • Every rule is scoped under the requirement-only ancestor `.req-smartview` (WP03 adds this wrapper on the requirement Smart View container). There are NO bare `.sv-*` selectors here. • The shared CV Smart View (frontend/css/smart-viewer.css) is left byte-for-byte unchanged; nothing here can leak to the CV viewer. SPECIFICITY: rules are prefixed `[data-theme] .req-smartview …` so they beat smart-viewer.css's base `.sv-root` (0,1,0) AND its `[data-theme="light"] .sv-root` (0,2,0) overrides regardless of the order. theme-manager.js always sets data-theme on . ═══════════════════════════════════════════════════════════════════ */ /* ── Remap the Smart View design tokens onto ATLAS theme tokens ───── Because every .sv-* rule consumes these custom properties, remapping them here re-themes the whole requirement Smart View in one place; the app tokens already switch by light/dark, so both themes follow. */ [data-theme] .req-smartview .sv-root { --sv-bg: var(--surface); --sv-surface: var(--background); --sv-surface-hover: var(--border); --sv-border: var(--border); --sv-border-hover: var(--text-muted); --sv-text: var(--text-primary); --sv-text-secondary: var(--text-secondary); --sv-text-muted: var(--text-muted); --sv-text-faint: var(--border); --sv-accent: var(--primary-color); --sv-accent-light: var(--primary-color); --sv-accent-bg: color-mix(in srgb, var(--primary-color) 12%, transparent); --sv-green: var(--success-color); --sv-green-bg: color-mix(in srgb, var(--success-color) 12%, transparent); --sv-yellow: var(--warning-color); --sv-yellow-bg: color-mix(in srgb, var(--warning-color) 12%, transparent); --sv-red: var(--error-color); --sv-red-bg: color-mix(in srgb, var(--error-color) 12%, transparent); --sv-purple: #6366f1; --sv-purple-bg: color-mix(in srgb, #6366f1 14%, transparent); --sv-cyan: #0891b2; --sv-cyan-bg: color-mix(in srgb, #0891b2 14%, transparent); --sv-pink: #db2777; --sv-pink-bg: color-mix(in srgb, #db2777 14%, transparent); --sv-orange: #ea580c; --sv-orange-bg: color-mix(in srgb, #ea580c 14%, transparent); /* Match the app font + let the surrounding .req-detail-column own the width/centering so the Smart View sits flush in its card. */ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text-primary); max-width: none; padding: 0; margin: 0; } /* ── Requirement hero: token-based tinted card ────────────────────── */ [data-theme] .req-smartview .sv-req-hero, [data-theme] .req-smartview .sv-hero { background: linear-gradient( 135deg, color-mix(in srgb, var(--primary-color) 8%, var(--surface)), var(--surface) ); border: 1px solid color-mix(in srgb, var(--primary-color) 20%, var(--border)); } [data-theme] .req-smartview .sv-req-framework { color: var(--primary-color); } /* ── Skill tooltip: readable surface in both themes ───────────────── */ [data-theme] .req-smartview .sv-skill-tooltip { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-lg, 0 12px 40px rgb(0 0 0 / 0.18)); } [data-theme] .req-smartview .sv-skill-tooltip::after { border-top-color: var(--border); } /* ── Certification chips: success-toned, token-based ──────────────── */ [data-theme] .req-smartview .sv-cert-item { background: color-mix(in srgb, var(--success-color) 8%, transparent); border-color: color-mix(in srgb, var(--success-color) 22%, transparent); color: var(--success-color); } /* ── Match-coverage rows: met / partial / missing on tokens ───────── */ [data-theme] .req-smartview .sv-coverage-row.met { background: color-mix(in srgb, var(--success-color) 8%, transparent); border-color: color-mix(in srgb, var(--success-color) 22%, transparent); } [data-theme] .req-smartview .sv-coverage-row.partial { background: color-mix(in srgb, var(--warning-color) 8%, transparent); border-color: color-mix(in srgb, var(--warning-color) 22%, transparent); } [data-theme] .req-smartview .sv-coverage-row.missing { background: color-mix(in srgb, var(--error-color) 8%, transparent); border-color: color-mix(in srgb, var(--error-color) 22%, transparent); } /* Knockout ring centres sit on the card surface (they read as donuts). */ [data-theme] .req-smartview .sv-match-ring-inner, [data-theme] .req-smartview .sv-coverage-mini-ring-inner { background: var(--surface); } /* ── Timeline dot border matches the card it sits on ──────────────── */ [data-theme] .req-smartview .sv-timeline-dot { border-color: var(--surface); } /* ── Responsive: the requirement Smart View collapses grids at 768px (smart-viewer.css only breaks at 640px; the requirement detail sidebar collapses at 768px, so mirror that here). ──────────────── */ @media (max-width: 768px) { [data-theme] .req-smartview .sv-hero-top { flex-direction: column; } [data-theme] .req-smartview .sv-hero-radar { width: 100%; max-width: 200px; margin: 0 auto; } [data-theme] .req-smartview .sv-stats-grid, [data-theme] .req-smartview .sv-quality-grid { grid-template-columns: repeat(2, 1fr); } [data-theme] .req-smartview .sv-req-info-grid { grid-template-columns: 1fr; } [data-theme] .req-smartview .sv-match-score-card { flex-direction: column; text-align: center; } [data-theme] .req-smartview .sv-progression { flex-direction: column; } [data-theme] .req-smartview .sv-progression-segment::after { display: none; } } /* ── WP01 (requirements-comparison-ux) — header consolidation ───────── On the Requirements page the hero no longer carries the title/client identity (it lives in the consolidated pane header), so the hero is a compact chip strip: tighten padding/margins to actually reclaim the freed vertical space (NFR-004). Scoped to .req-smartview, which only exists on the Requirements page — the Fit Lab hero is untouched. */ [data-theme] .req-smartview .sv-req-hero { padding: 16px 20px; margin-bottom: 16px; } [data-theme] .req-smartview .sv-req-hero .sv-req-pills { margin-top: 0; } [data-theme] .req-smartview .sv-req-hero .sv-req-framework + .sv-req-pills { margin-top: 10px; }