/* ============================================================
   BFMIDI — VITRINE · PAINEL IN/OUT (CONEXÕES)
   ------------------------------------------------------------
   Três peças, na mesma ordem em qualquer largura:

   1. PALCO — o cabeçalho `.pg-head` (css/pages.css) e a foto
      traseira do modelo, iluminada como a controladora da home e
      os aparelhos da página de Apps: feixe âmbar vindo de cima,
      contraluz azul fria atrás e sombra de contato no chão. Sob
      a foto, as etiquetas brancas do chassi caem em cima de cada
      conector (posição em % da largura da foto, medida no
      arquivo — ver `silk` nas bandas do content.js), em duas
      alturas como as chamadas de um desenho técnico. A fileira de
      cada etiqueta sai do main.js (cxSilkLayout), calculada na
      pior largura: vizinhas nunca se encostam.
      Celular: cabeçalho em cima, foto embaixo. Desktop: texto à
      esquerda, palco à direita, como nos Apps.

   2. PAINEL DE CONEXÕES — uma placa grafite escovada, com rebites
      nos cantos, e as portas agrupadas por família (Saídas MIDI ·
      USB · Sem fio · Entradas). Cada família abre com o anel de
      LED do ASSUNTO (os --led-* de tokens.css, os mesmos dos Apps
      e dos Downloads) e o nome dela em rótulo NEUTRO; a cor mora
      só no anel. Cada porta é um poço com a miniatura dela — o
      conector recortado, sem moldura e sem legenda, ou o glifo de
      traço de Bluetooth e Wi-Fi —, a etiqueta branca do chassi, o
      nome e a função numa frase.
        celular ........ famílias empilhadas, portas em linha
        ≥700 (layout) .. famílias 2 × 2
        ≥1000 .......... portas da família lado a lado
        ≥1400 .......... UMA fileira, como um patch bay: as
                         famílias dividem a placa na proporção
                         das portas (`--k`), e cada porta fica em
                         pé, com a miniatura em cima

   3. PRÓXIMO PASSO — o cartão `.pg-next` de pages.css (baixar o
      editor · comprar), desenhado só quando `C.ui.next` existe.

   O topo é do SISTEMA: o micro-rótulo cai a --pg-top do topo do
   painel, na mesma altura do INFO e do SHOP (pages.css, âncora).
   Este arquivo cuida só do respiro lateral e de baixo, e o ritmo
   entre as peças é --gap-section (32 / 48 / 64 por container).

   O layout é decidido por CONTAINER QUERY (`pg`, no .panel-inner),
   não por media query: no desktop o site aplica `html { zoom: .8 }`
   e 1440 de janela viram 1800 de layout. Texto pequeno sai de
   `--pg-min` (11px no celular, 14px de layout no desktop = 11,2px
   renderizados). Tudo escopado em #panel-conects; as regras velhas
   de refine.css para `#panel-conects .panel-inner` perdem por
   especificidade (`.panel-inner.cx`), sem ser apagadas.
   ============================================================ */

/* ---------- casca ------------------------------------------- */

#panel-conects .panel-inner.cx {
  width: 100%;
  margin-inline: auto;
  padding-inline: 16px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  /* A luz do palco se abre além da coluna; quem corta é a borda do
     painel, nunca uma caixa no meio da tela. */
  overflow-x: clip;
}
@media (min-width: 601px) {
  #panel-conects .panel-inner.cx { padding-inline: 28px; padding-bottom: 44px; }
}
@media (min-width: 861px) {
  #panel-conects .panel-inner.cx { padding-inline: 48px; padding-bottom: 48px; }
}

/* O ritmo: a placa e o cartão final descem --gap-section da peça de
   cima. É margem nos FILHOS, e não `gap` na casca, porque o degrau do
   token só chega resolvido aos filhos do container. */
#panel-conects .cx-rack,
#panel-conects .cx-next { margin-top: var(--gap-section); }

/* ---------- 1. palco ---------------------------------------- */

#panel-conects .cx-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 18px;
  align-items: start;
}
/* Celular: luz baixa e quente atrás do título, a mesma do topo da página
   de Apps — a primeira tela já tem clima de palco. */
#panel-conects .cx-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -16px;
  right: -16px;
  top: -60px;
  height: 460px;
  pointer-events: none;
  /* As QUATRO bordas se dissolvem na máscara, como a luz do cabeçalho dos
     Apps: sem ela a caixa terminava numa aresta reta ao lado da cápsula e
     num corte vertical 12px antes da borda da tela (no tablet, com a
     margem maior). O azul é `closest-side`, para caber inteiro na caixa. */
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, #ff8a3d26 0%, transparent 70%),
    radial-gradient(closest-side at 80% 30%, #3d8bff1f 0%, transparent 100%);
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, #000 110px, #000 62%, transparent 100%),
    linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(180deg, transparent 0, #000 110px, #000 62%, transparent 100%),
    linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-composite: intersect;
}
#panel-conects .cx-copy { position: relative; min-width: 0; }

#panel-conects .cx-stage {
  /* As chamadas do chassi: altura da etiqueta, distância do chão do
     chassi à primeira fileira e entre as duas. A faixa que a foto
     reserva embaixo (`--cx-rail`) sai da mesma conta. */
  --tag-h: calc(var(--pg-min) + 9px);
  --t1: 14px;
  --t-row: 6px;
  --cx-rail: 0px;
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  align-self: center;
  min-width: 0;
  margin: 0;
  padding: 30px 0 0;
}
#panel-conects .cx-stage.has-silk { --cx-rail: calc(var(--t1) + var(--tag-h) * 2 + var(--t-row) + 6px); }

/* Luz. Só gradiente, zero blur; a caixa passa um pouco das bordas do
   palco e se dissolve nas pontas em vez de terminar num corte reto. */
#panel-conects .cx-lights {
  position: absolute;
  z-index: -1;
  inset: -4% 0 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
#panel-conects .cx-light { position: absolute; inset: 0; display: block; }
#panel-conects .cx-light--rim {
  background:
    radial-gradient(ellipse 40% 30% at 50% 50%, #3d8bff33 0%, #3d8bff12 48%, transparent 74%),
    radial-gradient(ellipse 58% 42% at 50% 60%, #1f33505c 0%, #14223526 50%, transparent 76%);
}
#panel-conects .cx-light--beam {
  --bw: 44deg;
  --b0: calc(180deg - var(--bw) / 2);
  background:
    radial-gradient(ellipse 26% 8% at 50% 26%, #ffc48a1f 0%, transparent 70%),
    repeating-conic-gradient(from var(--b0) at 50% -40%, #ffd9b000 0deg 1.1deg, #ffd9b00c 1.1deg 1.6deg, #ffd9b000 1.6deg 2.9deg),
    conic-gradient(from var(--b0) at 50% -40%,
      transparent 0deg,
      #ffae6a10 calc(var(--bw) * .184),
      #ffc48a26 calc(var(--bw) * .368),
      #ffd3a236 calc(var(--bw) * .5),
      #ffc48a26 calc(var(--bw) * .632),
      #ffae6a10 calc(var(--bw) * .816),
      transparent var(--bw));
  -webkit-mask-image: linear-gradient(180deg, #0000 0%, #000 14%, #000 58%, transparent 96%);
          mask-image: linear-gradient(180deg, #0000 0%, #000 14%, #000 58%, transparent 96%);
}

/* A caixa da foto tem a proporção exata do arquivo (inline, do content.js):
   sem salto de layout, e as etiquetas em % caem nos conectores. `--ar` é a
   mesma proporção como número, para limitar a ALTURA no desktop. */
#panel-conects .cx-shot {
  position: relative;
  width: 100%;
  max-width: calc(var(--cx-shot-h, 100000px) * var(--ar, 1.9));
  margin-bottom: var(--cx-rail);
}
#panel-conects .cx-shot img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 22px 18px #000c) drop-shadow(0 -1px 1px #a6c6ff1f);
}
/* Sombra de contato e a poça quente do spot no chão, centradas onde o
   chassi termina (`--floor`, % da altura da foto): abaixo disso o arquivo
   ainda tem uma faixa transparente, diferente em cada foto. */
#panel-conects .cx-shot::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 4%;
  right: 4%;
  top: calc(var(--floor, 100%) - 9%);
  height: 18%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, #000000c7 30%, #0000 100%),
    radial-gradient(closest-side, #ff9a4c14, #0000);
}

/* Etiquetas do chassi. Cada uma é uma coluna de largura zero que desce da
   borda de baixo do chassi (`--floor`) até a etiqueta: o fio da chamada é
   essa coluna, e por isso ele encosta no chassi em qualquer foto e em
   qualquer largura. A etiqueta fica abaixo da caixa da foto, na faixa que
   a margem de baixo da `.cx-shot` reserva (`--cx-rail`). */
#panel-conects .cx-silk {
  --t2: calc(var(--t1) + var(--tag-h) + var(--t-row));
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#panel-conects .cx-silk__tag {
  position: absolute;
  top: var(--floor, 100%);
  bottom: calc(-1 * (var(--t1) + var(--tag-h)));
  left: var(--x);
  width: 0;
}
#panel-conects .cx-silk__tag.is-low { bottom: calc(-1 * (var(--t2) + var(--tag-h))); }
/* O fio é uma BORDA, e não um fundo de 1px: com o zoom de .8 do desktop,
   um fundo de 1px em posição fracionária sumia em algumas etiquetas; a
   borda é arredondada para no mínimo um pixel do aparelho. */
#panel-conects .cx-silk__tag::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: var(--tag-h);
  left: 0;
  width: 0;
  border-left: 1px solid #c9d6e670;
  -webkit-mask-image: linear-gradient(180deg, #0005, #000 70%);
          mask-image: linear-gradient(180deg, #0005, #000 70%);
}
/* `--dx` é o empurrão lateral que o main.js dá à etiqueta apertada entre
   duas vizinhas, em px do celular; cresce junto com a letra (--pg-min),
   para o fio continuar no mesmo ponto dela no desktop. */
#panel-conects .cx-silk .pg-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateX(calc(-50% + var(--dx, 0) * var(--pg-min) / 11));
  font-weight: 800;
  letter-spacing: .06em;
}

/* Modelo sem foto: o mapa de footswitches, dentro do mesmo palco. */
#panel-conects .cx-map { width: 100%; max-width: 520px; }

/* ---------- 2. painel de conexões --------------------------- */

#panel-conects .cx-rack {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  padding: 6px 16px 14px;
  border: 1px solid #ffffff10;
  border-radius: var(--r-card);
  background:
    repeating-linear-gradient(90deg, #ffffff04 0 1px, transparent 1px 4px),
    radial-gradient(80% 60% at 50% 0%, #ffffff0a, transparent 70%),
    linear-gradient(180deg, #19212cf2, #0f141bf5);
  box-shadow: inset 0 1px 0 #ffffff17, inset 0 -1px 0 #000a, 0 0 0 1px #05080c, 0 34px 60px -40px #000;
}
/* Rebites nos quatro cantos da placa. */
#panel-conects .cx-rack::before {
  --rv: radial-gradient(circle at 50% 50%, #9aa5b1 0 1.1px, #414a55 1.6px 2.8px, #0a0d12 3.3px, #0000 4.3px);
  content: '';
  position: absolute;
  z-index: -1;
  inset: 8px;
  pointer-events: none;
  background:
    var(--rv) 0 0 / 10px 10px no-repeat,
    var(--rv) 100% 0 / 10px 10px no-repeat,
    var(--rv) 0 100% / 10px 10px no-repeat,
    var(--rv) 100% 100% / 10px 10px no-repeat;
  opacity: .85;
}

#panel-conects .cx-group {
  --c: #ffffff;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px 0 14px;
}
#panel-conects .cx-group + .cx-group { border-top: 1px solid #ffffff10; }

/* Etiqueta da família: o anel de LED do assunto, o nome em rótulo neutro
   (.pg-label de pages.css: mono, .14em, --ink-2) e a serigrafia em
   colchete. A cor fica no anel; o texto não se tinge. */
#panel-conects .cx-group__head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0 0 12px;
  font-weight: 600;
}
#panel-conects .cx-group__head .pg-ring { width: 34px; }
#panel-conects .cx-group__head .pg-ring__glow { opacity: .6; }
#panel-conects .cx-group__name { flex: none; white-space: nowrap; }
#panel-conects .cx-group__head::after {
  content: '';
  flex: 1 1 auto;
  min-width: 20px;
  height: 9px;
  margin-top: 9px;
  border-top: 1px solid #c9d6e633;
  border-right: 1px solid #c9d6e633;
  border-top-right-radius: 3px;
}

#panel-conects .cx-ports {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Família de uma porta só ao lado de uma de duas: o poço fica do tamanho
     do conteúdo, e não esticado até a altura da vizinha. Só a fileira do
     patch bay (≥1400) estica, para as portas saírem da mesma altura. */
  align-content: start;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#panel-conects .cx-port { min-width: 0; margin: 0; }
#panel-conects .cx-port__in {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  height: 100%;
  padding: 8px 14px 8px 8px;
  border-radius: var(--r-well);
  background: var(--pg-well);
  box-shadow: var(--well-shadow);
}

/* A miniatura: o conector recortado, flutuando no poço com a própria
   sombra — sem moldura, sem legenda, na mesma caixa quadrada para todas.
   Um brilho frio e baixo atrás dele faz o papel da luz do palco, e é o
   mesmo para as fotos e para os glifos, que assim leem como uma família. */
#panel-conects .cx-port__art {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1;
}
#panel-conects .cx-port__art::before {
  content: '';
  position: absolute;
  inset: 6%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, #a6c6ff17, #a6c6ff08 55%, transparent 100%);
  pointer-events: none;
}
#panel-conects .cx-port__art img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 7px #000b);
}
#panel-conects .cx-port__glyph {
  position: relative;
  display: block;
  width: 68%;
  height: 68%;
  color: var(--ink);
  filter: drop-shadow(0 6px 7px #000b);
}
#panel-conects .cx-port__txt { display: grid; align-content: center; gap: 6px; min-width: 0; }
#panel-conects .cx-port__id { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
#panel-conects .cx-port__name {
  color: var(--title-ink);
  font: 700 16px/1.2 var(--font-display);
  font-variation-settings: 'wdth' 106;
  letter-spacing: -.01em;
}
#panel-conects .cx-port__role {
  color: var(--pg-ink-2);
  font-size: 14px;
  line-height: 1.42;
  text-wrap: pretty;
}

/* ---------- larguras (container `pg`) ----------------------- */

@container pg (max-width: 359px) {
  #panel-conects .cx-rack { padding-inline: 12px; }
  #panel-conects .cx-port__in { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; padding-right: 10px; }
}

@container pg (min-width: 560px) {
  /* Tablet em pé: a foto inteira na largura passaria de 380px de altura e
     empurraria a placa de conexões para a segunda tela. */
  #panel-conects .cx-stage { --cx-shot-h: 320px; }
  #panel-conects .cx-port__in { grid-template-columns: 84px minmax(0, 1fr); }
}

@container pg (min-width: 700px) {
  #panel-conects .cx-rack { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; padding: 8px 24px 18px; }
  #panel-conects .cx-group + .cx-group { border-top: 0; }
  #panel-conects .cx-group:nth-child(n + 3) { border-top: 1px solid #ffffff10; }
}
/* Placa de TRÊS famílias (a MICRO: saída, USB, sem fio) na grade de duas
   colunas: a primeira ocupa a linha de cima inteira, com as portas lado a
   lado, e as outras duas dividem a de baixo. Sem isso a terceira caía
   sozinha na segunda linha e sobrava um quadrante vazio dentro da placa.
   Só a grade muda; a ordem do DOM (e a leitura) é a mesma. */
@container pg (min-width: 700px) and (max-width: 999px) {
  #panel-conects .cx-rack:has(> .cx-group:nth-child(3):last-child) > .cx-group:first-child { grid-column: 1 / -1; }
  #panel-conects .cx-rack:has(> .cx-group:nth-child(3):last-child) > .cx-group:first-child .cx-ports { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #panel-conects .cx-rack:has(> .cx-group:nth-child(3):last-child) > .cx-group:nth-child(n + 2) { border-top: 1px solid #ffffff10; }
}

/* Desktop médio: texto e palco lado a lado; na placa, UMA coluna por
   família, com as portas empilhadas — a placa fica baixa e aparece inteira
   logo abaixo da foto. */
@container pg (min-width: 1000px) {
  #panel-conects .cx-hero { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 3cqi; }
  #panel-conects .cx-hero::before { display: none; }
  #panel-conects .cx-stage { --cx-shot-h: 300px; padding-top: 34px; }
  #panel-conects .cx-lights { inset: -10% -4% -2%; }
  #panel-conects .pg-lead { max-width: 28em; }
  #panel-conects .cx-rack { grid-template-columns: repeat(var(--g, 4), minmax(0, 1fr)); column-gap: 0; padding: 10px 24px 20px; }
  #panel-conects .cx-group,
  #panel-conects .cx-group:nth-child(n + 3) { border-top: 0; padding: 16px 20px 4px; }
  #panel-conects .cx-group + .cx-group { border-left: 1px solid #ffffff10; }
  #panel-conects .cx-group:first-child { padding-left: 0; }
  #panel-conects .cx-group:last-child { padding-right: 0; }
  #panel-conects .cx-port__in { grid-template-columns: 68px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 10px 12px 12px 8px; }
  #panel-conects .cx-port__id { flex-direction: column; align-items: flex-start; gap: 7px; }
  #panel-conects .cx-port__name { font-size: 17px; }
  #panel-conects .cx-port__role { font-size: 15px; }
}

/* Patch bay: UMA fileira, cada porta em pé, e as famílias dividem a placa
   na proporção das portas. */
@container pg (min-width: 1400px) {
  #panel-conects .cx-stage { --cx-shot-h: 330px; padding-top: 30px; }
  #panel-conects .cx-rack { display: flex; align-items: stretch; padding: 12px 30px 24px; }
  #panel-conects .cx-group,
  #panel-conects .cx-group:nth-child(n + 3) { flex: var(--k, 1) 1 0; padding: 16px 20px 2px; }
  #panel-conects .cx-group:first-child { padding-left: 0; }
  #panel-conects .cx-group:last-child { padding-right: 0; }
  #panel-conects .cx-group__head { margin-bottom: 14px; }
  #panel-conects .cx-group__head .pg-ring { width: 38px; }
  #panel-conects .cx-ports { grid-template-columns: repeat(var(--k, 1), minmax(0, 1fr)); align-content: stretch; gap: 14px; }
  #panel-conects .cx-port__in {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    row-gap: 12px;
    padding: 12px 16px 16px;
  }
  #panel-conects .cx-port__art { width: min(100%, 118px); }
  #panel-conects .cx-port__txt { align-content: start; }
  #panel-conects .cx-port__name { font-size: 18px; }
  #panel-conects .cx-port__role { font-size: 15.5px; }
}

/* Celular baixo (320×640, 375×667): as etiquetas do chassi são a peça que
   dá nome à página e precisam aparecer acima do véu e da barra fixa na
   primeira tela. O palco cede a folga da luz e as chamadas se apertam. */
@media (max-width: 600px) and (max-height: 760px) {
  #panel-conects .cx-hero { row-gap: 10px; }
  #panel-conects .cx-stage { padding-top: 8px; --t1: 10px; --t-row: 4px; }
  #panel-conects .pg-lead { line-height: 1.45; }
}

/* Notebook (até 960px de altura: 1440×900, 1280×800): com o cabeçalho
   ancorado no topo, a placa de portas passava por baixo da barra fixa e
   do véu — as descrições das portas sumiam no degradê. A foto cede 70px
   CSS e a placa sobe para o degrau curto do ritmo (--gap-section-s).
   Vem DEPOIS das container queries para ganhar delas pela ordem. */
@media (min-width: 861px) and (max-height: 960px) {
  #panel-conects .cx-stage { --cx-shot-h: 260px; }
  #panel-conects .cx-rack { margin-top: var(--gap-section-s, 32px); }
}
/* Janela baixa (notebook de 768px de altura): a foto cede mais altura
   para a placa de conexões aparecer mais cedo. */
@media (min-width: 861px) and (max-height: 820px) {
  #panel-conects .cx-stage { --cx-shot-h: 250px; padding-top: 22px; }
}
/* Janela alta (1920×1080 e acima): sobra altura, e a foto a usa. */
@media (min-width: 1300px) and (min-height: 1000px) {
  #panel-conects .cx-stage { --cx-shot-h: 420px; padding-top: 40px; }
}

/* ---------- movimento --------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  #panel-conects .cx-light--beam { animation: cx-fade 1.1s var(--ease, ease) both; }
  #panel-conects .cx-shot { animation: cx-rise .8s var(--ease, ease) .08s both; }
  #panel-conects .cx-silk__tag .pg-tag { animation: cx-fade .5s ease .5s both; }
  #panel-conects .cx-group { animation: cx-up .6s var(--ease, ease) both; }
  #panel-conects .cx-group:nth-child(2) { animation-delay: .06s; }
  #panel-conects .cx-group:nth-child(3) { animation-delay: .12s; }
  #panel-conects .cx-group:nth-child(4) { animation-delay: .18s; }
  #panel-conects .cx-group__head .pg-ring__glow { animation: cx-fade .9s ease .3s both; }
}
@keyframes cx-fade { from { opacity: 0; } }
@keyframes cx-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes cx-up { from { opacity: 0; transform: translateY(12px); } }