/* ============================================================================
   injuries.css — "Joint and Tendon Injuries in Wushu"

   The article body is generated from the paper by build/make-injury-view.js.
   That converter rewrites every hard-coded hex in the figures into one of the
   --fg-* tokens below, because theme.js can retag classes but cannot reach
   fill/stroke attributes inside an SVG. Light values sit on .inj-fig-scope;
   the dark block redefines only the tokens.

   Motion contract — personality: Premium, no overshoot anywhere.
     easing     --inj-e  cubic-bezier(.4,0,.2,1)
     durations  quick 160ms · standard 320ms · slow 560ms
     feedback   hover 90ms · press 130ms
     stagger    40ms per item, budget under 500ms
     layers     primary = figure reveal and widget state
                secondary = hotspot lift, readout swap, row filtering
                ambient = the 3D scene's idle drift, on screen only
   Everything collapses to its end state under prefers-reduced-motion.
   ============================================================================ */

/* ---- figure palette ----------------------------------------------------- */
.oa-artview[id="view-injuries"]{
  --fg-ink:#14110f;   --fg-ink2:#3a3531;  --fg-ink3:#5c554d;  --fg-mut:#7a736b;
  --fg-paper:#ffffff; --fg-rule:#ded8cd;  --fg-rule2:#c6bfb2;
  --fg-card:#faf8f4;  --fg-card2:#f3efe7;
  --fg-acc:#9e2b25;   --fg-acc2:#b23a33;  --fg-acc3:#d09a94;
  --fg-acc4:#eddad7;  --fg-acc5:#f8f1f0;  --fg-accbg:#fdf6f5;
  --fg-d2:#2e4a6b;    --fg-d3:#b07d2b;    --fg-d4:#3f6b52;
  --fg-d5:#6d3a5d;    --fg-d6:#8a8078;
  --fg-d2bg:#f4f6f9;  --fg-d2bd:#dfe4ec;
  --fg-d4bg:#f5f8f6;  --fg-d4bd:#dbe6de;  --fg-d4lt:#cfe0d6;
  --fg-d3lt:#f0e2c6;  --fg-d5bg:#f6f3f5;  --fg-d5lt:#e2d2dd;
  --inj-e:cubic-bezier(.4,0,.2,1);
  --inj-quick:160ms; --inj-std:320ms; --inj-slow:560ms;
}
:root[data-theme="dark"] .oa-artview[id="view-injuries"]{
  --fg-ink:#efe9e0;   --fg-ink2:#ddd5ca;  --fg-ink3:#bdb4a8;  --fg-mut:#9a9186;
  --fg-paper:#1f1b17; --fg-rule:#3a342c;  --fg-rule2:#4a4339;
  --fg-card:#26221e;  --fg-card2:#2d2823;
  --fg-acc:#e08b84;   --fg-acc2:#d3776f;  --fg-acc3:#a35a54;
  --fg-acc4:#4a2b28;  --fg-acc5:#33211f;  --fg-accbg:#2b1e1c;
  --fg-d2:#8fb0d8;    --fg-d3:#d8ad63;    --fg-d4:#8fc9a3;
  --fg-d5:#c294b4;    --fg-d6:#a9a096;
  --fg-d2bg:#232a33;  --fg-d2bd:#38424f;
  --fg-d4bg:#212a25;  --fg-d4bd:#37473c;  --fg-d4lt:#2e4034;
  --fg-d3lt:#3a3021;  --fg-d5bg:#2b2430;  --fg-d5lt:#3d3143;
}

/* ---- part openers ------------------------------------------------------- */
.inj-part{max-width:var(--measure);margin:64px 0 30px;padding-top:22px;
  border-top:3px solid var(--acc)}
.inj-part-num{display:block;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin-bottom:8px}
.inj-part-h{font-family:'Spectral',serif;font-weight:600;font-size:clamp(26px,4.2vw,38px);
  line-height:1.14;margin:0 0 10px;color:var(--ink)}
.inj-part-h .han{font-family:'Noto Serif TC',serif;font-weight:700;color:var(--ink3);font-size:.8em}
.inj-part-stand{font-family:'Spectral',serif;font-style:italic;font-size:clamp(15px,2vw,18px);
  line-height:1.5;color:var(--ink3);margin:0;max-width:60ch}

/* ---- boxes -------------------------------------------------------------- */
.inj-box{max-width:var(--measure);margin:26px 0;padding:18px 22px;
  border:1px solid var(--bd);border-left:4px solid var(--bds);
  border-radius:0 12px 12px 0;background:var(--surf2)}
.inj-box>h5{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc);margin:0 0 10px}
.inj-box p:last-child,.inj-box ul:last-child,.inj-box ol:last-child{margin-bottom:0}
.inj-flag{border-left-color:var(--fg-acc);background:var(--fg-accbg)}
.inj-flag>h5{color:var(--fg-acc)}
.inj-do{border-left-color:var(--fg-d4);background:var(--fg-d4bg)}
.inj-do>h5{color:var(--fg-d4)}
.inj-evid{border-left-color:var(--fg-d2);background:var(--fg-d2bg)}
.inj-evid>h5{color:var(--fg-d2)}
.inj-plain{background:var(--surf)}
.inj-first{margin-top:8px}

/* ---- cards -------------------------------------------------------------- */
.inj-card{max-width:var(--measure);margin:26px 0;border:1px solid var(--bd);
  border-radius:14px;overflow:hidden;background:var(--surf)}
.inj-card .ch{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  flex-wrap:wrap;padding:13px 20px;background:var(--ink);color:var(--surf)}
:root[data-theme="dark"] .inj-card .ch{background:#332c25;color:var(--ink)}
.inj-card .ch b{font-family:'Spectral',serif;font-size:17px;font-weight:600}
.inj-card .ch span{font-family:'Inter',sans-serif;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;opacity:.72}
.inj-card .cb{padding:16px 20px}
.inj-card dl{margin:0;display:grid;grid-template-columns:112px 1fr;gap:9px 16px;font-size:15px}
.inj-card dt{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut);padding-top:3px}
.inj-card dd{margin:0;line-height:1.55;color:var(--ink2)}
@media(max-width:620px){.inj-card dl{grid-template-columns:1fr;gap:2px 0}
  .inj-card dt{padding-top:10px}}

/* ---- grids, pull quote, kickers ----------------------------------------- */
.inj-grid2,.inj-grid3{display:grid;gap:18px;max-width:var(--measure);margin:26px 0}
.inj-grid2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.inj-grid3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.inj-grid2>*,.inj-grid3>*{margin:0!important;max-width:none}
.inj-pull{max-width:var(--measure);margin:30px 0;padding:4px 0 4px 22px;
  border-left:3px solid var(--acc);font-family:'Spectral',serif;font-style:italic;
  font-size:clamp(17px,2.4vw,21px);line-height:1.45;color:var(--ink2)}
.inj-kick{margin-top:26px!important}

/* ---- figures ------------------------------------------------------------ */
.inj-fig{max-width:var(--measure);margin:30px 0}
.inj-fig svg{display:block;width:100%;height:auto}
.inj-fig figcaption{font-family:'Inter',sans-serif;font-size:13px;line-height:1.5;
  color:var(--ink3);margin-top:12px;padding-top:10px;border-top:1px solid var(--bd)}
.inj-fig figcaption b{color:var(--acc);font-weight:600;letter-spacing:.05em}
.inj-table caption{caption-side:top;text-align:left;font-family:'Inter',sans-serif;
  font-size:13px;color:var(--ink3);padding-bottom:10px}
.inj-table caption b{color:var(--acc);font-weight:600}
.inj-table .grp td{background:var(--surf2);font-family:'Inter',sans-serif;font-size:11px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.inj-table td .sm{display:block;color:var(--mut);font-size:12.5px;line-height:1.4}
.inj-toc .inj-toc-part{display:block;font-family:'Inter',sans-serif;font-size:10px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);
  margin:14px 0 4px}
.inj-toc .inj-toc-part:first-of-type{margin-top:0}
dl.gl{margin:0;display:grid;grid-template-columns:132px 1fr;gap:7px 14px;font-size:14.5px}
dl.gl dt{font-weight:600;color:var(--ink)}
dl.gl dd{margin:0;color:var(--ink2);line-height:1.5}
@media(max-width:620px){dl.gl{grid-template-columns:1fr;gap:1px 0}dl.gl dt{padding-top:9px}}

/* ============================================================================
   Instruments. Every one enhances markup that already works without it: the
   static SVG or table stays in the DOM as .inj-fallback and is only hidden
   once its widget has actually built.
   ============================================================================ */
.inj-fallback[hidden]{display:none}
.inj-wrap{max-width:var(--measure);margin:30px 0;border:1px solid var(--bd);
  border-radius:14px;background:var(--surf);overflow:hidden}
.inj-whead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid var(--bd);background:var(--surf2)}
.inj-wtitle{font-family:'Spectral',serif;font-size:16px;font-weight:600;color:var(--ink);margin:0}
.inj-wsub{font-family:'Inter',sans-serif;font-size:12px;color:var(--mut);margin:0}
.inj-wbody{padding:18px}
.inj-tools{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.inj-btn{font-family:'Inter',sans-serif;font-size:12.5px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--bd);background:var(--surf);color:var(--ink2);cursor:pointer;
  transition:border-color 90ms var(--inj-e),color 90ms var(--inj-e),background 90ms var(--inj-e)}
.inj-btn:hover{border-color:var(--acc);color:var(--acc)}
.inj-btn:active{transform:translateY(1px)}
.inj-btn[aria-pressed="true"],.inj-btn.is-on{background:var(--acc);border-color:var(--acc);color:#fff}
:root[data-theme="dark"] .inj-btn[aria-pressed="true"],
:root[data-theme="dark"] .inj-btn.is-on{color:#1f1b17}
.inj-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ---- 3D joint scenes ---------------------------------------------------- */
.inj-stage{position:relative;aspect-ratio:4/3;min-height:280px;background:
  radial-gradient(120% 90% at 50% 18%,var(--surf2) 0%,var(--surf) 70%);
  border-radius:10px;overflow:hidden;touch-action:none;cursor:grab}
.inj-stage:active{cursor:grabbing}
.inj-stage canvas{display:block;width:100%;height:100%}
.inj-stage:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.inj-hint{position:absolute;left:12px;bottom:10px;font-family:'Inter',sans-serif;
  font-size:11px;color:var(--mut);pointer-events:none;opacity:.9}
.inj-parts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.inj-read{margin-top:14px;padding:14px 16px;border-radius:10px;background:var(--surf2);
  border:1px solid var(--bd);min-height:74px}
.inj-read h6{font-family:'Spectral',serif;font-size:15.5px;font-weight:600;margin:0 0 5px;color:var(--ink)}
.inj-read p{font-size:14.5px;line-height:1.55;color:var(--ink2);margin:0}
.inj-read a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
.inj-read .sw{display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--acc);margin-right:7px;vertical-align:middle}

/* ---- triage ------------------------------------------------------------- */
.inj-step{animation:injIn var(--inj-std) var(--inj-e) both}
@keyframes injIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.inj-q{font-family:'Spectral',serif;font-size:clamp(17px,2.4vw,20px);font-weight:600;
  line-height:1.35;color:var(--ink);margin:0 0 14px}
.inj-opts{display:flex;flex-direction:column;gap:9px}
.inj-opt{display:block;width:100%;text-align:left;font-family:'Source Serif 4',serif;
  font-size:15.5px;line-height:1.45;padding:13px 16px;border-radius:10px;
  border:1px solid var(--bd);background:var(--surf);color:var(--ink2);cursor:pointer;
  transition:border-color 90ms var(--inj-e),background 90ms var(--inj-e),transform 130ms var(--inj-e)}
.inj-opt:hover{border-color:var(--acc);background:var(--surf2)}
.inj-opt:active{transform:translateY(1px)}
.inj-opt:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.inj-opt b{color:var(--ink);font-weight:600}
.inj-check{display:flex;gap:11px;align-items:flex-start;padding:11px 14px;border-radius:9px;
  border:1px solid var(--bd);background:var(--surf);cursor:pointer;font-size:15px;line-height:1.45}
.inj-check input{margin-top:3px;accent-color:var(--fg-acc);flex:none;width:17px;height:17px}
.inj-check:hover{border-color:var(--acc)}
.inj-out{border-radius:12px;padding:18px 20px;border:1px solid var(--bd)}
.inj-out h6{font-family:'Spectral',serif;font-size:19px;font-weight:600;margin:0 0 8px}
.inj-out p{font-size:15px;line-height:1.55;margin:0 0 9px}
.inj-out ul{margin:0 0 9px;padding-left:20px;font-size:15px;line-height:1.5}
.inj-out p:last-child,.inj-out ul:last-child{margin-bottom:0}
.inj-out-now{background:var(--fg-accbg);border-color:var(--fg-acc3)}
.inj-out-now h6{color:var(--fg-acc)}
.inj-out-soon{background:var(--fg-d3lt);border-color:var(--fg-d3)}
.inj-out-soon h6{color:var(--fg-d3)}
.inj-out-self{background:var(--fg-d4bg);border-color:var(--fg-d4bd)}
.inj-out-self h6{color:var(--fg-d4)}
.inj-crumbs{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:14px;
  font-family:'Inter',sans-serif;font-size:11.5px;color:var(--mut)}
.inj-crumb{padding:3px 9px;border-radius:999px;background:var(--surf2);border:1px solid var(--bd)}
.inj-crumb.is-now{background:var(--acc);border-color:var(--acc);color:#fff}
:root[data-theme="dark"] .inj-crumb.is-now{color:#1f1b17}

/* ---- symptom finder ----------------------------------------------------- */
.inj-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.inj-search{flex:1 1 210px;min-width:170px;font-family:'Inter',sans-serif;font-size:13.5px;
  padding:9px 13px;border-radius:999px;border:1px solid var(--bd);background:var(--surf);color:var(--ink)}
.inj-search:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.inj-hit{border:1px solid var(--bd);border-radius:11px;padding:13px 16px;margin-bottom:9px;
  background:var(--surf);animation:injIn var(--inj-quick) var(--inj-e) both}
.inj-hit-t{font-family:'Spectral',serif;font-size:16px;font-weight:600;color:var(--ink);margin:0 0 4px}
.inj-hit-w{font-size:14.5px;color:var(--ink2);line-height:1.5;margin:0 0 7px}
.inj-hit-m{display:flex;gap:8px;flex-wrap:wrap;font-family:'Inter',sans-serif;font-size:11.5px}
.inj-tag{padding:3px 9px;border-radius:999px;background:var(--surf2);border:1px solid var(--bd);color:var(--ink3)}
.inj-tag.urgent{background:var(--fg-accbg);border-color:var(--fg-acc3);color:var(--fg-acc);font-weight:600}
.inj-none{font-size:14.5px;color:var(--mut);padding:14px 2px}

/* ---- screening calculator ----------------------------------------------- */
.inj-scr{width:100%;border-collapse:collapse;font-size:14.5px}
.inj-scr th{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink3);text-align:left;padding:0 8px 9px;border-bottom:1px solid var(--bd)}
.inj-scr td{padding:9px 8px;border-bottom:1px solid var(--bd);vertical-align:middle}
.inj-scr input{width:74px;font-family:'Inter',sans-serif;font-size:14px;padding:6px 9px;
  border-radius:8px;border:1px solid var(--bd);background:var(--surf);color:var(--ink)}
.inj-scr input:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.inj-verdict{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600}
.inj-ok{color:var(--fg-d4)}
.inj-warn{color:var(--fg-acc)}
.inj-idle{color:var(--mut);font-weight:400}

/* ---- ladder + timelines ------------------------------------------------- */
.inj-rungs{display:grid;gap:8px}
.inj-rung{text-align:left;border:1px solid var(--bd);border-left:4px solid var(--bds);
  border-radius:0 11px 11px 0;background:var(--surf);padding:13px 17px;cursor:pointer;
  transition:background 90ms var(--inj-e),border-color 90ms var(--inj-e)}
.inj-rung:hover{background:var(--surf2)}
.inj-rung[aria-expanded="true"]{background:var(--surf2)}
.inj-rung:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.inj-rung-h{display:flex;gap:11px;align-items:baseline;flex-wrap:wrap}
.inj-rung-n{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase}
.inj-rung-t{font-family:'Spectral',serif;font-size:16.5px;font-weight:600;color:var(--ink)}
.inj-rung-w{font-family:'Inter',sans-serif;font-size:11.5px;color:var(--mut);margin-left:auto}
.inj-rung-b{font-size:14.5px;line-height:1.55;color:var(--ink2);margin-top:9px}
.inj-rung-b p{margin:0 0 7px}.inj-rung-b p:last-child{margin:0}
.inj-rung-b .gate{display:block;margin-top:8px;font-family:'Inter',sans-serif;font-size:12.5px;color:var(--acc)}
.inj-bars{display:grid;gap:7px}
.inj-bar{display:grid;grid-template-columns:170px 1fr;gap:12px;align-items:center;font-size:13.5px}
.inj-bar-l{color:var(--ink2)}
.inj-bar-t{position:relative;height:17px;border-radius:4px;background:var(--surf2);overflow:hidden}
.inj-bar-s{position:absolute;top:0;bottom:0;border-radius:3px;
  transform-origin:left center;animation:injGrow var(--inj-slow) var(--inj-e) both}
@keyframes injGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:620px){.inj-bar{grid-template-columns:1fr;gap:3px}}

@media (prefers-reduced-motion: reduce){
  .inj-step,.inj-hit,.inj-bar-s{animation:none!important}
  .inj-opt:active,.inj-btn:active{transform:none}
}
@media print{
  .inj-wrap,.inj-stage{display:none!important}
  .inj-fallback[hidden]{display:block!important}
}

/* ---- specificity ---------------------------------------------------------
   articles.css sets `.oa-art p { font-size: var(--fs-body) }` at 0,1,1, which
   outranks a bare widget class. Every rule below is the same declaration one
   step heavier so the instruments keep their own type scale. */
.oa-art .inj-wtitle{font-size:16px}
.oa-art .inj-wsub{font-size:12.5px;line-height:1.45}
.oa-art .inj-q{font-size:clamp(17px,2.4vw,20px)}
.oa-art .inj-opt{font-size:15.5px}
.oa-art .inj-hit-t{font-size:16px}
.oa-art .inj-hit-w{font-size:14.5px}
.oa-art .inj-read h6{font-size:15.5px}
.oa-art .inj-read p{font-size:14.5px}
.oa-art .inj-out h6{font-size:19px}
.oa-art .inj-out p,.oa-art .inj-out ul{font-size:15px}
.oa-art .inj-rung-t{font-size:16.5px}
.oa-art .inj-rung-b,.oa-art .inj-rung-b p{font-size:14.5px}
.oa-art .inj-none{font-size:14.5px}
.oa-art .inj-bar-l{font-size:13.5px}
.oa-art .inj-scr td,.oa-art .inj-scr input{font-size:14.5px}
.oa-art .inj-part-stand{font-size:clamp(15px,2vw,18px)}
.oa-art .inj-pull{font-size:clamp(17px,2.4vw,21px)}
.oa-art .inj-hint{font-size:11px}
.oa-art .inj-tag,.oa-art .inj-hit-m{font-size:11.5px}
.oa-art .inj-verdict{font-size:12.5px}
.oa-art .inj-btn{font-size:12.5px}
.oa-art .inj-search{font-size:13.5px}