/* ============================================================
   DOCS — multi-page documentation app
   Three columns: nav · content · on-this-page.

   Reading-first: body content sits directly on the page with no
   card wrappers. Boxes are reserved for things that genuinely are
   objects — the overview grid and the search dialog. Everything
   else is separated by space and hairlines.

   Tokens only (branddesign.md), so dark theme comes free.
   ============================================================ */

.dshell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 208px;
  gap: 48px;
  max-width: 1340px;
  margin: 0 auto;
  padding: 32px 32px 96px;
  align-items: start;
}

/* ── Sidebar ─────────────────────────────────────────── */
.dsidebar { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 20px; }

.dsearch-trigger {
  display: flex; align-items: center; gap: 8px;
  width: 100%; height: 34px; padding: 0 10px;
  background: var(--bg2);
  border: 1px solid var(--b2);
  border-radius: 8px;
  color: var(--t4);
  font: 400 13px/1 var(--ff-sans);
  cursor: pointer; text-align: left;
  transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.dsearch-trigger:hover { border-color: var(--b3); color: var(--t3); }
.dsearch-trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-line); }
.dsearch-ic { display: flex; width: 14px; height: 14px; color: var(--t4); flex: 0 0 auto; }
.dsearch-ic svg { width: 100%; height: 100%; }
.dsearch-trigger span:nth-child(2) { flex: 1; }
.dkbd {
  font: 500 10px/1 var(--ff-mono);
  color: var(--t4);
  background: var(--bg3);
  border: 1px solid var(--b1);
  border-radius: 4px;
  padding: 3px 5px;
}

.dnav { display: flex; flex-direction: column; gap: 20px; }
.dnav-group { display: flex; flex-direction: column; gap: 1px; }
.dnav-label {
  font: 600 11px/1 var(--ff-sans);
  color: var(--tx);
  padding: 0 8px 9px;
}
.dnav-link {
  display: block; padding: 6px 8px;
  border-radius: 6px;
  font: 400 13px/1.5 var(--ff-sans);
  color: var(--t3); text-decoration: none;
  transition: color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.dnav-link:hover { color: var(--tx); }
.dnav-link.on { color: var(--tx); background: var(--bg3); font-weight: 500; }
.dnav-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-line); }

/* ── Content column — prose, not panels ──────────────── */
.dmain { min-width: 0; }
.darticle { max-width: 74ch; }

.dh1 {
  margin: 0 0 14px;
  font: 700 40px/1.1 var(--ff-sans);
  letter-spacing: -0.03em;
  color: var(--tx);
  text-wrap: balance;
}
.dlead {
  margin: 0 0 8px;
  font-size: 16px; line-height: 1.7;
  color: var(--t2);
}

.dh2 {
  margin: 52px 0 16px;
  font: 600 24px/1.3 var(--ff-sans);
  letter-spacing: -0.02em;
  color: var(--tx);
  scroll-margin-top: 28px;
}
.dsec { scroll-margin-top: 28px; }

.dp {
  margin: 0 0 18px;
  font-size: 15px; line-height: 1.75;
  color: var(--t2);
}
.dp:last-child { margin-bottom: 0; }
.darticle strong, .dlead strong { font-weight: 600; color: var(--tx); }

.dlink {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.dlink:hover { text-decoration-thickness: 2px; }
.dlink:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-line); border-radius: 2px; }

/* Lists — plain, generous */
.dlist { margin: 0 0 18px; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.dlist li { font-size: 15px; line-height: 1.7; color: var(--t2); }
.dlist li::marker { color: var(--t4); }

.dsteps {
  margin: 0 0 18px; padding: 0; list-style: none;
  counter-reset: dstep; display: flex; flex-direction: column; gap: 14px;
}
.dsteps li {
  counter-increment: dstep; position: relative; padding-left: 30px;
  font-size: 15px; line-height: 1.7; color: var(--t2);
}
.dsteps li::before {
  content: counter(dstep) ".";
  position: absolute; left: 0; top: 0;
  color: var(--t4);
  font: 400 15px/1.7 var(--ff-mono);
  font-variant-numeric: tabular-nums;
}

/* Definition rows — a heading and its explanation, no chrome */
.ddefs { margin: 0 0 18px; }
.ddefs dt {
  margin-top: 24px;
  font: 600 15px/1.5 var(--ff-sans);
  color: var(--tx);
}
.ddefs dt:first-child { margin-top: 0; }
.ddefs dd {
  margin: 4px 0 0;
  font-size: 15px; line-height: 1.7; color: var(--t2);
}

/* An aside. A hairline, not a tinted box. */
.dnote {
  margin: 22px 0 18px;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--b2);
  font-size: 14px; line-height: 1.7;
  color: var(--t3);
}
.dnote strong { color: var(--t2); font-weight: 600; }

/* ── Tables ──────────────────────────────────────────── */
.dtable-scroll { overflow-x: auto; margin: 0 0 18px; }
.dtable { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 14px; }
.dtable thead th {
  text-align: left; padding: 0 16px 12px 0;
  font: 500 12px/1 var(--ff-sans);
  color: var(--t4); border-bottom: 1px solid var(--b2);
}
.dtable tbody th {
  text-align: left; font: 400 14px/1.5 var(--ff-sans); color: var(--tx);
  padding: 13px 16px 13px 0; border-bottom: 1px solid var(--b1);
}
.dtable td {
  padding: 13px 16px 13px 0; border-bottom: 1px solid var(--b1);
  color: var(--t3); font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums; font-size: 13px;
}
.dtable tbody tr:last-child th, .dtable tbody tr:last-child td { border-bottom: none; }

/* ── Buttons ─────────────────────────────────────────── */
.dbtn, .dbtn-2 {
  height: 38px; padding: 0 16px; border-radius: 8px;
  font: 500 14px/1 var(--ff-sans); cursor: pointer;
  transition: background var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.dbtn { background: var(--fill, var(--tx)); color: var(--fill-ink); border: none; }
.dbtn:hover { background: var(--t2); }
.dbtn-2 { background: transparent; color: var(--tx); border: 1px solid var(--b2); }
.dbtn-2:hover { background: var(--bg3); }
.dbtn:active, .dbtn-2:active { transform: scale(.98); }
.dbtn:focus-visible, .dbtn-2:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-line); }
.dcta { margin-top: 24px; }

/* ── Overview: hero + card grid ──────────────────────── */
.dhero { max-width: 74ch; padding-bottom: 8px; }
.dhero .dh1 { font-size: 46px; letter-spacing: -0.035em; }
.dhero .dlead { margin-bottom: 24px; font-size: 17px; }
.dhero-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 44px; }

.dcards-sec { margin-bottom: 44px; }
.dcards-h {
  margin: 0 0 16px;
  font: 600 15px/1.2 var(--ff-sans);
  color: var(--tx);
}
.dcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }

/* Cards ARE objects, so they keep a border — but flat: no shadow,
   no lift. Depth here would fight the prose beside it. */
.dcard {
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 18px; text-align: left; cursor: pointer;
  background: transparent;
  border: 1px solid var(--b1);
  border-radius: 10px;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.dcard:hover { background: var(--bg3); border-color: var(--b2); }
.dcard:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-line); }
.dcard-t { font: 500 14px/1.4 var(--ff-sans); color: var(--tx); }
.dcard-d { font-size: 13px; line-height: 1.55; color: var(--t3); }

/* ── Prev / next — plain, like a book ────────────────── */
.dprevnext {
  display: flex; justify-content: space-between; gap: 24px;
  max-width: 74ch;
  margin-top: 64px; padding-top: 28px;
  border-top: 1px solid var(--b1);
}
.dpn {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0; min-width: 0; cursor: pointer;
  background: none; border: none; text-align: left;
}
.dpn-next { text-align: right; margin-left: auto; align-items: flex-end; }
.dpn-lbl { font: 400 13px/1 var(--ff-sans); color: var(--t4); }
.dpn-t {
  font: 500 15px/1.4 var(--ff-sans); color: var(--t2);
  transition: color var(--t-base) var(--ease);
}
.dpn:hover .dpn-t { color: var(--accent); }
.dpn-prev .dpn-t::before { content: '← '; color: var(--t4); }
.dpn-next .dpn-t::after  { content: ' →'; color: var(--t4); }
.dpn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-line); border-radius: 4px; }

/* ── On this page ────────────────────────────────────── */
.dtoc { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 2px; }
.dtoc:empty { display: none; }
.dtoc-label {
  font: 400 12px/1 var(--ff-sans);
  color: var(--t4); padding: 0 0 12px 12px;
}
.dtoc-link {
  display: block; padding: 5px 0 5px 12px;
  border-left: 1px solid var(--b1);
  font: 400 13px/1.5 var(--ff-sans);
  color: var(--t3); text-decoration: none;
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.dtoc-link:hover { color: var(--tx); }
.dtoc-link.on { color: var(--tx); border-left-color: var(--tx); }
.dtoc-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-line); border-radius: 2px; }

/* ── Search dialog ───────────────────────────────────── */
.dsearch-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, .4);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 20px 20px;
}
.dsearch-overlay[hidden] { display: none; }
.dsearch-box {
  width: 100%; max-width: 560px;
  background: var(--bg2); border: 1px solid var(--b2);
  border-radius: 14px; box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.dsearch-field {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px; height: 50px;
  border-bottom: 1px solid var(--b1);
}
.dsearch-input {
  flex: 1; min-width: 0; height: 100%;
  background: none; border: none; outline: none;
  font: 400 15px/1 var(--ff-sans); color: var(--tx);
}
.dsearch-input::placeholder { color: var(--t4); }
.dsearch-results { max-height: 46vh; overflow-y: auto; padding: 6px; }
.dsearch-hit {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; padding: 9px 11px; text-align: left; cursor: pointer;
  background: none; border: none; border-radius: 8px;
}
.dsearch-hit.on { background: var(--bg3); }
.dsearch-hit-t { font: 500 14px/1.35 var(--ff-sans); color: var(--tx); }
.dsearch-hit-s { font-size: 12px; line-height: 1.4; color: var(--t3); }
.dsearch-empty { padding: 22px 14px; text-align: center; font-size: 13px; color: var(--t3); }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1180px) {
  .dshell { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
  .dtoc { display: none; }
}
@media (max-width: 820px) {
  .dshell { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px 18px 72px; }
  .dsidebar { position: static; }
  .dnav { flex-direction: row; gap: 16px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .dnav-group { flex-direction: row; gap: 6px; align-items: center; flex: 0 0 auto; }
  .dnav-label { padding: 0 4px 0 0; white-space: nowrap; }
  .dnav-link { white-space: nowrap; border: 1px solid var(--b1); border-radius: 999px; padding: 5px 11px; }
  .dh1 { font-size: 30px; }
  .dhero .dh1 { font-size: 32px; }
  .dh2 { font-size: 21px; margin-top: 40px; }
  .dprevnext { flex-direction: column; gap: 20px; }
  .dpn-next { text-align: left; margin-left: 0; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .dcard, .dpn-t, .dbtn, .dbtn-2, .dnav-link, .dtoc-link, .dsearch-trigger { transition: none; }
}