/* ==========================================================================
   mobile-app.css — Camada Mobile-App do Comidinhas do Chef
   --------------------------------------------------------------------------
   Carregado DEPOIS de style.css (dependência declarada no enqueue), então os
   overrides vencem por ordem de cascata, sem `!important` gratuito.
   Nenhum arquivo original é alterado.

   Índice
   ------
   00. Tokens
   01. Correções de acessibilidade que valem para todo o site
   02. Correções de monetização estruturais (breakpoints e viewability)
   03. Header sticky com auto-hide
   04. Barra de navegação inferior (tab bar)
   05. Folhas (search / categorias)
   06. Slots de anúncio e âncora de rodapé
   07. Receita: legibilidade, ingredientes, passos, modo cozinha
   08. Retorno: progresso, continuar lendo, voltar ao topo, instalar app
   09. Preferências do sistema (movimento, contraste, fonte grande)
   ========================================================================== */

/* ==========================================================================
   00. TOKENS
   ========================================================================== */

/* Os tokens vivem em cdc-design-system.css — fonte única. Este arquivo
   consome, nunca redeclara: dois :root com o mesmo nome e valores diferentes
   é como um design system morre. */

/* @@ receitario:layer:app @@ */
@layer receitario.app {
  .cdc-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: 0; border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ==========================================================================
     01. ACESSIBILIDADE — correções que valem para o site inteiro
     ========================================================================== */

  /* --------------------------------------------------------------------------
     FOCO VISÍVEL.
     O style.css atual zera o outline de body, html, h1–h6, p, ol, ul, li, input,
     select e textarea em :focus. Efeito prático: quem navega por teclado (e todo
     usuário de leitor de tela em desktop, e qualquer pessoa com teclado
     bluetooth no celular) fica completamente perdido — não há nenhuma indicação
     de onde o foco está, em nenhuma página. É reprovação direta em WCAG 2.4.7.

     Usamos :focus-visible: o anel aparece para teclado e não para clique/toque,
     então não há custo estético.
     -------------------------------------------------------------------------- */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  summary:focus-visible,
  [tabindex]:focus-visible,
  label:focus-visible {
    outline: 3px solid var(--cdc-brand) !important;
    outline-offset: 2px !important;
    border-radius: var(--cdc-radius-xs, 4px);
  }

  /* Sobre fundo vermelho o anel vermelho some: inverte para branco. */
  .cdc-tab:focus-visible,
  .cdc-search-go:focus-visible,
  .cdc-install-yes:focus-visible,
  .cdc-fab:focus-visible,
  .content-info .share a:focus-visible,
  .content .caption button:focus-visible {
    outline-color: var(--cdc-gray-0);
    box-shadow: var(--cdc-focus-halo);
  }

  /* --------------------------------------------------------------------------
     CONTRASTE.
     rgba(73,73,73,.64) sobre branco resulta em ~3.2:1 — reprova AA para texto
     normal (mínimo 4.5:1). Aparece em legendas, meta de comentário e botões
     secundários. Trocamos pelo tom sólido mais próximo que passa.
     -------------------------------------------------------------------------- */
  .content-info .comments form p,
  .minha-conta .perfil p,
  .archive .read-more,
  .receita-small-info .comment-count,
  .receita-big-info .comment-count {
    color: var(--cdc-text-muted);
  }

  /* --------------------------------------------------------------------------
     ALVOS DE TOQUE.
     Botões de 24px (± porções), 4px (dots do carrossel) e 24px (excluir receita
     salva) são pequenos demais para o polegar e provocam erro de clique — em
     página com anúncio, erro de clique vira clique acidental em anúncio, que é a
     principal fonte de tráfego inválido em site de receita.

     Ampliamos a ÁREA DE TOQUE sem mudar o desenho: pseudo-elemento invisível.
     -------------------------------------------------------------------------- */
  .content-text-shadow .quantidade-actions button,
  .slick-dots li button,
  .receita-small-info button,
  .receita-medium-info button,
  .receita-big-info button,
  header .action-btn,
  .modal-header button {
    position: relative;
  }

  .content-text-shadow .quantidade-actions button::after,
  .slick-dots li button::after,
  .receita-small-info button::after,
  .receita-medium-info button::after,
  .receita-big-info button::after,
  .modal-header button::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: var(--cdc-tap); height: var(--cdc-tap);
    transform: translate(-50%, -50%);
  }

  @media (max-width: 1023.98px) {
    header .action-btn {
      min-height: var(--cdc-tap);
      justify-content: center;
    }
    .breadcrumb a { padding: var(--cdc-space-3, 12px) var(--cdc-space-1, 6px) var(--cdc-space-3, 12px) 0; }
  }

  /* --------------------------------------------------------------------------
     CHECKBOX DE INGREDIENTE.
     O tema faz `.content-text-shadow ul li input { display:none }` e desenha o
     quadradinho num <i>. `display:none` remove o elemento da árvore de
     acessibilidade E da ordem de tabulação: o recurso mais usado da página —
     marcar o que já foi separado — é literalmente inoperável por teclado e
     invisível para leitor de tela.

     Correção: o input continua invisível aos olhos, mas existe para o teclado e
     para o leitor de tela, e o <i> ganha estado de foco.
     -------------------------------------------------------------------------- */
  .content-text-shadow ul li input[type="checkbox"] {
    display: block;
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    margin: 0;
    pointer-events: none;
  }

  .content-text-shadow ul li label {
    position: relative;
    min-height: var(--cdc-tap);
    padding: var(--cdc-space-1, 4px) 0;
  }

  .content-text-shadow ul li input[type="checkbox"]:focus-visible + i {
    outline: 3px solid var(--cdc-brand);
    outline-offset: 3px;
  }

  /* Estado marcado precisa ser perceptível sem depender só de cor (WCAG 1.4.1) —
     o line-through do tema já cumpre; reforçamos com opacidade do texto. */
  .content-text-shadow ul li input:checked + i + span {
    color: var(--cdc-text-muted);
  }

  /* --------------------------------------------------------------------------
     SKIP LINK — não existia.
     -------------------------------------------------------------------------- */
  .cdc-skip {
    position: absolute;
    left: -9999px; top: 0;
    z-index: 1000000;
    background: var(--cdc-brand);
    color: var(--cdc-gray-0, #fff);
    padding: var(--cdc-space-3, 14px) var(--cdc-space-5, 20px);
    border-radius: 0 0 var(--cdc-radius-sm) 0;
    font-weight: 700;
    text-decoration: none;
  }
  .cdc-skip:focus {
    left: 0;
    top: var(--cdc-safe-t);
  }

  /* ==========================================================================
     02. MONETIZAÇÃO — correções estruturais
     ========================================================================== */

  /* --------------------------------------------------------------------------
     FURO DE RECEITA ENTRE 769px E 1023px.
     style.css: `.only-mobile { display:none }` acima de 768px.
     style.css: `.content-sidebar { display:none }` abaixo de 1024px.
     Resultado: nessa faixa não aparece nem o inventário mobile nem o desktop.
     É uma faixa relevante — iPhone Plus/Max deitado, Android grande, tablet.

     Realinhamos os dois no mesmo ponto de quebra do grid (1024px), que é onde a
     sidebar realmente aparece. Sem isso, todo o resto deste arquivo é otimizar
     receita que continua não sendo servida.
     -------------------------------------------------------------------------- */
  @media (max-width: 1023.98px) {
    .only-mobile  { display: block; }
    .only-desktop { display: none; }
  }
  @media (min-width: 1024px) {
    .only-mobile  { display: none; }
    .only-desktop { display: block; }
  }

  /* --------------------------------------------------------------------------
     ANÚNCIO DE TOPO INVISÍVEL POR 10 SEGUNDOS.
     r7-header.css: `.r7-anuncio.r7-new { opacity:0; animation: ... 10s forwards }`.
     O criativo carrega, a impressão é contada, e o Active View mede 0% de
     viewability enquanto opacity for 0. Em celular, boa parte da sessão acaba
     antes dos 10s: é impressão paga como não vista, o que puxa o CPM do slot
     para baixo em leilão.

     Correção: o espaço continua reservado (sem CLS), mas o slot fica visível
     desde o primeiro frame.
     -------------------------------------------------------------------------- */
  .r7-anuncio.r7-new {
    opacity: 1;
    animation: none;
    min-height: 50px;
  }

  /* --------------------------------------------------------------------------
     RESERVA DO BANNER DE TOPO NA RECEITA.
     single-receita.php reserva 330px fixos (`.top-banner`). Numa tela de 360×640,
     isso empurra imagem e tabela da receita inteiramente para fora da primeira
     dobra: o usuário chega da busca e vê título + um bloco vazio. Métrica que
     sofre é a mais cara de todas — taxa de retorno à SERP.

     Reduzimos a reserva em celular para o formato que realmente é servido lá
     (336×280 ou 320×100), mantendo reserva exata para não gerar CLS.
     -------------------------------------------------------------------------- */
  @media (max-width: 1023.98px) {
    .single-receita .top-banner,
    .content-info .top-banner {
      min-height: 280px;
      height: 280px;
    }
  }
  @media (max-width: 599.98px) {
    .single-receita .top-banner,
    .content-info .top-banner {
      min-height: 250px;
      height: 250px;
    }
  }

  /* ==========================================================================
     03. HEADER STICKY COM AUTO-HIDE
     --------------------------------------------------------------------------
     Hoje o header rola para fora e não volta: para buscar outra receita o usuário
     precisa subir a página inteira. Em receita longa isso é o fim da sessão.

     Comportamento: some ao rolar para baixo (dá tela ao conteúdo e ao anúncio),
     volta ao rolar para cima (padrão de app que todo mundo já conhece).
     ========================================================================== */

  @media (max-width: 1023.98px) {
    body.cdc-mobile-on > header {
      position: sticky;
      top: 0;
      padding-top: var(--cdc-safe-t);
      transition: transform .22s var(--cdc-ease);
      will-change: transform;
      background: var(--cdc-gray-0, #fff);
    }

    body.cdc-hdr-hidden > header {
      transform: translateY(-100%);
    }

    /* O menu aberto nunca pode estar escondido. */
    body.cdc-sheet-open > header,
    body.cdc-menu-open > header {
      transform: none;
    }

    body.cdc-mobile-on > header .wrapper:first-child {
      padding: var(--cdc-space-2, 10px) var(--cdc-space-4, 16px);
      padding-left: calc(16px + var(--cdc-safe-l));
      padding-right: calc(16px + var(--cdc-safe-r));
      width: auto;
      gap: var(--cdc-space-2, 8px);
    }

    /* O logo tem `margin-bottom:20px` herdado do desktop, que desalinha a linha
       em celular e come 20px de altura útil do header sticky. */
    body.cdc-mobile-on > header .logo { margin-bottom: 0; }
    body.cdc-mobile-on > header .wrapper > div[style*="height:60px"] { height: var(--cdc-tap-min) !important; }
    body.cdc-mobile-on > header .logo img { height: 40px; }

    /* A busca do header vira botão: o campo real está na folha de busca, que dá
       teclado com "buscar" e histórico. Menos altura no sticky, mais conteúdo. */
    body.cdc-mobile-on > header .wrapper form.search { display: none; }
  }

  /* Trava de rolagem quando uma folha está aberta.
     `position:fixed` no body é o único jeito confiável no Safari iOS; o JS
     guarda e restaura o scrollTop. */
  body.cdc-scroll-lock {
    position: fixed;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  /* ==========================================================================
     04. TAB BAR
     ========================================================================== */

  .cdc-tabbar {
    display: none;
  }

  @media (max-width: 1023.98px) {
    .cdc-tabbar {
      display: block;
      position: fixed;
      left: 0; right: 0;
      bottom: 0;
      z-index: var(--cdc-z-tabbar);
      background: var(--cdc-surface);
      border-top: 1px solid var(--cdc-border);
      box-shadow: var(--cdc-elev-up);
      padding-bottom: var(--cdc-safe-b);
      padding-left: var(--cdc-safe-l);
      padding-right: var(--cdc-safe-r);
      transform: translateY(0);
      transition: transform .24s var(--cdc-ease);
      will-change: transform;
    }

    /* Some junto com o header ao rolar para baixo — a tela inteira fica para o
       conteúdo e para o anúncio in-content. */
    body.cdc-hdr-hidden .cdc-tabbar {
      transform: translateY(calc(100% + var(--cdc-safe-b)));
    }

    body.cdc-cookmode .cdc-tabbar {
      transform: translateY(calc(100% + var(--cdc-safe-b)));
    }

    .cdc-tabbar-list {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .cdc-tabbar-item { list-style: none; margin: 0; }

    .cdc-tab {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--cdc-space-05, 2px);
      padding: var(--cdc-space-1, 6px) var(--cdc-space-05, 2px);
      color: var(--cdc-brand-deep);
      text-decoration: none;
      font-size: var(--cdc-text-2xs, 11px);
      line-height: 1.2;
      -webkit-tap-highlight-color: transparent;
    }

    .cdc-tab .cdc-i { block-size: var(--cdc-icon-sm); inline-size: var(--cdc-icon-sm); fill: currentColor; }

    .cdc-tab-ico { position: relative; display: block; }

    .cdc-tab-txt {
      display: block;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .cdc-tab.is-current {
      color: var(--cdc-text-brand);
      font-weight: 700;
    }

    /* Indicador de aba ativa que não depende só de cor (WCAG 1.4.1). */
    .cdc-tab.is-current::before {
      content: "";
      position: absolute;
      top: 0; left: 50%;
      width: var(--cdc-space-8); height: 3px;
      border-radius: 0 0 var(--cdc-radius-2xs) var(--cdc-radius-2xs);
      background: var(--cdc-brand);
      transform: translateX(-50%);
    }
    .cdc-tab { position: relative; }

    .cdc-tab:active { background: var(--cdc-tint-action-06); }

    .cdc-tab-badge {
      position: absolute;
      top: -2px; right: -6px;
      min-block-size: var(--cdc-icon-xs); inline-size: var(--cdc-icon-xs);
      padding: 0 var(--cdc-space-1, 4px);
      border-radius: var(--cdc-radius-sm, 8px);
      background: var(--cdc-brand);
      color: var(--cdc-gray-0, #fff);
      font-size: var(--cdc-text-3xs);
      font-weight: 700;
      line-height: var(--cdc-leading-body, 16px);
      text-align: center;
    }
  }

  /* ==========================================================================
     05. FOLHAS (bottom sheets)
     ========================================================================== */

  .cdc-sheet[hidden] { display: none; }

  .cdc-sheet {
    position: fixed;
    inset: 0;
    z-index: var(--cdc-z-sheet);
  }

  .cdc-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: var(--cdc-scrim-modal, rgba(0, 0, 0, .5));
    opacity: 0;
    transition: opacity .2s var(--cdc-ease);
  }

  .cdc-sheet.is-open .cdc-sheet-backdrop { opacity: 1; }

  .cdc-sheet-panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-height: 88dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--cdc-surface);
    border-radius: var(--cdc-radius-xl) var(--cdc-radius-xl) 0 0;
    padding: 8px 16px calc(24px + var(--cdc-safe-b));
    transform: translateY(100%);
    transition: transform .26s var(--cdc-ease);
  }

  .cdc-sheet.is-open .cdc-sheet-panel { transform: translateY(0); }

  @media (min-width: 1024px) {
    .cdc-sheet-panel {
      left: 50%; right: auto; bottom: auto; top: 10vh;
      width: min(560px, 92vw);
      transform: translate(-50%, 20px);
      border-radius: var(--cdc-radius-lg);
      max-height: 78vh;
    }
    .cdc-sheet.is-open .cdc-sheet-panel { transform: translate(-50%, 0); }
  }

  .cdc-sheet-grip {
    width: 40px; height: 4px;
    margin: 4px auto 12px;
    border-radius: var(--cdc-radius-2xs, 2px);
    background: var(--cdc-border);
  }

  .cdc-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cdc-space-3, 12px);
    margin-bottom: var(--cdc-space-4, 16px);
  }

  .cdc-sheet-title {
    font-family: "Baloo 2", sans-serif;
    font-size: var(--cdc-text-lg, 20px);
    line-height: 1.2;
    color: var(--cdc-text-brand);
    margin: 0;
  }

  .cdc-sheet-sub {
    font-size: var(--cdc-text-sm);
    font-weight: 700;
    color: var(--cdc-text-muted);
    margin: var(--cdc-space-5, 20px) 0 var(--cdc-space-2, 10px);
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .cdc-sheet-close {
    width: var(--cdc-tap); height: var(--cdc-tap);
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--cdc-radius-circle, 50%);
    background: var(--cdc-tint-line-50);
    flex: 0 0 auto;
  }
  .cdc-sheet-close .cdc-i { block-size: var(--cdc-icon-sm); inline-size: var(--cdc-icon-sm); fill: var(--cdc-brand-dark); }

  /* --- formulário de busca --- */

  .cdc-search-form {
    display: flex;
    gap: var(--cdc-space-2, 8px);
  }

  .cdc-search-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--cdc-tap);
    padding: var(--cdc-space-3, 12px) var(--cdc-space-4, 16px);
    font-size: var(--cdc-text-md, 16px); /* menor que 16px força zoom automático no iOS */
    color: var(--cdc-text-strong);
    background: var(--cdc-tint-line-28);
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-pill, 40px);
  }

  .cdc-search-go {
    flex: 0 0 auto;
    min-height: var(--cdc-tap);
    padding: 0 var(--cdc-space-5, 22px);
    border: 0;
    border-radius: var(--cdc-radius-pill, 40px);
    background: var(--cdc-brand);
    color: var(--cdc-gray-0, #fff);
    font-size: var(--cdc-text-lg, 15px);
    font-weight: 700;
  }

  .cdc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cdc-space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .cdc-chips li { list-style: none; margin: 0; }

  .cdc-chip {
    display: inline-flex;
    align-items: center;
    min-height: var(--cdc-control-sm);
    padding: 0 var(--cdc-space-4, 16px);
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-pill, 40px);
    background: var(--cdc-gray-0, #fff);
    color: var(--cdc-brand-dark);
    font-size: var(--cdc-text-sm, 14px);
    text-decoration: none;
  }
  .cdc-chip:active { background: var(--cdc-tint-accent-16, rgba(247, 172, 29, .16)); }

  /* --- menu dentro da folha --- */

  .cdc-sheet-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .cdc-sheet-nav li { list-style: none; }
  .cdc-sheet-nav a {
    display: block;
    min-height: var(--cdc-tap);
    padding: var(--cdc-space-3, 13px) var(--cdc-space-1, 4px);
    color: var(--cdc-brand-dark);
    font-size: var(--cdc-text-md, 16px);
    text-decoration: none;
    border-bottom: 1px solid var(--cdc-border);
  }
  .cdc-sheet-nav-count {
    float: inline-end;
    min-inline-size: 2.5ch;
    padding-inline: var(--cdc-space-2);
    border-radius: var(--cdc-radius-pill);
    background: var(--cdc-tint-line-24);
    color: var(--cdc-text-muted);
    font-size: var(--cdc-text-xs);
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  .cdc-sheet-nav ul ul a {
    padding-left: var(--cdc-space-5, 20px);
    font-size: var(--cdc-text-lg, 15px);
    color: var(--cdc-text);
  }

  /* ==========================================================================
     06. SLOTS DE ANÚNCIO
     ========================================================================== */

  .cdc-ad {
    display: block;
    width: 100%;
    margin: var(--cdc-space-6, 24px) 0;
    text-align: center;
    /* Reserva exata por formato via --h: sem CLS e sem sobra de espaço branco. */
    min-height: calc(var(--h, 280px) + 18px);
    contain: layout style;
  }

  .cdc-ad-label {
    display: block;
    margin: 0 0 var(--cdc-space-1, 4px);
    font-size: var(--cdc-text-3xs);
    line-height: var(--cdc-leading-snug, 14px);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cdc-text-muted);
  }

  .cdc-ad-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--h, 280px);
    overflow: hidden;
  }

  /* Espaço nunca colapsa: regra de negócio já firmada nos temas do grupo.
     Slot sem preenchimento continua ocupando a altura reservada. */
  .cdc-ad-box:empty { min-height: var(--h, 280px); }

  .cdc-ad iframe,
  .cdc-ad ins,
  .cdc-ad img { max-width: 100%; }

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

  .cdc-ad-pool { display: none; }

  /* --- âncora de rodapé --- */

  .cdc-anchor[hidden] { display: none; }

  .cdc-anchor {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(var(--cdc-tabbar-h) + var(--cdc-safe-b));
    z-index: var(--cdc-z-anchor);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: var(--cdc-space-1, 4px) 0;
    background: var(--cdc-surface-veil);
    border-top: 1px solid var(--cdc-border);
    box-shadow: var(--cdc-elev-up);
    transform: translateY(110%);
    transition: transform .26s var(--cdc-ease);
  }

  body.cdc-anchor-visible .cdc-anchor { transform: translateY(0); }
  body.cdc-cookmode .cdc-anchor { transform: translateY(110%); }

  @media (min-width: 1024px) {
    .cdc-anchor { display: none; }
  }

  .cdc-anchor-label {
    position: absolute;
    top: -14px; left: 8px;
    padding: var(--cdc-space-05, 1px) var(--cdc-space-1, 6px);
    border-radius: var(--cdc-radius-xs, 4px) var(--cdc-radius-xs, 4px) 0 0;
    background: var(--cdc-surface-veil);
    border: 1px solid var(--cdc-border);
    border-bottom: 0;
    font-size: var(--cdc-text-3xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cdc-text-muted);
  }

  .cdc-anchor-x {
    position: absolute;
    top: -18px; right: 6px;
    width: var(--cdc-control-xs); height: var(--cdc-control-xs);
    display: grid;
    place-items: center;
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-circle, 50%);
    background: var(--cdc-gray-0, #fff);
    box-shadow: var(--cdc-elev-4);
  }
  /* Área de toque de 48px sem aumentar o desenho de 34px. */
  .cdc-anchor-x::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: var(--cdc-tap); height: var(--cdc-tap);
    transform: translate(-50%, -50%);
  }
  .cdc-anchor-x svg { fill: var(--cdc-brand-dark); }

  .cdc-anchor-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
  }

  /* ==========================================================================
     07. RECEITA EM CELULAR
     ========================================================================== */

  @media (max-width: 1023.98px) {

    /* Legibilidade. 18px/32px vindo do desktop dá linha muito solta em 360px;
       o texto ocupa mais telas do que precisa e empurra os anúncios de baixo
       para longe demais. */
    .content .resume {
      font-size: var(--cdc-text-lg, 17px);
      line-height: 1.68;
      padding: var(--cdc-space-4, 18px) 0;
      gap: var(--cdc-space-6, 24px);
    }

    .content-info .accordeon-text p,
    .content-info .accordeon-text h3 {
      font-size: var(--cdc-text-lg, 17px);
      line-height: 1.6;
    }

    /* Passos numerados de verdade: o <ol> do tema não mostra número em celular,
       e o usuário perde o lugar toda vez que olha para a panela. */
    .content-info .accordeon-text ol { counter-reset: cdc-step; gap: var(--cdc-space-8); }

    .content-info .accordeon-text ol > li {
      counter-increment: cdc-step;
      position: relative;
      padding-left: var(--cdc-tap-min);
    }

    .content-info .accordeon-text ol > li::before {
      content: counter(cdc-step);
      position: absolute;
      left: 0; top: 0;
      width: 32px; height: 32px;
      display: grid;
      place-items: center;
      border-radius: var(--cdc-radius-circle, 50%);
      background: var(--cdc-accent);
      color: var(--cdc-brand-deep);
      font-weight: 700;
      font-size: var(--cdc-text-lg, 15px);
    }

    /* A tabela de resumo (preparo/rendimento/dificuldade) fica com 12px em
       celular — pequena demais para o dado mais consultado da página. */
    .content .recipe-info tbody tr td span { font-size: var(--cdc-text-sm, 14px); padding: var(--cdc-space-3, 14px) 0; }
    .content .recipe-info thead th { font-size: var(--cdc-text-xs, 12px); }

    /* Ingredientes: bloco mais alto que a tela inteira força rolagem ida e volta
       durante o preparo. Limitamos a altura com rolagem interna e cabeçalho fixo. */
    .content-text-shadow ul li { font-size: var(--cdc-text-md, 16px); line-height: 1.45; margin: var(--cdc-space-1, 6px) 0; }

    /* Botões de porção com alvo real. */
    .content-text-shadow .quantidade { padding: var(--cdc-space-2, 8px) var(--cdc-space-3, 12px); margin: var(--cdc-space-4, 16px) 0; }
    /* Largura fixa e respiro na mesma regra: precisa de border-box explícito
       agora que o modelo de caixa não é mais global. */
    .content-text-shadow .quantidade-actions {
      box-sizing: border-box;
      width: auto;
      padding: var(--cdc-space-1);
    }
    .content-text-shadow .quantidade-actions button { width: 32px; height: 32px; }
    .content-text-shadow .quantidade-actions label input { font-size: var(--cdc-text-md, 16px); }

    /* Botão "Salvar receita" flutuando com margin-top negativo sobre a imagem:
       em telas pequenas ele cobre parte da foto e fica a 10px da borda. */
    .content .caption button { margin-right: var(--cdc-space-3, 12px); min-height: var(--cdc-tap); }
    .content .caption a { min-height: var(--cdc-tap); }
  }

  /* --- Modo cozinha ------------------------------------------------------- */

  .cdc-fab {
    position: fixed;
    right: calc(16px + var(--cdc-safe-r));
    bottom: calc(var(--cdc-tabbar-h) + var(--cdc-anchor-h) + var(--cdc-safe-b) + 16px);
    z-index: var(--cdc-z-tabbar);
    display: none;
    align-items: center;
    gap: var(--cdc-space-2, 8px);
    min-height: var(--cdc-tap);
    padding: 0 var(--cdc-space-4, 18px);
    border: 0;
    border-radius: var(--cdc-radius-pill, 40px);
    background: var(--cdc-brand-dark);
    color: var(--cdc-gray-0, #fff);
    font-size: var(--cdc-text-sm, 14px);
    font-weight: 700;
    box-shadow: var(--cdc-elev-4);
    transition: transform .24s var(--cdc-ease), background .2s;
  }

  @media (max-width: 1023.98px) {
    body.cdc-ctx-receita .cdc-fab { display: inline-flex; }
  }

  .cdc-fab .cdc-i { block-size: var(--cdc-icon-sm); inline-size: var(--cdc-icon-sm); fill: currentColor; }
  .cdc-fab[aria-pressed="true"] { background: var(--cdc-accent); color: var(--cdc-brand-deep); }
  body.cdc-hdr-hidden .cdc-fab { transform: translateY(calc(var(--cdc-tabbar-h) + 8px)); }

  /* Estado ativo: passos maiores, distrações fora, ingredientes acessíveis. */
  body.cdc-cookmode .content-info .accordeon-text p,
  body.cdc-cookmode .content-info .accordeon-text h3 {
    font-size: var(--cdc-text-xl, 21px);
    line-height: 1.62;
  }

  body.cdc-cookmode .content-info .accordeon-text ol > li::before {
    width: 38px; height: 38px;
    font-size: var(--cdc-text-lg, 17px);
  }
  body.cdc-cookmode .content-info .accordeon-text ol > li { padding-left: calc(var(--cdc-icon-lg) + var(--cdc-space-5)); }

  body.cdc-cookmode .cdc-anchor,
  body.cdc-cookmode .cdc-resume,
  body.cdc-cookmode .cdc-install,
  body.cdc-cookmode #footer,
  body.cdc-cookmode .seetoo,
  body.cdc-cookmode .receitas-maisvistas,
  body.cdc-cookmode .comments {
    display: none;
  }

  /* Chip de ingredientes que acompanha a rolagem no modo cozinha. */
  .cdc-cook-ing {
    position: fixed;
    left: calc(12px + var(--cdc-safe-l));
    bottom: calc(var(--cdc-safe-b) + var(--cdc-space-4));
    z-index: var(--cdc-z-tabbar);
    display: none;
    align-items: center;
    gap: var(--cdc-space-1);
    min-height: var(--cdc-tap);
    padding: 0 var(--cdc-space-4, 16px);
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-pill, 40px);
    background: var(--cdc-gray-0, #fff);
    color: var(--cdc-brand-dark);
    font-size: var(--cdc-text-sm, 14px);
    font-weight: 700;
    box-shadow: var(--cdc-elev-4);
  }
  body.cdc-cookmode .cdc-cook-ing { display: inline-flex; }

  .cdc-toast[hidden] { display: none; }
  .cdc-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--cdc-tabbar-h) + var(--cdc-safe-b) + 72px);
    z-index: var(--cdc-z-sheet);
    transform: translateX(-50%);
    max-width: min(90vw, 420px);
    padding: var(--cdc-space-3, 12px) var(--cdc-space-4, 18px);
    border-radius: var(--cdc-radius-pill, 40px);
    background: var(--cdc-surface-inverse);
    color: var(--cdc-gray-0, #fff);
    font-size: var(--cdc-text-sm, 14px);
    text-align: center;
    box-shadow: var(--cdc-elev-4);
  }

  /* ==========================================================================
     08. RETORNO E CONTINUIDADE
     ========================================================================== */

  /* --- barra de progresso da leitura --- */

  .cdc-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 1000000;
    background: transparent;
    pointer-events: none;
  }
  .cdc-progress-bar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--cdc-accent);
    transition: width .1s linear;
  }
  @media (min-width: 1024px) { .cdc-progress { display: none; } }

  /* --- continuar de onde parou --- */

  .cdc-resume[hidden] { display: none; }
  .cdc-resume {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(var(--cdc-tabbar-h) + var(--cdc-anchor-h) + var(--cdc-safe-b) + 12px);
    z-index: var(--cdc-z-tabbar);
    display: flex;
    align-items: center;
    gap: var(--cdc-space-2, 8px);
    padding: var(--cdc-space-2, 10px) var(--cdc-space-2, 8px) var(--cdc-space-2, 10px) var(--cdc-space-4, 16px);
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-lg);
    background: var(--cdc-gray-0, #fff);
    box-shadow: var(--cdc-elev-4);
  }
  .cdc-resume-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cdc-space-05, 2px);
  }
  .cdc-resume-txt {
    font-size: var(--cdc-text-sm);
    color: var(--cdc-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cdc-resume-go {
    font-size: var(--cdc-text-lg, 15px);
    font-weight: 700;
    color: var(--cdc-text-brand);
    text-decoration: none;
  }
  .cdc-resume-x {
    flex: 0 0 auto;
    width: var(--cdc-tap); height: var(--cdc-tap);
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--cdc-radius-circle, 50%);
    background: transparent;
  }
  .cdc-resume-x .cdc-i { block-size: var(--cdc-icon-xs); inline-size: var(--cdc-icon-xs); fill: var(--cdc-text-muted); }

  @media (min-width: 1024px) { .cdc-resume { display: none; } }

  /* --- voltar ao topo --- */

  /* --------------------------------------------------------------------------
     VOLTAR AO TOPO — o botão do tema, agora funcional e dentro do sistema.

     Antes havia dois: o `#backtotop` do footer.php (que aparecia e não fazia
     nada, porque nunca teve handler de clique) e um `.cdc-totop` meu, escondido
     no desktop. Duas implementações da mesma função, e a que ficava visível
     justamente no desktop era a quebrada.

     Ficou um. O posicionamento no celular considera a tab bar, o anúncio âncora
     e a área segura — senão o botão fica atrás da navegação, que é onde ele
     estava antes de qualquer camada existir.
     -------------------------------------------------------------------------- */
  #backtotop {
    position: fixed;
    z-index: var(--cdc-z-tabbar);
    inline-size: var(--cdc-tap);
    block-size: var(--cdc-tap);
    display: none;
    place-items: center;
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-circle);
    background: var(--cdc-surface);
    box-shadow: var(--cdc-elev-4);
    cursor: pointer;
    transition: opacity var(--cdc-dur-base) var(--cdc-ease),
                transform var(--cdc-dur-base) var(--cdc-ease);
  }

  #backtotop.active { display: grid; }

  #backtotop:focus-visible {
    outline: 3px solid var(--cdc-focus);
    outline-offset: 2px;
  }

  #backtotop svg,
  #backtotop .cdc-i {
    block-size: var(--cdc-icon-sm);
    inline-size: var(--cdc-icon-sm);
    fill: var(--cdc-brand-dark);
  }

  /* Celular: acima da tab bar, do anúncio âncora e da barra de gestos. */
  @media (max-width: 1023.98px) {
    #backtotop {
      inset-inline-end: calc(var(--cdc-space-4) + var(--cdc-safe-r));
      inset-block-end: calc(var(--cdc-tabbar-h) + var(--cdc-anchor-h) + var(--cdc-safe-b) + var(--cdc-space-4));
    }

    /* Some junto com a barra de ação da receita, que ocupa a mesma faixa. */
    body.cdc-ctx-receita #backtotop { display: none; }
  }

  @media (min-width: 1024px) {
    #backtotop {
      inset-inline-end: var(--cdc-space-8);
      inset-block-end: var(--cdc-space-8);
    }
  }

  /* --- convite de instalação --- */

  .cdc-install[hidden] { display: none; }
  .cdc-install {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(var(--cdc-tabbar-h) + var(--cdc-anchor-h) + var(--cdc-safe-b) + 12px);
    z-index: var(--cdc-z-sheet);
    display: grid;
    grid-template-columns: var(--cdc-thumb-sm) minmax(0, 1fr);
    grid-template-areas: "icon text" "actions actions";
    gap: var(--cdc-space-3, 12px);
    padding: var(--cdc-space-3, 14px);
    border: 1px solid var(--cdc-border);
    border-radius: var(--cdc-radius-lg);
    background: var(--cdc-gray-0, #fff);
    box-shadow: var(--cdc-elev-4);
  }
  .cdc-install-icon { grid-area: icon; border-radius: var(--cdc-radius-sm); }
  .cdc-install-txt  { grid-area: text; display: flex; flex-direction: column; gap: var(--cdc-space-05, 2px); }
  .cdc-install-title { font-size: var(--cdc-text-lg, 15px); color: var(--cdc-brand-dark); }
  .cdc-install-desc  { font-size: var(--cdc-text-sm); color: var(--cdc-text-muted); }
  .cdc-install-actions {
    grid-area: actions;
    display: flex;
    gap: var(--cdc-space-2, 8px);
    justify-content: flex-end;
  }
  .cdc-install-no,
  .cdc-install-yes {
    min-height: var(--cdc-tap);
    padding: 0 var(--cdc-space-5, 20px);
    border-radius: var(--cdc-radius-pill, 40px);
    font-size: var(--cdc-text-sm, 14px);
    font-weight: 700;
  }
  .cdc-install-no  { border: 1px solid var(--cdc-border); background: var(--cdc-gray-0, #fff); color: var(--cdc-text-muted); }
  .cdc-install-yes { border: 0; background: var(--cdc-brand); color: var(--cdc-gray-0, #fff); }

  @media (min-width: 1024px) { .cdc-install { display: none; } }

  /* ==========================================================================
     09. PREFERÊNCIAS DO SISTEMA
     ========================================================================== */

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
    .skeleton::before { animation: none; }
  }

  @media (prefers-contrast: more) {
    :root {
      /* Reforço de contraste movido para cdc-design-system.css — o sistema tem
         uma fonte de tokens só. */
    }
    .cdc-tab { color: var(--cdc-gray-1000, #000); }
    .cdc-ad-label, .cdc-anchor-label { color: var(--cdc-gray-900, #333); }
  }

  /* Suporte a fonte grande do sistema: nada de altura fixa em px onde há texto. */
  @media (max-width: 1023.98px) {
    .cdc-tab-txt { font-size: clamp(10px, 3vw, 12px); }
    .cdc-tab { min-height: max(var(--cdc-tabbar-h), 3.5em); }
  }

  /* Impressão: a receita é impressa com frequência — sem anúncio, sem app shell. */
  @media print {
    .cdc-tabbar, .cdc-anchor, .cdc-fab, .cdc-resume, .cdc-install,
    #backtotop, .cdc-progress, .cdc-sheet, .cdc-ad, .ads, .top-banner,
    header, #footer, .comments, .share {
      display: none !important;
    }
    .content-info .accordeon-text.inactive { display: block !important; }
    body { background: var(--cdc-gray-0, #fff); }
  }
}
/* @@ /receitario:layer:app @@ */