/*
 * 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;
}

/* ── The top bar stays on screen while the page scrolls (Dan, 2026-10-13) ──
   Every Ezra page puts its top bar in `body > .page-header` (six templates, checked by a smoke
   test), so ONE rule here covers them all. It used to scroll away, unlike the sticky `.nav` below.
   - From tablet width up only. On a phone the bar wraps to two lines and would take about a tenth
     of the screen; that is the mobile project's decision, not this one's.
   - z-index 100 sits ABOVE the CRM's sticky filter bar (50) and BELOW every panel, drawer and
     modal (200 and up), so nothing that opens over the page ends up under the bar.
   - scroll-padding keeps an anchor jump or scrollIntoView from landing UNDER the bar. */
@media (min-width: 769px) {
  body > .page-header {
    position: sticky;
    top: 0;
    z-index: 100;
  }
  html { scroll-padding-top: 72px; }
}

/* ── 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);
}