/* Interactive Line Chart Base */
/* ===== Chart Base ===== */

.ilc-chart{
  position:relative;
  width:100%;
  height:260px;
  overflow:hidden;
  cursor:pointer;
}

.ilc-chart.is-large{
  height:80vh;
  cursor:default;
}

/* ===== SVG Layer ===== */

.ilc-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}

/* ===== Axis ===== */

.ilc-axis{
  stroke:rgba(20,20,19,0.2);
  stroke-width:1;
}

/* ===== Line ===== */

.ilc-line{
  fill:none;
  stroke:#d97757;
  stroke-width:2.2;
  vector-effect:non-scaling-stroke;
}

/* ===== Point ===== */

.ilc-point{
  fill:#d97757;
  stroke:#141413;
  stroke-width:2;
  cursor:crosshair;
  transition:transform .15s ease, fill .15s ease;
}

.ilc-point:hover{
  transform:scale(1.15);
  fill:#b85e3a;
}

/* ===== Tooltip ===== */

.ilc-tooltip{
  position:absolute;
  z-index:10;
  min-width:120px;
  background:#fff;
  color:#333;
  font-size:12px;
  padding:8px 10px;
  border-radius:6px;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-130%) scale(.96);
  transition:all .15s ease;
  box-shadow:0 6px 18px rgba(0,0,0,0.2);
}

.ilc-tooltip.is-active{
  opacity:1;
  transform:translate(-50%,-140%) scale(1);
}

.ilc-tooltip-title{
  font-weight:600;
  margin-bottom:2px;
}

.ilc-tooltip-desc{
  font-size:11px;
  color:#666;
}

/* ===== Modal ===== */

#lifelineModal {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 19, 0.6);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 500;
}

#lifelineModal.is-open {
  display: flex;
}

#lifelineModalInner {
  position: relative;
  width: 90%;
  max-width: 900px;
  background: var(--container-bg);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

#lifelineModalClose {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

#lifelineChartModal {
  width: 100%;
  height: 60vh;
  background: var(--body-bg);
  border-radius: 12px;
  overflow: hidden;
}