. Source Serif 4 for body + h1-h3. UI elements inside (nav, btn, eyebrow, byline, forms, tables, code, pills, badges, breadcrumbs) stay sans. */ .editorial { font-family: var(--font-serif); font-size: var(--text-body-lg); line-height: var(--leading-loose); } .editorial h1 { font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.012em; line-height: 1.12; } .editorial h2 { font-family: var(--font-serif); font-weight: 600; line-height: 1.25; } .editorial h3 { font-family: var(--font-serif); font-weight: 600; } .editorial p { font-size: 1.0625rem; line-height: var(--leading-loose); margin: 0 0 1.25rem; max-width: 68ch; } .editorial .eyebrow, .editorial .subtitle, .editorial .byline, .editorial nav, .editorial .btn, .editorial button, .editorial form, .editorial input, .editorial select, .editorial textarea, .editorial table, .editorial .pill, .editorial .badge, .editorial .breadcrumb, .editorial .navbar, .editorial .nav-link { font-family: var(--font-sans); } .editorial code, .editorial pre { font-family: var(--font-mono); } /* ── Layout ── */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; } .page-content { flex: 1; padding: 2rem 0; } /* ── Navigation ── */ .navbar { background: var(--color-primary); height: var(--nav-height); position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-md); } :root[data-theme="dark"] .navbar { background: #0e2a4d; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .navbar { background: #0e2a4d; } } .navbar .container { max-width: 1400px; height: 100%; display: flex; align-items: center; justify-content: space-between; } .navbar-brand { display: flex; align-items: center; gap: .75rem; color: #fff; font-weight: 700; font-size: 1.1rem; text-decoration: none; } .navbar-brand:hover { text-decoration: none; opacity: .9; } /* Stacked wordmark: primary "RateMyVSO" + tagline "VA Disability Guide" */ .wm-stack { display: inline-flex; flex-direction: column; gap: 2px; line-height: 1; } .wm-primary { font: 800 17px/1 var(--font-sans); letter-spacing: 0.01em; color: inherit; } .wm-tagline { font: 600 9px/1 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; color: inherit; } @media (max-width: 480px) { .wm-tagline { display: none; } } /* Theme dropdown (Light / Dark / System), injected by auth.js into navbar */ .nav-theme-wrap { position: relative; order: 99; margin-left: auto; } .nav-theme-trigger { background: none; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 8px; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .15s, border-color .15s; } .nav-theme-trigger:hover { background: rgba(255,255,255,.12); } .nav-theme-trigger:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .nav-theme-trigger[aria-expanded="true"] { background: rgba(255,255,255,.18); border-color: var(--color-accent); } .nav-theme-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 168px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 4px; z-index: 1000; } .nav-theme-menu[hidden] { display: none; } .nav-theme-menu > button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: none; border: 0; border-radius: 6px; cursor: pointer; color: var(--color-text); font: 500 14px/1 var(--font-sans); text-align: left; transition: background .12s; } .nav-theme-menu > button:hover { background: var(--color-bg-alt); } .nav-theme-menu > button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; } .nav-theme-menu .ico { display: inline-flex; color: var(--color-primary); } .nav-theme-menu .lbl { flex: 1; } .nav-theme-menu .chk { opacity: 0; color: var(--color-accent); font-weight: 700; } .nav-theme-menu > button[aria-checked="true"] .chk { opacity: 1; } .nav-theme-menu > button[aria-checked="true"] { background: rgba(232,181,74,.08); } :root[data-theme="dark"] .nav-theme-menu { background: #1a2435; border-color: rgba(255,255,255,.12); } :root[data-theme="dark"] .nav-theme-menu > button:hover { background: rgba(255,255,255,.06); } .nav-toggle { display: none; } .brand-icon { width: 36px; height: 36px; background: var(--color-accent); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } .navbar-links { display: flex; align-items: center; gap: .15rem; list-style: none; } .navbar-links a { color: rgba(255,255,255,.85); padding: .45rem .5rem; border-radius: var(--radius-sm); white-space: nowrap; font-size: .85rem; font-weight: 500; transition: all .15s; text-decoration: none; } .navbar-links a:hover, .navbar-links a.active { color: #fff; background: rgba(255,255,255,.12); } /* ── Feature Announcement Banner ── */ #feature-banner { background: linear-gradient(135deg, #fffbf0, #fff7e0); border-bottom: 2px solid var(--color-accent); } .feature-banner-inner { max-width: var(--max-width); margin: 0 auto; padding: .85rem 1.5rem; display: flex; align-items: flex-start; gap: 1rem; } .feature-banner-content { flex: 1; } .feature-banner-title { display: block; font-size: .95rem; color: var(--color-primary); margin-bottom: .5rem; } .feature-banner-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem .75rem; } .feature-banner-list li { font-size: .82rem; color: var(--color-text); line-height: 1.7; white-space: nowrap; } .feature-banner-cta { display: inline-block; margin-top: .5rem; padding: .45rem 1.25rem; background: var(--color-primary); color: #fff; border-radius: 20px; text-decoration: none; font-size: .85rem; font-weight: 600; transition: background .15s; min-height: 48px; line-height: 48px; line-height: normal; display: inline-flex; align-items: center; } .feature-banner-cta:hover { background: var(--color-primary-light); } :root[data-theme="dark"] .feature-banner-cta { background: #1f4a85; } :root[data-theme="dark"] .feature-banner-cta:hover { background: #2c5fa3; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .feature-banner-cta { background: #1f4a85; } :root:not([data-theme="light"]) .feature-banner-cta:hover { background: #2c5fa3; } } .feature-banner-close { background: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.1); font-size: .85rem; font-weight: 600; color: var(--color-text-muted); cursor: pointer; padding: .35rem .75rem; min-width: 48px; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: .35rem; border-radius: var(--radius-sm); flex-shrink: 0; white-space: nowrap; } .feature-banner-close:hover { color: var(--color-text); background: rgba(0,0,0,.04); } .feature-banner-close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Social login shortcuts in the logged-out feature banner */ .feature-banner-social { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; } .feature-banner-google, .feature-banner-apple { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .5rem 1rem; border-radius: 6px; text-decoration: none; font-weight: 500; font-size: .88rem; border: 1px solid var(--color-border); transition: background .15s, border-color .15s; white-space: nowrap; } .feature-banner-google { background: #fff; color: #3c4043; font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif; border-color: #dadce0; } .feature-banner-google:hover { background: #f8faff; border-color: #4285F4; color: #3c4043; text-decoration: none; } .feature-banner-apple { background: #000; color: #fff; border-color: #000; font-family: -apple-system, 'SF Pro Text', 'Inter', system-ui, sans-serif; } .feature-banner-apple:hover { background: #1a1a1a; color: #fff; text-decoration: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .feature-banner-google { background: #1a1f2a; color: #e8ebf1; border-color: #2a3242; } :root:not([data-theme="light"]) .feature-banner-apple { background: #fff; color: #000; border-color: #fff; } } :root[data-theme="dark"] .feature-banner-google { background: #1a1f2a; color: #e8ebf1; border-color: #2a3242; } :root[data-theme="dark"] .feature-banner-apple { background: #fff; color: #000; border-color: #fff; } @media (max-width: 767px) { .feature-banner-inner { padding: .75rem 1rem; } .feature-banner-list { flex-direction: column; gap: .15rem; } .feature-banner-list li { white-space: normal; } .feature-banner-social { flex-direction: column; } .feature-banner-google, .feature-banner-apple { width: 100%; } } /* ── Icon sprite (2026-05-22) ── Inline-SVG monoline icons sourced from /icons/sprite.svg via . Brand-restyled (1.6px stroke, rounded caps) for editorial restraint. Color follows currentColor so icons inherit their parent's text color automatically (gold inside .tm-start-card, navy on light surfaces). */ .icon { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -0.18em; flex-shrink: 0; } .icon-lg { width: 1.75em; height: 1.75em; vertical-align: -0.32em; } .icon-xl { width: 2.25em; height: 2.25em; vertical-align: -0.45em; } /* ── Hero Section ── */ .hero { background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 60%, var(--color-primary-light) 100%); color: #fff; padding: 4rem 0 3rem; text-align: center; } /* Keep the hero's deep navy gradient even in dark mode, the hero is our main brand surface and the lighter dark-mode primary palette washes it out. Hard-code the light-mode navy tokens for both the OS-dark case and the explicit data-theme="dark" case. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero { background: linear-gradient(135deg, #06162a 0%, #0e2a4d 60%, #1f4a85 100%); } } :root[data-theme="dark"] .hero { background: linear-gradient(135deg, #06162a 0%, #0e2a4d 60%, #1f4a85 100%); } .hero h1 { color: #fff; margin-bottom: .75rem; } .hero p { color: rgba(255,255,255,.8); font-size: 1.1rem; margin-bottom: 2rem; } /* ── Search Bar ── */ .search-box { display: grid; grid-template-columns: 130px 1fr 1fr 1fr; grid-template-rows: auto auto; gap: .75rem; max-width: 820px; margin: 0 auto; } .btn-search { grid-column: 1 / -1; /* full-width button on its own row */ } .search-box input, .search-box select { padding: .75rem 1rem; border: 2px solid rgba(255,255,255,.2); border-radius: var(--radius-md); background: rgba(255,255,255,.12); color: #fff; font-size: 1rem; font-family: var(--font-sans); backdrop-filter: blur(4px); transition: border-color .15s; width: 100%; box-sizing: border-box; } .search-box input::placeholder { color: rgba(255,255,255,.6); } .search-box input:focus, .search-box select:focus { outline: 2px solid var(--color-accent-light); outline-offset: 2px; border-color: var(--color-accent-light); background: rgba(255,255,255,.18); } .search-box select option { color: var(--color-text); background: var(--color-surface); } /* ── Find-Rep filters grid ── */ .filters-bar.filters-grid { display: grid; grid-template-columns: minmax(90px, .8fr) minmax(100px, 1fr) 1.5fr 1.5fr minmax(90px, .9fr) minmax(70px, .5fr); gap: .75rem; align-items: end; } .filters-grid .filter-group { flex-direction: column; align-items: stretch; min-width: 0; } .filters-grid .filter-group label { margin-bottom: .25rem; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .625rem 1.25rem; min-height: 48px; min-width: 48px; border: none; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: .9rem; font-weight: 600; cursor: pointer; transition: all .15s; text-decoration: none; white-space: nowrap; } .btn-primary { background: var(--color-accent); color: var(--color-on-accent); } .btn-primary:hover { background: var(--color-accent-light); color: var(--color-on-accent); text-decoration: none; } .btn-outline { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); } .btn-outline:hover { background: var(--color-primary); color: #fff; text-decoration: none; } .btn-sm { padding: .375rem .875rem; font-size: .825rem; } .btn-search { background: var(--color-accent); color: var(--color-on-accent); padding: .75rem 1.5rem; border: none; border-radius: var(--radius-md); font-size: 1rem; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: var(--font-sans); transition: background .15s; } .btn-search:hover { background: var(--color-accent-light); } /* ── Cards ── */ .card { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); transition: box-shadow .15s, transform .15s; } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .card-body { padding: 1.25rem; } /* ── Homepage Action Cards ── */ .home-action-card { display: flex; flex-direction: column; text-decoration: none; background: var(--color-surface); border-radius: var(--radius-md); border: 2px solid var(--color-border); padding: 1.5rem; transition: all 0.2s ease; cursor: pointer; } .home-action-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); } .home-action-card:hover .home-action-cta { background: var(--color-primary); color: #fff; } .home-action-icon { font-size: 2.25rem; margin-bottom: 0.75rem; } .home-action-card h3 { font-size: 1.1rem; color: var(--color-primary); margin-bottom: 0.4rem; } .home-action-card p { font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.5; flex-grow: 1; margin-bottom: 1rem; } .home-action-cta { display: inline-block; align-self: flex-start; font-size: 0.88rem; font-weight: 600; color: var(--color-primary); background: rgba(0, 51, 102, 0.08); padding: 0.4rem 1rem; border-radius: var(--radius-sm); transition: all 0.2s ease; } /* ── Grid ── */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } /* ── Badges ── */ .badge { display: inline-block; padding: .2rem .6rem; border-radius: 20px; font-size: .75rem; font-weight: 600; white-space: nowrap; } .badge-national { background: #e3f2fd; color: #1565c0; } .badge-state { background: #e8f5e9; color: #2e7d32; } .badge-tribal { background: #fff3e0; color: #e65100; } .badge-legal { background: #f3e5f5; color: #7b1fa2; } .badge-active { background: #e8f5e9; color: #2e7d32; } .badge-inactive { background: #fce4ec; color: #c62828; } .badge-scope { background: #e8eaf6; color: #3949ab; } .badge-accepts { background: #e8f5e9; color: #1b5e20; } .badge-not-accepts { background: #fce4ec; color: #b71c1c; } /* ── Section Headers ── */ .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: .75rem; border-bottom: 2px solid var(--color-border); } .section-header h2 { font-size: 1.3rem; } /* ── Filters Bar ── */ .filters-bar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem 1.25rem; margin-bottom: 1.5rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; box-shadow: var(--shadow-sm); } .filter-group { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 160px; } .filter-group label { font-size: .8rem; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; text-transform: uppercase; letter-spacing: .03em; } .filter-group select, .filter-group input { flex: 1; padding: .5rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: .875rem; font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg); } .filter-group select:focus, .filter-group input:focus { outline: 2px solid var(--color-primary-light); outline-offset: 2px; border-color: var(--color-primary-light); } /* ── Near Me bar ── */ .near-me-bar { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .btn-near-me-cta { background: var(--color-accent); color: var(--color-on-accent); font-weight: 700; font-size: .95rem; padding: .65rem 1.5rem; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all .2s; box-shadow: 0 2px 8px rgba(245, 166, 35, .3); } .btn-near-me-cta:hover { background: #ffc107; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245, 166, 35, .4); } #near-me-controls { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .near-me-select { padding: .35rem .6rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: .85rem; font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg); } .location-status { font-size: .8rem; color: var(--color-text-muted); } .location-status.locating { color: var(--color-warning); } .location-status.found { color: var(--color-success); } .distance-badge { display: inline-block; background: var(--color-primary); color: #fff; font-size: .7rem; font-weight: 700; padding: .15rem .45rem; border-radius: 10px; margin-left: .4rem; vertical-align: middle; } :root[data-theme="dark"] .distance-badge { background: #1f4a85; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .distance-badge { background: #1f4a85; } } /* ── Near Me chip (org-profile Representatives filter) ── */ .near-me-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .65rem; background: rgba(26, 58, 107, .08); border: 1px solid rgba(26, 58, 107, .25); border-radius: 999px; font-size: .825rem; font-weight: 500; color: var(--color-primary); } .near-me-clear { background: transparent; border: none; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 .15rem; color: var(--color-primary); opacity: .7; } .near-me-clear:hover, .near-me-clear:focus-visible { opacity: 1; outline: 2px solid var(--color-primary); outline-offset: 2px; } :root[data-theme="dark"] .near-me-chip { background: rgba(120, 165, 230, .15); border-color: rgba(120, 165, 230, .35); color: #b8d1f0; } :root[data-theme="dark"] .near-me-clear { color: #b8d1f0; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .near-me-chip { background: rgba(120, 165, 230, .15); border-color: rgba(120, 165, 230, .35); color: #b8d1f0; } :root:not([data-theme="light"]) .near-me-clear { color: #b8d1f0; } } /* ── Map location links ── */ .map-link { color: inherit; text-decoration: none; } .map-link:hover { color: var(--color-primary-light); text-decoration: underline; } /* ── Pagination ── */ .pagination { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 2rem; } .pagination button { padding: .5rem .875rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: .875rem; cursor: pointer; font-family: var(--font-sans); transition: all .15s; } .pagination button:hover:not(:disabled) { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .pagination button:disabled { opacity: .4; cursor: not-allowed; } .pagination button.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } :root[data-theme="dark"] .pagination button:hover:not(:disabled) { background: #1f4a85; } :root[data-theme="dark"] .pagination button.active { background: #1f4a85; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pagination button:hover:not(:disabled) { background: #1f4a85; } :root:not([data-theme="light"]) .pagination button.active { background: #1f4a85; } } .pagination .page-info { font-size: .875rem; color: var(--color-text-muted); padding: 0 .5rem; } /* ── Loading & Empty States ── */ .skeleton { background: linear-gradient(90deg, #e8ecf0 25%, #f0f3f6 50%, #e8ecf0 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius-sm); } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-card { height: 180px; border-radius: var(--radius-md); } .skeleton-line { height: 16px; margin-bottom: .5rem; } .skeleton-line.short { width: 60%; } .skeleton-line.medium { width: 80%; } .empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--color-text-muted); } .empty-state .empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: .5; } .empty-state h3 { color: var(--color-text); margin-bottom: .5rem; } /* ── Toast Notifications ── */ .toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1000; display: flex; flex-direction: column; gap: .5rem; } .toast { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 1rem 1.25rem; max-width: 360px; display: flex; align-items: center; gap: .75rem; animation: slideIn .3s ease; border-left: 4px solid var(--color-primary); } .toast.success { border-color: var(--color-success); } .toast.error { border-color: var(--color-danger); } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ── Footer ── */ .footer { background: var(--color-primary-dark); color: rgba(255,255,255,.65); text-align: center; padding: 1.5rem; font-size: .8rem; margin-top: auto; } :root[data-theme="dark"] .footer { background: #06162a; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .footer { background: #06162a; } } .footer a { color: rgba(255,255,255,.9); text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 2px; } .footer a:hover { color: #fff; text-decoration-color: #fff; } .footer > div > div:first-child > div > a { display: block; font-size: 0.8rem; line-height: 1.9; } /* ── Embed mode (?embed=1, src/helpers/html.js) ── Navbar/footer/related-rail/feedback-tab/guide-launcher are already omitted server-side. This hides each page's own hero/intro block, back-link, and any hand-authored breadcrumb nav so a framed report shows only its chart/data content. */ body.embed-mode .dc-hero, body.embed-mode .bva-hero, body.embed-mode .back-link, body.embed-mode nav[aria-label="Breadcrumb"], body.embed-mode .page-content > .container > header { display: none; } /* ── Share Outcome Form ── */ .form-group { margin-bottom: 1.25rem; } .form-group label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; color: var(--color-text); } .form-group select, .form-group textarea, .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="password"] { width: 100%; padding: 0.6rem 0.75rem; font-size: 0.95rem; border: 2px solid var(--color-control-border, #767f8f); border-radius: var(--radius-sm); font-family: inherit; box-sizing: border-box; } .form-group select:focus, .form-group textarea:focus, .form-group input:focus { border-color: var(--color-primary); outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Condition search results dropdown */ #condition-results { position: absolute; z-index: 100; background: var(--color-surface); border: 2px solid var(--color-border); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); max-height: 300px; overflow-y: auto; width: calc(100% - 4px); } .outcome-search-item { padding: 0.6rem 0.75rem; cursor: pointer; display: flex; gap: 0.5rem; align-items: baseline; border-bottom: 1px solid #f0f0f0; font-size: 0.9rem; } .outcome-search-item:hover { background: #f0f4ff; } .outcome-search-dc { font-weight: 700; color: var(--color-primary); font-size: 0.82rem; white-space: nowrap; } .outcome-search-name { color: var(--color-text); } .outcome-search-custom { color: var(--color-text-muted); font-style: italic; } /* Selected condition chip */ .outcome-selected { display: inline-flex; align-items: center; gap: 0.5rem; background: #e8eaf6; padding: 0.4rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.9rem; } .outcome-clear { background: none; border: none; cursor: pointer; color: #c62828; font-size: 0.82rem; text-decoration: underline; } /* Outcome cards (user's submissions) */ .outcome-card { padding: 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: 0.5rem; } .outcome-card-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .outcome-badge { font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 3px; color: #fff; text-transform: uppercase; } .outcome-granted { background: #2e7d32; } .outcome-denied { background: #c62828; } .outcome-remanded { background: #f57f17; } .outcome-partial { background: #1565c0; } /* ── Skip Navigation Link ── */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--color-primary); color: #fff; padding: 8px 16px; z-index: 1000; font-size: 0.9rem; transition: top 0.2s; } .skip-link:focus { top: 0; } /* ── Global Focus Indicator ── */ *:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ── Shared "Try It Free" trial banner (used on /dc/chat and /dc/letter-interpreter) ── */ .trial-banner { background: linear-gradient(135deg, #fffbf0, #fff7e0); border: 1.5px solid var(--color-accent); border-radius: var(--radius-md); padding: 1.25rem; margin-bottom: 1.25rem; } .trial-banner-heading { font-size: .95rem; font-weight: 700; color: var(--color-primary); margin-bottom: .5rem; } .trial-banner-lede { font-size: .85rem; color: #1a1a2e; margin: 0 0 .75rem; line-height: 1.6; } .trial-banner-list { font-size: .82rem; color: #3a4052; padding-left: 1.25rem; margin: 0 0 .75rem; line-height: 1.8; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .trial-banner { background: linear-gradient(135deg, #2a2416, #322a18); } :root:not([data-theme="light"]) .trial-banner-heading { color: var(--color-accent); } :root:not([data-theme="light"]) .trial-banner-lede { color: #e8ebf1; } :root:not([data-theme="light"]) .trial-banner-list { color: #c8ccd8; } } :root[data-theme="dark"] .trial-banner { background: linear-gradient(135deg, #2a2416, #322a18); } :root[data-theme="dark"] .trial-banner-heading { color: var(--color-accent); } :root[data-theme="dark"] .trial-banner-lede { color: #e8ebf1; } :root[data-theme="dark"] .trial-banner-list { color: #c8ccd8; } /* ── Reduced Motion ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ──────────────────── Site-wide search (navbar trigger + overlay) ──────────────────── */ .navbar-search-trigger { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.25); font-family: inherit; font-size: 0.9rem; font-weight: 500; padding: 0.35rem 0.85rem; border-radius: 999px; cursor: pointer; transition: background 0.15s ease; } .navbar-search-trigger:hover { background: rgba(255,255,255,0.22); } .navbar-search-trigger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .site-search-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); z-index: 10000; display: flex; align-items: flex-start; justify-content: center; padding: 4rem 1rem 1rem; overflow-y: auto; } .site-search-overlay[hidden] { display: none; } .site-search-shell { background: var(--color-surface, #fff); width: 100%; max-width: 680px; border-radius: var(--radius-md, 12px); box-shadow: 0 20px 50px rgba(0,0,0,0.25); overflow: hidden; } .site-search-bar { display: flex; gap: 0.5rem; padding: 0.85rem; border-bottom: 1px solid var(--color-border, #e6e8ee); } .site-search-bar input { flex: 1; padding: 0.65rem 0.85rem; font-size: 1rem; font-family: inherit; border: 1px solid var(--color-border, #e6e8ee); border-radius: var(--radius-sm, 6px); background: var(--color-bg, #fff); color: var(--color-text, #1a1a2e); } .site-search-bar input:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } .site-search-bar button { background: transparent; border: 0; font-size: 1.4rem; line-height: 1; color: var(--color-text-muted, #5a6478); cursor: pointer; padding: 0 0.5rem; } .site-search-status { padding: 0.5rem 1rem; font-size: 0.78rem; color: var(--color-text-muted, #5a6478); } .site-search-results { max-height: 60vh; overflow-y: auto; } .site-search-result { display: block; padding: 0.7rem 1rem; border-bottom: 1px solid var(--color-border, #e6e8ee); text-decoration: none; color: var(--color-text, #1a1a2e); } .site-search-result:last-child { border-bottom: 0; } .site-search-result:hover, .site-search-result.active { background: var(--color-bg, #f4f6f9); } .site-search-result-title { font-weight: 600; color: var(--color-primary); margin-bottom: 0.15rem; font-size: 0.95rem; } .site-search-result-path { font-size: 0.72rem; color: var(--color-text-muted, #5a6478); margin-bottom: 0.2rem; } .site-search-result-snippet { font-size: 0.84rem; color: var(--color-text-muted, #5a6478); line-height: 1.45; } .site-search-result-snippet mark { background: #fff5b1; padding: 0 2px; border-radius: 2px; color: inherit; } @media (max-width: 640px) { .site-search-overlay { padding-top: 1.5rem; } .navbar-search-trigger { font-size: 0.85rem; padding: 0.3rem 0.7rem; } } /* Cancer Residuals Network embed on /dc/code/X (per-cancer, graph/list toggle). Reuses the .cr-* network styles from the full /dc/cancer-residuals page; only the embed-specific controls bar needs layout here. */ .residual-section .cr-embed-controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0 0 .75rem; } .residual-section .cr-embed-control { font-size: .9rem; color: var(--color-text-muted); display: flex; align-items: center; gap: .4rem; } .residual-section .cr-embed-control select { font-size: .9rem; padding: .35rem .5rem; } .residual-section .cr-embed-graph { position: relative; } /* anchors the lock popup (ID rule #cr-graph-wrap doesn't reach the embed's class-only wrap) */ .residual-section .cr-embed-cta { margin: .75rem 0 0; }