/* links.lucpache.dev — painel de chaves sobre o LP-DS
   (tokens/base em /assets/ds/, copiados de /docker/design por sync.sh).
   Desktop: placa de identificacao a esquerda + painel de canais a direita,
   ocupando a altura da tela. Abaixo de 900px vira uma coluna. */

:root { --app: var(--alt); }

.page {
  min-height: calc(100vh - 4px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 56px);
}

/* --- Barra superior ---------------------------------------------------- */
.bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: var(--hair);
}
.bar > :last-child { justify-self: end; }
.brand { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; }
.brand img { width: 22px; height: 22px; border-radius: var(--radius); }

/* --- Area principal ---------------------------------------------------- */
.main {
  display: grid;
  grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(40px, 6vw, 112px);
  padding: clamp(40px, 7vh, 96px) 0;
}

/* --- Placa de identificacao -------------------------------------------- */
/* container: o tamanho do nome segue a largura da coluna (cqi), nao da tela */
.plate { min-width: 0; container-type: inline-size; }
.plate__status { display: flex; align-items: center; gap: var(--s2); }
.plate__name {
  /* 15cqi: "PACHECO" em Archivo 125% mede ~6.35em, entao cabe na coluna mesmo
     antes do JS rodar ou da fonte carregar (sem depender de timing) */
  font-size: min(clamp(52px, 7.4vw, 128px), 15cqi);
  margin: var(--s4) 0 var(--s4);
  /* Quebra so no ponto marcado (<wbr>, vindo de "|" no links.json): LUC / PACHE */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  /* reforco para nomes mais longos: app.js (fitName) reduz ainda mais se precisar */
  max-width: 100%;
}
.plate__tagline { color: var(--muted); font-size: clamp(16px, 1.4vw, 19px); max-width: 36ch; }
.plate__panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: var(--s5);
  margin-top: clamp(32px, 5vh, 56px);
  padding-top: var(--s5);
  border-top: var(--rule);
}
.plate__panel .ds-screen { align-content: center; }
.plate__spec { align-self: center; }
.plate__spec tr:last-child th, .plate__spec tr:last-child td { border-bottom: 0; }

/* --- Painel de canais -------------------------------------------------- */
.channels__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--s3);
  padding-bottom: var(--s3);
  border-bottom: var(--rule);
}
.channels__num { font: 500 13px/1 var(--font-mono); color: var(--signal-ink); }
.channels__head h2 { color: var(--ink); }

.board { list-style: none; padding: 0; }
.board__row {
  display: grid;
  grid-template-columns: 3ch minmax(0, auto) 1fr auto 18px;
  align-items: center;
  gap: var(--s4);
  padding: clamp(16px, 2.6vh, 24px) var(--s3);
  border-bottom: var(--hair);
  text-decoration: none;
  transition: background var(--t-fast) steps(2), color var(--t-fast) steps(2);
}
.board__num { font: 500 13px/1 var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.board__name { display: grid; gap: 5px; min-width: 0; }
.board__title {
  font: 600 clamp(17px, 1.6vw, 24px)/1.1 var(--font-display);
  font-stretch: 118%;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.board__host { font: 400 12px/1 var(--font-mono); color: var(--muted); }
.board__lead { height: 1px; border-bottom: 1.5px dotted var(--line); transform: translateY(4px); }
.board__handle {
  font: 400 14px/1.2 var(--font-mono);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 26ch;
}
.board__arrow { width: 18px; height: 18px; }

.board__row:hover,
.board__row:focus-visible { background: var(--ink); color: var(--bg); outline: 0; }
.board__row:hover :is(.board__num, .board__host, .board__handle),
.board__row:focus-visible :is(.board__num, .board__host, .board__handle) { color: var(--bg); }
.board__row:hover .board__lead,
.board__row:focus-visible .board__lead { border-color: color-mix(in srgb, var(--bg) 40%, transparent); }

.empty { padding: var(--s5) 0; color: var(--muted); }

/* --- Rodape ------------------------------------------------------------ */
.footer {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) 0 var(--s5);
  border-top: var(--hair);
}
.footer a { text-decoration: none; }
.footer a:hover { color: var(--ink); }

/* --- Responsivo -------------------------------------------------------- */
@media (max-width: 900px) {
  .main { grid-template-columns: 1fr; align-items: start; gap: var(--s7); }
  .plate__name { font-size: min(clamp(44px, 13vw, 88px), 15cqi); }
}
@media (max-width: 640px) {
  .bar__meta { display: none; }
  .bar { grid-template-columns: 1fr auto; }
  .plate__panel { grid-template-columns: 1fr; }
  .plate__panel .ds-screen { justify-self: start; }
}
@media (max-width: 480px) {
  .board__row {
    grid-template-columns: 3ch 1fr 18px;
    grid-template-areas: "num name arrow" ". handle .";
    row-gap: 8px;
  }
  .board__num { grid-area: num; }
  .board__name { grid-area: name; }
  .board__lead { display: none; }
  .board__handle { grid-area: handle; max-width: none; }
  .board__arrow { grid-area: arrow; }
}