/* ============================================================
   YBeeM swarm — documentation styles.
   Builds on the marketing site's design tokens (styles.css must be linked FIRST):
   --bg --surface --soft --ink --muted --line --accent --accent-ink --accent-weak
   --radius --shadow. Two-axis theming (colour × light/dark) is inherited, so docs
   follow the picker in the header. No build step; plain CSS.
   ============================================================ */

/* callout accent colours (theme-independent semantic hues) */
:root { --c-info:#1f7fd6; --c-warn:#e0940a; --c-ok:#22a559; --c-danger:#d64545; }

.docs-badge {
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-weak); border: 1px solid var(--line);
  border-radius: 999px; padding: .15rem .5rem; margin-left: .1rem;
}

/* ============================================================
   Three-column layout: sidebar | article | on-this-page
   ============================================================ */
.docs-layout {
  max-width: 84rem; margin: 0 auto; padding: 0 1.25rem;
  display: grid; grid-template-columns: 15rem minmax(0, 1fr) 13rem;
  gap: 0; align-items: start;
}

/* ---- left sidebar nav ---- */
.docs-sidebar {
  position: sticky; top: 3.6rem;
  max-height: calc(100vh - 3.6rem); overflow-y: auto;
  padding: 1.6rem 1.1rem 3.5rem 0;
  border-right: 1px solid var(--line);
}
.docs-nav-group { margin-bottom: 1.3rem; }
.docs-nav-group > .grp-label {
  display: block; font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem .85rem;
}
.docs-nav-group a {
  display: block; padding: .4rem .85rem; margin: 1px 0;
  color: var(--muted); font-size: .9rem; font-weight: 600;
  border-radius: 8px; border-left: 2px solid transparent;
}
.docs-nav-group a:hover { color: var(--ink); background: var(--soft); text-decoration: none; }
.docs-nav-group a.active {
  color: var(--accent-ink); background: var(--accent-weak);
  border-left-color: var(--accent);
}

/* ---- centre article ---- */
.docs-main { min-width: 0; padding: 1.9rem clamp(1.1rem, 4vw, 3.2rem) 5rem; }
.docs-breadcrumb { font-size: .8rem; color: var(--muted); margin-bottom: .9rem; }
.docs-breadcrumb a { color: var(--muted); }
.docs-breadcrumb span { margin: 0 .4rem; }

.docs-article { max-width: 48rem; }
.docs-article h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; margin: 0 0 .4rem; }
.docs-lead { font-size: 1.12rem; color: var(--muted); margin: 0 0 1.9rem; line-height: 1.6; }
.docs-article h2 {
  font-size: 1.5rem; font-weight: 800; margin: 2.4rem 0 .75rem;
  scroll-margin-top: 4.8rem; border-top: 1px solid var(--line); padding-top: 1.6rem;
}
.docs-article h2:first-of-type { border-top: 0; padding-top: .5rem; }
.docs-article h3 { font-size: 1.12rem; font-weight: 700; margin: 1.6rem 0 .5rem; scroll-margin-top: 4.8rem; }
.docs-article p { color: var(--muted); margin: 0 0 .9rem; }
.docs-article ul, .docs-article ol { color: var(--muted); margin: 0 0 .9rem; padding-left: 1.4rem; }
.docs-article li { margin: .3rem 0; }
.docs-article strong { color: var(--ink); font-weight: 700; }
.docs-article a { color: var(--accent-ink); }
.docs-article h2 .anchor, .docs-article h3 .anchor {
  opacity: 0; margin-left: .5rem; color: var(--muted); font-weight: 400; text-decoration: none;
}
.docs-article h2:hover .anchor, .docs-article h3:hover .anchor { opacity: 1; }

/* inline + block code */
.docs-article :not(pre) > code {
  background: var(--soft); border: 1px solid var(--line); border-radius: 6px;
  padding: .08rem .35rem; font-size: .84em;
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  color: var(--accent-ink);
}
.docs-article pre {
  background: var(--soft); border: 1px solid var(--line); border-radius: 12px;
  padding: 1rem 1.1rem; overflow-x: auto; margin: 0 0 1.1rem;
  font-size: .85rem; line-height: 1.6;
}
.docs-article pre code {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  color: var(--ink); white-space: pre;
}

/* tables */
.docs-article .table-wrap { overflow-x: auto; margin: 0 0 1.1rem; }
.docs-article table {
  width: 100%; border-collapse: collapse; font-size: .88rem;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.docs-article th, .docs-article td {
  text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.docs-article th { background: var(--soft); color: var(--ink); font-weight: 700; font-size: .8rem; }
.docs-article tbody tr:last-child td { border-bottom: 0; }
.docs-article td code { white-space: nowrap; }

/* callouts */
.callout {
  display: flex; gap: .75rem; align-items: flex-start;
  background: var(--soft); border: 1px solid var(--line);
  border-left: 4px solid var(--c-info); border-radius: 10px;
  padding: .85rem 1rem; margin: 0 0 1.1rem;
}
.callout .c-ico { font-size: 1.15rem; line-height: 1.4; flex: 0 0 auto; }
.callout p { margin: 0; color: var(--muted); font-size: .92rem; }
.callout p + p { margin-top: .5rem; }
.callout strong { color: var(--ink); }
.callout-info   { border-left-color: var(--c-info); }
.callout-warn   { border-left-color: var(--c-warn); }
.callout-safe   { border-left-color: var(--c-ok); }
.callout-danger { border-left-color: var(--c-danger); }

/* pills */
.pill { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.pill.ok  { color: var(--c-ok); border-color: color-mix(in srgb, var(--c-ok) 40%, var(--line)); }
.pill.cfg { color: var(--c-info); border-color: color-mix(in srgb, var(--c-info) 40%, var(--line)); }
.pill.plan{ color: var(--c-warn); border-color: color-mix(in srgb, var(--c-warn) 40%, var(--line)); }

/* step list */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 1.1rem; }
.steps > li {
  position: relative; padding: .1rem 0 1rem 2.7rem; margin: 0 0 0 .9rem;
  border-left: 2px solid var(--line);
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: -1rem; top: -.15rem;
  width: 1.85rem; height: 1.85rem; border-radius: 50%;
  background: var(--btn); color: #fff; font-weight: 800; font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 5px var(--bg);
}
.steps > li h3 { margin: .1rem 0 .35rem; }

/* prev / next pager */
.docs-pager { display: flex; gap: .9rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.docs-pager a {
  flex: 1 1 0; display: block; padding: .9rem 1.1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow);
  transition: border-color .15s ease, transform .1s ease;
}
.docs-pager a:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.docs-pager .dir { display: block; font-size: .75rem; color: var(--muted); font-weight: 700; letter-spacing: .04em; }
.docs-pager .ttl { display: block; font-weight: 700; margin-top: .2rem; }
.docs-pager .next { text-align: right; }

/* ---- right-hand on-this-page ---- */
.docs-toc { position: sticky; top: 3.6rem; max-height: calc(100vh - 3.6rem); overflow-y: auto; padding: 1.9rem .5rem 2.5rem 1.1rem; }
.docs-toc .toc-label { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
.docs-toc a { display: block; padding: .25rem .65rem; font-size: .82rem; color: var(--muted); border-left: 2px solid var(--line); }
.docs-toc a:hover { color: var(--ink); text-decoration: none; }
.docs-toc a.active { color: var(--accent-ink); border-left-color: var(--accent); }
.docs-toc a.lvl-3 { padding-left: 1.4rem; font-size: .78rem; }

/* ============================================================
   Docs hub (index) cards
   ============================================================ */
.docs-hero { max-width: 55rem; margin: 0 0 2.2rem; }
.docs-hero .eyebrow { margin-bottom: .8rem; }
.docs-hero h1 { font-size: clamp(1.9rem, 4.5vw, 2.7rem); font-weight: 800; margin: 0 0 .5rem; }
.docs-hero p { font-size: 1.12rem; color: var(--muted); max-width: 40rem; }
.doc-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 0 0 .75rem; }
.doc-card {
  display: block; padding: 1.35rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  color: var(--ink); text-decoration: none; transition: transform .12s ease, border-color .15s ease;
}
.doc-card:hover { transform: translateY(-3px); border-color: var(--accent); text-decoration: none; }
.doc-card .dc-ico { font-size: 1.6rem; margin-bottom: .55rem; }
.doc-card h3 { font-size: 1.12rem; margin: 0 0 .35rem; }
.doc-card p { color: var(--muted); font-size: .9rem; margin: 0; }
.doc-card .dc-links { margin-top: .6rem; font-size: .82rem; color: var(--accent-ink); font-weight: 600; }

/* ============================================================
   Mobile
   ============================================================ */
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: .6rem; z-index: 60; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .4rem .7rem; }
.docs-menu-btn {
  display: none; align-items: center; gap: .5rem;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  border-radius: 9px; padding: .55rem .85rem; font: inherit; font-weight: 700; font-size: .88rem;
  margin: 1rem 1.25rem 0; cursor: pointer;
}

@media (max-width: 1100px) {
  .docs-layout { grid-template-columns: 14rem minmax(0, 1fr); }
  .docs-toc { display: none; }
}
@media (max-width: 860px) {
  .docs-layout { grid-template-columns: 1fr; }
  .docs-menu-btn { display: inline-flex; }
  .docs-sidebar {
    position: fixed; inset: 3.6rem 0 0 0; z-index: 30;
    max-height: none; background: var(--bg); border-right: 0;
    padding: 1rem clamp(1.25rem, 5vw, 2rem) 3.5rem; display: none;
  }
  .docs-sidebar.open { display: block; }
  .doc-cards { grid-template-columns: 1fr; }
}