/* ===========================================================================
   Centers for Advanced Orthopaedics — surgical slide, scoped styles.
   Slide: .s-anat (05 "Anatomy of a surgical balance", dark zone).
   Ported from the SCA deck with the GFE phone rules removed.
   Additive to styles.css; no shared class is redefined.
   =========================================================================== */

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

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