/* ==========================================================================
   Cosmo Design System — components
   Documented in design-system.html. Depends on tokens.css.
   ========================================================================== */

/* ---- Layout helpers ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-pad); position: relative; }
.section-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); max-width: 720px; }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head h2 { font-size: var(--text-h2); line-height: var(--leading-tight); }
.section-head p { color: var(--color-text-dim); font-size: var(--text-lg); }

/* ---- Eyebrow ---- */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal);
}

/* ---- Wordmark ---- */
.wordmark {
  font-family: "Outfit", var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-wordmark);
  color: var(--color-amber);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-button); border: 2px solid transparent;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--primary { background: var(--color-amber); color: var(--color-on-amber); }
.btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-line); }
.btn--sm { min-height: 44px; padding: var(--space-2) var(--space-4); }
@media (hover: hover) {
  .btn--primary:hover { background: var(--color-amber-hover); color: var(--color-on-amber); }
  .btn--ghost:hover { border-color: var(--color-teal); color: var(--color-text); }
}
.btn:active { transform: translateY(1px); }

/* ---- Store badges (official artwork, unmodified) ---- */
.store-badges { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; }
.store-badge { display: grid; gap: var(--space-2); justify-items: start; }
.store-badge a { display: block; border-radius: 9px; line-height: 0; transition: transform var(--dur-fast) var(--ease-out); }
.store-badge img { display: block; height: 52px; width: auto; }
@media (hover: hover) { .store-badge a[href]:hover { transform: translateY(-2px); } }
.store-badge a:not([href]) { cursor: default; }
.store-badge__note {
  display: none;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-dim);
}
.store-badge.is-pending .store-badge__note { display: block; }
/* Visitor's platform first */
:root[data-os="android"] .store-badge--android,
:root[data-os="ios"] .store-badge--ios { order: -1; }

/* ---- Chips ---- */
.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 36px; padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-chip); border: 1px solid var(--color-line-soft);
  background: rgba(12, 18, 40, 0.7);
  font-size: var(--text-sm); color: var(--color-text); white-space: nowrap;
}
.chip svg { width: 16px; height: 16px; color: var(--color-teal); flex: none; }
button.chip { font-family: inherit; cursor: pointer; min-height: 44px; }
button.chip[aria-pressed="true"] { border-color: var(--color-amber); background: rgba(242, 166, 35, 0.12); }
@media (hover: hover) { button.chip:hover { border-color: var(--color-teal); } }

/* ---- Card ---- */
.card {
  position: relative; overflow: hidden;
  display: grid; gap: var(--space-3); align-content: start;
  padding: var(--space-5);
  background: var(--color-space-card);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.card h3 { font-size: var(--text-h3); }
.card p { color: var(--color-text-dim); font-size: var(--text-sm); }

/* Feature card: planet render + its own planet colour */
.feature-card { --accent: var(--color-amber); padding-top: var(--space-4); }
.feature-card::before {
  content: ""; position: absolute; top: -40%; right: -30%; width: 80%; aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 28%, transparent), transparent 65%);
  pointer-events: none;
}
.feature-card__art { width: 112px; height: auto; aspect-ratio: 1; margin-left: calc(var(--space-2) * -1); position: relative; }
.feature-card__stat { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-dim); position: relative; }
.feature-card__stat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.feature-card h3, .feature-card p { position: relative; }

/* ---- Point list (icon + title + text) ---- */
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.point { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.point__icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(93, 202, 165, 0.12); color: var(--color-teal);
}
.point__icon svg { width: 22px; height: 22px; }
.point h3 { font-size: var(--text-h4); margin-bottom: var(--space-1); }
.point p { color: var(--color-text-dim); font-size: var(--text-sm); }

/* ---- Phone frame (presentation for real screenshots) ---- */
.phone {
  --phone-w: 280px;
  position: relative; width: var(--phone-w); max-width: 100%;
  padding: calc(var(--phone-w) * 0.035);
  border-radius: calc(var(--phone-w) * 0.16);
  background: linear-gradient(145deg, #3a4060, #161a2e 40%, #2a2f48);
  box-shadow: var(--shadow-phone);
}
.phone img {
  display: block; width: 100%; height: auto; aspect-ratio: 640 / 1392;
  border-radius: calc(var(--phone-w) * 0.13);
  background: var(--color-space-dark);
}

/* ---- Stat ---- */
.stat { display: grid; gap: var(--space-1); }
.stat__num { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--text-stat); line-height: 1; color: var(--color-text); white-space: nowrap; }
.stat__label { display: block; color: var(--color-text-dim); font-size: var(--text-sm); }

/* ---- FAQ (native details/summary: keyboard + screen reader ready) ---- */
.faq { display: grid; gap: var(--space-3); }
.faq details {
  background: var(--color-space-card); border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-card);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.faq details[open] { border-color: rgba(93, 202, 165, 0.45); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 64px; padding: var(--space-4) var(--space-5);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-h4); line-height: var(--leading-snug);
  cursor: pointer; list-style: none; border-radius: var(--radius-card);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  border-right: 2px solid var(--color-teal); border-bottom: 2px solid var(--color-teal);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq .faq__body { padding: 0 var(--space-5) var(--space-5); color: var(--color-text-dim); }
.faq .faq__body p + p { margin-top: var(--space-3); }

/* Placeholder for undecided facts: honest, visible, easy to find */
.tbd {
  display: inline-block; padding: 0 var(--space-2);
  border: 1px dashed var(--color-amber); border-radius: 6px;
  color: var(--color-amber); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.8;
}

/* ---- Skip link ---- */
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-button);
  background: var(--color-amber); color: var(--color-on-amber); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }

/* ---- Social icon link ---- */
.social-link {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--color-line-soft); color: var(--color-text);
}
.social-link svg { width: 20px; height: 20px; }
@media (hover: hover) { .social-link[href]:hover { border-color: var(--color-teal); color: var(--color-teal); } }