/* The EnergySuite design system, loaded INSTEAD of the workspace app.css on every page whose
   seed layout sets "chrome": "own" (see root.html.heex). This file is the master copy of the
   site's global CSS; assets/build.js copies it to priv/static/assets/components/energysuite/es.css. */
/* The Energy Suite website: design system CSS (design guideline 2026-09-21, sections 2 to 5). */
:root {
  /* Surfaces */
  --tes-ink: #0D2137;
  --tes-ink-deep: #0A1A2C;
  --tes-surface: #FFFFFF;
  --tes-surface-light: #F4F7FA;
  --tes-line: #DDE4EC;
  --tes-line-on-dark: rgba(255, 255, 255, 0.14);

  /* Brand accents */
  --tes-orange: #F5821F;
  --tes-orange-deep: #D96F12;
  --tes-mint: #2DB37E;
  --tes-mint-text: #1E7F59;
  --tes-link-blue: #1A78C2;
  --tes-accent-bar: linear-gradient(90deg, #2DB37E, #F5821F);

  /* Text */
  --tes-text-body: #39495F;
  --tes-text-on-dark: #FFFFFF;
  --tes-text-body-on-dark: #B9C5D6;
  --tes-text-muted-on-dark: #8598AC;
  --tes-placeholder: #56677B;

  /* Forms and states */
  --tes-field-border: #6B7D90;
  --tes-error: #B42318;
  --tes-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 5px #0D2137;

  /* Decision 2: navy labels on orange (6.28:1). [data-btn-label="white"] previews the current white label. */
  --tes-btn-label: var(--tes-ink);

  /* Type */
  --tes-font: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Shape */
  --tes-radius-btn: 6px;
  --tes-radius-field: 6px;
  --tes-radius-card: 10px;
  --tes-radius-img: 12px;
  --tes-radius-bar: 4px;
  --tes-shadow-card: 0 3px 14px rgba(13, 33, 55, 0.09);
  --tes-shadow-card-hover: 0 16px 34px rgba(13, 33, 55, 0.16);
  --tes-shadow-img-dark: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.35));

  /* Layout */
  --tes-container: 1100px;
  --tes-gutter: 20px;
  --tes-section-y: 52px;
}
@media (min-width: 600px) { :root { --tes-gutter: 24px; } }
@media (min-width: 860px) { :root { --tes-section-y: 72px; } }
[data-btn-label="white"] { --tes-btn-label: #FFFFFF; }

/* Base (3.3) */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (max-width: 979px) { html { scroll-padding-top: 80px; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--tes-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--tes-text-body);
  background: var(--tes-surface);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--tes-font); font-weight: 800; color: var(--tes-ink); margin: 0; }
img { max-width: 100%; }
a { color: var(--tes-ink); }
.tes-dark :is(h1, h2, h3, h4), .tes-navy2 :is(h1, h2, h3, h4) { color: var(--tes-text-on-dark); }
:where(.tes-section, .tes-card) :where(p, ul, ol, figure, blockquote) { margin: 0; }
.tes-section p + p { margin-top: 16px; }

.tes-h1 { font-size: 34px; line-height: 1.02; letter-spacing: -0.023em; margin-bottom: 18px; text-wrap: pretty; }
.tes-h1 em { font-style: normal; color: var(--tes-orange-deep); }
:is(.tes-dark, .tes-navy2) .tes-h1 em { color: var(--tes-orange); }
.tes-h2 { font-size: 28px; line-height: 1.1; letter-spacing: -0.016em; margin-bottom: 16px; text-wrap: pretty; }
.tes-h3 { font-size: 20px; line-height: 1.25; margin-bottom: 10px; }
.tes-lead { font-size: 18px; line-height: 1.55; max-width: 760px; margin: 0 0 26px; text-wrap: pretty; }
.tes-eye {
  display: inline-block; margin: 0 0 14px;
  font-size: 12px; font-weight: 700; line-height: 1.4;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--tes-mint-text);
}
:is(.tes-dark, .tes-navy2) .tes-eye { color: var(--tes-mint); }
.tes-small { font-size: 14px; line-height: 1.5; }
.tes-stat-n { font-size: 36px; font-weight: 800; line-height: 1; color: var(--tes-mint); }
.tes-card p { font-size: 16px; }
@media (min-width: 600px) {
  .tes-h1 { font-size: 44px; }
  .tes-h2 { font-size: 32px; }
  .tes-stat-n { font-size: 44px; }
}
@media (min-width: 1024px) {
  .tes-h1 { font-size: 52px; }
  .tes-h2 { font-size: 38px; }
  .tes-h3 { font-size: 21px; }
  .tes-lead { font-size: 20px; line-height: 1.6; }
  .tes-card p { font-size: 15px; }
}

/* Sections (4.2) */
.tes-section { width: 100%; }
.tes-in {
  box-sizing: border-box;
  max-width: var(--tes-container);
  margin: 0 auto;
  padding: var(--tes-section-y) var(--tes-gutter);
}
.tes-dark  { background: var(--tes-ink);      color: var(--tes-text-body-on-dark); }
.tes-navy2 { background: var(--tes-ink-deep); color: var(--tes-text-body-on-dark); }
.tes-light { background: var(--tes-surface-light); }
.tes-white { background: var(--tes-surface); }
.tes-center { text-align: center; }
.tes-center .tes-lead { margin-inline: auto; }
.tes-center .tes-acc { margin: 0 auto 22px; }
.tes-center .tes-actions { justify-content: center; }

/* Grids (4.4) */
.tes-grid { display: grid; gap: 24px; margin-top: 36px; grid-template-columns: 1fr; }
@media (min-width: 600px)  { .tes-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tes-grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 860px)  { .tes-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.tes-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; text-align: center; }
@media (min-width: 600px)  { .tes-stats { grid-template-columns: repeat(4, 1fr); } }
.tes-split { display: grid; gap: 32px; }
@media (min-width: 860px) {
  .tes-split { grid-template-columns: minmax(0, 53fr) minmax(0, 47fr); gap: 48px; align-items: center; }
  .tes-split--media-left { grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); }
  .tes-split--media-left > .tes-media { order: -1; }
}

/* Buttons (5.1) */
.tes-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box; min-height: 52px; padding: 14px 32px;
  font: 700 16px/1.5 var(--tes-font);
  color: var(--tes-btn-label); background: var(--tes-orange);
  border: 2px solid transparent; border-radius: var(--tes-radius-btn);
  text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, transform .2s;
}
.tes-btn:hover { background: var(--tes-orange-deep); transform: translateY(-2px); }
.tes-btn:active { transform: translateY(0); }
.tes-btn--compact { min-height: 44px; padding: 10px 20px; }
.tes-btn--ghost { color: #FFFFFF; background: transparent; border-color: rgba(255, 255, 255, .45); }
.tes-btn--ghost:hover { background: rgba(255, 255, 255, .12); }
.tes-btn--dk { color: var(--tes-ink); background: transparent; border-color: var(--tes-ink); }
.tes-btn--dk:hover { color: #FFFFFF; background: var(--tes-ink); }
.tes-btn:is(:disabled, [aria-disabled="true"]) {
  background: var(--tes-line); color: var(--tes-text-body); border-color: transparent;
  cursor: not-allowed; transform: none;
}
.tes-btn--ghost:is(:disabled, [aria-disabled="true"]) { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .45); opacity: .5; }
.tes-btn--dk:is(:disabled, [aria-disabled="true"]) { background: transparent; color: var(--tes-text-body); border-color: var(--tes-field-border); }
.tes-btn-text {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none;
  font: 700 14px/1.5 var(--tes-font); color: var(--tes-ink); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.tes-btn-text:hover { text-decoration-thickness: 2px; }
.tes-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 599px) { .tes-actions .tes-btn { width: 100%; } }

/* Focus (5.2) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--tes-focus-ring);
}
.tes-skip {
  position: absolute; left: 20px; top: -60px; z-index: 100;
  padding: 10px 16px; background: #FFFFFF; color: var(--tes-ink);
  font-weight: 700; border-radius: var(--tes-radius-btn); text-decoration: none;
}
.tes-skip:focus { top: 12px; }

/* Text links on light (5.3) */
.tes-link { color: var(--tes-ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tes-link:hover { text-decoration-thickness: 2px; }

/* Accent bar (5.4) */
.tes-acc { width: 74px; height: 4px; border-radius: var(--tes-radius-bar); background: var(--tes-accent-bar); margin: 0 0 22px; }

/* Cards (5.5) */
.tes-card {
  position: relative; overflow: hidden; box-sizing: border-box;
  display: flex; flex-direction: column;
  background: #FFFFFF; border-radius: var(--tes-radius-card);
  padding: 30px 26px; box-shadow: var(--tes-shadow-card);
  color: var(--tes-text-body);
}
.tes-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: var(--card-accent, var(--tes-mint));
}
.tes-card--blue   { --card-accent: var(--tes-link-blue); }
.tes-card--orange { --card-accent: var(--tes-orange); }
.tes-card--plain::before { display: none; }
.tes-white .tes-card { border: 1px solid var(--tes-line); }
.tes-card :is(h1, h2, h3, h4) { color: var(--tes-ink); }
.tes-card .tes-eye { color: var(--tes-mint-text); }
.tes-card .lnk { margin-top: auto; padding-top: 12px; color: var(--tes-link-blue); font-size: 15px; font-weight: 700; text-decoration: none; }
.tes-card--link .lnk::after { content: ""; position: absolute; inset: 0; }
.tes-card--link { transition: transform .2s, box-shadow .2s; }
.tes-card--link:hover { transform: translateY(-6px); box-shadow: var(--tes-shadow-card-hover); }
.tes-card--link:hover .lnk { text-decoration: underline; }
.tes-card--link:focus-within { box-shadow: var(--tes-focus-ring), var(--tes-shadow-card-hover); }
.tes-badge {
  width: 40px; height: 40px; border-radius: 50%; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tes-ink); color: #FFFFFF; font-size: 18px; font-weight: 800;
}
.tes-chips { list-style: none; margin: auto 0 0; padding: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tes-chip { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--tes-text-body); background: var(--tes-surface-light); border-radius: 999px; padding: 6px 12px; }
@media (max-width: 599px) { .tes-card { padding: 24px 20px; } }
@media (prefers-reduced-motion: reduce) { .tes-card--link:hover, .tes-btn:hover { transform: none; } }

/* Form fields (5.10) */
.tes-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tes-fields { display: grid; gap: 22px 20px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .tes-fields { grid-template-columns: 1fr 1fr; } .tes-field--full { grid-column: 1 / -1; } }
.tes-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tes-label { font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--tes-ink); }
.tes-field-tools { display: flex; gap: 16px; }
.tes-help { font-size: 14px; line-height: 1.5; color: var(--tes-text-body); margin: 0; }
.tes-error { font-size: 14px; line-height: 1.5; color: var(--tes-error); margin: 0; font-weight: 700; }
.tes-input {
  box-sizing: border-box; width: 100%; height: 48px; padding: 12px 14px;
  font: 500 16px/1.4 var(--tes-font); color: var(--tes-ink);
  background: #FFFFFF; border: 1px solid var(--tes-field-border); border-radius: var(--tes-radius-field);
}
textarea.tes-input { height: auto; resize: vertical; }
.tes-input:hover { border-color: var(--tes-ink); }
.tes-input:focus { outline: 3px solid transparent; border-color: var(--tes-ink); box-shadow: inset 0 0 0 1px var(--tes-ink), var(--tes-focus-ring); }
.tes-input::placeholder { color: var(--tes-placeholder); }
.tes-input:is(:disabled, [readonly]) { background: var(--tes-surface-light); color: var(--tes-text-body); border-color: var(--tes-line); cursor: not-allowed; }
.tes-input--error, .tes-input[aria-invalid="true"] { border-color: var(--tes-error); box-shadow: inset 0 0 0 1px var(--tes-error); }
.tes-input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px var(--tes-error), var(--tes-focus-ring); }
.tes-select-wrap { position: relative; }
.tes-select { appearance: none; -webkit-appearance: none; padding-right: 40px; }
.tes-select-wrap svg { position: absolute; right: 14px; top: 18px; pointer-events: none; }
.tes-checkrow { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; cursor: pointer; font-size: 15px; line-height: 1.5; color: var(--tes-ink); }
.tes-check { flex: none; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--tes-ink); }
.tes-formcard { box-sizing: border-box; background: #FFFFFF; border-radius: var(--tes-radius-card); box-shadow: var(--tes-shadow-card); padding: 20px; display: flex; flex-direction: column; gap: 22px; }
@media (min-width: 600px) { .tes-formcard { padding: 32px 28px; } }
.tes-progress { height: 6px; border-radius: 3px; background: var(--tes-line); overflow: hidden; }
.tes-progress > div { height: 100%; background: var(--tes-ink); }
.tes-formbar {
  position: fixed; inset: auto 0 0 0; z-index: 10;
  display: grid; grid-template-columns: 1fr 2fr; gap: 12px;
  padding: 12px var(--tes-gutter) calc(12px + env(safe-area-inset-bottom));
  background: #FFFFFF; border-top: 1px solid var(--tes-line);
}
.tes-formbar .tes-btn { width: 100%; }
.tes-plan { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
html:has(.tes-formbar) { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (min-width: 600px) {
  .tes-formbar { position: static; display: flex; justify-content: space-between; padding: 24px 0 0; border: 0; background: transparent; }
  .tes-formbar .tes-btn { width: auto; }
  .tes-plan { padding-bottom: 0; }
  html:has(.tes-formbar) { scroll-padding-bottom: 0; }
}