/* lifechart.css — Archie user-model life-chart (spec-user-model-corpus.md P4) */

.lc-body { background: var(--bg); color: var(--text); font-family: var(--font-body); margin: 0; min-height: 100vh; }

/* ── Topbar ─────────────────────────────────────────────────── */
#lc-topbar {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-raised); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
#lc-back { display: inline-flex; align-items: center; gap: 4px; color: var(--text-sec); text-decoration: none; font-size: 13px; }
#lc-back:hover { color: var(--text); }
#lc-title { font-size: 16px; font-weight: 600; margin: 0; }
#lc-topbar-actions { margin-left: auto; }
.btn-ghost-sm {
  font-size: 12px; padding: 5px 10px; border-radius: var(--radius);
  background: transparent; color: var(--text-sec); border: 1px solid var(--border);
  text-decoration: none; transition: color var(--duration), border-color var(--duration);
}
.btn-ghost-sm:hover { color: var(--text); border-color: var(--border-hover); }

/* ── Layout ─────────────────────────────────────────────────── */
#lc-main { max-width: 70ch; margin: 0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-8); }
.lc-stance { color: var(--text-sec); font-style: italic; font-size: 14px; line-height: 1.5; margin: 0 0 var(--sp-4); }
.lc-hint { color: var(--text-muted); font-size: 12px; }

#lc-window { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.lc-win-btn {
  font-size: 12px; padding: 4px 12px; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-sec); border: 1px solid var(--border); cursor: pointer;
  transition: all var(--duration);
}
.lc-win-btn:hover { color: var(--text); border-color: var(--border-hover); }
.lc-win-active { background: var(--accent); color: #fff; border-color: var(--accent); }

.lc-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-4); margin-bottom: var(--sp-5);
}
.lc-card h2 { font-size: 15px; margin: 0 0 var(--sp-3); }

/* ── Chart ──────────────────────────────────────────────────── */
#lc-chart { width: 100%; }
.lc-svg { width: 100%; height: auto; display: block; }
.lc-loading, .lc-empty { padding: var(--sp-6) var(--sp-3); text-align: center; color: var(--text-sec); }
.lc-empty p { margin: 4px 0; }
.lc-empty a { color: var(--accent-bright); }

.lc-grid { stroke: var(--border); stroke-width: 1; }
.lc-grid-zero { stroke: var(--border-focus); stroke-width: 1; }
.lc-axis { fill: var(--text-muted); font-size: 11px; font-family: var(--font-body); }
.lc-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lc-line-arousal { stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: 0.8; }
.lc-pt-self { fill: var(--accent-bright); stroke: var(--bg-surface); stroke-width: 1.5; }
.lc-pt-inf  { fill: var(--text-muted); opacity: 0.7; }
.lc-pt { cursor: pointer; }
.lc-evt { stroke: var(--amber-dim); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.5; }
.lc-evt-mark { fill: var(--amber); cursor: pointer; }

.lc-legend { display: flex; gap: var(--sp-4); margin-top: var(--sp-3); font-size: 12px; }
.lc-leg-self { color: var(--accent-bright); }
.lc-leg-inf  { color: var(--text-muted); }
.lc-leg-evt  { color: var(--amber); }

/* ── Personality bars ───────────────────────────────────────── */
.lc-ocean-row { display: flex; align-items: center; gap: var(--sp-3); margin: 6px 0; font-size: 13px; }
.lc-ocean-label { width: 130px; color: var(--text-sec); }
.lc-ocean-bar { flex: 1; height: 8px; background: var(--bg-input); border-radius: var(--radius-pill); overflow: hidden; }
.lc-ocean-fill { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.lc-ocean-val { width: 28px; text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ── Toast ──────────────────────────────────────────────────── */
#lc-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 8px 16px; border-radius: var(--radius-pill); font-size: 13px; z-index: 9999; pointer-events: none; }
.lc-toast-ok  { background: var(--green); color: #000; }
.lc-toast-err { background: var(--red);   color: #fff; }