/* hostveil docs — layout + long-form prose.
   Loaded AFTER styles.css; inherits all :root custom properties. */

:root {
  --docs-max: 1240px;
  --sidebar-w: 244px;
  --toc-w: 200px;
}

/* ── shell ────────────────────────────────────────────── */

.docs-container {
  width: min(100% - 40px, var(--docs-max));
  margin-inline: auto;
}

.docs-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding: clamp(32px, 5vw, 56px) 0 96px;
}

/* ── sidebar ──────────────────────────────────────────── */

.docs-sidebar {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  padding-right: 8px;
  font-family: var(--font-mono);
}

.docs-nav-group {
  margin-bottom: 22px;
}

.docs-nav-group > p {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

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

.docs-nav-group a {
  display: block;
  padding: 7px 12px;
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-size: 0.86rem;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.docs-nav-group a:hover,
.docs-nav-group a:focus-visible {
  color: var(--text);
  border-left-color: var(--line-strong);
  background: var(--panel);
}

.docs-nav-group a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: var(--panel);
  font-weight: 700;
}

/* ── search ───────────────────────────────────────────── */

.docs-search {
  position: relative;
  margin: 0 0 24px;
}

.docs-search-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--text);
  font: 0.86rem/1.2 var(--font-mono);
  -webkit-appearance: none;
  appearance: none;
}

.docs-search-input::placeholder {
  color: var(--muted);
}

.docs-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 3px 3px 0 var(--shadow-cut);
}

.docs-search-results {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  background: var(--panel-strong);
  box-shadow: 6px 6px 0 var(--shadow-cut);
}

.docs-search-results li {
  margin: 0;
}

.docs-search-results a {
  display: block;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}

.docs-search-results li:last-child a {
  border-bottom: 0;
}

.docs-search-results a:hover,
.docs-search-results li.active a {
  background: var(--panel);
}

.docs-search-results strong {
  display: block;
  color: var(--text);
  font: 700 0.85rem/1.3 var(--font-mono);
}

.docs-search-results span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.docs-search-empty {
  padding: 10px 12px;
  color: var(--muted);
  font: 0.82rem/1.4 var(--font-mono);
}

/* ── mobile sidebar toggle (hidden on desktop) ────────── */

.docs-sidebar-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--text);
  font: 800 0.78rem/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.docs-sidebar-toggle::after {
  content: "▾";
  color: var(--accent);
  transition: transform 150ms ease;
}

.docs-sidebar-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* ── content column ───────────────────────────────────── */

.docs-content {
  min-width: 0;
}

.docs-breadcrumb {
  margin: 0 0 14px;
  color: var(--muted);
  font: 700 0.72rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.docs-breadcrumb a:hover {
  color: var(--accent);
}

/* ── prose typography ─────────────────────────────────── */

.docs-prose {
  max-width: 760px;
}

.docs-prose > h1 {
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin-bottom: 14px;
}

.docs-prose .lead {
  color: var(--paper-muted);
  font-size: 1.14rem;
  margin-bottom: 34px;
}

.docs-prose h2 {
  margin: 46px 0 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: clamp(1.5rem, 3vw, 1.95rem);
  letter-spacing: -0.02em;
  scroll-margin-top: 88px;
}

.docs-prose h3 {
  margin: 30px 0 10px;
  font-family: var(--font-mono);
  font-size: 1.02rem;
  color: var(--paper);
  scroll-margin-top: 88px;
}

/* An h4 is a step inside an h3's argument, not a section of its own — same
   family, no rule above it, and smaller. Without this it takes the browser
   default, which is the body face at less than paragraph size: it reads as
   fine print rather than as a heading. */
.docs-prose h4 {
  margin: 22px 0 8px;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--paper-muted);
  scroll-margin-top: 88px;
}

.docs-prose p {
  margin: 0 0 16px;
  color: var(--paper-muted);
}

.docs-prose strong {
  color: var(--text);
}

.docs-prose a:not(.button) {
  color: var(--accent);
  border-bottom: 1px solid var(--line-strong);
}

.docs-prose a:not(.button):hover {
  border-bottom-color: var(--accent);
}

.docs-prose ul,
.docs-prose ol {
  margin: 0 0 18px;
  padding-left: 22px;
  color: var(--paper-muted);
}

.docs-prose li {
  margin-bottom: 8px;
}

.docs-prose li::marker {
  color: var(--accent);
}

.docs-prose code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--text);
  background: var(--panel-strong);
  border: 1px solid var(--line);
  padding: 0.08rem 0.36rem;
}

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

/* code blocks reuse .command-box / .code-block from styles.css */
.docs-prose .command-box,
.docs-prose .code-block {
  margin: 0 0 22px;
}

.docs-prose .code-block pre {
  white-space: pre;
}

/* ── callout / note boxes ─────────────────────────────── */

.callout {
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  background: var(--panel);
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout .callout-label {
  display: block;
  margin-bottom: 6px;
  color: var(--accent);
  font: 800 0.72rem/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.callout.warn {
  border-left-color: var(--orange);
}

.callout.warn .callout-label {
  color: var(--orange);
}

/* ── tables ───────────────────────────────────────────── */

.docs-table-wrap {
  overflow-x: auto;
  margin: 0 0 22px;
  border: 1px solid var(--line);
}

.docs-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.docs-prose thead th {
  text-align: left;
  padding: 12px 14px;
  background: var(--panel-strong);
  border-bottom: 1px solid var(--line-strong);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.docs-prose tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--paper-muted);
  vertical-align: top;
}

.docs-prose tbody tr:last-child td {
  border-bottom: 0;
}

.docs-prose tbody code {
  white-space: nowrap;
}

/* ── doc-map grid (index page) ────────────────────────── */

.docs-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.docs-cards li {
  margin: 0;
}

.docs-cards a {
  display: block;
  height: 100%;
  padding: 20px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 6px 6px 0 var(--shadow-cut);
  transition: box-shadow 150ms ease, border-color 150ms ease;
}

.docs-cards a:hover {
  border-color: var(--line-strong);
  box-shadow: 3px 3px 0 var(--shadow-cut);
}

.docs-cards strong {
  display: block;
  margin-bottom: 6px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.95rem;
}

.docs-cards span {
  color: var(--muted);
  font-size: 0.9rem;
}

/* ── page footer nav (prev / next-ish) ────────────────── */

.docs-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

/* ── severity chips (reuse .finding look inline) ──────── */

.sev {
  display: inline-block;
  padding: 2px 8px;
  font: 800 0.72rem/1.5 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--line-strong);
  color: var(--muted);
}

.sev.high { color: var(--danger); border-color: var(--danger); }
.sev.medium { color: var(--warning); border-color: var(--warning); }
.sev.low { color: var(--signal); border-color: var(--signal); }

/* ── fix actions (checks page, generated) ─────────────── */

.fix-actions {
  margin: 0 0 30px;
}

.fix-actions dt {
  margin: 22px 0 6px;
  font-family: var(--font-mono);
  font-size: 0.95rem;
}

.fix-actions dt:first-child {
  margin-top: 0;
}

.fix-actions dd {
  margin: 0 0 0 0;
  padding: 0 0 0 18px;
  border-left: 2px solid var(--line);
}

.fix-actions dd ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fix-actions dd li {
  margin: 0 0 14px;
}

.fix-actions dd li:last-child {
  margin-bottom: 0;
}

.fix-actions dd p {
  margin: 0 0 6px;
  color: var(--paper-muted);
}

.fix-kind {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font: 800 0.72rem/1.5 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--line-strong);
  color: var(--signal);
  border-color: var(--signal);
}

.fix-kind.review { color: var(--warning); border-color: var(--warning); }

.fix-benefit {
  color: var(--signal);
}

.fix-warning {
  color: var(--orange);
}

/* Jumped to from the Fix column above: a moment of "you are here" rather
   than landing silently partway down a long per-domain list. */
.fix-actions dt:target {
  scroll-margin-top: 20px;
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}

/* ── roadmap: one line, run out of certainty ─────────────
   A shipped release is a fact, so it gets a solid rule and a filled
   marker. Everything after the last one is progressively less certain —
   "next" is real but unscheduled, "exploring" is a direction, not a
   plan — so the line turns to dashes and the markers hollow out the
   further down the page they sit. "Not planned" is not a fainter version
   of the same line; it is not on it, which is why it renders as its own
   boxed panel below rather than a fifth marker style. */

.docs-prose .rm-track {
  position: relative;
  margin: 0 0 22px;
  padding: 2px 0 2px 30px;
  list-style: none;
}

.docs-prose .rm-track::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--accent);
}

.docs-prose .rm-track.ahead::before {
  width: 0;
  background: none;
  border-left: 2px dashed var(--line-strong);
}

.docs-prose .rm-track .rm-item {
  position: relative;
  margin: 0 0 18px;
  color: var(--paper-muted);
}

.docs-prose .rm-track .rm-item:last-child {
  margin-bottom: 0;
}

.docs-prose .rm-track .rm-item::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 5px;
  width: 11px;
  height: 11px;
  background: var(--accent);
  box-shadow: 3px 3px 0 var(--shadow-cut);
}

.docs-prose .rm-track.ahead .rm-item::before {
  background: var(--bg);
  border: 2px solid var(--accent);
  box-shadow: none;
}

.docs-prose .rm-track.ahead .rm-item.exploring::before {
  left: -28px;
  width: 7px;
  height: 7px;
  border-width: 1px;
  border-color: var(--muted);
  border-style: dotted;
}

.docs-prose .rm-track .rm-version {
  margin-right: 6px;
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--accent);
}

.docs-prose .rm-track strong {
  color: var(--text);
}

/* ── roadmap: off the line entirely ──────────────────────  */

.rm-off-road {
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px dashed var(--line-strong);
}

.docs-prose .rm-off-road ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-prose .rm-off-road li {
  position: relative;
  margin: 0 0 14px;
  padding-left: 24px;
  color: var(--paper-muted);
}

.docs-prose .rm-off-road li:last-child {
  margin-bottom: 0;
}

.docs-prose .rm-off-road li::before {
  content: "×";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-weight: 800;
}

.docs-prose .rm-off-road strong {
  color: var(--text);
}

/* ── responsive ───────────────────────────────────────── */

@media (max-width: 900px) {
  .docs-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .docs-sidebar-toggle {
    display: flex;
  }

  .docs-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 16px;
    border: 1px solid var(--line);
    background: var(--bg-alt);
  }

  .docs-sidebar[hidden] {
    display: none;
  }

  .docs-prose {
    max-width: none;
  }
}

@media (max-width: 620px) {
  .docs-container {
    width: min(100% - 28px, var(--docs-max));
  }

  .docs-cards {
    grid-template-columns: 1fr;
  }
}

/* ── changelog ────────────────────────────────────────── */

/* The changelog page is generated from CHANGELOG.md, so its shape is fixed:
   one h2 per release, an optional intro paragraph, then h3 sections of
   entries. The h2's existing top border already separates one release from
   the next, which is most of what this page needs. */

.docs-prose .changelog-date {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 0.62em;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
  vertical-align: middle;
}

/* An entry is several paragraphs, not a line, so the gap between two of them
   has to be larger than the gap inside one — otherwise a release with six
   entries reads as one wall with bullets in it. */
.docs-prose .changelog-entries > li {
  margin-bottom: 22px;
}

.docs-prose .changelog-entries > li > p {
  margin: 0 0 10px;
}

.docs-prose .changelog-entries > li > p:last-child {
  margin-bottom: 0;
}

/* The first paragraph of an entry opens with the scope in bold — "core:",
   "check:" — and that is the line the eye scans for down a long page. */
.docs-prose .changelog-entries > li > p:first-child strong:first-child {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.94em;
}