/* ==========================================================================
   Framework Card — three presentation styles for FrameworkElement.
   Driven by Elements::FrameworkElement#presentation_style.
   Tokenized throughout; the few raw px remaining are noted inline as
   intrinsic geometry (dot sizes, hairlines) with no DS token at that scale.
   ========================================================================== */

/* Shared container token reset (used as the outer wrapper for each style).
   --surface-base (pure #ffffff) intentionally instead of --surface-raised
   (theme-tinted brand-50 wash) — matches the approved VC mockup which had
   pure white card surfaces. */
.fc {
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

/* --- Style 1: Stepped Indent ---------------------------------------------- */
.fc-stepped__row { position: relative; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); }
.fc-stepped__row + .fc-stepped__row { margin-top: var(--space-2); }
.fc-stepped__row--lvl1 { margin-left: 0; }
.fc-stepped__row--lvl2 { margin-left: var(--space-4); }
.fc-stepped__row--lvl3 { margin-left: var(--space-8); }
.fc-stepped__row--current { background: var(--accent-subtle); border: 1px solid var(--accent-muted); }
.fc-stepped__kind {
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: var(--space-0-5);
}
.fc-stepped__row--current .fc-stepped__kind { color: var(--accent-hover); }
.fc-stepped__title {
  font-family: var(--font-display); font-size: var(--text-base);
  font-weight: var(--weight-semibold); color: var(--text-primary);
  line-height: var(--leading-snug);
  display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap;
}
.fc-stepped__num {
  font-family: var(--font-mono); font-size: var(--text-xs);
  font-weight: var(--weight-medium); color: var(--text-tertiary);
}
.fc-stepped__row--current .fc-stepped__num { color: var(--accent-hover); }
.fc-stepped__abbr {
  font-family: var(--font-mono); font-size: var(--text-xs);
  padding: var(--space-px) var(--space-2);
  background: var(--surface-base); border: 1px solid var(--accent-muted);
  border-radius: var(--radius-sm); color: var(--accent-hover);
  letter-spacing: var(--tracking-wider);
}
.fc-stepped__desc {
  font-family: var(--font-display); font-size: var(--text-sm);
  color: var(--text-secondary); line-height: var(--leading-relaxed);
  margin-top: var(--space-1);
}

/* --- Style 2: Path Chain + Editorial Detail ------------------------------- */
.fc-path-chain__chain {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1);
  font-family: var(--font-display); font-size: var(--text-sm);
  color: var(--text-secondary); line-height: var(--leading-tight);
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle);
}
.fc-path-chain__pill {
  display: inline-flex; align-items: baseline; gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  background: var(--surface-sunken); color: var(--text-secondary);
  font-weight: var(--weight-medium);
}
.fc-path-chain__num {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.fc-path-chain__pill--current {
  background: var(--accent-primary); color: var(--surface-base);
}
.fc-path-chain__pill--current .fc-path-chain__num {
  color: var(--surface-base); opacity: 0.75;
}
.fc-path-chain__chevron {
  color: var(--text-tertiary); font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.fc-path-chain__detail { padding-top: var(--space-4); }
.fc-path-chain__kind {
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: var(--space-2);
}
.fc-path-chain__name {
  font-family: var(--font-serif); font-variation-settings: 'opsz' 28;
  font-size: var(--text-2xl); font-weight: var(--weight-semibold);
  color: var(--text-primary); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap;
}
.fc-path-chain__abbr {
  font-family: var(--font-mono); font-size: var(--text-xs);
  padding: var(--space-0-5) var(--space-2);
  background: var(--accent-subtle); color: var(--accent-hover);
  border-radius: var(--radius-sm);
  letter-spacing: var(--tracking-wider); font-weight: var(--weight-medium);
}
.fc-path-chain__desc {
  font-family: var(--font-display); font-size: var(--text-sm);
  color: var(--text-secondary); line-height: var(--leading-relaxed);
  margin-top: var(--space-3);
}

/* --- Style 3: Editorial Spine --------------------------------------------- */
.fc-spine__inner { position: relative; padding-left: var(--space-6); }
.fc-spine__inner::before {
  content: "";
  position: absolute;
  /* 7px centers the spine on the 15px dot's vertical axis — no DS token at this scale. */
  left: 7px;
  top: var(--space-1); bottom: var(--space-1);
  width: var(--space-px); background: var(--border-default);
}
.fc-spine__node { position: relative; padding-bottom: var(--space-5); }
.fc-spine__node:last-child { padding-bottom: 0; }
.fc-spine__dot {
  position: absolute;
  left: calc(var(--space-6) * -1);
  top: var(--space-0-5);
  /* Dot geometry: 15px inactive / 19px active. Intrinsic to the design;
     no DS token exists at the 15px / 19px scale. */
  width: 15px; height: 15px;
  border-radius: var(--radius-full);
  background: var(--surface-base);
  /* 1.5px hairline-plus for the inactive dot border. */
  border: 1.5px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
}
.fc-spine__node--current .fc-spine__dot {
  background: var(--accent-primary); border-color: var(--accent-primary);
  width: 19px; height: 19px;
  top: 0;
  left: calc(var(--space-6) * -1 - var(--space-0-5));
  box-shadow: 0 0 0 var(--space-1) var(--accent-subtle);
}
.fc-spine__num {
  font-family: var(--font-mono);
  /* 10px — smaller than --text-xs (12px) so the numeral fits the 15px dot.
     No DS token exists below --text-xs. */
  font-size: 0.625rem;
  font-weight: var(--weight-medium); color: var(--text-secondary);
  line-height: 1;
}
.fc-spine__node--current .fc-spine__num { color: var(--surface-base); }
.fc-spine__kind {
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: var(--space-1);
}
.fc-spine__name {
  font-family: var(--font-display); font-size: var(--text-base);
  font-weight: var(--weight-semibold); color: var(--text-primary);
  line-height: var(--leading-snug);
  display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap;
}
.fc-spine__node--current .fc-spine__name {
  font-family: var(--font-serif); font-variation-settings: 'opsz' 24;
  font-size: var(--text-xl); letter-spacing: var(--tracking-tight);
}
.fc-spine__abbr {
  font-family: var(--font-mono); font-size: var(--text-xs);
  padding: var(--space-px) var(--space-2);
  background: var(--accent-subtle); color: var(--accent-hover);
  border-radius: var(--radius-sm);
  letter-spacing: var(--tracking-wider); font-weight: var(--weight-medium);
}
.fc-spine__desc {
  font-family: var(--font-display); font-size: var(--text-sm);
  color: var(--text-secondary); line-height: var(--leading-relaxed);
  margin-top: var(--space-2);
}

/* Framework surfaces follow the soul card radius. */
.fc-path-chain, .fc-spine, .fc-stepped { border-radius: var(--soul-radius-card, 12px); }