/* ════════════════════════════════════════════════════════════
   TIMELINE — progresso de etapas com status · FONTE ÚNICA
   Régua horizontal: cada etapa é um NÓ (linha — marcador — linha) +
   label embaixo. O marcador carrega o STATUS da etapa:
     · empty   — anel ink (etapa futura)
     · standby — Concrete 300 + relógio (aguardando)
     · check   — verde (Basic/Green Check) + ✓ (concluída)
     · alert   — laranja (Basic/Orange Alert) + ! (atenção)
     · failed  — vermelho (Basic/Red Erro) + ✕ (falhou)
     · now     — ink cheio, sem glifo (passo atual — State=Now)
   Marcador é CIRCULAR (Figma + ícones de status são circulares) —
   exceção consciente à identidade reta, restrita a indicadores de status.
   Fonte: Figma "Status Timeline" (3601:65490) + "Timeline" (3589:37156).
   ════════════════════════════════════════════════════════════ */

.hm-timeline { display: flex; align-items: flex-start; width: 100%; font-family: var(--hm-font-sans); }
.hm-timeline__step { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }

/* nó: linha — marcador — linha */
.hm-timeline__node { display: flex; align-items: center; min-width: 56px; height: 24px; }
.hm-timeline__line { flex: 1; min-width: 0; height: 2px; background: var(--hm-fg); }
/* pontas: 1ª etapa sem linha à esquerda, última sem linha à direita */
.hm-timeline__step:first-child .hm-timeline__line--start { visibility: hidden; }
.hm-timeline__step:last-child  .hm-timeline__line--end   { visibility: hidden; }

/* marcador (24px, circular) */
.hm-timeline__mark {
  flex: none; box-sizing: border-box; width: 24px; height: 24px;
  border-radius: 50%; display: grid; place-items: center;
}
.hm-timeline__mark .hm-ico { width: 24px; height: 24px; color: var(--hm-fg); }

/* estados */
.hm-timeline__mark--empty   { box-shadow: inset 0 0 0 2px var(--hm-fg); }   /* anel, sem fill/ícone */
.hm-timeline__mark--standby { background: var(--hm-bg-strong); }
.hm-timeline__mark--check   { background: var(--hm-status-check); }
.hm-timeline__mark--alert   { background: var(--hm-status-warn); }
.hm-timeline__mark--failed  { background: var(--hm-status-error); }
/* now — passo ATUAL da régua compacta: marcador cheio ink, SEM glifo.
   Mesma receita do --steps (.hm-timeline__step--now), promovida pra régua
   de 24px. Figma "Status Timeline" State=Now (11265:7). */
.hm-timeline__mark--now     { background: var(--hm-fg); }

/* label da etapa (Legend/Small 200) */
.hm-timeline__label { font: 700 10px/14px var(--hm-font-sans); color: var(--hm-fg); text-align: center; }
/* doutrina da régua: o passo atual fica em Text/Primary e os FUTUROS recuam
   pra muted — ênfase antes de cor. Figma pede Text/Muted; em 10px o muted
   normal (Concrete 400) reprova AA → muted ACESSÍVEL (precedente do Badge
   e do Broker Presence, divergência AA aprovada 2026-07-15). */
.hm-timeline__step--ahead .hm-timeline__label { color: var(--hm-fg-muted-aa); }

/* nó isolado (Status Timeline) p/ documentação — largura fixa */
.hm-timeline__node--solo { width: 56px; flex: none; }

/* ── modo STEPS: passos com número + título + descrição (onboarding/checklist) ──
   Mesma régua (linha — marcador — linha), mas o marcador leva um NÚMERO e
   abaixo vêm título + descrição alinhados à esquerda. Passo atual = .hm-timeline__step--now
   (marcador ink preenchido + chip mint "agora"). Reusa a estrutura — sem fork. */
.hm-timeline--steps .hm-timeline__step { position: relative; gap: 0; padding-right: 28px; }
/* nó + slot reservado p/ o chip "agora" em TODOS os passos → os títulos alinham na mesma linha.
   Slot maior = mais respiro entre o chip e o título. */
.hm-timeline--steps .hm-timeline__node { height: 34px; margin-bottom: 48px; }
.hm-timeline--steps .hm-timeline__line { height: 1px; background: var(--hm-bg-strong); }
.hm-timeline--steps .hm-timeline__line--start { display: none; }   /* marca alinhada à esquerda (com chip/título) — sem stub de linha antes dela */
.hm-timeline--steps .hm-timeline__mark {
  width: 34px; height: 34px; background: var(--hm-bg);
  box-shadow: inset 0 0 0 1.5px var(--hm-fg);
  font: 800 14px/1 var(--hm-font-sans); color: var(--hm-fg);
}
.hm-timeline--steps .hm-timeline__step--now .hm-timeline__mark { background: var(--hm-fg); color: var(--hm-fg-on-dark); box-shadow: none; }
/* chip "agora" = mint, alinhado à esquerda, no slot reservado (não empurra o título) */
.hm-timeline--steps .hm-timeline__now { position: absolute; top: 61px; left: 0; font: 800 11px/1 var(--hm-font-sans); color: var(--hm-fg); background: var(--hm-accent); padding: 3px 7px; }   /* chip a 8px do título; espaço maior fica entre o nó e o chip */
.hm-timeline--steps .hm-timeline__title { margin: 0; font: 800 16px/1.2 var(--hm-font-sans); letter-spacing: -.01em; color: var(--hm-fg); }
.hm-timeline--steps .hm-timeline__desc { margin: 12px 0 0; font: 600 13.5px/1.45 var(--hm-font-sans); color: var(--hm-fg); }   /* ink (não muted): contraste de leitura */

@media (max-width: 600px) {
  .hm-timeline--steps { flex-direction: column; gap: 24px; }
  .hm-timeline--steps .hm-timeline__line { display: none; }   /* empilhado: sem régua horizontal */
  .hm-timeline--steps .hm-timeline__node { min-width: 0; }
}