/* ==========================================================================
   mobile-cro.css — Camada de conversão
   --------------------------------------------------------------------------
   Carrega depois de cdc-design-system.css e mobile-app.css. Consome os tokens
   do design system; não declara cor nem tamanho fora deles.
   ========================================================================== */

/* ==========================================================================
   1. Barra de ação persistente da receita
   ========================================================================== */

/* @@ receitario:layer:cro @@ */
@layer receitario.cro {
  .cdc-recipe-actions {
    display: none;
  }

  @media (max-width: 1023.98px) {
    .cdc-recipe-actions { display: flex; }
    .cdc-recipe-actions .cdc-act-save { flex: 1 1 auto; }
    .cdc-recipe-actions .cdc-btn--icon { flex: 0 0 auto; }
  }

  /* Some quando uma folha abre: barra de ação por baixo de modal é ruído. */
  body.cdc-sheet-open .cdc-recipe-actions,
  body.cdc-cookmode .cdc-recipe-actions {
    transform: translateY(110%);
  }

  /* Estado salvo: muda cor, ícone preenchido e rótulo — nunca só a cor. */
  .cdc-act-save.is-done svg { fill: var(--cdc-brand); }

  /* ==========================================================================
     2. Folha pós-salvamento
     ========================================================================== */

  .cdc-saved-msg { margin: 0 0 var(--cdc-space-4); }
  .cdc-saved-name { color: var(--cdc-brand-dark); }

  .cdc-saved-actions {
    display: flex;
    flex-direction: column;
    gap: var(--cdc-space-2);
    margin-top: var(--cdc-space-4);
  }

  /* ==========================================================================
     3. Progresso de ingredientes
     ========================================================================== */

  .cdc-ing-progress {
    display: flex;
    flex-direction: column;
    gap: var(--cdc-space-2);
    margin: var(--cdc-space-3) 0 var(--cdc-space-5);
    /* O medidor é inserido por JS dentro do cartão. Sem estas três linhas ele
       herda a largura do conteúdo e não a do cartão, e a barra cinza vaza pela
       direita — que é exatamente o que aparecia no print. */
    inline-size: 100%;
    max-inline-size: 100%;
    box-sizing: border-box;
  }

  .cdc-ing-progress .cdc-spread { flex-wrap: wrap; gap: var(--cdc-space-2); }
  .cdc-ing-progress .cdc-ing-count { flex: 1 1 12ch; min-width: 0; }
  .cdc-ing-progress .cdc-meter { inline-size: 100%; }

  .cdc-ing-count { font-weight: var(--cdc-weight-medium); }

  .cdc-ing-progress.is-complete .cdc-meter-fill { background: var(--cdc-success); }
  .cdc-ing-progress.is-complete .cdc-ing-count  { color: var(--cdc-success); }

  .cdc-ing-reset {
    flex: 0 0 auto;
    align-self: center;   /* alinhado ao contador, não solto no canto */
  }

  /* ==========================================================================
     4. Passos com conclusão
     ========================================================================== */

  .cdc-step-check {
    display: inline-flex;
    align-items: center;
    gap: var(--cdc-space-2);
    min-height: var(--cdc-tap-min);
    margin-top: var(--cdc-space-3);
    padding: 0 var(--cdc-space-4);
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-pill);
    background: var(--cdc-surface);
    color: var(--cdc-brand-dark);
    font-family: var(--cdc-font-body);
    font-size: var(--cdc-text-sm);
    font-weight: var(--cdc-weight-medium);
    cursor: pointer;
    transition: background var(--cdc-dur-fast), color var(--cdc-dur-fast), border-color var(--cdc-dur-fast);
  }

  .cdc-step-check::before {
    content: "";
    block-size: var(--cdc-icon-xs); inline-size: var(--cdc-icon-xs);
    border: 2px solid currentColor;
    border-radius: var(--cdc-radius-xs);
    flex: 0 0 auto;
  }

  .cdc-step-check[aria-pressed="true"] {
    background: var(--cdc-success);
    border-color: var(--cdc-success);
    color: var(--cdc-gray-0);
  }
  .cdc-step-check[aria-pressed="true"]::before {
    background: currentColor;
    border-color: currentColor;
  }

  .accordeon-text ol > li.is-done > p,
  .accordeon-text ol > li.is-done > h3 {
    opacity: .55;
  }

  /* No modo cozinha o passo concluído recolhe: sobra tela para o passo atual. */
  body.cdc-cookmode .accordeon-text ol > li.is-done > p { display: none; }

  /* ==========================================================================
     5. Continue cozinhando
     ========================================================================== */

  .cdc-next {
    margin: var(--cdc-space-8) 0 var(--cdc-space-6);
  }

  .cdc-next .cdc-meta { margin: 0 0 var(--cdc-space-4); }

  .cdc-next-list {
    display: flex;
    flex-direction: column;
    gap: var(--cdc-space-3);
  }

  @media (min-width: 600px) {
    .cdc-next-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--cdc-space-4);
    }
  }

  .cdc-next-list .cdc-card--row { align-items: center; }
  .cdc-next-list .cdc-card--row:active { background: var(--cdc-gray-50); }

  /* Trilho de sugestões dentro da folha de salvamento. */
  [data-cdc-related-mini] > li { width: 132px; }
  [data-cdc-related-mini] .cdc-card-title {
    font-size: var(--cdc-text-sm);
    padding: var(--cdc-space-2) var(--cdc-space-1) 0;
    margin: 0;
  }
  [data-cdc-related-mini] .cdc-card-body { padding: 0; }

  /* ==========================================================================
     6. Avaliação
     ========================================================================== */

  /* `.avalie` já é `display:block` em celular no tema. O destaque só aparece
     quando o convite é disparado — piscar estrela sem contexto é ruído. */
  .cdc-rating-live {
    border: 1px solid var(--cdc-accent);
    border-radius: var(--cdc-radius-lg);
    background: var(--cdc-amber-50);
    padding: var(--cdc-space-4);
    margin: var(--cdc-space-4) 0;
  }

  .cdc-rating-live h2 { margin-bottom: var(--cdc-space-2); }

  /* ==========================================================================
     7. Recuperação de busca vazia
     ========================================================================== */

  .cdc-search-recovery {
    max-width: 560px;
    margin: 0 auto;
    padding: var(--cdc-space-8) var(--cdc-space-4) var(--cdc-space-12);
  }

  .cdc-search-recovery .cdc-search-form {
    display: flex;
    gap: var(--cdc-space-2);
    margin-bottom: var(--cdc-space-4);
  }

  .cdc-search-recovery .cdc-field { flex: 1 1 auto; min-width: 0; }

  .cdc-search-recovery .cdc-sheet-sub { text-align: left; }

  /* ==========================================================================
     8. Ajustes de conversão no conteúdo existente
     ========================================================================== */

  @media (max-width: 1023.98px) {

    /* O botão "Salvar receita!" do template flutua com margin-top negativo sobre
       a foto. Em tela pequena ele cobre parte da imagem justo onde o olho pousa
       primeiro. Deslocamos para a faixa de metadados, onde não disputa atenção
       com o conteúdo que traz a pessoa para a página. */
    .content .caption button {
      margin-top: calc(var(--cdc-space-8) * -1);
      margin-right: var(--cdc-space-3);
    }

    /* Os comentários são prova social e hoje ficam a uma tela de distância do
       fim do preparo. O contador vira link visível de verdade. */
    .content .caption a.anchor {
      font-weight: var(--cdc-weight-medium);
      color: var(--cdc-brand-dark);
    }
  }

  /* Espaço extra no fim da página para a barra de ação não cobrir o último
     parágrafo nem o rodapé. */
  @media (max-width: 1023.98px) {
    body.cdc-ctx-receita.cdc-mobile-on {
      padding-bottom: calc(var(--cdc-tabbar-h) + var(--cdc-anchor-h) + var(--cdc-safe-b) + 64px);
    }
  }

  @media print {
    .cdc-recipe-actions,
    .cdc-step-check,
    .cdc-ing-progress,
    .cdc-next,
    .cdc-search-recovery { display: none; }
  }
}
/* @@ /receitario:layer:cro @@ */