/* ── Trauma Atlas — sage/cream light theme ─────────────────────────── */
:root{
  --bg:#f2f3ec; --bg-2:#eceee4; --card:#ffffff; --soft:#f6f6f0;
  --line:#e6e7de; --line-2:#d7d9cc;
  --ink:#2b312a; --ink-2:#616b59; --ink-3:#98a18f;
  --a:#6f8c5b; --a-deep:#3a4a31; --a-soft:#e3ecd7; --a-bd:#cdddb8; --mark-ink:#f3f7ec;
  --clay:#b0512e; --clay-bg:#f8ece6; --clay-bd:#eecdbf; --clay-ink:#7d3316;
  --r:14px; --r-sm:10px;
  --sb-w:288px;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Sarabun",Roboto,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:15.5px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
a{color:var(--a-deep); text-decoration:none}
a:hover{text-decoration:underline}
.ti{line-height:1}

/* ── top bar ── */
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:14px;
  height:58px; padding:0 16px; background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.menu-btn{display:none; background:none; border:0; color:var(--ink-2); font-size:22px; cursor:pointer; padding:6px}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:600; white-space:nowrap}
.brand:hover{text-decoration:none}
.brand-mark{
  display:grid; place-items:center; width:30px; height:30px; border-radius:9px;
  background:var(--a); color:var(--mark-ink); font-size:18px;
}
.brand-txt{font-size:16px; letter-spacing:.2px; font-weight:500}
.brand-txt b{font-weight:600; color:var(--a-deep)}
.search-wrap{position:relative; flex:1; max-width:560px; margin-left:auto}
#search{
  width:100%; height:40px; padding:0 15px; border-radius:12px;
  background:var(--soft); border:1px solid var(--line); color:var(--ink); font-size:14.5px; outline:none;
}
#search::placeholder{color:var(--ink-3)}
#search:focus{border-color:var(--a-bd); background:#fff}
.search-results{
  position:absolute; top:48px; left:0; right:0; max-height:min(66vh,520px); overflow:auto;
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r);
  box-shadow:0 18px 50px rgba(58,74,49,.16); z-index:60; padding:6px;
}
.sr-item{display:block; padding:9px 12px; border-radius:var(--r-sm); color:var(--ink)}
.sr-item:hover,.sr-item.active{background:var(--soft); text-decoration:none}
.sr-item small{color:var(--ink-3); font-size:12px}
.sr-item mark{background:var(--a-soft); color:var(--a-deep); border-radius:3px; padding:0 2px}
.sr-empty{padding:14px; color:var(--ink-3); text-align:center}
.count-badge{color:var(--ink-3); font-size:12.5px; font-variant-numeric:tabular-nums; white-space:nowrap}
@media(max-width:900px){ .count-badge{display:none} }

/* ── layout ── */
.layout{display:flex; min-height:calc(100vh - 58px)}
.sidebar{
  width:var(--sb-w); flex:none; border-right:1px solid var(--line);
  background:var(--bg-2); position:sticky; top:58px; align-self:flex-start;
  height:calc(100vh - 58px); overflow:auto; display:flex; flex-direction:column;
}
.parts-nav{padding:12px 10px; flex:1}
.pnav-title{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); padding:6px 10px 8px; font-weight:600}
.pnav-group{margin-bottom:1px}
.pnav-head{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  background:none; border:0; color:var(--ink-2); padding:8px 10px; border-radius:var(--r-sm);
  font-size:13.5px; font-family:inherit;
}
.pnav-head:hover{background:#fff; color:var(--ink)}
.pnav-head .roman{
  font-family:var(--mono); font-size:11px; color:var(--a-deep); min-width:26px;
  background:var(--a-soft); padding:2px 5px; border-radius:6px; text-align:center;
}
.pnav-head .pname{flex:1; font-weight:500}
.pnav-head .pnum{color:var(--ink-3); font-size:12px; font-variant-numeric:tabular-nums}
.pnav-head .chev{color:var(--ink-3); transition:transform .18s; font-size:14px; display:grid; place-items:center}
.pnav-group.open .chev{transform:rotate(90deg)}
.pnav-list{display:none; padding:2px 0 8px 12px; margin-left:12px; border-left:1px solid var(--line-2)}
.pnav-group.open .pnav-list{display:block}
.pnav-item{display:flex; gap:8px; padding:6px 9px; border-radius:7px; color:var(--ink-2); font-size:13px; align-items:baseline}
.pnav-item:hover{background:#fff; color:var(--ink); text-decoration:none}
.pnav-item.active{background:var(--a-soft); color:var(--a-deep)}
.pnav-item .ch{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); min-width:30px; white-space:nowrap}
.side-foot{padding:14px; border-top:1px solid var(--line)}
.disclaimer{font-size:11px; color:var(--ink-3); line-height:1.5}
.disclaimer b{color:var(--clay)}
.scrim{display:none}

/* ── main ── */
.main{flex:1; min-width:0; padding:30px clamp(18px,4vw,52px) 90px; max-width:1120px; margin:0 auto; width:100%}

/* home */
.hero{margin:4px 0 26px}
.hero .kicker{font-size:11.5px; color:var(--a); font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom:7px}
.hero h1{font-size:28px; margin:0 0 8px; letter-spacing:-.3px; color:var(--a-deep); font-weight:600}
.hero p{color:var(--ink-2); margin:0; max-width:66ch}
.hero .subnote{margin-top:14px; font-size:12.5px; color:var(--clay-ink);
  border-left:3px solid var(--clay); padding:9px 13px; background:var(--clay-bg); border-radius:0 10px 10px 0}

.sec-label{font-size:12px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; margin:26px 0 12px; font-weight:600}
.sec-label .muted{text-transform:none; letter-spacing:0; color:var(--ink-3); font-weight:400}

.region-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:11px}
.region-card{
  display:flex; align-items:center; gap:13px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:15px 16px; color:var(--ink); transition:transform .12s, border-color .12s, box-shadow .12s;
}
.region-card:hover{border-color:var(--a-bd); text-decoration:none; transform:translateY(-1px); box-shadow:0 6px 18px rgba(58,74,49,.08)}
.region-card .rc-ico{flex:none; width:40px; height:40px; border-radius:11px; background:var(--a-soft); color:var(--a-deep);
  display:grid; place-items:center; font-size:21px}
.region-card .rc-main{min-width:0; display:flex; flex-direction:column}
.region-card .rc-name{display:block; font-size:14.5px; font-weight:500; color:var(--ink); line-height:1.35}
.region-card .rc-count{display:block; font-size:12px; color:var(--ink-3); margin-top:2px}

.system-chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; padding:7px 14px; border-radius:22px;
  background:var(--card); border:1px solid var(--a-bd); color:var(--a-deep)}
.chip:hover{background:var(--a-soft); text-decoration:none}
.chip .ti{font-size:14px}
.chip .cn{color:var(--ink-3); font-variant-numeric:tabular-nums}

.stat-row{display:flex; gap:10px; flex-wrap:wrap; margin:26px 0 4px}
.stat{background:var(--soft); border-radius:var(--r); padding:13px 17px; min-width:104px}
.stat b{display:block; font-size:22px; font-variant-numeric:tabular-nums; color:var(--a-deep); font-weight:600}
.stat span{font-size:12px; color:var(--ink-3)}

/* list page (region / system / section) */
.crumbs{font-size:13px; color:var(--ink-3); margin-bottom:16px}
.crumbs a{color:var(--ink-2)}
.list-head{display:flex; align-items:center; gap:14px; margin-bottom:8px}
.list-head .lh-ico{flex:none; width:42px; height:42px; border-radius:12px; background:var(--a-soft); color:var(--a-deep);
  display:grid; place-items:center; font-size:22px}
.list-head h1{margin:0; font-size:23px; color:var(--a-deep); font-weight:600}
.list-head .lh-count{font-size:13px; color:var(--ink-3); margin-left:auto; white-space:nowrap}
.list-sub{font-size:13px; color:var(--ink-2); margin:2px 0 20px; max-width:66ch}
.proc-list{display:grid; gap:8px}
.proc-row{
  display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:13px 16px; color:var(--ink);
}
.proc-row:hover{border-color:var(--a-bd); background:#fcfdfa; text-decoration:none}
.proc-row .ch{font-family:var(--mono); font-size:11px; color:var(--a-deep); background:var(--a-soft);
  padding:4px 8px; border-radius:7px; min-width:42px; text-align:center; white-space:nowrap}
.proc-row .pr-main{flex:1; min-width:0}
.proc-row .pr-title{font-weight:500; font-size:15.5px}
.proc-row .pr-meta{font-size:12px; color:var(--ink-3); margin-top:2px; display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.proc-row .pill{font-size:10.5px; padding:2px 8px; border-radius:12px; background:var(--soft); color:var(--ink-2)}
.proc-row .pill.sys{background:var(--a-soft); color:var(--a-deep)}
.proc-row .pr-figs{font-size:11.5px; color:var(--ink-3); white-space:nowrap; text-align:right}

/* procedure view */
.back-link{display:inline-flex; align-items:center; gap:6px; color:var(--ink-2); font-size:13.5px; margin-bottom:16px}
.back-link:hover{color:var(--a-deep)}
.proc-header{margin-bottom:6px}
.proc-header .kicker{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-3); margin-bottom:9px; flex-wrap:wrap}
.proc-header .kicker .ch{font-family:var(--mono); color:var(--a-deep); background:var(--a-soft); padding:3px 9px; border-radius:7px}
.proc-header .kicker .kind{font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; padding:2px 8px; border-radius:12px; background:var(--soft); color:var(--ink-2)}
.proc-header h1{margin:0 0 8px; font-size:26px; letter-spacing:-.2px; color:var(--a-deep); font-weight:600}
.tag-row{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 4px}
.tag{font-size:11.5px; color:var(--ink-2); background:var(--soft); border:1px solid var(--line); padding:3px 10px; border-radius:20px}
.view-toggle{display:inline-flex; gap:4px; background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:4px; margin:20px 0 10px}
.view-toggle button{
  background:none; border:0; color:var(--ink-2); padding:8px 17px; border-radius:9px; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:500; display:inline-flex; align-items:center; gap:7px;
}
.view-toggle button:hover{color:var(--a-deep)}
.view-toggle button.active{background:var(--a); color:var(--mark-ink)}

/* ── quick steps ── */
.quicksteps{max-width:76ch}
.qs-note{font-size:12.5px; color:var(--ink-2); background:var(--soft); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:9px 13px; margin:12px 0 20px; display:flex; gap:9px; align-items:flex-start}
.qs-note .ti{color:var(--a); font-size:16px; margin-top:1px}
.qs-group{margin:24px 0 4px; font-size:14.5px; color:var(--a-deep); font-weight:600; display:flex; align-items:center; gap:11px}
.qs-group::after{content:""; flex:1; height:1px; background:var(--line)}
.qs-group .gn{font-family:var(--mono); font-size:11px; color:var(--a); background:var(--a-soft); padding:2px 7px; border-radius:6px}
.qs-figs{display:flex; flex-wrap:wrap; gap:10px; margin:8px 0}
.qs-figs figure.fig{margin:0; max-width:300px; flex:1 1 220px}
.qs-list{margin:6px 0 0; padding:0; list-style:none; counter-reset:qs}
.qs-list li{
  counter-increment:qs; position:relative; margin:0; padding:9px 0 13px 44px;
  font-size:15px; line-height:1.55;
}
.qs-list li::before{
  content:counter(qs); position:absolute; left:0; top:7px;
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  background:var(--a-soft); border-radius:8px;
  font-family:var(--mono); font-size:12.5px; color:var(--a-deep); font-weight:600;
}
.qs-list li.crit::before{background:var(--clay-bg); color:var(--clay); box-shadow:inset 0 0 0 1px var(--clay-bd)}

/* ── read (full text) ── */
.prose{max-width:80ch}
.prose h4.sub{font-size:16px; margin:24px 0 7px; color:var(--a-deep); font-weight:600}
.prose h4.figs-head{color:var(--a); margin-top:28px; text-transform:uppercase; letter-spacing:.05em; font-size:12.5px}
.prose h5.sub,.prose h6.sub{font-size:14px; margin:16px 0 4px; color:var(--ink-2)}
.prose p{margin:10px 0}
.prose ul,.prose ol{margin:10px 0; padding-left:22px}
.prose li{margin:5px 0}
.prose code{font-family:var(--mono); font-size:.86em; background:var(--soft); padding:1px 6px; border-radius:5px; border:1px solid var(--line)}
.prose strong{color:var(--ink); font-weight:600}
blockquote.callout{margin:14px 0; padding:11px 16px; background:var(--soft); border-left:3px solid var(--a); border-radius:0 10px 10px 0; color:var(--ink-2)}
blockquote.callout.warn{background:var(--clay-bg); border-left-color:var(--clay); color:var(--clay-ink)}

.section-label{display:flex; align-items:center; gap:10px; margin:34px 0 4px; font-size:13px;
  text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); font-weight:600}
.caveats{margin:8px 0; padding:13px 17px 5px; background:var(--clay-bg); border:1px solid var(--clay-bd);
  border-left:3px solid var(--clay); border-radius:0 12px 12px 0}
.caveats ul{margin:6px 0 10px}
.caveats li{color:var(--clay-ink)}
.about-box{margin:10px 0 0; padding:13px 17px; background:var(--soft); border:1px solid var(--line);
  border-radius:var(--r-sm); color:var(--ink-2); font-size:13px}
.about-box p{margin:6px 0}

/* figures */
figure.fig{margin:18px 0; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:11px; max-width:640px}
figure.fig img{display:block; width:100%; height:auto; border-radius:var(--r-sm); background:#fff; cursor:zoom-in}
figure.fig figcaption{font-size:12px; color:var(--ink-3); margin-top:9px; line-height:1.5; font-style:italic}

/* lightbox */
.lightbox{position:fixed; inset:0; z-index:80; background:rgba(43,49,42,.82); display:grid; place-items:center; padding:24px}
.lightbox img{max-width:96vw; max-height:82vh; border-radius:10px; background:#fff}
.lb-close{position:absolute; top:16px; right:20px; background:none; border:0; color:#fff; font-size:26px; cursor:pointer}
.lb-cap{position:absolute; bottom:18px; left:0; right:0; text-align:center; color:#eef0e7; font-size:12.5px; padding:0 30px; font-style:italic}

/* gate */
body.gated{overflow:hidden}
body.gated .layout,body.gated .topbar{filter:blur(7px); pointer-events:none; user-select:none}
.gate{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px;
  background:radial-gradient(1100px 560px at 50% -8%,#dfe8d4,#f2f3ec 66%)}
.gate-box{width:min(400px,92vw); background:#fff; border:1px solid var(--line-2); border-radius:20px;
  padding:34px 30px; text-align:center; box-shadow:0 26px 70px rgba(58,74,49,.18); display:flex; flex-direction:column; gap:12px}
.gate-mark{width:54px; height:54px; margin:0 auto 4px; display:grid; place-items:center; border-radius:15px;
  background:var(--a); color:var(--mark-ink); font-size:28px}
.gate-box h1{margin:0; font-size:21px; color:var(--a-deep); font-weight:600}
.gate-box p{margin:0 0 6px; color:var(--ink-2); font-size:13.5px}
.gate-box input{height:44px; padding:0 14px; border-radius:11px; background:var(--soft); border:1px solid var(--line-2);
  color:var(--ink); font-size:15px; outline:none; text-align:center}
.gate-box input:focus{border-color:var(--a)}
.gate-box button{height:44px; border:0; border-radius:11px; background:var(--a); color:var(--mark-ink); font-size:15px;
  font-weight:600; cursor:pointer; font-family:inherit}
.gate-box button:hover{background:#617c50}
.gate-err{color:var(--clay); font-size:13px}
.gate-note{color:var(--ink-3); font-size:11px; line-height:1.5; margin-top:6px}

/* misc */
.empty{color:var(--ink-3); text-align:center; padding:60px 20px}

/* responsive */
@media(max-width:860px){
  .menu-btn{display:block}
  .sidebar{position:fixed; top:58px; left:0; z-index:50; transform:translateX(-100%); transition:transform .22s; box-shadow:8px 0 40px rgba(43,49,42,.18)}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .scrim{display:block; position:fixed; inset:58px 0 0 0; background:rgba(43,49,42,.32); z-index:45}
  .brand-txt{display:none}
  .main{padding:20px 16px 80px}
  .search-wrap{margin-left:0}
}