/* Activity page (Shared/activity.js), on top of /shared/ui.css. Every staff app's /activity/ uses it. */
.act-wrap { max-width: 1200px; margin: 0 auto; padding: 20px var(--gutter) 60px; }
.act-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.act-head h1 { margin: 0 0 4px; font: 700 1.9rem var(--f-display); }
.act-head p { margin: 0; max-width: 640px; }
.act-head label.inline { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); }
.act-head select { width: auto; }
.act-wrap .small { font-size: .88rem; }
.act-wrap .muted { color: var(--muted); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.kpi .l { font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.kpi .v { font: 700 1.9rem/1.1 var(--f-display); margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.kpi .s { font-size: .85rem; color: var(--muted); }
.act-wrap .card { margin-bottom: 16px; }
.card-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.card-h h2 { margin: 0; font: 700 1.25rem var(--f-display); }
.card-h input[type=search] { width: auto; min-width: 220px; flex: 0 1 280px; }
.act-wrap .tw { border: 0; }
.rt td.num { font-variant-numeric: tabular-nums; }
.hbar { display: grid; grid-template-columns: 160px 1fr 110px; align-items: center; gap: 10px; margin: 6px 0; }
.hbar .n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .track { height: 18px; background: var(--surface-2); border-radius: 4px; overflow: hidden; display: block; }
.hbar .fill { display: block; height: 100%; background: var(--brand-2); border-radius: 4px; }
.hbar .val { font-size: .88rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
#pagesChart { margin-bottom: 12px; }
.daily svg { width: 100%; height: auto; display: block; }
.daily .b { fill: var(--brand-2); }
.daily text { fill: var(--muted); font-size: 10px; }
.daily .grid { stroke: var(--line); stroke-width: 1; }
@media (max-width: 600px) { .hbar { grid-template-columns: 100px 1fr 80px; } .act-head h1 { font-size: 1.5rem; } }
.act-chips { margin: -6px 0 14px; }
.act-link { color: inherit; text-decoration: none; }
.act-link:hover b, a.act-link:hover { color: var(--brand-2); text-decoration: underline; }
.act-trail { line-height: 1.9; }
.act-step { display: inline-block; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); font-size: .85rem; white-space: nowrap; }
.act-step small { color: var(--muted); }
.act-arrow { color: var(--muted); margin: 0 4px; }
.daily .bar { cursor: pointer; outline: none; }
.daily .hit { fill: transparent; }
.daily .bar:hover .b, .daily .bar:focus-visible .b { fill: var(--accent); }
.daily .bar:focus-visible .hit { stroke: var(--brand-2); stroke-width: 1; }
/* phones: stacked header, two KPI columns, tables as cards (labels from data-label, set by activity.js) */
@media (max-width: 720px) {
  .act-wrap { padding: 14px 12px 60px; }
  .act-head { align-items: stretch; }
  .act-head label.inline { justify-content: space-between; width: 100%; }
  .act-head select { flex: 1; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi .v { font-size: 1.5rem; }
  .card-h input[type=search] { min-width: 0; flex: 1 1 100%; }
  .hbar { grid-template-columns: 96px 1fr 84px; gap: 8px; }
  .hbar .val { font-size: .8rem; }
  .act-wrap .tw { overflow: visible; }
  .act-wrap .rt thead { display: none; }
  .act-wrap .rt, .act-wrap .rt tbody, .act-wrap .rt tr, .act-wrap .rt td { display: block; width: 100%; }
  .act-wrap .rt tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .act-wrap .rt tbody tr:hover { background: none; }
  .act-wrap .rt td { border: 0; padding: 2px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: right; white-space: normal; }
  .act-wrap .rt td::before { content: attr(data-label); flex: none; color: var(--muted); font-size: .8rem; text-align: left; }
  .act-wrap .rt td:first-child { display: block; text-align: left; font-size: 1rem; padding-bottom: 4px; }
  .act-wrap .rt td:first-child::before { content: none; }
  .act-wrap .rt td.act-trail { display: block; text-align: left; }
  .act-wrap .rt td.act-trail::before { display: block; margin-bottom: 2px; }
  .act-wrap .rt td[colspan] { display: block; text-align: left; }
  .act-wrap .rt td[colspan]::before { content: none; }
  .act-step { white-space: normal; }
  .act-wrap .rt td.sub:not(:first-child) { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; text-align: right; }
  .act-wrap .rt td.sub:not(:first-child) small { grid-column: 2; }
  #pagesTable, #segTable { display: none !important; }      /* the bars above say the same on a phone */
  .daily text { font-size: 16px; }
}
/* bar widths without inline styles (CSP): .w0 to .w100 */
.hbar .w0 { width: 0%; }
.hbar .w1 { width: 1%; }
.hbar .w2 { width: 2%; }
.hbar .w3 { width: 3%; }
.hbar .w4 { width: 4%; }
.hbar .w5 { width: 5%; }
.hbar .w6 { width: 6%; }
.hbar .w7 { width: 7%; }
.hbar .w8 { width: 8%; }
.hbar .w9 { width: 9%; }
.hbar .w10 { width: 10%; }
.hbar .w11 { width: 11%; }
.hbar .w12 { width: 12%; }
.hbar .w13 { width: 13%; }
.hbar .w14 { width: 14%; }
.hbar .w15 { width: 15%; }
.hbar .w16 { width: 16%; }
.hbar .w17 { width: 17%; }
.hbar .w18 { width: 18%; }
.hbar .w19 { width: 19%; }
.hbar .w20 { width: 20%; }
.hbar .w21 { width: 21%; }
.hbar .w22 { width: 22%; }
.hbar .w23 { width: 23%; }
.hbar .w24 { width: 24%; }
.hbar .w25 { width: 25%; }
.hbar .w26 { width: 26%; }
.hbar .w27 { width: 27%; }
.hbar .w28 { width: 28%; }
.hbar .w29 { width: 29%; }
.hbar .w30 { width: 30%; }
.hbar .w31 { width: 31%; }
.hbar .w32 { width: 32%; }
.hbar .w33 { width: 33%; }
.hbar .w34 { width: 34%; }
.hbar .w35 { width: 35%; }
.hbar .w36 { width: 36%; }
.hbar .w37 { width: 37%; }
.hbar .w38 { width: 38%; }
.hbar .w39 { width: 39%; }
.hbar .w40 { width: 40%; }
.hbar .w41 { width: 41%; }
.hbar .w42 { width: 42%; }
.hbar .w43 { width: 43%; }
.hbar .w44 { width: 44%; }
.hbar .w45 { width: 45%; }
.hbar .w46 { width: 46%; }
.hbar .w47 { width: 47%; }
.hbar .w48 { width: 48%; }
.hbar .w49 { width: 49%; }
.hbar .w50 { width: 50%; }
.hbar .w51 { width: 51%; }
.hbar .w52 { width: 52%; }
.hbar .w53 { width: 53%; }
.hbar .w54 { width: 54%; }
.hbar .w55 { width: 55%; }
.hbar .w56 { width: 56%; }
.hbar .w57 { width: 57%; }
.hbar .w58 { width: 58%; }
.hbar .w59 { width: 59%; }
.hbar .w60 { width: 60%; }
.hbar .w61 { width: 61%; }
.hbar .w62 { width: 62%; }
.hbar .w63 { width: 63%; }
.hbar .w64 { width: 64%; }
.hbar .w65 { width: 65%; }
.hbar .w66 { width: 66%; }
.hbar .w67 { width: 67%; }
.hbar .w68 { width: 68%; }
.hbar .w69 { width: 69%; }
.hbar .w70 { width: 70%; }
.hbar .w71 { width: 71%; }
.hbar .w72 { width: 72%; }
.hbar .w73 { width: 73%; }
.hbar .w74 { width: 74%; }
.hbar .w75 { width: 75%; }
.hbar .w76 { width: 76%; }
.hbar .w77 { width: 77%; }
.hbar .w78 { width: 78%; }
.hbar .w79 { width: 79%; }
.hbar .w80 { width: 80%; }
.hbar .w81 { width: 81%; }
.hbar .w82 { width: 82%; }
.hbar .w83 { width: 83%; }
.hbar .w84 { width: 84%; }
.hbar .w85 { width: 85%; }
.hbar .w86 { width: 86%; }
.hbar .w87 { width: 87%; }
.hbar .w88 { width: 88%; }
.hbar .w89 { width: 89%; }
.hbar .w90 { width: 90%; }
.hbar .w91 { width: 91%; }
.hbar .w92 { width: 92%; }
.hbar .w93 { width: 93%; }
.hbar .w94 { width: 94%; }
.hbar .w95 { width: 95%; }
.hbar .w96 { width: 96%; }
.hbar .w97 { width: 97%; }
.hbar .w98 { width: 98%; }
.hbar .w99 { width: 99%; }
.hbar .w100 { width: 100%; }