.docs-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(40px, 5vw, 56px);
  padding: clamp(40px, 5vw, 64px) 0 clamp(56px, 7vw, 88px);
  align-items: start;
}
.docs-nav {
  position: sticky;
  top: 96px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.docs-nav p {
  margin: 0 0 16px;
  color: var(--ink-faint);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.docs-nav ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--rule);
  list-style: none;
}
.docs-nav a {
  display: block;
  margin-left: -1px;
  padding-left: 16px;
  border-left: 2px solid transparent;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.docs-nav a:hover,
.docs-nav a[aria-current="page"],
.docs-nav a[aria-current="location"] {
  border-color: var(--accent);
  color: var(--accent);
}
.docs-content { min-width: 0; }
.docs-content a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
.docs-content a:hover,
.docs-content a:focus-visible {
  color: var(--violet);
  text-decoration-thickness: 2px;
}
.docs-section {
  margin-top: clamp(28px, 3vw, 40px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--rule);
  scroll-margin-top: 96px;
}
.docs-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.docs-section > p { max-width: var(--measure); line-height: 1.6; }
.docs-section h2 { margin-bottom: 14px; }
.docs-section h2.docs-subsection { margin-top: clamp(32px, 4vw, 48px); }
.docs-section h3 { margin: 28px 0 10px; }
.inline-code {
  padding: 1px 6px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.86em;
}
.docs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.docs-card {
  padding: 24px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
}
.docs-card h2, .docs-card h3 { margin: 0 0 8px; font-size: 19px; }
.docs-card p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 1.55; }
.docs-card a::after { content: " \2192"; color: var(--accent); }
/* Numbered stages (How it works). No docs page used an <ol> before this, and the
   base reset removes list markers, so the counter is drawn explicitly. */
.docs-steps {
  max-width: var(--measure);
  margin: 22px 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.docs-steps li {
  position: relative;
  padding: 0 0 16px 40px;
  line-height: 1.6;
  color: var(--ink-muted);
}
.docs-steps li:last-child { padding-bottom: 0; }
.docs-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--paper-raised);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
}
.docs-steps li b { color: var(--ink-strong); }

.docs-callout {
  max-width: var(--measure);
  margin: 24px 0;
  padding: 18px 22px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.55;
}
.docs-table {
  display: block;
  width: 100%;
  margin-top: 24px;
  overflow-x: auto;
  border-collapse: collapse;
}
.docs-table th, .docs-table td {
  min-width: 130px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.docs-table th {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.docs-table td { color: var(--ink-muted); font-size: 14px; line-height: 1.5; }
.docs-table td:first-child { color: var(--accent); font-family: var(--font-mono); white-space: nowrap; }
.docs-table .group th { padding-top: 24px; color: var(--ink-strong); }
.docs-list { max-width: var(--measure); padding-left: 1.25rem; }
.docs-list li { margin: 0.55rem 0; color: var(--ink-muted); line-height: 1.55; }
@media (max-width: 900px) {
  .docs-shell { grid-template-columns: 1fr; gap: 32px; padding-top: 36px; }
  /* Grid items default to min-width:auto, which refuses to shrink below their
     content's intrinsic minimum. The nav's link row is the widest thing here,
     so without this it sizes the whole shell to the row's full width and the
     page scrolls sideways on a phone instead of the nav scrolling internally. */
  .docs-shell > * { min-width: 0; }
  .docs-nav { position: static; }
  .docs-nav p { margin-bottom: 12px; }
  .docs-nav ul {
    flex-direction: row;
    gap: 0;
    overflow-x: auto;
    border-left: 0;
    border-bottom: 1px solid var(--rule);
    scrollbar-width: thin;
  }
  .docs-nav a {
    margin: 0 16px -1px 0;
    padding: 0 0 10px;
    border-left: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .docs-nav a:hover,
  .docs-nav a[aria-current="page"],
  .docs-nav a[aria-current="location"] { border-bottom-color: var(--accent); }
}
@media (max-width: 640px) {
  .docs-shell { gap: 28px; padding: 32px 0 56px; }
  .docs-section { margin-top: 24px; padding-top: 32px; }
  .docs-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .docs-card { padding: 20px; }
  .docs-callout { margin: 20px 0; padding: 16px 18px; }
  .docs-table { margin-top: 20px; }
  .docs-table th, .docs-table td { padding: 11px 12px; }
  .code-block pre { padding: 16px; font-size: 12.5px; }
}