/* Shared Apps SDK integration for every page with the FreeSign site header. */
.topbar--apps {
  flex-wrap: wrap;
}

.topbar--apps .nav .nav-cta-sign {
  box-sizing: border-box;
  height: 40px;
  padding-block: 0;
}

.topbar-brand-apps {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.topbar-brand-apps coderai-apps {
  display: inline-flex;
  flex-shrink: 0;
  --coderai-apps-font: var(--font-body);
  --coderai-apps-bg: var(--paper);
  --coderai-apps-text: var(--ink);
  --coderai-apps-muted: var(--ink3);
  --coderai-apps-border: var(--rule);
  --coderai-apps-hover: var(--accent-soft);
  --coderai-apps-active: var(--accent-soft);
  --coderai-apps-focus: var(--accent);
  --coderai-apps-button-height: 40px;
  --coderai-apps-button-radius: 6px;
}

.topbar-brand-apps coderai-apps > a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 8px;
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.topbar-brand-apps coderai-apps > a:hover {
  background: var(--accent-soft);
}

.topbar-brand-apps coderai-apps > a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Leave room for the longer navigation labels on localized pages. */
@media (max-width: 1100px) {
  .topbar--apps { gap: 12px; }
  .topbar-brand-apps { gap: 12px; }
  .topbar--apps .nav { gap: 18px; font-size: 13.5px; }
}

/* Compact labels come from each page's ceremony translation (data-short-label).
   Full link text and aria-label preserve the accessible navigation names. */
@media (max-width: 1000px) {
  .topbar-brand-apps coderai-apps::part(label) { display: none; }
  .topbar-brand-apps coderai-apps::part(button) {
    width: 40px;
    height: 40px;
    padding: 0;
  }
  .topbar--apps .nav a[data-short-label] {
    font-size: 0;
  }
  .topbar--apps .nav a.nav-cta-sign { gap: 0; }
  .topbar--apps .nav a[data-short-label]::after {
    content: attr(data-short-label);
    font-size: 13.5px;
    font-weight: inherit;
  }
}