/* Bono DS · doc-page chrome
   Layout-ul paginilor publice din /components — sidebar + main + .ds-block
   demo containers. Tot ce e DS canonical sta in bono-ds.css; aici doar
   cosmetica showcase-ului. */

.ds-block { margin-bottom: 56px; scroll-margin-top: 24px; }
.ds-block-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ds-block-hd h2 {
  font-family: 'Inter', sans-serif;
  font-size: 20px; font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--c-ink);
  margin: 0;
}
.ds-sub {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-fog);
  margin: 24px 0 10px;
}

.demo {
  background: var(--c-white);
  border: 1px solid var(--c-rule-soft);
  border-radius: var(--r-md);
  padding: 24px;
  margin-bottom: 12px;
}
.demo.deep { background: var(--c-bej-1); }
.demo.dark { background: var(--c-dark-grad); border-color: transparent; }
.demo .dsplit { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.demo-cap {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--c-mist);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Placeholder informativ pe paginile noi pana ce sablonul de continut e gata */
.ds-stub {
  background: var(--c-bej-1);
  border: 1px dashed var(--c-rule-soft);
  border-radius: var(--r-md);
  padding: 20px 22px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-fog);
  margin: 0 0 32px;
  max-width: 640px;
}
.ds-stub strong { color: var(--c-ink); font-weight: 600; }

/* WIP badge in sidebar — apare doar pe linkuri marcate cu .is-wip */
.sidebar a.is-wip { padding-right: 8px; }
.sidebar a .wip-badge {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--c-bej-0);
  color: var(--c-fog);
  border: 1px solid var(--c-rule-soft);
  flex-shrink: 0;
  line-height: 1.4;
}
.sidebar a.active .wip-badge {
  background: var(--c-pink-ultra);
  color: var(--c-pink-deep);
  border-color: transparent;
}

/* Banda mobile — breakpoint unic al DS-ului (--bp-desktop: 1024px) */
@media (max-width: 1023.98px) {
  .ds-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .ds-main { padding: 24px 20px 80px; }
}