/* =========================================================
   Los Santtos CG, LOTE A: a web no computador
   ---------------------------------------------------------
   Regra de ouro deste arquivo: ATÉ 899px ele não pode mudar
   um pixel do que já existe. Por isso quase tudo aqui mora
   dentro de @media (min-width: …) ou @media (hover: hover) —
   e o que está fora de media query é só a conversão de estilo
   inline em classe, com os MESMOS valores computados de antes.

   Breakpoints:
     900px  — vira aplicação: sidebar fixa entra, tabbar sai
     1024px — trilho (content_for :aside) entra, telas de duas colunas
     1440px — mais largura e mais densidade
   ========================================================= */

/* =========================================================
   1. Estilos que eram inline e viravam letra morta pra media
      query (não dá pra sobrescrever `style=""` sem !important).
      Valores idênticos aos de antes: no celular nada muda.
   ========================================================= */

/* journey/show:45 e coach/athletes/show:25 — chip de largura fixa em lista. */
.chip--fixed      { width: 44px; justify-content: center; }
.chip--fixed-wide { width: 52px; justify-content: center; }

/* protocol_days/show:21 — quem fez esse dia (tira no scroller). */
.who-tile { width: 96px; padding: 12px 8px; }
.who-tile__avatar { display: flex; justify-content: center; }

/* evaluations/new:27 e 38 — grade de notas de 1 a 10. */
.score-grid--10 { grid-template-columns: repeat(10, 1fr); gap: 4px; }
.score-grid--10 .score-btn { font-size: 13px; }

/* posts/_post:33 — vídeo dentro do card do feed (colado nas bordas). */
.video-wrap--feed { border-radius: 0; max-height: 58dvh; }

/* evaluations/new:17 — player menor, pra caber o formulário na dobra. */
.video-wrap--eval { max-height: 44dvh; }

/* Os invólucros que as telas de duas colunas usam NÃO PODEM EXISTIR no celular:
   um <div> a mais muda o bloco que contém um `position: sticky` (foi o que
   aconteceu com o composer de comentário — ele deixou de grudar no rodapé
   enquanto o vídeo estava na tela). `display: contents` faz a caixa sumir de
   verdade: os filhos voltam a ser filhos diretos do `.stack`, com o mesmo
   espaçamento de sempre. A partir de 1024px eles viram caixa outra vez e cada um
   ocupa a sua célula do grid. */
.post-detail__main, .post-detail__side,
.record-layout__stage, .record-layout__form,
.eval-layout__media,
.profile-layout__header, .profile-layout__badges, .profile-layout__challenges,
.profile-layout__posts,
.athlete-layout__header, .athlete-layout__col, .athlete-layout__posts {
  display: contents;
}

/* video_modal_controller.js — o overlay era todo `style=""` montado no JS; com
   `max-width:620px` inline, media query nenhuma alcançava a caixa. */
.video-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgb(var(--bg-rgb) / .92);
  backdrop-filter: blur(10px);
  display: flex; flex-direction: column; justify-content: center;
  gap: 16px; padding: 20px;
  animation: slideDown .25s;
}
.video-modal__box { max-width: 620px; width: 100%; margin: 0 auto; }
.video-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.video-modal__title { font-size: 16px; }
/* ⚠️ O VÉU DESTE MODAL É O FUNDO DA PÁGINA (`--bg-rgb`), então no tema claro
   ele é BRANCO. O botão de fechar era branco transparente com tinta branca, o
   que funcionava em cima do véu quase-preto de antes e some por completo em
   cima do branco. Quem manda aqui é a tinta da página, não o branco cravado. */
.video-modal__close {
  background: rgb(var(--ink-rgb) / .10); border: 0; color: var(--text);
  width: 36px; height: 36px; border-radius: var(--radius-full);
  font-size: 18px; cursor: pointer;
}

/* =========================================================
   2. Ponteiro fino: o app não tinha UM :hover. Num desktop
      isso é gritante — nada responde ao mouse antes do clique.
      Fica atrás de (hover:hover) e (pointer:fine) pra celular
      e tablet nunca "grudarem" no estado de hover.
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  a, button, .card--tappable, .tab, .nav-item { cursor: pointer; }

  .btn { transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), filter var(--t-fast), opacity var(--t-fast); }
  .btn:hover  { filter: brightness(1.08); }
  .btn:active { filter: none; }
  .btn--ghost:hover, .btn--quiet:hover { background: var(--bg-elevated); border-color: var(--border-strong); }
  .btn--danger:hover { background: rgb(var(--danger-rgb) / .12); border-color: rgb(var(--danger-rgb) / .6); }

  .card--tappable { transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); }
  .card--tappable:hover {
    border-color: var(--border-strong);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-md);
  }

  .exercise:hover  { border-color: var(--border-strong); background: var(--bg-hover); }
  .rank-row:hover  { border-color: var(--border-strong); background: var(--bg-elevated); }
  .react-btn:hover { border-color: var(--border-strong); background: var(--bg-hover); }
  .react-btn.is-on:hover { border-color: rgb(var(--fire-rgb) / .65); }
  .jday:hover      { border-color: var(--border-strong); transform: translateY(-2px); }
  .jday--done:hover  { border-color: rgb(var(--success-rgb) / .8); }
  .jday--today:hover { border-color: var(--fire); }
  .score-btn:hover   { background: var(--bg-hover); border-color: var(--border-strong); }
  .score-btn.is-on:hover { background: var(--fire); }
  .effort__opt:hover { border-color: var(--border-strong); background: var(--bg-hover); }
  .segmented__item:hover { color: var(--text); }
  .topbar__back:hover { background: var(--bg-elevated); }
  .badge-tile--earned:hover .badge-tile__icon { border-color: rgb(var(--fire-rgb) / .6); }
  .comment__ts:hover { background: rgb(var(--fire-rgb) / .3); }
  .switch:hover { border-color: var(--border-strong); }

  .tab:hover { color: var(--text-muted); }
  .tab.is-active:hover { color: var(--text); }
  .nav-item:hover { background: var(--bg-elevated); color: var(--text); }
  .nav-item.is-active:hover { background: var(--fire-soft); }
  .nav-item--record:hover .nav-item__fab { filter: brightness(1.1); }

  .video-modal__close:hover { background: rgb(var(--ink-rgb) / .18); }

  /* Foco de teclado: no desktop o Tab tem que aparecer. */
  a:focus-visible, button:focus-visible, .card--tappable:focus-visible,
  .input:focus-visible, .textarea:focus-visible, .select:focus-visible {
    outline: 2px solid var(--fire);
    outline-offset: 2px;
  }
}

/* =========================================================
   3. ≥900px — deixa de ser app de celular esticado
   ========================================================= */
@media (min-width: 900px) {
  :root {
    --side-w: 220px;
    --rail-w: 292px;
    --col-max: 700px;   /* coluna de conteúdo */
    --wide-max: 1120px; /* telas que pedem largura (content_for :wide) */
  }

  /* ---- Esqueleto ---- */
  .shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--shell-max);
    margin: 0 auto;
    align-items: start;
  }
  .shell--nav { grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .shell__main { min-width: 0; }

  /* Sidebar: fixa, sempre visível, é a navegação do desktop. */
  .shell__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    position: sticky;
    top: 0;
    align-self: start;
    height: 100dvh;
    padding: var(--space-lg) var(--space-md);
    border-right: 1px solid var(--border);
    background: linear-gradient(180deg, var(--bg-card), var(--bg) 70%);
    overflow-y: auto;
  }
  .sidebar__logo { padding: 0 6px; font-size: 15px; }
  .sidebar__nav { display: flex; flex-direction: column; gap: 3px; }
  .sidebar__nav--extra { padding-top: var(--space-md); border-top: 1px solid var(--border); }
  .sidebar__user { margin-top: auto; padding-top: var(--space-md); border-top: 1px solid var(--border); }
  .sidebar__user .nav-item { gap: 10px; }
  .sidebar__user .avatar { width: 30px; height: 30px; font-size: 11px; }
  .sidebar__user__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .nav-item {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border-radius: var(--radius-md);
    color: var(--text-muted); font-size: 14.5px; font-weight: 650; letter-spacing: -.01em;
    transition: background var(--t-fast), color var(--t-fast);
    position: relative;
  }
  .nav-item svg { width: 20px; height: 20px; stroke-width: 1.9; flex-shrink: 0; }
  .nav-item.is-active { background: var(--fire-soft); color: var(--text); }
  .nav-item.is-active svg { stroke: var(--fire); }
  .nav-item__badge {
    margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: var(--radius-full); background: var(--fire); color: var(--on-fire);
    font-size: 11px; font-weight: 850; display: grid; place-items: center;
  }
  .nav-item--record { color: var(--text); font-weight: 750; }
  .nav-item__fab {
    width: 30px; height: 30px; border-radius: var(--radius-full);
    display: grid; place-items: center; flex-shrink: 0;
    background: linear-gradient(135deg, var(--fire), var(--fire-grad));
    box-shadow: 0 4px 14px rgb(var(--fire-rgb) / .35);
  }
  .nav-item__fab svg { width: 17px; height: 17px; stroke: var(--on-fire); stroke-width: 2.3; }

  /* O INTERRUPTOR DE LENTE (§2.6). No desktop não há faixa no topo: a barra
     lateral está sempre à vista, e uma tira atravessando a página custaria
     altura sem dizer nada que este bloco não diga. */
  .lens-switch {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 12px; margin-bottom: 6px;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--bg-elevated);
  }
  .lens-switch__label { font-size: 11px; color: var(--text-faded); letter-spacing: .01em; }
  .lens-switch__action { font-size: 12.5px; font-weight: 800; color: var(--fire); }
  .lens-switch--aluno { border-color: rgb(var(--volt-rgb) / .35); background: var(--volt-soft); }
  .lens-switch--aluno .lens-switch__label { color: var(--text-muted); }
  .lens-switch--aluno .lens-switch__action { color: var(--volt); }

  /* A tabbar é navegação de celular: no desktop a sidebar assume. E a faixa de
     lente vai junto — o interruptor logo acima já diz a mesma coisa.
     O `padding-top` do body precisa ser desfeito NA MÃO: `:has(.lens-bar)`
     continua casando com a faixa escondida (ela existe no DOM, só não é
     desenhada), e sem esta linha o desktop abriria 30px de vazio no topo. */
  .shell--nav ~ .tabbar,
  .shell--nav ~ .lens-bar { display: none; }
  body:has(.shell--nav) { padding-top: 0; }
  body:has(.shell--nav) .topbar { top: 0; }

  /* ---- Coluna de conteúdo ---- */
  .app {
    max-width: var(--col-max);
    padding: 0 var(--space-lg);
    padding-bottom: var(--space-2xl);
    container-type: inline-size;
  }
  .shell--wide .app { max-width: var(--wide-max); }

  .topbar { top: 0; padding: 16px var(--space-lg); }
  .topbar__wrap { max-width: var(--col-max); padding: 0 var(--space-sm); }
  .shell--wide .topbar__wrap { max-width: var(--wide-max); }
  .topbar__title { font-size: 19px; }

  /* Densidade maior: o celular pede números grandes, o monitor pede leitura. */
  h1 { font-size: 30px; }
  h2 { font-size: 21px; }
  .stat__value { font-size: 26px; }
  .app .section { margin-top: var(--space-2xl); }

  /* O composer para de flutuar: no desktop ele é o fim da coluna. */
  .composer { position: static; padding: 0; background: none; }

  /* O aviso flutuante nascia centrado na TELA inteira e a 14px do topo: no
     computador ele cobria o título da página e metade dele caía sobre a
     sidebar. Passa a nascer dentro da coluna de conteúdo, abaixo do cabeçalho. */
  body:has(.shell--nav) .flash-zone { left: var(--side-w); top: 78px; }

  /* Grade da jornada: 7 colunas em 700px de largura vira quadrado gigante. */
  .journey { grid-template-columns: repeat(10, 1fr); gap: 10px; }
  .jday { font-size: 16px; }

  /* Vídeo vertical não pode ocupar a coluna inteira num monitor.
     E o teto de LARGURA tem que sair do mesmo teto de ALTURA: `.video-wrap` é
     `width: 100%` com `aspect-ratio: 9/16`, então cortar só a altura deixa a
     caixa mais larga que 9:16 e o vídeo aparece emoldurado de preto (medido no
     Chrome: 628×666 na tela do post, 253px de parede preta). Amarrando os dois
     tetos a caixa continua 9:16 de verdade e o `margin: 0 auto` centraliza. */
  .video-wrap--9x16 { max-height: 68dvh; max-width: min(420px, calc(68dvh * 9 / 16)); }
  .video-wrap--feed { max-width: min(380px, calc(68dvh * 9 / 16)); border-radius: var(--radius-md); }
  .video-wrap--eval { max-width: min(340px, calc(68dvh * 9 / 16)); }

  /* O modal de execução cresce junto com a tela. */
  .video-modal__box { max-width: 880px; }
  .video-modal__title { font-size: 18px; }

  /* Landing (deslogado, sem sidebar): vira uma home de verdade. */
  .hero { padding: var(--space-2xl) 0 var(--space-xl); }
  .hero h1 { font-size: 46px; }
  .hero__sub { font-size: 17.5px; max-width: 520px; }
  .hero .stack--sm { flex-direction: row; justify-content: center; }
  .hero .btn--block { width: auto; min-width: 210px; }

  /* Formulários de conta: coluna estreita, centrada, com ar em cima. */
  .shell:not(.shell--nav) .app { max-width: 900px; }
}

/* Exercícios lado a lado quando a coluna (não a tela) tem espaço.
   Container query: vale igual dentro do trilho, do card ou da coluna larga. */
@container (min-width: 560px) {
  .day-card__exercises { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
}

/* =========================================================
   4. ≥1024px — segunda coluna (trilho) e telas de duas colunas
   ========================================================= */
@media (min-width: 1024px) {
  .shell--nav.shell--rail { grid-template-columns: var(--side-w) minmax(0, 1fr) var(--rail-w); }
  .shell--rail:not(.shell--nav) { grid-template-columns: minmax(0, 1fr) var(--rail-w); }

  .shell__rail {
    display: block;
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100dvh;
    overflow-y: auto;
    padding: var(--space-lg) var(--space-lg) var(--space-2xl) 0;
    container-type: inline-size;
  }
  .rail { display: flex; flex-direction: column; gap: var(--space-md); }
  .rail__title {
    font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-faded); margin-bottom: var(--space-sm);
  }
  .rail .card { padding: 14px; }
  .rail__row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
  .rail__row + .rail__row { border-top: 1px solid var(--border); }
  .rail__num {
    width: 30px; height: 30px; border-radius: var(--radius-sm); flex-shrink: 0;
    display: grid; place-items: center; font-size: 13px; font-weight: 800;
    background: var(--bg-input); border: 1px solid var(--border); color: var(--text-muted);
  }

  /* Com trilho, a coluna do meio ganha teto próprio: sem ele, num monitor de
     1920 o card do feed passava de mil pixels de largura — linha de texto longa
     demais pra ler e vídeo vertical perdido no meio do vazio. */
  .shell--rail .app { max-width: 820px; }
  .shell--rail .topbar__wrap { max-width: 820px; }

  /* Os invólucros voltam a existir: cada um é uma célula do grid. */
  .post-detail__main, .post-detail__side,
  .record-layout__stage, .record-layout__form,
  .eval-layout__media,
  .profile-layout__header, .profile-layout__badges, .profile-layout__challenges,
  .profile-layout__posts,
  .athlete-layout__header, .athlete-layout__col, .athlete-layout__posts {
    display: flex;
    flex-direction: column;
  }

  /* ---- Post individual: player grande à esquerda, conversa à direita ----
     Sem view duplicada: é o MESMO DOM do celular, reposicionado. */
  .post-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: var(--space-lg) var(--space-xl);
    align-items: start;
  }
  .post-detail__side {
    position: sticky;
    top: var(--space-lg);
    max-height: calc(100dvh - var(--space-xl));
    overflow-y: auto;
  }
  .post-detail .video-wrap--9x16 { max-height: 74dvh; max-width: min(100%, calc(74dvh * 9 / 16)); }

  /* ---- Avaliar: vídeo de um lado, notas do outro ---- */
  .eval-layout { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: var(--space-lg) var(--space-xl); align-items: start; }
  .eval-layout__media { position: sticky; top: var(--space-lg); }
  .video-wrap--eval { max-height: 62dvh; max-width: min(100%, calc(62dvh * 9 / 16)); }

  /* ---- Gravar: câmera à esquerda, o que contar à direita ---- */
  .record-layout { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: var(--space-lg) var(--space-xl); align-items: start; }
  .record-layout__error { grid-column: 1 / -1; }
  .record-layout__stage { position: sticky; top: var(--space-lg); }

  /* ---- Perfil: conquistas de um lado, posts do outro ---- */
  .profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg) var(--space-xl); align-items: start; }
  .profile-layout__header { grid-column: 1 / -1; }
  .profile-layout__posts  { grid-column: 2; grid-row: 2 / span 3; }

  /* ---- Painel do professor: cartões em duas colunas ----
     Multicoluna e não grid: os cartões do painel têm alturas muito diferentes, e
     no grid a linha inteira fica com a altura do mais alto — sobrava um buraco de
     meia tela embaixo do cartão pequeno. Com `columns` os cartões escorrem e
     `break-inside: avoid` impede que um cartão seja partido no meio. */
  .dash-grid { display: block; columns: 2; column-gap: var(--space-xl); }
  .dash-grid > * { break-inside: avoid; margin-bottom: var(--space-lg); }
  .dash-grid > .card--hero { column-span: all; }

  /* ---- Semana a semana (jornada) e ficha do atleta ---- */
  .weeks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); align-items: start; }
  .athlete-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg) var(--space-xl); align-items: start; }
  .athlete-layout__header { grid-column: 1 / -1; }
  .athlete-layout__map    { grid-column: 1 / -1; }
  .athlete-layout__col    { grid-column: 1; }
  .athlete-layout__posts  { grid-column: 2; }

  /* Conquistas param de ser carrossel quando há espaço pra todas. */
  .shell--wide .scroller--badges { flex-wrap: wrap; overflow: visible; }

  /* Landing em duas colunas de benefício. */
  .shell:not(.shell--nav) .feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-xl); }
}

/* =========================================================
   5. ≥1440px — sobra tela: usa
   ========================================================= */
@media (min-width: 1440px) {
  :root {
    --side-w: 252px;
    --rail-w: 340px;
    --col-max: 780px;
    --wide-max: 1240px;
    --shell-max: 1560px;
  }
  .app { padding: 0 var(--space-xl); }
  .topbar { padding: 18px var(--space-xl); }
  .video-wrap--feed { max-width: min(430px, calc(68dvh * 9 / 16)); }
  .journey { gap: 12px; }
  .nav-item { padding: 11px 13px; font-size: 15px; }
  h1 { font-size: 32px; }
}

@media (min-width: 1800px) {
  :root { --shell-max: 1760px; --wide-max: 1400px; --col-max: 840px; }
}