/* ===========================================================================
   SCA Health — ASC slides, scoped styles.
   Slides: .s-anat (05 "Anatomy of a surgical balance", dark zone) and the
   animated Good Faith Estimate phone on .s-store (08, blue zone).
   Additive to styles.css; no shared class is redefined.
   Same visual language as the rest of the deck: dashed hairlines, mono
   eyebrows and captions, --blue as the single accent.
   =========================================================================== */

/* ===== 05 — Anatomy of a surgical balance ===== */
.s-anat .wrap { display: flex; flex-direction: column; height: 100%; justify-content: center; }
.s-anat .title { font-size: clamp(22px, 2.5vw, 42px); }
.anat { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 3.4vw, 62px); margin-top: clamp(16px, 2.6vh, 30px); align-items: start; }
.anat__receipt { max-width: none; font-size: clamp(9.5px, .9vw, 12.5px); }
.anat__receipt .receipt__row { grid-template-columns: auto 1fr auto minmax(74px, auto); }
.anat-fullrow { grid-column: 1 / 3; color: rgba(255,255,255,.7); }
.tag.anat-t1 { background: rgba(0,152,255,.18); color: #7fc6ff; }
.tag.anat-t2 { background: rgba(255,180,64,.18); color: #ffc670; }
.tag.anat-t3 { background: rgba(167,139,250,.2); color: #c9b6ff; }
.anat__whys { display: flex; flex-direction: column; gap: 10px; margin-top: clamp(12px, 2vh, 20px); }
.anat__why { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: baseline; }
.anat__why b { font-size: 10px; letter-spacing: .1em; color: var(--blue); font-weight: 400; }
.anat__why span { font-size: clamp(11px, .98vw, 14px); color: rgba(255,255,255,.65); line-height: 1.45; }
.anat__mech { margin-top: clamp(12px, 2vh, 20px); padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.18); font-size: clamp(12px, 1.05vw, 15.5px); color: #fff; line-height: 1.5; max-width: 58ch; }
.anat__col--bands { border-left: 1px dashed rgba(255,255,255,.2); padding-left: clamp(18px, 2.2vw, 40px); align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
/* adjudication loop states */
.anrow { opacity: 0; transform: translateY(5px); transition: opacity .45s ease, transform .45s ease; }
.anrow.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .anrow { opacity: 1; transform: none; } }
.andot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ffcf5c; box-shadow: 0 0 8px #ffcf5c; margin: 0 4px 0 10px; animation: pcDotPulse 1s ease-in-out infinite; vertical-align: 1px; }
.andot.resolved { background: #4ade80; box-shadow: 0 0 8px #4ade80; animation: none; }
#anStat { color: rgba(255,255,255,.55); letter-spacing: .06em; }

.anatproto { display: flex; flex-direction: column; gap: clamp(14px, 2.4vh, 24px); margin: clamp(12px, 2vh, 20px) 0; }
.anatproto__row { opacity: .45; border-left: 2px solid transparent; padding-left: 13px; margin-left: -15px; transition: opacity .5s ease, border-color .5s ease; }
.anatproto__row.is-live { opacity: 1; border-left-color: var(--blue); }
@media (prefers-reduced-motion: reduce) { .anatproto__row { opacity: 1; } }
.anatproto__k { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.anatproto__k .tag { font-size: 8.5px; }
.anatproto__k b { font-size: 12px; letter-spacing: .08em; color: var(--blue); font-weight: 400; }
.anatproto__row p { font-size: clamp(12px, 1.05vw, 15px); line-height: 1.5; color: #fff; max-width: 46ch; }
.anatproto__row p em { font-style: normal; color: rgba(255,255,255,.55); display: block; }

/* ===== 08 — Patient GFE phone (animated) ===== */
/* SMS notification screen (real product capture) sits behind; in front, a live DOM
   phone builds the line-item Good Faith Estimate: CPT rows reveal, expected charges
   sum, the patient share resolves, and the pay button arms. Figures compute in
   sp-asc.js from the same SPA_CASE constants as the anatomy slide. */
.phones { position: relative; display: flex; align-items: center; justify-content: center; }
.phones__sms { height: clamp(300px, 46vh, 480px); width: auto; filter: drop-shadow(0 24px 50px rgba(0,20,55,.35)); transform: rotate(-5deg) translateX(34px); z-index: 0; }
.s-store .store__visual .phones { animation: floaty 7s ease-in-out 1.3s infinite alternate; }

/* Real phone proportions (~1:2.05 incl. bezel). Width and height carry matched clamps on
   the same 34vh scale (percentage padding-top is NOT usable here: it resolves against the
   parent's width, not the element's own, and blew the phone up to column width). Content
   lives in an inner screen that scrolls if it overflows — sp-asc.js glides to the pay
   button at the end of each loop. */
.gfe { position: relative; z-index: 1; width: clamp(260px, 34vh, 310px); height: clamp(533px, 69.7vh, 635px); background: #101014; border-radius: 44px; box-shadow: 0 30px 60px rgba(0,20,55,.4); color: #14141c; font-family: var(--sans); transform: rotate(2deg) translateX(-12px); }
.gfe__screen { position: absolute; inset: 9px; background: #fff; border-radius: 36px; padding: 44px 17px 16px; overflow: hidden; display: flex; flex-direction: column; scroll-behavior: smooth; }
.gfe__notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 84px; height: 20px; border-radius: 12px; background: #101014; }
.gfe__brand { font-size: 15px; font-weight: 700; text-align: center; margin-bottom: 4px; }
.gfe__meta { display: flex; justify-content: space-between; font-size: 10px; color: rgba(20,20,28,.65); border-bottom: 1px solid rgba(20,20,28,.12); padding: 12px 0 8px; }
.gfe__items { min-height: 100px; padding: 6px 0; }
.gfe__item { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; align-items: baseline; padding: 7px 0; opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; }
.gfe__item.is-in { opacity: 1; transform: none; }
.gfe__code { font-size: 9px; color: var(--blue-deep); }
.gfe__desc { font-size: 10.5px; color: rgba(20,20,28,.85); }
.gfe__amt { font-size: 10.5px; font-variant-numeric: tabular-nums; }
.gfe__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid rgba(20,20,28,.12); padding: 8px 0; font-size: 10.5px; color: rgba(20,20,28,.65); }
.gfe__total b { font-family: var(--mono); font-size: 12px; color: #14141c; font-variant-numeric: tabular-nums; }
.gfe__share { background: #f3f6f9; border-radius: 10px; padding: 11px 12px; margin-top: 6px; opacity: .35; transition: opacity .5s ease; }
.gfe__share.is-in { opacity: 1; }
.gfe__sharerow { display: flex; justify-content: space-between; align-items: baseline; font-size: 10.5px; font-weight: 600; }
.gfe__sharerow b { font-family: var(--mono); font-size: 17px; font-variant-numeric: tabular-nums; }
.gfe__explain { font-size: 8.5px; color: rgba(20,20,28,.6); line-height: 1.45; margin-top: 4px; min-height: 2.9em; }
.gfe__pay { display: block; width: 100%; flex-shrink: 0; border: none; border-radius: 12px; margin-top: auto; padding: 13px 0; background: rgba(16,16,20,.25); color: #fff; font-family: var(--sans); font-size: 12px; font-weight: 600; transition: background .4s ease; cursor: default; }
.gfe__pay.is-armed { background: #101014; }
.gfe__fine { font-size: 7.5px; line-height: 1.5; color: rgba(20,20,28,.45); margin-top: 10px; flex-shrink: 0; }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .anat { grid-template-columns: 1fr; gap: 28px; }
  .anat__col--bands { border-left: none; padding-left: 0; border-top: 1px dashed rgba(255,255,255,.25); padding-top: 20px; }
  .s-anat { min-height: auto; }
  .s-anat .wrap { justify-content: flex-start; }
}

/* The two phones are sized off vh on desktop, which at a narrow viewport makes the pair
   wider than the stacked single column it now sits in — at 375px the group measured 454px
   against a 319px container and clipped off both edges. Shrinking both to fit was worse:
   at ~196px the GFE's line items wrap to three lines each, the flex children below them
   shrink, and "Expected charges" overlaps the item rows. Below 700px the SMS phone is
   dropped instead (its notification text is unreadable at that scale anyway) and the GFE
   keeps its desktop size, which is the part of the composition the slide is actually about.
   Measure the rendered .phones rect against .store__visual after any change here. */
@media (max-width: 700px) {
  .phones__sms { display: none; }
  .gfe { transform: rotate(2deg); }
}