/*
 * shared.css — WCAG 2.1 AA palette for all pages.
 *
 * Contrast ratios on #0d1118 (lum ~0.012):
 *   #b0c4d8 = ~9.5:1   body text
 *   #8fa4b8 = ~6.2:1   secondary
 *   #7a90a8 = ~4.8:1   labels, headers
 *   #e0eaf4 = ~14:1    values, emphasis
 */

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

body {
  background: #0d1118;
  color: #b0c4d8;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- HEADER + NAV ---- */
#header {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px; background: #111820;
  border-bottom: 1px solid #243040; flex-shrink: 0;
  flex-wrap: wrap;
}
#header h1 { font-size: 17px; font-weight: 600; color: #e0eaf4; }
#header h1 a { color: #e0eaf4; text-decoration: none; }
#header h1 a:hover { color: #b0c4d8; }

#nav {
  display: flex; gap: 4px; margin-left: 12px;
}
.nav-link {
  font-size: 13px; color: #7a90a8; text-decoration: none;
  padding: 4px 10px; border-radius: 4px;
}
.nav-link:hover { color: #b0c4d8; background: #1a2838; }
.nav-link.active {
  color: #e0eaf4; background: #1a3050; font-weight: 600;
}

/* ---- CHARTS ---- */
#charts {
  flex-shrink: 0;
  background: #111820;
  border-bottom: 1px solid #243040;
  padding: 16px 20px 12px;
  display: none;
}
.chart-container { margin-bottom: 14px; }
.chart-container:last-child { margin-bottom: 0; }
.chart-label {
  font-size: 12px; font-weight: 700; color: #7a90a8;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 4px;
}

/* ---- CONTENT ---- */
#content {
  flex: 1; overflow-y: auto; background: #0d1118;
  padding: 20px; font-size: 15px;
}

#loading {
  padding: 20px; font-size: 15px; color: #8fa4b8;
  text-align: center; display: none;
}

/* ---- RESULT SECTIONS ---- */
.result-section { margin-bottom: 20px; }
.result-section h3 {
  font-size: 13px; font-weight: 700; color: #7a90a8;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1px solid #243040;
}
.summary-row {
  display: flex; justify-content: space-between;
  padding: 4px 0; font-size: 15px;
}
.summary-key { color: #8fa4b8; }
.summary-val { color: #e0eaf4; font-variant-numeric: tabular-nums; }

.result-row {
  padding: 8px 10px; margin: 3px 0; border-radius: 4px;
  background: #111820; font-size: 14px;
  display: flex; flex-wrap: wrap; gap: 4px 14px;
}
.result-row.warm { border-left: 3px solid #e07050; }
.result-row.cool { border-left: 3px solid #5090e0; }
.result-row.gradient { border-left: 3px solid #90b050; }
.result-row.error { border-left: 3px solid #d0a040; }
.result-loc { color: #b0c4d8; min-width: 130px; }
.result-val { color: #e0eaf4; font-variant-numeric: tabular-nums; }
.result-sig { color: #8fa4b8; font-size: 13px; }
.result-empty { color: #7a90a8; font-style: italic; padding: 6px 0; }

.context-note {
  font-size: 14px; color: #8fa4b8; line-height: 1.6;
  margin-top: 12px; padding: 12px 14px;
  background: #111820; border-radius: 6px;
  border-left: 3px solid #4a6080;
}

/* ---- FOCUS ---- */
:focus-visible {
  outline: 2px solid #5090e0;
  outline-offset: 2px;
}