/* =============================================================
 * VI Docs — Documentation Styles
 * Only used in the /docs/ pages. Not shipped to projects.
 * ============================================================= */

/* ── Doc Layout ── */
.doc-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}

.doc-sidebar {
  background-color: var(--color-background-inverse);
  color:            var(--color-text-inverse);
  padding:          var(--spacing-component-padding-lg);
  position:         sticky;
  top:              0;
  height:           100vh;
  overflow-y:       auto;
  border-right:     1px solid rgba(255,255,255,0.08);
}

.doc-sidebar__logo {
  font-size:      var(--primitive-font-size-sm);
  font-weight:    var(--primitive-font-weight-bold);
  letter-spacing: var(--primitive-font-letterspacing-wider);
  text-transform: uppercase;
  color:          var(--color-text-inverse);
  text-decoration: none;
  display:        block;
  margin-bottom:  var(--spacing-component-padding-lg);
  padding-bottom: var(--spacing-component-padding-md);
  border-bottom:  1px solid rgba(255,255,255,0.12);
}

.doc-sidebar__section {
  margin-bottom: var(--spacing-component-gap-lg);
}

.doc-sidebar__label {
  font-size:      10px;
  font-weight:    var(--primitive-font-weight-semibold);
  letter-spacing: var(--primitive-font-letterspacing-widest);
  text-transform: uppercase;
  color:          rgba(255,255,255,0.35);
  margin-bottom:  var(--spacing-component-gap-sm);
  padding:        0 var(--spacing-component-padding-sm);
}

.doc-sidebar__nav {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        2px;
}

.doc-sidebar__nav a {
  display:       block;
  padding:       6px var(--spacing-component-padding-sm);
  border-radius: var(--primitive-radius-md);
  font-size:     var(--primitive-font-size-sm);
  color:         rgba(255,255,255,0.65);
  text-decoration: none;
  transition:    background-color 150ms ease, color 150ms ease;
}

.doc-sidebar__nav a:hover,
.doc-sidebar__nav a.is-active {
  background-color: rgba(255,255,255,0.08);
  color:            var(--color-text-inverse);
}

.doc-sidebar__nav a.is-active {
  color:            var(--color-interactive-focus);
}

.doc-main {
  padding:    var(--spacing-layout-section-sm) var(--spacing-layout-section-sm);
  max-width:  860px;
}

/* ── Doc Typography ── */
.doc-page-title {
  font-size:      var(--primitive-font-size-4xl);
  font-weight:    var(--primitive-font-weight-bold);
  letter-spacing: var(--primitive-font-letterspacing-tight);
  color:          var(--color-text-primary);
  line-height:    var(--primitive-font-lineheight-tight);
  margin-bottom:  var(--spacing-component-gap-sm);
}

.doc-page-desc {
  font-size:    var(--primitive-font-size-lg);
  color:        var(--color-text-secondary);
  line-height:  var(--primitive-font-lineheight-relaxed);
  margin-bottom: var(--spacing-layout-stack-lg);
  max-width:    60ch;
}

.doc-section {
  margin-bottom: var(--spacing-layout-section-sm);
}

.doc-section-title {
  font-size:      var(--primitive-font-size-xs);
  font-weight:    var(--primitive-font-weight-semibold);
  letter-spacing: var(--primitive-font-letterspacing-widest);
  text-transform: uppercase;
  color:          var(--color-text-secondary);
  margin-bottom:  var(--spacing-component-gap-md);
  padding-bottom: var(--spacing-component-padding-sm);
  border-bottom:  1px solid var(--color-border-default);
}

.doc-subsection-title {
  font-size:     var(--primitive-font-size-sm);
  font-weight:   var(--primitive-font-weight-semibold);
  color:         var(--color-text-primary);
  margin-bottom: var(--spacing-component-gap-sm);
  margin-top:    var(--spacing-component-gap-lg);
}

/* ── Doc Component: Example Block ── */
.doc-example {
  border:        1px solid var(--color-border-default);
  border-radius: var(--primitive-radius-lg);
  overflow:      hidden;
  margin-bottom: var(--spacing-component-gap-lg);
}

.doc-example__preview {
  padding:          var(--spacing-component-padding-xl);
  background-color: var(--color-background-default);
  display:          flex;
  flex-wrap:        wrap;
  align-items:      flex-start;
  gap:              var(--spacing-component-gap-md);
}

.doc-example__preview--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.doc-example__preview--dark {
  background-color: var(--color-background-inverse);
}

.doc-example__preview--subtle {
  background-color: var(--color-background-subtle);
}

.doc-example__code {
  background-color: #0f1117;
  border-top:       1px solid var(--color-border-default);
  overflow-x:       auto;
}

.doc-example__code-label {
  font-size:      10px;
  font-weight:    var(--primitive-font-weight-semibold);
  letter-spacing: var(--primitive-font-letterspacing-widest);
  text-transform: uppercase;
  color:          rgba(255,255,255,0.3);
  padding:        10px var(--spacing-component-padding-lg) 0;
}

.doc-example__code pre {
  padding:     var(--spacing-component-padding-md) var(--spacing-component-padding-lg);
  margin:      0;
  font-family: var(--primitive-font-family-mono);
  font-size:   13px;
  line-height: 1.6;
  color:       #e2e8f0;
  white-space: pre;
  overflow-x:  auto;
}

/* ── Doc Component: Usage Table ── */
.doc-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--primitive-font-size-sm);
  margin-bottom:   var(--spacing-component-gap-lg);
}

.doc-table th {
  text-align:       left;
  font-size:        10px;
  font-weight:      var(--primitive-font-weight-semibold);
  letter-spacing:   var(--primitive-font-letterspacing-widest);
  text-transform:   uppercase;
  color:            var(--color-text-secondary);
  padding:          var(--spacing-component-padding-sm) var(--spacing-component-padding-md);
  border-bottom:    2px solid var(--color-border-default);
}

.doc-table td {
  padding:       var(--spacing-component-padding-sm) var(--spacing-component-padding-md);
  border-bottom: 1px solid var(--color-border-default);
  vertical-align: top;
  line-height:   1.5;
}

.doc-table td:first-child {
  font-family: var(--primitive-font-family-mono);
  font-size:   12px;
  color:       var(--primitive-color-brand-700);
  white-space: nowrap;
}

.doc-table tr:last-child td {
  border-bottom: none;
}

/* ── Inline code ── */
.doc-code {
  font-family:      var(--primitive-font-family-mono);
  font-size:        12px;
  background-color: var(--color-background-subtle);
  color:            var(--primitive-color-brand-700);
  padding:          1px 5px;
  border-radius:    var(--primitive-radius-sm);
  border:           1px solid var(--color-border-default);
}

/* ── Rule ── */
.doc-rule {
  border:        none;
  border-top:    1px solid var(--color-border-default);
  margin-bottom: var(--spacing-layout-stack-lg);
}