@charset "UTF-8";

/*
 * Navigation owner: utility bar, logo lockup, primary navigation, dropdowns and the mobile drawer
 * for both storefront (navbar-expand-xl) and administration (navbar-expand-lg).
 * Surface-specific admin geometry that predates this module still lives in moonarrow-admin.css.
 */

/* ---------- Utility bar (storefront only): a pale ice strip with one hairline ---------- */
.account-story-brand .store-logo-lockup {
  background: #fff;
  padding: 0.65rem 0.8rem;
}

.storefront-surface .site-utility-bar {
  color: var(--moonarrow-color-utility-text);
  background: var(--moonarrow-color-utility-surface);
  border-bottom: 1px solid var(--moonarrow-color-hairline);
  font-size: var(--moonarrow-type-micro);
  letter-spacing: 0.08em;
}

.storefront-surface .site-utility-bar .container-xl {
  display: flex;
  width: 100%;
  max-width: var(--moonarrow-shell-max);
  min-height: 36px;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-inline: auto;
  padding-inline: var(--moonarrow-shell-gutter);
}

.storefront-surface .site-utility-bar .container-xl > div {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.storefront-surface .site-utility-bar a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  color: var(--moonarrow-color-brand-ink);
  text-decoration: underline;
  text-decoration-color: var(--moonarrow-color-gold);
  text-underline-offset: 0.3em;
}

.storefront-surface .site-utility-bar a:hover,
.storefront-surface .site-utility-bar a:focus-visible {
  color: var(--moonarrow-color-gold-text);
}

.storefront-surface .site-utility-bar a:focus-visible {
  outline: 2px solid var(--moonarrow-color-brand-ink);
  outline-offset: 2px;
}

@media (max-width: 767.98px) {
  .storefront-surface .site-utility-bar .container-xl {
    justify-content: center;
  }
}

@media (max-width: 479.98px) {
  .storefront-surface .site-utility-bar .container-xl > div > span {
    display: none;
  }
}

/* ---------- Header shell ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff;
}

.site-navigation {
  min-height: var(--moonarrow-navigation-height);
  padding: 0;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--moonarrow-color-nav-line);
  box-shadow: none;
}

.site-navigation > .container-xl {
  width: 100%;
  max-width: var(--moonarrow-shell-max);
  min-height: var(--moonarrow-navigation-height);
  margin-inline: auto;
  padding-inline: var(--moonarrow-shell-gutter);
}

/* ---------- Logo lockup: cropped emblem from the original artwork + readable brand name ---------- */
.site-navigation .site-brand {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  margin: 0 var(--moonarrow-navigation-brand-gap) 0 0;
  padding: 0;
  color: var(--moonarrow-color-brand-ink);
  background: transparent;
  border-radius: 0;
  text-decoration: none;
}

.site-navigation .site-brand:focus-visible {
  outline: 3px solid var(--moonarrow-color-brand-blue);
  outline-offset: 4px;
}

.store-logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--moonarrow-color-brand-ink);
}

/* The source is a 1280×1280 lockup. The emblem occupies x 225–1060, y 60–755, so the frame
   is 1.2 × its height and the untouched image is scaled and offset inside it (never stretched). */
.store-logo-mark {
  --store-logo-height: 48px;
  position: relative;
  display: block;
  width: calc(var(--store-logo-height) * 1.2);
  height: var(--store-logo-height);
  flex: 0 0 auto;
  overflow: hidden;
}

.store-logo-mark .moonarrow-store-logo {
  position: absolute;
  top: calc(var(--store-logo-height) * -0.0863);
  left: calc(var(--store-logo-height) * -0.3237);
  display: block;
  width: calc(var(--store-logo-height) * 1.8417);
  max-width: none;
  height: auto;
  max-height: none;
  mix-blend-mode: multiply;
}

.store-logo-wordmark {
  display: grid;
  gap: 0.2rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--moonarrow-color-gold);
  line-height: 1;
}

.store-logo-name {
  color: var(--moonarrow-color-brand-ink);
  font-family: var(--moonarrow-font-display);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.store-logo-tagline {
  color: var(--moonarrow-color-gold-text);
  font-family: var(--moonarrow-font-latin);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  white-space: nowrap;
}

/* ---------- Primary links ---------- */
.site-navigation-links {
  align-items: stretch;
  gap: var(--moonarrow-navigation-item-gap);
}

.site-navigation .nav-item {
  display: flex;
  align-items: stretch;
}

.site-navigation .nav-link,
.site-navigation .nav-button {
  position: relative;
  display: inline-flex;
  min-height: var(--moonarrow-navigation-item-height);
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.7rem !important;
  color: var(--moonarrow-color-brand-ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: var(--moonarrow-navigation-link-size);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.site-navigation .nav-link::after,
.site-navigation .nav-button::after {
  position: absolute;
  right: 0.7rem;
  bottom: 0;
  left: 0.7rem;
  height: 3px;
  content: "";
  background: var(--moonarrow-color-brand-blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--moonarrow-motion-fast) var(--moonarrow-motion-ease);
}

.site-navigation .nav-link:hover,
.site-navigation .nav-link:focus-visible,
.site-navigation .nav-link.is-active,
.site-navigation .nav-button:hover,
.site-navigation .nav-button:focus-visible,
.site-navigation .nav-button.is-active {
  color: var(--moonarrow-color-brand-blue-dark);
  background: transparent;
}

.site-navigation :is(.nav-link, .nav-button):hover::after,
.site-navigation :is(.nav-link, .nav-button):focus-visible::after,
.site-navigation :is(.nav-link, .nav-button).is-active::after {
  transform: scaleX(1);
}

/* Storefront links: wider tracking and a thin gold rule that draws in from the left. */
.storefront-surface .site-navigation :is(.nav-link, .nav-button) {
  letter-spacing: 0.08em;
}

.storefront-surface .site-navigation :is(.nav-link, .nav-button)::after {
  height: 2px;
  background: var(--moonarrow-color-gold);
}

.site-navigation :is(.nav-link, .nav-button):focus-visible {
  outline: 3px solid var(--moonarrow-color-brand-blue);
  outline-offset: -3px;
}

.site-navigation .dropdown-toggle::after {
  border: 0;
}

.site-navigation .storefront-nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.site-navigation .storefront-nav-dropdown--split {
  display: flex;
  align-items: stretch;
}

.site-navigation .storefront-nav-dropdown--split .storefront-nav-parent-link {
  padding-right: 0.2rem !important;
}

.site-navigation .storefront-nav-dropdown--split .storefront-nav-dropdown-toggle {
  min-width: 1.75rem;
  padding-inline: 0.25rem 0.7rem !important;
}

.site-navigation .storefront-nav-dropdown--split .storefront-nav-parent-link::after {
  right: 0.2rem;
}

.site-navigation .storefront-nav-dropdown--split .storefront-nav-dropdown-toggle::after {
  display: none;
}

.storefront-nav-chevron {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  flex: 0 0 auto;
  border-right: 1.75px solid currentColor;
  border-bottom: 1.75px solid currentColor;
  transform: rotate(45deg) translate(-0.1rem, -0.1rem);
  transition: transform var(--moonarrow-motion-fast) ease;
}

.storefront-nav-dropdown-toggle[aria-expanded="true"] .storefront-nav-chevron {
  transform: rotate(225deg) translate(-0.1rem, -0.1rem);
}

.site-navigation .storefront-nav-disabled,
.site-navigation .storefront-dropdown-item-disabled {
  color: var(--moonarrow-color-storefront-muted);
  cursor: default;
}

/* ---------- Dropdown menus ---------- */
.site-navigation .dropdown-menu {
  min-width: 14rem;
  margin-top: 0;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid var(--moonarrow-color-storefront-line);
  border-top: 3px solid var(--moonarrow-color-brand-blue);
  border-radius: 0 0 var(--moonarrow-radius-frame) var(--moonarrow-radius-frame);
  box-shadow: 0 18px 36px rgba(17, 20, 42, 0.12);
}

.site-navigation .dropdown-item {
  display: flex;
  min-height: 44px;
  align-items: center;
  padding: 0.55rem 0.85rem;
  color: var(--moonarrow-color-brand-ink);
  border-radius: 2px;
  font-size: var(--moonarrow-type-metadata);
  font-weight: 600;
  white-space: normal;
}

.site-navigation .dropdown-item:hover,
.site-navigation .dropdown-item:focus-visible,
.site-navigation .dropdown-item.is-active {
  color: var(--moonarrow-color-brand-blue-dark);
  background: var(--moonarrow-color-storefront-soft);
}

.site-navigation .dropdown-item.is-active {
  box-shadow: inset 3px 0 0 var(--moonarrow-color-brand-blue);
}

.site-navigation .dropdown-item:focus-visible {
  outline: 2px solid var(--moonarrow-color-brand-blue);
  outline-offset: -2px;
}

/* ---------- Icon actions ---------- */
.site-nav-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  gap: 0.25rem;
  margin-left: 0.75rem;
}

.site-nav-logout {
  display: flex;
  margin: 0;
}

.site-navigation .site-nav-action {
  position: relative;
  display: flex;
  min-width: 3.25rem;
  min-height: var(--moonarrow-navigation-item-height);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0 0.2rem;
  color: var(--moonarrow-color-brand-ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: inherit;
  line-height: 1.15;
  text-decoration: none;
}

.site-navigation .site-nav-action:hover,
.site-navigation .site-nav-action:focus-visible,
.site-navigation .site-nav-action.is-active {
  color: var(--moonarrow-color-brand-blue-dark);
  background: var(--moonarrow-color-storefront-soft);
}

.site-navigation .site-nav-action:focus-visible {
  outline: 3px solid var(--moonarrow-color-brand-blue);
  outline-offset: -3px;
}

.site-nav-action-symbol {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.site-nav-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.site-navigation .site-nav-action-label {
  font-size: var(--moonarrow-type-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.site-cart-count {
  position: absolute;
  top: calc(50% - 1.45rem);
  left: calc(50% + 0.3rem);
  display: inline-flex;
  min-width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  padding: 0 0.3rem;
  color: var(--moonarrow-color-night);
  background: var(--moonarrow-color-gold);
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

/* ---------- Toggler ---------- */
.site-navigation .navbar-toggler {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--moonarrow-color-brand-ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--moonarrow-control-radius);
  box-shadow: none;
}

.site-navigation .navbar-toggler:hover {
  background: var(--moonarrow-color-storefront-soft);
}

.site-navigation .navbar-toggler:focus,
.site-navigation .navbar-toggler:focus-visible {
  box-shadow: none;
}

.site-navigation .navbar-toggler:focus-visible {
  outline: 3px solid var(--moonarrow-color-brand-blue);
  outline-offset: 1px;
}

/* The glyph is replaced by three drawn bars that morph into a close mark. */
.site-navigation .navbar-toggler > span {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  color: transparent;
  background: var(--moonarrow-color-brand-ink);
  border-radius: 2px;
  font-size: 0;
  transition: background-color var(--moonarrow-motion-fast) ease;
}

.site-navigation .navbar-toggler > span::before,
.site-navigation .navbar-toggler > span::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  content: "";
  background: var(--moonarrow-color-brand-ink);
  border-radius: 2px;
  transition: transform var(--moonarrow-motion-base) var(--moonarrow-motion-ease);
}

.site-navigation .navbar-toggler > span::before { transform: translateY(-7px); }
.site-navigation .navbar-toggler > span::after { transform: translateY(7px); }
.site-navigation .navbar-toggler[aria-expanded="true"] > span { background: transparent; }
.site-navigation .navbar-toggler[aria-expanded="true"] > span::before { transform: rotate(45deg); }
.site-navigation .navbar-toggler[aria-expanded="true"] > span::after { transform: rotate(-45deg); }

/* ---------- Storefront order: brand · links · actions · toggler ---------- */
.storefront-surface .site-navigation .site-brand { order: 1; }
.storefront-surface .site-navigation .storefront-primary-actions { order: 2; }
.storefront-surface .site-navigation .navbar-toggler { order: 3; }
.storefront-surface .site-navigation .navbar-collapse { order: 4; }

@media (min-width: 1200px) {
  .storefront-surface .site-navigation .navbar-collapse { order: 2; }
  .storefront-surface .site-navigation .storefront-primary-actions { order: 3; }
  .storefront-surface .site-navigation .navbar-toggler { display: none; }

  .storefront-surface .site-navigation .storefront-secondary-actions {
    margin-left: 0;
  }
}

@media (min-width: 992px) {
  .admin-surface .site-navigation .navbar-toggler { display: none; }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .storefront-surface .site-navigation .site-brand {
    margin-right: 1rem;
  }

  .storefront-surface .site-navigation :is(.nav-link, .nav-button) {
    padding-inline: 0.5rem !important;
  }

  .storefront-surface .site-navigation .storefront-nav-dropdown--split .storefront-nav-dropdown-toggle {
    padding-inline: 0.2rem 0.5rem !important;
  }

  .storefront-surface .site-navigation .store-logo-tagline {
    display: none;
  }
}

/* ---------- Compact header and drawer (storefront < 1200px, admin < 992px) ---------- */
@media (max-width: 1199.98px) {
  .storefront-surface .site-navigation,
  .storefront-surface .site-navigation > .container-xl {
    min-height: 64px;
  }

  .storefront-surface .site-navigation > .container-xl {
    flex-wrap: wrap;
  }

  .storefront-surface .site-navigation .store-logo-mark { --store-logo-height: 40px; }
  .storefront-surface .site-navigation .store-logo-name { font-size: 1.125rem; }

  .storefront-surface .site-navigation .site-brand {
    min-height: 48px;
    margin-right: 0;
  }

  .storefront-surface .site-navigation .storefront-primary-actions {
    gap: 0;
    margin: 0 0.25rem 0 auto;
  }

  .storefront-surface .site-navigation .storefront-primary-actions .site-nav-action {
    width: 44px;
    min-width: 44px;
    min-height: 64px;
    padding: 0;
  }

  .storefront-surface .site-navigation .storefront-primary-actions .site-nav-action-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .storefront-surface .site-navigation .navbar-collapse {
    flex: 0 0 calc(100% + (var(--moonarrow-shell-gutter) * 2));
    width: calc(100% + (var(--moonarrow-shell-gutter) * 2));
    max-height: calc(100dvh - 64px);
    margin: 0 calc(var(--moonarrow-shell-gutter) * -1);
    padding: 0.5rem var(--moonarrow-shell-gutter) calc(1.25rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border-top: 1px solid var(--moonarrow-color-nav-line);
  }

  .storefront-surface .site-navigation .navbar-collapse.collapsing {
    overflow: hidden;
  }

  .storefront-surface .site-navigation .site-navigation-links {
    display: grid;
    gap: 0;
    margin: 0 !important;
    padding: 0;
  }

  .storefront-surface .site-navigation .nav-item {
    display: block;
    min-width: 0;
    border-bottom: 1px solid var(--moonarrow-color-nav-line);
  }

  .storefront-surface .site-navigation :is(.nav-link, .nav-button) {
    display: flex;
    width: 100%;
    min-height: 56px;
    justify-content: flex-start;
    padding: 0 0.25rem !important;
    font-size: max(1rem, 16px);
  }

  .storefront-surface .site-navigation :is(.nav-link, .nav-button)::after {
    top: 50%;
    right: auto;
    bottom: auto;
    left: -0.25rem;
    width: 3px;
    height: 1.5rem;
    transform: translateY(-50%) scaleY(0);
  }

  .storefront-surface .site-navigation :is(.nav-link, .nav-button):hover::after,
  .storefront-surface .site-navigation :is(.nav-link, .nav-button):focus-visible::after,
  .storefront-surface .site-navigation :is(.nav-link, .nav-button).is-active::after {
    transform: translateY(-50%) scaleY(1);
  }

  .storefront-surface .site-navigation .storefront-nav-dropdown--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px;
  }

  .storefront-surface .site-navigation .storefront-nav-dropdown--split .storefront-nav-dropdown-toggle {
    justify-content: center;
    padding: 0 !important;
    border-left: 1px solid var(--moonarrow-color-nav-line);
  }

  .storefront-surface .site-navigation .storefront-nav-dropdown:not(.storefront-nav-dropdown--split) .storefront-nav-dropdown-toggle {
    justify-content: space-between;
  }

  .storefront-surface .site-navigation .dropdown-menu {
    position: static !important;
    grid-column: 1 / -1;
    width: 100%;
    margin: 0 0 0.75rem;
    padding: 0.25rem 0 0.25rem 0.75rem;
    background: transparent;
    border: 0;
    border-left: 2px solid var(--moonarrow-color-gold);
    border-radius: 0;
    box-shadow: none;
    transform: none !important;
  }

  .storefront-surface .site-navigation .dropdown-item {
    min-height: 48px;
    font-size: max(0.9375rem, 15px);
  }

  .storefront-surface .site-navigation .storefront-secondary-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0;
  }

  .storefront-surface .site-navigation .storefront-secondary-actions > .site-nav-logout {
    display: block;
  }

  .storefront-surface .site-navigation .storefront-secondary-actions .site-nav-action {
    width: 100%;
    min-height: 52px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0 1rem;
    border: 1px solid var(--moonarrow-color-nav-line);
    border-radius: var(--moonarrow-control-radius);
  }

  .storefront-surface .site-navigation .storefront-secondary-actions .site-nav-action-label {
    font-size: max(0.9375rem, 15px);
  }
}

@media (max-width: 479.98px) {
  .storefront-surface .site-navigation .store-logo-mark { --store-logo-height: 36px; }
  .storefront-surface .site-navigation .store-logo-lockup { gap: 0.5rem; }
  .storefront-surface .site-navigation .store-logo-wordmark { padding-left: 0.55rem; }
  .storefront-surface .site-navigation .store-logo-name { font-size: 1rem; letter-spacing: 0.1em; }
  .storefront-surface .site-navigation .store-logo-tagline { display: none; }

  .storefront-surface .site-navigation .storefront-primary-actions .site-nav-action {
    width: 40px;
    min-width: 40px;
  }
}

@media (max-width: 359.98px) {
  .storefront-surface .site-navigation .store-logo-wordmark { display: none; }
}

/* Administration keeps its IA; it only shares the header language. */
.admin-surface .site-navigation .admin-dropdown > .dropdown-menu {
  top: 100%;
  right: auto;
  bottom: auto;
  left: 0;
}

@media (min-width: 992px) {
  .admin-surface .site-navigation .admin-dropdown:hover > .dropdown-menu,
  .admin-surface .site-navigation .admin-dropdown:focus-within > .dropdown-menu {
    display: block;
  }
}

@media (max-width: 991.98px) {
  .admin-surface .site-navigation > .container-xl {
    flex-wrap: wrap;
  }

  .admin-surface .site-navigation .navbar-collapse {
    position: static;
    width: 100%;
    padding: 0.5rem 0 1rem;
    background: #fff;
    border-top: 1px solid var(--moonarrow-color-nav-line);
  }

  .admin-surface .site-navigation .navbar-collapse.collapsing {
    overflow: hidden;
  }

  .admin-surface .site-navigation .navbar-collapse.collapse.show {
    overflow: visible;
  }

  .admin-surface .site-navigation .site-navigation-links {
    display: grid;
  }

  .admin-surface .site-navigation :is(.nav-link, .nav-button)::after {
    display: none;
  }

  .admin-surface .site-navigation .admin-dropdown {
    display: block;
  }

  .admin-surface .site-navigation .admin-dropdown > .dropdown-menu {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    margin: 2px 0 6px;
    box-shadow: none;
  }
}

@media (max-width: 479.98px) {
  .admin-surface .site-navigation .store-logo-mark { --store-logo-height: 36px; }
  .admin-surface .site-navigation .store-logo-tagline { display: none; }
  .admin-surface .site-navigation .store-logo-name { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .site-navigation .navbar-toggler > span,
  .site-navigation .navbar-toggler > span::before,
  .site-navigation .navbar-toggler > span::after,
  .site-navigation :is(.nav-link, .nav-button)::after,
  .storefront-nav-chevron {
    transition: none;
  }
}

/* ---------- Navigation-manager page: shares the admin surface but makes hierarchy explicit ---------- */
.admin-surface .navigation-management-page .page-heading {
  align-items: flex-start;
}

.admin-surface .admin-page-eyebrow {
  margin: 0 0 0.55rem;
  color: var(--moonarrow-color-gold-text);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.admin-surface .page-heading-description {
  max-width: 44rem;
  margin: 0.55rem 0 0;
  color: var(--moonarrow-color-admin-muted);
  font-size: 0.9rem;
}

.admin-surface .navigation-management-note {
  margin: 0 0 1.35rem;
  padding: 0.95rem 1rem;
  color: var(--moonarrow-color-brand-ink-soft);
  background: var(--moonarrow-color-ice-page);
  border: 1px solid var(--moonarrow-color-admin-line);
  border-left: 3px solid var(--moonarrow-color-gold);
  border-radius: var(--moonarrow-radius-frame);
  font-size: 0.84rem;
  line-height: 1.7;
}

.admin-surface .navigation-management-table .navigation-child-row td {
  background: var(--moonarrow-color-ice-page);
}

.admin-surface .navigation-item-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--moonarrow-color-brand-ink);
  font-weight: 700;
}

.admin-surface .navigation-depth-1 {
  padding-left: 1rem;
  color: var(--moonarrow-color-brand-ink-soft);
  font-weight: 600;
}

.admin-surface .navigation-depth-1 > span {
  color: var(--moonarrow-color-gold-text);
}

.admin-surface .navigation-item-meta {
  display: block;
  margin-top: 0.18rem;
  color: var(--moonarrow-color-admin-muted);
  font-size: 0.72rem;
}

.admin-surface .navigation-link-cell {
  max-width: 23rem;
  color: var(--moonarrow-color-admin-muted);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.admin-surface .admin-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.18rem 0.58rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
}

.admin-surface .admin-status-pill.is-enabled {
  color: #0e795c;
  background: #e8f8f2;
}

.admin-surface .admin-status-pill.is-disabled {
  color: #7e4950;
  background: #f9ecee;
}

.admin-surface .navigation-editor-form {
  max-width: 52rem;
}

.admin-surface .navigation-editor-form .form-field {
  display: grid;
  gap: 0.46rem;
  margin-bottom: 1.1rem;
}

.admin-surface .navigation-editor-form .form-field > label,
.admin-surface .navigation-editor-form .form-field-inline label:not(.checkbox-line) {
  color: var(--moonarrow-color-brand-ink);
  font-size: 0.84rem;
  font-weight: 700;
}

.admin-surface .navigation-editor-form small {
  color: var(--moonarrow-color-admin-muted);
  font-size: 0.76rem;
  line-height: 1.6;
}

.admin-surface .navigation-editor-form .form-field-inline {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
  gap: 1.1rem;
  align-items: end;
}

.admin-surface .navigation-editor-form .form-field-inline > div:first-child {
  display: grid;
  gap: 0.46rem;
}

.admin-surface .navigation-boolean-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.2rem;
  min-height: 2.8rem;
  align-items: center;
}

@media (max-width: 767.98px) {
  .admin-surface .navigation-editor-form .form-field-inline {
    grid-template-columns: 1fr;
  }

  .admin-surface .navigation-depth-1 {
    padding-left: 0;
  }
}