/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   2026-10-01 — SITE COM CARA DE APP (APP_Zoukei/design/site-mobile-app.md §1)
   A área de saúde (calculadora, Guia e Conta: html.zk-app, posto pelo app/layout.php) vira, até 767 px, a casca do app
   Android: barra de baixo Hoje · Doses · Atividade · Guia · Conta com a pílula na aba acesa, cabeçalho de cada aba no
   molde do ZkPageHeader, sub-abas como o segmentado do app, cartões com 16 px de margem e raio de 22, toques de 44 px,
   folhas de baixo nos registros, o "+" de registro rápido no lugar da dock e as safe areas do iPhone.
   O vidro do iPhone fica em assets/ios-glass.css; o comportamento (aba acesa, "+", folhas, teclado) em mobile-app.js.
   O computador (≥ 768 px) não muda: tudo aqui está dentro de @media (max-width: 767px), salvo o tap highlight.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

html.zk-app{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
/* o "+" e a folha "Registrar" só existem no celular */
.zk-mapp-fab,.zk-msheet-bd{display:none}

@media (max-width:767px){
  html.zk-app{
    --zk-sat:env(safe-area-inset-top,0px);
    --zk-sab:env(safe-area-inset-bottom,0px);
    --zk-sal:env(safe-area-inset-left,0px);
    --zk-sar:env(safe-area-inset-right,0px);
    --zk-top:calc(52px + var(--zk-sat));          /* topo fixo + barra de status (PWA black-translucent) */
    --zk-bar-h:64px;                               /* barra de baixo, sem a safe area */
    --zk-bar-gap:0px;                              /* distância da barra até a borda (a cápsula do vidro sobe) */
    --zk-gutter:16px;
    --zk-card-r:22px;
    --zk-acc-ink:color-mix(in srgb,var(--accent) 58%,var(--text));  /* texto no tom do acento com contraste ≥ 4,5:1 */
  }

  /* ── controles: sem seleção do rótulo ao segurar, clique sem atraso ── */
  html.zk-app :is(.zk-hbar-item,.calc-tab-btn,.zk-mapp-fab,.zk-msheet-act,.zk-msheet-chip,.zk-msheet-x){
    touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

  /* ── topo universal: safe area de cima (PWA) e a mesma altura medida pelo stackH() das Ferramentas ── */
  html.zk-app .pub-topbar{box-sizing:border-box;height:var(--zk-top)!important;
    padding:var(--zk-sat) calc(12px + var(--zk-sar)) 0 calc(12px + var(--zk-sal))!important}
  html.zk-app .pub-layout{padding-top:var(--zk-top)!important}
  /* toque de 44 px de altura nos botões do topo (a largura fica em 40 para os 6 caberem em 360 px) */
  html.zk-app .pub-topbar :is(.icon-btn,.topbar-theme-btn,.pub-lang-btn,.pub-cart-btn,.pub-mobile-nav-btn){min-width:40px;min-height:44px}

  /* ── conteúdo: calha de 16 px, espaço para a barra de baixo e para o "+" ── */
  html.zk-app .pub-main{padding-left:calc(var(--zk-gutter) + var(--zk-sal))!important;padding-right:calc(var(--zk-gutter) + var(--zk-sar))!important}
  html.zk-app body:has(.zk-hbar--bottom) .pub-main{padding-bottom:calc(var(--zk-bar-h) + var(--zk-bar-gap) + var(--zk-sab) + 28px)!important}
  html.zk-app.zk-has-fab body:has(.zk-hbar--bottom) .pub-main{padding-bottom:calc(var(--zk-bar-h) + var(--zk-bar-gap) + var(--zk-sab) + 92px)!important}

  /* Conta: o cartão do perfil na mesma calha dos outros */
  html.zk-app .my-profile-wrap{padding-left:0;padding-right:0}

  /* ── barra de baixo (a do app) ── */
  html.zk-app .zk-hbar--bottom{display:flex;box-sizing:border-box;min-height:calc(var(--zk-bar-h) + var(--zk-sab));
    padding:6px calc(6px + var(--zk-sar)) calc(6px + var(--zk-sab)) calc(6px + var(--zk-sal));gap:0;
    background:var(--panel,#fff);border-top:1px solid var(--line);box-shadow:0 -2px 12px rgba(0,0,0,.06)}
  html.zk-app .zk-hbar--bottom .zk-hbar-item{min-height:52px;gap:4px;padding:2px 0;border-radius:16px;color:var(--muted);
    font-size:12px;font-weight:700;letter-spacing:.01em}
  html.zk-app .zk-hbar--bottom .zk-hbar-item svg{padding:0}
  html.zk-app .zk-hbar--bottom .zk-nav-ic{display:grid;place-items:center;box-sizing:content-box;padding:4px 20px;border-radius:999px;
    transition:background-color .18s ease,transform .12s ease}
  html.zk-app .zk-hbar--bottom .zk-hbar-item.on{color:var(--zk-acc-ink);font-weight:800}
  html.zk-app .zk-hbar--bottom .zk-hbar-item.on .zk-nav-ic{background:color-mix(in srgb,var(--accent) 20%,transparent)}
  html.zk-app .zk-hbar--bottom .zk-hbar-item:active .zk-nav-ic{transform:scale(.92)}
  html.zk-app .zk-hbar--bottom .zk-hbar-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  html.zk-app .zk-hbar--bottom .zk-hbar-item[hidden]{display:none!important}
  /* o teclado aberto esconde a barra e o "+" (o espaço é do formulário, como no app) */
  html.zk-app.zk-kb-open :is(.zk-hbar--bottom,.zk-mapp-fab,.zk-bug-fab){display:none!important}

  /* ── cabeçalho de cada aba (ZkPageHeader): alinhado à calha, sem cartão ── */
  html.zk-app .zk-ph-host{margin:0}
  html.zk-app .zk-ph-host>.zk-ph{padding:10px 0 6px;border-radius:0;column-gap:12px}
  html.zk-app .zk-ph .zk-ph-title{font-size:26px;line-height:1.12}
  html.zk-app .zk-ph .zk-ph-sub{font-size:14px;line-height:1.35}
  html.zk-app .zk-ph-av{width:44px;height:44px}
  html.zk-app .zk-ph-host>.calc-tour-btn{margin:6px 0 4px}
  /* Atividade: a sub-aba Treinos ganha o cabeçalho do app ("Movimento" · Atividade) no lugar do "Diário" */
  html.zk-app[data-zk-sub="activity"] #zkPageHead .zk-ph[data-zk-ph-group="saude"]{display:none!important}
  html.zk-app[data-zk-sub="activity"] #zkPageHead .zk-ph[data-zk-ph-group="atividade"]{display:grid!important}

  /* ── sub-abas = segmentado do app: pílulas de largura igual; rola de lado só quando não cabe ── */
  html.zk-app .zk-hcat-wrap{top:var(--zk-top)}
  html.zk-app .calc-tabs-wrap{top:var(--zk-top)!important;margin:0 0 12px;padding:6px 0}
  html.zk-app #calcTabsBar{gap:2px;padding:4px;margin:0;border:1px solid var(--line);border-radius:18px;background:var(--panel-2);
    justify-content:flex-start}
  html.zk-app #calcTabsBar>.calc-tab-btn{flex:1 1 0;min-width:max-content;min-height:44px;justify-content:center;gap:6px;
    padding:8px 12px;border-radius:14px;font-size:13.5px;font-weight:700;white-space:nowrap;color:var(--muted)}
  html.zk-app #calcTabsBar>.calc-tab-btn.active{color:var(--zk-acc-ink)}
  html.zk-app #calcTabsBar>.calc-tab-btn.active,html.zk-app #calcTabsBar>.zk-pick-ind{
    background:color-mix(in srgb,var(--accent) 16%,var(--panel));
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent);border-radius:14px}
  html.zk-app #calcTabsBar.zk-ind-on>.calc-tab-btn.active{background:transparent;box-shadow:none}
  html.zk-app #calcTabsBar .calc-tab-cat{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
  /* Treinos é a aba Atividade da barra de baixo: sai do Diário no celular; na própria Atividade não há sub-abas */
  html.zk-app #calcTabsBar :is(.calc-tab-btn[data-tab="activity"],.calc-tab-cat[data-cat="atividade"]){display:none!important}
  html.zk-app[data-zk-sub="activity"] :is(.calc-tabs-wrap,#calcTabsBar){display:none!important}
  /* no Hoje só a fileira de categorias fica presa ao topo, como no app (o stickBottom() do home-summary.js mede de novo) */
  html.zk-app[data-zk-sub="home"] .calc-tabs-wrap{position:static!important}

  /* ── cartões: a medida do app (16 px de calha, raio 22) ── */
  html.zk-app :is(.calc-panel,.zk-sum-card,.calc-step,.calc-result-panel,.calc-accum,.calc-bf7,.track-card,.meal-goal-card,
    .meal-analyze-card,.meal-day-card,.zk-weather,.my-profile-section,.pep-calc-card){border-radius:var(--zk-card-r)}

  /* ── toque mínimo de 44 px nos chips e pílulas de ação ── */
  html.zk-app :is(.zk-sum-act,.zk-fn-chip,.zk-hcat-chip,.calc-tool-btn,.calc-chip,.dm-chip){min-height:44px}

  /* ── campos com 16 px: o iOS não dá zoom ao focar (a regra do pointer:coarse do style.css só cobre o .pub-main) ── */
  html.zk-app :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,textarea){font-size:16px!important}

  /* ── troca de aba: entrada curta só por opacidade (transform criaria um bloco de contenção para os modais fixos) ── */
  html.zk-app .calc-tab-panel.active{animation:zkMappTabIn .18s ease-out backwards}

  /* ── folhas de baixo nos registros (dose, peso, atividade e a folha "Registrar" do "+") ── */
  html.zk-app :is(.dose-modal-backdrop,.bmform-modal,.actlog-modal-backdrop,.zk-msheet-bd){
    top:var(--zk-vvt,0px)!important;bottom:auto!important;height:var(--zk-vvh,100dvh)!important;
    align-items:flex-end!important;justify-content:center;padding:0!important;overflow:hidden!important}
  html.zk-app :is(.dose-modal,.bmform-dialog,.actlog-modal,.zk-msheet){position:relative;box-sizing:border-box;
    width:100%!important;max-width:100%!important;min-height:0!important;margin:0!important;
    max-height:calc(var(--zk-vvh,100dvh) - var(--zk-sat) - 10px)!important;border-radius:24px 24px 0 0!important;
    border:0!important;border-top:1px solid var(--line)!important;box-shadow:0 -10px 40px rgba(0,0,0,.22)!important;
    animation:zkMappSheetIn .32s cubic-bezier(.32,.72,0,1) backwards}
  /* a alça (arrastar para baixo fecha — mobile-app.js) */
  html.zk-app :is(.dose-modal,.bmform-dialog,.actlog-modal,.zk-msheet)::before{content:"";display:block;flex:0 0 auto;
    width:38px;height:5px;margin:8px auto 2px;border-radius:3px;background:color-mix(in srgb,var(--text) 24%,transparent)}
  html.zk-app :is(.dm-head,.bmform-head,.actlog-head,.zk-msheet-head){touch-action:none}
  html.zk-app .dose-modal{padding-bottom:var(--zk-sab)}
  html.zk-app .bmform-foot{padding-bottom:calc(12px + var(--zk-sab))!important}
  html.zk-app .actlog-modal{padding-bottom:var(--zk-sab)}
  html.zk-app :is(.dose-modal,.bmform-dialog,.actlog-modal,.zk-msheet).zk-dragging{animation:none;transition:none!important}

  /* ── o "+" (registro rápido): substitui a dock no celular e o botão de reportar (que entra na folha) ── */
  html.zk-app.zk-has-fab .zk-mapp-fab{display:grid}
  html.zk-app.zk-has-fab .zk-bug-fab{display:none!important}
  .zk-mapp-fab{position:fixed;z-index:951;right:calc(16px + var(--zk-sar));
    bottom:calc(var(--zk-bar-h) + var(--zk-bar-gap) + var(--zk-sab) + 14px);
    place-items:center;width:56px;height:56px;padding:0;border:0;border-radius:18px;cursor:pointer;
    background:var(--accent);color:var(--accent-text,#1a1207);box-shadow:0 8px 22px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.12);
    transition:transform .12s ease,box-shadow .12s ease}
  .zk-mapp-fab:active{transform:scale(.94)}
  .zk-mapp-fab:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 60%,var(--text));outline-offset:3px}
  /* o botão de reportar, quando aparece (Guia, Conta, visitante), fica acima da barra */
  html.zk-app body:has(.zk-hbar--bottom) .zk-bug-fab{bottom:calc(var(--zk-bar-h) + var(--zk-bar-gap) + var(--zk-sab) + 14px)!important}

  /* folha "Registrar" */
  html.zk-app .zk-msheet-bd{position:fixed;left:0;right:0;z-index:10001;display:flex;background:rgba(0,0,0,.42);
    opacity:0;transition:opacity .2s ease}
  html.zk-app .zk-msheet-bd[hidden]{display:none!important}
  html.zk-app .zk-msheet-bd.open{opacity:1}
  html.zk-app .zk-msheet-bd.closing{opacity:0}
  html.zk-app .zk-msheet-bd.closing .zk-msheet{transform:translateY(100%);transition:transform .22s cubic-bezier(.4,0,1,1)}
  html.zk-app .zk-msheet{display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;background:var(--panel);
    padding:0 calc(16px + var(--zk-sar)) calc(16px + var(--zk-sab)) calc(16px + var(--zk-sal))}
  .zk-msheet-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:8px 0 12px}
  .zk-msheet-head strong{font-size:20px;font-weight:800;letter-spacing:-.01em;color:var(--text)}
  .zk-msheet-head p{grid-column:1;margin:0;font-size:14px;color:var(--muted)}
  .zk-msheet-x{grid-row:1/span 2;grid-column:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line);
    border-radius:999px;background:var(--panel-2);color:var(--text);font-size:22px;line-height:1;cursor:pointer}
  .zk-msheet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .zk-msheet-act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:92px;padding:12px 6px;
    border:1px solid var(--line);border-radius:20px;background:var(--panel-2);color:var(--text);font:inherit;font-size:13.5px;
    font-weight:750;cursor:pointer;transition:transform .12s ease,background-color .12s ease}
  .zk-msheet-act:active,.zk-msheet-chip:active{transform:scale(.96)}
  .zk-msheet-act .zki{--zk-s:28px}
  .zk-msheet-sec{margin:16px 0 8px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .zk-msheet-row{display:flex;flex-wrap:wrap;gap:8px}
  .zk-msheet-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 16px;border:1px solid var(--line);
    border-radius:999px;background:var(--panel-2);color:var(--text);font:inherit;font-size:14px;font-weight:750;cursor:pointer}
  .zk-msheet-chip[disabled]{opacity:.55}
  .zk-msheet :is(.zk-msheet-act,.zk-msheet-chip,.zk-msheet-x):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
}

@keyframes zkMappTabIn{from{opacity:0}to{opacity:1}}
@keyframes zkMappSheetIn{from{transform:translateY(100%)}to{transform:none}}

/* reduzir movimento: sem deslize e sem esmaecer (aparece pronto) */
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  html.zk-app .calc-tab-panel.active,
  html.zk-app :is(.dose-modal,.bmform-dialog,.actlog-modal,.zk-msheet){animation:none}
  html.zk-app .zk-msheet-bd,.zk-mapp-fab,.zk-msheet-act,.zk-msheet-chip,html.zk-app .zk-hbar--bottom .zk-nav-ic{transition:none}
}