/* ============================================================
   COMPONENTS — buttons, badges, cards, nav
   ============================================================ */

/* ---------- BUTTONS ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.875rem 1.375rem;
  font-family: var(--font-body);
  font-weight: 570;
  font-size: var(--text-sm);
  letter-spacing: -0.005em;
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition:
    background-color var(--dur-fast) var(--ease-swift),
    color var(--dur-fast) var(--ease-swift),
    border-color var(--dur-fast) var(--ease-swift),
    transform var(--dur-fast) var(--ease-swift),
    box-shadow var(--dur-fast) var(--ease-swift);
  position: relative;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.btn svg { width: 1em; height: 1em; opacity: 0.9; }

.btn-primary {
  background: var(--ember-500);
  color: var(--ink-1000);
  border-color: var(--ember-500);
  font-weight: 600;
  box-shadow:
    0 1px 0 0 oklch(0.90 0.16 55 / 0.3) inset,
    0 -1px 0 0 oklch(0.45 0.14 40 / 0.35) inset,
    0 10px 30px -12px var(--ember-glow);
}
.btn-primary:hover {
  background: var(--ember-400);
  border-color: var(--ember-400);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 0 oklch(0.92 0.12 55 / 0.4) inset,
    0 -1px 0 0 oklch(0.45 0.14 40 / 0.35) inset,
    0 16px 36px -12px var(--ember-glow);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  color: var(--fg-strong);
  border-color: var(--ink-700);
  background: transparent;
}
.btn-ghost:hover {
  border-color: var(--ink-600);
  background: var(--ink-900);
}

.btn-link {
  padding: 0;
  color: var(--fg-strong);
  gap: var(--space-3xs);
  font-weight: 550;
}
.btn-link::after {
  content: "→";
  transition: transform var(--dur-fast) var(--ease-swift);
  display: inline-block;
}
.btn-link:hover { color: var(--ember-400); }
.btn-link:hover::after { transform: translateX(3px); }

/* ---------- BADGES / PILLS ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25rem 0.625rem 0.275rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-loud);
  text-transform: uppercase;
  color: var(--bone-200);
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  font-weight: 500;
}

.pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ember-500);
  box-shadow: 0 0 8px var(--ember-500);
  animation: pulse 2.4s infinite var(--ease-out-soft);
}
.pill-danger .dot { background: var(--fault-500); box-shadow: 0 0 8px var(--fault-500); }
.pill-ok .dot { background: var(--moss-500); box-shadow: 0 0 8px var(--moss-500); animation: none; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ---------- CARD PRIMITIVES ----------
   Intentionally varied — not uniform feature-grid cards.
   Every card in this site has a reason to look different. */

.panel {
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.panel--flush { padding: 0; overflow: hidden; }

/* ---------- NAV ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-sticky);
  padding: var(--space-sm) var(--rail-pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  /* Mobile / low-power: solid opaque background with no backdrop blur.
     A fixed-position element with backdrop-filter forces the GPU to
     re-blur everything behind it on every scroll frame, which is the
     dominant scroll-perf cost on older Android. Desktop keeps the
     original frosted-glass look. */
  background: oklch(0.13 0.008 30 / 0.96);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-med) var(--ease-swift),
              background-color var(--dur-med) var(--ease-swift);
}
@media (hover: hover) and (pointer: fine) and (min-width: 64rem) {
  .nav {
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    background: oklch(0.13 0.008 30 / 0.72);
  }
}
.low-power .nav {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: oklch(0.13 0.008 30 / 0.96);
}
.nav.is-scrolled {
  border-bottom-color: var(--ink-800);
  background: oklch(0.13 0.008 30 / 0.98);
}
@media (hover: hover) and (pointer: fine) and (min-width: 64rem) {
  .nav.is-scrolled { background: oklch(0.13 0.008 30 / 0.92); }
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-strong);
  line-height: 1;
}
.wordmark .mark {
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  border-radius: 0.32em;
  background-image: url("../assets/riftview-logo.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  /* Subtle inner hairline so the logo's rounded-square silhouette
     reads as intentional against the dark surface, not clipped. */
  box-shadow:
    inset 0 0 0 1px oklch(0.35 0.05 45 / 0.5),
    0 2px 12px -4px oklch(0.73 0.17 50 / 0.15);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
  padding: 0;
}
.nav-links a {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  font-weight: 520;
  transition: color var(--dur-fast) var(--ease-swift);
}
.nav-links a:hover { color: var(--fg-strong); }

.nav-end {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

@media (max-width: 48rem) {
  .nav-links { display: none; }
  .nav { grid-template-columns: 1fr auto; }
  .nav-end .btn-ghost { display: none; }
}

/* ---------- CODE BLOCK / TERMINAL ---------- */

.term {
  background: var(--ink-1000);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-lg);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  overflow: hidden;
  box-shadow: 0 20px 60px -30px oklch(0 0 0 / 0.6);
}
.term-head {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.55rem 0.75rem;
  background: var(--ink-900);
  border-bottom: 1px solid var(--ink-800);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-loud);
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 500;
}
.term-head .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink-700);
}
.term-head .dot:nth-child(1) { background: oklch(0.55 0.18 28); }
.term-head .dot:nth-child(2) { background: oklch(0.72 0.15 75); }
.term-head .dot:nth-child(3) { background: oklch(0.70 0.14 150); }
.term-head .title { margin-left: auto; }
.term-body {
  padding: var(--space-md);
  line-height: 1.7;
  color: var(--bone-200);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: -0.005em;
}
.term-body .c-prompt { color: var(--ember-400); }
.term-body .c-flag   { color: var(--oxide-400); }
.term-body .c-str    { color: var(--moss-500); }
.term-body .c-num    { color: oklch(0.80 0.13 75); }
.term-body .c-dim    { color: var(--fg-dim); }
.term-body .c-err    { color: var(--fault-500); }
.term-body .c-ok     { color: var(--moss-500); }

/* ---------- DIFF / DRIFT ---------- */

.diff {
  background: var(--ink-1000);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-lg);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  overflow: hidden;
}
.diff-head {
  display: flex;
  justify-content: space-between;
  padding: 0.625rem 0.875rem;
  background: var(--ink-900);
  border-bottom: 1px solid var(--ink-800);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-loud);
  color: var(--fg-muted);
}
.diff-body { padding: var(--space-sm); line-height: 1.65; }
.diff-body .line {
  display: grid;
  grid-template-columns: 3ch 1ch 1fr;
  gap: 0.5em;
  padding: 0 0.25rem;
}
.diff-body .line.-add    { background: oklch(0.68 0.10 145 / 0.10); color: var(--moss-500); }
.diff-body .line.-rem    { background: oklch(0.60 0.20 28 / 0.10); color: oklch(0.80 0.15 28); }
.diff-body .line .ln     { color: var(--fg-dim); text-align: right; user-select: none; }
.diff-body .line .mk     { font-weight: 600; }