/* why: the market pages of phase 2 (spec 2026-10-22 §5): /energia/mercado/hoje/, /energia/mercado/historico/ and
   /energia/horarios/. Ported from vault/energia-paginas/paginas.css (only what these three pages use) and the hub's .eh-m
   card (vault/energia-hub/energia-hub.css). Builds on hub.css (the dark band, the day bars, the ledger). Tokens only. */

/* ─── The answer-first hero: question, one sentence, one big number ─── */
/* why: the page root of an answer-first page; its hero ends where the answer ends (desktop rule below). */
.ep { display: block; }
/* why: the market hero centres its answer block and sentence (the base .ep-resp is in paginas.css). */
.ep .fz-centro > .ep-resp { margin-inline: auto; text-align: center; }

/* ─── Shared page parts ──────────────────────────────────────────────── */
/* why: a page section on the hub's rhythm (the same padding as .inside). */
.ep-sec { padding-block: clamp(var(--s-8), 8vw, var(--s-10)) 0; }

/* ─── Mercado · hoje: the window finder on the dark band ───────────────── */
/* why: the cycle averages under the chart: one card per cycle, readouts on dark. */
.ep-ciclos { display: grid; gap: var(--s-2); margin-top: var(--s-6); }
/* why: one cycle: its name, then its periods as readouts. */
.ep-ciclo { display: grid; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--on-dark-20); border-radius: var(--r-card); }
.ep-ciclo h3 { margin: 0; font: 500 var(--t-xs)/1.3 var(--font-doc); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-60); }
.ep-ciclo dl { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }
.ep-ciclo dl div { display: grid; gap: 2px; }
.ep-ciclo dt { font-size: 13px; color: var(--on-dark-60); }
.ep-ciclo dd { margin: 0; font: 500 var(--t-base) var(--font-doc); color: var(--paper); }
/* why: the appliance window finder: duration pills and the answer. */
.ep-janela { display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-card); background: var(--on-dark-20); }
.ep-janela p { margin: 0; font-size: var(--t-sm); color: var(--on-dark-75); }
.ep-janela b { display: block; margin-top: var(--s-1); font: 500 var(--t-md)/1.25 var(--font-doc); color: var(--paper); }
/* why: real readouts («12h · 13h · 14h») are longer than the mock's «—»: a step smaller, so the label
   and the value share the row at 390 px as in the mock (a long date line may wrap, right-aligned). */
.ep .eh-leit dd { font-size: var(--t-base); text-align: right; }
/* why: tomorrow without its last hour (M8): one quiet line under the chart. */
.ep-incompleto { margin: var(--s-2) 0 0; font: 400 var(--t-xs)/1.4 var(--font-ui); color: var(--on-dark-60); }

/* ─── Mercado · histórico ─────────────────────────────────────────────── */
/* why: space between stacked instrument blocks on the dark band. */
.ep-mt { margin-top: var(--s-6); }
/* why: the long-range chart: a thin-bar shape, slightly shorter than the day chart. */
.ep-hist { height: 160px; }
/* why: up to 200 monthly bars need hairline gaps. */
.ep-dia--fino { gap: 1px; }
.ep-dia--fino i { border-radius: 0; }
/* why: the distribution histogram, short. */
.ep-distr { height: 120px; margin-top: var(--s-3); }

/* ─── Horários: the 24 h rings ───────────────────────────────────────── */
/* why: the rings in a row on dark, one per cycle and season; 1 column on the phone. */
.ep-aneis { display: grid; gap: var(--s-6); margin-top: var(--s-8); }
/* why: one ring and its caption. */
.ep-anel { margin: 0; display: grid; justify-items: center; gap: var(--s-3); text-align: center; }
.ep-anel figcaption { font: 500 var(--t-xs)/1.4 var(--font-doc); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-75); }
.ep-anel figcaption span { display: block; font: 400 13px var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--on-dark-60); }
/* why: the ring's hour labels, mono on dark; 12 px (the mock's 10 px is under the gate's floor). */
.ep-anel text { font: 500 12px var(--font-doc); fill: var(--on-dark-60); }
/* why: the ring's centre answer («22h→8h»). */
.ep-anel .ep-anel__c { font: 500 15px var(--font-doc); fill: var(--paper); }
/* why: the ring SVG built by src/energia/horarios.ts anelSvg (same geometry as the mock), sized like the mock's. */
.ep-anel__svg { width: min(100%, 240px); height: auto; }
/* why: vazio is the cheap period: the brand green. */
.ep-vz { background: var(--band-barato); stroke: var(--band-barato); }
/* why: cheias / fora de vazio: the muted mauve. */
.ep-ch { background: var(--mauve); stroke: var(--mauve); }
/* why: ponta, the dear period: the dark peach. */
.ep-pt { background: var(--peach-ink); stroke: var(--peach-ink); }
/* why: «agora é vazio?» — the live line over the rings. */
.ep-agora { display: inline-flex; align-items: center; gap: var(--s-2); margin: var(--s-5) 0 0; padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font-size: var(--t-sm); }
.ep-agora i { flex: none; width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--mauve); }
/* why: the live line is written by the page's script; without JavaScript it stays hidden (spec §5.3). */
.ep-agora[hidden] { display: none; }

@media (min-width: 900px) {
  /* why: the 3 cycles side by side. */
  .ep-ciclos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* why: 3 rings in a row. */
  .ep-aneis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  /* why: the bars and the bracket move when the day or range changes; reduced motion gets the end state at once. */
  .ep *, .ep *::before, .ep *::after { transition: none !important; animation: none !important; }
}
/* why: «Fonte: OMIE …» sits on the dark band here (hub.css styles .eh-led__fonte for paper): readable on dark. */
.eh-mer .eh-led__fonte { color: var(--on-dark-60); }