/* Audience360 — what this app adds on top of the suite's theme.css.
 *
 * theme.css is a VENDORED copy, byte-identical to Smart Service's, so re-syncing it stays a copy
 * rather than a merge. Anything this app needs and the suite does not have goes here instead, and
 * this file loads after it.
 *
 * It exists because of a real bug: eight pages referenced --booked-tint, --live-tint, --avail-tint
 * and --maint-tint for their callout backgrounds. None of those are defined anywhere. A var() with
 * no fallback resolves to nothing, so every one of those callouts had been rendering on a
 * transparent background — and on the API keys page, white text on white. Nothing errors; the
 * colour simply never arrives.
 */

:root {
  /* Soft washes of the shared status colours, derived from them rather than pasted as hex, so a
     change to the palette carries through instead of leaving these behind. */
  --live-tint:    color-mix(in srgb, var(--status-live) 12%, var(--canvas-raised));
  --booked-tint:  color-mix(in srgb, var(--status-booked) 14%, var(--canvas-raised));
  --avail-tint:   color-mix(in srgb, var(--status-available) 12%, var(--canvas-raised));
  --maint-tint:   color-mix(in srgb, var(--status-maintenance) 12%, var(--canvas-raised));
  /* The near-black ground the sidebar uses. Pages referenced --ink, which does not exist; the
     suite's name is --ink-900. Aliased rather than renamed at ten call sites. */
  --ink: var(--ink-900);
}

/* ── Type the suite does not style ─────────────────────────────────────────────
   theme.css styles .so-page-title and .so-card-title but has no element rules for h2/h3, so a bare
   heading fell back to the browser's 1.5em with browser margins — a size and rhythm out of step
   with everything around it. Every page had its own copy of this; it lives here now. */
h2 {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -.01em;
  margin: 26px 0 10px;
}
h3 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 18px 0 8px;
}
/* Scoped to cards and the page root: a blanket :first-child rule also fires for any heading that
   opens a JS-rendered container, which is most of them, and quietly removed the space above. */
.so-card > h2:first-child,
.so-main > h2:first-child { margin-top: 0; }

/* ── Table cells the suite has no class for ──────────────────────────────────── */
.so-table td.id { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.so-table td.id a { text-decoration: none; color: inherit; }
.so-table td.num,
.so-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-primary);
}

.muted { color: var(--text-tertiary); font-size: 12.5px; }

/* ── Callouts ─────────────────────────────────────────────────────────────────
   A note beside the thing it is about, in the colour of the state it describes. */
.note {
  background: var(--booked-tint);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 13px;
  color: var(--text-primary);
  margin: 14px 0;
  max-width: 74ch;
}
.note.info { background: var(--accent-soft); color: var(--text-secondary); }