/*
 * Ezra v2 — Component Styles
 * Source: Ezra Visual Unification spec (2026-06-02), Gus's exact component specs.
 * Loaded AFTER rbv-tokens.css and BEFORE inline <style> blocks.
 *
 * Three make-or-break rules (Gus's words):
 *   1. Serif headings are weight 500, NEVER bold.
 *   2. Brand red (#B23B30) is ACCENT-ONLY. Workhorse buttons are ink-black.
 *   3. Cards: 1px #E6E6E6 hairline + white bg + 4px radius. NO shadows.
 *
 * Inline <style> in any template always wins on conflict (loaded last).
 */

/* ── Element defaults ─────────────────────────────────────────────────── */

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
}

/* Headings: serif, weight 500, NEVER bold. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--color-ink);
}

/* ── Eyebrow label — the signature device ─────────────────────────────── */

.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking);
  color: var(--color-brand);
}

/* ── Page layout ──────────────────────────────────────────────────────── */

.page-wrap {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 56px 24px;
}

.prose {
  max-width: var(--max-prose);
}

/* ── Page header (white + hairline bottom, eyebrow-above-title pattern) ── */

.page-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 24px;
  margin-bottom: 40px;
}

.page-header-inner {
  max-width: var(--max-content);
  margin: 0 auto;
}

/* ── Navigation bar (sticky variant) ─────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink);
  z-index: 50;
}

.nav-wordmark {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-ink);
  margin-right: var(--space-5);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: var(--space-4);
  flex: 1;
}

.nav-links a {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.nav-links a:hover { color: var(--color-brand); }

.nav-identity {
  color: var(--color-subtle);
  font-size: 13px;
}

/* ── Typography classes ───────────────────────────────────────────────── */

/* Page title (h1 at Ezra scale — 39px, not 76px hero) */
.page-title {
  font-family: var(--font-serif);
  font-size: 39px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-ink);
}

/* Card title */
.card-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--color-ink);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

/* Brand red — accent CTA only (Login, primary action, links). NOT Save/Apply. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand);
  color: #fff;
  border: 1px solid var(--color-brand);
  border-radius: var(--radius);
  padding: 12px 20px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary:hover  { background: var(--color-brand-hover);  border-color: var(--color-brand-hover); }
.btn-primary:active { background: var(--color-brand-active); border-color: var(--color-brand-active); }

/* Ink-black — workhorse form button (Save, Apply, Submit, etc.) */
.btn-ink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-ink);
  color: #fff;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius);
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}
.btn-ink:hover { background: #000; border-color: #000; }

/* Outline — secondary/ghost button */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 10px 20px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}
.btn-outline:hover { background: var(--color-sand); }
.btn-outline:active { background: var(--color-sand-active); }

/* Compact modifier — use with any btn-* for tighter padding */
.btn-compact {
  padding: 6px 12px;
  font-size: 13px;
}

/* ── Cards ────────────────────────────────────────────────────────────── */

/* Universal card: hairline border, white bg, 4px radius. NO box-shadow. */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  color: var(--color-ink);
}

.card-lg {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  color: var(--color-ink);
}

/* ── Input ────────────────────────────────────────────────────────────── */

.input {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-ink);
}
.input::placeholder { color: var(--color-subtle); }
.input:focus { outline: none; border-color: var(--color-ink); }

/* ── Badges / Pills ───────────────────────────────────────────────────── */

/* Base badge — pill shape */
.badge {
  display: inline-block;
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}

/* Tones */
.badge-neutral { background: var(--color-sand);  color: var(--color-muted); }
.badge-brand   { background: var(--color-brand);  color: #fff; }
.badge-blush   { background: var(--color-blush);  color: var(--color-brand); }
.badge-ink     { background: var(--color-ink);    color: #fff; }

/* Legacy pill alias (used in prior attempt) */
.pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
}
.pill-blush { background: var(--color-blush); color: var(--color-brand); }

/* ── Table ────────────────────────────────────────────────────────────── */

.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 14px;
}
.table th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking);
  color: var(--color-brand);
  text-align: left;
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.table td {
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-ink);
  vertical-align: top;
}
.table tr:hover td { background: var(--color-bg); }

/* ── Links ────────────────────────────────────────────────────────────── */

/* Not applying global a{} — too risky vs existing inline link styling. Opt-in below. */
.link-accent {
  color: var(--color-brand);
  text-decoration: none;
}
.link-accent:hover { color: var(--color-brand-hover); }

.link-muted {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
}
.link-muted:hover { color: var(--color-brand); }

/* ── Star priority toggle ─────────────────────────────────────────────── */

.star-active   { color: var(--color-brand); }
.star-inactive { color: var(--color-subtle); }

/* ── Reserved: glow (decorative, not applied in v1) ──────────────────── */

.glow-featured {
  box-shadow:
    inset 0 0 15px rgba(217, 119, 87, 0.7),
    inset 0 0 25px rgba(217, 119, 87, 0.5),
    inset 0 0 35px rgba(217, 119, 87, 0.2);
}