/* =============================================================
   GHIL LABS — GUIDE SHELL  (all user guides + guides/index.html)
   Requires ghil-tokens.css AND ghil-logistics.css (in that order).
   ghil-logistics.css supplies the working chrome — suitebar, skip
   link, guide header/main sizing, 44px touch targets — its :root
   now aliases straight to the new tokens. This file only carries
   the guide-specific boilerplate that used to be copy-pasted with
   raw hex and raw px into all fourteen guide files' own <style>
   blocks (byte-identical across thirteen of them).
   ============================================================= */

body[data-ghil-page="guide"]{font-family:var(--sans);-webkit-font-smoothing:antialiased;word-break:keep-all}
body[data-ghil-page="guide"] h2{font:800 var(--t-h2)/1.28 var(--sans);color:var(--ink);letter-spacing:-.01em}
body[data-ghil-page="guide"] h3{font:700 var(--t-h3)/1.4 var(--sans);color:var(--ink)}

.sec{font:700 var(--t-label)/1.3 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--rule);border-radius:10px}

.dt{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;
    font-size:var(--t-xs);border-collapse:collapse}
.dt th{background:var(--paper-2);color:var(--ink-2);font-weight:600;text-align:left;padding:8px 10px;
       border-bottom:1px solid var(--rule);white-space:nowrap;font-size:var(--t-xs)}
.dt td{padding:8px 10px;border-bottom:1px solid var(--rule-soft);vertical-align:top;color:var(--ink-2);line-height:1.7}
.dt tr:last-child td{border-bottom:none}

code{background:var(--paper-2);padding:1px 5px;border-radius:4px;font-size:var(--t-xs);
     font-family:var(--mono);color:var(--ink)}
.prose p{font-size:var(--t-sm);line-height:1.85;color:var(--ink-2)}

.step{counter-increment:st;position:relative;padding-left:38px;padding-bottom:18px;
      border-left:2px solid var(--rule);margin-left:13px}
.step:last-child{border-left-color:transparent;padding-bottom:0}
.step::before{content:counter(st);position:absolute;left:-14px;top:-2px;width:26px;height:26px;
  border-radius:50%;background:var(--ink);color:var(--card);font:800 var(--t-xs)/26px var(--mono);
  display:flex;align-items:center;justify-content:center}
.steps{counter-reset:st}

.uc{border-left:3px solid var(--teal);background:var(--teal-bg);border-radius:0 8px 8px 0}
.pit{border-left:3px solid var(--red);background:var(--red-bg);border-radius:0 8px 8px 0}
.anchor{scroll-margin-top:74px}

.lang{font:700 var(--t-label)/1 var(--mono);padding:5px 10px;border-radius:999px;
      border:1px solid rgba(255,255,255,.22);color:#cbd5e1;text-decoration:none;transition:all .15s}
.lang:hover{background:rgba(255,255,255,.12);color:#fff}

/* type-scale utilities — same names as ghil-demo.css, kept in sync deliberately */
.gh-t-sm{font-size:var(--t-sm)!important}
.gh-t-xs{font-size:var(--t-xs)!important}
.gh-t-label{font-size:var(--t-label)!important;font-family:var(--mono);letter-spacing:.08em}

/* ---------------- GUIDE HEADER + MAIN (no Tailwind dependency) ---------------- */
.guide-nav{position:sticky;top:0;z-index:40;background:var(--stage);color:var(--on-stage);
  box-shadow:0 2px 10px rgba(0,0,0,.18)}
.guide-nav-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:60px;flex-wrap:wrap;padding-block:8px}
.guide-nav-back{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:6px;background:rgba(255,255,255,.08);color:var(--on-stage);text-decoration:none;
  font:600 var(--t-sm)/1 var(--sans);flex:none}
.guide-nav-back:hover{background:rgba(255,255,255,.16)}
.guide-nav-title{min-width:0}
.guide-nav-title h1{font:700 var(--t-sm)/1.3 var(--sans);color:var(--on-stage);margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guide-nav-title small{display:block;font:400 var(--t-xs)/1.3 var(--mono);color:var(--on-stage-3)}
.guide-nav-links{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.guide-nav-links a{font:600 var(--t-xs)/1 var(--sans);text-decoration:none;padding:9px 12px;
  border-radius:6px;color:var(--on-stage-2);white-space:nowrap}
.guide-nav-links a:hover{background:rgba(255,255,255,.1);color:var(--on-stage)}
.guide-nav-links a.cta{background:var(--teal);color:#fff}
.guide-nav-links a.cta:hover{background:var(--teal);opacity:.9}

.guide-main{max-width:var(--maxw);margin-inline:auto;padding:var(--gutter);
  display:flex;flex-direction:column;gap:20px}
.guide-main .card{padding:clamp(20px,2.6vw,32px)}

.guide-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:18px}
.guide-stat{background:var(--paper-2);border:1px solid var(--rule);border-radius:8px;padding:14px}
.guide-stat .gh-t-label{display:block;color:var(--muted);font-weight:700;margin-bottom:5px}

@media(max-width:680px){
  .guide-nav-row{min-height:auto}
  .guide-nav-title{width:100%;order:2}
  .guide-nav-links{width:100%;justify-content:flex-end;order:3}
}