/* shared.css — common styles for durable-leverage viz apps */

/*
 * Color philosophy — colors encode meaning, not identity:
 *
 *   #fff / rgba(255,255,255,0.87)  — Primary data (the thing being analyzed)
 *   #888                           — Baseline / reference (spot, unlevered)
 *   #7aa2f7  (blue)                — Target / user's parameter / theoretical model
 *   #7ea991  (green)               — Positive / durable / safe (ΔR > 0, L* above target)
 *   #c47070  (red)                 — Negative / failing / danger (ΔR < 0, no leverage)
 *   #c4b078  (gold)                — Caution / empirical overlay / L* below target
 *   #ff9e64  (orange)              — Counterfactual / ideal benchmark (zero-cost leverage)
 */

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: #141413;
  color: rgba(255,255,255,0.87);
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
}

/* ── Site nav (breadcrumb) ── */
#site-nav {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 24px; border-bottom: 1px solid #222;
  font-size: 13px; letter-spacing: 0.65px;
  position: relative;
}
#site-nav a { color: #666; text-decoration: none; transition: color 0.15s; }
#site-nav a:hover { color: rgba(255,255,255,0.87); }
#site-nav .nav-sep { color: #333; }
#site-nav .nav-current { color: rgba(255,255,255,0.6); }

/* ── Header ── */
#header {
  padding: 18px 24px 16px; background: #161615;
  border-bottom: 1px solid #222;
}
#header h1 { font-size: 15.5px; font-weight: 600; color: #fff; }
#header .subtitle { font-size: 12px; color: #666; margin-top: 4px; }

/* ── Controls bar ── */
.control-group { display: flex; align-items: center; gap: 8px; }
.control-group label { font-size: 12px; color: #666; }
.control-group select,
.control-group input[type="date"] {
  background: #1a1a19; border: 1px solid #222; color: #ccc;
  padding: 4px 8px; font-size: 12px; font-family: inherit; border-radius: 5px;
}
.control-group input[type="range"] { accent-color: #555; }
.control-group .val { font-size: 12px; color: rgba(255,255,255,0.87); font-weight: 600; }

/* ── Axis / grid (shared D3 chart styles) ── */
.axis text { fill: #666; font-size: 11px; }
.axis line, .axis path { stroke: #222; }
.grid line { stroke: #1c1c1b; stroke-dasharray: 2,4; }

/* ── Chart tooltip ── */
#tooltip {
  position: fixed; pointer-events: none;
  background: rgba(20,20,19,0.95); border: 1px solid #333; border-radius: 5px;
  padding: 8px 12px; font-size: 12px; line-height: 1.5;
  z-index: 1000; display: none;
}

/* ── Hamburger toggle (inside #site-nav) ── */
#info-toggle {
  position: absolute; top: 50%; right: 20px; transform: translateY(-50%);
  background: none; border: 1px solid #333; border-radius: 5px;
  width: 32px; height: 32px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 0; transition: border-color 0.15s; z-index: 10;
}
#info-toggle:hover { border-color: #555; }
#info-toggle span {
  display: block; width: 14px; height: 1.5px;
  background: #666; border-radius: 1px; transition: background 0.15s;
}
#info-toggle:hover span { background: #999; }

/* ── Side panel ── */
#side-panel {
  position: fixed; top: 0; right: 0; width: 340px; height: 100vh;
  background: #161615; border-left: 1px solid #222; z-index: 2500;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}
#side-panel.open { transform: translateX(0); }
#side-panel-inner { padding: 28px 24px 40px; }
#side-panel .sp-title {
  font-size: 15.5px; font-weight: 600; color: #fff;
  margin-bottom: 12px; padding-right: 28px;
}
#side-panel .sp-desc {
  font-size: 13px; color: #888; line-height: 1.7; margin-bottom: 24px;
}
#side-panel .sp-section {
  font-size: 11px; font-weight: 600; color: #555;
  letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 10px;
}
#side-panel .sp-list {
  margin: 0; padding: 0 0 0 16px;
  font-size: 12.5px; color: #999; line-height: 1.8;
}
#side-panel .sp-list li { margin-bottom: 4px; }

/* ── Side panel overlay ── */
#side-panel-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.3); z-index: 2400;
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
#side-panel-overlay.open { opacity: 1; pointer-events: auto; }