/* ============================================================ * "DEAD CHANNEL" — aging amber-phosphor CRT terminal, 1983. * A single token-layer reskin: activate by putting class * `jgn-variant-crt` on . Zero markup/layout/behavior change. * Overrides (1) the canonical semantic tokens, (2) Bootstrap's * --bs-* surfaces, (3) component shells, and (4) the surfaces tokens * can't reach (scanlines, vignette, scrollbars, ::selection, focus * rings, caret, placeholder, bracketed buttons, chart strokes). * ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=VT323&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); /* ---- amber phosphor palette ---- */ .jgn-variant-crt { --amber: #FFB000; /* bright primary phosphor (tier 1, ~9:1 on black) */ --amber-dim: #E0A020; /* secondary phosphor (tier 2, AA-safe ~7:1 — was #C98A00 which fell to ~4.2:1 on small text) */ --amber-muddy: #6E4D00; /* disabled only (contrast-exempt) — NOT for reading text */ --crt-black: #0A0600; /* warm near-black canvas */ --crt-panel: #100A00; /* raised surface */ --phos-red: #FF3B30; --phos-green: #33FF66; --glow: 0 0 4px rgba(255,176,0,.55), 0 0 10px rgba(255,176,0,.30); --glow-strong: 0 0 6px rgba(255,176,0,.85), 0 0 16px rgba(255,176,0,.5); --mono: 'VT323','IBM Plex Mono','Courier New',monospace; /* canonical semantic tokens */ --color-canvas: var(--crt-black); --color-surface: var(--crt-panel); --color-ink: var(--amber); --color-ink-dim: var(--amber-dim); --color-ink-muted: var(--amber-dim); /* readable phosphor (~6:1), NOT muddy — muddy is disabled-only */ --color-line: var(--amber-dim); --color-hover-surface: #1a1200; --color-surface-raised: var(--crt-panel); --color-surface-sunken: #1a1200; --color-surface-cool: var(--crt-panel); --color-surface-cool-2: #160F00; --color-accent: var(--amber); --color-accent-aa: var(--amber); --color-accent-strong: var(--amber); --color-on-accent: #000000; --color-invert-bg: var(--amber); --color-invert-ink: #000000; --color-status-success: var(--phos-green); --color-status-warning: var(--amber); --color-status-error: var(--phos-red); --color-status-info: var(--amber-dim); --color-accent-rgb: 255, 176, 0; /* amber as rgb triple — recolors brand tints (PM-010 tokenize) */ --color-indigo: var(--amber); /* indigo charts -> amber phosphor */ --color-platform-blog: var(--phos-green); --font-display: var(--mono); --font-prose: var(--mono); --font-ui: var(--mono); --font-mono: var(--mono); --radius-none: 0; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-pill: 0; --radius-2xl: 0; --ed-border-radius: 0; --shadow-none: none; --shadow-sm: var(--glow); --shadow-md: var(--glow); --shadow-lg: var(--glow-strong); --shadow-xl: var(--glow-strong); --shadow-hover: var(--glow-strong); --shadow-card: var(--glow); --shadow-card-sm: var(--glow); --shadow-hover-transform: none; --border-grid: 1px solid var(--amber-dim); --border-section: 1px solid var(--amber); /* Bootstrap surfaces */ --bs-body-bg: var(--crt-black); --bs-body-color: var(--amber); --bs-secondary-bg: var(--crt-panel); --bs-secondary-color: var(--amber-dim); --bs-tertiary-bg: #160F00; --bs-tertiary-color: var(--amber-muddy); --bs-emphasis-color: var(--amber); --bs-border-color: var(--amber-dim); --bs-border-color-translucent: var(--amber-dim); --bs-link-color: var(--amber); --bs-link-hover-color: #FFD15C; --bs-card-bg: var(--crt-panel); --bs-card-color: var(--amber); --bs-card-border-color: var(--amber-dim); --bs-card-cap-bg: #160F00; --bs-heading-color: var(--amber); --bs-emphasis-color-rgb: 255,176,0; /* Bootstrap status palette — the universal floor used to flatten .badge.bg-*, .btn-*, .progress-bar.bg-* to one color. With the floor removed, map each --bs-* explicitly so badges/buttons recolor to phosphor. */ --bs-primary: var(--amber); --bs-primary-rgb: 255,176,0; --bs-success: var(--phos-green); --bs-success-rgb: 51,255,102; --bs-warning: var(--amber); --bs-warning-rgb: 255,176,0; --bs-info: var(--amber-dim); --bs-info-rgb: 224,160,32; --bs-danger: var(--phos-red); --bs-danger-rgb: 255,59,48; /* themes.css component-surface var layer — remap the whole layer to phosphor (Phase 1A). Variant-scoped → default theme untouched. */ --body-bg: var(--crt-black); --surface-bg: var(--crt-panel); --surface-muted-bg: #160F00; --glass-panel-bg: rgba(16, 10, 0, 0.85); --glass-card-bg: rgba(16, 10, 0, 0.8); --glass-card-bg-hover: rgba(26, 18, 0, 0.9); --auth-panel-bg: rgba(16, 10, 0, 0.9); --input-bg: #000000; --input-bg-focus: #000000; --pack-card-bg: var(--crt-panel); --voice-badge-bg: var(--crt-black); --kpi-strip-bg: var(--crt-black); --card-footer-bg: var(--crt-black); } /* ---- base canvas + monospace + kill smoothing + sharpen everything ---- */ html.jgn-variant-crt, html.jgn-variant-crt body { background: var(--crt-black) !important; color: var(--amber); font-family: var(--mono) !important; letter-spacing: .04em; -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale; text-shadow: var(--glow); } html.jgn-variant-crt * { border-radius: 0 !important; font-family: var(--mono) !important; box-shadow: none; } html.jgn-variant-crt body { position: relative; } /* vignette — darken toward edges */ html.jgn-variant-crt body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 99998; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); } /* scanlines + faint flicker */ html.jgn-variant-crt body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 99999; background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.22) 3px, rgba(0,0,0,.22) 3px); mix-blend-mode: multiply; animation: crt-flicker 5s steps(60) infinite; } @keyframes crt-flicker { 0%,97%,100% { opacity: 1; } 98% { opacity: .82; } 99% { opacity: .94; } } /* ---- text: amber tiers + glow ---- */ html.jgn-variant-crt, html.jgn-variant-crt p, html.jgn-variant-crt span, html.jgn-variant-crt td, html.jgn-variant-crt th, html.jgn-variant-crt li, html.jgn-variant-crt label, html.jgn-variant-crt div, html.jgn-variant-crt h1, html.jgn-variant-crt h2, html.jgn-variant-crt h3, html.jgn-variant-crt h4, html.jgn-variant-crt h5, html.jgn-variant-crt h6 { color: var(--amber); } html.jgn-variant-crt .text-muted, html.jgn-variant-crt .text-secondary, html.jgn-variant-crt small, html.jgn-variant-crt .form-text, html.jgn-variant-crt .description, html.jgn-variant-crt [class*="description"], html.jgn-variant-crt [class*="-subtitle"], html.jgn-variant-crt [class*="-caption"], html.jgn-variant-crt [class*="-meta"] { color: var(--amber-dim) !important; } /* ---- surfaces: black boxes, amber 1px rule, glow ---- */ html.jgn-variant-crt .card, html.jgn-variant-crt .modal-content, html.jgn-variant-crt .dropdown-menu, html.jgn-variant-crt .list-group-item, html.jgn-variant-crt .offcanvas, html.jgn-variant-crt .accordion-item, html.jgn-variant-crt .accordion-button, html.jgn-variant-crt .toast, html.jgn-variant-crt .popover, html.jgn-variant-crt .tooltip-inner, html.jgn-variant-crt [class*="panel"], html.jgn-variant-crt [class*="neo-"], html.jgn-variant-crt section, html.jgn-variant-crt aside, html.jgn-variant-crt .alert { background-color: var(--crt-panel) !important; color: var(--amber) !important; border: 1px solid var(--amber-dim) !important; box-shadow: var(--glow) !important; } html.jgn-variant-crt .dropdown-item { color: var(--amber) !important; background: transparent !important; } html.jgn-variant-crt .dropdown-item:hover, html.jgn-variant-crt .dropdown-item:focus { background: var(--amber) !important; color: #000 !important; } /* ============================================================ * FLOOR DELETED (PM-010 Phase 3). The universal dark-surface background + * amber text floors are GONE. Components no longer hardcode light hex on * data surfaces / badges / pills — those now read the canonical tokens * (--color-canvas / --color-surface / --color-ink / --color-status-* / * --bs-*) which this variant remaps to phosphor above. Any surface that * still renders light is a component hardcoding #fff at the source — fix * THERE, never reinstate a floor. * ============================================================ */ /* apphdr section tabs: deterministic state — black bg + amber text at rest, * inverted (amber bg + black text) on hover/focus/active. Stops the LIBRARY * tab oscillating between amber-on-amber and black-on-black. */ /* extra .apphdr-row2 ancestor raises specificity to (0,3,x) so these beat the * later, equal-specificity "[class*=apphdr] { bg:#000 }" / "[class*=apphdr] * { * color:amber }" blanket rules that would otherwise re-flatten the active tab. */ html.jgn-variant-crt .apphdr-row2 .apphdr-row2__tab, html.jgn-variant-crt .apphdr-row2 .apphdr-row2__tab * { background-color: var(--crt-black) !important; color: var(--amber) !important; } html.jgn-variant-crt .apphdr-row2 .apphdr-row2__tab:hover, html.jgn-variant-crt .apphdr-row2 .apphdr-row2__tab:focus, html.jgn-variant-crt .apphdr-row2 .apphdr-row2__tab--active, html.jgn-variant-crt .apphdr-row2 .apphdr-row2__tab[aria-expanded="true"], html.jgn-variant-crt .apphdr-row2 .apphdr-row2__tab:hover *, html.jgn-variant-crt .apphdr-row2 .apphdr-row2__tab:focus *, html.jgn-variant-crt .apphdr-row2 .apphdr-row2__tab--active *, html.jgn-variant-crt .apphdr-row2 .apphdr-row2__tab[aria-expanded="true"] * { background-color: var(--amber) !important; color: #000 !important; text-shadow: none !important; } /* progress/meter FILLS stay amber (their track is now black) */ html.jgn-variant-crt .progress-bar, html.jgn-variant-crt [class*="bar-fill"], html.jgn-variant-crt [class*="-fill"], html.jgn-variant-crt [class*="meter-value"] { background-color: var(--amber) !important; color: #000 !important; } /* any text sitting on a (formerly light) badge/pill is now amber on black */ html.jgn-variant-crt [class*="badge"], html.jgn-variant-crt [class*="chip"], html.jgn-variant-crt [class*="pill"], html.jgn-variant-crt [class*="position"], html.jgn-variant-crt [class*="-type"], html.jgn-variant-crt [class*="-tag"], html.jgn-variant-crt [class*="-status"], html.jgn-variant-crt [class*="-label"] { color: var(--amber) !important; border-color: var(--amber-dim) !important; } /* stage-quad / stage-segment widgets paint each funnel stage a color with a * dark label the app hardcodes black — once the floor darkens the segment that * leaves black-on-black. Force black segment + amber label (extra descendant * combinator keeps specificity above the app's scoped per-stage label rule). */ html.jgn-variant-crt [class*="stage-quad"], html.jgn-variant-crt [class*="stage-quad"] *, html.jgn-variant-crt [class*="jgn-stage"], html.jgn-variant-crt [class*="jgn-stage"] *, html.jgn-variant-crt [class*="-segment"], html.jgn-variant-crt [class*="-segment"] *, html.jgn-variant-crt [class*="funnel"], html.jgn-variant-crt [class*="funnel"] * { background-color: var(--crt-black) !important; color: var(--amber) !important; border-color: var(--amber-dim) !important; text-shadow: var(--glow); } /* the active-stage variants (.stage-X.is-active .__label / .__letter) are (0,3,0) * and out-rank the [class*] rule above + the button-focus invert — match them at * (0,4,0) so the label/letter stay amber-on-black in every selected state. */ html.jgn-variant-crt .jgn-stage-quad__segment.is-active, html.jgn-variant-crt .jgn-stage-quad__segment.is-active .jgn-stage-quad__label, html.jgn-variant-crt .jgn-stage-quad__segment.is-active .jgn-stage-quad__letter, html.jgn-variant-crt .jgn-stage-quad .jgn-stage-quad__segment .jgn-stage-quad__label, html.jgn-variant-crt .jgn-stage-quad .jgn-stage-quad__segment .jgn-stage-quad__letter { background-color: var(--crt-black) !important; color: var(--amber) !important; border-color: var(--amber-dim) !important; } html.jgn-variant-crt .jgn-stage-quad__segment:hover, html.jgn-variant-crt .jgn-stage-quad__segment:focus, html.jgn-variant-crt .jgn-stage-quad__segment:hover .jgn-stage-quad__label, html.jgn-variant-crt .jgn-stage-quad__segment:focus .jgn-stage-quad__label, html.jgn-variant-crt .jgn-stage-quad__segment:hover .jgn-stage-quad__letter, html.jgn-variant-crt .jgn-stage-quad__segment:focus .jgn-stage-quad__letter { background-color: var(--amber) !important; color: #000 !important; text-shadow: none !important; } /* ---- tables: amber rule, no fills ---- */ html.jgn-variant-crt .table { --bs-table-bg: transparent; --bs-table-color: var(--amber); --bs-table-striped-bg: rgba(255,176,0,.05); --bs-table-striped-color: var(--amber); --bs-table-hover-bg: rgba(255,176,0,.12); --bs-table-hover-color: var(--amber); --bs-table-border-color: var(--amber-dim); } html.jgn-variant-crt th, html.jgn-variant-crt td { border-color: var(--amber-dim) !important; } /* ---- buttons: bracketed labels, invert on hover/focus, sharp, glow ---- */ html.jgn-variant-crt .btn, html.jgn-variant-crt button:not(.btn-close) { background: var(--crt-black) !important; color: var(--amber) !important; border: 1px solid var(--amber) !important; box-shadow: var(--glow) !important; text-transform: uppercase; letter-spacing: .08em; } html.jgn-variant-crt .btn::before, html.jgn-variant-crt button:not(.btn-close):not(.dropdown-toggle-split)::before { content: "[ "; color: var(--amber); } html.jgn-variant-crt .btn::after, html.jgn-variant-crt button:not(.btn-close):not(.dropdown-toggle-split)::after { content: " ]"; color: var(--amber); } html.jgn-variant-crt .btn:hover, html.jgn-variant-crt .btn:focus, html.jgn-variant-crt button:not(.btn-close):hover, html.jgn-variant-crt button:not(.btn-close):focus { background: var(--amber) !important; color: #000 !important; box-shadow: var(--glow-strong) !important; } html.jgn-variant-crt .btn:hover::before, html.jgn-variant-crt .btn:hover::after, html.jgn-variant-crt button:hover::before, html.jgn-variant-crt button:hover::after { color: #000; } /* ---- inputs: amber box, block caret, low-opacity placeholder ---- */ html.jgn-variant-crt .form-control, html.jgn-variant-crt .form-select, html.jgn-variant-crt input, html.jgn-variant-crt textarea, html.jgn-variant-crt select, html.jgn-variant-crt .input-group-text { background: #000 !important; color: var(--amber) !important; border: 1px solid var(--amber) !important; caret-color: var(--amber); caret-shape: block; box-shadow: inset 0 0 6px rgba(255,176,0,.15) !important; } html.jgn-variant-crt ::placeholder { color: var(--amber) !important; opacity: .35 !important; } html.jgn-variant-crt input[type="checkbox"], html.jgn-variant-crt input[type="radio"] { accent-color: var(--amber); } /* ---- links ---- */ html.jgn-variant-crt a { color: var(--amber) !important; text-decoration: underline; } html.jgn-variant-crt a:hover { color: #FFD15C !important; } /* ---- focus ring: thick amber glow on keyboard nav ---- */ html.jgn-variant-crt :focus-visible { outline: 2px solid var(--amber) !important; outline-offset: 1px; box-shadow: 0 0 0 3px rgba(255,176,0,.35), var(--glow-strong) !important; } /* ---- states: red / green / amber phosphor ---- */ html.jgn-variant-crt .is-invalid, html.jgn-variant-crt .invalid-feedback, html.jgn-variant-crt .text-danger, html.jgn-variant-crt .alert-danger { color: var(--phos-red) !important; border-color: var(--phos-red) !important; text-shadow: 0 0 4px rgba(255,59,48,.6) !important; } html.jgn-variant-crt .is-valid, html.jgn-variant-crt .valid-feedback, html.jgn-variant-crt .text-success, html.jgn-variant-crt .alert-success, html.jgn-variant-crt .badge.bg-success { color: var(--phos-green) !important; border-color: var(--phos-green) !important; text-shadow: 0 0 4px rgba(51,255,102,.6) !important; } html.jgn-variant-crt .text-warning, html.jgn-variant-crt .alert-warning { color: var(--amber) !important; } html.jgn-variant-crt .badge { background: transparent !important; color: var(--amber) !important; border: 1px solid var(--amber-dim) !important; } /* ---- disabled: dim muddy amber, no glow ---- */ html.jgn-variant-crt :disabled, html.jgn-variant-crt .disabled, html.jgn-variant-crt [aria-disabled="true"], html.jgn-variant-crt .btn:disabled { color: var(--amber-muddy) !important; border-color: var(--amber-muddy) !important; box-shadow: none !important; text-shadow: none !important; opacity: 1 !important; } /* ---- text selection ---- */ html.jgn-variant-crt ::selection { background: var(--amber); color: #000; text-shadow: none; } /* ---- scrollbars: thin, square, amber ---- */ html.jgn-variant-crt ::-webkit-scrollbar { width: 10px; height: 10px; } html.jgn-variant-crt ::-webkit-scrollbar-track { background: #000; border-left: 1px solid var(--amber-dim); } html.jgn-variant-crt ::-webkit-scrollbar-thumb { background: var(--amber-dim); border: 1px solid var(--amber); } html.jgn-variant-crt ::-webkit-scrollbar-thumb:hover { background: var(--amber); } html.jgn-variant-crt * { scrollbar-color: var(--amber-dim) #000; scrollbar-width: thin; } /* ---- charts: amber/green wireframe, no fills (ApexCharts SVG) ---- */ html.jgn-variant-crt .apexcharts-canvas, html.jgn-variant-crt svg { background: transparent !important; } html.jgn-variant-crt .apexcharts-series path, html.jgn-variant-crt .apexcharts-line, html.jgn-variant-crt .apexcharts-bar-area, html.jgn-variant-crt .apexcharts-area { stroke: var(--amber) !important; fill: none !important; filter: drop-shadow(0 0 3px rgba(255,176,0,.6)); } html.jgn-variant-crt .apexcharts-text, html.jgn-variant-crt .apexcharts-xaxis text, html.jgn-variant-crt .apexcharts-yaxis text, html.jgn-variant-crt .apexcharts-legend-text { fill: var(--amber) !important; color: var(--amber) !important; } html.jgn-variant-crt .apexcharts-gridline, html.jgn-variant-crt .apexcharts-grid line { stroke: rgba(255,176,0,.18) !important; } html.jgn-variant-crt .leaflet-container { background: #000 !important; filter: sepia(1) hue-rotate(-15deg) saturate(3) brightness(.9); } /* ---- dark header bar already dark; keep it amber-text/sharp ---- */ html.jgn-variant-crt [class*="apphdr"], html.jgn-variant-crt nav, html.jgn-variant-crt header { background: #000 !important; border-bottom: 1px solid var(--amber-dim) !important; } html.jgn-variant-crt [class*="apphdr"] *, html.jgn-variant-crt nav *, html.jgn-variant-crt header * { color: var(--amber) !important; } /* ---- Bootstrap light-utility backgrounds (.bg-light/.bg-white/.bg-body*) used * on footers/cards bypass tokens — force to canvas ---- */ html.jgn-variant-crt .bg-light, html.jgn-variant-crt .bg-white, html.jgn-variant-crt .bg-body, html.jgn-variant-crt .bg-body-tertiary, html.jgn-variant-crt .bg-body-secondary, html.jgn-variant-crt footer.bg-light { background-color: var(--crt-black) !important; --bs-bg-opacity: 1; } /* ---- active/selected nav items: terminal selected = inverted phosphor. * Prevents amber-text-on-amber-bg (the app's accent-bg active style collided * with the forced-amber nav text) and white-bg selected sidebar rows. ---- */ html.jgn-variant-crt .preferences-nav-link.active, html.jgn-variant-crt .preferences-nav-link.active * { background-color: var(--amber) !important; color: #000 !important; text-shadow: none !important; } html.jgn-variant-crt nav .active, html.jgn-variant-crt header .active, html.jgn-variant-crt [class*="apphdr"] .active, html.jgn-variant-crt .nav-link.active, html.jgn-variant-crt [aria-selected="true"] { background-color: var(--crt-black) !important; color: var(--amber) !important; border-bottom: 2px solid var(--amber) !important; } html.jgn-variant-crt nav .active *, html.jgn-variant-crt header .active *, html.jgn-variant-crt [class*="apphdr"] .active *, html.jgn-variant-crt .nav-link.active * { color: var(--amber) !important; } /* any button/tab that inverts to an amber fill (hover/focus, or the header's * accent tab) must carry BLACK text on ALL descendants — otherwise the global * "[class*=apphdr] * { color: amber }" rule leaves amber-on-amber. This also * makes the bracketed buttons fully invert on hover, per spec. */ html.jgn-variant-crt button:not(.btn-close):hover, html.jgn-variant-crt button:not(.btn-close):focus, html.jgn-variant-crt .btn:hover, html.jgn-variant-crt .btn:focus, html.jgn-variant-crt button:not(.btn-close):hover *, html.jgn-variant-crt button:not(.btn-close):focus *, html.jgn-variant-crt .btn:hover *, html.jgn-variant-crt .btn:focus * { color: #000 !important; text-shadow: none !important; } /* ---- motion: instant / stepped, no smooth easing ---- */ html.jgn-variant-crt * { transition-timing-function: steps(2, end) !important; animation-timing-function: steps(4, end) !important; } /* ============================================================ * COMPOSE WORKBENCH + chips — compose-workbench.css and * design-system.css carry hardcoded light backgrounds and pastel * chips that bypass the canonical tokens (verified by the reskin * probe: white deliverable rows/headers, glass-panels, #FEF3C7 / * #FFEDD5 / #FFF7ED / #FEFAF2 surfaces, amber text on white = 1.8:1). * Repaint them all to phosphor-on-black with !important so they win * over the scoped class rules regardless of source order. * ============================================================ */ /* glass-morphism panels → opaque black box, no blur */ html.jgn-variant-crt .glass-panel { background: var(--crt-panel) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid var(--amber-dim) !important; box-shadow: var(--glow) !important; color: var(--amber) !important; } /* deliverable table: headers, rows, cells, drop-targets, empty zones */ html.jgn-variant-crt .jgn-deliverable-header, html.jgn-variant-crt .jgn-deliverable-media-list table thead th, html.jgn-variant-crt .jgn-deliverable-row-assigned, html.jgn-variant-crt .jgn-deliverable-row-unassigned, html.jgn-variant-crt .jgn-deliverable-media-list tbody tr, html.jgn-variant-crt .jgn-deliverable-media-list tbody tr td, html.jgn-variant-crt .compose-panel-recent-notice, html.jgn-variant-crt .jgn-filter-anchor--active, html.jgn-variant-crt .compose-panel-inner--media .jgn-compose-zone--empty, html.jgn-variant-crt .jgn-compose-zone, html.jgn-variant-crt [class*="compose-panel"], html.jgn-variant-crt [class*="jgn-compose"] { background-color: var(--crt-black) !important; color: var(--amber) !important; border-color: var(--amber-dim) !important; } html.jgn-variant-crt .jgn-deliverable-header.is-active, html.jgn-variant-crt .jgn-deliverable-header:hover { color: var(--amber) !important; background-color: #1a1200 !important; } html.jgn-variant-crt .jgn-deliverable-row-selected, html.jgn-variant-crt .jgn-deliverable-row-assigned.jgn-deliverable-drop-target, html.jgn-variant-crt .jgn-deliverable-drop-target--active { background-color: #1a1200 !important; } /* chips/pills: filter, stage, voice, media-popover — black box, amber border, * amber text. Overrides the pastel #FEF3C7/#DBEAFE/#DCFCE7/#F3E8FF families. */ html.jgn-variant-crt .jgn-filter-chip, html.jgn-variant-crt [class*="jgn-filter-chip--stage"], html.jgn-variant-crt [class*="jgn-stage--"], html.jgn-variant-crt .jgn-media-popover__item, html.jgn-variant-crt .jgn-media-popover__item--selected, html.jgn-variant-crt [class*="jgn-voice"], html.jgn-variant-crt [class*="-chip"], html.jgn-variant-crt [class*="-pill"], html.jgn-variant-crt .badge { background: var(--crt-black) !important; color: var(--amber) !important; border: 1px solid var(--amber-dim) !important; text-shadow: var(--glow); } html.jgn-variant-crt .jgn-filter-chip--active, html.jgn-variant-crt .jgn-media-popover__item--selected, html.jgn-variant-crt .jgn-filter-chip--active:hover { background: var(--amber) !important; color: #000 !important; border-color: var(--amber) !important; text-shadow: none; } /* muted/secondary text was mapped to muddy amber (#6E4D00 → 2.56:1 on black, * fails AA). Use dim amber (#C98A00 ≈ 5.7:1) for READING text; keep muddy only * for genuinely-disabled controls (which are contrast-exempt). */ html.jgn-variant-crt .text-muted, html.jgn-variant-crt .text-secondary, html.jgn-variant-crt small, html.jgn-variant-crt .form-text, html.jgn-variant-crt .jgn-deliverable-meta, html.jgn-variant-crt [class*="muted"], html.jgn-variant-crt [class*="subtle"], html.jgn-variant-crt [class*="hint"] { color: var(--amber-dim) !important; } /* dense compose tables widened past their cells under +letter-spacing — zero it * inside the data grids so cell links stop overflowing. */ html.jgn-variant-crt .jgn-deliverable-media-list, html.jgn-variant-crt .jgn-deliverable-media-list *, html.jgn-variant-crt .compose-media-grid, html.jgn-variant-crt .compose-media-grid * { letter-spacing: 0 !important; } html.jgn-variant-crt .jgn-deliverable-cell-link { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* media cards + their BEM children (double-underscore names that the * [class*="-pill"] hyphen-pattern missed): tile, pills, voice-name, count * and asset-picker badges all carried rgba(255,255,255,0.7) / pastel bgs and * #92400E / #6E4D00 text. Force phosphor-on-black. */ html.jgn-variant-crt .jgn-media-card, html.jgn-variant-crt [class*="media-card"] { background: var(--crt-panel) !important; border-color: var(--amber-dim) !important; color: var(--amber) !important; } html.jgn-variant-crt .jgn-media-card__pill, html.jgn-variant-crt .jgn-media-card__voice-name, html.jgn-variant-crt [class*="__pill"], html.jgn-variant-crt [class*="__badge"], html.jgn-variant-crt [class*="__count"], html.jgn-variant-crt [class*="voice-name"], html.jgn-variant-crt .jgn-deliverable-engagement-tab, html.jgn-variant-crt .jgn-deliverable-engagement-tab__count { background: var(--crt-black) !important; color: var(--amber) !important; border: 1px solid var(--amber-dim) !important; } html.jgn-variant-crt .jgn-media-card__pill *, html.jgn-variant-crt [class*="__pill"] *, html.jgn-variant-crt .jgn-media-card__voice-name * { color: var(--amber) !important; } /* active engagement tab → inverted phosphor */ html.jgn-variant-crt .jgn-deliverable-engagement-tab--active, html.jgn-variant-crt .jgn-deliverable-engagement-tab--active .jgn-deliverable-engagement-tab__count { background: var(--amber) !important; color: #000 !important; border-color: var(--amber) !important; }