/* ===================================================================
   style.css
   Lab Specimen Pipeline Visualization
   =================================================================== */


/* ----- Reset & Base ----- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  color: #1d1d1f;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: #dbeafe;
}


/* ----- Loading State ----- */

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 14px;
  color: #9ca3af;
  letter-spacing: 0.5px;
}


/* ----- Page Container ----- */

.page {
  max-width: 840px;
  margin: 0 auto;
  padding: 64px 28px 100px;
  display: none;
}


/* ----- Page Header ----- */

.page-header {
  margin-bottom: 52px;
}

.page-header h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.2;
  margin-bottom: 10px;
}

.page-header .deck {
  font-size: 15px;
  font-weight: 400;
  color: #4b5563;
  line-height: 1.75;
  max-width: 620px;
}

.page-header .rule {
  width: 36px;
  height: 2px;
  background: #2563eb;
  margin: 18px 0 0;
}


/* ----- Summary Stats Row ----- */

.stats-row {
  display: flex;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 44px;
}

.stat {
  flex: 1;
  padding: 18px 0;
  text-align: center;
}

.stat + .stat {
  border-left: 1px solid #f3f4f6;
}

.stat-value {
  font-family: Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: -0.3px;
}

.stat-label {
  font-size: 11px;
  font-weight: 500;
  color: #9ca3af;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 1px;
}


/* ----- Controls ----- */

.controls {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.controls label {
  font-size: 11px;
  font-weight: 500;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.controls select {
  font-size: 13px;
  padding: 7px 30px 7px 11px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #1d1d1f;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 0.5L4 4L7.5 0.5' stroke='%239ca3af' fill='none' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.15s;
}

.controls select:hover {
  border-color: #6b7280;
}

.controls select:focus {
  outline: none;
  border-color: #2563eb;
}


/* ----- Sections ----- */

.section {
  margin-bottom: 52px;
  scroll-margin-top: 56px;
}

.section h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.2px;
  margin-bottom: 5px;
}

.section .section-desc {
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
  margin-bottom: 18px;
  line-height: 1.7;
  max-width: 560px;
}


/* ----- Legend ----- */

.legend {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
  font-size: 11px;
  color: #9ca3af;
  letter-spacing: 0.3px;
}

.legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.legend i {
  width: 14px;
  height: 2px;
  display: inline-block;
  border-radius: 1px;
}

.legend .swatch-blue  { background: #2563eb; }
.legend .swatch-coral { background: #dc6843; }


/* ----- Histogram Panel ----- */

.histogram-panel {
  background: #f9fafb;
  border-radius: 12px;
  padding: 18px 22px;
  margin: 14px 0 22px;
  display: none;
}

.histogram-panel.open {
  display: block;
  animation: slideUp 0.2s ease;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.histogram-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.histogram-header span {
  font-size: 13px;
  font-weight: 600;
}

.histogram-close {
  cursor: pointer;
  color: #9ca3af;
  font-size: 18px;
  line-height: 1;
}

.histogram-close:hover {
  color: #1d1d1f;
}


/* ----- Compare Section ----- */

.compare-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.compare-controls select {
  font-size: 13px;
  padding: 7px 30px 7px 11px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #1d1d1f;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 0.5L4 4L7.5 0.5' stroke='%239ca3af' fill='none' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.15s;
}

.compare-controls select:hover {
  border-color: #6b7280;
}

.compare-controls select:focus {
  outline: none;
  border-color: #2563eb;
}

.compare-controls .vs {
  font-style: italic;
  color: #9ca3af;
  font-size: 14px;
}


/* ----- Tooltip ----- */

.tooltip {
  position: fixed;
  pointer-events: none;
  padding: 7px 12px;
  font-size: 11px;
  line-height: 1.6;
  background: #1d1d1f;
  color: #fff;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.1s;
  z-index: 200;
  max-width: 240px;
}

.tooltip .hint {
  opacity: 0.6;
}


/* ----- Empty data placeholder ----- */

.empty-message {
  color: #9ca3af;
  font-size: 12px;
}


/* ----- Footer ----- */

.footer {
  margin-top: 56px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  font-size: 10px;
  color: #9ca3af;
  letter-spacing: 0.5px;
}


/* ===================================================================
   SVG Chart Tokens
   All visual properties for D3-generated chart elements live here.
   The JS only sets geometry (x, y, width, height, r, etc.) and
   animated opacity values.
   =================================================================== */

svg {
  display: block;
}

svg text {
  font-family: Helvetica, Arial, sans-serif;
}


/* -- Grid & axes -- */

svg .grid-line {
  stroke: #e5e7eb;
}

svg .axis-label {
  fill: #9ca3af;
  font-size: 10px;
  text-anchor: middle;
}

svg .hist-axis-label {
  fill: #9ca3af;
  font-size: 10px;
  text-anchor: middle;
}


/* -- Row labels (stage names on the left) -- */

svg .row-label {
  fill: #374151;
  font-size: 13px;
  text-anchor: end;
}


/* -- Color fills (applied to rects, circles, text) -- */

svg .fill-blue  { fill: #2563eb; }
svg .fill-coral { fill: #dc6843; }


/* -- Clickable chart rows -- */

svg .chart-row {
  cursor: pointer;
}

svg .chart-row .hit-area {
  fill: transparent;
  transition: fill 0.1s;
}

svg .chart-row:hover .hit-area {
  fill: #fafbfc;
}


/* -- IQR bands -- */

svg .iqr-band {
  opacity: 0.12;
}


/* -- Median value labels (next to the dot) -- */

svg .median-value {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

svg .median-value-sm {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}


/* -- Histogram bars -- */

svg .hist-bar {
  fill: #2563eb;
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 0.1s;
}

svg .hist-bar:hover {
  opacity: 0.75;
}


/* -- Histogram median marker (dashed line + label) -- */

svg .median-marker {
  stroke: #dc6843;
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

svg .median-marker-label {
  fill: #dc6843;
  font-size: 11px;
  font-weight: 600;
}


/* -- Probability / attrition bars -- */

svg .prob-value {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}