/* ── Global dark/light theme variables ── */
:root[data-theme="dark"] {
  --bg: #0A0A0A;
  --bg-2: #0f0f0f;
  --text: #F2F0EB;
  --text-2: #888;
  --text-3: #444;
  --border: #1C1C1C;
  --accent: #1d4ed8;
}
:root[data-theme="light"] {
  --bg: #FAFAF8;
  --bg-2: #F5F4F0;
  --text: #0F0F0D;
  --text-2: #555;
  --text-3: #999;
  --border: #E8E6DF;
  --accent: #1d4ed8;
}

/* Theme toggle button — injects into existing nav */
.hp-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: none;
  border: .5px solid var(--border);
  border-radius: 999px;
  padding: .28rem .65rem;
  cursor: pointer;
  font-size: 10px;
  font-family: monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: all .15s;
  white-space: nowrap;
}
.hp-theme-toggle:hover {
  border-color: var(--text-2);
  color: var(--text);
}

/* ═══════════════════════════════════════════════
   Catalyst Chamber — Visual Component System
   Pure HTML/CSS — no JavaScript dependency.
   All components use CSS variables from the site
   theme, work in light + dark mode automatically.
   ═══════════════════════════════════════════════ */

/* ── BASE: every vc element respects its container ── */
.vc-stat-grid, .vc-table-wrap, .vc-compare-wrap,
.vc-callout, .vc-timeline, .vc-chart, .vc-bar-list {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 1.75rem 0;
}

/* ─────────────────────────────────────
   1. STAT BOXES
   Usage: <div class="vc-stat-grid"> 
            <div class="vc-stat">
              <div class="vc-stat-value">±2°C</div>
              <div class="vc-stat-label">Max temp deviation</div>
              <div class="vc-stat-note">ICH Q1A(R2) requirement</div>
            </div>
          </div>
───────────────────────────────────── */
.vc-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  background: var(--border);
  border: .5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.vc-stat {
  background: var(--bg);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.vc-stat-value {
  font-family: Georgia, serif;
  font-size: 1.55rem;
  font-weight: 300;
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1.1;
  word-break: break-word;
}
.vc-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-3);
  font-family: monospace;
  line-height: 1.3;
}
.vc-stat-note {
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.5;
  margin-top: .15rem;
}

/* ─────────────────────────────────────
   2. DATA TABLE
   Usage: <div class="vc-table-wrap">
            <div class="vc-table-caption">Title</div>
            <table class="vc-table">
              <thead><tr><th>Col</th></tr></thead>
              <tbody><tr><td>Data</td></tr></tbody>
            </table>
          </div>
───────────────────────────────────── */
.vc-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: .5px solid var(--border);
  border-radius: 10px;
}
.vc-table-caption {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-3);
  font-family: monospace;
  padding: .7rem 1rem .35rem;
  border-bottom: .5px solid var(--border);
}
.vc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.vc-table th {
  text-align: left;
  padding: .5rem .9rem;
  background: var(--bg-2);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-2);
  border-bottom: .5px solid var(--border);
  white-space: nowrap;
}
.vc-table td {
  padding: .5rem .9rem;
  color: var(--text-2);
  border-bottom: .5px solid var(--border);
  vertical-align: top;
  line-height: 1.45;
}
.vc-table tr:last-child td { border-bottom: none; }
.vc-table tr:nth-child(even) td { background: var(--bg-2); }
.vc-table td:first-child {
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
}
.vc-check { color: #10b981; font-weight: 700; }
.vc-cross { color: #f43f5e; font-weight: 700; }

/* ─────────────────────────────────────
   3. COMPARE TABLE (A vs B, or A vs B vs C)
   Usage: <div class="vc-compare-wrap">
            <table class="vc-compare">
              <thead>
                <tr>
                  <th class="vc-compare-blank"></th>
                  <th class="vc-compare-col-a">Option A</th>
                  <th class="vc-compare-col-b">Option B</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="vc-compare-criterion">Criterion</td>
                  <td>Value A</td>
                  <td>Value B</td>
                </tr>
              </tbody>
            </table>
          </div>
───────────────────────────────────── */
.vc-compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: .5px solid var(--border);
  border-radius: 10px;
}
.vc-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  /* min-width ensures columns stay readable before scroll kicks in */
  min-width: 420px;
}
.vc-compare thead tr {
  background: var(--bg-2);
  border-bottom: .5px solid var(--border);
}
.vc-compare th {
  padding: .6rem .9rem;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  text-align: left;
  border-right: .5px solid var(--border);
}
.vc-compare th:last-child { border-right: none; }
.vc-compare-blank {
  color: var(--text-3);
  font-size: 10px;
  min-width: 120px;
}
.vc-compare-col-a { color: #1d4ed8; min-width: 160px; }
.vc-compare-col-b { color: var(--text-2); min-width: 160px; }
.vc-compare-col-c { color: #0ea5e9; min-width: 160px; }
.vc-compare tbody tr {
  border-bottom: .5px solid var(--border);
}
.vc-compare tbody tr:last-child { border-bottom: none; }
.vc-compare td {
  padding: .6rem .9rem;
  vertical-align: top;
  line-height: 1.45;
  color: var(--text-2);
  border-right: .5px solid var(--border);
}
.vc-compare td:last-child { border-right: none; }
.vc-compare-criterion {
  background: var(--bg-2);
  color: var(--text);
  font-weight: 500;
  font-size: 11.5px;
  white-space: nowrap;
}
.vc-compare tbody tr:nth-child(even) td:not(.vc-compare-criterion) {
  background: color-mix(in srgb, var(--bg-2) 50%, transparent);
}

/* ─────────────────────────────────────
   4. CALLOUT
   Usage: <div class="vc-callout vc-callout-warn">
            <div class="vc-callout-tag">Important</div>
            <div class="vc-callout-body">Text here</div>
          </div>
   Types: vc-callout-note (blue) | vc-callout-warn (amber)
          vc-callout-check (green) | vc-callout-def (violet)
───────────────────────────────────── */
.vc-callout {
  border-left: 3px solid #1d4ed8;
  padding: .85rem 1.1rem;
  background: var(--bg-2);
  border-radius: 0 8px 8px 0;
}
.vc-callout-warn  { border-left-color: #f59e0b; }
.vc-callout-check { border-left-color: #10b981; }
.vc-callout-def   { border-left-color: #8b5cf6; }
.vc-callout-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #1d4ed8;
  font-family: monospace;
  font-weight: 600;
  margin-bottom: .3rem;
}
.vc-callout-warn  .vc-callout-tag { color: #f59e0b; }
.vc-callout-check .vc-callout-tag { color: #10b981; }
.vc-callout-def   .vc-callout-tag { color: #8b5cf6; }
.vc-callout-body {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.65;
}
.vc-callout-body strong { color: var(--text); }
.vc-callout-body br { margin-bottom: .2rem; }

/* ─────────────────────────────────────
   5. BAR CHART
   Usage: <div class="vc-chart">
            <div class="vc-chart-title">Title</div>
            <div class="vc-bar-list">
              <div class="vc-bar-row">
                <div class="vc-bar-label">Label</div>
                <div class="vc-bar-track">
                  <div class="vc-bar-fill" style="width:75%"></div>
                </div>
                <div class="vc-bar-value">75%</div>
              </div>
            </div>
            <div class="vc-chart-note">Source note</div>
          </div>
───────────────────────────────────── */
.vc-chart-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-3);
  font-family: monospace;
  margin-bottom: .85rem;
}
.vc-bar-list { display: flex; flex-direction: column; gap: .45rem; }
.vc-bar-row {
  display: grid;
  grid-template-columns: minmax(80px, 28%) 1fr 50px;
  align-items: center;
  gap: .5rem;
}
.vc-bar-label {
  font-size: 11.5px;
  color: var(--text-2);
  text-align: right;
  line-height: 1.3;
}
.vc-bar-track {
  height: 18px;
  background: var(--bg-2);
  border-radius: 3px;
  overflow: hidden;
  border: .5px solid var(--border);
}
.vc-bar-fill {
  height: 100%;
  background: #1d4ed8;
  border-radius: 3px;
  opacity: .85;
}
.vc-bar-fill.alt { background: #64748b; opacity: .65; }
.vc-bar-value {
  font-size: 11px;
  color: var(--text-2);
  font-family: monospace;
  white-space: nowrap;
}
.vc-chart-note {
  font-size: 11px;
  color: var(--text-3);
  margin-top: .6rem;
  line-height: 1.5;
}

/* ─────────────────────────────────────
   6. TIMELINE
   Usage: <div class="vc-timeline">
            <div class="vc-timeline-title">Title</div>
            <ul class="vc-tl-list">
              <li class="vc-tl-item">
                <div class="vc-tl-marker">Step 1</div>
                <div class="vc-tl-title">Title</div>
                <div class="vc-tl-body">Description</div>
              </li>
            </ul>
          </div>
───────────────────────────────────── */
.vc-timeline-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-3);
  font-family: monospace;
  margin-bottom: 1rem;
}
.vc-tl-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 1.5px solid var(--border);
  padding-left: 1.1rem;
}
.vc-tl-item { position: relative; padding-bottom: 1.25rem; }
.vc-tl-item:last-child { padding-bottom: 0; }
.vc-tl-item::before {
  content: '';
  position: absolute;
  left: -1.38rem;
  top: .3rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #1d4ed8;
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1.5px #1d4ed8;
}
.vc-tl-marker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #1d4ed8;
  font-family: monospace;
  font-weight: 600;
  margin-bottom: .15rem;
}
.vc-tl-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: .2rem;
}
.vc-tl-body { font-size: 12px; color: var(--text-2); line-height: 1.6; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .vc-stat-grid { grid-template-columns: 1fr 1fr; }
  .vc-stat-value { font-size: 1.3rem; }
  .vc-bar-row { grid-template-columns: 70px 1fr 40px; }
  .vc-bar-label { font-size: 10px; }
}