:root {
  --studio-header-bg: rgba(7, 8, 8, 0.94);
  --studio-header-bg-strong: #090a0a;
  --studio-header-ink: #f5f1e8;
  --studio-header-muted: rgba(245, 241, 232, 0.72);
  --studio-header-line: rgba(255, 255, 255, 0.14);
  --studio-header-control: rgba(255, 255, 255, 0.06);
  --studio-header-control-hover: rgba(255, 255, 255, 0.13);
}

/* Public Studio chrome stays dark once scrolling and on inner pages. */
html[data-theme] .page-studio-clone .site-header,
html[data-theme] .page-studio-clone .site-header.is-scrolled,
html[data-theme] .page-studio-clone .site-header:not(.is-scrolled),
html[data-theme] .page-inner .site-header {
  border-bottom: 1px solid var(--studio-header-line);
  color: var(--studio-header-ink);
  background: var(--studio-header-bg);
  box-shadow: none;
  backdrop-filter: blur(20px) saturate(1.18);
}

/* Let the homepage hero extend behind the header at the true top of the page. */
html[data-theme] .page-home.page-studio-clone .site-header:not(.is-scrolled) {
  border-bottom-color: transparent;
  background-color: transparent;
  backdrop-filter: none;
}

html[data-theme] .page-studio-clone .site-header .main-nav a::after,
html[data-theme] .page-inner .site-header .main-nav a::after {
  background: currentColor;
}

html[data-theme] .page-studio-clone .site-header .account-entry,
html[data-theme] .page-studio-clone .site-header .header-sign-out,
html[data-theme] .page-studio-clone .site-header .theme-picker__trigger,
html[data-theme] .page-studio-clone .site-header .menu-toggle,
html[data-theme] .page-inner .site-header .account-entry,
html[data-theme] .page-inner .site-header .header-sign-out,
html[data-theme] .page-inner .site-header .theme-picker__trigger,
html[data-theme] .page-inner .site-header .menu-toggle {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border: 0;
  color: var(--studio-header-ink);
  background: var(--studio-header-control);
  box-shadow: none;
}

html[data-theme] .page-studio-clone .site-header :is(.account-entry, .header-sign-out, .theme-picker__trigger, .menu-toggle):hover,
html[data-theme] .page-inner .site-header :is(.account-entry, .header-sign-out, .theme-picker__trigger, .menu-toggle):hover {
  border-color: transparent;
  color: #fff;
  background: var(--studio-header-control-hover);
}

.page-policy .policy-print {
  min-height: 44px;
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--studio-header-ink);
  background: var(--studio-header-control);
}

.page-policy .policy-print:hover {
  border-color: rgba(255, 255, 255, 0.68);
  color: #fff;
  background: var(--studio-header-control-hover);
}

/* Workspace, agreement, and operations share the same stable application bar. */
html[data-theme] .workspace-header {
  min-height: 4.8rem;
  border-bottom-color: var(--studio-header-line);
  color: var(--studio-header-ink);
  background: var(--studio-header-bg);
  box-shadow: none;
  backdrop-filter: blur(20px) saturate(1.18);
}

html[data-theme] .workspace-header nav a,
html[data-theme] .agreement-page .workspace-header nav button {
  color: var(--studio-header-muted);
  font-size: 0.8125rem;
}

html[data-theme] .workspace-header nav a:hover,
html[data-theme] .workspace-header nav a:focus-visible,
html[data-theme] .workspace-header nav a[aria-current="page"],
html[data-theme] .agreement-page .workspace-header nav button:hover,
html[data-theme] .agreement-page .workspace-header nav button:focus-visible {
  color: var(--studio-header-ink);
}

html[data-theme] .workspace-header :is(.account-entry, .header-sign-out, .theme-picker__trigger) {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border: 0;
  color: var(--studio-header-ink);
  background: var(--studio-header-control);
  box-shadow: none;
}

html[data-theme] .workspace-header :is(.account-entry, .header-sign-out, .theme-picker__trigger):hover {
  border-color: transparent;
  color: #fff;
  background: var(--studio-header-control-hover);
}

/* The account and appearance controls share a 44px touch target. Keep the
   portrait visually balanced with the smaller appearance glyph instead of
   stretching the photo across the full target. */
html[data-theme] :is(.site-header, .workspace-header) .account-entry [data-account-avatar] {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

html[data-theme] :is(.site-header, .workspace-header) :is(.account-entry, .theme-picker__trigger, .menu-toggle):focus-visible {
  outline: none;
  color: #ffffff;
  background: rgba(215, 179, 90, 0.24);
  box-shadow: 0 8px 22px rgba(215, 179, 90, 0.18);
}

.agreement-page [data-print-signed-pdf]:disabled,
.agreement-page [data-print-signed-pdf][hidden] {
  display: none;
}

/* Operations tools appear only after the staff access check succeeds. */
html:not([data-studio-access="active"]) .studio-admin-page :is(.admin-project-switcher, .admin-global-search, .admin-finance-open) {
  display: none;
}

html:not([data-studio-access="active"]) .studio-admin-page .workspace-header {
  grid-template-columns: minmax(0, 1fr) auto;
}

@media (max-width: 980px) {
  .page-policy .policy-print span {
    display: none;
  }

  .page-policy .policy-print {
    width: 44px;
    padding-inline: 0;
  }
}

@media (max-width: 760px) {
  .page-policy .policy-print {
    display: none;
  }

  html[data-theme] .workspace-header {
    min-height: 4.25rem;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
  }

  html[data-theme] .workspace-header nav {
    display: none;
  }

  .workspace-header .workspace-brand {
    width: min(10.7rem, 47vw);
  }

  .studio-admin-page .workspace-header .workspace-brand {
    width: min(9rem, 38vw);
  }

  html[data-studio-access="active"] .studio-admin-page .workspace-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  html[data-studio-access="active"] .studio-admin-page .admin-global-search {
    display: none;
  }

  .studio-admin-page :is(.admin-project-switcher, .admin-finance-open) {
    min-width: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
  }

  .studio-admin-page .admin-project-switcher > span,
  .studio-admin-page .admin-project-switcher > img:last-child,
  .studio-admin-page .admin-finance-open > span {
    display: none;
  }

  .studio-admin-page .admin-project-switcher > img:first-child,
  .studio-admin-page .admin-finance-open > svg {
    width: 19px;
    height: 19px;
    margin: 0;
  }
}

@media (max-width: 420px) {
  .site-header {
    padding-inline: 1rem;
  }

  .site-header .brand-lockup img {
    width: min(10.9rem, 45vw);
  }

  .page-policy .header-actions,
  .page-studio-clone .header-actions {
    gap: 0.45rem;
  }

}

@media (forced-colors: active) {
  html[data-theme] :is(.site-header, .workspace-header) {
    border-bottom: 1px solid CanvasText;
    color: CanvasText;
    background: Canvas;
  }
}