/* ─── Guide pages ───
   Shared by every file in /guides/. Loaded after shared.css.
   Replaces the style block that used to be inlined in each guide. */

.guide-wrap{
  --g-text:#a6abc8;   /* long-form body text */
  --g-dim:#737999;    /* labels and meta */
  max-width:760px;margin:0 auto;padding:5rem 2rem 8rem;
}

/* ─── Header ─── */
.guide-hero{margin-bottom:3rem}
.guide-badge{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--a3);background:var(--a-glow2);border:1px solid var(--a-border);border-radius:30px;padding:4px 13px;margin-bottom:1.5rem}
.guide-title{font-family:var(--f-head);font-size:clamp(30px,4vw,44px);color:var(--t1);letter-spacing:-.04em;line-height:1.1;margin-bottom:1rem}
.guide-meta{font-size:13px;color:var(--g-dim);font-weight:400;margin-bottom:1.5rem}
.guide-lead{font-size:17.5px;font-weight:400;color:var(--g-text);line-height:1.7}

/* ─── Table of contents ─── */
.toc-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r3);padding:1.5rem 2rem;margin-bottom:3rem;position:relative;overflow:hidden}
.toc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--a1),transparent)}
.toc-title{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--g-dim);margin-bottom:1rem}
.toc-list{display:flex;flex-direction:column;gap:6px}
.toc-list a{font-size:14px;color:var(--g-text);text-decoration:none;padding:2px 0;transition:color .15s;font-weight:400;line-height:1.45}
.toc-list a:hover{color:var(--a3)}
.toc-list a span{color:var(--g-dim);margin-right:8px;font-size:11px}

/* ─── Body ─── */
.guide-section{margin-bottom:3.25rem;scroll-margin-top:80px}
.guide-section h2{font-family:var(--f-head);font-size:24px;line-height:1.25;color:var(--t1);letter-spacing:-.03em;margin-bottom:1.1rem;padding-bottom:.75rem;border-bottom:1px solid var(--border)}
.guide-section h3{font-size:17.5px;font-weight:500;line-height:1.35;color:var(--t1);margin:2rem 0 .75rem;letter-spacing:-.01em}
.guide-section p{font-size:16px;color:var(--g-text);line-height:1.75;margin-bottom:1.1rem;font-weight:400}
.guide-section ul,.guide-section ol{margin:.5rem 0 1.1rem 1.5rem}
.guide-section li{font-size:16px;color:var(--g-text);line-height:1.7;margin-bottom:.5rem;font-weight:400}
.guide-section li::marker{color:var(--g-dim)}
.guide-section a{color:var(--a3);text-decoration:none}
.guide-section a:hover{text-decoration:underline}
.guide-section strong{color:var(--t1);font-weight:500}
.guide-section code{font-family:var(--f-mono);font-size:.86em;color:#d5d9f2;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:5px;padding:1px 6px;overflow-wrap:anywhere}

.code-block{background:var(--bg1);border:1px solid var(--border2);border-left:2px solid var(--a-border);border-radius:var(--r);padding:1.1rem 1.35rem;margin:1.25rem 0;font-family:var(--f-mono);font-size:13px;color:#c9cde8;line-height:1.7;overflow-x:auto;white-space:pre;tab-size:2;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.14) transparent}

.cause-card{background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--a1);border-radius:0 var(--r2) var(--r2) 0;padding:1.25rem 1.5rem;margin:1.25rem 0}
.cause-card.warn{border-left-color:var(--warn)}
.cause-card.crit{border-left-color:var(--crit)}
.cause-card.ok{border-left-color:var(--ok)}
.cause-num{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--g-dim);margin-bottom:6px}
.cause-title{font-size:16px;font-weight:500;color:var(--t1);margin-bottom:6px;line-height:1.4}
.cause-body{font-size:14.5px;color:var(--g-text);font-weight:400;line-height:1.7}

.metric-table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:14px}
.metric-table th{text-align:left;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--g-dim);padding:8px 12px;border-bottom:1px solid var(--border2)}
.metric-table td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--g-text);font-weight:400;line-height:1.55}
.metric-table tr:last-child td{border-bottom:none}
.metric-table .ok{color:var(--ok)}
.metric-table .warn{color:var(--warn)}
.metric-table .crit{color:var(--crit)}

.disclaimer{font-size:12.5px;color:var(--g-dim);font-weight:400;line-height:1.6;margin-top:.75rem;padding:.75rem 1rem;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2)}

.arch-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r3);padding:1.5rem;margin:1.25rem 0}
.arch-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:14px;color:var(--g-text);font-weight:400}
.arch-row:last-child{margin-bottom:0}
.arch-tag{font-size:10.5px;font-weight:600;letter-spacing:.06em;padding:3px 9px;border-radius:20px;white-space:nowrap}
.arch-tag.tls{background:rgba(99,102,241,0.15);color:#a5b4fc;border:1px solid rgba(99,102,241,0.3)}
.arch-tag.srtp{background:rgba(34,197,94,0.12);color:#86efac;border:1px solid rgba(34,197,94,0.3)}
.arch-tag.plain{background:rgba(239,68,68,0.12);color:#fca5a5;border:1px solid rgba(239,68,68,0.3)}

/* ─── Footer blocks ─── */
.divider{height:1px;background:var(--border);margin:3rem 0}
.cta-band{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r4);padding:2.5rem;text-align:center;position:relative;overflow:hidden;margin-top:3rem}
.cta-band::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--a1),var(--v1),transparent)}
.cta-band h3{font-family:var(--f-head);font-size:21px;color:var(--t1);margin-bottom:8px;letter-spacing:-.03em}
.cta-band p{font-size:14.5px;color:var(--g-text);margin-bottom:1.5rem;font-weight:400;line-height:1.65}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:1.5rem}
.related-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r3);padding:1.25rem 1.5rem;text-decoration:none;transition:all .2s var(--ease)}
.related-card:hover{border-color:var(--a-border);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.3)}
.related-card-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--a3);margin-bottom:6px}
.related-card-title{font-size:14px;font-weight:500;color:var(--t1);line-height:1.4}

/* ─── Hero band (guides that carry one) ─── */
.ev-hero{position:relative;overflow:hidden;background:var(--bg2);border:1px solid var(--a-border);border-radius:var(--r4);padding:2rem 2.25rem;margin-bottom:3.5rem;display:flex;flex-wrap:wrap;gap:1.75rem;align-items:center}
.ev-hero::before{content:'';position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,var(--a1),var(--v1),transparent)}
.ev-copy{flex:1 1 320px;min-width:0}
.ev-badge{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--a3);background:var(--a-glow2);border:1px solid var(--a-border);border-radius:30px;padding:4px 13px;margin-bottom:1.1rem}
.ev-h{font-family:var(--f-head);font-size:23px;line-height:1.3;letter-spacing:-.03em;color:var(--t1);margin:0 0 .6rem}
.ev-sub{font-size:15px;font-weight:400;color:var(--g-text);line-height:1.65;margin:0 0 1.4rem;max-width:450px}
.ev-actions{display:flex;flex-wrap:wrap;gap:12px}
.ev-card{flex:1 1 250px;background:var(--bg);border:1px solid var(--border2);border-radius:var(--r2);padding:1.1rem 1.25rem}
.ev-card-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--t1);margin-bottom:1rem}
.ev-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:.7rem;gap:10px}
.ev-row .k{color:var(--g-text);min-width:0}
.ev-row .v{color:var(--ok);display:inline-flex;align-items:center;gap:5px;font-size:12px}
.ev-div{border-top:1px solid var(--border);margin:.9rem 0}
.ev-pass{background:var(--ok-bg);border:1px solid var(--ok-b);color:var(--ok);font-size:11px;font-weight:500;padding:3px 10px;border-radius:20px;white-space:nowrap}
.ev-sev{font-size:11px;font-weight:500;padding:3px 10px;border-radius:20px;white-space:nowrap;background:var(--a-glow2);border:1px solid var(--a-border);color:var(--a3)}
.ev-export{margin-top:1rem;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--border2);border-radius:var(--r);padding:8px;font-size:12px;color:var(--a3)}

/* ─── Desktop: contents rail beside the article ───
   The markup order is unchanged; the contents card is lifted into a second
   column and sticks while the article scrolls. */
@media(min-width:1140px){
  /* shared.css sets overflow-x:hidden on both html and body, which makes body a
     scroll container and disables position:sticky for everything inside it
     (the nav included). clip keeps the horizontal guard without that side
     effect. The nav is pinned to its current, non-sticky behaviour here so this
     file changes the guides' contents rail and nothing else. */
  body{overflow-x:clip}
  .nav{position:relative}
  .guide-wrap{max-width:1084px;display:grid;grid-template-columns:minmax(0,700px) 276px;column-gap:48px;align-content:start}
  .guide-wrap>*{grid-column:1}
  .guide-wrap>.ev-hero{grid-column:1 / -1}
  .guide-wrap>.toc-card{grid-column:2;grid-row:1 / span 80;align-self:start;position:sticky;top:24px;margin-bottom:0;padding:1.25rem 1.4rem;max-height:calc(100vh - 48px);overflow-y:auto;scrollbar-width:thin}
  .guide-wrap>.ev-hero~.toc-card{grid-row:2 / span 80}
  .toc-list a{font-size:13.5px}
}

/* ─── Mobile ─── */
@media(max-width:600px){
  .guide-wrap{padding:3rem 1.25rem 5rem}
  .related-grid{grid-template-columns:1fr}
  .guide-lead{font-size:16.5px}
  .guide-section h2{font-size:22px}
  .metric-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .code-block{font-size:12.5px;padding:1rem 1.1rem}
  .cta-band{padding:2rem 1.5rem}
}