@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* =============================================================================
   EnerTherm Engineering — shared calculator styles
   Single source of truth for branding. Every calculator loads this file.

   Implements the EnerTherm Brand Style Guide (shared/branding/BRAND_STYLE_GUIDE.md):
   editorial grid (borders not gaps), industrial typography (Outfit headings,
   uppercase, tracking-tighter), engineering precision (JetBrains Mono for data),
   two-tone brand (ENG Blue #054475 for trust, ENG Green #254504 for action),
   sharp corners, slate neutrals, 300ms motion restraint.

   The two live calculators (thermal-calculator, doe-generator) are thin shims on
   top of these --et-* tokens, so restyling here re-skins them automatically.
   Token NAMES are stable contract; only their values change.
   ========================================================================== */

:root {
  /* --- Brand colours -------------------------------------------------------
     Two-tone: ENG Blue = trust / focus / primary; ENG Green = action / accent. */
  --et-eng-blue:     #054475;
  --et-eng-blue-dk:  #043258; /* hover-darker blue */
  --et-eng-green:    #254504;
  --et-eng-green-dk: #1a3203;
  --et-link:         #075FA7; /* hyperlinks, interactive blue */
  --et-accent-green: #5fa707; /* link hover, bright on-dark accent, success */

  /* --- Neutral scale (Slate) ----------------------------------------------- */
  --et-slate-50:  #f8fafc;
  --et-slate-100: #f1f5f9;
  --et-slate-200: #e2e8f0;
  --et-slate-300: #cbd5e1;
  --et-slate-400: #94a3b8;
  --et-slate-500: #64748b;
  --et-slate-600: #475569;
  --et-slate-700: #334155;
  --et-slate-800: #1e293b;
  --et-slate-900: #0f172a;

  /* Back-compat aliases: calculator shims reference --et-navy-*; these now map
     onto the slate neutral ramp so existing markup keeps theming correctly. */
  --et-navy-50:  var(--et-slate-50);
  --et-navy-100: var(--et-slate-100);
  --et-navy-200: var(--et-slate-200);
  --et-navy-300: var(--et-slate-300);
  --et-navy-400: var(--et-slate-400);
  --et-navy-500: var(--et-slate-500);
  --et-navy-600: var(--et-slate-600);
  --et-navy-700: var(--et-slate-700);
  --et-navy-800: var(--et-slate-800);
  --et-navy-900: var(--et-slate-900);

  /* --- Semantic tokens (component styles + shims reference these) ----------- */
  --et-ink:          var(--et-slate-900); /* headings / strong text */
  --et-ink-soft:     var(--et-slate-600); /* secondary text, labels */
  --et-muted:        var(--et-slate-500); /* muted text, hints */
  --et-faint:        var(--et-slate-300); /* faint marks */
  --et-body:         var(--et-slate-800); /* default body copy */
  --et-bg:           #ffffff;             /* page background (editorial white) */
  --et-surface:      #ffffff;             /* cards / panels */
  --et-border:       var(--et-slate-200); /* hairline dividers, inputs */
  --et-border-strong:var(--et-slate-300); /* stronger field borders */
  --et-rule:         var(--et-slate-900); /* editorial section rules */
  --et-primary:      var(--et-eng-blue);  /* primary brand / focus / active */
  --et-primary-dk:   var(--et-eng-blue-dk);
  --et-accent:       var(--et-eng-green); /* action / CTA / accent bars */
  --et-accent-600:   var(--et-eng-green-dk);
  --et-success:      #059669;
  --et-success-dot:  #34d399;
  --et-warn:         #d97706;
  --et-danger:       #dc2626;

  /* --- Typography ----------------------------------------------------------- */
  --et-font: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --et-display: 'Outfit', 'Inter', ui-sans-serif, system-ui, -apple-system,
             "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --et-mono: 'JetBrains Mono', ui-monospace, "SFMono-Regular", "SF Mono",
             "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* --- Scale ---------------------------------------------------------------
     Sharp corners on the public site (radius 0) is part of the editorial DNA. */
  --et-radius: 0;
  --et-radius-sm: 0;
  --et-gap: 16px;
  --et-shadow: 0 4px 24px rgba(15, 23, 42, .08); /* dropdowns / tooltips only */
  --et-maxw: 1000px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--et-font);
  color: var(--et-body);
  background: var(--et-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Layout ------------------------------------------------------------------- */
.et-app { max-width: var(--et-maxw); margin: 0 auto; padding: 28px 24px 56px; }

.et-header {
  display: flex; align-items: flex-start; gap: 14px;
  padding-bottom: 18px; margin-bottom: 30px;
  border-bottom: 2px solid var(--et-rule);
}
.et-header__logo { height: 36px; width: auto; }
.et-header__title {
  font-family: var(--et-display);
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--et-ink);
}
.et-header__dot { color: var(--et-accent-green); }
.et-header__title small {
  display: block; margin-top: 8px;
  font-family: var(--et-mono);
  font-weight: 700; font-size: .62rem;
  text-transform: uppercase; letter-spacing: .26em;
  color: var(--et-muted);
}

/* Headings — Outfit, uppercase, tight tracking (industrial typography) ------ */
h1 {
  font-family: var(--et-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 900; line-height: 1.05;
  text-transform: uppercase; letter-spacing: -.03em;
  margin: 0 0 .35em; color: var(--et-ink);
}
h2 {
  font-family: var(--et-display);
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  font-weight: 800; line-height: 1.15;
  text-transform: uppercase; letter-spacing: -.02em;
  color: var(--et-ink);
}
h3 { font-family: var(--et-display); font-size: 1.1rem; font-weight: 700; color: var(--et-ink); }
h4 { font-family: var(--et-display); font-size: .95rem; font-weight: 700; color: var(--et-ink); }

/* Accent bar (hero/section flourish — w-12 h-1 bg-eng-green in the guide) ---- */
.et-accent-bar { width: 52px; height: 4px; background: var(--et-accent); margin: 0 0 18px; }

.et-lead { color: var(--et-ink-soft); margin: 0 0 26px; max-width: 72ch; font-size: 1.02rem; }

/* Links -------------------------------------------------------------------- */
.et-app a { color: var(--et-link); font-weight: 600; text-decoration: none; text-underline-offset: 3px; }
.et-app a:hover { color: var(--et-accent-green); text-decoration: underline; }

/* Eyebrow / section labels (mono, uppercase, wide tracking, green) --------- */
.et-section-label {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--et-mono);
  font-size: .625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3em;
  color: var(--et-accent); margin: 30px 0 12px;
}
.et-section-label::before { content: ""; width: 20px; height: 2px; background: var(--et-accent); flex: none; }

/* Cards (editorial: sharp corners, hairline border, no shadow) ------------- */
.et-card {
  background: var(--et-surface);
  border: 1px solid var(--et-border);
  border-radius: var(--et-radius);
  padding: 22px;
  margin-bottom: var(--et-gap);
}

/* Form fields -------------------------------------------------------------- */
.et-grid { display: grid; gap: var(--et-gap); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.et-field { display: flex; flex-direction: column; gap: 6px; }
.et-label { font-size: .85rem; font-weight: 600; color: var(--et-slate-700); }
.et-input, .et-select {
  font: inherit; font-weight: 500; color: var(--et-ink);
  padding: 11px 12px;
  border: 1px solid var(--et-border);
  border-radius: var(--et-radius-sm);
  background: var(--et-slate-50);
  width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.et-input::placeholder { color: var(--et-slate-400); }
/* Numbers feel technical in monospace */
.et-input[type="number"] { font-family: var(--et-mono); }
.et-input:focus, .et-select:focus {
  outline: none;
  background: #fff;
  border-color: var(--et-eng-blue);
  box-shadow: 0 0 0 3px rgba(5, 68, 117, .15);
}

/* Buttons (uppercase, tracked, sharp; dark primary → ENG-blue hover) ------- */
.et-button {
  font-family: var(--et-font); font-weight: 700;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  cursor: pointer;
  padding: 14px 24px;
  border: 1px solid transparent; border-radius: var(--et-radius-sm);
  background: var(--et-ink); color: #fff;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.et-button:hover { background: var(--et-eng-blue); }
.et-button--ghost { background: #fff; color: var(--et-eng-blue); border: 2px solid var(--et-eng-blue); padding: 13px 23px; }
.et-button--ghost:hover { background: rgba(5, 68, 117, .06); }
.et-button--accent { background: var(--et-accent); color: #fff; }
.et-button--accent:hover { background: var(--et-ink); }
.et-button:disabled { opacity: .45; cursor: not-allowed; }

/* KPI tiles (signature element — editorial metric row, border-as-gap) ------ */
.et-kpi {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background: var(--et-rule);          /* shows through 1px gaps as dividers */
  border: 1px solid var(--et-rule);
}
.et-kpi__tile { background: var(--et-surface); padding: 22px; }
.et-kpi__label {
  font-family: var(--et-mono); font-size: .625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .22em; color: var(--et-muted);
}
.et-kpi__value {
  font-family: var(--et-display); font-weight: 900;
  font-size: 2rem; line-height: 1; letter-spacing: -.02em;
  color: var(--et-ink); margin-top: 10px;
}
.et-kpi__value:empty::before { content: "—"; color: var(--et-faint); }
.et-kpi__unit { font-size: .95rem; color: var(--et-ink-soft); margin-left: 4px; font-weight: 600; }
.et-kpi__hint { font-family: var(--et-mono); font-size: .72rem; color: var(--et-muted); margin-top: 8px; }

/* Inline result ------------------------------------------------------------ */
.et-result { font-size: 1.05rem; }
.et-result__value { font-family: var(--et-display); font-size: 2rem; font-weight: 900; letter-spacing: -.02em; color: var(--et-ink); }
.et-result__unit { font-size: 1rem; color: var(--et-ink-soft); font-weight: 600; }

/* Status dot (pulse indicator) --------------------------------------------- */
.et-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--et-faint); }
.et-dot--ok { background: var(--et-success-dot); }
.et-dot--busy { background: var(--et-accent-green); animation: et-pulse 1.2s ease-in-out infinite; }
@keyframes et-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* Disclaimer (required on every customer-facing calculator) ----------------- */
.et-disclaimer {
  margin-top: 32px;
  padding: 18px 20px;
  font-size: .85rem; line-height: 1.6;
  color: var(--et-ink-soft);
  background: var(--et-slate-50);
  border-left: 3px solid var(--et-accent-green);
}
.et-disclaimer a { color: var(--et-link); font-weight: 600; }
.et-disclaimer a:hover { color: var(--et-accent-green); }

/* Scope link — calculator → its scope/method page (eyebrow style) ---------- */
.et-scope-link-wrap { margin: 0 0 26px; }
.et-scope-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--et-mono); font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--et-link);
}
.et-scope-link::before { content: ""; width: 18px; height: 2px; background: var(--et-accent); flex: none; }
.et-scope-link:hover { color: var(--et-accent-green); }

/* Back link on the scope page ---------------------------------------------- */
.et-scope-back {
  font-family: var(--et-mono); font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; margin: 36px 0 0;
}

/* Prose — rendered Markdown (scope / about pages) -------------------------- */
.et-prose { max-width: 78ch; color: var(--et-body); }
.et-prose > :first-child { margin-top: 0; }
.et-prose h1 { margin: 0 0 .35em; }
.et-prose h2 {
  margin: 2em 0 .6em; padding-top: .85em;
  border-top: 1px solid var(--et-border);
}
.et-prose h3 { margin: 1.7em 0 .4em; }
.et-prose h4 { margin: 1.5em 0 .3em; color: var(--et-ink-soft); }
.et-prose p { margin: 0 0 1em; }
.et-prose ul, .et-prose ol { margin: 0 0 1.1em; padding-left: 1.35em; }
.et-prose li { margin: .35em 0; }
.et-prose li::marker { color: var(--et-accent); }
.et-prose strong { color: var(--et-ink); font-weight: 700; }
.et-prose a { color: var(--et-link); font-weight: 600; text-decoration: none; text-underline-offset: 3px; }
.et-prose a:hover { color: var(--et-accent-green); text-decoration: underline; }
.et-prose code {
  font-family: var(--et-mono); font-size: .85em;
  background: var(--et-slate-100); color: var(--et-slate-800);
  padding: .12em .4em;
}
.et-prose pre {
  background: var(--et-slate-900); color: var(--et-slate-100);
  padding: 16px 18px; overflow-x: auto; font-size: .85rem; margin: 0 0 1.2em;
}
.et-prose pre code { background: none; color: inherit; padding: 0; }
.et-prose blockquote {
  margin: 0 0 1.3em; padding: 6px 20px;
  border-left: 3px solid var(--et-accent);
  color: var(--et-ink); font-size: 1.1rem; font-weight: 500;
}
.et-prose hr { border: none; border-top: 1px solid var(--et-border); margin: 2em 0; }
.et-prose table {
  width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .92rem;
}
.et-prose th, .et-prose td {
  text-align: left; padding: 10px 12px;
  border: 1px solid var(--et-border); vertical-align: top;
}
.et-prose thead th {
  background: var(--et-slate-50);
  font-family: var(--et-mono); font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--et-ink-soft);
}

/* Focus & accessibility ----------------------------------------------------- */
*:focus-visible { outline: 2px solid var(--et-eng-blue); outline-offset: 2px; }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 520px) {
  .et-app { padding: 20px 16px 40px; }
  .et-kpi__value, .et-result__value { font-size: 1.6rem; }
}

/* Motion restraint ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print --------------------------------------------------------------------- */
@media print {
  body { background: #fff !important; color: #111 !important; }
  .et-button, .et-header__logo { display: none !important; }
  .et-card, .et-kpi { break-inside: avoid; }
  a { text-decoration: underline; color: #000 !important; }
}