/* Documentation pages. Loaded after styles.css, which supplies the tokens, the nav and the
   footer; this file is only the two-column reading layout and the prose inside it.

   Long technical prose, read once, often at 2am during an install. So: a wide measure is
   wrong, a sidebar that scrolls away is wrong, and code blocks that wrap silently are worse
   than code blocks that scroll. Everything here is static — no script on these pages. */

.doc-layout{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:48px;
  max-width:var(--max);
  margin:0 auto;
  padding:40px 24px 96px;
  align-items:start;
}

/* The sidebar stays put while the article scrolls: on a 40-page install guide, losing the
   way back to the other documents is the most common complaint about generated docs. */
.doc-nav{position:sticky;top:88px;max-height:calc(100vh - 120px);overflow-y:auto}
.doc-nav-inner{padding-inline-end:12px}
.doc-group+.doc-group{margin-top:26px}
.doc-group-label{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-subtle);margin-bottom:10px;font-weight:600;
}
.doc-nav ul{list-style:none;margin:0;padding:0}
.doc-nav li{margin:0}
.doc-nav a{
  display:block;padding:5px 10px;margin-inline-start:-10px;border-radius:var(--radius-sm);
  font-size:13.5px;line-height:1.45;color:var(--fg-muted);
}
.doc-nav a:hover{color:var(--fg);background:var(--bg-muted)}
.doc-nav a[aria-current=page]{color:var(--accent);background:var(--accent-soft)}

/* 72ch is the measure the prose was written at. */
.doc-body{max-width:72ch;min-width:0;font-size:15.5px;line-height:1.7;color:var(--fg-muted)}
.doc-body>*:first-child{margin-top:0}

.doc-body h1{font-size:32px;line-height:1.2;letter-spacing:-.02em;color:var(--fg);margin:0 0 20px}
.doc-body h2{font-size:21px;line-height:1.3;color:var(--fg);margin:44px 0 14px;padding-top:20px;border-top:1px solid var(--border)}
.doc-body h3{font-size:16.5px;color:var(--fg);margin:30px 0 10px}
.doc-body h4{font-size:15px;color:var(--fg);margin:24px 0 8px}
.doc-body p{margin:0 0 16px}
.doc-body strong{color:var(--fg);font-weight:600}
.doc-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.doc-body a:hover{color:var(--accent-strong)}

/* A path we do not publish — a source file, the OpenAPI spec, a chart. Shown as the text it
   was written as, so the reader can still find it in the repository, but not as a link that
   would 404. */
.doc-body .unlinked{color:var(--fg);border-bottom:1px dotted var(--border-strong)}

.doc-body ul,.doc-body ol{margin:0 0 16px;padding-inline-start:22px}
.doc-body li{margin:0 0 7px}
.doc-body li>ul,.doc-body li>ol{margin-top:7px}

.doc-body code{
  background:var(--bg-muted);border:1px solid var(--border);border-radius:5px;
  padding:1px 5px;color:var(--fg);font-size:.87em;
}
/* Commands and manifests must never be silently rewrapped: a wrapped `kubectl` line that a
   reader copies is a line that does not run. */
.doc-body pre{
  background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;overflow-x:auto;margin:0 0 20px;line-height:1.55;
}
.doc-body pre code{background:none;border:0;padding:0;font-size:13px;white-space:pre}

.doc-body blockquote{
  margin:0 0 20px;padding:2px 0 2px 16px;
  border-inline-start:2px solid var(--accent-line);color:var(--fg-muted);
}
.doc-body hr{border:0;border-top:1px solid var(--border);margin:32px 0}

/* Tables carry the comparisons that matter most in these documents — what is checked and
   what is not, which control contains what. The cells hold sentences, so they wrap: an
   earlier version set `nowrap` and let the table scroll, which silently clipped the right
   half of every row with no cue that anything was missing. */
.doc-body table{width:100%;table-layout:fixed;border-collapse:collapse;margin:0 0 22px;font-size:14px}
.doc-body th,.doc-body td{
  padding:9px 14px;border-bottom:1px solid var(--border);text-align:start;vertical-align:top;
  overflow-wrap:anywhere;
}
.doc-body th{color:var(--fg);font-weight:600;background:var(--bg-elev)}
.doc-body tbody tr:last-child td{border-bottom:0}

.doc-index{list-style:none;padding:0;margin:0 0 26px}
.doc-index li{margin:0 0 8px}
.doc-index a{font-size:15.5px}

/* Anchors kept for links that pointed at the old hand-written page. */
.doc-anchors{height:0;overflow:hidden}

/* The controls mapping has six columns: three narrow framework references like "2-2-3" and
   three that hold sentences. Fixed layout would give the references as much room as the
   prose, so those are pinned narrow and the rest of the width goes where the words are.
   Scoped by column count so it only touches tables shaped like this one. */
.table-wide th:nth-child(2),
.table-wide th:nth-child(3),
.table-wide th:nth-child(4){width:9%}
.table-wide th:nth-child(1){width:14%}

/* The one Arabic sentence on these pages: the documentation is English, but an Arabic
   reader should not have to guess that before reading three paragraphs. */
.ar-note{display:block;margin-top:10px;font-size:14.5px;color:var(--fg-subtle);text-align:start}

@media (max-width:900px){
  .doc-layout{grid-template-columns:1fr;gap:28px;padding:28px 20px 72px}
  /* Stacked, the sidebar becomes a contents list above the article rather than a rail. */
  .doc-nav{position:static;max-height:none;border-bottom:1px solid var(--border);padding-bottom:20px}
  .doc-body h1{font-size:27px}
  /* Six columns of sentences cannot wrap into a phone: every cell becomes one word per
     line and the table is unreadable. Wide tables scroll here instead, which is the one
     case where scrolling beats wrapping — the reader can still see whole sentences. The
     narrower tables keep wrapping, so nothing is clipped without a cue. */
  .table-wide{overflow-x:auto;margin:0 0 22px}
  .table-wide table{table-layout:auto;min-width:760px;margin:0}
}