/*
 * SportsGods — shared component patterns.
 *
 * Augments css/theme.css (token layer) with reusable component classes
 * that pages can opt in to via class names. Existing inline <style>
 * blocks are NOT modified by this file; new rules use distinct class
 * names so legacy markup keeps working unchanged.
 *
 * Inspired by Cursor's design language — multi-layer elevation, tight
 * tabular numerals, restrained accent usage. Tokens are pulled from
 * theme.css so light/dark mode automatically tracks.
 */

/* ── Elevated content card ──
   Cursor-style elevation: multi-layer drop shadow + a hairline ring
   that reads as a 1px border on any background. Use sparingly — one
   or two per page section, for the moments that should "float". */
.elevated-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-elevated);
  padding: var(--card-padding);
}

/* ── Subtle card ──
   Low-elevation surface for nested content (cards inside cards, list
   rows that need to feel "lifted off" without competing with the
   primary card). Use as the default container for non-hero content. */
.subtle-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
  padding: var(--card-padding);
}

/* ── Outlined accent button ──
   Cursor's primary-CTA pattern: transparent fill, accent border, accent
   text. Reads as "important" without screaming. Pairs with .btn-primary
   from index.html when used together. */
.btn-outlined {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: .95rem;
  background: transparent;
  color: var(--green);
  border: 1px solid var(--green);
  text-decoration: none;
  transition: background-color .15s, color .15s, transform .15s;
}
.btn-outlined:hover {
  background: var(--green-dim);
  transform: translateY(-1px);
}

/* ── Eyebrow label ──
   Tight all-caps mono label — used above section titles. Tabular nums
   prevent date/version strings from reflowing on update. */
.eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.eyebrow-accent { color: var(--green); }

/* ── Refined heading rhythm ──
   Tightens letter-spacing and turns on stylistic-set + tabular-num
   features for any element that gets the .heading-tight class. Opt-in
   so existing h1/h2 don't shift unintentionally. */
.heading-tight {
  letter-spacing: -.04em;
  font-feature-settings: "ss01", "cv11", "tnum";
}

/* ── Section frame ──
   Optional convenience wrapper that applies the canonical max-width and
   the new section-gap rhythm. Equivalent to the .section pattern that
   already exists inline in several pages, but reads tokens instead of
   hard-coding 72px / 1100px. */
.section-frame {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--section-gap) 24px;
}

/* Visually-hidden text for screen readers. Lifted from games.html /
   games-detail.html so any page linking components.css gets it. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ──────────────────────────────────────────────────────────
   Shared skeleton primitives — lifted from games.html so the
   lines page (and any future page) can use the same loading
   pattern without forking the CSS. Page-specific row shapes
   (e.g., .sk-matchup width, .sk-prop-row layout) stay inline
   in each page since they describe that page's card layout.

   Per CLAUDE.md "Loading states — skeleton cards": ONE pattern
   across the site, no third variant. */
.sg-loading-eyebrow{display:flex;justify-content:center;align-items:center;gap:8px;margin:-8px auto 16px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.7rem;font-weight:700;letter-spacing:.12em;color:var(--text-3);text-transform:uppercase}
.sg-loading-eyebrow .pulse-dot{width:6px;height:6px;border-radius:99px;background:var(--green);box-shadow:0 0 0 0 var(--green);animation:sgSkeletonPulse 1.4s ease-out infinite}
.sg-loading-eyebrow .tape{font-weight:500;color:var(--text-2);letter-spacing:.04em}
@keyframes sgSkeletonPulse{
  0%{box-shadow:0 0 0 0 rgba(24,169,87,.45)}
  70%{box-shadow:0 0 0 8px rgba(24,169,87,0)}
  100%{box-shadow:0 0 0 0 rgba(24,169,87,0)}
}
.skeleton-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.skeleton-card .sk-head{display:flex;justify-content:space-between;align-items:center}
.skeleton-row{height:10px;border-radius:6px;background:var(--surface-2)}
.skeleton-card::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.04) 50%,transparent 100%);transform:translateX(-100%);animation:sgSkeletonShimmer 1.6s linear infinite}
[data-theme="light"] .skeleton-card::after{background:linear-gradient(90deg,transparent 0%,rgba(15,20,40,.04) 50%,transparent 100%)}
@keyframes sgSkeletonShimmer{
  100%{transform:translateX(100%)}
}
@media (prefers-reduced-motion: reduce){
  .sg-loading-eyebrow .pulse-dot{animation:none;box-shadow:0 0 0 3px rgba(24,169,87,.25)}
  .skeleton-card::after{animation:none;opacity:.5}
}

/* Reduced-motion already handled in theme.css — these transitions are
   automatically neutralized for users who've opted out. */