/* Scarp Docs' own responsive design system. No VitePress/theme CSS. */
:root {
  color-scheme: light;
  --background: #ffffff; --surface: #f8fafc; --surface-strong: #eff6ff;
  --text: #17223a; --muted: #475569; --line: #dbe3ef;
  --accent: #1d4ed8; --accent-hover: #1e40af; --code-bg: #eff3f9;
  --shadow: 0 12px 40px rgba(15, 23, 42, 0.11);
}
html.dark {
  color-scheme: dark; --background: #101722; --surface: #172233;
  --surface-strong: #1a2a45; --text: #f3f7ff; --muted: #c3d1e3;
  --line: #35445c; --accent: #93c5fd; --accent-hover: #bfdbfe;
  --code-bg: #1b2a3e; --shadow: 0 14px 48px rgba(0,0,0,0.37);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } }
body { margin:0; font: 16px/1.7 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--text); background:var(--background); overflow-wrap:anywhere; }
a { color:var(--accent); text-decoration-thickness:.06em; text-underline-offset:.15em; }
a:hover { text-decoration: underline; }
button,input,select { font:inherit; }
button,select { cursor:pointer; }
button,select,input { color:var(--text); background:var(--background); border:1px solid var(--line); border-radius:8px; }
button { padding:.4rem .7rem; }
button:hover,select:hover { border-color:var(--accent); }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.skip-link { position:fixed; top:-100px; left:12px; z-index:1000; padding:.5rem 1rem; background:var(--surface); border:2px solid var(--accent); }
.skip-link:focus { top:12px; }
.site-header { height:66px; border-bottom:1px solid var(--line); display:flex; gap:clamp(.5rem,2vw,2rem); align-items:center; justify-content:space-between; position:sticky; top:0; padding:.3rem clamp(.7rem,2.5vw,2.4rem); background:var(--background); z-index:20; }
.brand { display:flex; gap:.55rem; align-items:center; font-size:1.22rem; font-weight:800; letter-spacing:.02em; text-decoration:none; color:var(--text); }
.brand img { border-radius:6px; }
.top-nav { display:flex; gap:clamp(.5rem,1.7vw,1.5rem); margin-right:auto; }
.top-nav a { text-decoration:none; color:var(--muted); font-weight:600; font-size:.94rem; }
.top-nav a:hover { color:var(--accent); }
.header-actions { display:flex; gap:.5rem; align-items:center; white-space:nowrap; }
.header-actions button { font-size:.91rem; min-height:38px; }
.header-actions .language-link { display:inline-flex; align-items:center; padding:0 .5rem; min-height:38px; font-weight:600; }
#menu-toggle { display:none; }
.site-layout { max-width:1600px; margin:auto; padding:0 1rem; display:grid; grid-template-columns:minmax(220px,255px) minmax(0,1fr) minmax(170px,205px); gap:clamp(1rem,2.2vw,2.8rem); align-items:start; }
.side-nav { border-right:1px solid var(--line); padding:1.3rem .75rem 2rem 0; position:sticky; top:66px; max-height:calc(100vh - 66px); overflow-y:auto; scrollbar-width:thin; }
.side-nav a { text-decoration:none; display:block; padding:.22rem .6rem; color:var(--muted); border-radius:6px; line-height:1.45; font-size:.87rem; }
.side-nav a:hover,.side-nav a.active { background:var(--surface-strong); color:var(--accent); }
.side-nav a.active { font-weight:750; }
.side-home { font-weight:750; }
.nav-group { margin-top:1rem; }
.nav-group h2 { font-size:.73rem; color:var(--text); text-transform:uppercase; letter-spacing:.08em; margin:.75rem .55rem .35rem; }
.nav-group ul,.toc ul { list-style:none; padding:0; margin:0; }
.nav-group li { margin:.14rem 0; }
main { min-width:0; }
.doc-content { max-width:860px; min-height:70vh; margin:2.4rem auto 3rem; padding:0 .25rem; }
.doc-content > :first-child { margin-top:0; }
.doc-content h1 { font-size:clamp(1.7rem,3vw,2.7rem); line-height:1.24; margin:1.6rem 0 1rem; letter-spacing:-.025em; }
.doc-content h2 { font-size:clamp(1.24rem,2vw,1.65rem); margin:2.4rem 0 .75rem; line-height:1.3; padding-bottom:.45rem; border-bottom:1px solid var(--line); }
.doc-content h3 { font-size:1.16rem; margin:2rem 0 .6rem; }
.doc-content h4 { font-size:1rem; }
.doc-content p { margin:.85rem 0 1rem; }
.doc-content ul,.doc-content ol { padding-left:1.55rem; }
.doc-content li { margin:.3rem 0; }
.doc-content blockquote { margin:1.5rem 0; padding:.1rem 1.15rem; border-left:4px solid var(--accent); background:var(--surface); }
.table-scroll { width:100%; overflow-x:auto; margin:1rem 0; border-radius:.45rem; }
.table-scroll:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.doc-content table { width:max-content; min-width:min(100%,440px); border-spacing:0; border-collapse:collapse; font-size:.9rem; }
.doc-content th,.doc-content td { border:1px solid var(--line); padding:.55rem .75rem; text-align:start; min-width:65px; }
.doc-content th { background:var(--surface); }
.doc-content img { max-width:100%; height:auto; }
.doc-content code:not(pre code) { border-radius:.3rem; padding:.13em .32em; background:var(--code-bg); font: .91em/1.5 ui-monospace,Consolas,monospace; }
.doc-content pre,.command-finder pre { max-width:100%; overflow-x:auto; padding:1rem; background:var(--code-bg); border:1px solid var(--line); border-radius:.6rem; margin:1rem 0; tab-size:2; font: .89rem/1.5 ui-monospace,Consolas,"Liberation Mono",monospace; white-space:pre; overflow-wrap:normal; }
.doc-content pre code { white-space:inherit; }
.syntax-keyword { color:#1d4ed8; font-weight:600; }
.syntax-number { color:#9a3412; }
.syntax-string { color:#047857; }
.syntax-comment { color:#64748b; font-style:italic; }
.dark .syntax-keyword { color:#a5b4fc; }
.dark .syntax-number { color:#fdba74; }
.dark .syntax-string { color:#6ee7b7; }
.dark .syntax-comment { color:#cbd5e1; }
.scarp-callout { display:block; padding:.8rem 1rem; margin:1.35rem 0; border-radius:.55rem; border-left:4px solid var(--accent); background:var(--surface-strong); }
.scarp-warning,.scarp-danger { border-left-color:#b45309; }
.scarp-callout > strong { display:block; margin-bottom:.5rem; }
.toc { position:sticky; top:82px; max-height:calc(100vh - 90px); overflow-y:auto; padding:1.3rem 0; font-size:.82rem; }
.toc h2 { font-size:.82rem; color:var(--muted); }
.toc a { text-decoration:none; display:block; border-left:2px solid var(--line); padding:.2rem .6rem; color:var(--muted); }
.toc a:hover { color:var(--accent); border-left-color:var(--accent); }
.toc-level-3 { margin-left:.6rem; }
.site-footer { border-top:1px solid var(--line); padding:1.2rem 2rem; text-align:center; color:var(--muted); font-size:.84rem; }
.hero { text-align:center; padding:2.8rem 0 1rem; }
.hero img { border-radius:20px; }
.hero-kicker { color:var(--accent); font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.hero h1 { font-size:clamp(2.2rem,5vw,4rem); margin:.5rem 0; }
.hero > p:last-of-type { max-width:700px; margin:1rem auto; color:var(--muted); font-size:1.08rem; }
.hero-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:.8rem; margin:1.5rem auto 2rem; }
.hero-action { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-weight:650; padding:.6rem 1.2rem; border-radius:.55rem; border:1px solid var(--line); color:var(--text); }
.hero-action.primary { background:#1d4ed8; border-color:#1d4ed8; color:#fff; }
.hero-action.primary:hover { background:#1e40af; }
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:.85rem; margin:1.6rem 0 2.4rem; }
.feature { display:block; color:var(--text); border:1px solid var(--line); border-radius:.85rem; padding:1rem 1.15rem; text-decoration:none; background:var(--surface); }
.feature:hover { border-color:var(--accent); text-decoration:none; }
.feature h2 { margin:.1rem 0 .55rem; padding:0; font-size:1.1rem; border:0; color:var(--accent); }
.feature p { margin:0; color:var(--muted); font-size:.93rem; }
.search-panel { width:min(700px,calc(100vw - 1.5rem)); max-height:80vh; margin:10vh auto; border:1px solid var(--line); border-radius:.9rem; padding:1rem 1.25rem; background:var(--background); color:var(--text); box-shadow:var(--shadow); }
.search-panel::backdrop { background:rgba(15,23,42,.62); }
.search-panel:not([open]) { display:none; }
.search-header { display:flex; align-items:center; justify-content:space-between; }
.search-header h2 { margin:0 0 .6rem; font-size:1.3rem; }
.search-panel label { display:block; font-size:.85rem; margin-bottom:.35rem; color:var(--muted); }
#search-query { display:block; width:100%; padding:.65rem .85rem; }
#search-status { color:var(--muted); font-size:.85rem; }
#search-results { list-style:none; padding:0; margin:.25rem 0; max-height:46vh; overflow-y:auto; }
#search-results li { border-bottom:1px solid var(--line); }
#search-results a { display:block; padding:.55rem .45rem; border-radius:.4rem; text-decoration:none; }
#search-results a:hover,#search-results a:focus { background:var(--surface); }
#search-results small { display:block; color:var(--muted); font-size:.8rem; }
.command-finder { border:1px solid var(--line); padding:1rem; border-radius:.85rem; background:var(--surface); margin:1.5rem 0; }
.command-finder h2 { margin:0 0 .5rem; border:0; }
.command-finder .fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.command-finder label { display:block; margin-bottom:.35rem; font-weight:600; }
.command-finder select { width:100%; padding:.6rem; }
.command-finder .status { font-weight:700; }
.command-finder .status.unavailable { color:#b45309; }
.command-finder button { background:#1d4ed8; color:#fff; }
.deployment button { margin:.5rem 0; }
@media(max-width:1270px) { .site-layout { grid-template-columns:235px minmax(0,1fr); } .toc { display:none; } }
@media(max-width:900px) {
  .site-header { height:62px; gap:.5rem; }
  .top-nav { display:none; }
  .site-layout { display:block; padding:0 1rem; }
  .side-nav { display:none; position:fixed; z-index:30; top:62px; left:0; bottom:0; max-height:calc(100vh - 62px); width:min(335px,90vw); padding:1rem; border:1px solid var(--line); background:var(--background); box-shadow:var(--shadow); }
  .side-nav.open { display:block; }
  #menu-toggle { display:inline-block; }
  .doc-content { margin:1.7rem auto; }
  #search-open kbd { display:none; }
}
@media(max-width:480px) {
  .site-header { padding:.25rem .55rem; }
  .brand span { font-size:1rem; }
  #search-open { font-size:0; padding:.4rem; min-width:42px; }
  #search-open::before { content:"⌕"; font-size:1.35rem; }
  .header-actions { gap:.15rem; }
  .header-actions .language-link { padding:.25rem; }
  .site-layout { padding:0 .8rem; }
}