/* ════ 2026-10-01 — GRÁFICO EM CARROSSEL (zkTrendCarousel, assets/trend_carousel.js) ════
   Comportamento da tela Tendências do Unique Health com a identidade do site (especificação em
   APP_Zoukei/design/organizacao-categorias.md §4). Reaproveita a "montanha-russa" do peso (.zt-cur-wrap, .zt-line,
   .zt-area, .zt-cur-*, .zt-bal*, entrada .zt-go), o segmentado deslizante .zk-seg e os chips .zk-trend-chips/.ztc.
   Aqui ficam só: o segmentado com 4 períodos, a faixa de datas com as setas, o estado do gesto (arrastando a janela =
   cursor e balão escondidos; percorrendo = mira), os pontos e as linhas verticais que andam com o conteúdo, a
   "Análise do período" e, no painel "Saúde conectada", o cartão que abre o gráfico e o bloco do gráfico.
   Cores só por tokens do tema (--accent, --panel, --panel-2, --line, --text, --muted): claro, escuro e as paletas.
   prefers-reduced-motion: sem transições (o JS também tira a inércia: a janela salta). */
.ztcar{display:flex;flex-direction:column;gap:8px;min-width:0}
.ztcar-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
/* 4 períodos no switch deslizante da identidade (o .zk-seg base cobre 2 ou 3) */
.ztcar-seg.zk-seg{max-width:100%}
.ztcar-seg.zk-seg:has(button:nth-child(4))::before{width:calc((100% - 6px)/4)}
.ztcar-seg.zk-seg:has(button:nth-child(4).active)::before{transform:translateX(300%)}
.ztcar-seg.zk-seg button{padding:0 10px;font-size:12.5px;min-height:34px}
.ztcar-seg.zk-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* faixa de datas com as setas ‹ › (alvo de 36 px; desativada = apagada, mas continua focável) */
.ztcar-range{display:flex;align-items:center;gap:4px;margin-left:auto}
.ztcar-nav{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--text);cursor:pointer;transition:border-color .18s ease,color .18s ease,opacity .18s ease}
.ztcar-nav:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));color:var(--accent)}
.ztcar-nav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ztcar-nav[aria-disabled="true"]{opacity:.38;cursor:default;border-color:var(--line);color:var(--muted)}
.ztcar-dates{min-width:0;padding:0 4px;font-size:13px;font-weight:800;line-height:1.25;color:var(--text);text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
/* o gráfico: arrastar = mão; percorrer as medições (toque longo) = mira */
.ztcar-wrap{margin-top:0}
.zt-cur-wrap.ztcar-wrap>.zk-trend-svg{cursor:grab;-webkit-touch-callout:none;outline-offset:3px}
.zt-cur-wrap.ztcar-wrap.is-panning>.zk-trend-svg{cursor:grabbing}
.zt-cur-wrap.ztcar-wrap.is-scrub>.zk-trend-svg{cursor:crosshair}
/* janela andando (arraste, inércia, setas) ou sem medição na janela: cursor e balão somem (visibility, porque a
   opacidade é da animação de entrada da montanha-russa) */
.ztcar-wrap.ztcar-moving .zt-cur,.ztcar-wrap.ztcar-moving .zt-bal-rail,
.ztcar-wrap.ztcar-nosel .zt-cur,.ztcar-wrap.ztcar-nosel .zt-bal-rail{visibility:hidden}
/* depois de um movimento o balão aparece direto na medição (não desliza de onde estava) */
.ztcar-wrap.ztcar-jump .zt-cur-x,.ztcar-wrap.ztcar-jump .zt-cur-y,.ztcar-wrap.ztcar-jump .zt-cur-h,
.ztcar-wrap.ztcar-jump .zt-bal,.ztcar-wrap.ztcar-jump .zt-bal-arrow{transition:none}
.ztcar-vgrid line{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4}
.ztcar-mk{fill:var(--panel);stroke:var(--zt-tone,var(--accent));stroke-width:2}
.ztcar-line2{fill:none;stroke:color-mix(in srgb,var(--zt-tone,var(--accent)) 55%,var(--muted));stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:5 4}
.ztcar-empty{fill:var(--muted);font-size:12.5px;font-weight:700}
.ztcar-xl .zt-axis{transition:opacity .15s ease}
/* entrada: os pontos e a segunda linha aparecem com a área (a linha principal se desenha pela .zt-line) */
.ztcar-svg .ztcar-mks,.ztcar-svg .ztcar-line2{opacity:0}
.ztcar-svg.zt-go .ztcar-mks,.ztcar-svg.zt-go .ztcar-line2{animation:ztArea .5s ease .8s forwards}
/* "Análise do período" */
.ztcar-ana{margin-top:4px}
.ztcar-ana-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px}
.ztcar-ana-title{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:14px;font-weight:850;color:var(--text)}
.ztcar-ana-sub{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
/* 4 colunas quando cabe, 2 em bloco estreito (celular ou a coluna do painel "Saúde conectada" no computador) */
.zk-trend-chips.ztcar-ana-grid{margin-top:8px;grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
.ztcar-ana .ztc strong{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ztcar-ana .ztc-d{display:inline-flex;align-items:center;gap:4px}
.ztcar-none{min-height:120px;display:grid;align-items:center}
@media (max-width:560px){
  .ztcar-top{gap:8px}
  .ztcar-seg.zk-seg{width:100%}
  .ztcar-seg.zk-seg button{padding:0 4px;font-size:12px}
  .ztcar-range{width:100%;justify-content:space-between;margin-left:0}
}
/* ── "Saúde conectada": o cartão abre o gráfico da métrica logo abaixo ── */
.hs-card[data-ztcar-metric],.hs-sleep[data-ztcar-metric]{cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease}
.hs-card[data-ztcar-metric]:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.hs-card[data-ztcar-metric]:focus-visible,.hs-sleep[data-ztcar-metric]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hs-card[aria-expanded="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.hs-sleep[aria-expanded="true"]{box-shadow:inset 0 0 0 1px var(--hs-c,var(--accent))}
.hs-card-more{display:inline-flex;align-items:center;gap:3px;margin-top:auto;padding-top:4px;font-size:11.5px;font-weight:800;color:var(--accent)}
.hs-sleep .hs-card-more{margin-top:2px;padding-top:0;color:var(--hs-c,var(--accent))}
.hs-detail{padding:14px;border-radius:18px;border:1px solid var(--line);background:var(--panel)}
.hs-detail[hidden]{display:none}
.hs-detail-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.hs-detail-title{font-size:15px;font-weight:850;color:var(--text)}
.hs-detail-close{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-left:auto;padding:0;border:1px solid var(--line);border-radius:999px;background:var(--panel-2,var(--panel));color:var(--muted);cursor:pointer}
.hs-detail-close:hover{color:var(--text)}
.hs-detail-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hs-detail-msg{display:block;padding:18px 2px;color:var(--muted);font-size:13px}
@media (prefers-reduced-motion:reduce){
  .ztcar-nav,.ztcar-xl .zt-axis,.hs-card[data-ztcar-metric],.hs-sleep[data-ztcar-metric]{transition:none}
  .ztcar-svg .ztcar-mks,.ztcar-svg .ztcar-line2{opacity:1}
  .ztcar-svg.zt-go .ztcar-mks,.ztcar-svg.zt-go .ztcar-line2{animation:none}
}
@media print{
  .ztcar-nav,.ztcar-seg,.hs-card-more,.hs-detail-close{display:none!important}
  .ztcar-svg .ztcar-mks,.ztcar-svg .ztcar-line2{opacity:1!important;animation:none!important}
}
/* ── modo compacto (opts.compact): o resumo do Peso no Início — o mesmo desenho, sem período, sem análise, sem balão ── */
.ztcar--compact{gap:0}
.ztcar--compact .ztcar-top,.ztcar--compact .ztcar-ana,.ztcar--compact .zt-bal-rail,.ztcar--compact .ztcar-yl,
.ztcar--compact .zt-cur-h,.ztcar--compact .zt-cur-v,.ztcar--compact .ztcar-hgrid{display:none}
.ztcar--compact .zt-cur-wrap{padding-top:0;margin-top:0}
.ztcar--compact .zt-cur-wrap>.zk-trend-svg{cursor:pointer;border-radius:10px}
.ztcar--compact .zt-cur-wrap.is-panning>.zk-trend-svg{cursor:grabbing}
.ztcar--compact .zt-axis{font-size:10px}
.ztcar--compact .ztcar-mks{display:none}
/* ════ fim do gráfico em carrossel ════ */