/* ════ 2026-10-01 — DETALHE DE CADA MÉTRICA (assets/metric-detail.js) ════
   Especificação: APP_Zoukei/design/detalhe-metricas.md. Até 767 px: folha de baixo em tela cheia (.mdet--sheet dentro do
   .mdet-bd); no computador: a página dentro da sub-aba ativa (.mdet--page; o resto da sub-aba some enquanto ele está aberto).
   Só tokens do tema (--bg, --panel, --panel-2, --line, --text, --muted, --accent, --shadow-soft): claro, escuro e as paletas.
   Tons da faixa: data-tone = good | ok | warn | bad (as mesmas cores do resumo do Início). Vidro do iPhone: html.zk-glass.
   prefers-reduced-motion e "Remover animações" (sem html.zk-anim): sem entrada nem transições. */

/* ── gatilhos: o que abre o Detalhe ── */
.mdet-trig{cursor:pointer;-webkit-tap-highlight-color:transparent}
.mdet-trig:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:10px}
.body-metric-card.mdet-trig{transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.body-metric-card.mdet-trig:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.body-metric-card.mdet-trig:active{transform:scale(.985)}
/* dentro do cartão-resumo o "Ver mais" é um link esticado (z-index 1): os valores ficam por cima dele */
.zk-sum-card .mdet-trig{position:relative;z-index:2}
.zk-sum-card .zk-sum-val.mdet-trig{align-self:flex-start}
.zk-sum-card .zk-sum-band.mdet-trig{border-radius:999px}
.zk-sum-card [data-sum-l].mdet-trig{align-self:flex-start;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--muted) 45%,transparent);text-underline-offset:3px}
.zk-sum-card .zk-sum-viz.has-chart{position:relative;z-index:2}
.bmh-chip.mdet-trig:hover,.bm-hero-chip.mdet-trig:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.bm-hero-val.mdet-trig:hover{text-decoration:underline;text-underline-offset:4px}
.hs-card[data-ztcar-metric]:focus-visible,.hs-sleep[data-ztcar-metric]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* botão "Detalhes" ao lado da métrica do gráfico de Medidas */
.body-chart-head{flex-wrap:wrap}
.body-chart-pick{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%}
.body-chart-pick>.zkdd,.body-chart-pick>.zk-select{flex:1 1 auto;min-width:0}
.mdet-sel-btn{flex:0 0 auto;white-space:nowrap}
.mdet-sel-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--accent) 9%,var(--panel));color:var(--text);font:inherit;font-size:12.5px;font-weight:800;line-height:1.1;cursor:pointer}
.mdet-sel-btn[hidden]{display:none}
.mdet-sel-btn:hover{background:color-mix(in srgb,var(--accent) 17%,var(--panel))}
.mdet-sel-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mdet-sel-btn i{font-style:normal;font-size:16px;line-height:1}

/* ── o Detalhe ── */
.mdet{display:flex;flex-direction:column;gap:14px;min-width:0;color:var(--text)}
.mdet [data-tone="good"]{--tone:#16A34A}.mdet [data-tone="ok"]{--tone:#2563EB}.mdet [data-tone="warn"]{--tone:#D97706}.mdet [data-tone="bad"]{--tone:#DC2626}
.mdet--page{max-width:900px;margin:0 auto;padding:4px 0 28px}
.calc-tab-panel.mdet-on>:not(.mdet){display:none!important}
/* cabeçalho de volta: "‹ Hoje · IMC" */
.mdet-bar{display:flex;align-items:center;gap:10px;min-width:0}
.mdet-back{appearance:none;display:inline-flex;align-items:center;gap:4px;min-height:44px;max-width:60%;padding:0 14px 0 8px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--text);font:inherit;font-size:14px;font-weight:800;cursor:pointer;box-shadow:var(--shadow-soft)}
.mdet-back span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdet-back:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.mdet-back:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mdet-crumb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700;color:var(--muted)}
.mdet-crumb::before{content:"·";margin-right:8px}
/* cabeçalho: ícone, nome, valor, faixa, data */
.mdet-head{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-lg,20px);background:var(--panel);box-shadow:var(--shadow-soft)}
.mdet-ic{flex:0 0 auto}
.mdet-head-tx{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.mdet-title{margin:0;font-size:12.5px;font-weight:850;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);overflow-wrap:anywhere}
.mdet-title:focus,.mdet-title:focus-visible{outline:none}
.mdet--kbd .mdet-title:focus{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.mdet-val{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px;line-height:1.05}
.mdet-val strong{font-size:42px;font-weight:850;letter-spacing:-.025em;color:var(--text);font-variant-numeric:tabular-nums}
.mdet-val em{font-style:normal;font-size:15px;font-weight:750;color:var(--muted)}
.mdet-band{display:inline-flex;align-items:center;gap:7px;margin-top:4px;padding:4px 11px 4px 9px;border-radius:999px;background:color-mix(in srgb,var(--tone,#64748B) 13%,var(--panel));font-size:13px;font-weight:800;color:var(--text)}
.mdet-band[hidden]{display:none}
.mdet-band i{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--tone,#64748B);box-shadow:0 0 0 3px color-mix(in srgb,var(--tone,#64748B) 20%,transparent)}
.mdet-when{font-size:12.5px;color:var(--muted)}
.mdet-since{font-size:12.5px;font-weight:700;color:var(--text)}
.mdet-since[hidden]{display:none}
/* gráfico e seções */
.mdet-chart,.mdet-sec{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg,20px);background:var(--panel);box-shadow:var(--shadow-soft);min-width:0}
.mdet-h{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:15px;font-weight:850;color:var(--text)}
.mdet-sec p{margin:0;font-size:14px;line-height:1.55;color:var(--text)}
.mdet-note,.mdet-msg{display:block;margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.mdet-msg{padding:18px 2px}
.mdet-retry{appearance:none;margin-left:6px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel-2,var(--panel));color:var(--text);font:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
.mdet-retry:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* faixas de referência: a régua e a posição da pessoa */
.mdet-ruler{position:relative;padding-top:6px}
.mdet-ruler.has-mk{padding-top:34px}
.mdet-rbar{display:flex;gap:3px;height:12px}
.mdet-rbar span{min-width:3px;border-radius:999px;background:var(--tone);opacity:.85}
.mdet-rmk{position:absolute;left:var(--x);top:24px;bottom:-4px;width:4px;margin-left:-2px;border-radius:2px;background:var(--text);box-shadow:0 0 0 2px var(--panel)}
.mdet-rmk b{position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);padding:3px 9px;border-radius:999px;background:var(--text);color:var(--panel);font-size:12px;font-weight:850;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}
.mdet-rmk.is-l b{left:-2px;transform:none}
.mdet-rmk.is-r b{left:auto;right:-2px;transform:none}
.mdet-rlist{list-style:none;display:grid;gap:2px;margin:12px 0 0;padding:0}
.mdet-rlist li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:38px;padding:4px 10px;border-radius:12px;font-size:14px}
.mdet-rlist li.on{background:color-mix(in srgb,var(--tone,var(--accent)) 12%,var(--panel));font-weight:850}
.mdet-rlist i{width:10px;height:10px;border-radius:50%;background:var(--tone)}
.mdet-rlist em{font-style:normal;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.mdet-rlist li.on em{color:var(--text)}
.mdet .mdet-src{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--muted)}
/* histórico: as últimas medições */
.mdet-rows{list-style:none;margin:0;padding:0;display:grid}
.mdet-rows li+li{border-top:1px solid var(--line)}
.mdet-row{appearance:none;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;width:100%;min-height:52px;padding:6px 4px;border:0;border-radius:12px;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.mdet-row:hover{background:var(--hover-tint,rgba(0,0,0,.04))}
.mdet-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mdet-row-d{display:flex;flex-direction:column;min-width:0;font-size:14px;font-weight:700}
.mdet-row-d small{font-size:12px;font-weight:600;color:var(--muted)}
.mdet-row-v{display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums}
.mdet-row-v b{font-size:15px;font-weight:850}
.mdet-row-v em{font-style:normal;font-size:12px;font-weight:800;color:var(--muted)}
.mdet-row-v em[data-tone="good"]{color:#15803D}.mdet-row-v em[data-tone="bad"]{color:#B91C1C}
:root[data-theme="dark"] .mdet-row-v em[data-tone="good"]{color:#4ADE80}:root[data-theme="dark"] .mdet-row-v em[data-tone="bad"]{color:#F87171}
.mdet-chev{font-style:normal;font-size:20px;line-height:1;color:var(--muted)}
/* ações */
.mdet-acts{display:flex;flex-wrap:wrap;gap:10px}
.mdet-acts:empty{display:none}
.mdet-act{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--accent) 9%,var(--panel));color:var(--text);font:inherit;font-size:14px;font-weight:800;cursor:pointer}
.mdet-act:hover{background:color-mix(in srgb,var(--accent) 17%,var(--panel))}
.mdet-act-solid{background:var(--accent);border-color:transparent;color:var(--accent-text,#1a1207)}
.mdet-act-solid:hover{background:color-mix(in srgb,var(--accent) 88%,#000)}
.mdet-act:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mdet .ztcar-top{margin-bottom:2px}

/* ── celular (até 767 px): folha de baixo em tela cheia ── */
html.mdet-lock{overflow:hidden}
.mdet-bd{position:fixed;inset:0;z-index:10050;display:flex;background:var(--bg)}
.mdet--sheet{position:relative;flex:1;min-width:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 16px calc(env(safe-area-inset-bottom,0px) + 28px)}
.mdet--sheet .mdet-bar{position:sticky;top:calc(env(safe-area-inset-top,0px) * -1 - 10px);z-index:3;margin:calc(env(safe-area-inset-top,0px) * -1 - 10px) -16px 0;padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 8px;background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.mdet--sheet .mdet-val strong{font-size:38px}
.mdet-bd.mdet-in .mdet--sheet{animation:mdetUp .32s cubic-bezier(.2,.8,.2,1) both}
.mdet-bd.mdet-out .mdet--sheet{animation:mdetDown .2s cubic-bezier(.4,0,1,1) both}
.mdet-bd.mdet-out{pointer-events:none}
.mdet--page.mdet-in{animation:mdetFade .24s ease both}
@keyframes mdetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes mdetDown{from{transform:none}to{transform:translateY(100%)}}
@keyframes mdetFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:767px){
  .mdet-head{padding:14px}
  .mdet-ic{align-self:flex-start}
  .mdet-rlist li{min-height:44px}
  .mdet-act{flex:1 1 auto}
}

/* ── vidro do iPhone (html.zk-glass, assets/ios-glass.css): a folha como as outras folhas de vidro ── */
html.zk-glass .mdet-bd{background:var(--zk-glass-scrim,rgba(15,23,42,.28))}
html.zk-glass .mdet--sheet{background:var(--zk-glass-bg-strong,color-mix(in srgb,var(--panel) 70%,transparent));-webkit-backdrop-filter:var(--zk-glass-blur,blur(24px) saturate(180%));backdrop-filter:var(--zk-glass-blur,blur(24px) saturate(180%))}
html.zk-glass .mdet--sheet .mdet-bar{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
html.zk-glass :is(.mdet-head,.mdet-chart,.mdet-sec){background:var(--zk-glass-card,color-mix(in srgb,var(--panel) 74%,transparent));border:1px solid var(--zk-glass-side,var(--line));border-top-color:var(--zk-glass-hi,var(--line));box-shadow:inset 0 1px 0 var(--zk-glass-hi,transparent),0 0 0 .5px var(--zk-glass-line,transparent)}
html.zk-glass :is(.mdet-back,.mdet-act,.mdet-retry){background:color-mix(in srgb,var(--panel) 55%,transparent);border-color:var(--zk-glass-side,var(--line));border-top-color:var(--zk-glass-hi,var(--line))}
html.zk-glass .mdet-act-solid{background:color-mix(in srgb,var(--accent) 86%,transparent);border-color:rgba(255,255,255,.45)}
@media (prefers-reduced-transparency:reduce){
  html.zk-glass .mdet-bd{background:var(--bg)}
  html.zk-glass .mdet--sheet{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  html.zk-glass :is(.mdet-head,.mdet-chart,.mdet-sec){background:var(--panel)}
}
@media (prefers-contrast:more){
  .mdet-head,.mdet-chart,.mdet-sec{border-color:var(--text)}
  .mdet-rbar span{opacity:1}
}

/* ── movimento reduzido: sem entrada nem transições ── */
@media (prefers-reduced-motion:reduce){
  .mdet-bd.mdet-in .mdet--sheet,.mdet-bd.mdet-out .mdet--sheet,.mdet--page.mdet-in{animation:none}
  .body-metric-card.mdet-trig{transition:none}
}
html:not(.zk-anim) :is(.mdet-bd.mdet-in .mdet--sheet,.mdet-bd.mdet-out .mdet--sheet,.mdet--page.mdet-in){animation:none}
@media print{.mdet-bd{position:static;display:block}.mdet-back,.mdet-acts,.mdet-sel-btn{display:none!important}}
/* ════ fim do Detalhe de cada métrica ════ */