/* ============================================================
   SHARED · StepLadder — a staged progression as connected cards
   (prefix: ladder-)

   For anything that ESCALATES or PROGRESSES in ordered stages, where
   each stage is "the situation" and the answer is "what you give":
     · resistance ladders   (drug-susceptible → MDR → pre-XDR → XDR)
     · disease staging      (stage 1 → 4)
     · acuity / timeline    (acute → subacute → chronic)
     · escalation of care   (outpatient → ward → ICU)

   Shape of ONE step, top to bottom:
     [①]  SITUATION  (big black title — what state the patient is in)
          sub        (the defining criterion, e.g. "resistant to INH + RIF")
          [drug pills]  (what you give — directly under the situation)
          note       (the why / duration)

   Steps sit side by side and read left→right, with a connector between
   them; they stack vertically on narrow screens (connector rotates).
   Pure CSS — no JS, no behavior. Reader text black #111111.

   Markup contract:
     <ol class="ladder" data-ladder>
       <li class="ladder-step ladder-step--t1">
         <span class="ladder-step__num">1</span>
         <p class="ladder-step__title">Drug-susceptible TB</p>
         <p class="ladder-step__sub">no resistance</p>
         <div class="ladder-step__drugs"> …mk-pill drugs… </div>
         <p class="ladder-step__note">6 months.</p>
       </li>
       …
     </ol>
   Tone modifiers --t1…--t4 tint the rail from calm → severe.
   ============================================================ */

.ladder {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 26px 22px;
    align-items: stretch;
}

.ladder-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 14px 14px 15px;
    border: 1px solid var(--line, rgba(15, 23, 42, 0.12));
    border-radius: 14px;
    background: #fff;
    /* the escalating rail — tinted per tone modifier */
    border-top: 4px solid var(--ladder-tone, #94a3b8);
}

/* connector: each step points at the next one. Hidden on the last step and
   whenever the grid wraps to a new row is not detectable in CSS, so the arrow
   is drawn in the GAP — harmless if a row breaks. */
.ladder-step::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: -17px;
    transform: translateY(-50%);
    font-size: 15px;
    font-weight: 700;
    color: #9aa3b0;
    pointer-events: none;
}
.ladder-step:last-child::after { content: none; }

.ladder-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ladder-tone, #94a3b8);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    flex: 0 0 auto;
}

/* the SITUATION is the title — big + black, outranking everything in the card */
.ladder-step__title {
    margin: 0;
    font-size: 15.5px;
    font-weight: 800;
    color: var(--text, #111111);
    line-height: 1.3;
}
.ladder-step__title .cav-term {
    color: var(--text, #111111);
    font-weight: 800;
    background: none;
    border: 0;
    padding: 0;
    text-decoration: none;
    border-bottom: 2px dotted rgba(17, 17, 17, 0.5);
}

/* the defining criterion, right under the situation */
.ladder-step__sub {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #5b6b86;
    font-weight: 600;
}

/* WHAT YOU GIVE — sits directly below the situation, per the pattern */
.ladder-step__drugs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px dashed rgba(15, 23, 42, 0.12);
}
.ladder-step__drugs-label {
    flex: 0 0 100%;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8a93a0;
    margin-bottom: 3px;
}

.ladder-step__note {
    margin: 2px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #111111;
}

/* escalating tones: calm → severe */
.ladder-step--t1 { --ladder-tone: #3f9d6d; }
.ladder-step--t2 { --ladder-tone: #d9a13b; }
.ladder-step--t3 { --ladder-tone: #dd7a3a; }
.ladder-step--t4 { --ladder-tone: #c94b4b; }

@media (max-width: 720px) {
    .ladder { gap: 22px 0; }
    .ladder-step::after {
        top: auto;
        right: 50%;
        bottom: -18px;
        transform: translateX(50%) rotate(90deg);
    }
}