/* ============================================================
   FYT Components — editorial-warm product surface (v9)
   Companion to colors_and_type.css.
   ============================================================ */

/* ── Buttons ─────────────────────────────────────────────── */
.fyt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  font-family: var(--fyt-font-body);
  font-size: 14px; font-weight: 500; line-height: 1;
  border-radius: var(--fyt-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease;
}
.fyt-btn:active { transform: scale(0.98); }

.fyt-btn-primary   { background: var(--fyt-ink);   color: var(--fyt-paper); }
.fyt-btn-primary:hover { background: #000; }

.fyt-btn-secondary { background: transparent; color: var(--fyt-ink); border-color: var(--fyt-bone-line); }
.fyt-btn-secondary:hover { background: rgba(36,36,36,0.04); }

.fyt-btn-accent    { background: var(--fyt-terra); color: var(--fyt-paper); }
.fyt-btn-accent:hover { background: var(--fyt-terra-deep); }

.fyt-btn-ghost     { background: transparent; color: var(--fyt-ink-55); padding: 0 10px; }
.fyt-btn-ghost:hover { color: var(--fyt-ink); }

.fyt-btn-lg    { height: 52px; font-size: 15px; padding: 0 22px; }
.fyt-btn-sm    { height: 34px; font-size: 13px; padding: 0 14px; }
.fyt-btn-block { width: 100%; }

/* ── Pills / chips ───────────────────────────────────────── */
.fyt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  font-family: var(--fyt-font-body);
  font-size: 12px; font-weight: 500; line-height: 1;
  color: var(--fyt-ink-55);
  border: 1px solid var(--fyt-bone-line);
  border-radius: var(--fyt-radius-pill);
  background: transparent;
  cursor: pointer;
}
.fyt-chip.selected,
.fyt-chip[aria-selected="true"] {
  background: var(--fyt-ink); border-color: var(--fyt-ink); color: var(--fyt-paper);
}

/* Trait chip — tighter, used in profile trait cloud */
.fyt-trait {
  padding: 5px 12px;
  font-size: 12px; font-weight: 500; line-height: 1.2;
  color: var(--fyt-ink);
  border: 1px solid var(--fyt-bone-line);
  border-radius: var(--fyt-radius-pill);
  background: var(--fyt-bone-sheet);
}
.fyt-trait-accent { background: var(--fyt-terra-soft); border-color: transparent; color: var(--fyt-terra-deep); }

/* Badge pill */
.fyt-badge-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: var(--fyt-radius-pill);
  font-family: var(--fyt-font-body);
  font-size: 11px; font-weight: 600; letter-spacing: 0.1px;
}
.fyt-badge-premium { background: var(--fyt-warning-subtle); color: var(--fyt-warning); }
.fyt-badge-new     { background: var(--fyt-success-subtle); color: var(--fyt-success); }
.fyt-badge-info    { background: var(--fyt-terra-soft);     color: var(--fyt-terra-deep); }

/* ── Cards ───────────────────────────────────────────────── */
.fyt-card {
  background: var(--fyt-bone-sheet);
  border: 1px solid var(--fyt-bone-line-soft);
  border-radius: var(--fyt-radius-lg);
  padding: 18px;
}
.fyt-card-elevated {
  background: var(--fyt-bone-sheet);
  border-radius: var(--fyt-radius-lg);
  box-shadow: var(--fyt-shadow-card);
  padding: 18px;
}
.fyt-card-ink {
  background: var(--fyt-stone);
  color: var(--fyt-text-dark);
  border-radius: var(--fyt-radius-lg);
  padding: 18px;
}

/* ── Rail (tinted editorial section, with subtly-irregular corners) — */
.fyt-rail {
  background: var(--fyt-bone-deep);
  border-radius: 40px 36px 44px 38px;
  padding: 40px clamp(24px, 4vw, 56px) 48px;
}

/* ── Test framework credit-card (aspect 1.586:1) ─────────── */
.fyt-test-card {
  position: relative;
  aspect-ratio: 1.586 / 1;
  border-radius: var(--fyt-radius-lg);
  overflow: hidden;
  padding: 14px;
  color: #fff;
  display: flex; flex-direction: column;
  font-family: var(--fyt-font-body);
}
.fyt-test-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.73));
  pointer-events: none;
}
.fyt-test-card .tc-inner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }
.fyt-test-card .tc-top   { display: flex; align-items: center; gap: 6px; }
.fyt-test-card .tc-dot   { width: 6px; height: 6px; border-radius: 50%; }
.fyt-test-card .tc-cat   { font-family: var(--fyt-font-mono); font-size: 9px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.65); }
.fyt-test-card .tc-title { margin-top: auto; font-family: var(--fyt-font-display); font-style: italic; font-size: 22px; font-weight: 400; line-height: 1.1; color: #fff; }
.fyt-test-card .tc-meta  { margin-top: 4px; font-family: var(--fyt-font-mono); font-size: 9px; color: rgba(255,255,255,0.55); letter-spacing: 1px; text-transform: uppercase; }

.fyt-test-card.bigfive    { background: linear-gradient(135deg, var(--fyt-test-bigfive-a),    var(--fyt-test-bigfive-b)); }
.fyt-test-card.disc       { background: linear-gradient(135deg, var(--fyt-test-disc-a),       var(--fyt-test-disc-b)); }
.fyt-test-card.culture    { background: linear-gradient(135deg, var(--fyt-test-culture-a),    var(--fyt-test-culture-b)); }
.fyt-test-card.mbti       { background: linear-gradient(135deg, var(--fyt-test-mbti-a),       var(--fyt-test-mbti-b)); }
.fyt-test-card.enneagram  { background: linear-gradient(135deg, var(--fyt-test-enneagram-a),  var(--fyt-test-enneagram-b)); }
.fyt-test-card.attachment { background: linear-gradient(135deg, var(--fyt-test-attachment-a), var(--fyt-test-attachment-b)); }
.fyt-test-card.default    { background: linear-gradient(135deg, var(--fyt-test-default-a),    var(--fyt-test-default-b)); }

/* ── Tribe hero card ─────────────────────────────────────── */
.fyt-tribe-hero {
  position: relative; overflow: hidden;
  border-radius: var(--fyt-radius-lg);
  height: 160px;
  color: #fff;
}
.fyt-tribe-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.80));
}
.fyt-tribe-hero .th-content { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; }
.fyt-tribe-hero.work   { background: linear-gradient(135deg, var(--fyt-tribe-work-a),   var(--fyt-tribe-work-b)); }
.fyt-tribe-hero.family { background: linear-gradient(135deg, var(--fyt-tribe-family-a), var(--fyt-tribe-family-b)); }
.fyt-tribe-hero.study  { background: linear-gradient(135deg, var(--fyt-tribe-study-a),  var(--fyt-tribe-study-b)); }
.fyt-tribe-hero.social { background: linear-gradient(135deg, var(--fyt-tribe-social-a), var(--fyt-tribe-social-b)); }

/* ── Inputs ─────────────────────────────────────────────── */
.fyt-input {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  font-family: var(--fyt-font-body);
  font-size: 14px;
  color: var(--fyt-ink);
  background: var(--fyt-paper);
  border: 1px solid var(--fyt-bone-line);
  border-radius: var(--fyt-radius-md);
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.fyt-input:focus {
  border-color: var(--fyt-terra);
  box-shadow: 0 0 0 3px var(--fyt-terra-soft);
}
.fyt-input::placeholder { color: var(--fyt-ink-40); }

.fyt-input-label {
  display: block;
  font-family: var(--fyt-font-mono);
  font-size: 10px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--fyt-ink-55);
  margin-bottom: 8px;
}

/* ── Likert pill button ──────────────────────────────────── */
.fyt-likert { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.fyt-likert-btn {
  width: 100%; height: 52px;
  border-radius: var(--fyt-radius-pill);
  background: var(--fyt-bone-sheet);
  border: 1px solid var(--fyt-bone-line);
  font-family: var(--fyt-font-body);
  font-size: 14px; font-weight: 500;
  color: var(--fyt-ink-55);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.fyt-likert-btn.selected {
  background: var(--fyt-ink); border-color: var(--fyt-ink); color: var(--fyt-paper);
}

/* ── Progress bar ────────────────────────────────────────── */
.fyt-progress { height: 3px; background: var(--fyt-bone-line); border-radius: var(--fyt-radius-pill); overflow: hidden; }
.fyt-progress > span { display: block; height: 100%; background: var(--fyt-ink); border-radius: inherit; }

/* ── Divider ─────────────────────────────────────────────── */
.fyt-divider { height: 1px; background: var(--fyt-bone-line-soft); border: 0; margin: 0; }

/* ── Dimension bar (Big Five) ────────────────────────────── */
.fyt-dim-row { display: flex; flex-direction: column; gap: 6px; }
.fyt-dim-row .fyt-dim-top { display: flex; align-items: baseline; justify-content: space-between; }
.fyt-dim-row .fyt-dim-name  { font-family: var(--fyt-font-body); font-size: 13px; font-weight: 600; color: var(--fyt-ink); }
.fyt-dim-row .fyt-dim-score { font-family: var(--fyt-font-mono); font-size: 12px; color: var(--fyt-ink-55); }
.fyt-dim-bar { height: 4px; background: var(--fyt-bone-line); border-radius: var(--fyt-radius-pill); overflow: hidden; }
.fyt-dim-bar > span { display: block; height: 100%; border-radius: inherit; }

/* ── Avatar ──────────────────────────────────────────────── */
.fyt-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fyt-ink), #5A5248);
  color: var(--fyt-paper);
  font-family: var(--fyt-font-display); font-style: italic; font-weight: 400;
}
.fyt-avatar-xs { width: 24px; height: 24px; font-size: 11px; }
.fyt-avatar-sm { width: 32px; height: 32px; font-size: 13px; }
.fyt-avatar-md { width: 48px; height: 48px; font-size: 18px; }
.fyt-avatar-lg { width: 72px; height: 72px; font-size: 26px; }
.fyt-avatar-xl { width: 104px; height: 104px; font-size: 36px; }

/* ── Recommended ring (the one ring in the UI) ─────────── */
.fyt-ring-recommended {
  outline: 2px solid var(--fyt-terra);
  outline-offset: 3px;
  border-radius: inherit;
}

/* ── Device frame helpers ────────────────────────────────── */
.fyt-phone {
  width: 320px; height: 694px;
  background: #000; border-radius: 48px;
  padding: 9px;
  box-shadow: 0 24px 48px -24px rgba(0,0,0,0.28), 0 0 0 1px rgba(0,0,0,0.08);
}
.fyt-phone-inner {
  width: 100%; height: 100%;
  border-radius: 40px; overflow: hidden;
  background: var(--fyt-bone);
  position: relative;
  color: var(--fyt-ink);
}

/* ── Preview-card wrapper (for the spec cards) ─────────── */
.fyt-preview {
  box-sizing: border-box;
  padding: 48px 56px 64px;
  background: var(--fyt-bone);
  color: var(--fyt-ink-soft);
  font-family: var(--fyt-font-body);
  min-height: 100vh;
}
.fyt-preview h1.title {
  font-family: var(--fyt-font-display); font-style: italic;
  font-size: 44px; font-weight: 400; letter-spacing: -0.5px;
  margin: 0 0 8px;
  color: var(--fyt-ink);
}
.fyt-preview p.caption {
  margin: 0 0 36px;
  color: var(--fyt-ink-55);
  font-size: 14px; line-height: 1.6; max-width: 640px;
}
.fyt-preview .section-label {
  font-family: var(--fyt-font-mono);
  font-size: 10px; font-weight: 500; letter-spacing: 2px;
  text-transform: uppercase; color: var(--fyt-ink-55);
  margin: 40px 0 16px;
}
.fyt-preview .section-label:first-of-type { margin-top: 0; }