/* Hip blocks page: anatomy figures, comparison table and the fracture chooser (prefix hp-).
   Shared styles (linked from index.html): ../../shared/regional/css/regional.css and ../shared/css/lowerlimb.css. */
.tb-app .hp-fig{margin:24px 0 10px;max-width:760px}
.tb-app main .hp-fig-title{font:400 22px/1.3 var(--tb-serif);margin:0 0 10px}
.tb-app .hp-fig-stage{border:1px solid var(--tb-line);background:#fbf9f4;padding:8px}
.tb-app .hp-fig-svg{display:block;width:100%;height:auto;max-width:520px;margin:0 auto}
.tb-app .hp-fig figcaption,.tb-app .hp-fx figcaption{margin-top:10px;font-size:15px;line-height:1.6;color:var(--tb-ink-soft);max-width:68ch}
.tb-app main .hp-legend{margin:12px 0 0;padding-left:1.6em;font-size:16px}
.tb-app main .hp-legend li{margin:0 0 6px}
.tb-app main .hp-legend li::marker{color:#2c74b3;font-weight:700}

/* supra- versus infra-inguinal table */
.tb-app .hp-cmp{min-width:0}
.tb-app .hp-cmp th[scope=row]{white-space:nowrap}

/* fracture chooser */
.tb-app .hp-fx{margin:20px 0 10px}
.tb-app .hp-fx-grid{display:grid;gap:16px 32px;align-items:start}
@media (min-width:860px){.tb-app .hp-fx-grid{grid-template-columns:minmax(240px,320px) minmax(0,1fr)}}
.tb-app .hp-fx-fig .hp-fig-svg{max-width:300px}
.tb-app .hp-fx-seg{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.tb-app .hp-fx-seg .tb-seg-btn{flex:1 1 calc(50% - 8px);min-width:0;text-align:center}
.tb-app main .hp-fx-title{font:400 22px/1.3 var(--tb-serif);margin:0 0 8px}
.tb-app .hp-fx-out{border-top:1px solid var(--tb-line);padding-top:12px;animation:hp-fade .35s ease}
.tb-app .hp-fx-dl{margin:0}
.tb-app .hp-fx-dl>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 14px;padding:8px 0;border-bottom:1px solid var(--tb-line)}
.tb-app .hp-fx-dl dt{font:400 12px/1.6 var(--tb-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--tb-muted);padding-top:3px}
.tb-app .hp-fx-dl dd{margin:0;font-size:16px;line-height:1.55}
@media (max-width:420px){.tb-app .hp-fx-dl>div{grid-template-columns:1fr}.tb-app .hp-fx-dl dt{padding-top:0}}
.tb-app .hp-fz{transition:fill .45s ease}
.tb-app .hp-fz.is-on{fill:rgba(161,42,28,.28);animation:hp-pulse 2.4s ease-in-out infinite}
@keyframes hp-pulse{0%,100%{fill:rgba(161,42,28,.22)}50%{fill:rgba(161,42,28,.42)}}
@keyframes hp-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tb-app .hp-fz.is-on{animation:none}.tb-app .hp-fx-out{animation:none}}
.tb-app .hp-fig .ll-fig-svg{display:block;width:100%;max-width:240px;height:auto;margin:0 auto}

/* Coverage maps here show one front view of the whole leg: cap the size so a hip-only map doesn't fill a phone screen. */
.tb-app .ll-cov-views--1{max-width:170px;margin:0 auto}
@media (min-width:1000px){.tb-app .ll-cov-views--1{max-width:200px}}
/* Phones: thinner figure padding so the 360-unit drawings keep their labels at 12px or more */
@media (max-width:480px){.tb-app .hp-fig-stage{padding:2px}}