@import url("/base.css");

/* Docs share the landing page's world: same stock, same ink, same rules. The
 * difference is mode, not identity. This surface exists to be READ, so it drops
 * the sheet's staging and gives the reader a fixed frame, a measure, and a map. */

.docs {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4.5vw, 52px);
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr) 12.5rem;
  gap: clamp(24px, 3.6vw, 56px);
  align-items: start;
}

/* ---------- left: the map ---------- */

/* The rule runs the full height of the viewport rather than stopping under the
 * last link, where it read as a hanging stub. */
.docs-nav {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 30px 18px 40px 0;
  border-right: var(--hair) solid var(--rule);
}

.docs-nav h2 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  margin: 22px 0 8px;
}

.docs-nav h2:first-of-type {
  margin-top: 0;
}

.docs-nav ul {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: grid;
}

.docs-nav a {
  display: block;
  padding: 5px 0 5px 10px;
  font-size: 0.87rem;
  color: var(--ink-2);
  text-decoration: none;
  border-left: var(--hair) solid var(--rule);
}

.docs-nav a:hover {
  color: var(--work);
  border-left-color: var(--rule-mid);
}

.docs-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
  border-left-color: var(--work);
}

/* ---------- centre: the reading column ---------- */

.docs-main {
  padding: 30px 0 20px;
  min-width: 0;
}

.docs-main h1 {
  font-size: clamp(1.9rem, 3.3vw, 2.6rem);
  letter-spacing: -0.028em;
  margin-bottom: 12px;
}

.docs-lede {
  font-size: 1.06rem;
  color: var(--ink-2);
  max-width: 62ch;
  margin-bottom: 30px;
  padding-bottom: 24px;
  border-bottom: var(--hair) solid var(--rule);
}

.docs-main h2 {
  font-size: 1.32rem;
  margin: 40px 0 12px;
  scroll-margin-top: 20px;
}

.docs-main h3 {
  font-size: 1rem;
  margin: 26px 0 8px;
  scroll-margin-top: 20px;
}

.docs-main p,
.docs-main li {
  max-width: 62ch;
  color: var(--ink-2);
}

.docs-main p {
  margin: 0 0 14px;
}

.docs-main strong {
  color: var(--ink);
  font-weight: 500;
}

.docs-main ul,
.docs-main ol {
  margin: 0 0 16px;
  padding-left: 20px;
}

.docs-main li {
  margin-bottom: 7px;
}

.docs-main code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--stock-band);
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius);
  padding: 0.08em 0.34em;
  color: var(--ink);
}

.docs-main pre {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--stock-band);
  border: var(--hair) solid var(--rule-strong);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink);
}

.docs-main pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
}

.docs-main pre .prompt {
  color: var(--ink-3);
  user-select: none;
}

/* A note is a ruled aside, not a tinted card with a coloured left border. */
.note {
  margin: 0 0 20px;
  padding: 14px 0 14px 16px;
  border-top: var(--hair) solid var(--rule-strong);
  border-bottom: var(--hair) solid var(--rule);
  max-width: 68ch;
}

.note p {
  margin: 0;
  font-size: 0.92rem;
}

.note .field-label {
  display: block;
  margin-bottom: 6px;
}

.docs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin: 0 0 20px;
}

.docs-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  padding: 0 14px 7px 0;
  border-bottom: var(--hair) solid var(--rule-strong);
}

.docs-table td {
  padding: 11px 14px 11px 0;
  border-bottom: var(--hair) solid var(--rule);
  vertical-align: top;
  color: var(--ink-2);
}

.docs-table td:first-child {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink);
  white-space: nowrap;
}

.table-wrap {
  overflow-x: auto;
}

/* A picture of the thing the next paragraph tells you to press keys in.
 * Borrows the landing page's pane classes wholesale (.screen/.pane/.tty/.row),
 * so there is one dashboard drawing on the site and not two that drift. Those
 * live in sections.css, which docs.css does not import, so the handful of rules
 * they need are restated here rather than pulling in the whole landing page. */
.docs-shot {
  margin: 0 0 24px;
  max-width: none;
}

.docs-shot figcaption {
  margin-top: 9px;
  font-size: 0.84rem;
  color: var(--ink-3);
  max-width: 62ch;
}

.docs-shot .screen {
  border: var(--hair) solid var(--rule-strong);
  background: var(--stock);
  overflow: hidden;
}

.docs-shot .screen-chrome {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 7px 11px;
  border-bottom: var(--hair) solid var(--rule);
  background: var(--stock-band);
  font-size: 0.7rem;
  color: var(--ink-3);
}

.docs-shot .frame-static {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
}

.docs-shot .pane {
  min-width: 0;
  padding: 9px 11px 12px;
}

.docs-shot .pane-list {
  border-right: var(--hair) solid var(--rule);
  background: var(--stock-band);
}

/* A gam figure is a split pane, not list-plus-worker: two equal halves, because
 * neither model outranks the other. Must follow .frame-static, which sets the
 * list-plus-worker track sizes at the same specificity. */
.docs-shot .frame-gam {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.docs-shot .pane-gen {
  border-right: var(--hair) solid var(--rule);
}

.docs-shot .pane-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  padding-bottom: 8px;
  margin-bottom: 5px;
  border-bottom: var(--hair) solid var(--rule);
}

.docs-shot .row-group {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  color: var(--ink-3);
  margin: 10px 0 4px;
}

.docs-shot .row-group:first-of-type {
  margin-top: 2px;
}

.docs-shot .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 4px 5px 4px 7px;
  font-size: 0.76rem;
  color: var(--ink-2);
}

.docs-shot .row.is-selected {
  background: var(--stock);
  box-shadow: inset 2px 0 0 var(--work);
  color: var(--ink);
  font-weight: 500;
}

.docs-shot .row-task {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-shot .row .state {
  font-size: 0.6rem;
  flex: none;
}

/* `.docs-main pre` gives code blocks a border and a tinted background, which
 * made the terminal render as a bordered box nested inside the pane box. The
 * pane IS the container here. */
.docs-shot .tty {
  margin: 0;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--ink);
  white-space: pre;
  overflow-x: auto;
}

.docs-shot .tty .dim { color: var(--ink-3); }
.docs-shot .tty .ok { color: var(--st-merged); }
.docs-shot .tty .run { color: var(--st-running); }
.docs-shot .tty .add { color: var(--st-merged); }

@media (max-width: 700px) {
  .docs-shot .frame-static,
  .docs-shot .frame-gam {
    grid-template-columns: minmax(0, 1fr);
  }
  .docs-shot .pane-gen {
    border-right: 0;
    border-bottom: var(--hair) solid var(--rule);
  }
  /* Same reason as the landing page mockup: this is readable text, not texture. */
  .docs-shot .pane-label {
    font-size: 0.7rem;
  }
  .docs-shot .row {
    font-size: 0.85rem;
  }
  .docs-shot .tty {
    font-size: 0.8rem;
  }
  .docs-shot .pane-list {
    border-right: 0;
    border-bottom: var(--hair) solid var(--rule);
  }
}

/* ---------- right: on this page ---------- */

.docs-toc {
  position: sticky;
  top: 0;
  padding: 34px 0 40px;
  font-size: 0.82rem;
}

.docs-toc h2 {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  margin: 0 0 9px;
}

.docs-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.docs-toc a {
  color: var(--ink-3);
  text-decoration: none;
}

.docs-toc a:hover {
  color: var(--work);
}

/* Docs footer: a doc's last screen should still offer a way out. */
.docs-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 34px;
  padding-top: 18px;
  border-top: var(--hair) solid var(--rule);
  font-size: 0.82rem;
  color: var(--ink-3);
}

.docs-foot a {
  color: var(--ink-2);
  text-decoration: none;
}

.docs-foot a:hover {
  color: var(--work);
}

/* ---------- prev / next ---------- */

.docs-pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 52px;
  padding-top: 20px;
  border-top: var(--hair) solid var(--rule-strong);
}

.docs-pager a {
  text-decoration: none;
  font-size: 0.9rem;
  color: var(--ink-2);
  max-width: 46%;
}

.docs-pager a:hover {
  color: var(--work);
}

.docs-pager .field-label {
  display: block;
  margin-bottom: 3px;
}

.docs-pager .next {
  text-align: right;
  margin-left: auto;
}

@media (max-width: 1080px) {
  .docs {
    grid-template-columns: 13rem minmax(0, 1fr);
  }
  .docs-toc {
    display: none;
  }
}

@media (max-width: 760px) {
  .docs {
    grid-template-columns: minmax(0, 1fr);
  }
  /* `height: auto`, not `max-height: none`: the desktop rule sets HEIGHT to
   * 100vh, so a max-height reset is a no-op and the nav stayed pinned to a full
   * viewport. Every docs page opened on a phone showed a table of contents and
   * nothing else, with the title and body pushed below the fold. */
  .docs-nav {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: var(--hair) solid var(--rule);
    padding: 18px 0;
  }
  .docs-nav ul {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}