/* Area "staff" (docs/V2_BUILD.md): the staff dashboard (/staff/, apps/analytics).
   Loaded on every page: every rule is scoped to .hsm-s-*. Tokens of tokens.css only, in the
   v1 language: flat figures on rules, no card, no shadow, no pill, no tile. */

.hsm-s-periods { margin-top: 32px; }
.hsm-s-note { margin-top: 40px; max-width: 900px; padding-left: 16px; border-left: 4px solid var(--hsm-hardstyle); }
.hsm-s-note h3 { margin: 0; color: var(--hsm-white); font: 600 15px/1.3 var(--hsm-font-wide); letter-spacing: 1.5px; text-transform: uppercase; }
.hsm-s-note p { margin: 12px 0 0; line-height: 1.6; }

/* Figures: big numbers in a row, each on the rule above it */
.hsm-s-figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 32px; margin: 24px 0 0; }
.hsm-s-figures div { padding: 16px 0; border-top: 1px solid var(--hsm-rule); }
.hsm-s-figures dt { color: var(--hsm-muted); font: 600 11px/1.4 var(--hsm-font); letter-spacing: 1.5px; text-transform: uppercase; }
.hsm-s-figures dd { margin: 8px 0 0; color: var(--hsm-white); font: 600 32px/1 var(--hsm-font-wide); letter-spacing: var(--hsm-track); }
.hsm-s-figures small { display: block; margin-top: 6px; color: var(--hsm-muted); font: 400 12px/1.4 var(--hsm-font); letter-spacing: 0; }

/* Daily bars */
.hsm-s-chart { display: flex; align-items: flex-end; gap: 2px; height: 140px; margin-top: 24px; padding-bottom: 1px; border-bottom: 1px solid var(--hsm-rule); }
.hsm-s-chart span { flex: 1 1 0; min-width: 2px; background: var(--hsm-coral); }
.hsm-s-chart span[data-today] { background: var(--hsm-hardstyle); }
.hsm-s-chart-axis { display: flex; justify-content: space-between; margin-top: 8px; color: var(--hsm-muted); font-size: 12px; }

/* Two or three columns of lists */
.hsm-s-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 24px; }
.hsm-s-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hsm-s-cols h3 { margin: 0 0 12px; color: var(--hsm-muted); font: 600 12px/1.4 var(--hsm-font); letter-spacing: var(--hsm-track); text-transform: uppercase; }
@media (max-width: 900px) { .hsm-s-cols, .hsm-s-cols--2 { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* A share bar under a line of a list */
.hsm-s-share { display: block; height: 3px; margin-top: 6px; background: var(--hsm-uptempo); }
.hsm-s-off { color: var(--hsm-muted); }
.hsm-s-warn { color: var(--hsm-hardstyle); }
.hsm-s-bad { color: var(--hsm-hardcore-text); }
.hsm-s-inline { display: inline; margin: 0; }
.hsm-s-inline button { padding: 0; border: 0; background: none; color: var(--hsm-white); font: inherit; text-decoration: underline; cursor: pointer; }
.hsm-s-form { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; margin-top: 24px; }
.hsm-s-form label { display: grid; gap: 6px; color: var(--hsm-muted); font: 600 11px/1.4 var(--hsm-font); letter-spacing: 1.5px; text-transform: uppercase; }
.hsm-s-form input { width: 120px; padding: 10px 12px; border: 1px solid var(--hsm-rule); border-radius: var(--hsm-radius); background: var(--hsm-field); color: var(--hsm-text); font: 400 15px var(--hsm-font); }