/* ============================================================
   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; }

/* The connector sits 17px OUTSIDE each step's right edge, which is fine for a
   step in the middle of a row but sticks out past the grid for the last step in
   a row that is not the last step overall. In a full-width ladder nobody
   notices; in a narrow column (a .mk-fig-row__text beside a figure) it pushes
   the row 16px wider than its container and the whole card overflows
   horizontally. Clip it: that arrow points at a step on the NEXT line anyway,
   so hiding it is also the correct reading. `clip` (not `hidden`) so no scroll
   container is created and vertical overflow still shows. Fixed 2026-09-13. */
.ladder { overflow-x: clip; }

.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

   WHY THE DOUBLED CLASS SELECTORS on this block and the two below: every
   ladder part is written on a <p>, and the app-wide

       .topic-section-card p { font-size: 15px }   (0,1,1)

   in modules/modules.css OUTRANKS a single class (0,1,0). On any page built
   from .topic-section-card — which is every topic page — the title was being
   pulled DOWN to 15px and the sub and note pushed UP to 15px, so all three
   collapsed to body size and the ladder's hierarchy vanished. Nothing errors;
   the ladder just reads flat. Same bug class as .mk-group__title, which
   micro-kit.css already solves the same way. Measured and fixed 2026-09-13 on
   GIN Anatomy A01; the title was 15px against 15px body text.

   The title is also raised 15.5px -> 17px to match .mk-factor__name, so it
   genuinely outranks the 15px body rather than tying it. */
.ladder-step__title.ladder-step__title {
    margin: 0;
    font-size: 17px;
    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.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.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);
    }
}