/* transmissaoCatalogo.css — a porta de entrada publica `/t`. Reusa os tokens e o .tr-btn de transmissao.css
   (carregado antes); aqui so' a tela do catalogo. Desktop = 100dvh sem rolagem de pagina: coluna "pedir" a esquerda,
   o catalogo ocupa o resto da largura e rola no proprio painel. Celular empilha e rola a pagina. Tema unico, o escuro. */

.ct-app {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--tr-4);
  padding: var(--tr-4);
}

.ct-app button { font: inherit; color: inherit; cursor: pointer; }
.ct-app button:disabled { cursor: default; }
.ct-app :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ------------------------------------------------------------------ pedir */

/* faixa no topo: texto | campo (o protagonista) | passos | ilustracao; o resultado do pedido abre embaixo, na largura toda */
.ct-pedir {
  min-width: 0;
  display: grid;
  /* o texto tem piso: o campo cresce ate' 48rem ANTES do 1fr, e em 1366 sobrava ~70 px (uma palavra por linha) */
  grid-template-columns: minmax(15rem, 1fr) minmax(24rem, 48rem) auto;
  align-items: center;
  column-gap: var(--tr-4);
  row-gap: var(--tr-3);
  padding: var(--tr-4);
  background: var(--tr-superficie);
  border: 1px solid var(--tr-linha-sutil);
  border-radius: var(--tr-raio);
}

.ct-pedir h1 {
  margin: 0;
  font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.625rem);
  font-weight: 800;
  line-height: 1.2;
  text-wrap: balance;
}

.ct-promessa { margin: var(--tr-2) 0 0; color: var(--muted-2); max-width: 60ch; text-wrap: pretty; }

.ct-pedir-texto { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
.ct-form { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: var(--tr-2); min-width: 0; }
.ct-previa { grid-column: 2; grid-row: 2; }
.ct-resultado { grid-column: 1 / -1; grid-row: 3; }
.ct-passos { grid-column: 3; grid-row: 1 / span 2; }
.ct-exemplo { grid-column: 4; grid-row: 1 / span 2; display: none; }

.ct-rotulo { font-weight: 700; font-size: var(--tr-fs); }

.ct-campo { display: flex; gap: var(--tr-2); align-items: stretch; }

.ct-campo input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--tr-3);
  border: 1px solid var(--border);
  border-radius: var(--tr-raio-p);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: max(16px, var(--tr-fs));
}

.ct-campo input::placeholder { color: var(--muted-2); opacity: .75; }
.ct-campo input:focus-visible { border-color: var(--gold); outline-offset: 0; }
.ct-campo input[aria-invalid="true"] { border-color: var(--tr-falha); }

.ct-enviar { min-height: 44px; padding-inline: var(--tr-4); }

.ct-dica { margin: 0; color: var(--muted-2); font-size: var(--tr-fs); text-wrap: pretty; }

/* miniatura do link colado: o que a pessoa colou, antes de enviar */
.ct-previa { display: flex; align-items: center; gap: var(--tr-3); }
.ct-previa-img {
  width: 128px;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  border-radius: var(--tr-raio-p);
  border: 1px solid var(--border);
  background: var(--panel-2);
}
.ct-previa-t { margin: 0; color: var(--muted-2); font-size: var(--tr-fs); }

/* resultado do pedido, no lugar */
.ct-resultado {
  display: flex;
  gap: var(--tr-3);
  padding: var(--tr-3);
  border: 1px solid var(--border);
  border-radius: var(--tr-raio);
  background: var(--tr-elevado);
}
.ct-res-ic { color: var(--gold); flex: none; padding-top: 2px; }
.ct-resultado[data-estado="pronto"] .ct-res-ic,
.ct-resultado[data-estado="voltou"] .ct-res-ic { color: var(--tr-ok); }
.ct-resultado[data-estado="link_ruim"] .ct-res-ic,
.ct-resultado[data-estado="erro"] .ct-res-ic,
.ct-resultado[data-estado="falha"] .ct-res-ic { color: var(--tr-falha); }
.ct-res-corpo { min-width: 0; display: flex; flex-direction: column; gap: var(--tr-2); }
.ct-res-corpo h2 { margin: 0; font-size: var(--tr-fs-tit); line-height: 1.3; text-wrap: balance; }
.ct-res-corpo p { margin: 0; color: var(--muted-2); text-wrap: pretty; }
.ct-res-acoes { display: flex; flex-wrap: wrap; gap: var(--tr-2); }
.ct-res-acoes .tr-btn { min-height: 36px; }

/* como funciona: tres passos, sem numero inventado */
.ct-passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tr-2);
  color: var(--muted-2);
  font-size: var(--tr-fs);
}
.ct-passos li { display: flex; align-items: center; gap: var(--tr-2); }
.ct-passo-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-weight: 700;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.ct-exemplo { margin: 0; flex-direction: column; gap: var(--tr-1); }
.ct-exemplo svg { width: 12rem; height: auto; }
.ct-exemplo figcaption { color: var(--muted-2); font-size: 12px; }

/* ------------------------------------------------------------------ catalogo */

.ct-catalogo {
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tr-3);
}

.ct-cat-cab { display: flex; align-items: baseline; gap: var(--tr-3); padding: 0 var(--tr-1); }
.ct-cat-cab h2 { margin: 0; font-size: var(--tr-fs-tit); font-weight: 700; }
.tr-painel-n { color: var(--muted-2); font-size: var(--tr-fs); font-variant-numeric: tabular-nums; }

.ct-grade {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: var(--tr-3);
  padding: 2px;
}

.ct-rolagem { overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

.ct-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
  background: var(--tr-superficie);
  border: 1px solid var(--tr-linha-sutil);
  border-radius: var(--tr-raio);
  overflow: hidden;
  transition: border-color 120ms ease-out, translate 160ms ease-out;
}

.ct-card-abrir { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; }
.ct-card-abrir:active { scale: .985; }

@media (hover: hover) and (pointer: fine) {
  .ct-card:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); }
  .ct-card-abrir:hover .ct-capa-play { opacity: 1; scale: 1; }
  .ct-dest:hover { background: var(--panel-2); }
  .ct-dest:hover .ct-dest-t { color: var(--gold); }
}
.ct-card-abrir:focus-visible .ct-capa-play { opacity: 1; scale: 1; }

.ct-capa { position: relative; aspect-ratio: 16 / 9; max-height: 15rem; width: 100%; background: var(--panel-2); overflow: hidden; }
.ct-capa-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-capa-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  color: var(--gold);
  opacity: 0;
  scale: .9;
  transition: opacity 140ms ease-out, scale 140ms ease-out;
}

.ct-card-corpo { display: flex; flex-direction: column; gap: 2px; padding: var(--tr-2) var(--tr-3) var(--tr-3); min-width: 0; }
.ct-card-t {
  margin: 0;
  font-size: var(--tr-fs);
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.ct-card-sub, .ct-card-meta {
  margin: 0;
  font-size: var(--tr-fs);
  color: var(--muted-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct-card-meta { font-variant-numeric: tabular-nums; }

/* os melhores do torneio ja' na lista; cada linha abre na mao dela. Marca = a mesma da pagina do torneio */
.ct-dests { list-style: none; margin: 0; padding: 0 0 var(--tr-1); border-top: 1px solid var(--tr-linha-sutil); min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.ct-dest {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  column-gap: var(--tr-1);
  padding: 5px var(--tr-3);
  color: var(--text);
  text-decoration: none;
  font-size: var(--tr-fs);
  line-height: 1.3;
}
.ct-dest-marca { grid-row: span 2; color: var(--gold); text-align: center; }
.ct-dest-acerto .ct-dest-marca { color: var(--tr-ok); }
.ct-dest-falha .ct-dest-marca { color: var(--tr-falha); }
.ct-dest-t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-dest-r { grid-column: 2; color: var(--muted-2); font-size: max(12px, .857em); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-height: 860px) { .ct-dests li:nth-child(n + 5) { display: none; } }

/* convite no fim da grade: o proximo lugar e' do link de quem chega */
.ct-convite {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tr-2);
  min-height: 8rem;
  padding: var(--tr-4);
  text-align: center;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--tr-raio);
  color: var(--muted-2);
}
.ct-convite:hover { color: var(--text); border-color: var(--gold); }

/* esqueleto com a geometria final do card */
.ct-esqueleto { pointer-events: none; }
.ct-esqueleto .ct-capa, .ct-linha-esq { animation: ct-pulso 1.4s ease-in-out infinite alternate; }
.ct-linha-esq { display: block; height: 14px; border-radius: 4px; background: var(--panel-2); }
.ct-linha-esq.ct-curta { width: 55%; }
@keyframes ct-pulso { from { opacity: .45; } to { opacity: 1; } }

.ct-vazio {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tr-2);
  padding: var(--tr-4);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--tr-raio);
}
.ct-vazio h3 { margin: 0; font-size: var(--tr-fs-tit); }
.ct-vazio p { margin: 0; max-width: 46ch; color: var(--muted-2); text-wrap: pretty; }
.ct-vazio-ic { color: var(--gold); }
.ct-vazio .ct-res-acoes { justify-content: center; margin-top: var(--tr-2); }

/* entrada do resultado: opacidade so', 160 ms */
.ct-anima .ct-resultado { animation: ct-entra 160ms ease-out; }
@keyframes ct-entra { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ct-anima .ct-resultado, .ct-esqueleto .ct-capa, .ct-linha-esq { animation: none; }
  .ct-card, .ct-capa-play { transition: none; }
}

/* ------------------------------------------------------------------ cortes */

/* largo: o desenho de exemplo entra na faixa; estreito (1024-1199): os passos saem, a promessa ja diz o mesmo */
@media (min-width: 1700px) { .ct-exemplo { display: flex; } }
@media (max-width: 1199px) { .ct-passos { display: none; } .ct-pedir { grid-template-columns: minmax(15rem, 1fr) minmax(22rem, 48rem); } }

/* celular e janela estreita: empilha, a pagina rola, o catalogo vira lista de linhas */
@media (min-width: 1024px) and (min-height: 700px) {
  body { height: 100dvh; overflow: hidden; }
}

@media (max-width: 1023px), (max-height: 699px) {
  .ct-app { display: flex; flex-direction: column; padding: var(--tr-2); }
  .ct-pedir { display: flex; flex-direction: column; align-items: stretch; }
  .ct-grade { overflow: visible; }
  .ct-exemplo { display: none; }
  .ct-passos { display: flex; flex-direction: row; flex-wrap: wrap; column-gap: var(--tr-4); }
}

@media (max-width: 640px) {
  .ct-campo { flex-direction: column; }
  .ct-enviar { width: 100%; }
  .ct-passos { display: none; }
  .ct-res-acoes .tr-btn { min-height: 44px; }
  .ct-grade { grid-template-columns: minmax(0, 1fr); }
  .ct-card-abrir, .ct-esqueleto { flex-direction: row; align-items: center; }
  .ct-card .ct-capa { flex: 0 0 38%; width: auto; }
  .ct-dests li:nth-child(n + 4) { display: none; }
  .ct-convite { min-height: 5rem; }
}