:root{
  --bg:#ffffff; --bg-alt:#f7f8f7; --bg-sunk:#f1f3f1;
  --fg:#1a1d1a; --fg-soft:#4d554d; --fg-faint:#767f76;
  --line:#e2e6e2; --line-strong:#cbd2cb;
  --accent:#3f6f2a; --accent-soft:#eef4ea; --accent-line:#b9d3a8;
  --warn:#8a5a00; --warn-soft:#fdf5e4; --warn-line:#e8d5a3;
  --code-bg:#f2f4f2; --code-fg:#2c3a26;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --sidebar:290px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#141714; --bg-alt:#1b1f1b; --bg-sunk:#20251f;
    --fg:#e8ebe7; --fg-soft:#b2bab0; --fg-faint:#868f84;
    --line:#2c322b; --line-strong:#3e463d;
    --accent:#9dcb7c; --accent-soft:#1e2718; --accent-line:#3b4d2e;
    --warn:#e0b968; --warn-soft:#2a2313; --warn-line:#4a3d1c;
    --code-bg:#1e231d; --code-fg:#cfdac6;
  }
}
:root[data-theme="dark"]{
  --bg:#141714; --bg-alt:#1b1f1b; --bg-sunk:#20251f;
  --fg:#e8ebe7; --fg-soft:#b2bab0; --fg-faint:#868f84;
  --line:#2c322b; --line-strong:#3e463d;
  --accent:#9dcb7c; --accent-soft:#1e2718; --accent-line:#3b4d2e;
  --warn:#e0b968; --warn-soft:#2a2313; --warn-line:#4a3d1c;
  --code-bg:#1e231d; --code-fg:#cfdac6;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- layout ---------- */
.wrap{display:flex; align-items:flex-start; max-width:1360px; margin:0 auto}
.sidebar{
  position:sticky; top:0; flex:0 0 var(--sidebar); width:var(--sidebar);
  height:100vh; overflow-y:auto; padding:28px 20px 40px 28px;
  border-right:1px solid var(--line); background:var(--bg-alt);
}
main{flex:1 1 auto; min-width:0; padding:48px 56px 120px; max-width:920px}

/* ---------- sidebar ---------- */
.brand{display:block; margin-bottom:4px; font-size:15px; font-weight:650; color:var(--fg); letter-spacing:-.01em}
.brand span{color:var(--accent)}
.brand-sub{margin:0 0 20px; font-size:12.5px; color:var(--fg-faint)}
.toc-title{
  margin:0 0 10px; font-size:11px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--fg-faint);
}
.toc{list-style:none; margin:0; padding:0; font-size:13.5px; line-height:1.45}
.toc li{margin:0}
.toc a{
  display:flex; gap:8px; padding:5px 8px; margin:1px 0;
  border-radius:5px; color:var(--fg-soft); text-decoration:none;
}
.toc a:hover{background:var(--bg-sunk); color:var(--fg)}
.toc a.active{background:var(--accent-soft); color:var(--accent); font-weight:600}
.toc .num{flex:0 0 30px; font-variant-numeric:tabular-nums; color:var(--fg-faint); font-size:12px}
.toc a.active .num{color:var(--accent)}
.theme-btn{
  margin-top:22px; width:100%; padding:7px 10px; font:inherit; font-size:12.5px;
  color:var(--fg-soft); background:var(--bg); border:1px solid var(--line-strong);
  border-radius:6px; cursor:pointer; text-align:left;
}
.theme-btn:hover{border-color:var(--accent-line); color:var(--fg)}

/* ---------- masthead ---------- */
.masthead{margin-bottom:44px; padding-bottom:32px; border-bottom:2px solid var(--line-strong)}
.eyebrow{
  margin:0 0 14px; font-size:11.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent);
}
h1{margin:0 0 14px; font-size:39px; line-height:1.12; font-weight:700; letter-spacing:-.025em}
.lede{margin:0 0 26px; font-size:17.5px; line-height:1.6; color:var(--fg-soft); max-width:44em}
.meta-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:8px; overflow:hidden; margin-bottom:26px;
}
.meta-grid div{background:var(--bg-alt); padding:11px 14px}
.meta-grid dt{margin:0 0 3px; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-faint)}
.meta-grid dd{margin:0; font-size:13.5px; font-weight:600; color:var(--fg)}
.dl-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.dl{
  display:inline-flex; align-items:center; gap:9px; padding:10px 16px;
  background:var(--accent); color:#fff; border-radius:7px;
  font-size:14px; font-weight:600; text-decoration:none;
}
:root[data-theme="dark"] .dl,
:root:not([data-theme="light"]) .dl{color:#14171a}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .dl{color:#fff}}
.dl:hover{text-decoration:none; filter:brightness(1.07)}
.dl-note{font-size:12.5px; color:var(--fg-faint)}

/* ---------- headings ---------- */
h2{
  margin:64px 0 18px; padding-top:20px; border-top:1px solid var(--line);
  font-size:26px; line-height:1.25; font-weight:700; letter-spacing:-.02em;
  scroll-margin-top:24px;
}
h2 .rn{display:block; margin-bottom:5px; font-size:11.5px; font-weight:700; letter-spacing:.1em; color:var(--accent)}
h3{margin:34px 0 10px; font-size:17.5px; font-weight:650; letter-spacing:-.01em; scroll-margin-top:24px}
h4{margin:24px 0 8px; font-size:14.5px; font-weight:650; color:var(--fg-soft)}
p{margin:0 0 14px; max-width:44em}
ul,ol{margin:0 0 16px; padding-left:22px; max-width:44em}
li{margin:0 0 6px}
li>ul,li>ol{margin:6px 0 4px}
strong{font-weight:650}

/* ---------- code & tables ---------- */
code{
  font:500 13px/1.4 var(--mono); background:var(--code-bg); color:var(--code-fg);
  padding:1.5px 5px; border-radius:4px; word-break:break-word;
}
pre{
  margin:0 0 18px; padding:14px 16px; overflow-x:auto;
  background:var(--code-bg); border:1px solid var(--line);
  border-radius:8px; font:500 12.5px/1.6 var(--mono); color:var(--code-fg);
}
pre code{background:none; padding:0; font-size:inherit}
.tw{overflow-x:auto; margin:0 0 20px; border:1px solid var(--line); border-radius:8px}
table{width:100%; border-collapse:collapse; font-size:13.5px}
th,td{padding:9px 13px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
th{
  background:var(--bg-sunk); font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--fg-soft); white-space:nowrap;
}
tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even) td{background:var(--bg-alt)}
td code{font-size:12px}

/* ---------- callouts ---------- */
.note,.warn{
  margin:0 0 20px; padding:13px 16px; border-radius:8px;
  border:1px solid var(--accent-line); background:var(--accent-soft);
  font-size:14px; max-width:46em;
}
.warn{border-color:var(--warn-line); background:var(--warn-soft)}
.note p,.warn p{margin:0 0 8px; max-width:none}
.note p:last-child,.warn p:last-child{margin:0}
.note .lbl,.warn .lbl{
  display:block; margin-bottom:5px; font-size:10.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
}
.warn .lbl{color:var(--warn)}

/* ---------- misc components ---------- */
.pill{
  display:inline-block; padding:2px 8px; border-radius:20px;
  background:var(--accent-soft); border:1px solid var(--accent-line);
  color:var(--accent); font-size:11px; font-weight:650; white-space:nowrap;
}
.pill.dir{background:var(--bg-sunk); border-color:var(--line-strong); color:var(--fg-soft)}
figure{margin:0 0 22px}
figure svg{display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:8px; background:var(--bg-alt)}
figcaption{margin-top:8px; font-size:12.5px; color:var(--fg-faint)}
.flow{
  display:flex; flex-wrap:wrap; align-items:stretch; gap:8px;
  margin:0 0 20px; padding:0; list-style:none; counter-reset:f;
}
.flow li{
  flex:1 1 150px; margin:0; padding:11px 13px;
  background:var(--bg-alt); border:1px solid var(--line);
  border-left:3px solid var(--accent-line); border-radius:6px; font-size:13px;
}
.flow li b{display:block; margin-bottom:3px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent)}
.print-toc{display:none}
.masthead + h2, .print-toc + h2{margin-top:40px; padding-top:0; border-top:none}
footer{
  margin-top:72px; padding-top:24px; border-top:1px solid var(--line);
  font-size:13px; color:var(--fg-faint);
}
footer p{max-width:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .wrap{display:block}
  .sidebar{
    position:static; width:auto; height:auto; border-right:none;
    border-bottom:1px solid var(--line); padding:22px 24px;
  }
  .sidebar{--sidebar:auto}
  .toc{columns:2; column-gap:26px}
  main{padding:32px 24px 90px; max-width:none}
  h1{font-size:31px}
  h2{font-size:23px}
}
@media (max-width:560px){
  .toc{columns:1}
  .meta-grid{grid-template-columns:repeat(2,1fr)}
  main{padding:26px 18px 70px}
  h1{font-size:26px}
  .sidebar{padding:18px}
}

/* ---------- print ---------- */
@media print{
  @page{size:A4; margin:16mm 14mm}
  :root{
    --bg:#fff; --bg-alt:#fff; --bg-sunk:#f4f5f4; --fg:#000; --fg-soft:#333;
    --fg-faint:#555; --line:#c9cec9; --line-strong:#9aa39a;
    --accent:#2f5720; --accent-soft:#f2f6ef; --accent-line:#b6cba7;
    --code-bg:#f4f5f4; --code-fg:#22301c;
  }
  body{font-size:10.2pt; line-height:1.5; background:#fff; color:#000}
  *{-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important}
  .sidebar,.theme-btn,.dl-row{display:none !important}
  .wrap{display:block; max-width:none}
  main{padding:0; max-width:none}
  a{color:#000; text-decoration:none}
  .masthead{margin-bottom:20pt; padding-bottom:14pt; border-bottom-width:1.5pt}
  .print-toc{display:block; page-break-after:always; break-after:page}
  .print-toc h2{page-break-before:avoid !important; break-before:avoid !important}
  .print-toc ol{list-style:none; margin:0; padding:0; font-size:9.6pt}
  .print-toc li{display:flex; gap:10pt; padding:1.7pt 0; border-bottom:.5pt dotted #c9cec9; margin:0}
  .print-toc h2{margin-bottom:7pt; font-size:14pt}
  .print-toc .rnum{flex:0 0 34pt; font-weight:700; color:#2f5720}
  .masthead + .print-toc h2{margin-top:0}
  h1{font-size:23pt}
  .lede{font-size:11.5pt}
  .meta-grid{margin-bottom:0; grid-template-columns:repeat(3,1fr)}
  h2{
    page-break-before:always; break-before:page;
    page-break-after:avoid; break-after:avoid;
    margin:0 0 12pt; padding-top:0; border-top:none; font-size:16pt;
  }
  h3,h4{page-break-after:avoid; break-after:avoid}
  h3{font-size:12pt; margin:16pt 0 6pt}
  h4{font-size:10.5pt; margin:12pt 0 4pt}
  p,ul,ol,li{orphans:3; widows:3}
  .tw,table,figure,pre,.note,.warn,.flow{page-break-inside:avoid; break-inside:avoid}
  thead{display:table-header-group}
  tr{page-break-inside:avoid; break-inside:avoid}
  table{font-size:9pt}
  th,td{padding:5pt 7pt}
  pre{font-size:8.6pt; padding:8pt 10pt}
  .flow li{flex:1 1 30%}
  footer{page-break-before:always; break-before:page; margin-top:0}
}

/* ---------- shared: page switcher ---------- */
.docnav{margin:0 0 20px; padding:0 0 18px; border-bottom:1px solid var(--line); list-style:none}
.docnav li{margin:0}
.docnav a{
  display:block; padding:6px 9px; margin:2px 0; border-radius:5px;
  font-size:13.5px; color:var(--fg-soft); text-decoration:none;
}
.docnav a:hover{background:var(--bg-sunk); color:var(--fg)}
.docnav a[aria-current="page"]{background:var(--accent-soft); color:var(--accent); font-weight:650}
.docnav .kind{display:block; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-faint)}
.docnav a[aria-current="page"] .kind{color:var(--accent)}

/* ---------- setup guide: numbered steps ---------- */
.steps{counter-reset:st; list-style:none; margin:0 0 22px; padding:0; max-width:46em}
.steps>li{
  counter-increment:st; position:relative; margin:0 0 14px;
  padding:0 0 0 40px; min-height:26px;
}
.steps>li::before{
  content:counter(st); position:absolute; left:0; top:0;
  width:26px; height:26px; border-radius:50%;
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent);
  font-size:12.5px; font-weight:700; line-height:24px; text-align:center;
}
.steps>li>p:first-child{margin-top:2px}
.steps h4{margin:2px 0 6px}

/* ---------- terminal / file blocks ---------- */
.term{margin:0 0 18px}
.term .cap{
  display:flex; gap:8px; align-items:center; padding:6px 12px;
  background:var(--bg-sunk); border:1px solid var(--line); border-bottom:none;
  border-radius:8px 8px 0 0; font:600 11px/1.4 var(--mono);
  letter-spacing:.04em; text-transform:uppercase; color:var(--fg-faint);
}
.term pre{margin:0; border-radius:0 0 8px 8px}

/* ---------- checklist ---------- */
.check{list-style:none; margin:0 0 20px; padding:0; max-width:46em}
.check li{
  position:relative; margin:0 0 8px; padding:0 0 0 26px; font-size:14.5px;
}
.check li::before{
  content:"✓"; position:absolute; left:0; top:-1px;
  color:var(--accent); font-weight:700;
}

/* ---------- print additions ---------- */
@media print{
  .docnav{display:none !important}
  .steps>li::before{background:#f2f6ef; border-color:#b6cba7; color:#2f5720}
  .term .cap{font-size:8pt; padding:4pt 8pt}
  .steps>li,.check li,.term{page-break-inside:avoid; break-inside:avoid}
}

/* ---------- operator guide: procedures ---------- */
.proc{margin:0 0 32px; max-width:46em}
.proc h3{margin:0 0 12px; display:flex; gap:11px; align-items:baseline}
.proc h3 .no{
  flex:0 0 auto; font-variant-numeric:tabular-nums; font-size:12.5px; font-weight:700;
  letter-spacing:.04em; color:var(--accent); background:var(--accent-soft);
  border:1px solid var(--accent-line); border-radius:5px; padding:2px 7px;
}
.proc-meta{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  margin:0 0 14px; background:var(--line); border:1px solid var(--line);
  border-radius:7px; overflow:hidden;
}
.proc-meta div{background:var(--bg-alt); padding:8px 12px}
.proc-meta dt{margin:0 0 2px; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-faint)}
.proc-meta dd{margin:0; font-size:12.5px; color:var(--fg)}
.path{
  margin:0 0 12px; padding:8px 13px; border-radius:7px;
  background:var(--code-bg); border:1px solid var(--line);
  font-size:13px; font-weight:600; color:var(--fg);
}
.path .sep{color:var(--fg-faint); font-weight:400; padding:0 2px}
.proc ol{margin:0 0 14px; padding-left:22px}
.proc ol>li{margin:0 0 7px}
.outcome,.watch{
  margin:0; padding:11px 14px; border-radius:7px; font-size:13.5px;
  border:1px solid var(--accent-line); background:var(--accent-soft);
}
.watch{border-color:var(--warn-line); background:var(--warn-soft)}
.outcome .lbl,.watch .lbl{
  display:block; margin-bottom:4px; font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
}
.watch .lbl{color:var(--warn)}
.outcome+.watch{margin-top:10px}
.outcome p,.watch p{margin:0; max-width:none}

/* phase groups inside the sidebar TOC */
.toc .grp{
  margin:14px 0 4px; padding:0 8px; font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--fg-faint);
}
.toc li:first-child .grp{margin-top:0}

@media (max-width:560px){
  .proc-meta{grid-template-columns:1fr}
}

@media print{
  .proc{page-break-inside:auto; break-inside:auto}
  .proc h3{page-break-after:avoid; break-after:avoid}
  .proc-meta{grid-template-columns:repeat(3,1fr); page-break-inside:avoid; break-inside:avoid}
  .path,.outcome,.watch{page-break-inside:avoid; break-inside:avoid}
  .proc h3 .no{background:#f2f6ef; border-color:#b6cba7; color:#2f5720}
  .print-toc .grp{
    margin:9pt 0 3pt; font-size:8pt; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color:#555; border:none; padding:0;
  }
  .print-toc li.grpli{display:block; border:none; padding:0}
}

/* Rail header, as on the BaseUp HR site: product, document title, version line, switcher */
.brand-doc{display:block; font-weight:650; color:var(--fg)}
.brand-sub{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px}
.ver{display:flex; gap:8px; margin:0 0 24px}
.ver a{font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--fg-faint);
  text-decoration:none; border:1px solid var(--line-strong); padding:5px 11px}
.ver a:hover{color:var(--accent); border-color:var(--accent)}
.ver a[aria-current="page"]{color:var(--accent); border-color:var(--accent); background:var(--accent-soft); font-weight:600}
