/* ─────────────────────────────────────────────
   components.css
   Reusable UI components: account type pill,
   chart mode toggle, info tooltip, re-run button.
───────────────────────────────────────────── */

/* ── Account type pill (Roth / Traditional) ── */
.type-pill-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.type-pill-label {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-ink-subtle);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.type-pill {
  display: inline-flex;
  background: rgba(70, 95, 105, 0.08);
  border-radius: 6px;
  padding: 3px;
  gap: 2px;
  align-self: flex-start;
}
.type-opt {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 13px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-ink-subtle);
  transition: background 0.15s, color 0.15s;
  user-select: none;
  white-space: nowrap;
}
.tile-blue  .type-opt.active { background: var(--color-slate);      color: var(--color-cream); }
.tile-teal  .type-opt.active { background: var(--color-slate-soft); color: var(--color-cream); }
.tile-plum  .type-opt.active { background: var(--color-ochre);      color: var(--color-cream); }
.tile-amber .type-opt.active { background: var(--color-terracotta); color: var(--color-cream); }

/* ── View / projection mode toggle ── */
.view-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.view-label {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-ink-faint);
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}
.pill-toggle {
  display: flex;
  background: rgba(70, 95, 105, 0.08);
  border-radius: 6px;
  padding: 3px;
  gap: 2px;
}
.pill-option {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-ink-subtle);
  transition: background 0.15s, color 0.15s;
  user-select: none;
}
.pill-option.active {
  background: var(--color-slate);
  color: var(--color-cream);
}

/* ── Info (ⓘ) button + hover tooltip ── */
.info-wrap { position: relative; display: inline-flex; align-items: center; }

.info-btn {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 0.5px solid var(--color-border);
  background: transparent;
  color: var(--color-ink-faint);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.info-btn:hover { border-color: var(--color-slate); color: var(--color-slate); }

.info-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 290px;
  background: var(--color-ink);
  color: rgba(247, 240, 222, 0.82);
  font-size: 12px;
  line-height: 1.6;
  padding: 13px 15px;
  border-radius: 8px;
  z-index: 200;
  pointer-events: none;
}
.info-tooltip strong { color: var(--color-cream); display: block; margin-bottom: 6px; font-size: 13px; }
.info-tooltip em     { font-style: normal; font-family: monospace; font-size: 11px; color: rgba(247, 240, 222, 0.6); }
.info-wrap:hover .info-tooltip { display: block; }

/* ── Re-run button ── */
.rerun-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 13px;
  border-radius: 6px;
  border: 0.5px solid var(--color-border);
  background: transparent;
  color: var(--color-slate);
  cursor: pointer;
  transition: background 0.15s;
  display: none;
}
.rerun-btn:hover   { background: var(--color-cream-tint); }
.rerun-btn.visible { display: block; }