/* ============================================================
   AI Governance Career Growth Calculator — Styles
   Brand-derived palette: ExecSearches navy / blue / gold
   ============================================================ */

/* ---------- Design tokens ---------- */
:root,
[data-theme='light'] {
  --color-bg: #f6f8fb;
  --color-surface: #ffffff;
  --color-surface-2: #f7f9fc;
  --color-surface-offset: #eef2f7;
  --color-surface-offset-2: #e6ebf1;
  --color-divider: #e1e7ee;
  --color-border: #d6dee7;

  --color-text: #10233a;
  --color-text-muted: #5b6b7d;
  --color-text-faint: #8fa0b0;
  --color-text-inverse: #f6f8fb;

  --color-navy: #0a2342;
  --color-navy-2: #0f2f56;

  --color-primary: #2e8fd6;
  --color-primary-hover: #2478b8;
  --color-primary-active: #1c6096;
  --color-primary-highlight: #d9ecfa;

  --color-gold: #b8892f;
  --color-gold-hover: #9a7226;
  --color-gold-active: #7e5e20;
  --color-gold-highlight: #f5e9cd;

  --color-success: #2f7a4f;
  --color-success-highlight: #d9ecdf;
  --color-error: #b3403e;
  --color-error-highlight: #f5dcdb;

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 2px rgba(10, 35, 66, 0.06);
  --shadow-md: 0 6px 20px rgba(10, 35, 66, 0.08);
  --shadow-lg: 0 16px 40px rgba(10, 35, 66, 0.14);

  --content-default: 1160px;
  --content-narrow: 760px;

  --font-display: 'General Sans', 'Switzer', 'Segoe UI', sans-serif;
  --font-body: 'Switzer', 'Segoe UI', sans-serif;
}

[data-theme='dark'] {
  --color-bg: #0a1626;
  --color-surface: #0f1f33;
  --color-surface-2: #12253b;
  --color-surface-offset: #162b43;
  --color-surface-offset-2: #1b3350;
  --color-divider: #22374f;
  --color-border: #2b415b;

  --color-text: #dfe8f2;
  --color-text-muted: #92a6ba;
  --color-text-faint: #5d7690;
  --color-text-inverse: #0a1626;

  --color-navy: #061428;
  --color-navy-2: #0a1e38;

  --color-primary: #62b3f2;
  --color-primary-hover: #85c4f5;
  --color-primary-active: #a4d3f7;
  --color-primary-highlight: #1c3c56;

  --color-gold: #e0bc66;
  --color-gold-hover: #ecca7c;
  --color-gold-active: #f4d998;
  --color-gold-highlight: #3b3320;

  --color-success: #5cb37f;
  --color-success-highlight: #1e3a2a;
  --color-error: #e08482;
  --color-error-highlight: #402424;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-bg: #0a1626;
    --color-surface: #0f1f33;
    --color-surface-2: #12253b;
    --color-surface-offset: #162b43;
    --color-surface-offset-2: #1b3350;
    --color-divider: #22374f;
    --color-border: #2b415b;
    --color-text: #dfe8f2;
    --color-text-muted: #92a6ba;
    --color-text-faint: #5d7690;
    --color-text-inverse: #0a1626;
    --color-navy: #061428;
    --color-navy-2: #0a1e38;
    --color-primary: #62b3f2;
    --color-primary-hover: #85c4f5;
    --color-primary-active: #a4d3f7;
    --color-primary-highlight: #1c3c56;
    --color-gold: #e0bc66;
    --color-gold-hover: #ecca7c;
    --color-gold-active: #f4d998;
    --color-gold-highlight: #3b3320;
    --color-success: #5cb37f;
    --color-success-highlight: #1e3a2a;
    --color-error: #e08482;
    --color-error-highlight: #402424;
  }
}

/* ---------- Type scale ---------- */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
}

/* ---------- Base reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-16);
}
body {
  min-height: 100dvh;
  line-height: 1.6;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}
img, svg, canvas { display: block; max-width: 100%; height: auto; }
input, button, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.15; font-family: var(--font-display); }
p, li { text-wrap: pretty; }
::selection { background: color-mix(in oklab, var(--color-primary) 30%, transparent); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }
button { cursor: pointer; background: none; border: none; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

.wrap { max-width: var(--content-default); margin-inline: auto; padding-inline: var(--space-6); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-divider);
}
.header-inner {
  display: flex; align-items: center; gap: var(--space-4);
  padding-block: var(--space-3);
}
.brand { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text); }
.brand-mark { color: var(--color-primary); flex-shrink: 0; }
.brand-text { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); letter-spacing: -0.01em; }
.header-tag {
  margin-left: auto; margin-right: var(--space-4);
  font-size: var(--text-xs); color: var(--color-text-muted);
  display: none;
}
@media (min-width: 720px) { .header-tag { display: inline; } }
.theme-toggle {
  width: 38px; height: 38px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  transition: border-color var(--transition-interactive), color var(--transition-interactive);
}
.theme-toggle:hover { color: var(--color-primary); border-color: var(--color-primary); }
.icon-moon { display: none; }
[data-theme='dark'] .icon-sun { display: none; }
[data-theme='dark'] .icon-moon { display: block; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-2) 62%, #123a63 100%);
  color: #eef4fb;
  padding-block: var(--space-16) var(--space-12);
}
.hero-inner { max-width: 760px; }
.eyebrow {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-gold-hover);
  margin-bottom: var(--space-4);
}
.hero h1 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.01em; margin-bottom: var(--space-5); color: #fff; }
.hero-sub { font-size: var(--text-lg); color: #b9cbe0; max-width: 640px; margin-bottom: var(--space-8); }
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-full);
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive), background var(--transition-interactive);
}
.btn-primary {
  background: var(--color-primary); color: #06172a;
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); color: #06172a; }
.hero-signals {
  margin-top: var(--space-12);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4);
}
@media (min-width: 720px) { .hero-signals { grid-template-columns: repeat(3, 1fr); } }
.signal-chip {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.signal-chip .stat { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--color-gold-hover); font-variant-numeric: tabular-nums; }
.signal-chip .label { font-size: var(--text-xs); color: #a9bdd4; margin-top: var(--space-1); }

/* ---------- Sections ---------- */
main section { padding-block: var(--space-16); }
.section-title { font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--space-2); letter-spacing: -0.01em; }
.section-sub { color: var(--color-text-muted); font-size: var(--text-base); max-width: 680px; margin-bottom: var(--space-8); }

.calculator-section { background: var(--color-surface-2); border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }

/* ---------- Calculator grid ---------- */
.calc-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 940px) { .calc-grid { grid-template-columns: 1.15fr 1fr; align-items: start; } }

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}

.field-group { margin-bottom: var(--space-6); }
.field-group:last-child { margin-bottom: 0; }
.field-group label {
  display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-2); color: var(--color-text);
}
.label-note { font-weight: 400; color: var(--color-text-muted); font-size: var(--text-xs); }
.field-row { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-bottom: var(--space-6); }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

select {
  width: 100%; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" stroke="%235b6b7d" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right var(--space-4) center;
  appearance: none; font-size: var(--text-sm); color: var(--color-text);
}
select:focus { border-color: var(--color-primary); }

.segmented { display: flex; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.segmented button {
  flex: 1; padding: var(--space-3) var(--space-2); font-size: var(--text-sm); font-weight: 500;
  color: var(--color-text-muted); text-align: center;
  border-right: 1px solid var(--color-border);
}
.segmented button:last-child { border-right: none; }
.segmented button.active { background: var(--color-primary-highlight); color: var(--color-primary-active); font-weight: 600; }
.segmented button:hover:not(.active) { background: var(--color-surface-offset); }

.value-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4em; padding: 0.1em 0.5em;
  background: var(--color-primary-highlight); color: var(--color-primary-active);
  border-radius: var(--radius-full); font-weight: 700; font-variant-numeric: tabular-nums;
}

input[type="range"] {
  width: 100%; height: 6px; border-radius: var(--radius-full);
  background: var(--color-surface-offset-2);
  accent-color: var(--color-primary);
}
.slider-ticks { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-2); }

.cert-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
@media (min-width: 560px) { .cert-grid { grid-template-columns: 1fr 1fr; } }
.cert-item {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  cursor: pointer; transition: border-color var(--transition-interactive), background var(--transition-interactive);
}
.cert-item:hover { border-color: var(--color-gold); }
.cert-item.checked { border-color: var(--color-gold); background: var(--color-gold-highlight); }
.cert-item input { margin-top: 3px; accent-color: var(--color-gold); flex-shrink: 0; }
.cert-item .cert-name { font-size: var(--text-sm); font-weight: 600; display: block; }
.cert-item .cert-meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.cert-item.estimated .cert-meta::after { content: " · est."; color: var(--color-text-faint); }

/* ---------- Results panel ---------- */
.results-panel { background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-2) 100%); border: none; color: #eef4fb; }
.headline-label { font-size: var(--text-xs); color: #a9bdd4; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: var(--space-2); }
.headline-value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.headline-range { font-size: var(--text-sm); color: #b9cbe0; margin-top: var(--space-2); }
.headline-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  margin-top: var(--space-4); padding: var(--space-1) var(--space-3);
  background: color-mix(in oklab, var(--color-gold) 30%, transparent);
  border: 1px solid var(--color-gold);
  color: var(--color-gold-hover);
  border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600;
}
.headline-card { margin-bottom: var(--space-8); padding-bottom: var(--space-6); border-bottom: 1px solid rgba(255,255,255,0.12); }
.result-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-6); }
.mini-stat { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md); padding: var(--space-3); }
.mini-label { font-size: var(--text-xs); color: #a9bdd4; margin-bottom: var(--space-1); }
.mini-value { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.mini-value.accent-gold { color: var(--color-gold-hover); }
.result-note { font-size: var(--text-xs); color: #94aac3; line-height: 1.5; }
.result-note a { color: var(--color-gold-hover); }

/* ---------- ROI section ---------- */
.roi-highlight {
  background: color-mix(in oklab, var(--color-gold) 12%, var(--color-surface));
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  font-size: var(--text-base);
}
.roi-highlight strong { color: var(--color-gold-active); font-family: var(--font-display); }
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.roi-table { min-width: 700px; width: 100%; }
.roi-table th, .roi-table td { padding: var(--space-3) var(--space-3); text-align: left; font-size: var(--text-sm); border-bottom: 1px solid var(--color-divider); white-space: nowrap; }
.roi-table th { color: var(--color-text-muted); font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; background: var(--color-surface-offset); }
.roi-table tbody tr:last-child td { border-bottom: none; }
.roi-table tbody tr.checked-row { background: var(--color-gold-highlight); }
.roi-table td.num { font-variant-numeric: tabular-nums; }
.roi-table .cert-name-cell { font-weight: 600; white-space: normal; min-width: 190px; }
.roi-table .cert-name-cell .issuer-note { display: block; font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 400; }
.table-footnote { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-4); }

/* ---------- Trajectory ---------- */
.chart-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-sm);
}
.chart-canvas-wrap { position: relative; height: 340px; }
@media (min-width: 720px) { .chart-canvas-wrap { height: 400px; } }
.trajectory-summary { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-8); }
@media (min-width: 720px) { .trajectory-summary { grid-template-columns: repeat(3, 1fr); } }
.summary-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); }
.summary-card .summary-label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; margin-bottom: var(--space-2); }
.summary-card .summary-value { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.summary-card.gold .summary-value { color: var(--color-gold-active); }
[data-theme='dark'] .summary-card.gold .summary-value { color: var(--color-gold); }

/* ---------- Market signals ---------- */
.signals-section { background: var(--color-surface-2); border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.signals-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 640px) { .signals-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .signals-grid { grid-template-columns: repeat(3, 1fr); } }
.signal-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.signal-card .stat { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.signal-card .label { font-size: var(--text-sm); color: var(--color-text); margin-block: var(--space-2); }
.signal-card .src { font-size: var(--text-xs); color: var(--color-text-faint); }
.signal-card .src a { color: var(--color-text-muted); }

/* ---------- Methodology ---------- */
.method-columns { display: grid; grid-template-columns: 1fr; gap: var(--space-10); }
@media (min-width: 860px) { .method-columns { grid-template-columns: 1.1fr 1fr; } }
.method-columns h3 { font-size: var(--text-lg); margin-bottom: var(--space-4); }
.method-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.method-list li { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; padding-left: var(--space-5); position: relative; }
.method-list li::before { content: '—'; position: absolute; left: 0; color: var(--color-primary); }
.source-list li::before { content: none; padding-left: 0; }
.source-list li { padding-left: 0; }
.source-list a { color: var(--color-primary); font-weight: 500; }
.disclaimer { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--color-divider); font-size: var(--text-xs); color: var(--color-text-faint); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--color-divider); padding-block: var(--space-8); }
.footer-inner { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-faint); }
@media (min-width: 640px) { .footer-inner { flex-direction: row; justify-content: space-between; } }
.footer-links a { color: var(--color-text-muted); }

code { font-family: 'SFMono-Regular', ui-monospace, monospace; font-size: 0.9em; background: var(--color-surface-offset); padding: 0.1em 0.35em; border-radius: var(--radius-sm); }