/* ==========================================================================
A1 v2.0 — Shared story stylesheet
--------------------------------------------------------------------------
Generated 2026-04-28 (Block 4 of A1 v2.0 plan).
Source of truth for Rakvia design tokens used across the router page,
Founder full path page, and the 6 stub path pages.
Tokens drawn from /brand/visual-identity.md (Rakvia Gold + Cream + Warm
Black palette + Inter / Cormorant Garamond / JetBrains Mono).
SOURCE LOCATION: presence/data-stories/a1-il-veteran-employers/assets/story.css
This _deploy/.../assets/story.css copy is the build target (gitignored
per Layer 2 GL2-8). The source-controlled copy at the story-root
assets/ folder is the source-of-truth; Block 6 build pipeline copies
it into _deploy/.../assets/ at publish time. Edit only the source
copy; the deploy copy is regenerated.
Loaded via:
in path_router_template.html.j2, path_template.html.j2,
path_stub_template.html.j2 (built in Block 6).
Google Fonts loaded via in template ; this file does NOT
@import them (avoids render-blocking + duplicate downloads).
Plotly chart palette (Rakvia gold + deep gold + warm gray) is set in the
Plotly layout dict in build_publish_notebook.py, NOT here.
Tuneable values (not locked by /brand/visual-identity.md; flagged for
Block 5 wireframe + persona-review tuning):
--section-tint-warm-gray: #efece4 (subtle warm-gray; author's pick)
--loss-bg: #f0ede4 (warm-gray callout background)
========================================================================== */
html { color-scheme: light; }
:root {
/* Rakvia palette — primary */
--rakvia-gold: #cbb26a;
--rakvia-gold-deep: #8a7544;
--rakvia-cream: #faf7f0;
--rakvia-warm-black: #1a1a1a;
--rakvia-neutral-gray: #4a4a4a;
--rakvia-light-gray: #e5e2d8;
--rakvia-white: #ffffff;
/* Semantic aliases (consumed by component classes below) */
--body: var(--rakvia-warm-black);
--bg: var(--rakvia-cream);
--secondary: var(--rakvia-neutral-gray);
--accent: var(--rakvia-gold-deep); /* WCAG-AA-safe link/text accent on cream */
--accent-bold: var(--rakvia-gold); /* Decorative borders, chip selected state */
--rule: var(--rakvia-light-gray);
--card: var(--rakvia-white);
/* Callout palette */
--gain-bg: var(--rakvia-cream);
--gain-border: var(--rakvia-gold);
--loss-bg: #f0ede4; /* warm-gray tint */
--loss-border: var(--rakvia-neutral-gray);
--cannot-show-bg: var(--rakvia-cream);
--cannot-show-border: var(--rakvia-gold-deep);
/* Section tints */
--section-tint-cream: var(--rakvia-cream);
--section-tint-warm-gray: #efece4;
}
* { box-sizing: border-box; }
html { font-size: 18px; scroll-behavior: smooth; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, sans-serif;
color: var(--body);
background: var(--bg);
margin: 0;
line-height: 1.6;
font-feature-settings: "tnum";
}
main { max-width: 720px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.full-width {
width: 100vw;
max-width: 1200px;
position: relative;
left: 50%;
transform: translateX(-50%);
margin: 2rem 0;
padding: 0 1rem;
}
@media (min-width: 1232px) { .full-width { left: auto; transform: none; margin: 2rem auto; } }
/* Display headings use Cormorant Garamond (large text only — WCAG-AA-safe on cream at H1/H2) */
h1, h2 {
font-family: 'Cormorant Garamond', 'Questa Grande', Georgia, serif;
font-weight: 600;
color: var(--body);
}
h1 { font-size: 2.1rem; line-height: 1.2; margin: 1.5rem 0 0.5rem; }
h2 {
font-size: 1.55rem;
margin: 2rem 0 0.75rem;
padding-bottom: 0.35rem;
border-bottom: 2px solid var(--rakvia-gold);
}
h3 {
font-family: 'Inter', sans-serif;
font-size: 1.1rem;
font-weight: 600;
margin: 1.25rem 0 0.5rem;
color: var(--secondary);
}
p { margin: 0.75rem 0; }
a { color: var(--accent); text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
}
/* Skip-to-content: visible on focus with body-text contrast (per Decision #47 / R6-08) */
.skip-link {
position: absolute; left: -9999px; top: 0;
padding: 0.5rem 1rem;
background: var(--bg);
color: var(--body); /* body-text contrast, NOT secondary, when focused */
font-weight: 600;
text-decoration: underline;
}
.skip-link:focus { left: 0; top: 0; z-index: 1000; }
.byline {
color: var(--secondary);
font-size: 0.95rem;
margin: 0 0 1.25rem;
}
/* Snapshot framing banner — desktop only per Decision #42 + R6-18 */
.snapshot-banner {
background: var(--card);
color: var(--secondary);
padding: 0.5rem 1rem;
border-left: 3px solid var(--rakvia-gold);
margin: 1rem auto;
max-width: 720px;
font-size: 0.92rem;
}
@media (max-width: 767px) { .snapshot-banner { display: none; } }
.errata-box {
border: 1px solid var(--rule);
padding: 0.75rem 1rem;
margin: 1rem auto;
max-width: 720px;
background: #fffbea;
font-size: 0.95rem;
}
.errata-box h3 { margin-top: 0; color: var(--body); }
/* TOC — minimal cognitive a11y per Decision #47 */
.toc {
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
padding: 0.75rem 1rem;
margin: 1rem auto;
max-width: 720px;
color: var(--secondary);
font-size: 0.92rem;
}
.toc h3 {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0.25rem 0 0.5rem;
color: var(--secondary);
}
.toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.toc-siblings {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 0.75rem;
}
@media (max-width: 560px) { .toc-siblings { grid-template-columns: 1fr; } }
.toc-card {
display: block;
padding: 0.75rem 0.9rem;
background: var(--card);
border: 1px solid var(--rule);
border-radius: 4px;
color: var(--body);
text-decoration: none;
font-size: 0.92rem;
}
.toc-card:hover, .toc-card:focus-visible { background: var(--section-tint-cream); border-color: var(--rakvia-gold); }
.toc-card strong { color: var(--accent); display: block; margin-bottom: 0.15rem; }
.caption { color: var(--secondary); font-size: 0.92rem; line-height: 1.4; }
.takeaway {
font-size: 0.98rem;
border-left: 3px solid var(--rakvia-gold);
padding: 0.25rem 0 0.25rem 0.75rem;
color: var(--body);
margin: 0.75rem 0 1rem;
}
/* Map inline disclaimer — soft career framing per R6-10 */
.map-disclaimer {
color: var(--secondary);
font-style: italic;
font-size: 0.9em;
margin: 0.5rem 0 0.25rem;
}
.data-link { font-size: 0.92rem; color: var(--secondary); }
table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: 0.95rem; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
th, td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--rule); }
th { font-weight: 600; background: var(--section-tint-cream); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Wage caveat — preserved from v1.0 (mandatory placement per Q3 / Decision #36) */
.wage-caveat {
font-size: 0.95rem;
color: var(--body);
background: #fff4e6;
border-left: 3px solid #c07e00;
padding: 0.75rem 1rem;
margin: 1rem 0;
}
/* Generic callout (carry-over from v1.0) */
.callout {
background: var(--card);
border: 1px solid var(--rule);
border-radius: 4px;
padding: 1rem 1.1rem;
margin: 1.25rem 0;
}
.callout h3 { margin-top: 0; color: var(--body); }
.callout ul { margin: 0.5rem 0 0.25rem; padding-left: 1.25rem; }
.callout-footer { font-size: 0.88rem; color: var(--secondary); margin-top: 0.5rem; }
/* ==========================================================================
v2.0 NEW component classes (PLAN.md Block 4 spec)
========================================================================== */
/* "What you'd gain" — Rakvia Gold border + cream bg + deep-gold micro-type label */
.callout-gain {
background: var(--gain-bg);
border: 1px solid var(--gain-border);
border-left-width: 4px;
border-radius: 4px;
padding: 1rem 1.1rem;
margin: 1rem 0;
}
.callout-gain::before {
content: "WHAT YOU'D GAIN";
display: block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--rakvia-gold-deep);
margin-bottom: 0.5rem;
}
/* "What you'd give up" — Warm Gray card + deep-gold micro-type label */
.callout-loss {
background: var(--loss-bg);
border: 1px solid var(--loss-border);
border-left-width: 4px;
border-radius: 4px;
padding: 1rem 1.1rem;
margin: 1rem 0;
}
.callout-loss::before {
content: "WHAT YOU'D GIVE UP";
display: block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--rakvia-gold-deep);
margin-bottom: 0.5rem;
}
/* "What we cannot show" — Cream card + Deep Gold rule + label (existing v1.0 visual pattern) */
.callout-cannot-show {
background: var(--cannot-show-bg);
border: 1px solid var(--rule);
border-top: 3px solid var(--cannot-show-border);
border-radius: 4px;
padding: 1rem 1.1rem;
margin: 1rem 0;
}
.callout-cannot-show::before {
content: "WHAT WE CANNOT SHOW";
display: block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--rakvia-gold-deep);
margin-bottom: 0.5rem;
}
/* Per-section background tints for visual zoning */
.section-tint-cream {
background: var(--section-tint-cream);
padding: 1.25rem 1.1rem;
border-radius: 4px;
margin: 1.5rem 0;
}
.section-tint-warm-gray {
background: var(--section-tint-warm-gray);
padding: 1.25rem 1.1rem;
border-radius: 4px;
margin: 1.5rem 0;
}
/* Values picker — 18-chip menu, max-3 enforced client-side (Block 8 + Block 6 wires JS) */
.values-picker {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 1rem 0;
}
.values-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px; /* WCAG 2.2 tap target */
min-width: 44px;
padding: 0.5rem 0.9rem;
background: var(--card);
border: 1.5px solid var(--rule);
border-radius: 22px;
color: var(--body);
font-size: 0.92rem;
font-weight: 500;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
user-select: none;
}
.values-chip:hover, .values-chip:focus-visible {
border-color: var(--rakvia-gold);
background: var(--section-tint-cream);
}
.values-chip--selected {
background: var(--section-tint-cream);
border-color: var(--rakvia-gold);
border-width: 2px;
font-weight: 600;
color: var(--rakvia-gold-deep);
}
.values-chip--selected::after {
content: " ✓";
margin-left: 0.4rem;
color: var(--rakvia-gold-deep);
}
.values-chip--custom-input {
flex-grow: 1;
min-width: 180px;
padding: 0.5rem 0.9rem;
border: 1.5px dashed var(--rakvia-gold);
background: var(--card);
font-family: inherit;
font-size: 0.92rem;
border-radius: 22px;
}
.values-picker-limit-notice {
font-size: 0.88rem;
color: var(--rakvia-gold-deep);
margin-top: 0.5rem;
font-style: italic;
}
/* Last-refreshed disclosure — small footer + methodology stamp */
.last-refreshed {
font-size: 0.85rem;
color: var(--secondary);
font-family: 'JetBrains Mono', ui-monospace, monospace;
letter-spacing: 0.02em;
margin: 0.75rem 0;
}
/* Switch-lens link — small text-link near top of path page (lens-regret mitigation, Block 7 + Block 9) */
.switch-lens-link {
display: inline-block;
font-size: 0.88rem;
color: var(--accent);
text-decoration: underline;
margin: 0.5rem 0 1rem;
}
.switch-lens-link::before {
content: "← ";
text-decoration: none;
}
/* ==========================================================================
Carry-over from v1.0 (preserved verbatim with palette swap)
========================================================================== */
details {
border: 1px solid var(--rule);
border-radius: 4px;
padding: 0.5rem 0.9rem;
margin: 1rem 0;
background: var(--card);
}
details summary {
cursor: pointer;
font-weight: 600;
color: var(--accent);
padding: 0.4rem 0.6rem;
min-height: 44px;
display: flex;
align-items: center;
background: var(--section-tint-cream);
border-radius: 3px;
list-style: none;
gap: 0.4rem;
}
details summary::-webkit-details-marker { display: none; }
/* Alt-text syntax ("/ ''") keeps generated content out of the accessible name
(UX persona 2026-06-11: SR was reading "click to expand" into every summary). */
details summary::before { content: "▶" / ""; font-size: 0.7em; flex-shrink: 0; }
details[open] summary::before { content: "▼" / ""; }
details summary::after { content: " \00B7 tap to expand" / ""; font-size: 0.82em; font-weight: 400; color: var(--secondary); }
details[open] summary::after { content: " \00B7 tap to collapse" / ""; font-size: 0.82em; font-weight: 400; color: var(--secondary); }
details[open] summary { margin-bottom: 0.75rem; border-radius: 3px 3px 0 0; }
.credibility-ribbon {
background: var(--section-tint-cream);
border-top: 1px solid var(--rakvia-gold);
border-bottom: 1px solid var(--rakvia-gold);
padding: 0.75rem 1rem;
margin: 2rem 0 1rem;
font-size: 0.92rem;
color: var(--body);
}
.survey-frame {
width: 100%;
max-width: 640px;
height: 900px;
border: 1px solid var(--rule);
border-radius: 4px;
display: block;
margin: 1rem 0;
}
@media (max-width: 640px) { .survey-frame { height: 1000px; } }
.cta-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin: 1rem 0;
}
.cta-btn {
display: inline-block;
padding: 0.6rem 1rem;
border: 1.5px solid var(--accent);
border-radius: 4px;
color: var(--accent);
text-decoration: none;
font-size: 0.95rem;
min-height: 44px;
line-height: 1.5;
}
.cta-btn:hover, .cta-btn:focus-visible {
background: var(--accent);
color: var(--rakvia-cream);
}
.cta-btn-primary {
background: var(--accent);
color: var(--rakvia-cream);
}
.cta-btn-primary:hover, .cta-btn-primary:focus-visible {
background: var(--rakvia-warm-black);
border-color: var(--rakvia-warm-black);
}
.footer-meta {
border-top: 1px solid var(--rule);
margin-top: 3rem;
padding-top: 1.5rem;
color: var(--secondary);
font-size: 0.9rem;
}
.footer-meta p { margin: 0.5rem 0; }
.back-to-top { color: var(--secondary); font-size: 0.9rem; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.cta-btn, .values-chip { transition: none; }
}
.map-frame { width: 100%; height: 520px; border: 1px solid var(--rule); }
@media (max-width: 767px) { .map-frame { height: 420px; } }
.static-fallback { display: none; margin: 1rem 0; }
.no-js .plotly-chart { display: none; }
.no-js .static-fallback { display: block; }
/* ════════════════════════════════════════════════════════════════════
v2.0 multi-path components (Block 6, 2026-06-11).
Folds in _preview/router-preview.html helper styles per its build note,
plus path-page components. Source of truth: assets/story.css (T4.1);
the build copies this file to _deploy and asserts byte-identity.
════════════════════════════════════════════════════════════════════ */
.hero-sub { font-size: 1.12rem; }
/* Router path grid */
.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; margin: 1.25rem 0; }
@media (max-width: 760px) { .path-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .path-grid { grid-template-columns: 1fr; } }
.path-card {
display: flex; flex-direction: column; gap: 0.3rem;
padding: 1rem 1.05rem; min-height: 116px;
background: var(--card); border: 1.5px solid var(--rule); border-radius: 6px;
color: var(--body); text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.path-card:hover, .path-card:focus-visible { border-color: var(--rakvia-gold); box-shadow: 0 2px 10px rgba(138,117,68,.12); }
.path-card .pc-title { font-weight: 600; font-size: 1.04rem; color: var(--rakvia-gold-deep); }
.path-card .pc-sub { font-size: 0.9rem; color: var(--secondary); line-height: 1.35; }
/* Status pills (UX-11: visually distinct from tappable controls) */
.pill { align-self: flex-start; margin-top: auto; font-size: 0.68rem; font-weight: 700; letter-spacing: .07em;
padding: 0.12rem 0.5rem; border-radius: 20px; text-transform: uppercase; }
.pill-full { background: var(--rakvia-gold-deep); color: var(--rakvia-cream); }
.pill-preview { background: var(--rakvia-light-gray); color: var(--rakvia-neutral-gray); }
.between-paths { color: var(--secondary); font-size: 0.95rem; margin: 0.25rem 0 0.5rem; }
/* Chip rows + Yes/No (44px targets, non-color selected cue per C2) */
.focus-chips, .yn-row, .rank-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; }
.yn-label { font-weight: 600; align-self: center; }
.yn-btn, .focus-chip { min-height: 44px; padding: 0.5rem 1rem; border-radius: 22px; border: 1.5px solid var(--rule);
background: var(--card); color: var(--body); font: inherit; font-weight: 500; cursor: pointer; }
.yn-btn[aria-pressed=true], .focus-chip[aria-pressed=true] {
border-color: var(--rakvia-gold); border-width: 2px; background: var(--section-tint-cream); color: var(--rakvia-gold-deep); font-weight: 600; }
.yn-btn[aria-pressed=true]::after, .focus-chip[aria-pressed=true]::after { content: " ✓"; }
.rank-chip[aria-pressed=true] { border-color: var(--rakvia-gold); border-width: 2px; font-weight: 600; }
/* Tailor expander + form fields */
.tailor { margin: 1.25rem 0; }
.tailor > summary { font-weight: 600; min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.privacy-anchor { font-size: 0.85rem; color: var(--rakvia-gold-deep); font-style: italic; margin: 0.4rem 0 0.75rem; }
.field-row { margin: 1rem 0; }
.field-row label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.field-row input[type=text], .field-row input[type=number], .field-row input[type=email] {
padding: 0.5rem 0.7rem; border: 1.5px solid var(--rule); border-radius: 6px; font: inherit; min-height: 44px; width: 100%; max-width: 320px; }
/* Commitment-weighted ask stack (E2) */
.ask-stack { margin-top: 1rem; }
.ask-stack .ask-primary { font-size: 1.05rem; font-weight: 600; }
.ask-stack .ask-tip { font-size: 0.9rem; color: var(--secondary); }
.why-ask { font-size: 0.85rem; color: var(--secondary); font-style: italic; }
/* Path-page header pieces */
.focus-anchor { font-size: 0.98rem; color: var(--rakvia-gold-deep); }
.linklike { background: none; border: none; padding: 0; font: inherit; color: var(--rakvia-gold-deep);
text-decoration: underline; cursor: pointer; min-height: 44px; }
.framing { font-size: 1.05rem; color: var(--body); border-left: 3px solid var(--rakvia-gold); padding-left: 0.9rem; }
/* In-page mini-nav (C5) */
.mini-nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 1rem 0 1.5rem; padding: 0.6rem 0;
border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 0.92rem; }
.mini-nav a { color: var(--rakvia-gold-deep); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.mini-nav a:hover, .mini-nav a:focus-visible { text-decoration: underline; }
/* Trade-off tables (mobile reflow per C4) */
.tradeoff-group { margin: 0.75rem 0; }
.tradeoff-group > summary { font-weight: 600; min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.tradeoff-table { width: 100%; }
.tradeoff-row--yours th, .tradeoff-row--yours td { background: var(--section-tint-cream); }
.tradeoff-row--yours th { border-left: 3px solid var(--rakvia-gold); }
/* Non-color "your pick" cue, visible at every width + readable to assistive tech
(UX persona 2026-06-11: gold highlight was color-only and invisible on mobile). */
.your-pick-tag { display: inline-block; margin-left: 0.5rem; padding: 0 0.35rem; font-size: 0.68rem;
font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
color: var(--rakvia-gold-deep); border: 1px solid var(--rakvia-gold); border-radius: 3px; }
@media (max-width: 480px) {
.tradeoff-table thead { position: absolute; left: -9999px; }
.tradeoff-table tr { display: block; margin-bottom: 0.9rem; border: 1px solid var(--rule); border-radius: 6px; padding: 0.5rem 0.7rem; }
.tradeoff-table tr.tradeoff-row--yours { border-left: 4px solid var(--rakvia-gold); }
.tradeoff-table th[scope=row], .tradeoff-table td { display: block; border: none; padding: 0.25rem 0; }
.tradeoff-table td::before { content: attr(data-label); font-weight: 600; display: block; font-size: 0.85rem; color: var(--secondary); }
}
/* Stay-or-go table: horizontal scroll + sticky first column (C4) */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.stay-or-go-table th[scope=row] { position: sticky; left: 0; background: var(--bg); }
/* Wage table reuses the sticky-first-column pattern so mobile readers keep the
industry label while swiping across the wage columns (UX persona 2026-06-11). */
.wage-table th[scope=row] { position: sticky; left: 0; background: var(--bg); text-align: left; }
/* Evidence callouts */
.evidence-callouts { padding-left: 1.1rem; }
.evidence-callouts > li { margin: 1.1rem 0; }
.evidence-callouts h3 { margin: 0 0 0.25rem; }
.cite { font-size: 0.85rem; color: var(--secondary); }
.not-advice { font-size: 0.88rem; font-style: italic; color: var(--secondary); margin-top: 0.3rem; }
/* Time-window conditional callout (Principle 4: default invisible) */
.time-window { border-left: 3px solid var(--rakvia-gold); padding: 0.2rem 0 0.2rem 1rem; margin: 1.4rem 0; }
.time-window h3 { margin-top: 0; }
/* "More research" collapsible + women-veterans exhibit annotation (Block 7) */
.more-research { margin-top: 1.5rem; }
.more-research > summary { font-weight: 600; min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.research-note { font-size: 0.9rem; border-left: 3px solid var(--rakvia-gold); padding-left: 1rem; }
.cross-link { margin-top: 1.25rem; }
.values-picker-limit-notice { color: var(--rakvia-gold-deep); font-weight: 600; }
/* Exhibit toggles (Block 7c). Selected state is never color-only (C2):
checkmark glyph + border weight + bold. Hidden entirely without JS. */
.exhibit-toggles { margin: 0.75rem 0 1.25rem; }
.toggle-group { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.4rem 0; }
.toggle-label { font-size: 0.85rem; color: var(--secondary); min-width: 3.6rem; }
.ex-toggle { min-height: 44px; min-width: 44px; padding: 0.35rem 0.85rem; border: 1px solid var(--rule);
border-radius: 999px; background: var(--bg); cursor: pointer; font: inherit; font-size: 0.9rem; }
.ex-toggle[aria-pressed="true"] { border: 2px solid var(--rakvia-gold-deep); font-weight: 600; }
.ex-toggle[aria-pressed="true"]::before { content: "\2713\00A0" / ""; color: var(--rakvia-gold-deep); }
.exhibit-unsupported { margin: 0.6rem 0; }
.no-js .js-only { display: none; }
.js .no-js-fallback { display: none; }
/* Screen-reader-only text (e.g., "Not yet pulled" behind a dash data cell —
aria-label on | is unreliable across screen readers, UX persona 2026-06-11). */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* O*NET skills-overlap bridge (Career-changer path, 2026-06-14). Cards over a wide table so
the military-to-civilian mapping reflows to one column on narrow screens (Rule 9 mobile). */
.skills-bridge { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
margin: 1.25rem 0; padding-left: 0; list-style: none; }
.bridge-card { border: 1px solid var(--rule); border-radius: 8px; padding: 1rem 1.1rem; background: var(--card); }
.bridge-card .mil { font-size: 0.85rem; color: var(--secondary); margin: 0; }
.bridge-card .civ { font-size: 1.08rem; font-weight: 600; margin: 0.15rem 0 0.1rem; line-height: 1.25; }
.bridge-arrow { color: var(--rakvia-gold-deep); }
.bright-badge { display: inline-block; font-size: 0.7rem; font-weight: 600; color: var(--rakvia-gold-deep);
border: 1px solid var(--rakvia-gold); border-radius: 999px; padding: 0 0.45rem; margin-left: 0.35rem;
vertical-align: middle; white-space: nowrap; }
.bridge-pay { font-size: 1.25rem; font-weight: 600; color: var(--rakvia-warm-black); margin: 0.5rem 0 0; }
.bridge-pay small { font-size: 0.8rem; font-weight: 400; color: var(--secondary); }
.bridge-prep { font-size: 0.88rem; color: var(--secondary); margin: 0.35rem 0 0.6rem; }
.bridge-prep strong { color: var(--rakvia-warm-black); font-weight: 600; }
.skill-chips-label { font-size: 0.8rem; color: var(--secondary); margin: 0.55rem 0 0.2rem; }
.skill-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; padding-left: 0; margin: 0; list-style: none; }
.skill-chips li { font-size: 0.8rem; background: var(--section-tint-cream); border: 1px solid var(--rule);
border-radius: 999px; padding: 0.15rem 0.6rem; }
/* Stay-or-go: state wage table (Illinois column emphasized as the reader's anchor) + remote bars.
Compact font + nowrap wage cells so all five states fit the content column without the rightmost
(Washington) clipping; the row label still wraps. .table-scroll is the narrow-screen fallback. */
.sog-table { font-size: 0.85rem; }
.sog-table th, .sog-table td { padding: 0.4rem 0.5rem; white-space: nowrap; text-align: right; }
.sog-table th[scope=col]:first-child, .sog-table th[scope=row] { text-align: left; white-space: normal; }
.sog-table th.sog-il, .sog-table td.sog-il { background: var(--section-tint-cream); font-weight: 600; }
.remote-bars { list-style: none; padding-left: 0; margin: 1rem 0; }
.remote-bars li { display: grid; grid-template-columns: 6.5rem 1fr 3rem; align-items: center; gap: 0.6rem; margin: 0.4rem 0; }
.remote-state { font-size: 0.9rem; }
.remote-track { background: var(--section-tint-warm-gray); border-radius: 999px; height: 0.85rem; overflow: hidden; }
.remote-bar { display: block; height: 100%; background: var(--rakvia-gold-deep); border-radius: 999px; }
.remote-pct { font-size: 0.88rem; font-weight: 600; text-align: right; }
.remote-bars li.sog-il-row .remote-state, .remote-bars li.sog-il-row .remote-pct { font-weight: 700; color: var(--rakvia-gold-deep); }
/* The hidden attribute must always win over component display rules
(display:flex on a class silently defeats [hidden] otherwise). */
[hidden] { display: none !important; }
|