/* Wood Heat Index -- lean hand-written stylesheet, no framework.
   Evidence-tier and uncertainty styling is load-bearing product copy
   (ws5-evaluation-protocol.md's guardrails), not decoration -- keep any
   edits here consistent with what tests/build asserts. */

:root {
  --bg: #fbf9f6;
  --bg-card: #ffffff;
  --text: #201a14;
  --text-muted: #6b5f52;
  --border: #e4dcd0;
  --accent: #8a4a2c;
  --link: #6b3a1f;
  --tier-observed: #2f6d3b;
  --tier-state: #8a6a1c;
  --tier-structural: #6b5f52;
  --warn-bg: #fdf1dc;
  --warn-border: #e8b84b;
  --warn-text: #6b4a06;
  --below-range: #2f6d3b;
  --within-range: #1c5d8a;
  --above-range: #a24a2a;
  --gov-data: #f4f0ea;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171310;
    --bg-card: #201a15;
    --text: #ede6dc;
    --text-muted: #b3a596;
    --border: #3a2f26;
    --accent: #d99a6c;
    --link: #e0a878;
    --tier-observed: #6fbf7c;
    --tier-state: #d9b24c;
    --tier-structural: #b3a596;
    --warn-bg: #3a2c0f;
    --warn-border: #b98a2e;
    --warn-text: #f0d18a;
    --below-range: #6fbf7c;
    --within-range: #7db8e8;
    --above-range: #e08a5c;
    --gov-data: #241d17;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
}

a { color: var(--link); }

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  max-width: 52rem;
  margin: 0 auto;
}
.brand { font-weight: 700; text-decoration: none; color: var(--text); }
.site-nav a { margin-left: 1.25rem; text-decoration: none; color: var(--text-muted); font-size: 0.95rem; }
.site-nav a:hover { color: var(--link); }

main {
  max-width: 42rem;
  margin: 0 auto;
  padding: 1.5rem;
}

h1 { font-size: 1.8rem; margin-bottom: 0.3rem; }
h2 { font-size: 1.25rem; margin-top: 2.2rem; }
h3 { font-size: 1.05rem; }

.breadcrumb { color: var(--text-muted); font-size: 0.9rem; }
.subhead { color: var(--text-muted); margin-top: 0; }
.section-note { color: var(--text-muted); font-size: 0.92rem; }

.zip-banner {
  background: var(--gov-data);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.6rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.92rem;
}

/* --- price card / evidence tiers --- */

.price-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 5px solid var(--tier-structural);
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0;
}
.price-card.evidence-observed { border-left-color: var(--tier-observed); }
.price-card.evidence-state_anchored { border-left-color: var(--tier-state); }
.price-card.evidence-structural_only { border-left-color: var(--tier-structural); }

.price { font-size: 2.4rem; font-weight: 700; margin: 0; }
.price .unit { font-size: 1.1rem; font-weight: 400; color: var(--text-muted); }
.interval { color: var(--text-muted); margin: 0.15rem 0 0.6rem; }
.mmbtu-price { margin: 0.2rem 0; }

.evidence-tier-badge {
  display: inline-block;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-top: 0.6rem;
}
.evidence-observed .evidence-tier-badge { color: var(--tier-observed); }
.evidence-state_anchored .evidence-tier-badge { color: var(--tier-state); }
.evidence-structural_only .evidence-tier-badge { color: var(--tier-structural); }
.evidence-tier-reason { color: var(--text-muted); font-size: 0.9rem; margin-top: 0.1rem; }

.wide-uncertainty-flag {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn-text);
  border-radius: 0.4rem;
  padding: 0.5rem 0.75rem;
  margin-top: 0.75rem;
  font-size: 0.92rem;
}

/* --- forms / checker --- */

.zip-form, #quote-form, #submit-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: end;
  margin-top: 1rem;
}
.zip-form label, #quote-form label, #submit-form label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.2rem; }
input[type="text"], input[type="number"], input[type="date"], select {
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  padding: 0.5rem 0.65rem;
  font-size: 1rem;
  background: var(--bg-card);
  color: var(--text);
  width: 9rem;
}
button {
  border: none;
  background: var(--accent);
  color: #fff;
  border-radius: 0.4rem;
  padding: 0.55rem 1rem;
  font-size: 1rem;
  cursor: pointer;
}
button:hover { opacity: 0.92; }
button:disabled { opacity: 0.6; cursor: default; }
.zip-status, .quote-result, .submit-result { font-size: 0.92rem; margin-top: 0.5rem; min-height: 1.2em; }
.quote-result-below-range { color: var(--below-range); }
.quote-result-within-range { color: var(--within-range); }
.quote-result-above-range { color: var(--above-range); }
.submit-result-success { color: var(--tier-observed); }
.submit-result-error { color: var(--above-range); }

/* The honeypot field: off-screen, not display:none (some bots skip
   display:none fields specifically), and unreachable by keyboard tab. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- tables --- */

table { width: 100%; border-collapse: collapse; margin: 0.75rem 0 1.25rem; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); }
th { color: var(--text-muted); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; }
tr.is-firewood td { font-weight: 700; }
tr.is-government-data td { color: var(--text); }
.fuel-source-note { color: var(--text-muted); font-size: 0.85rem; }

/* --- misc content --- */

.disclaimer {
  background: var(--gov-data);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.context-list { color: var(--text-muted); font-size: 0.92rem; padding-left: 1.1rem; }
.wood-emissions { font-size: 0.95rem; }

.site-footer {
  max-width: 42rem;
  margin: 2rem auto 1rem;
  padding: 1rem 1.5rem 2rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.8rem;
}
.site-footer p { margin: 0.25rem 0; }
.footer-nav { font-size: 0.85rem; }

.static-page section { margin-top: 1.5rem; }

.hero .lede { color: var(--text-muted); max-width: 34rem; }
.about { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 2rem; }
.not-found { padding: 3rem 0; }