/* App switcher (Projects / Studio / Monitor + Admin navigation) shared by every header.
   Styled in tactile 3D view across dark bars, warm landing/portal bars, and light Studio bars. */
.appnav {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 6px;
  padding: 5px;
  border-radius: var(--an-radius-pill);
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(8, 18, 14, .34);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .28), 0 1px 0 rgba(255, 255, 255, .08);
  font-size: 12.5px;
  font-weight: 700;
}
.appnav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: var(--an-radius-pill);
  border: 1px solid rgba(255, 255, 255, .24);
  background: linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .08) 100%);
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  opacity: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28),
              0 2.5px 0 rgba(5, 12, 9, .55),
              0 4px 10px rgba(5, 12, 9, .20);
  transform: translateY(0);
  transition: transform var(--an-fast) var(--an-ease),
              box-shadow var(--an-fast) var(--an-ease),
              background var(--an-fast) var(--an-ease),
              color var(--an-fast) var(--an-ease);
}
.appnav-link:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .15) 100%);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40),
              0 3.5px 0 rgba(5, 12, 9, .60),
              0 6px 14px rgba(5, 12, 9, .26);
}
.appnav-link:active {
  transform: translateY(1.5px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20),
              0 1px 0 rgba(5, 12, 9, .55);
}
.appnav-link.on {
  border-color: #ffffff;
  background: linear-gradient(180deg, #ffffff 0%, #e7f1ec 100%);
  color: var(--an-accent);
  font-weight: 800;
  box-shadow: inset 0 1px 0 #ffffff,
              0 3px 0 #95b5a8,
              0 6px 14px rgba(6, 16, 12, .26);
}
.appnav-link[aria-current="page"] { font-weight: 800; }

/* On warm linen headers (landing page & Admin Portal), flip every button to high-contrast 3D ink-on-ivory! */
body.landing .appnav,
body.portal .appnav {
  border-color: #d6c8ad;
  background: #eae0cc;
  box-shadow: inset 0 2px 4px rgba(110, 88, 42, .14), 0 1px 0 rgba(255, 255, 255, .85);
}
body.landing .appnav-link,
body.portal .appnav-link {
  border-color: #d2c3a5;
  background: linear-gradient(180deg, #ffffff 0%, #f5ede0 100%);
  color: var(--an-ink);
  box-shadow: inset 0 1px 0 #ffffff,
              0 2.5px 0 #c2b190,
              0 5px 10px rgba(96, 76, 32, .10);
}
body.landing .appnav-link:hover,
body.portal .appnav-link:hover {
  background: linear-gradient(180deg, #ffffff 0%, #fbf6ec 100%);
  color: var(--an-accent);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 #ffffff,
              0 3.5px 0 #b3a07c,
              0 7px 14px rgba(96, 76, 32, .15);
}
body.landing .appnav-link.on,
body.portal .appnav-link.on {
  border-color: var(--an-accent-strong);
  background: linear-gradient(180deg, var(--an-accent-bright) 0%, var(--an-accent) 100%);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36),
              0 3px 0 var(--an-accent-strong),
              0 6px 14px rgba(20, 97, 79, .26);
}

/* On a light bar (Studio) the switcher flips to 3D ink-on-paper pills. */
.st-top .appnav {
  border-color: var(--an-line-strong);
  background: var(--an-line-soft);
  box-shadow: inset 0 2px 4px rgba(18, 42, 32, .08);
}
.st-top .appnav-link {
  border-color: var(--an-line-strong);
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f2 100%);
  color: var(--an-ink);
  box-shadow: inset 0 1px 0 #ffffff,
              0 2.5px 0 #c2cec6,
              0 4px 9px rgba(18, 42, 32, .08);
}
.st-top .appnav-link:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbf9 100%);
  color: var(--an-accent);
  box-shadow: inset 0 1px 0 #ffffff,
              0 3.5px 0 #b1c0b7,
              0 6px 12px rgba(18, 42, 32, .12);
}
.st-top .appnav-link.on {
  border-color: var(--an-accent-strong);
  background: linear-gradient(180deg, var(--an-accent-bright) 0%, var(--an-accent) 100%);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34),
              0 3px 0 var(--an-accent-strong),
              0 6px 12px rgba(20, 97, 79, .22);
}

@media (max-width: 860px) {
  .appnav {
    gap: 5px;
    padding: 4px;
    border-radius: 14px;
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .appnav::-webkit-scrollbar { display: none; }
  .appnav-link { padding: 5px 11px; font-size: 11.5px; flex: 0 0 auto; }
}
@media (max-width: 480px) {
  .appnav { width: 100%; justify-content: flex-start; }
  .appnav-link { flex: 1 0 auto; text-align: center; padding: 6px 10px; font-size: 11.5px; }
}