/**
 * ============================================================================
 * archive-ui.css
 * ----------------------------------------------------------------------------
 * A linguagem de "ficha de arquivo" compartilhada entre as telas públicas:
 * rótulo de seção, painel, linha chave/valor e chip.
 *
 * POR QUE ESTE ARQUIVO EXISTE
 * A Artist Public Screen já estabeleceu essa linguagem, mas ela mora como
 * utilitários Tailwind inline dentro de artist-public.js — não havia nada
 * extraível para o Video Archive reaproveitar, só valores para copiar. Os
 * tokens abaixo foram MEDIDOS na Artist Page (não inventados) para que as duas
 * telas convirjam em vez de divergir:
 *
 *   rótulo de seção .... 11px / tracking-widest / uppercase / branco 80%
 *   chrome do painel ... bg-black/40 + border-white/5 + rounded-lg
 *   linha .............. px-4 py-3, divisor branco/5, zebra branco/2
 *   chave .............. 10px / gray-400 / uppercase / tracking-widest
 *   valor .............. branco / monoespaçado / alinhado à direita
 *
 * O Video Archive consome esta camada hoje. A Artist Page continua com os
 * utilitários dela e pode migrar bloco a bloco depois — por isso os seletores
 * são genéricos (.arc-*) e não carregam nada específico de vídeo.
 * ============================================================================
 */

:root {
  --arc-panel-bg: rgba(0, 0, 0, 0.40);
  --arc-border: rgba(255, 255, 255, 0.055);
  --arc-zebra: rgba(255, 255, 255, 0.02);
  --arc-key: rgba(156, 163, 175, 0.92);
  --arc-value: #ffffff;
  --arc-accent: #22d3ee;
  --arc-radius: 9px;
  --arc-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Rótulo de seção. Fica FORA do painel, como na Artist Page — o título
   pertence à seção, não à moldura. */
.arc-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 9px;
  padding-inline: 3px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.arc-label > i { color: var(--arc-accent); font-size: 9px; opacity: 0.75; }

.arc-panel {
  overflow: hidden;
  border: 1px solid var(--arc-border);
  border-radius: var(--arc-radius);
  background: var(--arc-panel-bg);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}

/* Linha chave/valor. <dl> em vez do <ul> da Artist Page: mesma aparência,
   semântica correta para pares de dado. */
.arc-rows { display: flex; flex-direction: column; margin: 0; }

.arc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--arc-border);
}

.arc-row:last-child { border-bottom: 0; }
.arc-row:nth-child(odd) { background: var(--arc-zebra); }

.arc-row > dt {
  flex: 0 0 auto;
  color: var(--arc-key);
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.arc-row > dd {
  min-width: 0;
  margin: 0;
  color: var(--arc-value);
  font-family: var(--arc-mono);
  font-size: 12.5px;
  line-height: 18px;
  text-align: right;
  overflow-wrap: anywhere;
}

.arc-row--accent > dd { color: var(--arc-accent); font-weight: 700; }

.arc-chips { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }

.arc-chip {
  padding: 3px 8px;
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: 4px;
  background: rgba(34, 211, 238, 0.07);
  color: rgba(165, 243, 252, 0.86);
  font-family: var(--arc-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}

.arc-empty { padding: 11px 13px; color: rgba(255, 255, 255, 0.34); font-size: 12px; font-style: italic; }