/* ===========================================================================
   Slide 02 — "Where health system ambulatory loses money"
   Scoped under .s-leak. Everything here is additive to styles.css; no shared
   class is redefined. Two colors carry meaning and nothing else does:
   --pos for what got collected; the shortfall is the same bar, faded out.
   =========================================================================== */

/* --pos is Superscript blue (the deck's own --blue, #0098ff). The uncollected
   segment is not a second hue — it is the same bar fading out, so the eye reads
   the shortfall as absence rather than as an error state. */
.s-leak { --pos: var(--blue); }

.s-leak .wrap { display: flex; flex-direction: column; height: 100%; justify-content: center; }
.s-leak .title { font-size: clamp(22px, 2.5vw, 42px); max-width: 24ch; }
.s-leak .sub { font-size: clamp(12.5px, 1.05vw, 17px); margin-top: 12px; max-width: 78ch; line-height: 1.5; }
.s-leak .sub b { font-weight: 400; color: #fff; }
.s-leak .sub b.hot { color: rgba(255,255,255,.8); }

/* ---- headline stat pair, sitting to the right of the title ---- */
/* Same track sizes and gap as .leak below, so the stat pair sits on the ladder
   column's left edge instead of floating against the right margin. */
.leakhead { display: grid; grid-template-columns: 1.42fr 1fr; gap: clamp(24px, 3.4vw, 62px); align-items: end; }
.leakhead__l { min-width: 0; }
.leakhead__stats { display: flex; justify-content: flex-start; gap: clamp(18px, 2.4vw, 40px); min-width: 0; padding-bottom: 4px; padding-left: clamp(18px, 2.2vw, 40px); }  /* matches .leak__col--ladder's padding so the stats align to its heading text, not its divider */
.lkstat { display: flex; flex-direction: column; gap: 4px; }
.lkstat__k { font-size: 10px; letter-spacing: .14em; color: rgba(255,255,255,.45); }
.lkstat__v { font-size: clamp(26px, 3.2vw, 50px); font-weight: 400; letter-spacing: -.015em; line-height: 1; font-variant-numeric: tabular-nums; }
.lkstat--lost .lkstat__v { color: #fff; }
.lkstat--rate .lkstat__v { color: var(--pos); }

/* ---- two-column body ---- */
.leak { display: grid; grid-template-columns: 1.42fr 1fr; gap: clamp(24px, 3.4vw, 62px); margin-top: clamp(16px, 2.6vh, 34px); align-items: start; min-height: 0; }
.leak__cap { font-size: 10px; font-weight: 600; letter-spacing: .14em; color: #fff; display: flex; justify-content: space-between; gap: 12px; padding-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.16); }
.leak__foot { font-size: 10px; letter-spacing: .04em; line-height: 1.6; color: rgba(255,255,255,.55); margin-top: 12px; }

/* ---- ranked service-line rows ---- */
.lkrow {
  display: grid; grid-template-columns: minmax(0, 15.5em) 1fr auto;
  align-items: center; gap: clamp(10px, 1.2vw, 20px);
  padding: clamp(5px, .85vh, 9px) 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.lkrow:last-child { border-bottom: none; }
.lkrow__name { font-size: clamp(11px, .95vw, 15px); color: rgba(255,255,255,.86); line-height: 1.2; }
.lkrow__bar { position: relative; display: flex; height: clamp(13px, 1.5vh, 18px); border-radius: 1px; overflow: hidden; background: rgba(255,255,255,.05); }
.lkrow__got, .lkrow__lost { display: block; width: 0; height: 100%; transition: width 1s cubic-bezier(.22,1,.36,1); }
.lkrow__got { background: linear-gradient(90deg, var(--pos), rgba(0,152,255,.72)); }
.lkrow__lost {
  background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.035));
  transition-delay: .1s;
}
.lkrow.is-in .lkrow__got { width: var(--w); }
.lkrow.is-in .lkrow__lost { width: var(--w); }
.lkrow__pct {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  font-size: 10px; font-weight: 600; color: #fff; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .5s ease .55s;
  text-shadow: 0 0 6px rgba(0,0,0,.4);
}
.lkrow.is-in .lkrow__pct { opacity: 1; }
.lkrow__lost-amt {
  font-size: clamp(10.5px, .92vw, 14px); color: rgba(255,255,255,.62); text-align: right;
  min-width: 6.4em; font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateX(6px); transition: opacity .5s ease .5s, transform .5s ease .5s;
}
.lkrow.is-in .lkrow__lost-amt { opacity: 1; transform: none; }
.lkrow__lost-amt[data-heavy="true"] { color: #fff; }

/* ---- cost-share ladder ---- */
.leak__col--ladder { border-left: 1px solid rgba(255,255,255,.12); padding-left: clamp(18px, 2.2vw, 40px); }
.lkl { margin-top: clamp(9px, 1.5vh, 16px); opacity: 0; transform: translateY(10px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.lkl.is-in { opacity: 1; transform: none; }
.lkl__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lkl__type { font-size: clamp(11px, .95vw, 15px); color: #fff; }
.lkl__pct { font-size: clamp(11px, .95vw, 15px); color: rgba(255,255,255,.8); font-variant-numeric: tabular-nums; }
.lkl__track { display: block; height: 4px; margin-top: 6px; background: rgba(255,255,255,.08); border-radius: 1px; overflow: hidden; }
.lkl__fill { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--pos), rgba(0,152,255,.32)); transition: width .95s cubic-bezier(.22,1,.36,1) .12s; }
.lkl.is-in .lkl__fill { width: var(--w); }
.lkl__note { display: block; font-size: clamp(9.5px, .8vw, 12px); color: rgba(255,255,255,.55); margin-top: 5px; line-height: 1.35; }

.lkl__punch { font-size: clamp(11.5px, 1vw, 16px); line-height: 1.45; color: rgba(255,255,255,.78); margin-top: clamp(12px, 2vh, 22px); padding-top: clamp(10px, 1.6vh, 16px); border-top: 1px solid rgba(255,255,255,.16); }
/* White, not --pos. On mobile styles.css unpins slides to height:auto, so this
   tall slide runs past the deckbg's dark band and its footer sits over the blue
   one — a blue figure here disappears entirely. White holds on both. */
.lkl__punch b { font-weight: 600; color: #fff; }
.lkl__punch em { font-style: normal; color: #fff; }

@media (max-width: 1100px) {
  .leak { grid-template-columns: 1fr; gap: 22px; }
  .leak__col--ladder { border-left: none; border-top: 1px solid rgba(255,255,255,.12); padding-left: 0; padding-top: 18px; }
  .leakhead { grid-template-columns: 1fr; gap: 16px; }
  .leakhead__stats { padding-left: 0; }
  .leakhead__stats { gap: 22px; }
}
@media (max-width: 700px) {
  /* below 1100px styles.css already unpins the deck (.slide height:auto, no scroll-snap),
     so the full ranking just grows the page rather than needing an inner scroller or a
     truncated top-N — a cut-off ranking would read as "these are all the departments". */
  .s-leak .wrap { justify-content: flex-start; }
  .lkrow { grid-template-columns: 1fr auto; grid-template-areas: "name amt" "bar bar"; gap: 5px 10px; }
  .lkrow__name { grid-area: name; }
  .lkrow__lost-amt { grid-area: amt; min-width: 0; }
  .lkrow__bar { grid-area: bar; }
  .s-leak .sub { font-size: 12px; }
}