/* ============================================================
Condition Lookup, Component Styles
Inherits base reset, typography, layout, navbar, footer
from main.css. Only DC-specific components live here.
============================================================ */
/* VA Glossary Tooltips, subtle underline + native title tooltip */
.va-tip {
text-decoration: underline dotted;
text-decoration-color: var(--color-primary);
text-decoration-thickness: 1.5px;
text-underline-offset: 2px;
cursor: help;
color: inherit;
font-style: normal;
}
/* ── DC Page Scope ── */
/* DC pages use a narrower content width for readability */
.dc-page main .container {
max-width: 900px;
}
/* Skip link, accessibility (keep for DC pages that may load standalone) */
.skip-link {
position: absolute;
top: -60px;
left: 0;
background: var(--color-primary);
color: #fff;
padding: 0.75rem 1.5rem;
z-index: 1000;
font-weight: 600;
text-decoration: none;
transition: top 0.2s;
}
.skip-link:focus {
top: 0;
}
/* ── DC Hero ── */
.dc-hero {
text-align: center;
margin-bottom: 1.5rem;
}
.dc-hero h1 {
font-size: 1.6rem;
color: var(--color-primary);
margin-bottom: 0.25rem;
}
.dc-hero p {
font-size: 1.05rem;
color: var(--color-text-muted);
max-width: 700px;
margin: 0 auto;
}
.dc-hero strong {
color: var(--color-primary);
}
/* ── DC Two-Panel Chooser ── */
.dc-chooser {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
margin-bottom: 1.5rem;
}
.dc-panel {
background: var(--color-surface);
border: 2px solid var(--color-border);
border-radius: var(--radius-md);
padding: 1.5rem;
transition: border-color 0.2s;
}
.dc-panel:hover {
border-color: var(--color-primary);
}
.dc-panel-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.dc-panel h2 {
font-size: 1.15rem;
color: var(--color-primary);
margin-bottom: 0.4rem;
}
.dc-panel-recommended {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-on-accent);
background: var(--color-accent);
padding: 0.2rem 0.6rem;
border-radius: 3px;
margin-left: 0.5rem;
vertical-align: middle;
position: relative;
top: -1px;
}
.dc-panel p {
font-size: 0.88rem;
color: var(--color-text-muted);
line-height: 1.5;
margin-bottom: 1rem;
}
/* Search panel expands when active */
.dc-panel-search.search-active {
grid-column: 1 / -1;
}
/* Browse button */
.dc-browse-btn {
display: inline-block;
font-size: 0.95rem;
font-weight: 600;
color: #fff;
background: var(--color-primary);
padding: 0.6rem 1.5rem;
border-radius: var(--radius-sm);
text-decoration: none;
transition: all 0.2s;
}
.dc-browse-btn:hover {
background: var(--color-primary-dark);
box-shadow: var(--shadow-md);
text-decoration: none;
color: #fff;
}
:root[data-theme="dark"] .dc-browse-btn { background: #1f4a85; }
:root[data-theme="dark"] .dc-browse-btn:hover { background: #2c5fa3; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .dc-browse-btn { background: #1f4a85; }
:root:not([data-theme="light"]) .dc-browse-btn:hover { background: #2c5fa3; }
}
/* Example search links */
.dc-search-examples {
font-size: 0.85rem;
color: var(--color-text-muted);
margin-top: -1rem;
margin-bottom: 1rem;
}
.dc-search-examples a {
color: var(--color-primary);
text-decoration: underline;
margin: 0 0.15rem;
}
.dc-search-examples a:hover {
color: var(--color-primary-dark);
}
/* Browse fallback link (shown when search is active) */
.dc-browse-fallback {
text-align: center;
margin-bottom: 1.5rem;
padding: 0.75rem;
background: rgba(0, 51, 102, 0.04);
border-radius: var(--radius-sm);
}
.dc-browse-fallback a {
color: var(--color-primary);
font-weight: 500;
text-decoration: none;
font-size: 0.95rem;
}
.dc-browse-fallback a:hover {
text-decoration: underline;
}
/* ── DC Search (legacy, kept for search-box styling) ── */
.search-section { margin-bottom: 2rem; }
.search-section h1, .search-section h2 { margin-bottom: 0.5rem; color: var(--color-primary); }
.search-section p { color: var(--color-text-muted); margin-bottom: 1rem; }
.dc-search-box {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.dc-search-box input {
flex: 1;
padding: 0.75rem 1rem;
font-size: 1.1rem;
border: 2px solid var(--color-border);
border-radius: var(--radius-sm);
font-family: var(--font-sans);
transition: border-color 0.2s;
}
.dc-search-box input:focus {
border-color: var(--color-primary);
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.dc-search-box button {
padding: 0.75rem 1.5rem;
min-height: 48px;
font-size: 1.1rem;
font-family: var(--font-sans);
background: var(--color-primary);
color: #fff;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background 0.2s;
}
.dc-search-box button:hover { background: var(--color-primary-light); }
:root[data-theme="dark"] .dc-search-box button { background: #1f4a85; }
:root[data-theme="dark"] .dc-search-box button:hover { background: #2c5fa3; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .dc-search-box button { background: #1f4a85; }
:root:not([data-theme="light"]) .dc-search-box button:hover { background: #2c5fa3; }
}
/* ── Autocomplete Dropdown ── */
.dc-search-box { position: relative; }
.dc-ac-dropdown {
position: absolute; top: 100%; left: 0; right: 0; background: var(--color-surface);
border: 1px solid var(--color-border); border-top: none;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
max-height: 280px; overflow-y: auto; z-index: 10; display: none;
box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.dc-ac-dropdown.show { display: block; }
.dc-ac-item {
padding: 0.6rem 0.85rem; cursor: pointer; font-size: 0.88rem;
border-bottom: 1px solid rgba(0,0,0,.04); transition: background 0.1s;
}
.dc-ac-item:hover, .dc-ac-item.active { background: rgba(26,58,107,.06); }
.dc-ac-item:last-child { border-bottom: none; }
.dc-ac-code { font-weight: 700; color: var(--color-primary); margin-right: 0.35rem; }
.dc-ac-name { color: var(--color-text); }
.dc-ac-system { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 0.1rem; }
.dc-ac-pact { font-size: 0.65rem; padding: 1px 5px; border-radius: 99px; margin-left: 0.35rem; background: rgba(46,125,50,.1); color: #2e7d32; vertical-align: middle; }
/* ── Search Results ── */
#search-results .result-card {
background: #f0f4f8;
border: 2px solid #c8d6e5;
border-left: 4px solid var(--color-primary);
border-radius: var(--radius-md);
padding: 1rem 1.25rem;
margin-bottom: 0.75rem;
transition: all 0.2s;
cursor: pointer;
}
#search-results .result-card:hover {
box-shadow: 0 4px 16px rgba(26, 58, 107, .15);
border-color: var(--color-primary);
transform: translateY(-2px);
background: #e8eef5;
}
#search-results .result-card a { text-decoration: none; color: inherit; display: block; }
.result-code { font-weight: 700; color: var(--color-primary); font-size: 1.1rem; }
.result-condition { color: var(--color-text); }
.result-system { color: var(--color-text-muted); font-size: 0.9rem; margin-top: 0.25rem; }
.result-cta {
display: inline-block;
margin-top: 0.4rem;
font-size: 0.82rem;
font-weight: 600;
color: var(--color-accent);
}
#search-results .result-card:hover .result-cta { text-decoration: underline; }
/* ── ICD-10 crosswalk note + provenance ── */
.icd-note {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 4px solid var(--color-accent);
border-radius: var(--radius-sm);
padding: 0.75rem 0.9rem;
margin-bottom: 0.9rem;
font-size: 0.9rem;
line-height: 1.5;
color: var(--color-text-muted);
}
.icd-note strong { color: var(--color-primary); }
.result-icd {
color: var(--color-text-muted);
font-size: 0.82rem;
font-style: italic;
margin-top: 0.25rem;
}
/* DC-page reverse panel: ICD-10 diagnoses rated under this code */
.icd-intro { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.5; margin: 0 0 0.85rem; }
.icd-chip-wrap { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.icd-chip {
display: inline-block;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 0.3rem 0.6rem;
font-size: 0.82rem;
color: var(--color-text);
line-height: 1.35;
max-width: 100%;
overflow-wrap: anywhere;
}
.icd-chip strong { color: var(--color-primary); font-weight: 700; margin-right: 0.3rem; }
details.icd-more { margin-top: 0.6rem; }
details.icd-more > summary {
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-accent);
padding: 0.3rem 0;
}
details.icd-more[open] > summary { margin-bottom: 0.5rem; }
/* ── AI Symptom Match Badges ── */
.ai-badge {
display: inline-block; font-size: 0.7rem; font-weight: 600;
padding: 2px 8px; border-radius: 99px; margin-left: 6px; vertical-align: middle;
}
.ai-badge-high { background: rgba(34,197,94,.12); color: #16a34a; border: 1px solid rgba(34,197,94,.3); }
.ai-badge-medium { background: rgba(234,179,8,.12); color: #a16207; border: 1px solid rgba(234,179,8,.3); }
.ai-badge-low { background: rgba(148,163,184,.12); color: #64748b; border: 1px solid rgba(148,163,184,.3); }
#search-results .result-card.ai-match { border-left-color: #3b82f6; }
/* ── Body Systems Grid ── */
.browse-section h2 { margin-bottom: 1rem; color: var(--color-primary); }
#body-systems {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 0.75rem;
}
.system-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 1rem;
text-decoration: none;
color: var(--color-text);
transition: box-shadow 0.2s;
}
.system-card:hover { box-shadow: var(--shadow-md); }
.system-card h3 { color: var(--color-primary); font-size: 1rem; }
.system-card .count { color: var(--color-text-muted); font-size: 0.85rem; }
/* ── Breadcrumb (DC-scoped override) ── */
.dc-page .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.25rem;
font-size: 0.88rem;
color: var(--color-text-muted);
margin-bottom: 1rem;
}
.dc-page .breadcrumb a {
color: var(--color-primary);
text-decoration: none;
}
.dc-page .breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep {
color: var(--color-border);
margin: 0 0.15rem;
}
/* ── Code Detail Page ── */
.back-link { display: inline-block; margin-bottom: 1.5rem; color: var(--color-primary); text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.code-header { margin-bottom: 1.5rem; }
.code-header .dc-number { font-size: 2rem; color: var(--color-primary); font-weight: 700; }
.code-header .dc-condition { font-size: 1.4rem; color: var(--color-text); }
.code-header .dc-system { color: var(--color-text-muted); margin-top: 0.25rem; }
.ecfr-source-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.5rem;
padding: 0.4rem 0.75rem;
min-height: 44px;
box-sizing: border-box;
border: 1px solid var(--color-border);
border-radius: 999px;
background: rgba(26, 58, 107, 0.05);
color: var(--color-primary);
font-size: 0.78rem;
font-weight: 600;
line-height: 1;
text-decoration: none;
transition: background 0.15s, border-color 0.15s;
}
.ecfr-source-badge:hover,
.ecfr-source-badge:focus-visible {
background: rgba(26, 58, 107, 0.1);
border-color: var(--color-primary);
}
.ecfr-source-badge-icon {
flex-shrink: 0;
color: var(--color-primary);
}
.dc-narrative {
max-width: 68ch;
margin: 0 0 1.5rem;
font-size: 1rem;
line-height: 1.6;
color: var(--color-text);
}
.code-section {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 1.25rem;
margin-bottom: 1rem;
}
.code-section h3 {
color: var(--color-primary);
margin-bottom: 0.75rem;
border-bottom: 2px solid var(--color-accent);
padding-bottom: 0.5rem;
}
/* ── Rating Levels ── */
.rating-row {
display: flex;
gap: 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--color-bg);
align-items: flex-start;
}
.rating-row:last-child { border-bottom: none; }
.rating-percent {
min-width: 60px;
font-weight: 700;
font-size: 1.2rem;
color: var(--color-primary);
text-align: center;
background: var(--color-bg);
border-radius: var(--radius-sm);
padding: 0.25rem 0.5rem;
}
.rating-criteria { flex: 1; }
/* Extremity badge (major/minor arm for peripheral-nerve and muscle-group codes) */
.extremity-badge {
display: block;
font-size: 0.68rem;
font-weight: 600;
padding: 0.15rem 0.35rem;
margin-top: 0.3rem;
border-radius: var(--radius-sm);
text-align: center;
line-height: 1.2;
letter-spacing: 0.02em;
}
.extremity-badge.extremity-major {
background: #e3f2fd;
color: #0d47a1;
border: 1px solid #90caf9;
}
.extremity-badge.extremity-minor {
background: #f3e5f5;
color: #4a148c;
border: 1px solid #ce93d8;
}
/* Plain-English primary text sits right above the CFR panel */
.rating-plain {
font-size: 1rem;
line-height: 1.55;
color: var(--color-text);
}
/* Official 38 CFR criteria panel */
.cfr-official {
display: block;
padding: 0.7rem 0.9rem 0.8rem;
background: #f4f6f4;
border-left: 3px solid #2e7d32;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.cfr-official-label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #2e7d32;
margin-bottom: 0.3rem;
opacity: 0.85;
}
.cfr-official-body {
font-family: var(--font-serif);
font-size: 0.97rem;
line-height: 1.6;
color: var(--color-text);
}
/* Plain-English explanation, secondary panel below CFR text */
.cfr-ai {
display: block;
margin-top: 0.7rem;
padding: 0.7rem 0.9rem 0.8rem;
background: #f0f4ff;
border-left: 3px solid #5c7cfa;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.cfr-ai-label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #3b5bdb;
margin-bottom: 0.3rem;
opacity: 0.85;
}
.cfr-ai-body {
font-size: 0.92rem;
color: var(--color-text);
line-height: 1.55;
}
/* Official 38 CFR text, always visible, visually distinct from plain-English */
.cfr-official {
display: block;
margin-top: 0.7rem;
padding: 0.7rem 0.9rem 0.8rem;
background: #fdf6e3;
border-left: 3px solid var(--color-accent);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.cfr-official-label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-primary);
margin-bottom: 0.3rem;
opacity: 0.85;
}
.cfr-official-body {
font-family: var(--font-serif);
font-size: 0.92rem;
color: var(--color-text);
line-height: 1.55;
}
/* Rating source attribution at bottom of Rating Levels section */
.rating-source-footer {
margin-top: 1rem;
padding: 0.85rem 1rem;
background: rgba(26, 58, 107, 0.04);
border-left: 3px solid var(--color-primary);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
font-size: 0.85rem;
}
.rating-source-footer strong {
color: var(--color-primary);
display: block;
margin-bottom: 0.35rem;
}
.rating-source-footer ul {
margin: 0 0 0.5rem 1.2rem;
padding: 0;
color: var(--color-text-muted);
}
.rating-source-footer ul li { margin: 0.15rem 0; }
.cfr-source-link {
font-size: 0.82rem;
color: var(--color-primary);
font-weight: 600;
text-decoration: underline;
}
.cfr-source-link:hover,
.cfr-source-link:focus-visible {
color: var(--color-accent);
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* Mobile: stack percent + extremity badge horizontally still; tighten spacing */
@media (max-width: 640px) {
.rating-percent { min-width: 56px; font-size: 1.05rem; }
.extremity-badge { font-size: 0.75rem; padding: 0.18rem 0.35rem; }
.rating-plain { font-size: 0.95rem; }
.cfr-official { padding: 0.6rem 0.75rem 0.7rem; margin-top: 0.55rem; }
.cfr-official-label { font-size: 0.68rem; }
.cfr-official-body { font-size: 0.88rem; }
.rating-source-footer { font-size: 0.85rem; padding: 0.7rem 0.8rem; }
}
/* Info banners for removed/cross-reference/note rating rows */
.info-banner {
margin-bottom: 0.75rem;
padding: 0.8rem 1rem;
border-radius: var(--radius-sm);
font-size: 0.92rem;
line-height: 1.5;
border: 1px solid transparent;
}
.info-banner-removed {
background: #fff3f3;
border-color: #ffcdd2;
border-left: 4px solid #c62828;
color: #7f0000;
}
.info-banner-crossref {
background: #e8f4fd;
border-color: #bbdefb;
border-left: 4px solid #1565c0;
color: #0d3c61;
}
.info-banner-note {
background: #f3f4f6;
border-color: #e0e0e0;
border-left: 4px solid #78909c;
color: #37474f;
}
.info-banner-link {
display: inline-block;
margin-top: 0.35rem;
font-weight: 600;
color: #1565c0;
text-decoration: none;
}
.info-banner-link:hover { text-decoration: underline; }
/* AI plain-English disclaimer, shown once at top of Rating Levels */
.ai-disclaimer {
display: flex;
gap: 0.6rem;
align-items: flex-start;
margin-bottom: 1rem;
padding: 0.7rem 0.9rem;
background: #f0f4ff;
border-left: 3px solid #5c7cfa;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
font-size: 0.85rem;
line-height: 1.55;
color: var(--color-text);
}
.ai-disclaimer-icon {
flex-shrink: 0;
font-size: 1rem;
line-height: 1.4;
color: #3b5bdb;
}
/* After-remission note for cancer codes with only 100% rating */
.remission-note {
margin-top: 1rem;
background: #fff8e1;
border: 1px solid #ffc107;
border-left: 4px solid #f57f17;
border-radius: var(--radius-sm);
padding: 1rem 1.25rem;
}
.remission-note-header {
font-weight: 700;
font-size: 1.05rem;
color: #e65100;
margin-bottom: 0.5rem;
}
.remission-icon { margin-right: 0.35rem; }
.remission-note p {
margin: 0.4rem 0;
font-size: 0.93rem;
line-height: 1.55;
color: #333;
}
.remission-residuals-link {
margin-top: 0.75rem !important;
}
.remission-residuals-link a {
color: #1565c0;
font-weight: 600;
text-decoration: none;
}
.remission-residuals-link a:hover { text-decoration: underline; }
/* ── Disclaimer ── */
.disclaimer {
margin-top: 2rem;
padding: 1rem;
background: #fff3cd;
border: 1px solid #ffc107;
border-radius: var(--radius-md);
font-size: 0.9rem;
color: #664d03;
}
/* ── No Results ── */
.no-results { color: var(--color-text-muted); font-style: italic; padding: 1rem 0; }
/* ── Browse Page Layout ── */
.browse-layout {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
align-items: start;
}
.browse-sidebar {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 1rem;
position: static;
}
.browse-sidebar h2 {
font-size: 1.1rem;
color: var(--color-primary);
margin-bottom: 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--color-accent);
}
/* ── Torso SVG Visual ── */
.torso-container {
width: 100%;
max-width: 380px;
margin: 0 auto;
}
.torso-svg {
width: 100%;
height: auto;
cursor: default;
}
/* Body outline */
.torso-body-outline ellipse,
.torso-body-outline rect,
.torso-body-outline path {
transition: fill 0.2s;
}
/* Clickable zones on the body */
.torso-zone {
fill: rgba(44, 90, 160, 0.08);
stroke: none;
cursor: pointer;
transition: fill 0.2s, stroke 0.2s;
}
.torso-region:hover .torso-zone {
fill: rgba(44, 90, 160, 0.25);
stroke: var(--color-primary);
stroke-width: 1.5;
}
.torso-region.active .torso-zone {
fill: rgba(200, 146, 42, 0.3);
stroke: var(--color-accent);
stroke-width: 2;
}
/* Connector lines from body to labels */
.torso-connector {
stroke: #b0bec5;
stroke-width: 1;
stroke-dasharray: 3 2;
transition: stroke 0.2s;
}
.torso-region:hover .torso-connector {
stroke: var(--color-primary);
stroke-width: 1.5;
stroke-dasharray: none;
}
.torso-region.active .torso-connector {
stroke: var(--color-accent);
stroke-width: 1.5;
stroke-dasharray: none;
}
/* Label backgrounds (side labels) */
.torso-label-bg {
fill: #f0f3f8;
stroke: #d0d8e4;
stroke-width: 1;
cursor: pointer;
transition: fill 0.2s, stroke 0.2s;
}
.torso-region:hover .torso-label-bg {
fill: #dce4f0;
stroke: var(--color-primary);
}
.torso-region.active .torso-label-bg {
fill: var(--color-accent);
stroke: var(--color-accent);
}
/* Label text (side labels) */
.torso-label {
font-size: 10px;
font-family: var(--font-sans);
font-weight: 600;
fill: var(--color-primary);
cursor: pointer;
pointer-events: none;
}
.torso-region.active .torso-label {
fill: #fff;
}
/* Count badges */
.torso-count {
font-size: 9px;
font-family: var(--font-sans);
font-weight: 700;
fill: var(--color-text-muted);
pointer-events: none;
}
.torso-region.active .torso-count {
fill: #fff;
}
/* Labels placed directly on the body */
.torso-body-label {
font-size: 10px;
font-family: var(--font-sans);
font-weight: 600;
fill: var(--color-primary);
pointer-events: none;
opacity: 0.7;
}
.torso-body-count {
font-size: 9px;
opacity: 0.6;
}
.torso-region:hover .torso-body-label,
.torso-region:hover .torso-body-count {
opacity: 1;
}
.torso-region.active .torso-body-label {
fill: var(--color-accent-light);
opacity: 1;
}
.torso-region.active .torso-body-count {
fill: var(--color-accent);
opacity: 1;
}
/* Focus ring for keyboard navigation */
.torso-region:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* Mobile dropdown fallback */
.torso-mobile-select {
margin-top: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.torso-mobile-select select {
width: 100%;
padding: 0.5rem;
font-size: 0.9rem;
border: 2px solid var(--color-border);
border-radius: var(--radius-sm);
font-family: var(--font-sans);
}
/* Legacy sidebar-link styles (kept for compatibility) */
.sidebar-link {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0.75rem;
min-height: 48px;
text-decoration: none;
color: var(--color-text);
border-radius: var(--radius-sm);
font-size: 0.9rem;
transition: background 0.15s;
}
.sidebar-link:hover { background: var(--color-bg); text-decoration: none; }
.sidebar-link.active { background: var(--color-primary); color: #fff; }
.sidebar-link.active .sidebar-count { color: var(--color-accent); }
.sidebar-name { flex: 1; }
.sidebar-count-text {
font-size: 0.8rem;
color: var(--color-text-muted);
margin-left: 0.5rem;
white-space: nowrap;
}
/* Browse Main Content */
.browse-main { min-width: 0; }
.browse-header { margin-bottom: 1rem; }
.browse-header h2 { color: var(--color-primary); font-size: 1.5rem; }
.browse-header p { color: var(--color-text-muted); margin-top: 0.25rem; }
.browse-filter { margin-bottom: 1rem; }
.browse-filter input {
width: 100%;
padding: 0.6rem 1rem;
font-size: 1rem;
font-family: var(--font-sans);
border: 2px solid var(--color-border);
border-radius: var(--radius-sm);
outline: none;
transition: border-color 0.2s;
}
.browse-filter input:focus { border-color: var(--color-primary); }
.browse-prompt {
color: var(--color-text-muted);
font-style: italic;
padding: 2rem 0;
text-align: center;
}
.loading-text {
color: var(--color-text-muted);
font-style: italic;
}
/* ── Code Cards in Browse ── */
.code-card {
display: block;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 1rem 1.25rem;
margin-bottom: 0.6rem;
text-decoration: none;
color: inherit;
transition: box-shadow 0.2s, border-color 0.2s;
}
.code-card:hover {
box-shadow: var(--shadow-md);
border-color: var(--color-primary);
text-decoration: none;
}
.code-card-header {
display: flex;
gap: 0.75rem;
align-items: baseline;
flex-wrap: wrap;
}
.code-card-dc {
font-weight: 700;
color: var(--color-primary);
font-size: 1.05rem;
white-space: nowrap;
}
.code-card-name {
color: var(--color-text);
font-size: 1rem;
}
.code-card-summary {
margin-top: 0.5rem;
font-size: 0.88rem;
color: var(--color-text-muted);
line-height: 1.5;
}
/* ── PACT Act Badge ── */
.pact-badge {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 0.15rem 0.5rem;
border-radius: 4px;
vertical-align: middle;
margin-left: 0.5rem;
}
.pact-badge-burn-pit { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
.pact-badge-agent-orange { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }
.pact-badge-radiation { background: #f3e5f5; color: #6a1b9a; border: 1px solid #ce93d8; }
.pact-badge-gulf-war { background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; }
.pact-badge-camp-lejeune { background: #e0f2f1; color: #00695c; border: 1px solid #80cbc4; }
/* ── PACT Act Landing Page ── */
.pact-hero {
background: var(--color-surface);
border: 2px solid var(--color-accent);
border-radius: var(--radius-md);
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.pact-hero h1,
.pact-hero h2 {
color: var(--color-primary);
font-size: 1.6rem;
margin-bottom: 0.75rem;
}
.pact-hero p {
color: var(--color-text);
font-size: 1.05rem;
line-height: 1.7;
}
.pact-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-bottom: 1.5rem;
}
.pact-stat {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 1rem;
text-align: center;
}
.pact-stat-number {
font-size: 2rem;
font-weight: 700;
color: var(--color-primary);
}
.pact-stat-label {
font-size: 0.85rem;
color: var(--color-text-muted);
margin-top: 0.25rem;
}
.pact-filter { margin-bottom: 1.5rem; }
.pact-filter label {
display: block;
color: var(--color-primary);
font-weight: 600;
margin-bottom: 0.5rem;
}
.pact-filter-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.pact-filter-btn {
padding: 0.5rem 1rem;
min-height: 48px;
border: 2px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
cursor: pointer;
font-size: 0.9rem;
font-family: var(--font-sans);
font-weight: 500;
transition: all 0.2s;
}
.pact-filter-btn:hover { border-color: var(--color-primary); }
.pact-filter-btn.active {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
:root[data-theme="dark"] .pact-filter-btn.active { background: #1f4a85; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .pact-filter-btn.active { background: #1f4a85; }
}
.pact-filter-btn.burn-pit.active { background: #c62828; border-color: #c62828; }
.pact-filter-btn.agent-orange.active { background: #e65100; border-color: #e65100; }
.pact-filter-btn.radiation.active { background: #6a1b9a; border-color: #6a1b9a; }
.pact-filter-btn.gulf-war.active { background: #1565c0; border-color: #1565c0; }
.pact-category { margin-bottom: 2rem; }
.pact-category-header {
padding: 1rem 1.25rem;
border-radius: var(--radius-md) var(--radius-md) 0 0;
color: #fff;
}
.pact-category-header h3 { font-size: 1.2rem; margin-bottom: 0.25rem; }
.pact-category-header p { font-size: 0.9rem; opacity: 0.9; }
.pact-tag-burn-pit { background: #c62828; }
.pact-tag-agent-orange { background: #e65100; }
.pact-tag-radiation { background: #6a1b9a; }
.pact-tag-gulf-war { background: #1565c0; }
.pact-conditions-list {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-top: none;
border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.pact-condition-card {
padding: 0.75rem 1.25rem;
border-bottom: 2px solid var(--color-border);
}
.pact-condition-card:last-child { border-bottom: none; }
.pact-condition-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.pact-condition-name {
font-weight: 600;
color: var(--color-text);
}
.pact-dc-link {
font-weight: 700;
color: var(--color-primary);
text-decoration: none;
font-size: 0.9rem;
padding: 0.4rem 0.6rem;
min-height: 48px;
display: inline-flex;
align-items: center;
background: var(--color-bg);
border-radius: 4px;
white-space: nowrap;
}
.pact-dc-link:hover { background: var(--color-border); text-decoration: none; }
.pact-no-dc {
font-size: 0.85rem;
color: var(--color-text-muted);
font-style: italic;
}
.pact-condition-notes {
font-size: 0.85rem;
color: var(--color-text-muted);
margin-top: 0.25rem;
}
.pact-condition-period {
font-size: 0.82rem;
color: var(--color-text-muted);
margin-top: 0.25rem;
}
/* ── PACT Act grant rate badges ── */
.pact-grant-rate {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.35rem;
}
.pact-grant-badge {
font-size: 0.78rem;
font-weight: 700;
padding: 0.2rem 0.6rem;
border-radius: 3px;
color: #fff;
}
.pact-grant-badge.grant-high { background: #2e7d32; }
.pact-grant-badge.grant-mid { background: #f57f17; }
.pact-grant-badge.grant-low { background: #c62828; }
.pact-grant-detail {
font-size: 0.78rem;
color: var(--color-text-muted);
}
/* ── PACT Act stats source ── */
.pact-stats-source {
text-align: center;
font-size: 0.78rem;
color: var(--color-text-muted);
margin-top: 0.5rem;
margin-bottom: 0;
}
/* ── PACT Act OIG Findings section ── */
.pact-oig-section {
margin-bottom: 1.5rem;
background: #fff3e0;
border: 2px solid #e65100;
}
.pact-oig-section .collapsible-toggle {
color: #bf360c;
border-bottom-color: #e65100;
}
.pact-oig-section .toggle-icon {
background: rgba(230, 81, 0, 0.1);
border-color: #e65100;
color: #bf360c;
}
.pact-oig-section .collapsible-toggle:hover .toggle-icon {
background: rgba(230, 81, 0, 0.2);
}
.pact-oig-intro {
font-size: 0.92rem;
color: #4e342e;
margin-bottom: 1rem;
}
.pact-oig-cards {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1rem;
}
.pact-oig-card {
background: var(--color-surface);
border: 1px solid #ffcc80;
border-radius: var(--radius-sm);
padding: 0.75rem 1rem;
}
.pact-oig-stat {
font-weight: 700;
font-size: 0.95rem;
color: #bf360c;
margin-bottom: 0.25rem;
}
.pact-oig-detail {
font-size: 0.85rem;
color: var(--color-text-muted);
line-height: 1.4;
margin-bottom: 0.25rem;
}
.pact-oig-source {
font-size: 0.75rem;
color: #8d6e63;
font-style: italic;
}
.pact-oig-cta {
font-size: 0.9rem;
color: #4e342e;
}
.pact-oig-cta a {
color: var(--color-primary);
font-weight: 600;
}
/* ── BVA Insights page crosslink to PACT TERA data ── */
.bva-crosslink {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
color: #fff;
border-radius: 12px;
padding: 1.5rem;
margin: 2rem 0;
}
.bva-crosslink h2 {
color: #fff;
font-size: 1.25rem;
margin: 0 0 0.5rem;
}
.bva-crosslink p {
margin: 0 0 0.6rem;
line-height: 1.55;
font-size: 0.95rem;
}
.bva-crosslink-cta {
color: #fff;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.bva-crosslink-cta:hover,
.bva-crosslink-cta:focus-visible {
text-decoration: none;
outline: 2px solid #fff;
outline-offset: 3px;
border-radius: 3px;
}
.bva-crosslink-head {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.4rem;
}
.bva-crosslink-head h2 {
margin: 0;
}
.bva-crosslink-tag {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 0.2rem 0.5rem;
border-radius: 3px;
background: #d4880a;
color: #fff;
}
.bva-crosslink-stats {
margin: 0.75rem 0;
padding-left: 1.25rem;
font-size: 0.9rem;
line-height: 1.55;
}
.bva-crosslink-stats li {
margin-bottom: 0.3rem;
}
:root[data-theme="dark"] .bva-crosslink { background: rgba(122,179,255,.10); color: var(--color-text); border: 1px solid rgba(122,179,255,.20); }
:root[data-theme="dark"] .bva-crosslink h2 { color: var(--color-text-strong); }
:root[data-theme="dark"] .bva-crosslink-cta { color: var(--color-primary-light); }
:root[data-theme="dark"] .ecfr-source-badge {
border-color: rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.06);
color: var(--color-accent-light);
}
:root[data-theme="dark"] .ecfr-source-badge:hover,
:root[data-theme="dark"] .ecfr-source-badge:focus-visible {
background: rgba(255, 255, 255, 0.12);
border-color: var(--color-accent-light);
}
:root[data-theme="dark"] .ecfr-source-badge-icon {
color: var(--color-accent-light);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .bva-crosslink { background: rgba(122,179,255,.10); color: var(--color-text); border: 1px solid rgba(122,179,255,.20); }
:root:not([data-theme="light"]) .bva-crosslink h2 { color: var(--color-text-strong); }
:root:not([data-theme="light"]) .bva-crosslink-cta { color: var(--color-primary-light); }
:root:not([data-theme="light"]) .ecfr-source-badge {
border-color: rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.06);
color: var(--color-accent-light);
}
:root:not([data-theme="light"]) .ecfr-source-badge:hover,
:root:not([data-theme="light"]) .ecfr-source-badge:focus-visible {
background: rgba(255, 255, 255, 0.12);
border-color: var(--color-accent-light);
}
:root:not([data-theme="light"]) .ecfr-source-badge-icon {
color: var(--color-accent-light);
}
}
@media (max-width: 640px) {
.bva-crosslink { padding: 1.1rem; }
.bva-crosslink h2 { font-size: 1.1rem; }
.bva-crosslink-stats { font-size: 0.85rem; }
}
/* Top-of-page crosslink pills on toxic-exposure-appeals */
.tera-crosslinks {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0 0 1.5rem;
}
.tera-crosslink-pill {
display: inline-block;
padding: 0.5rem 0.9rem;
border-radius: 999px;
background: rgba(26, 58, 107, 0.08);
color: var(--color-primary);
font-size: 0.9rem;
font-weight: 500;
text-decoration: none;
border: 1px solid transparent;
min-height: 48px;
display: inline-flex;
align-items: center;
}
.tera-crosslink-pill:hover,
.tera-crosslink-pill:focus-visible {
background: rgba(26, 58, 107, 0.14);
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Page CTA at bottom of embedded tab on PACT page */
.bva-page-cta {
margin-top: 1.25rem;
padding: 0.9rem 1.1rem;
background: #f0f5ff;
color: var(--color-primary);
border-radius: 6px;
font-size: 0.95rem;
text-align: center;
}
.bva-page-cta a {
color: var(--color-primary);
font-weight: 600;
}
:root[data-theme="dark"] .bva-page-cta {
background: rgba(122, 179, 255, .10);
color: var(--color-text);
border: 1px solid rgba(122, 179, 255, .20);
}
:root[data-theme="dark"] .bva-page-cta a { color: var(--color-primary-light); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .bva-page-cta {
background: rgba(122, 179, 255, .10);
color: var(--color-text);
border: 1px solid rgba(122, 179, 255, .20);
}
:root:not([data-theme="light"]) .bva-page-cta a { color: var(--color-primary-light); }
}
/* ── TERA Evidence section ── */
.bva-evidence-section {
margin-top: 1.25rem;
}
.bva-lift-up {
color: #1e7a3c;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.bva-lift-down {
color: #b31a1a;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.bva-takeaways {
margin: 0.6rem 0 0;
padding-left: 1.25rem;
line-height: 1.6;
}
.bva-takeaways li {
margin-bottom: 0.4rem;
}
/* ── BVA Appeals Insights (TERA) ── */
.bva-insights-section {
background: var(--color-surface);
border: 1px solid var(--color-border, #e0e0e0);
border-radius: 12px;
padding: 1.5rem;
margin-top: 1.5rem;
}
.bva-insights-section h3 {
color: var(--color-primary);
font-size: 1.4rem;
margin: 0 0 0.75rem;
}
.bva-insights-section h4 {
color: var(--color-primary);
font-size: 1.1rem;
margin: 1.75rem 0 0.5rem;
}
.bva-insights-lede {
font-size: 1rem;
color: #333;
margin: 0 0 1rem;
line-height: 1.55;
}
.bva-subcopy {
font-size: 0.9rem;
color: #555;
margin: 0 0 0.75rem;
line-height: 1.5;
}
.bva-callout {
background: #f5f8fc;
border-left: 4px solid var(--color-primary);
padding: 0.9rem 1.1rem;
margin: 1rem 0;
border-radius: 4px;
font-size: 0.95rem;
line-height: 1.55;
color: #1d2b3f;
}
.bva-callout-warning {
background: #fff8e1;
border-left-color: #f57c00;
color: #4a2f00;
}
.bva-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0.5rem 0 1rem;
}
.bva-table {
width: 100%;
border-collapse: collapse;
font-size: 0.92rem;
min-width: 500px;
}
.bva-table th,
.bva-table td {
padding: 0.6rem 0.75rem;
text-align: left;
border-bottom: 1px solid #e6e6e6;
}
.bva-table th {
background: #f5f7fa;
font-weight: 600;
color: var(--color-primary);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.3px;
white-space: nowrap;
}
.bva-table tbody tr:hover {
background: #fafcff;
}
.bva-table td:nth-child(n+3) {
text-align: right;
font-variant-numeric: tabular-nums;
}
.bva-table td:first-child {
text-align: left;
}
.bva-pres-mark {
color: #d4880a;
font-size: 1.1rem;
font-weight: 700;
display: inline-block;
line-height: 1;
}
.bva-methodology {
font-size: 0.82rem;
color: #666;
line-height: 1.55;
margin: 1.25rem 0 0;
padding-top: 1rem;
border-top: 1px solid #eee;
font-style: italic;
}
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 640px) {
.bva-insights-section { padding: 1rem; }
.bva-insights-section h3 { font-size: 1.2rem; }
.bva-insights-section h4 { font-size: 1rem; }
.bva-table { font-size: 0.85rem; }
.bva-table th, .bva-table td { padding: 0.5rem 0.5rem; }
}
/* ── BVA Insights, dark-mode overrides ──
The section was originally designed light-only with hardcoded
surfaces and text. These rules flip the surface, text, table
chrome, callouts, and stat tiles to dark-mode tokens. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .bva-insights-section {
background: var(--color-surface);
border-color: var(--color-border);
}
:root:not([data-theme="light"]) .bva-insights-lede { color: var(--color-text); }
:root:not([data-theme="light"]) .bva-subcopy,
:root:not([data-theme="light"]) .bva-methodology { color: var(--color-text-muted); }
:root:not([data-theme="light"]) .bva-methodology { border-top-color: var(--color-border); }
:root:not([data-theme="light"]) .bva-table th,
:root:not([data-theme="light"]) .bva-table td { border-bottom-color: var(--color-border); }
:root:not([data-theme="light"]) .bva-table th {
background: rgba(122, 179, 255, .08);
color: var(--color-primary-light);
}
:root:not([data-theme="light"]) .bva-table tbody tr:hover { background: rgba(122, 179, 255, .06); }
:root:not([data-theme="light"]) .bva-callout {
background: rgba(122, 179, 255, .08);
color: var(--color-text);
}
:root:not([data-theme="light"]) .bva-callout-warning {
background: rgba(245, 124, 0, .12);
color: var(--color-text);
}
:root:not([data-theme="light"]) .bva-stat {
background: rgba(122, 179, 255, .10) !important;
color: var(--color-text);
}
:root:not([data-theme="light"]) .bva-stat > div:first-child { color: var(--color-primary-light) !important; }
:root:not([data-theme="light"]) .bva-stat > div:last-child { color: var(--color-text-muted) !important; }
:root:not([data-theme="light"]) .bva-lift-up { color: #6fd28a; }
:root:not([data-theme="light"]) .bva-lift-down { color: #ff7a7a; }
:root:not([data-theme="light"]) .bva-pres-mark { color: #f5c66f; }
}
:root[data-theme="dark"] .bva-insights-section {
background: var(--color-surface);
border-color: var(--color-border);
}
:root[data-theme="dark"] .bva-insights-lede { color: var(--color-text); }
:root[data-theme="dark"] .bva-subcopy,
:root[data-theme="dark"] .bva-methodology { color: var(--color-text-muted); }
:root[data-theme="dark"] .bva-methodology { border-top-color: var(--color-border); }
:root[data-theme="dark"] .bva-table th,
:root[data-theme="dark"] .bva-table td { border-bottom-color: var(--color-border); }
:root[data-theme="dark"] .bva-table th {
background: rgba(122, 179, 255, .08);
color: var(--color-primary-light);
}
:root[data-theme="dark"] .bva-table tbody tr:hover { background: rgba(122, 179, 255, .06); }
:root[data-theme="dark"] .bva-callout {
background: rgba(122, 179, 255, .08);
color: var(--color-text);
}
:root[data-theme="dark"] .bva-callout-warning {
background: rgba(245, 124, 0, .12);
color: var(--color-text);
}
:root[data-theme="dark"] .bva-stat {
background: rgba(122, 179, 255, .10) !important;
color: var(--color-text);
}
:root[data-theme="dark"] .bva-stat > div:first-child { color: var(--color-primary-light) !important; }
:root[data-theme="dark"] .bva-stat > div:last-child { color: var(--color-text-muted) !important; }
:root[data-theme="dark"] .bva-lift-up { color: #6fd28a; }
:root[data-theme="dark"] .bva-lift-down { color: #ff7a7a; }
:root[data-theme="dark"] .bva-pres-mark { color: #f5c66f; }
/* ── Top Conditions Page ── */
.top-hero {
text-align: center;
margin-bottom: 2rem;
}
.top-hero h1 {
font-size: 1.8rem;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.top-hero p {
font-size: 1rem;
color: var(--color-text-muted);
max-width: 750px;
margin: 0 auto;
line-height: 1.6;
}
.top-conditions-table {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.top-condition-row {
display: flex;
gap: 0.75rem;
align-items: flex-start;
padding: 0.6rem 0;
border-bottom: 1px solid #f0f0f0;
}
.top-condition-row:last-child { border-bottom: none; }
.top-rank {
font-size: 1.1rem;
font-weight: 800;
color: var(--color-primary);
min-width: 2.5rem;
text-align: center;
padding-top: 0.1rem;
}
.top-info { flex: 1; }
.top-name-line {
display: flex;
align-items: baseline;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0.3rem;
}
.top-condition-link {
font-weight: 600;
color: var(--color-primary);
text-decoration: none;
font-size: 0.95rem;
}
.top-condition-link:hover { text-decoration: underline; }
.top-dc {
font-size: 0.78rem;
color: var(--color-text-muted);
}
.top-gao-rate {
font-size: 0.72rem;
font-weight: 700;
color: #2e7d32;
background: #e8f5e9;
padding: 0.15rem 0.5rem;
border-radius: 3px;
}
.top-bar-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.top-bar-track {
flex: 1;
height: 14px;
background: #e8eaf6;
border-radius: 3px;
overflow: hidden;
}
.top-bar-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s;
}
.top-bar-fill.top-bar-new {
background: #2e7d32;
}
.top-bar-count {
font-size: 0.78rem;
font-weight: 600;
color: var(--color-text-muted);
white-space: nowrap;
min-width: 85px;
}
/* Body system grid */
.top-system-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
.top-system-card {
background: #f8f9fc;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 1rem;
}
.top-system-card h3 {
font-size: 0.95rem;
color: var(--color-primary);
margin-bottom: 0.15rem;
}
.top-system-total {
font-size: 0.78rem;
color: var(--color-text-muted);
font-weight: 600;
margin-bottom: 0.5rem;
}
.top-system-list {
padding-left: 1.25rem;
margin: 0;
}
.top-system-list li {
font-size: 0.85rem;
color: var(--color-text);
padding: 0.15rem 0;
}
/* Takeaway cards */
.top-takeaways {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.top-takeaway {
padding: 0.75rem 1rem;
background: #f8f9fc;
border-left: 3px solid var(--color-primary);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
font-size: 0.9rem;
line-height: 1.5;
}
.top-takeaway strong {
color: var(--color-primary);
}
/* Dark mode overrides for Top Conditions page */
:root[data-theme="dark"] .top-condition-row { border-bottom-color: var(--color-border); }
:root[data-theme="dark"] .top-gao-rate {
background: rgba(110, 210, 138, .12);
color: #6fd28a;
}
:root[data-theme="dark"] .top-bar-track { background: rgba(122, 179, 255, .12); }
:root[data-theme="dark"] .top-bar-fill { background: var(--color-primary-light); }
:root[data-theme="dark"] .top-bar-fill.top-bar-new { background: #6fd28a; }
:root[data-theme="dark"] .top-system-card {
background: var(--color-surface);
border-color: var(--color-border);
}
:root[data-theme="dark"] .top-system-card h3 { color: var(--color-primary-light); }
:root[data-theme="dark"] .top-system-list li { color: var(--color-text); }
:root[data-theme="dark"] .top-takeaway {
background: var(--color-surface);
border-left-color: var(--color-primary-light);
color: var(--color-text);
}
:root[data-theme="dark"] .top-takeaway strong { color: var(--color-primary-light); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .top-condition-row { border-bottom-color: var(--color-border); }
:root:not([data-theme="light"]) .top-gao-rate {
background: rgba(110, 210, 138, .12);
color: #6fd28a;
}
:root:not([data-theme="light"]) .top-bar-track { background: rgba(122, 179, 255, .12); }
:root:not([data-theme="light"]) .top-bar-fill { background: var(--color-primary-light); }
:root:not([data-theme="light"]) .top-bar-fill.top-bar-new { background: #6fd28a; }
:root:not([data-theme="light"]) .top-system-card {
background: var(--color-surface);
border-color: var(--color-border);
}
:root:not([data-theme="light"]) .top-system-card h3 { color: var(--color-primary-light); }
:root:not([data-theme="light"]) .top-system-list li { color: var(--color-text); }
:root:not([data-theme="light"]) .top-takeaway {
background: var(--color-surface);
border-left-color: var(--color-primary-light);
color: var(--color-text);
}
:root:not([data-theme="light"]) .top-takeaway strong { color: var(--color-primary-light); }
}
/* ── Top Conditions link card (on /dc/ page) ── */
.top-link-card {
display: block;
background: linear-gradient(135deg, #1a237e, #283593);
color: #fff;
border-radius: var(--radius-md);
padding: 1.25rem;
text-decoration: none;
margin-bottom: 1rem;
transition: box-shadow 0.2s;
}
.top-link-card:hover { box-shadow: var(--shadow-lg); text-decoration: none; }
.top-link-card h3 { color: var(--color-accent); font-size: 1.1rem; margin-bottom: 0.25rem; }
.top-link-card p { color: rgba(255,255,255,.75); font-size: 0.95rem; margin-bottom: 0.75rem; }
.top-link-cta {
display: inline-block;
font-size: 0.9rem;
font-weight: 600;
color: #1a237e;
background: var(--color-accent);
padding: 0.5rem 1.25rem;
border-radius: var(--radius-sm);
transition: all 0.2s ease;
}
.top-link-card:hover .top-link-cta { background: #fff; }
/* ── BVA Insights link card (on /dc/ page) ── */
.bva-link-card {
display: block;
background: linear-gradient(135deg, #1a237e, #283593);
color: #fff;
border-radius: var(--radius-md);
padding: 1.25rem;
text-decoration: none;
margin-bottom: 2rem;
transition: box-shadow 0.2s;
}
.bva-link-card:hover { box-shadow: var(--shadow-lg); text-decoration: none; }
.bva-link-card h3 { color: var(--color-accent); font-size: 1.1rem; margin-bottom: 0.25rem; }
.bva-link-card p { color: rgba(255,255,255,.75); font-size: 0.95rem; margin-bottom: 0.75rem; }
.bva-link-cta {
display: inline-block;
font-size: 0.9rem;
font-weight: 600;
color: #1a237e;
background: var(--color-accent);
padding: 0.5rem 1.25rem;
border-radius: var(--radius-sm);
transition: all 0.2s ease;
}
.bva-link-card:hover .bva-link-cta { background: #fff; }
/* ── PACT Act section, special styling (uses generic collapsible) ── */
.pact-act-section {
background: #fff8e1;
border: 2px solid var(--color-accent);
}
.pact-act-section .collapsible-toggle {
color: #b8860b;
border-bottom-color: var(--color-accent);
}
.pact-act-section .toggle-icon {
background: rgba(184, 134, 11, 0.15);
border-color: #b8860b;
color: #b8860b;
}
.pact-act-section .collapsible-toggle:hover .toggle-icon { background: rgba(184, 134, 11, 0.25); }
.pact-act-entry {
padding: 0.5rem 0;
border-bottom: 1px solid #f0e0a0;
}
.pact-act-entry:last-child { border-bottom: none; }
.pact-act-entry .pact-cat-label { font-weight: 600; }
.pact-act-entry .pact-period { font-size: 0.88rem; color: var(--color-text-muted); margin-top: 0.25rem; }
.pact-act-entry .pact-notes { font-size: 0.88rem; color: var(--color-text-muted); font-style: italic; }
/* ── Generic collapsible sections (C&P Exam, Evidence to Bring) ── */
.collapsible-toggle {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
min-height: 48px;
gap: 1rem;
}
.collapsible-toggle .collapsible-title { flex: 1 1 auto; min-width: 0; }
.collapsible-toggle:hover { opacity: 0.8; }
.collapsible-toggle .toggle-icon {
font-size: 0.85rem;
padding: 0.3rem 0.75rem;
background: rgba(0, 51, 102, 0.08);
border: 1px solid var(--color-primary);
border-radius: 4px;
color: var(--color-primary);
white-space: nowrap;
transition: background 0.2s;
}
.collapsible-toggle:hover .toggle-icon { background: rgba(0, 51, 102, 0.15); }
.collapsible-toggle .toggle-icon::after {
content: ' \25BC';
font-size: 0.7rem;
transition: transform 0.2s;
display: inline-block;
}
.collapsible-section:not(.open) .toggle-icon::after {
transform: rotate(-90deg);
}
.collapsible-section:not(.open) .collapsible-toggle {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.collapsible-body {
display: none;
padding-top: 0;
}
.collapsible-section.open .collapsible-body {
display: block;
padding-top: 0.75rem;
}
/* ── Bullet list styling for exam/evidence tips ── */
.tip-list {
list-style: none;
padding: 0;
margin: 0;
}
.tip-list li {
position: relative;
padding: 0.5rem 0 0.5rem 1.5rem;
line-height: 1.55;
border-bottom: 1px solid #f0f0f0;
}
.tip-list li:last-child {
border-bottom: none;
}
.tip-list li::before {
content: '\2022';
position: absolute;
left: 0.25rem;
color: var(--color-primary);
font-size: 1.2rem;
font-weight: bold;
line-height: 1.55;
}
/* ── Homepage PACT Act link card ── */
.pact-link-card {
display: block;
background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-light));
color: #fff;
border-radius: var(--radius-md);
padding: 1.25rem;
text-decoration: none;
margin-bottom: 2rem;
transition: box-shadow 0.2s;
}
.pact-link-card:hover { box-shadow: var(--shadow-lg); text-decoration: none; }
.pact-link-card:hover .pact-link-cta { background: #fff; color: var(--color-primary); }
.pact-link-card h3 { color: var(--color-accent); font-size: 1.1rem; margin-bottom: 0.25rem; }
.pact-link-card p { color: rgba(255,255,255,.75); font-size: 0.95rem; margin-bottom: 0.75rem; }
:root[data-theme="dark"] .pact-link-card { background: rgba(122,179,255,.10); color: var(--color-text); }
:root[data-theme="dark"] .pact-link-card p { color: var(--color-text-muted); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .pact-link-card { background: rgba(122,179,255,.10); color: var(--color-text); }
:root:not([data-theme="light"]) .pact-link-card p { color: var(--color-text-muted); }
}
.pact-link-cta {
display: inline-block;
font-size: 0.9rem;
font-weight: 600;
color: var(--color-on-accent);
background: var(--color-accent);
padding: 0.5rem 1.25rem;
border-radius: var(--radius-sm);
transition: all 0.2s ease;
}
/* ── What the Data Shows, Insights Section ── */
.insights-section {
border: 2px solid var(--color-primary);
background: #f8f9fc;
}
.insights-section .collapsible-toggle {
color: var(--color-primary);
}
.insights-intro {
font-size: 0.85rem;
color: var(--color-text-muted);
margin-bottom: 1rem;
line-height: 1.5;
}
.insights-subsection {
margin-bottom: 1.25rem;
padding-bottom: 1rem;
border-bottom: 1px solid #e0e0e0;
}
.insights-subsection:last-of-type {
border-bottom: none;
margin-bottom: 0.5rem;
}
.insights-subhead {
font-size: 1rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.insights-list {
list-style: none;
padding: 0;
margin: 0;
}
.insights-list li {
position: relative;
padding: 0.4rem 0 0.4rem 1.25rem;
font-size: 0.9rem;
line-height: 1.55;
color: var(--color-text);
}
.insights-list li::before {
content: '\2022';
position: absolute;
left: 0.15rem;
color: var(--color-primary);
font-weight: bold;
}
.insights-list li strong {
color: var(--color-primary-dark);
}
.insights-source {
font-size: 0.78rem;
color: var(--color-text-muted);
font-style: italic;
}
.insights-note {
font-size: 0.8rem;
color: var(--color-text-muted);
margin-top: 0.5rem;
line-height: 1.4;
}
.insights-note a {
color: var(--color-primary);
font-weight: 600;
}
/* Nexus-letter-lift stat: boxed callout so this high-value number stands out
from the surrounding insights. Border + primary left-accent + a theme-neutral
tint (works in light and dark; no light-only background). The compound
selector beats .insights-subsection:last-of-type so the full border survives
even when this is the last subsection. */
.insights-subsection.dc-nexus-lift {
border: 1px solid var(--color-border-strong, var(--color-border));
border-left: 4px solid var(--color-primary);
border-radius: var(--radius-md, 8px);
background: rgba(127, 127, 127, 0.06);
padding: 0.9rem 1.1rem;
margin: 1.1rem 0 1.25rem;
}
.dc-nexus-lift .insights-subhead { margin-bottom: 0.4rem; }
/* Prominent CTA to the Cancer Residuals Network on the cancer guide. Whole box
is the link; inverts to filled primary on hover/focus. Theme-safe tokens. */
.cancer-network-cta {
display: flex;
align-items: center;
gap: 0.9rem;
margin: 1rem 0 1.5rem;
padding: 1rem 1.15rem;
border: 2px solid var(--color-primary);
border-radius: var(--radius-md, 8px);
background: rgba(127, 127, 127, 0.06);
color: var(--color-text);
text-decoration: none;
}
.cancer-network-cta:hover,
.cancer-network-cta:focus-visible { background: var(--color-primary); color: #fff; outline: none; }
.cancer-network-cta:focus-visible { box-shadow: 0 0 0 3px var(--color-primary); }
.cancer-network-cta-icon { font-size: 1.7rem; line-height: 1; }
.cancer-network-cta-text { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.9rem; line-height: 1.45; }
.cancer-network-cta-text strong { font-size: 1.05rem; color: var(--color-primary); }
.cancer-network-cta-go { margin-left: auto; font-size: 1.6rem; font-weight: 700; color: var(--color-primary); }
.cancer-network-cta:hover .cancer-network-cta-text strong,
.cancer-network-cta:hover .cancer-network-cta-go,
.cancer-network-cta:focus-visible .cancer-network-cta-text strong,
.cancer-network-cta:focus-visible .cancer-network-cta-go { color: #fff; }
.insights-oig .insights-list li strong {
color: #bf360c;
}
.insights-disclaimer {
font-size: 0.8rem;
color: var(--color-text-muted);
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid #e0e0e0;
line-height: 1.4;
}
/* ── Evidence Type Effectiveness table ── */
.et-table-wrap { overflow-x: auto; }
.et-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-top: 0.5rem; }
.et-table th {
text-align: left; padding: 0.5rem; font-weight: 600; color: var(--color-primary);
border-bottom: 2px solid var(--color-primary);
}
.et-table td { padding: 0.5rem; border-bottom: 1px solid #e0e0e0; }
.et-table tbody tr:hover { background: #f8f9fc; }
.et-col-num { text-align: center; }
.et-grants { color: #1b5e20; font-weight: 600; }
.et-denials { color: #c62828; }
.et-rate-badge {
display: inline-block; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.85rem;
}
.et-rate-high { background: #e8f5e9; color: #1b5e20; }
.et-rate-mid { background: #fff3e0; color: #e65100; }
.et-rate-low { background: #ffebee; color: #c62828; }
.et-takeaway {
margin-top: 0.75rem; padding: 0.65rem 0.85rem; background: #e8f5e9;
border-left: 3px solid #2e7d32; border-radius: 0 4px 4px 0;
font-size: 0.88rem; line-height: 1.6;
}
.et-takeaway strong { color: #1b5e20; }
/* ── What Evidence Wins & Why Claims Are Denied sections ── */
.evidence-wins-section .collapsible-toggle {
color: #1b5e20;
border-bottom-color: #c8e6c9;
}
.evidence-wins-section .collapsible-toggle .toggle-icon { background: rgba(27, 94, 32, 0.1); }
.evidence-wins-section .collapsible-toggle:hover .toggle-icon { background: rgba(27, 94, 32, 0.2); }
.denial-factors-section .collapsible-toggle {
color: #b71c1c;
border-bottom-color: #ffcdd2;
}
.denial-factors-section .collapsible-toggle .toggle-icon { background: rgba(183, 28, 28, 0.1); }
.denial-factors-section .collapsible-toggle:hover .toggle-icon { background: rgba(183, 28, 28, 0.2); }
.evidence-intro {
color: var(--color-text-secondary, #555);
margin-bottom: 1rem;
line-height: 1.6;
}
.evidence-group {
margin-bottom: 1.25rem;
}
.evidence-group:last-of-type { margin-bottom: 0.5rem; }
.evidence-group-heading {
font-size: 0.95rem;
font-weight: 600;
color: var(--color-primary);
margin: 0 0 0.25rem 0;
padding: 0;
border: none;
}
.evidence-group-note {
font-size: 0.82rem;
color: var(--color-text-muted, #888);
margin: 0 0 0.5rem 0;
}
.evidence-list {
list-style: none;
padding: 0;
margin: 0;
}
.evidence-list li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
padding: 0.5rem 0.75rem;
border-left: 3px solid #c8e6c9;
margin-bottom: 0.4rem;
background: #f9fdf9;
border-radius: 0 4px 4px 0;
line-height: 1.5;
}
.denial-list li {
border-left-color: #ffcdd2;
background: #fff8f8;
}
.evidence-text {
flex: 1;
font-size: 0.92rem;
color: var(--color-text, #333);
}
.evidence-text::first-letter {
text-transform: uppercase;
}
.evidence-count {
flex-shrink: 0;
font-size: 0.8rem;
color: var(--color-text-muted, #888);
white-space: nowrap;
font-weight: 500;
}
.denial-tip {
margin-top: 1rem;
padding: 0.75rem 1rem;
background: #fff3e0;
border-left: 3px solid #f57c00;
border-radius: 0 4px 4px 0;
font-size: 0.9rem;
line-height: 1.5;
}
.denial-tip strong { color: #e65100; }
.evidence-disclaimer {
font-size: 0.8rem;
color: var(--color-text-muted);
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid #e0e0e0;
line-height: 1.4;
}
/* ── BVA Insights Page ── */
.bva-hero {
text-align: center;
margin-bottom: 2rem;
}
.bva-hero h1 {
font-size: 1.8rem;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.bva-hero p {
font-size: 1rem;
color: var(--color-text-muted);
max-width: 750px;
margin: 0 auto;
line-height: 1.6;
}
.bva-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.bva-stat-card {
background: var(--color-surface);
border: 2px solid var(--color-border);
border-radius: var(--radius-md);
padding: 1.25rem;
text-align: center;
}
.bva-stat-number {
font-size: 1.8rem;
font-weight: 800;
color: var(--color-primary);
}
.bva-stat-label {
font-size: 0.82rem;
color: var(--color-text-muted);
margin-top: 0.2rem;
}
/* Headline finding card */
.bva-headline-card {
background: linear-gradient(135deg, #f8f9fc, #e8eaf6);
border: 2px solid var(--color-primary);
border-radius: var(--radius-md);
padding: 2rem;
margin-bottom: 2rem;
text-align: center;
}
.bva-headline-card h2 {
color: var(--color-primary);
font-size: 1.3rem;
margin-bottom: 1.25rem;
}
.bva-headline-compare {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.bva-compare-item {
padding: 1rem 1.5rem;
border-radius: var(--radius-md);
min-width: 180px;
}
.bva-compare-good {
background: #e8f5e9;
border: 2px solid #2e7d32;
}
.bva-compare-bad {
background: #ffebee;
border: 2px solid #c62828;
}
.bva-compare-number {
font-size: 2.5rem;
font-weight: 800;
}
.bva-compare-good .bva-compare-number { color: #2e7d32; }
.bva-compare-bad .bva-compare-number { color: #c62828; }
.bva-compare-label {
font-size: 0.85rem;
color: var(--color-text-muted);
margin-top: 0.25rem;
}
.bva-compare-vs {
font-size: 1.2rem;
font-weight: 700;
color: var(--color-text-muted);
}
.bva-headline-explain {
font-size: 0.95rem;
color: var(--color-text);
line-height: 1.6;
max-width: 650px;
margin: 0 auto 0.5rem;
text-align: left;
}
.bva-headline-source {
font-size: 0.78rem;
color: var(--color-text-muted);
font-style: italic;
}
/* "What moves a Board decision" factor cards (issue-level corpus stats) */
.bva-factor-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.25rem;
margin-top: 1rem;
}
.bva-factor-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 1.25rem;
}
.bva-factor-card-wide { grid-column: 1 / -1; }
.bva-factor-card h3 {
font-size: 1.02rem;
color: var(--color-primary);
margin: 0 0 .5rem;
}
.bva-factor-lead {
font-size: .9rem;
color: var(--color-text);
line-height: 1.55;
margin: 0 0 1rem;
}
.bva-factor-note {
font-size: .72rem;
color: var(--color-text-muted);
line-height: 1.5;
margin: .9rem 0 0;
}
.bva-factor-row { margin-bottom: .7rem; }
.bva-factor-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: .5rem;
margin-bottom: .2rem;
}
.bva-factor-label { font-size: .82rem; color: var(--color-text); line-height: 1.35; }
.bva-factor-rate { font-size: .92rem; font-weight: 800; color: var(--color-primary); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }
/* "BVA grant rate" caption that sits before the % on condition-guide bars, so
each number is explicitly labelled as a published BVA grant rate. */
.bva-rate-cap { font-size: .6rem; font-weight: 600; color: var(--color-text-muted); letter-spacing: .02em; }
.bva-factor-label { min-width: 0; }
.bva-factor-track {
height: 8px;
background: var(--color-border);
border-radius: 5px;
overflow: hidden;
}
.bva-factor-fill { height: 100%; border-radius: 5px; }
.bva-factor-good { background: #2e7d32; }
.bva-factor-mid { background: #c98a1e; }
.bva-factor-low { background: #c0392b; }
.bva-factor-n { font-size: .68rem; color: var(--color-text-muted); margin-top: .18rem; }
/* Year-trend mini bar chart */
.bva-trend-chart {
display: flex;
align-items: flex-end;
gap: .5rem;
height: 150px;
margin: 1rem 0 .25rem;
padding-top: 1.1rem;
}
.bva-trend-col {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100%;
position: relative;
}
.bva-trend-bar {
width: 100%;
max-width: 46px;
background: linear-gradient(180deg, var(--color-primary), #1f4a85);
border-radius: 4px 4px 0 0;
min-height: 8px;
}
.bva-trend-rate {
font-size: .64rem;
font-weight: 700;
color: var(--color-text);
font-variant-numeric: tabular-nums;
position: absolute;
top: -1rem;
}
.bva-trend-year { font-size: .64rem; color: var(--color-text-muted); margin-top: .25rem; }
@media (max-width: 560px) {
.bva-trend-year { font-size: .55rem; }
.bva-trend-chart { gap: .25rem; }
/* 10 bars at 375px: the per-bar % labels collide, so hide them and let the
bars + year axis carry the trend (the lead text states the range). */
.bva-trend-rate { display: none; }
.bva-trend-chart { padding-top: 0; }
}
/* Dark mode: brighten fills so they read on dark surfaces (two-mechanism per
project convention, explicit data-theme AND prefers-color-scheme mirror). */
:root[data-theme="dark"] .bva-factor-good { background: #4caf72; }
:root[data-theme="dark"] .bva-factor-mid { background: #e0a93a; }
:root[data-theme="dark"] .bva-factor-low { background: #e25c4d; }
:root[data-theme="dark"] .bva-trend-bar { background: linear-gradient(180deg, #3f7fd6, #285a9e); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .bva-factor-good { background: #4caf72; }
:root:not([data-theme="light"]) .bva-factor-mid { background: #e0a93a; }
:root:not([data-theme="light"]) .bva-factor-low { background: #e25c4d; }
:root:not([data-theme="light"]) .bva-trend-bar { background: linear-gradient(180deg, #3f7fd6, #285a9e); }
}
/* Condition-guide grant-rate bar charts. Reuses the .bva-factor-* rows above
(label + rate + track/fill + n), so screen readers still read every value as
text. This just adds the group wrapper and a neutral color-tone legend. */
.cond-bars { margin: .9rem 0 1.1rem; }
.cond-bars-legend {
display: flex;
flex-wrap: wrap;
gap: .9rem;
font-size: .7rem;
color: var(--color-text-muted);
margin: .2rem 0 1rem;
}
.cond-bars-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.cond-bars-legend i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
/* Section styling */
.bva-section {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 1.5rem;
margin-bottom: 1.5rem;
}
/* Semantic callout boxes, use these instead of inline `style="background:#e8f5e9..."`
so dark mode picks up the right surface tokens (--surface-success / -warning /
-info / -danger) defined in main.css. Heading color, body color, link color
all derived from the same token family so contrast stays AA in both modes. */
.callout-success,
.callout-warning,
.callout-info,
.callout-danger {
border-radius: var(--radius-md);
padding: 1.5rem;
margin: 1rem 0 1.25rem;
line-height: 1.7;
}
.callout-success {
background: var(--surface-success);
border: 1px solid var(--surface-success-border);
color: var(--surface-success-text);
}
.callout-warning {
background: var(--surface-warning);
border: 1px solid var(--surface-warning-border);
color: var(--surface-warning-text);
}
.callout-info {
background: var(--surface-info);
border: 1px solid var(--surface-info-border);
color: var(--surface-info-text);
}
.callout-danger {
background: var(--surface-danger);
border: 1px solid var(--surface-danger-border);
color: var(--surface-danger-text);
}
.callout-success h2, .callout-success h3, .callout-success h4,
.callout-warning h2, .callout-warning h3, .callout-warning h4,
.callout-info h2, .callout-info h3, .callout-info h4,
.callout-danger h2, .callout-danger h3, .callout-danger h4 {
color: inherit;
margin-top: 0;
}
.callout-success p, .callout-warning p, .callout-info p, .callout-danger p { color: inherit; margin: 0 0 0.75rem; }
.callout-success p:last-child, .callout-warning p:last-child,
.callout-info p:last-child, .callout-danger p:last-child { margin-bottom: 0; }
.callout-success a, .callout-warning a, .callout-info a, .callout-danger a {
color: inherit;
text-decoration: underline;
font-weight: 600;
}
.callout-success ul, .callout-warning ul, .callout-info ul, .callout-danger ul { color: inherit; margin: 0.25rem 0 0; padding-left: 1.25rem; }
/* Emphasis variant, heavier left border for "Important Notice" cases. */
.callout-emphasis { border-left-width: 6px; border-left-style: solid; }
.bva-section h2 {
color: var(--color-primary);
font-size: 1.15rem;
margin-bottom: 0.5rem;
}
.bva-section-intro {
font-size: 0.9rem;
color: var(--color-text-muted);
margin-bottom: 1rem;
}
.bva-section-note {
font-size: 0.78rem;
color: var(--color-text-muted);
font-style: italic;
margin-top: 0.75rem;
}
.bva-section-cta {
font-size: 0.92rem;
margin-top: 1rem;
}
.bva-section-cta a {
color: var(--color-primary);
font-weight: 600;
}
/* Pairs table */
.bva-pairs-table {
width: 100%;
}
.bva-pair-header {
display: grid;
grid-template-columns: 1fr 80px 80px;
gap: 0.5rem;
padding: 0.5rem 0;
border-bottom: 2px solid var(--color-border);
font-size: 0.82rem;
font-weight: 700;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.bva-pair-header:has(+ .bva-pair-row .bva-pair-transition) {
grid-template-columns: 1fr 80px 80px 120px;
}
.bva-pair-row {
display: grid;
grid-template-columns: 1fr 80px 80px;
gap: 0.5rem;
padding: 0.6rem 0;
border-bottom: 1px solid #f0f0f0;
font-size: 0.9rem;
align-items: center;
}
.bva-pair-row:has(.bva-pair-transition) {
grid-template-columns: 1fr 80px 80px 120px;
}
.bva-pair-name { color: var(--color-text); }
.bva-pair-name a { color: var(--color-primary); text-decoration: none; }
.bva-pair-name a:hover { text-decoration: underline; }
.bva-pair-count { text-align: center; color: var(--color-text-muted); }
.bva-pair-rate { text-align: center; font-weight: 700; }
.bva-pair-rate.rate-high { color: #2e7d32; }
.bva-pair-rate.rate-mid { color: #f57f17; }
.bva-pair-rate.rate-low { color: #c62828; }
.bva-pair-transition { font-size: 0.82rem; color: var(--color-text-muted); text-align: center; }
/* Mobile: the multi-column grid (esp. the 4-col increased-rating variant with
its fixed 120px transition column) can't shrink below ~300px of fixed track,
so condition names hit their min-width and push the row past a 375px
viewport. Restack each row as a labeled card: name on top, metrics below
with their column header inlined via data-label. */
@media (max-width: 560px) {
.bva-pair-header { display: none; }
.bva-pair-row,
.bva-pair-row:has(.bva-pair-transition) {
grid-template-columns: 1fr;
gap: 0.2rem;
padding: 0.75rem 0;
}
.bva-pair-name { font-weight: 600; margin-bottom: 0.15rem; }
.bva-pair-count,
.bva-pair-rate,
.bva-pair-transition {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.75rem;
text-align: right;
font-size: 0.85rem;
}
.bva-pair-count[data-label]::before,
.bva-pair-rate[data-label]::before,
.bva-pair-transition[data-label]::before {
content: attr(data-label);
color: var(--color-text-muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: 0.72rem;
}
}
/* Two-column layout */
.bva-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
@media (max-width: 700px) {
.bva-two-col { grid-template-columns: 1fr; }
}
.bva-factor-list {
list-style: none;
padding: 0;
margin: 0;
}
.bva-factor-list li {
padding: 0.5rem 0;
border-bottom: 1px solid #f0f0f0;
font-size: 0.88rem;
line-height: 1.5;
}
.bva-factor-list li:last-child { border-bottom: none; }
.bva-factors-win li strong { color: #2e7d32; }
.bva-factors-lose li strong { color: #c62828; }
/* OIG banner */
.bva-oig-banner {
background: #fff3e0;
border-color: #e65100;
}
.bva-oig-banner h2 { color: #bf360c; }
.bva-oig-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin: 1rem 0;
}
.bva-oig-stat {
background: var(--color-surface);
border: 1px solid #ffcc80;
border-radius: var(--radius-sm);
padding: 1rem;
text-align: center;
}
.bva-oig-number {
font-size: 2rem;
font-weight: 800;
color: #bf360c;
}
.bva-oig-label {
font-size: 0.85rem;
color: #4e342e;
margin-top: 0.25rem;
}
.bva-oig-source {
font-size: 0.72rem;
color: #8d6e63;
margin-top: 0.25rem;
font-style: italic;
}
/* CTA section */
.bva-cta-section {
text-align: center;
padding: 2rem;
background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
color: #fff;
border-radius: var(--radius-md);
margin-bottom: 1.5rem;
}
.bva-cta-section h2 {
color: var(--color-accent);
margin-bottom: 0.5rem;
}
.bva-cta-section p {
color: rgba(255,255,255,.85);
margin-bottom: 1.25rem;
max-width: 550px;
margin-left: auto;
margin-right: auto;
}
:root[data-theme="dark"] .bva-cta-section { background: rgba(122,179,255,.10); color: var(--color-text); }
:root[data-theme="dark"] .bva-cta-section p { color: var(--color-text-muted); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .bva-cta-section { background: rgba(122,179,255,.10); color: var(--color-text); }
:root:not([data-theme="light"]) .bva-cta-section p { color: var(--color-text-muted); }
}
.bva-cta-buttons {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
.bva-cta-buttons .btn {
background: var(--color-accent);
color: var(--color-on-accent);
text-decoration: none;
}
.bva-cta-buttons .btn-outline {
background: transparent;
border: 2px solid rgba(255,255,255,.4);
color: #fff;
}
.bva-cta-buttons .btn-outline:hover {
border-color: #fff;
background: rgba(255,255,255,.1);
}
/* ── Rating Distribution Card (Browse page) ── */
.rating-dist-card {
background: #f8f9fc;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 1.25rem;
margin-bottom: 1rem;
}
.rating-dist-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.75rem;
flex-wrap: wrap;
gap: 0.5rem;
}
.rating-dist-header h3 {
font-size: 1rem;
color: var(--color-primary);
margin: 0;
}
.rating-dist-total {
font-size: 0.85rem;
color: var(--color-text-muted);
font-weight: 600;
}
.dist-bars {
display: flex;
flex-direction: column;
gap: 0.3rem;
margin-bottom: 0.75rem;
}
.dist-bar-row {
display: grid;
grid-template-columns: 56px 1fr 45px;
align-items: center;
gap: 0.5rem;
}
.dist-bar-label {
font-size: 0.78rem;
font-weight: 700;
color: var(--color-primary);
text-align: right;
white-space: nowrap;
}
.dist-bar-track {
height: 18px;
background: #e8eaf6;
border-radius: 3px;
overflow: hidden;
}
.dist-bar-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
min-width: 2px;
transition: width 0.3s ease;
}
.dist-bar-pct {
font-size: 0.78rem;
color: var(--color-text-muted);
font-weight: 600;
}
.dist-top-conditions {
font-size: 0.85rem;
color: var(--color-text-muted);
margin-bottom: 0.5rem;
line-height: 1.5;
}
.dist-top-conditions strong {
color: var(--color-text);
}
.dist-system-highlight {
background: #ffe066;
padding: 0.1rem 0.4rem;
border-radius: 4px;
font-style: italic;
}
.dist-top-highlight {
background: #ffe066;
padding: 0.1rem 0.35rem;
border-radius: 4px;
font-weight: 600;
}
.rating-dist-source {
font-size: 0.72rem;
color: var(--color-text-muted);
font-style: italic;
margin: 0;
}
.dist-toggle {
display: inline-flex;
gap: 0;
margin: 0.25rem 0 0.75rem;
background: var(--color-surface-2, #f3f4f6);
border: 1px solid var(--color-border);
border-radius: 999px;
padding: 3px;
}
.dist-toggle-btn {
appearance: none;
border: 0;
background: transparent;
padding: 0.4rem 0.85rem;
font-size: 0.78rem;
font-weight: 600;
color: var(--color-text-muted);
border-radius: 999px;
cursor: pointer;
min-height: 36px;
transition: background 120ms ease, color 120ms ease;
}
.dist-toggle-btn:hover {
color: var(--color-text);
}
.dist-toggle-btn.is-active {
background: var(--color-primary, #1565c0);
color: #fff;
}
:root[data-theme="dark"] .dist-toggle-btn.is-active { background: #1f4a85; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .dist-toggle-btn.is-active { background: #1f4a85; }
}
.dist-toggle-btn:focus-visible {
outline: 2px solid var(--color-focus, #1565c0);
outline-offset: 2px;
}
@media (max-width: 640px) {
.dist-toggle { width: 100%; }
.dist-toggle-btn { flex: 1; padding: 0.5rem 0.5rem; font-size: 0.75rem; }
}
/* ── Back to body system link ── */
.back-to-system {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--color-border);
}
.back-to-system a {
color: var(--color-primary);
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
display: inline-flex;
align-items: center;
min-height: 48px;
}
.back-to-system a:hover { text-decoration: underline; }
/* ── About Page ── */
.about-page { margin-bottom: 2rem; }
.about-page h1,
.about-page h2 {
color: var(--color-primary);
font-size: 1.6rem;
margin-bottom: 1.5rem;
}
.about-section {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 1.25rem;
margin-bottom: 1rem;
}
.about-section h3 {
color: var(--color-primary);
margin-bottom: 0.75rem;
border-bottom: 2px solid var(--color-accent);
padding-bottom: 0.5rem;
}
.about-section p { margin-bottom: 0.75rem; line-height: 1.7; }
.about-section ul, .about-section ol {
margin: 0.75rem 0;
padding-left: 1.5rem;
}
.about-section li {
margin-bottom: 0.5rem;
line-height: 1.6;
}
.about-section a { color: var(--color-primary); }
/* ===== Secondary Conditions ===== */
.secondary-section { margin-top: 1.5rem; }
.secondary-intro {
color: var(--color-text-muted);
margin-bottom: 1rem;
font-size: 0.95rem;
}
.secondary-cards {
display: flex;
flex-direction: column;
gap: 1rem;
}
.secondary-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 1rem 1.25rem;
transition: box-shadow 0.2s;
}
.secondary-card:hover {
box-shadow: var(--shadow-sm);
}
.secondary-card-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.secondary-link {
text-decoration: none;
color: var(--color-primary);
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
.secondary-link:hover { text-decoration: underline; }
.secondary-dc {
background: var(--color-primary);
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 700;
}
:root[data-theme="dark"] .secondary-dc { background: #1f4a85; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .secondary-dc { background: #1f4a85; }
}
.secondary-name { font-size: 1rem; }
.secondary-desc {
color: #444;
font-size: 0.93rem;
line-height: 1.5;
margin-bottom: 0.5rem;
}
/* Relationship type badges */
.rel-badge {
display: inline-block;
padding: 0.2rem 0.6rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
}
.rel-well-established {
background: #e8f5e9;
color: #2e7d32;
border: 1px solid #a5d6a7;
}
.rel-commonly-claimed {
background: #fff3e0;
color: #e65100;
border: 1px solid #ffcc80;
}
.rel-emerging {
background: #f3e5f5;
color: #7b1fa2;
border: 1px solid #ce93d8;
}
/* Expandable details */
.secondary-details-toggle {
color: var(--color-primary);
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
padding: 0.25rem 0;
user-select: none;
min-height: 48px;
display: flex;
align-items: center;
}
.secondary-details-toggle:hover { text-decoration: underline; }
.secondary-details {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.secondary-card.expanded .secondary-details {
max-height: 600px;
}
.secondary-card .secondary-details-toggle .toggle-text::before {
content: '\25B8 ';
}
.secondary-card.expanded .secondary-details-toggle .toggle-text::before {
content: '\25BE ';
}
.detail-block {
padding: 0.6rem 0;
border-top: 1px solid var(--color-bg);
font-size: 0.9rem;
}
.detail-block strong {
color: var(--color-primary);
display: block;
margin-bottom: 0.25rem;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.detail-block p { margin: 0; color: #444; line-height: 1.5; }
.detail-source {
font-size: 0.85rem;
color: var(--color-text-muted);
}
.detail-source strong { display: inline; text-transform: none; letter-spacing: 0; }
/* BVA pair data on secondary cards */
.bva-pair-badge {
display: inline-block;
font-size: 0.78rem;
font-weight: 600;
padding: 0.2rem 0.6rem;
border-radius: 3px;
color: #fff;
margin-top: 0.35rem;
}
.bva-pair-badge.bva-high { background: #2e7d32; }
.bva-pair-badge.bva-mid { background: #f57f17; }
.bva-pair-badge.bva-low { background: #c62828; }
.detail-bva {
background: #f0f4ff;
border: 1px solid #c5cae9;
border-radius: var(--radius-sm);
padding: 0.75rem;
margin-top: 0.5rem;
}
.detail-bva strong {
color: var(--color-primary);
}
.bva-outcome-list {
list-style: none;
padding: 0;
margin: 0.5rem 0;
}
.bva-outcome-list li {
display: flex;
align-items: baseline;
gap: 0.35rem;
padding: 0.25rem 0;
font-size: 0.88rem;
}
.bva-outcome-list li strong {
min-width: 2rem;
text-align: right;
}
.detail-bva-note {
font-size: 0.75rem;
color: var(--color-text-muted);
font-style: italic;
margin-top: 0.35rem;
margin-bottom: 0;
}
/* Secondary disclaimer */
.secondary-disclaimer {
margin-top: 1.25rem;
padding: 0.75rem 1rem;
background: #fff8e1;
border: 1px solid #ffe082;
border-radius: var(--radius-sm);
font-size: 0.88rem;
color: #5d4037;
line-height: 1.5;
}
/* "This condition as a secondary" section */
.secondary-to-section { margin-top: 1rem; }
.secondary-to-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.secondary-to-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.6rem 1rem;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
flex-wrap: wrap;
gap: 0.5rem;
}
.secondary-to-item:hover {
border-color: var(--color-primary);
}
/* ── Residual Conditions Section ── */
.residual-section { margin-top: 1.5rem; }
.residual-intro { color: var(--color-text-muted); margin-bottom: 1rem; font-size: 0.95rem; }
.residual-timeline {
background: #e0f2f1;
border-left: 4px solid #00796b;
padding: 0.75rem 1rem;
border-radius: var(--radius-sm);
margin-bottom: 0.75rem;
font-size: 0.93rem;
color: #004d40;
line-height: 1.5;
}
.residual-floor {
background: #e0f2f1;
border-left: 4px solid #00897b;
padding: 0.75rem 1rem;
border-radius: var(--radius-sm);
margin-bottom: 1rem;
font-size: 0.93rem;
color: #004d40;
line-height: 1.5;
}
.residual-cards { display: flex; flex-direction: column; gap: 1rem; }
.residual-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 1rem 1.25rem;
transition: box-shadow 0.2s;
}
.residual-card:hover { box-shadow: var(--shadow-sm); }
.residual-card-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.residual-link {
text-decoration: none;
color: #00796b;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
.residual-link:hover { text-decoration: underline; }
.residual-link-self {
color: #555;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
.residual-dc {
background: #00796b;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 700;
}
.residual-name { font-size: 0.95rem; }
.residual-desc { color: #444; font-size: 0.93rem; line-height: 1.5; margin-bottom: 0.5rem; }
/* Frequency badges */
.freq-badge {
display: inline-block;
padding: 0.2rem 0.6rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
}
.freq-common { background: #e0f2f1; color: #00695c; border: 1px solid #80cbc4; }
.freq-possible { background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; }
.freq-rare { background: #fff8e1; color: #f57f17; border: 1px solid #ffe082; }
/* Expandable details */
.residual-details-toggle {
color: #00796b;
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
padding: 0.25rem 0;
user-select: none;
min-height: 48px;
display: flex;
align-items: center;
}
.residual-details-toggle:hover { text-decoration: underline; }
.residual-details {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.residual-card.expanded .residual-details { max-height: 600px; }
/* Disclaimer */
.residual-disclaimer {
margin-top: 1rem;
padding: 0.75rem 1rem;
background: #e0f2f1;
border: 1px solid #80cbc4;
border-radius: var(--radius-sm);
font-size: 0.88rem;
color: #004d40;
line-height: 1.5;
}
/* "This condition as a residual" section */
.residual-of-section { margin-top: 1rem; }
.residual-of-list { display: flex; flex-direction: column; gap: 0.5rem; }
.residual-of-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.6rem 1rem;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
flex-wrap: wrap;
gap: 0.5rem;
}
.residual-of-item:hover { border-color: #00796b; }
.residual-cat-badge {
display: inline-block;
padding: 0.2rem 0.6rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
background: #e0f2f1;
color: #00695c;
border: 1px solid #80cbc4;
}
/* ── DC Error Page ── */
.dc-page .error-page {
text-align: center;
padding: 3rem 1rem;
}
.dc-page .error-page h2 {
font-size: 2rem;
color: var(--color-primary);
margin-bottom: 1rem;
}
.dc-page .error-page p {
font-size: 1.1rem;
color: var(--color-text-muted);
margin-bottom: 2rem;
}
.error-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
.error-btn {
display: inline-block;
padding: 0.75rem 1.5rem;
min-height: 48px;
background: var(--color-primary);
color: #fff;
text-decoration: none;
border-radius: var(--radius-sm);
font-weight: 600;
transition: background 0.2s;
}
.error-btn:hover { background: var(--color-primary-light); text-decoration: none; }
.error-btn-secondary {
background: var(--color-surface);
color: var(--color-primary);
border: 2px solid var(--color-primary);
}
.error-btn-secondary:hover {
background: var(--color-primary);
color: #fff;
}
:root[data-theme="dark"] .error-btn { background: #1f4a85; }
:root[data-theme="dark"] .error-btn:hover { background: #2c5fa3; }
:root[data-theme="dark"] .error-btn-secondary:hover { background: #1f4a85; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .error-btn { background: #1f4a85; }
:root:not([data-theme="light"]) .error-btn:hover { background: #2c5fa3; }
:root:not([data-theme="light"]) .error-btn-secondary:hover { background: #1f4a85; }
}
/* ── Global focus-visible ring for keyboard navigation ── */
.dc-page *:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.dc-page a:focus-visible {
border-radius: 2px;
}
/* ── MOS Noise Exposure Box ── */
.mos-noise-box {
background: linear-gradient(135deg, #fffbf0, #fff7e0) !important;
border: 2px solid var(--color-primary) !important;
border-radius: var(--radius-md);
}
.mos-noise-box h3 {
color: var(--color-primary) !important;
border-bottom-color: var(--color-primary) !important;
}
/* Dark mode: replace the hardcoded cream gradient (light-on-light when
* the surrounding page goes dark). Use a dim primary tint so it still
* reads as a callout but doesn't stay yellow. Audit 2026-05-10. */
:root[data-theme="dark"] .mos-noise-box {
background: rgba(26,58,107,.18) !important;
border-color: var(--color-border) !important;
}
:root[data-theme="dark"] .mos-noise-box,
:root[data-theme="dark"] .mos-noise-box p,
:root[data-theme="dark"] .mos-noise-box li {
color: var(--color-text) !important;
}
/* MOS results table. table-layout:fixed + percentage column widths keep
long job titles from stretching the table past a 375px screen; the
mobile breakpoint trims padding so all four columns stay visible
without a horizontal scroll. */
.mos-noise-box .mos-results-wrap {
max-height: 300px;
overflow: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
.mos-noise-box table.mos-results {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
font-size: 0.85rem;
}
.mos-noise-box table.mos-results th {
padding: 0.5rem;
text-align: left;
font-size: 0.75rem;
text-transform: uppercase;
color: var(--color-text-muted);
background: var(--color-bg-alt, #f8f9fa);
position: sticky;
top: 0;
}
:root[data-theme="dark"] .mos-noise-box table.mos-results th {
background: rgba(26,58,107,.45);
}
.mos-noise-box table.mos-results td {
padding: 0.45rem 0.5rem;
overflow-wrap: break-word;
border-bottom: 1px solid rgba(0,0,0,.06);
}
.mos-noise-box table.mos-results .col-mos {
width: 16%;
font-weight: 700;
font-family: monospace;
}
.mos-noise-box table.mos-results .col-title { width: 38%; }
.mos-noise-box table.mos-results .col-grade {
width: 22%;
font-size: 0.8rem;
color: var(--color-text-muted);
white-space: nowrap;
}
.mos-noise-box table.mos-results .col-noise {
width: 24%;
text-align: center;
}
.mos-noise-box .mos-branch-sub {
font-size: 0.72rem;
color: var(--color-text-muted);
}
.mos-noise-box .mos-level-badge {
display: inline-block;
padding: 0.15rem 0.5rem;
border-radius: 12px;
font-size: 0.72rem;
font-weight: 700;
line-height: 1.25;
}
/* Post-2010 codes the VA never rated. Dashed border + neutral slate marks
the badge as an inference, visually distinct from the three filled,
borderless official badges. */
.mos-noise-box .mos-level-badge.not-rated {
background: rgba(100,116,139,.12);
color: #475569;
border: 1px dashed #94a3b8;
}
:root[data-theme="dark"] .mos-noise-box .mos-level-badge.not-rated {
background: rgba(148,163,184,.15);
color: #cbd5e1;
border-color: #64748b;
}
.mos-noise-box .mos-closest-sub {
font-size: 0.68rem;
color: var(--color-text-muted);
margin-top: 2px;
}
@media (max-width: 480px) {
.mos-noise-box table.mos-results { font-size: 0.8rem; }
.mos-noise-box table.mos-results th,
.mos-noise-box table.mos-results td { padding: 0.4rem 0.3rem; }
.mos-noise-box table.mos-results .col-grade { font-size: 0.72rem; width: 20%; }
.mos-noise-box table.mos-results .col-mos { width: 15%; }
.mos-noise-box table.mos-results .col-title { width: 43%; }
.mos-noise-box table.mos-results .col-noise { width: 22%; }
}
/* Auto/System theme mode: the navbar theme control leaves no data-theme
attribute, so the :root[data-theme="dark"] rules above never fire on a
dark-OS user. Mirror them under prefers-color-scheme, scoped with
:not([data-theme="light"]) so an explicit Light choice still wins. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .mos-noise-box {
background: rgba(26,58,107,.18) !important;
border-color: var(--color-border) !important;
}
:root:not([data-theme="light"]) .mos-noise-box,
:root:not([data-theme="light"]) .mos-noise-box p,
:root:not([data-theme="light"]) .mos-noise-box li {
color: var(--color-text) !important;
}
:root:not([data-theme="light"]) .mos-noise-box table.mos-results th {
background: rgba(26,58,107,.45);
}
:root:not([data-theme="light"]) .mos-noise-box .mos-level-badge.not-rated {
background: rgba(148,163,184,.15);
color: #cbd5e1;
border-color: #64748b;
}
}
/* ── Save/Bookmark Button ── */
/* Bookmark for Research, secondary CTA (outlined blue). Lower-commitment
action; sits beside the primary "Log as My Rating" button. */
.save-code-btn {
background: transparent;
border: 1.5px solid var(--color-primary);
cursor: pointer;
color: var(--color-primary);
padding: 7px 15px;
border-radius: 20px;
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 48px;
font-size: 0.84rem;
font-weight: 600;
font-family: var(--font-sans);
transition: all .15s;
vertical-align: middle;
white-space: nowrap;
}
.save-code-btn:hover { background: rgba(26,58,107,.06); border-color: var(--color-primary); }
.save-code-btn.saved { background: rgba(200,146,42,.10); border-color: var(--color-accent); color: var(--color-accent); }
.save-code-btn.saved:hover { background: rgba(198,40,40,.06); border-color: var(--color-danger); color: var(--color-danger); }
.save-code-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.save-code-btn .save-label { line-height: 1; }
:root[data-theme="dark"] .save-code-btn:hover { background: rgba(255,255,255,.06); }
.save-code-sm {
padding: 4px 10px;
min-height: 36px;
font-size: 0.75rem;
border-radius: 16px;
font-weight: 600;
background: rgba(26,58,107,.04);
border-width: 1px;
box-shadow: none;
}
/* ── Add to My Conditions Button (sibling of .save-code-btn; same shape,
green colour family so the two buttons read as a related pair) ── */
/* Log as My Rating, PRIMARY CTA (filled green). High-commitment action that
feeds VA Math + My Conditions. Sits next to the secondary Bookmark button. */
.add-cond-btn {
background: #2e7d32;
border: 1.5px solid #2e7d32;
cursor: pointer;
color: #fff;
padding: 8px 16px;
border-radius: 20px;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 48px;
font-size: 0.88rem;
font-weight: 700;
font-family: var(--font-sans);
transition: all .15s;
vertical-align: middle;
white-space: nowrap;
box-shadow: 0 1px 3px rgba(46,125,50,.18);
}
.add-cond-btn:hover { background: #256528; border-color: #256528; box-shadow: 0 2px 8px rgba(46,125,50,.28); transform: translateY(-1px); }
.add-cond-btn.added { background: rgba(46,125,50,.10); color: #2e7d32; box-shadow: none; }
.add-cond-btn.added:hover { background: rgba(198,40,40,.06); border-color: var(--color-danger); color: var(--color-danger); transform: none; }
.add-cond-btn:focus-visible { outline: 2px solid #2e7d32; outline-offset: 2px; }
.add-cond-btn .add-label { line-height: 1; }
:root[data-theme="dark"] .add-cond-btn { background: #4c8c4f; border-color: #4c8c4f; }
:root[data-theme="dark"] .add-cond-btn:hover { background: #2e7d32; border-color: #2e7d32; }
:root[data-theme="dark"] .add-cond-btn.added { background: rgba(76,140,79,.15); color: #81c784; }
/* ── Help tooltip: one-click/hover "What's the difference between these?" ──
Sits next to Bookmark/Log buttons. Hover on desktop, tap on touch (JS
toggles .open). aria-describedby wires the tooltip for screen readers. */
.cta-help-tip {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
color: var(--color-text-muted);
cursor: help;
vertical-align: middle;
transition: color .15s, background .15s;
}
.cta-help-tip:hover,
.cta-help-tip:focus,
.cta-help-tip:focus-within,
.cta-help-tip.open { color: var(--color-primary); background: rgba(26,58,107,.08); outline: none; }
.cta-help-body {
display: none;
position: absolute;
top: calc(100% + 10px);
right: 0;
z-index: 50;
width: 300px;
max-width: calc(100vw - 2rem);
background: var(--color-primary);
color: #fff;
padding: .85rem 1rem;
border-radius: var(--radius-sm);
font-size: .82rem;
line-height: 1.55;
font-weight: 400;
text-align: left;
box-shadow: 0 6px 20px rgba(0,0,0,.22);
cursor: auto;
}
.cta-help-body strong { color: #ffd54f; font-weight: 700; }
.cta-help-body em { color: rgba(255,255,255,.95); font-style: normal; font-weight: 600; }
.cta-help-tip:hover .cta-help-body,
.cta-help-tip:focus .cta-help-body,
.cta-help-tip:focus-within .cta-help-body,
.cta-help-tip.open .cta-help-body { display: block; }
/* Arrow pointing up to the icon */
.cta-help-body::before {
content: '';
position: absolute;
top: -6px;
right: 12px;
width: 12px;
height: 12px;
background: var(--color-primary);
transform: rotate(45deg);
}
:root[data-theme="dark"] .cta-help-body { background: #0e2a4d; }
:root[data-theme="dark"] .cta-help-body::before { background: #0e2a4d; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .cta-help-body { background: #0e2a4d; }
:root:not([data-theme="light"]) .cta-help-body::before { background: #0e2a4d; }
}
@media (max-width: 640px) {
.cta-help-body { right: auto; left: 50%; transform: translateX(-50%); }
.cta-help-body::before { right: auto; left: 50%; margin-left: -6px; }
}
/* ===== DC Mobile Responsive ===== */
@media (max-width: 768px) {
.browse-layout {
grid-template-columns: 1fr;
}
.browse-sidebar {
position: static;
}
.torso-container {
max-width: 320px;
}
.torso-mobile-select {
display: flex !important;
}
}
@media (max-width: 600px) {
.dc-search-box { flex-direction: column; }
.dc-search-box button { width: 100%; }
#body-systems { grid-template-columns: 1fr; }
.code-header .dc-number { font-size: 1.5rem; }
.pact-stats-grid { grid-template-columns: 1fr; }
.pact-filter-buttons { flex-direction: column; }
.pact-filter-btn { width: 100%; text-align: center; }
.pact-condition-header { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.secondary-card-header { flex-direction: column; align-items: flex-start; }
.secondary-to-item { flex-direction: column; align-items: flex-start; }
.residual-card-header { flex-direction: column; align-items: flex-start; }
.residual-of-item { flex-direction: column; align-items: flex-start; }
.error-actions { flex-direction: column; }
.error-btn { width: 100%; text-align: center; }
}
/* ── Appeals Landing Page tiles ── */
.appeals-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin: 1rem 0 1.5rem;
}
.appeals-grid.appeals-grid-2 { grid-template-columns: repeat(2, 1fr); }
.appeals-tile {
display: flex;
flex-direction: column;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-top: 4px solid var(--appeals-accent, var(--color-primary));
border-radius: var(--radius-md);
padding: 1.15rem 1.25rem 1rem;
text-decoration: none;
color: var(--color-text);
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
min-height: 200px;
}
.appeals-tile:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(26,58,107,.10);
text-decoration: none;
}
.appeals-tile:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 2px;
}
.appeals-tile-stat {
font-size: 1.55rem;
font-weight: 800;
color: var(--appeals-accent, var(--color-primary));
line-height: 1.1;
letter-spacing: -.01em;
}
.appeals-tile-stat-label {
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--color-text-muted);
margin-bottom: .85rem;
}
.appeals-tile h3 {
font-size: 1rem;
color: var(--color-text);
margin: 0 0 .35rem;
font-weight: 700;
}
.appeals-tile p {
font-size: .88rem;
color: var(--color-text-muted);
line-height: 1.55;
margin: 0 0 .9rem;
flex: 1;
}
.appeals-tile-cta {
display: inline-flex;
align-items: center;
gap: .35rem;
font-size: .85rem;
font-weight: 600;
color: var(--appeals-accent, var(--color-primary));
align-self: flex-start;
}
.appeals-tile-cta::after {
content: "→";
transition: transform .15s ease;
}
.appeals-tile:hover .appeals-tile-cta::after { transform: translateX(3px); }
.appeals-tile-judges { --appeals-accent: #3b5bdb; }
.appeals-tile-impacts { --appeals-accent: #2e7d32; }
.appeals-tile-transitions { --appeals-accent: #c62828; }
.appeals-tile-insights { --appeals-accent: var(--color-primary); }
.appeals-tile-outcomes { --appeals-accent: #8b6914; }
:root[data-theme="dark"] .appeals-tile:hover { box-shadow: 0 10px 24px rgba(0,0,0,.4); }
:root[data-theme="dark"] .appeals-tile-judges { --appeals-accent: #7aa3ff; }
:root[data-theme="dark"] .appeals-tile-impacts { --appeals-accent: #6fd28a; }
:root[data-theme="dark"] .appeals-tile-transitions { --appeals-accent: #ff7a7a; }
:root[data-theme="dark"] .appeals-tile-insights { --appeals-accent: #7ab3ff; }
:root[data-theme="dark"] .appeals-tile-outcomes { --appeals-accent: #f5c66f; }
@media (max-width: 900px) {
.appeals-grid { grid-template-columns: repeat(2, 1fr); }
.appeals-grid.appeals-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.appeals-grid, .appeals-grid.appeals-grid-2 { grid-template-columns: 1fr; }
.appeals-tile { min-height: 0; }
}
/* ── Judge Analytics Page ── */
.judge-controls {
display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1rem;
}
input.judge-search-input {
flex: 1; min-width: 200px; min-height: 44px;
padding: 0.6rem 0.85rem 0.6rem 2.3rem;
border: 1.5px solid var(--color-primary); border-radius: var(--radius-sm);
background: var(--color-bg) url("data:image/svg+xml;utf8,") no-repeat 0.7rem center;
background-size: 17px 17px;
font-size: 0.95rem; font-family: inherit; color: var(--color-text);
box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}
input.judge-search-input::placeholder { color: var(--color-text-muted); }
input.judge-search-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(26,58,107,.18); }
/* Dark mode: the global dark input rule sets background/border with
!important, which strips the search icon and dims the border. Restore both
so the field still reads clearly as an editable search box. */
:root[data-theme="dark"] input[type="text"].judge-search-input,
:root:not([data-theme="light"]) input[type="text"].judge-search-input {
border-color: rgba(255,255,255,0.32) !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: 0.7rem center !important;
background-size: 17px 17px !important;
padding-left: 2.3rem !important;
}
:root[data-theme="dark"] input[type="text"].judge-search-input:focus,
:root:not([data-theme="light"]) input[type="text"].judge-search-input:focus { border-color: rgba(255,255,255,0.55) !important; box-shadow: 0 0 0 3px rgba(255,255,255,.15) !important; }
.judge-min-label { font-size: 0.85rem; color: var(--color-text-muted); display: flex; align-items: center; gap: 0.4rem; }
.judge-min-select { padding: 0.4rem; border: 1px solid var(--color-control-border, #767f8f); border-radius: var(--radius-sm); font-family: inherit; }
.judge-count-label { font-size: 0.85rem; color: var(--color-text-muted); font-weight: 600; }
.judge-table-wrap { overflow-x: auto; }
.judge-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.judge-table th {
position: sticky; top: 0; background: var(--color-primary); color: #fff;
padding: 0.6rem 0.5rem; text-align: left; cursor: pointer; white-space: nowrap;
user-select: none; font-weight: 600; font-size: 0.8rem;
}
.judge-table th:hover { background: var(--color-primary-light); }
:root[data-theme="dark"] .judge-table th { background: rgba(122,179,255,.08); color: var(--color-primary-light); }
:root[data-theme="dark"] .judge-table th:hover { background: rgba(122,179,255,.14); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .judge-table th { background: rgba(122,179,255,.08); color: var(--color-primary-light); }
:root:not([data-theme="light"]) .judge-table th:hover { background: rgba(122,179,255,.14); }
}
.judge-table th.sorted-asc::after { content: ' \25B2'; font-size: 0.65rem; }
.judge-table th.sorted-desc::after { content: ' \25BC'; font-size: 0.65rem; }
.judge-table td { padding: 0.5rem; border-bottom: 1px solid var(--color-border); }
.judge-table tbody tr:hover { background: #f0f4ff; }
.judge-name-cell { font-weight: 600; white-space: nowrap; }
.judge-name-link {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
font-weight: 600;
display: inline-flex;
align-items: baseline;
gap: 0.25rem;
}
.judge-name-link:hover, .judge-name-link:focus-visible {
text-decoration-thickness: 2px;
}
.judge-name-chevron {
font-size: 1rem;
line-height: 1;
transition: transform 0.15s;
color: var(--color-primary);
opacity: 0.7;
}
.judge-row:hover .judge-name-chevron,
.judge-row:focus-within .judge-name-chevron { transform: translateX(2px); opacity: 1; }
.judge-codes-cell { font-size: 0.8rem; }
.judge-dc-link { color: var(--color-primary); text-decoration: none; }
.judge-dc-link:hover { text-decoration: underline; }
/* ── Functional Impact Library ── */
.impact-card {
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-md); padding: 1rem 1.25rem; margin-bottom: 0.75rem;
transition: box-shadow 0.2s;
}
.impact-card:hover { box-shadow: var(--shadow-sm); }
.impact-card-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.impact-dc-link { font-weight: 700; color: var(--color-primary); text-decoration: none; font-size: 0.9rem; }
.impact-dc-link:hover { text-decoration: underline; }
.impact-condition { color: var(--color-text-muted); font-size: 0.85rem; }
.impact-badges { margin-left: auto; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.impact-badge {
font-size: 0.7rem; font-weight: 700; text-transform: uppercase; padding: 0.15rem 0.5rem;
border-radius: 4px; white-space: nowrap;
}
.impact-badge-increased { background: #e8f5e9; color: #1b5e20; }
.impact-badge-granted { background: #e3f2fd; color: #0d47a1; }
.impact-transition {
font-size: 0.75rem; font-weight: 700; color: #2e7d32; background: #e8f5e9;
padding: 0.15rem 0.5rem; border-radius: 4px;
}
.impact-text {
font-size: 0.9rem; line-height: 1.6; color: var(--color-text); font-style: italic;
margin: 0; padding-left: 0.75rem; border-left: 3px solid var(--color-accent);
}
.impact-load-btn {
background: var(--color-primary); color: #fff; border: none; padding: 0.6rem 1.5rem;
border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; font-size: 0.9rem;
}
.impact-load-btn:hover { background: var(--color-primary-light); }
:root[data-theme="dark"] .impact-load-btn { background: #1f4a85; }
:root[data-theme="dark"] .impact-load-btn:hover { background: #2c5fa3; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .impact-load-btn { background: #1f4a85; }
:root:not([data-theme="light"]) .impact-load-btn:hover { background: #2c5fa3; }
}
.impact-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1rem; }
/* ── Rating Transition Explorer ── */
.trans-subtitle { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: 1rem; }
.trans-bars { max-width: 600px; }
.trans-bar-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.trans-bar-label { width: 90px; font-size: 0.82rem; font-weight: 600; text-align: right; white-space: nowrap; }
.trans-bar-track { flex: 1; height: 22px; background: #f0f0f0; border-radius: 4px; overflow: hidden; }
.trans-bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
.trans-bar-increase { background: linear-gradient(90deg, #43a047, #2e7d32); }
.trans-bar-decrease { background: linear-gradient(90deg, #ef5350, #c62828); }
.trans-bar-count { width: 40px; font-size: 0.8rem; color: var(--color-text-muted); font-weight: 600; }
.trans-condition-controls { margin-bottom: 1rem; display: flex; gap: 0.5rem; align-items: center; }
.trans-reset-btn {
padding: 0.45rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
background: var(--color-surface); cursor: pointer; font-family: inherit; font-size: 0.85rem; color: var(--color-text-muted);
}
.trans-reset-btn:hover { background: var(--color-bg-alt); color: var(--color-danger); border-color: var(--color-danger); }
.trans-detail-card {
background: #f8f9fc; border: 2px solid var(--color-primary); border-radius: var(--radius-md);
padding: 1.25rem; margin-top: 1rem;
}
.trans-detail-card h3 { margin: 0 0 0.5rem 0; color: var(--color-primary); font-size: 1.1rem; }
.trans-detail-card h3 a { color: inherit; text-decoration: none; }
.trans-detail-card h3 a:hover { text-decoration: underline; }
.trans-table-wrap { overflow-x: auto; max-height: 400px; overflow-y: auto; }
@media (max-width: 600px) {
.judge-controls { flex-direction: column; align-items: stretch; }
.impact-card-header { flex-direction: column; align-items: flex-start; }
.impact-badges { margin-left: 0; }
.trans-bar-label { width: 70px; font-size: 0.75rem; }
}
/* ============================================================
Dark-mode overrides for components with hardcoded light palettes.
Everything above was written light-first; these rules re-theme
the cards, notes, and callouts that broke in dark mode.
Uses semantic surface tokens from main.css where possible.
============================================================ */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
/* Search Results */
#search-results .result-card {
background: var(--color-surface);
border-color: var(--color-border);
}
#search-results .result-card:hover {
background: rgba(122,179,255,.05);
box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.ai-badge-high { background: rgba(34,197,94,.15); color: #6fd28a; border-color: rgba(34,197,94,.35); }
.ai-badge-medium { background: rgba(234,179,8,.15); color: #f5c66f; border-color: rgba(234,179,8,.35); }
.ai-badge-low { background: rgba(148,163,184,.15); color: #c8ccd8; border-color: rgba(148,163,184,.35); }
/* Remission note */
.remission-note { background: var(--surface-warning); border-color: var(--surface-warning-border); border-left-color: #f5c66f; }
.remission-note-header { color: #f5c66f; }
.remission-note p { color: var(--surface-warning-text); }
.remission-residuals-link a { color: #9dc4ff; }
/* Disclaimer */
.disclaimer { background: var(--surface-warning); border-color: var(--surface-warning-border); color: var(--surface-warning-text); }
/* VA Math CTA box */
.va-math-cta { background: var(--color-surface) !important; border-color: var(--color-border) !important; }
.va-math-cta select { background: var(--color-bg) !important; color: var(--color-text) !important; border-color: var(--color-control-border, #767f8f) !important; }
/* Autocomplete dropdown + search results */
.dc-ac-dropdown { background: var(--color-surface); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.dc-ac-item { border-bottom-color: var(--color-border); }
.dc-ac-item:hover, .dc-ac-item.active { background: rgba(122,179,255,.1); }
.dc-ac-pact { background: rgba(129,199,132,.15); color: #81c784; }
#search-results .result-card { background: var(--color-surface); border-color: var(--color-border); }
/* AI disclaimer + plain-English / official CFR panels */
.ai-disclaimer { background: var(--surface-info); border-left-color: var(--surface-info-border); color: var(--surface-info-text); }
.ai-disclaimer-icon { color: var(--surface-info-text); }
.cfr-ai { background: var(--surface-info); border-left-color: var(--surface-info-border); }
.cfr-ai-label { color: var(--surface-info-text); }
.cfr-ai-body { color: var(--color-text); }
.cfr-official { background: var(--color-surface); border-color: var(--color-border); }
.cfr-official-label { color: var(--color-text-muted); }
.cfr-official-body { color: var(--color-text); }
/* BVA Insights text blocks, bug #4, #5, #6 */
.bva-insights-lede { color: var(--color-text); }
.bva-subcopy { color: var(--color-text-muted); }
.bva-callout { color: var(--color-text); background: var(--color-surface); }
.bva-callout-warning { color: var(--surface-warning-text); background: var(--surface-warning); border-left-color: var(--surface-warning-border); }
.bva-methodology { color: var(--color-text-muted); }
.bva-evidence-row, .bva-evidence-header { background: var(--color-surface); }
.bva-methodology-row { background: var(--color-surface); }
/* Rating Distribution Card, bug #3 */
.rating-dist-card { background: var(--color-surface); border-color: var(--color-border); }
.dist-system-highlight { background: rgba(232,181,74,.25); color: var(--color-text); }
.dist-top-highlight { background: rgba(232,181,74,.25); color: var(--color-text); }
/* Secondary Conditions, bug #7 */
.secondary-desc { color: var(--color-text-muted); }
.detail-block p { color: var(--color-text); }
.rel-well-established { background: var(--surface-success); color: var(--surface-success-text); border-color: var(--surface-success-border); }
.rel-commonly-claimed { background: var(--surface-warning); color: var(--surface-warning-text); border-color: var(--surface-warning-border); }
.rel-emerging { background: rgba(186,104,200,.15); color: #ce93d8; border-color: rgba(186,104,200,.3); }
.secondary-disclaimer { background: var(--surface-warning); color: var(--surface-warning-text); border-color: var(--surface-warning-border); }
.detail-bva { background: rgba(122,179,255,.08); border-color: rgba(122,179,255,.25); }
/* PACT badges + filters */
.pact-badge-burn-pit { background: var(--surface-danger); color: var(--surface-danger-text); border-color: var(--surface-danger-border); }
.pact-badge-agent-orange { background: var(--surface-warning); color: var(--surface-warning-text); border-color: var(--surface-warning-border); }
.pact-badge-radiation { background: rgba(186,104,200,.15); color: #ce93d8; border-color: rgba(186,104,200,.3); }
.pact-badge-gulf-war { background: var(--surface-info); color: var(--surface-info-text); border-color: var(--surface-info-border); }
.pact-badge-camp-lejeune { background: rgba(0,150,136,.15); color: #80cbc4; border-color: rgba(0,150,136,.3); }
/* Residual timelines */
.residual-timeline, .residual-floor { background: rgba(0,150,136,.12); color: #80cbc4; border-left-color: #00897b; }
/* "Why Claims Are Denied" / evidence tables, bug #4, #6 */
.et-rate-high { background: var(--surface-success); color: var(--surface-success-text); }
.et-rate-mid { background: var(--surface-warning); color: var(--surface-warning-text); }
.et-rate-low { background: var(--surface-danger); color: var(--surface-danger-text); }
.et-takeaway { background: var(--surface-success); border-left-color: var(--surface-success-border); color: var(--surface-success-text); }
.et-takeaway strong { color: var(--surface-success-text); }
.et-grants { color: #81c784; }
.et-denials { color: #ef9a9a; }
.et-heading.grants { color: #81c784; border-bottom-color: rgba(129,199,132,.35); }
.et-heading.denials { color: #ef9a9a; border-bottom-color: rgba(239,154,154,.35); }
.denial-item { background: var(--color-surface); }
.denial-item.won { background: var(--surface-success); border-left-color: var(--surface-success-border); }
.denial-item.lost { background: var(--surface-danger); border-left-color: var(--surface-danger-border); }
.denial-tip { background: var(--surface-warning); border-left-color: var(--surface-warning-border); color: var(--surface-warning-text); }
.denial-tip strong { color: var(--surface-warning-text); }
/* BVA compare cards (what evidence wins) */
.bva-compare-good { background: var(--surface-success); border-color: var(--surface-success-border); }
.bva-compare-bad { background: var(--surface-danger); border-color: var(--surface-danger-border); }
.bva-compare-good .bva-compare-number { color: #81c784; }
.bva-compare-bad .bva-compare-number { color: #ef9a9a; }
/* BVA OIG banner */
.bva-oig-banner { background: var(--surface-warning); border-color: var(--surface-warning-border); }
.bva-oig-banner h2 { color: var(--surface-warning-text); }
.bva-oig-card { background: var(--color-surface); border-color: var(--surface-warning-border); }
.bva-oig-card h3 { color: var(--surface-warning-text); }
.bva-oig-card p { color: var(--color-text); }
/* BVA factor pair rates */
.bva-pair-rate.rate-high { color: #81c784; }
.bva-pair-rate.rate-mid { color: #f5c66f; }
.bva-pair-rate.rate-low { color: #ef9a9a; }
.bva-factors-win li strong { color: #81c784; }
.bva-factors-lose li strong { color: #ef9a9a; }
/* Impact badges (judges page) */
.impact-badge-increased { background: var(--surface-success); color: var(--surface-success-text); }
.impact-badge-granted { background: var(--surface-info); color: var(--surface-info-text); }
.top-pair-tag { background: var(--surface-success); color: var(--surface-success-text); }
/* Transitions page */
.trans-bar-track { background: var(--color-border); }
.trans-reset-btn { background: var(--color-surface); color: var(--color-text); }
.trans-reset-btn:hover { background: var(--color-bg); }
/* Judge table hover */
.judge-table tbody tr:hover { background: rgba(122,179,255,.08); }
/* Light-card background overrides, any generic #f8f9fc / #f5f7fa / #f0f4ff surfaces */
.bva-card-legend, .bva-data-card, .bva-factors-card, .bva-pres-stat,
.top-link-card-grid, .bva-factors-grid, .top-condition-summary { background: var(--color-surface); }
}
}
/* Same overrides for forced-dark theme */
:root[data-theme="dark"] #search-results .result-card { background: var(--color-surface); border-color: var(--color-border); }
:root[data-theme="dark"] #search-results .result-card:hover { background: rgba(122,179,255,.05); box-shadow: 0 4px 16px rgba(0,0,0,.4); }
:root[data-theme="dark"] .ai-badge-high { background: rgba(34,197,94,.15); color: #6fd28a; border-color: rgba(34,197,94,.35); }
:root[data-theme="dark"] .ai-badge-medium { background: rgba(234,179,8,.15); color: #f5c66f; border-color: rgba(234,179,8,.35); }
:root[data-theme="dark"] .ai-badge-low { background: rgba(148,163,184,.15); color: #c8ccd8; border-color: rgba(148,163,184,.35); }
:root[data-theme="dark"] .va-math-cta { background: var(--color-surface) !important; border-color: var(--color-border) !important; }
:root[data-theme="dark"] .va-math-cta select { background: var(--color-bg) !important; color: var(--color-text) !important; border-color: var(--color-control-border, #868fa3) !important; }
:root[data-theme="dark"] .remission-note { background: var(--surface-warning); border-color: var(--surface-warning-border); border-left-color: #f5c66f; }
:root[data-theme="dark"] .remission-note-header { color: #f5c66f; }
:root[data-theme="dark"] .remission-note p { color: var(--surface-warning-text); }
:root[data-theme="dark"] .remission-residuals-link a { color: #9dc4ff; }
:root[data-theme="dark"] .disclaimer { background: var(--surface-warning); border-color: var(--surface-warning-border); color: var(--surface-warning-text); }
:root[data-theme="dark"] .dc-ac-dropdown { background: var(--color-surface); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
:root[data-theme="dark"] .dc-ac-item { border-bottom-color: var(--color-border); }
:root[data-theme="dark"] .dc-ac-item:hover, :root[data-theme="dark"] .dc-ac-item.active { background: rgba(122,179,255,.1); }
:root[data-theme="dark"] .dc-ac-pact { background: rgba(129,199,132,.15); color: #81c784; }
:root[data-theme="dark"] .ai-disclaimer { background: var(--surface-info); border-left-color: var(--surface-info-border); color: var(--surface-info-text); }
:root[data-theme="dark"] .ai-disclaimer-icon { color: var(--surface-info-text); }
:root[data-theme="dark"] .cfr-ai { background: var(--surface-info); border-left-color: var(--surface-info-border); }
:root[data-theme="dark"] .cfr-ai-label { color: var(--surface-info-text); }
:root[data-theme="dark"] .cfr-ai-body { color: var(--color-text); }
:root[data-theme="dark"] .cfr-official { background: var(--color-surface); border-color: var(--color-border); }
:root[data-theme="dark"] .cfr-official-label { color: var(--color-text-muted); }
:root[data-theme="dark"] .cfr-official-body { color: var(--color-text); }
:root[data-theme="dark"] .bva-insights-lede { color: var(--color-text); }
:root[data-theme="dark"] .bva-subcopy { color: var(--color-text-muted); }
:root[data-theme="dark"] .bva-callout { color: var(--color-text); background: var(--color-surface); }
:root[data-theme="dark"] .bva-callout-warning { color: var(--surface-warning-text); background: var(--surface-warning); border-left-color: var(--surface-warning-border); }
:root[data-theme="dark"] .bva-methodology { color: var(--color-text-muted); }
:root[data-theme="dark"] .bva-evidence-row, :root[data-theme="dark"] .bva-evidence-header { background: var(--color-surface); }
:root[data-theme="dark"] .bva-methodology-row { background: var(--color-surface); }
:root[data-theme="dark"] .rating-dist-card { background: var(--color-surface); border-color: var(--color-border); }
:root[data-theme="dark"] .dist-system-highlight { background: rgba(232,181,74,.25); color: var(--color-text); }
:root[data-theme="dark"] .dist-top-highlight { background: rgba(232,181,74,.25); color: var(--color-text); }
:root[data-theme="dark"] .secondary-desc { color: var(--color-text-muted); }
:root[data-theme="dark"] .detail-block p { color: var(--color-text); }
:root[data-theme="dark"] .rel-well-established { background: var(--surface-success); color: var(--surface-success-text); border-color: var(--surface-success-border); }
:root[data-theme="dark"] .rel-commonly-claimed { background: var(--surface-warning); color: var(--surface-warning-text); border-color: var(--surface-warning-border); }
:root[data-theme="dark"] .rel-emerging { background: rgba(186,104,200,.15); color: #ce93d8; border-color: rgba(186,104,200,.3); }
:root[data-theme="dark"] .secondary-disclaimer { background: var(--surface-warning); color: var(--surface-warning-text); border-color: var(--surface-warning-border); }
:root[data-theme="dark"] .detail-bva { background: rgba(122,179,255,.08); border-color: rgba(122,179,255,.25); }
:root[data-theme="dark"] .pact-badge-burn-pit { background: var(--surface-danger); color: var(--surface-danger-text); border-color: var(--surface-danger-border); }
:root[data-theme="dark"] .pact-badge-agent-orange { background: var(--surface-warning); color: var(--surface-warning-text); border-color: var(--surface-warning-border); }
:root[data-theme="dark"] .pact-badge-radiation { background: rgba(186,104,200,.15); color: #ce93d8; border-color: rgba(186,104,200,.3); }
:root[data-theme="dark"] .pact-badge-gulf-war { background: var(--surface-info); color: var(--surface-info-text); border-color: var(--surface-info-border); }
:root[data-theme="dark"] .pact-badge-camp-lejeune { background: rgba(0,150,136,.15); color: #80cbc4; border-color: rgba(0,150,136,.3); }
/* Dark-mode default for form fields on /dc/* pages. Audit 2026-05-10
* found white inputs (browser default) rendering near-white text on
* white bg in dark mode, e.g. the MOS Noise lookup inputs. dc-code
* pages don't load main.css or components.css, so the rule lives here
* too. Themed via CSS vars; light mode untouched. */
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="url"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="time"],
:root[data-theme="dark"] input:not([type]),
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
background: var(--color-bg) !important;
color: var(--color-text) !important;
border-color: var(--color-control-border, #868fa3) !important;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
color: var(--color-text-muted);
opacity: 0.85;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) input[type="text"],
:root:not([data-theme="light"]) input[type="search"],
:root:not([data-theme="light"]) input[type="email"],
:root:not([data-theme="light"]) input[type="tel"],
:root:not([data-theme="light"]) input[type="number"],
:root:not([data-theme="light"]) input[type="password"],
:root:not([data-theme="light"]) input[type="url"],
:root:not([data-theme="light"]) input[type="date"],
:root:not([data-theme="light"]) input[type="time"],
:root:not([data-theme="light"]) input:not([type]),
:root:not([data-theme="light"]) select,
:root:not([data-theme="light"]) textarea {
background: var(--color-bg) !important;
color: var(--color-text) !important;
border-color: var(--color-control-border, #868fa3) !important;
}
:root:not([data-theme="light"]) input::placeholder,
:root:not([data-theme="light"]) textarea::placeholder {
color: var(--color-text-muted);
opacity: 0.85;
}
}
:root[data-theme="dark"] .residual-timeline, :root[data-theme="dark"] .residual-floor { background: rgba(0,150,136,.12); color: #80cbc4; border-left-color: #00897b; }
:root[data-theme="dark"] .et-rate-high { background: var(--surface-success); color: var(--surface-success-text); }
:root[data-theme="dark"] .et-rate-mid { background: var(--surface-warning); color: var(--surface-warning-text); }
:root[data-theme="dark"] .et-rate-low { background: var(--surface-danger); color: var(--surface-danger-text); }
:root[data-theme="dark"] .et-takeaway { background: var(--surface-success); border-left-color: var(--surface-success-border); color: var(--surface-success-text); }
:root[data-theme="dark"] .et-takeaway strong { color: var(--surface-success-text); }
:root[data-theme="dark"] .et-grants { color: #81c784; }
:root[data-theme="dark"] .et-denials { color: #ef9a9a; }
:root[data-theme="dark"] .et-heading.grants { color: #81c784; border-bottom-color: rgba(129,199,132,.35); }
:root[data-theme="dark"] .et-heading.denials { color: #ef9a9a; border-bottom-color: rgba(239,154,154,.35); }
:root[data-theme="dark"] .denial-item { background: var(--color-surface); }
:root[data-theme="dark"] .denial-item.won { background: var(--surface-success); border-left-color: var(--surface-success-border); }
:root[data-theme="dark"] .denial-item.lost { background: var(--surface-danger); border-left-color: var(--surface-danger-border); }
:root[data-theme="dark"] .denial-tip { background: var(--surface-warning); border-left-color: var(--surface-warning-border); color: var(--surface-warning-text); }
:root[data-theme="dark"] .denial-tip strong { color: var(--surface-warning-text); }
:root[data-theme="dark"] .bva-compare-good { background: var(--surface-success); border-color: var(--surface-success-border); }
:root[data-theme="dark"] .bva-compare-bad { background: var(--surface-danger); border-color: var(--surface-danger-border); }
:root[data-theme="dark"] .bva-compare-good .bva-compare-number { color: #81c784; }
:root[data-theme="dark"] .bva-compare-bad .bva-compare-number { color: #ef9a9a; }
:root[data-theme="dark"] .bva-oig-banner { background: var(--surface-warning); border-color: var(--surface-warning-border); }
:root[data-theme="dark"] .bva-oig-banner h2 { color: var(--surface-warning-text); }
:root[data-theme="dark"] .bva-oig-banner .bva-section-intro { color: var(--color-text); }
:root[data-theme="dark"] .bva-oig-stat { background: var(--color-surface); border-color: var(--surface-warning-border); }
:root[data-theme="dark"] .bva-oig-number { color: #ff8a65; }
:root[data-theme="dark"] .bva-oig-label { color: var(--color-text); }
:root[data-theme="dark"] .bva-oig-source { color: var(--color-text-muted); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .bva-oig-number { color: #ff8a65; }
:root:not([data-theme="light"]) .bva-oig-label { color: var(--color-text); }
:root:not([data-theme="light"]) .bva-oig-source { color: var(--color-text-muted); }
}
:root[data-theme="dark"] .bva-oig-card { background: var(--color-surface); border-color: var(--surface-warning-border); }
:root[data-theme="dark"] .bva-oig-card h3 { color: var(--surface-warning-text); }
:root[data-theme="dark"] .bva-oig-card p { color: var(--color-text); }
:root[data-theme="dark"] .bva-pair-rate.rate-high { color: #81c784; }
:root[data-theme="dark"] .bva-pair-rate.rate-mid { color: #f5c66f; }
:root[data-theme="dark"] .bva-pair-rate.rate-low { color: #ef9a9a; }
:root[data-theme="dark"] .bva-factors-win li strong { color: #81c784; }
:root[data-theme="dark"] .bva-factors-lose li strong { color: #ef9a9a; }
:root[data-theme="dark"] .impact-badge-increased { background: var(--surface-success); color: var(--surface-success-text); }
:root[data-theme="dark"] .impact-badge-granted { background: var(--surface-info); color: var(--surface-info-text); }
:root[data-theme="dark"] .top-pair-tag { background: var(--surface-success); color: var(--surface-success-text); }
:root[data-theme="dark"] .trans-bar-track { background: var(--color-border); }
:root[data-theme="dark"] .trans-detail-card { background: var(--color-surface); border-color: #5499eb; color: var(--color-text); }
:root[data-theme="dark"] .trans-detail-card h3 a { color: #93c5fd; }
:root[data-theme="dark"] .trans-detail-card p { color: var(--color-text-muted); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .trans-detail-card { background: var(--color-surface); border-color: #5499eb; color: var(--color-text); }
:root:not([data-theme="light"]) .trans-detail-card h3 a { color: #93c5fd; }
:root:not([data-theme="light"]) .trans-detail-card p { color: var(--color-text-muted); }
}
:root[data-theme="dark"] .trans-reset-btn { background: var(--color-surface); color: var(--color-text); }
:root[data-theme="dark"] .trans-reset-btn:hover { background: var(--color-bg); }
:root[data-theme="dark"] .judge-table tbody tr:hover { background: rgba(122,179,255,.08); }
:root[data-theme="dark"] .bva-card-legend, :root[data-theme="dark"] .bva-data-card, :root[data-theme="dark"] .bva-factors-card,
:root[data-theme="dark"] .bva-pres-stat, :root[data-theme="dark"] .top-link-card-grid,
:root[data-theme="dark"] .bva-factors-grid, :root[data-theme="dark"] .top-condition-summary { background: var(--color-surface); }
/* Headline card (BVA #1 finding), light gradient unreadable in dark */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .bva-headline-card {
background: linear-gradient(135deg, #1a1f2a, #20263a);
border-color: #5499eb;
}
}
:root[data-theme="dark"] .bva-headline-card {
background: linear-gradient(135deg, #1a1f2a, #20263a);
border-color: #5499eb;
}
/* Code-page insights / evidence sections, distinct from bva-insights-section.
These are the "What the Data Shows", "What Evidence Wins", and
"Why Claims Are Denied" collapsible cards on /dc/code/:id pages. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
.insights-section { background: var(--color-surface); border-color: var(--color-primary); }
.evidence-intro, .evidence-group-note { color: var(--color-text-muted); }
.evidence-list li { background: rgba(46,125,50,.12); border-left-color: var(--surface-success-border); }
.denial-list li { background: rgba(198,40,40,.12); border-left-color: var(--surface-danger-border); }
.evidence-text { color: var(--color-text); }
.evidence-count { color: var(--color-text-muted); }
.evidence-disclaimer { color: var(--color-text-muted); border-top-color: var(--color-border); }
.evidence-wins-section .collapsible-toggle { color: #81c784; border-bottom-color: rgba(129,199,132,.35); }
.evidence-wins-section .collapsible-toggle .toggle-icon { background: rgba(129,199,132,.15); }
.evidence-wins-section .collapsible-toggle:hover .toggle-icon { background: rgba(129,199,132,.28); }
.denial-factors-section .collapsible-toggle { color: #ef9a9a; border-bottom-color: rgba(239,154,154,.35); }
.denial-factors-section .collapsible-toggle .toggle-icon { background: rgba(239,154,154,.15); }
.denial-factors-section .collapsible-toggle:hover .toggle-icon { background: rgba(239,154,154,.28); }
}
}
:root[data-theme="dark"] .insights-section { background: var(--color-surface); border-color: var(--color-primary); }
:root[data-theme="dark"] .evidence-intro,
:root[data-theme="dark"] .evidence-group-note { color: var(--color-text-muted); }
:root[data-theme="dark"] .evidence-list li { background: rgba(46,125,50,.12); border-left-color: var(--surface-success-border); }
:root[data-theme="dark"] .denial-list li { background: rgba(198,40,40,.12); border-left-color: var(--surface-danger-border); }
:root[data-theme="dark"] .evidence-text { color: var(--color-text); }
:root[data-theme="dark"] .evidence-count { color: var(--color-text-muted); }
:root[data-theme="dark"] .evidence-disclaimer { color: var(--color-text-muted); border-top-color: var(--color-border); }
:root[data-theme="dark"] .evidence-wins-section .collapsible-toggle { color: #81c784; border-bottom-color: rgba(129,199,132,.35); }
:root[data-theme="dark"] .evidence-wins-section .collapsible-toggle .toggle-icon { background: rgba(129,199,132,.15); }
:root[data-theme="dark"] .evidence-wins-section .collapsible-toggle:hover .toggle-icon { background: rgba(129,199,132,.28); }
:root[data-theme="dark"] .denial-factors-section .collapsible-toggle { color: #ef9a9a; border-bottom-color: rgba(239,154,154,.35); }
:root[data-theme="dark"] .denial-factors-section .collapsible-toggle .toggle-icon { background: rgba(239,154,154,.15); }
:root[data-theme="dark"] .denial-factors-section .collapsible-toggle:hover .toggle-icon { background: rgba(239,154,154,.28); }
/* "Recent:" search chip row on /dc, only visible to logged-in users with history. */
.dc-recent { margin-top: .55rem; font-size: .82rem; color: var(--color-text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.dc-recent[hidden] { display: none; }
.dc-recent-label { font-weight: 500; }
.dc-recent .dc-recent-chip { font-size: .78rem; padding: .2rem .55rem; border: 1px solid var(--color-border); background: var(--color-bg); border-radius: 999px; cursor: pointer; color: var(--color-primary); font-weight: 500; }
.dc-recent .dc-recent-chip:hover { background: var(--color-primary); color: #fff; }
.dc-recent-clear { font-size: .72rem; padding: .15rem .45rem; border: 1px solid #e6c2bf; background: transparent; border-radius: 999px; cursor: pointer; color: #c0392b; }
/* ─── Roadmap #7: "Other granted decisions" wall on /dc/code/X ─── */
.og-section { }
.og-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: .5rem 0 1rem; }
.og-col { min-width: 0; }
.og-col-h { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin: 0 0 .55rem; font-weight: 700; }
.og-col-empty { font-size: .85rem; color: var(--color-text-muted); padding: .7rem .85rem; border: 1px dashed var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); margin: 0 0 .65rem; }
.og-col-empty a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.og-col-empty a:hover { text-decoration: underline; }
.og-card {
display: block;
text-decoration: none;
color: var(--color-text);
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: .65rem .8rem;
margin-bottom: .55rem;
transition: border-color .12s, background-color .12s;
}
.og-card:last-child { margin-bottom: 0; }
.og-card-bva:hover, .og-card-bva:focus-visible { border-color: var(--color-primary); background: var(--color-surface); }
.og-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .25rem; }
.og-pill {
display: inline-block; font-size: .68rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .03em;
padding: .12rem .5rem; border-radius: 999px;
background: rgba(34,139,75,.12); border: 1px solid rgba(34,139,75,.4); color: #1f7a45;
}
.og-pill-grant { background: rgba(34,139,75,.12); border-color: rgba(34,139,75,.4); color: #1f7a45; }
.og-card-rating { font-weight: 700; color: var(--color-text); font-size: .92rem; }
.og-card-cite { font-weight: 600; color: var(--color-primary); font-size: .85rem; }
.og-card-meta { font-size: .78rem; color: var(--color-text-muted); margin-top: .15rem; }
.og-card-flags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.og-flag { font-size: .68rem; padding: .1rem .45rem; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 999px; color: var(--color-text-muted); }
.og-card-note { font-size: .85rem; color: var(--color-text); margin: .35rem 0 .15rem; line-height: 1.4; }
.og-card-excerpt { font-size: .82rem; color: var(--color-text); margin: .25rem 0; line-height: 1.45; }
.og-card-foot { font-size: .72rem; color: var(--color-text-muted); margin-top: .35rem; }
.og-card-foot-link { color: var(--color-primary); font-weight: 600; }
.og-signin-cta {
margin: .5rem 0 .85rem;
padding: .7rem .9rem;
border: 1px solid var(--color-primary);
background: rgba(26,58,107,.05);
border-radius: var(--radius-sm);
text-align: center;
font-size: .92rem;
}
.og-signin-cta a { color: var(--color-primary); font-weight: 700; text-decoration: none; }
.og-signin-cta a:hover, .og-signin-cta a:focus-visible { text-decoration: underline; }
@media (max-width: 640px) {
.og-grid { grid-template-columns: 1fr; gap: .5rem; }
.og-card { padding: .55rem .7rem; }
}
/* ── Rating Ladder (Variant E) ── */
.rle-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem 1.15rem; }
.rle-seg { display: grid; gap: .35rem; margin-bottom: .85rem; }
.rle-tier { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: .55rem .35rem; text-align: center; cursor: pointer; transition: transform .12s, border-color .12s, background-color .12s; font-family: inherit; font-size: inherit; }
.rle-tier:hover { transform: translateY(-1px); }
.rle-tier-num { font-size: 1.05rem; font-weight: 800; line-height: 1; }
.rle-tier-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; margin-top: .15rem; font-weight: 600; }
/* Severity tints (inactive) */
.rle-tier-sev-80 { background: rgba(176,42,55,.06); border-color: rgba(176,42,55,.3); }
.rle-tier-sev-80 .rle-tier-num, .rle-tier-sev-80 .rle-tier-label { color: #b02a37; }
.rle-tier-sev-50 { background: rgba(176,130,0,.07); border-color: rgba(176,130,0,.3); }
.rle-tier-sev-50 .rle-tier-num, .rle-tier-sev-50 .rle-tier-label { color: #b08200; }
.rle-tier-sev-30 { background: rgba(31,122,69,.07); border-color: rgba(31,122,69,.3); }
.rle-tier-sev-30 .rle-tier-num, .rle-tier-sev-30 .rle-tier-label { color: #1f7a45; }
.rle-tier-sev-10 { background: rgba(31,122,69,.04); border-color: rgba(31,122,69,.25); }
.rle-tier-sev-10 .rle-tier-num, .rle-tier-sev-10 .rle-tier-label { color: #4a9b6e; }
.rle-tier-sev-0 { background: var(--color-bg); border-color: var(--color-border); }
.rle-tier-sev-0 .rle-tier-num, .rle-tier-sev-0 .rle-tier-label { color: var(--color-text-muted); }
/* Active, deeper version of same tint */
.rle-tier.active { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.rle-tier-sev-80.active { background: rgba(176,42,55,.16); border-color: #b02a37; }
.rle-tier-sev-50.active { background: rgba(176,130,0,.18); border-color: #b08200; }
.rle-tier-sev-30.active { background: rgba(31,122,69,.18); border-color: #1f7a45; }
.rle-tier-sev-10.active { background: rgba(31,122,69,.10); border-color: #4a9b6e; }
.rle-tier-sev-0.active { background: rgba(0,0,0,.05); border-color: var(--color-text-muted); }
/* Tabs */
.rle-tabs { display: flex; gap: .35rem; align-items: center; margin-bottom: .55rem; border-bottom: 1px solid var(--color-border); padding-bottom: .15rem; }
.rle-tab { background: transparent; border: none; padding: .45rem .75rem; font-family: inherit; font-size: .82rem; font-weight: 600; color: var(--color-text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 4px 4px 0 0; transition: background-color .12s, color .12s; }
.rle-tab:hover { color: var(--color-text); }
.rle-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
/* Plain English tab nudge, amber tint when inactive */
.rle-tab[data-mode="plain"]:not(.active) { background: rgba(232,181,74,.16); color: #8a5a00; padding-left: 1.65rem; position: relative; }
.rle-tab[data-mode="plain"]:not(.active)::before { content: "💡"; position: absolute; left: .45rem; top: 50%; transform: translateY(-50%); font-size: .9rem; }
.rle-tab[data-mode="plain"]:not(.active):hover { background: rgba(232,181,74,.28); color: #6b4400; }
/* Detail panel */
.rle-detail { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: .85rem 1rem; min-height: 80px; }
.rle-detail-pct { display: inline-block; font-size: 1.5rem; font-weight: 800; margin-right: .5rem; vertical-align: -3px; }
.rle-detail-pct-sev-80 { color: #b02a37; }
.rle-detail-pct-sev-50 { color: #b08200; }
.rle-detail-pct-sev-30 { color: #1f7a45; }
.rle-detail-pct-sev-10 { color: #4a9b6e; }
.rle-detail-pct-sev-0 { color: var(--color-text-muted); }
.rle-detail-body { font-size: .92rem; line-height: 1.55; color: var(--color-text); }
/* Focus rings */
.rle-tier:focus-visible, .rle-tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Mobile */
@media (max-width: 540px) {
/* Override inline grid-template-columns:repeat(N,1fr) so tiles wrap by
available width instead of overflowing when a DC has 7+ rating levels
(e.g. shoulder/extremity codes with major+minor splits). */
.rle-seg { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important; }
.rle-tier { padding: .4rem .2rem; }
.rle-tier-num { font-size: .88rem; }
.rle-tier-label { font-size: .6rem; }
.rle-detail-pct { font-size: 1.2rem; }
}
/* Dark mode, lighten severity colors for legibility on dark surface, and
raise the active-state background opacity since the .06-.18 tints used in
light mode disappear against a dark backdrop. */
:root[data-theme="dark"] .rle-tier-sev-80 { background: rgba(240,136,150,.10); border-color: rgba(240,136,150,.4); }
:root[data-theme="dark"] .rle-tier-sev-80 .rle-tier-num,
:root[data-theme="dark"] .rle-tier-sev-80 .rle-tier-label { color: #f08896; }
:root[data-theme="dark"] .rle-tier-sev-50 { background: rgba(240,192,96,.10); border-color: rgba(240,192,96,.4); }
:root[data-theme="dark"] .rle-tier-sev-50 .rle-tier-num,
:root[data-theme="dark"] .rle-tier-sev-50 .rle-tier-label { color: #f0c060; }
:root[data-theme="dark"] .rle-tier-sev-30 { background: rgba(95,203,135,.10); border-color: rgba(95,203,135,.4); }
:root[data-theme="dark"] .rle-tier-sev-30 .rle-tier-num,
:root[data-theme="dark"] .rle-tier-sev-30 .rle-tier-label { color: #5fcb87; }
:root[data-theme="dark"] .rle-tier-sev-10 { background: rgba(127,219,160,.06); border-color: rgba(127,219,160,.3); }
:root[data-theme="dark"] .rle-tier-sev-10 .rle-tier-num,
:root[data-theme="dark"] .rle-tier-sev-10 .rle-tier-label { color: #7fdba0; }
:root[data-theme="dark"] .rle-tier-sev-80.active { background: rgba(240,136,150,.28); border-color: #f08896; }
:root[data-theme="dark"] .rle-tier-sev-50.active { background: rgba(240,192,96,.30); border-color: #f0c060; }
:root[data-theme="dark"] .rle-tier-sev-30.active { background: rgba(95,203,135,.30); border-color: #5fcb87; }
:root[data-theme="dark"] .rle-tier-sev-10.active { background: rgba(127,219,160,.20); border-color: #7fdba0; }
:root[data-theme="dark"] .rle-tier-sev-0.active { background: rgba(255,255,255,.08); }
:root[data-theme="dark"] .rle-detail-pct-sev-80 { color: #f08896; }
:root[data-theme="dark"] .rle-detail-pct-sev-50 { color: #f0c060; }
:root[data-theme="dark"] .rle-detail-pct-sev-30 { color: #5fcb87; }
:root[data-theme="dark"] .rle-detail-pct-sev-10 { color: #7fdba0; }
/* Plain English nudge, amber tint reads OK on dark, but bump for contrast */
:root[data-theme="dark"] .rle-tab[data-mode="plain"]:not(.active) { background: rgba(232,181,74,.22); color: #f0c060; }
:root[data-theme="dark"] .rle-tab[data-mode="plain"]:not(.active):hover { background: rgba(232,181,74,.34); color: #f5d088; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .rle-tier-sev-80 { background: rgba(240,136,150,.10); border-color: rgba(240,136,150,.4); }
:root:not([data-theme="light"]) .rle-tier-sev-80 .rle-tier-num,
:root:not([data-theme="light"]) .rle-tier-sev-80 .rle-tier-label { color: #f08896; }
:root:not([data-theme="light"]) .rle-tier-sev-50 { background: rgba(240,192,96,.10); border-color: rgba(240,192,96,.4); }
:root:not([data-theme="light"]) .rle-tier-sev-50 .rle-tier-num,
:root:not([data-theme="light"]) .rle-tier-sev-50 .rle-tier-label { color: #f0c060; }
:root:not([data-theme="light"]) .rle-tier-sev-30 { background: rgba(95,203,135,.10); border-color: rgba(95,203,135,.4); }
:root:not([data-theme="light"]) .rle-tier-sev-30 .rle-tier-num,
:root:not([data-theme="light"]) .rle-tier-sev-30 .rle-tier-label { color: #5fcb87; }
:root:not([data-theme="light"]) .rle-tier-sev-10 { background: rgba(127,219,160,.06); border-color: rgba(127,219,160,.3); }
:root:not([data-theme="light"]) .rle-tier-sev-10 .rle-tier-num,
:root:not([data-theme="light"]) .rle-tier-sev-10 .rle-tier-label { color: #7fdba0; }
:root:not([data-theme="light"]) .rle-tier-sev-80.active { background: rgba(240,136,150,.28); border-color: #f08896; }
:root:not([data-theme="light"]) .rle-tier-sev-50.active { background: rgba(240,192,96,.30); border-color: #f0c060; }
:root:not([data-theme="light"]) .rle-tier-sev-30.active { background: rgba(95,203,135,.30); border-color: #5fcb87; }
:root:not([data-theme="light"]) .rle-tier-sev-10.active { background: rgba(127,219,160,.20); border-color: #7fdba0; }
:root:not([data-theme="light"]) .rle-tier-sev-0.active { background: rgba(255,255,255,.08); }
:root:not([data-theme="light"]) .rle-detail-pct-sev-80 { color: #f08896; }
:root:not([data-theme="light"]) .rle-detail-pct-sev-50 { color: #f0c060; }
:root:not([data-theme="light"]) .rle-detail-pct-sev-30 { color: #5fcb87; }
:root:not([data-theme="light"]) .rle-detail-pct-sev-10 { color: #7fdba0; }
:root:not([data-theme="light"]) .rle-tab[data-mode="plain"]:not(.active) { background: rgba(232,181,74,.22); color: #f0c060; }
:root:not([data-theme="light"]) .rle-tab[data-mode="plain"]:not(.active):hover { background: rgba(232,181,74,.34); color: #f5d088; }
}
/* ── Key Federal Regulations panel ── */
.fed-reg-table {
width: 100%;
margin-top: .75rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
overflow: hidden;
}
.fed-reg-row {
display: grid;
grid-template-columns: 130px 1fr auto;
gap: .75rem;
padding: .6rem .75rem;
align-items: center;
border-bottom: 1px solid var(--color-border);
}
.fed-reg-row:last-child { border-bottom: none; }
.fed-reg-hdr {
background: var(--color-bg);
font-size: .78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--color-text-muted);
}
.fed-reg-body .fed-reg-row:not(.fed-reg-hdr):hover { background: var(--color-bg); }
.fed-reg-cite { font-size: .85rem; font-weight: 600; color: var(--color-primary); }
.fed-reg-title { font-size: .88rem; }
.fed-reg-actions { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.fed-reg-link {
font-size: .78rem;
font-weight: 600;
padding: .2rem .5rem;
border-radius: 3px;
text-decoration: none;
white-space: nowrap;
}
.fed-reg-link:hover,
.fed-reg-link:focus-visible { text-decoration: none; outline-offset: 2px; }
.fed-reg-link-bva { background: var(--color-primary); color: #fff; }
.fed-reg-link-bva:hover,
.fed-reg-link-bva:focus-visible { background: var(--color-primary-dark, #1a3d7c); color: #fff; }
.fed-reg-link-cavc { color: var(--color-primary); border: 1px solid var(--color-primary); background: transparent; }
.fed-reg-link-cavc:hover,
.fed-reg-link-cavc:focus-visible { background: var(--color-primary); color: #fff; }
.fed-reg-intro { font-size: .9rem; color: var(--color-text-muted); margin-bottom: .75rem; }
.fed-reg-note { font-size: .75rem; color: var(--color-text-muted); font-style: italic; margin-top: .5rem; }
/* Dark mode */
:root[data-theme="dark"] .fed-reg-hdr { background: var(--color-bg-alt, #1e2433); }
:root[data-theme="dark"] .fed-reg-link-bva { background: #1f4a85; color: #fff; }
:root[data-theme="dark"] .fed-reg-link-cavc { color: var(--color-primary); border-color: var(--color-primary); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .fed-reg-link-bva { background: #1f4a85; color: #fff; }
}
@media (max-width: 640px) {
.fed-reg-row { grid-template-columns: 1fr; gap: .3rem; }
.fed-reg-hdr { display: none; }
.fed-reg-actions { justify-content: flex-start; margin-top: .2rem; }
}
/* ──────────────────────────────────────────────────────────────────────────
Secondary Condition Map (renderSecondaryGraph)
Inline SVG showing primary DC + up to 5 secondaries radiating outward.
Per docs/superpowers/plans/2026-05-22-secondary-condition-graph.md
────────────────────────────────────────────────────────────────────────── */
.secondary-graph-intro {
font-size: 0.95rem;
color: var(--color-text);
margin: 0 0 0.85rem;
line-height: var(--leading-normal);
}
.secondary-graph-wrap {
width: 100%;
max-width: 640px;
margin: 0 auto;
}
.secondary-graph-svg {
width: 100%;
height: auto;
display: block;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 0.5rem;
box-sizing: border-box;
}
/* Edges: thin baseline; color encodes BVA grant rate; thin gray when n<20 */
.sg-edge { stroke-width: 2; fill: none; opacity: 0.7; }
.sg-edge-thin { stroke: var(--color-border-strong, #b8c2d0); stroke-dasharray: 4 4; }
.sg-edge-high { stroke: #2e8540; } /* green-700 */
.sg-edge-mid { stroke: #c76b00; } /* amber-700 */
.sg-edge-low { stroke: #c62828; } /* red-700 */
/* Directional arrowhead (primary -> secondary). Neutral ink so it reads on any
edge color and in both themes; --color-text flips for dark mode. */
.sg-arrow-head { fill: var(--color-text, #2b3440); }
/* BVA Overview chart chrome (bva-charts.js svgBarH / svgStackedBar / svgMultiLine).
.bvc-svg sets the group color so .bvc-axis text resolves via currentColor in
both themes; the table fallback is visually hidden but available to AT + print. */
.bvc-fig { margin: 0; }
.bvc-svg { display: block; width: 100%; height: auto; color: var(--color-text-muted, #667); }
.bvc-axis { fill: currentColor; }
.bvc-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin: 0 0 0.4rem; padding: 0; font-size: 0.8rem; color: var(--color-text-muted); }
.bvc-legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.bvc-sw { width: 11px; height: 11px; border-radius: 2px; display: inline-block; flex: 0 0 auto; }
.bvc-fallback { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* svgPie / donut chrome (bva-charts.js svgPie). Shared here so the renderer works
on any page that loads dc.css (judge detail, etc.), not only the inline copy in
bva-search.html. */
.bvas-pie { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.bvas-pie-svg { width: 160px; height: 160px; flex: 0 0 auto; }
.bvas-pie-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 220px; min-width: 200px; max-width: 440px; font-size: .85rem; }
.bvas-pie-legend li { display: flex; align-items: center; gap: .5rem; padding: .18rem 0; }
.bvas-pie-swatch { width: .8rem; height: .8rem; border-radius: 2px; flex: 0 0 auto; }
.bvas-pie-key { flex: 1 1 auto; }
.bvas-pie-num { font-variant-numeric: tabular-nums; color: var(--color-text-muted); white-space: nowrap; }
@media (max-width: 640px) { .bvas-pie-svg { width: 130px; height: 130px; } }
/* Judge-detail charts (decisions-by-year line, branch donut) sit above the data table. */
.jd-chart { margin: 0 0 .4rem; }
.jd-data-details { margin-top: .2rem; }
.jd-data-details > summary { cursor: pointer; font-size: .85rem; color: var(--color-primary); padding: .2rem 0; }
/* BVA Overview layout (KPI cards + chart grid). Shared by the flag-gated Overview
tab on /dc/bva-search and the standalone /dc/bva-overview page. */
.bvas-ov-note { margin: .2rem 0 1rem; font-size: .85rem; color: var(--color-text-muted); }
.bvas-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 0 0 1.25rem; }
.bvas-kpi { background: var(--color-bg-alt, #f3eee0); border-radius: var(--radius-md, 8px); padding: .85rem 1rem; }
.bvas-kpi-label { font-size: .78rem; color: var(--color-text-muted); }
.bvas-kpi-val { font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--color-text); }
.bvas-kpi-sub { font-size: .72rem; color: var(--color-text-muted); margin-top: 2px; }
.bvas-ov-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; align-items: stretch; }
.bvas-ov-card { border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); padding: .85rem 1rem; display: flex; flex-direction: column; }
.bvas-ov-card h4 { font-size: .95rem; margin: 0 0 .6rem; color: var(--color-text); }
.bvas-ov-card .bvc-fig, .bvas-ov-card .bvas-pie { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.bvas-ov-card .bvas-pie-svg { width: 250px; height: 250px; }
.bvas-ov-card .bvas-pie-legend { font-size: .74rem; max-width: 320px; flex: 0 0 auto; }
.bvas-ov-card .bvas-pie-swatch { width: .68rem; height: .68rem; }
.bvas-ov-full { margin-bottom: 16px; }
.bvas-ov-full:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .bvas-ov-grid2 { grid-template-columns: 1fr; } }
/* Edge label pill */
.sg-edge-label-bg {
fill: var(--color-surface);
stroke: var(--color-border);
stroke-width: 1;
}
.sg-edge-label {
font-size: 11px;
font-weight: 600;
fill: var(--color-text);
font-family: var(--font-sans);
}
/* Node groups */
.sg-node-link { cursor: pointer; }
.sg-node-link:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: 8px; }
.sg-node-bg {
fill: var(--color-surface);
stroke: var(--color-border-strong, #b8c2d0);
stroke-width: 1.5;
transition: fill 0.15s, stroke 0.15s;
}
.sg-node-bg-primary {
fill: var(--color-primary, #1f4a85);
stroke: var(--color-primary, #1f4a85);
}
.sg-node-code {
font-size: 11px;
font-weight: 700;
font-family: var(--font-mono, monospace);
fill: var(--color-text-muted);
}
.sg-node-primary .sg-node-code { fill: rgba(255, 255, 255, 0.85); }
.sg-node-name {
font-size: 12px;
font-weight: 600;
fill: var(--color-text);
font-family: var(--font-sans);
}
.sg-node-primary .sg-node-name { fill: #fff; }
.sg-node-link:hover .sg-node-bg,
.sg-node-link:focus-visible .sg-node-bg {
fill: var(--color-bg-alt, #f3eee0);
stroke: var(--color-primary);
}
/* Table fallback (always present, collapsible via ) */
.secondary-graph-details { margin: 0.75rem 0 0; }
.secondary-graph-details summary {
font-size: 0.875rem;
cursor: pointer;
color: var(--color-primary);
padding: 0.35rem 0;
}
.secondary-graph-details summary:hover { text-decoration: underline; }
.secondary-graph-table {
width: 100%;
border-collapse: collapse;
margin-top: 0.5rem;
font-size: 0.875rem;
}
.secondary-graph-table th,
.secondary-graph-table td {
text-align: left;
padding: 0.5rem 0.65rem;
border-bottom: 1px solid var(--color-border);
}
.secondary-graph-table th { color: var(--color-text-muted); font-weight: 600; }
.secondary-graph-table a { color: var(--color-primary); }
.secondary-graph-disclaimer {
font-size: 0.75rem;
color: var(--color-text-muted);
font-style: italic;
margin: 0.75rem 0 0;
}
/* Dark mode (both manual data-theme + prefers-color-scheme) */
:root[data-theme="dark"] .sg-edge-high { stroke: #4caf50; }
:root[data-theme="dark"] .sg-edge-mid { stroke: #ffa726; }
:root[data-theme="dark"] .sg-edge-low { stroke: #ef5350; }
:root[data-theme="dark"] .sg-node-bg-primary {
fill: var(--color-primary);
stroke: var(--color-primary);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .sg-edge-high { stroke: #4caf50; }
:root:not([data-theme="light"]) .sg-edge-mid { stroke: #ffa726; }
:root:not([data-theme="light"]) .sg-edge-low { stroke: #ef5350; }
:root:not([data-theme="light"]) .sg-node-bg-primary {
fill: var(--color-primary);
stroke: var(--color-primary);
}
}
/* Mobile: stack into single column under 480px */
@media (max-width: 480px) {
.secondary-graph-svg { padding: 0.25rem; }
.sg-node-name { font-size: 11px; }
.sg-edge-label { font-size: 10px; }
}
/* Default: hide standalone mobile table; show SVG + collapsible details */
.secondary-graph-mobile-table { display: none; }
/* ============================================================
Secondary-Condition Network embed (secondary-network-graph.js)
Per-code hub-and-spoke graph + accessible list. Reuses the
sg-edge-* colors above; adds circle nodes, controls, list.
============================================================ */
.sg-embed { margin: 0.5rem 0 0; }
.sg-embed-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1rem;
margin-bottom: 0.75rem;
}
.sg-embed-control {
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text-muted);
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.sg-embed-thresh {
font-size: 0.85rem;
padding: 0.3rem 0.5rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm, 6px);
background: var(--color-bg);
color: var(--color-text);
min-height: 44px;
}
.sg-view-toggle {
font-size: 0.85rem;
font-weight: 600;
padding: 0.5rem 0.9rem;
min-height: 44px;
border: 1px solid var(--color-primary);
border-radius: var(--radius-sm, 6px);
background: var(--color-bg);
color: var(--color-primary);
cursor: pointer;
}
.sg-view-toggle:hover { background: var(--color-bg-alt, #f3eee0); }
.sg-view-toggle:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
/* Direction toggle (segmented): flip the embed between "secondary to this" and
"this claimed as a secondary to". Active button (aria-pressed) is filled. */
.sg-dir-toggle { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.75rem; }
.sg-dir-btn {
font-size: 0.85rem;
font-weight: 600;
padding: 0.5rem 0.85rem;
min-height: 44px;
border: 1px solid var(--color-border-strong, var(--color-border));
border-radius: var(--radius-sm, 6px);
background: var(--color-bg);
color: var(--color-text);
cursor: pointer;
}
.sg-dir-btn:hover { border-color: var(--color-primary); }
.sg-dir-btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.sg-dir-btn[aria-pressed="true"] { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.sg-graph-wrap { width: 100%; }
.sg-svg { width: 100%; height: auto; display: block; }
.sg-node-circle {
fill: var(--color-bg-alt, #f3eee0);
stroke: var(--color-border-strong, #b8c2d0);
stroke-width: 2;
}
.sg-node-primary .sg-node-circle {
fill: var(--color-primary);
stroke: var(--color-primary);
}
.sg-node-label {
font-size: 11px;
font-weight: 700;
fill: var(--color-text);
pointer-events: none;
}
.sg-node-primary .sg-node-label { fill: #fff; }
.sg-node-count {
font-size: 9.5px;
font-weight: 600;
fill: var(--color-text-muted);
pointer-events: none;
}
.sg-node-link { cursor: pointer; }
.sg-node-link:focus-visible { outline: none; }
.sg-node-link:focus-visible .sg-node-circle,
.sg-node-link:hover .sg-node-circle {
stroke: var(--color-primary);
stroke-width: 3;
}
.sg-graph-legend {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 1rem;
margin-top: 0.5rem;
font-size: 0.78rem;
color: var(--color-text-muted);
}
.sg-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.sg-legend-swatch { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }
.sg-legend-swatch.sg-edge-thin { border-top: 3px dashed var(--color-border-strong, #b8c2d0); height: 0; }
.sg-legend-swatch.sg-edge-high { background: #2e8540; }
.sg-legend-swatch.sg-edge-mid { background: #c76b00; }
.sg-legend-swatch.sg-edge-low { background: #c62828; }
.sg-graph-meta,
.sg-embed-note {
font-size: 0.78rem;
color: var(--color-text-muted);
margin: 0.5rem 0 0;
}
.sg-embed-note { font-style: italic; }
.sg-asec-intro { font-size: 0.9rem; color: var(--color-text); margin: 0 0 0.75rem; }
.sg-empty { font-size: 0.9rem; color: var(--color-text-muted); padding: 1rem 0; }
.sg-embed-cta { font-size: 0.85rem; margin: 0.6rem 0 0; }
.sg-embed-cta a { color: var(--color-primary); font-weight: 600; }
.sg-list-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.sg-list-table th,
.sg-list-table td {
text-align: left;
padding: 0.55rem 0.65rem;
border-bottom: 1px solid var(--color-border);
vertical-align: top;
}
.sg-list-table th { color: var(--color-text-muted); font-weight: 600; }
.sg-list-table a { color: var(--color-primary); }
.sg-list-stats { white-space: nowrap; }
.sg-list-count { display: block; font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.2rem; }
.sg-rate-badge {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
padding: 0.15rem 0.45rem;
border-radius: 999px;
}
.sg-rate-high { background: rgba(46, 133, 64, 0.15); color: #1f6e30; }
.sg-rate-mid { background: rgba(199, 107, 0, 0.15); color: #9a5300; }
.sg-rate-low { background: rgba(198, 40, 40, 0.13); color: #b02020; }
.sg-rate-thin { background: var(--color-bg-alt, #f3eee0); color: var(--color-text-muted); }
/* Dark mode (both manual data-theme + prefers-color-scheme) */
:root[data-theme="dark"] .sg-node-circle { fill: var(--color-bg-alt); stroke: var(--color-border-strong); }
:root[data-theme="dark"] .sg-node-primary .sg-node-circle { fill: var(--color-primary); stroke: var(--color-primary); }
:root[data-theme="dark"] .sg-rate-high { background: rgba(76, 175, 80, 0.2); color: #7bd389; }
:root[data-theme="dark"] .sg-rate-mid { background: rgba(255, 167, 38, 0.2); color: #ffc266; }
:root[data-theme="dark"] .sg-rate-low { background: rgba(239, 83, 80, 0.2); color: #ff8a87; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .sg-node-circle { fill: var(--color-bg-alt); stroke: var(--color-border-strong); }
:root:not([data-theme="light"]) .sg-node-primary .sg-node-circle { fill: var(--color-primary); stroke: var(--color-primary); }
:root:not([data-theme="light"]) .sg-rate-high { background: rgba(76, 175, 80, 0.2); color: #7bd389; }
:root:not([data-theme="light"]) .sg-rate-mid { background: rgba(255, 167, 38, 0.2); color: #ffc266; }
:root:not([data-theme="light"]) .sg-rate-low { background: rgba(239, 83, 80, 0.2); color: #ff8a87; }
}
/* Mobile (<560px): SVG too cramped for 5 nodes at 375px. Hide SVG and the
* desktop wrapper; show the standalone table inline. Per
* docs/superpowers/plans/2026-05-22-secondary-condition-graph.md. */
@media (max-width: 560px) {
.secondary-graph-wrap { display: none; }
.secondary-graph-details { display: none; }
.secondary-graph-mobile-table { display: block; margin: 0.5rem 0 0; }
}
/* ──────────────────────────────────────────────────────────────────────────
/dc/condition-graph (Phase 2: full interactive secondary-condition map)
Plan: docs/superpowers/plans/2026-05-22-secondary-condition-graph.md
────────────────────────────────────────────────────────────────────────── */
.cg-header { margin-bottom: 1rem; }
.cg-header h1 { margin: 0 0 0.5rem; }
.cg-lede { font-size: 1rem; line-height: var(--leading-normal); color: var(--color-text); max-width: 760px; }
.cg-disclaimer { font-size: 0.85rem; font-style: italic; color: var(--color-text-muted); max-width: 760px; }
.cg-controls {
display: grid;
grid-template-columns: minmax(180px, 1fr) minmax(140px, 1fr) minmax(220px, 2fr) auto;
gap: 0.75rem;
align-items: end;
padding: 0.85rem 1rem;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
margin-bottom: 1rem;
}
.cg-control { display: flex; flex-direction: column; gap: 0.25rem; }
.cg-control-label { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
.cg-control select,
.cg-control input[type="search"] {
width: 100%;
padding: 0.55rem 0.7rem;
font-size: 0.95rem;
border: 1px solid var(--color-border-strong, var(--color-border));
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-text);
font-family: inherit;
box-sizing: border-box;
min-height: 44px;
}
.cg-control select:focus-visible,
.cg-control input[type="search"]:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 1px;
}
.cg-view-toggle {
padding: 0.55rem 1rem;
font-size: 0.875rem;
font-weight: 600;
border: 1px solid var(--color-primary);
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-primary);
cursor: pointer;
min-height: 44px;
font-family: inherit;
}
.cg-view-toggle:hover,
.cg-view-toggle:focus-visible { background: var(--color-primary); color: #fff; outline: none; }
/* Direction toggle: appears below the controls only when a single DC code is
focused. Segmented control; the active (aria-pressed) button is filled. */
.cg-dir-control {
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 0.6rem 1rem 0.85rem;
margin: -0.5rem 0 1rem;
}
.cg-dir-hint {
margin: -0.5rem 0 1rem;
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
color: var(--color-text-muted);
background: var(--color-surface);
border: 1px dashed var(--color-border);
border-radius: var(--radius-sm);
}
.cg-dir-toggle { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cg-dir-btn {
padding: 0.5rem 0.85rem;
font-size: 0.85rem;
font-weight: 600;
border: 1px solid var(--color-border-strong, var(--color-border));
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-text);
cursor: pointer;
min-height: 44px;
font-family: inherit;
}
.cg-dir-btn:hover { border-color: var(--color-primary); }
.cg-dir-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.cg-dir-btn[aria-pressed="true"] {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
.cg-graph-wrap {
width: 100%;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 0.75rem;
box-sizing: border-box;
min-height: 480px;
}
.cg-svg { width: 100%; height: auto; max-height: 80vh; display: block; }
.cg-loading,
.cg-empty { color: var(--color-text-muted); padding: 2rem 0.5rem; text-align: center; font-size: 0.95rem; }
/* Edges */
.cg-edge { stroke-width: 1.2; opacity: 0.55; }
.cg-edge-thin { stroke: var(--color-border-strong, #b8c2d0); stroke-dasharray: 4 4; opacity: 0.35; }
.cg-edge-high { stroke: #2e8540; }
.cg-edge-mid { stroke: #c76b00; }
.cg-edge-low { stroke: #c62828; }
/* Edge color key. Each band carries a text label, so meaning never relies on
color alone (WCAG 1.4.1). */
.cg-legend { display: flex; flex-wrap: wrap; gap: 0.45rem 1.1rem; align-items: center; margin: 0.7rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--color-border); font-size: 0.8rem; color: var(--color-text-muted); }
.cg-legend-title { font-weight: 600; color: var(--color-text); flex-basis: 100%; margin-bottom: 0.1rem; }
.cg-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.cg-legend-swatch { display: inline-block; width: 26px; height: 0; border-top: 3px solid currentColor; }
.cg-legend-high { color: #2e8540; }
.cg-legend-mid { color: #c76b00; }
.cg-legend-low { color: #c62828; }
.cg-legend-thin { color: var(--color-border-strong, #b8c2d0); border-top-style: dashed; border-top-width: 2px; }
/* Nodes */
.cg-node-link { cursor: pointer; }
.cg-node-link:focus-visible .cg-node-circle { stroke: var(--color-primary); stroke-width: 3; }
.cg-node-circle {
fill: var(--color-surface);
stroke: var(--color-border-strong, #b8c2d0);
stroke-width: 1.5;
transition: fill 0.12s, stroke 0.12s;
}
.cg-node-link:hover .cg-node-circle { fill: var(--color-bg-alt, #f3eee0); stroke: var(--color-primary); }
/* Spotlight: hover/focus a node -> it + connected nodes pop, rest dim.
Click locks the view; an anchored popup offers the node's page link. */
#cg-graph-wrap { position: relative; }
/* Locked-node popup. Sits in normal flow BELOW the graph as a wide horizontal
strip (two direction lists side by side, actions on the right) so it never
covers nodes. Hidden entirely on phones (see the max-width:640px block). */
.cg-popup {
position: relative;
z-index: 5;
width: 100%;
box-sizing: border-box;
margin-top: 0.85rem;
background: var(--color-surface);
border: 1px solid var(--color-primary);
border-radius: var(--radius-md);
box-shadow: 0 4px 14px rgba(0,0,0,0.10);
padding: 0.7rem 0.85rem;
font-size: 0.85rem;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(150px, max-content);
gap: 0.35rem 1.4rem;
align-items: start;
/* The graph wrap can scroll horizontally on small screens; iOS then
auto-inflates text inside it. Pin the adjustment so the popup stays
its intended size. */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
.cg-popup-title { grid-column: 1 / -1; }
.cg-popup-body { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; min-width: 0; }
.cg-popup-body .cg-popup-dir { flex: 1 1 200px; min-width: 0; margin: 0.15rem 0; }
.cg-popup-actions { display: flex; flex-direction: column; gap: 0.45rem; justify-content: center; min-width: 150px; }
.cg-popup-actions .cg-popup-close { width: 100%; margin-top: 0; }
.cg-popup-title { font-weight: 700; color: var(--color-primary); line-height: 1.25; }
.cg-popup-meta { color: var(--color-text-muted); font-size: 0.78rem; margin: 0.15rem 0 0.5rem; }
.cg-popup-open {
display: block;
text-align: center;
background: var(--color-primary);
color: #fff;
text-decoration: none;
font-weight: 600;
padding: 0.4rem 0.5rem;
border-radius: var(--radius-sm, 6px);
min-height: 36px;
line-height: 1.4;
}
.cg-popup-open:hover { filter: brightness(1.08); }
/* Dark theme flips --color-primary light; white text on it fails contrast.
Use dark ink on the light-blue button instead. Both dark mechanisms. */
:root[data-theme="dark"] .cg-popup-open { color: #0e2a4d; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .cg-popup-open { color: #0e2a4d; }
}
.cg-popup-close {
display: block;
width: 100%;
margin-top: 0.4rem;
background: transparent;
border: 1px solid var(--color-border);
color: var(--color-text-muted);
border-radius: var(--radius-sm, 6px);
padding: 0.3rem;
min-height: 32px;
cursor: pointer;
font: inherit;
}
.cg-popup-close:hover { color: var(--color-text); border-color: var(--color-border-strong, #b8c2d0); }
.cg-node-circle { transition: fill 0.12s, stroke 0.12s, r 0.12s, stroke-width 0.12s; }
.cg-svg.cg-spotlight .cg-node-link { transition: opacity 0.12s; }
.cg-svg.cg-spotlight .cg-node-link:not(.cg-hl) { opacity: 0.16; }
.cg-svg.cg-spotlight .cg-edge:not(.cg-hl) { opacity: 0.06; }
.cg-svg.cg-spotlight .cg-edge.cg-hl { opacity: 0.95; stroke-width: 2.2; }
.cg-node-link.cg-hl .cg-node-circle { r: 17; stroke: var(--color-primary); stroke-width: 2.5; }
.cg-node-link.cg-hl-center .cg-node-circle { r: 20; stroke-width: 3; }
/* Directional spotlight. A focused node's links carry an arrowhead pointing to
the SECONDARY condition (cause -> effect). Neighbours are ringed by role:
teal = secondary TO the focus (downstream); purple = the focus is secondary
to it (upstream); dashed gray = the relationship runs both ways. */
.cg-arrow-head { fill: var(--color-text, #2b3440); }
.cg-node-link.cg-hl-sec .cg-node-circle { stroke: #0f8a8a; stroke-width: 3.5; }
.cg-node-link.cg-hl-prim .cg-node-circle { stroke: #7b4fc0; stroke-width: 3.5; }
.cg-node-link.cg-hl-both .cg-node-circle { stroke: #6b7280; stroke-width: 3.5; stroke-dasharray: 3 2; }
/* Split popup: the two directions, each as its own short list. */
.cg-popup-dir { margin: 0.5rem 0 0.35rem; }
.cg-popup-dir-head { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-text-muted); margin-bottom: 0.2rem; }
.cg-popup-n { margin-left: auto; font-weight: 700; color: var(--color-text); }
.cg-dir-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.cg-dir-sec { background: #0f8a8a; }
.cg-dir-prim { background: #7b4fc0; }
.cg-popup-ul { list-style: none; margin: 0; padding: 0; font-size: 0.8rem; }
.cg-popup-ul li { padding: 0.08rem 0; line-height: 1.3; }
.cg-popup-ul a { color: var(--color-primary); text-decoration: none; }
.cg-popup-ul a:hover { text-decoration: underline; }
.cg-popup-rate { color: var(--color-text-muted); font-size: 0.72rem; margin-left: 0.3rem; }
.cg-popup-empty, .cg-popup-more { color: var(--color-text-muted); font-style: italic; font-size: 0.74rem; }
/* Direction key in the graph legend (rings match the spotlighted node outlines). */
.cg-legend-break { flex-basis: 100%; height: 0; margin: 0.2rem 0 0; }
.cg-legend-ring { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid transparent; background: transparent; vertical-align: middle; }
.cg-legend-ring-sec { border-color: #0f8a8a; }
.cg-legend-ring-prim { border-color: #7b4fc0; }
.cg-legend-ring-both { border-color: #6b7280; border-style: dashed; }
/* Both-direction blocks inside a list-view row. */
.cg-list-dir { margin: 0 0 0.55rem; }
.cg-list-dir:last-child { margin-bottom: 0; }
.cg-list-dir-head { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 700; color: var(--color-text-muted); margin: 0 0 0.2rem; }
.cg-node-label {
font-size: 10px;
font-weight: 700;
font-family: var(--font-mono, monospace);
fill: var(--color-text);
pointer-events: none;
}
/* Body-system color hints on circle fill. Subtle; the legend is the
* disclaimer text above + the label. */
.cg-bs-mental-disorders .cg-node-circle { fill: #e3f0ff; }
.cg-bs-musculoskeletal-system .cg-node-circle { fill: #f0e3d6; }
.cg-bs-respiratory-system .cg-node-circle { fill: #e6f3ec; }
.cg-bs-cardiovascular-system .cg-node-circle { fill: #fde0e0; }
.cg-bs-neurological-conditions-and-convulsive-disorders .cg-node-circle { fill: #ede1f7; }
.cg-bs-digestive-system .cg-node-circle { fill: #fff6d6; }
.cg-bs-endocrine-system .cg-node-circle { fill: #e0f5f7; }
.cg-bs-genitourinary-system .cg-node-circle { fill: #f3e6ed; }
.cg-bs-skin .cg-node-circle { fill: #f7eddf; }
.cg-bs-ear .cg-node-circle { fill: #e8e8ef; }
.cg-bs-eye .cg-node-circle { fill: #dff1ff; }
.cg-bs-gynecological-conditions .cg-node-circle { fill: #f8e1ec; }
.cg-bs-infectious-diseases-immune-disorders-and-nutritional-deficiencies .cg-node-circle { fill: #eaecec; }
.cg-graph-meta {
font-size: 0.8rem;
color: var(--color-text-muted);
margin-top: 0.5rem;
text-align: right;
}
/* List/table view */
.cg-list-intro { color: var(--color-text-muted); margin: 0 0 1rem; }
.cg-list-system { margin: 1.5rem 0; padding-top: 0.5rem; border-top: 1px solid var(--color-border); }
.cg-list-system:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.cg-list-system h2 { font-size: 1.15rem; margin: 0 0 0.5rem; color: var(--color-text-strong, var(--color-text)); }
.cg-list-count { font-size: 0.875rem; color: var(--color-text-muted); font-weight: 400; }
.cg-list-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.cg-list-table th { text-align: left; padding: 0.5rem 0.65rem; color: var(--color-text-muted); font-weight: 600; border-bottom: 1px solid var(--color-border); }
.cg-list-table td { padding: 0.6rem 0.65rem; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.cg-list-table a { color: var(--color-primary); }
.cg-list-outs { margin: 0; padding-left: 1.1rem; }
.cg-list-outs li { margin: 0.2rem 0; font-size: 0.875rem; }
.cg-list-empty { font-size: 0.85rem; color: var(--color-text-muted); font-style: italic; }
.cg-list-more { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.3rem; }
.cg-footer { margin: 2rem 0 1rem; font-size: 0.85rem; color: var(--color-text-muted); }
/* Dark mode adjustments. CSS vars handle the bulk; only the body-system
* pastel fills need manual overrides because they're hardcoded hex. */
:root[data-theme="dark"] .cg-bs-mental-disorders .cg-node-circle { fill: #1a3554; }
:root[data-theme="dark"] .cg-bs-musculoskeletal-system .cg-node-circle { fill: #3a2f1f; }
:root[data-theme="dark"] .cg-bs-respiratory-system .cg-node-circle { fill: #1f3c2b; }
:root[data-theme="dark"] .cg-bs-cardiovascular-system .cg-node-circle { fill: #4a2424; }
:root[data-theme="dark"] .cg-bs-neurological-conditions-and-convulsive-disorders .cg-node-circle { fill: #2e2342; }
:root[data-theme="dark"] .cg-bs-digestive-system .cg-node-circle { fill: #3a3320; }
:root[data-theme="dark"] .cg-bs-endocrine-system .cg-node-circle { fill: #1d3c40; }
:root[data-theme="dark"] .cg-bs-genitourinary-system .cg-node-circle { fill: #3a2536; }
:root[data-theme="dark"] .cg-bs-skin .cg-node-circle { fill: #3a2e1f; }
:root[data-theme="dark"] .cg-bs-ear .cg-node-circle { fill: #292934; }
:root[data-theme="dark"] .cg-bs-eye .cg-node-circle { fill: #1c3140; }
:root[data-theme="dark"] .cg-bs-gynecological-conditions .cg-node-circle { fill: #3d2230; }
:root[data-theme="dark"] .cg-bs-infectious-diseases-immune-disorders-and-nutritional-deficiencies .cg-node-circle { fill: #2a2d2d; }
:root[data-theme="dark"] .cg-node-label { fill: #f0f3f7; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .cg-node-label { fill: #f0f3f7; }
}
@media (max-width: 640px) {
.cg-controls { grid-template-columns: 1fr; }
/* List view is the default on mobile (set by JS), but the graph must */
/* stay available when the user taps "View as graph". Visibility is */
/* driven by the [hidden] attribute the JS toggles, NOT a flat */
/* display:none here, or tapping the toggle would blank the page. */
.cg-graph-wrap { min-height: 320px; overflow-x: auto; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Phones: tapping a node SELECTS (focuses) it; its detail panel renders as a
pinned bottom sheet (single column, scrollable) so it stays on-screen even
while the graph above scrolls horizontally. The "Open DC X page" link inside
it is how a phone user reaches the code page (tap no longer navigates). */
.cg-popup {
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: auto;
margin: 0;
grid-template-columns: 1fr;
gap: 0.5rem;
max-height: 65vh;
overflow-y: auto;
border-radius: var(--radius-md) var(--radius-md) 0 0;
box-shadow: 0 -6px 20px rgba(0,0,0,0.22);
z-index: 60;
}
.cg-popup-actions { flex-direction: row; min-width: 0; }
.cg-popup-actions .cg-popup-open,
.cg-popup-actions .cg-popup-close { flex: 1 1 0; min-height: 44px; display: flex; align-items: center; justify-content: center; }
}
.secondary-graph-fullmap-cta { font-size: 0.875rem; margin: 0.5rem 0 0; }
.secondary-graph-fullmap-cta a { color: var(--color-primary); font-weight: 600; }
.secondary-graph-fullmap-cta a:hover,
.secondary-graph-fullmap-cta a:focus-visible { text-decoration: underline; }
/* ──────────────────────────────────────────────────────────────────────────
/dc/cancer-residuals, cancer→residual network + per-cancer list.
Plan: docs/superpowers/plans/2026-05-22-cancer-residuals-network.md
────────────────────────────────────────────────────────────────────────── */
.cr-header { margin-bottom: 1rem; }
.cr-header h1 { margin: 0 0 0.5rem; }
.cr-lede { font-size: 1rem; line-height: var(--leading-normal); color: var(--color-text); max-width: 760px; }
.cr-disclaimer { font-size: 0.85rem; font-style: italic; color: var(--color-text-muted); max-width: 760px; }
.cr-controls {
display: grid;
grid-template-columns: minmax(220px, 2fr) minmax(160px, 1fr) auto;
gap: 0.75rem;
align-items: end;
padding: 0.85rem 1rem;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
margin-bottom: 1rem;
}
.cr-control { display: flex; flex-direction: column; gap: 0.25rem; }
.cr-control-label { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
.cr-control select {
width: 100%;
padding: 0.55rem 0.7rem;
font-size: 0.95rem;
border: 1px solid var(--color-border-strong, var(--color-border));
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-text);
font-family: inherit;
box-sizing: border-box;
min-height: 44px;
}
.cr-control select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
/* Search-by-cancer-name box, sits above the filter controls; type a common name
(e.g. "prostate cancer") to auto-select the matching diagnostic code. */
.cr-search { display: flex; flex-direction: column; gap: 0.25rem; margin: 0 0 0.85rem; }
.cr-search input {
width: 100%;
padding: 0.6rem 0.75rem;
font-size: 1rem;
border: 1px solid var(--color-border-strong, var(--color-border));
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-text);
font-family: inherit;
box-sizing: border-box;
min-height: 44px;
}
.cr-search input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.cr-search-hint { font-size: 0.8rem; color: var(--color-text-muted); min-height: 1em; }
.cr-search-hint.cr-search-hit { color: var(--color-primary); font-weight: 600; }
.cr-view-toggle {
padding: 0.55rem 1rem;
font-size: 0.875rem;
font-weight: 600;
border: 1px solid var(--color-primary);
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-primary);
cursor: pointer;
min-height: 44px;
font-family: inherit;
}
.cr-view-toggle:hover,
.cr-view-toggle:focus-visible { background: var(--color-primary); color: #fff; outline: none; }
.cr-graph-wrap {
width: 100%;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 0.75rem;
box-sizing: border-box;
min-height: 480px;
}
.cr-svg { width: 100%; height: auto; max-height: 80vh; display: block; }
.cr-loading,
.cr-empty { color: var(--color-text-muted); padding: 2rem 0.5rem; text-align: center; font-size: 0.95rem; }
.cr-edge { stroke-width: 1.5; opacity: 0.65; fill: none; }
.cr-edge-common { stroke: var(--color-primary, #1f4a85); opacity: 0.75; }
.cr-edge-possible { stroke: #c76b00; stroke-dasharray: 5 4; opacity: 0.7; }
.cr-edge-rare { stroke: var(--color-border-strong, #b8c2d0); stroke-dasharray: 2 6; opacity: 0.5; }
.cr-node-link { cursor: pointer; }
.cr-node-link:focus-visible .cr-node-circle { stroke: var(--color-primary); stroke-width: 3; }
.cr-node-circle {
fill: var(--color-surface);
stroke: var(--color-border-strong, #b8c2d0);
stroke-width: 1.5;
transition: fill 0.12s, stroke 0.12s;
}
.cr-node-parent .cr-node-circle {
fill: var(--color-primary, #1f4a85);
stroke: var(--color-primary, #1f4a85);
}
.cr-node-residual .cr-node-circle { fill: #fff6d6; stroke: #c76b00; }
.cr-node-link:hover .cr-node-circle { stroke: var(--color-primary); }
/* Spotlight: hover/focus a node -> it + connected nodes pop, rest dim.
Click locks (freezes) the view; an anchored popup offers the page link. */
#cr-graph-wrap { position: relative; }
.cr-node-circle { transition: fill 0.12s, stroke 0.12s, stroke-width 0.12s, transform 0.12s; }
.cr-svg.cr-spotlight .cr-node-link { transition: opacity 0.12s; }
.cr-svg.cr-spotlight .cr-node-link:not(.cr-hl) { opacity: 0.16; }
.cr-svg.cr-spotlight .cr-edge:not(.cr-hl) { opacity: 0.06; }
.cr-svg.cr-spotlight .cr-edge.cr-hl { opacity: 0.95; stroke-width: 2.4; }
.cr-node-link.cr-hl .cr-node-circle {
stroke: var(--color-primary); stroke-width: 2.5;
transform: scale(1.3); transform-box: fill-box; transform-origin: center;
}
.cr-node-link.cr-hl-center .cr-node-circle { stroke-width: 3; transform: scale(1.55); }
.cr-popup {
position: static;
z-index: auto;
width: 100%;
max-width: none;
margin-top: 0.85rem;
background: var(--color-surface);
border: 1px solid var(--color-primary);
border-radius: var(--radius-md);
box-shadow: 0 4px 14px rgba(0,0,0,0.10);
padding: 0.85rem 1rem;
font-size: 0.9rem;
box-sizing: border-box;
}
.cr-popup-title { font-weight: 700; color: var(--color-primary); line-height: 1.25; }
.cr-popup-meta { color: var(--color-text-muted); font-size: 0.78rem; margin: 0.15rem 0 0.5rem; }
/* Clickable residual list inside the bottom panel (DC XXXX, Name + Common/Possible) */
.cr-popup-list-h { font-size: 0.78rem; font-weight: 700; color: var(--color-text-muted); margin: 0.5rem 0 0.35rem; }
.cr-popup-list { list-style: none; margin: 0 0 0.6rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.3rem 1.1rem; }
.cr-popup-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; font-size: 0.85rem; line-height: 1.3; padding-bottom: 0.2rem; border-bottom: 1px solid var(--color-border); }
.cr-popup-list a { color: var(--color-primary); text-decoration: none; font-weight: 600; }
.cr-popup-list a:hover { text-decoration: underline; }
/* Reuse the existing list-view frequency badge (.cr-freq-badge + .cr-freq-common/possible,
already themed for light + dark below) so graph and list share one color language. */
.cr-popup-list .cr-freq-badge { flex: none; }
.cr-popup-open {
display: block;
text-align: center;
background: var(--color-primary);
color: #fff;
text-decoration: none;
font-weight: 600;
padding: 0.4rem 0.5rem;
border-radius: var(--radius-sm, 6px);
min-height: 36px;
line-height: 1.4;
}
.cr-popup-open:hover { filter: brightness(1.08); }
:root[data-theme="dark"] .cr-popup-open { color: #0e2a4d; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .cr-popup-open { color: #0e2a4d; }
}
.cr-popup-close {
display: block;
width: 100%;
margin-top: 0.4rem;
background: transparent;
border: 1px solid var(--color-border);
color: var(--color-text-muted);
border-radius: var(--radius-sm, 6px);
padding: 0.3rem;
min-height: 32px;
cursor: pointer;
font: inherit;
}
.cr-popup-close:hover { color: var(--color-text); border-color: var(--color-border-strong, #b8c2d0); }
/* VA.gov claim-form labels (which specific cancers fall under a DC code) */
.cr-popup-va { margin: 0.1rem 0 0.5rem; padding-top: 0.4rem; border-top: 1px solid var(--color-border); max-height: 220px; overflow-y: auto; }
.cr-popup-va-h { font-size: 0.72rem; color: var(--color-text-muted); margin-bottom: 0.2rem; }
.cr-popup-va-item { font-size: 0.82rem; font-weight: 700; color: var(--color-primary); line-height: 1.3; }
.cr-popup-va-note { font-size: 0.7rem; color: var(--color-text-muted); margin-top: 0.2rem; }
.cr-list-va { background: rgba(217,162,71,.06); border: 2px solid var(--color-accent-light); border-radius: 8px; padding: 0.7rem 0.9rem; margin: 0 0 0.85rem; }
.cr-list-va-h { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 0.4rem; }
.cr-list-va-item { display: inline-block; font-size: 0.92rem; font-weight: 700; color: var(--color-primary); margin: 0 0.5rem 0.3rem 0; }
.cr-list-va-note { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.25rem; }
.cr-node-label {
font-size: 10px;
font-weight: 700;
font-family: var(--font-mono, monospace);
fill: var(--color-text);
pointer-events: none;
}
.cr-node-parent .cr-node-label { fill: #fff; }
.cr-graph-legend {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
margin-top: 0.65rem;
font-size: 0.85rem;
color: var(--color-text-muted);
}
.cr-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.cr-legend-swatch {
display: inline-block;
width: 22px;
height: 4px;
border-radius: 2px;
background: var(--color-border-strong);
}
.cr-legend-swatch.cr-edge-common { background: var(--color-primary); height: 4px; }
.cr-legend-swatch.cr-edge-possible {
background: linear-gradient(to right, #c76b00 0 5px, transparent 5px 9px, #c76b00 9px 14px, transparent 14px 18px, #c76b00 18px 22px);
}
.cr-legend-swatch.cr-node-parent-swatch {
width: 14px; height: 14px; border-radius: 50%;
background: var(--color-primary);
}
.cr-legend-swatch.cr-node-residual-swatch {
width: 12px; height: 12px; border-radius: 50%;
background: #fff6d6; border: 1.5px solid #c76b00;
}
.cr-graph-meta {
font-size: 0.8rem;
color: var(--color-text-muted);
margin-top: 0.5rem;
text-align: right;
}
.cr-list-intro { color: var(--color-text-muted); margin: 0 0 1rem; }
.cr-list-parent { margin: 1.75rem 0; padding-top: 0.75rem; border-top: 1px solid var(--color-border); }
.cr-list-parent:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.cr-list-parent h2 { font-size: 1.1rem; margin: 0 0 0.35rem; }
.cr-list-parent h2 a { color: var(--color-text-strong, var(--color-text)); }
.cr-transition-note {
margin: 0.3rem 0 0.8rem;
padding: 0.55rem 0.8rem;
font-size: 0.875rem;
color: var(--color-text);
background: var(--color-bg-alt, #f3eee0);
border-left: 3px solid var(--color-accent, var(--color-primary));
border-radius: 4px;
}
.cr-list-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.cr-list-table th {
text-align: left;
padding: 0.5rem 0.65rem;
color: var(--color-text-muted);
font-weight: 600;
border-bottom: 1px solid var(--color-border);
}
.cr-list-table td {
padding: 0.65rem;
border-bottom: 1px solid var(--color-border);
vertical-align: top;
}
.cr-list-table td:first-child { width: 38%; }
.cr-row-meta { display: flex; gap: 0.35rem; margin-top: 0.35rem; flex-wrap: wrap; }
.cr-freq-badge {
display: inline-block;
padding: 0.1rem 0.5rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
border-radius: 999px;
background: var(--color-bg-alt, #f3eee0);
color: var(--color-text);
border: 1px solid var(--color-border);
}
.cr-freq-common { background: #e3f0ff; border-color: #1f4a85; color: #1f4a85; }
.cr-freq-possible { background: #fff0d8; border-color: #c76b00; color: #c76b00; }
.cr-floor-badge {
display: inline-block;
padding: 0.1rem 0.5rem;
font-size: 0.7rem;
font-weight: 700;
border-radius: 999px;
background: var(--color-surface);
color: var(--color-text-muted);
border: 1px solid var(--color-border);
}
.cr-row-desc { font-size: 0.875rem; margin: 0 0 0.4rem; color: var(--color-text); line-height: var(--leading-normal); }
.cr-row-evidence { font-size: 0.825rem; margin: 0; color: var(--color-text-muted); line-height: var(--leading-normal); }
.cr-row-source { font-size: 0.75rem; font-style: italic; margin: 0.35rem 0 0; color: var(--color-text-muted); line-height: var(--leading-normal); }
.cr-footer { margin: 2rem 0 1rem; font-size: 0.85rem; color: var(--color-text-muted); }
.cr-footer a { color: var(--color-primary); }
:root[data-theme="dark"] .cr-node-residual .cr-node-circle { fill: #3a3320; stroke: #ffa726; }
:root[data-theme="dark"] .cr-freq-common { background: #1a3554; border-color: #5b8fd6; color: #cfdef5; }
:root[data-theme="dark"] .cr-freq-possible { background: #3a2f1f; border-color: #ffa726; color: #ffd28a; }
:root[data-theme="dark"] .cr-edge-possible { stroke: #ffa726; }
:root[data-theme="dark"] .cr-node-label { fill: #f0f3f7; }
:root[data-theme="dark"] .cr-node-parent .cr-node-label { fill: #fff; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .cr-node-residual .cr-node-circle { fill: #3a3320; stroke: #ffa726; }
:root:not([data-theme="light"]) .cr-freq-common { background: #1a3554; border-color: #5b8fd6; color: #cfdef5; }
:root:not([data-theme="light"]) .cr-freq-possible { background: #3a2f1f; border-color: #ffa726; color: #ffd28a; }
:root:not([data-theme="light"]) .cr-edge-possible { stroke: #ffa726; }
:root:not([data-theme="light"]) .cr-node-label { fill: #f0f3f7; }
:root:not([data-theme="light"]) .cr-node-parent .cr-node-label { fill: #fff; }
}
@media (max-width: 640px) {
.cr-controls { grid-template-columns: 1fr; }
.cr-graph-wrap { display: none; }
.cr-list-table td:first-child { width: 45%; }
}
.residual-fullmap-cta { font-size: 0.875rem; margin: 0.75rem 0 0; }
.residual-fullmap-cta a { color: var(--color-primary); font-weight: 600; }
.residual-fullmap-cta a:hover, .residual-fullmap-cta a:focus-visible { text-decoration: underline; }
/* Shared "Related Guides & Tools" card grid (replaces the older bullet-list
Related sections for a consistent look across guide/reference pages). */
.rel-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin-top: 0.6rem; }
.rel-card { display: block; text-decoration: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem 1.1rem; transition: border-color .12s; }
.rel-card:hover, .rel-card:focus-visible { border-color: var(--color-primary); }
.rel-card .rc-t { font-weight: 700; color: var(--color-primary); margin-bottom: 0.25rem; font-size: 0.95rem; }
.rel-card .rc-d { font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.5; }
@media (max-width: 640px) { .rel-cards { grid-template-columns: 1fr; } }
/* BVA Search Simple interface */
.bvas-iface { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 1rem 0 .25rem; }
.bvas-iface-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.bvas-iface-opt span { display: inline-block; padding: .45rem 1rem; font-weight: 600; border: 2px solid var(--color-border); border-radius: 999px; cursor: pointer; color: var(--color-text); background: var(--color-surface); }
.bvas-iface-opt input:checked + span { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.bvas-iface-opt input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.bvas-guide-link { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font-size: .95rem; font-weight: 800; color: #0e2a4d; background: var(--color-accent, #d9a247); border: 2px solid var(--color-accent, #d9a247); padding: .55rem 1rem; border-radius: 999px; text-decoration: none; box-shadow: 0 2px 10px rgba(217,162,71,.45); }
.bvas-guide-link::before { content: "\1F4D8"; font-size: 1.05em; }
.bvas-guide-link:hover, .bvas-guide-link:focus-visible { background: #e8b45a; border-color: #e8b45a; }
@media (max-width: 640px) { .bvas-guide-link { margin-left: 0; width: 100%; justify-content: center; } }
.bvas-era-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .7rem .85rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); margin-bottom: 1rem; }
.bvas-era-label { font-weight: 700; color: var(--color-text); }
.bvas-era-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.bvas-era-opt > span { display: inline-block; padding: .35rem .8rem; font-size: .9rem; font-weight: 600; border: 2px solid var(--color-border); border-radius: 999px; cursor: pointer; color: var(--color-text); background: var(--color-bg); }
.bvas-era-opt input:checked + span { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.bvas-era-note { flex-basis: 100%; margin: .15rem 0 0; font-size: .82rem; color: var(--color-text-muted); }
/* Prominent thin-modern-sample warning (shown above results in any output). */
.bvas-simple-note { display: flex; align-items: flex-start; gap: .55rem; margin: 1rem 0; padding: .85rem 1rem; font-size: .95rem; font-weight: 600; line-height: 1.5; color: var(--color-text); background: color-mix(in srgb, var(--color-warning, #d9a247) 16%, var(--color-surface)); border: 1px solid var(--color-warning, #d9a247); border-left: 5px solid var(--color-warning, #d9a247); border-radius: var(--radius-md); }
.bvas-simple-note-i { font-size: 1.15rem; line-height: 1.25; flex: 0 0 auto; }
.bvas-simple-note[hidden] { display: none; }
.bvas-q-group-h { font-size: 1rem; font-weight: 700; color: var(--color-text); margin: 1.25rem 0 .5rem; }
/* Collapsible Simple sections + explicit Expand/Collapse word (section + card). */
.bvas-q-section { margin: 0 0 .85rem; }
.bvas-q-section-h { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .75rem; text-align: left; cursor: pointer; min-height: 50px; padding: .85rem 1.1rem; font-size: 1.05rem; font-weight: 800; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.bvas-q-section-h:hover { background: var(--color-bg); }
.bvas-q-section-h:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Gold section titles (deeper gold on light for AA as large bold text, bright
gold on dark) so the 4 main sections stand apart from the navy sub-card titles. */
.bvas-q-section-title { flex: 1 1 auto; font-size: 1.2rem; color: #b8860b; }
:root[data-theme="dark"] .bvas-q-section-title { color: #e8b45a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bvas-q-section-title { color: #e8b45a; } }
.bvas-q-section-body { display: none; padding: .6rem 0 .2rem; }
.bvas-q-section.open .bvas-q-section-body { display: block; }
.bvas-q-toggle { flex: 0 0 auto; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary); border: 1px solid var(--color-border); border-radius: 999px; padding: .2rem .55rem; }
.bvas-q-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); margin-bottom: .6rem; overflow: hidden; }
.bvas-q-head { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: .9rem 1rem; font-size: 1rem; font-weight: 600; color: var(--color-text); display: flex; justify-content: space-between; align-items: center; gap: .75rem; min-height: 44px; }
.bvas-q-head:hover { background: var(--color-bg); }
.bvas-q-head-text { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; flex: 1 1 auto; min-width: 0; }
.bvas-q-sub { font-size: .8rem; font-weight: 400; font-style: italic; color: var(--color-text-muted); }
.bvas-q-head .bvas-q-caret { color: var(--color-text-muted); transition: transform .15s; flex: 0 0 auto; }
.bvas-q-card.open .bvas-q-caret { transform: rotate(90deg); }
.bvas-q-body { display: none; padding: 0 1rem 1rem; }
.bvas-q-card.open .bvas-q-body { display: block; }
.bvas-q-body label.bvas-q-field { display: block; font-size: .85rem; color: var(--color-text-muted); margin: .4rem 0 .15rem; }
.bvas-q-body input[type="text"] { width: 100%; box-sizing: border-box; padding: .6rem .7rem; font-size: 1rem; border: 1px solid var(--color-control-border, #767f8f); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); }
.bvas-q-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .55rem 0; }
.bvas-q-chip { font-size: .85rem; padding: .4rem .7rem; min-height: 36px; border: 2px solid var(--color-border); background: var(--color-bg); border-radius: 999px; cursor: pointer; color: var(--color-text); }
.bvas-q-chip[aria-pressed="true"] { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.bvas-q-switch { display: inline-flex; border: 1px solid var(--color-border); border-radius: 999px; overflow: hidden; margin: .25rem 0 .6rem; }
.bvas-q-switch button { padding: .4rem .9rem; font-size: .85rem; font-weight: 600; background: var(--color-bg); color: var(--color-text); border: 0; cursor: pointer; min-height: 40px; }
.bvas-q-switch button[aria-pressed="true"] { background: var(--color-primary); color: #fff; }
.bvas-q-run { width: 100%; margin-top: .4rem; padding: .7rem 1rem; font-size: 1rem; font-weight: 700; background: var(--color-primary); color: #fff; border: 0; border-radius: var(--radius-sm); cursor: pointer; min-height: 48px; }
.bvas-q-run:hover { background: var(--color-primary-dark); }
@media (min-width: 641px) { .bvas-q-switch button { min-height: 36px; } }
/* Dark mode: --color-primary lifts to light-blue, so white-on-primary active
pills fail AA (~1.7:1). Pin active states to the deep navy (matches the
.fed-reg-link-bva pattern) so white text stays >= 4.5:1. Covers the new
Simple pills AND the existing inline-styled .bvas-mode-opt / .bvas-chip. */
:root[data-theme="dark"] .bvas-iface-opt input:checked + span,
:root[data-theme="dark"] .bvas-era-opt input:checked + span,
:root[data-theme="dark"] .bvas-q-chip[aria-pressed="true"],
:root[data-theme="dark"] .bvas-q-switch button[aria-pressed="true"],
:root[data-theme="dark"] .bvas-mode-opt input:checked + span,
:root[data-theme="dark"] .bvas-chip:hover {
background: #1f4a85; color: #fff; border-color: #1f4a85;
}
:root[data-theme="dark"] .bvas-q-run { background: #1f4a85; }
:root[data-theme="dark"] .bvas-q-run:hover { background: #255aa0; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .bvas-iface-opt input:checked + span,
:root:not([data-theme="light"]) .bvas-era-opt input:checked + span,
:root:not([data-theme="light"]) .bvas-q-chip[aria-pressed="true"],
:root:not([data-theme="light"]) .bvas-q-switch button[aria-pressed="true"],
:root:not([data-theme="light"]) .bvas-mode-opt input:checked + span,
:root:not([data-theme="light"]) .bvas-chip:hover {
background: #1f4a85; color: #fff; border-color: #1f4a85;
}
:root:not([data-theme="light"]) .bvas-q-run { background: #1f4a85; }
:root:not([data-theme="light"]) .bvas-q-run:hover { background: #255aa0; }
}