/* StatusRadar — documentation. Stripe-style, dual theme, scoped .docs.
   Tokens + fonts + chrome come from public-theme.css (loaded on docs pages). */

.docs{ color:var(--text); font-family:var(--font-body); }

/* ===================== INDEX LANDING ===================== */
.docs-index{ max-width:1100px; margin:0 auto; padding:clamp(40px,6vw,72px) clamp(20px,5vw,40px) 88px; }
.docs-index .head{ text-align:center; margin-bottom:56px; }
.docs-index .eyebrow{ font-family:var(--font-mono); font-size:.75rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.docs-index h1{ font-family:var(--font-display); font-size:clamp(2.25rem,1.6rem + 2.6vw,3rem); font-weight:800; letter-spacing:-.022em; color:var(--text); margin:14px 0 0; }
.docs-index .lead{ color:var(--text-secondary); font-size:1.15rem; margin:12px auto 0; max-width:48ch; }

.docs-group-title{ font-family:var(--font-display); font-size:1.05rem; font-weight:700; letter-spacing:-.01em; color:var(--text); margin:48px 0 20px; }
.docs-group-title:first-of-type{ margin-top:0; }

.docs-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(264px,1fr)); gap:20px; }
.docs-card{
  display:flex; flex-direction:column; text-decoration:none;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--r); padding:24px;
  box-shadow:var(--shadow-sm); transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.docs-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--border-strong); }
.docs-card .ic{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent); border-radius:10px; font-size:1.2rem; margin-bottom:16px;
}
.docs-card h3{ font-family:var(--font-display); font-size:1.15rem; font-weight:600; letter-spacing:-.01em; color:var(--text); margin:0 0 8px; }
.docs-card p{ color:var(--text-secondary); font-size:.9375rem; line-height:1.55; margin:0 0 16px; }
.docs-card ul{ list-style:none; padding:0; margin:0 0 18px; }
.docs-card li{ font-size:.875rem; color:var(--text-secondary); padding:4px 0; display:flex; align-items:center; gap:8px; }
.docs-card li i{ color:var(--up); font-size:.95rem; }
.docs-card .go{ margin-top:auto; font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--accent); display:inline-flex; align-items:center; gap:6px; }
.docs-card:hover .go{ color:var(--accent-hover); }
.docs-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ===================== ARTICLE LAYOUT ===================== */
.docs-container{ padding-top:2.5rem; padding-bottom:5rem; min-height:calc(100vh - 220px); }

.docs-sidebar{ position:sticky; top:88px; max-height:calc(100vh - 110px); overflow-y:auto; padding-right:1rem; }
.docs-sidebar::-webkit-scrollbar{ width:6px; }
.docs-sidebar::-webkit-scrollbar-track{ background:transparent; }
.docs-sidebar::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:3px; }

.docs-nav-section{ margin-bottom:1.75rem; }
.docs-nav-section-title{
  font-family:var(--font-mono); font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em;
  color:var(--text-faint); margin-bottom:.6rem; display:flex; align-items:center; gap:.5rem;
}
.docs-nav-link{
  display:block; padding:.4rem .7rem; color:var(--text-secondary); text-decoration:none;
  border-radius:7px; margin-bottom:.15rem; font-size:.9rem; transition:color .15s ease, background-color .15s ease;
}
.docs-nav-link:hover{ color:var(--text); background:var(--bg-tint); }
.docs-nav-link.active{ color:var(--link); background:var(--accent-soft); font-weight:600; }
.docs-nav-link.disabled{ opacity:.45; cursor:not-allowed; pointer-events:none; }
.docs-nav-link small{ color:var(--text-faint); }

/* breadcrumb */
.docs .breadcrumb{ background:transparent; padding:0; margin-bottom:1.5rem; font-size:.875rem; }
.docs .breadcrumb-item, .docs .breadcrumb-item a{ color:var(--text-faint); text-decoration:none; }
.docs .breadcrumb-item a:hover{ color:var(--accent); }
.docs .breadcrumb-item.active{ color:var(--text-secondary); }
.docs .breadcrumb-item + .breadcrumb-item::before{ color:var(--text-faint); }

/* prose content */
.docs-content{ max-width:768px; }
.docs-content h1{
  font-family:var(--font-display); color:var(--text); font-size:2.25rem; font-weight:800; letter-spacing:-.022em;
  margin:0 0 1.25rem; padding-bottom:1rem; border-bottom:1px solid var(--border); text-wrap:balance;
}
.docs-content h2{
  font-family:var(--font-display); color:var(--text); font-size:1.6rem; font-weight:700; letter-spacing:-.015em;
  margin:2.5rem 0 1rem; padding-top:1.5rem; border-top:1px solid var(--hairline); scroll-margin-top:96px;
}
.docs-content h3{ font-family:var(--font-display); color:var(--text); font-size:1.3rem; font-weight:600; margin:2rem 0 .75rem; scroll-margin-top:96px; }
.docs-content h4{ font-family:var(--font-display); color:var(--text); font-size:1.1rem; font-weight:600; margin:1.5rem 0 .5rem; }
.docs-content p{ color:var(--text-secondary); line-height:1.75; margin-bottom:1.25rem; }
.docs-content a{ color:var(--link); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--link) 35%, transparent); transition:border-color .15s ease; }
.docs-content a:hover{ border-bottom-color:var(--link); }
.docs-content ul, .docs-content ol{ color:var(--text-secondary); margin-bottom:1.25rem; padding-left:1.4rem; }
.docs-content li{ margin-bottom:.5rem; line-height:1.7; }
.docs-content strong{ color:var(--text); font-weight:600; }
.docs-content img{ max-width:100%; border-radius:10px; border:1px solid var(--border); }
.docs-content hr{ border:none; border-top:1px solid var(--border); margin:2rem 0; }

.docs-content code{
  font-family:var(--font-mono); font-size:.875em; background:var(--bg-sunken); color:var(--link);
  padding:.16em .42em; border-radius:5px; border:1px solid var(--border);
}
.docs-content pre{
  background:var(--code-bg); border:1px solid var(--border); border-radius:10px;
  padding:1.1rem 1.25rem; overflow-x:auto; margin-bottom:1.5rem;
}
.docs-content pre code{ background:transparent; border:0; color:var(--code-text); padding:0; font-size:.85rem; line-height:1.6; }

.docs-content table{ width:100%; margin-bottom:1.5rem; border-collapse:collapse; font-size:.92rem; }
.docs-content th{ background:var(--bg-tint); color:var(--text); padding:.65rem .8rem; text-align:left; font-weight:600; border:1px solid var(--border); }
.docs-content td{ padding:.65rem .8rem; border:1px solid var(--border); color:var(--text-secondary); }

.docs-content blockquote{
  border-left:3px solid var(--accent); background:var(--accent-soft); color:var(--text);
  padding:.85rem 1.25rem; margin:1.5rem 0; border-radius:0 8px 8px 0;
}

.heading-anchor{ color:var(--text-faint); text-decoration:none; margin-left:.4rem; opacity:0; transition:opacity .15s ease; }
.docs-content h2:hover .heading-anchor,
.docs-content h3:hover .heading-anchor,
.docs-content h4:hover .heading-anchor{ opacity:1; }

/* table of contents */
.docs-toc{ position:sticky; top:88px; max-height:calc(100vh - 110px); overflow-y:auto; }
.docs-toc-title{ font-family:var(--font-mono); font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--text-faint); margin-bottom:1rem; }
.docs-toc-list{ list-style:none; padding:0; margin:0; }
.docs-toc-item{ margin-bottom:.25rem; }
.docs-toc-link{
  display:block; padding:.25rem .6rem; font-size:.825rem; color:var(--text-faint); text-decoration:none;
  border-left:2px solid transparent; transition:color .15s ease, border-color .15s ease;
}
.docs-toc-link:hover{ color:var(--text-secondary); border-left-color:var(--border-strong); }
.docs-toc-link.active{ color:var(--link); border-left-color:var(--accent); }
.docs-toc-link.level-3{ padding-left:1.2rem; font-size:.8rem; }

@media (max-width:991px){
  .docs-sidebar{ position:relative; top:0; margin-bottom:2rem; max-height:none; padding-right:0; }
  .docs-toc{ display:none; }
}