*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;color:#0f172a;background:#f1f5f9}
.container{max-width:1100px;margin:0 auto;padding:24px}
h1{margin:0 0 6px;font-size:28px;font-weight:800}
.note{margin:0 0 16px;color:#475569;font-size:13px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.card{background:#fff;border:1px solid #cbd5e1;border-radius:16px;padding:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{border:1px solid #cbd5e1;background:#fff;padding:6px 10px;border-radius:999px;font-size:13px;cursor:pointer}
.chip.active{background:#ff4444;color:#fff;border-color:#ff4444;box-shadow:0 2px 8px #818cf84d}
.num{width:96px;padding:6px 8px;border:1px solid #cbd5e1;border-radius:8px;font-size:13px}
.hidden{display:none}
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:16px}
.r-card{background:#fff;border:1px solid #cbd5e1;border-radius:16px;padding:14px}
.r-card .label{font-size:12px;color:#64748b}
.r-card .value{font-size:22px;font-weight:700;margin-top:2px}
.r-card .sub{font-size:13px;color:#475569;margin-top:8px}
.scale{margin-top:16px}
.scale-head{font-weight:600;margin-bottom:12px}
.scale-track{position:relative;height:82px}
.track{position:absolute;left:0;right:0;top:34px;height:2px;background:#cbd5e1}
.ticks{position:absolute;left:0;right:0;top:18px;display:grid}
.marker { position: absolute; top: 0; transform: translateX(-50%); }
.arrow{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #ff4444}
.tag{margin-top:4px;background:#eef2ff;color:#3730a3;padding:2px 6px;border-radius:6px;font-weight:700;font-size:12px}
.scale-ends{display:flex;justify-content:space-between;font-size:12px;color:#64748b;margin-top:4px}
.warn{margin-top:8px;color:#b91c1c;font-size:13px;font-weight:600}
.esc-head{display:flex;align-items:center;justify-content:space-between}
.esc-body{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.step{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.step .pill{font-size:11px;border:1px solid #cbd5e1;border-radius:999px;padding:2px 8px;background:#fff}
.step .arrow{border-bottom-color:#64748b}
.footnote{color:#64748b;font-size:11px;margin-top:6px}
.tiny{font-size:11px;color:#64748b;margin-top:12px}
.toggle{display:flex;align-items:center;gap:6px;font-size:13px;color:#475569}

.marker {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}

.arrow {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #ff4444;
  margin: 0 auto;
}

.tag-wrapper {
  display: flex;
  justify-content: center;
}

.tag {
  margin-top: 4px;
  background: #eef2ff;
  color: #3730a3;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 11px;
}

/* legend */
.esc-legend { display:flex; align-items:center; gap:8px; margin:6px 0 8px; }
.legend-arrow::after { content:"→"; font-size:14px; color:#64748b; }
.legend-note { font-size:12px; color:#64748b; margin-left:6px; }

/* pills already exist; just add roles */
.pill.start  { background:#e0f2fe; border-color:#38bdf8; }
.pill.target { background:#ecfdf5; border-color:#10b981; font-weight:600; }

/* make arrows in the preview rows be chevrons, not triangles (scoped) */
.step .arrow { width:auto; height:auto; border:0; }
.step .arrow::after { content:"→"; color:#64748b; font-size:14px; margin:0 4px; }


.esc-legend { display:flex; align-items:center; gap:8px; margin:6px 0 8px; }
.legend-arrow::after { content:"→"; font-size:14px; color:#64748b; }
.legend-note { font-size:12px; color:#64748b; margin-left:6px; }

.pill.start  { background:#e0f2fe; border-color:#38bdf8; }
.pill.target { background:#ecfdf5; border-color:#10b981; font-weight:600; }

.step .arrow { width:auto; height:auto; border:0; }
.step .arrow::after { content:"→"; color:#64748b; font-size:14px; margin:0 4px; }

/* buttons & active pills */
.pill.active,
button.active {
  background: #ff4444 !important;
  border-color: #ff4444 !important;
  color: #fff !important;
}

/* marker arrow */
.arrow {
  border-bottom-color: #ff4444 !important;
}

/* highlighted numbers (units / mcg) */
.text-accent,
.value-highlight {
  color: #ff4444 !important;
  font-weight: 600;
}

/* neutral labels & notes */
.note,
.esc-note,
.legend-note,
.footnote {
  color: #444 !important; /* match site body text */
}

input:focus,
button:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px #ff4444 !important;
}

button:hover,
.pill:hover {
  background: #ffdddd !important;
  border-color: #ff4444 !important;
}


/* marker bubble background */
.tag {
  background: #ffe6e6 !important; /* soft pink */
  color: #ff4444 !important;      /* your red for the text */
}

.tag {
  background: #fff0f0 !important; /* very pale pink */
  color: #ff4444 !important;
}

/* Brand red */
:root { --brand-red:#ff4444; }

/* active chips/pills */
.pill.active, button.active {
  background: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
  color:#fff !important;
}

/* syringe marker arrow + bubble */
.arrow { border-bottom-color: var(--brand-red) !important; }
.tag   { background:#fff0f0 !important; color:var(--brand-red) !important; }

/* highlighted values (e.g., dose/units headings) */
.value-highlight, .text-accent { color: var(--brand-red) !important; font-weight:600; }

/* neutral copy to match theme */
.note, .esc-note, .legend-note, .footnote { color:#444 !important; }

/* focus rings */
input:focus, button:focus { outline:0 !important; box-shadow:0 0 0 2px var(--brand-red) !important; }