/* ═══════════════════════════════════════════════════════════════════════════ 26_document_light.css — DOCUMENT LIGHT REPORT FAMILY ═══════════════════════════════════════════════════════════════════════════ AUTHORITY --------- Reference family 1 of 2 in the approved reference set (see requirements/visual-reference-implementation-decisions-2026-10-05.md): A1–A6 presentation/report structure blueprints (light document) B3 investor pack (light document) G5 guidance/reporting authority (light document) Observed characteristics (requirements/APPEX360-visual-reference-inventory): near-white ground, navy header bands and left rails, bordered content panels, legend bars, 3×3 card grid matrices, thin rules, generous white space, steel-blue accents, amber brand mark. ARCHITECTURE (one authoritative token system — no competing values) ------------------------------------------------------------------- Every value below resolves from `--apx-doc-*` tokens defined in the active theme token file (themes/tokens/apex_reference.css). Fallbacks exist ONLY so a document still renders if a non-reference theme is active — they repeat the reference values, they do not introduce new ones. CONSUMPTION ----------- Add `apx-doc` to the outermost container of a report/results/PDF surface. Optionally use the structural classes below (apx-doc-panel, apx-doc-header, apx-doc-legend, apx-doc-grid3, apx-doc-score, apx-doc-table, apx-doc-rule, apx-doc-footer, apx-doc-brand). A scoped convergence layer then maps the legacy dark utilities used by pre-existing report views onto the light document family, so those views converge without a rewrite. REVERSIBLE: removing the require line in design_system.css + this file reverts every document surface to its previous appearance. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Token surface (local aliases → theme tokens) ───────────────────────── */ .apx-doc { --doc-ground: var(--apx-doc-ground, #F7F9FA); --doc-panel: var(--apx-doc-panel, #FFFFFF); --doc-panel-2: var(--apx-doc-panel-alt,#EEF2F7); --doc-border: var(--apx-doc-border, #D7DEE6); --doc-border-s: var(--apx-doc-border-strong, #B9C4D0); --doc-ink: var(--apx-doc-ink, #16283C); --doc-ink-soft: var(--apx-doc-ink-soft, #3D4F63); --doc-ink-mute: var(--apx-doc-ink-muted,#5A6B7E); --doc-navy: var(--apx-doc-navy, #122E4A); /* Structural aliases consumed by the executive_reports / boardroom blocks below — previously referenced but never defined (resolved to nothing). */ --doc-heading: var(--apx-doc-navy, #122E4A); --doc-band: var(--apx-doc-panel-alt,#EEF2F7); --doc-steel: var(--apx-doc-steel, #568BB5); /* Text-safe accents: the steel/violet/amber families are used both as graphics (bars, swatches — 3:1) and as text (links, labels — 4.5:1). The *-text tokens are the WCAG-passing text members of the same family. */ --doc-steel-text: var(--apx-doc-steel-text, #3D6B94); --doc-violet-text: var(--apx-doc-violet-text, #5E5688); --doc-amber-text: var(--apx-doc-amber-text, #A05A26); --doc-violet: var(--apx-doc-violet, #776FA3); --doc-amber: var(--apx-doc-amber, #CD814A); --doc-grid: var(--apx-doc-grid, #E3E9F0); --doc-axis: var(--apx-doc-axis, #5A6B7E); --doc-shadow: var(--apx-doc-shadow, 0 6px 18px rgba(18,46,74,0.10)); --doc-ok: var(--apx-doc-success, #2E7D5B); --doc-warn: var(--apx-doc-warning, #9A5B26); --doc-bad: var(--apx-doc-danger, #B0483F); --doc-info: var(--apx-doc-info, #3E6E96); --doc-rule: 1px solid var(--doc-border); --doc-radius: 6px; background: var(--doc-ground); color: var(--doc-ink); } /* ── Ground & typography ────────────────────────────────────────────────── */ .apx-doc h1, .apx-doc h2, .apx-doc h3, .apx-doc h4, .apx-doc h5, .apx-doc h6 { color: var(--doc-navy); letter-spacing: -0.01em; } .apx-doc p, .apx-doc li { color: var(--doc-ink-soft); } .apx-doc a { color: var(--doc-steel-text); } .apx-doc small, .apx-doc .caption { color: var(--doc-ink-mute); } /* ── Brand treatment (H1 logo: amber glyph on the product mark) ─────────── */ .apx-doc-brand { font-weight: 800; letter-spacing: 0.02em; color: var(--doc-navy); } .apx-doc-brand .apx-doc-brand-x { color: var(--doc-amber); } /* ── Header band / rail (A1, A2, A3, A5, B3) ────────────────────────────── */ .apx-doc-header { background: var(--doc-navy); color: #FFFFFF; border-radius: var(--doc-radius) var(--doc-radius) 0 0; padding: 18px 24px; } .apx-doc-header h1, .apx-doc-header h2, .apx-doc-header h3 { color: #FFFFFF; } .apx-doc-header p, .apx-doc-header small { color: rgba(255,255,255,0.72); } .apx-doc-header .apx-doc-brand { color: #FFFFFF; } .apx-doc-header .apx-doc-brand .apx-doc-brand-x { color: var(--doc-amber); } .apx-doc-header-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.66); } /* Left rail panel (A1, A4, B3) */ .apx-doc-rail { background: var(--doc-panel-2); border: var(--doc-rule); border-radius: var(--doc-radius); padding: 16px 18px; } /* ── Panels & cards (bordered content blocks) ───────────────────────────── */ .apx-doc-panel { background: var(--doc-panel); border: var(--doc-rule); border-radius: var(--doc-radius); padding: 20px 22px; box-shadow: var(--doc-shadow); page-break-inside: avoid; } .apx-doc-panel--flat { box-shadow: none; } .apx-doc-panel--band { background: var(--doc-panel-2); box-shadow: none; } .apx-doc-panel-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--doc-ink-mute); padding-bottom: 8px; margin-bottom: 12px; border-bottom: var(--doc-rule); } /* ── Thin rules ─────────────────────────────────────────────────────────── */ .apx-doc-rule { border: 0; border-top: var(--doc-rule); margin: 18px 0; } .apx-doc-rule--strong { border-top-color: var(--doc-border-s); } /* ── Legend bar (A6, A3) ────────────────────────────────────────────────── */ .apx-doc-legend { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 10px 14px; background: var(--doc-panel-2); border: var(--doc-rule); border-radius: var(--doc-radius); font-size: 11px; color: var(--doc-ink-soft); } .apx-doc-legend-item { display: inline-flex; align-items: center; gap: 6px; } .apx-doc-legend-swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--doc-steel); flex: 0 0 auto; } .apx-doc-legend-swatch--violet { background: var(--doc-violet); } .apx-doc-legend-swatch--amber { background: var(--doc-amber); } .apx-doc-legend-swatch--navy { background: var(--doc-navy); } .apx-doc-legend-swatch--ok { background: var(--doc-ok); } .apx-doc-legend-swatch--warn { background: var(--doc-warn); } .apx-doc-legend-swatch--bad { background: var(--doc-bad); } /* ── Score / maturity presentation ──────────────────────────────────────── */ .apx-doc-score { font-size: 40px; line-height: 1; font-weight: 800; color: var(--doc-navy); letter-spacing: -0.02em; } .apx-doc-score-unit { font-size: 15px; font-weight: 600; color: var(--doc-ink-mute); } .apx-doc-score-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--doc-ink-mute); margin-top: 6px; } .apx-doc-maturity { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; border: 1px solid var(--doc-border-s); background: var(--doc-panel-2); color: var(--doc-ink-soft); } .apx-doc-maturity--ok { background: rgba(46,125,91,0.10); border-color: rgba(46,125,91,0.35); color: var(--doc-ok); } .apx-doc-maturity--warn { background: rgba(154,91,38,0.10); border-color: rgba(154,91,38,0.35); color: var(--doc-warn); } .apx-doc-maturity--bad { background: rgba(176,72,63,0.10); border-color: rgba(176,72,63,0.35); color: var(--doc-bad); } /* Horizontal score bar (D8/D9 gauge motif, light form) */ .apx-doc-bar { height: 8px; border-radius: 999px; background: var(--doc-panel-2); border: 1px solid var(--doc-border); overflow: hidden; } .apx-doc-bar > span { display: block; height: 100%; background: var(--doc-steel); border-radius: 999px; } .apx-doc-bar--violet > span { background: var(--doc-violet); } .apx-doc-bar--amber > span { background: var(--doc-amber); } .apx-doc-bar--ok > span { background: var(--doc-ok); } .apx-doc-bar--warn > span { background: var(--doc-warn); } .apx-doc-bar--bad > span { background: var(--doc-bad); } /* ── KPI tiles ──────────────────────────────────────────────────────────── */ .apx-doc-kpi { background: var(--doc-panel); border: var(--doc-rule); border-radius: var(--doc-radius); padding: 14px 16px; } .apx-doc-kpi-value { font-size: 24px; font-weight: 800; color: var(--doc-navy); line-height: 1.1; } .apx-doc-kpi-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--doc-ink-mute); margin-top: 4px; } /* ── 3×3 / matrix grid (A5) ─────────────────────────────────────────────── */ .apx-doc-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--doc-border); border: var(--doc-rule); border-radius: var(--doc-radius); overflow: hidden; } .apx-doc-grid3 > * { background: var(--doc-panel); padding: 14px 16px; min-height: 76px; } .apx-doc-grid3 > .is-band { background: var(--doc-panel-2); } /* ── Tables ─────────────────────────────────────────────────────────────── */ .apx-doc-table { width: 100%; border-collapse: collapse; font-size: 12px; } .apx-doc-table thead th { background: var(--doc-navy); color: #FFFFFF; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; text-align: left; padding: 9px 12px; } .apx-doc-table tbody td { padding: 9px 12px; border-bottom: var(--doc-rule); color: var(--doc-ink-soft); } .apx-doc-table tbody tr:nth-child(even) td { background: var(--doc-panel-2); } .apx-doc-table tbody tr.is-highlight td { background: rgba(86,139,181,0.10); color: var(--doc-ink); } /* ── Footer strip ───────────────────────────────────────────────────────── */ .apx-doc-footer { border-top: var(--doc-rule); margin-top: 22px; padding-top: 10px; font-size: 10px; color: var(--doc-ink-mute); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* ── Chart surface on light ground ──────────────────────────────────────── */ .apx-doc canvas { max-width: 100%; } .apx-doc .apx-doc-chart { background: var(--doc-panel); border: var(--doc-rule); border-radius: var(--doc-radius); padding: 14px; } /* ═══════════════════════════════════════════════════════════════════════════ CONVERGENCE LAYER — legacy dark utilities → document light family Scoped strictly under .apx-doc. Maps the dark-surface vocabulary used by pre-existing report views so they converge without a rewrite. Values are doc tokens only; no new colours. ═══════════════════════════════════════════════════════════════════════════ */ /* Backgrounds: dark greys → panels / bands */ .apx-doc .bg-gray-900, .apx-doc .bg-gray-950, .apx-doc .bg-slate-900, .apx-doc .bg-gray-800, .apx-doc .bg-gray-800\/90, .apx-doc .bg-gray-800\/80, .apx-doc .bg-gray-800\/70, .apx-doc .bg-gray-800\/60, .apx-doc .bg-gray-800\/50, .apx-doc .bg-gray-800\/40, .apx-doc .bg-gray-800\/30, .apx-doc .bg-gray-900\/60, .apx-doc .bg-gray-900\/50, .apx-doc .bg-gray-900\/40, .apx-doc .bg-slate-800, .apx-doc .bg-slate-800\/50, .apx-doc .bg-slate-800\/60, .apx-doc .bg-black { background-color: var(--doc-panel); } .apx-doc .bg-gray-700, .apx-doc .bg-gray-700\/60, .apx-doc .bg-gray-700\/50, .apx-doc .bg-gray-700\/40, .apx-doc .bg-gray-700\/30, .apx-doc .bg-gray-700\/20, .apx-doc .bg-gray-600, .apx-doc .bg-gray-600\/50, .apx-doc .bg-gray-600\/40, .apx-doc .bg-gray-600\/30, .apx-doc .bg-gray-600\/20, .apx-doc .bg-slate-700, .apx-doc .bg-slate-700\/50, .apx-doc .bg-gray-100, .apx-doc .bg-gray-50 { background-color: var(--doc-panel-2); } .apx-doc .bg-white { background-color: var(--doc-panel); } /* Neutralise dark decorative gradient banners */ .apx-doc [class*="from-gray-9"], .apx-doc [class*="from-slate-9"], .apx-doc [class*="from-indigo-9"], .apx-doc [class*="from-emerald-9"], .apx-doc [class*="via-gray-9"], .apx-doc [class*="to-gray-9"], .apx-doc [class*="to-emerald-9"], .apx-doc [class*="to-slate-9"] { background-image: none; background-color: var(--doc-panel); } /* Text: light-on-dark → document ink */ .apx-doc .text-white, .apx-doc .text-white\/90, .apx-doc .text-white\/80, .apx-doc .text-white\/70, .apx-doc .text-gray-100, .apx-doc .text-gray-200, .apx-doc .text-slate-100, .apx-doc .text-slate-200 { color: var(--doc-ink); } .apx-doc .text-gray-300, .apx-doc .text-slate-300, .apx-doc .text-gray-400, .apx-doc .text-slate-400 { color: var(--doc-ink-soft); } .apx-doc .text-gray-500, .apx-doc .text-gray-600, .apx-doc .text-slate-500, .apx-doc .text-slate-600 { color: var(--doc-ink-mute); } /* Accent text: indigo/violet app accent → document steel / violet */ .apx-doc .text-indigo-300, .apx-doc .text-indigo-400, .apx-doc .text-indigo-500, .apx-doc .text-violet-300, .apx-doc .text-violet-400 { color: var(--doc-steel); } /* Status text */ .apx-doc .text-emerald-300, .apx-doc .text-emerald-400, .apx-doc .text-green-300, .apx-doc .text-green-400 { color: var(--doc-ok); } .apx-doc .text-amber-300, .apx-doc .text-amber-400, .apx-doc .text-amber-500, .apx-doc .text-yellow-300, .apx-doc .text-yellow-400 { color: var(--doc-warn); } /* amber-600/700 as body text (e.g. report confidence line) → doc-warn, AA on light */ .apx-doc .text-amber-600, .apx-doc .text-amber-700 { color: var(--doc-warn); } .apx-doc .text-red-300, .apx-doc .text-red-400, .apx-doc .text-rose-300, .apx-doc .text-rose-400 { color: var(--doc-bad); } .apx-doc .text-cyan-300, .apx-doc .text-cyan-400, .apx-doc .text-sky-300, .apx-doc .text-sky-400 { color: var(--doc-info); } /* Borders */ .apx-doc .border-gray-700, .apx-doc .border-gray-700\/50, .apx-doc .border-gray-700\/40, .apx-doc .border-gray-700\/30, .apx-doc .border-gray-800, .apx-doc .border-gray-800\/50, .apx-doc .border-gray-600, .apx-doc .border-gray-600\/50, .apx-doc .border-slate-700, .apx-doc .border-slate-700\/50, .apx-doc .border-indigo-800\/30, .apx-doc .border-indigo-700\/25, .apx-doc .border-indigo-600\/25, .apx-doc .border-white\/10, .apx-doc .border-white\/5 { border-color: var(--doc-border); } .apx-doc .divide-gray-700 > :not([hidden]) ~ :not([hidden]), .apx-doc .divide-gray-800 > :not([hidden]) ~ :not([hidden]) { border-color: var(--doc-border); } /* Tinted chips used in the dark views → document tints */ .apx-doc .bg-indigo-600\/15, .apx-doc .bg-indigo-500\/10, .apx-doc .bg-indigo-500\/15, .apx-doc .bg-violet-500\/10, .apx-doc .bg-violet-600\/15 { background-color: rgba(86,139,181,0.10); } .apx-doc .bg-emerald-500\/10, .apx-doc .bg-emerald-600\/15, .apx-doc .bg-green-500\/10, .apx-doc .bg-green-600\/15 { background-color: rgba(46,125,91,0.10); } .apx-doc .bg-amber-500\/10, .apx-doc .bg-amber-600\/15, .apx-doc .bg-yellow-500\/10 { background-color: rgba(154,91,38,0.10); } .apx-doc .bg-red-500\/10, .apx-doc .bg-rose-500\/10, .apx-doc .bg-red-600\/15 { background-color: rgba(176,72,63,0.10); } /* Inputs on the light ground */ .apx-doc .input, .apx-doc .select, .apx-doc .textarea, .apx-doc select, .apx-doc input[type="text"] { background: var(--doc-panel) !important; border: 1px solid var(--doc-border) !important; color: var(--doc-ink) !important; } .apx-doc .input::placeholder { color: var(--doc-ink-mute); } /* ═══════════════════════════════════════════════════════════════════════════ INLINE-STYLE CONVERGENCE — dark-ground inline styles → document light Pre-existing report views carry hundreds of inline styles written for the dark executive ground (rgba(255,255,255,0.02…) tints, white-alpha text, indigo accents, dark status hexes). An inline style without !important is overridden by an !important rule, so a single scoped block converges every report surface at once — no per-view literals, no per-view colours. Only substrings identifying the dark-ground form are matched. ═══════════════════════════════════════════════════════════════════════════ */ /* White-tint fills → document bands */ .apx-doc [style*="background: rgba(255,255,255,0.0"], .apx-doc [style*="background:rgba(255,255,255,0.0"], .apx-doc [style*="background: rgba(255,255,255,0.1"], .apx-doc [style*="background:rgba(255,255,255,0.1"], .apx-doc [style*="background: rgba(255,255,255,0.2"], .apx-doc [style*="background:rgba(255,255,255,0.2"], .apx-doc [style*="background: rgba(17, 24, 39"], .apx-doc [style*="background:#111827"], .apx-doc [style*="background: #111827"], .apx-doc [style*="background:#0f172a"], .apx-doc [style*="background: #0f172a"], .apx-doc [style*="background:#030712"], .apx-doc [style*="background: #030712"], .apx-doc [style*="background:#0b1120"], .apx-doc [style*="background: #0b1120"] { background: var(--doc-panel-2) !important; } .apx-doc [style*="background: rgba(255,255,255,0.3"], .apx-doc [style*="background:rgba(255,255,255,0.3"], .apx-doc [style*="background: rgba(255,255,255,0.4"], .apx-doc [style*="background:rgba(255,255,255,0.4"], .apx-doc [style*="background: rgba(255,255,255,0.5"], .apx-doc [style*="background:rgba(255,255,255,0.5"], .apx-doc [style*="background: rgba(255,255,255,0.6"], .apx-doc [style*="background:rgba(255,255,255,0.6"] { background: var(--doc-panel) !important; } /* White-hairline borders → document borders */ .apx-doc [style*="border: 1px solid rgba(255,255,255,0.0"], .apx-doc [style*="border:1px solid rgba(255,255,255,0.0"], .apx-doc [style*="border-bottom: 1px solid rgba(255,255,255,0.0"], .apx-doc [style*="border-bottom:1px solid rgba(255,255,255,0.0"], .apx-doc [style*="border-top: 1px solid rgba(255,255,255,0.0"], .apx-doc [style*="border-top:1px solid rgba(255,255,255,0.0"], .apx-doc [style*="border-color: rgba(255,255,255,0.0"], .apx-doc [style*="border-color:rgba(255,255,255,0.0"], .apx-doc [style*="border-left: 1px solid rgba(255,255,255,0.0"], .apx-doc [style*="border-right: 1px solid rgba(255,255,255,0.0"] { border-color: var(--doc-border) !important; } /* Bright white-alpha text → document ink */ .apx-doc [style*="color: rgba(255,255,255,0.9"], .apx-doc [style*="color:rgba(255,255,255,0.9"], .apx-doc [style*="color: rgba(255,255,255,0.8"], .apx-doc [style*="color:rgba(255,255,255,0.8"], .apx-doc [style*="color: rgba(255,255,255,0.7"], .apx-doc [style*="color:rgba(255,255,255,0.7"], .apx-doc [style*="color:#fff"], .apx-doc [style*="color: #fff"], .apx-doc [style*="color:white"], .apx-doc [style*="color: white"] { color: var(--doc-ink) !important; } .apx-doc [style*="color: rgba(255,255,255,0.6"], .apx-doc [style*="color:rgba(255,255,255,0.6"], .apx-doc [style*="color: rgba(255,255,255,0.5"], .apx-doc [style*="color:rgba(255,255,255,0.5"], .apx-doc [style*="color: rgba(214,219,228"], .apx-doc [style*="color:#cbd5e1"], .apx-doc [style*="color: #cbd5e1"], .apx-doc [style*="color:#e2e8f0"], .apx-doc [style*="color: #e2e8f0"] { color: var(--doc-ink-soft) !important; } .apx-doc [style*="color: rgba(255,255,255,0.4"], .apx-doc [style*="color:rgba(255,255,255,0.4"], .apx-doc [style*="color: rgba(255,255,255,0.3"], .apx-doc [style*="color:rgba(255,255,255,0.3"], .apx-doc [style*="color: rgba(255,255,255,0.2"], .apx-doc [style*="color:rgba(255,255,255,0.2"], .apx-doc [style*="color: rgba(255,255,255,0.1"], .apx-doc [style*="color:rgba(255,255,255,0.1"], .apx-doc [style*="color: rgba(255,255,255,0.0"], .apx-doc [style*="color:#94a3b8"], .apx-doc [style*="color: #94a3b8"], .apx-doc [style*="color:#64748b"], .apx-doc [style*="color: #64748b"], .apx-doc [style*="color:#9ca3af"], .apx-doc [style*="color: #9ca3af"], .apx-doc [style*="color:#6b7280"], .apx-doc [style*="color: #6b7280"] { color: var(--doc-ink-mute) !important; } /* Dark-surface text greys → document ink */ .apx-doc [style*="color:#e5e7eb"], .apx-doc [style*="color: #e5e7eb"], .apx-doc [style*="color:#f3f4f6"], .apx-doc [style*="color: #f3f4f6"], .apx-doc [style*="color:#d1d5db"], .apx-doc [style*="color: #d1d5db"] { color: var(--doc-ink) !important; } /* Indigo app accent in inline styles → document steel */ .apx-doc [style*="#818cf8"] { color: var(--doc-steel) !important; } .apx-doc [style*="#6366F1"], .apx-doc [style*="#6366f1"] { color: var(--doc-violet-text) !important; } /* Dark status hexes in inline styles → document status tones */ .apx-doc [style*="color:#34d399"], .apx-doc [style*="color: #34d399"] { color: var(--doc-ok) !important; } .apx-doc [style*="color:#fbbf24"], .apx-doc [style*="color: #fbbf24"], .apx-doc [style*="color:#f59e0b"], .apx-doc [style*="color: #f59e0b"] { color: var(--doc-warn) !important; } .apx-doc [style*="color:#f87171"], .apx-doc [style*="color: #f87171"], .apx-doc [style*="color:#ef4444"], .apx-doc [style*="color: #ef4444"] { color: var(--doc-bad) !important; } .apx-doc [style*="color:#60a5fa"], .apx-doc [style*="color: #60a5fa"] { color: var(--doc-info) !important; } /* Dark hairline borders in inline styles → document borders */ .apx-doc [style*="#374151"], .apx-doc [style*="#2a2a45"], .apx-doc [style*="#4b5563"], .apx-doc [style*="#1f2937"] { border-color: var(--doc-border) !important; } /* ── executive_reports/show.html.erb