/* Documentation page.
   A manual is READ, not scanned like a landing page, so this deliberately breaks from the marketing
   layout: a persistent sidebar you never lose your place in, one measured column of prose, and no
   animation. Tokens still come from style.css so it is unmistakably the same product. */

.dk { background: var(--bg); }
.dk-wrap {
  display: grid; grid-template-columns: 268px minmax(0, 1fr);
  max-width: 1280px; margin-inline: auto; align-items: start;
}

/* ---- sidebar ---- */
.dk-side {
  position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto;
  border-right: 1px solid var(--border); padding: 20px 0 40px;
}
.dk-search {
  width: calc(100% - 32px); margin: 0 16px 14px; padding: 8px 11px; font: inherit; font-size: 13.5px;
  background: var(--deep); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.dk-search:focus { outline: none; border-color: var(--accent-line); }
.dk-nav { display: flex; flex-direction: column; }
.dk-grp {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 18px 16px 6px; opacity: .8;
}
.dk-nav a {
  color: var(--muted); text-decoration: none; font-size: 13.5px; padding: 5px 16px;
  border-left: 2px solid transparent; line-height: 1.35;
}
.dk-nav a:hover { color: var(--text); }
.dk-nav a.on { color: var(--accent); border-left-color: var(--accent); }
.dk-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dk-nav a.hide, .dk-grp.hide { display: none; }

/* ---- content ---- */
/* ~68 characters is the readable measure; a full-width manual is a manual nobody reads. */
.dk-main { padding: 34px 40px 80px; max-width: 780px; }
.dk-main h1 { font-family: var(--font-heading); font-size: 34px; margin: 0 0 8px; letter-spacing: -.015em; }
.dk-lede { color: var(--muted); font-size: 15.5px; margin: 0 0 30px; }

.dk-main section { padding-top: 26px; margin-bottom: 8px; scroll-margin-top: 16px; }
.dk-main section + section { border-top: 1px solid var(--border); }
.dk-main h2 {
  font-family: var(--font-heading); font-size: 21px; margin: 0 0 12px; letter-spacing: -.008em;
}
.dk-main p { color: var(--muted); font-size: 15px; line-height: 1.68; margin: 0 0 13px; }
.dk-main ul, .dk-main ol { margin: 0 0 13px; padding-left: 20px; }
.dk-main li { color: var(--muted); font-size: 14.5px; line-height: 1.62; margin-bottom: 8px; }
.dk-main b { color: var(--text); font-weight: 600; }
.dk-main code {
  font-family: var(--mono); font-size: 13px; color: var(--accent);
  background: var(--deep); border: 1px solid var(--border); padding: 1px 5px; border-radius: 3px;
}
.dk-main pre {
  background: var(--deep); border: 1px solid var(--border); padding: 11px 13px; overflow-x: auto;
  margin: 0 0 14px;
}
.dk-main pre code { border: 0; background: none; padding: 0; font-size: 13px; }
.dk-main a { color: var(--accent); }

/* A note is an aside, not a warning box with a siren — it should slow the eye, not shout. */
.dk-note {
  border-left: 2px solid var(--accent-line); padding: 8px 0 8px 13px;
  font-size: 14px !important; color: var(--muted);
}

.dk-table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 13.5px; }
.dk-table th, .dk-table td { border: 1px solid var(--border); padding: 7px 10px; text-align: left; }
.dk-table th { color: var(--text); font-weight: 600; background: var(--surface); font-size: 12.5px; }
.dk-table td { color: var(--muted); font-variant-numeric: tabular-nums; }

.dk-foot { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 13.5px; }

/* ---- phone ---- */
/* The sidebar stops being a rail and becomes a scrolling strip at the top: on a phone a 268px
   column would leave no room for the prose it is meant to serve. */
@media (max-width: 900px) {
  .dk-wrap { grid-template-columns: 1fr; }
  .dk-side {
    position: static; height: auto; max-height: 44vh; border-right: 0;
    border-bottom: 1px solid var(--border); padding: 14px 0 12px;
  }
  .dk-main { padding: 24px 18px 60px; }
  .dk-main h1 { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }