/* =========================================================================
 * css/pda.css — PDA DE CAMPO + RÁDIO (src/pda.js), tecla [P].
 *
 * CSS PURO, sem a moldura em PNG: o HANDOFF §9 diz que tudo que os PNGs
 * desenham "também existe como CSS puro em tokens.css". O aparelho é feito
 * das classes da entrega (.pz-painel, .pz-lcd, .pz-botao, .pz-knob) e de
 * tokens — nenhum hex aqui (§2), raio zero em tudo (§2).
 *
 * FORMA: DISPLAY DE RÁDIO DE CARRO (1-DIN), a pedido do dono — o mais baixo e
 * horizontal possível, ~430×104. VOL numa ponta, PWR na outra, display de 4
 * LINHAS no meio (status + 3 de conteúdo), as abas como botões de memória
 * embaixo dele, direcional pequeno. Tudo bem menor que o §4 (que mede painel
 * de tela cheia): knob 30, memória 16 de altura, direcional 18×14.
 *
 * O REGISTRO é papel de impressora saindo da fenda no topo — também a pedido
 * do dono (ver src/pda.js). O papel é `--pz-tinta-forte`, a tinta mais clara
 * da entrega: cor de osso, sem hex novo.
 * ========================================================================= */

#pz-pda {
  --pda-escala: 1;
  --pda-pad: 10px;
  --pda-knob: 30px;
  --pda-lcd-w: 260px;
  --pda-linha: 14px;               /* uma linha do display */
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: var(--pz-grelha);
  /* §1 rota nítida: px reais. A escala só entra quando a tela é pequena demais
     pro aparelho inteiro (src/pda.js ajustarEscala), ancorada embaixo. */
  transform: translateX(-50%) scale(var(--pda-escala));
  transform-origin: 50% 100%;
  font-family: var(--pz-font-dados);
  text-transform: uppercase;
  user-select: none;
}
#pz-pda[hidden] { display: none; }   /* §5: fechar é corte seco */

/* §5: abrir = opacidade 0→1 em 120ms. Nunca slide, nunca escala. */
#pz-pda.pda--liga { animation: pda-abre 120ms linear; }
@keyframes pda-abre { from { opacity: 0; } to { opacity: 1; } }

/* ---- casco: a frente do rádio ------------------------------------------ */
.pda-casco {
  position: relative;
  flex-direction: row;
  align-items: center;
  gap: var(--pda-pad);
  padding: 7px var(--pda-pad);
  pointer-events: auto;
}

.pda-knob { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pda-knob .pz-knob { width: var(--pda-knob); height: var(--pda-knob); padding: 0; }
.pda-knob .pz-knob::after { top: 3px; height: 9px; }
.pda-knob span { font-size: 9px; letter-spacing: 0.12em; color: var(--pz-tinta-fraca); }
/* o knob de VOL gira com o volume (src/pda.js escreve o rotate) */
.pda-knob [data-pda='VOL'] { transition: transform 90ms linear; }

.pda-meio { display: flex; flex-direction: column; gap: 4px; width: var(--pda-lcd-w); }

/* ---- display: 4 linhas ------------------------------------------------- */
.pda-lcd {
  box-sizing: border-box;
  width: var(--pda-lcd-w);
  height: calc(4 * var(--pda-linha) + 12px);
  display: flex;
  flex-direction: column;
  padding: 3px 7px;
  font-size: var(--pz-fs-log);
  line-height: var(--pda-linha);
  letter-spacing: 0.04em;
  overflow: hidden;
}
/* §5 LCD "ligando": 300ms de brilho 0→1 com um flicker; depois o flicker de 7s */
.pda--liga .pda-lcd { animation: pda-lcd-liga 300ms linear, pz-flick 7s 300ms infinite; }
@keyframes pda-lcd-liga {
  0% { filter: brightness(0); } 45% { filter: brightness(0.8); }
  55% { filter: brightness(0.3); } 100% { filter: brightness(1); }
}

/* linha 1: status (hora · aba | HP RAD) */
.pda-lcd__topo {
  display: flex; justify-content: space-between; gap: 8px; white-space: nowrap;
  height: var(--pda-linha);
  border-bottom: 1px solid var(--pz-lcd-tinta);
  margin-bottom: 1px;
}
.pda-alarme { animation: pz-blink 1s infinite; }   /* RAD ≥ 75: o alarme é o teto */

/* linhas 2–4 */
.pda-lcd__corpo { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.pda-linha { display: flex; align-items: center; gap: 6px; height: var(--pda-linha); white-space: nowrap; overflow: hidden; padding: 0 2px; }
.pda-linha > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pda-linha > i { font-style: normal; flex: none; }
/* seleção = entrada de menu ATIVA do §5 (barra sólida + caret >), em tinta de LCD */
.pda-linha--sel { background: var(--pz-lcd-tinta); color: var(--pz-lcd-topo); }
.pda-linha--sel::before { content: '>'; flex: none; }
.pda-fraco { opacity: 0.4; }                        /* §5 "sem sinal": tinta a 40% */
.pda-freq b { font-size: 13px; letter-spacing: var(--pz-tr-lcd); }

/* medidor do RadioLcd: o equalizador `pz-eq` dos tokens */
.pda-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; flex: none; }
.pda-eq i { width: 3px; height: 100%; background: var(--pz-lcd-tinta); transform: scaleY(0.2); transform-origin: 50% 100%; }
.pda-eq--on i { animation: pz-eq 0.7s ease-in-out infinite alternate; }
/* barra de sinal apagada: o pedaço do medidor que o chiado tomou */
.pda-eq i.pda-eq--off { opacity: 0.25; animation: none; transform: scaleY(0.2); }
.pda-eq--on i:nth-child(2) { animation-delay: -0.25s; }
.pda-eq--on i:nth-child(3) { animation-delay: -0.5s; }
.pda-eq--on i:nth-child(4) { animation-delay: -0.1s; }
.pda-eq--on i:nth-child(5) { animation-delay: -0.4s; }

/* CHAT: as mensagens e, escrevendo, a linha de entrada no pé do display */
.pda-chat__entrada[hidden] { display: none; }
.pda-chat__entrada { background: var(--pz-lcd-tinta); color: var(--pz-lcd-topo); }
.pda-chat__entrada input {
  flex: 1; min-width: 0; height: 100%;
  padding: 0; margin: 0; border: 0; outline: 0;
  background: transparent; color: inherit; caret-color: var(--pz-lcd-topo);
  font: inherit; letter-spacing: inherit; text-transform: none; user-select: text;
}

/* §5 SINTONIA: LCD apaga 120ms, ruído 200ms, texto novo entra */
.pda-lcd::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
}
.pda-lcd--sintonia::after { animation: pda-sintonia 320ms steps(1) both; }
@keyframes pda-sintonia {
  0%   { opacity: 1; background: var(--pz-lcd-base); }
  37%  { opacity: 1; background: repeating-linear-gradient(0deg, var(--pz-lcd-tinta) 0 1px, var(--pz-lcd-base) 1px 3px) 0 0 / 100% 7px; }
  55%  { opacity: 1; background: repeating-linear-gradient(0deg, var(--pz-lcd-tinta) 0 1px, var(--pz-lcd-base) 1px 3px) 0 2px / 100% 5px; }
  75%  { opacity: 1; background: repeating-linear-gradient(0deg, var(--pz-lcd-base) 0 2px, var(--pz-lcd-tinta) 2px 3px) 3px 1px / 100% 4px; }
  100% { opacity: 0; }
}

/* ---- botões de memória = as abas --------------------------------------- */
.pda-fkeys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pda-fkey { height: 16px; padding: 0; font-size: 9px; letter-spacing: 0.08em; }
.pda-fkey[aria-current='true'] { border-color: var(--pz-acento); color: var(--pz-tinta); }

/* ---- direcional: ▲ / ◀ OK ▶ / ESC ▼ ------------------------------------ */
.pda-dpad { display: grid; grid-template-columns: repeat(3, 18px); grid-auto-rows: 14px; gap: 2px; align-items: center; justify-items: center; }
.pda-tec { width: 18px; height: 14px; padding: 0; font-size: 8px; line-height: 1; letter-spacing: 0; }
.pda-tec--ok, .pda-tec--esc { font-size: 7px; }
/* LED do rádio, no canto do direcional: acento em LED é permitido (§2) */
.pda-led { width: 6px; height: 6px; background: var(--pz-traco); display: block; }
.pda-led--on { background: var(--pz-acento); box-shadow: 0 0 5px var(--pz-acento); }

/* `pressed` do §5 também pra quem aperta pelo teclado */
.pz-botao.pda-apertado { background: var(--pz-painel); color: var(--pz-acento); }

/* ---- REGISTRO: papel saindo da fenda ----------------------------------- */
/* a fenda da impressora, no topo do casco, em cima do display */
.pda-fenda {
  position: absolute;
  z-index: 2;
  top: -3px;
  left: calc(var(--pda-pad) * 2 + var(--pda-knob) + 10px);
  width: calc(var(--pda-lcd-w) - 20px);
  height: 5px;
  background: var(--pz-bg);
  border: 1px solid var(--pz-traco);
}
/* o papel nasce DENTRO da fenda: o que avança pra baixo dela some (overflow) */
.pda-papel {
  position: absolute;
  z-index: 1;
  bottom: calc(100% - 1px);
  left: calc(var(--pda-pad) * 2 + var(--pda-knob) + 20px);
  width: calc(var(--pda-lcd-w) - 40px);
  overflow: hidden;
  filter: drop-shadow(0 -1px 2px rgba(0, 0, 0, 0.45));
}
.pda-papel[hidden] { display: none; }
.pda-papel__folha {
  padding: 7px 7px 4px;
  background: linear-gradient(180deg, var(--pz-tinta-forte) 0%, var(--pz-tinta-forte) 70%, var(--pz-tinta) 100%);
  color: var(--pz-bg);
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0.03em;
  /* borda de cima rasgada: o papel foi arrancado ali */
  clip-path: polygon(0 4px, 4% 1px, 8% 3px, 13% 0, 18% 4px, 23% 2px, 28% 3px, 33% 0, 38% 3px,
    43% 1px, 49% 4px, 54% 1px, 59% 3px, 64% 0, 70% 3px, 75% 2px, 80% 4px, 85% 1px, 90% 3px,
    95% 0, 100% 3px, 100% 100%, 0 100%);
}
.pda-papel__linha { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pda-papel__linha b { margin-right: 2px; }
.pda-papel__linha--alerta { color: var(--pz-log-alerta); }
/* linha nova: o papel avança uma linha pra fora da fenda */
.pda-papel__folha--sai { animation: pda-avanca 280ms steps(4) both; }
@keyframes pda-avanca { from { transform: translateY(12px); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #pz-pda.pda--liga, .pda--liga .pda-lcd, .pda-lcd--sintonia::after, .pda-papel__folha--sai,
  .pda-alarme, .pda-eq--on i, .pda-knob [data-pda='VOL'] { animation: none; transition: none; }
}