/* ============================================================
   RAR PHARMACOLOGY · UTI treatment selector styles.
   Scoped entirely under `.utrs` (the component root) so nothing leaks into or
   collides with the platform. Reproduces the approved prototype's visual
   semantics on the kit palette:
     · the persistent spine banner — amber "urine only" half vs teal
       "penetrates tissue" half
     · the lower / upper / none tract tag on every scenario button
     · first-line visually distinct from alternative (teal tint + teal rail vs
       plain card + amber rail)
     · the bold BLACK "If you remember one thing" ⭐ pick with the muted
       tie-breaker beneath it
     · red `avoid` lines held visually apart from the `why` text
     · the warn callout (red) distinct from the default (violet)
   Reader text black #111111. No purple/steel.

   Generated classes are `utrs-`-prefixed. The verbatim BRANCHES reveal markup
   keeps the prototype's bare class names (rx / first / top / why / avoid / dur /
   route / tier), styled here alongside their utrs- twins so the ported strings
   need no editing.
   ============================================================ */
.utrs {
  --utrs-ink:#111111; --utrs-muted:#5b6673; --utrs-line:#dfe4ea; --utrs-card:#ffffff;
  --utrs-teal:#0f766e; --utrs-teal-soft:#e4f1ef; --utrs-teal-line:#bcded8;
  --utrs-amber:#b45309; --utrs-amber-soft:#faeee0; --utrs-amber-line:#efcf9f;
  --utrs-green:#3f7d3f; --utrs-green-soft:#e9f2e6;
  --utrs-red:#a3312a; --utrs-red-soft:#fae9e7; --utrs-red-line:#eec4bf;
  --utrs-violet:#5b4b8a; --utrs-violet-soft:#ece9f5;
  --utrs-chip:#eef1f4; --utrs-chip-line:#d3dae1;
  color:var(--utrs-ink);
  display:block;
}
.utrs *{box-sizing:border-box}

/* ---------- the persistent spine banner ---------- */
.utrs .utrs-spine{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--utrs-line);
  border-radius:12px;overflow:hidden;margin:0 0 20px;background:var(--utrs-card)}
.utrs .utrs-spine__half{padding:12px 14px;font-size:13.5px;line-height:1.5}
.utrs .utrs-spine__half--urine{background:var(--utrs-amber-soft);border-right:1px solid var(--utrs-line)}
.utrs .utrs-spine__half--tissue{background:var(--utrs-teal-soft)}
.utrs .utrs-spine__lab{display:block;font-size:11.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:5px}
.utrs .utrs-spine__half--urine .utrs-spine__lab{color:var(--utrs-amber)}
.utrs .utrs-spine__half--tissue .utrs-spine__lab{color:var(--utrs-teal)}
.utrs .utrs-spine__body{display:block}
/* compact pills inside the banner so the two halves stay a tight strip */
.utrs .utrs-spine .mk-pill{font-size:12.5px;padding:2px 9px;margin:1px 0}
@media(max-width:700px){
  .utrs .utrs-spine{grid-template-columns:1fr}
  .utrs .utrs-spine__half--urine{border-right:0;border-bottom:1px solid var(--utrs-line)}
}

/* ---------- layout ---------- */
.utrs .utrs-layout{display:grid;grid-template-columns:252px 1fr;gap:22px;align-items:start}
@media(max-width:700px){.utrs .utrs-layout{grid-template-columns:1fr;gap:16px}}

/* ---------- scenario list ---------- */
.utrs .utrs-scenarios{display:flex;flex-direction:column;gap:8px}
.utrs .utrs-scenbtn{position:relative;width:100%;text-align:left;border:1px solid var(--utrs-line);
  background:var(--utrs-card);border-radius:10px;padding:11px 13px 11px 13px;font:inherit;
  color:var(--utrs-ink);cursor:pointer;transition:border-color .12s,background .12s,box-shadow .12s}
.utrs .utrs-scenbtn .utrs-s-name{display:block;font-weight:800;font-size:14.5px;padding-right:58px;
  line-height:1.3}
.utrs .utrs-scenbtn .utrs-s-sub{display:block;font-size:12.5px;color:var(--utrs-muted);margin-top:2px}
.utrs .utrs-scenbtn:hover{border-color:var(--utrs-teal-line);box-shadow:0 2px 8px rgba(17,17,17,.06)}
.utrs .utrs-scenbtn[aria-pressed="true"]{border-color:var(--utrs-teal);background:var(--utrs-teal-soft);
  box-shadow:inset 3px 0 0 var(--utrs-teal)}
.utrs .utrs-scenbtn:focus-visible{outline:2px solid var(--utrs-teal);outline-offset:2px}

/* tract tag — lower (amber) / upper (teal) / none (neutral) */
.utrs .utrs-tract{position:absolute;right:10px;top:11px;font-size:10px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:5px}
.utrs .utrs-tract--lower{background:#fdeecb;color:var(--utrs-amber)}
.utrs .utrs-tract--upper{background:#d7f5ef;color:var(--utrs-teal)}
.utrs .utrs-tract--none{background:var(--utrs-chip);color:var(--utrs-muted)}

/* ---------- the regimen panel ---------- */
.utrs .utrs-panel{background:var(--utrs-card);border:1px solid var(--utrs-line);border-radius:14px;
  padding:20px;min-height:260px}
.utrs .utrs-panel .utrs-eyebrow{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--utrs-teal);font-weight:800;margin:0 0 3px}
.utrs .utrs-panel .utrs-title{margin:0 0 5px;font-size:21px;font-weight:800;line-height:1.25;
  color:var(--utrs-ink);letter-spacing:-.01em}
.utrs .utrs-panel .utrs-crit{color:var(--utrs-muted);font-size:13.5px;line-height:1.5;margin:0 0 14px}
.utrs .utrs-empty{color:var(--utrs-muted);display:grid;place-items:center;min-height:220px;
  text-align:center;font-size:14px}

/* "If you remember one thing" — bold BLACK pick + muted tie-breaker */
.utrs .utrs-bd{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--utrs-teal-line);
  background:var(--utrs-teal-soft);border-radius:10px;padding:12px 14px;margin:0 0 12px}
.utrs .utrs-bd__star{font-size:16px;line-height:1.25}
.utrs .utrs-bd__body{flex:1;min-width:0}
.utrs .utrs-bd__lab{display:block;font-size:11px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--utrs-teal);margin-bottom:3px}
.utrs .utrs-bd__pick{display:block;font-weight:800;color:var(--utrs-ink);font-size:15.5px;line-height:1.35}
.utrs .utrs-bd__tie{display:block;color:var(--utrs-muted);font-size:12.5px;line-height:1.5;margin-top:5px}

/* callouts — default violet, warn red */
.utrs .utrs-callout{border-radius:10px;padding:11px 13px;font-size:13.5px;line-height:1.55;margin:0 0 14px;
  border:1px solid #d9d2ea;background:var(--utrs-violet-soft);color:var(--utrs-ink)}
.utrs .utrs-callout b{color:var(--utrs-violet)}
.utrs .utrs-callout--warn{background:var(--utrs-red-soft);border-color:var(--utrs-red-line)}
.utrs .utrs-callout--warn b{color:var(--utrs-red)}

/* ---------- regimen rows (first-line vs alternative) ---------- */
.utrs .utrs-rx,
.utrs .rx{border:1px solid var(--utrs-line);border-left:4px solid var(--utrs-chip-line);
  border-radius:11px;padding:12px 13px;margin:0 0 10px;background:var(--utrs-card)}
.utrs .utrs-rx--first,
.utrs .rx.first{border-color:var(--utrs-teal-line);border-left-color:var(--utrs-teal);
  background:var(--utrs-teal-soft)}
.utrs .utrs-rx--alt{border-left-color:var(--utrs-amber-line)}
.utrs .utrs-rx__top,
.utrs .top{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:6px}

/* tier / duration / route chips */
.utrs .utrs-tier,
.utrs .tier{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.utrs .utrs-tier--f,
.utrs .tier.f{color:var(--utrs-teal)}
.utrs .utrs-tier--a,
.utrs .tier.a{color:var(--utrs-amber)}
.utrs .utrs-dur,
.utrs .dur{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;padding:2px 8px;border-radius:6px;
  background:var(--utrs-green-soft);color:var(--utrs-green)}
.utrs .utrs-route,
.utrs .route{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;padding:2px 8px;border-radius:6px;
  background:var(--utrs-chip);color:var(--utrs-muted)}
.utrs .utrs-rx__why,
.utrs .why{font-size:13.5px;line-height:1.55;color:var(--utrs-muted);margin-top:3px}

/* avoid lines — visually separated from the why text */
.utrs .utrs-rx__avoid,
.utrs .avoid{font-size:13px;line-height:1.5;color:var(--utrs-red);font-weight:700;margin-top:8px;
  padding:6px 10px;border-left:3px solid var(--utrs-red-line);border-radius:0 7px 7px 0;
  background:var(--utrs-red-soft)}

/* the drug pills the component renders are real kit .mk-pill / .cav-term —
   only their in-row rhythm is set here */
.utrs .utrs-rx__top .mk-pill,
.utrs .top .mk-pill{font-size:13.5px}
.utrs .utrs-plain{font-weight:700}

/* ---------- the conditional sub-branch ---------- */
.utrs .utrs-branch{margin-top:16px;border-top:1px solid var(--utrs-line);padding-top:14px}
.utrs .utrs-branch__q{margin:0 0 9px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  font-weight:800;color:var(--utrs-muted)}
.utrs .utrs-chips{display:flex;flex-wrap:wrap;gap:8px}
.utrs .utrs-chip{border:1px solid var(--utrs-line);background:var(--utrs-card);border-radius:9px;
  padding:8px 13px;font:inherit;font-size:13px;font-weight:700;color:var(--utrs-ink);cursor:pointer;
  transition:border-color .12s,background .12s}
.utrs .utrs-chip:hover{border-color:var(--utrs-teal-line)}
.utrs .utrs-chip[aria-pressed="true"]{border-color:var(--utrs-teal);background:var(--utrs-teal-soft)}
.utrs .utrs-chip:focus-visible{outline:2px solid var(--utrs-teal);outline-offset:2px}
.utrs .utrs-out{margin-top:12px}
.utrs .utrs-out-hint{color:var(--utrs-muted);font-size:13px}

@media(max-width:700px){
  .utrs .utrs-panel{padding:16px}
  .utrs .utrs-panel .utrs-title{font-size:19px}
}
@media(prefers-reduced-motion:reduce){.utrs *{transition:none!important}}