/* docs.nebus.fr — layout of the documentation only. Loaded after /base.css (design/base.css, shared with the
   website and the client area: tokens, top bar, footer, buttons, .prose…). Rules: design/DESIGN.md — no hard-coded
   colours, radii or shadows here, only the tokens of base.css. No gradients, no glows. */

/* ---------------------------------------------------------------- Top bar: "docs" label next to the logo */
.brand .brand-tag {
  margin-left: 2px; padding: 0 0 0 10px; border-left: 1px solid var(--line-strong); border-radius: 0;
  background: none; color: var(--muted); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; line-height: 1.3;
}
.skip-link { position: absolute; left: -9999px; top: 12px; z-index: 60; padding: 8px 14px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); font-weight: 600; }
.skip-link:focus { left: 16px; }

/* ---------------------------------------------------------------- Three-column layout (aligned on the top bar container) */
.docs-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 48px; }
.docs-layout.has-toc { grid-template-columns: 220px minmax(0, 1fr) 188px; column-gap: 40px; }
.docs-main { min-width: 0; padding: 40px 0 80px; }
.docs-main > .crumbs, .docs-main > .doc, .docs-main > .doc-help, .docs-main > .pager { max-width: 740px; }

/* ---------------------------------------------------------------- Sidebar */
.sidebar { border-right: 1px solid var(--line); }
.sidebar-inner { position: sticky; top: var(--topbar-h); max-height: calc(100vh - var(--topbar-h)); overflow-y: auto; padding: 36px 20px 40px 0; }
.nav-section + .nav-section { margin-top: 26px; }
.nav-title { margin: 0 0 8px; color: var(--ink); font-size: 0.8125rem; font-weight: 600; line-height: 1.4; }
.nav-section ul { list-style: none; margin: 0; padding: 0; }
.nav-section li + li { margin-top: 1px; }
.nav-section a { display: block; margin-left: -10px; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--muted); font-size: 0.9375rem; line-height: 1.4; }
.nav-section a:hover { color: var(--ink); background: var(--bg-soft); text-decoration: none; }
.nav-section a[aria-current="page"] { color: var(--accent-ink); background: var(--accent-soft); font-weight: 600; }

/* Mobile: the same contents in a collapsible block (<details>, no JS) */
.mobile-nav { display: none; }
.mobile-nav > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 44px 0 16px; position: relative; cursor: pointer; color: var(--ink); font-size: 0.9375rem; font-weight: 600; }
.mobile-nav > summary::-webkit-details-marker { display: none; }
.mobile-nav > summary::after {
  content: ''; position: absolute; right: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--muted);
  -webkit-mask: var(--i-chevron-down) center / contain no-repeat; mask: var(--i-chevron-down) center / contain no-repeat; transition: transform 0.15s;
}
.mobile-nav[open] > summary::after { transform: rotate(180deg); }
.mobile-nav-current { min-width: 0; padding-left: 10px; border-left: 1px solid var(--line-strong); color: var(--muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-nav[open] > summary { border-bottom: 1px solid var(--line); }
.mobile-nav > nav { padding: 18px 16px 14px 26px; }

/* ---------------------------------------------------------------- Table of contents ("On this page") */
.toc nav { position: sticky; top: var(--topbar-h); max-height: calc(100vh - var(--topbar-h)); overflow-y: auto; padding: 40px 0 40px; }
.toc-title { margin: 0 0 10px; color: var(--ink); font-size: 0.8125rem; font-weight: 600; }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc a { display: block; margin-left: -1px; padding: 5px 0 5px 14px; border-left: 1px solid transparent; color: var(--muted); font-size: 0.875rem; line-height: 1.45; }
.toc a:hover { color: var(--ink); border-left-color: var(--ink); text-decoration: none; }

/* ---------------------------------------------------------------- Breadcrumb */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0 0 14px; padding: 0; color: var(--muted); font-size: 0.875rem; }
.crumbs li + li::before { content: '/'; margin: 0 8px; color: var(--faint); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- Article */
.doc h1 { font-size: clamp(1.875rem, 1.45rem + 1.4vw, 2.5rem); margin: 0 0 14px; }
.doc > .lead { margin: 0 0 8px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.doc h2 { margin-top: 2.4em; }
.doc em { font-style: normal; color: var(--ink); font-weight: 500; }
.prose td:first-child { min-width: 8.5em; }
.prose pre { margin: 1.2em 0 1.4em; font-size: 0.8125rem; }
.prose td code, .prose th code { font-size: 0.8125rem; }

/* Screenshots of the Pterodactyl panel (docs-site/img/panel/, made by ops/panel-shots.sh): framed, captioned, clickable */
.prose .shot { margin: 1.4em 0 1.8em; }
.prose .shot a { display: block; border-radius: var(--radius); }
.prose .shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-sm); background: #0f172a; }
.prose .shot figcaption { margin-top: 0.6em; color: var(--muted); font-size: 0.875rem; line-height: 1.5; }

/* Callouts: tinted background + left border, an icon so the meaning is not carried by colour alone */
.callout {
  position: relative; margin: 1.5em 0; padding: 14px 18px 14px 48px; border: 1px solid; border-left-width: 3px;
  border-radius: var(--radius); color: var(--ink-2); font-size: 0.9375rem; line-height: 1.65;
}
.callout::before { content: ''; position: absolute; left: 18px; top: 17px; width: 18px; height: 18px; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.callout p { margin: 0; }
.callout p + p, .callout p + ul, .callout ul + p { margin-top: 0.6em; }
.callout ul { margin: 0.4em 0 0; }
.callout.info { --icon: var(--i-info); background: var(--info-soft); border-color: var(--info-line); border-left-color: var(--info); }
.callout.info::before { background: var(--info); }
.callout.tip { --icon: var(--i-tip); background: var(--ok-soft); border-color: var(--ok-line); border-left-color: var(--ok); }
.callout.tip::before { background: var(--ok); }
.callout.warn { --icon: var(--i-warn); background: var(--warn-soft); border-color: var(--warn-line); border-left-color: var(--warn); }
.callout.warn::before { background: var(--warn); }

/* Numbered steps: small outlined counters joined by a thin line */
.prose .steps-list { counter-reset: step; list-style: none; margin: 1.4em 0 1.6em; padding: 0; }
.prose .steps-list > li { counter-increment: step; position: relative; margin: 0; padding: 0 0 18px 44px; }
.prose .steps-list > li:last-child { padding-bottom: 0; }
.prose .steps-list > li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg); color: var(--ink); font-size: 0.8125rem; font-weight: 600; line-height: 1;
}
.prose .steps-list > li::after { content: ''; position: absolute; left: 14px; top: 34px; bottom: 6px; width: 1px; background: var(--line); }
.prose .steps-list > li:last-child::after { display: none; }

/* Home page: header with illustration, guide cards */
.docs-hero { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 48px; align-items: center; max-width: 880px; margin: 0 0 36px; padding: 8px 0 36px; border-bottom: 1px solid var(--line); }
.docs-hero h1 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); margin: 0 0 14px; }
.docs-hero .lead { margin: 0; max-width: 560px; }
.docs-hero-illus { width: 200px; }
.doc-home { max-width: 740px; }
.prose .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 1em; }
.prose .cards a {
  position: relative; display: block; padding: 18px 44px 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg); box-shadow: var(--shadow-xs); color: var(--ink-2); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.prose .cards a:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.prose .cards a::after {
  content: ''; position: absolute; right: 18px; top: 21px; width: 16px; height: 16px; background: var(--faint);
  -webkit-mask: var(--i-chevron-right) center / contain no-repeat; mask: var(--i-chevron-right) center / contain no-repeat; transition: background-color 0.15s;
}
.prose .cards a:hover::after { background: var(--accent); }
.cards strong { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 600; line-height: 1.45; }
.cards span { display: block; color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }

/* ---------------------------------------------------------------- Help line and previous / next */
.doc-help { margin: 56px 0 0; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9375rem; }
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.pager a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font-weight: 600; line-height: 1.35; transition: border-color 0.15s, box-shadow 0.15s; }
.pager a:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); text-decoration: none; }
.pager a > span { flex: 1; min-width: 0; }
.pager a > svg { flex: none; color: var(--faint); }
.pager a:hover > svg { color: var(--accent); }
.pager small { display: block; margin-bottom: 3px; color: var(--muted); font-size: 0.8125rem; font-weight: 500; }
.pager-next { text-align: right; }

/* ---------------------------------------------------------------- 404 */
.not-found { max-width: 560px; padding: 16px 0 24px; }
.not-found .illus { width: 100%; max-width: 340px; margin: 0 0 32px; }
.not-found h1 { font-size: clamp(1.875rem, 1.45rem + 1.4vw, 2.5rem); margin: 0 0 12px; }
.not-found .lead { margin: 0 0 28px; }

/* ---------------------------------------------------------------- Icons (stroke SVGs used as masks; CSP img-src allows data:) */
:root {
  --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6v.1'/%3E%3C/svg%3E");
  --i-tip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 18h5M10.5 21h3M12 3a6 6 0 0 0-3.6 10.8c.7.6 1.1 1.3 1.1 2.2h5c0-.9.4-1.6 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
  --i-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.5 20h19L12 3.5z'/%3E%3Cpath d='M12 10v4.5M12 17.2v.1'/%3E%3C/svg%3E");
  --i-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5'/%3E%3C/svg%3E");
  --i-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1140px) {
  .docs-layout.has-toc { grid-template-columns: 220px minmax(0, 1fr); column-gap: 48px; }
  .toc { display: none; }
}
@media (max-width: 860px) {
  .topbar .topnav { display: none; } /* every link is .hide-mobile: drop the empty flex item */
}
@media (max-width: 900px) {
  .docs-layout, .docs-layout.has-toc { display: block; }
  .sidebar { display: none; }
  .mobile-nav { display: block; margin: 0 0 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow-xs); }
  .docs-main { padding: 24px 0 64px; }
}
@media (max-width: 700px) {
  .docs-hero { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
  .docs-hero-illus { display: none; }
  .prose .cards { grid-template-columns: minmax(0, 1fr); }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager > span:empty { display: none; }
  .doc-help { margin-top: 40px; }
}
@media (max-width: 480px) {
  .topbar-inner { gap: 10px; }
  .topbar-actions { gap: 6px; }
  .lang-menu > summary svg { display: none; }
  .brand .brand-tag { padding-left: 8px; font-size: 0.875rem; }
  .topbar .btn-sm { padding: 0 12px; }
}
@media (max-width: 370px) {
  .brand .brand-tag { display: none; }
}