/* ============================================================
   Plainpaper — docs environment (/docs/*)
   Loads AFTER styles.css and reuses its tokens + guide-* article
   components. This file only adds the docs shell: the three-column
   layout (section nav / article / on-page TOC), the copyable prompt
   blocks, and the pager.
   ============================================================ */

/* ====== SHELL ====== */

/* Full-width divider under the sticky nav, docs pages only. Drawn as an inset
   shadow so the nav keeps its exact height and the sidebar rail still meets it
   without a seam. */
.nav-wrap { box-shadow: inset 0 -1px 0 var(--pp-line); }

/* The marketing footer floats 60px below the content; on docs pages the sidebar
   rail has to run into the footer's edge, so the gap moves inside the content
   column (.docs-main padding) instead. */
.footer { margin-top: 0; }

/* Bottom spacing lives on the CONTENT column, not the shell, so the grid row
   (and with it the stretched sidebar rail) runs all the way to the footer. */
.docs-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 208px;
  gap: 56px;
  align-items: start;
  padding-top: 40px;
}

.docs-main { min-width: 0; padding-bottom: 96px; }

/* Docs kickers drop the marketing pages' dot marker */
.docs-main .guide-kicker { gap: 0; }
.docs-main .guide-kicker::before { display: none; }

.docs-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-size: clamp(30px, 4vw, 44px);
  color: var(--pp-ink);
  margin: 10px 0 0;
}

/* The article inherits all typography from .guide-article. Docs pages run a
   slightly smaller measure than the marketing guides. */
.docs-article { max-width: 72ch; }
.docs-article > p:first-of-type { margin-top: 0; }

.docs-lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--pp-ink-3);
  max-width: 62ch;
  margin: 16px 0 36px;
}
.docs-lede strong { color: var(--pp-ink-2); }

/* ====== LEFT: SECTION NAV ====== */

/* A full-height rail in two layers. The aside is the COLUMN: it stretches from
   the nav (negative top margin cancels the shell's top padding) all the way to
   the footer (negative bottom margin swallows the shell's bottom padding), and
   it carries the right border, so the rail line runs nav-to-footer without a
   gap. The inner element is the STICKY SCROLLER pinned to the viewport. */
.docs-side {
  align-self: stretch;
  margin-top: -40px;
  border-right: 1px solid var(--pp-line);
}
.docs-side-inner {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  padding: 32px 20px 48px 0;
  scrollbar-width: thin;
  scrollbar-color: #ccd1e0 transparent;
}
.docs-side-inner::-webkit-scrollbar { width: 8px; }
.docs-side-inner::-webkit-scrollbar-thumb {
  background: #ccd1e0;
  border-radius: 4px;
}
.docs-side-inner::-webkit-scrollbar-thumb:hover { background: #b3bacf; }
.docs-side-inner::-webkit-scrollbar-track { background: transparent; }

.docs-search { margin-bottom: 18px; }
.docs-search input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--pp-line);
  border-radius: var(--radius-sm);
  background: #fff;
  font: inherit;
  font-size: 13.5px;
  color: var(--pp-ink);
}
.docs-search input::placeholder { color: var(--pp-ink-4); }
.docs-search input:focus {
  outline: none;
  border-color: var(--pp-rouge);
  box-shadow: 0 0 0 3px rgba(236, 133, 178, .18);
}

.docs-group { margin-bottom: 26px; }
.docs-group-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pp-ink-4);
  padding: 0 10px;
  margin-bottom: 8px;
}
.docs-nav a {
  display: block;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--pp-ink-3);
}
.docs-nav a:hover { background: var(--pp-lilac); color: var(--pp-ink); }
/* Active state changes color and background only. Weight stays identical to the
   resting state so the label never changes width when a page becomes active. */
.docs-nav a[aria-current="page"] {
  background: var(--pp-pink);
  color: var(--pp-rouge-deep);
}
.docs-nav .docs-nav-empty {
  padding: 6px 10px;
  font-size: 13px;
  color: var(--pp-ink-4);
  display: none;
}

/* ====== RIGHT: ON THIS PAGE ====== */

.docs-toc-wrap { position: sticky; top: calc(var(--nav-h) + 24px); }
.docs-toc-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pp-ink-4);
  margin-bottom: 10px;
}
.docs-toc ol { list-style: none; margin: 0; padding: 0; }
.docs-toc a {
  display: block;
  padding: 5px 0 5px 12px;
  border-left: 2px solid var(--pp-line);
  font-size: 13px;
  line-height: 1.45;
  color: var(--pp-ink-3);
}
.docs-toc a:hover { color: var(--pp-ink); }
.docs-toc a.is-active {
  border-left-color: var(--pp-rouge-deep);
  color: var(--pp-rouge-deep);
}

/* ====== COPYABLE PROMPT BLOCKS ====== */

.guide-prompt.has-copy { position: relative; }
.guide-prompt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.guide-prompt-head .guide-prompt-label { margin-bottom: 0; }
.doc-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .1);
  color: #f3f2ee;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .01em;
  transition: background .15s ease;
}
.doc-copy:hover { background: rgba(255, 255, 255, .2); }
.doc-copy.is-copied { background: var(--pp-green); color: #fff; }
.doc-copy svg { width: 12px; height: 12px; }

/* A light variant for short inline snippets (endpoints, commands) */
.doc-snippet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0;
  padding: 12px 16px;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--pp-line);
}
.doc-snippet code {
  background: none;
  padding: 0;
  font-size: 13.5px;
  color: var(--pp-ink);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.doc-snippet .doc-copy {
  flex: none;
  background: var(--pp-lilac);
  color: var(--pp-ink-2);
}
.doc-snippet .doc-copy:hover { background: #e0e3f0; }
.doc-snippet .doc-copy.is-copied { background: var(--pp-green); color: #fff; }

/* ====== CALLOUT VARIANTS ====== */

/* Base yellow .guide-callout comes from styles.css. The pink variant flags
   product-boundary notes ("Plainpaper never sends"), the lilac one plain info. */
.guide-callout.cal-pink {
  background: var(--pp-pink);
  box-shadow: inset 0 0 0 1px #f2c4d8;
}
.guide-callout.cal-pink .cal-icon { background: var(--pp-rouge-deep); }
.guide-callout.cal-pink p { color: #6d2647; }
.guide-callout.cal-pink strong { color: #4c1830; }

.guide-callout.cal-lilac {
  background: var(--pp-lilac);
  box-shadow: inset 0 0 0 1px #d8dcec;
}
.guide-callout.cal-lilac .cal-icon { background: var(--pp-navy); }
.guide-callout.cal-lilac p { color: #2c3c66; }
.guide-callout.cal-lilac strong { color: var(--pp-ink); }

/* ====== DOCS HOME TILES ====== */

.docs-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 28px 0 8px;
}
.docs-tile {
  display: block;
  padding: 22px 24px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--pp-line);
  transition: box-shadow .15s ease, transform .15s ease;
}
.docs-tile:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--pp-rouge), var(--shadow-md);
}
.docs-tile h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: -0.015em;
  color: var(--pp-ink);
}
.docs-tile p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--pp-ink-3); }
.docs-tile .docs-tile-kicker {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pp-rouge-deep);
  margin-bottom: 8px;
}
/* Tiles are plain links inside .guide-article — kill the underline treatment */
.guide-article a.docs-tile { border-bottom: 0; color: inherit; }

/* ====== PAGER (prev / next) ====== */

.docs-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--pp-line);
}
.docs-pager a {
  display: block;
  padding: 16px 20px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--pp-line);
  transition: box-shadow .15s ease;
}
.docs-pager a:hover { box-shadow: inset 0 0 0 1px var(--pp-rouge), var(--shadow-sm); }
.docs-pager .pager-label {
  display: block;
  font-size: 12px;
  color: var(--pp-ink-4);
  margin-bottom: 4px;
}
.docs-pager .pager-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--pp-ink);
}
.docs-pager a.pager-next { text-align: right; grid-column: 2; }
.docs-pager a.pager-prev { grid-column: 1; }

/* ====== IN-ARTICLE EXTRAS ====== */

/* Definition-style feature list: term + one-line meaning */
.docs-dl {
  margin: 20px 0;
  display: grid;
  gap: 0;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--pp-line);
  overflow: hidden;
}
.docs-dl > div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--pp-line-2);
  font-size: 14.5px;
}
.docs-dl > div:last-child { border-bottom: 0; }
.docs-dl dt {
  font-weight: 600;
  color: var(--pp-ink);
  margin: 0;
}
.docs-dl dt code { font-size: .88em; }
.docs-dl dd { margin: 0; color: var(--pp-ink-2); }

/* Keyboard/status chips */
.doc-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--pp-lilac);
  color: var(--pp-ink-2);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.doc-chip.is-status-draft { background: #eceae4; color: #5f5c53; }
.doc-chip.is-status-await { background: #fdf0d8; color: #8a6410; }
.doc-chip.is-status-approved { background: var(--pp-green-soft); color: var(--pp-green); }
.doc-chip.is-status-live { background: var(--pp-pink); color: var(--pp-rouge-deep); }

/* ====== MOBILE ====== */

.docs-menu-btn {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--pp-line);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--pp-ink-2);
}
.docs-menu-btn svg { width: 14px; height: 14px; }

@media (max-width: 1120px) {
  .docs-shell { grid-template-columns: 232px minmax(0, 1fr); gap: 40px; }
  .docs-toc-wrap { display: none; }
}

@media (max-width: 880px) {
  .docs-shell { grid-template-columns: 1fr; gap: 0; padding-top: 24px; }
  .docs-menu-btn { display: inline-flex; }
  .docs-side {
    display: none;
    align-self: auto;
    margin-top: 0;
    margin-bottom: 28px;
    border-right: 0;
    padding: 20px;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 1px var(--pp-line);
  }
  .docs-side.is-open { display: block; }
  .docs-side-inner {
    position: static;
    height: auto;
    overflow: visible;
    padding: 0;
  }
  .docs-tiles { grid-template-columns: 1fr; }
  .docs-dl > div { grid-template-columns: 1fr; gap: 4px; }
  .docs-pager { grid-template-columns: 1fr; }
  .docs-pager a.pager-next { grid-column: auto; text-align: left; }
}