/* App shell: frosted top bar, language button, phone bottom bar and footer (design system v2; the bars keep their place during page transitions). */
.topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  block-size: var(--topbar-h);
  padding-inline: var(--s-4);
  background: var(--glass);
  color: var(--text);
  border-block-end: 1px solid var(--border);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  view-transition-name: topbar;
}

@supports not (backdrop-filter: blur(1px)) {
  .topbar,
  .bottombar {
    background: var(--bg);
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-inline-size: 0;
  margin-inline-end: auto;
  color: inherit;
  text-decoration: none;
}

.brand-logo {
  inline-size: 40px;
  block-size: 40px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--c-white);
  object-fit: contain;
}

/* Where Log in shows in the bar (phones and tablets): slimmer buttons, and the name gives way before the logo does. */
@media (max-width: 767px) {
  .brand {
    min-inline-size: 40px;
  }

  .topbar .btn {
    padding-inline: var(--s-3);
  }
}

.brand-name {
  overflow: hidden;
  font-size: var(--fs-2);
  font-weight: 750;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.topnav {
  display: none;
  gap: var(--s-1);
}

.topnav a {
  padding: var(--s-2) var(--s-3);
  border-radius: 999px;
  color: var(--text-muted);
  font-weight: var(--fw-strong);
  text-decoration: none;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.topnav a:hover {
  background: var(--surface-2);
  color: var(--text);
}

.topnav a[aria-current="page"] {
  background: color-mix(in oklab, var(--accent) 22%, transparent);
  color: var(--text);
}

@media (min-width: 768px) {
  .topnav {
    display: flex;
  }

  /* Wide screens already list Log in in the navigation beside Join. */
  .topbar-login {
    display: none;
  }
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 44px;
  padding-inline: var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: var(--fw-strong);
  cursor: pointer;
  anchor-name: --lang;
}

.lang-btn:hover {
  background: var(--surface-2);
}

.icon {
  flex: none;
  inline-size: 24px;
  block-size: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bottombar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 20;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  block-size: calc(var(--bottombar-h) + env(safe-area-inset-bottom));
  padding-block-end: env(safe-area-inset-bottom);
  background: var(--glass);
  border-block-start: 1px solid var(--border);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  view-transition-name: bottombar;
}

.bottombar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-block-start: 3px solid transparent;
  color: var(--text-muted);
  font-size: var(--fs-0);
  font-weight: var(--fw-strong);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.bottombar a:hover {
  color: var(--text);
}

.bottombar a[aria-current="page"] {
  border-block-start-color: var(--accent-text);
  color: var(--accent-text);
}

.bottombar span {
  max-inline-size: 100%;
  padding-inline: var(--s-1);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .bottombar {
    display: none;
  }
}

.footer {
  padding: var(--s-7) var(--s-4);
  background: var(--surface-2);
  color: var(--text-muted);
  border-block-start: 1px solid var(--border);
  text-align: center;
}

.footer-brand {
  color: var(--text);
  font-size: var(--fs-2);
  font-weight: 750;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-5);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  color: var(--text);
  font-weight: var(--fw-strong);
}

.footer-langs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-4);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
}

.footer-langs a {
  color: var(--text-muted);
  font-family: var(--font-system);
}

/* Phones: tighter bar. The name shows only if it fits beside Log in and Join (or the account menu) and the
   language menu; otherwise it wraps out of sight instead of being cut in half (the logo is the home link). */
@media (max-width: 479px) {
  .topbar,
  .brand {
    gap: var(--s-2);
  }

  .topbar {
    padding-inline: var(--s-3);
  }

  .topbar > :not(.brand) {
    flex-shrink: 0;
  }

  .brand {
    flex-wrap: wrap;
    align-content: flex-start;
    block-size: 40px;
    overflow: hidden;
  }

  .brand-name {
    flex: none;
    overflow: visible;
    font-size: 0.9375rem;
  }

  .topbar .btn {
    min-block-size: 40px;
  }

  .lang-btn {
    padding-inline: var(--s-2);
  }
}

/* Narrow phones: Log in and Join both fit beside the logo only if the language button is just the globe
   (it keeps its "Language" label) and the bar is a little tighter; the logo never gets squeezed. */
@media (max-width: 399px) {
  .topbar {
    padding-inline: var(--s-2);
  }

  .topbar .btn {
    font-size: 0.875rem;
  }

  .lang-btn span {
    display: none;
  }
}

/* The narrowest phones (320px) with the longest words (Russian). */
@media (max-width: 339px) {
  .topbar {
    gap: var(--s-1);
  }

  .topbar .btn {
    padding-inline: var(--s-2);
  }
}