/* ==========================================================================
   Optra — documentation
   A sticky contents rail beside a measured reading column.
   ========================================================================== */

.docs { padding-top: calc(var(--nav-h) + clamp(3rem, 9vh, 6.5rem)); }

/* Reading pages get their own measure rather than the full site width. */
.docs__shell { max-width: 78rem; }

.docs__masthead {
  max-width: 46rem;
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
  border-bottom: 1px solid var(--line-soft);
}

.docs__masthead .meta { margin-bottom: var(--s-4); }
.docs__masthead h1 { margin-bottom: var(--s-5); }
.docs__lede { max-width: 52ch; }

.docs__body {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  padding-top: clamp(2.5rem, 6vh, 4rem);
}

/* --- Contents ----------------------------------------------------------- */

.toc {
  position: sticky;
  top: calc(var(--nav-h) + var(--s-6));
  padding-right: var(--s-4);
}

.toc__title { margin-bottom: var(--s-4); }

.toc li + li { margin-top: 0.125rem; }

.toc a {
  display: block;
  padding: 0.4rem 0 0.4rem 0.875rem;
  border-left: 1px solid var(--line-soft);
  font-size: var(--t-sm);
  color: var(--ink-56);
  transition:
    color var(--d-2) var(--e-soft),
    border-color var(--d-2) var(--e-soft);
}

.toc a:hover { color: var(--ink-88); border-left-color: var(--ink-40); }

.toc a[aria-current="true"] {
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--ink);
}

/* --- Content ------------------------------------------------------------ */

.docs__content { max-width: 44rem; }

.doc-section { padding-bottom: clamp(3rem, 8vh, 5.5rem); }

.doc-section > h2 {
  margin-bottom: var(--s-5);
  /* Anchored jumps must clear the fixed masthead. */
  scroll-margin-top: calc(var(--nav-h) + var(--s-5));
}

.doc-section p { color: var(--ink-88); }
.doc-section p + p { margin-top: var(--s-4); }
.doc-section em { font-style: normal; color: var(--ink); }

.doc-list {
  margin: var(--s-4) 0;
  display: grid;
  gap: var(--s-3);
}

.doc-list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink-88);
}

.doc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-40);
}

/* --- Mode blocks -------------------------------------------------------- */

.mode-doc {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-faint);
}

.mode-doc__head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.mode-doc__glyph {
  width: 34px;
  height: 34px;
  flex: none;
  color: var(--ink);
  filter: drop-shadow(0 4px 12px rgba(128, 20, 68, 0.45));
}

/* --- Tables ------------------------------------------------------------- */

.doc-table-wrap {
  margin: var(--s-5) 0;
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--wash);
  box-shadow: var(--shadow-panel);
}

.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.doc-table th,
.doc-table td {
  padding: 0.75rem var(--s-4);
  text-align: left;
  border-bottom: 1px solid var(--line-faint);
  white-space: nowrap;
}

.doc-table tr:last-child th,
.doc-table tr:last-child td { border-bottom: 0; }

.doc-table thead th {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-56);
  font-weight: 400;
}

.doc-table tbody th {
  font-weight: 500;
  color: var(--ink-88);
}

.doc-table td.num,
.doc-table td .num { font-size: var(--t-xs); }

.doc-table td:last-child {
  color: var(--ink-56);
  white-space: normal;
}

.doc-note { color: var(--ink-56) !important; font-size: var(--t-sm); margin-top: var(--s-4); }

/* --- Steps -------------------------------------------------------------- */

.doc-steps {
  margin: var(--s-5) 0;
  counter-reset: step;
  display: grid;
  gap: var(--s-5);
}

.doc-steps li {
  position: relative;
  counter-increment: step;
  padding-left: 3rem;
}

.doc-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--ink-72);
}

.doc-steps__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin-bottom: 0.35rem;
}

/* --- Callout ------------------------------------------------------------ */

.doc-callout {
  margin-top: var(--s-5);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--wash);
  box-shadow: var(--shadow-panel);
}

.doc-callout p { font-size: var(--t-sm); }
.doc-callout p + p { margin-top: var(--s-2); color: var(--ink-72); }

/* --- Definitions -------------------------------------------------------- */

.doc-defs { margin-top: var(--s-5); }

.doc-defs dt {
  font-weight: 600;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-faint);
}

.doc-defs dd {
  margin-top: 0.25rem;
  padding-bottom: var(--s-4);
  color: var(--ink-72);
  font-size: var(--t-sm);
}

.doc-closing {
  margin-top: var(--s-6) !important;
  color: var(--ink) !important;
}

/* --- Collapse ----------------------------------------------------------- */

@media (max-width: 940px) {
  .docs__body { grid-template-columns: 1fr; gap: var(--s-6); }

  .toc {
    position: static;
    padding: var(--s-4) 0 var(--s-5);
    border-bottom: 1px solid var(--line-soft);
  }

  .toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }

  .toc li + li { margin-top: 0; }

  .toc a {
    padding: 0.4rem 0.875rem;
    border-left: 0;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-pill);
  }

  .toc a[aria-current="true"] { border-color: var(--ink); }
}