/* Website shell for the public plugin documentation. The topbar and segmented controls
   mirror oxrecorder-website/css/tokens.css (keep in sync); they are scoped to
   #publicDocsHeader so the portal stylesheet's own .topbar rules cannot leak in.
   Colours come from docs-theme.css. */
#publicDocsHeader { position: sticky; top: 0; z-index: 50; }
/* Neutralise the portal's generic .topbar / button rules inside the shared topbar. */
#publicDocsHeader .topbar { display: block; padding: 0; min-height: 0; flex-wrap: nowrap; }
#publicDocsHeader .topbar button { min-height: 0; box-shadow: none; transform: none; gap: 0; }
#publicDocsHeader .seg{
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--surface-card);
}
#publicDocsHeader .seg__btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 28px; padding: 0 8px;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--muted);
  font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer;
}
#publicDocsHeader .seg__btn:hover{ color: var(--ink); }
#publicDocsHeader .seg__btn[aria-pressed="true"]{ background: var(--surface-strong); color: var(--ink); }
#publicDocsHeader .seg__btn svg{ width: 15px; height: 15px; display: block; }
#publicDocsHeader .topbar{
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar-h);
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--hairline);
}
#publicDocsHeader .topbar__inner{ display: flex; align-items: center; gap: 24px; height: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
#publicDocsHeader .topbar__brand{ display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
#publicDocsHeader .topbar__brand .ox-logo{ height: 30px; }
#publicDocsHeader .topbar__section{ padding-left: 12px; border-left: 1px solid var(--hairline-strong); font-size: 14px; font-weight: 500; color: var(--muted); }
#publicDocsHeader .topbar__nav{ display: flex; align-items: center; gap: 4px; }
#publicDocsHeader .topbar__nav a{ padding: 6px 10px; border-radius: var(--r-md); font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--body); text-decoration: none; }
#publicDocsHeader .topbar__nav a:hover{ color: var(--ink); background: var(--surface-hover); }
#publicDocsHeader .topbar__nav a[aria-current="page"]{ color: var(--ink); }
#publicDocsHeader .topbar__tools{ display: flex; align-items: center; gap: 8px; margin-left: auto; }
#publicDocsHeader .topbar__menu{ display: none; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface-card); color: var(--ink); cursor: pointer; }
#publicDocsHeader .topbar__menu svg{ width: 18px; height: 18px; }
@media (max-width: 767px) {#publicDocsHeader .topbar__inner{ gap: 12px; }#publicDocsHeader .topbar__menu{ display: inline-flex; }#publicDocsHeader .topbar__nav{
    display: none; position: absolute; top: var(--topbar-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 16px;
    background: var(--canvas); border-bottom: 1px solid var(--hairline);
  }#publicDocsHeader .topbar__nav.is-open{ display: flex; }#publicDocsHeader .topbar__nav a{ padding: 12px 8px; font-size: 16px; }#publicDocsHeader .topbar__tools .btn--primary{ display: none; }
}

.plugin-theme .doc-nav-toggle { color: var(--ink); }
#publicDocsHeader .seg__btn { white-space: nowrap; }
@media (max-width: 520px) {
  #publicDocsHeader .topbar__section { display: none; }
  #publicDocsHeader .topbar__inner { gap: 8px; }
  #publicDocsHeader .topbar__tools { gap: 6px; }
  #publicDocsHeader .seg__btn { min-width: 28px; padding: 0 6px; }
}