/* ═══════════════════════════════════════════════════════════════════════════
   Mergestro docs — the zine, set for reading.
   Loaded after styles.css, which owns the tokens, faces, frames, masthead,
   buttons, code blocks and footer. This file adds only the docs layout: a side
   index, a reading column, tables, and the copy button docs.js adds.
   ═══════════════════════════════════════════════════════════════════════════ */

.masthead__nav a[aria-current="page"] { color: var(--ink); background-size: 100% 3px; }

.docs {
  display: grid; gap: var(--s4);
  padding-block: var(--s3) var(--s6);
}
.docs > * { min-width: 0; }
@media (min-width: 60rem) {
  .docs { grid-template-columns: 14rem 1fr; gap: var(--s5); }
  .side { position: sticky; top: var(--s3); align-self: start; }
}

/* ── Side index ──────────────────────────────────────────────────────────── */
.side__label {
  font-family: var(--font-hand); font-weight: 700; font-size: var(--t-3);
  color: var(--ink-mute); text-transform: lowercase; letter-spacing: 0.02em;
  margin: 0 0 var(--s1);
}
.side ol { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: 0.15rem; }
.side a {
  display: block; padding: 0.2rem 0 0.2rem 0.75rem;
  font-size: var(--t-4); color: var(--ink-soft); text-decoration: none;
  border-left: 3px solid transparent;
}
.side a:hover { color: var(--ink); border-left-color: var(--teal); }
.side a[aria-current="page"] { color: var(--ink); font-weight: 700; border-left-color: var(--yellow); }
.side .toc a { font-size: var(--t-3); }
/* On a phone the index sits above the page; the per-page list would push the
   content a screen down, so only the page list shows there. */
@media (max-width: 59.99rem) {
  .side { border-bottom: 2px dashed var(--ink-mute); padding-bottom: var(--s2); }
  .side .toc, .side .side__label--toc { display: none; }
  .side ol:not(.toc) { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
  .side ol:not(.toc) a { padding-left: 0; border-left: 0; }
  .side ol:not(.toc) a[aria-current="page"] {
    background: linear-gradient(transparent 60%, var(--yellow) 60%);
  }
}

/* ── Reading column ──────────────────────────────────────────────────────── */
.doc { max-width: 50rem; }
.doc h1 {
  font-size: var(--t-section); font-weight: 800; letter-spacing: -0.035em;
  margin-bottom: var(--s2);
}
.doc .intro { font-size: var(--t-6); color: var(--ink-soft); margin-bottom: var(--s4); }
.doc h2 {
  font-size: var(--t-9); font-weight: 800;
  margin: var(--s5) 0 var(--s2);
  scroll-margin-top: var(--s3);
}
.doc h3 {
  font-size: var(--t-7); font-weight: 700;
  margin: var(--s4) 0 var(--s1);
  scroll-margin-top: var(--s3);
}
.doc p, .doc li { max-width: 68ch; }
.doc ul, .doc ol { padding-left: 1.3rem; margin: 0 0 var(--s3); }
.doc li { margin-bottom: 0.35rem; }
.doc a { color: var(--teal-deep); text-underline-offset: 3px; }
.doc a:hover { color: var(--ink); }
.doc :not(pre) > code {
  background: var(--paper-2); color: var(--ink);
  padding: 0.05em 0.3em; border-radius: 3px;
  overflow-wrap: anywhere;
}
.doc .code { margin-bottom: var(--s3); }
.doc .code__cap {
  font-family: var(--font-hand); font-weight: 600; font-size: var(--t-3);
  color: var(--ink-mute); margin: 0 0 0.35rem;
}

/* A framed block that holds a code sample and its copy button. */
.snippet { position: relative; margin-bottom: var(--s3); }
.snippet > .code { margin: 0; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table { overflow-x: auto; margin-bottom: var(--s3); }
.table table { border-collapse: collapse; width: 100%; font-size: var(--t-3); }
.table th, .table td {
  text-align: left; vertical-align: top;
  padding: 0.55rem 0.75rem 0.55rem 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.14);
}
.table thead th {
  font-family: var(--font-hand); font-weight: 700; color: var(--ink);
  border-bottom: 2.5px solid var(--ink);
}
.table td:first-child { white-space: nowrap; }
.table td code { white-space: nowrap; }

/* ── Callouts in the flow ───────────────────────────────────────────────── */
.tip {
  margin: 0 0 var(--s3); padding: var(--s2) var(--s3);
  background: var(--paper-2); border-left: 4px solid var(--teal);
  border-radius: 3px; max-width: 68ch;
}
.tip--warn { border-left-color: var(--pink); }
.tip p:last-child { margin-bottom: 0; }

/* Next-page link at the bottom of each page. */
.next { margin-top: var(--s5); padding-top: var(--s3); border-top: 2px dashed var(--ink-mute); }
.next a { font-family: var(--font-hand); font-weight: 700; font-size: var(--t-7); color: var(--ink); }

/* ── Copy button (docs.js) ─────────────────────────────────────────────── */
.copy {
  position: absolute; top: 0.5rem; right: 0.5rem; z-index: 3;
  font-family: var(--font-hand); font-weight: 700; font-size: var(--t-1);
  color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); border-radius: 8px;
  padding: 0.15rem 0.6rem; cursor: pointer;
}
.copy:hover { background: var(--yellow); }
.copy[data-done] { background: var(--teal); }