/* ABA 659 — site público da RunWay no jeito app (02/11/2026, pedido do Rafael:
   «quero que a página pública da runway seja adaptada pra app assim como fizemos com o admin»).
   Só celular (≤ 820 px, o mesmo ponto em que o menu de cima já sumia). No computador nada muda:
   a barra do pé nasce escondida e nenhuma regra fora das @media mexe em layout.
   Sem cor, fonte ou canto novos: tudo sai dos tokens do próprio site (:root de cada página).
   Ligado em index, comercial, resultados e campeonatos. Certificado e compartilhar ficam de fora:
   são ferramentas abertas do cartão do atleta, com o próprio voltar. */

.rw-abas{display:none}

@media(max-width:820px){
  /* ---- topo compacto: logo à esquerda, sem o botão «Meu resultado» (a aba Resultados faz isso) ---- */
  nav .wrap{height:56px}
  nav img{height:30px}
  nav .nav-mob{display:none}

  /* ---- barra de abas no pé, ao alcance do polegar ---- */
  /* é um <nav>: a regra «nav» do site (sticky no topo, borda de baixo) não pode valer aqui */
  .rw-abas{display:flex;position:fixed;left:0;right:0;bottom:0;top:auto;z-index:60;border-bottom:0;
    background:rgba(5,13,36,.94);border-top:1px solid rgba(255,255,255,.08);
    padding:0 max(env(safe-area-inset-left),4px) env(safe-area-inset-bottom) max(env(safe-area-inset-right),4px)}
  @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .rw-abas{background:rgba(5,13,36,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  }
  .rw-abas a{flex:1 1 0;min-width:0;min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;padding:6px 2px;color:rgba(255,255,255,.62);text-decoration:none;
    font-family:var(--body);font-size:11px;font-weight:500;line-height:1.1;letter-spacing:0;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation}
  .rw-abas a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rw-abas svg{width:24px;height:24px;flex:none}
  .rw-abas a[aria-current="page"]{color:var(--cyan)}
  .rw-abas a[aria-current="page"] span{font-weight:600}
  .rw-abas a:focus-visible{outline:2px solid var(--cyan);outline-offset:-4px;border-radius:10px}
  .rw-abas a:active{background:rgba(255,255,255,.05)}

  /* o fim da página não fica escondido atrás da barra; e o que rola até um campo para acima dela */
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  html{scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom));scroll-padding-top:64px}

  /* ---- campo com 16 px: o iPhone não dá zoom ao tocar (os do site tinham 15,2 px) ---- */
  input,select,textarea{font-size:16px!important}
  .bigsearch input{font-size:1.05rem!important}

  /* ---- nada passa da largura da tela ---- */
  html,body{overflow-x:clip}
  img,svg,video,canvas{max-width:100%}
}

/* ---- classificação em CARTÕES (resultados, ≤ 760 px, o ponto em que a tabela já cortava colunas) ----
   A linha continua sendo <tr> (o JS do site não muda); só o desenho troca: posição grande à esquerda,
   nome em cima, peito e categoria embaixo, tempo à direita com o ritmo. */
@media(max-width:760px){
  #rwClass table:not(.insc) thead tr:not(#rwHeadInsc){display:flex;justify-content:space-between;padding:.2rem .85rem}
  #rwClass table:not(.insc) thead th{display:none;border:0;padding:.35rem 0}
  #rwClass table:not(.insc) thead th#rwPos,#rwClass table:not(.insc) thead th#rwTempo{display:block}

  #rwClass #rwRows>tr{display:grid;grid-template-columns:3.1rem auto minmax(0,1fr) auto;
    grid-template-areas:"pos nome nome tempo" "pos peito cat ritmo";column-gap:.6rem;row-gap:.1rem;
    align-items:baseline;padding:.75rem .85rem;border-bottom:1px solid rgba(255,255,255,.07)}
  #rwClass #rwRows>tr>td{display:block;padding:0;border:0;min-width:0}
  #rwClass #rwRows>tr>td[colspan]{grid-column:1/-1;grid-row:1/-1}
  #rwClass #rwRows>tr>td:nth-child(1){grid-area:pos;align-self:center;font-variant-numeric:tabular-nums;font-size:1.15rem}
  #rwClass #rwRows>tr>td:nth-child(2){grid-area:nome;font-weight:600;overflow-wrap:anywhere}
  #rwClass #rwRows>tr>td:nth-child(3){grid-area:peito;font-family:var(--mono);font-size:.82rem;opacity:.7}
  #rwClass #rwRows>tr>td:nth-child(3)::before{content:"#"}
  #rwClass #rwRows>tr>td:nth-child(4){grid-area:cat;font-size:.82rem;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #rwClass #rwRows>tr>td:nth-child(5){grid-area:tempo;text-align:right;font-variant-numeric:tabular-nums}
  #rwClass #rwRows>tr>td:nth-child(6){grid-area:ritmo;text-align:right;font-size:.82rem;opacity:.7;font-variant-numeric:tabular-nums}
  #rwClass #rwRows>tr.grp{display:block;padding:.9rem .85rem .35rem}
  /* o destaque do próprio atleta e o hover pintam a LINHA inteira (no cartão, pintar a célula deixaria buracos) */
  #rwClass #rwRows>tr>td,#rwClass #rwRows>tr:hover>td{background:none}
  #rwClass #rwRows>tr:hover{background:rgba(0,64,255,.08)}
  #rwClass #rwRows>tr.me{background:rgba(0,64,255,.28);box-shadow:inset 3px 0 0 var(--cyan)}
  #rwClass #rwRows>tr.me>td:first-child{border-left:0}
  #rwClass #rwRows>tr>td.pos{width:auto}

  /* lista de INSCRITOS (antes da prova): nome em cima, peito e percurso embaixo */
  #rwClass table.insc #rwRows>tr{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"nome nome" "peito perc"}
  #rwClass table.insc #rwRows>tr>td:nth-child(1){grid-area:nome;align-self:auto;font-size:inherit;font-weight:600;overflow-wrap:anywhere}
  #rwClass table.insc #rwRows>tr>td:nth-child(2){grid-area:peito;font-family:var(--mono);font-size:.82rem;opacity:.7;font-weight:400}
  #rwClass table.insc #rwRows>tr>td:nth-child(2)::before{content:"#"}
  #rwClass table.insc #rwRows>tr>td:nth-child(3){display:none}
  #rwClass table.insc #rwRows>tr>td:nth-child(4){grid-area:perc;text-align:right;font-size:.82rem;opacity:.7;font-family:inherit}
  #rwClass table.insc thead{display:none}
}

@media(prefers-reduced-motion:reduce){.rw-abas *{transition:none!important}}