/* why: the /energia/ hub, direction D5 «Mix» (vault/energia-hub/d5-mix, approved), from vault/energia-hub/energia-hub.css
   with the rules that served D1–D4 only removed (spec 2026-10-21-energia-hub-fatura §2, §4). It builds on leitura.css
   (the fatura round-2 constructions, the field bar, .eh-breve) and on the /seguro-auto/ parts in home.css (.composer,
   .inside, .cell, .ui-card, .split__resolve). Tokens only. */

/* ─── Shared parts ───────────────────────────────────────────────────────── */
/* why: an implicit auto column grows to the input's intrinsic width and pushes the hero past the phone edge; pin it. */
.eh .fz-centro { grid-template-columns: minmax(0, 1fr); }
/* why: a chip on the dark panel: the nav pill's glass. */
.eh-chip { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--on-dark-30); border-radius: var(--r-pill); background: var(--on-dark-20); color: var(--paper); font-size: var(--t-sm); text-decoration: none; }
/* why: visible focus on chips. */
.eh-chip:focus-visible { outline: 2px solid var(--peach); outline-offset: 2px; }
/* why: the arrow every question card ends with: a round dark disc. */
.eh-seta { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--ink-deep); color: var(--paper); font-size: var(--t-sm); }
/* why: the question is the card's title and its one link; the link covers the whole card. */
.eh-q { margin: var(--s-1) 0 0; font-size: var(--t-md); font-weight: 500; line-height: 1.2; }
/* why: the title link reads as a title, not as underlined text. */
.eh-q a { color: inherit; text-decoration: none; }
/* why: the stretched link: the whole card is the target. */
.eh-q a::after { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
/* why: visible focus on the card through its title link. */
.eh-q a:focus-visible { outline: none; }
/* why: the card shows the focus ring when its link has focus. */
.eh-card:has(.eh-q a:focus-visible) { outline: 2px solid var(--ink-deep); outline-offset: 2px; }
/* why: the stretched link needs a positioned card. */
.eh-card { position: relative; }
/* why: the card's text block keeps room for the arrow at its bottom right. */
.eh-foot { position: relative; padding-right: 52px; }
/* why: a second link inside a card sits above the stretched link. */
.eh-sub { position: relative; z-index: 1; color: var(--ink); text-underline-offset: 2px; }
/* why: a long snippet meta («forma ilustrativa · sem preços») wraps under the title instead of leaving the card. */
.eh .ui-card__head { flex-wrap: wrap; row-gap: 2px; }
/* why: the art snippet's big figure. */
.eh-n { margin: 0 0 var(--s-3); font: 500 var(--t-xl)/1 var(--font-doc); letter-spacing: -.03em; color: var(--band-barato); }
/* why: the unit beside the big figure, small. */
.eh-n small { margin-left: 6px; font: 400 var(--t-sm) var(--font-ui); letter-spacing: 0; color: var(--ink-60); }
/* why: the loss in the fatura snippet, in the loss colour. */
.eh-perda { color: var(--band-caro); }
/* why: the comparator's three kinds as pills; only Luz is on. */
.eh-tipos { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s-3) 0 0; }
/* why: one kind pill. */
.eh-tipo { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--s-3); border: 1px solid var(--hairline); border-radius: var(--r-pill); font-size: 13px; color: var(--ink-60); }
/* why: the kind that works today. */
.eh-tipo--on { border-color: var(--ink-deep); background: var(--ink-deep); color: var(--paper); }
/* why: the day profile: 24 bars, a SHAPE ONLY (no prices). */
.eh-dia { display: flex; align-items: flex-end; gap: 3px; height: 112px; }
/* why: one hour; its height is drawn by hand (--h), never a price. */
.eh-dia i { flex: 1; height: var(--h); border-radius: var(--r-pill) var(--r-pill) 0 0; background: var(--mauve); }
/* why: the «cheap hours» of the example shape. */
.eh-dia .eh-bx { background: var(--band-barato); }
/* why: the hours axis under the bars. */
.eh-dia__eixo { display: flex; justify-content: space-between; margin: 6px 0 var(--s-2); font: 400 12px var(--font-doc); color: var(--ink-50); }
/* why: the two alert choices as toggle pills, centred; a static list in phase 1 (R7), so no bullets and no list indent. */
.eh-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
/* why: one choice: a 44 px pill with its checkbox. */
.eh-opt { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--hairline); border-radius: var(--r-pill); font-size: var(--t-sm); cursor: pointer; }
/* why: a chosen alert is filled. */
.eh-opt:has(input:checked) { border-color: var(--ink-deep); background: var(--ink-deep); color: var(--paper); }
/* why: the checkbox takes the pill's colour. */
.eh-opt input { accent-color: var(--peach); margin: 0; }
/* why: the manifesto line on the page's section gap. */
.eh-manif { padding: 0 var(--s-4); }
/* why: the hero's footnote line breaks between items on the phone instead of overflowing. */
.eh .h8nota { text-wrap: balance; }

/* ─── D1 «Índice»: the Luz pill and its caret (the menu itself was D1-only) ─── */
/* why: the caret beside «Luz» says the pill opens a menu. */
.eh-luz { gap: 4px; }
/* why: the caret's size. */
.eh-caret { flex: none; }

/* ─── D3 «Uma pergunta»: the hero ask bar and the question groups ─────────── */
/* why: the ask bar is the hero's one action, as wide as the insurance composer. */
.eh-ask { margin-top: var(--s-5); }
/* why: the ask bar's field takes the room left by the avatar and the arrow. */
.eh-ask .composer__input { font-size: var(--t-base); }
/* why: the 4 groups of question chips under the bar. */
.eh-grupos { display: grid; gap: var(--s-4); width: min(100%, 1060px); margin-top: var(--s-6); text-align: left; }
/* why: one group: its mono label over its chips. */
.eh-grupo { display: grid; gap: var(--s-2); align-content: start; }
/* why: the group's label on dark. */
.eh-grupo__k { margin: 0; font: 500 var(--t-xs)/1.3 var(--font-doc); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-60); }
/* why: the group's chips wrap. */
.eh-grupo__c { display: flex; flex-wrap: wrap; gap: 6px; }
/* why: chips in a group are a step smaller than the hero chips. */
.eh-grupo .eh-chip { min-height: 40px; font-size: 14px; }

@media (min-width: 900px) {
  /* why: D3 groups in 4 columns. */
  .eh-grupos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
}

/* ─── D5 «Mix»: D3's hero, D1's sections, one treatment per section ─────── */
/* why: the two file shortcuts as small text links under the ask bar (D1's chips, quieter, so the bar leads). */
.eh-atalhos2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2); margin: var(--s-3) 0 0; max-width: none; font-size: 14px; color: var(--on-dark-60); }
/* why: the shortcuts read as links on dark, with a 44 px target. */
.eh-atalhos2 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper); text-underline-offset: 3px; }
/* why: on the phone each group is one row that scrolls sideways (cleaner than 2×2 with long questions). */
.eh-grupos--mix .eh-grupo__c { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--s-3)); padding: 0 var(--s-3); }
/* why: no scrollbar on the chip rows. */
.eh-grupos--mix .eh-grupo__c::-webkit-scrollbar { display: none; }
/* why: chips keep their one line inside a scrolling row. */
.eh-grupos--mix .eh-chip { flex: none; white-space: nowrap; }

/* why: Mercado is a dark band (the panel ink), inset like the hero: an instrument, not cards. */
.eh-mer { margin: clamp(var(--s-8), 8vw, var(--s-10)) var(--s-2) 0; padding: clamp(var(--s-8), 7vw, var(--s-10)) 0; border-radius: var(--r-bubble-greg); background: var(--ink-deep); color: var(--paper); }
/* why: the header pattern on dark: the eyebrow and h2 in paper, the lede muted, the accent in bright peach. */
.eh-mer .inside__head p { color: var(--on-dark-75); }
/* why: on dark the accent is the reference's bright peach (peach-ink is for white ground). */
.eh-mer .accent { color: var(--peach); }
/* why: the instrument: chart first, the readouts and questions beside it from 900 px. */
.eh-inst { display: grid; gap: var(--s-6); margin-top: var(--s-8); }
/* why: the chart column. */
.eh-inst__graf { min-width: 0; }
/* why: the toggle and the «shape only» label over the chart. */
.eh-inst__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
/* why: «Hoje / Amanhã» as a glass segmented control. */
.eh-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--on-dark-30); border-radius: var(--r-pill); background: var(--on-dark-20); }
/* why: one segment: 40 px pill. */
.eh-seg button { min-height: 40px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-pill); background: none; color: var(--paper); font: 400 var(--t-sm) var(--font-ui); cursor: pointer; }
/* why: the chosen day is a paper pill. */
.eh-seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); font-weight: 500; }
/* why: visible focus on the segments. */
.eh-seg button:focus-visible { outline: 2px solid var(--peach); outline-offset: 2px; }
/* why: the «forma ilustrativa · sem preços» label, mono and plain. */
.eh-inst__aviso { font: 400 12px var(--font-doc); color: var(--on-dark-60); }
/* why: the chart area: quarter gridlines drawn in the on-dark hairline, the bars over them. */
.eh-inst__area { position: relative; height: 180px; margin-top: var(--s-5); background: repeating-linear-gradient(to top, var(--on-dark-20) 0 1px, transparent 1px 25%); }
/* why: the big day chart fills the area. */
.eh-dia--big { height: 100%; gap: 4px; }
/* why: the hours on dark, quiet. */
.eh-mer .eh-dia i { background: var(--on-dark-30); }
/* why: the example cheap hours in the brand green («barato»). */
.eh-mer .eh-dia .eh-bx { background: var(--band-barato); }
/* why: the bracket over the cheap hours (hours 10–14 of the example shape); flex centres the label even when it is wider
   than the bracket, and it sits high, above the shoulder bars. */
.eh-inst__faixa { position: absolute; left: calc(100% * 10 / 24); width: calc(100% * 5 / 24); top: 12%; display: flex; justify-content: center; padding-bottom: 4px; border-bottom: 2px solid var(--band-barato); font: 400 12px var(--font-doc); color: var(--on-dark-75); white-space: nowrap; }
/* why: the «horas baratas» bracket over the real cheapest 3-hour window (spec 2026-10-22 §5.1; here so the hub's band, which does not load mercado.css, places it too): the page writes --de (first bar),
   --n (bars) and --total (bars that day: 23, 24 or 25) on the element; hub.css's fixed 10/24 position was the mock's. */
.eh-inst__faixa.ep-faixa { left: calc(100% * var(--de) / var(--total)); width: calc(100% * var(--n) / var(--total)); }
/* why: the hours axis under the big chart. */
.eh-dia__eixo--big { color: var(--on-dark-60); }
/* why: the readouts and the questions, stacked. */
.eh-inst__lado { display: grid; gap: var(--s-6); align-content: start; }
/* why: the readouts as instrument values: mono labels, big mono «—» until OMIE data exists. */
.eh-leit { margin: 0; display: grid; }
/* why: one readout row with an on-dark hairline. */
.eh-leit > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--on-dark-20); }
/* why: the readout label. */
.eh-leit dt { font: 500 var(--t-xs)/1.3 var(--font-doc); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-60); }
/* why: the readout value. */
.eh-leit dd { margin: 0; font: 500 var(--t-md) var(--font-doc); color: var(--paper); }
/* why: the value's unit. */
.eh-leit dd small { margin-left: 4px; font: 400 12px var(--font-doc); color: var(--on-dark-60); }
/* why: the 2 questions as text links beside the chart. */
.eh-inst__q { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
/* why: one question: link, chip, then its line. */
.eh-inst__q li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s-2); }
/* why: the question link at body size in paper. */
.eh-inst__q a { font-size: var(--t-base); font-weight: 500; color: var(--paper); text-underline-offset: 3px; }
/* why: the chip sits right after the link. */
.eh-inst__q .eh-breve { margin: 0; }
/* why: the question's line under it. */
.eh-inst__q span:not(.eh-breve) { flex-basis: 100%; font-size: 14px; color: var(--on-dark-60); }

/* why: Guias is editorial on paper: one big pull figure, then a contents list. */
.eh-pull { display: grid; gap: var(--s-3); margin: var(--s-8) 0 0; }
/* why: the pull figure: light, very large, the page's biggest number. */
.eh-pull__n { margin: 0; font: 300 clamp(3.5rem, 13vw, 9rem)/.9 var(--font-ui); letter-spacing: -.04em; color: var(--ink); white-space: nowrap; }
/* why: the dot between the two rates in the accent. */
.eh-pull__n span { color: var(--peach-ink); }
/* why: the caption under the figure. */
.eh-pull figcaption { max-width: 40ch; font-size: var(--t-base); line-height: 1.4; color: var(--ink-60); }
/* why: the caption's link in ink. */
.eh-pull figcaption a { color: var(--ink); text-underline-offset: 3px; }
/* why: the contents list: a magazine's table of contents. */
.eh-toc { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; gap: var(--s-6); }
/* why: one entry: a strong rule on top, number, title, excerpt, «Ler». */
.eh-toc__i { position: relative; display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-4); border-top: 1px solid var(--ink); }
/* why: the entry number in mono accent. */
.eh-toc__n { font: 500 var(--t-sm) var(--font-doc); color: var(--peach-ink); }
/* why: the excerpt. */
.eh-toc__i p { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-60); max-width: 34ch; }
/* why: «Ler →» in small mono. */
.eh-toc__ler { font: 500 12px var(--font-doc); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }

/* why: Descontos e regras is a ledger: mono, thick top and bottom rules, thin row rules, no cards. */
.eh-led { margin-top: var(--s-8); border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); font-family: var(--font-doc); }
/* why: the column heads, hidden on the phone where the rows stack. */
.eh-led__cab { display: none; }
/* why: one row on the phone: number, question and value on line 1, the answer under them. */
.eh-led__l { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 4px var(--s-3); padding: var(--s-4) 0; border-top: 1px solid var(--hairline); }
/* why: no rule above the first row (the thick rule is there). */
.eh-led__l:first-of-type { border-top: 0; }
/* why: the row number. */
.eh-led__n { font-size: 12px; color: var(--ink-50); padding-top: 3px; }
/* why: the question, the row's link. */
.eh-led__q { grid-column: 2; font-size: var(--t-sm); font-weight: 500; }
/* why: the question link reads as text; the whole row is the target. */
.eh-led__q a { color: var(--ink); text-decoration: none; }
/* why: the stretched row link. */
.eh-led__q a::after { content: ''; position: absolute; inset: 0; }
/* why: the answer in one line, muted. */
.eh-led__r { grid-column: 2; grid-row: 2; font-size: 13px; line-height: 1.45; color: var(--ink-60); }
/* why: the figure, right-aligned like a ledger amount. */
.eh-led__v { grid-column: 3; grid-row: 1; font-size: var(--t-sm); font-weight: 500; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* why: the row arrow, desktop only. */
.eh-led__s { display: none; }
/* why: the source line, the document's footnote. */
.eh-led__fonte { margin: 0; padding: var(--s-3) 0; border-top: 1px solid var(--hairline); font-size: 12px; color: var(--ink-50); max-width: none; }
/* why: the row hover cue on a ledger. */
.eh-led__l:hover { background: var(--cream); }

/* why: the avisos section keeps the home's grid; the choices start at the left like the form. */
.eh-opts--esq { justify-content: flex-start; }

@media (min-width: 900px) {
  /* why: on desktop the groups are 4 wrapping columns again. */
  .eh-grupos--mix .eh-grupo__c { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  /* why: on desktop a chip may wrap inside its column. */
  .eh-grupos--mix .eh-chip { white-space: normal; flex: initial; }
  /* why: an «em breve» chip in a narrow column: its pill drops under the label (Task 14 browser check), never squeezing
     «Como têm andado os preços?» to three lines inside one pill. */
  .eh-grupos--mix .eh-chip--breve { flex-wrap: wrap; row-gap: 2px; padding-block: 6px; }
  /* why: the pill's left margin would indent it on its own line. */
  .eh-grupos--mix .eh-chip--breve .eh-breve { margin-left: 0; }
  /* why: the instrument: chart 2/3, side 1/3. */
  .eh-inst { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-8); }
  /* why: a taller chart on desktop. */
  .eh-inst__area { height: 280px; }
  /* why: the pull figure and its caption on one line. */
  .eh-pull { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: var(--s-8); }
  /* why: the contents in 3 columns. */
  .eh-toc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); }
  /* why: the ledger columns: n.º | question | answer | value | arrow. */
  .eh-led__cab, .eh-led__l { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.3fr) 150px 32px; gap: var(--s-4); align-items: baseline; }
  /* why: the column heads in small mono caps. */
  .eh-led__cab { padding: var(--s-2) 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-50); }
  /* why: the ledger rows get more air. */
  .eh-led__l { padding: var(--s-5) 0; }
  /* why: back to one line per row. */
  .eh-led__q, .eh-led__r, .eh-led__v { grid-column: auto; grid-row: auto; }
  /* why: the arrow column. */
  .eh-led__s { display: block; text-align: right; color: var(--ink); }
}
/* ─── Phase 1: «em breve» items are spans, not disabled links (spec §4.1) ─── */
/* why: a page not built yet is a span, not a link (spec §4.1): dashed and quieter, never focusable. */
.eh-chip--breve { border-style: dashed; color: var(--on-dark-60); cursor: default; }
/* why: an «em breve» card or row: the arrow is muted (D5: «their arrows are muted»). */
.eh-breve-seta { background: var(--tint-10); color: var(--ink-50); }
/* why: the Mercado control is shown disabled until phase 2 (ruling R4). */
.eh-seg button:disabled { cursor: default; }
/* why: R7: the avisos choices are a static list in phase 1; the active one looks like the checked option. */
.eh-opt--on { border-color: var(--ink-deep); background: var(--ink-deep); color: var(--paper); cursor: default; }
/* why: an «em breve» Mercado question is plain text: the mock's link size and weight; its line under it stays regular. */
.eh-inst__q li { font-size: var(--t-base); font-weight: 500; }
.eh-inst__q span:not(.eh-breve) { font-weight: 400; }
/* why: an «em breve» guide or ledger row is muted, as the mock's aria-disabled link was. */
.eh-toc__i .eh-q:has(.eh-breve), .eh-toc__i:has(.eh-q .eh-breve) .eh-toc__ler, .eh-led__q:has(.eh-breve) { color: var(--ink-50); }