/* Shared navigation and password controls; page layouts remain in their own stylesheets. */
:root {
  --nav-surface: rgba(23, 32, 42, 0.035);
  --nav-hover: rgba(23, 32, 42, 0.075);
  --nav-active: rgba(217, 52, 112, 0.08);
  --nav-text: var(--ink, #17202a);
  --nav-border: var(--line, rgba(23, 32, 42, 0.1));
}

:root[data-theme="night"] {
  --nav-surface: rgba(220, 232, 244, 0.035);
  --nav-hover: rgba(220, 232, 244, 0.09);
  --nav-active: rgba(240, 111, 159, 0.12);
}

:root[data-theme] :is(.site-header .nav, .studio-header nav, .legal-nav) > a,
:root[data-theme] :is(.drop-brand, .profile-nav) .drop-home-link:not(.is-authenticated),
:root[data-theme] .admin-toolbar .toolbar-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--nav-text);
  background: var(--nav-surface);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

:root[data-theme] :is(.site-header .nav, .studio-header nav, .legal-nav) > a:hover,
:root[data-theme] :is(.drop-brand, .profile-nav) .drop-home-link:not(.is-authenticated):hover,
:root[data-theme] .admin-toolbar .toolbar-link:hover {
  background: var(--nav-hover);
  border-color: var(--nav-border);
}

:root[data-theme] :is(.site-header .nav, .studio-header nav, .legal-nav) > a[aria-current="page"] {
  background: var(--nav-active);
  border-color: var(--nav-border);
}

:root[data-theme] :is(.site-header .nav, .studio-header nav, .legal-nav) > a:focus-visible,
:root[data-theme] :is(.drop-brand, .profile-nav) .drop-home-link:focus-visible,
:root[data-theme] .admin-toolbar .toolbar-link:focus-visible {
  outline: 2px solid var(--pink, var(--wine, var(--accent, #d93470)));
  outline-offset: 3px;
}

@media (min-width: 761px) {
  :root[data-theme] :is(.site-header, .studio-header, .profile-nav) {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 66px;
    padding: 10px 14px;
    border-radius: 20px;
  }

  :root[data-theme] :is(.site-header, .studio-header) .brand {
    flex: 0 0 auto;
    gap: 10px;
  }

  :root[data-theme] :is(.site-header, .studio-header) .mark {
    width: 36px;
    height: 36px;
  }

  :root[data-theme] :is(.site-header .nav, .studio-header nav, .legal-nav) {
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
  }

  :root[data-theme] .profile-nav .drop-home-link {
    margin-inline-start: auto;
  }

  :root[data-theme] :is(.site-header .header-action, .studio-header .header-logout) {
    min-height: 44px;
    border-radius: 10px;
    font-size: 14px;
    padding-inline: 16px;
  }

  :root[data-theme] .site-header .language-control select {
    min-height: 44px;
    border: 1px solid var(--nav-border);
    border-radius: 10px;
    background: var(--nav-surface);
  }

  :root[data-theme] .site-header .nav-toggle { order: 3; }
  :root[data-theme] .site-header .language-control { order: 2; }
}

@media (min-width: 761px) and (max-width: 900px) {
  body[data-language-picker="landing"] .site-header .language-control { margin-inline-start: auto; }
}

@media (min-width: 901px) {
  :root[data-theme] .site-header .nav .nav-creator-link { display: none; }
}

:root .password-control {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

:root .password-control > input {
  display: block;
  width: 100%;
  padding-inline-end: 54px;
}

:root .password-control > .password-toggle {
  position: absolute;
  inset-block: 1px;
  inset-inline-end: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: var(--muted, #66717f);
  background: transparent;
  cursor: pointer;
  transform: none;
}

:root .password-control > .password-toggle:hover { color: var(--nav-text); }
:root .password-control > .password-toggle:focus-visible {
  outline: 2px solid var(--pink, var(--wine, #d93470));
  outline-offset: -3px;
}
:root .password-control > .password-toggle:disabled { cursor: wait; opacity: 0.5; }
.password-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.password-toggle .password-eye-closed,
.password-toggle[aria-pressed="true"] .password-eye-open { display: none; }
.password-toggle[aria-pressed="true"] .password-eye-closed { display: block; }
.password-control input::-ms-reveal { display: none; }

body.is-booting .studio-header,
body.is-booting .studio { visibility: hidden; }