/* The energy comparator, layout L3 «faixa fixa» (vault/energia/l3-faixa.html; spec §7.1).
   Built from tokens.css — nothing here invents a colour. The band is the one primary action, always in view:
   the best price, the saving, the chart and «Quero mudar». Everything that ranks is in the HTML before any script. */

body.ebody-page {
  background: var(--cream);
  /* UAT round 1, D: muted text at ≥ 4.5:1 on every ground these pages use (paper, cream, peach-pale). The same ink as
     tokens.css --ink-60, a little less transparent (0.6 gave 4.4:1 on peach-pale). */
  --ink-60: rgba(41, 18, 16, 0.72);
}
.epage { font: 400 var(--t-sm)/1.45 var(--font-ui); color: var(--ink); }


/* ─── The band ─────────────────────────────────────────────────────────── */
.eband {
  position: sticky; top: 0; z-index: 5;
  background: var(--paper); box-shadow: var(--shadow-card);
  padding: 12px 24px 10px;
}
.eband__in {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 28px; align-items: end;
}
.eband__eyebrow {
  margin: 0; font: 500 12px var(--font-doc); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-60);
}
.eband__lead { margin: 4px 0 2px; line-height: 1; font-variant-numeric: tabular-nums; }
.eband__preco { font-size: 2.6rem; font-weight: 500; letter-spacing: -.03em; color: var(--ink); }
.eband__lead small { font-size: 1rem; color: var(--ink-60); white-space: nowrap; }
.eband__quem {
  margin: 0 0 6px; font-size: 13px; color: var(--ink-60);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* UAT round 2, R1: why the headline is not row 1, with a link to that row. */
.eband__salta { margin: 0 0 6px; font-size: 13px; line-height: 1.35; color: var(--ink); }
.eband__salta[hidden] { display: none; }
.eband__salta-c { display: none; }
.eband__salta a { color: var(--ink); text-underline-offset: 2px; white-space: nowrap; }
.erank .erow[id] { scroll-margin-top: calc(var(--eband-h, 220px) + 12px); }
.esalta { margin-top: 2px; }
/* Themes F and I: the current supplier's line under the headline offer. */
.eband__com { margin: 0 0 6px; font-size: 13px; color: var(--ink); }
.eband__com[hidden] { display: none; }
.eband__poupa {
  display: inline-block; margin: 0;
  background: #E3F2EC; color: var(--band-barato); /* the fuel pages' cheap-band wash */
  border-radius: var(--r-pill); padding: 3px 10px; font-weight: 500; font-size: 14px;
}
/* UAT round 3 (Ana): no figure yet: the chip asks for one, a link to the €/mês field (not a saving, so not green). */
.eband__poupa--pede { background: var(--peach-pale); color: var(--ink); text-wrap: balance; } /* never one word alone */
.eband__poupa--pede a { color: inherit; text-underline-offset: 2px; }
.eband__cta {
  display: block; width: 100%; margin-top: 10px;
  border: 0; border-radius: var(--r-pill); background: var(--ink-deep); color: var(--paper);
  font: 500 15px var(--font-ui); padding: 13px 16px; cursor: pointer;
}
.eband__cta:hover { background: var(--ink); }
.eband__cta[aria-busy="true"] { cursor: progress; }
/* Theme A: the real promise, before the click. */
.eband__sub { margin: 6px 0 0; font-size: 13px; line-height: 1.35; color: var(--ink-60); }
/* Fix round 1: the person's own supplier has the cheapest offer: its link, beside the CTA. */
.eband__oferta { display: inline-block; margin-top: 4px; font-size: 13px; color: var(--ink); text-underline-offset: 2px; }
.eband__cta:focus-visible, .eband__ver:focus-within, .etrust__btn:focus-visible, .etrust a:focus-visible { outline: 2px solid var(--peach-ink); outline-offset: 2px; }

.eband__viz { min-width: 0; }
.eband__toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.eband__ver { display: none; }
.eband__chart { overflow: hidden; }
.eband__aviso { margin: 6px 0 0; color: var(--ink); max-width: 46ch; }

/* The chart (svg.ts): same marks as strip2.js. */
.echart { display: block; width: 100%; height: auto; max-height: 150px; overflow: visible; }
.echart__d { fill: var(--band-normal); opacity: .45; }
.echart__d--barato { fill: var(--band-barato); opacity: .95; }
.echart__d--caro { fill: var(--band-caro); opacity: .35; }
.echart__pin circle { fill: var(--ink-deep); stroke: var(--paper); stroke-width: 2; }
.echart__pin text { fill: var(--paper); font: 600 12px var(--font-ui); }
.echart__more { fill: var(--ink-60); font: 500 12px var(--font-doc); }
.echart__mark { stroke: var(--ink); stroke-width: 1.5; opacity: .5; }
.echart__lbl {
  fill: var(--ink-60); font: 500 12px var(--font-doc);
  paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round;
}
.echart__axis { stroke: var(--hairline); stroke-width: 1; }
.echart__ax { fill: var(--ink-60); font: 400 12px var(--font-doc); }

/* Trust, next to the button (spec §11.2 rule 5; art. 184.º(6)). UAT round 2, R11: the «·» is drawn before each item, in
   the 14 px gutter; .etrust clips the gutter at the start of every line, so no line ends or starts with a stray «·». */
.etrust {
  /* Fix round 1: 4 px of padding on every side (and the same negative margin) keeps the 2 px focus ring at 2 px offset
     inside the clip; the «·» gutter (10 px before an item) still falls outside it at a line start. */
  margin: 2px -4px -4px; max-width: none; overflow: hidden; padding: 4px;
  font: 400 12px var(--font-doc); color: var(--ink-60);
}
.etrust__in { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin-left: -14px; }
.etrust__in > * { position: relative; margin-left: 14px; }
.etrust__in > *::before { content: '·'; position: absolute; left: -10px; color: var(--ink-60); opacity: .6; text-transform: none; }
.etrust a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.etrust__btn {
  border: 0; background: none; padding: 0; color: var(--ink); font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.vtag {
  font: 500 12px var(--font-doc); letter-spacing: .04em; color: var(--ink-60);
  background: var(--tint-10); border-radius: 6px; padding: 2px 6px; text-transform: uppercase;
}

/* ─── Below the band: inputs left, tabs and sections right ─────────────── */
.ebody {
  max-width: 1200px; margin: 0 auto; padding: 24px 24px 64px;
  display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 28px; align-items: start;
}
.ebody__side, .ebody__main { min-width: 0; }
.ebody .crumb { margin-bottom: 18px; }
.ebody .crumb__when { white-space: normal; }
.ebody .crumb__when { margin-left: auto; }
.ehero__eyebrow { margin: 0 0 6px; }
.ehero__h1 { font-weight: 400; font-size: 1.9rem; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 8px; color: var(--ink); }
.ehero__lede { color: var(--ink-60); margin: 0 0 18px; }
/* Theme K: the regulated-tariff page answers for the profile shown, under the h1. */
.ehero__veredicto { margin: 0 0 10px; font-weight: 500; color: var(--ink); }
.ehero__veredicto:empty { display: none; }
/* UAT round 3 (Fernanda): after «Já estou na tarifa regulada» the verdict is the answer, right under the h1. */
.ehero__veredicto--ja { padding: 12px 14px; border: 1.5px solid var(--ink-deep); border-radius: 14px; background: var(--paper); font-size: 1.05rem; }
.ereg__ja {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 14px; padding: 0 16px;
  border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--paper); color: var(--ink);
  font: 500 15px var(--font-ui); cursor: pointer;
}
.ereg__ja[aria-pressed="true"] { background: var(--ink-deep); border-color: var(--ink-deep); color: var(--paper); }
.ereg__ja:focus-visible { outline: 2px solid var(--peach-ink); outline-offset: 2px; }
.ehero__resposta { margin: 0 0 10px; padding: 12px 14px; border-radius: 14px; background: var(--peach-pale); color: var(--ink); font-size: 1.05rem; }

.epanel { background: var(--paper); border-radius: var(--r-card); padding: 16px; box-shadow: var(--shadow-card); }

/* Inputs */
.eperfil { display: grid; gap: 0; }
.eperfil fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.eseg { display: inline-flex; border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 2px; margin-bottom: 12px; justify-self: start; }
.eseg__o { padding: 6px 14px; border-radius: var(--r-pill); font-size: 14px; color: var(--ink-60); text-decoration: none; }
.eseg__o--on { background: var(--ink-deep); color: var(--paper); }
.echips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.echip { position: relative; }
.echip__in { position: absolute; opacity: 0; width: 1px; height: 1px; }
.echip__face {
  display: inline-block; border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: 7px 12px; background: var(--paper); font-size: 14px; cursor: pointer;
}
.echip__in:checked + .echip__face { background: var(--ink-deep); color: var(--paper); border-color: var(--ink-deep); }
.echip__in:focus-visible + .echip__face, .echip__in:focus-visible + .eopt__face { outline: 2px solid var(--peach-ink); outline-offset: 2px; }
.eperfil__row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--hairline);
}
.eperfil__row--col { display: block; }
.eperfil__line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.eperfil__k { font-weight: 500; float: none; padding: 0; }
.eperfil fieldset.eperfil__row > legend { float: left; padding: 0; }
.eperfil__sel {
  border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--paper);
  font: 400 14px var(--font-ui); color: var(--ink); padding: 6px 12px;
}
.eopts { display: inline-flex; border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 2px; margin-left: auto; }
.eopt { position: relative; }
.eopt__face { display: inline-block; padding: 5px 12px; border-radius: var(--r-pill); font-size: 13px; color: var(--ink-60); cursor: pointer; }
.echip__in:checked + .eopt__face { background: var(--ink-deep); color: var(--paper); }
.eperfil__range { width: 100%; margin: 14px 0 6px; accent-color: var(--ink-deep); }
.eperfil__mes { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-60); }
.eperfil__mes .field { max-width: 120px; }
.eperfil__mes input {
  width: 100%; border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: 6px 28px 6px 12px; font: 400 14px var(--font-ui); color: var(--ink); background: var(--paper);
}
/* Theme B: what the page assumed, under the inputs; theme H: a company's €/month without VAT. */
.eperfil__eco { margin: 10px 0 0; font-size: 13px; color: var(--ink-60); }
.eperfil__eco a { color: var(--ink); text-underline-offset: 2px; }
.eperfil__iva { margin: 6px 0 0; text-align: right; font-size: 13px; color: var(--ink-60); }
.eperfil__iva[hidden] { display: none; }
.eperfil__up {
  display: block; text-align: center; margin-top: 12px; padding: 13px;
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  color: var(--ink); font-weight: 500; text-decoration: none; background: var(--paper);
}
.eperfil__up:hover { background: var(--cream); }
.eperfil__up--quiet { margin-top: 6px; padding: 8px; border: 0; font-weight: 400; font-size: 14px; color: var(--ink-60); text-decoration: underline; text-underline-offset: 2px; }

/* Tabs link to the sections */
.etabs {
  display: flex; gap: 18px; border-bottom: 1px solid var(--hairline); margin: 4px 0 14px;
  font-size: 14px; overflow-x: auto; scrollbar-width: none;
}
.etab { padding: 8px 0; color: var(--ink-60); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.etab--on { color: var(--ink); border-bottom-color: var(--ink-deep); }
.etab:hover { color: var(--ink); }

/* Sections: eyebrow, heading, rule */
.esec {
  background: var(--paper); border-radius: var(--r-card); box-shadow: var(--shadow-card);
  padding: 18px 20px; margin-bottom: 14px;
  /* R11: a section reached by a link or by scrollIntoView stops below the sticky band (browser.ts sets --eband-h). */
  scroll-margin-top: calc(var(--eband-h, 220px) + 12px);
}
.esec__eyebrow { margin: 0 0 4px; font: 500 12px var(--font-doc); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-60); }
.esec__h { margin: 0 0 6px; font-size: var(--t-md); font-weight: 400; letter-spacing: -.01em; line-height: 1.2; }
.esec__h3 { margin: 18px 0 6px; font-size: 1.05rem; font-weight: 500; }
.esec__nota { margin: 0 0 8px; font-size: 13px; color: var(--ink-60); }
.esec__vazio { margin: 8px 0; padding: 12px 14px; border-radius: 14px; background: var(--peach-pale); }
.esec__go { font-weight: 500; color: var(--ink); text-underline-offset: 3px; }
.esec p { max-width: var(--read-w); }

/* The ranking */
.erank { list-style: none; margin: 0; padding: 0; }
.erow {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 2px 10px;
  padding: 12px 0; border-top: 1px solid var(--hairline); align-items: baseline;
}
.erow:first-child { border-top: 0; }
.erow__n { font: 500 12px var(--font-doc); color: var(--ink-60); }
.erow__com { font-weight: 500; }
.erow__nome { color: var(--ink); }
.erow__p { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.erow__p small { font-weight: 400; font-size: 12px; color: var(--ink-60); }
.erow__m { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 13px; color: var(--ink-60); }
.erow__depois { font-variant-numeric: tabular-nums; margin-right: 2px; }
.erow__links { margin-left: auto; display: flex; gap: 12px; font-size: 12px; }
.erow__links a { color: var(--ink-60); text-underline-offset: 2px; }
/* R6: a supplier page's rows carry their unit prices. */
.erow__precos { grid-column: 2 / -1; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.erow--regulada { background: var(--peach-pale); border-radius: 14px; padding: 12px 10px; margin: 4px -10px; border-top: 0; }
.erow--regulada + .erow { border-top: 0; }
.etag { display: inline-block; font-size: 12px; line-height: 1.3; padding: 1px 8px; border-radius: var(--r-pill); background: var(--cream); color: var(--ink-60); }
.etag--idx { background: var(--peach-pale); color: var(--ink); } /* D: peach-ink on peach-pale was 3.6:1 */
.etag--reg { background: var(--paper); color: var(--ink); }
.emais { margin-top: 6px; }
.emais > summary { cursor: pointer; padding: 8px 0; font-weight: 500; }

/* Theme F: under a supplier page's h1, its unit prices and the trio */
.efor { background: var(--paper); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 14px 16px; margin: 0 0 16px; }
.efor__h { margin: 0 0 4px; font-weight: 500; }
.efor__precos { margin: 0 0 4px; font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.efor__nota { margin: 0 0 6px; font-size: 13px; color: var(--ink-60); }
.efor .esec__eyebrow { margin-top: 10px; }
.efor .etiles { margin-bottom: 0; }

/* Tiles */
.etiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 10px 0; }
.etile { background: var(--cream); border-radius: 14px; padding: 12px; display: grid; gap: 2px; }
.etile__k { font-size: 12px; color: var(--ink-60); }
.etile__v { font-size: 1.3rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.etile__s { font-size: 12px; color: var(--ink-60); }

/* Uploads (Tasks 7 and 8 make them work) */
.edrop { border: 1.5px dashed var(--mauve); border-radius: var(--r-card); padding: 26px 16px; text-align: center; background: var(--paper); }
.edrop__t { margin: 0 auto 12px; }
/* R11: «Arraste…» needs a mouse; a touch screen gets the line that only says to choose the file. UAT round 3 (Ana): a
   phone width too, for the touch screens that do not report pointer: coarse. */
.edrop__toque { display: none; }
@media (pointer: coarse), (hover: none), (max-width: 760px) { .edrop__rato { display: none; } .edrop__toque { display: inline; } }
.edrop__btn {
  display: inline-block; padding: 11px 20px; border-radius: var(--r-pill); cursor: pointer;
  background: var(--ink-deep); color: var(--paper); font-weight: 500;
}
.edrop__btn:focus-within { outline: 2px solid var(--peach-ink); outline-offset: 2px; }
.edrop__aviso { margin: 0 auto 14px; max-width: 52ch; font-size: 12px; color: var(--ink-60); }
.edrop__estado { margin: 12px auto 0; font-size: 14px; }
.edrop__estado:empty { display: none; }
.edrop.is-over { border-style: solid; }

.elinhas { margin: 0; display: grid; gap: 0; }
.elinhas > div { display: grid; grid-template-columns: minmax(110px, 30%) 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hairline); }
.elinhas > div:first-child { border-top: 0; }
.elinhas dt { font-weight: 500; }
.elinhas dd { margin: 0; color: var(--ink); }
.epassos { margin: 0 0 14px; padding-left: 20px; }
.epassos li { margin: 6px 0; }
.elist { margin: 0; padding-left: 18px; }
.elist li { margin: 4px 0; }
.ecoms { list-style: none; margin: 0; padding: 0; columns: 2 220px; column-gap: 24px; }
.ecoms li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--hairline); break-inside: avoid; font-size: 14px; }
.ecoms span { color: var(--ink-60); font-size: 12px; white-space: nowrap; }

.efaq__item { border-top: 1px solid var(--hairline); }
.efaq__item:first-child { border-top: 0; }
.efaq__item > summary { cursor: pointer; padding: 12px 0; font-weight: 500; }
.efaq__item > p { margin: 0 0 12px; color: var(--ink); }

.cfoot--energia .etrust__btn { color: inherit; }
/* D: the footer's source and legal lines, a little brighter on the dark panel. */
.cfoot--energia .cfoot__source, .cfoot--energia .cfoot__legal { color: rgba(255, 255, 255, .8); }

/* ─── The browser app (Task 6): pills, tappable rows and dots, the offer card, the receipt, the hint ── */
.epills { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.epill {
  border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--paper); color: var(--ink);
  font: 400 13px var(--font-ui); padding: 5px 11px; cursor: pointer;
}
.epill small { color: var(--ink-60); font-size: 12px; font-variant-numeric: tabular-nums; }
.epill[aria-pressed="true"] { background: var(--ink-deep); border-color: var(--ink-deep); color: var(--paper); }
.epill[aria-pressed="true"] small { color: inherit; opacity: .75; }
.epill:disabled { opacity: .45; cursor: default; }
.epill:focus-visible, .erow__who:focus-visible, .ecard__x:focus-visible { outline: 2px solid var(--peach-ink); outline-offset: 2px; }
.erow__who {
  border: 0; background: none; padding: 0; margin: 0; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.erow__who:hover .erow__nome { text-decoration: underline; text-underline-offset: 2px; }
.erow:has(> .erow__who) { cursor: pointer; }
.echart [data-id] { cursor: pointer; }
.echart [data-id]:focus { outline: none; }
.echart__d:focus-visible { stroke: var(--peach-ink); stroke-width: 2.5; opacity: 1; }
.echart__pin:focus-visible circle { stroke: var(--peach-ink); stroke-width: 3; }
.echart__d--off { opacity: .12; }

.ecard {
  width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto;
  border: 0; border-radius: var(--r-card); padding: 18px 20px; background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow-card); font: 400 var(--t-sm)/1.45 var(--font-ui);
}
.ecard::backdrop { background: var(--ink-50); }
.ecard__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ecard__x { border: 0; background: var(--cream); border-radius: var(--r-pill); width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink); }
.ecard__h { margin: 4px 0 0; font-size: var(--t-md); font-weight: 500; }
.ecard__nome { margin: 0 0 6px; color: var(--ink-60); }
.ecard__k { margin: 12px 0 4px; font-weight: 500; }
.ecard__tags { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 6px; }
.ecard__links { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--hairline); font-size: 14px; }
.ecard__links span { color: var(--ink-60); font-size: 12px; }
.ecard__links a { color: var(--ink); font-weight: 500; text-underline-offset: 2px; }

.erecibo { border: 1.5px solid var(--ink-deep); }
.edica { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--peach-pale); }
.edica p { margin: 0; }
.edica .esec__eyebrow { margin-bottom: 4px; }

/* ─── Fase 2: the tool pages (spec 2026-10-20-energia-fase2 §4): the hero and the tool on top, then the band ───
   Built from the classes above (.eperfil__row, .echip, .eperfil__range, .eperfil__up, .edica, .esec__eyebrow/.esec__h)
   and tokens.css only: no new colour, font or illustration. */
.eferr-topo { max-width: 1200px; margin: 0 auto; padding: 24px 24px 4px; }
.eferr-topo .crumb { margin-bottom: 18px; }
.eferr-topo .crumb__when { white-space: normal; margin-left: auto; }
.eferr-topo .ehero__lede { max-width: var(--read-w); }
.eferr {
  max-width: 720px; background: var(--paper); border-radius: var(--r-card); box-shadow: var(--shadow-card);
  padding: 18px 20px; margin: 0 0 12px;
}
.eferr fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.eferr__campos { display: grid; gap: 0; margin-top: 8px; }
.eferr__q { padding: 10px 0; border-top: 1px solid var(--hairline); }
.eferr__q > legend { float: left; width: 100%; padding: 0 0 8px; }
.eferr__q > .echips { clear: both; margin-bottom: 0; }
.eferr .echip__face small { color: inherit; opacity: .75; font-size: 12px; font-variant-numeric: tabular-nums; }
.eferr .echip__in:checked + .echip__face small { opacity: .85; }
.eferr__num { max-width: 140px; }
.eferr__num input {
  width: 100%; border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: 6px 12px; font: 400 14px var(--font-ui); color: var(--ink); background: var(--paper);
}
.eferr__num input:focus-visible, .eferr .eperfil__sel:focus-visible, .eferr .eperfil__range:focus-visible { outline: 2px solid var(--peach-ink); outline-offset: 2px; }
.eferr__up { margin-top: 10px; }
.eferr__up:focus-within { outline: 2px solid var(--peach-ink); outline-offset: 2px; }
.eferr__nota { margin: 6px 0 0; font-size: 13px; color: var(--ink-60); }
.eferr__privado { margin: 0 0 4px; color: var(--ink); }
.eferr__estado:empty { display: none; }
/* The answer: one large line, what it is based on above it, notes under it (same box as the regulated tariff's answer). */
.eferr__saida { margin: 14px 0 0; padding: 14px; border-radius: 14px; background: var(--peach-pale); }
.eferr__tipo { margin: 0 0 4px; font-size: 13px; color: var(--ink-60); }
.eferr__tipo:empty { display: none; }
.eferr__resposta { margin: 0; font-size: 1.3rem; line-height: 1.3; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.eferr__notas { margin: 6px 0 0; padding-left: 18px; font-size: 14px; color: var(--ink); }
.eferr__notas:empty { display: none; }
.eferr__passos { margin-top: 12px; }
.eferr__tabela { width: 100%; margin: 12px 0 0; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.eferr__tabela caption { text-align: left; font-size: 13px; color: var(--ink-60); padding-bottom: 4px; }
.eferr__tabela th, .eferr__tabela td { padding: 6px 0; border-top: 1px solid var(--hairline); text-align: left; font-weight: 400; }
.eferr__tabela thead th { border-top: 0; font-size: 13px; color: var(--ink-60); }
.eferr__tabela td, .eferr__tabela thead th:last-child { text-align: right; }
.eferr__tabela small { font-size: 12px; color: var(--ink-60); }
.eferr__hoje th, .eferr__hoje td { font-weight: 500; }
.eferr__dica { margin-top: 12px; background: var(--cream); }
.eferr__dica a { color: var(--ink); text-underline-offset: 2px; white-space: nowrap; }
/* Spec §4.3: the bridge from the answer to the comparator, right above the band. */
.eferr__ponte { max-width: 720px; margin: 14px 0 12px; font-weight: 500; color: var(--ink); }

/* ─── Phone (UAT round 1, C): the band is one compact block, ≤ 25 % of a 390×844 screen when closed: the price and the
   offer it belongs to, the saving, the button and the line under it, then one wrapped line of trust with «Ver as N
   ofertas». The chart folds behind that link and scrolls inside the band (at its own 880 px, so its labels stay 12 px). */
@media (max-width: 760px) {
  .eband { padding: 5px 16px 4px; }
  /* The two halves of the band share one grid, so «Ver as N ofertas» (a 44 px target) sits on the price's row. */
  .eband__in { grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: center; }
  .eband__res, .eband__viz { display: contents; }
  .eband__res > *, .eband__viz > * { grid-column: 1 / -1; }
  .eband__eyebrow { display: none; }
  .eband__lead { margin: 0; grid-column: 1; grid-row: 1; }
  .eband__preco { font-size: 1.6rem; }
  .eband__lead small { font-size: 13px; }
  .eband__quem { margin: 0; font-size: 14px; line-height: 1.3; grid-column: 1; grid-row: 2; }
  .eband__com, .eband__salta { margin: 0; font-size: 14px; line-height: 1.3; }
  /* Fix round 1: on a phone the «why not row 1» line is one line, cut with «…», and its link stays whole: the full
     sentence is by the tiles and the row itself is tagged. */
  /* UAT round 3 (Rui): on a phone the line is the short form, wrapped (never cut mid-word); its link stays whole. */
  .eband__salta:not([hidden]) { display: block; min-width: 0; }
  .eband__salta-t { display: none; }
  .eband__salta-c { display: inline; }
  .eband__poupa { font-size: 14px; justify-self: start; margin-top: 2px; padding: 1px 10px; }
  .eband__poupa:has(+ .eband__oferta) { grid-column: 1; }
  .eband__oferta { grid-column: 2; justify-self: end; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin: 0; font-size: 14px; white-space: nowrap; }
  .eband__cta { margin-top: 6px; padding: 0 12px; min-height: 44px; }
  .eband__sub { margin-top: 3px; font-size: 14px; line-height: 1.3; }
  .eband .etrust { order: 1; margin: 2px 0 0; font: 400 14px/1.3 var(--font-ui); }
  .eband .etrust__in > :not(.etrust__n):not(.etrust__fund) { display: none; }
  /* Inline, so the count and the funding line share their lines. Here the «·» is text, held to the item after it by a
     no-break space: a line may start with it, never end with it (R11). */
  .eband .etrust { overflow: visible; padding: 0; }
  .eband .etrust__in { display: block; margin-left: 0; }
  .eband .etrust__in > * { display: inline; margin-left: 0; }
  .eband .etrust__in > .etrust__fund::before { content: ' ·\00a0'; position: static; }
  .eband .etrust__in > :not(.etrust__fund)::before { content: none; }
  .eband__ver {
    grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: flex-end;
    min-height: 44px; min-width: 44px; font-size: 14px; color: var(--ink);
    text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap;
  }
  .eband__ver-off { display: none; }
  .eband__toggle:checked + .eband__ver .eband__ver-on { display: none; }
  .eband__toggle:checked + .eband__ver .eband__ver-off { display: inline; }
  .eband__chart { order: 2; display: none; overflow-x: auto; min-width: 0; }
  .eband__toggle:checked ~ .eband__chart { display: block; }
  /* UAT round 2, R4: with the chart open the band stops being sticky: it scrolls away, and the page under it is reached. */
  .eband:has(.eband__toggle:checked) { position: relative; }
  .eband__chart .echart { min-width: 880px; }
  .ebody { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 48px; gap: 16px; }
  .ehero__h1 { font-size: 1.7rem; }
  .esec { padding: 16px 14px; }
  .erow { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .ecard { margin: auto auto 0; width: 100vw; max-width: 100vw; border-radius: var(--r-card) var(--r-card) 0 0; }

  /* No sideways scroll down to 240 px (150 % zoom): rows wrap, the meter options wrap, the tabs wrap. */
  .eperfil__row { flex-wrap: wrap; row-gap: 6px; }
  .eperfil__sel { max-width: 100%; min-width: 0; }
  .eopts { flex-wrap: wrap; max-width: 100%; }
  .etabs { flex-wrap: wrap; overflow-x: visible; row-gap: 0; column-gap: 16px; }
  .eperfil__mes { flex-wrap: wrap; }

  /* D: tap targets of at least 44×44 px, with room between neighbours. */
  .eseg__o, .echip__face, .eopt__face, .epill, .etab { display: inline-flex; align-items: center; min-height: 44px; }
  .eseg__o, .eopt__face { justify-content: center; min-width: 44px; }
  .eperfil__sel { min-height: 44px; }
  .eperfil__mes input { min-height: 44px; }
  .erow__links { gap: 8px; }
  .erow__links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .elead__x, .ecard__x { width: 44px; height: 44px; }

  /* UAT round 2, R10: the remaining links at least 44 px tall, by padding (never a bigger font). In a sentence the
     padding sits on an inline box with a negative margin, so the hit area grows and the text does not move. */
  .ebody a.crumb__pill { display: inline-flex; align-items: center; min-height: 44px; }
  .eperfil__up--quiet { display: flex; align-items: center; justify-content: center; min-height: 44px; }
  .esec__go, .ecoms a { display: inline-flex; align-items: center; min-height: 44px; }
  .erow__who { display: inline-block; min-height: 44px; padding: 10px 0; box-sizing: border-box; }
  .emais > summary { display: flex; align-items: center; min-height: 44px; padding: 0; }
  #e-eco-a, .eband__salta a, .cfoot--energia .cfoot__legal a { padding: 14px 0; margin: -14px 0; }
  .eband__poupa--pede a { padding: 12px 0; } /* inline: the hit area grows, the chip does not */
  .cfoot--energia .cfoot__legal .etrust__btn { display: inline-block; padding: 14px 0; margin: -14px 0; }
  .cfoot--energia .cfoot__links a, .cfoot--energia .cfoot__socials a, .cfoot--energia .cfoot__mark { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
}

/* Fase 2 on a phone: the 16 px gutter, the tool's inputs stacked (label above the control), 44 px targets. */
@media (max-width: 760px) {
  .eferr-topo { padding: 16px 16px 0; }
  .eferr { padding: 16px 14px; }
  .eferr .eperfil__row { flex-wrap: wrap; row-gap: 6px; }
  .eferr .eperfil__row > .eperfil__k { flex: 1 1 100%; }
  .eferr .eperfil__sel, .eferr__num { width: 100%; max-width: 100%; }
  .eferr__num input { min-height: 44px; font-size: 16px; }
  .eferr__chips { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .eferr__chips .echip__face { display: flex; width: 100%; box-sizing: border-box; justify-content: space-between; gap: 8px; }
  .eferr .eperfil__range { min-height: 44px; margin: 6px 0; }
  .eferr__up { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; }
  .eferr__dica a { display: inline-block; padding: 14px 0; margin: -14px 0; } /* R10: the hit area grows, the line does not */
  .eferr__resposta { font-size: 1.2rem; }
  .eferr__nota, .eferr__tipo, .eferr__tabela caption, .eferr__tabela thead th { font-size: 14px; }
}
/* Fix round 1 (CRO): the appliance pills two by two from 360 px, the name over its watts, still ≥ 44 px tall. */
@media (min-width: 360px) and (max-width: 760px) {
  .eferr__chips--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eferr__chips--2 .echip__face { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: 6px 12px; border-radius: 14px; line-height: 1.25; }
}

/* UAT round 2, R4: a short screen (a phone turned, 150 % zoom, the keyboard open) keeps the band in the page, not stuck
   over it. */
@media (max-height: 499px) {
  .eband { position: relative; }
}

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

/* ─── «Quero mudar» (lead.ts): the form opens in the band, under the price, after a result exists ─── */
.elead { margin-top: 10px; display: grid; gap: 8px; }
.elead[hidden], .eband__cta[hidden] { display: none; }
/* UAT round 2, R4: on a wider screen the form is a centred dialog of at most 560 px over a backdrop, never an expansion
   of the sticky band (a phone gets the bottom sheet below). */
.eband__res .elead {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30; margin: 0;
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box;
  background: var(--paper); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 20px 22px;
}
.elead__fundo { display: none; }
.elead__fundo:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 29; background: var(--ink-50); }
body:has(.eband .elead:not([hidden])) .ask-pill { display: none; }
.elead__como { margin: 0; font-size: 14px; color: var(--ink-60); }
.elead__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.elead__eyebrow { margin: 0; font: 500 12px var(--font-doc); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-60); }
/* UAT round 3 (Fernanda): the close × is a 44×44 target at every size, and never shrinks in its row. */
.elead__x { border: 0; background: var(--cream); border-radius: var(--r-pill); width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink); }
.elead__texto { margin: 0; color: var(--ink); }
.elead__campo { display: grid; gap: 2px; }
.elead__campo[hidden] { display: none; }
.elead__label { font-size: 13px; color: var(--ink-60); }
.elead__input {
  font: 400 15px var(--font-ui); color: var(--ink); background: var(--paper);
  border: 1px solid var(--hairline); border-radius: 10px; padding: 9px 12px; width: 100%; box-sizing: border-box;
}
.elead__input:focus-visible { outline: 2px solid var(--peach-ink); outline-offset: 1px; }
.elead__input[aria-invalid="true"] { border-color: var(--band-caro); }
.elead__area { resize: vertical; min-height: 96px; }
.elead__msg { margin: 0; font-size: 13px; color: var(--band-caro); }
.elead__msg:empty, .elead__estado:empty { display: none; }
.elead__consent { margin: 0; font-size: 12px; color: var(--ink-60); }
.elead__porque { margin: 2px 0 0; font-size: 13px; color: var(--ink-60); }
.elead__gratis { margin: 0; font-size: 14px; font-weight: 500; color: var(--ink); }
.elead__btn { margin-top: 2px; }
.elead__btn:disabled { opacity: .6; cursor: progress; }
.elead__estado { margin: 0; font-size: 14px; }
.elead__ok p { margin: 0 0 6px; }
.elead__ok-h { font-weight: 500; }
.elead__partilha a { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.elead__copiado { margin-left: 8px; color: var(--ink-60); font-size: 13px; }
.eerro .elead { margin-top: 12px; }
@media (max-width: 760px) {
  /* C: on a phone the form opens as a bottom sheet with its own scroll, never taller than the screen, so it can always
     be filled and sent (150 % zoom, the keyboard open). The page behind is dimmed; the ask pill steps aside. */
  .eband__res .elead {
    left: 0; right: 0; top: auto; bottom: 0; transform: none; width: auto;
    max-height: 100vh; max-height: 100dvh; box-shadow: none;
    border-radius: var(--r-card) var(--r-card) 0 0;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  }
  .elead__input { min-height: 44px; font-size: 16px; }
}
/* While ENERGIA is off: the «em breve» line after «Quero mudar» or «Reportar um erro» (src/energia/lead.ts). */
.elead__breve { font-size: 13px; color: var(--ink-60); margin-left: 6px; }
.eband__cta + .elead__breve { display: block; margin: 6px 0 0; }

/* UAT round 2, R9, last so it wins over the form's own sizes above: on a phone, body text at least 16 px, meta and
   secondary text at least 14 px (the chart's axis keeps 12 px). */
@media (max-width: 760px) {
  .epage, .ecard, .elead { font-size: 16px; }
  .eband__lead small, .eperfil__eco, .eperfil__iva, .eperfil__mes, .eperfil__sel, .eopt__face, .eseg__o, .echip__face,
  .etabs, .esec__eyebrow, .esec__nota, .erow__n, .erow__m, .erow__links, .erow__p small, .erow__precos, .etag,
  .etile__k, .etile__s, .efor__nota, .edrop__aviso, .ecoms li, .ecoms span, .epill, .epill small, .vtag, .crumb,
  .crumb__pill, .crumb__when, .elead__label, .elead__consent, .elead__porque, .elead__msg, .elead__copiado, .elead__breve,
  .elead__eyebrow, .ecard__links, .ecard__links span, .eband__salta, .ehero__eyebrow, .elead__como { font-size: 14px; }
}