/* FULLPRESS Components CSS — requires brand.css tokens */

/* ============================================================
   STAT CARD
   ============================================================ */

.fp-stat-card {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.fp-stat-card__metric {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  line-height: 1;
}

.fp-stat-card__value {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -0.02em;
  color: var(--text-primary, var(--light-orbit));
}

[data-theme="light"] .fp-stat-card__value {
  color: var(--deep-anchor-ink);
}

.fp-stat-card__unit {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 32px);
  color: var(--ignition-red);
  letter-spacing: -0.01em;
}

.fp-stat-card__label {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-transform: uppercase;
}

.fp-stat-card__context {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 13px;
  color: var(--warm-gray);
  line-height: 1.4;
}

/* ============================================================
   STAT GRID
   ============================================================ */

.fp-stat-grid {
  padding: var(--space-4);
}

.fp-stat-grid__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
}

/* ============================================================
   PHASE CARD
   ============================================================ */

.fp-phase-card {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: box-shadow var(--motion-standard), border-left-color var(--motion-standard);
}

[data-theme="light"] .fp-phase-card:hover {
  box-shadow: var(--glass-light-shadow-near);
  border-left-color: rgba(0, 214, 126, 0.90) !important;
}

.fp-phase-card__number {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: 48px;
  color: var(--warm-gray);
  line-height: 1;
}

.fp-phase-card__title {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--deep-anchor-ink);
}

[data-theme="dark"] .fp-phase-card__title {
  color: var(--light-orbit);
}

.fp-phase-card__description {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.65;
  color: var(--slate);
  flex: 1;
}

[data-theme="dark"] .fp-phase-card__description {
  color: var(--muted);
}

.fp-phase-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.fp-phase-card__dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--signal-green);
  flex-shrink: 0;
}

.fp-phase-card__timeframe {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ============================================================
   OVERLINE
   ============================================================ */

.fp-overline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--signal-green);
}

[data-theme="light"] .fp-overline {
  color: var(--deep-anchor-ink);
}

.fp-overline__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--signal-green);
  flex-shrink: 0;
}

[data-theme="dark"] .fp-overline__dot {
  display: none;
}

/* ============================================================
   NAVIGATION
   ============================================================ */

.fp-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  z-index: var(--z-nav);
  background: var(--deep-anchor-ink);
  border-bottom: 1px solid var(--glass-border-surface);
  display: flex;
  align-items: center;
  padding: 0 var(--space-12);
  gap: var(--space-8);
}

.fp-nav__brand {
  text-decoration: none;
  flex-shrink: 0;
}

.fp-nav__wordmark {
  width: var(--logo-width-wordmark);
  height: auto;
}

.fp-nav__wordmark-text {
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.12em;
  color: var(--light-orbit);
}

.fp-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.fp-nav__link {
  font-family: var(--font-secondary);
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--motion-micro);
}

.fp-nav__link:hover { color: var(--light-orbit); }
.fp-nav__link.active { color: var(--light-orbit); }

.fp-nav__cta {
  margin-left: auto;
  flex-shrink: 0;
}

/* ============================================================
   ANCHOR RULE — Ignition Red, draws from left
   ============================================================ */

.fp-rule-ignition {
  height: 1px;
  background: linear-gradient(90deg, var(--ignition-red) 0%, transparent 55%);
  border: none;
  width: 100%;
}

/* ============================================================
   STATUS BADGE
   ============================================================ */

.fp-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-button);
  border: 1px solid;
}

.fp-status--active {
  color: var(--signal-green);
  background: rgba(0, 214, 126, 0.08);
  border-color: rgba(0, 214, 126, 0.20);
}

.fp-status--error {
  color: var(--orbit-red);
  background: rgba(196, 33, 60, 0.07);
  border-color: rgba(196, 33, 60, 0.20);
}

.fp-status--pending {
  color: var(--muted);
  background: rgba(155, 149, 166, 0.08);
  border-color: rgba(155, 149, 166, 0.20);
}

.fp-status--warning {
  color: #F5A623;
  background: rgba(245, 166, 35, 0.08);
  border-color: rgba(245, 166, 35, 0.22);
}

.fp-status__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ============================================================
   AGENT BADGE
   ============================================================ */

.fp-agent-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--signal-green);
  background: rgba(0, 214, 126, 0.10);
  border: 1px solid rgba(0, 214, 126, 0.25);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
}

/* ============================================================
   EASTER EGG
   ============================================================ */

.fp-easter-egg {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: rgba(0, 214, 126, 0.28);
  pointer-events: none;
  user-select: none;
  display: block;
}

[data-theme="light"] .fp-easter-egg {
  color: rgba(74, 68, 88, 0.45);
}

@media (max-width: 1024px) {
  .fp-easter-egg { display: none; }
}

/* ============================================================
   SECTION HEADER
   ============================================================ */

.fp-section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.fp-section-header--center {
  align-items: center;
  text-align: center;
}

.fp-section-header--center .fp-rule-ignition {
  width: 80px;
  align-self: center;
}

.fp-section-header__headline {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 40px);
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--text-primary, var(--light-orbit));
  margin: 0;
}

[data-theme="light"] .fp-section-header__headline {
  color: var(--deep-anchor-ink);
}

.fp-section-header__subhead {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
  max-width: 640px;
}