/* =====================================================================
   ShotGram v88 — undefined design tokens
   Load AFTER styles.css.

   FOUND BY AUDIT
   --------------
   Four custom properties are used in styles.css but defined nowhere, and
   are not set inline from JavaScript either. A `var()` with no definition
   and no fallback makes the whole declaration invalid, so the browser
   silently drops it:

     --card    18 uses   panel backgrounds in the clan / Discord-style UI
     --bg      10 uses   stage + composer backgrounds in the same UI
     --hover    8 uses   row hover states in the channel sidebar
     --choice   2 uses   the colour swatch dots in clans.js

   Effect: the clan channels screen renders with transparent panels — text
   on whatever is behind it, no hover feedback on channel rows — and the
   clan colour picker shows blank circles.

   These are mapped onto the tokens that DO exist so the intended design
   comes back. The mapping is deliberately conservative: --card sits one
   step lighter than --bg, matching how --surface-2 relates to --surface
   everywhere else in the app.

   (--glow and --drift also looked undefined, but badge-render.js and
   views/live.js set them inline before use, so they are fine.)
   ===================================================================== */

:root {
  /* Page / stage background — one step darker than a panel. */
  --bg: var(--surface);

  /* Panel background — sidebars, message list, composer surround. */
  --card: var(--surface-2);

  /* Row hover. Kept as a translucent wash so it layers correctly over
     both --bg and --card without needing two separate tokens. */
  --hover: rgba(255, 255, 255, .055);

  /* DEAD RULE — kept only so the declaration stays valid.

     `.clan-choice.color-dot` matches NO element in the app. The clan colour
     picker in views/clans.js uses `.clan-gradient-preset` with `--a`/`--b`
     set inline, which works correctly. studio.js has its own bare
     `.color-dot` with an inline background, which does not match this
     compound selector.

     So nothing needs changing in clans.js. The two rules at styles.css:2974
     and :2978 can simply be deleted whenever you next touch that file. */
  --choice: var(--violet);
}

/* ---------------------------------------------------------------------
   Two class names used by views/activity.js that had no rule at all:
   `.act-list` (the tab panel) and `.act-section` (a group heading block).
   Without these the activity feed has no spacing between groups.
   --------------------------------------------------------------------- */

.act-list {
  display: grid;
  gap: 2px;
  min-height: 120px;
}

.act-section {
  display: grid;
  gap: 2px;
  margin-block: 14px 6px;
}

.act-section > h3,
.act-section > b {
  margin: 0 2px 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}