@font-face {
  font-family: "EasyAccounts Inter";
  src: url("../assets/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

app-navigation { display: block; min-width: 0; }

.app-nav {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: var(--space-4);
  max-width: calc(var(--content-width) - 28px);
  margin: var(--space-5) auto var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--nav-surface);
  border: 1px solid var(--nav-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--nav-shadow);
}

.app-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  width: fit-content;
  color: var(--brand-wordmark);
  font-family: var(--brand-font);
  font-size: var(--brand-font-size);
  font-weight: 700;
  letter-spacing: -1.1px;
  text-decoration: none;
}

.app-nav__logo { width: 40px; height: 44px; object-fit: contain; flex-shrink: 0; clip-path: var(--brand-emblem-clip); }
.app-nav__wordmark { white-space: nowrap; line-height: 1.5; }
.app-nav__wordmark-light { font-weight: 450; }
.app-nav__wordmark-dot { color: var(--brand-dot); font-size: 1.25em; line-height: 0; }
.app-nav__items { display: flex; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.app-nav__link, .app-nav__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--nav-muted);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.app-nav__link:hover, .app-nav__link[aria-current="page"] { background: var(--nav-selected); color: var(--nav-text); }
.app-nav__action { justify-self: end; background: var(--nav-action); color: var(--nav-action-text); padding-inline: var(--space-5); }
.app-nav__action:hover { opacity: .82; }
.app-nav :focus-visible { outline: 2px solid var(--nav-text); outline-offset: 4px; }

@media (max-width: 1100px) { .app-nav { margin-inline: 14px; } }
@media (max-width: 860px) {
  .app-nav { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); margin: var(--space-3) var(--space-2); border-radius: var(--radius-panel); padding: var(--space-3); }
  .app-nav > nav { grid-column: 1 / -1; grid-row: 2; }
  .app-nav__items { justify-content: center; }
  .app-nav__items li { flex: 1; min-width: 0; }
  .app-nav__link { width: 100%; padding-inline: var(--space-3); }
  .app-nav__action { padding-inline: var(--space-4); }
  .app-nav__brand { font-size: var(--brand-font-size-mobile); gap: var(--space-2); }
  .app-nav__logo { width: 32px; height: 35.2px; }
}
@media (max-width: 380px) {
  .app-nav__brand { font-size: var(--brand-font-size-small); }
  .app-nav__action { padding-inline: var(--space-3); font-size: 14px; }
  .app-nav__action svg { display: none; }
  .app-nav__link { padding-inline: var(--space-2); font-size: 14px; }
}
@media (max-width: 300px) {
  .app-nav { grid-template-columns: minmax(0, 1fr); }
  .app-nav__action { grid-row: 3; justify-self: stretch; }
  .app-nav__items { flex-direction: column; }
}