/* Knee blocks page: anatomy figures and the motor-sparing plan builder (prefix kn-).
   Shared styles: ../../shared/regional/css/regional.css and ../shared/css/lowerlimb.css. */
.tb-app .kn-fig{margin:24px 0 10px;max-width:760px}
.tb-app main .kn-fig-title{font:400 22px/1.3 var(--tb-serif);margin:0 0 10px}
.tb-app .kn-fig-stage{border:1px solid var(--tb-line);background:#fbf9f4;padding:8px}
.tb-app .kn-fig-svg{display:block;width:100%;height:auto;max-width:520px;margin:0 auto}
.tb-app .kn-fig figcaption,.tb-app .kn-plan>figcaption{margin-top:10px;font-size:15px;line-height:1.6;color:var(--tb-ink-soft);max-width:68ch}
.tb-app main .kn-legend{margin:12px 0 0;padding-left:1.6em;font-size:16px}
.tb-app main .kn-legend li{margin:0 0 6px}
.tb-app main .kn-legend li::marker{color:#2c74b3;font-weight:700}
.tb-app .kn-mk circle{transform-box:fill-box;transform-origin:center;animation:kn-pulse 2.8s ease-in-out infinite}
.tb-app .kn-ipack-zone{animation:kn-glow 3s ease-in-out infinite}
@keyframes kn-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes kn-glow{0%,100%{fill-opacity:.7}50%{fill-opacity:1}}

/* extra scan viewers inside a block section */
.tb-app .kn-scan-extra{margin:20px 0 8px}

/* plan builder */
.tb-app .kn-plan{margin:16px 0 12px}
.tb-app .kn-plan-grid{display:grid;gap:16px 32px;align-items:start}
@media (min-width:860px){.tb-app .kn-plan-grid{grid-template-columns:minmax(260px,400px) minmax(0,1fr)}}
.tb-app .kn-plan-fig{border:1px solid var(--tb-line);background:#fbf9f4;padding:10px}
.tb-app .kn-plan-svg{display:block;width:100%;height:auto}
.tb-app .kn-plan-reg{transition:fill .45s ease}
.tb-app .kn-plan-inc{transition:stroke .45s ease}
.tb-app main .kn-plan-key{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:var(--tb-ink-soft)}
.tb-app main .kn-plan-key li{display:flex;align-items:center;gap:6px}
.tb-app .kn-sw{display:inline-block;width:18px;height:14px;border:1px solid #633d3c}
.tb-app .kn-sw--all{background:rgba(44,116,179,.78)}
.tb-app .kn-sw--most{background:rgba(44,116,179,.48)}
.tb-app .kn-sw--some{background:repeating-linear-gradient(45deg,#1d4f7c 0 1.5px,rgba(44,116,179,.22) 1.5px 5px)}
.tb-app .kn-sw--none{background:transparent;border-style:dashed}
.tb-app main .kn-plan-k{font:400 12px/1.6 var(--tb-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--tb-muted);margin:0 0 8px}
.tb-app .kn-plan-presets,.tb-app .kn-plan-blocks{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.tb-app .kn-plan-presets .tb-seg-btn{flex:1 1 calc(50% - 8px);min-width:0;text-align:center}
.tb-app .kn-plan-blocks .tb-seg-btn{flex:1 1 calc(50% - 8px);min-width:0;text-align:center;font-size:14.5px}
.tb-app .kn-plan .tb-seg-btn[aria-pressed=true]{background:var(--tb-wine);border-color:var(--tb-wine);color:var(--tb-ivory)}
.tb-app .kn-plan-b--motor[aria-pressed=true]{background:#8a2a1c;border-color:#8a2a1c}
.tb-app .kn-plan-clear{margin:0 0 4px}
.tb-app .kn-plan-out{border-top:1px solid var(--tb-line);margin-top:16px;padding-top:12px;animation:kn-fade .35s ease}
.tb-app main .kn-plan-note{font-size:16px;line-height:1.55;margin:0 0 12px;max-width:68ch}
.tb-app .kn-plan-tbl th[scope=row]{font-weight:600}
.tb-app .kn-lv{display:inline-block;min-width:48px;padding:2px 8px;font:600 13px/1.5 var(--tb-sans);border:1px solid #633d3c;text-align:center}
.tb-app .kn-lv--all{background:#2c74b3;color:#fff;border-color:#2c74b3}
.tb-app .kn-lv--most{background:rgba(44,116,179,.45);color:#13314f;border-color:#2c74b3}
.tb-app .kn-lv--some{background:repeating-linear-gradient(45deg,rgba(44,116,179,.35) 0 2px,transparent 2px 5px);color:#13314f;border-color:#2c74b3}
.tb-app .kn-lv--none{color:#55534d;border-style:dashed}
.tb-app main .kn-plan-motor{margin:0 0 12px;padding-left:1.2em;font-size:16px}
.tb-app main .kn-plan-motor li{margin:0 0 6px}
.tb-app main .kn-plan-warn{color:#8a2a1c}
.tb-app main .kn-plan-links{font-size:15px}
@keyframes kn-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tb-app .kn-mk circle,.tb-app .kn-ipack-zone,.tb-app .kn-plan-out{animation:none}.tb-app .kn-plan-reg,.tb-app .kn-plan-inc{transition:none}}
.tb-app main .kn-plan-fn{font-size:14px;line-height:1.55;color:var(--tb-ink-soft);margin:6px 0 10px;max-width:72ch}
.tb-app .kn-plan-tbl abbr{text-decoration:none;border-bottom:1px dotted currentColor;cursor:help;white-space:nowrap}
/* single-view leg coverage maps: keep them a sensible height on a phone */
.tb-app .ll-cov-views--1{max-width:240px;margin-left:auto;margin-right:auto}
/* Phones: thinner figure padding so the 360-unit drawings keep their labels at 12px or more */
@media (max-width:480px){.tb-app .kn-fig-stage,.tb-app .kn-plan-fig{padding:2px}}