/* ===========================================================================
 * reference.css - custom API reference renderer
 *
 * 3-column layout that mirrors the ReadMe/Scalar pattern but with our own
 * brand: Inter typography, the Hablame blue→cyan palette (#0099ff → #00d4ff), rounded corners that
 * match the rest of the portal. No third-party CSS, no Shadow DOM, no CDN
 * dependency. Built to drop in alongside portal.css.
 *
 * Columns:
 *   .ref-sidebar (left)  - search + tag-grouped operation list
 *   .ref-article (center)- operation prose, parameters, responses
 *   .ref-panel   (right) - code samples + live try-it
 *
 * Markup hooks are kept simple (BEM-ish: .ref-*) so the JS in
 * `reference.js` can replace innerHTML chunks without selector games.
 * ======================================================================== */

/* ---------- Shell ---------------------------------------------------------- */
body.ref-body {
  background: var(--hb-bg);
  margin: 0;
}

.ref-shell {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr) 36rem;
  gap: 0;
  min-height: calc(100vh - 4.5rem);  /* fill below the sticky navbar */
}

@media (max-width: 1399.98px) {
  .ref-shell { grid-template-columns: 15.5rem minmax(0, 1fr) 32rem; }
}
@media (max-width: 1199.98px) {
  .ref-shell { grid-template-columns: 15.5rem minmax(0, 1fr); }
  .ref-panel { display: none; }
}
@media (max-width: 767.98px) {
  .ref-shell { grid-template-columns: 1fr; }
  .ref-sidebar {
    position: static !important;
    max-height: none !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--hb-border);
  }
}

/* ---------- Sidebar ------------------------------------------------------- *
 * Redesign goals:
 *   - Each module (OpenAPI tag) gets a colored icon tile so a long catalog
 *     is scannable at a glance - the eye targets icons before text.
 *   - Endpoints sit in a tightly-spaced list under their module, with a
 *     subtle vertical rail to communicate the hierarchy without nesting
 *     borders.
 *   - Active state is a full-width tinted pill (no anemic 2px left border).
 *   - Sticky inner wrapper keeps the search + nav glued to the viewport top
 *     while the outer cell background extends to the page bottom.
 * ------------------------------------------------------------------------- */
.ref-sidebar {
  padding: 0;
  border-right: 1px solid var(--hb-border);
  background:
    linear-gradient(180deg, var(--hb-surface) 0%, var(--hb-surface-2) 100%);
  font-size: 0.86rem;
}
.ref-sidebar-inner {
  position: sticky;
  top: 4rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  padding: 1.25rem 0.45rem 2rem 0.45rem;
}
.ref-sidebar-inner::-webkit-scrollbar { width: 6px; }
.ref-sidebar-inner::-webkit-scrollbar-track { background: transparent; }
.ref-sidebar-inner::-webkit-scrollbar-thumb { background: var(--hb-border); border-radius: 999px; }
.ref-sidebar-inner::-webkit-scrollbar-thumb:hover { background: var(--hb-text-muted); }

/* ---------- Sidebar header (brand + search) ----------------------------- */
.ref-sidebar-header {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--hb-border);
}
.ref-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--hb-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ref-sidebar-brand-mark {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
  animation: ref-pulse 2.6s ease-in-out infinite;
}
.ref-sidebar-brand-version {
  font-family: var(--hb-font-mono);
  color: var(--hb-brand);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
}
@keyframes ref-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0.04); }
}

/* ---------- Search -------------------------------------------------------- */
.ref-search { position: relative; }
.ref-search input {
  width: 100%;
  padding: 0.55rem 0.85rem 0.55rem 2.25rem;
  border: 1px solid var(--hb-border);
  border-radius: 0.6rem;
  font-size: 0.86rem;
  font-family: inherit;
  background: var(--hb-surface);
  color: var(--hb-text);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.ref-search input::placeholder { color: var(--hb-text-muted); }
.ref-search input:hover  { border-color: var(--hb-text-muted); }
.ref-search input:focus {
  outline: none;
  border-color: var(--hb-brand);
  box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.14);
  background: var(--hb-surface);
}
.ref-search::before {
  content: '';
  position: absolute;
  left: 0.75rem; top: 50%;
  width: 0.95rem; height: 0.95rem;
  transform: translateY(-50%);
  background: var(--hb-text-muted);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat center / contain;
  pointer-events: none;
}

/* ---------- Nav --------------------------------------------------------- */
.ref-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: 0.35rem;
}

.ref-sidebar a.ref-op {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.32rem 0.4rem 0.32rem 1.85rem;  /* left indent = icon column */
  margin: 0;
  border-radius: 0.4rem;
  text-decoration: none;
  color: var(--hb-text);
  font-size: 0.8rem;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.ref-sidebar a.ref-op:hover { background: var(--hb-surface-2); }
.ref-sidebar a.ref-op.active {
  background: rgba(0, 153, 255, 0.08);
  color: var(--hb-brand);
  font-weight: 600;
}
.ref-sidebar a.ref-op.is-hidden { display: none; }
.ref-sidebar a.ref-op .ref-op-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Method chip - fixed-width filled pill, pushed to the right edge of the
   row so a long catalog reads like:  Crear una URL Corta       POST */
.ref-sidebar a.ref-op .ref-method {
  margin-left: auto;
  min-width: 2.4rem;
  /* Match the base .ref-method centering: symmetric padding, line-height 1,
     no letter-spacing - so the verb sits dead-center inside the pill both
     horizontally and vertically. */
  padding: 0.22rem 0.5rem;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  color: #fff;
}
/* Sidebar uses the same palette as the article - defined in the base
   .ref-method.* rules above. No override needed. */

/* ---------- Method badges (scoped to reference) ------------------------- */
.ref-method {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.85rem;
  /* Equal horizontal padding + line-height: 1 keeps the verb optically
     centered both horizontally and vertically. We dropped letter-spacing
     because trailing tracking creates dead space on the right that pushes
     the glyphs off-center (no `letter-spacing-trim` in CSS yet). */
  padding: 0.22rem 0.5rem;
  border-radius: 0.3rem;
  font-family: var(--hb-font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
}
/* Unified palette across sidebar / op header / coverage rows so a verb
   carries the same color everywhere on the page. */
.ref-method.get     { background: #16a34a; color: #fff; }
.ref-method.post    { background: #0099ff; color: #fff; }
.ref-method.put     { background: #d97706; color: #fff; }
.ref-method.patch   { background: #c026d3; color: #fff; }
.ref-method.delete  { background: #dc2626; color: #fff; }
.ref-method.options { background: #6b7280; color: #fff; }
.ref-method.head    { background: #6b7280; color: #fff; }
/* Dark mode: a hair lighter so the chips don't feel too saturated on the
   navy background. */
[data-bs-theme="dark"] .ref-method.get     { background: #22c55e; }
[data-bs-theme="dark"] .ref-method.post    { background: #33a8ff; }
[data-bs-theme="dark"] .ref-method.put     { background: #f59e0b; }
[data-bs-theme="dark"] .ref-method.patch   { background: #d946ef; }
[data-bs-theme="dark"] .ref-method.delete  { background: #ef4444; }
[data-bs-theme="dark"] .ref-method.options { background: #9ca3af; }
[data-bs-theme="dark"] .ref-method.head    { background: #9ca3af; }

/* ---------- Article ------------------------------------------------------ */
.ref-article {
  padding: 2.5rem 2.5rem 4rem;
  min-width: 0;
  max-width: 56rem;
}

.ref-op-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.ref-op-header h1 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0;
}

.ref-op-path {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  background: var(--hb-surface-2);
  border: 1px solid var(--hb-border);
  border-radius: 0.5rem;
  font-family: var(--hb-font-mono);
  font-size: 0.92rem;
  margin: 0.5rem 0 1.5rem;
}
.ref-op-path .ref-method { font-size: 0.74rem; min-width: 3rem; }
.ref-op-path code {
  font-family: inherit;
  color: var(--hb-text);
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.ref-op-desc {
  font-size: 1rem;
  color: var(--hb-text-muted);
  line-height: 1.6;
  margin-bottom: 2rem;
}
.ref-op-desc p { margin-bottom: 0.85rem; }
.ref-op-desc p:last-child { margin-bottom: 0; }
.ref-op-desc .md-h {
  /* Match the look of `.ref-section h2` so subsections inside the description
     (e.g. ## Límites) sit on the same visual grid as Headers / Respuestas. */
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--hb-text);
  margin: 2rem 0 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--hb-border);
}
.ref-op-desc .md-list {
  margin: 0 0 0.85rem 1.1rem;
  padding: 0;
}
.ref-op-desc .md-list li { margin-bottom: 0.25rem; }
.ref-op-desc code {
  font-family: var(--hb-font-mono);
  font-size: 0.88em;
  padding: 0.12em 0.36em;
  background: var(--hb-surface-2);
  border: 1px solid var(--hb-border);
  border-radius: 0.3rem;
}

.ref-section {
  margin-top: 2.5rem;
}
.ref-section h2 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--hb-border);
}

/* ---------- Parameters / schema tables --------------------------------- */
.ref-params {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.ref-param {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--hb-border);
}
.ref-param:last-child { border-bottom: 0; }
.ref-param-head {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.ref-param-name {
  font-family: var(--hb-font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--hb-text);
}
.ref-param-type {
  font-family: var(--hb-font-mono);
  font-size: 0.78rem;
  color: var(--hb-text-muted);
}
.ref-param-flag {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.08rem 0.4rem;
  border-radius: 0.25rem;
}
.ref-param-flag.required { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }
.ref-param-flag.optional { background: var(--hb-surface-2);     color: var(--hb-text-muted); }
[data-bs-theme="dark"] .ref-param-flag.required { background: rgba(248, 113, 113, 0.18); color: #fca5a5; }

.ref-param-desc {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: var(--hb-text-muted);
  line-height: 1.55;
}
.ref-param-desc code {
  font-family: var(--hb-font-mono);
  font-size: 0.88em;
  padding: 0.1em 0.32em;
  background: var(--hb-surface-2);
  border: 1px solid var(--hb-border);
  border-radius: 0.25rem;
}

/* Nested schema (recursive) */
.ref-schema-children {
  margin-top: 0.6rem;
  margin-left: 0.6rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--hb-border);
}

/* ---------- Responses ----------------------------------------------------- */
.ref-resp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--hb-border);
}
.ref-resp-tab {
  padding: 0.5rem 0.85rem;
  font-family: var(--hb-font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--hb-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.ref-resp-tab:hover { color: var(--hb-text); }
.ref-resp-tab.active {
  color: var(--hb-text);
  border-bottom-color: var(--hb-brand);
}
.ref-resp-tab .ref-status-dot {
  display: inline-block;
  width: 0.45rem; height: 0.45rem;
  border-radius: 50%;
  margin-right: 0.35rem;
  vertical-align: 0.05em;
}
.ref-resp-tab[data-status^="2"] .ref-status-dot { background: #10b981; }
.ref-resp-tab[data-status^="3"] .ref-status-dot { background: #33a8ff; }
.ref-resp-tab[data-status^="4"] .ref-status-dot { background: #d97706; }
.ref-resp-tab[data-status^="5"] .ref-status-dot { background: #dc2626; }

.ref-resp-body { display: none; }
.ref-resp-body.active { display: block; }
.ref-resp-body > p {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  color: var(--hb-text-muted);
  line-height: 1.55;
}

/* ---------- Right panel (code + try-it) -------------------------------- */
.ref-panel {
  /* The panel scrolls with the page (no sticky / no viewport-bound max-height)
     so very long responses or long code samples never get trapped inside a
     bounded container the user can't reach. Long content scrolls naturally.
     `align-self: stretch` (the default) lets the grid cell extend to the
     full row height, so the gradient background paints all the way to the
     bottom of the page even when the panel's cards are short. */
  padding: 2rem 1.5rem 3rem;
  border-left: 1px solid var(--hb-border);
  background: linear-gradient(180deg, var(--hb-surface) 0%, var(--hb-surface-2) 100%);
  font-size: 0.88rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Dark "terminal" card used for code samples + response bodies. */
.ref-panel-card {
  background: #0b1220;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 12px 28px -16px rgba(2, 6, 23, 0.7);
}
.ref-panel-card-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1rem 0.7rem 1.1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.07) 0%, rgba(148, 163, 184, 0.02) 100%);
  color: #e2e8f0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.ref-panel-card-header .ref-card-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  /* Push the title right so the leftmost (red) dot painted by the
     ::before box-shadow at -0.85rem doesn't bump into the card edge. */
  margin-left: 1.25rem;
}
.ref-panel-card-header .ref-card-title::before {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #f59e0b;
  box-shadow:
    0.85rem 0 0 #34d399,
    -0.85rem 0 0 #ef4444;
  margin-right: 1.1rem;
}
.ref-panel-card-header .spacer { flex: 1; }
.ref-panel-card-header .ref-copy {
  font-family: var(--hb-font-sans);
  font-size: 0.72rem;
  padding: 0.25rem 0.6rem;
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 0.35rem;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.ref-panel-card-header .ref-copy:hover {
  background: rgba(148, 163, 184, 0.2);
  color: #fff;
  border-color: rgba(148, 163, 184, 0.28);
}
.ref-panel-card-header .ref-copy.copied {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.35);
}

/* Language tabs */
.ref-lang-tabs {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  background: rgba(2, 6, 23, 0.35);
}
.ref-lang-tabs::-webkit-scrollbar { height: 4px; }
.ref-lang-tabs::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.2); }
.ref-lang-tab {
  padding: 0.6rem 0.95rem;
  font-family: var(--hb-font-sans);
  font-size: 0.76rem;
  font-weight: 500;
  color: rgba(203, 213, 225, 0.55);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.ref-lang-tab:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(148, 163, 184, 0.06);
}
.ref-lang-tab.active {
  color: #fff;
  border-bottom-color: #66bdff;
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.08), transparent);
}

/* Sub-row: client variants within the active language (e.g. PHP → cURL/Guzzle).
   Smaller pill style, sits between the language tabs and the code block. */
.ref-lang-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.5rem 0.75rem 0.55rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  background: rgba(2, 6, 23, 0.4);
}
.ref-lang-variants:empty { display: none; }
.ref-lang-variant {
  appearance: none;
  background: rgba(148, 163, 184, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.14);
  color: rgba(203, 213, 225, 0.7);
  font-family: var(--hb-font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.ref-lang-variant:hover {
  color: #fff;
  background: rgba(148, 163, 184, 0.14);
  border-color: rgba(148, 163, 184, 0.22);
}
.ref-lang-variant.active {
  color: #fff;
  background: rgba(96, 165, 250, 0.18);
  border-color: rgba(96, 165, 250, 0.4);
}

.ref-code {
  margin: 0;
  padding: 1.1rem 1.2rem 1.8rem;
  overflow-x: auto;
  white-space: pre;
  font-family: var(--hb-font-mono);
  font-size: 0.78rem;
  line-height: 1.6;
  color: #e2e8f0;
  tab-size: 2;
}
.ref-code::-webkit-scrollbar { width: 8px; height: 8px; }
.ref-code::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.2); border-radius: 999px; }
.ref-code::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.32); }

/* ---------- Try-It -------------------------------------------------------- */
.ref-try {
  background: var(--hb-surface);
  border: 1px solid var(--hb-border);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 8px 24px -16px rgba(15, 23, 42, 0.15);
}
.ref-try-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--hb-border);
  background: linear-gradient(180deg, rgba(0, 153, 255, 0.06), rgba(0, 153, 255, 0.02));
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--hb-text);
}
.ref-try-head svg { width: 1rem; height: 1rem; color: var(--hb-brand); }

.ref-try-body {
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.ref-field { display: flex; flex-direction: column; gap: 0.35rem; }
.ref-field label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hb-text-muted);
}
.ref-field input,
.ref-field select,
.ref-field textarea {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--hb-border);
  border-radius: 0.45rem;
  font-family: var(--hb-font-mono);
  font-size: 0.82rem;
  background: var(--hb-surface);
  color: var(--hb-text);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.ref-field input:focus,
.ref-field select:focus,
.ref-field textarea:focus {
  outline: none;
  border-color: var(--hb-brand);
  box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.14);
}

.ref-send {
  padding: 0.65rem 1.15rem;
  background: linear-gradient(180deg, #33a8ff, var(--hb-brand));
  color: #fff;
  border: none;
  border-radius: 0.45rem;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 4px 14px -4px var(--hb-glow);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.ref-send:hover {
  background: linear-gradient(180deg, #0099ff, var(--hb-brand-dark));
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 8px 18px -6px var(--hb-glow);
}
.ref-send:disabled {
  background: var(--hb-text-muted);
  cursor: progress;
  opacity: 0.75;
  transform: none;
  box-shadow: none;
}

/* Response output -------------------------------------------------------- */
.ref-resp-out {
  margin-top: 0.4rem;
  border-top: 1px solid var(--hb-border);
  padding-top: 1rem;
  display: none;
}
.ref-resp-out.is-shown { display: block; }
.ref-resp-out-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}
.ref-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  font-family: var(--hb-font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.ref-status-pill.ok   { background: rgba(16, 185, 129, 0.12); color: #047857; border-color: rgba(16, 185, 129, 0.25); }
.ref-status-pill.warn { background: rgba(217, 119, 6, 0.12);  color: #b45309; border-color: rgba(217, 119, 6, 0.28); }
.ref-status-pill.fail { background: rgba(220, 38, 38, 0.12);  color: #b91c1c; border-color: rgba(220, 38, 38, 0.28); }
.ref-resp-latency {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: var(--hb-surface-2);
  color: var(--hb-text-muted);
  font-family: var(--hb-font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  border: 1px solid var(--hb-border);
}

/* ---------- Try-It response tabs (Body / Headers) ----------------------- */
.ref-tryresp-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--hb-border);
}
.ref-tryresp-tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.55rem 0.9rem;
  font-family: var(--hb-font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--hb-text-muted);
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.ref-tryresp-tab:hover {
  color: var(--hb-text);
  background: rgba(0, 153, 255, 0.04);
}
.ref-tryresp-tab.active {
  color: var(--hb-brand);
  border-bottom-color: var(--hb-brand);
}
.ref-tryresp-pane { display: none; }
.ref-tryresp-pane.active { display: block; }

/* (Legacy) Collapsible headers block - kept for backwards compatibility but
   no longer used by the Try-It panel, which uses tabs instead. */
.ref-resp-headers { margin-bottom: 0.65rem; }
.ref-resp-headers summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: 0.4rem;
  background: var(--hb-surface-2);
  border: 1px solid var(--hb-border);
  color: var(--hb-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease, color 0.12s ease;
  list-style: none;
}
.ref-resp-headers summary::-webkit-details-marker { display: none; }
.ref-resp-headers summary::before {
  content: '▸';
  font-size: 0.7rem;
  transition: transform 0.15s ease;
  display: inline-block;
}
.ref-resp-headers[open] summary::before { transform: rotate(90deg); }
.ref-resp-headers summary:hover { background: rgba(0, 153, 255, 0.06); color: var(--hb-text); }
.ref-resp-headers-table-wrap {
  margin-top: 0.55rem;
  background: var(--hb-surface);
  border: 1px solid var(--hb-border);
  border-radius: 0.5rem;
  /* No max-height / no internal scroll: the page itself scrolls so long
     header lists or large response bodies are read in a single linear flow
     instead of getting trapped inside a nested scroll container. */
  overflow: visible;
}
.ref-resp-headers-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--hb-font-mono);
  font-size: 0.74rem;
  line-height: 1.5;
}
.ref-resp-headers-table tr + tr { border-top: 1px solid var(--hb-border); }
.ref-resp-headers-table th,
.ref-resp-headers-table td {
  padding: 0.45rem 0.7rem;
  text-align: left;
  vertical-align: top;
  word-break: break-word;
}
.ref-resp-headers-table th {
  width: 38%;
  color: var(--hb-text-muted);
  font-weight: 600;
  background: var(--hb-surface-2);
  border-right: 1px solid var(--hb-border);
  text-transform: lowercase;
  letter-spacing: 0;
}
.ref-resp-headers-table td {
  color: var(--hb-text);
}

/* Shared section primitives - reused by every metadata section (usage limits,
   scope, billing, …) so they all read with the same typography, the same
   muted note style and the same link treatment. */
.ref-limits-rate {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: var(--hb-text);
}
.ref-note {
  margin-top: 0.7rem;
  color: var(--hb-text-muted);
  font-size: 0.85rem;
  line-height: 1.55;
}
.ref-doc-link {
  margin-top: 0.4rem;
  font-size: 0.85rem;
}

/* Response body: dark "terminal" pre with its own bounded scroll so a
   long JSON payload never blows out the Try-It card. */
.ref-resp-payload {
  position: relative;
  background: #0b1220;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 0.6rem;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.ref-resp-payload-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.85rem;
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.07), rgba(148, 163, 184, 0.02));
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  color: #cbd5e1;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ref-resp-payload-label .ref-copy {
  font-family: var(--hb-font-sans);
  font-size: 0.7rem;
  padding: 0.18rem 0.55rem;
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 0.3rem;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.ref-resp-payload-label .ref-copy:hover {
  background: rgba(148, 163, 184, 0.2);
  color: #fff;
}
.ref-resp-payload-label .ref-copy.copied {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.35);
}
.ref-resp-payload pre {
  margin: 0;
  /* Generous bottom padding so the last JSON line doesn't kiss the rounded
     corner. No max-height - the panel itself isn't viewport-bound anymore,
     so the response always renders in full and the page scrolls naturally. */
  padding: 1rem 1.1rem 1.8rem;
  overflow-x: auto;
  font-family: var(--hb-font-mono);
  font-size: 0.78rem;
  line-height: 1.6;
  color: #e2e8f0;
  white-space: pre;
  tab-size: 2;
}
.ref-resp-payload pre::-webkit-scrollbar { width: 8px; height: 8px; }
.ref-resp-payload pre::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.2); border-radius: 999px; }
.ref-resp-payload pre::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.32); }

/* ---------- Syntax highlight tokens (used by code generators) ---------- */
.ref-code .t-kw,     .ref-resp-payload .t-kw     { color: #f472b6; }
.ref-code .t-str,    .ref-resp-payload .t-str    { color: #86efac; }
.ref-code .t-num,    .ref-resp-payload .t-num    { color: #fcd34d; }
.ref-code .t-cmt,    .ref-resp-payload .t-cmt    { color: #94a3b8; font-style: italic; }
.ref-code .t-key,    .ref-resp-payload .t-key    { color: #7dd3fc; }
.ref-code .t-fn                                { color: #f59e0b; }
.ref-code .t-var                               { color: #cbd5e1; }
.ref-code .t-op,     .ref-resp-payload .t-op     { color: #94a3b8; }
.ref-code .t-prompt                            { color: #34d399; user-select: none; }
.ref-resp-payload .t-bool                         { color: #c4b5fd; }
.ref-resp-payload .t-null                         { color: #fca5a5; }

/* ---------- Loading / errors -------------------------------------------- */
.ref-loading,
.ref-error {
  padding: 3rem 2rem;
  text-align: center;
  color: var(--hb-text-muted);
}
.ref-error { color: #b91c1c; }
.ref-spinner {
  display: inline-block;
  width: 1.5rem; height: 1.5rem;
  border: 2px solid var(--hb-border);
  border-top-color: var(--hb-brand);
  border-radius: 50%;
  animation: ref-spin 0.7s linear infinite;
}
@keyframes ref-spin { to { transform: rotate(360deg); } }

/* ===========================================================================
 * Sidebar nav groups - collapsible modules (one <details> per tag).
 * The whole catalog can grow large; default-collapsed means a new visitor
 * sees a clean list of module names instead of an overwhelming wall of
 * endpoints, and the group containing the active endpoint auto-expands.
 * ======================================================================== */
.ref-nav-group {
  margin-bottom: 0.2rem;
  border-radius: 0.6rem;
}
.ref-nav-group + .ref-nav-group { margin-top: 0.05rem; }

.ref-nav-group-head {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.4rem;
  border-radius: 0.55rem;
  cursor: pointer;
  user-select: none;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--hb-text);
  transition: background 0.12s ease, color 0.12s ease;
}
.ref-nav-group-head::-webkit-details-marker { display: none; }

/* Iconografía del módulo. Solo el glifo - sin tile, sin fondo. El color sigue
   al texto del grupo (muted por defecto, brand cuando el grupo está abierto). */
.ref-nav-group-icon {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--hb-text-muted);
}
.ref-nav-group[open] > .ref-nav-group-head .ref-nav-group-icon,
.ref-nav-group-head:hover .ref-nav-group-icon { color: var(--hb-brand); }

.ref-nav-group-name { flex: 1; }

.ref-nav-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  background: var(--hb-surface-2);
  border: 1px solid var(--hb-border);
  color: var(--hb-text-muted);
  font-family: var(--hb-font-mono);
  font-size: 0.7rem;
  font-weight: 600;
}

/* Chevron at the far right, animated on open. */
.ref-nav-group-chevron {
  width: 0.55rem;
  height: 0.55rem;
  border-right: 1.5px solid var(--hb-text-muted);
  border-bottom: 1.5px solid var(--hb-text-muted);
  transform: rotate(-45deg);
  transition: transform 0.18s ease, border-color 0.12s ease;
  flex-shrink: 0;
  margin-left: 0.15rem;
}
.ref-nav-group[open] > .ref-nav-group-head .ref-nav-group-chevron {
  transform: rotate(45deg);
}
.ref-nav-group-head:hover {
  background: var(--hb-surface-2);
}
.ref-nav-group-head:hover .ref-nav-group-chevron { border-color: var(--hb-text); }

.ref-nav-group-list {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.2rem 0 0.4rem 0;
}

/* ===========================================================================
 * Data dictionary (`.ref-fields`) - flat list of every field in the response
 * schema. Each row shows the dotted path (parents muted, leaf bold), a
 * color-coded type chip, optional REQUIRED flag, and the description below.
 * Replaces the old nested-box renderer which got hard to read past depth 2.
 * ======================================================================== */
/* ===========================================================================
 * Schema - collapsible accordion tree:
 *   - Each object/array-of-objects is a <details> the reader can expand.
 *   - Top-level fields auto-open (immediate sense of structure); deeper
 *     nests start collapsed so the catalog isn't overwhelming.
 *   - Leaves render with a static bullet; expandable nodes get a chevron
 *     that rotates on open.
 *   - Children are indented with a faint vertical rail communicating the
 *     parent-child grouping without nested boxes.
 * ======================================================================== */
.ref-schema {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ref-tree-node {
  background: transparent;
  border: 0;
  padding: 0;
}

.ref-tree-row {
  list-style: none;
  cursor: default;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: 0.4rem;
  transition: background 0.12s ease;
}
details.ref-tree-node > .ref-tree-row { cursor: pointer; }
details.ref-tree-node > .ref-tree-row:hover { background: var(--hb-surface-2); }
.ref-tree-row::-webkit-details-marker { display: none; }

.ref-tree-chevron,
.ref-tree-bullet {
  width: 0.9rem;
  height: 0.9rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hb-text-muted);
}
.ref-tree-chevron::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
}
details.ref-tree-node[open] > .ref-tree-row .ref-tree-chevron::before {
  transform: rotate(45deg);
}
.ref-tree-bullet::before {
  content: '';
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.5;
}

.ref-tree-desc {
  margin: 0.05rem 0 0.4rem 2.1rem;  /* aligned with the field name column */
  font-size: 0.9rem;
  color: var(--hb-text-muted);
  line-height: 1.55;
  max-width: 52rem;
}
.ref-tree-desc p { margin: 0; }
.ref-tree-desc code {
  font-family: var(--hb-font-mono);
  font-size: 0.85em;
  padding: 0.05em 0.35em;
  border-radius: 0.3rem;
  background: var(--hb-surface-2);
  border: 1px solid var(--hb-border);
  color: var(--hb-text);
}

.ref-tree-children {
  margin: 0.05rem 0 0.25rem 0.95rem; /* aligns the inner rail under the chevron */
  padding-left: 0.95rem;
  border-left: 1px solid var(--hb-border);
}
.ref-field-name {
  font-family: var(--hb-font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--hb-text);
  background: none;
  padding: 0;
  letter-spacing: 0;
}
.ref-field-meta {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-shrink: 0;
  font-family: var(--hb-font-mono);
  font-size: 0.82rem;
}

/* Type is plain inline text, not a chip. Color carries the type semantics
   (string=green, number=amber, boolean=violet, object=blue, array=pink). */
.ref-field-type {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--hb-font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--hb-text-muted);
  letter-spacing: 0;
}
.ref-field-type.type-string   { color: #047857; }
.ref-field-type.type-number,
.ref-field-type.type-integer  { color: #b45309; }
.ref-field-type.type-boolean  { color: #6d28d9; }
.ref-field-type.type-object   { color: #007acc; }
.ref-field-type.type-array    { color: #be185d; }
.ref-field-type.type-null     { color: #b91c1c; }

/* Required marker - middot before "required" gives the inline meta
   "boolean · required" the visual rhythm requested in the doc design. */
.ref-field-req {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--hb-font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #b45309;
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
}
.ref-field-req::before {
  content: '·';
  color: var(--hb-text-muted);
}

.ref-field-desc {
  margin-top: 0;
  font-size: 0.95rem;
  color: var(--hb-text-muted);
  line-height: 1.6;
  max-width: 52rem;
}
.ref-field-desc code {
  font-family: var(--hb-font-mono);
  font-size: 0.82rem;
  padding: 0.05rem 0.35rem;
  border-radius: 0.3rem;
  background: var(--hb-surface-2);
  border: 1px solid var(--hb-border);
  color: var(--hb-text);
}

/* Success response header (status pill + inline description) */
.ref-success-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.ref-success-desc { color: var(--hb-text); font-size: 0.95rem; }
.ref-success-desc p { margin: 0; }

/* ===========================================================================
 * Dark mode - variables are re-bound under prefers-color-scheme: dark so the
 * whole component tree shifts without per-rule duplication. The dark JSON
 * code panel (`.ref-panel-card`) is already dark in both modes; the LIGHT
 * surfaces (sidebar, article, fields, headers table) need overrides.
 * ======================================================================== */
:root[data-bs-theme="dark"] {
    --hb-bg:           #050810;
    --hb-surface:      #0d1424;
    --hb-surface-2:    #131c34;
    --hb-text:         #e8edf7;
    --hb-text-muted:   #94a3b8;
    --hb-border:       rgba(255, 255, 255, 0.08);
    --hb-brand:        #66bdff;
    --hb-brand-dark:   #33a8ff;
    --hb-accent:       #66bdff;
    --hb-code-bg:      #050b18;
    --hb-code-text:    #e2e8f0;
    --hb-glow:         rgba(96, 165, 250, 0.35);
    --hb-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
    --hb-shadow-md:    0 6px 18px rgba(0, 0, 0, 0.45);
  }
[data-bs-theme="dark"] /* Method badges - keep their saturated colors but lighten the chip fill */
  .ref-method.get { color: #93c5fd; background: rgba(0, 153, 255, 0.18); }
[data-bs-theme="dark"] .ref-method.post { color: #6ee7b7; background: rgba(16, 185, 129, 0.18); }
[data-bs-theme="dark"] .ref-method.put { color: #fcd34d; background: rgba(217, 119, 6, 0.18); }
[data-bs-theme="dark"] .ref-method.patch { color: #f0abfc; background: rgba(192, 38, 211, 0.18); }
[data-bs-theme="dark"] .ref-method.delete { color: #fca5a5; background: rgba(220, 38, 38, 0.18); }
[data-bs-theme="dark"] /* Status pills */
  .ref-status-pill.ok { background: rgba(16, 185, 129, 0.20); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.35); }
[data-bs-theme="dark"] .ref-status-pill.warn { background: rgba(217, 119, 6, 0.22);  color: #fcd34d; border-color: rgba(217, 119, 6, 0.42); }
[data-bs-theme="dark"] .ref-status-pill.fail { background: rgba(220, 38, 38, 0.22);  color: #fca5a5; border-color: rgba(220, 38, 38, 0.42); }
[data-bs-theme="dark"] /* Field-type chips in dark mode */
  .ref-field-type.type-string { color: #6ee7b7; background: rgba(16, 185, 129, 0.16); border-color: rgba(16, 185, 129, 0.35); }
[data-bs-theme="dark"] .ref-field-type.type-number,
[data-bs-theme="dark"] .ref-field-type.type-integer { color: #fcd34d; background: rgba(217, 119, 6, 0.16);  border-color: rgba(217, 119, 6, 0.35); }
[data-bs-theme="dark"] .ref-field-type.type-boolean { color: #c4b5fd; background: rgba(124, 58, 237, 0.16); border-color: rgba(124, 58, 237, 0.35); }
[data-bs-theme="dark"] .ref-field-type.type-object { color: #93c5fd; background: rgba(0, 153, 255, 0.16);  border-color: rgba(0, 153, 255, 0.35); }
[data-bs-theme="dark"] .ref-field-type.type-array { color: #f0abfc; background: rgba(219, 39, 119, 0.16); border-color: rgba(219, 39, 119, 0.35); }
[data-bs-theme="dark"] .ref-field-type.type-null { color: #fca5a5; background: rgba(220, 38, 38, 0.14);  border-color: rgba(220, 38, 38, 0.32); }
[data-bs-theme="dark"] .ref-field-req {
    color: #fca5a5;
    background: rgba(220, 38, 38, 0.14);
    border-color: rgba(220, 38, 38, 0.32);
  }
[data-bs-theme="dark"] .ref-field-row:hover { background: rgba(96, 165, 250, 0.05); }
[data-bs-theme="dark"] .ref-field-row[data-depth="1"] { box-shadow: inset 2px 0 0 rgba(96, 165, 250, 0.3); }
[data-bs-theme="dark"] .ref-field-row[data-depth="2"] { box-shadow: inset 2px 0 0 rgba(167, 139, 250, 0.35); }
[data-bs-theme="dark"] .ref-field-row[data-depth="3"] { box-shadow: inset 2px 0 0 rgba(240, 171, 252, 0.35); }
[data-bs-theme="dark"] .ref-field-row[data-depth="4"] { box-shadow: inset 2px 0 0 rgba(252, 211, 77, 0.35); }
[data-bs-theme="dark"] .ref-nav-group-head:hover { background: rgba(96, 165, 250, 0.08); }
[data-bs-theme="dark"] /* Try-It response tabs */
  .ref-tryresp-tab:hover { background: rgba(96, 165, 250, 0.06); }
[data-bs-theme="dark"] .ref-tryresp-tab.active { color: var(--hb-brand); border-bottom-color: var(--hb-brand); }

/* ===========================================================================
 * Sidebar density - tighter horizontal padding/indent so long endpoint titles
 * (e.g. "Estadísticas de un enlace") get more room before truncating. Each row
 * also exposes the full title via a `title` tooltip (set in reference.js), and
 * group names show the full module name on hover.
 * ======================================================================== */
.ref-sidebar a.ref-op {
  gap: 0.4rem;
  padding-left: 1.05rem;   /* was 2.5rem - biggest space win for the label */
  padding-right: 0.4rem;
}
.ref-sidebar a.ref-op .ref-method {
  min-width: 2.05rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  margin-left: 0.35rem;    /* small fixed gap instead of pushing fully right */
}
.ref-sidebar a.ref-op .ref-op-label { min-width: 0; }  /* let flex item shrink + ellipsize */

.ref-nav-group-head {
  gap: 0.45rem;
  padding: 0.45rem 0.5rem;
}
.ref-nav-group-icon { width: 1.4rem; height: 1.4rem; }
.ref-nav-group-name {            /* keep module name on one line + ellipsis (full text via title) */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ref-nav-group-count { min-width: 1.2rem; padding-left: 0.3rem; padding-right: 0.3rem; }

/* ===========================================================================
 * Collapsible sidebar - toggle button collapses the menu to an icon rail
 * (Cloud-portal style). State persists in localStorage (`ref-sidebar`) as the
 * class `.is-collapsed` on #ref-shell (wired in reference.js).
 * ======================================================================== */
.ref-sidebar-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid var(--hb-border);
  border-radius: 0.45rem;
  background: var(--hb-surface);
  color: var(--hb-text-muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.ref-sidebar-toggle:hover {
  background: var(--hb-surface-2);
  color: var(--hb-text);
  border-color: var(--hb-text-muted);
}
.ref-sidebar-toggle svg { width: 1rem; height: 1rem; }

.ref-shell.is-collapsed {
  position: relative;                                    /* anchor for the overlay sidebar */
  grid-template-columns: 3.4rem minmax(0, 1fr) 36rem;
}
@media (max-width: 1399.98px) { .ref-shell.is-collapsed { grid-template-columns: 3.4rem minmax(0, 1fr) 32rem; } }
@media (max-width: 1199.98px) { .ref-shell.is-collapsed { grid-template-columns: 3.4rem minmax(0, 1fr); } }

/* The sidebar becomes absolutely positioned below, so it leaves the grid flow.
 * Pin the article + panel to their columns - otherwise grid auto-placement
 * slides the article into the narrow rail column and the center disappears. */
.ref-shell.is-collapsed .ref-article { grid-column: 2; }
.ref-shell.is-collapsed .ref-panel   { grid-column: 3; }

/* Collapsed sidebar = an overlay rail. Hovering expands it OVER the content
 * (no reflow) so you can pick another endpoint; it tucks back when the mouse
 * leaves. The collapsed/expanded state itself is the persisted toggle. */
.ref-shell.is-collapsed .ref-sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3.4rem;
  z-index: 40;
  overflow: hidden;
  transition: width 0.16s ease, box-shadow 0.16s ease;
}
.ref-shell.is-collapsed .ref-sidebar:hover {
  width: 17rem;
  z-index: 60;
  overflow: visible;
  box-shadow: 0 14px 44px rgba(15, 23, 42, 0.22);
}

/* Rail look - applies ONLY while NOT hovering; on hover the full sidebar shows. */
.ref-shell.is-collapsed .ref-sidebar:not(:hover) .ref-sidebar-inner { padding-left: 0.35rem; padding-right: 0.35rem; }
.ref-shell.is-collapsed .ref-sidebar:not(:hover) .ref-sidebar-brand-mark,
.ref-shell.is-collapsed .ref-sidebar:not(:hover) .ref-sidebar-brand-label,
.ref-shell.is-collapsed .ref-sidebar:not(:hover) .ref-search,
.ref-shell.is-collapsed .ref-sidebar:not(:hover) .ref-nav-group-name,
.ref-shell.is-collapsed .ref-sidebar:not(:hover) .ref-nav-group-count,
.ref-shell.is-collapsed .ref-sidebar:not(:hover) .ref-nav-group-chevron,
.ref-shell.is-collapsed .ref-sidebar:not(:hover) .ref-nav-group-list { display: none; }
.ref-shell.is-collapsed .ref-sidebar:not(:hover) .ref-sidebar-header { gap: 0; padding-bottom: 0.55rem; margin-bottom: 0.4rem; }
.ref-shell.is-collapsed .ref-sidebar:not(:hover) .ref-sidebar-brand { justify-content: center; padding: 0; }
.ref-shell.is-collapsed .ref-sidebar:not(:hover) .ref-sidebar-toggle { margin-left: 0; }
.ref-shell.is-collapsed .ref-sidebar:not(:hover) .ref-sidebar-toggle svg { transform: scaleX(-1); }  /* chevrons point right = "expand" */
.ref-shell.is-collapsed .ref-sidebar:not(:hover) .ref-nav-group { margin-bottom: 0.1rem; }
.ref-shell.is-collapsed .ref-sidebar:not(:hover) .ref-nav-group-head { justify-content: center; padding: 0.45rem 0; gap: 0; }
.ref-shell.is-collapsed .ref-sidebar:not(:hover) .ref-nav-group-icon { margin: 0; }