/**
 * AXIOM — LYFEWORK COMPONENT LIBRARY — v4.0
 * ─────────────────────────────────────────────────────────────
 * Pre-built CSS for every Lyfework UI component.
 * Requires tokens.css to be imported first.
 *
 * Import order:
 *   1. tokens.css
 *   2. components.css
 *
 * v4 REBRAND (2026-05-26): flat · white-default · geometric · "infrastructure-grade"
 * (benchmarks: Linear / Stripe). Supersedes v3 (dark glass + orange→red gradient).
 *   · NO gradients · NO glassmorphism · NO backdrop-blur · NO glow / radial fields
 *   · NO inset-highlight "lift" tricks.
 *   · Accent = Electric Lava var(--lava) #FF5418 as SOLID fills/text/borders only.
 *   · Buttons = sharp rectangle (var(--r-btn) 8px), NOT pill.
 *   · Cards = flat var(--surface) + 1px var(--border) + var(--r-card) 18px.
 *   · Theme = LIGHT default, DARK first-class via [data-theme="dark"]. Components source
 *     SEMANTIC tokens (--bg/--surface/--text/--border …) so they auto-adapt — no hardcoded
 *     dark values here.
 *
 * Class names are STABLE across v3 → v4 so nothing downstream loses a hook.
 * Every class uses canonical / --lyf-* variables. Never hardcode raw colors here.
 * ─────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════
   01 — LOGO & WORDMARK
═══════════════════════════════════════════ */

/*
  CANONICAL LOGO (v4) — single-path emblem, recolored via currentColor. No gradient.
  Assets: assets/svg/emblem.svg (mark) · assets/svg/lockup.svg (emblem + wordmark).

  <svg class="lyf-emblem" viewBox="0 0 543.38 483.35" width="32" height="32" aria-label="Lyfework">
    <path fill="currentColor" d="M543.38,39.79V8.81c0-4.86-3.95-8.81-8.81-8.81h-184.2c-2.34,0-4.58.92-6.23,2.58L2.58,344.14c-1.66,1.65-2.58,3.89-2.58,6.23v124.18c0,4.86,3.95,8.81,8.81,8.81h91.01c2.33,0,4.58-.92,6.23-2.58l146.29-146.29c15.45-15.45,40.5-15.45,55.94,0,7.42,7.42,11.59,17.48,11.59,27.98v112.09c0,4.86,3.95,8.81,8.81,8.81h205.9c4.86,0,8.81-3.95,8.81-8.81v-154.56c0-4.86-3.95-8.81-8.81-8.81h-163.43c-10.49,0-20.56-4.17-27.98-11.59-15.45-15.45-15.45-40.5,0-55.94l197.63-197.64c1.66-1.65,2.58-3.89,2.58-6.23"/>
  </svg>

  Rules:
  - ONE path. Recolor via currentColor (set `color:`) or `fill:` — any single value:
    var(--lava), var(--text), or any of the 9 Axiom Spectrum hues. Solid only.
  - In a lockup: emblem = var(--mark-emblem) (lava); wordmark = var(--mark-word) (ink/white).
  - FLAT solid fill only — NO gradient, NO inner highlight, NO offset-duality squares.
  - Wordmark is "Lyfework" (title case), Geist 700.
  - Never rotate, distort, recreate freehand, or use the deprecated v3 two-square/gradient mark.
*/

.lyf-lockup {
  display: flex;
  align-items: center;
  gap: var(--lyf-gap-lockup);
}

.lyf-lockup-stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lyf-gap-lockup);
}

.lyf-wordmark {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: var(--lyf-tracking-wordmark);
  line-height: 1;
}

.lyf-wordmark-lg {
  font-size: 28px;
}

.lyf-wordmark-sm {
  font-size: 16px;
}

/* Accent glyph (e.g. the dot) — v4: SOLID lava, no gradient text clip */
.lyf-dot {
  color: var(--lava);
}

/* ═══════════════════════════════════════════
   02 — CARDS  (v4: flat surface + thin border, no glass/blur)
═══════════════════════════════════════════ */

.lyf-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--lyf-pad-card);
  position: relative;
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}

.lyf-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.lyf-card-lg {
  border-radius: var(--r-2xl);
  padding: var(--lyf-pad-card-lg);
}

.lyf-card-sm {
  border-radius: var(--r-lg);
  padding: var(--lyf-pad-card-sm);
}

/* Non-interactive card — no hover shift */
.lyf-card-static {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--lyf-pad-card);
  position: relative;
  box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════
   03 — SECTION LABELS / EYEBROW PILLS
═══════════════════════════════════════════ */

.lyf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  font-family: var(--sans);
  font-size: var(--lyf-text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--lyf-tracking-eyebrow);
  color: var(--text-muted);
}

.lyf-pill::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lava);
  flex-shrink: 0;
}

/* Active / highlighted state — soft lava tint */
.lyf-pill-active {
  background: var(--accent-soft);
  border-color: var(--lyf-border-accent);
  color: var(--lava);
}

.lyf-pill-active::before {
  background: var(--lava);
}

/* ═══════════════════════════════════════════
   04 — BUTTONS  (v4: sharp rectangle, flat, no glow / no inset highlight)
═══════════════════════════════════════════ */

/* Primary — solid lava fill, white ink */
.lyf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--lava);
  color: var(--accent-ink);
  font-family: var(--sans);
  font-size: var(--lyf-text-button);
  font-weight: 600;
  letter-spacing: var(--lyf-tracking-button);
  padding: 12px 22px;
  border-radius: var(--r-btn);
  border: 1px solid var(--lava);
  cursor: pointer;
  transition:
    background var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    opacity var(--dur-base) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}

.lyf-btn:hover {
  background: var(--ember);
  border-color: var(--ember);
}

.lyf-btn:active {
  background: var(--lava);
  border-color: var(--lava);
  opacity: 0.9;
}

.lyf-btn:focus-visible {
  outline: 2px solid var(--lava);
  outline-offset: 2px;
}

.lyf-btn:disabled,
.lyf-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Secondary — solid ink fill (inverts in dark via tokens) */
.lyf-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--text);
  color: var(--bg);
  font-family: var(--sans);
  font-size: var(--lyf-text-button);
  font-weight: 600;
  letter-spacing: var(--lyf-tracking-button);
  padding: 12px 22px;
  border-radius: var(--r-btn);
  border: 1px solid var(--text);
  cursor: pointer;
  transition:
    background var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    opacity var(--dur-base) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}

.lyf-btn-secondary:hover {
  opacity: 0.88;
}

.lyf-btn-secondary:active {
  opacity: 0.8;
}

.lyf-btn-secondary:focus-visible {
  outline: 2px solid var(--lava);
  outline-offset: 2px;
}

.lyf-btn-secondary:disabled,
.lyf-btn-secondary[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Ghost — transparent + border, muted tertiary actions */
.lyf-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--lyf-text-button);
  font-weight: 600;
  letter-spacing: var(--lyf-tracking-button);
  padding: 12px 20px;
  border-radius: var(--r-btn);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition:
    background var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    color var(--dur-base) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}

.lyf-btn-ghost:hover {
  background: var(--panel);
  border-color: var(--text-dim);
}

.lyf-btn-ghost:active {
  background: var(--elev-2);
}

.lyf-btn-ghost:focus-visible {
  outline: 2px solid var(--lava);
  outline-offset: 2px;
}

.lyf-btn-ghost:disabled,
.lyf-btn-ghost[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Full width variant */
.lyf-btn-full {
  width: 100%;
}

/* ═══════════════════════════════════════════
   05 — INPUTS  (v4: flat, strong border, lava focus)
═══════════════════════════════════════════ */

.lyf-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--lyf-radius-input);
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  outline: none;
  transition:
    border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}

.lyf-input::placeholder {
  color: var(--text-faint);
}

.lyf-input:focus {
  border-color: var(--lava);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.lyf-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Error state */
.lyf-input-error {
  border-color: var(--red);
}

.lyf-input-error:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(255, 3, 1, 0.10);
}

/* ═══════════════════════════════════════════
   06 — NAVIGATION  (v4: flat opaque bar, no blur)
═══════════════════════════════════════════ */

.lyf-nav {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: var(--lyf-z-nav);
}

/* ═══════════════════════════════════════════
   07 — PROGRESS BAR  (v4: solid lava fill)
═══════════════════════════════════════════ */

.lyf-progress-track {
  height: 4px;
  background: var(--elev-3);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.lyf-progress-fill {
  height: 100%;
  background: var(--lava);
  border-radius: var(--r-pill);
  transition: width 400ms var(--ease);
}

/* ═══════════════════════════════════════════
   08 — SCORE DISPLAY  (spectrum status colors)
═══════════════════════════════════════════ */

.lyf-score {
  font-family: var(--sans);
  font-size: 48px;
  font-weight: 800;
  letter-spacing: var(--track-display);
  line-height: 1;
}

.lyf-score-good {
  color: var(--lyf-score-good);
}
.lyf-score-medium {
  color: var(--lyf-score-medium);
}
.lyf-score-poor {
  color: var(--lyf-score-poor);
}

/* Score badge pill: "63 → 82 POTENTIAL" */
.lyf-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 10px 22px;
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
}

/* SVG donut chart strokes */
.lyf-donut-track {
  stroke: var(--border);
  fill: none;
  stroke-width: 8;
}
.lyf-donut-good {
  stroke: var(--lyf-score-good);
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}
.lyf-donut-medium {
  stroke: var(--lyf-score-medium);
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}
.lyf-donut-poor {
  stroke: var(--lyf-score-poor);
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}

/* ═══════════════════════════════════════════
   09 — STATUS TAGS  (soft tinted spectrum backgrounds)
═══════════════════════════════════════════ */

.lyf-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--lyf-radius-tag);
  padding: 6px 12px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
}

.lyf-tag-pass {
  background: var(--lyf-bg-success);
  border: 1px solid var(--lyf-border-success);
  color: var(--lyf-text-success);
}

.lyf-tag-fail {
  background: var(--lyf-bg-error);
  border: 1px solid var(--lyf-border-error);
  color: var(--lyf-text-error);
}

.lyf-tag-warn {
  background: var(--lyf-bg-warning);
  border: 1px solid var(--lyf-border-warning);
  color: var(--lyf-text-warning);
}

/* Failing metric card (deep red tint) */
.lyf-metric-fail {
  background: var(--lyf-bg-error-deep);
  border: 1px solid var(--lyf-border-error);
  border-radius: var(--lyf-radius-tag);
  padding: 12px 16px;
}

/* ═══════════════════════════════════════════
   10 — DATA TABLE  (v4: flat surface, semantic text)
═══════════════════════════════════════════ */

.lyf-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.lyf-table th {
  font-family: var(--sans);
  font-size: var(--lyf-text-eyebrow);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-dim);
  padding: 14px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.lyf-table td {
  padding: 16px 18px;
  font-family: var(--sans);
  font-size: var(--lyf-text-body-sm);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
}

.lyf-table tr:last-child td {
  border-bottom: none;
}

.lyf-table .col-you {
  color: var(--lava);
  font-weight: 600;
}

/* ═══════════════════════════════════════════
   11 — RECOMMENDATION CARDS
═══════════════════════════════════════════ */

.lyf-rec-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: var(--sp-4);
  position: relative;
  box-shadow: var(--shadow-sm);
}

.lyf-rec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.lyf-rec-title-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* v4: solid lava chip, sharp square (was gradient circle) */
.lyf-rec-number {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--lava);
  color: var(--accent-ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lyf-rec-title {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.lyf-rec-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--lyf-bg-warning);
  border: 1px solid var(--lyf-border-warning);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--lyf-text-warning);
}

.lyf-rec-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lyf-text-warning);
  flex-shrink: 0;
}

.lyf-rec-inner {
  background: var(--panel);
  border-left: 2px solid var(--lava);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 14px 16px;
  margin-top: var(--sp-4);
}

.lyf-rec-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--lava);
  margin-bottom: var(--sp-2);
}

.lyf-rec-impact {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--lyf-text-success);
  margin-top: var(--sp-3);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ═══════════════════════════════════════════
   12 — REVENUE BREAKDOWN
═══════════════════════════════════════════ */

.lyf-revenue-range {
  font-family: var(--sans);
  font-size: 40px;
  font-weight: 800;
  color: var(--lyf-text-success);
  letter-spacing: var(--track-display);
  line-height: 1;
}

.lyf-revenue-item {
  border-left: 3px solid var(--lava);
  background: var(--panel);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 14px 18px;
  margin-bottom: 2px;
}

.lyf-revenue-item-label {
  font-family: var(--sans);
  font-size: var(--lyf-text-body-sm);
  font-weight: 400;
  color: var(--text-muted);
  margin-bottom: var(--sp-1);
}

.lyf-revenue-item-value {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--lyf-text-success);
}

/* ═══════════════════════════════════════════
   13 — CHECKLIST / LOADING STATES
═══════════════════════════════════════════ */

.lyf-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.lyf-check-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--text-muted);
  opacity: 0;
  animation: lyf-check-in 300ms var(--ease) forwards;
}

.lyf-check-item.complete {
  color: var(--text);
}

.lyf-check-item.pending {
  color: var(--text-faint);
}

/* Stagger delays */
.lyf-check-item:nth-child(1) {
  animation-delay: 0ms;
}
.lyf-check-item:nth-child(2) {
  animation-delay: 600ms;
}
.lyf-check-item:nth-child(3) {
  animation-delay: 1200ms;
}
.lyf-check-item:nth-child(4) {
  animation-delay: 1800ms;
}
.lyf-check-item:nth-child(5) {
  animation-delay: 2400ms;
}

.lyf-check-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lyf-check-icon.complete {
  background: var(--lyf-bg-success);
  border-color: var(--lyf-text-success);
  color: var(--lyf-text-success);
}

/* ═══════════════════════════════════════════
   14 — PAGE SUBTITLE (under logo on audit screen)
═══════════════════════════════════════════ */

.lyf-page-subtitle {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--track-body);
  color: var(--text-dim);
  margin-top: var(--sp-2);
}

/* ═══════════════════════════════════════════
   15 — TRUST INDICATORS ROW
═══════════════════════════════════════════ */

.lyf-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

.lyf-trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-faint);
}

.lyf-trust-check {
  color: var(--lyf-text-success);
  font-size: 12px;
}

/* ═══════════════════════════════════════════
   16 — AMBIENT GLOW — REMOVED in v4 (no-op shim)
   Kept as a stable class so downstream markup using .lyf-glow
   simply renders nothing instead of breaking. NO radial / blur.
═══════════════════════════════════════════ */

.lyf-glow {
  display: none;
}

/* ═══════════════════════════════════════════
   17 — FOOTER
═══════════════════════════════════════════ */

.lyf-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: var(--sp-12) var(--lyf-pad-page);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
}

.lyf-footer-tagline {
  font-family: var(--sans);
  font-size: var(--lyf-text-body-sm);
  font-weight: 400;
  color: var(--text-dim);
  /* Approved tagline: "Infrastructure first. Calm execution. Measured optimization." */
}

/* ═══════════════════════════════════════════
   18 — ALERT BAR
═══════════════════════════════════════════ */

.lyf-alert-error {
  background: var(--lyf-bg-error);
  border: 1px solid var(--lyf-border-error);
  border-radius: var(--r-sm);
  padding: 12px 18px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--lyf-text-error);
  text-align: center;
}

/* ═══════════════════════════════════════════
   19 — KEYFRAME ANIMATIONS
   (v4: subtle, opacity/translate only — no scale-glow / pulse-glow effects)
═══════════════════════════════════════════ */

@keyframes lyf-check-in {
  from {
    transform: translateY(6px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Canonical entrance keyframe — aligns with modules/07-motion.md §fadeUp (translateY 30px) */
@keyframes lyf-fade-up {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes lyf-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes lyf-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Retained for back-compat; opacity-only (no glow). */
@keyframes lyf-glow-pulse {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

@keyframes lyf-mark-in {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Utility animation classes */
.lyf-animate-fade-up {
  animation: lyf-fade-up 500ms var(--ease) forwards;
}
.lyf-animate-fade-in {
  animation: lyf-fade-in 400ms var(--ease) forwards;
}
.lyf-animate-mark-in {
  animation: lyf-mark-in 600ms var(--ease) forwards;
}

/* ═══════════════════════════════════════════
   20 — RESPONSIVE
═══════════════════════════════════════════ */

@media (max-width: 768px) {
  .lyf-score {
    font-size: 36px;
  }
  .lyf-score-badge {
    font-size: 18px;
    padding: 8px 16px;
  }
  .lyf-revenue-range {
    font-size: 30px;
  }
  .lyf-btn {
    width: 100%;
  }
  .lyf-trust-row {
    gap: 16px;
  }
  .lyf-rec-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .lyf-card {
    border-radius: var(--r-lg);
    padding: var(--sp-5) var(--sp-4);
  }
  .lyf-wordmark {
    font-size: 18px;
  }
  .lyf-check-item {
    font-size: 14px;
  }
}