/* ===========================================================================
   Injury recovery report — design system (v2, editorial refresh)
   Calm, premium, clinical-but-warm. Fraunces headings + Inter body.
   Self-contained; class names preserved from v1.
   =========================================================================== */

:root {
  /* Warm paper neutrals */
  --bg:        #f5f4ef;
  --bg-2:      #efeee7;
  --surface:   #ffffff;
  --surface-2: #faf9f5;
  --ink:       #1f2a25;
  --ink-soft:  #4b5751;
  --ink-faint: #79847d;
  --line:      #e6e4da;
  --line-soft: #efeee7;

  --primary:      #2c6a59;
  --primary-deep: #1f4e41;
  --primary-soft: #e6f0ec;
  --primary-tint: #f0f5f2;
  --accent:       #b1762f;
  --accent-soft:  #f8efe2;

  /* Evidence grades */
  --g-strong:    #1f7a4d;  --g-strong-bg:    #e5f3ea;
  --g-emerging:  #2360a6;  --g-emerging-bg:  #e7eefa;
  --g-weak:      #946513;  --g-weak-bg:      #f8eed6;
  --g-contested: #6a4ba6;  --g-contested-bg: #efe9fa;
  --g-unreliable:#9c3a3a;  --g-unreliable-bg:#f8e6e6;

  --risk-high:  #b03a3a;  --risk-high-bg:  #f8e7e7;
  --risk-low:   #2c764f;  --risk-low-bg:   #e5f3ea;

  --tier1: #2c6a59; --tier2: #2360a6; --tier3: #79847d;

  --radius:    18px;
  --radius-sm: 11px;
  --shadow:    0 1px 2px rgba(28,46,38,.04), 0 14px 40px -18px rgba(28,46,38,.22);
  --shadow-sm: 0 1px 2px rgba(28,46,38,.05), 0 6px 18px -12px rgba(28,46,38,.18);
  --maxw: 900px;

  --font:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
}

/* Lock to a light, predictable palette regardless of OS dark mode */
@media (prefers-color-scheme: dark){ :root{
  --bg:#f5f4ef; --bg-2:#efeee7; --surface:#fff; --surface-2:#faf9f5;
  --ink:#1f2a25; --ink-soft:#4b5751; --ink-faint:#79847d;
}}

*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  font-size:17px;
  letter-spacing:-0.003em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg { max-width:100%; height:auto; display:block; }
a { color:var(--primary); text-decoration:none; text-underline-offset:2px; }
a:hover { text-decoration:underline; }
::selection { background:var(--primary-soft); }

/* ---------- Layout ---------- */
.shell { display:flex; min-height:100vh; }

.sidebar {
  width:264px; flex:0 0 264px;
  background:linear-gradient(180deg,#fcfcfa 0%, #f7f6f1 100%);
  border-right:1px solid var(--line);
  position:sticky; top:0; height:100vh; overflow-y:auto;
  padding:1.6rem 1.1rem 2rem;
}
.brand { display:flex; align-items:center; gap:.65rem; margin-bottom:.2rem; padding:0 .3rem; }
.brand .dot { width:13px; height:13px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 4px var(--primary-soft); flex:0 0 auto; }
.brand b { font-family:var(--serif); font-size:1.02rem; font-weight:600; letter-spacing:0; line-height:1.15; }
.brand small { display:block; color:var(--ink-faint); font-size:.7rem; font-weight:500; letter-spacing:.05em; text-transform:uppercase; margin-top:2px; }

.nav { margin-top:1.5rem; display:flex; flex-direction:column; gap:3px; }
.nav a {
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .75rem; border-radius:10px;
  color:var(--ink-soft); font-size:.92rem; font-weight:500;
  cursor:pointer; border:1px solid transparent; transition:background .15s, color .15s;
}
.nav a .ix { width:1.5rem; color:var(--ink-faint); font-variant-numeric:tabular-nums; font-size:.76rem; font-weight:600; }
.nav a:hover { background:var(--surface); text-decoration:none; color:var(--ink); }
.nav a.active { background:var(--primary); color:#fff; border-color:transparent; font-weight:600; box-shadow:var(--shadow-sm); }
.nav a.active .ix { color:rgba(255,255,255,.7); }

.main { flex:1 1 auto; min-width:0; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:2rem 1.6rem 5rem; }

/* ---------- Slim global safety bar ---------- */
.safety-bar {
  display:flex; align-items:flex-start; gap:.55rem;
  background:var(--accent-soft); border:1px solid #ecd9bf;
  border-radius:var(--radius-sm); padding:.55rem .85rem; margin:0 0 1.8rem;
  font-size:.82rem; color:#7c5417; line-height:1.45;
}
.safety-bar span { font-size:.95rem; line-height:1.3; }
.safety-bar p { margin:0; color:#7c5417; }
.safety-bar strong { color:#5f3f0f; }
.safety-bar a { color:#9a6a1c; font-weight:600; white-space:nowrap; }

/* ---------- Mobile top bar + nav ---------- */
.topbar { display:none; }
.mobile-nav { display:none; }   /* desktop: hidden; shown only in the mobile media query */
@media (max-width:880px){
  .shell { flex-direction:column; }
  .sidebar { display:none; }
  .topbar {
    display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:40;
    background:rgba(252,252,250,.9); backdrop-filter:saturate(150%) blur(10px);
    border-bottom:1px solid var(--line); padding:.7rem 1rem;
  }
  .topbar .brand b { font-size:.92rem; }
  .menu-btn { background:var(--primary); color:#fff; border:0;
    border-radius:10px; padding:.5rem .8rem; font-size:.84rem; font-weight:600; cursor:pointer; }
  .mobile-nav { display:none; position:sticky; top:53px; z-index:39;
    background:var(--surface); border-bottom:1px solid var(--line); padding:.5rem; box-shadow:var(--shadow-sm); }
  .mobile-nav.open { display:block; }
  .mobile-nav a { display:block; padding:.62rem .75rem; border-radius:9px; color:var(--ink-soft); font-weight:500; font-size:.95rem; }
  .mobile-nav a.active { background:var(--primary); color:#fff; }
  .wrap { padding:1.4rem 1.15rem 4rem; }
  body { font-size:16.5px; }
}

/* ---------- Views (tabbed) ---------- */
.view { display:none; animation:fade .3s ease; }
.view.active { display:block; }
@keyframes fade { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

/* ---------- Typography ---------- */
h1 { font-family:var(--serif); font-size:clamp(1.85rem,4.6vw,2.7rem); line-height:1.1; letter-spacing:-.015em; font-weight:600; color:var(--ink); }
h2 { font-family:var(--serif); font-size:clamp(1.4rem,2.6vw,1.7rem); margin-top:2.6rem; letter-spacing:-.01em; font-weight:600; line-height:1.2;
     padding-bottom:.5rem; position:relative; }
h2::after { content:""; display:block; width:46px; height:3px; border-radius:3px; background:var(--primary); margin-top:.7rem; }
h3 { font-family:var(--serif); font-size:1.16rem; margin-top:1.7rem; font-weight:600; color:var(--ink); letter-spacing:-.005em; }
h4 { font-size:.9rem; margin-top:1.2rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }
p { margin:.75rem 0; color:var(--ink-soft); }
.lead { font-size:1.16rem; line-height:1.55; color:var(--ink-soft); margin-top:.4rem; }
strong { color:var(--ink); font-weight:600; }
em { color:inherit; }
ul,ol { margin:.7rem 0 .7rem 1.25rem; color:var(--ink-soft); }
li { margin:.4rem 0; padding-left:.15rem; }
.eyebrow { text-transform:uppercase; letter-spacing:.13em; font-size:.74rem; font-weight:700; color:var(--primary); }
.muted { color:var(--ink-faint); }
small { font-size:.82rem; }

/* ---------- Hero (light, editorial) ---------- */
.hero {
  position:relative; overflow:hidden;
  background:
     radial-gradient(120% 140% at 88% -10%, #e9f1ec 0%, rgba(233,241,236,0) 55%),
     linear-gradient(180deg,#ffffff 0%, #fbfbf8 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2.4rem 2.1rem 2.5rem;
  margin:.2rem 0 1.4rem;
  box-shadow:var(--shadow);
}
.hero::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg,var(--primary),var(--primary-deep)); }
.hero .eyebrow { display:inline-block; margin-bottom:.9rem; }
.hero h1 { max-width:20ch; }
.hero p { font-size:1.1rem; color:var(--ink-soft); margin-top:1rem; }

/* ---------- Cards / callouts ---------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.35rem 1.45rem; box-shadow:var(--shadow-sm); margin:1.1rem 0; }
.grid { display:grid; gap:1.1rem; }
.grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.grid.cols-3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:680px){ .grid.cols-2,.grid.cols-3 { grid-template-columns:1fr; } }

.callout { border-radius:var(--radius-sm); padding:1.05rem 1.2rem; margin:1.2rem 0; border:1px solid var(--line); background:var(--surface-2); }
.callout .h { font-weight:700; color:var(--ink); margin-bottom:.25rem; display:flex; align-items:center; gap:.5rem; font-size:.98rem; }
.callout p { margin:.35rem 0; }
.callout.warn   { background:#fdf0e6; border-color:#f1cfb2; }
.callout.warn .h{ color:#9a4d1c; }
.callout.danger { background:var(--risk-high-bg); border-color:#edc1c1; }
.callout.danger .h{ color:var(--risk-high); }
.callout.info   { background:var(--primary-tint); border-color:#cfe3db; }
.callout.info .h{ color:var(--primary-deep); }
.callout.key    { background:#fbf3e0; border-color:#ecd9ac; }
.callout.key .h { color:#8a6112; }

/* ---------- Evidence badges ---------- */
.badge { display:inline-flex; align-items:center; gap:.32rem; font-size:.69rem; font-weight:700;
  padding:.16rem .55rem; border-radius:999px; letter-spacing:.02em; white-space:nowrap; vertical-align:middle;
  text-transform:uppercase; border:1px solid transparent; line-height:1.4; }
.badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.85; }
.b-strong     { color:var(--g-strong);     background:var(--g-strong-bg); }
.b-emerging   { color:var(--g-emerging);   background:var(--g-emerging-bg); }
.b-weak       { color:var(--g-weak);       background:var(--g-weak-bg); }
.b-contested  { color:var(--g-contested);  background:var(--g-contested-bg); }
.b-unreliable { color:var(--g-unreliable); background:var(--g-unreliable-bg); }
.badge.sm { font-size:.64rem; padding:.1rem .45rem; }

/* ---------- Tables ---------- */
.tablewrap { overflow-x:auto; margin:1.2rem 0; border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); background:var(--surface); }
table { border-collapse:collapse; width:100%; font-size:.9rem; min-width:520px; }
th,td { text-align:left; padding:.72rem .9rem; border-bottom:1px solid var(--line-soft); vertical-align:top; }
thead th { background:var(--surface-2); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); font-weight:700; position:sticky; top:0; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:nth-child(even) td { background:rgba(245,244,239,.5); }
tbody tr:hover td { background:var(--primary-tint); }
td.risk-high { color:var(--risk-high); font-weight:700; }
td.risk-low  { color:var(--risk-low);  font-weight:700; }

/* ---------- Tier cards ---------- */
.tier { border-radius:var(--radius-sm); background:var(--surface);
  border:1px solid var(--line); border-left:5px solid var(--line); padding:1.2rem 1.35rem; margin:1.1rem 0; box-shadow:var(--shadow-sm); }
.tier.t1 { border-left-color:var(--tier1); }
.tier.t2 { border-left-color:var(--tier2); }
.tier.t3 { border-left-color:var(--tier3); }
.tier .tlabel { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--serif); font-weight:600; font-size:1.05rem; margin-bottom:.1rem; }
.tier.t1 .tlabel { color:var(--tier1); }
.tier.t2 .tlabel { color:var(--tier2); }
.tier.t3 .tlabel { color:var(--tier3); }
.tier ul { margin-top:.6rem; }

/* ---------- Checklist ---------- */
.checklist { list-style:none; margin-left:0; }
.checklist li { display:flex; gap:.6rem; align-items:flex-start; padding:.45rem 0; border-bottom:1px solid var(--line-soft); }
.checklist li::before { content:"✓"; color:var(--primary); font-weight:800; flex:0 0 auto; margin-top:.05rem; }

/* ---------- Figures / charts ---------- */
figure { margin:1.5rem 0; }
figure svg { width:100%; height:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.9rem; box-shadow:var(--shadow-sm); }
figcaption { font-size:.84rem; color:var(--ink-faint); margin-top:.65rem; text-align:center; line-height:1.5; }
figure svg text { font-family:var(--font); }
.chart-note { font-size:.82rem; color:var(--ink-faint); text-align:center; margin:.6rem 0 0; }

/* ---------- HTML charts (responsive, real text) ---------- */
.hbars { display:flex; flex-direction:column; gap:.55rem; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:1.1rem 1.2rem; box-shadow:var(--shadow-sm); }
.hbar { display:grid; grid-template-columns:minmax(130px,215px) 1fr auto; align-items:center; gap:.8rem; }
.hbar .lbl { font-size:.88rem; color:var(--ink); font-weight:500; line-height:1.25; }
.hbar .track { background:var(--bg-2); border-radius:7px; height:18px; overflow:hidden; }
.hbar .fill { display:block; height:100%; border-radius:7px; min-width:3px; }
.hbar .val { font-size:.82rem; font-weight:700; font-variant-numeric:tabular-nums; min-width:3.4em; text-align:right; color:var(--ink-soft); }
@media (max-width:560px){
  .hbar { grid-template-columns:1fr auto; grid-template-areas:"lbl val" "track track"; row-gap:.3rem; column-gap:.6rem; }
  .hbar .lbl { grid-area:lbl; } .hbar .val { grid-area:val; } .hbar .track { grid-area:track; height:16px; }
}
.chart-legend { display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:center; justify-content:center;
  margin-top:.7rem; font-size:.8rem; color:var(--ink-soft); }
.chart-legend span { display:inline-flex; align-items:center; gap:.4rem; }
.chart-legend i { width:11px; height:11px; border-radius:3px; display:inline-block; }

/* risk-map cards */
.riskcard { border-radius:var(--radius-sm); padding:1.1rem 1.25rem; border:1px solid; height:100%; }
.riskcard h4 { margin:0 0 .15rem; text-transform:none; letter-spacing:0; font-size:1.02rem; font-weight:700; font-family:var(--serif); }
.riskcard .rc-sub { font-size:.82rem; margin:.1rem 0 .4rem; }
.riskcard ul { margin:.4rem 0 0 1.1rem; }
.riskcard li { font-size:.9rem; margin:.3rem 0; }
.riskcard.low  { background:var(--risk-low-bg);  border-color:#bfe0cd; }
.riskcard.low h4, .riskcard.low .rc-sub { color:var(--risk-low); }
.riskcard.low li { color:#2c4a3b; }
.riskcard.high { background:var(--risk-high-bg); border-color:#edc1c1; }
.riskcard.high h4, .riskcard.high .rc-sub { color:var(--risk-high); }
.riskcard.high li { color:#6e2e2e; }

/* energy-availability bands */
.bands { display:flex; gap:7px; }
.band { flex:1; border-radius:var(--radius-sm); padding:.8rem .9rem; border:1px solid; }
.band b { display:block; font-size:.92rem; line-height:1.2; margin-bottom:.15rem; }
.band small { font-size:.8rem; line-height:1.3; }
.band.optimal { background:var(--risk-low-bg);  border-color:#bfe0cd; }
.band.optimal b { color:var(--risk-low); }   .band.optimal small { color:#3f6b54; }
.band.lea     { background:#f8efd9; border-color:#ecdcae; }
.band.lea b   { color:#9a6a12; }              .band.lea small { color:#7a5a1c; }
.band.severe  { background:var(--risk-high-bg); border-color:#edc1c1; }
.band.severe b{ color:var(--risk-high); }     .band.severe small { color:#7a2e2e; }
@media (max-width:560px){ .bands { flex-direction:column; } }

/* tendinopathy continuum flow */
.flow { display:flex; align-items:stretch; gap:.4rem; }
.flow-step { flex:1; border-radius:var(--radius-sm); padding:.9rem 1rem; border:1px solid; text-align:center; }
.flow-step b { display:block; font-family:var(--serif); font-size:1.02rem; margin-bottom:.2rem; }
.flow-step small { display:block; font-size:.8rem; line-height:1.35; }
.flow-step.react { background:var(--risk-low-bg);  border-color:#bfe0cd; }
.flow-step.react b { color:var(--risk-low); }  .flow-step.react small { color:#3f6b54; }
.flow-step.dys   { background:#f8efd9; border-color:#ecdcae; }
.flow-step.dys b { color:#9a6a12; }            .flow-step.dys small { color:#7a5a1c; }
.flow-step.degen { background:var(--risk-high-bg); border-color:#edc1c1; }
.flow-step.degen b { color:var(--risk-high); } .flow-step.degen small { color:#7a2e2e; }
.flow-arrow { display:flex; align-items:center; color:var(--ink-faint); font-size:1.3rem; flex:0 0 auto; }
@media (max-width:560px){
  .flow { flex-direction:column; }
  .flow-arrow { justify-content:center; transform:rotate(90deg); margin:-.1rem 0; }
}

.cite { font-size:.7em; vertical-align:super; color:var(--primary); font-weight:700; cursor:pointer; }

/* ---------- References / footer ---------- */
.refs { font-size:.88rem; }
.refs h4 { margin-top:1.5rem; color:var(--primary-deep); }
.refs ol { margin-left:1.35rem; }
.refs li { margin:.55rem 0; color:var(--ink-soft); }
.refs li a { word-break:break-word; }
.foot { border-top:1px solid var(--line); margin-top:3rem; padding-top:1.3rem; color:var(--ink-faint); font-size:.82rem; }

/* ---------- Legend ---------- */
.legend { display:flex; flex-wrap:wrap; gap:.5rem; margin:.9rem 0; }
.legend .badge { cursor:default; }

/* ---------- Pager ---------- */
.pager { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:2.8rem; padding-top:1.3rem; border-top:1px solid var(--line); }
.pager a { font-size:.92rem; font-weight:600; color:var(--ink-soft); }
.pager a:hover { color:var(--primary); }
.pager .next { margin-left:auto; color:var(--primary); }

@media print {
  .sidebar,.topbar,.mobile-nav,.pager { display:none !important; }
  .view { display:block !important; }
  .wrap { max-width:100%; }
  .hero { box-shadow:none; }
}