/* ==========================================================================
   IVF Add-Ons Evidence Dashboard — page-scoped styles
   Extends the site gemstone palette (Ruby / Sapphire / Emerald) with
   Citrine (marginal) and Aquamarine (equivocal) for KPI status coding.
   Loaded only on ivf-add-ons.html — does not touch global tokens.
   ========================================================================== */

.addon-page {
  --gem-emerald:      var(--brand-success);
  --gem-emerald-bg:   #ecfbf5;
  --gem-emerald-line: #b9e8d7;

  --gem-ruby:         var(--brand-accent);
  --gem-ruby-bg:      #fff1f5;
  --gem-ruby-line:    #f6c6d6;

  --gem-citrine:      #a3730c;
  --gem-citrine-bg:   #fdf6e3;
  --gem-citrine-line: #f0ddab;

  --gem-aqua:         #0f8b9e;
  --gem-aqua-bg:      #eafbfd;
  --gem-aqua-line:    #b9e7ec;

  --gem-onyx-bg:      var(--brand-soft);
  --gem-onyx-line:    var(--brand-line);
}

/* ---------- Legend ---------- */
.legend-row {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  justify-content: center;
  margin: 0 0 6px;
  font-size: .84rem;
  color: var(--brand-muted);
}
.legend-row span { display: inline-flex; align-items: center; gap: 7px; }
.legend-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: .68rem; font-weight: 800; color: #fff;
  flex: none;
}
.legend-mark--pos     { background: var(--gem-emerald); }
.legend-mark--neg     { background: var(--gem-ruby); }
.legend-mark--warn    { background: var(--gem-citrine); }
.legend-mark--neutral { background: var(--brand-muted); }

/* ---------- Three Pillars framework ---------- */
.pillars {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 32px;
}
@media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  display: flex; gap: 16px; align-items: flex-start;
  background: linear-gradient(180deg, #ffffff 0%, #fbf9f7 100%);
  border: 1px solid var(--brand-line);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.pillar__num {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.05rem; color: #fff;
  background: linear-gradient(180deg, var(--brand-secondary), var(--brand-primary));
  box-shadow: var(--shadow-sm);
}
.pillar h3 { margin: 2px 0 4px; font-size: 1rem; color: var(--brand-primary); font-family: var(--font-sans); }
.pillar p  { margin: 0; font-size: .88rem; color: var(--brand-muted); line-height: 1.5; }

/* ---------- Glossary ---------- */
.glossary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-top: 18px;
}
@media (max-width: 820px) { .glossary { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .glossary { grid-template-columns: 1fr; } }
.glossary dt {
  font-weight: 700; color: var(--brand-primary); font-size: .84rem;
  font-family: var(--font-sans);
}
.glossary dd { margin: 3px 0 0; font-size: .82rem; color: var(--brand-muted); line-height: 1.45; }

/* ---------- Category block ---------- */
.addon-category {
  border: 1px solid var(--brand-line);
  border-left: 6px solid var(--cat-color, var(--brand-primary));
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  margin-bottom: 26px;
}
.addon-category__head {
  padding: 22px 24px;
  background: var(--cat-bg, var(--brand-soft));
  border-bottom: 1px solid var(--brand-line);
}
.addon-category__eyebrow {
  text-transform: uppercase; letter-spacing: .14em; font-size: .72rem;
  font-weight: 700; color: var(--cat-color, var(--brand-primary));
  margin-bottom: 6px;
}
.addon-category__head h2 { margin: 0 0 6px; font-size: 1.25rem; }
.addon-category__head p  { margin: 0; color: var(--brand-muted); font-size: .92rem; max-width: 72ch; }

.addon-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
  padding: 22px 24px;
}
@media (max-width: 820px) { .addon-grid { grid-template-columns: 1fr; } }

/* ---------- Add-on item card ---------- */
.addon-item {
  border: 1px solid var(--brand-line);
  border-radius: 14px;
  padding: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fbf9f7 100%);
  transition: box-shadow .25s, border-color .2s;
}
.addon-item:hover { box-shadow: var(--shadow-md); border-color: var(--cat-color, var(--brand-line)); }
.addon-item__name { margin: 0; font-size: 1.02rem; color: var(--brand-body); font-family: var(--font-sans); font-weight: 700; }
.addon-item__pop {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .74rem; font-weight: 600; color: var(--brand-muted);
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  border-radius: 999px; padding: 4px 11px; margin-top: 8px;
}

/* ---------- KPI mini-cards ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
@media (max-width: 560px) { .kpi-row { grid-template-columns: 1fr; } }

.kpi { border-radius: 10px; padding: 10px 11px; border: 1px solid var(--k-line); background: var(--k-bg); }
.kpi__label {
  display: flex; align-items: center; gap: 6px;
  font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--k-color); margin-bottom: 5px;
}
.kpi__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  font-size: .6rem; font-weight: 800; color: #fff; background: var(--k-color);
}
.kpi__value { font-size: .82rem; font-weight: 700; color: var(--k-color); line-height: 1.25; }
.kpi__sub   { font-size: .73rem; color: var(--brand-muted); margin-top: 3px; line-height: 1.35; }

.kpi--pos     { --k-bg: var(--gem-emerald-bg); --k-line: var(--gem-emerald-line); --k-color: var(--gem-emerald); }
.kpi--neg     { --k-bg: var(--gem-ruby-bg);    --k-line: var(--gem-ruby-line);    --k-color: var(--gem-ruby); }
.kpi--warn    { --k-bg: var(--gem-citrine-bg); --k-line: var(--gem-citrine-line); --k-color: var(--gem-citrine); }
.kpi--neutral { --k-bg: var(--gem-onyx-bg);    --k-line: var(--gem-onyx-line);    --k-color: var(--brand-muted); }

/* ---------- Category color assignments ---------- */
.cat--emerald { --cat-color: var(--gem-emerald); --cat-bg: var(--gem-emerald-bg); }
.cat--citrine { --cat-color: var(--gem-citrine); --cat-bg: var(--gem-citrine-bg); }
.cat--ruby    { --cat-color: var(--gem-ruby);    --cat-bg: var(--gem-ruby-bg); }
.cat--aqua    { --cat-color: var(--gem-aqua);    --cat-bg: var(--gem-aqua-bg); }
.cat--onyx    { --cat-color: var(--brand-body);  --cat-bg: var(--brand-soft); }