/* Club AI site rules for the Club Concierge AI pages. Loaded after club-ai.css.
   The page markup uses inline styles, so a few rules need !important. */
::selection { background: var(--emerald-800); color: var(--ivory-100); }
:focus-visible { outline: none !important; box-shadow: var(--focus-ring) !important; }

/* Display: Jost Light, uppercase, tracked. */
h1, h2 { text-transform: uppercase; letter-spacing: var(--tracking-display) !important; font-weight: 300 !important; }

/* Buttons and button links: tracked caps labels, no press scale, colour-shift hover. */
a[data-press], button[data-press], .pill-btn, .ghost-btn {
  text-transform: uppercase; letter-spacing: 0.16em !important; font-size: 12px !important; font-weight: 500 !important;
}
[data-press], .pill-btn, .ghost-btn {
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease !important;
}
[data-press]:active, .pill-btn:active { transform: none !important; }

/* Links: a short colour fade on hover. */
a { transition: color 150ms ease; }

/* The diamond: the brand's only glyph. */
[data-diamond] { display: inline-block; width: var(--diamond); height: var(--diamond); background: currentColor; transform: rotate(45deg); flex: none; }
/* A hairline rule with a diamond at its centre. Set color on the element. */
[data-rule] { display: flex; align-items: center; gap: 14px; color: var(--emerald-800); }
[data-rule]::before, [data-rule]::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.35; }

/* ROI strip: the result panel is an emerald brand panel. */
[data-roi-panel]:last-child { background-color: var(--emerald-800) !important; background-image: var(--pattern-dots); background-size: 24px 24px; color: var(--ivory-100); }
[data-roi-panel]:last-child p, [data-roi-panel]:last-child span { color: var(--ivory-100) !important; }
[data-roi-panel]:last-child > p:first-child { color: var(--emerald-300) !important; }

@media (prefers-reduced-motion: reduce) {
  [data-press], .pill-btn, .ghost-btn { transition: none !important; }
}