/* =========================================================================
   Forecast Access — style.css v1
   Design system: see /DESIGN.md for token rationale and component character.
   Mobile-first. Breakpoints tested: 375 / 768 / 1024 / 1440.
   Class names are semantic and self-explanatory by design (see DESIGN.md
   "Class-naming convention"): every class used across public_html is listed
   in DESIGN.md's Component character section. Sub-agents extend this file's
   conventions rather than inventing obfuscated ones.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Shell (dark charcoal-green) */
  --color-ink-950: #0A1512;
  --color-ink-900: #0F1E19;
  --color-ink-800: #16281F;
  --color-ink-700: #22392E;
  --color-ink-600: #3A5347;

  /* Body (light) */
  --color-paper: #F5F8F6;
  --color-surface: #FFFFFF;
  --color-text: #101915;
  --color-text-soft: #4A5C52;
  --color-border: #E0E8E3;

  /* Accents */
  --color-forecast-green: #16A672;
  --color-forecast-green-strong: #0E7C54;
  --color-green-tint: #DEF3E8;
  --color-signal-blue: #2C6FE0;
  --color-signal-blue-strong: #1F52AE;
  --color-risk: #BB4430;
  --color-risk-tint: #FBE8E1;

  /* Chart data-series (validated via dataviz skill; see DESIGN.md Origin) */
  --chart-green: #16A672;
  --chart-blue: #2C6FE0;
  --chart-risk: #BB4430;

  /* Type scale */
  --fs-100: 0.875rem;
  --fs-200: 1rem;
  --fs-300: 1.125rem;
  --fs-400: 1.375rem;
  --fs-500: 1.75rem;
  --fs-600: 2.125rem;
  --fs-700: 2.75rem;
  --lh-tight: 1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* Spacing */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;
  --space-7: 3rem; --space-8: 4rem; --space-9: 6rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-signal: 4px 20px 4px 20px;

  /* Shadow */
  --shadow-card: 0 4px 20px rgba(10, 21, 18, 0.10);
  --shadow-glow: 0 0 40px rgba(22, 166, 114, 0.28);

  --max-content-width: 46rem;
  --max-page-width: 75rem;
  --sidebar-width: 280px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--color-signal-blue-strong); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--color-forecast-green-strong); }
h1, h2, h3, h4, h5 { line-height: var(--lh-tight); margin: 0 0 var(--space-4); font-weight: 700; color: var(--color-ink-950); }
h1 { font-size: var(--fs-600); }
h2 { font-size: var(--fs-500); margin-top: var(--space-8); }
h3 { font-size: var(--fs-400); margin-top: var(--space-6); }
p { margin: 0 0 var(--space-4); }
ul, ol { padding-left: 1.25em; margin: 0 0 var(--space-4); }
li + li { margin-top: var(--space-2); }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

@media (min-width: 1024px) {
  h1 { font-size: var(--fs-700); }
  h2 { font-size: 2.125rem; }
}

/* ---------- Layout helpers ---------- */
.container {
  max-width: var(--max-page-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}
.content-col {
  max-width: var(--max-content-width);
  margin: 0 auto;
}
.section-pad { padding: var(--space-8) 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0; padding: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--color-forecast-green);
  color: var(--color-ink-950); padding: var(--space-2) var(--space-4); z-index: 1000;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

.card-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; margin: var(--space-6) 0; }
.card-grid--2 { grid-template-columns: 1fr; }
.card-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .card-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Header / Sidebar nav ---------- */
.site-header {
  background: var(--color-ink-950);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--space-3); padding-bottom: var(--space-3);
}
.wordmark { display: flex; align-items: center; gap: var(--space-2); font-weight: 800; font-size: var(--fs-300); text-decoration: none; letter-spacing: -0.01em; }
.wordmark__logo { display: block; width: 32px; height: 32px; flex-shrink: 0; }
.wordmark__forecast { color: #fff; }
.wordmark__access { color: var(--color-forecast-green); }
.wordmark:hover .wordmark__logo { opacity: 0.85; }
.wordmark:hover .wordmark__forecast,
.wordmark:hover .wordmark__access { opacity: 0.85; }
.nav-toggle, .nav-close {
  background: none; border: 1px solid var(--color-ink-700); color: #fff;
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (min-width: 768px) { .site-header { display: none; } }

.site-nav__drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-width);
  max-width: 85vw;
  background: var(--color-ink-950);
  color: #fff;
  overflow-y: auto;
  z-index: 210;
  padding: var(--space-5);
  transform: translateX(-100%);
  transition: transform 0.2s ease;
}
.site-nav__drawer.is-open { transform: translateX(0); }
.site-nav__drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.nav-overlay {
  display: none;
  position: fixed; inset: 0; background: rgba(10, 21, 18, 0.6);
  z-index: 205;
}
.nav-overlay.is-open { display: block; }
@media (min-width: 768px) {
  .site-nav__drawer { transform: none; z-index: 100; box-shadow: 4px 0 20px rgba(10,21,18,0.15); }
  .site-nav__drawer-head { margin-bottom: var(--space-6); }
  .nav-close { display: none; }
  .nav-overlay { display: none !important; }
}

.page-wrap { min-width: 0; }
@media (min-width: 768px) {
  .page-wrap { margin-left: var(--sidebar-width); }
}

.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.site-nav__list li { margin: 0; }
.site-nav__list > li:not(.nav-group) > a { display: block; padding: var(--space-2) 0; }
.site-nav a { color: #cdd9d2; text-decoration: none; font-size: var(--fs-100); font-weight: 600; }
.site-nav a:hover, .site-nav a:focus { color: var(--color-forecast-green); }

/* ---------- Nav dropdown (accordion, shared by sidebar + drawer) ---------- */
.nav-group__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.nav-group__row > a { flex: 1 1 auto; padding: var(--space-2) 0; }
.nav-group__toggle {
  background: none; border: none; color: #cdd9d2; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-2);
}
.nav-group__toggle:hover, .nav-group__toggle:focus { color: var(--color-forecast-green); }
.nav-group__toggle svg { transition: transform 0.15s ease; }
.nav-group.is-open .nav-group__toggle svg { transform: rotate(180deg); }

.nav-group__list {
  list-style: none; margin: 0; padding: var(--space-1) 0 var(--space-2) var(--space-4);
  display: none; flex-direction: column; gap: var(--space-3);
}
.nav-group.is-open .nav-group__list { display: flex; }
.nav-group__list a { font-weight: 500; color: #9fbcae; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { font-size: var(--fs-100); color: var(--color-text-soft); margin: var(--space-4) 0; }
.breadcrumbs a { color: var(--color-text-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-forecast-green-strong); }
.breadcrumbs__sep { margin: 0 var(--space-2); color: var(--color-border); }

/* ---------- Hero ---------- */
.hero {
  background-color: var(--color-ink-950);
  color: #fff;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  left: 0; right: 0;
  top: -15%; height: 130%;
  background-size: cover;
  background-position: center;
  z-index: 0;
  will-change: transform;
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; }
@media (prefers-reduced-motion: reduce) {
  .hero__canvas { display: none; }
  .hero__bg { transform: none !important; }
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(10,21,18,0.55) 0%, rgba(10,21,18,0.88) 100%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 3; padding: var(--space-8) var(--space-5); }
.hero h1 { color: #fff; max-width: 42rem; }
.hero__lead { font-size: var(--fs-300); color: #dcebe3; max-width: 40rem; }
.hero--compact .hero__inner { padding: var(--space-6) var(--space-5); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: var(--fs-200);
}
.btn--primary { background: var(--color-forecast-green); color: var(--color-ink-950); }
.btn--primary:hover { background: var(--color-forecast-green-strong); color: #fff; }
.btn--outline { background: transparent; border-color: var(--color-ink-950); color: var(--color-ink-950); }
.btn--outline:hover { background: var(--color-ink-950); color: #fff; }
.btn--outline-light { border-color: #fff; color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--color-ink-950); }

/* ---------- Answer block ---------- */
/* A small glowing "resolved signal" dot marks this box instead of a flat
   colored side bar (the side-tab accent-border pattern is a recognizable
   generic-AI-UI tell; this ties the marker to the site's own signal-
   convergence motif instead). */
.answer-block {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-signal);
  padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + var(--space-4));
  font-size: var(--fs-300);
  line-height: var(--lh-relaxed);
  margin: var(--space-6) 0;
  box-shadow: var(--shadow-card);
}
.answer-block::before {
  content: "";
  position: absolute;
  left: var(--space-4);
  top: var(--space-6);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-forecast-green);
  box-shadow: 0 0 0 4px var(--color-green-tint);
}

/* ---------- Cards ---------- */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-signal);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.card, div.card { display: block; }
a.card { text-decoration: none; }
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(10,21,18,0.14); }
.card h3 { margin-top: 0; text-decoration: underline; }

/* ---------- CTA / Partner asides ---------- */
.cta {
  border-radius: var(--radius-signal);
  padding: var(--space-6);
  margin: var(--space-7) 0;
}
.cta--partner {
  background: var(--color-ink-950);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.cta--partner h3, .cta--partner h4 { color: #fff; }
.cta--partner p { color: #cdd9d2; }
.cta__note { font-size: var(--fs-100); color: #9fbcae; margin-top: var(--space-3); }

.cta--inline {
  background: var(--color-green-tint);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.cta--inline__text { margin: 0; font-size: var(--fs-200); color: var(--color-text); flex: 1 1 320px; }
.cta--inline__link {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--color-forecast-green-strong);
  text-decoration: none;
  white-space: nowrap;
}
.cta--inline__link:hover { text-decoration: underline; }

.logo-chip {
  display: inline-block;
  background: #fff;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
  line-height: 0;
}
.logo-chip img { height: 22px; width: auto; display: block; }

/* ---------- Partner list ---------- */
.partner-list { margin: var(--space-7) 0; }
.partner-list__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.partner-list__item {
  position: relative;
  background: var(--color-ink-800);
  color: #fff;
  border-radius: var(--radius-signal);
  padding: var(--space-5);
  display: flex; align-items: flex-start; gap: var(--space-4);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
li.partner-list__item:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(10,21,18,0.28); }
.partner-list__item > *:not(.partner-list__item-link) { position: relative; z-index: 1; }
.partner-list__item .logo-chip { padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); display: inline-block; }
.partner-list__item .logo-chip img { height: 18px; }
.partner-list__badge {
  flex: 0 0 auto;
  width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-weight: 800;
  background: var(--color-ink-700);
  color: #fff;
}
.partner-list__item--rank-1 .partner-list__badge { background: var(--color-forecast-green); color: var(--color-ink-950); }
.partner-list__item--rank-2 .partner-list__badge,
.partner-list__item--rank-3 .partner-list__badge { background: var(--color-signal-blue); color: #fff; }
.partner-list__item h4 { color: #fff; margin-bottom: var(--space-2); }
.partner-list__item p { color: #cdd9d2; margin-bottom: var(--space-3); }
.partner-list__item-link { position: absolute; inset: 0; z-index: 0; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; margin: var(--space-6) 0; border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
table { width: 100%; border-collapse: collapse; background: var(--color-surface); font-size: var(--fs-100); }
thead th {
  background: var(--color-ink-950); color: #fff;
  text-align: left; padding: var(--space-3) var(--space-4);
  font-weight: 700; white-space: nowrap;
}
tbody td, tbody th { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) { background: var(--color-paper); }

/* ---------- FAQ Accordion (native details/summary, no JS) ---------- */
.faq { margin: var(--space-6) 0; display: flex; flex-direction: column; gap: var(--space-3); }
.faq__item {
  background: var(--color-surface); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.faq__item summary {
  cursor: pointer; padding: var(--space-4) var(--space-5);
  font-weight: 700; list-style: none; position: relative;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; color: var(--color-forecast-green-strong); font-size: 1.5rem; font-weight: 400;
  transition: transform 0.15s ease; flex: 0 0 auto;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:focus-visible { outline: 2px solid var(--color-signal-blue); outline-offset: -2px; }
.faq__answer { padding: 0 var(--space-5) var(--space-5); color: var(--color-text-soft); }

/* ---------- Callouts ---------- */
/* Same dot-marker treatment as .answer-block, tinted background carries the
   risk/info distinction rather than a side-tab accent border. */
.callout {
  position: relative;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + var(--space-4));
  margin: var(--space-6) 0;
}
.callout::before {
  content: "";
  position: absolute;
  left: var(--space-3);
  top: var(--space-5);
  width: 8px; height: 8px;
  border-radius: 50%;
}
.callout--risk { background: var(--color-risk-tint); }
.callout--risk::before { background: var(--color-risk); box-shadow: 0 0 0 4px rgba(187, 68, 48, 0.15); }
.callout--info { background: var(--color-green-tint); }
.callout--info::before { background: var(--color-forecast-green-strong); box-shadow: 0 0 0 4px rgba(22, 166, 114, 0.15); }

/* ---------- Widgets: calculators / checker / quiz ---------- */
.widget {
  background: var(--color-surface); border-radius: var(--radius-signal);
  box-shadow: var(--shadow-card); margin: var(--space-7) 0; overflow: hidden;
}
.widget__header {
  background: var(--color-ink-800); color: #fff;
  padding: var(--space-4) var(--space-5); font-weight: 700;
}
.widget__body { padding: var(--space-5); }
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-weight: 600; font-size: var(--fs-100); margin-bottom: var(--space-2); }
.field input, .field select {
  width: 100%; padding: var(--space-3); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-paper);
}
.widget__result {
  background: var(--color-ink-950); color: #fff; border-radius: var(--radius-sm);
  padding: var(--space-4); margin-top: var(--space-4); font-size: var(--fs-300);
}
.widget__result strong { color: var(--color-forecast-green); }

/* ---------- Chart container ---------- */
.chart-card {
  background: var(--color-surface); border-radius: var(--radius-signal);
  box-shadow: var(--shadow-card); padding: var(--space-5); margin: var(--space-7) 0;
}
.chart-card canvas { max-width: 100%; }
.chart-legend { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-4); font-size: var(--fs-100); }
.chart-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.chart-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ---------- Comparison / illustration figure ---------- */
.figure { margin: var(--space-7) 0; }
.figure img { border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.figure figcaption { font-size: var(--fs-100); color: var(--color-text-soft); margin-top: var(--space-3); }

/* ---------- Article prose ---------- */
.prose { font-size: var(--fs-200); line-height: var(--lh-relaxed); }
.prose h2:first-child { margin-top: 0; }

/* Scroll reveal: the .reveal class is only ever added by main.js, right
   before it starts observing an element, so content stays visible by
   default if JS fails to load. */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

.prose .ext-link { white-space: nowrap; }
.prose .ext-link::after {
    content: "\2197";
    display: inline-block;
    margin-left: 0.15em;
    font-size: 0.75em;
    text-decoration: none;
    vertical-align: super;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--color-ink-950); color: #9fbcae; padding: var(--space-8) 0 var(--space-6); margin-top: var(--space-9); }
.site-footer a { color: #cdd9d2; text-decoration: none; }
.site-footer a:hover { color: var(--color-forecast-green); }
.footer-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-grid h5 { color: #fff; font-size: var(--fs-100); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-3); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-bottom { border-top: 1px solid var(--color-ink-700); margin-top: var(--space-6); padding-top: var(--space-5); font-size: var(--fs-100); }
.footer-bottom__note { color: var(--color-ink-600); margin-top: var(--space-2); }

/* ---------- Utility pages ---------- */
.utility-page .prose h2 { margin-top: var(--space-6); }