/* 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); }

/* Social kit (/staff/social/) ------------------------------------------------------------------ */
.hsm-s-kit-langs { display: flex; gap: 16px; margin: 16px 0 0; font: 600 12px/1.4 var(--hsm-font); letter-spacing: var(--hsm-track); }
.hsm-s-kit-langs a { color: var(--hsm-muted); text-decoration: none; }
.hsm-s-kit-langs a[aria-current="true"] { color: var(--hsm-white); border-bottom: 2px solid var(--hsm-coral); }
.hsm-s-kit-slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
.hsm-s-kit-slides img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--hsm-field); }
.hsm-s-kit-downloads { display: flex; flex-wrap: wrap; gap: 20px 40px; margin: 32px 0 0; padding: 0; list-style: none; }
.hsm-s-kit-downloads li { display: grid; gap: 10px; color: var(--hsm-muted); font-size: 13px; }
.hsm-s-kit-rebuild { margin-top: 24px; font-size: 13px; }
.hsm-s-kit-rebuild button, .hsm-s-kit-actions button, .hsm-s-kit-published button {
  padding: 8px 14px; border: 1px solid var(--hsm-rule); border-radius: var(--hsm-radius); background: var(--hsm-field); color: var(--hsm-white);
  font: 600 12px/1.2 var(--hsm-font); letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer;
}
.hsm-s-kit-rebuild button:hover, .hsm-s-kit-actions button:hover, .hsm-s-kit-published button:hover { border-color: var(--hsm-white); }
.hsm-s-kit-published button[aria-pressed="true"] { border-color: var(--hsm-lime); color: var(--hsm-lime); }
.hsm-s-kit-texts { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 32px; margin-top: 24px; }
.hsm-s-kit-text h3, .hsm-s-kit-story h3 { margin: 0 0 10px; color: var(--hsm-white); font: 600 14px/1.3 var(--hsm-font-wide); letter-spacing: var(--hsm-track); text-transform: uppercase; }
.hsm-s-kit-text textarea { width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid var(--hsm-rule); border-radius: var(--hsm-radius); background: var(--hsm-field);
  color: var(--hsm-text); font: 400 14px/1.5 var(--hsm-font); resize: vertical; }
.hsm-s-kit-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; }
.hsm-s-kit-published { margin-top: 10px; }
.hsm-s-kit-story { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 32px; margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--hsm-rule); }
.hsm-s-kit-story img { display: block; width: 180px; height: auto; aspect-ratio: 9 / 16; background: var(--hsm-field); }
@media (max-width: 720px) { .hsm-s-kit-story { grid-template-columns: 1fr; } }