/* CertControl — documentation / guide components (house design)
   Loaded after certcontrol.css. Bridges the legacy --border/--radius
   names used by inline doc markup to house design tokens, and provides
   the article, breadcrumb, step and tip components the docs rely on. */

:root{
  --border: var(--line2);
  --radius: 14px;
}

/* Layout */
.article-section{ padding: 96px 0 84px; }
.article-max{ max-width: 760px; }

/* Index link cards */
.doc-group-label{ font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted2); }

/* Breadcrumb */
.breadcrumb{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; color:var(--muted2); margin-bottom:22px; flex-wrap:wrap; }
.breadcrumb a{ color:var(--muted); transition:color .18s; }
.breadcrumb a:hover{ color:var(--accent2); }
.breadcrumb-sep{ color:var(--muted2); opacity:.55; }

/* Article body */
.article-card{ padding:34px 38px; border-radius:14px; background:var(--panel); border:1px solid var(--line); margin-top:32px; }
.article-body{ font-size:16px; line-height:1.8; color:var(--muted); }
.article-body p{ margin-top:18px; color:var(--muted); }
.article-body h2{ font-family:var(--display); font-size:clamp(22px,2.5vw,28px); line-height:1.2; letter-spacing:-.02em; color:var(--text); margin-top:40px; max-width:none; }
.article-body h3{ font-family:var(--display); font-size:18px; color:var(--text); margin-top:26px; }
.article-body ul, .article-body ol{ padding-left:22px; margin-top:14px; color:var(--muted); }
.article-body li{ margin-top:8px; }
.article-body strong{ color:var(--text); font-weight:600; }
.article-body a{ color:var(--accent2); text-decoration:underline; text-underline-offset:2px; }
.article-body a:hover{ color:var(--text); }
/* Buttons inside the article body must keep button styling, not inherit link colour/underline */
.article-body a.btn{ text-decoration:none; }
.article-body a.btn-pri, .article-body a.btn-pri:hover{ color:#fff; }
.article-body a.btn-outline{ color:var(--text); }
.article-body a.btn-outline:hover{ color:var(--accent2); }
.article-body code{ font-family:var(--mono); font-size:12.5px; background:var(--bg3); border:1px solid var(--line2); border-radius:5px; padding:1px 7px; color:var(--accent2); }
.article-body pre{ background:var(--bg3); border:1px solid var(--line2); border-radius:var(--r); padding:16px 18px; margin-top:18px; overflow-x:auto; font-family:var(--mono); font-size:13px; line-height:1.6; }
.article-body pre code{ background:none; border:none; padding:0; }

/* Steps */
.step-block{ display:flex; gap:20px; margin-top:32px; }
.step-block:first-child{ margin-top:0; }
.step-number{ width:32px; height:32px; border-radius:50%; background:var(--soft); border:1px solid var(--line2); color:var(--accent2); font-family:var(--mono); font-size:13px; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.step-content h3{ font-family:var(--display); font-size:17px; font-weight:600; color:var(--text); margin:0 0 8px; }
.step-content p{ font-size:15px; color:var(--muted); line-height:1.7; margin:0; }
.divider{ width:1px; background:var(--line2); margin:0 0 0 15px; flex-shrink:0; }

/* Tip / callout */
.tip-box{ display:flex; gap:12px; background:var(--soft); border:1px solid rgba(59,130,246,.22); border-radius:10px; padding:16px 20px; margin-top:14px; font-size:14px; color:var(--muted); line-height:1.6; }
.tip-box strong{ color:var(--accent2); }