/* =============================================================================
   Electric Era — price quote experience
   Palette and type derived from the approved design mockups.

   EVERY RULE IS SCOPED to the .ee-quote wrapper, using native CSS nesting, so
   this stylesheet can be dropped onto a page it does not own — a Webflow
   marketing page — without touching anything outside the tool. Nothing here
   styles html, body or bare elements at document level.

   Two consequences worth knowing:
     - The custom properties live on .ee-quote, not :root, so they cannot
       collide with a host page's variables of the same name.
     - What were `body` and `main` rules are now the wrapper itself and an inner
       `main`; the tool sets its own typography rather than inheriting the
       host's.
   ========================================================================== */

.ee-quote {
  --ink:        #1a1a1a;
  --ink-soft:   #3d3d3d;
  --muted:      #8a8a8a;

  --lav-050:    #f4f3f9;
  --lav-100:    #ebe9f4;
  --lav-200:    #cfcbe8;
  --lav-300:    #bdb8de;
  --lav-400:    #a9a3d4;
  --lav-600:    #8b85bd;

  --line:       #e4e2ee;
  --bg:         #ffffff;

  --radius:     10px;
  --maxw:       1500px;

  color-scheme: light;

  /* Was the `body` rule. */
  background: var(--bg);
  color: var(--ink);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;

  * { box-sizing: border-box; }

  /*
   * Host-page reset.
   *
   * Inherited properties lose to any direct rule, so a host page's
   * `h1 { color: … }` beats the colour these elements would otherwise inherit
   * from .ee-quote. Webflow pages style headings, links, buttons and images as
   * a matter of course, so those properties are re-asserted here rather than
   * left to inheritance.
   *
   * This block comes first inside the wrapper; every rule below is at least as
   * specific and overrides it where it needs to.
   *
   * It cannot defend against a host rule marked !important — nothing can, short
   * of matching it. If the embedding page turns out to use !important on a
   * class this tool also uses, rename the class here rather than escalating.
   */
  h1, h2, h3, h4, p, dl, dt, dd, ul, ol, li, span, strong, em, small,
  label, output, section, div, form, fieldset, legend, table, caption, th, td {
    color: inherit;
    font-family: inherit;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
  }

  button, input, select, textarea {
    color: inherit;
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
  }

  a { color: inherit; }

  img, svg { border: 0; }

  dialog { color: inherit; }

  [hidden] { display: none !important; }

  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  main {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 72px);
  }

  /* ---------- Sticky price bar --------------------------------------------- */

  /*
   * Offset from the top of the viewport. A host page with its own fixed nav can
   * override this from its custom code, e.g.
   *   .ee-quote { --pricebar-top: 72px; }
   */
  --pricebar-top: 0px;

  .pricebar {
    position: fixed;
    /*
     * The bar must never be wider than the screen. Its labels and figures are
     * nowrap on desktop, and at phone widths that content is wide enough to
     * stretch the layout viewport and give the whole page a horizontal scroll.
     */
    max-width: 100%;
    overflow: hidden;
    top: var(--pricebar-top);
    left: 0;
    right: 0;
    z-index: 900;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 12px rgba(26, 26, 26, 0.06);
    animation: pricebar-in 0.18s ease-out;
  }

  .pricebar__inner {
    display: flex;
    justify-content: flex-end;
    gap: clamp(1.2rem, 4vw, 3rem);
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0.7rem clamp(20px, 5vw, 72px);
  }

  .pricebar__item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
  }

  .pricebar__label {
    font-size: 0.78rem;
    color: var(--muted);
    white-space: nowrap;
  }

  .pricebar__value {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .pricebar__item--project .pricebar__value { color: var(--lav-600); }

  @keyframes pricebar-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }

  @media (max-width: 620px) {
    .pricebar__inner {
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.6rem 20px;
    }

    .pricebar__item {
      flex-direction: column;
      gap: 0.1rem;
      min-width: 0;
      flex: 0 1 auto;
    }

    /* Wrapping is better than overflowing when the screen is this narrow. */
    .pricebar__label {
      font-size: 0.68rem;
      white-space: normal;
      line-height: 1.2;
    }

    .pricebar__value { font-size: 0.92rem; }
  }

  /* ---------- Layout panels ------------------------------------------------ */

  .panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 5vw, 80px);
    align-items: center;
    min-height: min(86vh, 760px);
    padding: clamp(40px, 6vw, 72px) 0;
    border-bottom: 1px solid var(--line);
  }

  .panel--wide {
    grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
    align-items: start;
  }

  .panel:last-of-type { border-bottom: 0; }

  .panel__content { min-width: 0; }

  .panel__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }

  .panel__visual--chart {
    display: block;
    padding-top: clamp(8px, 2vw, 32px);
  }

  .product-img {
    max-width: 100%;
    height: auto;
    max-height: 620px;
    object-fit: contain;
  }

  /* ---------- Type --------------------------------------------------------- */

  .headline {
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 0 2.4rem;
    /*
     * Sized so the headline breaks three words to a line. `ch` scales with the
     * clamped font-size, so the break pattern holds as the type resizes.
     * Measured against the live copy: 12ch gave five ragged lines, 16ch+ left
     * "project." orphaned. Re-measure if the headline text changes.
     */
    max-width: 14ch;
  }

  .section-title {
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    font-weight: 600;
    margin: 0 0 1.4rem;
  }

  .quote__address {
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0 0 0.5rem;
  }

  .footnote {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--muted);
    margin: 0.5rem 0 2.6rem;
  }

  /* ---------- Form fields -------------------------------------------------- */

  .field { margin-bottom: 2rem; }

  .field__label {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
    color: var(--ink-soft);
  }

  .input {
    width: 100%;
    max-width: 560px;
    padding: 0.85rem 1rem;
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: #fff;
    border: 1.5px solid var(--lav-200);
    border-radius: var(--radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .input:focus {
    outline: none;
    border-color: var(--lav-600);
    box-shadow: 0 0 0 3px var(--lav-100);
  }

  .input[aria-invalid="true"] { border-color: #c2452f; }

  .field__error {
    color: #c2452f;
    font-size: 0.82rem;
    margin: 0.5rem 0 0;
  }

  /* ---------- Segmented pill groups ---------------------------------------- */

  .segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .segmented__btn {
    flex: 0 0 auto;
    min-width: 74px;
    padding: 0.5rem 0.9rem;
    font: inherit;
    font-size: 0.92rem;
    color: var(--ink);
    background: var(--lav-050);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
  }

  .segmented__btn:hover { background: var(--lav-100); }

  .segmented__btn[aria-checked="true"] {
    background: var(--lav-200);
    font-weight: 600;
  }

  .segmented__btn:focus-visible {
    outline: 2px solid var(--lav-600);
    outline-offset: 2px;
  }

  /* Larger pills on the opening screen */
  .segmented--lg .segmented__btn {
    min-width: 94px;
    padding: 0.9rem 1.1rem;
    font-size: 1.05rem;
    background: #fff;
    border-color: var(--lav-200);
    border-radius: var(--radius);
  }

  .segmented--lg .segmented__btn[aria-checked="true"] {
    background: var(--lav-200);
    border-color: var(--lav-200);
  }

  /* ---------- Buttons ------------------------------------------------------ */

  .btn {
    display: inline-block;
    font: inherit;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
  }

  .btn--primary {
    padding: 0.85rem 1.8rem;
    font-size: 1.05rem;
    color: #fff;
    background: #262626;
    transition: background 0.15s ease;
  }

  .btn--primary:hover { background: #000; }

  .btn--ghost {
    padding: 0.85rem 1.1rem;
    font-size: 0.92rem;
    color: var(--lav-600);
    background: transparent;
  }

  .btn--ghost:hover { color: var(--ink); }

  .btn:focus-visible { outline: 2px solid var(--lav-600); outline-offset: 2px; }

  .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2.2rem;
  }

  /* ---------- Small inline link-style button -------------------------------- */

  .linkish {
    display: inline-block;
    margin-top: 0.85rem;
    padding: 0;
    font: inherit;
    font-size: 0.8rem;
    color: var(--muted);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--lav-200);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
  }

  .linkish:hover {
    color: var(--ink);
    border-color: var(--lav-600);
  }

  .linkish:focus-visible {
    outline: 2px solid var(--lav-600);
    outline-offset: 3px;
  }

  /* ---------- Modal --------------------------------------------------------- */

  .modal {
    width: min(660px, calc(100vw - 2rem));
    max-height: min(84vh, 760px);
    padding: 0;
    color: var(--ink);
    background: #fff;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(26, 26, 26, 0.22);
  }

  .modal::backdrop {
    background: rgba(26, 26, 26, 0.45);
  }

  .modal__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem clamp(1.2rem, 4vw, 2rem) 1rem;
    border-bottom: 1px solid var(--line);
  }

  .modal__title {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
  }

  .modal__close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    font: inherit;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--ink-soft);
    background: var(--lav-050);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s ease;
  }

  .modal__close:hover { background: var(--lav-200); }
  .modal__close:focus-visible { outline: 2px solid var(--lav-600); outline-offset: 2px; }

  .modal__body {
    padding: 0.4rem clamp(1.2rem, 4vw, 2rem) 1.8rem;
    overflow-y: auto;
    max-height: calc(min(84vh, 760px) - 5.2rem);
    -webkit-overflow-scrolling: touch;
  }

  .included { margin-top: 1.5rem; }

  .included h3 {
    margin: 0 0 0.35rem;
    font-size: 0.96rem;
    font-weight: 600;
  }

  .included p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--ink-soft);
  }

  /* ---------- Line items / totals ------------------------------------------ */

  .lineitems { margin: 0; }

  .lineitem {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.35rem;
  }

  .lineitem dt {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 auto;
    font-size: 0.98rem;
  }

  .lineitem dd {
    margin: 0;
    flex: 0 0 auto;
    min-width: 8.5rem;
    font-size: 0.98rem;
    font-variant-numeric: tabular-nums;
  }

  .lineitems--muted { color: var(--lav-600); margin-top: 2.4rem; }

  .total {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-top: 1.5rem;
    font-weight: 700;
    font-size: 1.22rem;
  }

  .total__label { flex: 1 1 auto; }

  .total__value {
    flex: 0 0 auto;
    min-width: 8.5rem;
    font-variant-numeric: tabular-nums;
  }

  .total--muted { color: var(--lav-600); }

  /* ---------- Info tooltips ------------------------------------------------ */

  .info {
    position: relative;
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    padding: 0;
    font-family: inherit;
    font-size: 0.66rem;
    font-style: italic;
    line-height: 1;
    color: var(--ink-soft);
    background: var(--lav-100);
    border: 0;
    border-radius: 50%;
    cursor: help;
  }

  .info::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    /*
     * Anchored to the button's left edge and extending right, not centred.
     * Every info button in this tool sits in the left-hand column, so a centred
     * tooltip wide enough to be readable runs off the left of the viewport.
     */
    left: 0;
    width: max-content;
    max-width: 280px;
    padding: 0.55rem 0.7rem;
    font-size: 0.75rem;
    font-style: normal;
    line-height: 1.35;
    text-align: left;
    color: #fff;
    background: #262626;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    z-index: 20;
    pointer-events: none;
  }

  .info:hover::after,
  .info:focus-visible::after { opacity: 1; visibility: visible; }

  /* ---------- Customise controls ------------------------------------------- */

  .controls { display: grid; gap: 1.15rem; }

  .control {
    display: grid;
    grid-template-columns: 10.5rem minmax(0, 1fr) 5.5rem;
    align-items: center;
    gap: 0.75rem;
  }

  .control__label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
  }

  .control__value {
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
  }

  .control .segmented {
    grid-column: 2 / -1;
    flex-wrap: nowrap;
  }

  .control .segmented__btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.5rem 0.4rem;
    font-size: 0.88rem;
  }

  .slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 26px;
    background: transparent;
    cursor: pointer;
  }

  .slider::-webkit-slider-runnable-track {
    height: 26px;
    background: var(--lav-050);
    border-radius: 6px;
  }

  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    margin-top: 0;
    background: var(--lav-300);
    border: 0;
    border-radius: 50%;
  }

  .slider::-moz-range-track {
    height: 26px;
    background: var(--lav-050);
    border-radius: 6px;
  }

  .slider::-moz-range-thumb {
    width: 26px;
    height: 26px;
    background: var(--lav-300);
    border: 0;
    border-radius: 50%;
  }

  .slider:focus-visible { outline: 2px solid var(--lav-600); outline-offset: 2px; }

  /* ---------- Implied O&M intensity ---------------------------------------- */

  .implied-om {
    margin: 1.8rem 0 0;
    padding-top: 1.4rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ink-soft);
    border-top: 1px solid var(--line);
  }

  .implied-om strong {
    font-weight: 600;
    color: var(--ink);
  }

  /* ---------- Balance advisory --------------------------------------------- */

  .balance {
    display: flex;
    gap: 0.55rem;
    margin: 1.6rem 0 0;
    padding: 0.75rem 0.9rem;
    font-size: 0.85rem;
    line-height: 1.45;
    border-radius: 8px;
    border-left: 3px solid;
  }

  .balance::before {
    flex: 0 0 auto;
    font-weight: 700;
  }

  /*
   * Both levels render identically, on purpose.
   *
   * The amber, exclamation-marked treatment this used to give `--warn` read as
   * an error beside copy that only says "you may want to consider…". A prospect
   * configuring a station is being offered advice, not told they have done
   * something wrong.
   *
   * `checkBalance()` still distinguishes warn from note, so the difference is
   * available to any caller that wants it — it just isn't shouted at the
   * visitor.
   */
  .balance--warn,
  .balance--note {
    color: var(--ink-soft);
    background: var(--lav-050);
    border-color: var(--lav-300);
  }

  .balance--warn::before,
  .balance--note::before { content: 'i'; font-style: italic; }

  /* ---------- Chart -------------------------------------------------------- */

  .chart { width: 100%; }
  .chart svg { display: block; width: 100%; height: auto; overflow: visible; }

  .payback {
    margin: 0.5rem 0 1.8rem;
    text-align: center;
    font-size: clamp(1.5rem, 2.6vw, 2.3rem);
    font-weight: 400;
    color: var(--lav-300);
    line-height: 1.1;
  }

  .payback strong {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--lav-400);
  }

  /* ---------- Responsive --------------------------------------------------- */

  @media (max-width: 1040px) {
    .panel,
    .panel--wide {
      grid-template-columns: minmax(0, 1fr);
      min-height: 0;
    }

    .panel__visual { order: -1; }
    .panel__visual--chart { order: 0; }
    .product-img { max-height: 340px; }
    .headline { max-width: none; }
  }

  @media (max-width: 620px) {
    .control {
      grid-template-columns: minmax(0, 1fr) 4.5rem;
      row-gap: 0.35rem;
    }

    .control__label { grid-column: 1 / -1; }
    .control .segmented { grid-column: 1 / -1; }

    .segmented--lg .segmented__btn {
      flex: 1 1 auto;
      min-width: 0;
    }

    .lineitem dd,
    .total__value { min-width: 6.5rem; }

    .total { font-size: 1.05rem; }

    .btn--primary { width: 100%; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
  }
}