/* ============================================================================
   Secured.AD RADIUS/NAC Platform — Guide & Work-Instruction stylesheet
   Print-first (Letter), screen-friendly. Committed light-document look.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --accent:#4f46e5;          /* indigo-600 */
  --accent-dark:#4338ca;
  --accent-soft:#eef2ff;
  --ink:#0f172a;             /* slate-900 */
  --body:#1f2937;            /* slate-800 */
  --muted:#64748b;           /* slate-500 */
  --faint:#94a3b8;
  --line:#e2e8f0;            /* slate-200 */
  --line-strong:#cbd5e1;
  --paper:#ffffff;
  --subtle:#f8fafc;          /* slate-50 */
  --code-bg:#0f172a;
  --code-ink:#e2e8f0;
  /* semantic callouts */
  --warn:#b45309;  --warn-bg:#fffbeb;  --warn-line:#fcd34d;
  --danger:#b91c1c;--danger-bg:#fef2f2;--danger-line:#fca5a5;
  --ok:#047857;    --ok-bg:#ecfdf5;    --ok-line:#6ee7b7;
  --note:#1d4ed8;  --note-bg:#eff6ff;  --note-line:#93c5fd;
  --sec:#7c3aed;   --sec-bg:#f5f3ff;   --sec-line:#c4b5fd;
}

*{box-sizing:border-box}
html{-webkit-print-color-adjust:exact;print-color-adjust:exact}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--body); background:var(--subtle);
  margin:0; font-size:15px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.page{
  max-width:820px; margin:0 auto; background:var(--paper);
  padding:56px 64px 72px; min-height:100vh;
  box-shadow:0 1px 3px rgba(15,23,42,.08),0 10px 40px rgba(15,23,42,.06);
}

/* ---------- typography ---------- */
h1,h2,h3,h4{color:var(--ink); line-height:1.25; text-wrap:balance; margin:0 0 .4em}
h1{font-size:30px; font-weight:800; letter-spacing:-.02em}
h2{font-size:21px; font-weight:700; letter-spacing:-.01em; margin-top:2.2em;
   padding-bottom:.35em; border-bottom:2px solid var(--line)}
h2 .num{color:var(--accent); font-variant-numeric:tabular-nums; margin-right:.5em}
h3{font-size:16.5px; font-weight:700; margin-top:1.6em; color:#111827}
h4{font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
p{margin:.5em 0 .9em}
a{color:var(--accent-dark); text-decoration:none; border-bottom:1px solid var(--line-strong)}
strong{color:var(--ink); font-weight:600}
small{font-size:12.5px; color:var(--muted)}
code,kbd,.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
code{background:var(--accent-soft); color:var(--accent-dark); padding:.08em .4em;
     border-radius:5px; font-size:.86em; font-weight:500}
kbd{background:#fff;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:6px;
    padding:.06em .45em;font-size:.82em;color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.03)}

/* ---------- cover ---------- */
.cover{padding:0 0 8px; border-bottom:3px solid var(--accent); margin-bottom:8px}
.brandbar{display:flex; align-items:center; gap:12px; margin-bottom:38px}
.brandmark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--accent),#7c3aed);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:16px;
  box-shadow:0 2px 8px rgba(79,70,229,.35)}
.brandtext{font-weight:700;color:var(--ink);font-size:15px;letter-spacing:-.01em}
.brandtext span{display:block;font-weight:500;color:var(--muted);font-size:12px;letter-spacing:.02em}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.cover h1{font-size:38px;margin-bottom:.25em}
.cover .lede{font-size:17px;color:var(--muted);max-width:60ch;margin:.2em 0 1.6em}
.meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 28px;margin:22px 0 6px;
  border-top:1px solid var(--line);padding-top:18px}
.meta div{display:flex;gap:10px;font-size:13px;padding:4px 0}
.meta dt{color:var(--faint);font-weight:600;min-width:96px;text-transform:uppercase;font-size:11px;letter-spacing:.05em;padding-top:2px}
.meta dd{margin:0;color:var(--body);font-weight:500}
.audience{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  padding:5px 12px;border-radius:999px;letter-spacing:.03em}
.audience.admin{background:#eef2ff;color:#4338ca}
.audience.user{background:#ecfdf5;color:#047857}

/* ---------- TOC ---------- */
.toc{background:var(--subtle);border:1px solid var(--line);border-radius:12px;padding:20px 26px;margin:26px 0}
.toc h4{margin:0 0 10px}
.toc ol{margin:0;padding-left:0;list-style:none;counter-reset:toc}
.toc li{counter-increment:toc;padding:5px 0;border-bottom:1px dashed var(--line);font-size:14px;display:flex;gap:12px}
.toc li:last-child{border-bottom:0}
.toc li::before{content:counter(toc,decimal-leading-zero);color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums;font-size:12.5px}
.toc a{border:0;color:var(--body)}

/* ---------- steps ---------- */
.steps{counter-reset:step;list-style:none;padding:0;margin:1.2em 0}
.steps>li{counter-increment:step;position:relative;padding:2px 0 20px 52px;margin:0;break-inside:avoid}
.steps>li::before{content:counter(step);position:absolute;left:0;top:-2px;width:34px;height:34px;
  background:var(--accent);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;box-shadow:0 2px 6px rgba(79,70,229,.3)}
.steps>li::after{content:"";position:absolute;left:16.5px;top:34px;bottom:0;width:2px;background:var(--line)}
.steps>li:last-child::after{display:none}
.steps>li .st{font-weight:700;color:var(--ink);font-size:15.5px;display:block;margin-bottom:.15em}
.steps>li p{margin:.3em 0 .5em}
.substep{list-style:disc;margin:.4em 0 .4em 1.1em;padding:0}
.substep li{margin:.2em 0}

/* ---------- callouts ---------- */
.call{border:1px solid var(--line);border-left-width:4px;border-radius:9px;padding:14px 18px 14px 16px;
  margin:1.1em 0;background:#fff;break-inside:avoid;font-size:14px}
.call .h{font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:4px;font-size:13.5px;letter-spacing:.01em}
.call p:last-child{margin-bottom:0}.call p:first-of-type{margin-top:.2em}
.call .ic{width:20px;height:20px;flex:none}
.call.note{border-color:var(--note-line);background:var(--note-bg)}   .call.note .h{color:var(--note)}
.call.warn{border-color:var(--warn-line);background:var(--warn-bg)}   .call.warn .h{color:var(--warn)}
.call.danger{border-color:var(--danger-line);background:var(--danger-bg)}.call.danger .h{color:var(--danger)}
.call.ok{border-color:var(--ok-line);background:var(--ok-bg)}         .call.ok .h{color:var(--ok)}
.call.sec{border-color:var(--sec-line);background:var(--sec-bg)}      .call.sec .h{color:var(--sec)}

/* ---------- code blocks ---------- */
pre{background:var(--code-bg);color:var(--code-ink);border-radius:10px;padding:15px 18px;overflow-x:auto;
  font-family:'JetBrains Mono',monospace;font-size:12.8px;line-height:1.6;margin:1em 0;break-inside:avoid}
pre code{background:none;color:inherit;padding:0;font-weight:400}
pre .c{color:#7c89a4}     /* comment */
pre .k{color:#c4b5fd}     /* keyword */
pre .s{color:#6ee7b7}     /* string  */
pre .v{color:#fcd34d}     /* value   */

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;margin:1.1em 0;font-size:13.5px;break-inside:avoid}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--ink);color:#fff;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;border:0}
thead th:first-child{border-top-left-radius:8px}thead th:last-child{border-top-right-radius:8px}
tbody tr:nth-child(even){background:var(--subtle)}
td code{font-size:.82em}

/* ---------- figures / screenshots ---------- */
figure{margin:1.3em 0;break-inside:avoid}
figure img{display:block;width:100%;border-radius:10px;border:1px solid var(--line-strong);
  box-shadow:0 4px 16px rgba(15,23,42,.1)}
figure.shot img{background:#0b0f19}
figcaption{font-size:12.5px;color:var(--muted);margin-top:8px;text-align:center;font-style:italic}
figcaption b{color:var(--accent-dark);font-style:normal}
.ph{border:2px dashed var(--line-strong);border-radius:10px;background:var(--subtle);
  padding:34px 20px;text-align:center;color:var(--faint);font-size:13px;break-inside:avoid}
.ph b{display:block;color:var(--muted);font-size:13px;margin-bottom:3px}
.svgfig{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px}
.svgfig svg{display:block;width:100%;height:auto}

/* ---------- misc ---------- */
.pill{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;letter-spacing:.03em;vertical-align:middle}
.pill.get{background:#ecfdf5;color:#047857}.pill.post{background:#eef2ff;color:#4338ca}
.pill.del{background:#fef2f2;color:#b91c1c}.pill.patch{background:#fffbeb;color:#b45309}
.field{border-left:3px solid var(--line-strong);padding:2px 0 2px 14px;margin:.6em 0}
.field b{color:var(--ink)}
hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.lead-in{background:var(--accent-soft);border-radius:10px;padding:16px 20px;margin:1.2em 0;font-size:14.5px;color:#3730a3}
.checklist{list-style:none;padding:0;margin:1em 0}
.checklist li{padding:6px 0 6px 30px;position:relative;border-bottom:1px solid var(--line);font-size:14px}
.checklist li:last-child{border:0}
.checklist li::before{content:"";position:absolute;left:0;top:9px;width:16px;height:16px;border:2px solid var(--line-strong);border-radius:4px}
.foot{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--faint);display:flex;justify-content:space-between;gap:16px}

/* ---------- print ---------- */
@page{size:Letter;margin:16mm 15mm 18mm}
@media print{
  body{background:#fff;font-size:11.2pt}
  .page{box-shadow:none;max-width:none;margin:0;padding:0;min-height:0}
  h2{margin-top:20pt}
  .cover{page-break-after:always}
  h2{page-break-after:avoid}
  .steps>li,.call,figure,pre,table,.svgfig{page-break-inside:avoid}
  a{color:var(--accent-dark);border:0}
  .no-print{display:none!important}
}
@media(max-width:640px){.page{padding:32px 22px}.meta{grid-template-columns:1fr}}


/* Print / Save-as-PDF button (screen only) */
.printbtn{position:fixed;top:16px;right:16px;z-index:50;font-size:12.5px;font-weight:600;padding:9px 15px;border-radius:8px;border:1px solid var(--line-strong);background:#fff;color:var(--body);cursor:pointer;box-shadow:0 2px 10px rgba(15,23,42,.12);display:inline-flex;align-items:center;gap:6px}
.printbtn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
@media print{.printbtn{display:none!important}}