/* styles/components.css — Buttons, forms, dropdowns, search, toast */

/* ── BUTTONS ── */
.icon-btn { width:32px; height:32px; border-radius:7px; display:flex; align-items:center; justify-content:center; color:var(--text-muted); background:transparent; border:none; cursor:pointer; transition:color var(--transition),background var(--transition); }
.icon-btn:hover  { color:var(--text); background:var(--bg-4); }
.icon-btn.active { color:var(--accent); background:rgba(79,142,247,.12); }
.btn-accent { background:var(--accent); color:#fff; border:none; border-radius:var(--btn-radius); padding:7px 15px; font-size:.83rem; font-weight:500; transition:background var(--transition); display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.btn-accent:hover { background:var(--accent-hover); }
.btn-ghost  { background:transparent; color:var(--text-muted); border:1px solid var(--border); border-radius:var(--btn-radius); padding:7px 15px; font-size:.83rem; font-weight:500; transition:all var(--transition); display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.btn-ghost:hover  { color:var(--text); border-color:var(--border-2); background:var(--bg-4); }
.btn-ghost.small  { padding:5px 11px; font-size:.76rem; }
.btn-primary-lg   { background:var(--accent); color:#fff; border:none; border-radius:calc(var(--btn-radius) + 2px); padding:12px 26px; font-size:.93rem; font-weight:600; transition:background var(--transition),box-shadow var(--transition); display:inline-flex; align-items:center; gap:8px; box-shadow:0 4px 20px var(--accent-glow); cursor:pointer; }
.btn-primary-lg:hover   { background:var(--accent-hover); box-shadow:0 6px 28px var(--accent-glow); }
.btn-primary-lg.full-width { width:100%; justify-content:center; }
.btn-secondary-lg { background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:calc(var(--btn-radius) + 2px); padding:12px 26px; font-size:.93rem; font-weight:500; transition:all var(--transition); display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.btn-secondary-lg:hover { border-color:var(--border-2); background:var(--bg-4); }
.full-width { width:100%; justify-content:center; }
.close-btn { width:24px; height:24px; border-radius:5px; font-size:.95rem; color:var(--text-muted); display:flex; align-items:center; justify-content:center; transition:color .12s,background .12s; cursor:pointer; border:none; background:none; }
.close-btn:hover { color:var(--text); background:var(--bg-4); }

/* Edit mode button */
.edit-mode-btn { display:flex; align-items:center; gap:6px; padding:5px 12px; border-radius:var(--btn-radius); font-size:.76rem; font-weight:600; color:var(--text-muted); background:var(--bg-3); border:1px solid var(--border); cursor:pointer; transition:all var(--transition); white-space:nowrap; position:relative; }
.edit-mode-btn:hover { color:var(--text); border-color:var(--border-2); }
.edit-mode-btn.active { color:var(--accent); background:rgba(79,142,247,.1); border-color:rgba(79,142,247,.4); animation:editGlow 2.5s ease-in-out infinite; }
.edit-pulse { display:none; width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulseDot 1.4s ease-in-out infinite; }
.edit-mode-btn.active .edit-pulse { display:inline-block; }

/* TG button */
.tg-btn { display:flex; align-items:center; gap:5px; padding:5px 12px; border-radius:var(--btn-radius); font-size:.74rem; font-weight:600; color:#a78bfa; background:rgba(139,92,246,.08); border:1px solid rgba(139,92,246,.25); cursor:pointer; transition:all var(--transition); white-space:nowrap; }
.tg-btn:hover  { background:rgba(139,92,246,.15); border-color:rgba(139,92,246,.45); color:#c4b5fd; }
.tg-btn.active { background:rgba(139,92,246,.18); border-color:rgba(139,92,246,.5); animation:tgGlow 3s ease-in-out infinite; }
.btn-tg { background:rgba(139,92,246,.2); color:#c4b5fd; border:1px solid rgba(139,92,246,.4); border-radius:var(--btn-radius); padding:7px 15px; font-size:.83rem; font-weight:600; transition:all var(--transition); display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.btn-tg:hover { background:rgba(139,92,246,.3); border-color:rgba(139,92,246,.6); }

/* Sidebar button */
.sidebar-btn { display:flex; align-items:center; gap:8px; width:100%; padding:6px 9px; border-radius:6px; font-size:.78rem; color:var(--text-muted); transition:color var(--transition),background var(--transition); text-align:left; cursor:pointer; border:none; background:none; }
.sidebar-btn:hover  { color:var(--text); background:var(--bg-4); }
.sidebar-btn.accent { color:var(--accent); }
.sidebar-btn.accent:hover { background:rgba(79,142,247,.1); }

/* ── DROPDOWNS ── */
.lang-selector { position:relative; display:inline-flex; align-items:center; }
.lang-btn { display:flex; align-items:center; gap:4px; padding:4px 9px; border-radius:7px; font-size:.76rem; font-weight:600; color:var(--text-muted); background:transparent; border:1px solid var(--border); cursor:pointer; transition:all var(--transition); height:30px; white-space:nowrap; }
.lang-btn:hover { color:var(--text); background:var(--bg-4); border-color:var(--border-2); }
.dropdown { display:none; position:absolute; top:calc(100% + 5px); right:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); min-width:170px; max-width:calc(100vw - 24px); z-index:600; overflow:hidden; animation:fadeIn .1s ease; }
.dropdown.open { display:block; }
.dropdown button { display:flex; align-items:center; gap:9px; width:100%; padding:9px 13px; font-size:.8rem; color:var(--text-muted); text-align:left; transition:background .12s,color .12s; cursor:pointer; border:none; background:none; }
.dropdown button:hover  { background:var(--bg-4); color:var(--text); }
.dropdown button.active { color:var(--accent); font-weight:600; }
.dropdown button strong { display:block; font-size:.8rem; color:var(--text); }
.dropdown button small  { font-size:.7rem; color:var(--text-muted); margin-top:1px; display:block; }
.gen-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.gen-dot.alpha     { background:linear-gradient(135deg,#4f8ef7,#8b5cf6); }
.gen-dot.z         { background:linear-gradient(135deg,#c9a05a,#7a6248); }
.gen-dot.millennial{ background:linear-gradient(135deg,#3b82f6,#1e40af); }

/* ── SEARCH ── */
.search-wrap { display:flex; align-items:center; gap:7px; background:var(--bg-3); border:1px solid var(--border); border-radius:7px; padding:0 11px; height:32px; }
.search-wrap svg { color:var(--text-faint); flex-shrink:0; }
.search-wrap input { flex:1; background:none; border:none; outline:none; font-size:.8rem; color:var(--text); }
.search-wrap input::placeholder { color:var(--text-faint); }
.search-results { position:fixed; top:58px; left:50%; transform:translateX(-50%); width:300px; z-index:150; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden; }
.search-result-item { display:flex; align-items:center; gap:11px; padding:9px 13px; cursor:pointer; transition:background .12s; font-size:.8rem; }
.search-result-item:hover { background:var(--bg-4); }
.sr-name { font-weight:500; }
.sr-sub  { font-size:.7rem; color:var(--text-muted); }

/* ── FORMS ── */
.form-group { margin-bottom:13px; }
.form-group label { display:block; font-size:.76rem; font-weight:500; color:var(--text-muted); margin-bottom:5px; }
.req { color:var(--danger); }
.form-group input,.form-group select,.form-group textarea { width:100%; background:var(--bg-3); border:1px solid var(--border); border-radius:7px; padding:8px 11px; font-size:.83rem; color:var(--text); transition:border-color .15s,box-shadow .15s; outline:none; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.form-group select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%238899bb' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; padding-right:30px; }
.form-group textarea { resize:vertical; min-height:66px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.form-error { background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.3); border-radius:7px; padding:9px 13px; color:var(--danger); font-size:.8rem; margin-top:10px; }
.checkbox-group label { display:flex; align-items:center; gap:8px; cursor:pointer; }
.checkbox-group input[type="checkbox"] { width:15px; height:15px; cursor:pointer; accent-color:var(--accent); }
.deceased-row { align-items:end; }

/* ── TOAST ── */
.toast-container { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:1000; display:flex; flex-direction:column; gap:7px; align-items:center; pointer-events:none; }
.toast { background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:9px 16px; font-size:.8rem; color:var(--text); box-shadow:var(--shadow-lg); animation:toastIn .22s ease forwards; pointer-events:all; white-space:nowrap; display:flex; align-items:center; gap:7px; }
.toast.success { border-color:rgba(52,211,153,.4); }
.toast.error   { border-color:rgba(248,113,113,.4); }
.toast.warning { border-color:rgba(251,191,36,.4); }
.toast.hide    { animation:toastOut .18s ease forwards; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .sidebar { display:none; }
  .home-nav { padding:14px 18px; }
  .feature-grid { grid-template-columns:1fr 1fr; }
  .panel-card { padding:22px 18px; }
  .tg-btn span { display:none; }
}
@media (max-width: 640px) {
  .bottom-nav { display:flex; }
  #screen-tree.active { padding-bottom:0; }
  .graph-layout { height:calc(100vh - var(--topbar-h) - var(--bottom-nav-h)); }
  .topbar-center { display:none; }
  .tree-title { max-width:120px; }
  .feature-grid { grid-template-columns:1fr; }
  .hero-cta { flex-direction:column; align-items:center; }
  .inspector { width:100%; position:absolute; bottom:0; border-left:none; border-top:1px solid var(--border); max-height:58vh; }
  .zoom-controls { bottom:70px; }
  .slide-panel { width:100%; max-width:none; }
  .tg-sidebar { display:none; }
  .tg-stats-grid { grid-template-columns:repeat(2,1fr); }
  .topbar-sep { display:none; }
  .edit-mode-btn span:not(.edit-pulse) { display:none; }
}

/* ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ──
   PER-THEME COMPONENT UPGRADES
   Applied on top of base component styles.
   ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── */

/* ── Alpha: floating dropdowns with glass ─────────────────────── */

/* ── Alpha: glowing sidebar buttons ──────────────────────────── */

/* ── Alpha: toast with glass ──────────────────────────────────── */

/* ── Alpha: inspector actions ─────────────────────────────────── */

/* ── Gen Z: editorial dropdowns ───────────────────────────────── */

/* ── Gen Z: toast editorial ───────────────────────────────────── */

/* ── Millennial: compact dropdowns ───────────────────────────── */

/* ── Millennial: compact icon buttons ────────────────────────── */

/* ── Millennial: compact close button ────────────────────────── */

/* ── Millennial: progress/stat bars ──────────────────────────── */

/* ── Responsive adjustments per theme ────────────────────────── */
@media (max-width: 640px) {
}

/* TG empty state container */
.tg-empty-state {
  text-align: center;
  padding: 32px 20px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
}
@media (max-width: 760px) {
  .tg-private-notice span[data-i18n] { display: none; }
}
@media (max-width: 540px) {
  .tg-private-notice { display: none; }
}

/* ── Multi-Birth Modal (Twins / Triplets) ───────────────────────────── */

.multi-shared-section {
  background: rgba(99,102,241,.06);
  border: 1px solid rgba(99,102,241,.15);
  border-radius: var(--radius);
  padding: 14px 16px 12px;
  margin-bottom: 18px;
}

.multi-section-label {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  opacity: .85;
}

.multi-child-slot {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px 10px;
  margin-bottom: 12px;
  background: rgba(255,255,255,.02);
  transition: border-color .15s;
}

.multi-child-slot:focus-within {
  border-color: rgba(99,102,241,.4);
}

.multi-child-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.multi-child-emoji { font-size: 1.2rem; }

.multi-child-ordinal {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Mobile: stack slots vertically with clear visual separation */
@media (max-width: 540px) {
  .multi-child-slot { padding: 12px; }
}

/* Edit sub-mode switch (Design vs Edit) */
.mode-switch { display:flex; gap:4px; margin-bottom:6px; background:var(--bg-subtle,rgba(127,127,127,.08)); padding:3px; border-radius:8px; }
.mode-switch-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:5px; padding:6px 4px; font-size:.74rem; border:none; background:transparent; color:var(--text-muted); border-radius:6px; cursor:pointer; transition:background .12s,color .12s; }
.mode-switch-btn.active { background:var(--surface,#fff); color:var(--accent,#6366f1); box-shadow:0 1px 2px rgba(0,0,0,.12); font-weight:600; }
.submode-hint { font-size:.68rem; color:var(--text-faint); margin:0 0 8px; line-height:1.35; }

/* Family Timeline Engine (v1) */
.timeline-wrap { padding:4px 2px; }
.tl-head { margin-bottom:12px; }
.timeline { position:relative; padding-left:8px; }
.tl-row { display:grid; grid-template-columns:54px 16px 1fr; align-items:start; gap:8px; padding:6px 0; position:relative; }
.tl-year { font-size:.8rem; font-weight:600; color:var(--text-muted); text-align:right; padding-top:2px; }
.tl-dot { width:11px; height:11px; border-radius:50%; background:var(--accent,#6366f1); margin:5px auto 0; box-shadow:0 0 0 3px var(--surface,#fff); position:relative; z-index:1; }
.timeline::before { content:''; position:absolute; left:67px; top:6px; bottom:6px; width:2px; background:var(--border); }
.tl-events { display:flex; flex-direction:column; gap:4px; }
.tl-event { display:flex; align-items:center; gap:7px; font-size:.8rem; padding:4px 8px; border-radius:6px; background:var(--bg-subtle,rgba(127,127,127,.06)); }
.tl-icon { font-size:.95rem; }
.tl-label { flex:1; }
.tl-type { font-size:.66rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.04em; }

/* GIL-002: overlay highlight ring — ONE shared CSS animation for all highlighted
   nodes instead of a per-node SMIL <animate> (which ran N infinite CPU animations
   and froze large trees). CSS opacity animation is GPU-composited and cheap. */
.overlay-ring { opacity: 0.9; animation: overlayPulse 1.8s ease-in-out infinite; }
@keyframes overlayPulse { 0%,100% { opacity: 0.9; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .overlay-ring { animation: none; opacity: 0.85; } }

/* ══════════════════════════════════════════════════════════════════════════
   BRAND — Family Signals wordmark (Phase 2)
   Text-based by design. To adopt an image logo later, replace .brand-mark's
   <svg> with an <img>; no other rule needs to change.
   ══════════════════════════════════════════════════════════════════════════ */
.brand{
  display:inline-flex; align-items:center; gap:.5rem;
  text-decoration:none; color:inherit; border-radius:8px;
  padding:4px 8px; margin-left:-4px;
  transition:background-color .15s ease, opacity .15s ease;
}
.brand:hover{ background:var(--surface-hover, rgba(127,127,127,.10)); }
.brand:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.brand-mark{ flex:0 0 auto; display:block; }
.brand-word{
  font-family:var(--font-display, Georgia, serif);
  font-size:1.02rem; font-weight:600; letter-spacing:.005em; white-space:nowrap;
}
.brand-word-1{ color:var(--text); }
.brand-word-2{ color:var(--accent); margin-left:.22em; }
.brand-compact .brand-word{ font-size:.92rem; }
/* Small screens: keep the mark, drop the wordmark so navigation keeps its room */
@media (max-width:560px){
  .brand-compact .brand-word{ display:none; }
  .brand{ padding:4px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER (Phase 3)
   ══════════════════════════════════════════════════════════════════════════ */
.app-footer{
  border-top:1px solid var(--border, rgba(127,127,127,.18));
  background:var(--surface, transparent);
  color:var(--text-muted);
  font-size:.78rem; line-height:1.6;
  padding:20px 24px; margin-top:auto;
}
.footer-inner{
  max-width:1280px; margin:0 auto;
  display:flex; flex-wrap:wrap; gap:18px 32px; align-items:flex-start;
  justify-content:space-between;
}
.footer-brand{ display:flex; flex-direction:column; gap:3px; min-width:220px; }
.footer-product{ font-family:var(--font-display, Georgia, serif); font-weight:600; color:var(--text); font-size:.92rem; }
.footer-site{ color:var(--accent); text-decoration:none; width:fit-content; }
.footer-site:hover{ text-decoration:underline; }
.footer-copy{ color:var(--text-faint, var(--text-muted)); font-size:.72rem; }
.footer-links{ display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; }
.footer-links a{ color:var(--text-muted); text-decoration:none; border-radius:4px; padding:2px 2px; }
.footer-links a:hover{ color:var(--text); text-decoration:underline; }
.footer-links a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.footer-status{ display:flex; flex-wrap:wrap; gap:4px 16px; font-size:.72rem; }
.fs-item{ display:inline-flex; align-items:center; gap:.35em; white-space:nowrap; }
.fs-k{ color:var(--text-faint, var(--text-muted)); }
.fs-v{ color:var(--text); font-family:var(--font-mono, ui-monospace, monospace); }
.fs-dot{ width:7px; height:7px; border-radius:50%; background:var(--text-faint); display:inline-block; }
.fs-dot.online{ background:#22c55e; }
.fs-dot.offline{ background:#f59e0b; }
@media (max-width:720px){
  .footer-inner{ flex-direction:column; gap:14px; }
  .app-footer{ padding:16px; }
}