/* planadores.css -- página /pals/planadores. A cor de cada card vem do elemento do Pal ou da raridade do item (--cor). */
.pl-legenda{ display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin:0 0 1.5rem; font-size:.8rem; color: var(--text-dim); }
.pl-legenda b{ color: var(--text); }
.pl-secao{ margin-bottom:2rem; }
.pl-titulo{ display:flex; align-items:center; gap:.6rem; margin:0 0 .25rem; font-size:1.15rem; font-weight:700; color: var(--text-bright); }
.pl-titulo i{ color: var(--gold); }
.pl-sub{ margin:0 0 1rem; font-size:.85rem; color: var(--text-dim); }

.pl-grade{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap:1rem; }
.pl-card{
  --cor:#9aa0b4;
  display:flex; flex-direction:column; gap:.75rem; padding:1rem; border-radius:16px;
  border:1px solid color-mix(in srgb, var(--cor) 30%, var(--hairline));
  background: radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--cor) 14%, transparent), transparent 60%), linear-gradient(170deg, var(--panel) 0%, var(--panel-2) 100%);
  box-shadow: 0 10px 26px rgba(0,0,0,.3);
}
.pl-card-topo{ display:flex; align-items:center; gap:.75rem; text-decoration:none; color: var(--text); }
.pl-card-topo img{ width:64px; height:64px; object-fit:contain; flex-shrink:0; border-radius:14px; background: rgba(0,0,0,.25); }
.pl-card-topo span{ display:flex; flex-direction:column; min-width:0; }
.pl-card-topo b{ font-family: var(--font-display); font-size:1.5rem; line-height:1.1; color: color-mix(in srgb, var(--cor) 70%, white 30%); }
.pl-card-topo small{ font-size:.78rem; color: var(--text-dim); }
.pl-card-topo:hover b, .pl-card-topo:focus-visible b{ text-decoration:underline; }
.pl-tabela{ width:100%; border-collapse:collapse; font-size:.82rem; font-variant-numeric: tabular-nums; }
.pl-tabela th, .pl-tabela td{ padding:.35rem .45rem; border-top:1px solid var(--hairline); text-align:right; }
.pl-tabela thead th{ border-top:0; font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color: var(--text-dim); }
.pl-tabela tbody th, .pl-tabela thead th:first-child{ text-align:left; }
.pl-tabela tbody th{ color: var(--gold); font-weight:600; letter-spacing:.05em; }
.pl-tabela td{ color: var(--text-bright); }
.pl-tabela tbody tr:last-child td{ color: color-mix(in srgb, var(--cor) 60%, white 40%); font-weight:700; }

.pl-itens{ display:flex; flex-direction:column; gap:.5rem; }
.pl-item{
  --cor:#9aa0b4;
  display:grid; grid-template-columns: 48px minmax(140px, 1.4fr) repeat(4, minmax(0, 1fr)); gap:.75rem; align-items:center;
  padding:.6rem .8rem; border-radius:12px; text-decoration:none; color: var(--text);
  border:1px solid var(--hairline); border-left:3px solid var(--cor); background: var(--panel-2);
}
.pl-item:hover, .pl-item:focus-visible{ border-color: var(--cor); color: var(--text); }
.pl-item img{ width:48px; height:48px; object-fit:contain; }
.pl-item-nome{ font-weight:700; color: var(--text-bright); min-width:0; overflow-wrap:anywhere; }
.pl-item-num{ display:flex; flex-direction:column; min-width:0; }
.pl-item-num b{ color: var(--text-bright); font-variant-numeric: tabular-nums; }
.pl-item-num small{ font-size:.7rem; color: var(--text-dim); }
.montador-notas code{ font-family: var(--font-mono); font-size:.92em; color: var(--text); }
@media (max-width:640px){
  .pl-item{ grid-template-columns: 48px 1fr 1fr; }
  .pl-item-nome{ grid-column: 2 / -1; }
}