/* ============================================================================
   COMPONENTS — Built on top of tokens.css
   Token-based, no magic values.
   ============================================================================ */

/* ─── Tabs (Alpine-powered) ────────────────────────────────────────────── */
.tabs {
  border-bottom: 1px solid var(--border-1);
  display: flex;
  gap: var(--s-1);
  margin-bottom: var(--s-6);
}
.tab {
  padding: var(--s-3) var(--s-4);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  color: var(--text-3);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: -1px;
}
.tab:hover { color: var(--text-1); }
.tab.is-active {
  color: var(--text-0);
  border-bottom-color: var(--accent);
}
.tab .tab-count {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  padding: 1px 6px;
  border-radius: var(--r-1);
  background: var(--bg-2);
  color: var(--text-2);
}
.tab.is-active .tab-count {
  background: var(--accent-faint);
  color: var(--accent);
}


/* ─── Slide gallery ────────────────────────────────────────────────────── */
.slide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-3);
}
.slide-grid.dense { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.slide-grid.large { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.slide-tile {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-4);
  overflow: hidden;
  cursor: zoom-in;
  transition: all var(--dur-fast) var(--ease);
  text-align: left;
  padding: 0;
  font-family: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.slide-tile:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
}
.slide-tile-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #fff;
  overflow: hidden;
}
.slide-tile-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.slide-tile-page {
  position: absolute;
  bottom: var(--s-2);
  left: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  background: rgba(10, 10, 11, 0.85);
  color: var(--text-1);
  padding: 2px var(--s-2);
  border-radius: var(--r-1);
  backdrop-filter: blur(4px);
}
.slide-tile-meta {
  padding: var(--s-3);
  border-top: 1px solid var(--border-1);
  background: var(--bg-1);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-height: 64px;
}
.slide-tile-type {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-snug);
  color: var(--accent);
  font-weight: var(--w-medium);
}
.slide-tile-title {
  font-size: var(--t-sm);
  color: var(--text-1);
  line-height: var(--lh-snug);
  font-weight: var(--w-medium);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}


/* ─── Slide lightbox (Alpine modal) ────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(8, 8, 10, 0.96);
  backdrop-filter: blur(12px);
  display: grid;
  grid-template-columns: 1fr 380px;
}
@media (max-width: 980px) {
  .lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
}
.lightbox-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-12);
  position: relative;
  overflow: hidden;
}
.lightbox-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #fff;
  border-radius: var(--r-4);
  box-shadow: var(--shadow-4);
}
.lightbox-side {
  background: var(--bg-1);
  border-left: 1px solid var(--border-1);
  padding: var(--s-8) var(--s-6);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
@media (max-width: 980px) {
  .lightbox-side { border-left: 0; border-top: 1px solid var(--border-1); max-height: 40vh; }
}
.lightbox-meta-row {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.lightbox-title {
  font-family: var(--font-serif);
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  color: var(--text-0);
}
.lightbox-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.lightbox-block-label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-3);
}
.lightbox-callout {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-md);
  line-height: var(--lh-relaxed);
  color: var(--text-1);
  padding: var(--s-4);
  border-left: 2px solid var(--accent);
  background: var(--accent-faint);
  border-radius: 0 var(--r-3) var(--r-3) 0;
}
.lightbox-quote {
  font-family: var(--font-serif);
  font-size: var(--t-base);
  line-height: var(--lh-relaxed);
  color: var(--text-2);
  padding-left: var(--s-4);
  border-left: 2px solid var(--border-2);
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  z-index: 1;
  font-size: 24px;
  font-weight: var(--w-medium);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.lightbox-nav:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-50%) scale(1.05);
}
.lightbox-nav:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.lightbox-nav.prev { left: var(--s-4); }
.lightbox-nav.next { right: var(--s-4); }
.lightbox-close {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  color: var(--text-1);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 20px;
  z-index: 1;
}


/* ─── Mode toggle (internal vs public) ─────────────────────────────────── */
.mode-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  padding: 2px;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}
.mode-toggle-btn {
  background: transparent;
  border: none;
  padding: var(--s-2) var(--s-3);
  color: var(--text-3);
  cursor: pointer;
  border-radius: var(--r-2);
  transition: all var(--dur-fast) var(--ease);
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.mode-toggle-btn.is-active {
  background: var(--accent);
  color: #140804;
  font-weight: var(--w-semi);
}
.mode-toggle-locked {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  color: var(--text-3);
}

/* ─── Firm profile (activist vs short-seller side-by-side) ────────────── */
.firm-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-1);
  border-radius: var(--r-4);
  overflow: hidden;
  box-shadow: 0 0 0 var(--hairline) var(--border-1);
}
@media (max-width: 700px) { .firm-profile-grid { grid-template-columns: 1fr; } }
.firm-profile-col {
  padding: 20px 22px;
  background: var(--bg-0);
}
.firm-profile-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  box-shadow: 0 var(--hairline) 0 var(--border-1);
}
.firm-profile-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  font-size: 13px;
  color: var(--text-2);
}
.firm-profile-row strong {
  color: var(--text-0);
  font-weight: var(--w-semi);
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  .mode-toggle-locked:hover {
    background: var(--bg-2);
    color: var(--accent);
  }
}
.mode-banner {
  background: rgba(217, 119, 87, 0.06);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-3);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-sm);
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.mode-banner.public { color: var(--text-2); }


/* ─── Stat tiles — unified borderless style (matches .hero-stats / .stat) ──
   Outer container uses the hairline-grid pattern (.hero-stats or .grid-4 with
   stat-tiles). Each tile is borderless and filled with page surface; the 1px
   separators come from the grid gap + container background trick. */
.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  background: var(--bg-0);
  border: 0;
  border-radius: 0;
  transition: background-color var(--dur-fast) ease;
}
@media (hover: hover) {
  .stat-tile:hover { background: var(--bg-1); }
}
.stat-tile-num,
.stat-tile .stat-value {
  display: block;
  font-family: var(--font-serif);
  font-size: 38px;
  line-height: 1;
  color: var(--text-0);
  font-weight: var(--w-normal);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
  order: 1;
}
.stat-tile-label,
.stat-tile .stat-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  order: 0;
}
.stat-tile .stat-hint {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-3);
  margin-top: 8px;
  line-height: 1.45;
  order: 2;
}
.stat-tile-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--success);
}
.stat-tile-delta.down { color: var(--danger); }

/* Hairline-grid container for .stat-tile rows (matches .hero-stats).
   Applied via `.stats-band` class in templates. */
.stats-band {
  display: grid;
  gap: var(--hairline);
  background: var(--border-1);
  box-shadow: inset 0 0 0 var(--hairline) var(--border-1);
  border-radius: var(--r-4);
  margin-bottom: 32px;
  overflow: hidden;
}
.stats-band.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats-band.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats-band.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-band.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .stats-band.cols-4,
  .stats-band.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .stats-band { grid-template-columns: 1fr !important; }
}


/* ─── Chart card ───────────────────────────────────────────────────────── */
.card-chart {
  padding: var(--s-6);
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-4);
}
.card-chart-head {
  margin-bottom: var(--s-5);
}
.card-chart-head h2 {
  margin: 0 0 var(--s-2);
}
.chart-canvas {
  position: relative;
  width: 100%;
}

/* ─── Editorial typography helpers ─────────────────────────────────────── */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--accent);
}
.t-lead {
  font-family: var(--font-sans);
  font-size: var(--t-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-2);
  font-weight: var(--w-light);
}


/* ─── Keyboard hint ────────────────────────────────────────────────────── */
.kbd {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  padding: 2px 6px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-bottom-width: 2px;
  border-radius: var(--r-1);
  color: var(--text-2);
  margin: 0 2px;
}


/* ─── Slide type badge ─────────────────────────────────────────────────── */
.slide-type-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-snug);
  padding: 3px var(--s-2);
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-1);
  color: var(--text-2);
}
.slide-type-badge.peer_gap { color: var(--info); border-color: rgba(147, 197, 253, 0.25); background: rgba(147, 197, 253, 0.08); }
.slide-type-badge.sop_buildup { color: var(--success); border-color: rgba(110, 231, 183, 0.25); background: rgba(110, 231, 183, 0.08); }
.slide-type-badge.villain_critique { color: var(--danger); border-color: rgba(248, 113, 113, 0.25); background: rgba(248, 113, 113, 0.08); }
.slide-type-badge.ceo_quote { color: var(--warning); border-color: rgba(251, 191, 36, 0.25); background: rgba(251, 191, 36, 0.08); }
.slide-type-badge.cover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-faint); }
.slide-type-badge.thesis_headline { color: var(--accent); border-color: var(--accent-line); background: var(--accent-faint); }
.slide-type-badge.demand_list { color: #C4B5FD; border-color: rgba(196, 181, 253, 0.25); background: rgba(196, 181, 253, 0.08); }


/* ─── Distribution bar (mini visualization) ────────────────────────────── */
.dist-bar {
  display: grid;
  grid-template-columns: 140px 1fr 60px;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2);
  transition: background var(--dur-fast) var(--ease);
}
.dist-bar:hover { background: var(--bg-2); }
.dist-bar-label {
  font-size: var(--t-sm);
  color: var(--text-2);
  font-weight: var(--w-medium);
}
.dist-bar-track {
  height: 6px;
  background: var(--border-1);
  border-radius: var(--r-1);
  overflow: hidden;
  position: relative;
}
.dist-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-1);
  transition: width var(--dur-base) var(--ease);
}
.dist-bar-count {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-3);
  text-align: right;
}


/* ─── Phrase card ──────────────────────────────────────────────────────── */
.phrase-card {
  padding: var(--s-5);
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.phrase-card-text {
  font-family: var(--font-serif);
  font-size: var(--t-md);
  line-height: var(--lh-relaxed);
  color: var(--text-1);
  font-style: italic;
}
.phrase-card-attr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-xs);
  color: var(--text-3);
}


/* ─── Empty state ──────────────────────────────────────────────────────── */
.empty {
  padding: var(--s-16) var(--s-6);
  text-align: center;
  color: var(--text-3);
}
.empty-title {
  font-family: var(--font-serif);
  font-size: var(--t-xl);
  color: var(--text-2);
  margin-bottom: var(--s-2);
}


/* ─── Phrase library filters ───────────────────────────────────────────── */
.phrase-filter {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-4);
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
}
@media (max-width: 900px) {
  .phrase-filter { grid-template-columns: 1fr; }
}
.phrase-filter-search,
.phrase-filter-select {
  background: var(--bg-0);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  color: var(--text-0);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  padding: var(--s-3) var(--s-4);
  outline: none;
  transition: border-color var(--motion-fast) var(--ease);
}
.phrase-filter-search:focus,
.phrase-filter-select:focus {
  border-color: var(--accent);
}
.phrase-filter-tabs {
  display: inline-flex;
  gap: var(--s-1);
  padding: var(--s-1);
  background: var(--bg-0);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
}
.phrase-filter-tab {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-3);
  text-decoration: none;
  transition: all var(--motion-fast) var(--ease);
}
.phrase-filter-tab:hover { color: var(--text-1); }
.phrase-filter-tab.is-active {
  background: var(--accent);
  color: var(--bg-0);
}
.btn-primary {
  background: var(--accent);
  color: var(--bg-0);
  border: 0;
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-5);
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--t-sm);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease);
}
.btn-primary:hover { background: var(--accent-hover); }


/* ─── Phrase grid ──────────────────────────────────────────────────────── */
.phrase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--s-4);
}
.phrase-card-kind {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  margin-bottom: var(--s-3);
}


/* ─── Method steps (numbered narrative) ────────────────────────────────── */
.method-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.method-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--border-1);
}
.method-step:last-child { border-bottom: 0; }
.method-step-num {
  font-family: var(--font-serif);
  font-size: var(--t-4xl);
  color: var(--accent);
  line-height: 1;
  font-feature-settings: "tnum";
}
.method-step-body h3 {
  margin: 0 0 var(--s-3);
  font-family: var(--font-serif);
  font-size: var(--t-2xl);
  color: var(--text-0);
  font-weight: var(--w-normal);
}

/* ─── Module cards (editorial linkouts) ────────────────────────────────── */
.card-module {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  text-decoration: none;
  background: var(--bg-0);
  border: 1px solid var(--border-1);
  border-radius: var(--r-4);
  transition: all var(--motion-fast) var(--ease);
  min-height: 200px;
}
.card-module:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.card-module-icon {
  font-size: var(--t-3xl);
  color: var(--accent);
  line-height: 1;
}
.card-module h3 {
  margin: 0;
  color: var(--text-0);
  font-family: var(--font-serif);
  font-weight: var(--w-normal);
}
.card-module-cta {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent);
}

/* ─── Install block ────────────────────────────────────────────────────── */
.install-tab {
  padding: var(--s-5);
  background: var(--bg-0);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.install-label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-3);
}
.install-block {
  margin: 0;
  padding: var(--s-4);
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--text-0);
  overflow-x: auto;
  line-height: var(--lh-relaxed);
}
.use-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
@media (max-width: 800px) { .use-list { grid-template-columns: 1fr; } }
.use-list li {
  padding: var(--s-4);
  background: var(--bg-0);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: var(--t-base);
}


/* ─── Deck composition block ───────────────────────────────────────────── */
.composition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--s-3);
  padding: var(--s-4) 0;
}
.composition-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-4);
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
  text-decoration: none;
  color: inherit;
  transition: all var(--motion-fast) var(--ease);
}
a.composition-stat:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.composition-num {
  font-family: var(--font-serif);
  font-size: var(--t-3xl);
  line-height: 1;
  color: var(--text-0);
  font-feature-settings: "tnum";
}
.composition-label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-3);
}
.chart-breakdown {
  margin-top: var(--s-4);
  padding: var(--s-4);
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
}
.chart-breakdown-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.chart-breakdown-item {
  padding: var(--s-1) var(--s-3);
  background: var(--bg-2);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-1);
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color var(--motion-fast) var(--ease);
}
a.chart-breakdown-item:hover { border-color: var(--accent); color: var(--accent); }
.chart-breakdown-item strong {
  color: var(--accent);
  margin-right: var(--s-1);
}


/* ─── Lightbox extras ──────────────────────────────────────────────────── */
.element-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-top: var(--s-2);
}
.element-chip {
  padding: 2px var(--s-2);
  background: var(--bg-2);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-2);
  border: 1px solid var(--border-1);
  text-decoration: none;
  transition: all var(--motion-fast) var(--ease);
}
.element-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.raw-toggle {
  width: 100%;
  text-align: left;
  padding: var(--s-2) 0;
  background: transparent;
  border: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  cursor: pointer;
}
.raw-toggle:hover { color: var(--accent-hover); }
.raw-json {
  margin-top: var(--s-2);
  padding: var(--s-3);
  background: var(--bg-0);
  border: 1px solid var(--border-1);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-2);
  white-space: pre-wrap;
  max-height: 300px;
  overflow: auto;
  line-height: var(--lh-relaxed);
}


/* ─── Charts page new components ───────────────────────────────────────── */
.finding-card {
  padding: var(--s-5);
  background: var(--bg-0);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  border-left: 3px solid var(--accent);
}
.finding-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border-1);
}
.finding-row:last-child { border-bottom: 0; }
.finding-row-left {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.semantic-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--bg-0);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
}
.semantic-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border-1);
}
.semantic-desc {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-2);
  margin: 0;
}
.semantic-words {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.semantic-words li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--s-1) 0;
  border-bottom: 1px dashed var(--border-1);
}
.semantic-words li:last-child { border-bottom: 0; }
.semantic-word {
  font-family: var(--font-mono);
  color: var(--text-1);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease);
}
.semantic-word:hover { color: var(--accent); }
.semantic-word-n {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-3);
}

.glossary {
  padding: var(--s-8) 0;
}
.glossary-item {
  padding: var(--s-4);
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-2);
}
.glossary-item strong { color: var(--accent); }


/* ─── Full /glossary page rows ─────────────────────────────────────────── */
.glossary-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--s-3);
}
.glossary-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  text-decoration: none;
  transition: all var(--motion-fast) var(--ease);
}
.glossary-row:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.glossary-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
}
.glossary-label {
  font-family: var(--font-serif);
  font-size: var(--t-lg);
  color: var(--text-0);
}
.glossary-n {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--accent);
  font-feature-settings: "tnum";
}
.glossary-descr {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-2);
}
.glossary-key {
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wider);
  text-transform: lowercase;
}


/* ─── Deck card source link overlay ────────────────────────────────────── */
.deck-card-wrap {
  position: relative;
}
.card-source-link {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  padding: 2px var(--s-2);
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-1);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-decoration: none;
  z-index: 2;
  transition: all var(--motion-fast) var(--ease);
}
.card-source-link:hover {
  background: var(--accent);
  color: var(--bg-0);
  border-color: var(--accent);
}


/* ─── Long tail expandable sections ────────────────────────────────────── */
.long-tail {
  margin-top: var(--s-4);
  padding: var(--s-3);
  background: var(--bg-0);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
}
.long-tail summary {
  cursor: pointer;
  padding: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent);
  list-style: none;
}
.long-tail summary::-webkit-details-marker { display: none; }
.long-tail summary:hover { color: var(--accent-hover); }
.long-tail[open] summary {
  border-bottom: 1px solid var(--border-1);
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-3);
}
.long-tail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-1);
  max-height: 400px;
  overflow-y: auto;
}
.long-tail-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--s-3);
  align-items: baseline;
  padding: var(--s-2) var(--s-3);
  background: var(--bg-1);
  border: 1px solid transparent;
  border-radius: var(--r-1);
  text-decoration: none;
  transition: all var(--motion-fast) var(--ease);
}
.long-tail-item:hover {
  border-color: var(--accent);
  background: var(--bg-2);
}
.long-tail-label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-1);
}
.long-tail-n {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--accent);
  font-weight: var(--w-medium);
}
.long-tail-pct {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-3);
  min-width: 3em;
  text-align: right;
}


/* ─── Facet bar (drill-down chips) ─────────────────────────────────────── */
.facet-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.facet-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-2) var(--s-1) var(--s-3);
  background: var(--bg-1);
  border: 1px solid var(--accent);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
}
.facet-chip-key {
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}
.facet-chip-val {
  color: var(--accent);
  font-weight: var(--w-medium);
}
.facet-chip-x {
  color: var(--text-3);
  text-decoration: none;
  padding: 0 var(--s-1);
  border-radius: 50%;
  transition: all var(--motion-fast) var(--ease);
}
.facet-chip-x:hover {
  background: var(--accent);
  color: var(--bg-0);
}


/* ─── Insight tables + co-occurrence heatmap ──────────────────────────── */
.insight-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-4) 0;
}
.insight-table th,
.insight-table td {
  padding: var(--s-2) var(--s-3);
  text-align: left;
  border-bottom: 1px solid var(--border-1);
}
.insight-table th {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: var(--w-normal);
}
.insight-table td { color: var(--text-1); font-size: var(--t-sm); }
.insight-table .num { text-align: right; font-family: var(--font-mono); font-feature-settings: "tnum"; }
.insight-table tr:hover td { background: var(--bg-1); }

.cooc-wrap {
  overflow-x: auto;
  margin: var(--s-4) 0;
}
.cooc-table {
  border-collapse: collapse;
  margin: 0 auto;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
}
.cooc-head {
  padding: 0 var(--s-1);
  color: var(--text-1);
  font-weight: var(--w-normal);
  text-transform: lowercase;
  letter-spacing: normal;
  min-width: 62px;
  height: 120px;
  vertical-align: bottom;
  position: relative;
}
.cooc-head span {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform-origin: left bottom;
  transform: translateX(0) rotate(-45deg);
  white-space: nowrap;
  font-size: var(--t-xs);
  font-family: var(--font-sans);
}
.cooc-row-head {
  padding: var(--s-2);
  text-align: right;
  color: var(--text-2);
  font-weight: var(--w-normal);
  text-transform: lowercase;
  border-right: 1px solid var(--border-1);
  white-space: nowrap;
  font-size: var(--t-xs);
}
.cooc-cell {
  padding: 0;
  border: 1px solid var(--bg-0);
  text-align: center;
  min-width: 60px;
  height: 38px;
  color: var(--text-0);
}
.cooc-cell.self {
  background: var(--bg-2);
  color: var(--text-3);
}
.cooc-link {
  display: block;
  padding: var(--s-2);
  color: inherit;
  text-decoration: none;
  font-weight: var(--w-medium);
}

/* ─── Cooc selector chips (Alpine) ─────────────────────────────────────── */
.cooc-selector {
  padding: var(--s-4);
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
  margin-top: var(--s-4);
}
.cooc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.cooc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-3);
  background: var(--bg-0);
  border: 1px solid var(--border-2);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease);
  user-select: none;
}
.cooc-chip input[type="checkbox"] { display: none; }
.cooc-chip:hover { border-color: var(--text-3); color: var(--text-1); }
.cooc-chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-0);
}
.cooc-chip.is-on .dim { color: rgba(8, 8, 10, 0.6); }
.cooc-link:hover {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}


/* ─── Slides explorer: tile hover preview + company link ───────────────── */
.slide-tile {
  position: relative;
}
.slide-tile-deck-link {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease);
  cursor: pointer;
  position: relative;
  z-index: 3;
}
.slide-tile-deck-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.slide-preview {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%) translateY(4px);
  width: 360px;
  max-height: 400px;
  overflow-y: auto;
  padding: var(--s-4);
  background: var(--bg-1);
  border: 1px solid var(--accent);
  border-radius: var(--r-3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-fast) var(--ease),
              transform var(--motion-fast) var(--ease),
              visibility 0s linear var(--motion-fast);
  z-index: 50;
  pointer-events: none;
}
.slide-tile:hover .slide-preview {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity var(--motion-fast) var(--ease),
              transform var(--motion-fast) var(--ease),
              visibility 0s;
}
.slide-preview-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--border-1);
}
.slide-preview-row:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.slide-preview-label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent);
}
.slide-preview-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-1);
}
.slide-preview-text.italic { font-style: italic; }
.slide-preview-text.mono { font-family: var(--font-mono); color: var(--text-0); }

/* Hide preview on touch — hover is unreliable */
@media (hover: none) { .slide-preview { display: none; } }

/* ─── Duplicate review page ────────────────────────────────────────────── */
.dup-group {
  margin-bottom: var(--s-6);
  padding: var(--s-5);
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
}
.dup-group[data-tier="exact"] { border-left: 3px solid var(--accent); }
.dup-group[data-tier="near"] { border-left: 3px solid var(--info); }
.dup-group[data-tier="probable"] { border-left: 3px solid var(--warning); }
.dup-group[data-tier="campaign"] { border-left: 3px solid var(--info); opacity: 0.85; }
.dup-group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border-1);
  margin-bottom: var(--s-4);
}
.dup-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-3);
}
.dup-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--bg-0);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
  transition: opacity var(--motion-fast) var(--ease);
}
.dup-card.deleted {
  opacity: 0.4;
  text-decoration: line-through;
}
.dup-card-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.dup-card-target {
  font-family: var(--font-serif);
  font-size: var(--t-lg);
  color: var(--text-0);
  text-decoration: none;
}
.dup-card-target:hover { color: var(--accent); }
.dup-card-firm { font-size: var(--t-xs); }
.dup-card-body { flex: 1; }
.dup-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-3);
  padding: var(--s-2) 0;
  border-top: 1px dashed var(--border-1);
  border-bottom: 1px dashed var(--border-1);
  margin: var(--s-2) 0;
}
.dup-card-del {
  padding: var(--s-2);
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: var(--r-1);
  color: var(--danger);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease);
}
.dup-card-del:hover {
  background: var(--danger);
  color: var(--bg-0);
  border-color: var(--danger);
}
.dup-card-deleted {
  padding: var(--s-2);
  text-align: center;
  color: var(--success);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}


/* ─── Campaigns index ──────────────────────────────────────────────────── */
.campaign-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--s-3);
}
.campaign-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  text-decoration: none;
  transition: all var(--motion-fast) var(--ease);
}
.campaign-row:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.campaign-row-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}
.campaign-n {
  font-family: var(--font-serif);
  font-size: var(--t-3xl);
  color: var(--accent);
  min-width: 2ch;
  line-height: 1;
}
.campaign-row-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.campaign-target {
  font-family: var(--font-serif);
  font-size: var(--t-lg);
  color: var(--text-0);
}
.campaign-ticker {
  color: var(--text-3);
  font-size: var(--t-xs);
}
.campaign-row-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
}
.campaign-firm {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-2);
}
.campaign-phases {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}
.campaign-row-compact {
  flex-direction: row;
  align-items: baseline;
  padding: var(--s-2) var(--s-3);
}
.campaign-row-compact .campaign-target { font-size: var(--t-sm); font-family: var(--font-sans); }

/* ─── Phase pills ──────────────────────────────────────────────────────── */
.phase-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s-2);
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wider);
  text-transform: lowercase;
  color: var(--text-2);
}
.phase-pill.phase-initial_thesis { border-color: var(--accent); color: var(--accent); }
.phase-pill.phase-follow_up      { border-color: var(--info); color: var(--info); }
.phase-pill.phase-proxy_fight    { border-color: var(--danger); color: var(--danger); }
.phase-pill.phase-response       { border-color: var(--warning); color: var(--warning); }
.phase-pill.phase-victory_lap    { border-color: var(--success); color: var(--success); }
.phase-pill.phase-post_mortem    { opacity: 0.7; }

/* ─── Campaign detail timeline ─────────────────────────────────────────── */
.campaign-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.campaign-timeline::before {
  content: '';
  position: absolute;
  left: 160px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-1);
}
@media (max-width: 720px) { .campaign-timeline::before { display: none; } }
.campaign-timeline-item {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--s-5);
  margin-bottom: var(--s-5);
  position: relative;
}
@media (max-width: 720px) {
  .campaign-timeline-item { grid-template-columns: 1fr; gap: var(--s-2); }
}
.campaign-timeline-marker {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  align-items: flex-start;
  position: relative;
}
.campaign-timeline-marker::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg-0);
  z-index: 2;
}
@media (max-width: 720px) { .campaign-timeline-marker::after { display: none; } }
.campaign-timeline-date {
  font-size: var(--t-sm);
  color: var(--text-2);
}
.campaign-timeline-card {
  padding: var(--s-4) var(--s-5);
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
  text-decoration: none;
  transition: all var(--motion-fast) var(--ease);
}
.campaign-timeline-card:hover { border-color: var(--accent); }
.campaign-timeline-card-head {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  align-items: baseline;
}
.campaign-timeline-card-head h3 {
  margin: 0;
  color: var(--text-0);
  font-family: var(--font-serif);
  font-size: var(--t-lg);
  font-weight: var(--w-normal);
}
.campaign-timeline-card-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--border-1);
}


/* ─── Pagination ───────────────────────────────────────────────────────── */
.pagination {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  justify-content: center;
  padding: var(--s-6) 0;
}
.pagination-link {
  padding: var(--s-2) var(--s-4);
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
  color: var(--text-1);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  transition: all var(--motion-fast) var(--ease);
}
.pagination-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.pagination-info {
  font-family: var(--font-mono);
}

/* ─── Skill modules list (on /skill page) ───────────────────────────── */
.skill-modules {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--border-1);
}
.skill-module {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--s-8);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--border-1);
  align-items: baseline;
}
@media (max-width: 720px) {
  .skill-module { grid-template-columns: 1fr; gap: var(--s-2); }
}
.skill-module dt {
  font-family: var(--font-sans);
  font-size: var(--t-md);
  font-weight: var(--w-medium);
  color: var(--text-1);
  letter-spacing: -0.005em;
}
.skill-module dt em {
  color: var(--text-3);
  font-style: italic;
  font-weight: var(--w-normal);
}
.skill-module dt .mono { font-family: var(--font-mono); font-size: 0.92em; }
.skill-module dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-2);
  max-width: var(--max-text);
}

/* ─── Chart caption (visible summary below each /analysis chart) ────── */
.chart-caption {
  margin: var(--s-3) 0 0;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  color: var(--text-3);
  font-style: italic;
  padding-left: var(--s-2);
  border-left: 2px solid var(--border-1);
}

/* ─── Copy-cite button (lightbox) ──────────────────────────────────── */
.lightbox-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.copy-cite-btn {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
  background: transparent;
  border: 1px solid var(--border-1);
  color: var(--text-3);
  padding: 3px var(--s-2);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.copy-cite-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-faint);
}
.copy-cite-btn:active { transform: translateY(1px); }


/* ─── MCP register form (on /skill) ────────────────────────────────────── */
.mcp-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.mcp-form-row {
  display: flex;
  gap: var(--s-2);
  align-items: stretch;
  flex-wrap: wrap;
}
.mcp-input {
  flex: 1 1 240px;
  min-width: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-0);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  color: var(--text-0);
  transition: border-color var(--motion-fast) var(--ease);
}
.mcp-input::placeholder { color: var(--text-3); }
.mcp-input:focus {
  outline: none;
  border-color: var(--accent);
}
.mcp-form .btn-primary:disabled,
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.mcp-success { display: flex; flex-direction: column; gap: var(--s-3); }

.btn-copy {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--bg-0);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-wide);
  color: var(--text-1);
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease),
    transform var(--motion-fast) var(--ease);
}
.btn-copy svg { flex-shrink: 0; }
.btn-copy:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-faint);
}
.btn-copy:active { transform: translateY(1px); }
.btn-copy.is-copied {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-faint);
}

[x-cloak] { display: none !important; }