/* SpeechTiles Website v2.0 documentation header integration (generator-owned).
   This layer intentionally changes only the header, not the R25.1 article UI.
   The core docs.css remains untouched. */
:root { --st-docs-header-height: 76px; }

/* Match the commercial website's white, blue, typographic identity. */
.topbar {
  height: var(--st-docs-header-height);
  min-height: var(--st-docs-header-height);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 28px;
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid #e8edf4;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.topbar .brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #0861d9;
  text-decoration: none;
  line-height: 1;
}
/* Identical four-square proportions and colors to the main website. */
.topbar .brand .st-brand-mark {
  display: grid;
  grid-template-columns: repeat(2,12px);
  gap: 3px;
  flex-shrink: 0;
}
.topbar .brand .st-brand-mark i {display:block;width:12px;height:12px;background:#0861d9}
.topbar .brand .st-brand-mark i:nth-child(2) {background:#66b8ff}
.topbar .brand .st-brand-mark i:nth-child(3) {background:#102e65}
.topbar .brand .st-brand-name {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -1px;
  white-space: nowrap;
}
.topbar .brand b {
  white-space: nowrap;
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid #d9e2ec;
  color: #52627c;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
}
.topbar .top-actions {gap: 14px;min-width: 0;flex: 0 1 auto}
.topbar .top-actions>a {color:#0756bc;font-size:13px;font-weight:650;white-space:nowrap}
.topbar .search-button {width:230px;min-width:0}
.topbar .search-button:focus-visible,
.topbar a:focus-visible {outline:3px solid #66b8ff;outline-offset:3px}

.st-site-nav {display:flex;align-items:center;gap:18px;margin-left:auto;flex:0 0 auto;font-size:13px}
.st-site-nav a {color:#10213c;font-weight:600;text-decoration:none;white-space:nowrap;opacity:1}
.st-site-nav .st-nav-secondary:hover,
.st-site-nav .st-nav-secondary:focus-visible {color:#0861d9;text-decoration:underline;text-underline-offset:4px}
/* A primary action, not a utility text link. Always visible, including mobile. */
.st-site-nav .st-main-site {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 11px 19px;
  border: 1px solid #0861d9;
  border-radius: 6px;
  background: #0861d9;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 2px 5px rgba(8,97,217,.13);
}
.st-site-nav .st-main-site:hover {background:#0752b7;border-color:#0752b7;color:#fff;text-decoration:none}
.st-site-nav .st-main-site:focus-visible {outline:3px solid #66b8ff;outline-offset:3px}
.st-main-site-short {display:none}

/* Header height is shared with docs sticky sidebar and page outline. */
.layout {min-height:calc(100vh - var(--st-docs-header-height))}
.sidebar, .toc {
  top:var(--st-docs-header-height);
  height:calc(100vh - var(--st-docs-header-height));
}

/* Two-row header gives the documentation utilities space on smaller laptops. */
@media(max-width:1190px) and (min-width:768px) {
  :root {--st-docs-header-height:116px}
  .topbar {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:54px 54px;
    align-items:center;
    gap:0 12px;
    padding:4px 20px;
  }
  .topbar .brand {grid-column:1;grid-row:1}
  .topbar .top-actions {grid-column:1 / -1;grid-row:2;justify-content:flex-start}
  .topbar .st-site-nav {grid-column:2;grid-row:1}
}
@media(max-width:960px) and (min-width:768px) {
  .st-site-nav {gap:12px;font-size:12px}
  .topbar .brand .st-brand-name {font-size:22px}
  .topbar .brand b {font-size:12px;padding-left:9px}
  .st-site-nav .st-main-site {padding:9px 12px}
}
/* Compact one-row header: search remains usable, and return link stays visible. */
@media(max-width:767px) {
  :root {--st-docs-header-height:68px}
  .topbar {height:68px;min-height:68px;display:flex;flex-wrap:nowrap;gap:9px;padding:0 12px}
  .topbar .brand {order:0;gap:8px;min-width:0}
  .topbar .brand b {display:none}
  .topbar .brand .st-brand-name {font-size:20px}
  .topbar .brand .st-brand-mark {grid-template-columns:repeat(2,10px);gap:2px}
  .topbar .brand .st-brand-mark i {width:10px;height:10px}
  .topbar .top-actions {order:1;margin-left:auto;gap:0;flex:0 0 auto}
  .topbar .top-actions>a {display:none}
  .topbar .search-button {display:inline-flex;width:39px;min-width:39px;justify-content:center;padding:8px}
  .topbar .search-button span,.topbar .search-button kbd {display:none}
  .topbar .st-site-nav {order:2;display:flex;width:auto;flex:0 0 auto;margin:0;gap:0}
  .st-site-nav .st-nav-secondary {display:none}
  .st-site-nav .st-main-site {min-height:39px;padding:9px 11px;font-size:12px;gap:5px}
  .st-main-site-full {display:none}
  .st-main-site-short {display:inline}
}
@media(max-width:360px) {
  .topbar {gap:6px;padding:0 9px}
  .topbar .brand .st-brand-name {font-size:17px}
  .topbar .search-button {width:35px;min-width:35px}
  .st-site-nav .st-main-site {padding:9px 8px}
}

/* Keep generated mobile nav overlays/resizer aligned with the taller header. */
body.nav-open .mobile-overlay {inset:var(--st-docs-header-height) 0 0}
.st-sidebar-resizer {top:var(--st-docs-header-height)}
@media(max-width:767px) {.st-sidebar-resizer {display:none!important}}