/* ── Chassin Step Atlas ─────────────────────────────────────────── */
:root{
  --bg:#0e1116; --bg-2:#151a21; --panel:#1a2029; --panel-2:#212934;
  --line:#2a333f; --line-2:#38434f;
  --ink:#e7edf3; --ink-2:#aab6c2; --ink-3:#7c8896;
  --accent:#4aa8ff; --accent-2:#7bd0a0; --warn:#f0b866; --warn-bg:#2a2318;
  --danger:#ff8a8a;
  --r:12px; --r-sm:8px;
  --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(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* ── top bar ── */
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:14px;
  height:56px; padding:0 16px; background:rgba(14,17,22,.86);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.menu-btn{display:none; background:none; border:0; color:var(--ink); font-size:20px; cursor:pointer; padding:6px}
.brand{display:flex; align-items:center; gap:9px; color:var(--ink); font-weight:600; white-space:nowrap}
.brand:hover{text-decoration:none}
.brand-mark{
  display:grid; place-items:center; width:28px; height:28px; border-radius:8px;
  background:linear-gradient(135deg,var(--accent),#2d6fd0); color:#fff; font-size:16px; font-weight:700;
}
.brand-txt{font-size:16px; letter-spacing:.2px}
.brand-txt b{font-weight:700}
.search-wrap{position:relative; flex:1; max-width:560px; margin-left:auto}
#search{
  width:100%; height:38px; padding:0 14px; border-radius:20px;
  background:var(--panel); border:1px solid var(--line); color:var(--ink); font-size:14.5px; outline:none;
}
#search:focus{border-color:var(--accent); background:var(--panel-2)}
.search-results{
  position:absolute; top:46px; left:0; right:0; max-height:min(66vh,520px); overflow:auto;
  background:var(--panel-2); border:1px solid var(--line-2); border-radius:var(--r);
  box-shadow:0 18px 50px rgba(0,0,0,.55); 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(--panel); text-decoration:none}
.sr-item small{color:var(--ink-3); font-size:12px}
.sr-item mark{background:rgba(74,168,255,.28); color:#dcecff; border-radius:3px; padding:0 1px}
.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 - 56px)}
.sidebar{
  width:var(--sb-w); flex:none; border-right:1px solid var(--line);
  background:var(--bg-2); position:sticky; top:56px; align-self:flex-start;
  height:calc(100vh - 56px); overflow:auto; display:flex; flex-direction:column;
}
.parts-nav{padding:12px 10px; flex:1}
.pnav-group{margin-bottom:2px}
.pnav-head{
  display:flex; align-items:center; gap:9px; 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:var(--panel); color:var(--ink)}
.pnav-head .roman{
  font-family:var(--mono); font-size:11px; color:var(--ink-3); min-width:34px;
  background:var(--panel); padding:2px 5px; border-radius:5px; 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:10px}
.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)}
.pnav-group.open .pnav-list{display:block}
.pnav-item{
  display:flex; gap:8px; padding:5px 9px; border-radius:6px; color:var(--ink-2); font-size:13px;
}
.pnav-item:hover{background:var(--panel); color:var(--ink); text-decoration:none}
.pnav-item.active{background:rgba(74,168,255,.14); color:#cfe6ff}
.pnav-item .ch{font-family:var(--mono); font-size:11px; color:var(--ink-3); min-width:30px}
.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(--warn)}
.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:6px 0 30px}
.hero h1{font-size:29px; margin:0 0 8px; letter-spacing:-.4px}
.hero p{color:var(--ink-2); margin:0; max-width:70ch}
.hero .subnote{margin-top:14px; font-size:12.5px; color:var(--ink-3);
  border-left:2px solid var(--warn); padding:8px 12px; background:var(--warn-bg); border-radius:0 8px 8px 0}
.stat-row{display:flex; gap:10px; flex-wrap:wrap; margin:20px 0 6px}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:12px 16px; min-width:118px}
.stat b{display:block; font-size:22px; font-variant-numeric:tabular-nums}
.stat span{font-size:12px; color:var(--ink-3)}

.part-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-top:26px}
.part-card{
  display:block; background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; color:var(--ink);
}
.part-card:hover{border-color:var(--line-2); background:var(--panel-2); text-decoration:none; transform:translateY(-1px)}
.part-card{transition:transform .12s, border-color .12s, background .12s}
.part-card .pc-top{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.part-card .roman{font-family:var(--mono); font-size:12px; color:#fff; background:linear-gradient(135deg,var(--accent),#2d6fd0);
  padding:3px 9px; border-radius:6px}
.part-card h3{margin:0; font-size:16px; flex:1}
.part-card .pc-count{color:var(--ink-3); font-size:12.5px}
.part-card .pc-list{color:var(--ink-3); font-size:12.5px; line-height:1.7;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}

/* part page */
.crumbs{font-size:13px; color:var(--ink-3); margin-bottom:16px}
.crumbs a{color:var(--ink-2)}
.part-head{display:flex; align-items:center; gap:14px; margin-bottom:22px}
.part-head .roman{font-family:var(--mono); font-size:15px; color:#fff; background:linear-gradient(135deg,var(--accent),#2d6fd0); padding:5px 12px; border-radius:8px}
.part-head h1{margin:0; font-size:24px}
.proc-list{display:grid; gap:9px}
.proc-row{
  display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:13px 16px; color:var(--ink);
}
.proc-row:hover{border-color:var(--line-2); background:var(--panel-2); text-decoration:none}
.proc-row .ch{font-family:var(--mono); font-size:12px; color:var(--accent); background:var(--bg);
  border:1px solid var(--line); padding:3px 8px; border-radius:6px; min-width:52px; text-align:center}
.proc-row .pr-main{flex:1; min-width:0}
.proc-row .pr-title{font-weight:600; font-size:15.5px}
.proc-row .pr-meta{font-size:12px; color:var(--ink-3); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.proc-row .pr-figs{font-size:11.5px; color:var(--ink-3); white-space:nowrap}

/* procedure read view */
.proc-header{margin-bottom:8px}
.proc-header .kicker{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-3); margin-bottom:8px; flex-wrap:wrap}
.proc-header .kicker .ch{font-family:var(--mono); color:var(--accent); background:var(--panel); border:1px solid var(--line); padding:2px 8px; border-radius:6px}
.proc-header h1{margin:0 0 8px; font-size:27px; letter-spacing:-.3px}
.tag-row{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 4px}
.tag{font-size:11.5px; color:var(--ink-2); background:var(--panel); border:1px solid var(--line); padding:2px 9px; border-radius:20px}
.tag.alias{color:var(--accent-2)}
.view-toggle{display:inline-flex; gap:4px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:4px; margin:20px 0 8px}
.view-toggle button{
  background:none; border:0; color:var(--ink-2); padding:7px 16px; border-radius:7px; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:500;
}
.view-toggle button.active{background:var(--accent); color:#fff}

/* ── quick steps ── */
.quicksteps{max-width:72ch}
.qs-note{font-size:12.5px; color:var(--ink-3); background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:8px 12px; margin:14px 0 18px}
.qs-list{margin:0; padding:0 0 0 8px; list-style:none; counter-reset:qs}
.qs-list li{
  counter-increment:qs; position:relative; margin:0; padding:10px 12px 14px 52px;
  font-size:15px; line-height:1.55; border-left:1px solid var(--line);
}
.qs-figs{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.qs-figs figure.fig{margin:0; flex:1 1 240px; max-width:320px; padding:8px}
.qs-figs figure.fig figcaption{font-size:11px; margin-top:6px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.qs-list li::before{
  content:counter(qs); position:absolute; left:-16px; top:8px;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background:var(--panel-2); border:1px solid var(--line-2); border-radius:50%;
  font-family:var(--mono); font-size:12.5px; color:var(--accent); font-weight:600;
}
.qs-list li:last-child{border-left-color:transparent}

.prose{max-width:78ch}
.prose h2{font-size:19px; margin:34px 0 10px; padding-bottom:7px; border-bottom:1px solid var(--line); scroll-margin-top:70px}
.prose h4.sub{font-size:15.5px; margin:20px 0 6px; color:var(--accent-2)}
.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(--panel); padding:1px 6px; border-radius:5px; border:1px solid var(--line)}
.prose strong{color:#fff}
.wl{color:var(--accent); border-bottom:1px dashed rgba(74,168,255,.5)}
.wl-ext{color:var(--ink); border-bottom:1px dotted var(--ink-3)}
blockquote.callout{margin:14px 0; padding:11px 16px; background:var(--panel); border-left:3px solid var(--accent); border-radius:0 8px 8px 0; color:var(--ink-2)}
blockquote.callout.warn{background:var(--warn-bg); border-left-color:var(--warn)}

/* figures */
figure.fig{margin:18px 0; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:12px; 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(6,9,13,.94); display:grid; place-items:center; padding:24px}
.lightbox img{max-width:96vw; max-height:82vh; border-radius:8px; 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:var(--ink-2); 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(1200px 600px at 50% -10%,#182230,#0c0f14 70%)}
.gate-box{width:min(400px,92vw); background:var(--panel); border:1px solid var(--line-2); border-radius:18px;
  padding:34px 30px; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.6); display:flex; flex-direction:column; gap:12px}
.gate-mark{width:52px; height:52px; margin:0 auto 6px; display:grid; place-items:center; border-radius:14px;
  background:linear-gradient(135deg,var(--accent),#2d6fd0); color:#fff; font-size:26px; font-weight:700}
.gate-box h1{margin:0; font-size:21px}
.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:10px; background:var(--bg); border:1px solid var(--line-2);
  color:var(--ink); font-size:15px; outline:none; text-align:center}
.gate-box input:focus{border-color:var(--accent)}
.gate-box button{height:44px; border:0; border-radius:10px; background:var(--accent); color:#fff; font-size:15px;
  font-weight:600; cursor:pointer; font-family:inherit}
.gate-box button:hover{background:#3a97ef}
.gate-err{color:var(--danger); 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}
.back-link{display:inline-flex; align-items:center; gap:6px; color:var(--ink-2); font-size:13.5px; margin-bottom:18px}

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