/* ============================================================================
   BackupWall Docs — layout for /docs (sidebar + article). Loaded AFTER the
   shared styles.css and reuses its tokens (--pine, --honey, --surface, ...),
   so light/dark theming follows the main site.
   ========================================================================== */
[hidden]{display:none !important}

.docs-shell{
  max-width:1280px;
  display:grid;grid-template-columns:288px minmax(0,1fr);
  gap:clamp(1.5rem,3vw,3rem);
  padding-block:1.8rem 4.5rem;align-items:start;
}
.docs-shell.has-toc{grid-template-columns:288px minmax(0,1fr) 200px}
.docs-main{min-width:0}

/* ---- Sidebar ---- */
.docs-side{
  position:sticky;top:88px;max-height:calc(100vh - 104px);overflow-y:auto;overflow-x:hidden;
  padding:2px 6px 1rem 2px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.side-search{position:relative}
.side-search .ico,.hero-search .ico{
  position:absolute;left:.95rem;top:.78rem;width:1.15rem;height:1.15rem;color:var(--muted);pointer-events:none;
}
.side-search input,.hero-search input{
  width:100%;font:inherit;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--line-2);border-radius:var(--radius-pill);
  padding:.62rem 2.4rem .62rem 2.7rem;font-size:.95rem;line-height:1.3;outline:none;
  transition:border-color .14s ease,box-shadow .14s ease;
  -webkit-appearance:none;appearance:none;
}
.side-search input::placeholder,.hero-search input::placeholder{color:var(--muted)}
.side-search input:focus,.hero-search input:focus{border-color:var(--pine);box-shadow:0 0 0 4px color-mix(in srgb,var(--pine) 16%,transparent)}
.side-search input::-webkit-search-cancel-button,.hero-search input::-webkit-search-cancel-button{display:none}
.side-search kbd{
  position:absolute;right:.8rem;top:.7rem;font-family:var(--mono);font-size:.72rem;color:var(--muted);
  border:1px solid var(--line-2);border-radius:6px;padding:.02rem .42rem;background:var(--surface-2);
}
.sr-list{list-style:none;margin:.7rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.sr-list a{
  display:block;padding:.65rem .8rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  color:var(--ink);
}
.sr-list a:hover,.sr-list a.sel{border-color:var(--pine);background:var(--pine-soft);color:var(--ink)}
.sr-list b{display:block;font-size:.93rem;font-weight:600;line-height:1.3}
.sr-cat{display:block;font-size:.72rem;font-weight:700;color:var(--honey-deep);margin-top:.15rem}
.sr-sum{display:block;font-size:.8rem;color:var(--muted);margin-top:.2rem;line-height:1.4}
.sr-empty{padding:.8rem .9rem;border:1px dashed var(--line-2);border-radius:12px;color:var(--muted);font-size:.9rem}

.side-toggle{
  display:none;width:100%;margin-top:.7rem;align-items:center;justify-content:space-between;gap:.6rem;
  font:inherit;font-weight:600;font-size:.95rem;color:var(--ink);cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line-2);border-radius:var(--radius-sm);padding:.7rem 1rem;
}
.side-toggle span{display:inline-flex;align-items:center;gap:.55rem}
.side-toggle .chev{width:1.1rem;height:1.1rem;transition:transform .16s ease;color:var(--pine-ink)}
.docs-side.open .side-toggle .chev{transform:rotate(180deg)}

.side-nav{margin-top:1.1rem}
.docs-side.searching .side-nav{display:none !important}
.side-home{
  display:block;font-weight:700;font-size:.95rem;color:var(--ink);padding:.45rem .75rem;border-radius:10px;margin-bottom:.3rem;
}
.side-home:hover{background:var(--pine-soft);color:var(--pine-ink)}
.side-home.is-current{background:var(--pine-soft);color:var(--pine-ink)}
details.cat{margin:.15rem 0}
details.cat > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:.6rem;
  padding:.5rem .75rem;border-radius:10px;font-weight:700;font-size:.93rem;color:var(--ink);user-select:none;
}
details.cat > summary::-webkit-details-marker{display:none}
details.cat > summary:hover{background:var(--surface-2)}
details.cat > summary .ci{width:1.15rem;height:1.15rem;color:var(--pine);flex:none}
details.cat > summary span{flex:1;line-height:1.25}
details.cat > summary .chev{width:1rem;height:1rem;color:var(--muted);transition:transform .16s ease}
details.cat[open] > summary .chev{transform:rotate(180deg)}
details.cat[open] > summary{color:var(--pine-ink)}
details.cat ul{margin:.15rem 0 .5rem 1.05rem;padding-left:.35rem;border-left:1.5px solid var(--line)}
details.cat li a{
  display:block;padding:.38rem .7rem;font-size:.88rem;line-height:1.35;color:var(--ink-2);border-radius:9px;
}
details.cat li a:hover{background:var(--pine-soft);color:var(--pine-ink)}
details.cat li a[aria-current="page"]{
  background:var(--pine-soft);color:var(--pine-ink);font-weight:700;box-shadow:inset 3px 0 0 var(--honey);
}

.mini{
  display:inline-block;font-size:.66rem;font-weight:700;line-height:1;padding:.18rem .42rem;border-radius:var(--radius-pill);
  background:var(--pine-soft);color:var(--pine-ink);vertical-align:.1em;
}
.mini.soon{background:var(--honey-soft);color:var(--honey-deep)}

/* ---- Breadcrumb ---- */
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;list-style:none;margin:0 0 1.3rem;padding:0;font-size:.86rem;color:var(--muted)}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li + li::before{
  content:"";display:inline-block;width:.4em;height:.4em;margin-right:.5rem;
  border-right:1.6px solid currentColor;border-top:1.6px solid currentColor;transform:rotate(45deg);opacity:.55;
}
.crumbs a{color:var(--pine-ink);font-weight:500}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current="page"]{color:var(--ink-2)}

/* ---- Article head ---- */
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem}
.art-meta .pill-tag{background:var(--pine-soft);color:var(--pine-ink);border:1px solid color-mix(in srgb,var(--pine) 22%,transparent)}
.art-meta .pill-tag.warn{background:var(--honey-soft);color:var(--honey-deep);border-color:color-mix(in srgb,var(--honey) 30%,transparent)}
.meta-date{font-size:.8rem;color:var(--muted)}
.art-head h1{font-size:clamp(1.85rem,3.9vw,2.6rem);font-weight:800;margin:.9rem 0 .8rem;line-height:1.1}
.art-summary{font-size:1.12rem;color:var(--ink-2);max-width:68ch;line-height:1.6;padding-bottom:1.4rem;border-bottom:1px solid var(--line)}
.art-summary code,.prose code{
  font-family:var(--mono);font-size:.86em;background:var(--surface-3);padding:.1em .42em;border-radius:6px;
  overflow-wrap:anywhere;color:var(--ink);
}

/* ---- Prose ---- */
.prose{font-size:1.03rem;color:var(--ink);padding-top:.4rem}
.prose > p,.prose > ul,.prose > ol{max-width:74ch}
.prose p{margin:0 0 1rem;color:var(--ink-2)}
.prose strong{color:var(--ink);font-weight:700}
.prose a{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--pine) 40%,transparent);text-underline-offset:3px}
.prose a:hover{text-decoration-color:currentColor}
.prose h2{font-size:clamp(1.35rem,2.6vw,1.65rem);margin:2.6rem 0 .8rem;padding-top:1.7rem;border-top:1px solid var(--line);scroll-margin-top:92px}
.prose h2:first-child{margin-top:1.4rem;border-top:0;padding-top:0}
.prose h3{font-size:1.2rem;margin:1.9rem 0 .5rem;scroll-margin-top:92px}
.prose ul,.prose ol{margin:0 0 1.1rem;padding-left:0}
.prose li{position:relative;margin:.45rem 0;color:var(--ink-2)}
.prose li > p{margin:0 0 .5rem}
.prose li > ul,.prose li > ol{margin:.5rem 0 .2rem}
.prose ul > li{padding-left:1.5rem}
.prose ul > li::before{content:"";position:absolute;left:.35rem;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--honey)}
.prose ul ul > li::before{background:var(--pine);width:6px;height:6px}
.prose ol{counter-reset:step;list-style:none;padding-left:0}
.prose ol > li{padding-left:2.6rem;counter-increment:step;margin:.85rem 0}
.prose ol > li::before{
  content:counter(step);position:absolute;left:0;top:.08em;width:1.75rem;height:1.75rem;border-radius:50%;
  background:var(--pine);color:#fff;font:700 .85rem/1.75rem var(--disp);text-align:center;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .prose ol > li::before{color:#06211b}}
:root[data-theme="dark"] .prose ol > li::before{color:#06211b}
.prose pre{
  margin:1.1rem 0 1.3rem;padding:1rem 1.2rem;overflow:auto;background:#0f1c18;color:#d9ece5;
  border:1px solid var(--line-2);border-radius:14px;font-size:.88rem;line-height:1.6;
}
.prose pre code{background:none;padding:0;color:inherit;font-size:inherit;overflow-wrap:normal}
.prose blockquote{margin:1.2rem 0;padding:.9rem 1.1rem;border-left:4px solid var(--honey);background:var(--honey-soft);border-radius:0 12px 12px 0}
.prose blockquote p{margin:0;color:var(--ink)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
.table-wrap{overflow-x:auto;margin:1.2rem 0 1.5rem;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.prose table{border-collapse:collapse;width:100%;min-width:560px;font-size:.92rem}
.prose th{
  text-align:left;background:var(--surface-2);font-weight:700;font-size:.82rem;padding:.7rem .9rem;
  border-bottom:1px solid var(--line);white-space:nowrap;color:var(--ink);
}
.prose td{padding:.7rem .9rem;border-top:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.prose tr:first-child td{border-top:0}
.prose td code{font-size:.82em}

/* ---- Related + prev/next ---- */
.related{margin-top:3.2rem;padding-top:1.7rem;border-top:1px solid var(--line)}
.related h2{font-size:1.3rem;margin-bottom:1rem}
.related ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.8rem}
a.rel{
  display:block;height:100%;padding:.95rem 1.05rem;border:1px solid var(--line);border-radius:14px;background:var(--surface);
  transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease;
}
a.rel:hover{transform:translateY(-2px);border-color:var(--pine);box-shadow:var(--shadow-sm)}
a.rel b{display:block;color:var(--ink);font-size:.95rem;font-weight:600;line-height:1.3}
a.rel span{display:block;margin-top:.25rem;font-size:.76rem;font-weight:700;color:var(--honey-deep)}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:2.2rem}
a.pn{
  display:flex;align-items:center;gap:.8rem;padding:1rem 1.15rem;border:1px solid var(--line);border-radius:16px;
  background:var(--surface);color:var(--ink);transition:transform .14s ease,border-color .14s ease;
}
a.pn:hover{border-color:var(--pine);transform:translateY(-2px);color:var(--ink)}
a.pn small{display:block;color:var(--muted);font-size:.76rem;font-weight:600;margin-bottom:.1rem}
a.pn b{display:block;font-size:.93rem;line-height:1.3;font-weight:600}
a.pn svg{width:20px;height:20px;color:var(--pine-ink);flex:none}
a.pn.next{justify-content:space-between;text-align:right;grid-column:2}
.docs-help{margin-top:2.4rem;max-width:74ch}
.docs-help a{font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---- On this page ---- */
.docs-toc{position:sticky;top:96px;font-size:.86rem;max-height:calc(100vh - 120px);overflow:auto}
.docs-toc h4{font-family:var(--body);font-size:.78rem;font-weight:700;letter-spacing:.02em;color:var(--muted);text-transform:uppercase;margin-bottom:.7rem}
.docs-toc ul{list-style:none;padding:0;margin:0}
.docs-toc a{display:block;padding:.3rem 0 .3rem .85rem;border-left:2px solid var(--line);color:var(--muted);line-height:1.35}
.docs-toc a:hover{color:var(--pine-ink);border-left-color:var(--pine)}

/* ---- Landing ---- */
.land-hero{padding:.4rem 0 1.4rem}
.land-hero h1{font-size:clamp(2.1rem,4.6vw,3.1rem);font-weight:800;margin:1rem 0 .8rem}
.land-hero .lead{font-size:1.14rem;color:var(--ink-2);max-width:60ch;margin-bottom:1.5rem}
.hero-search{position:relative;max-width:640px}
.hero-search .ico{left:1.15rem;top:1.02rem;width:1.3rem;height:1.3rem}
.hero-search input{padding:.95rem 1.2rem .95rem 3.3rem;font-size:1.05rem;box-shadow:var(--shadow-sm)}
.docs-landing h2{font-size:1.45rem;margin:2.2rem 0 1rem}
.docs-landing.searching .quick,.docs-landing.searching .browse{display:none}
.docs-landing .sr-list{max-width:640px}
.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem}
a.qcard{
  display:flex;flex-direction:column;gap:.7rem;padding:1.15rem 1.2rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);color:var(--ink);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
a.qcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2);color:var(--ink)}
a.qcard b{font-family:var(--disp);font-size:1rem;font-weight:700;line-height:1.25}
.qi,.cat-card .fi{
  width:42px;height:42px;border-radius:13px;background:var(--pine-soft);color:var(--pine-ink);
  display:inline-flex;align-items:center;justify-content:center;flex:none;
}
.qi svg,.cat-card .fi svg{width:22px;height:22px}
a.qcard:nth-child(2) .qi,a.qcard:nth-child(4) .qi{background:var(--honey-soft);color:var(--honey-deep)}
.cat-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;align-items:stretch}
.cat-card{
  margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem 1.5rem 1.2rem;scroll-margin-top:92px;
}
.cat-card:target{border-color:var(--pine);box-shadow:var(--shadow)}
.cc-head{display:flex;align-items:center;gap:.85rem;margin-bottom:.7rem}
.cc-head h3{font-size:1.15rem;line-height:1.15}
.cc-count{font-size:.78rem;color:var(--muted)}
.cat-card > p{font-size:.92rem;color:var(--muted);margin-bottom:.8rem}
.cat-card ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.cat-card li a{display:block;padding:.45rem 0;font-size:.92rem;line-height:1.35;color:var(--ink-2);border-bottom:1px solid var(--line)}
.cat-card li:last-child a{border-bottom:0}
.cat-card li a:hover{color:var(--pine-ink)}

/* ---- Responsive ---- */
@media (max-width:1180px){
  .docs-shell.has-toc{grid-template-columns:288px minmax(0,1fr)}
  .docs-toc{display:none}
}
@media (max-width:900px){
  .docs-shell,.docs-shell.has-toc{grid-template-columns:minmax(0,1fr);gap:1.2rem;padding-block:1.2rem 3rem}
  .docs-side{position:static;max-height:none;overflow:visible;padding:0}
  .side-toggle{display:flex}
  .side-nav{display:none;margin-top:.8rem;padding:.6rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm)}
  .docs-side.open .side-nav{display:block}
  .side-search kbd{display:none}
  .cat-cards{grid-template-columns:minmax(0,1fr)}
  .prevnext{grid-template-columns:1fr}
  a.pn.next{grid-column:auto}
}
@media (max-width:640px){
  .art-summary{font-size:1.04rem}
  .related ul{grid-template-columns:1fr}
}
@media (max-width:480px){
  /* the shared header (brand + theme + CTA + menu) is ~7px too wide at 390px: drop the CTA in docs */
  .head-actions .btn-primary{display:none}
}