:root {
  --md-sys-color-primary: #2f5cab;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #dce1ff;
  --md-sys-color-on-primary-container: #001b3f;
  --md-sys-color-secondary: #575d77;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #dce1ff;
  --md-sys-color-on-secondary-container: #131b30;
  --md-sys-color-tertiary: #7e5069;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ffd8ec;
  --md-sys-color-on-tertiary-container: #340c25;
  --md-sys-color-error: #be0131;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #fedad8;
  --md-sys-color-on-error-container: #410003;
  --md-sys-color-surface: #f8f9ff;
  --md-sys-color-on-surface: #1a1b21;
  --md-sys-color-surface-variant: #dfe2f1;
  --md-sys-color-on-surface-variant: #444653;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f2f3fb;
  --md-sys-color-surface-container: #ecedf5;
  --md-sys-color-surface-container-high: #e6e8ef;
  --md-sys-color-surface-container-highest: #e1e2ea;
  --md-sys-color-surface-dim: #d8dae1;
  --md-sys-color-surface-bright: #f8f9ff;
  --md-sys-color-inverse-surface: #2f3036;
  --md-sys-color-inverse-on-surface: #eff0f8;
  --md-sys-color-inverse-primary: #b5c4ff;
  --md-sys-color-outline: #747684;
  --md-sys-color-outline-variant: #c3c6d5;
  --md-sys-color-scrim: #000008;
  --md-sys-color-shadow: #000008;
  --wire-brand-fill: #2f5cab;
  --wire-on-brand: #ffffff;
  --wire-accent: #2f5cab;
  --wire-on-accent: #ffffff;
  --wire-aurora-1: #2f5cab;
  --wire-aurora-2: #7e5069;
  --wire-capa-bg: #dce1ff;
  --wire-capa-fg: #001b3f;
  --wire-ok: #4FD17A;
  --wire-warn: #F5A623;
  --wire-alt-bg: #2f3036;
  --wire-alt-fg: #eff0f8;
}
.d-card--brand {
  --md-sys-color-on-surface: #e1e2ea;
  --md-sys-color-on-surface-variant: #c3c6d5;
  --md-sys-color-primary: #b5c4ff;
  --md-sys-color-error: #ffb3b0;
  --md-sys-color-outline: #8d909e;
  --md-sys-color-outline-variant: #444653;
  --wire-accent: #FFFFFF;
  --wire-on-accent: #2f5cab;
}
/* ============================================================
   Material 3 — componentes. Tokens de cor injetados por variante.
   Escala tipográfica, escala de forma, elevação e camada de estado
   conforme a especificação.
   ============================================================ */

:root {
  /* Escala tipográfica M3 (tamanho / altura / peso / tracking) */
  --md-display-l: 3.5625rem;  --md-display-m: 2.8125rem; --md-display-s: 2.25rem;
  --md-headline-l: 2rem;      --md-headline-m: 1.75rem;  --md-headline-s: 1.5rem;
  --md-title-l: 1.375rem;     --md-title-m: 1rem;        --md-title-s: 0.875rem;
  --md-body-l: 1rem;          --md-body-m: 0.875rem;     --md-body-s: 0.75rem;
  --md-label-l: 0.875rem;     --md-label-m: 0.75rem;     --md-label-s: 0.6875rem;

  /* Escala de forma — a variante sobrescreve */
  --md-shape-xs: 4px;  --md-shape-s: 8px;   --md-shape-m: 12px;
  --md-shape-l: 16px;  --md-shape-xl: 28px; --md-shape-full: 999px;
  --md-card-shape: var(--md-shape-m);

  /* Elevação: sombra em dois planos, como a especificação define */
  --md-elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-elev-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-elev-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30);
  --md-elev-4: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.30);

  --md-dens: 1;   /* 1 = confortável · 0.75 = compacto */
}

* , *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Roboto, system-ui, -apple-system, sans-serif;
  font-size: var(--md-body-m);
  line-height: 1.43;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  -webkit-font-smoothing: antialiased;
}

/* ── Tipografia ─────────────────────────────────────────────── */

.md-display-l { font-size: var(--md-display-l); line-height: 1.12; font-weight: 400; letter-spacing: -.015em; }
.md-display-m { font-size: var(--md-display-m); line-height: 1.16; font-weight: 400; }
.md-display-s { font-size: var(--md-display-s); line-height: 1.22; font-weight: 400; }
.md-headline-m { font-size: var(--md-headline-m); line-height: 1.29; font-weight: 400; }
.md-headline-s { font-size: var(--md-headline-s); line-height: 1.33; font-weight: 400; }
.md-title-l { font-size: var(--md-title-l); line-height: 1.27; font-weight: 400; }
.md-title-m { font-size: var(--md-title-m); line-height: 1.5; font-weight: 500; letter-spacing: .009em; }
.md-title-s { font-size: var(--md-title-s); line-height: 1.43; font-weight: 500; letter-spacing: .007em; }
.md-body-l { font-size: var(--md-body-l); line-height: 1.5; letter-spacing: .031em; }
.md-body-m { font-size: var(--md-body-m); line-height: 1.43; letter-spacing: .016em; }
.md-body-s { font-size: var(--md-body-s); line-height: 1.33; letter-spacing: .033em; }
.md-label-l { font-size: var(--md-label-l); line-height: 1.43; font-weight: 500; letter-spacing: .007em; }
.md-label-m { font-size: var(--md-label-m); line-height: 1.33; font-weight: 500; letter-spacing: .042em; }
.md-label-s { font-size: var(--md-label-s); line-height: 1.45; font-weight: 500; letter-spacing: .045em; }

.num { font-variant-numeric: tabular-nums; }
.num-prop { font-variant-numeric: proportional-nums; }

/* ── Barra superior ─────────────────────────────────────────── */

.md-topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1rem; height: 4rem;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  position: sticky; top: 0; z-index: 10;
}
.md-topbar--scrolled { background: var(--md-sys-color-surface-container); }
.md-topbar__title { flex: 1 1 auto; }
.md-topbar__lead {
  width: 2.5rem; height: 2.5rem; border-radius: var(--md-shape-full);
  background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
  display: grid; place-items: center; font-weight: 500; flex: none;
}

/* ── Layout ─────────────────────────────────────────────────── */

.md-page { max-width: 76rem; margin: 0 auto; padding: 0 1rem 5rem; }
.md-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: calc(1rem * var(--md-dens));
}
.md-grid--2 { grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr)); }
.md-stack { display: grid; gap: calc(1rem * var(--md-dens)); }
.span-2 { grid-column: span 2; }
@media (max-width: 52rem) { .span-2 { grid-column: auto; } }

/* ── Card ───────────────────────────────────────────────────── */

.md-card {
  border-radius: var(--md-card-shape);
  padding: calc(1.25rem * var(--md-dens)) calc(1.25rem * var(--md-dens));
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  position: relative;
}
.md-card--elevated {
  background: var(--md-sys-color-surface-container-low);
  box-shadow: var(--md-elev-1);
}
.md-card--filled { background: var(--md-sys-color-surface-container-highest); }
.md-card--outlined {
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
}
.md-card--primary {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.md-card--tertiary {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}
.md-card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.75rem; margin-bottom: 0.75rem;
}
.md-card__label { color: var(--md-sys-color-on-surface-variant); }
.md-card--primary .md-card__label { color: inherit; opacity: .85; }
.md-card__supporting { color: var(--md-sys-color-on-surface-variant); margin: .35rem 0 0; }
.md-card--primary .md-card__supporting { color: inherit; opacity: .9; }

/* Camada de estado: 8% no hover, 10% no foco/pressionado */
.md-interactive { cursor: pointer; }
.md-interactive::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; background: currentColor;
  opacity: 0; transition: opacity 120ms ease; pointer-events: none;
}
.md-interactive:hover::after { opacity: .08; }
.md-interactive:focus-visible::after { opacity: .10; }
.md-interactive:active::after  { opacity: .10; }

/* ── Métrica dentro do card ─────────────────────────────────── */

.md-metric { display: flex; align-items: baseline; gap: .4rem; }
.md-metric__val { font-weight: 400; letter-spacing: -.02em; }
.md-metric__un { color: var(--md-sys-color-on-surface-variant); }
.md-card--primary .md-metric__un { color: inherit; opacity: .85; }

/* ── Ícone em container tonal ───────────────────────────────── */

.md-icon {
  width: 2.5rem; height: 2.5rem; flex: none;
  border-radius: var(--md-shape-full);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  display: grid; place-items: center;
}
.md-icon svg { width: 1.25rem; height: 1.25rem; fill: none;
               stroke: currentColor; stroke-width: 2;
               stroke-linecap: round; stroke-linejoin: round; }

/* ── Chip ───────────────────────────────────────────────────── */

.md-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.md-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  height: 2rem; padding: 0 .75rem;
  border-radius: var(--md-shape-s);
  border: 1px solid var(--md-sys-color-outline);
  background: transparent; color: var(--md-sys-color-on-surface-variant);
  font: 500 var(--md-label-l)/1 Roboto, sans-serif;
  white-space: nowrap;
}
.md-chip--selected {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}
.md-chip__dot { width: .5rem; height: .5rem; border-radius: 50%;
                background: currentColor; flex: none; }

/* ── Lista (substitui tabela) ───────────────────────────────── */

.md-list { list-style: none; margin: 0; padding: 0; }
.md-list__item {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center; gap: 0 1rem;
  min-height: calc(4.5rem * var(--md-dens));
  padding: calc(.5rem * var(--md-dens)) 0;
  position: relative;
}
.md-list__item + .md-list__item { border-top: 1px solid var(--md-sys-color-outline-variant); }
.md-list__lead {
  width: 2.5rem; height: 2.5rem; border-radius: var(--md-shape-full);
  display: grid; place-items: center; flex: none;
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface-variant);
  font: 500 var(--md-label-l)/1 Roboto, sans-serif;
}
.md-list__lead--done { background: var(--md-sys-color-primary-container);
                       color: var(--md-sys-color-on-primary-container); }
.md-list__lead--fail { background: var(--md-sys-color-error-container);
                       color: var(--md-sys-color-on-error-container); }
.md-list__lead--idle { background: transparent;
                       border: 1px dashed var(--md-sys-color-outline-variant); }
.md-list__supporting { color: var(--md-sys-color-on-surface-variant); }
.md-list__trail { text-align: right; color: var(--md-sys-color-on-surface-variant);
                  white-space: nowrap; }
.md-list__trail b { display: block; color: var(--md-sys-color-on-surface); font-weight: 500; }

/* ── Botões ─────────────────────────────────────────────────── */

.md-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 2.5rem; padding: 0 1.5rem; border: 0;
  border-radius: var(--md-shape-full);
  background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
  font: 500 var(--md-label-l)/1 Roboto, sans-serif;
  cursor: pointer; position: relative; text-decoration: none;
}
.md-btn--text { background: transparent; color: var(--md-sys-color-primary); padding: 0 .75rem; }
.md-btn--tonal { background: var(--md-sys-color-secondary-container);
                 color: var(--md-sys-color-on-secondary-container); }
.md-btn svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }

.md-fab {
  width: 3.5rem; height: 3.5rem; border: 0;
  border-radius: var(--md-shape-l);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  box-shadow: var(--md-elev-3); cursor: pointer;
  display: grid; place-items: center; position: relative;
}
.md-fab svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }

/* ── Barra de navegação ─────────────────────────────────────── */

.md-nav { display: flex; gap: .25rem; padding: .5rem 1rem 0; max-width: 76rem;
          margin: 0 auto; }
.md-nav a {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 2.5rem; padding: 0 1rem;
  border-radius: var(--md-shape-full);
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
  font: 500 var(--md-label-l)/1 Roboto, sans-serif;
  position: relative;
}
.md-nav a[aria-current="page"] {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

/* ── Divisor ────────────────────────────────────────────────── */

.md-divider { height: 1px; background: var(--md-sys-color-outline-variant);
              border: 0; margin: 1rem 0; }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================
   Variante D — M3 escuro, formas grandes, cards invertidos.
   Movimentos vindos da referência: casco recuado, raio grande,
   cards que invertem (branco e azul vivo), numeral display com
   unidade pequena, tiras arredondadas, pílulas de controle.
   ============================================================ */

:root {
  --md-card-shape: 20px;
  --shell-shape: 28px;
  --md-dens: 1;
  /* Papel customizado: o azul de marca cheio. O `primary` do M3 no tema
     escuro é tom 80 (claro), então um card azul vivo com texto branco
     precisa de um papel próprio — é extensão declarada, não token padrão. */
  --wire-brand: var(--wire-brand-fill);
}

body { background: var(--md-sys-color-surface); padding: 0; }

/* Casco recuado da borda, como na referência */
.shell {
  margin: 1rem;
  border-radius: var(--shell-shape);
  background: var(--md-sys-color-surface-container-lowest);
  padding: 1.25rem;
  min-height: calc(100vh - 2rem);
}
@media (max-width: 46rem) { .shell { margin: .5rem; padding: .75rem; } }

/* ── Barra superior com nav em pílula ───────────────────────── */

.d-top {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.25rem; flex-wrap: wrap;
}
.d-logo {
  width: 2.75rem; height: 2.75rem; flex: none;
  border-radius: var(--md-shape-full);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-primary);
  display: grid; place-items: center; font-weight: 700; font-size: 1.05rem;
}
.d-navpill {
  display: flex; align-items: center; gap: .25rem;
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-shape-full);
  padding: .375rem;
}
.d-navpill a {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 2.25rem; padding: 0 1rem;
  border-radius: var(--md-shape-full);
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none; white-space: nowrap;
  font: 500 var(--md-label-l)/1 Roboto, sans-serif;
}
.d-navpill a[aria-current="page"] {
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
}
.d-navpill a[aria-current="page"]::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--wire-accent);
}
.d-top__right { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.d-round {
  width: 2.75rem; height: 2.75rem; border: 0; flex: none;
  border-radius: var(--md-shape-full);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  display: grid; place-items: center; cursor: pointer; position: relative;
}
.d-round svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor;
               stroke-width: 2; stroke-linecap: round; }

/* ── Grade ──────────────────────────────────────────────────── */

.d-grid { display: grid; gap: .875rem; grid-template-columns: repeat(12, minmax(0, 1fr)); }
/* min-width:0 em tudo: item de grid tem min-width auto por padrão e não
   encolhe abaixo do min-content — era o que vazava à direita. */
.d-grid > * { min-width: 0; }
.d-card > *, .d-card__top > * { min-width: 0; }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; }
.c5 { grid-column: span 5; } .c6 { grid-column: span 6; }
.c7 { grid-column: span 7; } .c8 { grid-column: span 8; }
.c9 { grid-column: span 9; } .c12 { grid-column: span 12; }
@media (max-width: 68rem) {
  .c3, .c4, .c5 { grid-column: span 6; }
  .c7, .c8, .c9 { grid-column: span 12; }
}
@media (max-width: 46rem) { .d-grid > * { grid-column: span 12 !important; } }

/* ── Cards, incluindo os invertidos ─────────────────────────── */

.d-card {
  border-radius: var(--md-card-shape);
  padding: 1.25rem;
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
/* Card branco: papéis inverse do M3, não um hack */
.d-card--inverse {
  background: var(--wire-alt-bg);
  color: var(--wire-alt-fg);
}
/* Card de marca: papel customizado declarado */
.d-card--brand { background: var(--wire-brand-fill); color: var(--wire-on-brand); }

.d-card__label { color: var(--md-sys-color-on-surface-variant); }
.d-card--inverse .d-card__label,
.d-card--brand .d-card__label { color: inherit; opacity: .78; }
.d-card__foot {
  display: flex; justify-content: space-between; gap: .75rem;
  margin-top: auto; padding-top: 1rem;
  color: var(--md-sys-color-on-surface-variant);
}
.d-card--inverse .d-card__foot, .d-card--brand .d-card__foot {
  color: inherit; opacity: .78;
}
.d-card__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .75rem; margin-bottom: .5rem;
}

/* ── Numeral display com unidade pequena ────────────────────── */

.d-num {
  display: flex; align-items: baseline; gap: .25rem;
  font-weight: 700; letter-spacing: -.03em; line-height: .92;
  font-variant-numeric: proportional-nums;
}
.d-num--xl { font-size: 3.75rem; }
.d-num--l  { font-size: 2.75rem; }
.d-num__un { font-size: 1rem; font-weight: 500; letter-spacing: 0; opacity: .7; }

/* ── Pílula de controle ─────────────────────────────────────── */

.d-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  height: 2.25rem; padding: 0 .9rem;
  border-radius: var(--md-shape-full);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: transparent; color: var(--md-sys-color-on-surface-variant);
  font: 500 var(--md-label-l)/1 Roboto, sans-serif; white-space: nowrap;
  cursor: pointer;
}
.d-pill--on {
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface); border-color: transparent;
}
.d-pill svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor;
              stroke-width: 2.5; stroke-linecap: round; }

/* ── Tiras arredondadas (colunas por dia) ───────────────────── */

.d-strips { display: flex; align-items: flex-end; gap: 3px; height: 7.5rem; min-width: 0; }
.d-strip {
  flex: 1 1 0; min-width: 4px;
  border-radius: var(--md-shape-full);
  background: var(--md-sys-color-primary);
  opacity: .55;
  position: relative;
}
.d-strip--on { opacity: 1; background: var(--wire-accent); }
.d-strip--vazio {
  height: 4px !important; opacity: 1;
  background: var(--md-sys-color-outline-variant);
}
/* Pílula de valor flutuando sobre a tira notável */
.d-strip__pill {
  /* `top:0` é obrigatório: num container column-reverse a posição estática
     de um absoluto sem top cai no fim, e a pílula descola do topo da barra. */
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -132%);
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  border-radius: var(--md-shape-full);
  padding: .2rem .5rem; white-space: nowrap;
  font: 500 var(--md-label-s)/1 Roboto, sans-serif;
}

/* ── Trilho de fases (sequência com duração) ────────────────── */

.d-rail { display: flex; gap: 3px; margin: .75rem 0 .5rem; min-width: 0; }
.d-rail__seg {
  height: 2.25rem; border-radius: var(--md-shape-s);
  background: var(--md-sys-color-primary); opacity: .5;
  display: grid; place-items: center;
  color: var(--md-sys-color-on-primary);
  font: 500 var(--md-label-s)/1 Roboto, sans-serif;
  overflow: hidden;
}
.d-rail__seg--big { opacity: 1; background: var(--wire-accent);
                    color: var(--wire-on-accent); }
.d-rail__seg--idle {
  background: transparent; opacity: 1;
  border: 1px dashed var(--md-sys-color-outline-variant);
}
.d-legend { display: flex; flex-wrap: wrap; gap: .25rem .9rem;
            color: var(--md-sys-color-on-surface-variant); }
.d-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.d-legend i { width: .5rem; height: .5rem; border-radius: 50%; flex: none; }

/* ── Barras horizontais (raio cheio) ────────────────────────── */

.d-bars { display: grid; gap: .55rem; }
.d-bar {
  display: grid; grid-template-columns: var(--rot, 9.5rem) 1fr auto;
  align-items: center; gap: 0 .8rem;
}
.d-bar__rot { color: var(--md-sys-color-on-surface); text-align: right;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-bar__trilho { display: block; min-width: 0; }
.d-bar__marca {
  display: block; height: 1.15rem; min-width: 1.15rem;
  border-radius: var(--md-shape-full);
  background: var(--md-sys-color-primary); opacity: .5;
}
.d-bar--top .d-bar__marca { background: var(--wire-accent); opacity: 1; }
.d-bar__val { text-align: right; min-width: 4.5rem;
              color: var(--md-sys-color-on-surface);
              font-variant-numeric: tabular-nums; }

/* ── Medidor em anel? Não: barra de raio cheio ──────────────── */
.d-meter { height: .625rem; border-radius: var(--md-shape-full);
           background: rgba(255,255,255,.22); overflow: hidden; }
.d-card--brand .d-meter { background: rgba(255,255,255,.28); }
.d-meter__fill { height: 100%; border-radius: var(--md-shape-full); background: #fff; }

.d-play {
  display: inline-flex; align-items: center; gap: .6rem;
  height: 2.75rem; padding: 0 1.4rem; border: 0;
  border-radius: var(--md-shape-full);
  background: var(--wire-accent); color: var(--wire-on-accent);
  font: 600 var(--md-label-l)/1 inherit;
  cursor: pointer; position: relative;
}
/* Dentro do card-herói o acento continua sendo o acento — branco sobre
   lime dava 1,15:1. */
.d-card--brand .d-play {
  background: var(--wire-accent); color: var(--wire-on-accent);
}
.d-play svg { width: 1rem; height: 1rem; fill: currentColor; }

/* ============================================================
   Variante E — acabamento.
   Tipografia: Manrope, uma família só, explorada por peso e
   tracking óptico. Numeral grande em 800 com tracking negativo;
   corpo grande em 300. O contraste de peso é o que dá sofisticação
   sem precisar de uma segunda família.
   ============================================================ */

:root {
  --fam: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Escala em passos de 4px, base 14 */
  --t-11: .6875rem; --t-12: .75rem;  --t-13: .8125rem; --t-14: .875rem;
  --t-16: 1rem;     --t-18: 1.125rem; --t-21: 1.3125rem; --t-26: 1.625rem;
  --t-34: 2.125rem; --t-46: 2.875rem; --t-60: 3.75rem;

  /* Tracking óptico: negativo no display, positivo no micro */
  --tr-display: -.035em;
  --tr-title: -.018em;
  --tr-body: -.005em;
  --tr-label: .02em;
  --tr-micro: .06em;

  --e-1: 150ms cubic-bezier(.2,0,0,1);
  --e-2: 280ms cubic-bezier(.2,0,0,1);
  --e-slow: 620ms cubic-bezier(.16,1,.3,1);
}

body {
  font-family: var(--fam);
  font-size: var(--t-14);
  font-weight: 400;
  letter-spacing: var(--tr-body);
  font-feature-settings: "ss01" 1, "cv11" 1;
  text-rendering: optimizeLegibility;
}

/* ── Papéis tipográficos ────────────────────────────────────── */

.ty-num {
  font-weight: 800;
  letter-spacing: var(--tr-display);
  line-height: .9;
  font-variant-numeric: proportional-nums;
  font-feature-settings: "tnum" 0;
}
.ty-num--xl { font-size: var(--t-60); }
.ty-num--l  { font-size: var(--t-46); }
.ty-num--m  { font-size: var(--t-34); }
.ty-num__dec {
  font-size: .52em; font-weight: 700;
  letter-spacing: -.01em; margin-left: -.02em;
}
.ty-num__un {
  font-size: var(--t-14); font-weight: 600;
  letter-spacing: var(--tr-label); opacity: .62;
  margin-left: .15em;
}

.ty-h1 { font-size: var(--t-26); font-weight: 700; letter-spacing: var(--tr-title);
         line-height: 1.18; margin: 0; }
.ty-h2 { font-size: var(--t-16); font-weight: 700; letter-spacing: var(--tr-title);
         line-height: 1.3; margin: 0; }
.ty-lede { font-size: var(--t-16); font-weight: 300; line-height: 1.55;
           letter-spacing: var(--tr-body); }
.ty-body { font-size: var(--t-13); font-weight: 400; line-height: 1.5; }
.ty-label { font-size: var(--t-12); font-weight: 600; letter-spacing: var(--tr-label); }
.ty-micro { font-size: var(--t-11); font-weight: 600; letter-spacing: var(--tr-micro);
            text-transform: none; }
.ty-data { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
           font-weight: 600; letter-spacing: 0; }

/* ── Acabamento de card em superfície escura ────────────────── */
/* Aresta de 1px mais clara no topo: é o detalhe que dá corpo a um
   card escuro sem sombra. Borda inteira em outline-variant a 60%. */

.d-card {
  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent);
  box-shadow: 0 1px 0 0 color-mix(in srgb, #fff 6%, transparent) inset,
              0 8px 24px -12px rgba(0,0,0,.5);
  transition: border-color var(--e-2), transform var(--e-2), box-shadow var(--e-2);
}
.d-card--brand, .d-card--inverse { border-color: transparent; }

/* Brilho diagonal discreto no card de marca — profundidade sem gradiente óbvio */
.d-card--brand::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg,
    color-mix(in srgb, #fff 14%, transparent) 0%,
    transparent 42%,
    color-mix(in srgb, #000 8%, transparent) 100%);
}
.d-card--brand > * { position: relative; }

/* ── Micro-interação: o card reage ao ponteiro ─────────────── */

.d-card--hover:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--md-sys-color-outline) 70%, transparent);
}

/* ── Ponto de estado que pulsa só quando há algo rodando ───── */

.d-live { position: relative; width: .5rem; height: .5rem; border-radius: 50%;
          background: currentColor; flex: none; }
.d-live--on::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: currentColor; animation: pulso 1.8s ease-out infinite;
}
@keyframes pulso {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* ── Revelação orquestrada no carregamento ─────────────────── */
/* Um momento só: as tiras crescem da base, o medidor enche, o trilho
   se abre. Escalonado por índice. Não é fade-up por seção. */

.d-strip { transform-origin: bottom; }
.reveal .d-strip {
  animation: cresce var(--e-slow) both;
  animation-delay: calc(var(--i, 0) * 14ms);
}
@keyframes cresce { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

.reveal .d-meter__fill { animation: enche var(--e-slow) 120ms both; }
@keyframes enche { from { width: 0 !important; } }

.reveal .d-rail__seg {
  animation: abre var(--e-slow) both;
  animation-delay: calc(var(--i, 0) * 45ms);
  transform-origin: left;
}
@keyframes abre { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

.reveal .d-bar__marca {
  animation: estica var(--e-slow) both;
  animation-delay: calc(var(--i, 0) * 40ms);
  transform-origin: left;
}
@keyframes estica { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Tiras: acabamento e resposta ao ponteiro ──────────────── */

.d-strip {
  transition: opacity var(--e-1), filter var(--e-1);
  box-shadow: 0 -1px 0 0 color-mix(in srgb, #fff 18%, transparent) inset;
}
.d-strips:hover .d-strip { opacity: .28; }
.d-strips .d-strip:hover { opacity: 1; filter: brightness(1.15); }
.d-strips:hover .d-strip--vazio { opacity: .5; }

.d-strip__pill {
  transition: transform var(--e-2), opacity var(--e-2);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.6);
}
.d-strip:hover .d-strip__pill { transform: translate(-50%, -160%); }

/* ── Barras: valor desliza no hover ────────────────────────── */

.d-bar { transition: none; }
.d-bar__marca { transition: filter var(--e-1), opacity var(--e-1); }
.d-bar:hover .d-bar__marca { opacity: 1; filter: brightness(1.12); }
.d-bar__val { transition: transform var(--e-1), color var(--e-1); }
.d-bar:hover .d-bar__val { transform: translateX(-2px); color: var(--md-sys-color-on-surface); }

/* ── Trilho de fases: segmento cresce no hover ─────────────── */

.d-rail__seg { transition: filter var(--e-1), opacity var(--e-1); }
.d-rail:hover .d-rail__seg { opacity: .32; }
.d-rail .d-rail__seg:hover { opacity: 1; filter: brightness(1.12); }

/* ── Pílula: transição de seleção ──────────────────────────── */

.d-pill { transition: background var(--e-1), color var(--e-1), border-color var(--e-1); }
.d-pill:hover { color: var(--md-sys-color-on-surface); }

/* ── Esqueleto de carregamento ─────────────────────────────── */
/* Resolve o problema real: hoje a página mostra um layout de zeros
   por ~1,5s antes dos dados chegarem. */

.sk { position: relative; overflow: hidden; border-radius: 6px;
      background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--md-sys-color-on-surface) 7%, transparent), transparent);
  animation: varre 1.4s linear infinite;
}
@keyframes varre { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ── Foco visível e respeito a movimento reduzido ──────────── */

:focus-visible { outline: 2px solid var(--wire-accent); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
  .d-card--hover:hover { transform: none; }
}

/* ── Tooltip ────────────────────────────────────────────────── */

.tip {
  position: fixed; top: 0; left: 0; z-index: 100;
  pointer-events: none;
  padding: .5rem .65rem;
  border-radius: 10px;
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  box-shadow: 0 12px 32px -10px rgba(0,0,0,.75);
  font-size: var(--t-12); font-weight: 600; letter-spacing: var(--tr-label);
  white-space: nowrap;
  opacity: 0; transition: opacity var(--e-1);
}
.tip--on { opacity: 1; }
.tip b { display: block; font-size: var(--t-13); font-weight: 800;
         letter-spacing: var(--tr-title); }
.tip i { font-style: normal; opacity: .65; font-weight: 600; }

/* ── Barra superior fixa com desfoque ──────────────────────── */

.d-top {
  position: sticky; top: 0; z-index: 20;
  margin: -1.25rem -1.25rem 1.25rem;
  padding: 1.25rem;
  transition: background var(--e-2), box-shadow var(--e-2);
  border-radius: var(--shell-shape) var(--shell-shape) 0 0;
}
.d-top--fixo {
  background: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 82%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--md-sys-color-outline-variant) 50%, transparent);
}

/* ── Fileira de 30 dias (encoding binário, complementar) ───── */

.d-dots { display: flex; gap: 3px; align-items: center; }
.d-dot { flex: 1 1 0; height: .375rem; border-radius: 999px;
         background: color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent); }
.d-dot--on { background: var(--md-sys-color-primary); opacity: .7; }
.d-dot--hoje { background: var(--wire-accent); opacity: 1; }

/* ── Barra superior no mobile ───────────────────────────────── */

@media (max-width: 46rem) {
  .d-top > div {
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-areas: "logo acoes" "nav nav";
    gap: .75rem 1rem; align-items: center;
  }
  .d-logo { grid-area: logo; }
  .d-top__right { grid-area: acoes; margin-left: auto; }
  .d-navpill {
    grid-area: nav; width: 100%;
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .d-navpill::-webkit-scrollbar { display: none; }
  .ty-num--xl { font-size: var(--t-46); }
  .d-strips { height: 5.5rem; }
  /* Pé de card empilha: lado a lado em 343px quebra no meio da frase. */
  .d-card__foot { flex-direction: column; gap: .3rem; }
  .d-card__foot span { text-align: left !important; }
  .d-legend { gap: .3rem .75rem; }
}

/* ── Preenchimento dos cards: o vão vertical era o defeito ──── */

.d-card__corpo { flex: 1 1 auto; display: flex; flex-direction: column;
                 justify-content: space-between; gap: 1.15rem; min-width: 0; }

/* Duas colunas no card-herói: a pauta de hoje ocupa a direita */
.d-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.75rem; flex: 1 1 auto; }
.d-hero__pauta { border-left: 1px solid color-mix(in srgb, #fff 22%, transparent);
                 padding-left: 1.5rem; display: flex; flex-direction: column; }
@media (max-width: 62rem) {
  .d-hero { grid-template-columns: 1fr; gap: 1.25rem; }
  .d-hero__pauta { border-left: 0; border-top: 1px solid color-mix(in srgb,#fff 22%,transparent);
                   padding: 1.25rem 0 0; }
}
.d-pauta { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .65rem; }
.d-pauta li { display: grid; grid-template-columns: 1.35rem 1fr; gap: .55rem;
              align-items: start; }
.d-pauta__n { font-weight: 800; opacity: .55; font-variant-numeric: tabular-nums;
              font-size: var(--t-12); padding-top: .1em; }
.d-pauta__t { font-size: var(--t-13); font-weight: 500; line-height: 1.35; }

/* Estados fora da conta. Sem barra: 12/2/1 não precisa de gráfico —
   o que faltava era dizer que só um deles pede ação. */
.d-mini { display: grid; gap: .1rem; }
.d-mini__l {
  display: grid; grid-template-columns: 2.25rem 1fr; gap: 0 .6rem;
  align-items: baseline; padding: .45rem 0;
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  position: relative;
}
.d-mini__l:first-child { border-top: 0; }
.d-mini__v {
  font-size: var(--t-21); font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; text-align: right;
}
.d-mini__rot { font-size: var(--t-13); font-weight: 600; }
.d-mini__nota {
  grid-column: 2; font-size: var(--t-11); font-weight: 500;
  opacity: .55; display: block; margin-top: .05rem;
}
/* O primeiro é o único que pede ação — recebe a marca. */
.d-mini__l:first-child .d-mini__v { color: var(--md-sys-color-error); }

/* Estatísticas em fileira */
.d-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.d-stats > div { min-width: 0; }
.d-stats__v { font-size: var(--t-18); font-weight: 800; letter-spacing: -.02em;
              font-variant-numeric: tabular-nums; display: block; }
.d-stats__r { font-size: var(--t-11); font-weight: 600; letter-spacing: var(--tr-label);
              opacity: .6; display: block; margin-top: .1rem; }

/* Sparkline */
.d-spark { display: block; width: 100%; height: 3.25rem; overflow: visible; }
.d-spark__area { fill: var(--md-sys-color-primary); opacity: .16; }
.d-spark__linha { fill: none; stroke: var(--md-sys-color-primary); stroke-width: 2;
                  stroke-linecap: round; stroke-linejoin: round; }
.d-spark__pt { fill: var(--wire-accent); stroke: var(--md-sys-color-surface-container-low);
               stroke-width: 2.5; }
.reveal .d-spark__linha { animation: traca 900ms cubic-bezier(.16,1,.3,1) 120ms both; }
.reveal .d-spark__area  { animation: surge 900ms cubic-bezier(.16,1,.3,1) 220ms both; }
.reveal .d-spark__pt    { animation: surge 400ms ease-out 900ms both; }
@keyframes traca { from { stroke-dasharray: var(--len) ; stroke-dashoffset: var(--len); }
                   to { stroke-dasharray: var(--len); stroke-dashoffset: 0; } }
@keyframes surge { from { opacity: 0; } }

/* Fileira de 30 dias, legível */
.d-dots { height: .875rem; align-items: stretch; }
.d-dot { height: 100%; border-radius: 3px; }
.d-dot--on { opacity: .8; }

/* Unidade do numeral: 14px ao lado de 60px ficava pequena demais */
.ty-num__un { font-size: var(--t-18); opacity: .58; }

/* ── Transmissões: grade, referência de média, dias segmentados ─── */

.d-plot { position: relative; }
.d-gridl { position: absolute; inset: 0; pointer-events: none; }
.d-gridl__l {
  position: absolute; left: 0; right: 0; height: 1px;
  background: color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent);
}
/* Minutos à esquerda: a pílula de valor de "hoje" fica à direita e
   encavalava neles. */
.d-gridl__t {
  position: absolute; left: 0; transform: translateY(-50%);
  font-size: var(--t-11); font-weight: 600; letter-spacing: var(--tr-label);
  color: var(--md-sys-color-on-surface-variant);
  background: var(--md-sys-color-surface-container-low);
  padding: 0 .3rem;
}
/* Média é referência, não grade — tracejado aqui significa limiar. */
.d-gridl__med {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px dashed color-mix(in srgb, var(--wire-accent) 75%, transparent);
}
.d-gridl__medt {
  position: absolute; left: 0; transform: translateY(-50%);
  font-size: var(--t-11); font-weight: 700; letter-spacing: var(--tr-label);
  color: var(--wire-accent);
  background: var(--md-sys-color-surface-container-low);
  padding: 0 .35rem 0 0;
}

/* Um dia com N edições é uma pilha de N segmentos, com vão de 2px.
   Antes era uma barra só: 08/09 lia como um episódio de 49min. */
.d-day {
  flex: 1 1 0; min-width: 4px; align-self: flex-end;
  display: flex; flex-direction: column-reverse; gap: 2px;
  transform-origin: bottom;
}
.d-seg {
  border-radius: 999px; background: var(--md-sys-color-primary);
  opacity: .55; min-height: 3px;
  box-shadow: 0 -1px 0 0 color-mix(in srgb, #fff 16%, transparent) inset;
}
.d-day:first-child > .d-seg, .d-day > .d-seg:first-child { border-radius: 999px; }
.d-day--on .d-seg { opacity: 1; background: var(--wire-accent); }
.d-day--vazio { height: 4px; }
.d-day--vazio .d-seg { opacity: 1; background: var(--md-sys-color-outline-variant);
                       height: 4px; border-radius: 2px; box-shadow: none; }
.d-strips:hover .d-day { opacity: .3; }
.d-strips .d-day:hover { opacity: 1; }
.d-day { transition: opacity var(--e-1); position: relative; }
.reveal .d-day { animation: cresce var(--e-slow) both;
                 animation-delay: calc(var(--i, 0) * 14ms); }

/* Eixo x com marca a cada 7 dias */
.d-xaxis { position: relative; height: 1.1rem; margin-top: .55rem; }
.d-xaxis span {
  position: absolute; transform: translateX(-50%);
  font-size: var(--t-11); font-weight: 600; letter-spacing: var(--tr-label);
  color: var(--md-sys-color-on-surface-variant); white-space: nowrap;
}
.d-xaxis span:first-child { transform: none; }
.d-xaxis span:last-child { transform: translateX(-100%); }

/* ── Publicações: idioma, participação, constância ──────────────── */

.d-pub { display: grid; gap: .45rem; }
.d-pub__l {
  display: grid; grid-template-columns: 12rem 1fr 3rem 6.5rem;
  align-items: center; gap 0 .8rem; gap: 0 .8rem;
}
.d-pub__nome { display: flex; align-items: center; gap: .4rem; justify-content: flex-end;
               min-width: 0; }
.d-pub__nome > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-lang {
  flex: none; font-size: var(--t-11); font-weight: 700; letter-spacing: .04em;
  padding: .05rem .3rem; border-radius: 4px;
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
  color: var(--md-sys-color-on-surface-variant);
}
.d-lang--pt { background: color-mix(in srgb, var(--wire-accent) 22%, transparent);
              color: var(--md-sys-color-on-surface); }
.d-pub__tr { display: block; min-width: 0; }
.d-pub__fl { display: block; height: 1.15rem; border-radius: 999px; min-width: 1.15rem;
             background: var(--md-sys-color-primary); opacity: .5;
             transition: filter var(--e-1), opacity var(--e-1); }
.d-pub__l--top .d-pub__fl { background: var(--wire-accent); opacity: 1; }
.d-pub__l:hover .d-pub__fl { opacity: 1; filter: brightness(1.12); }
.d-pub__n { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums;
            font-size: var(--t-14); }
.d-pub__sec { text-align: right; font-size: var(--t-11); font-weight: 600;
              color: var(--md-sys-color-on-surface-variant);
              font-variant-numeric: tabular-nums; white-space: nowrap; }
.reveal .d-pub__fl { animation: estica var(--e-slow) both;
                     animation-delay: calc(var(--i, 0) * 40ms); }

@media (max-width: 52rem) {
  .d-pub__l { grid-template-columns: 1fr auto; gap: .1rem .6rem; }
  .d-pub__nome { justify-content: flex-start; }
  .d-pub__tr { grid-column: 1 / -1; order: 3; }
  .d-pub__sec { display: none; }
}

/* ── Sparkline da saúde ─────────────────────────────────────── */

.d-sparkrot { display: flex; justify-content: space-between; gap: .75rem; }
/* Os rótulos de baixo ficaram longos; lado a lado quebravam no meio. */
.d-sparkrot--pilha { flex-direction: column; gap: .15rem; align-items: flex-start; }
.d-spark--saude { height: 2.875rem; }
.d-spark__baixo {
  fill: var(--md-sys-color-error);
  stroke: var(--md-sys-color-inverse-surface); stroke-width: 2;
}
.d-pior { color: var(--md-sys-color-error); font-weight: 700; }

/* Dentro do card invertido a área e a linha precisam do verde escuro,
   não do primary claro do tema escuro. */
.d-card--inverse .d-spark__area { fill: var(--wire-accent); opacity: .14; }
.d-card--inverse .d-spark__linha { stroke: var(--wire-accent); }
.d-card--inverse .d-spark__pt { fill: var(--wire-accent);
                                stroke: var(--md-sys-color-inverse-surface); }

/* ============================================================
   Variante F — limpa.
   Segunda passada de 12/09. O owner viu a primeira (aurora lime →
   verde → teal, orb com gradiente, card branco invertido, mancha de
   luz no herói) e pediu o oposto: mais limpo, tons moderados e
   harmônicos, azul. Sai tudo que era mancha; fica o que era lógica:

   - o gradiente com ataque e cauda continua sendo o ponteiro nos
     dados — barra de hoje, fase dominante, primeira barra de cada
     ranking, sparkline —, agora `primary` → `tertiary` do M3, que
     para este azul cai no rosa. É o par do Gemini, derivado, pastel;
   - o círculo fica nos raios grandes e no ponto de estado, não num orb;
   - movimento com começo e fim: só o varrer do trilho no carregamento;
   - profundidade vem de um degradê de 18% no herói, não de luz.
   Uma família só (Manrope), e desta vez de verdade.
   ============================================================ */

:root {
  --shell-shape: 28px;
  --md-card-shape: 22px;
  --t-40: 2.5rem;
  --aurora:   linear-gradient(90deg,  var(--wire-aurora-1) 0%, var(--wire-aurora-2) 100%);
  --aurora-v: linear-gradient(180deg, var(--wire-aurora-1) 0%, var(--wire-aurora-2) 100%);
}

/* ── Uma família só, de verdade ───────────────────────────────── */
/* `d.css` e `componentes.css` declaram `font:` com Roboto no shorthand,
   e o shorthand vence o `font-family` do body. Nav, pílulas e trilho
   caíam em Helvetica sem ninguém notar. */
.d-navpill a, .d-pill, .d-strip__pill, .d-rail__seg, .md-chip, .md-btn,
.md-list__lead, .md-nav a { font-family: var(--fam); }
.d-navpill a { font-weight: 600; letter-spacing: var(--tr-label); }
.d-pill { font-weight: 600; letter-spacing: var(--tr-label); }
.d-strip__pill, .d-rail__seg { font-weight: 700; letter-spacing: var(--tr-label); }

.shell { padding: 1.5rem; }
@media (max-width: 46rem) { .shell { padding: .875rem; } }
.d-card { padding: 1.5rem; }
@media (max-width: 46rem) { .d-card { padding: 1.25rem; } }
.d-top { margin: -1.5rem -1.5rem 1.5rem; padding: 1.25rem 1.5rem; }

/* ── Marca: círculo tonal e o nome ao lado ───────────────────── */

.d-brand {
  display: inline-flex; align-items: center; gap: .6rem;
  color: inherit; text-decoration: none; flex: none;
}
.d-logo {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font-weight: 800; letter-spacing: -.04em; font-size: 1rem;
}
.d-wordmark { font-weight: 700; font-size: var(--t-16); letter-spacing: -.02em; }
@media (max-width: 46rem) {
  .d-brand { grid-area: logo; }
  /* Em 375px a fileira já leva três botões redondos e a data. */
  .d-wordmark { display: none; }
  .d-top__right > div { white-space: nowrap; }
}

/* ── Herói: um plano, com um degradê que dá corpo ────────────── */

.d-card--brand {
  background: linear-gradient(135deg,
    var(--wire-brand-fill) 0%,
    color-mix(in srgb, var(--wire-brand-fill) 82%, #000) 100%);
  border-color: transparent;
  padding: 1.75rem;
}
@media (max-width: 46rem) { .d-card--brand { padding: 1.25rem; } }
.d-card--brand::before { background: none; }

.d-hero { gap: 2rem; }
.d-hero__texto { display: flex; flex-direction: column; min-width: 0; }
.d-hero__t {
  font-size: var(--t-40); font-weight: 800; line-height: 1.04;
  letter-spacing: var(--tr-display); max-width: 20ch;
  margin: .6rem 0 0; text-wrap: balance;
}
.d-hero__lede { opacity: .82; margin: .85rem 0 1.5rem; max-width: 52ch; }
.d-hero__cta {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: auto;
}
.d-hero__meta { color: inherit; opacity: .78; }
.d-hero__pauta {
  border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  padding-left: 1.75rem;
}
.d-hero__link {
  margin-top: auto; padding-top: 1.25rem; align-self: flex-start;
  color: inherit; opacity: .85; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  transition: opacity var(--e-1), border-color var(--e-1);
}
.d-hero__link:hover { opacity: 1; border-color: currentColor; }
.d-pauta { gap: .75rem; }
.d-pauta__n { opacity: .6; }
@media (max-width: 62rem) {
  .d-hero__pauta { border-left: 0; padding-left: 0; }
  .d-hero__t { font-size: var(--t-34); }
}

/* Ouvir: botão cheio do M3, no acento, sem glow. */
.d-play {
  height: 3rem; padding: 0 1.5rem 0 1.25rem; gap: .7rem;
  font-weight: 700; letter-spacing: var(--tr-label);
  transition: transform var(--e-1), filter var(--e-1);
}
.d-play:hover { filter: brightness(1.06); }
.d-play:active { transform: scale(.98); }

/* ── Os ponteiros nos dados ───────────────────────────────────── */

.d-day--on .d-seg { background: var(--aurora-v); box-shadow: none; }
.d-dot--hoje { background: var(--wire-accent); }
.d-rail { position: relative; border-radius: var(--md-shape-s); overflow: hidden; }
.d-rail__seg--big { background: var(--aurora); color: var(--wire-on-accent); }
.d-rail::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    transparent 38%, color-mix(in srgb, #fff 22%, transparent) 50%, transparent 62%);
  transform: translateX(-100%); opacity: 0;
}
.reveal .d-rail::after { animation: varre-trilho 1400ms cubic-bezier(.45,0,.2,1) 650ms both; }
@keyframes varre-trilho {
  0%   { transform: translateX(-100%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}
.d-spark--aurora .d-spark__linha { stroke: url(#g-aurora); }
.d-spark--aurora .d-spark__area  { fill: url(#g-aurora-area); opacity: 1; }
.d-bar--top .d-bar__marca, .d-pub__l--top .d-pub__fl { background: var(--aurora); }

/* A sparkline da saúde agora vive num card comum: o ponto do pior dia
   recorta contra o fundo do card, não contra o branco. */
.d-spark__baixo { stroke: var(--md-sys-color-surface-container-low); }
.d-spark--saude .d-spark__pt { stroke: var(--md-sys-color-surface-container-low); }

@media (prefers-reduced-motion: reduce) { .d-rail::after { display: none; } }

/* ============================================================
   Detalhes — a terceira passada de 12/09. "Mais personalidade e
   detalhes sutis." Personalidade aqui vem de forma, ritmo e do que
   os dados permitem contar — não de cor a mais.
   ============================================================ */

/* ── Hierarquia de forma: o herói é a forma grande ───────────── */
.d-card--brand { border-radius: 28px; isolation: isolate; }

/* Grão fino no herói: textura de material, não luz. 7% em overlay —
   visível como tato, invisível como ruído. */
.d-card--brand::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Cards comuns: um plano só, com 3% a mais de luz no topo. */
.d-card:not(.d-card--brand) {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--md-sys-color-surface-container-low) 97%, #fff) 0%,
    var(--md-sys-color-surface-container-low) 45%);
}
/* O rodapé ancora: fio de 10% e respiro. */
.d-card__foot {
  border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  padding-top: .9rem; margin-top: 1.15rem;
}
.d-card__foot--solto { border-top: 0; padding-top: 0; }

/* ── O espelho como linha: a assinatura ──────────────────────── */
/* Onze blocos na ordem do episódio, largura = duração prevista pelo
   Curador. "Previsto" e "no ar" lado a lado, porque as estimativas
   somam ~60% mais que o áudio real — o rótulo carrega a diferença. */
.d-esp { margin: 1.35rem 0 1.6rem; }
.d-esp__l { display: flex; gap: 3px; height: .625rem; }
.d-esp__b {
  flex: 1 1 0; min-width: 4px; border-radius: 999px;
  background: color-mix(in srgb, currentColor 30%, transparent);
  transform-origin: left; cursor: default;
  transition: background var(--e-1), transform var(--e-1);
}
.d-esp__b--abre { background: var(--aurora); }
.d-esp__l:hover .d-esp__b { background: color-mix(in srgb, currentColor 18%, transparent); }
.d-esp__l:hover .d-esp__b--abre { background: var(--aurora); opacity: .55; }
.d-esp__l .d-esp__b:hover, .d-esp__l .d-esp__b:focus-visible {
  background: currentColor; opacity: 1; transform: scaleY(1.5);
}
.d-esp__l .d-esp__b--abre:hover { background: var(--aurora); }
.reveal .d-esp__b { animation: abre var(--e-slow) both; animation-delay: calc(var(--i, 0) * 38ms); }
.d-esp__rot {
  display: flex; flex-direction: column; gap: .15rem; align-items: flex-start;
  margin-top: .6rem; opacity: .72;
}
.d-esp__rot b { font-weight: 700; }
/* A lista "Abre com" e a linha são a mesma coisa: passar o ponteiro
   num título acende o bloco dele. */
.d-esp__b--foco { background: currentColor !important; opacity: 1; transform: scaleY(1.5); }
.d-esp__b--abre.d-esp__b--foco { background: var(--aurora) !important; }
.d-pauta li { cursor: default; }
.d-pauta li:hover .d-pauta__n { opacity: 1; }
.d-pauta__n { transition: opacity var(--e-1); }

/* Tooltip pode quebrar linha: os títulos das pautas são longos. */
.tip { white-space: normal; max-width: 19rem; line-height: 1.35; }
.tip b { margin-bottom: .15rem; }

/* ── Nav: a cápsula desliza até o item ───────────────────────── */
.d-navpill { position: relative; }
.d-navpill::before {
  content: ""; position: absolute; top: .375rem; bottom: .375rem;
  left: var(--x, .375rem); width: var(--w, 0);
  border-radius: var(--md-shape-full);
  background: var(--md-sys-color-surface-container-highest);
  transition: left var(--e-2), width var(--e-2);
}
.d-navpill a { position: relative; }
.d-navpill--pronta a[aria-current="page"] { background: transparent; }

/* ── Estado do ciclo: uma pílula com o ponto que diz a cor ───── */
.d-status {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 2.25rem; padding: 0 .9rem 0 .8rem;
  border-radius: var(--md-shape-full);
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface); white-space: nowrap;
}
.d-status--ok .d-live { color: var(--wire-ok); }
.d-status--run .d-live { color: var(--wire-accent); }
.d-status--erro .d-live { color: var(--md-sys-color-error); }
.d-top__hora { color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }
@media (max-width: 46rem) { .d-top__hora { display: none; } }

/* ── "Agora": o ponto final da sparkline respira ─────────────── */
.d-now {
  position: absolute; right: 0; width: .5rem; height: .5rem;
  border-radius: 50%; background: var(--wire-accent);
  transform: translate(50%, -50%);
  box-shadow: 0 0 0 2px var(--md-sys-color-surface-container-low);
}
.d-now::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--wire-accent);
  animation: pulso 2.6s cubic-bezier(.2,0,0,1) infinite;
}
@media (prefers-reduced-motion: reduce) { .d-now::after { display: none; } }

/* ── Transmissões: a quarta passada ──────────────────────────── */
/* O owner apontou este card. Colunas mais esbeltas com respiro (as
   pílulas gordas viravam bolha), volume sutil em cada bloco, linha de
   base, fins de semana como faixas de calendário a 4%, e a data de
   cada dia aparece sob a coluna no hover enquanto o eixo fixo recua. */

.d-strips { gap: .5rem; height: 9rem; position: relative; }
@media (max-width: 46rem) { .d-strips { gap: 3px; height: 6.5rem; } }
.d-strips::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 16%, transparent);
}
.d-seg {
  opacity: 1; box-shadow: none; min-height: 4px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--md-sys-color-primary) 68%, transparent),
    color-mix(in srgb, var(--md-sys-color-primary) 46%, transparent));
}
.d-day--on .d-seg { background: var(--aurora-v); }
.d-day--vazio { height: 3px; }
.d-day--vazio .d-seg {
  height: 3px; min-height: 3px; border-radius: 2px;
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 22%, transparent);
}
.d-strips:hover .d-day { opacity: .38; }
.d-strips:hover .d-day--vazio { opacity: .5; }
.d-strips .d-day:hover { opacity: 1; }

/* Fins de semana: faixa atrás das colunas, descendo até o eixo. */
.d-fds { position: absolute; inset: -.6rem 0 -1.7rem; pointer-events: none; }
.d-fds__b {
  position: absolute; top: 0; bottom: 0; border-radius: 8px;
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 4.5%, transparent);
}

/* A data do dia, sob a coluna, só no hover — e o eixo fixo recua. */
.d-day::after {
  content: attr(data-d); position: absolute; top: 100%; left: 50%;
  transform: translate(-50%, .5rem);
  font-size: var(--t-11); font-weight: 700; letter-spacing: var(--tr-label);
  color: var(--md-sys-color-on-surface); white-space: nowrap;
  opacity: 0; transition: opacity var(--e-1); pointer-events: none;
}
.d-day:hover::after, .d-day:focus-visible::after { opacity: 1; }
.d-xaxis span { transition: opacity var(--e-1); }
.d-plot:hover + .d-xaxis span { opacity: .22; }

/* Pílulas de valor: a de hoje leva o ponteiro; a maior, o inverso. */
.d-strip__pill { padding: .25rem .55rem; }
.d-day--on .d-strip__pill { background: var(--wire-accent); color: var(--wire-on-accent); }
.d-xaxis { margin-top: .65rem; }

/* Cabeçalho de card quebra linha quando falta espaço: em 375px as
   pílulas "30 dias / 90 dias" estouravam pela direita. */
.d-card__top { flex-wrap: wrap; row-gap: .6rem; }
.d-card__top > div:first-child { flex: 1 1 14rem; }


/* ── Quinta passada: o herói como player, com tracklist ────────── */
/* A linha do espelho e o botão de ouvir eram dois objetos; agora são
   um — o player. O botão redondo, a linha das pautas como barra, a
   duração no fim. À direita, as 11 pautas como faixas de um disco,
   uma linha cada, com a duração prevista; o título inteiro vive no
   tooltip, e passar o ponteiro acende o bloco na linha. */

.d-hero { grid-template-columns: 1.02fr .98fr; gap: 2rem; }
.d-hero__lede { font-size: .9375rem; margin: .8rem 0 1.4rem; max-width: 48ch; }

.d-player { display: flex; align-items: center; gap: 1rem; margin-top: auto; padding-top: 1rem; }
.d-playbtn {
  width: 3.25rem; height: 3.25rem; flex: none; border: 0; border-radius: 50%;
  background: var(--wire-accent); color: var(--wire-on-accent);
  display: grid; place-items: center; cursor: pointer;
  transition: transform var(--e-1), filter var(--e-1);
}
.d-playbtn svg { width: 1.15rem; height: 1.15rem; fill: currentColor; margin-left: .15rem; }
.d-playbtn:hover, .d-playbtn:focus-visible { filter: brightness(1.06); transform: scale(1.05); }
.d-playbtn:active { transform: scale(.97); }
.d-player__corpo { flex: 1 1 auto; min-width: 0; }
.d-player__linha { display: flex; align-items: center; gap: .9rem; }
.d-player__linha .d-esp__l { flex: 1 1 auto; height: .5rem; }
.d-player__dur {
  flex: none; font-weight: 800; font-size: var(--t-14);
  font-variant-numeric: tabular-nums; letter-spacing: var(--tr-title);
}
.d-player .d-esp__rot { margin-top: .5rem; }
.d-esp__b:hover, .d-esp__b:focus-visible, .d-esp__b--foco { transform: scaleY(1.7); }

.d-track__cab { display: flex; justify-content: space-between; opacity: .72; margin-bottom: .35rem; }
.d-track { gap: 0; margin: 0; }
.d-track li {
  grid-template-columns: 1.35rem 1fr auto; gap: .55rem; align-items: baseline;
  padding: .43rem 0; margin: 0;
  border-top: 1px solid color-mix(in srgb, currentColor 11%, transparent);
  transition: background var(--e-1);
}
.d-track li:first-child { border-top: 0; }
.d-track__t {
  font-size: var(--t-13); font-weight: 500; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity var(--e-1);
}
.d-track__d { font-size: var(--t-12); font-weight: 600; opacity: .58; font-variant-numeric: tabular-nums; }
.d-track li:hover .d-track__d, .d-track li:focus-visible .d-track__d { opacity: .9; }
.d-track li:focus-visible { outline: none; }
.d-track li:focus-visible .d-track__t { text-decoration: underline; text-underline-offset: .2em; }
.d-hero__link { padding-top: 1rem; }

/* Saúde: área com fade em vez de bloco, e só o número do pior dia em vermelho. */
.d-spark--fade .d-spark__area { fill: url(#g-saude-area); opacity: 1; }
.d-pior { color: var(--md-sys-color-on-surface-variant); font-weight: 600; }
.d-pior b { color: var(--md-sys-color-error); font-weight: 800; }

@media (max-width: 62rem) {
  .d-hero__lede { max-width: none; }
}

/* Uma coluna abaixo de 62rem: a regra do player redeclarou as colunas
   do herói e passou por cima da quebra do e-tipo.css. */
@media (max-width: 62rem) { .d-hero { grid-template-columns: 1fr; } }

/* Faixa da tracklist responde ao ponteiro com um fundo de 6%. */
.d-track li { border-radius: 8px; margin: 0 -.5rem; padding: .43rem .5rem; }
.d-track li:hover, .d-track li:focus-visible {
  background: color-mix(in srgb, currentColor 7%, transparent);
}
.d-track li:hover + li { border-top-color: transparent; }

/* ============================================================
   As outras páginas — Edições, Espelho, Registro. Mesma língua:
   um plano de cor por página (o herói do espelho), listas com fio
   de 10%, pílulas, o trilho, a tracklist. Sem card invertido.
   ============================================================ */

a.d-round { text-decoration: none; }

/* ── Cabeçalho de página ─────────────────────────────────────── */
.d-pagecab {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; padding: .5rem .25rem 0;
}
.d-pagecab__t { font-size: var(--t-34); font-weight: 800; letter-spacing: var(--tr-display); }
.d-pagecab__l { margin: .35rem 0 0; color: var(--md-sys-color-on-surface-variant); max-width: 56ch; }
.d-pagecab__dir { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* Busca e seleção como pílulas */
.d-busca {
  display: inline-flex; align-items: center; gap: .55rem;
  height: 2.5rem; padding: 0 1rem 0 .9rem; min-width: 16rem;
  border-radius: var(--md-shape-full);
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
  transition: box-shadow var(--e-1), background var(--e-1);
}
.d-busca:focus-within { background: var(--md-sys-color-surface-container-high);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--wire-accent) 55%, transparent); }
.d-busca svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
.d-busca input {
  border: 0; background: transparent; outline: 0; flex: 1 1 auto; min-width: 0;
  color: var(--md-sys-color-on-surface); font: 500 var(--t-13)/1 var(--fam);
}
.d-busca input::placeholder { color: var(--md-sys-color-on-surface-variant); opacity: .8; }
.d-busca input::-webkit-search-cancel-button { -webkit-appearance: none; }
.d-sel {
  position: relative; display: inline-flex; align-items: center;
  height: 2.25rem; border-radius: var(--md-shape-full);
  border: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
}
.d-sel select {
  appearance: none; border: 0; background: transparent; outline: 0; cursor: pointer;
  padding: 0 2rem 0 .9rem; height: 100%; color: inherit;
  font: 600 var(--t-12)/1 var(--fam); letter-spacing: var(--tr-label);
}
.d-sel svg { position: absolute; right: .6rem; width: .9rem; height: .9rem; fill: none;
  stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.d-sel:focus-within { border-color: var(--wire-accent); }
.d-filtros { display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; padding: 0 .25rem; }
.d-filtros__g { display: flex; gap: .35rem; }
.d-vazio { color: var(--md-sys-color-on-surface-variant); padding: 2rem .25rem; text-align: center; }

/* ── Edições: a lista, por mês ───────────────────────────────── */
.d-lista { padding: .5rem 1.5rem 1.25rem; }
.d-mes {
  display: flex; justify-content: space-between; gap: 1rem;
  margin: 1.25rem 0 .35rem; padding: 0 .5rem;
  color: var(--md-sys-color-on-surface-variant);
}
.d-mes:first-child { margin-top: .75rem; }
.d-ed {
  display: grid; grid-template-columns: 3rem 1fr auto auto 2.5rem;
  align-items: center; gap: 0 1.25rem;
  padding: .85rem .5rem; margin: 0; border-radius: 12px;
  color: inherit; text-decoration: none;
  border-top: 1px solid color-mix(in srgb, currentColor 9%, transparent);
  transition: background var(--e-1);
}
.d-mes + .d-ed { border-top: 0; }
.d-ed:hover { background: color-mix(in srgb, currentColor 5%, transparent); }
.d-ed:hover + .d-ed { border-top-color: transparent; }
.d-ed__n {
  font-size: var(--t-21); font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--md-sys-color-on-surface-variant);
  text-align: right;
}
.d-ed--hoje .d-ed__n { color: var(--wire-accent); }
.d-ed__corpo { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.d-ed__t { font-size: var(--t-16); font-weight: 700; letter-spacing: var(--tr-title); line-height: 1.25;
  text-wrap: pretty; }
.d-ed__sub { font-size: var(--t-12); color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-ed__data, .d-ed__meta { display: flex; flex-direction: column; gap: .1rem; text-align: right;
  font-size: var(--t-12); color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }
.d-ed__data b, .d-ed__meta b { font-size: var(--t-13); font-weight: 700; color: var(--md-sys-color-on-surface);
  font-variant-numeric: tabular-nums; }
.d-ed__play {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant);
  transition: background var(--e-1), color var(--e-1), transform var(--e-1);
}
.d-ed__play svg { width: .9rem; height: .9rem; fill: currentColor; margin-left: .1rem; }
.d-ed:hover .d-ed__play { background: var(--wire-accent); color: var(--wire-on-accent); transform: scale(1.05); }
@media (max-width: 52rem) {
  .d-lista { padding: .25rem 1rem 1rem; }
  .d-ed { grid-template-columns: 2.25rem 1fr 2.5rem; grid-template-areas: "n corpo play" "n meta play"; gap: .35rem .75rem; }
  .d-ed__n { grid-area: n; align-self: start; }
  .d-ed__corpo { grid-area: corpo; }
  .d-ed__play { grid-area: play; }
  .d-ed__data, .d-ed__meta { grid-area: meta; flex-direction: row; gap: .5rem; text-align: left; }
  .d-ed__data { display: none; }
  .d-ed__sub { white-space: normal; }
}

/* ── Espelho ─────────────────────────────────────────────────── */
.d-esphero__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 2.5rem; align-items: end; flex: 1 1 auto; }
.d-esphero__t { font-size: var(--t-46); max-width: 24ch; }
.d-esphero__player { align-self: end; }
.d-esphero .d-player { margin-top: 0; padding-top: 0; }
.d-sin__btn { background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  padding: 0; margin: 0 0 .25rem; cursor: pointer; font-family: var(--fam); align-self: flex-start; }
.d-sin { margin-bottom: .9rem; }
@media (max-width: 62rem) {
  .d-esphero__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .d-esphero__t { font-size: var(--t-34); }
}

/* A tracklist à direita, grudada; os cards à esquerda. */
.d-toc { order: 2; }
.d-pautas { order: 1; display: grid; gap: .875rem; align-content: start; }
.d-toc__card { position: sticky; top: 5.5rem; padding: 1.25rem 1.5rem; }
.d-toc__lista { list-style: none; padding: 0; }
.d-toc__lista li { display: block; padding: 0; margin: 0; border: 0; }
.d-toc__l {
  display: grid; grid-template-columns: 1.35rem 1fr auto; gap: .55rem; align-items: baseline;
  padding: .43rem .5rem; margin: 0 -.5rem; border-radius: 8px;
  color: inherit; text-decoration: none;
  border-top: 1px solid color-mix(in srgb, currentColor 11%, transparent);
  transition: background var(--e-1), color var(--e-1);
}
.d-toc__lista li:first-child .d-toc__l { border-top: 0; }
.d-toc__l:hover { background: color-mix(in srgb, currentColor 6%, transparent); }
.d-toc__l--atual { background: color-mix(in srgb, var(--wire-accent) 14%, transparent); }
.d-toc__l--atual .d-pauta__n { color: var(--wire-accent); opacity: 1; }
.d-toc__l--atual .d-track__t { font-weight: 700; }
.d-toc__nota { display: inline-block; margin-top: 1rem; padding-top: 0; }
@media (max-width: 68rem) {
  .d-toc { order: 1; } .d-pautas { order: 2; }
  .d-toc__card { position: static; }
}

.d-pauta-card { padding: 1.5rem 1.75rem; scroll-margin-top: 5.5rem; }
.d-pauta-card__cab { display: flex; gap: 1rem; align-items: flex-start; }
.d-pauta-card__n {
  flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant);
  font-weight: 800; font-size: var(--t-13); font-variant-numeric: tabular-nums;
}
.d-pauta-card:first-child .d-pauta-card__n { background: var(--aurora); color: var(--wire-on-accent); }
.d-pauta-card__tit { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.d-pauta-card__h { font-size: var(--t-21); line-height: 1.22; text-wrap: pretty; }
.d-pauta-card__dur { color: var(--md-sys-color-on-surface-variant); }
.d-pauta-card__ang { font-size: .9375rem; margin: 1rem 0 0; max-width: 62ch; color: var(--md-sys-color-on-surface); opacity: .9; }
.d-callouts { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .5rem; max-width: 62ch; }
.d-callouts li {
  position: relative; padding-left: 1.1rem; font-size: var(--t-13); font-weight: 500; line-height: 1.45;
}
.d-callouts li::before {
  content: ""; position: absolute; left: 0; top: .6em; width: .45rem; height: .45rem; border-radius: 50%;
  background: color-mix(in srgb, var(--wire-accent) 70%, transparent);
}
.d-fontes { margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent); display: grid; gap: .35rem; }
.d-fontes__rot { color: var(--md-sys-color-on-surface-variant); margin-bottom: .15rem; }
.d-fonte {
  display: grid; grid-template-columns: 11rem 1fr auto; gap: .9rem; align-items: baseline;
  padding: .5rem .6rem; margin: 0 -.6rem; border-radius: 10px;
  color: inherit; text-decoration: none; transition: background var(--e-1);
}
.d-fonte:hover { background: color-mix(in srgb, currentColor 5%, transparent); }
.d-fonte__pub { font-size: var(--t-12); font-weight: 700; letter-spacing: var(--tr-label);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-fonte__t { font-size: var(--t-13); font-weight: 500; line-height: 1.35; min-width: 0; }
.d-fonte__meta { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--t-11);
  color: var(--md-sys-color-on-surface-variant); white-space: nowrap; font-variant-numeric: tabular-nums; }
.d-fonte__meta svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  opacity: 0; transition: opacity var(--e-1); }
.d-fonte:hover .d-fonte__meta svg { opacity: .9; }
@media (max-width: 46rem) {
  .d-pauta-card { padding: 1.25rem; }
  .d-fonte { grid-template-columns: 1fr; gap: .15rem; }
}
.d-nota__corpo { margin: .5rem 0 0; max-width: 70ch; line-height: 1.55; }

/* ── Registro ────────────────────────────────────────────────── */
.d-cycle { padding: 1.1rem 1.5rem 1.25rem; }
.d-cycle__cab {
  display: grid; grid-template-columns: 6.5rem 1fr auto; gap: 1.25rem; align-items: center;
  cursor: pointer; margin: 0 -1.5rem; padding: .4rem 1.5rem .9rem; border-radius: 16px 16px 0 0;
  transition: background var(--e-1);
}
.d-cycle__cab:hover { background: color-mix(in srgb, currentColor 3%, transparent); }
.d-cycle__cab:focus-visible { outline: 2px solid var(--wire-accent); outline-offset: -2px; }
.d-cycle__quando { display: flex; flex-direction: column; gap: .1rem; }
.d-cycle__quando b { font-size: var(--t-14); font-weight: 800; letter-spacing: var(--tr-title); }
.d-cycle__quando span { font-size: var(--t-12); color: var(--md-sys-color-on-surface-variant); font-variant-numeric: tabular-nums; }
.d-cycle__resumo { min-width: 0; }
.d-cycle__resumo h2 { display: flex; gap: .5rem; align-items: baseline; min-width: 0; flex-wrap: wrap; }
.d-cycle__ep { color: inherit; text-decoration: none; }
a.d-cycle__ep:hover { text-decoration: underline; text-underline-offset: .2em; }
.d-cycle__tit { font-weight: 500; font-size: var(--t-14); color: var(--md-sys-color-on-surface-variant);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch; }
.d-cycle__falhas { color: var(--md-sys-color-error); font-weight: 700; }
.d-cycle__dir { display: flex; align-items: center; gap: .6rem; }
.d-chev { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  color: var(--md-sys-color-on-surface-variant); transition: transform var(--e-2); }
.d-chev svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.is-aberto .d-chev { transform: rotate(180deg); }
.d-cycle .d-rail { margin: .25rem 0 0; }
.d-cycle .d-rail__seg { height: 1.75rem; }
.d-rail__seg--erro { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); opacity: 1; }
.d-runs { margin-top: 1rem; display: grid; gap: .1rem; }
.d-run {
  display: grid; grid-template-columns: .5rem 15rem 3.5rem 4.5rem 5rem 1fr; gap: .9rem; align-items: baseline;
  padding: .5rem .25rem; border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent);
  font-size: var(--t-13);
}
.d-run__dot { align-self: center; color: var(--wire-ok); }
.d-run--falhou .d-run__dot { color: var(--md-sys-color-error); }
.d-run--skipped .d-run__dot, .d-run--interrupted .d-run__dot { color: var(--md-sys-color-outline); }
.d-run__fase { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.d-run__fase b { font-weight: 700; }
.d-run__modelo { font-size: var(--t-11); color: var(--md-sys-color-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-run__h, .d-run__d, .d-run__c { color: var(--md-sys-color-on-surface-variant); text-align: right; white-space: nowrap; }
.d-run__d { color: var(--md-sys-color-on-surface); }
.d-run__nota { color: var(--md-sys-color-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-run--falhou .d-run__fase b { color: var(--md-sys-color-error); }
.d-erro {
  margin: .1rem 0 .5rem 1.4rem; padding: .7rem .9rem; border-radius: 10px;
  background: color-mix(in srgb, var(--md-sys-color-error) 9%, transparent);
  color: var(--md-sys-color-on-surface); font: 500 var(--t-12)/1.45 var(--fam);
  white-space: pre-wrap; word-break: break-word; max-width: 80ch;
  border-left: 3px solid color-mix(in srgb, var(--md-sys-color-error) 70%, transparent);
}
@media (max-width: 52rem) {
  .d-cycle__cab { grid-template-columns: 1fr auto; gap: .5rem 1rem; }
  .d-cycle__quando { flex-direction: row; gap: .5rem; align-items: baseline; grid-column: 1 / -1; }
  .d-cycle__tit { white-space: normal; max-width: none; }
  .d-run { grid-template-columns: .5rem 1fr auto auto; }
  .d-run__c, .d-run__nota { display: none; }
}

/* `hidden` tem que vencer qualquer `display` de classe — sem isto, os
   ciclos recolhidos e as linhas filtradas continuavam na tela. */
[hidden] { display: none !important; }
a.d-esp__b { text-decoration: none; }
/* No celular o cabeçalho do ciclo fica só com "Edição N": o título
   espremido virava quatro linhas ao lado da pílula. */
@media (max-width: 52rem) { .d-cycle__tit { display: none; } }

/* ── Edições, segunda versão: a de hoje em destaque, o resto enxuto ── */
/* O owner: "muito texto empilhado". Saiu a linha "Abre com", saiu o
   horário; ficou número, título, dia, duração e o botão. Dez por vez. */
.d-lista { padding: .25rem 1.5rem 1rem; }
.d-ed { grid-template-columns: 3rem 1fr auto auto 2.25rem; gap: 0 1.25rem; padding: .7rem .5rem; }
.d-ed__t { font-size: var(--t-16); font-weight: 600; letter-spacing: var(--tr-title); line-height: 1.3; min-width: 0; }
.d-ed__data, .d-ed__dur {
  display: block; font-size: var(--t-12); font-weight: 600; white-space: nowrap;
  color: var(--md-sys-color-on-surface-variant); font-variant-numeric: tabular-nums; text-align: right;
}
.d-ed__dur { color: var(--md-sys-color-on-surface); min-width: 4rem; }
.d-ed__play { width: 2.25rem; height: 2.25rem; }
.d-lista__pe {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem .5rem .25rem; margin-top: .25rem;
  border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  color: var(--md-sys-color-on-surface-variant);
}
@media (max-width: 52rem) {
  .d-lista { padding: .25rem 1rem .75rem; }
  .d-ed { grid-template-columns: 2.25rem 1fr 2.25rem; grid-template-areas: "n t play" "n meta play"; gap: .25rem .75rem; }
  .d-ed__t { grid-area: t; }
  .d-ed__data, .d-ed__dur { grid-area: meta; display: inline; text-align: left; }
  .d-ed__data { display: block; }
  .d-ed__data::after { content: ""; }
  .d-ed__dur { display: none; }
}

/* ── A capa: o número é a capa ───────────────────────────────── */
/* A produção gera um PNG com o número gigante; aqui a mesma ideia em
   CSS, na paleta atual. É o objeto que dá matéria ao destaque, e a
   miniatura que dá ritmo à lista — como num app de podcast. */
.d-capa {
  position: relative; display: grid; place-items: center; flex: none;
  background: var(--wire-capa-bg); color: var(--wire-capa-fg);
  font-variant-numeric: tabular-nums; overflow: hidden;
}
.d-capa--g { width: 13rem; aspect-ratio: 1; border-radius: 24px; }
.d-capa--g .d-capa__n { font-size: 5.75rem; font-weight: 800; letter-spacing: -.07em; line-height: 1; }
.d-capa__w { position: absolute; top: .9rem; left: 1.05rem; font-weight: 800; font-size: var(--t-14); letter-spacing: -.04em; }
.d-capa__fio { position: absolute; top: 1.15rem; right: 1.05rem; width: 2rem; height: .35rem; border-radius: 999px; background: var(--aurora); }
.d-capa__d { position: absolute; bottom: .85rem; left: 0; right: 0; text-align: center;
  font-size: var(--t-11); font-weight: 700; letter-spacing: var(--tr-label); opacity: .72; }
.d-capa--p {
  width: 2.75rem; aspect-ratio: 1; border-radius: 10px;
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface);
  transition: background var(--e-1), color var(--e-1), transform var(--e-1);
}
.d-capa--p .d-capa__n { font-size: var(--t-14); font-weight: 800; letter-spacing: -.03em; }

/* O destaque: capa à esquerda, texto e player à direita. */
.d-destaque { display: grid; grid-template-columns: 13rem 1fr; gap: 2.25rem; align-items: stretch; flex: 1 1 auto; }
.d-destaque__texto { display: flex; flex-direction: column; min-width: 0; }
.d-destaque__t { font-size: var(--t-40); max-width: 22ch; margin-top: .1rem; }
.d-destaque .d-hero__lede { max-width: 58ch; margin-bottom: 1.25rem; }
.d-destaque__pe { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.d-destaque__pe .d-player { margin-top: 0; padding-top: 0; flex: 1 1 24rem; }
.d-destaque__pe .d-hero__link { margin-top: 0; padding-top: 0; flex: none; }
@media (max-width: 62rem) {
  .d-destaque { grid-template-columns: 1fr; gap: 1.25rem; }
  .d-capa--g { width: 9rem; }
  .d-capa--g .d-capa__n { font-size: 4rem; }
  .d-destaque__t { font-size: var(--t-34); }
}

/* Linhas com miniatura e fio de duração. */
.d-ed { grid-template-columns: 2.75rem 1fr auto auto 2.25rem; align-items: center; }
.d-ed__corpo { min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.d-ed__fio { display: block; height: 3px; border-radius: 999px; max-width: 18rem;
  background: color-mix(in srgb, var(--md-sys-color-primary) 38%, transparent);
  transition: background var(--e-1); }
.d-ed__fio--max { background: var(--aurora); }
.d-ed:hover .d-ed__fio { background: color-mix(in srgb, var(--md-sys-color-primary) 70%, transparent); }
.d-ed:hover .d-ed__fio--max { background: var(--aurora); }
.d-ed:hover .d-capa--p { background: var(--wire-accent); color: var(--wire-on-accent); transform: scale(1.04); }
@media (max-width: 52rem) {
  .d-ed { grid-template-columns: 2.75rem 1fr 2.25rem; grid-template-areas: "n t play" "n meta play"; }
  .d-ed__corpo { grid-area: t; }
}
.d-destaque__pe .d-player { flex: 0 1 30rem; }

/* Refinamento de 12/09: validado em captura de Edições antes de propagar. O casco passa a
   organizar a tela; bordas discretas substituem sombras pesadas. */
:where(body) .shell { max-width: 1440px; margin: 0 auto; padding: 0 2.5rem 3rem; border-radius: 0; background: var(--md-sys-color-surface); }
:where(body) .d-top { margin: 0 -2.5rem 2rem; padding: 1rem 2.5rem; border-radius: 0; background: var(--md-sys-color-surface); border-bottom: 1px solid var(--md-sys-color-outline-variant); }
:where(body) .d-top > div { width: 100%; }
:where(body) .d-top--fixo { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
:where(body) .d-top__right { gap: .5rem; margin-left: auto; }
:where(body) .d-round { background: transparent; width: 2.5rem; height: 2.5rem; }
:where(body) .d-round:hover { background: var(--md-sys-color-surface-container-high); }
:where(body) .d-grid { gap: 1.25rem; }
:where(body) .d-card { box-shadow: none; border-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 65%, transparent); border-radius: 18px; }
:where(body) .d-card:not(.d-card--brand) { background: var(--md-sys-color-surface-container-low); }
:where(body) .d-card--brand { border-radius: 24px; }
:where(body) .d-pagecab { padding: .25rem 0 .75rem; }
:where(body) .d-pagecab__t { font-size: 2.25rem; letter-spacing: -.045em; }
:where(body) .d-pagecab__l { font-weight: 400; font-size: .875rem; max-width: 66ch; }
:where(body) .d-busca { border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px; height: 2.75rem; background: var(--md-sys-color-surface); }
:where(body) a.d-esp__b { color: inherit; }
:where(body) .d-hero__lede { font-weight: 400; line-height: 1.65; opacity: .9; }
:where(body) :is(a, button, select):focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 4px; }
:where(body) .d-card--brand :is(a, button):focus-visible { outline-color: currentColor; }
@media (max-width: 46rem) {
  :where(body) .shell { padding: 0 1rem 2rem; margin: 0; }
  :where(body) .d-top { margin: 0 -1rem 1.25rem; padding: .75rem 1rem; }
  :where(body) .d-top__right { gap: .15rem; }
  :where(body) .d-top__hora { display: none; }
  :where(body) .d-status { font-size: .65rem; padding: 0 .6rem; }
  :where(body) .d-navpill { justify-content: center; }
  :where(body) .d-navpill a { flex: 1; justify-content: center; }
  :where(body) .d-pagecab__dir { width: 100%; }
  :where(body) .d-busca { width: 100%; min-width: 0; }
}

/* Edições: capa quadrada, título com largura de leitura e player ancorado.
   O fio passa a ter uma escala fixa: antes max-width achatava os valores. */
[data-page="edicoes"] .d-esphero { padding: 2rem; }
[data-page="edicoes"] .d-destaque { grid-template-columns: 15rem minmax(0,1fr); gap: 2.5rem; align-items: center; }
[data-page="edicoes"] .d-capa--g { width: 15rem; height: 15rem; align-self: center; border-radius: 14px; border: 1px solid color-mix(in srgb,currentColor 12%,transparent); }
[data-page="edicoes"] .d-capa--g .d-capa__n { font-size: 7rem; }
[data-page="edicoes"] .d-destaque__t { font-size: clamp(1.8rem,3.1vw,2.75rem); line-height: 1.12; max-width: 30ch; letter-spacing: -.045em; }
[data-page="edicoes"] .d-destaque .d-hero__lede { max-width: 68ch; font-size: .9rem; margin: 1rem 0 1.5rem; }
[data-page="edicoes"] .d-destaque__pe { border-top: 1px solid color-mix(in srgb,currentColor 20%,transparent); padding-top: 1.25rem; gap: 1rem; }
[data-page="edicoes"] .d-destaque__pe .d-player { flex: 1 1 24rem; }
[data-page="edicoes"] .d-destaque__pe .d-hero__link { font-size: .75rem; }
[data-page="edicoes"] .d-acervo__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.5rem .5rem 1rem; }
[data-page="edicoes"] .d-acervo__cab > span { color: var(--md-sys-color-on-surface-variant); }
[data-page="edicoes"] .d-mes { padding: .85rem .5rem; margin: 0; border-top: 1px solid var(--md-sys-color-outline-variant); }
[data-page="edicoes"] .d-ed { padding: 1rem .5rem; grid-template-columns: 2.75rem minmax(0,1fr) 5rem 4rem 2.25rem; gap: 1rem; }
[data-page="edicoes"] .d-ed__t { line-height: 1.45; font-weight: 650; }
[data-page="edicoes"] .d-ed__fio { width: 8rem; max-width: 100%; height: 2px; background: color-mix(in srgb,var(--md-sys-color-primary) 10%,transparent); margin-top: .25rem; }
[data-page="edicoes"] .d-ed__fio::before { content: ""; display: block; width: var(--duracao); height: 100%; background: color-mix(in srgb,var(--md-sys-color-primary) 50%,transparent); }
[data-page="edicoes"] .d-ed__fio--max::before { background: var(--aurora); }
[data-page="edicoes"] .d-ed__play { background: transparent; }
[data-page="edicoes"] .d-ed__play svg { fill: none; stroke: currentColor; stroke-width: 1.6; width: 1rem; height: 1rem; }
[data-page="edicoes"] .d-ed-vazio { text-align: center; padding: 2rem 1rem; color: var(--md-sys-color-on-surface-variant); }
@media (max-width: 62rem) {
  [data-page="edicoes"] .d-destaque { grid-template-columns: 10rem minmax(0,1fr); gap: 1.5rem; }
  [data-page="edicoes"] .d-capa--g { width: 10rem; height: 10rem; }
  [data-page="edicoes"] .d-capa--g .d-capa__n { font-size: 5rem; }
}
@media (max-width: 46rem) {
  [data-page="edicoes"] .d-esphero { padding: 1.25rem; }
  [data-page="edicoes"] .d-destaque { grid-template-columns: 1fr; gap: 1.25rem; }
  [data-page="edicoes"] .d-capa--g { width: 7rem; height: 7rem; border-radius: 10px; }
  [data-page="edicoes"] .d-capa--g .d-capa__n { font-size: 3.5rem; }
  [data-page="edicoes"] .d-capa__d { font-size: .5rem; }
  [data-page="edicoes"] .d-capa__w { top: .65rem; left: .7rem; font-size: .65rem; }
  [data-page="edicoes"] .d-capa__fio { top: .9rem; right: .7rem; width: 1.25rem; height: 3px; }
  [data-page="edicoes"] .d-destaque__t { font-size: 1.8rem; }
  [data-page="edicoes"] .d-acervo__cab { display: block; padding: 1rem 0; }
  [data-page="edicoes"] .d-acervo__cab > span { display: block; margin-top: .3rem; }
  [data-page="edicoes"] .d-ed { grid-template-columns: 2.75rem minmax(0,1fr) auto; grid-template-areas: "n t t" "n meta dur"; gap: .3rem .75rem; }
  [data-page="edicoes"] .d-capa--p { grid-area: n; }
  [data-page="edicoes"] .d-ed__data { grid-area: meta; font-size: .7rem; }
  [data-page="edicoes"] .d-ed__dur { display: block; grid-area: dur; font-size: .7rem; }
  [data-page="edicoes"] .d-ed__play { display: none; }
  [data-page="edicoes"] .d-ed__t { font-size: .875rem; }
  [data-page="edicoes"] .d-lista__pe { gap: .5rem; padding: 1rem 0 .5rem; }
}

/* Mesma estrutura, proporções próprias: Espelho privilegia leitura;
   Registro deixa dados operacionais alinhados e não os esconde no celular. */
.d-voltar { color: var(--md-sys-color-on-surface-variant); text-decoration: none; padding: .25rem 0; }
.d-voltar:hover { color: var(--md-sys-color-primary); }
[data-page="espelho"] .d-esphero { padding: 2rem; }
[data-page="espelho"] .d-esphero__grid { grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); gap: 3rem; align-items: center; }
[data-page="espelho"] .d-esphero__t { font-size: clamp(2rem,3.5vw,3rem); line-height: 1.12; max-width: 26ch; }
[data-page="espelho"] .d-esphero__player { display: grid; gap: 1.5rem; align-self: center; }
[data-page="espelho"] .d-capa--g { width: 11rem; height: 11rem; border-radius: 14px; justify-self: center; }
[data-page="espelho"] .d-capa--g .d-capa__n { font-size: 5.5rem; }
[data-page="espelho"] .d-hero__lede { max-width: 64ch; font-size: .9375rem; }
.d-pauta-card { padding: 2rem; scroll-margin-top: 7rem; }
.d-pauta-card__h { font-size: 1.375rem; line-height: 1.35; }
.d-pauta-card__ang { line-height: 1.75; font-weight: 400; }
.d-callouts { gap: .75rem; }
.d-callouts li { line-height: 1.65; }
.d-toc__l { padding: .7rem .5rem; align-items: start; }
.d-toc__l .d-track__t { white-space: normal; line-height: 1.45; }
.d-toc__card { top: 6rem; }
.d-fontes { margin-top: 1.5rem; }
.d-fonte { grid-template-columns: 8rem minmax(0,1fr) auto; }
.d-fonte__meta svg { opacity: .6; }
.d-filtros { padding: .25rem 0 .75rem; gap: .75rem; }
.d-cycle { padding: 1.4rem 1.5rem; }
.d-cycle__cab { grid-template-columns: 6rem minmax(0,1fr) auto; }
.d-cycle__tit { max-width: 55ch; }
.d-run { grid-template-columns: .5rem minmax(10rem,1.1fr) 4rem 4.5rem 5rem minmax(8rem,1fr); padding: .75rem .25rem; }
[data-page="status"] .d-hero__t { font-size: clamp(2rem,3.1vw,2.75rem); line-height: 1.12; }
[data-page="status"] .d-hero__lede { font-size: .9375rem; }
[data-page="status"] .d-card__top { margin-bottom: 1rem; }
@media (max-width: 68rem) {
  .d-toc { grid-column: span 12; }
  .d-toc__lista { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
}
@media (max-width: 46rem) {
  [data-page="espelho"] .d-esphero { padding: 1.25rem; }
  [data-page="espelho"] .d-esphero__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  [data-page="espelho"] .d-esphero__t { font-size: 1.9rem; }
  [data-page="espelho"] .d-esphero__player { border-top: 1px solid color-mix(in srgb,currentColor 20%,transparent); padding-top: 1rem; }
  [data-page="espelho"] .d-capa--g { display: none; }
  .d-toc__lista { grid-template-columns: 1fr; }
  .d-toc__card { padding: 1.25rem; }
  .d-pauta-card { padding: 1.25rem; scroll-margin-top: 10rem; }
  .d-pauta-card__h { font-size: 1.125rem; }
  .d-fonte { grid-template-columns: 1fr; gap: .4rem; }
  .d-fonte__pub { white-space: normal; }
  .d-cycle { padding: 1rem; }
  .d-cycle__cab { grid-template-columns: minmax(0,1fr) auto; margin: 0 -1rem; padding: .25rem 1rem .75rem; gap: .5rem; }
  .d-cycle__quando { grid-column: 1/-1; }
  .d-cycle__resumo .ty-label { line-height: 1.6; }
  .d-run { grid-template-columns: .5rem minmax(0,1fr) auto auto; gap: .35rem .6rem; }
  .d-run__c { display: block; grid-column: 3/5; font-size: .7rem; }
  .d-run__nota { display: block; grid-column: 2/5; white-space: normal; font-size: .75rem; }
  .d-filtros .d-busca { flex-basis: 100%; }
}
/* O índice precisa caber na janela quando fica fixo, inclusive com títulos
   completos. Em telas menores volta ao fluxo normal do documento. */
@media (min-width: 68.01rem) {
  .d-toc__card { max-height: calc(100dvh - 7rem); overflow-y: auto; scrollbar-width: thin; }
}
/* Áreas de toque dos blocos excedem a marca visual sem mudar o dado. */
.d-esp__b { position: relative; }
.d-esp__b::before { content: ""; position: absolute; inset: -8px 0; }

/* Identidade Wire — "o fio vira sinal". Proposta em Edições, antes de
   propagar. Um w contínuo, em uma cor, é a forma de origem: marca, capa
   e finais arredondados. A referência DOMO/Gemini orienta a coerência de
   forma; o Wire preserva suas cores, seu número-capa e suas pautas reais. */
body .d-brand { display: flex; gap: 0; flex-direction: column; align-items: flex-start; margin-right: 1.5rem; }
.w-marca { display: flex; align-items: center; gap: .45rem; }
.w-sinal { width: 2.75rem; height: 2rem; display: block; flex: none; }
.w-marca > .w-sinal { color: var(--md-sys-color-primary); }
.w-nome { font-family: var(--fam); font-size: 2rem; font-weight: 750; letter-spacing: -.085em; line-height: 1; }
.w-assinatura { font-size: .625rem; font-weight: 500; letter-spacing: .005em; color: var(--md-sys-color-on-surface-variant); margin: .45rem 0 0 .15rem; }
body .d-top { border-bottom-color: transparent; margin-bottom: 1.75rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }
body .d-top--fixo { border-bottom-color: var(--md-sys-color-outline-variant); }
[data-page="edicoes"] .d-navpill { padding: .3rem; }
[data-page="edicoes"] .d-pagecab__t { font-size: 2.5rem; font-weight: 700; letter-spacing: -.055em; }
[data-page="edicoes"] .d-pagecab__l { margin-top: .6rem; }
[data-page="edicoes"] .d-busca { border-radius: 999px; background: var(--md-sys-color-surface-container-low); border-color: transparent; }
[data-page="edicoes"] .w-edicao { border-radius: 32px; padding: 2.5rem; }
[data-page="edicoes"] .d-destaque { grid-template-columns: minmax(0,1fr) 19rem; gap: 3rem; align-items: center; }
[data-page="edicoes"] .d-destaque__texto { order: 1; }
.w-noar { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem; }
.w-noar b { font-weight: 700; }
.w-noar > span:last-child { opacity: .78; border-left: 1px solid color-mix(in srgb,currentColor 30%,transparent); padding-left: .75rem; margin-left: .15rem; }
[data-page="edicoes"] .d-destaque__t { font-size: clamp(2rem,3.65vw,3.15rem); max-width: 26ch; letter-spacing: -.055em; line-height: 1.13; }
[data-page="edicoes"] .d-destaque .d-hero__lede { margin: 1.15rem 0 0; max-width: 64ch; font-size: .9rem; line-height: 1.75; }
[data-page="edicoes"] .d-destaque__pe { margin-top: 2.2rem; padding-top: 1.5rem; }
[data-page="edicoes"] .d-destaque__pe .d-player { flex: 1 1 30rem; max-width: 48rem; }
[data-page="edicoes"] .d-playbtn { width: 3.75rem; height: 3.75rem; border-radius: 1.4rem; transition: border-radius 250ms, transform 200ms; }
[data-page="edicoes"] .d-playbtn:hover { border-radius: 50%; }
[data-page="edicoes"] .d-player__linha .d-esp__l { height: .45rem; gap: 4px; }
[data-page="edicoes"] .d-esp__rot { opacity: .86; line-height: 1.6; }
.w-espelho { display: inline-flex; align-items: center; gap: 1rem; color: inherit; text-decoration: none; font-size: .8125rem; font-weight: 600; }
.w-espelho > span { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px solid color-mix(in srgb,currentColor 35%,transparent); border-radius: 50%; transition: background 180ms, transform 180ms; }
.w-espelho svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.w-espelho:hover > span { background: color-mix(in srgb,currentColor 12%,transparent); transform: translateX(3px); }

/* A capa tem uma face e uma lombada tonal. Nenhum brilho ou imagem
   genérica: a matéria é criada pelo recorte, pelo contorno e pela escala. */
.w-capa { position: relative; order: 2; width: 18rem; height: 18rem; margin: .5rem .75rem .75rem 0; justify-self: center; isolation: isolate; }
.w-capa::before { content: ""; position: absolute; inset: 0; border-radius: 24px 64px 24px 24px; background: color-mix(in srgb,var(--wire-capa-bg) 65%,var(--wire-capa-fg)); transform: translate(9px,9px) rotate(3deg); z-index: -1; }
.w-capa__face { position: absolute; inset: 0; overflow: hidden; border-radius: 24px 64px 24px 24px; background: var(--wire-capa-bg); color: var(--wire-capa-fg); padding: 1.4rem 1.5rem; display: flex; flex-direction: column; }
.w-capa__marca { display: flex; gap: .3rem; align-items: center; font-size: 1.2rem; font-weight: 750; letter-spacing: -.065em; z-index: 1; }
.w-capa__marca .w-sinal { width: 2rem; height: 1.5rem; }
.w-capa__ed { margin-top: 1.45rem; font-size: .625rem; font-weight: 600; opacity: .7; z-index: 1; }
.w-capa__n { font-size: 8.3rem; font-weight: 800; letter-spacing: -.095em; line-height: .98; margin-left: -.055em; z-index: 1; }
.w-capa__rodape { display: flex; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: .7rem; border-top: 1px solid color-mix(in srgb,currentColor 22%,transparent); font-size: .625rem; font-weight: 650; z-index: 1; }
.w-capa__traco { position: absolute; inset: 25% -30% 0 35%; opacity: .08; transform: rotate(-12deg); pointer-events: none; }
.w-capa__traco .w-sinal { width: 100%; height: 100%; }
.w-capa__traco path { stroke-width: 1; }

/* As miniaturas são pequenas capas da mesma família. O fio das durações
   termina em um ponto, repetindo a ideia de sinal sem fabricar uma onda. */
.w-mini { width: 2.9rem; height: 3.2rem; border-radius: 9px 17px 9px 9px; display: flex; align-items: center; justify-content: center; position: relative; background: color-mix(in srgb,var(--md-sys-color-primary) 11%,var(--md-sys-color-surface)); color: var(--md-sys-color-primary); font-size: 1rem; font-weight: 800; letter-spacing: -.05em; transition: border-radius 200ms, background 200ms; }
.w-mini i { position: absolute; bottom: 7px; left: 10px; right: 10px; height: 1px; background: currentColor; opacity: .25; }
[data-page="edicoes"] .d-lista { background: transparent; border: 0; border-radius: 0; padding: .25rem 0 1rem; }
[data-page="edicoes"] .d-acervo__cab { padding: 1.1rem 0 1.3rem; }
[data-page="edicoes"] .d-acervo__cab h2 { font-size: 1.4rem; font-weight: 700; letter-spacing: -.04em; }
[data-page="edicoes"] .d-mes { padding: 1rem .75rem; }
[data-page="edicoes"] .d-ed { padding: 1.05rem .75rem; border-radius: 0; gap: 1.5rem; grid-template-columns: 2.9rem minmax(0,1fr) 5rem 4rem 2.25rem; }
[data-page="edicoes"] .d-ed:hover { border-radius: 14px; background: var(--md-sys-color-surface-container-low); }
[data-page="edicoes"] .d-ed:hover .w-mini { background: var(--md-sys-color-primary-container); border-radius: 12px; }
[data-page="edicoes"] .d-ed__t { font-weight: 600; letter-spacing: -.025em; }
[data-page="edicoes"] .d-ed__fio { width: 6rem; background: none; }
[data-page="edicoes"] .d-ed__fio::before { border-radius: 999px; }
[data-page="edicoes"] .d-ed__fio::after { content: ""; position: relative; display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--md-sys-color-primary); top: -3px; left: var(--duracao); transform: translateX(-2px); }
@media (max-width: 62rem) {
  body .d-brand { margin-right: .5rem; }
  [data-page="edicoes"] .d-destaque { grid-template-columns: minmax(0,1fr) 14rem; gap: 2rem; }
  .w-capa { width: 13rem; height: 14.5rem; }
  .w-capa__face { padding: 1rem; }
  .w-capa__n { font-size: 6.3rem; }
  .w-capa__ed { margin-top: 1.1rem; }
}
@media (max-width: 46rem) {
  body .d-top { padding: .8rem 1rem; margin-bottom: 1.25rem; }
  body .d-brand { margin: 0; }
  .w-marca > .w-sinal { width: 2.1rem; height: 2rem; }
  .w-nome, .w-assinatura { display: none; }
  [data-page="edicoes"] .d-pagecab__t { font-size: 2.1rem; }
  [data-page="edicoes"] .w-edicao { padding: 1.25rem; border-radius: 24px; }
  [data-page="edicoes"] .d-destaque { grid-template-columns: minmax(0,1fr); gap: 1.75rem; }
  .w-capa { order: 0; justify-self: start; width: 9rem; height: 9rem; margin: .25rem 0 .25rem; }
  .w-capa::before, .w-capa__face { border-radius: 14px 32px 14px 14px; }
  .w-capa::before { transform: translate(5px,5px) rotate(3deg); }
  .w-capa__face { padding: .75rem; }
  .w-capa__marca { font-size: .9rem; }
  .w-capa__marca .w-sinal { width: 1.4rem; height: 1rem; }
  .w-capa__ed { display: none; }
  .w-capa__n { font-size: 4.2rem; margin-top: .25rem; }
  .w-capa__rodape { font-size: .48rem; padding-top: .3rem; gap: .3rem; }
  .w-noar { gap: .4rem; margin-bottom: 1rem; font-size: .65rem; }
  .w-noar > span:last-child { padding-left: .5rem; margin-left: 0; }
  [data-page="edicoes"] .d-destaque__t { font-size: 1.85rem; letter-spacing: -.045em; }
  [data-page="edicoes"] .d-destaque .d-hero__lede { font-size: .85rem; line-height: 1.65; }
  [data-page="edicoes"] .d-destaque__pe { margin-top: 1.5rem; padding-top: 1.1rem; gap: 1.25rem; }
  [data-page="edicoes"] .d-playbtn { width: 3rem; height: 3rem; border-radius: 1.1rem; }
  .w-espelho { width: 100%; justify-content: space-between; }
  [data-page="edicoes"] .d-acervo__cab { padding-left: .25rem; }
  [data-page="edicoes"] .d-ed { grid-template-columns: 2.9rem minmax(0,1fr) auto; grid-template-areas: "n t t" "n meta dur"; gap: .4rem .75rem; padding: 1rem .25rem; }
  .w-mini { grid-area: n; align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  [data-page="edicoes"] .d-playbtn, .w-espelho > span, .w-mini { transition: none; }
}

/* Após a primeira captura, a assinatura passa ao casco das quatro telas.
   Espelho usa a mesma capa em tamanho menor. O player compartilha o raio
   do objeto; apenas Edições muda a estrutura da lista nesta proposta. */
.d-playbtn { border-radius: 1.25rem; transition: border-radius 250ms, transform 200ms; }
.d-playbtn:hover { border-radius: 50%; }
[data-page="espelho"] .w-capa { order: 0; width: 13.5rem; height: 14.5rem; margin: 0 0 .75rem; }
[data-page="espelho"] .w-capa__face { padding: 1.1rem; }
[data-page="espelho"] .w-capa__n { font-size: 6.4rem; }
[data-page="espelho"] .w-capa__ed { margin-top: .9rem; }
@media (max-width: 46rem) {
  [data-page="espelho"] .w-capa { display: none; }
}
@media (prefers-reduced-motion: reduce) { .d-playbtn { transition: none; } }

/* No celular, capa e data dividem a primeira linha; o título volta a ocupar
   toda a largura. Evita um vazio ao lado da capa e antecipa a leitura. */
@media (max-width: 46rem) {
  [data-page="edicoes"] .d-destaque { grid-template-columns: 7rem minmax(0,1fr); gap: 1.4rem 1.1rem; }
  [data-page="edicoes"] .d-destaque__texto { display: contents; }
  [data-page="edicoes"] .w-capa { grid-column: 1; grid-row: 1; width: 7rem; height: 7.6rem; }
  [data-page="edicoes"] .w-capa__face { padding: .65rem; }
  [data-page="edicoes"] .w-capa__n { font-size: 3.45rem; }
  [data-page="edicoes"] .w-capa__marca { font-size: .75rem; }
  [data-page="edicoes"] .w-capa__marca .w-sinal { width: 1.1rem; }
  [data-page="edicoes"] .w-capa__rodape { font-size: .44rem; gap: .2rem; }
  [data-page="edicoes"] .w-noar { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: .35rem 1fr; align-self: center; align-items: center; gap: .6rem .4rem; margin: 0; }
  [data-page="edicoes"] .w-noar > span:last-child { grid-column: 1/-1; padding: 0; border: 0; line-height: 1.65; max-width: 15ch; }
  [data-page="edicoes"] .d-destaque__t { grid-column: 1/-1; grid-row: 2; }
  [data-page="edicoes"] .d-destaque .d-hero__lede { grid-column: 1/-1; grid-row: 3; margin-top: 0; }
}
/* Encerra o grid móvel em 46rem também nas regras herdadas de 52rem. */
@media (min-width: 46.01rem) {
  [data-page="edicoes"] .d-ed > * { grid-area: auto; }
  [data-page="edicoes"] .d-ed__data, [data-page="edicoes"] .d-ed__dur { display: block; text-align: right; }
}

/* Status: uma edição para ouvir, com o detalhamento por escolha. O título
   ganha a largura que a tracklist cortada ocupava; a capa assina o objeto.
   O detalhamento fica no Espelho. O player inicial não simula timecodes
   com durações estimadas. */
[data-page="status"] .w-agora { padding: 2rem; border-radius: 30px; align-self: start; }
.w-agora__cab { display: flex; align-items: center; gap: .85rem; color: inherit; }
.w-agora__cab > span:last-child { opacity: .78; }
.w-agora__estado { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.w-agora__principal { display: grid; grid-template-columns: minmax(0,1fr) 9.5rem; align-items: center; gap: 1.75rem; padding: 2rem 0 2.25rem; }
.w-agora__titulo { font-size: clamp(2rem,3vw,2.75rem); font-weight: 750; letter-spacing: -.045em; line-height: 1.16; text-wrap: pretty; margin: 0; }
.w-agora .w-capa { width: 9rem; height: 10rem; margin: 0 .5rem .5rem 0; }
.w-agora .w-capa__face { padding: .8rem; border-radius: 16px 36px 16px 16px; }
.w-agora .w-capa::before { border-radius: 16px 36px 16px 16px; transform: translate(5px,5px) rotate(3deg); }
.w-agora .w-capa__marca { font-size: .85rem; }
.w-agora .w-capa__marca .w-sinal { width: 1.4rem; height: 1.1rem; }
.w-agora .w-capa__ed { margin-top: .6rem; font-size: .5rem; }
.w-agora .w-capa__n { font-size: 4.5rem; }
.w-agora .w-capa__rodape { font-size: .45rem; gap: .25rem; padding-top: .35rem; }
.w-agora__ouvir { display: flex; align-items: center; gap: 1.2rem; padding-bottom: 1.75rem; }
.w-agora__play { display: inline-flex; align-items: center; gap: .8rem; border: 0; border-radius: 999px; padding: .4rem 1.2rem .4rem .4rem; background: var(--wire-accent); color: var(--wire-on-accent); font: 700 .875rem/1 var(--fam); cursor: pointer; transition: transform 180ms; }
.w-agora__play:hover { transform: translateY(-2px); }
.w-agora__play:active { transform: scale(.98); }
.w-agora__playicon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid color-mix(in srgb,currentColor 14%,transparent); }
.w-agora__playicon svg { width: 1.15rem; height: 1.15rem; margin-left: .1rem; }
.w-agora__duracao { display: flex; flex-direction: column; gap: .25rem; font-size: .6875rem; }
.w-agora__duracao b { font-size: 1.125rem; font-weight: 750; letter-spacing: -.025em; }
.w-agora__duracao > span { opacity: .75; }
.w-agora__abrir { margin-left: auto; display: inline-flex; align-items: center; gap: .55rem; color: inherit; text-decoration: none; font-size: .75rem; font-weight: 600; }
.w-agora__abrir svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.w-agora__abrir:hover { text-decoration: underline; text-underline-offset: 4px; }
.w-agora__rodape { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; font-size: .625rem; opacity: .72; }
@media (max-width: 46rem) {
  [data-page="status"] .w-agora { padding: 1.25rem; border-radius: 24px; }
  .w-agora__principal { grid-template-columns: minmax(0,1fr); gap: 1.5rem; padding: 1.5rem 0; }
  .w-agora .w-capa { display: none; }
  .w-agora__titulo { font-size: 1.9rem; line-height: 1.18; }
  .w-agora__cab { font-size: .65rem; gap: .7rem; }
  .w-agora__ouvir { flex-wrap: wrap; gap: .8rem 1rem; padding-bottom: 1.25rem; }
  .w-agora__play { font-size: .8rem; }
  .w-agora__abrir { flex-basis: 100%; margin: .25rem 0 0; justify-content: space-between; min-height: 2rem; }
}
@media (prefers-reduced-motion: reduce) { .w-agora__play { transition: none; } }
/* O destaque acompanha a altura da Saúde sem deixar uma lacuna na grade. */
[data-page="status"] .w-agora { align-self: stretch; display: flex; flex-direction: column; }
.w-agora__principal { flex: 1; }

/* Removida a disclosure a pedido do owner: o rodapé ancora diretamente
   as ações, e o detalhamento continua na página do Espelho. */
.w-agora__rodape { border-top: 1px solid color-mix(in srgb,currentColor 22%,transparent); padding-top: 1rem; margin-top: 0; }

/* Textura do Status: a linha do símbolo vira uma gravura em nove contornos.
   É um grafismo de marca, não uma onda de áudio. O desenho se concentra
   junto à capa; a máscara mantém a área do título limpa. A silhueta repete
   o canto aberto da capa, sem adicionar cor ou iluminação difusa. */
[data-page="status"] .w-agora { border-radius: 30px 88px 30px 54px; overflow: hidden; isolation: isolate; }
.w-agora__gravura { position: absolute; top: -10%; right: -8%; width: 72%; height: 112%; z-index: -1; pointer-events: none; color: var(--wire-on-brand); opacity: .19; mask-image: linear-gradient(90deg,transparent 2%,#000 55%); }
[data-page="status"] .w-agora::after { opacity: .12; }
[data-page="status"] .w-agora::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(115deg,transparent 48%,color-mix(in srgb,var(--wire-on-brand) 5%,transparent) 100%); }
@media (max-width: 46rem) {
  [data-page="status"] .w-agora { border-radius: 24px 52px 24px 32px; }
  .w-agora__gravura { width: 110%; right: -44%; top: -15%; opacity: .13; mask-image: linear-gradient(90deg,transparent 20%,#000 80%); }
}

/* Métricas do Status: cada informação tem sua própria composição.
   Superfícies neutras e canto aberto ecoam o Wire; os gráficos permanecem
   quantitativos, com cor concentrada em informação e pontos de atenção. */
[data-page="status"] .w-metrica { padding: 1.6rem; border-radius: 22px 38px 22px 22px; border-color: color-mix(in srgb,var(--md-sys-color-outline-variant) 48%,transparent); }
.w-metrica-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.w-metrica-cab h2 { font-size: 1rem; font-weight: 700; letter-spacing: -.025em; margin: 0; }
.w-metrica-cab > span, .w-periodo { font-size: .6875rem; color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }
.w-metrica-nota { font-size: .6875rem; color: var(--md-sys-color-on-surface-variant); line-height: 1.6; margin: .55rem 0 0; }
.w-metrica-legenda { display: flex; justify-content: space-between; gap: .75rem; font-size: .6875rem; color: var(--md-sys-color-on-surface-variant); }
.w-erro { color: var(--md-sys-color-error); }
.w-spark-wrap { position: relative; margin: 1rem 0; }
.w-saude-valor { display: flex; align-items: center; gap: 1rem; }
.w-saude-valor > span:last-child { font-size: .75rem; line-height: 1.55; color: var(--md-sys-color-on-surface-variant); }
.w-saude-trilho { height: 5px; border-radius: 999px; background: color-mix(in srgb,var(--md-sys-color-error) 45%,transparent); margin-top: 1.15rem; overflow: hidden; }
.w-saude-trilho > i { display: block; height: 100%; background: var(--md-sys-color-primary); border-right: 3px solid var(--md-sys-color-surface-container-low); }
.w-saude-historico { padding: 1.25rem 0; margin-top: .5rem; }
.w-saude-historico .d-spark { height: 3.5rem; }
.w-saude-sequencia { display: flex; align-items: baseline; gap: .5rem; margin-top: .75rem; }
.w-saude-sequencia b { font-size: 1rem; letter-spacing: -.03em; }
.w-saude-sequencia span { font-size: .75rem; color: var(--md-sys-color-on-surface-variant); }
.w-saude-excecoes { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--md-sys-color-outline-variant); padding-top: 1rem; gap: .65rem; }
.w-saude-excecoes > div { display: flex; flex-direction: column; gap: .35rem; }
.w-saude-excecoes b { font-size: 1.4rem; font-weight: 750; letter-spacing: -.04em; }
.w-saude-excecoes span { font-size: .6875rem; color: var(--md-sys-color-on-surface-variant); }
.w-transmissao-resumo { display: flex; align-items: baseline; gap: .7rem; margin: .5rem 0 0; }
.w-transmissao-resumo b { font-size: 2.25rem; font-weight: 750; letter-spacing: -.055em; }
.w-transmissao-resumo span { color: var(--md-sys-color-on-surface-variant); font-size: .8125rem; }
.w-transmissoes .d-strips { height: 10.5rem; gap: .45rem; }
.w-transmissoes .d-seg { border-radius: 5px 5px 3px 3px; }
.w-transmissoes .d-card__foot { font-size: .6875rem; margin-top: 1.7rem; }
.w-transmissoes .d-xaxis { color: var(--md-sys-color-on-surface-variant); }
.w-volume-total { display: flex; align-items: center; gap: 1rem; }
.w-volume-total > span:last-child { color: var(--md-sys-color-on-surface-variant); font-size: .875rem; line-height: 1.5; }
.w-volume-duracoes { margin: 1.75rem 0 1.5rem; }
.w-volume-media { display: flex; gap: .5rem; align-items: baseline; margin-top: .9rem; }
.w-volume-media b { font-size: 1.65rem; font-weight: 750; letter-spacing: -.04em; }
.w-volume-media span { font-size: .75rem; color: var(--md-sys-color-on-surface-variant); }
.w-volume-escala { height: 5px; position: relative; background: var(--md-sys-color-surface-container-highest); border-radius: 999px; margin: 1rem 0; }
.w-volume-escala > i { position: absolute; top: 0; height: 100%; border-radius: inherit; background: color-mix(in srgb,var(--md-sys-color-primary) 45%,transparent); }
.w-volume-escala > b { position: absolute; top: -4px; width: 13px; height: 13px; transform: translateX(-50%); border: 3px solid var(--md-sys-color-surface-container-low); border-radius: 50%; background: var(--md-sys-color-primary); }
.w-volume-limites { display: flex; justify-content: space-between; gap: .75rem; font-size: .6875rem; color: var(--md-sys-color-on-surface-variant); }
.w-volume-limites b { color: var(--md-sys-color-on-surface); }
.w-volume-acervo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--md-sys-color-outline-variant); padding-top: 1.15rem; margin-top: auto; color: inherit; text-decoration: none; font-size: .75rem; }
.w-volume-acervo b { font-size: 1.15rem; font-weight: 750; }
.w-volume-acervo small { display: block; color: var(--md-sys-color-on-surface-variant); font-size: .6875rem; margin-top: .4rem; }
.w-volume-acervo > span:last-child { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-primary); }
.w-volume-acervo svg { width: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.w-volume-acervo:hover > span:last-child { background: var(--md-sys-color-primary-container); }
.w-custos-total { display: flex; align-items: baseline; gap: .5rem; margin-bottom: 1.4rem; }
.w-custos-total > span { color: var(--md-sys-color-on-surface-variant); font-size: .875rem; }
.w-custos-total > b { font-size: 2.75rem; letter-spacing: -.05em; }
.w-custo-lista { display: grid; gap: 1.1rem; margin: 1.2rem 0 1.5rem; }
.w-custo-linha > div { display: flex; justify-content: space-between; gap: .75rem; font-size: .8125rem; }
.w-custo-linha b { font-size: .75rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.w-custo-trilho { display: block; height: 4px; background: var(--md-sys-color-surface-container-high); border-radius: 999px; margin-top: .55rem; }
.w-custo-trilho i { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb,var(--md-sys-color-primary) 50%,transparent); }
.w-custo-linha:first-child i { background: var(--aurora); }
.w-custo-rodape { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--md-sys-color-outline-variant); margin-top: auto; }
.w-custo-rodape > span { display: flex; flex-direction: column; gap: .35rem; font-size: .6875rem; color: var(--md-sys-color-on-surface-variant); }
.w-custo-rodape b { color: var(--md-sys-color-on-surface); font-size: .8125rem; font-weight: 650; }
.w-fontes-resumo { display: flex; gap: 2rem; flex-wrap: wrap; padding: .15rem 0 1.5rem; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.w-fontes-resumo > span { display: flex; align-items: baseline; gap: .45rem; font-size: .75rem; color: var(--md-sys-color-on-surface-variant); }
.w-fontes-resumo b { font-size: 1.65rem; font-weight: 750; letter-spacing: -.04em; color: var(--md-sys-color-on-surface); }
.w-fontes-ranking { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem 2rem; padding: 1.6rem 0; }
.w-fonte-item { display: flex; gap: .8rem; min-width: 0; }
.w-fonte-pos { font-size: .75rem; color: var(--md-sys-color-on-surface-variant); font-variant-numeric: tabular-nums; padding-top: .15rem; }
.w-fonte-item:first-child .w-fonte-pos { color: var(--md-sys-color-primary); font-weight: 750; }
.w-fonte-corpo { min-width: 0; flex: 1; }
.w-fonte-corpo > div { display: flex; align-items: baseline; justify-content: space-between; gap: .65rem; }
.w-fonte-corpo b { font-size: .8125rem; font-weight: 650; line-height: 1.4; }
.w-fonte-corpo > div > span { font-size: .875rem; font-weight: 750; white-space: nowrap; }
.w-fonte-corpo small { display: none; }
.w-fonte-trilho { display: block; height: 3px; margin: .6rem 0 .4rem; background: var(--md-sys-color-surface-container-high); border-radius: 999px; }
.w-fonte-trilho i { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb,var(--md-sys-color-primary) 50%,transparent); }
.w-fonte-item:first-child .w-fonte-trilho i { background: var(--aurora); }
.w-fonte-nota { font-size: .625rem; color: var(--md-sys-color-on-surface-variant); }
.w-fontes-rodape { margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant); font-size: .6875rem; }
@media (max-width: 46rem) {
  [data-page="status"] .w-metrica { padding: 1.25rem; border-radius: 20px 32px 20px 20px; }
  .w-saude-valor > span:last-child { font-size: .6875rem; }
  .w-transmissoes .d-strips { height: 9rem; gap: 3px; }
  .w-transmissoes .d-card__foot { flex-wrap: wrap; gap: .7rem; }
  .w-transmissao-resumo { flex-wrap: wrap; gap: .25rem .6rem; }
  .w-fontes-ranking { grid-template-columns: 1fr; gap: 1.3rem; }
  .w-fontes-resumo { gap: .7rem 1.2rem; }
  .w-fontes-resumo > span { font-size: .6875rem; }
  .w-fontes-resumo b { font-size: 1.35rem; }
  .w-fonte-corpo small { display: inline; font-size: .625rem; font-weight: 400; }
}
/* O traçado antigo calculava o dash no viewBox, mas o stroke não escala.
   Em cards mais largos a linha ficava interrompida: aqui ela é contínua,
   preservando o dado e o ponto final em qualquer largura. */
.w-metrica .d-spark__linha { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }

/* Topo Wire: navegação como objeto central, ferramentas e estado agrupados.
   Casco compartilhado após captura da proposta no Status. */
.w-top__tools,.w-top__state { display:contents; }
body .w-top { padding-top:1.25rem; padding-bottom:1.25rem; }
body .w-top > div { display:grid!important; grid-template-columns:1fr auto 1fr; gap:1.5rem!important; }
.w-top .d-brand { width:max-content; margin:0; }
.w-top .w-marca { gap:.6rem; }
.w-top .w-nome { font-size:2.15rem; }
.w-top .w-assinatura { margin-top:.4rem; }
.w-top .d-navpill { padding:.35rem; gap:.25rem; border:1px solid var(--md-sys-color-outline-variant); border-radius:18px 26px 18px 26px; background:var(--md-sys-color-surface-container-low); }
.w-top .d-navpill::before { border-radius:13px 21px 13px 21px; background:var(--md-sys-color-primary-container); }
.w-top .d-navpill a { height:2.5rem; padding:0 1.35rem; border-radius:13px 21px 13px 21px; font-weight:600; }
.w-top .d-navpill a[aria-current=page] { color:var(--md-sys-color-on-primary-container); }
.w-top .d-navpill a[aria-current=page]::before { width:5px; height:5px; background:currentColor; }
.w-top .d-top__right { justify-self:end; gap:1rem; }
.w-top .w-top__tools { display:flex; gap:.1rem; align-items:center; }
.w-top .d-round { width:2.25rem; height:2.5rem; }
.w-top .d-round svg { width:1.05rem; height:1.05rem; stroke-width:1.6; }
.w-top .w-top__state { display:flex; flex-direction:column; align-items:flex-start; gap:.2rem; padding-left:1rem; border-left:1px solid var(--md-sys-color-outline-variant); }
.w-top .d-status { background:none; padding:0; height:auto; font-size:.72rem; font-weight:600; gap:.45rem; }
.w-top .d-top__hora { display:block; font-size:.65rem; color:var(--md-sys-color-on-surface-variant); padding-left:.95rem; }
@media(max-width:70rem) {
 body .w-top > div { grid-template-columns:auto 1fr auto; gap:1rem!important; }
 .w-top .d-navpill { justify-self:center; }
 .w-top .d-navpill a { padding:0 1rem; }
 .w-top .d-top__right { gap:.5rem; }
 .w-top .w-top__state { padding-left:.65rem; }
}
@media(max-width:46rem) {
 body .w-top { padding:1rem; }
 body .w-top > div { grid-template-columns:1fr auto; grid-template-areas:"logo acoes" "nav nav"; gap:1rem!important; }
 .w-top .w-nome { display:block; font-size:1.8rem; }
 .w-top .w-assinatura { display:none; }
 .w-top .w-marca { gap:.3rem; }
 .w-top .w-top__tools { gap:0; }
 .w-top .d-round { width:2rem; }
 .w-top .w-top__state { padding-left:.6rem; }
 .w-top .d-status { font-size:.6rem; gap:.3rem; }
 .w-top .d-top__hora { font-size:.6rem; padding-left:.8rem; }
 .w-top .d-navpill { width:100%; box-sizing:border-box; }
 .w-top .d-navpill a { height:2.3rem; }
}