/* Developer docs page (/developers, track D3) — VISUAL LAYER ONLY.
   Chrome (nav, footer, buttons) and the brand tokens are inherited from home.css; this
   file styles only what's unique to the docs page: the washi page + white document pane,
   the section sidebar, the article typography, and the code / table / note treatments.
   Every colour is a shared brand token from home.css (--seal / --seal-dark, --paper,
   --text, --muted, --tint, --cream-line, --cream-line-soft) — no page-local palette and
   no near-miss reds. Code is IBM Plex Mono, the house monospace (style.css / tonal.css). */

/* Washi page behind the centered layout; the document sits on a white pane. */
.hs-dev-page { background: var(--paper); }
.hs-dev-layout {
  max-width: 1120px; margin: 0 auto; padding: 44px 24px 76px;
  display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 40px; align-items: start;
}

/* ── Section sidebar ─────────────────────────────────────────────────────── */
.hs-dev-side { position: sticky; top: 90px; }
.hs-dev-side__label {                       /* Lora italic accent — the house eyebrow */
  font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 1rem;
  color: var(--muted); padding: 0 12px 12px;
}
.hs-dev-toc { display: flex; flex-direction: column; gap: 1px; }
.hs-dev-toc a {
  display: block; padding: 7px 12px; border-radius: 8px;
  font-size: .9rem; color: var(--muted); text-decoration: none;
}
.hs-dev-toc a:hover { background: var(--tint); color: var(--text); }
.hs-dev-toc a:focus-visible { outline: 2px solid var(--seal); outline-offset: 1px; }

/* ── White document pane ─────────────────────────────────────────────────── */
.hs-dev-doc {
  background: #fff; border: 1px solid var(--cream-line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(28,24,21,.05), 0 18px 44px -30px rgba(28,24,21,.3);
  overflow: hidden;
}
.hs-dev-doc__inner {
  padding: 46px 50px 54px;
  font-family: 'Public Sans', system-ui, sans-serif; color: var(--text);
  font-size: 15.5px; line-height: 1.7;
}
.hs-dev-doc__inner > *:first-child { margin-top: 0; }

.hs-dev-doc__inner h1, .hs-dev-doc__inner h2, .hs-dev-doc__inner h3, .hs-dev-doc__inner h4 {
  font-family: 'Archivo', system-ui, sans-serif; color: var(--text); line-height: 1.25; scroll-margin-top: 90px;
}
.hs-dev-doc__inner h1 { font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .3em; }
.hs-dev-doc__inner h2 { font-size: 1.45rem; font-weight: 800; margin: 2.3em 0 .6em; padding-top: 1.2em; border-top: 1px solid var(--cream-line-soft); }
.hs-dev-doc__inner h3 { font-size: 1.12rem; font-weight: 700; margin: 1.8em 0 .5em; }
.hs-dev-doc__inner h4 { font-size: .98rem; font-weight: 700; margin: 1.4em 0 .4em; }

.hs-dev-doc__inner p { margin: .75em 0; }
.hs-dev-doc__inner a { color: var(--seal-dark); text-decoration: none; }
.hs-dev-doc__inner a:hover { text-decoration: underline; }
.hs-dev-doc__inner strong { font-weight: 700; color: var(--text); }
.hs-dev-doc__inner ul, .hs-dev-doc__inner ol { margin: .75em 0; padding-left: 1.5em; }
.hs-dev-doc__inner li { margin: .3em 0; }
.hs-dev-doc__inner hr { border: 0; border-top: 1px solid var(--cream-line-soft); margin: 1.6em 0; }

/* Inline code + fenced blocks — IBM Plex Mono on a light washi tint (not a dark
   terminal), to match the app's warm-surface aesthetic. */
.hs-dev-doc__inner code {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-size: .85em;
  background: var(--paper); color: var(--text);
  padding: .12em .4em; border-radius: 5px; border: 1px solid var(--cream-line-soft);
  word-break: break-word;
}
.hs-dev-pre {
  margin: 1.1em 0; padding: 16px 18px;
  background: var(--paper); border: 1px solid var(--cream-line); border-radius: 10px;
  overflow-x: auto;
}
.hs-dev-pre code {
  font-size: .8rem; line-height: 1.65;
  background: none; color: var(--text); border: 0; padding: 0;
  white-space: pre; word-break: normal;
}

/* Note callouts (blockquotes). */
.hs-dev-note {
  margin: 1.1em 0; padding: 12px 16px;
  background: var(--paper); border-left: 3px solid var(--seal); border-radius: 0 8px 8px 0;
  color: var(--muted);
}
.hs-dev-note strong { color: var(--text); }

/* Tables. */
.hs-dev-tablewrap { margin: 1.1em 0; overflow-x: auto; border: 1px solid var(--cream-line); border-radius: 10px; }
.hs-dev-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.hs-dev-table th, .hs-dev-table td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--cream-line-soft); vertical-align: top; }
.hs-dev-table th { background: var(--tint); font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; color: var(--text); white-space: nowrap; }
.hs-dev-table tr:last-child td { border-bottom: 0; }
.hs-dev-table code { background: #fff; }

/* ── Responsive: fold the sidebar above the doc on narrow screens ─────────── */
@media (max-width: 880px) {
  .hs-dev-layout { grid-template-columns: 1fr; gap: 22px; padding: 26px 16px 56px; }
  .hs-dev-side { position: static; }
  .hs-dev-toc { flex-flow: row wrap; gap: 5px; }
  .hs-dev-toc a { background: var(--tint); font-size: .82rem; padding: 6px 11px; }
  .hs-dev-doc__inner { padding: 30px 22px 36px; }
}