/* admin-view-docs.css — layout for the Guide view only.
 * Zero literals: tokens/classes only. Components come from
 * admin-components.css (.input-icon search, .card panes) and typography
 * inherits admin-base.css. Loads after admin-views.css, so these rules
 * reskin the legacy .docs-* selectors without touching that file.
 * ISC-81: the view stays reachable via ?view=docs, the "g d" chord,
 * the "?" header button and data-docs-topic help links. */

/* Two-pane layout: sticky index rail + content card. The narrow-column
 * collapse lives in admin-views.css (@media 900px) and still applies. */
.docs-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.docs-side {
  position: sticky;
  top: var(--sp-4);
  display: grid;
  gap: var(--sp-4);
}

/* Search field: shared .input-icon component, full rail width. */
.docs-search { width: 100%; }

/* Index card (.card.card-sm): the two groups stack with a wider gap. */
.docs-index { gap: var(--sp-5); }
.docs-index-group { display: grid; gap: var(--sp-1); align-content: start; }
.docs-index-group a {
  display: block;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--accent-deep);
  font-size: var(--fs-small);
}
.docs-index-group a:hover { background: var(--tint); text-decoration: none; }
.docs-search-empty { margin: 0; color: var(--ink-faint); font-size: var(--fs-small); }

/* Content card: prose spacing only — sizes/weights come from the base ramp. */
.docs-content { display: grid; gap: var(--sp-3); align-content: start; }
.docs-content h1 { font-size: var(--fs-h1); margin: 0 0 var(--sp-1); }
.docs-content h2 {
  font-size: var(--fs-h2);
  margin: var(--sp-5) 0 var(--sp-2);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--tint-2);
}
.docs-content h2:first-of-type { border-top: 0; padding-top: 0; }
.docs-content h3 { font-size: var(--fs-h3); margin: var(--sp-3) 0 var(--sp-1); }
.docs-content p,
.docs-content ol,
.docs-content ul { margin: 0; font-size: var(--fs-item); }
.docs-content ol,
.docs-content ul { padding-left: var(--sp-6); }
.docs-content li { margin: var(--sp-1) 0; }
.docs-content table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.docs-content th,
.docs-content td { border: 1px solid var(--border); padding: var(--sp-2) var(--sp-3); text-align: left; }
.docs-content th { background: var(--surface-2); }
.docs-content code {
  background: var(--surface-2);
  border: 1px solid var(--tint-2);
  border-radius: var(--r-xs);
  padding: 0 var(--sp-1);
  font-size: var(--fs-small);
}
.docs-content a { color: var(--accent-deep); }
.docs-topic-target { scroll-margin-top: var(--sp-5); }

/* One guide topic in a dialog — used where the full Guide view is not
   available (the portfolio-viewer role). The topic's own h2 is the dialog
   title, so it is not repeated in the body. */
.topic-help-dialog { width: min(760px, 94vw); max-width: min(760px, 94vw); max-height: 86vh; overflow: auto; }
.topic-help-dialog .dialog-head h2 { margin: 2px 0 0; }
.topic-help-dialog .docs-content > h2:first-child { display: none; }