/* ══ THE BRAND DIAL — the one file a spawned app edits first ═══════════════
 *
 * Two decisions make an app look like ITSELF instead of like the template:
 *
 *   1. THE HUE. Set --app-hue below and the whole accent family follows —
 *      buttons, active tabs, focus rings, the live-log title, chart accents —
 *      because every downstream layer resolves through --n-accent/--n-gold
 *      (tokens.css → nominate.css → skin.css → components.css). One number.
 *
 *      Try: 25 (ember) · 55 (the nominate orange) · 145 (mint) · 210 (sky)
 *      · 265 (violet) · 330 (rose). oklch keeps perceived lightness steady
 *      across hues, so contrast ratios survive the turn of the dial.
 *
 *   2. THE MARK. Drop your logo at skin/brand/mark.png (transparent bg;
 *      the header hides the <img> if the file is absent), then run
 *      `bun run icons` to regenerate the PWA artwork from it.
 *
 * Loaded LAST in the <head>, after tokens/nominate/skin/components, so these
 * overrides win without fighting the vendored files.
 */

/* ⚠️ THE SELECTOR IS THE WHOLE TRICK (cbprospect's lesson, kept): nominate.css
   declares its tokens on `:root, :root[data-theme='nominate']`, and pages that
   set data-theme="nominate" make that second selector (0,1,1) outrank a bare
   `:root` no matter how late this file loads. Doubled here so copper wins on
   the app hub too, not only on pages with no data-theme attribute. */
:root,
:root[data-theme='nominate'] {
  /* ── PUBLIC IS COPPER (operator, 2026-08-18: "here we introduce the copper
   * theme") — the third eagle landed, at skin/brand/mark.png. Literals
   * sampled from the eagle itself, the way Prospect wears its gold and
   * Night its silver: the accent is the struck mid-tone, the highlight the
   * lit facet. The site pages define the same metal in skin/public.css
   * (they load nominate.ai's vendored language, not this dial). */
  --accent: #ce6c3b;
  --gold: #fdca90;
  --n-accent: #ce6c3b;
  --n-gold: #fdca90;

  /* The app's display name, for shared pages that carry the app chrome
     (the kit's invites screen reads it via `content: var(--app-name)`).
     "Public", not "Nominate.ai": the APP follows the family convention —
     PROSPECT · ELECTION NIGHT · PUBLIC — while the server-rendered site
     keeps its own Nominate.ai identity (that is the site's brand, and the
     operator wants it looking like nominate.ai, not like an Apex app). */
  --app-name: "Public";
}

/* The shareable panel grid — the unit a crawler indexes and a person sends
   to a colleague. Cards are real anchors, so a middle-click works and a
   crawler follows. */
.panel-grid {
  /* The grid is `.ax-deck` (components.css); these are its dials. */
  --ax-deck-min: 16rem;
  --ax-deck-gap: 1rem;
  margin: 0 0 2.5rem;
}
.shell-card.is-door {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  padding-right: 2.1rem;
}
.shell-card.is-door::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: 0.9rem;
  transform: translateY(-50%);
  font-family: var(--ax-mono);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--subdued);
}
.shell-card.is-door:hover {
  border-color: var(--accent);
}
.shell-card.is-door:hover::after {
  color: var(--accent);
}
.p-eyebrow {
  display: block;
  font-family: var(--ax-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.3rem;
}
.p-title {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.p-line {
  display: block;
  font-size: 0.9rem;
  color: var(--subdued);
  margin-top: 0.35rem;
}
.quiet {
  color: var(--subdued);
}

.strip {
  margin: 0 0 2.5rem;
  max-width: 46rem;
}
.strip h2 {
  font-size: 1.25rem;
  margin: 0 0 0.6rem;
}
.strip p {
  color: var(--subdued);
}
.more {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.more:hover {
  text-decoration: underline;
}
.more-row {
  margin-top: 2rem;
}
.scroll {
  overflow-x: auto;
}
.scroll table {
  border-collapse: collapse;
  width: 100%;
}
.scroll th,
.scroll td {
  text-align: left;
  padding: 0.45rem 0.7rem;
  border-bottom: var(--ax-line);
}
.scroll td.num,
.scroll th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--ax-mono);
}