/* Estação — componentes da direção D (HUD). Só usa os valores de tokens.css. */

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  font: var(--peso-normal) var(--t-3)/var(--entrelinha) var(--fonte);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 88px; /* espaço da barra de comando */
}
[hidden] { display: none !important; }
h1, h2, h3 { line-height: var(--entrelinha-justa); font-weight: var(--peso-normal); }
a { color: var(--cor-acento); }
.discreto { color: var(--cor-texto-3); }
.mono { font-family: var(--fonte-mono); }

/* ---- canto cortado com borda fina (sem moldura extra no HTML) */
.recorte {
  position: relative;
  border: var(--linha) solid var(--cor-borda);
  background: var(--cor-superficie);
  clip-path: polygon(var(--corte) 0, 100% 0, 100% calc(100% - var(--corte)),
                     calc(100% - var(--corte)) 100%, 0 100%, 0 var(--corte));
}
.recorte::before, .recorte::after {
  content: ""; position: absolute; width: calc(var(--corte) * 1.4142); height: var(--linha);
  background: var(--cor-borda); transform: rotate(-45deg);
}
.recorte::before { top: calc(var(--corte) / 2 - .5px); left: calc(var(--corte) / 2 - var(--corte) * .7071); }
.recorte::after { bottom: calc(var(--corte) / 2 - .5px); right: calc(var(--corte) / 2 - var(--corte) * .7071); }

/* ---- rótulos HUD */
.rotulo {
  margin: 0; font-family: var(--fonte-mono); font-size: var(--t-1); text-transform: lowercase;
  letter-spacing: var(--espaco-letra-rotulo); color: var(--cor-texto-3);
}
.numero { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; }

/* ---- botões e campos */
button {
  font: inherit; font-family: var(--fonte-mono); font-size: var(--t-2); letter-spacing: .04em; text-transform: lowercase;
  cursor: pointer; padding: var(--e-2) var(--e-4); border-radius: var(--raio-1);
  border: var(--linha) solid var(--cor-acento); background: var(--cor-acento); color: var(--cor-acento-texto);
  transition: background var(--dur-1) var(--curva), color var(--dur-1) var(--curva);
}
@media (hover: hover) and (pointer: fine) { button:hover { background: transparent; color: var(--cor-acento); } }
button:disabled { opacity: .55; cursor: wait; }
.botao-leve { background: transparent; color: var(--cor-texto-2); border-color: var(--cor-borda-suave); }
@media (hover: hover) and (pointer: fine) { .botao-leve:hover { color: var(--cor-texto); border-color: var(--cor-borda); background: transparent; } }
.botao-aviso { background: transparent; color: var(--cor-aviso); border-color: var(--cor-aviso); }
@media (hover: hover) and (pointer: fine) { .botao-aviso:hover { background: var(--cor-aviso-suave); color: var(--cor-aviso); } }
input, select {
  font: inherit; color: var(--cor-texto); background: var(--cor-superficie-2);
  border: var(--linha) solid var(--cor-borda-suave); border-radius: var(--raio-1); padding: var(--e-2) var(--e-3);
}
input::placeholder { color: var(--cor-texto-3); }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--cor-foco); outline-offset: 2px;
}
label { display: grid; gap: var(--e-1); font-size: var(--t-2); color: var(--cor-texto-2); }

/* ---- telas de entrada */
.centro { min-height: 100vh; display: grid; place-items: center; padding: var(--e-4); }
.cartao { width: 100%; max-width: 400px; display: grid; gap: var(--e-4); padding: var(--e-6) var(--e-5); }
.cartao h1 { margin: 0; font-family: var(--fonte-mono); font-size: var(--t-5); text-transform: lowercase; letter-spacing: .04em; }
.cartao button[type="submit"] { padding: var(--e-3); }
.erro { color: var(--cor-perigo); margin: 0; font-size: var(--t-2); }
.ok-msg { color: var(--cor-acento); margin: 0; font-size: var(--t-2); }

/* ---- topo */
.topo {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap;
  padding: var(--e-2) var(--e-4); background: var(--cor-fundo); border-bottom: var(--linha) solid var(--cor-borda);
}
.marca { display: flex; align-items: center; gap: var(--e-2); font-family: var(--fonte-mono); text-transform: lowercase; letter-spacing: .06em; }
.logo { width: 22px; height: 22px; border: var(--linha) dashed var(--cor-borda-suave); }
.logo:empty { display: none; }
.status { color: var(--cor-acento); font-size: var(--t-2); }
.status::before { content: "● "; }
.relogio { font-family: var(--fonte-mono); color: var(--cor-texto-2); font-size: var(--t-2); }
.sinais { display: flex; gap: var(--e-3); font-family: var(--fonte-mono); font-size: var(--t-1); text-transform: lowercase; margin-left: auto; }
.sinal-ok { color: var(--cor-acento); }
.sinal-aviso { color: var(--cor-aviso); }
.sinal-erro { color: var(--cor-perigo); }
.sinal-neutro { color: var(--cor-texto-3); }
.abas { display: flex; gap: var(--e-1); }
.abas button { background: transparent; color: var(--cor-texto-3); border-color: transparent; padding: var(--e-1) var(--e-3); }
.abas button[aria-selected="true"] { color: var(--cor-acento); border-color: var(--cor-acento); }
.faixa {
  display: flex; align-items: center; justify-content: center; gap: var(--e-3); flex-wrap: wrap;
  margin: 0; padding: 2px var(--e-4); font-size: var(--t-1); color: var(--cor-texto-3);
  border-bottom: var(--linha) solid var(--cor-borda-suave);
}
.faixa button { font-size: var(--t-1); padding: 0 var(--e-2); }

/* ---- painel da aba */
.painel { padding: var(--e-5) var(--e-4) var(--e-6); max-width: var(--largura-max); margin: 0 auto; }
.alerta {
  margin: 0 0 var(--e-4); padding: var(--e-3) var(--e-4); font-size: var(--t-2);
  background: var(--cor-perigo-suave); color: var(--cor-perigo); border: var(--linha) solid var(--cor-perigo);
}
.grade-topo { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(220px, 1fr); gap: var(--e-4); }
.grade-blocos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); margin-top: var(--e-4); }
.bloco { padding: var(--e-4); display: grid; gap: var(--e-3); align-content: start; }
.bloco-cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2); }

/* ---- próxima ação */
.proxima { padding: var(--e-5); display: grid; gap: var(--e-3); align-content: start; }
.proxima .titulo { margin: 0; font-family: var(--fonte-mono); font-size: var(--t-6); line-height: var(--entrelinha-justa); overflow-wrap: anywhere; }
.contexto { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3); align-items: center; font-size: var(--t-2); color: var(--cor-texto-2); }
.acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
a.botao {
  display: inline-block; text-decoration: none; font-family: var(--fonte-mono); font-size: var(--t-2); letter-spacing: .04em;
  text-transform: lowercase; padding: var(--e-2) var(--e-4);
  border: var(--linha) solid var(--cor-acento); background: var(--cor-acento); color: var(--cor-acento-texto);
}
@media (hover: hover) and (pointer: fine) { a.botao:hover { background: transparent; color: var(--cor-acento); } }
.menu-adiar { display: inline-flex; gap: var(--e-1); flex-wrap: wrap; }

/* ---- anel de carga */
.carga { padding: var(--e-4); display: grid; justify-items: center; gap: var(--e-2); align-content: center; text-align: center; }
.anel { width: 132px; height: 132px; }
.anel circle { fill: none; stroke-width: 8; }
.anel .trilho { stroke: var(--cor-borda-suave); }
.anel .valor { stroke: var(--cor-acento); stroke-linecap: butt; transition: stroke-dashoffset var(--dur-3) var(--curva); }
.anel.alto .valor { stroke: var(--cor-aviso); }
.anel text { fill: var(--cor-texto); font-family: var(--fonte-mono); font-size: 26px; }
.carga details { font-size: var(--t-1); color: var(--cor-texto-3); max-width: 260px; }
.carga summary { cursor: pointer; }

/* ---- chips */
.chip {
  font-family: var(--fonte-mono); font-size: var(--t-1); text-transform: lowercase; padding: 1px var(--e-2);
  border: var(--linha) solid var(--cor-borda-suave); color: var(--cor-texto-2);
}
.chip-motivo { border-color: var(--cor-acento); color: var(--cor-acento); }
.chip-prazo { border-color: var(--cor-aviso); color: var(--cor-aviso); }
.chip-venceu { border-color: var(--cor-perigo); color: var(--cor-perigo); }
.chip-parado { border-color: var(--cor-aviso); color: var(--cor-aviso); }

/* ---- linhas de lista (corpo legível em sans) */
.linhas { display: grid; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.linha {
  display: grid; gap: var(--e-1); padding: var(--e-2) var(--e-3);
  border-left: 2px solid var(--cor-borda-suave); background: var(--cor-superficie-2);
  transition: opacity var(--dur-2) var(--curva), transform var(--dur-2) var(--curva);
}
.linha.saindo { opacity: 0; transform: translateX(12px); transition-timing-function: var(--curva-saida); }
.linha .titulo { margin: 0; font-size: var(--t-3); font-weight: var(--peso-medio); overflow-wrap: anywhere; }
.linha .rodape { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); align-items: center; font-size: var(--t-1); color: var(--cor-texto-3); }
.linha .acoes button { font-size: var(--t-1); padding: 2px var(--e-2); }
.onde { color: var(--cor-acento); text-decoration: none; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { a.onde:hover { text-decoration: underline; } }
.vazio { margin: 0; color: var(--cor-texto-3); font-size: var(--t-2); }

/* ---- barras da semana */
.barras { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--e-2); align-items: end; height: 120px; }
.barra { display: grid; gap: var(--e-1); justify-items: center; align-content: end; height: 100%; }
.barra .coluna { width: 100%; max-width: 28px; background: var(--cor-borda-suave); min-height: 2px; transition: height var(--dur-3) var(--curva); }
.barra.recorde .coluna { background: var(--cor-acento); }
.barra span { font-family: var(--fonte-mono); font-size: var(--t-1); color: var(--cor-texto-3); }
.barra.recorde span.n { color: var(--cor-acento); }

/* ---- listas recolhidas */
.dobra { margin-top: var(--e-4); padding: var(--e-3) var(--e-4); }
.dobra summary { cursor: pointer; font-family: var(--fonte-mono); font-size: var(--t-2); text-transform: lowercase; letter-spacing: .06em; color: var(--cor-texto-2); }
.dobra[open] summary { margin-bottom: var(--e-3); }

/* ---- texto pronto e comando */
.texto-pronto { display: grid; gap: var(--e-2); }
.texto-pronto pre {
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: var(--t-2);
  background: var(--cor-fundo); border: var(--linha) dashed var(--cor-borda-suave); padding: var(--e-3);
}
.texto-pronto pre.comando { font-family: var(--fonte-mono); font-size: var(--t-1); }
.texto-pronto button { justify-self: start; }
.texto-dobra summary { cursor: pointer; font-size: var(--t-1); font-family: var(--fonte-mono); color: var(--cor-acento); text-transform: lowercase; }
.texto-dobra[open] summary { margin-bottom: var(--e-2); }

/* ---- conectar o Asana */
.conectar { margin-top: var(--e-4); padding: var(--e-4) var(--e-5); display: grid; gap: var(--e-2); }
.conectar h3 { margin: 0; font-family: var(--fonte-mono); font-size: var(--t-4); text-transform: lowercase; }
.conectar ol { margin: 0; padding-left: var(--e-5); display: grid; gap: var(--e-1); color: var(--cor-texto-2); font-size: var(--t-2); }
.conectar-form { display: grid; gap: var(--e-3); max-width: 420px; margin-top: var(--e-2); }
.conectar-form button { justify-self: start; }

/* ---- fila */
.filtros { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0 0 var(--e-4); }
.filtros input, .filtros select { font-size: var(--t-2); padding: var(--e-1) var(--e-3); max-width: 100%; }
.filtros input { flex: 1 1 240px; }
.quadro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
.quadro .bloco-largo { grid-column: 1 / -1; }

/* ---- barra de comando (rodapé) */
.comando {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; gap: var(--e-2); align-items: center; padding: var(--e-3) var(--e-4);
  background: var(--cor-fundo); border-top: var(--linha) solid var(--cor-borda);
}
.comando .prompt { font-family: var(--fonte-mono); color: var(--cor-acento); }
.comando input { flex: 1; min-width: 0; font-family: var(--fonte-mono); font-size: var(--t-2); }
.comando select { font-size: var(--t-2); }
.aviso-rodape { font-family: var(--fonte-mono); font-size: var(--t-1); color: var(--cor-acento); white-space: nowrap; }

/* ---- telas menores */
@media (max-width: 62.5em) {
  .grade-topo { grid-template-columns: 1fr; }
  .grade-blocos, .quadro { grid-template-columns: 1fr; }
  .carga { grid-auto-flow: column; justify-content: start; text-align: left; }
}
@media (max-width: 37.5em) {
  .painel { padding: var(--e-4) var(--e-3) var(--e-5); }
  .proxima { padding: var(--e-4); }
  .proxima .titulo { font-size: var(--t-4); }
  .topo { gap: var(--e-2); padding: var(--e-2) var(--e-3); }
  .marca { order: 0; }
  .marca .status { font-size: 0; }          /* no celular fica só o ponto de status */
  .marca .status::before { font-size: var(--t-2); }
  .marca .discreto { display: none; }
  .abas { order: 1; }
  #botao-sair { order: 2; margin-left: auto; padding: var(--e-1) var(--e-3); }
  .sinais { order: 3; margin-left: 0; width: 100%; }
  .relogio { display: none; }
  .carga { grid-auto-flow: column; justify-content: start; text-align: left; padding: var(--e-3); }
  .anel { width: 88px; height: 88px; }
  .comando { padding: var(--e-2) var(--e-3); }
  .comando .prompt, .comando select { display: none; }
}

@media (min-width: 106.25em) {
  .painel { max-width: var(--largura-max-larga); }
}

/* ---- refinamento "HUD minimalista" (04/10): rótulo em mono maiúsculo, título em sans, respiro */
.rotulo { text-transform: uppercase; letter-spacing: .14em; font-size: .6875rem; }
.proxima .titulo { font-family: var(--fonte); font-weight: var(--peso-medio); letter-spacing: -.01em; }
.moldura { border: var(--linha) solid var(--cor-borda-suave); background: var(--cor-superficie); }
.bloco, .proxima, .carga { padding: var(--e-5); }
.grade-blocos { gap: var(--e-5); margin-top: var(--e-5); }
.grade-topo { gap: var(--e-5); }

/* ---- movimento: entrada em sequência curta, só ao abrir a tela */
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.entrando { animation: entrar var(--dur-2) var(--curva-entrada) both; animation-delay: calc(var(--i, 0) * 35ms); }

/* ---- foco de teclado em itens */
[data-item] { outline: none; }
[data-item]:focus-visible { box-shadow: inset 0 0 0 1px var(--cor-acento); border-left-color: var(--cor-acento); }

/* ---- aviso com desfazer */
.toast {
  position: fixed; left: 50%; bottom: 76px; z-index: 4; transform: translateX(-50%);
  display: flex; gap: var(--e-3); align-items: center; padding: var(--e-2) var(--e-3) var(--e-2) var(--e-4);
  background: var(--cor-superficie); border: var(--linha) solid var(--cor-acento); color: var(--cor-texto);
  font-family: var(--fonte-mono); font-size: var(--t-2);
  animation: entrar var(--dur-2) var(--curva) both;
}
.toast button { padding: 2px var(--e-3); }

/* ---- atalhos */
.atalhos {
  position: fixed; right: var(--e-4); bottom: 76px; z-index: 4; padding: var(--e-3) var(--e-4);
  background: var(--cor-superficie); border: var(--linha) solid var(--cor-borda); font-family: var(--fonte-mono); font-size: var(--t-1);
}
.atalhos dl { display: grid; grid-template-columns: auto 1fr; gap: var(--e-1) var(--e-3); margin: 0; }
.atalhos dt { color: var(--cor-acento); }
.atalhos dd { margin: 0; color: var(--cor-texto-2); }
kbd { font-family: var(--fonte-mono); }

@media (prefers-reduced-motion: reduce) {
  .entrando, .toast { animation: none; }
}
.proxima { transition: opacity var(--dur-2) var(--curva); }
.proxima.saindo { opacity: .35; }
@media (max-width: 37.5em) {
  #botao-atalhos, .atalhos { display: none !important; }  /* no celular não há teclado físico */
}

/* ---------------------------------------------------------------- fundo vivo
   Só transform e opacity animados (o navegador compõe sem repintar). Pausa com a aba escondida,
   com "fundo parado" e com prefers-reduced-motion. O véu garante a leitura por cima. */
#fundo { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--cor-fundo); pointer-events: none; }
#fundo .aurora {
  position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; filter: blur(64px);
  will-change: transform; animation: deriva var(--fundo-lento) ease-in-out infinite alternate;
}
#fundo .a1 { background: radial-gradient(circle, var(--aurora-1), transparent 66%); top: -22vmax; left: -16vmax; }
#fundo .a2 { background: radial-gradient(circle, var(--aurora-2), transparent 66%); bottom: -26vmax; right: -12vmax;
  animation-duration: calc(var(--fundo-lento) * 1.3); animation-direction: alternate-reverse; }
#fundo .a3 { background: radial-gradient(circle, var(--aurora-3), transparent 66%); top: 28%; left: 38%;
  width: 46vmax; height: 46vmax; animation-duration: calc(var(--fundo-lento) * .8); }
@keyframes deriva {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6vmax, 4vmax, 0) scale(1.08); }
  100% { transform: translate3d(-4vmax, 7vmax, 0) scale(.96); }
}
#fundo .grade {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--cor-grade) 1px, transparent 1px),
                    linear-gradient(90deg, var(--cor-grade) 1px, transparent 1px);
  background-size: 32px 32px;
}
#fundo .varredura {
  position: absolute; left: 0; right: 0; top: 0; height: 28vh; opacity: .9;
  background: linear-gradient(180deg, transparent, var(--cor-grade), transparent);
  transform: translate3d(0, -30vh, 0); will-change: transform;
  animation: varrer var(--fundo-varredura) linear infinite;
}
@keyframes varrer { to { transform: translate3d(0, 130vh, 0); } }
#fundo .pontos i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--cor-texto-3); opacity: .2;
  will-change: transform, opacity; animation: piscar 9s ease-in-out infinite alternate, flutuar 38s linear infinite;
}
#fundo .pontos i:nth-child(1) { top: 8%; left: 14%; animation-delay: -7s, -11s; }
#fundo .pontos i:nth-child(2) { top: 22%; left: 72%; animation-delay: -14s, -22s; }
#fundo .pontos i:nth-child(3) { top: 35%; left: 30%; animation-delay: -21s, -33s; }
#fundo .pontos i:nth-child(4) { top: 48%; left: 85%; animation-delay: -28s, -7s; }
#fundo .pontos i:nth-child(5) { top: 61%; left: 12%; animation-delay: -4s, -18s; }
#fundo .pontos i:nth-child(6) { top: 74%; left: 58%; animation-delay: -11s, -29s; }
#fundo .pontos i:nth-child(7) { top: 86%; left: 26%; animation-delay: -18s, -3s; }
#fundo .pontos i:nth-child(8) { top: 15%; left: 44%; animation-delay: -25s, -14s; }
#fundo .pontos i:nth-child(9) { top: 29%; left: 90%; animation-delay: -1s, -25s; }
#fundo .pontos i:nth-child(10) { top: 42%; left: 6%; animation-delay: -8s, -36s; }
#fundo .pontos i:nth-child(11) { top: 55%; left: 66%; animation-delay: -15s, -10s; }
#fundo .pontos i:nth-child(12) { top: 68%; left: 38%; animation-delay: -22s, -21s; }
#fundo .pontos i:nth-child(13) { top: 81%; left: 80%; animation-delay: -29s, -32s; }
#fundo .pontos i:nth-child(14) { top: 93%; left: 50%; animation-delay: -5s, -6s; }
#fundo .pontos i:nth-child(15) { top: 5%; left: 62%; animation-delay: -12s, -17s; }
#fundo .pontos i:nth-child(16) { top: 38%; left: 52%; animation-delay: -19s, -28s; }
#fundo .pontos i:nth-child(17) { top: 64%; left: 92%; animation-delay: -26s, -2s; }
#fundo .pontos i:nth-child(18) { top: 90%; left: 8%; animation-delay: -2s, -13s; }
@keyframes piscar { from { opacity: .1; } to { opacity: .55; } }
@keyframes flutuar { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -70px, 0); } }
#fundo .veu { position: absolute; inset: 0; background: var(--veu); }
html[data-fundo="parado"] #fundo *, html.fundo-pausado #fundo * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { #fundo * { animation: none !important; } }

/* superfícies deixam passar um fio do fundo vivo */
.recorte, .moldura, .comando, .topo { background: color-mix(in oklch, var(--cor-superficie) 90%, transparent); }
.topo, .comando { background: color-mix(in oklch, var(--cor-fundo) 86%, transparent); backdrop-filter: none; }

/* ---------------------------------------------------------------- tela de entrada */
.marca-entrada { display: flex; align-items: center; gap: var(--e-2); }
.cartao { animation: entrar var(--dur-3) var(--curva-entrada) both; }
input { transition: border-color var(--dur-1) var(--curva), box-shadow var(--dur-1) var(--curva); }
input:focus-visible { outline: none; border-color: var(--cor-foco); box-shadow: 0 0 0 3px var(--cor-acento-suave); }

/* ---------------------------------------------------------------- tema */
.painel-tema {
  position: fixed; right: var(--e-4); top: 56px; z-index: 4; display: grid; gap: var(--e-3); padding: var(--e-4);
  background: var(--cor-superficie); border: var(--linha) solid var(--cor-borda); min-width: 220px;
  animation: entrar var(--dur-2) var(--curva-entrada) both;
}
.temas { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.opcao-tema { background: transparent; color: var(--cor-texto-2); border-color: var(--cor-borda-suave); padding: var(--e-1) var(--e-2); font-size: var(--t-1); }
.opcao-tema[aria-checked="true"] { color: var(--cor-acento); border-color: var(--cor-acento); }
.linha-opcao { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-2); }

/* ---------------------------------------------------------------- cor com significado */
.chip-motivo { border-color: var(--cor-acao); color: var(--cor-acao); }
a.botao { background: var(--cor-acao); border-color: var(--cor-acao); }
@media (hover: hover) and (pointer: fine) { a.botao:hover { background: transparent; color: var(--cor-acao); } }
.linha.com-categoria { border-left-color: var(--cat); }
.chip-categoria { color: var(--cat); border-color: currentColor; }
@media (max-width: 37.5em) { #botao-tema { padding: var(--e-1) var(--e-2); } .painel-tema { left: var(--e-3); right: var(--e-3); } }

/* na entrada não há lista para ler: o fundo vivo aparece mais */
html[data-vista="entrada"] #fundo .veu, html[data-vista="primeiro"] #fundo .veu, html[data-vista="troca"] #fundo .veu { opacity: .55; }
#fundo .veu { transition: opacity var(--dur-3) var(--curva); }
@media (max-width: 37.5em) {
  #botao-tema { font-size: 0; padding: var(--e-1) var(--e-2); }
  #botao-tema::before { content: "\25D0"; font-size: var(--t-3); }
}

/* ---------------------------------------------------------------- filtros ligados na fila */
.fila-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin: 0 0 var(--e-4); }
.filtros-ativos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); }
.chip-filtro, .filtros-ativos .botao-leve { font-size: var(--t-1); padding: 1px var(--e-2); }
.chip-filtro { background: var(--cor-acento-suave); color: var(--cor-acento); border-color: var(--cor-acento); text-transform: none; }
@media (hover: hover) and (pointer: fine) { .chip-filtro:hover { background: transparent; color: var(--cor-acento); } }
.sem-resultado { justify-items: start; }

/* ---------------------------------------------------------------- break-ui (04/10): dados de pior caso */
.topo, .comando { background: var(--cor-fundo); }   /* opaco: o texto que rola não aparece por baixo */
.grade-blocos, .quadro { align-items: start; }      /* bloco curto não estica até o mais alto */
.carga { align-content: start; }                     /* o anel fica no alto, à vista */
span.onde { color: var(--cor-texto-2); }             /* "onde" sem link não parece link */
.chip { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }  /* texto inteiro na dica */
.bloco, .proxima, .linhas, .linha { grid-template-columns: minmax(0, 1fr); }  /* conteúdo largo não alarga a coluna */
.linha { content-visibility: auto; contain-intrinsic-size: auto 76px; }  /* lista longa: só desenha o que está à vista */
.barras { height: auto; min-height: 120px; }         /* texto maior não espreme as barras */
.barra { height: auto; }
.previa {
  margin: 0; color: var(--cor-texto-2); font-size: var(--t-2); white-space: pre-line; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
}
.texto-dobra[open] + .previa { display: none; }
.ver-mais { justify-self: start; margin-top: var(--e-2); font-size: var(--t-1); padding: 2px var(--e-3); }
.secao-recolhida > summary { display: flex; align-items: baseline; gap: var(--e-2); cursor: pointer; list-style: none; }
.secao-recolhida > summary::-webkit-details-marker { display: none; }
.secao-recolhida > summary::before { content: "\25B8"; color: var(--cor-texto-3); font-size: var(--t-1); }
.secao-recolhida[open] > summary::before { content: "\25BE"; }
.secao-recolhida > summary .numero { margin-left: auto; }
.secao-recolhida[open] > summary { margin-bottom: var(--e-3); }
@media (max-height: 32.5em) { .topo { position: static; } }  /* zoom de 200%: o topo não come a tela */
@media (max-width: 37.5em) {
  .filtros select { flex: 1 1 calc(50% - var(--e-2)); min-width: 0; }  /* filtros em duas colunas: a lista aparece antes */
}
#hoje-dobras > .rotulo { margin-top: var(--e-4); }  /* "N anotações para triar" não cola na lista de cima */

/* ---------------------------------------------------------------- revisão de movimento (04/10) */
/* 3 · a entrada não prende o estado final (o "saindo" esmaece de verdade) */
.entrando { animation: entrar var(--dur-2) var(--curva-entrada) backwards; animation-delay: calc(var(--i, 0) * 35ms); }
/* 1 · aviso de desfazer centrado sem transform, entrando por transição */
.toast {
  left: 0; right: 0; margin-inline: auto; width: fit-content; max-width: calc(100% - 32px); transform: none; animation: none;
  transition: opacity 200ms cubic-bezier(.23, 1, .32, 1), transform 200ms cubic-bezier(.23, 1, .32, 1);
}
@starting-style { .toast { opacity: 0; transform: translateY(8px); } }
/* 5 · a linha sai em 150 ms, com a mesma curva do resto */
.linha { transition: opacity 150ms cubic-bezier(.23, 1, .32, 1), transform 150ms cubic-bezier(.23, 1, .32, 1); }
.linha.saindo { opacity: 0; transform: translateX(8px); }
[data-item] { scroll-margin: 72px 0 104px; }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
  .linha, .linha.saindo { transition: opacity 150ms linear; transform: none; }
}
/* 8 · fundo: sem blur (o gradiente já termina transparente); dentro da Estação só as auroras */
#fundo .aurora { filter: none; }
#fundo .a1 { background: radial-gradient(circle, var(--aurora-1), transparent 70%); }
#fundo .a2 { background: radial-gradient(circle, var(--aurora-2), transparent 70%); }
#fundo .a3 { background: radial-gradient(circle, var(--aurora-3), transparent 70%); }
html[data-vista="estacao"] #fundo .varredura, html[data-vista="estacao"] #fundo .pontos { display: none; }
/* 9 · "fundo parado" para de verdade (não congela no meio) e solta as camadas */
html[data-fundo="parado"] #fundo * { animation: none !important; will-change: auto !important; }
/* toque: o botão afunda ao apertar (hover só com mouse, acima) */
button, a.botao { transition: background 150ms var(--curva), color 150ms var(--curva), border-color 150ms var(--curva), transform 120ms var(--curva); }
button:active, a.botao:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { button:active, a.botao:active { transform: none; } }
/* manter conectado e aparelhos */
.manter { font-size: var(--t-2); color: var(--cor-texto-2); }
.aparelhos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); max-width: 320px; }
.aparelho { display: grid; gap: 2px; font-size: var(--t-2); }
.aparelho .discreto { font-size: var(--t-1); }
.aparelho.atual > span:first-child { color: var(--cor-acento); }
#encerrar-outros { justify-self: start; font-size: var(--t-1); padding: 2px var(--e-3); }
/* carga sem teto: o anel mostra de onde vêm os pontos */
.anel .valor.parte-p1 { stroke: var(--cor-perigo); }
.anel .valor.parte-esperando { stroke: var(--cor-aviso); }
.anel .valor.parte-venceu { stroke: var(--cor-info); }
.anel text.sub { font-size: 11px; fill: var(--cor-texto-3); letter-spacing: .08em; }
/* dia antes do registro: traço, não zero */
.barra.sem-registro .coluna { background: transparent; border-top: 1px dashed var(--cor-borda-suave); }
.barra.sem-registro span.n { color: var(--cor-texto-3); }