/* ============================================================
   landing3 theme: the Atlas field guide's visual language applied
   to the landing site. Loaded after landing.css. The design-system
   token names stay; their values are remapped here, so every
   component (including the bundled Stat, Button, Badge, Alert and
   Callout) picks up the palette and type without markup changes.
   ============================================================ */

:root {
  /* Ink navy (brand surfaces, headings) */
  --navy: #12324a;
  --navy-700: #0f2b40;
  --navy-800: #0b263a;
  --navy-900: #081c2c;
  /* Teal (links, selection, active data) */
  --blue: #0f6871;
  --blue-600: #147d87;
  --blue-400: #4fa3ab;
  --azure: #147d87;
  --azure-300: #8fc9cf;
  --azure-100: #e7f2f3;
  /* Gold (funding and decision emphasis only) */
  --gold: #c99a16;
  --gold-600: #8a6500;
  --gold-100: #fff5cf;
  /* Paper and slate */
  --white: #fffefa;
  --ink-50: #f6f4ee;
  --ink-100: #e9edf0;
  --ink-200: #d9e0e6;
  --ink-300: #bdc8d2;
  --ink-400: #92a1b3;
  --ink-500: #596a78;
  --ink-600: #485968;
  --ink-700: #344250;
  --ink-800: #12324a;
  --ink-900: #0b263a;
  --success: #2f7d5b;
  --success-100: #edf5f0;
  --warning: #8a5a12;
  --warning-100: #f7f2e8;
  --danger: #b34747;
  --danger-100: #f8eded;
  --info: var(--azure);
  --info-100: var(--azure-100);
  --surface-page: #f6f4ee;
  --surface-raised: #fffefa;
  --surface-sunken: #efece4;
  --surface-card: #fffefa;
  --surface-tint: #f1eee6;
  --surface-brand: #0b263a;
  --surface-brand-soft: var(--azure-100);
  --surface-accent-soft: var(--gold-100);
  --text-strong: #0b263a;
  --text-body: #0b263a;
  --text-muted: #485968;
  --text-faint: #596a78;
  --text-link: #0f6871;
  --text-on-brand: #ffffff;
  --text-on-brand-muted: #b7c6d3;
  --border-hair: #d9e0e6;
  --border-strong: #bdc8d2;
  --border-brand: #12324a;
  --border-focus: #c99a16;
  --action-primary: #12324a;
  --action-primary-hover: #0b263a;
  --action-primary-press: #081c2c;
  --action-secondary: #0f6871;
  --action-secondary-hover: #147d87;
  --accent: #c99a16;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--gold) 45%, transparent);
  /* Type: serif display, Plex body, Plex mono for labels and figures */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ls-tight: -0.03em;
  --ls-overline: 0.12em;
  /* Rounder corners and soft ambient shadows */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.5rem;
  --shadow-soft: 0 0.5rem 1.5rem rgba(11, 38, 58, 0.045);
  --shadow-frame: 0 1.5rem 4rem rgba(11, 38, 58, 0.19);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --masthead: radial-gradient(circle at 76% 16%, rgba(20, 125, 135, 0.34), transparent 26rem), linear-gradient(145deg, #0b263a, #12324a 58%, #1b405c);
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--surface-page); color: var(--text-body); font-family: var(--font-sans); }
:focus-visible { outline: 0.2rem solid var(--gold); outline-offset: 0.2rem; }

/* ---- Type ---- */
h1, h2, h3, .font-font-display, .hero-title, .chapter-title, .rurality-status-title, .landing-need-title, .landing-outcome-name, .landing-journey-title {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; text-wrap: balance;
}
h1 { line-height: 1.05; }
.text-size-fs-display-lg { font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1.05; }
.text-size-fs-h2 { font-size: clamp(1.9rem, 2.8vw, 2.5rem); line-height: 1.1; }
.text-size-fs-h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.15; }
.text-size-fs-h4 { font-size: 1.25rem; line-height: 1.25; }
.chapter-title { margin: 0 0 var(--space-4); font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.05; color: var(--navy); }
.chapter-title--small { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.lede { max-width: 46rem; margin: 0 0 var(--space-6); color: var(--ink-600); font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; }
section-kicker, .landing-indicator-category, .landing-need-kicker, .landing-routes-title, .landing-table-header, .landing-outcome-stats dt, .landing-outcome-from small, .landing-outcome-to small {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
}
section-kicker { color: var(--blue); }
section-kicker[tone="inverse"] { color: var(--azure-300); }
section-kicker[tone="muted"] { color: var(--ink-500); }
.landing-source, .landing-coverage-label, metric-value, .landing-need-figure, .landing-top-index, .landing-top-rank, .chapter-meta, tooltip-row, .font-font-mono { font-family: var(--font-mono); }
.landing-source { font-size: 0.68rem; letter-spacing: 0.02em; color: var(--ink-500); }
metric-value { font-weight: 600; }
a { color: var(--text-link); text-underline-offset: 0.2em; }
a:hover { color: var(--blue-600); }

/* ---- Header: the field guide's brandbar ---- */
.site-header { background: var(--navy-800); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
header-inner { height: 60px; }
.rhtp-brand-label { padding-left: 12px; font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.02em; font-size: 1rem; }
.rhtp-primary-nav .landing-nav-link { font-size: 0.875rem; font-weight: 600; border-bottom: 0; color: rgba(255, 255, 255, 0.82); }
.rhtp-primary-nav .landing-nav-link[aria-current="page"], .rhtp-primary-nav .landing-nav-link[aria-current="page"]:hover { color: var(--white); border-bottom: 0; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 0.45em; }
.rhtp-atlas-link { min-height: 2.75rem; padding: 0 var(--space-4); border-radius: 999px; color: var(--navy-900); background: var(--white); font-weight: 600; }
.rhtp-atlas-link:hover { background: var(--azure-100); }
.landing-a11y-button { border-radius: 999px; min-height: 2.5rem; }
mobile-navigation summary, mobile-navigation nav { border-radius: var(--radius-sm); }

/* ---- Home masthead: dark hero with the paper brief card ---- */
content-section[surface="masthead"] { border-bottom: 0; color: var(--white); background: var(--masthead); }
page-screen[data-screen-label="Home"] content-section[surface="masthead"] page-container[layout="hero"] { grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 5vw, 4.5rem); }
.hero-title { max-width: 14ch; margin: 0 0 var(--space-4); color: var(--white); font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1.02; }
.hero-intro { max-width: 36rem; margin: 0 0 var(--space-6); color: rgba(255, 255, 255, 0.82); font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.6; }
.hero-try { margin-top: var(--space-3); color: rgba(255, 255, 255, 0.72); font-size: 0.9rem; }
.hero-try a { color: var(--white); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); }
.hero-error { margin-top: 10px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--danger-100); color: var(--danger); font-size: var(--fs-body-sm); }
content-section[surface="masthead"] .landing-search { max-width: 36rem; }
content-section[surface="masthead"] .landing-search-input { height: 3rem; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; background: var(--white); color: var(--ink-900); }
.hero-brief { position: relative; padding: var(--space-5) var(--space-5) var(--space-4); color: var(--ink-900); background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-frame); }
.hero-brief::before { content: ""; position: absolute; top: var(--space-3); right: var(--space-3); width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0.35rem var(--gold-100); }
.hero-brief small { display: block; margin: 0 0 var(--space-3); color: var(--ink-500); font: 600 0.68rem/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.hero-brief .landing-stat-grid { border: 0; border-radius: 0; background: transparent; gap: 0; }
.hero-brief .landing-stat-grid > .sc-host { padding: 14px 12px 14px 0; background: transparent; border-top: 1px solid var(--ink-100); }
.hero-brief .landing-stat-grid > .sc-host:nth-child(-n+2) { border-top: 0; }
.hero-brief .landing-stat-grid > .sc-host:nth-child(odd) { padding-right: 16px; border-right: 1px solid var(--ink-100); }
.hero-brief .landing-stat-grid > .sc-host:nth-child(even) { padding-left: 16px; }
.hero-brief .landing-stat__value { font-family: var(--font-display); font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; color: var(--navy); }
.hero-brief .landing-stat__label { font-size: 0.85rem; color: var(--ink-700); }

/* ---- Page shell: sticky chapter rail beside the chapters ---- */
.page-shell { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); max-width: 1320px; margin: 0 auto; padding: 0 clamp(var(--space-5), 3vw, var(--space-7)); }
.chapter-rail { position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 76px); padding: var(--space-8) 0; overflow-y: auto; }
.chapter-rail p { margin: 0 0 var(--space-3); color: var(--ink-500); font: 600 0.67rem/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.chapter-rail a { display: flex; align-items: center; gap: var(--space-3); min-height: 2.6rem; padding: var(--space-2) var(--space-3); border-left: 0.15rem solid var(--ink-200); color: var(--ink-600); font-size: 0.85rem; font-weight: 500; text-decoration: none; transition: color 160ms, border-color 160ms, background 160ms; }
.chapter-rail a:hover, .chapter-rail a[aria-current="true"] { color: var(--ink-900); border-color: var(--azure); background: linear-gradient(90deg, var(--azure-100), transparent); }
.chapter-rail a span { min-width: 1.4rem; color: var(--ink-500); font: 500 0.65rem/1 var(--font-mono); }
.page-main { min-width: 0; padding-bottom: var(--space-9); }
.chapter { padding: clamp(3rem, 6vw, 5rem) 0; border-bottom: 1px solid var(--ink-200); scroll-margin-top: 76px; }
.chapter--last { border-bottom: 0; }
.chapter-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.chapter-meta { color: var(--ink-500); font-size: 0.7rem; letter-spacing: 0.04em; }
.chapter section-heading { max-width: none; margin-bottom: var(--space-5); }

/* ---- Workflow steps (the five tasks) ---- */
.workflow { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.workflow-step { min-width: 0; }
.workflow-link { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--ink-200); border-radius: var(--radius-md); background: var(--white); color: inherit; text-decoration: none; box-shadow: var(--shadow-soft); transition: transform 160ms var(--ease), border-color 160ms, box-shadow 160ms; }
.workflow-link:hover, .workflow-link:focus-visible { border-color: var(--azure); box-shadow: 0 0.75rem 2rem rgba(11, 38, 58, 0.1); transform: translateY(-2px); text-decoration: none; color: inherit; }
.workflow-number { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; color: var(--white); background: var(--navy); font: 600 0.78rem/1 var(--font-mono); }
.workflow-number::before { content: "0"; }
.workflow-step:nth-child(5) .workflow-number { color: var(--ink-900); background: var(--gold); }
.workflow-step:nth-child(5) .workflow-link { background: linear-gradient(145deg, var(--gold-100), var(--white)); border-color: rgba(201, 154, 22, 0.32); }
.workflow-text { display: flex; flex-direction: column; gap: 6px; }
.workflow-text strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink-900); }
.workflow-body { color: var(--ink-600); font-size: 0.95rem; line-height: 1.55; }
.workflow-action { color: var(--blue); font-size: 0.9rem; font-weight: 600; }

/* ---- Cards: paper, hairline, soft shadow ---- */
content-panel, side-panel, .landing-route, .landing-outcome-card, .landing-result-card, .landing-checklist-item, .landing-tab, .landing-ai-question, rurality-status, metric-grid, .landing-data-table, .landing-strategy-card {
  background: var(--white); border-color: var(--ink-200); box-shadow: var(--shadow-soft);
}
content-panel[clipped] { box-shadow: var(--shadow-soft); }
side-panel[accent="azure"], content-panel[accent="azure"] { border-top-color: var(--azure); }
content-panel[accent="gold"] { border-top-color: var(--gold); }
content-section[surface="tint"], content-panel[surface="tint"], .landing-a11y-inner, a11y-panel { background: var(--surface-tint); }
index-legend, .landing-stat-grid, content-grid[layout="stat-cards"] { background: var(--ink-200); border-color: var(--ink-200); }
.landing-table-header { color: var(--ink-500); background: #f2f4f3; }
.landing-tab[data-active="true"] { border-left-color: var(--gold); background: var(--azure-100); color: var(--ink-900); }

/* ---- Buttons: pills ---- */
.landing-button, .landing-external-button, .landing-file-label, .landing-dialog-submit, .landing-dialog-cancel, .landing-a11y-close, .landing-funding-cta-link { border-radius: 999px; }
.landing-button { min-height: 2.75rem; padding: 0 var(--space-5); font-weight: 600; transition: transform 160ms var(--ease), background 160ms; }
.landing-button:hover { transform: translateY(-0.1rem); }
.landing-button--primary { background: var(--navy); color: var(--white); }
.landing-button--primary:hover, .landing-button--primary:focus-visible { background: var(--blue); color: var(--white); }
.landing-button--gold { background: var(--gold); color: var(--ink-900); }
.landing-button--outline { border: 1px solid var(--ink-300); background: var(--white); color: var(--ink-900); }
.landing-button--outline:hover { border-color: var(--azure); background: var(--azure-100); }
.landing-external-button { background: var(--gold); color: var(--ink-900); }
/* The bundled design-system Button is a <button> with inline token styles; round it to match. */
.landing-search button, .landing-rurality-search button, action-row button { border-radius: 999px !important; font-family: var(--font-sans) !important; font-weight: 600 !important; }

/* ---- Product frame (Atlas screenshot) ---- */
content-grid[layout="atlas"] { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.product-frame { margin: 0; min-width: 0; }
.frame-shell { display: block; position: relative; padding: 0.7rem; background: var(--navy-800); border-radius: var(--radius-lg); box-shadow: var(--shadow-frame); }
.frame-shell::before { content: ""; display: block; height: 1.55rem; background: radial-gradient(circle at 0.55rem 0.55rem, #e9816d 0.22rem, transparent 0.24rem), radial-gradient(circle at 1.3rem 0.55rem, #e9c66d 0.22rem, transparent 0.24rem), radial-gradient(circle at 2.05rem 0.55rem, #70bd90 0.22rem, transparent 0.24rem); }
.frame-shell img { display: block; width: 100%; height: auto; border-radius: 0.45rem; background: var(--ink-100); }
.product-frame figcaption { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); margin-top: var(--space-4); color: var(--ink-600); font-size: 0.88rem; }
.product-frame figcaption strong { color: var(--ink-900); font-weight: 600; }
.product-frame figcaption .source { white-space: nowrap; color: var(--ink-500); font: 500 0.68rem/1.5 var(--font-mono); }
.landing-feature-num { color: var(--white); background: var(--navy); }
.landing-feature strong { color: var(--ink-900); font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -0.01em; }
.landing-feature p { color: var(--ink-600); }
.landing-feature-list { margin-top: var(--space-5); }

/* ---- Program chapter ---- */
.landing-need-rows .landing-need-row-figure { font-family: var(--font-mono); font-weight: 600; }
.landing-route { border-top-width: 3px; }
.landing-routes-title { color: var(--ink-500); }

/* ---- Dark page mastheads (Programs) and the Atlas band fallback ---- */
.page-masthead, content-section[surface="brand"] { background: var(--masthead); }
.page-masthead h1 { color: var(--white); }

/* ---- Callouts and alerts from the bundle: softer corners ---- */
.landing-dialog { border-radius: var(--radius-lg); }

/* ---- Footer ---- */
footer.bg-navy { background: var(--navy-800); }
footer section-kicker[tone="inverse"] { color: rgba(255, 255, 255, 0.55); }

/* ---- Responsive ---- */
@media (max-width: 1023px) {
  .page-shell { display: block; padding: 0 var(--space-5); }
  .chapter-rail { position: sticky; top: 60px; z-index: 50; display: flex; gap: 0; max-height: none; margin: 0 calc(-1 * var(--space-5)); padding: 0 var(--space-3); overflow-x: auto; background: rgba(246, 244, 238, 0.96); border-bottom: 1px solid var(--ink-200); backdrop-filter: blur(1rem); }
  .chapter-rail p { display: none; }
  .chapter-rail a { flex: 0 0 auto; border-left: 0; border-bottom: 0.15rem solid transparent; white-space: nowrap; }
  .chapter-rail a:hover, .chapter-rail a[aria-current="true"] { background: none; border-color: var(--azure); }
  .chapter { scroll-margin-top: 112px; }
  content-grid[layout="atlas"] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  page-screen[data-screen-label="Home"] content-section[surface="masthead"] page-container[layout="hero"] { grid-template-columns: minmax(0, 1fr) !important; padding-top: var(--space-7); }
  .hero-title { font-size: clamp(2.2rem, 10vw, 3rem); }
  .hero-brief { max-width: 34rem; }
  .workflow-link { grid-template-columns: 2.6rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); }
  .workflow-number { width: 2.5rem; height: 2.5rem; }
  .frame-shell { padding: 0.4rem; border-radius: var(--radius-md); }
  .product-frame figcaption { grid-template-columns: 1fr; }
  .chapter { padding: var(--space-7) 0; }
  .page-main { padding-bottom: var(--space-7); }
}
/* The runtime wraps the bound number in its own element; keep "0" + number on one line. */
.workflow-number { display: flex; align-items: center; justify-content: center; white-space: nowrap; flex-shrink: 0; }
.workflow-number > * { display: inline; }