/* Native dialog supplies focus trapping, Escape, and an inert background. */
.hcell[data-metric]{font-family:inherit;text-align:start;cursor:pointer;width:100%;appearance:none;}
.hcell[data-metric]:active{transform:scale(.985)}
.hcell[data-metric] .hfoot{align-items:flex-start;flex-direction:column;gap:5px}
.hcell[data-metric] .trend{white-space:normal;text-align:start}
.metric-open{display:flex;gap:5px;align-items:center;font-size:11px;font-weight:750;color:var(--brand-ink);margin-top:10px;}
.hcell .hspark{width:calc(100% + 24px);margin-inline:-12px;flex-shrink:0;margin-top:7px;pointer-events:none;}
#metricAsOf{margin:0 4px 14px;}
@media(hover:hover) and (pointer:fine){.hcell[data-metric]:hover{border-color:var(--brand);}}
#metricDrawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(520px,100vw);max-width:100vw;height:100%;height:100dvh;max-height:100dvh;padding:0;border:0;border-inline-end:1px solid var(--line);background:#FFFCF7;color:var(--ink);box-shadow:-16px 0 60px #13202e22;}
#metricDrawer[open]{display:flex;flex-direction:column;}
#metricDrawer::backdrop{background:rgba(19,32,46,.38);}
body:has(#metricDrawer[open]){overflow:hidden;}
.drawer-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:24px;border-bottom:1px solid var(--line);flex-shrink:0;background:var(--surface);padding-top:max(24px,env(safe-area-inset-top));}
.drawer-header h2{font-size:23px;line-height:1.35;margin:5px 0 0;letter-spacing:-.5px;}
#metricClose{width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:var(--paper);font:inherit;cursor:pointer;flex-shrink:0;}
.drawer-body{padding:20px 24px max(24px,env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;min-height:0;}
#metricDescription{font-size:14px;line-height:1.75;color:var(--ink2);margin:0 0 20px;}
.metric-summary{padding:20px;border:1px solid var(--line);border-radius:20px;background:white;margin-bottom:20px;}
.metric-summary strong{display:block;font-size:44px;line-height:1.1;letter-spacing:-1px;font-variant-numeric:tabular-nums;color:var(--brand-ink);}
.metric-summary p,.metric-note{font-size:12px;line-height:1.7;color:var(--muted);margin:8px 0 0;}
.metric-list{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px;}
.metric-row{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:15px;background:white;}
.metric-avatar{display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-ink);font-weight:800;width:38px;height:38px;border-radius:12px;flex-shrink:0;}
.metric-row-copy{min-width:0;flex:1;}.metric-row b{display:block;font-size:14px;overflow-wrap:anywhere;}
.metric-row time{font-size:12px;line-height:1.65;color:var(--muted);display:block;margin-top:3px;}
.metric-state{padding:28px 12px;border:1px dashed var(--line-strong);border-radius:16px;text-align:center;color:var(--muted);line-height:1.7;}
.metric-retry{display:block;margin:16px auto 0;min-height:44px;border:1px solid var(--line-strong);border-radius:12px;background:white;color:var(--brand-ink);font:inherit;padding:0 20px;cursor:pointer;}
@media(max-width:600px){#metricDrawer{width:100%;border:0;}.drawer-header{padding-inline:18px;}.drawer-body{padding-inline:18px;}.hcell[data-metric]{min-height:214px;}.metric-open{font-size:12px;}}
@media(prefers-reduced-motion:reduce){.hcell[data-metric]:active{transform:none;}}