/* ═══════════════════════════════════════════════════════════════════════════
   /estilo — o espécime vivo do sistema de design do tAILly.
   Esta folha é SÓ o andaime da página de especificação. Nada aqui é token:
   os tokens moram em application.css e a especificação em docs/04-DESIGN.md.
   ═══════════════════════════════════════════════════════════════════════════ */

.esp { display: flex; flex-direction: column; gap: var(--e-8); }
.esp .grade--2 { align-items: start; }

/* Cabeçalho ---------------------------------------------------------------- */
.esp-capa { display: flex; flex-direction: column; gap: var(--e-4); }
.esp-capa__linha { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; }
.esp-capa__titulo { font-family: var(--fonte-titulo); font-size: var(--t-2xl); line-height: 1.14; letter-spacing: -0.035em; margin: 0; }
.esp-capa__titulo em { color: var(--marca); font-style: normal; }
.esp-capa__sub { color: var(--tinta-2); font-size: var(--t-corpo); max-width: 62ch; margin: 0; }

/* Aviso de dado fictício --------------------------------------------------- */
.esp-aviso {
  display: flex; gap: var(--e-3); align-items: flex-start;
  background: var(--lavagem-atencao);
  border: var(--fio) solid color-mix(in srgb, var(--status-atencao) 40%, transparent);
  border-radius: var(--raio-2);
  padding: var(--e-3) var(--e-4);
  font-size: var(--t-menor);
  color: var(--tinta-2);
}
.esp-aviso strong { color: var(--tinta); }

/* Seção -------------------------------------------------------------------- */
.esp-secao { display: flex; flex-direction: column; gap: var(--e-5); scroll-margin-top: var(--e-5); }
.esp-secao__cabeca { display: flex; align-items: baseline; gap: var(--e-3); flex-wrap: wrap; border-bottom: var(--fio) solid var(--linha-grade); padding-bottom: var(--e-3); }
.esp-secao__num { font-family: var(--fonte-mono); font-size: var(--t-mini); color: var(--marca); }
.esp-secao__titulo { font-family: var(--fonte-titulo); font-size: var(--t-lg); margin: 0; letter-spacing: -0.015em; }
.esp-secao__nota { font-size: var(--t-menor); color: var(--tinta-3); margin-left: auto; }

.esp-bloco { display: flex; flex-direction: column; gap: var(--e-3); }
.esp-bloco__rotulo { font-size: var(--t-mini); text-transform: uppercase; letter-spacing: var(--tracking-rotulo); color: var(--tinta-3); margin: 0; }

/* Sumário ------------------------------------------------------------------ */
.esp-sumario { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.esp-sumario a {
  font-size: var(--t-mini); color: var(--tinta-2);
  border: var(--fio) solid var(--linha-grade); border-radius: var(--raio-pilula);
  /* pílula de navegação, não link dentro de frase: cumpre o piso de 44 px
     (media 84x24,6 ate 28/07) */
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--e-3); text-decoration: none;
  transition: color var(--dur-toque) var(--ease-padrao), border-color var(--dur-toque) var(--ease-padrao);
}
.esp-sumario a:hover { color: var(--marca); border-color: var(--marca); text-decoration: none; }

/* Amostras de cor ---------------------------------------------------------- */
.esp-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--e-3); }
.esp-slot {
  border: var(--fio) solid var(--linha-grade); border-radius: var(--raio-2);
  overflow: hidden; background: var(--plano-carta);
  transition: transform var(--dur-rapido) var(--ease-saida), border-color var(--dur-rapido) var(--ease-padrao);
}
.esp-slot:hover { transform: translateY(-2px); border-color: var(--linha-forte); }
.esp-slot__chapa { height: 62px; }
.esp-slot__corpo { padding: var(--e-2) var(--e-3) var(--e-3); display: flex; flex-direction: column; gap: 2px; }
.esp-slot__nome { font-size: var(--t-menor); font-weight: var(--peso-medio); display: flex; justify-content: space-between; gap: var(--e-2); }
.esp-slot__slot { color: var(--tinta-3); font-family: var(--fonte-mono); font-size: var(--t-micro); }
.esp-slot__hex { font-family: var(--fonte-mono); font-size: var(--t-micro); color: var(--tinta-3); }
.esp-slot__medida { font-size: var(--t-micro); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.esp-slot--carregada .esp-slot__nome::after { content: "carregada"; font-size: var(--t-micro); color: var(--status-atencao); font-weight: var(--peso-normal); }

/* Rampa -------------------------------------------------------------------- */
.esp-rampa { display: flex; flex-direction: column; gap: var(--e-1); }
.esp-rampa__faixa { display: flex; height: 46px; border-radius: var(--raio-2); overflow: hidden; }
.esp-rampa__degrau { flex: 1; position: relative; display: grid; place-items: end center; padding-bottom: 3px; }
.esp-rampa__legenda { font-size: var(--t-micro); font-family: var(--fonte-mono); }
.esp-rampa__eixo { display: flex; }
.esp-rampa__eixo span { flex: 1; text-align: center; font-size: var(--t-micro); color: var(--tinta-3); font-variant-numeric: tabular-nums; }

/* Tipografia --------------------------------------------------------------- */
.esp-tipo { display: flex; flex-direction: column; gap: var(--e-4); }
.esp-tipo__linha { display: grid; grid-template-columns: 118px 1fr; gap: var(--e-4); align-items: baseline; border-bottom: var(--fio) solid var(--linha-grade); padding-bottom: var(--e-3); }
.esp-tipo__meta { font-family: var(--fonte-mono); font-size: var(--t-micro); color: var(--tinta-3); }
/* `overflow: hidden` recortava a caixa de glifo do herói no eixo Y
   (scrollH 69 x clientH 64 — um NÚMERO raspado). `clip` + margem de recorte
   mantém a reticência no X e devolve o glifo no Y. */
.esp-tipo__amostra { min-width: 0; overflow-x: clip; overflow-y: visible; text-overflow: ellipsis; }

/* Espaço ------------------------------------------------------------------- */
.esp-espaco { display: flex; flex-direction: column; gap: var(--e-2); }
.esp-espaco__linha { display: grid; grid-template-columns: 84px 1fr; gap: var(--e-3); align-items: center; }
.esp-espaco__barra { height: 14px; background: var(--lavagem-marca); border-left: 2px solid var(--marca); border-radius: 0 var(--raio-1) var(--raio-1) 0; }

/* Mapa de demonstração ----------------------------------------------------- */
.esp-palco { position: relative; border-radius: var(--raio-4); overflow: hidden; border: var(--fio) solid var(--linha-grade); background:
  radial-gradient(120% 90% at 50% 8%, color-mix(in srgb, var(--marca) 7%, transparent) 0%, transparent 62%),
  var(--plano-pagina); }
.esp-palco__svg { display: block; width: 100%; height: auto; }
.esp-palco__cromo { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: var(--e-4); pointer-events: none; }
/* idem §11 do application.css: só a folha interativa recebe o ponteiro */
.esp-palco__cromo .vidro,
.esp-palco__cromo button,
.esp-palco__cromo a { pointer-events: auto; }
.esp-palco__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3); }
.esp-palco__base { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; }
.esp-coluna { transition: opacity var(--dur-rapido) var(--ease-padrao); cursor: pointer; }
.esp-coluna:hover { opacity: 0.82; }

/* Duas colunas ------------------------------------------------------------- */
.esp-duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: var(--e-4); align-items: start; }
@media (max-width: 860px) { .esp-duas { grid-template-columns: 1fr; } }

/* Movimento ---------------------------------------------------------------- */
.esp-motion { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--e-3); }
.esp-motion__caixa { border: var(--fio) solid var(--linha-grade); border-radius: var(--raio-2); padding: var(--e-3); display: flex; flex-direction: column; gap: var(--e-2); background: var(--plano-carta); }
.esp-motion__trilho { position: relative; height: 26px; background: var(--plano-afundado); border-radius: var(--raio-pilula); overflow: hidden; }
.esp-motion__bolha { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--marca); }
.esp-motion__meta { font-family: var(--fonte-mono); font-size: var(--t-micro); color: var(--tinta-3); }

/* Regra de ouro: dado não faz overshoot ------------------------------------ */
.esp-overshoot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }
@media (max-width: 700px) { .esp-overshoot { grid-template-columns: 1fr; } }
.esp-overshoot__caixa { border: var(--fio) solid var(--linha-grade); border-radius: var(--raio-2); padding: var(--e-4); display: flex; flex-direction: column; gap: var(--e-3); }
.esp-overshoot__caixa--errado { border-color: color-mix(in srgb, var(--status-critico) 45%, transparent); }
.esp-overshoot__caixa--certo { border-color: color-mix(in srgb, var(--status-bom) 45%, transparent); }
.esp-overshoot__medidor { font-family: var(--fonte); font-size: var(--t-lg); font-weight: var(--peso-forte); font-variant-numeric: proportional-nums; letter-spacing: -0.02em; }

/* Miudezas ----------------------------------------------------------------- */
.esp-par { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.esp-quadro { border: var(--fio) solid var(--linha-grade); border-radius: var(--raio-3); padding: var(--e-4); display: flex; flex-direction: column; gap: var(--e-3); background: var(--plano-carta); }
.esp-quadro__titulo { font-size: var(--t-menor); font-weight: var(--peso-forte); margin: 0; }
.esp-regra { display: grid; grid-template-columns: 22px 1fr; gap: var(--e-3); align-items: start; font-size: var(--t-menor); color: var(--tinta-2); }
.esp-regra__n { font-family: var(--fonte-mono); font-size: var(--t-micro); color: var(--marca); padding-top: 2px; }
.esp-regra strong { color: var(--tinta); font-weight: var(--peso-forte); }
.esp-lista-crua { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }