/* ============================================================
   safety.css — "Nothing leaves the pad unchecked." (ClSafety)
   Signature visual: the Rx SAFETY GAUNTLET. An e-prescribing
   pad tries Amoxicillin, trips a red penicillin-allergy HARD
   STOP (struck through), and resolves to Clindamycin ("switched");
   then five checks light in sequence — mint ✓ for clear, one
   amber soft notice on the drug–drug row — and the "Send Rx"
   button enables. CSS-only, one 14s looping timeline (--cl-t).
   Everything namespaced under .cl-safety; keyframes are
   clSafety-prefixed since keyframe names are global. Base
   (non-animated) styles equal the FINAL resolved scene, so
   prefers-reduced-motion shows a correct still with both tiers
   visible (red hard stop + amber soft notice). Tokens inherited
   from styles.css; accent = sand-blue, layered under house indigo.
   Red is reserved for the hard stop; the engine ADVISES only.
   ============================================================ */

.cl-safety {
  --cl-blue: #5a82c2;
  --cl-blue-deep: #3d63a4;
  --cl-blue-wash: color-mix(in srgb, #5a82c2 8%, #fff);
  --cl-amber: var(--f-caries);              /* #e0a274 — soft notice */
  --cl-amber-wash: color-mix(in srgb, var(--f-caries) 16%, #fff);
  --cl-red: #d24b52;                        /* hard stop only */
  --cl-red-wash: color-mix(in srgb, #d24b52 10%, #fff);
  --cl-mint-wash: color-mix(in srgb, var(--mint) 12%, #fff);
  --cl-t: 14s;                              /* one full gauntlet cycle */
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(68% 55% at 8% 16%, var(--cl-blue-wash), transparent 62%),
    linear-gradient(180deg, #fff, var(--paper));
}

.cl-safety .eyebrow { color: var(--cl-blue-deep); }
.cl-safety .eyebrow.cl-term { color: #141b2e; font-weight: 800; font-size: 13.5px; letter-spacing: .1em; }
body.theme-sand .cl-safety .eyebrow.cl-term { color: #141b2e; }
.cl-safety .h2 { margin: 14px 0 12px; }
.cl-safety .lead { max-width: 54ch; }

.cl-safety-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}

/* ── left column: chips + editorial footnotes ── */
.cl-safety-chips { margin-top: clamp(24px, 3vw, 34px); }
.cl-safety-chips-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 12px;
}
.cl-safety-chiplist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cl-safety-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: #fff;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-70);
  font-variant-numeric: tabular-nums;
  transition: border-color .2s ease, color .2s ease;
}
.cl-safety-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--cl-blue);
  opacity: .75;
}
.cl-safety-chip:hover {
  border-color: color-mix(in srgb, var(--cl-blue) 40%, var(--line));
  color: var(--ink);
}

.cl-safety-notes {
  list-style: none;
  margin: clamp(22px, 3vw, 32px) 0 0;
  padding: 0;
  max-width: 52ch;
}
.cl-safety-notes li {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-60);
}
.cl-safety-notes b {
  color: var(--ink);
  font-weight: 600;
  margin-right: 4px;
}

/* ============================================================
   THE STAGE — one soft surface holding the pad + gauntlet
   ============================================================ */
.cl-safety-stage {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(80% 50% at 100% 0%, var(--periwinkle), transparent 55%),
    radial-gradient(70% 60% at 0% 100%, var(--cl-blue-wash), transparent 60%),
    linear-gradient(165deg, #fff, var(--paper));
  box-shadow: var(--shadow-float);
  padding: clamp(18px, 2.2vw, 26px) clamp(16px, 2vw, 24px) clamp(16px, 1.8vw, 22px);
  overflow: hidden;
}

/* header strip */
.cl-safety-stagehead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.cl-safety-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cl-blue-deep);
}
.cl-safety-live i {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--mint);
  animation: clSafetyLive 2.4s ease-out infinite;
}
.cl-safety-who { color: var(--ink-40); text-transform: none; letter-spacing: 0; }

/* ── the Rx pad ── */
.cl-safety-pad {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-mid);
  background: #fff;
  box-shadow: var(--shadow-1);
  padding: 14px 16px 16px;
}
.cl-safety-padhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}
.cl-safety-padtitle {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cl-blue-deep);
}
.cl-safety-padallergy {
  font-size: 11px;
  font-weight: 600;
  color: color-mix(in srgb, var(--cl-red) 78%, var(--ink));
  background: var(--cl-red-wash);
  border: 1px solid color-mix(in srgb, var(--cl-red) 28%, #fff);
  border-radius: var(--r-pill);
  padding: 3px 10px;
}

/* a prescription line */
.cl-safety-drug {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 12px;
  border-radius: var(--r-mid);
  border: 1px solid var(--line-2);
}
.cl-safety-drug + .cl-safety-drug { margin-top: 8px; }
.cl-safety-drugname {
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cl-safety-drugsig {
  grid-row: 2;
  font-size: 11.5px;
  color: var(--ink-40);
  font-variant-numeric: tabular-nums;
}

/* rejected line — base = struck through, hard stop shown */
.cl-safety-drug--reject {
  background: var(--cl-red-wash);
  border-color: color-mix(in srgb, var(--cl-red) 26%, #fff);
  animation: clSafetyReject var(--cl-t) ease infinite both;
}
.cl-safety-drug--reject .cl-safety-drugname {
  color: var(--ink-40);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--cl-red) 70%, transparent);
  text-decoration-thickness: 2px;
  animation: clSafetyStrike var(--cl-t) ease infinite both;
}
.cl-safety-hardstop {
  grid-column: 1 / -1;
  grid-row: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cl-red);
  animation: clSafetyHardstop var(--cl-t) ease infinite both;
}
.cl-safety-hardstop-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--cl-red);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cl-red) 16%, transparent);
}

/* resolved line — base = picked, switched */
.cl-safety-drug--pick {
  background: var(--cl-blue-wash);
  border-color: color-mix(in srgb, var(--cl-blue) 32%, #fff);
  box-shadow: inset 3px 0 0 var(--cl-blue);
  animation: clSafetyPick var(--cl-t) ease infinite both;
}
.cl-safety-switched {
  align-self: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--mint) 82%, var(--ink));
  background: var(--cl-mint-wash);
  border: 1px solid color-mix(in srgb, var(--mint) 36%, #fff);
  border-radius: var(--r-pill);
  padding: 3px 10px;
}

/* ── the five-check gauntlet ── */
.cl-safety-checks {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.cl-safety-check {
  display: grid;
  grid-template-columns: 24px minmax(0, auto) 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-mid);
  border: 1px solid var(--line-2);
  background: #fff;
  /* base = final lit scene */
  opacity: 1;
}
.cl-safety-check--1 { animation: clSafetyChk1 var(--cl-t) ease infinite both; }
.cl-safety-check--2 { animation: clSafetyChk2 var(--cl-t) ease infinite both; }
.cl-safety-check--3 { animation: clSafetyChk3 var(--cl-t) ease infinite both; }
.cl-safety-check--4 { animation: clSafetyChk4 var(--cl-t) ease infinite both; }
.cl-safety-check--5 { animation: clSafetyChk5 var(--cl-t) ease infinite both; }

.cl-safety-check.is-clear {
  border-color: color-mix(in srgb, var(--mint) 30%, var(--line));
  background: var(--cl-mint-wash);
}
.cl-safety-check.is-notice {
  border-color: color-mix(in srgb, var(--cl-amber) 42%, var(--line));
  background: var(--cl-amber-wash);
}

.cl-safety-mark {
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.is-clear .cl-safety-mark { background: var(--mint); }
.is-notice .cl-safety-mark {
  background: var(--cl-amber);
  color: #5a3c22;
}
/* the mark pops in on the row's beat */
.cl-safety-check--1 .cl-safety-mark { animation: clSafetyPop1 var(--cl-t) ease infinite both; }
.cl-safety-check--2 .cl-safety-mark { animation: clSafetyPop2 var(--cl-t) ease infinite both; }
.cl-safety-check--3 .cl-safety-mark { animation: clSafetyPop3 var(--cl-t) ease infinite both; }
.cl-safety-check--4 .cl-safety-mark { animation: clSafetyPop4 var(--cl-t) ease infinite both; }
.cl-safety-check--5 .cl-safety-mark { animation: clSafetyPop5 var(--cl-t) ease infinite both; }

.cl-safety-checklabel {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.cl-safety-checkdetail {
  justify-self: end;
  font-size: 12px;
  color: var(--ink-60);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.is-notice .cl-safety-checkdetail {
  color: color-mix(in srgb, var(--cl-amber) 55%, var(--ink));
  font-weight: 600;
}

/* ── stage floor: Send Rx + audit ── */
.cl-safety-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
}
.cl-safety-send {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: default;
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  /* base = enabled */
  background: linear-gradient(180deg, var(--cl-blue), var(--cl-blue-deep));
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--cl-blue-deep) 70%, transparent);
  animation: clSafetySend var(--cl-t) ease infinite both;
}
.cl-safety-send-arrow {
  font-size: 14px;
  transform: translateY(0.5px);
}
.cl-safety-audit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-60);
  animation: clSafetyAudit var(--cl-t) ease infinite both;
}
.cl-safety-audit-k {
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cl-blue-deep);
}

/* ============================================================
   TIMELINE — one 14s cycle (each 1% ≈ 140ms)
   0–5    pad shows Amoxicillin, checks + send pending
   5–12   penicillin allergy HARD STOP · Amoxicillin struck
   14–22  pad resolves to Clindamycin ("switched")
   26/34/42/50/58  checks light: allergy · drug-drug(notice) · dose · PDMP · formulary
   66     "Send Rx" enables · 72 audit note
   92–100 hold, then soft reset
   ============================================================ */

@keyframes clSafetyReject {
  0%, 4%   { background: #fff; border-color: var(--line-2); }
  10%      { background: var(--cl-red-wash); border-color: color-mix(in srgb, var(--cl-red) 26%, #fff); }
  92%      { background: var(--cl-red-wash); }
  100%     { background: var(--cl-red-wash); border-color: color-mix(in srgb, var(--cl-red) 26%, #fff); }
}
@keyframes clSafetyStrike {
  0%, 5%   { color: var(--ink); text-decoration-color: transparent; }
  8%       { color: var(--ink); text-decoration-color: transparent; }
  12%      { color: var(--ink-40); text-decoration-color: color-mix(in srgb, var(--cl-red) 70%, transparent); }
}
@keyframes clSafetyHardstop {
  0%, 5%   { opacity: 0; transform: translateY(-4px); }
  11%      { opacity: 1; transform: none; }
}
@keyframes clSafetyPick {
  0%, 13%  { opacity: 0; transform: translateY(10px) scale(.98); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; border-width: 0; }
  22%      { opacity: 1; transform: none; max-height: 120px; padding-top: 10px; padding-bottom: 10px; margin-top: 8px; border-width: 1px; }
}

@keyframes clSafetyChk1 {
  0%, 22%  { opacity: 0; transform: translateY(8px); }
  27%      { opacity: 1; transform: none; }
}
@keyframes clSafetyChk2 {
  0%, 30%  { opacity: 0; transform: translateY(8px); }
  35%      { opacity: 1; transform: none; }
}
@keyframes clSafetyChk3 {
  0%, 38%  { opacity: 0; transform: translateY(8px); }
  43%      { opacity: 1; transform: none; }
}
@keyframes clSafetyChk4 {
  0%, 46%  { opacity: 0; transform: translateY(8px); }
  51%      { opacity: 1; transform: none; }
}
@keyframes clSafetyChk5 {
  0%, 54%  { opacity: 0; transform: translateY(8px); }
  59%      { opacity: 1; transform: none; }
}

@keyframes clSafetyPop1 {
  0%, 24%  { transform: scale(.2); opacity: 0; }
  28%      { transform: scale(1.18); opacity: 1; }
  32%      { transform: scale(1); }
}
@keyframes clSafetyPop2 {
  0%, 32%  { transform: scale(.2); opacity: 0; }
  36%      { transform: scale(1.18); opacity: 1; }
  40%      { transform: scale(1); }
}
@keyframes clSafetyPop3 {
  0%, 40%  { transform: scale(.2); opacity: 0; }
  44%      { transform: scale(1.18); opacity: 1; }
  48%      { transform: scale(1); }
}
@keyframes clSafetyPop4 {
  0%, 48%  { transform: scale(.2); opacity: 0; }
  52%      { transform: scale(1.18); opacity: 1; }
  56%      { transform: scale(1); }
}
@keyframes clSafetyPop5 {
  0%, 56%  { transform: scale(.2); opacity: 0; }
  60%      { transform: scale(1.18); opacity: 1; }
  64%      { transform: scale(1); }
}

@keyframes clSafetySend {
  0%, 63% {
    color: var(--ink-40);
    background: var(--paper);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  67% {
    color: #fff;
    background: linear-gradient(180deg, var(--cl-blue), var(--cl-blue-deep));
    box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--cl-blue-deep) 70%, transparent);
  }
  71%  { transform: scale(1.03); }
  75%  { transform: scale(1); }
}
@keyframes clSafetyAudit {
  0%, 68%  { opacity: 0; transform: translateY(6px); }
  74%      { opacity: 1; transform: none; }
}
@keyframes clSafetyLive {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mint) 40%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
  .cl-safety-grid { grid-template-columns: 1fr; gap: 40px; }
  .cl-safety-stage { max-width: 620px; }
}
@media (max-width: 560px) {
  .cl-safety-stage { padding: 16px 14px 16px; }
  .cl-safety-check { grid-template-columns: 22px minmax(0, auto) 1fr; padding: 8px 10px; }
  .cl-safety-checklabel { font-size: 13px; }
  .cl-safety-checkdetail { font-size: 11px; }
  .cl-safety-who { display: none; }
}

/* reduced motion — freeze on the final resolved scene
   (hard stop + soft notice both visible, Send Rx enabled) */
@media (prefers-reduced-motion: reduce), (max-width: 700px) {
  .cl-safety *,
  .cl-safety *::before,
  .cl-safety *::after {
    animation: none !important;
    transition: none !important;
  }
}