/* featureos:activity-heatmap@1.0.0 */
/* The Home page's activity heatmap. Colours come from the product's own tokens (--brand, --surface, --line, --ink, --mut, --ok, --bad), so light and dark follow the theme.
   The five-step ramp is one hue: the accent mixed into the surface, from almost nothing (level 0) to the full accent (level 4). */
.hm{--l0:color-mix(in srgb,var(--brand) 8%,var(--surface));--l1:color-mix(in srgb,var(--brand) 26%,var(--surface));--l2:color-mix(in srgb,var(--brand) 48%,var(--surface));--l3:color-mix(in srgb,var(--brand) 72%,var(--surface));--l4:var(--brand);
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px 28px 22px;margin:0 0 18px;box-shadow:var(--shadow-1);color:var(--ink);animation:hm-panel .55s cubic-bezier(.2,.8,.2,1) both;font-variant-numeric:tabular-nums}
.hm[hidden],.hm [hidden]{display:none!important}
.hm h2{font-size:22px;font-weight:700;letter-spacing:-.015em;line-height:1.2;margin:10px 0 6px}
.hm-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px 24px}
.hm-hd{max-width:520px}
.hm-pill{display:inline-block;font-size:12px;font-weight:650;color:var(--brand);background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:999px;padding:3px 10px}
.hm-sub{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.hm-stats{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:flex-start}
.hm-k{font-size:12px;color:var(--mut)}.hm-k.cap{margin-top:4px;min-height:1em}
.hm-v{font-size:24px;font-weight:680;letter-spacing:-.02em;line-height:1.25}
.hm-delta{display:inline-block;margin-top:4px;font-size:12px;font-weight:650;border-radius:999px;padding:2px 9px}
.hm-delta.up{color:var(--ok);background:var(--ok-soft)}.hm-delta.down{color:var(--bad);background:var(--bad-soft)}
.hm-bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:22px 0 12px}
.hm-ctrls{display:flex;flex-wrap:wrap;gap:10px 12px}
.hm-seg{display:inline-flex;flex-wrap:wrap;background:var(--neutral-soft);border-radius:10px;padding:3px;gap:2px}
.hm-seg button{font:inherit;font-size:13px;color:var(--ink-2);background:transparent;border:0;border-radius:8px;padding:6px 12px;cursor:pointer}
.hm-seg button:hover{filter:brightness(1.04);color:var(--ink)}
.hm-seg button[aria-pressed=true]{background:var(--surface);color:var(--brand);font-weight:650;box-shadow:var(--shadow-1)}
.hm-legend{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:11.5px;color:var(--mut)}
.hm-legend button{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:11.5px;color:var(--ink-2);background:transparent;border:1px solid transparent;border-radius:7px;padding:3px 7px;cursor:pointer}
.hm-legend button:hover:not(:disabled){border-color:var(--line-strong)}
.hm-legend button[aria-pressed=false]{color:var(--mut)}
.hm-legend button[aria-pressed=false] .sq{opacity:.18}
.hm-legend button:disabled{cursor:default;opacity:.7}
.hm .sq{display:inline-block;width:13px;height:13px;border-radius:3px;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .42s}
.hm-legend button:hover:not(:disabled) .sq{transform:scale(1.25) rotate(8deg)}
.hm .sq.l0,.hm .c.l0{--f:var(--l0)}.hm .sq.l1,.hm .c.l1{--f:var(--l1)}.hm .sq.l2,.hm .c.l2{--f:var(--l2)}.hm .sq.l3,.hm .c.l3{--f:var(--l3)}.hm .sq.l4,.hm .c.l4{--f:var(--l4)}
.hm .sq{background:var(--f)}
.hm-seg button:focus-visible,.hm-legend button:focus-visible,.hm-ghost:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.hm-seg button,.hm-legend button,.hm-ghost{transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .25s cubic-bezier(.34,1.56,.64,1)}
.hm-seg button:active,.hm-legend button:active:not(:disabled),.hm-ghost:active{transform:scale(.93)}

.hm-chart{position:relative;width:100%;min-height:120px}
.hm-svg{display:block;width:100%;touch-action:pan-y;overflow:visible}
.hm-axis text{font-size:11px;fill:var(--mut)}
.hm-axis .mo{font-weight:600;fill:var(--ink-2)}
.hm .c{fill:var(--f);transition:fill .65s cubic-bezier(.16,1,.3,1);cursor:default}
.hm .c.m{stroke:var(--mut);stroke-width:1;stroke-dasharray:3 2}
.hm .c.hov{stroke:var(--ink);stroke-width:2;stroke-dasharray:none;filter:drop-shadow(0 0 3.5px color-mix(in srgb,var(--brand) 75%,transparent))}
.hm-svg.sk .c{fill:var(--l0);animation:hm-shimmer 1.4s ease-in-out infinite}
.hm-svg.dim{opacity:.45}
.hm-ring{stroke:var(--brand);stroke-opacity:0;stroke-width:2}
.hm-ring.on{stroke-opacity:.9;animation:hm-ring 2.4s ease-out 1.8s infinite}
.hm-ov{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:12px;pointer-events:none}
.hm-ov>div{pointer-events:auto;background:color-mix(in srgb,var(--surface) 88%,transparent);border-radius:12px;padding:12px 18px}
.hm-ov strong{font-size:14px;font-weight:600;display:block}.hm-ov p{margin:4px 0 0;font-size:13px;color:var(--mut)}
.hm-ov.error button{margin-top:10px}
.hm-foot{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.hm-note{margin:0;font-size:13px;color:var(--ink-2);flex:1 1 280px}
.hm-ghost{font:inherit;font-size:13px;font-weight:600;color:var(--brand);background:transparent;border:1px solid var(--brand-line);border-radius:9px;padding:6px 12px;cursor:pointer}
.hm-ghost:hover{filter:brightness(1.04);box-shadow:0 6px 14px -8px color-mix(in srgb,var(--brand) 40%,transparent)}
.hm-tbl{margin-top:14px}

.hm-tip{position:fixed;left:0;top:0;z-index:600;pointer-events:none;transition:transform .12s ease-out}
.hm-tip.jump{transition:none}
.hm-tip-in{background:var(--ink);color:var(--surface);border-radius:9px;padding:8px 11px;font-size:12.5px;white-space:nowrap;box-shadow:0 12px 30px -8px rgba(0,0,0,.5);opacity:0;transform:scale(.86);transform-origin:50% 100%;transition:opacity .15s,transform .3s cubic-bezier(.34,1.56,.64,1);font-variant-numeric:tabular-nums}
.hm-tip-in.on{opacity:1;transform:scale(1)}
.hm-tip b{font-size:14px}.hm-tip .d{color:color-mix(in srgb,var(--surface) 70%,var(--ink))}

.hm .rise{animation:hm-rise .45s ease both;animation-delay:var(--d,0s)}
.hm .rise.st{animation-duration:.5s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
@keyframes hm-panel{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes hm-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes hm-ring{0%{stroke-opacity:.9;stroke-width:2}70%,100%{stroke-opacity:0;stroke-width:9}}
@keyframes hm-shimmer{0%,100%{opacity:.55}50%{opacity:1}}

@media (max-width:640px){
  .hm{padding:18px 16px 16px}
  .hm h2{font-size:19px}
  .hm-stats{gap:18px}.hm-v{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .hm,.hm *,.hm-tip,.hm-tip *{transition:none!important;animation:none!important}
  .hm-ring.on{stroke-opacity:.9}
}