/* Admin → Activity & Stats. Flat 1px surfaces on --bg2, the slate-blue ramp (--pf-s1…s4) for
   magnitude, categorical colour only where a series needs a name, state colours for state.
   Every mark is hoverable/focusable and says what it is through #as-tip. */

.as-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin:22px 0 16px}
.as-head h2{margin:0;font-size:var(--ui-title);font-weight:700;letter-spacing:-.01em}
.as-head p{margin:3px 0 0;font-size:var(--ui-label);color:var(--text3)}
.as-controls{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
.as-pick{display:inline-flex;align-items:center;gap:7px;font-size:var(--ui-label);color:var(--text3)}
.as-pick select{min-height:var(--control-normal-size,28px);border:1px solid var(--border2);border-radius:var(--r-sm);background:var(--bg2);padding:0 8px;font-size:var(--ui-action);color:var(--text)}
.as-custom{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--text3)}
.as-custom[hidden]{display:none}

/* KPI strip */
.as-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:10px;margin:0 0 14px}
.as-kpi{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;padding:12px 14px 12px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-md);overflow:hidden}
.as-kpi-l{font-size:var(--ui-label);color:var(--text3)}
.as-kpi-v{font-size:var(--ui-title);font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--text);line-height:1.2}
.as-kpi-v small{font-size:var(--ui-label);font-weight:500;color:var(--text3);letter-spacing:0}
.as-kpi-s{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:var(--ui-caption);color:var(--text3);font-variant-numeric:tabular-nums;min-height:18px;padding-right:76px}
.as-kpi.attn .as-kpi-v{color:var(--orange-ink,var(--orange))}
.as-kpi.bad .as-kpi-v{color:var(--red)}
.as-spark{position:absolute;right:12px;bottom:12px;width:70px;height:26px;overflow:visible}
.as-spark polygon{fill:color-mix(in srgb,var(--pf-s3,#6584b4) 18%,transparent);stroke:none}
.as-spark polyline{fill:none;stroke:var(--pf-s3,#6584b4);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.as-delta{display:inline-flex;align-items:center;gap:3px;font-weight:600;font-size:var(--ui-caption);border-radius:var(--r-xs)}
.as-delta svg{width:9px;height:9px;fill:currentColor}
.as-delta.up{color:var(--accent-ink)}
.as-delta.down{color:var(--text2)}
.as-delta.flat{color:var(--text3);font-weight:500}

/* Cards and grid */
.as-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.as-card{min-width:0;padding:14px 16px 16px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-md)}
.as-card.wide{grid-column:1/-1}
.as-card-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.as-card h3{margin:0;font-size:var(--ui-section);font-weight:650;color:var(--text)}
.as-card-h p{margin:0;flex-basis:100%;font-size:var(--ui-caption);color:var(--text3);line-height:1.4}
.as-empty,.as-none{padding:22px 8px;text-align:center;font-size:var(--ui-label);color:var(--text3)}
.as-none{padding:8px 0;text-align:left}
.as-fail{padding:48px 0;text-align:center;color:var(--text3);font-size:var(--ui-body);line-height:2}
.as-loading{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:10px}
.as-loading i{display:block;height:82px;border-radius:var(--r-md);background:var(--bg3);animation:as-pulse 1.2s ease-in-out infinite}
@keyframes as-pulse{50%{opacity:.5}}
@media (prefers-reduced-motion:reduce){.as-loading i{animation:none}}
.as-sub-t{margin:16px 0 8px;font-size:var(--ui-label);font-weight:600;color:var(--text2)}
.as-sub-t.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.as-chip{display:inline-block;padding:1px 8px;border-radius:999px;font-size:var(--ui-caption);font-weight:600;border:1px solid var(--border2)}
.as-chip.bad{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,var(--border2))}
.as-bad{color:var(--red)}
.as-tablewrap{overflow:auto}

/* Legend */
.as-legend{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.as-leg,.as-legend.static span{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:1px solid var(--border2);border-radius:999px;background:var(--bg2);font-size:var(--ui-caption);color:var(--text2)}
.as-leg{cursor:pointer}
.as-leg:hover{border-color:var(--pf-s2,#8ea6ca)}
.as-leg.off{opacity:.5;text-decoration:line-through}
.as-leg i,.as-legend.static i{display:inline-block;width:8px;height:8px;border-radius:2px;flex:none}

/* Daily columns */
.as-chart{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:var(--h,220px) 20px;column-gap:8px}
.as-y,.as-plot{position:relative;height:var(--h,220px)}
.as-y span{position:absolute;right:0;transform:translateY(50%);font-size:var(--ui-caption);color:var(--text3);font-variant-numeric:tabular-nums;line-height:1}
.as-plot{border-bottom:1px solid var(--border2)}
.as-plot u{position:absolute;left:0;right:0;height:1px;background:var(--border);display:block}
.as-cols{position:absolute;inset:0;display:flex;align-items:stretch;gap:1px}
.as-col{flex:1 1 0;min-width:0;display:flex;align-items:flex-end;border-radius:var(--r-xs);outline:none}
.as-col:hover,.as-col:focus-visible{background:color-mix(in srgb,var(--pf-s3,#6584b4) 12%,transparent)}
.as-col:focus-visible{box-shadow:inset 0 0 0 2px var(--pf-s3,#6584b4)}
.as-stack{display:flex;flex-direction:column-reverse;width:100%;height:100%;padding:0 11%}
.as-stack i{display:block;flex:none;width:100%;min-height:1px}
.as-stack i:last-child{border-radius:2px 2px 0 0}
.as-avg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.as-avg polyline{fill:none;stroke:var(--text);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.7}
.as-x{grid-column:2;position:relative}
.as-x span{position:absolute;top:5px;transform:translateX(-50%);font-size:var(--ui-caption);color:var(--text3);white-space:nowrap;font-variant-numeric:tabular-nums}
.as-note{display:flex;align-items:center;gap:7px;margin:6px 0 0 42px;font-size:var(--ui-caption);color:var(--text3)}
.as-avg-key{display:inline-block;width:16px;height:0;border-top:2px solid var(--text);opacity:.7}

/* Histogram */
.as-hist{display:flex;gap:10px;height:190px}
.as-hist-c{flex:1;display:grid;grid-template-rows:1fr auto auto;justify-items:center;gap:4px;min-width:0;border-radius:var(--r-sm);outline:none}
.as-hist-c:hover,.as-hist-c:focus-visible{background:color-mix(in srgb,var(--pf-s3,#6584b4) 10%,transparent)}
.as-hist-c i{align-self:end;width:62%;min-height:2px;border-radius:3px 3px 0 0;background:var(--pf-s3,#6584b4)}
.as-hist-c span{font-size:var(--ui-caption);color:var(--text3)}
.as-hist-c b{font-size:var(--ui-label);font-variant-numeric:tabular-nums;color:var(--text2)}

/* Heat grid */
.as-heat{display:flex;flex-direction:column;gap:3px}
.as-heat-x{position:relative;height:16px;margin:0 54px 2px 130px}
.as-heat-x span{position:absolute;font-size:var(--ui-caption);color:var(--text3);white-space:nowrap}
.as-heat-r{display:grid;grid-template-columns:120px minmax(0,1fr) 44px;gap:10px;align-items:center}
.as-heat-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ui-label);color:var(--text2)}
.as-heat-cells{display:grid;gap:2px}
.as-heat-cells i,.as-scale i{display:block;height:16px;border-radius:2px;background:var(--bg3);border:1px solid var(--border)}
.as-heat-cells i{outline:none}
.as-heat-cells i:hover,.as-heat-cells i:focus-visible{box-shadow:0 0 0 2px var(--text3)}
.as-heat i.l1,.as-scale i.l1{background:var(--pf-s1,#b7c6dd);border-color:transparent}
.as-heat i.l2,.as-scale i.l2{background:var(--pf-s2,#8ea6ca);border-color:transparent}
.as-heat i.l3,.as-scale i.l3{background:var(--pf-s3,#6584b4);border-color:transparent}
.as-heat i.l4,.as-scale i.l4{background:var(--pf-s4,#3f5f93);border-color:transparent}
.as-heat-t{text-align:right;font-size:var(--ui-label);font-variant-numeric:tabular-nums;color:var(--text2)}
.as-scale{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:10px;font-size:var(--ui-caption);color:var(--text3)}
.as-scale i{width:14px;height:14px}

/* Segmented bar, ranked rows, progress */
.as-seg{display:flex;gap:2px;height:12px;border-radius:6px;overflow:hidden;background:var(--bg3)}
.as-seg i{display:block;flex:none;min-width:3px;outline:none}
.as-seg i:hover,.as-seg i:focus-visible{filter:brightness(1.12);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--text) 35%,transparent)}
.as-seg-leg{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:9px;font-size:var(--ui-caption);color:var(--text2)}
.as-seg-leg span{display:inline-flex;align-items:center;gap:6px}
.as-seg-leg i{display:inline-block;width:8px;height:8px;border-radius:2px}
.as-seg-leg b{font-variant-numeric:tabular-nums;color:var(--text)}
.as-rank{display:flex;flex-direction:column}
.as-rank-r{display:grid;grid-template-columns:minmax(80px,170px) minmax(0,1fr) auto;align-items:center;gap:10px;padding:5px 6px;margin:0 -6px;border-radius:var(--r-sm);outline:none}
.as-rank-r:hover,.as-rank-r:focus-visible{background:var(--bg3)}
.as-rank-r:focus-visible{box-shadow:inset 0 0 0 2px var(--pf-s3,#6584b4)}
.as-rank-r.click{cursor:pointer}
.as-rank-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ui-body);color:var(--text)}
.as-rank-b{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--bg3);gap:1px}
.as-rank-b i{display:block;flex:none}
.as-rank-v{font-size:var(--ui-label);font-variant-numeric:tabular-nums;color:var(--text2);white-space:nowrap;text-align:right;min-width:42px}
.as-rank-v em{font-style:normal;margin-left:7px;color:var(--text3)}
.as-progs{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.as-card>.as-progs:first-of-type{margin-top:0}
.as-prog{border-radius:var(--r-sm);outline:none}
.as-prog:hover,.as-prog:focus-visible{background:var(--bg3);box-shadow:0 0 0 6px var(--bg3)}
.as-prog-h{display:flex;justify-content:space-between;gap:10px;margin-bottom:5px;font-size:var(--ui-label);color:var(--text2)}
.as-prog-h b{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.as-prog-h small{color:var(--text3);font-size:inherit}
.as-prog-h em{font-style:normal;font-weight:700;color:var(--text);margin-left:4px}
.as-prog-t{height:6px;border-radius:3px;background:var(--bg3);border:1px solid var(--border);overflow:hidden}
.as-prog-t i{display:block;height:100%;background:var(--pf-s3,#6584b4);border-radius:3px}
.as-prog.warn .as-prog-t i{background:var(--orange)}
.as-prog.bad .as-prog-t i{background:var(--red)}
.as-prog-n{margin-top:4px;font-size:var(--ui-caption);color:var(--text3)}
.as-trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.as-trio>div{display:flex;flex-direction:column;gap:2px;padding:10px 14px;background:var(--bg3);border-radius:var(--r-sm)}
.as-trio b{font-size:var(--ui-title);font-weight:700;font-variant-numeric:tabular-nums}
.as-trio span{font-size:var(--ui-caption);color:var(--text3)}
.as-trio .attn b{color:var(--orange-ink,var(--orange))}
.as-trio .bad b{color:var(--red)}
.as-proj .as-card-h{margin-bottom:10px}

/* The one detail card */
.as-tip{position:fixed;z-index:4000;max-width:300px;padding:9px 11px;background:var(--bg2);color:var(--text);border:1px solid var(--border2);border-radius:var(--r-md);box-shadow:0 8px 28px rgba(15,23,42,.16);font-size:var(--ui-label);line-height:1.4;pointer-events:none}
.as-tip[hidden]{display:none}
.as-tip-t{font-weight:650;margin-bottom:5px;color:var(--text)}
.as-tip-r{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:8px;padding:1px 0;color:var(--text2)}
.as-tip-r i{display:block;width:8px;height:8px;border-radius:2px}
.as-tip-r i.none{background:transparent}
.as-tip-r b{font-variant-numeric:tabular-nums;color:var(--text);font-weight:600}
.as-tip-f{margin-top:6px;padding-top:6px;border-top:1px solid var(--border);font-size:var(--ui-caption);color:var(--text3)}

@media (max-width:1100px){.as-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){
  .as-chart{grid-template-columns:28px minmax(0,1fr)}
  .as-heat-r{grid-template-columns:80px minmax(0,1fr)}
  .as-heat-t{display:none}
  .as-heat-x{margin:0 0 2px 90px}
  .as-rank-r{grid-template-columns:minmax(70px,110px) minmax(0,1fr) auto}
  .as-kpi-s{padding-right:0}
  .as-spark{display:none}
}

.as-hist-c.med i{background:var(--pf-s4,#3f5f93);box-shadow:0 0 0 2px color-mix(in srgb,var(--pf-s4,#3f5f93) 30%,transparent)}
.as-hist-c.med span{color:var(--text);font-weight:600}
.as-funnel{display:grid;gap:8px}
.as-fun-r{display:grid;grid-template-columns:150px 1fr 56px 44px;gap:10px;align-items:center;border-radius:var(--r-sm);outline:none;padding:2px 4px}
.as-fun-r:hover,.as-fun-r:focus-visible{background:color-mix(in srgb,var(--pf-s3,#6584b4) 10%,transparent)}
.as-fun-l{font-size:var(--ui-label);color:var(--text2)}
.as-fun-b{height:14px;background:var(--bg3);border-radius:7px;overflow:hidden}
.as-fun-b i{display:block;height:100%;border-radius:7px;min-width:2px}
.as-fun-r b{text-align:right;font-variant-numeric:tabular-nums;font-size:var(--ui-label)}
.as-fun-r em{font-style:normal;color:var(--text3);font-size:var(--ui-caption);font-variant-numeric:tabular-nums}
@media (max-width:600px){.as-fun-r{grid-template-columns:96px 1fr 44px 36px}}

.as-heat-cells i.away,.as-scale i.away{background:repeating-linear-gradient(45deg,var(--bg3) 0 3px,var(--border2) 3px 5px)!important;border-style:dashed}
.as-rank-b{position:relative}
.as-avg{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--text);box-shadow:0 0 0 1px var(--bg)}

/* KPI strips never leave one orphan on the last row: six across three, four across four… */
.as-kpis:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.as-kpis:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.as-kpis:has(> :nth-child(6):last-child),.as-kpis:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.as-kpis:has(> :nth-child(6):last-child),.as-kpis:has(> :nth-child(4):last-child){grid-template-columns:minmax(0,1fr)}}
.as-grid>.as-card.wide.ov-storage{grid-column:1/-1}
.as-card>.as-empty{padding:14px 8px}
.stor-empty{position:absolute;inset:0;display:grid;place-items:center;font-size:var(--ui-label);color:var(--text3);text-align:center}
.as-hours-slot{grid-column:1/-1}.as-hours-slot[hidden]{display:none}
.as-hours-slot .as-pick{display:inline-flex;margin-left:8px}