/* Triage card component — three tiers of urgency, from "call 999" down to
   "this is normal". Reusable anywhere a lesson teaches red flags: early
   pregnancy, third trimester, labour, newborn.

   Markup contract:
     <div class="triage">
       <div class="tier now">      <!-- .now | .soon | .fine -->
         <div class="tier-head"><span class="tier-action">999</span>
           <span class="tier-when">Right now</span></div>
         <ul><li>…</li></ul>
       </div>
     </div>
   No JavaScript. Prints as a fridge-door card. */

.triage { margin: 1.8rem 0; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; background: #fff; }

.triage .tier { padding: 1rem 1.2rem; border-top: 1px solid var(--rule); border-left: 5px solid var(--rule); }
.triage .tier:first-child { border-top: 0; }

.triage .tier-head { display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.triage .tier-action {
  font-family: var(--sans); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.18rem 0.5rem; border-radius: 3px; color: #fff; white-space: nowrap;
}
.triage .tier-when {
  font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.13em;
  text-transform: uppercase; font-weight: 650; color: var(--ink-faint);
}

.triage ul { margin: 0; padding-left: 1.15rem; }
.triage li { font-size: 0.94rem; line-height: 1.5; margin-bottom: 0.35rem; }
.triage li:last-child { margin-bottom: 0; }
.triage .tier > p { font-family: var(--sans); font-size: 0.84rem; color: var(--ink-soft); margin: 0.6rem 0 0; }

/* Tier 1 — emergency */
.triage .tier.now { border-left-color: #a02c1f; background: #fdf4f2; }
.triage .tier.now .tier-action { background: #a02c1f; }
/* Tier 2 — same day, but not an emergency */
.triage .tier.soon { border-left-color: var(--warn); background: #fdf8ee; }
.triage .tier.soon .tier-action { background: var(--warn); }
/* Tier 3 — normal, no call needed */
.triage .tier.fine { border-left-color: var(--good); }
.triage .tier.fine .tier-action { background: var(--good); }

@media print {
  .triage { break-inside: avoid; border-color: #999; }
  .triage .tier.now, .triage .tier.soon { background: #fff; }
  .triage .tier-action { color: #000; background: none !important; border: 1.2px solid #000; padding: 0.1rem 0.4rem; }
}