/* A clearer visual journey; chemistry, provenance and first alerts stay visible. */
#retro { --rx-spark: #c5933f; }
#retro .rx-step {
  padding: 1.35rem 1.15rem;
  border-radius: 24px;
  border-color: rgba(31,137,117,.22);
  background: var(--bg, #fff);
  background: linear-gradient(145deg,rgba(37,177,156,.055),transparent 45%),var(--bg,#fff);
  box-shadow: 0 10px 30px rgba(15,74,61,.055);
  overflow: hidden;
}
#retro .rx-step::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 4px;
  background: linear-gradient(#179e89, #55bcb7 55%, #d5ad61);
}
#retro .rx-step-final { border: 1px solid #1b9885; box-shadow: 0 10px 32px rgba(22,139,117,.12); }
#retro .rx-stephead { gap: .5rem; align-items: flex-start; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
#retro .rx-stepno { border-radius: 999px; padding: .28rem .65rem; background: var(--accent,#0f6e56); color: #fff; font-size: .68rem; }
#retro .rx-rxn { border: 0; padding: 0; margin: 0; text-transform: none; letter-spacing: 0; font-size: 1.03rem; font-weight: 750; color: var(--fg); line-height: 1.4; }
#retro .rx-cat { margin: 0; background: rgba(32,155,145,.09); color: var(--accent); }
#retro .rx-row { gap: .85rem; }
#retro .rx-cell { width: 175px; border-radius: 15px; padding: .4rem; box-sizing: border-box; }
#retro .rx-cell.product { width: 230px; }
#retro .rx-mol { border-radius: 12px; border-color: rgba(30,128,111,.18); }
#retro .rx-name { margin-top: .4rem; font-size: .78rem; }
#retro .rx-lbl { margin-top: .7rem; font-size: .64rem; letter-spacing: .07em; }
#retro .rx-arrow { color: #179e89; margin: .7rem 0; }
#retro .rx-connector { display: grid; place-items: center; margin: .4rem auto; width: 38px; height: 38px; border: 1px solid rgba(197,147,63,.4); border-radius: 50%; background: rgba(197,147,63,.09); color: var(--accent); opacity: 1; }
#retro .rx-cond { border-radius: 10px; background: rgba(30,147,130,.065); padding: .7rem .8rem; line-height: 1.6; }
#retro .rx-haz { border-left: 2px solid #b88632; border-radius: 8px; background: rgba(184,134,50,.055); color: var(--fg); font-weight: 400; padding: .45rem .7rem; }
#retro .rx-haz-repeat { margin: .5rem 0; font-size: .72rem; color: var(--muted); }
#retro .rx-haz-repeat summary { cursor: pointer; color: #956316; font-weight: 650; }
#retro .rx-haz-repeat:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
#retro .rx-chip { border-radius: 16px; padding: .7rem .9rem; background: var(--bg,#fff); min-width: 165px; }
#retro .rx-chip.on { background: linear-gradient(125deg,#124e43,#117b70); color: #fff; box-shadow: 0 5px 15px rgba(15,110,86,.18); }
#retro .rx-summary { border-radius: 15px; padding: .8rem 1rem; }
#retro .rx-analysis-primary { background: linear-gradient(115deg,#114b43,#117a70); border: 1px solid rgba(197,147,63,.6); border-radius: 18px; box-shadow: 0 7px 24px rgba(15,110,86,.13); }
#retro .rx-analysis-primary:hover { box-shadow: 0 9px 28px rgba(15,110,86,.22); }
#retro .rx-ra-step { border-radius: 18px; }
#retro .rx-step :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media(max-width:600px) {
  #retro .rx-step { padding: 1rem .7rem; border-radius: 19px; }
  #retro .rx-row { gap: .5rem; }
  #retro .rx-cell { width: 145px; }
  #retro .rx-cell.product { width: 200px; }
  #retro .rx-chip { min-width: 0; flex: 1 1 135px; }
}