/* ============================================================
 * documentation.css — Bank ABC Portal API Sandbox
 * Board 3: F-04 Documentation Center 3-Lapisan (Variant B)
 * V1.1 — Sesi 12
 *
 * Layout: sticky search → 3-kolom (sidebar | content | toc)
 * Sidebar tab L1/L2/L3: var(--f03-bg) palette — BUKAN F-03,
 * hanya konsistensi warna. F-03 tidak hadir di halaman ini.
 * Zero hardcoded hex. Semua via var(--*).
 * ============================================================ */

/* ── 1. ROOT ── */
.docs-root {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: var(--space-12);
}

/* ── 2. PAGE HEADER ── */
.docs-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--surface-muted);
  margin-bottom: var(--space-4);
}
.docs-page-header__meta { display: flex; flex-direction: column; gap: 2px; }
.docs-page-header__eyebrow { font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.07em; }
.docs-page-header__title { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--text-primary); line-height: var(--leading-tight); margin: 0; }
.docs-page-header__subtitle { font-size: var(--text-sm); color: var(--text-secondary); margin: var(--space-1) 0 0; }

/* ── 3. GLOBAL SEARCH BAR ── */
.docs-search-bar {
  position: sticky;
  top: 56px; /* below top-app-bar */
  z-index: 2; /* must stay below top-app-bar (z=10) so avatar dropdown isn't clipped */
  background-color: var(--surface-base, var(--surface-card));
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--surface-muted);
  margin-bottom: var(--space-5);
}
.docs-search-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-4);
  background-color: var(--surface-card);
  border: 1px solid var(--surface-muted);
  border-radius: var(--radius-full);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.docs-search-bar__inner:focus-within {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-subtle);
}
.docs-search-bar__icon { color: var(--text-tertiary); flex-shrink: 0; width: 15px; height: 15px; }
.docs-search-bar__input { flex: 1; border: none; outline: none; background: transparent; font-size: var(--text-sm); color: var(--text-primary); font-family: var(--font-sans); }
.docs-search-bar__input::placeholder { color: var(--text-tertiary); }
.docs-search-bar__scope {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  flex-shrink: 0;
  padding: 0 var(--space-1);
}

/* ── 4. 3-COLUMN LAYOUT ── */
.docs-layout {
  display: grid;
  grid-template-columns: 220px 1fr 200px;
  gap: var(--space-6);
  align-items: flex-start;
}

/* ── 5. SIDEBAR ── */
.docs-sidebar {
  position: sticky;
  top: 120px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  background-color: var(--surface-card);
  border: 1px solid var(--surface-muted);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* Layer tab switcher — orange palette (BUKAN F-03) */
.docs-layer-tabs {
  display: flex;
  background-color: var(--f03-bg);
  border-bottom: 1px solid var(--f03-border);
  flex-shrink: 0;
}
.docs-layer-tab {
  flex: 1;
  padding: var(--space-2) var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--f03-text);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background-color var(--transition-fast), opacity var(--transition-fast);
  opacity: 0.6;
  text-align: center;
  line-height: 1.3;
}
.docs-layer-tab:hover { opacity: 0.9; }
.docs-layer-tab--active {
  opacity: 1;
  background-color: rgba(255,255,255,0.4);
  border-bottom-color: var(--f03-text);
}
.docs-layer-tab:focus-visible { outline: 2px solid var(--f03-text); outline-offset: -2px; }

/* Tree navigation */
.docs-tree {
  padding: var(--space-2) 0;
  overflow-y: auto;
  flex: 1;
}

.docs-tree-section { border-bottom: 1px solid var(--surface-muted); padding-bottom: var(--space-1); }
.docs-tree-section:last-child { border-bottom: none; }

.docs-tree-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.docs-tree-toggle:hover { background-color: var(--surface-subtle); color: var(--text-secondary); }

.docs-tree-chevron { transition: transform var(--transition-fast); flex-shrink: 0; margin-left: auto; }
.docs-tree-chevron--closed { transform: rotate(-90deg); }

.docs-tree-children { list-style: none; margin: 0; padding: var(--space-2) 0; }

/* gap between sector rows */
.docs-tree-children > li { margin-bottom: 2px; }
.docs-tree-children > li:last-child { margin-bottom: 0; }

.docs-tree-sector-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  transition: background-color var(--transition-fast);
}
.docs-tree-sector-toggle:hover { background-color: var(--surface-subtle); }

.docs-tree-sector-chevron { transition: transform var(--transition-fast); flex-shrink: 0; margin-left: auto; }
.docs-tree-sector-chevron--closed { transform: rotate(-90deg); }

.docs-tree-items { list-style: none; margin: 0; padding: 0; }

.docs-tree-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px var(--space-4) 5px calc(var(--space-4) + 12px);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  position: relative;
}
.docs-tree-item:hover { background-color: var(--surface-subtle); color: var(--text-primary); }
.docs-tree-item--active {
  background-color: var(--brand-primary-subtle);
  color: var(--brand-primary);
  font-weight: var(--font-semibold);
}
.docs-tree-item--active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background-color: var(--brand-primary);
}
.docs-tree-item:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }

/* ── 6. CONTENT AREA ── */
.docs-content { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }

.docs-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.docs-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.docs-breadcrumb__sep { color: var(--text-tertiary); }
.docs-breadcrumb__current { color: var(--text-primary); font-weight: var(--font-semibold); }

.docs-version-select {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background-color: var(--surface-subtle);
  border: 1px solid var(--surface-muted);
  border-radius: var(--radius-md);
  padding: 3px var(--space-2);
  cursor: pointer;
  font-family: var(--font-sans);
}

/* Layer panels */
.docs-layer-panel { display: flex; flex-direction: column; gap: var(--space-5); }
.docs-layer-panel[hidden] { display: none; }

/* Layer badge */
.docs-layer-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-1);
}
.docs-layer-badge--l1 { background-color: var(--status-success-bg); color: var(--status-success); }
.docs-layer-badge--l2 { background-color: var(--status-info-bg); color: var(--status-info); }
.docs-layer-badge--l3 { background-color: var(--status-warning-bg); color: var(--status-warning); }

/* Content card */
.docs-card {
  background-color: var(--surface-card);
  border: 1px solid var(--surface-muted);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.docs-card__header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--surface-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.docs-card__title { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0; }
.docs-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }

/* Prose content */
.docs-prose { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); }
.docs-prose p { margin: 0 0 var(--space-3); }
.docs-prose p:last-child { margin-bottom: 0; }
.docs-prose strong { color: var(--text-primary); font-weight: var(--font-semibold); }

/* Actor list */
.docs-actor-list { display: flex; flex-direction: column; gap: var(--space-2); }
.docs-actor-row { display: flex; align-items: flex-start; gap: var(--space-3); }
.docs-actor-badge { font-size: var(--text-xs); font-weight: var(--font-semibold); font-family: var(--font-mono); padding: 2px var(--space-2); border-radius: var(--radius-md); background-color: var(--surface-subtle); color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; margin-top: 2px; }
.docs-actor-desc { font-size: var(--text-xs); color: var(--text-secondary); line-height: var(--leading-relaxed); }

/* Flow steps */
.docs-flow { display: flex; flex-direction: column; gap: var(--space-2); }
.docs-flow-step { display: flex; align-items: flex-start; gap: var(--space-3); }
.docs-flow-step__num { width: 20px; height: 20px; border-radius: var(--radius-full); background-color: var(--brand-primary); color: white; font-size: 10px; font-weight: var(--font-bold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.docs-flow-step__text { font-size: var(--text-xs); color: var(--text-secondary); line-height: var(--leading-relaxed); }
.docs-flow-step__text strong { color: var(--text-primary); }

/* Next layer CTA */
.docs-next-layer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background-color: var(--surface-subtle);
  border: 1px solid var(--surface-muted);
  border-radius: var(--radius-lg);
  gap: var(--space-3);
}
.docs-next-layer__label { font-size: var(--text-xs); color: var(--text-tertiary); display: block; }
.docs-next-layer__title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); }

/* Sequence diagram */
.docs-sequence {
  background-color: var(--surface-subtle);
  border: 1px solid var(--surface-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--text-secondary);
  overflow-x: auto;
  line-height: 1.8;
}
.docs-sequence__actor { color: var(--brand-primary); font-weight: var(--font-semibold); }
.docs-sequence__arrow { color: var(--text-tertiary); }
.docs-sequence__label { color: var(--text-primary); }
.docs-sequence__note { color: var(--text-tertiary); font-style: italic; }

/* Parameter table */
.docs-param-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.docs-param-table thead th { background-color: var(--surface-subtle); padding: var(--space-2) var(--space-3); text-align: left; font-weight: var(--font-semibold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--surface-muted); white-space: nowrap; }
.docs-param-table tbody tr { border-bottom: 1px solid var(--surface-muted); transition: background-color var(--transition-fast); }
.docs-param-table tbody tr:last-child { border-bottom: none; }
.docs-param-table tbody tr:hover { background-color: var(--surface-subtle); }
.docs-param-table tbody td { padding: var(--space-2) var(--space-3); vertical-align: top; color: var(--text-primary); }
.docs-param-name { font-family: var(--font-mono); color: var(--brand-primary); font-weight: var(--font-semibold); }
.docs-param-type { font-family: var(--font-mono); color: var(--text-tertiary); }
.docs-param-required { display: inline-block; padding: 1px 5px; border-radius: var(--radius-sm); font-size: 9px; font-weight: var(--font-bold); text-transform: uppercase; }
.docs-param-required--yes { background-color: var(--status-danger-bg); color: var(--status-danger); }
.docs-param-required--no  { background-color: var(--surface-muted); color: var(--text-tertiary); }
.docs-param-desc { color: var(--text-secondary); }

/* Code snippet block */
.docs-code-block { background-color: var(--surface-card); border: 1px solid var(--surface-muted); border-radius: var(--radius-lg); overflow: hidden; }
.docs-code-tabs { display: flex; border-bottom: 1px solid var(--surface-muted); background-color: var(--surface-subtle); }
.docs-code-tab { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); font-weight: var(--font-medium); font-family: var(--font-mono); color: var(--text-tertiary); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast); margin-bottom: -1px; }
.docs-code-tab:hover { color: var(--text-secondary); }
.docs-code-tab--active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); font-weight: var(--font-semibold); }
.docs-code-panel { display: none; position: relative; }
.docs-code-panel--active { display: block; }
.docs-code-panel pre { margin: 0; padding: var(--space-4); font-size: var(--text-xs); font-family: var(--font-mono); color: var(--text-primary); line-height: 1.7; overflow-x: auto; background: none; white-space: pre; }
.docs-code-copy {
  position: absolute; top: var(--space-2); right: var(--space-3);
  padding: 3px var(--space-2); font-size: var(--text-xs); font-family: var(--font-sans);
  color: var(--text-tertiary); background-color: var(--surface-subtle);
  border: 1px solid var(--surface-muted); border-radius: var(--radius-md);
  cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast);
}
.docs-code-copy:hover { background-color: var(--surface-muted); color: var(--text-primary); }

/* Error code table */
.docs-error-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.docs-error-table thead th { background-color: var(--surface-subtle); padding: var(--space-2) var(--space-3); text-align: left; font-weight: var(--font-semibold); color: var(--text-secondary); border-bottom: 1px solid var(--surface-muted); }
.docs-error-table tbody tr { border-bottom: 1px solid var(--surface-muted); }
.docs-error-table tbody tr:last-child { border-bottom: none; }
.docs-error-table tbody td { padding: var(--space-2) var(--space-3); vertical-align: top; }
.docs-error-code { font-family: var(--font-mono); font-weight: var(--font-semibold); }
.docs-error-code--ok      { color: var(--status-success); }
.docs-error-code--warn    { color: var(--status-warning); }
.docs-error-code--err     { color: var(--status-danger); }

/* ── 7. RIGHT TOC ── */
.docs-toc {
  position: sticky;
  top: 120px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.docs-toc-section {
  background-color: var(--surface-card);
  border: 1px solid var(--surface-muted);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.docs-toc-section__header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--surface-muted);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.docs-toc-list { list-style: none; margin: 0; padding: var(--space-2) 0; }
.docs-toc-item a {
  display: block;
  padding: 4px var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast), background-color var(--transition-fast);
  border-left: 2px solid transparent;
}
.docs-toc-item a:hover { color: var(--brand-primary); background-color: var(--brand-primary-subtle); }
.docs-toc-item--active a { color: var(--brand-primary); border-left-color: var(--brand-primary); font-weight: var(--font-semibold); }

/* Action box */
.docs-action-box {
  background-color: var(--surface-card);
  border: 1px solid var(--surface-muted);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.docs-action-box__header { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--surface-muted); font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
.docs-action-box__body { padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.docs-action-link { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-link); text-decoration: none; padding: 4px 0; transition: opacity var(--transition-fast); }
.docs-action-link:hover { opacity: 0.75; }
.docs-action-link svg { flex-shrink: 0; }

/* Feedback box */
.docs-feedback {
  background-color: var(--surface-card);
  border: 1px solid var(--surface-muted);
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  text-align: center;
}
.docs-feedback__label { font-size: var(--text-xs); color: var(--text-secondary); }
.docs-feedback__btns { display: flex; gap: var(--space-2); }
.docs-feedback-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--surface-muted); border-radius: var(--radius-md); cursor: pointer; font-size: 14px; transition: background-color var(--transition-fast), border-color var(--transition-fast); }
.docs-feedback-btn:hover { background-color: var(--surface-subtle); border-color: var(--text-tertiary); }
.docs-feedback-btn--active { background-color: var(--brand-primary-subtle); border-color: var(--brand-primary); }
.docs-feedback__thankyou { font-size: var(--text-xs); color: var(--status-success); display: none; }

/* ── 8. RELATED ── */
.docs-related { font-size: var(--text-xs); color: var(--text-tertiary); }
.docs-related__title { font-weight: var(--font-semibold); color: var(--text-secondary); margin-bottom: var(--space-1); display: block; }
.docs-related__list { display: flex; flex-direction: column; gap: 3px; }
.docs-related__item { color: var(--text-link); text-decoration: none; padding: 2px 0; }
.docs-related__item:hover { text-decoration: underline; }

/* ── 8b. SECTOR TREE — improved visual hierarchy ── */

/* Sector toggle: icon + name + count + chevron */
.docs-tree-sector-toggle {
  padding: var(--space-2) var(--space-3) !important;
  gap: var(--space-2) !important;
  border-radius: 0;
}
.docs-tree-sector-toggle[aria-expanded="true"] {
  background-color: var(--surface-subtle);
  color: var(--text-primary);
}

.docs-tree-sector-icon {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}
.docs-tree-sector-icon--healthcare { background: #fee2e2; color: #dc2626; }
.docs-tree-sector-icon--retail     { background: #fef3c7; color: #d97706; }
.docs-tree-sector-icon--fintech    { background: var(--brand-primary-subtle); color: var(--brand-primary); }
.docs-tree-sector-icon--education  { background: #dcfce7; color: #16a34a; }
.docs-tree-sector-icon--utilities  { background: #f1f5f9; color: #64748b; }

.docs-tree-sector-name {
  flex: 1;
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}
.docs-tree-sector-toggle:hover .docs-tree-sector-name,
.docs-tree-sector-toggle[aria-expanded="true"] .docs-tree-sector-name {
  color: var(--text-primary);
}

.docs-tree-sector-count {
  font-size: 9px;
  font-weight: var(--font-bold);
  background: var(--surface-muted);
  color: var(--text-tertiary);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

/* Items in expanded sector — dot indicator */
.docs-tree-items .docs-tree-item {
  padding-left: calc(var(--space-3) + 20px + var(--space-2) + 4px);
}
.docs-tree-items .docs-tree-item::before {
  content: '';
  position: absolute;
  left: calc(var(--space-3) + 20px + var(--space-2));
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-tertiary);
  transition: background var(--transition-fast);
}
.docs-tree-items .docs-tree-item:hover::before  { background: var(--brand-primary); }
.docs-tree-items .docs-tree-item--active::before { background: var(--brand-primary); }

/* Lintas Sektor items — subtle pill style */
#tree-lintas .docs-tree-item {
  padding-left: var(--space-4);
}
#tree-lintas .docs-tree-item::before { display: none; }

/* ── 9. RESPONSIVE ── */
@media (max-width: 1199px) {
  .docs-layout { grid-template-columns: 200px 1fr; }
  .docs-toc { display: none; }
}
@media (max-width: 767px) {
  .docs-layout { grid-template-columns: 1fr; }
  .docs-sidebar { position: static; max-height: 280px; }
  .docs-search-bar { top: 56px; }
}  /* ── Auth section in L2 ── */
  .docs-auth-section {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-default, var(--surface-muted));
  }
  .docs-auth-section__title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .docs-auth-section__subtitle {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin: 0 0 var(--space-4);
    line-height: 1.6;
  }
  .docs-auth-clarify {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--status-info-bg, #EFF6FF);
    border: 1px solid var(--status-info-border, #BAE6FD);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    font-size: var(--text-xs);
    color: var(--text-primary);
    line-height: 1.6;
  }
  .docs-auth-clarify svg { flex-shrink: 0; margin-top: 1px; color: var(--status-info, #0284C7); }
  .docs-auth-flow {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
  }
  .docs-auth-flow-step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-base, #fff);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    line-height: 1.6;
  }
  .docs-auth-flow-step__num {
    flex-shrink: 0;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--brand-primary, #003D79);
    color: #fff;
    font-size: 10px; font-weight: var(--font-bold);
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
  }
  .docs-auth-flow-step__body { flex: 1; }
  .docs-auth-flow-step__label { font-weight: var(--font-semibold); color: var(--text-primary); margin: 0 0 2px; }
  .docs-auth-flow-step__desc { color: var(--text-secondary); margin: 0; }
  .docs-auth-flow-step__code {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--surface-subtle);
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--text-primary);
    margin-top: 4px;
  }
  .docs-auth-spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }
  .docs-auth-spec-cell {
    padding: var(--space-3) var(--space-4);
    background: var(--surface-subtle);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
  }
  .docs-auth-spec-label {
    font-size: 10px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--font-medium);
    display: block;
    margin-bottom: 3px;
  }
  .docs-auth-spec-value {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    font-family: var(--font-mono);
  }
  .docs-auth-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--brand-primary-subtle, #E3F0FF);
    border: 1px solid var(--brand-primary-border, #B3CDEF);
    border-radius: var(--radius-lg);
    gap: var(--space-3);
    flex-wrap: wrap;
  }
  .docs-auth-cta__text { font-size: var(--text-xs); color: var(--text-secondary); margin: 0; }
  .docs-auth-cta__text strong { color: var(--text-primary); }

  /* ── Standalone auth page (when topic=auth clicked) ── */
  .docs-auth-page { display: none; }
  .docs-auth-page--active { display: block; }
  .docs-auth-page-section {
    margin-bottom: var(--space-5);
  }