/* Docs page (docs.html): sticky contents on the left, the guide on the right.
   On phones the contents become a scrolling row of chips under the hero. */

.docs-hero {
  padding: 10rem 3rem 4.2rem; text-align: center;
  border-bottom: 1px solid var(--border);
}
.docs-hero .hero-title { font-size: clamp(2.6rem, 6vw, 4.8rem); }
.docs-hero-inner { max-width: 1180px; margin: 0 auto; }
.docs-hero .hero-title span { color: var(--accent); }
.docs-hero .hero-sub { max-width: 640px; }
.docs-hero .hero-sub a { color: var(--text); }

.docs-layout {
  max-width: 1180px; margin: 0 auto; padding: 0 3rem 6rem;
  display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 4.5rem;
}

/* Contents */
.docs-nav {
  position: sticky; top: calc(var(--docs-top, 68px) + 1rem); align-self: start;
  max-height: calc(100vh - var(--docs-top, 68px) - 2rem); overflow-y: auto;
  padding: 2.6rem 0 2rem; scrollbar-width: thin;
}
.docs-nav-group + .docs-nav-group { margin-top: 1.6rem; }
.docs-nav-title {
  font-family: 'DM Mono', monospace; font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); margin-bottom: .55rem;
}
.docs-nav a {
  display: block; padding: .3rem .7rem; margin-left: -.7rem; border-radius: 6px;
  color: var(--muted); text-decoration: none; font-size: .9rem; line-height: 1.4;
  border-left: 2px solid transparent;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.docs-nav a:hover { color: var(--text); background: rgba(255, 255, 255, .03); }
.docs-nav a.active {
  color: var(--text); background: rgba(90, 167, 248, .07); border-left-color: var(--accent);
  border-radius: 0 6px 6px 0;
}

/* Article */
.docs-content { min-width: 0; max-width: 760px; padding-top: 1.4rem; }
.doc { padding: 2.6rem 0 2.8rem; border-bottom: 1px solid var(--border); scroll-margin-top: calc(var(--docs-top, 68px) + 1rem); }
.doc:last-child { border-bottom: 0; }
.doc-kicker {
  font-family: 'DM Mono', monospace; font-size: .7rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 1.1rem;
}
.doc h2 {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700;
  font-size: clamp(1.7rem, 2.6vw, 2.15rem); line-height: 1.15; letter-spacing: -.02em;
  margin-bottom: 1.1rem;
}
.doc h3 {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600;
  font-size: 1.15rem; margin: 2rem 0 .7rem; color: var(--text);
}
.doc p, .doc li, .doc dd { color: var(--muted); line-height: 1.8; font-size: 1rem; }
.doc p + p { margin-top: 1rem; }
.doc strong { color: var(--text); font-weight: 500; }
.doc a { color: var(--accent-hi); text-decoration: none; border-bottom: 1px solid rgba(111, 188, 255, .3); }
.doc a:hover { border-bottom-color: var(--accent-hi); }
.doc ul, .doc ol { margin: 1rem 0 0 1.2rem; display: grid; gap: .55rem; }
.doc ul { list-style: none; margin-left: 0; }
.doc ul > li { position: relative; padding-left: 1.3rem; }
.doc ul > li::before {
  content: ''; position: absolute; left: 0; top: .78em;
  width: 6px; height: 6px; border-radius: 1px; background: var(--accent-lo);
}

.doc ol + p, .doc ul + p, .doc dl + p, .doc table + p, .doc .doc-two + p, .doc .doc-tip + p, .doc .doc-note + p { margin-top: 1.2rem; }

.doc-small { font-size: .9rem !important; color: var(--faint) !important; margin-top: 1.2rem; }

.menu-path, .ui {
  font-family: 'DM Mono', monospace; font-size: .84em; color: var(--accent-hi);
  white-space: nowrap;
}
.ui { color: var(--text); background: var(--bg-3); border: 1px solid var(--border-2);
  border-radius: 5px; padding: .05rem .38rem; white-space: normal; }
.doc-where { margin: -.2rem 0 1.2rem; }
.doc-where .menu-path {
  display: inline-block; padding: .35rem .7rem; border-radius: 7px;
  border: 1px solid rgba(90, 167, 248, .28); background: rgba(90, 167, 248, .06);
  white-space: normal;
}

/* Numbered steps */
.doc-steps { list-style: none; counter-reset: step; margin-left: 0 !important; gap: 1rem !important; }
.doc-steps > li { counter-increment: step; position: relative; padding-left: 2.6rem; }
.doc-steps > li::before {
  content: counter(step); position: absolute; left: 0; top: .1rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: 'DM Mono', monospace; font-size: .78rem; color: var(--accent-hi);
  border: 1px solid rgba(90, 167, 248, .35); background: rgba(90, 167, 248, .06);
}

/* Definition lists: settings, menu items */
.doc-defs { margin-top: 1.1rem; border-top: 1px solid var(--border); }
.doc-defs dt {
  color: var(--text); font-weight: 500; padding-top: 1rem; font-size: .98rem;
}
.doc-defs dd { padding: .25rem 0 1rem; border-bottom: 1px solid var(--border); }

/* Callouts */
.doc-note, .doc-tip {
  margin-top: 1.5rem; padding: 1rem 1.2rem; border-radius: 10px;
  color: var(--muted); line-height: 1.75; font-size: .96rem;
  border: 1px solid var(--border-2); background: rgba(255, 255, 255, .02);
}
.doc-tip { border-color: rgba(116, 214, 138, .3); background: rgba(116, 214, 138, .05); }
.doc-note strong, .doc-tip strong { color: var(--text); font-weight: 500; }

/* Two cards */
.doc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.2rem 0 1.4rem; }
.doc-card {
  border: 1px solid var(--border); border-radius: 10px; padding: 1.2rem 1.3rem;
  background: var(--bg-2);
}
.doc-card-title { font-weight: 600; color: var(--text); margin-bottom: .4rem; }
.doc-card p { font-size: .94rem; }

/* Command table */
.doc-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .94rem; }
.doc-table th {
  text-align: left; font-weight: 500; color: var(--faint); font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase; padding: .6rem .8rem .6rem 0;
  border-bottom: 1px solid var(--border-2);
}
.doc-table td { padding: .75rem .8rem .75rem 0; border-bottom: 1px solid var(--border); color: var(--muted); vertical-align: top; }
.doc-table td:first-child { width: 42%; }

/* FAQ */
.doc-faq dt { color: var(--text); font-weight: 500; margin-top: 1.4rem; }
.doc-faq dt:first-child { margin-top: .4rem; }
.doc-faq dd { margin-top: .35rem; }

/* Sync flags */
.flag { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .45rem; vertical-align: -.05rem; }
.flag.red { background: #cc1f1a; }
.flag.amber { background: #d98000; }

@media (max-width: 900px) {
  .docs-hero { padding: 7rem 1.4rem 2.4rem; }
  .docs-layout { grid-template-columns: 1fr; gap: 0; padding: 0 1.4rem 4rem; }
  .docs-nav {
    position: sticky; top: var(--docs-top, 3.6rem); z-index: 20; max-height: none; overflow-x: auto; overflow-y: hidden;
    display: flex; gap: .4rem; padding: .7rem 0; margin: 0 -1.4rem; padding-left: 1.4rem; padding-right: 1.4rem;
    background: rgba(20, 20, 22, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .docs-nav-group { display: contents; }
  .docs-nav-title { display: none; }
  .docs-nav a {
    flex: none; margin: 0; white-space: nowrap; font-size: .82rem;
    border: 1px solid var(--border-2); border-radius: 999px; padding: .3rem .75rem;
  }
  .docs-nav a.active { border-color: var(--accent); border-radius: 999px; }
  .doc { scroll-margin-top: calc(var(--docs-top, 3.6rem) + 3.4rem); }
  .doc-two { grid-template-columns: 1fr; }
  .doc-table td:first-child { width: auto; }
  .menu-path { white-space: normal; }
}