/**
 * @file
 * LearnAbout component styles: buttons, cards, progress bars, navigation,
 * specimens, labels, dots, and form elements.
 */

/* =============================================================================
   Buttons
   ============================================================================= */

/* Primary — green */
.la-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--la-space-sm);
  background: var(--la-green);
  color: var(--la-cream);
  font-family: var(--la-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 10px 24px;
  border: none;
  border-radius: var(--la-radius-md);
  cursor: pointer;
  transition: background var(--la-transition-base);
  text-decoration: none;
}

.la-btn-primary:hover {
  background: #3D5736;
  color: var(--la-cream);
}

/* Secondary — outlined */
.la-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--la-space-sm);
  background: transparent;
  color: var(--la-green);
  border: 1px solid var(--la-green);
  font-family: var(--la-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: var(--la-radius-md);
  cursor: pointer;
  transition: all var(--la-transition-base);
  text-decoration: none;
}

.la-btn-secondary:hover {
  background: var(--la-green);
  color: var(--la-cream);
}

/* Gold accent — for achievements, CTAs */
.la-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--la-space-sm);
  background: var(--la-gold);
  color: white;
  font-family: var(--la-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 10px 24px;
  border: none;
  border-radius: var(--la-radius-md);
  cursor: pointer;
  transition: background var(--la-transition-base);
  text-decoration: none;
}

.la-btn-gold:hover {
  background: #A07E34;
}

/* Disabled state */
.la-btn-primary:disabled,
.la-btn-secondary:disabled,
.la-btn-gold:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Small button variant */
.la-btn--sm {
  font-size: 0.75rem;
  padding: 6px 16px;
}

/* Focus states */
.la-btn-primary:focus-visible,
.la-btn-secondary:focus-visible,
.la-btn-gold:focus-visible {
  box-shadow: 0 0 0 3px rgba(74, 103, 65, 0.25);
  outline: none;
}

/* =============================================================================
   Cards
   ============================================================================= */

.la-card {
  background: white;
  border: 1px solid var(--la-border-light);
  border-radius: var(--la-radius-md);
  padding: var(--la-space-lg);
  box-shadow: var(--la-shadow-sm);
  transition: all var(--la-transition-base);
}

.la-card:hover {
  border-color: var(--la-gold);
  box-shadow: var(--la-shadow-hover);
}

.la-card__label {
  font-family: var(--la-font-body);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--la-gold);
  margin-bottom: var(--la-space-sm);
}

.la-card__title {
  font-family: var(--la-font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--la-text-primary);
  margin-bottom: var(--la-space-sm);
}

.la-card__desc {
  font-size: 0.875rem;
  color: var(--la-text-secondary);
  line-height: 1.5;
  margin-bottom: var(--la-space-md);
}

/* Card reward badge (top right) */
.la-card__reward {
  position: absolute;
  top: var(--la-space-md);
  right: var(--la-space-md);
  font-family: var(--la-font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--la-brass);
}

/* =============================================================================
   Progress Bar (XP / Field Notes)
   ============================================================================= */

.la-xp-bar {
  height: 6px;
  background: rgba(44, 33, 25, 0.07);
  border-radius: 3px;
  overflow: hidden;
}

.la-xp-bar__fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--la-green), var(--la-gold));
  transition: width var(--la-transition-slow);
}

/* Accessible progress bar */
.la-xp-bar[role="progressbar"] {
  position: relative;
}

/* Size variants */
.la-xp-bar--sm {
  height: 4px;
}

.la-xp-bar--inline {
  display: inline-block;
  width: 48px;
  height: 4px;
  vertical-align: middle;
}

/* =============================================================================
   Navigation Bar (Top Bar)
   ============================================================================= */

.la-topbar {
  background: var(--la-ink);
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--la-space-lg);
}

.la-topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--la-space-sm);
  font-family: var(--la-font-display);
  color: var(--la-cream);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.la-topbar__brand img,
.la-topbar__brand svg {
  height: 36px;
  width: auto;
}

/* Mobile nav — off-screen panel (base/mobile-first) */
.la-topbar__nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 280px;
  height: 100vh;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--la-space-2xl) var(--la-space-lg);
  transition: right var(--la-transition-slow);
  z-index: var(--la-z-modal);
  box-shadow: var(--la-shadow-lg);
}

.la-topbar__nav.is-open {
  right: 0;
}

.la-topbar__nav-item {
  font-family: var(--la-font-body);
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  transition: color var(--la-transition-base);
  text-decoration: none;
  /* Mobile defaults */
  height: auto;
  padding: var(--la-space-md) 0;
  border-bottom: 1px solid var(--la-border-light);
  color: var(--la-text-secondary);
}

.la-topbar__nav-item:hover {
  color: var(--la-text-primary);
}

.la-topbar__nav-item--active {
  color: var(--la-green);
}

/* Desktop-only nav items — hidden on mobile to keep topbar clean */
.la-topbar__nav-item--desktop {
  display: none;
}

@media (min-width: 768px) {
  .la-topbar__nav-item--desktop {
    display: inline-flex;
  }
}

/* Mobile nav toggle — visible by default */
.la-topbar__toggle {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--la-space-sm);
}

.la-topbar__toggle span {
  width: 20px;
  height: 2px;
  background: var(--la-cream);
  border-radius: 1px;
  transition: all var(--la-transition-base);
}

/* Focus states — topbar */
.la-topbar__brand:focus-visible,
.la-topbar__nav-item:focus-visible,
.la-topbar__toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(74, 103, 65, 0.2);
  outline: none;
}

.la-topbar__notes {
  font-family: var(--la-font-display);
  font-size: 0.6875rem;
  color: var(--la-brass);
}

.la-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--la-space-md);
}

/* Desktop nav — inline topbar (tablet+) */
@media (min-width: 768px) {
  .la-topbar__toggle {
    display: none;
  }

  .la-topbar__nav {
    position: static;
    width: auto;
    max-width: none;
    height: 100%;
    background: transparent;
    flex-direction: row;
    align-items: center;
    padding: 0;
    box-shadow: none;
    gap: 0;
  }

  .la-topbar__nav-item {
    color: rgba(245, 240, 232, 0.4);
    padding: 0 var(--la-space-md);
    height: 52px;
    border-bottom: 2px solid transparent;
  }

  .la-topbar__nav-item:hover {
    color: rgba(245, 240, 232, 0.7);
  }

  .la-topbar__nav-item--active {
    color: var(--la-cream);
    border-bottom-color: var(--la-brass);
  }
}

/* ── Drupal menu blocks inside topbar nav ── */
/* Drupal renders: <nav id="block-learnabout-learnaboutnavigation">
     <ul><li><a>…</a></li></ul></nav>
   No .menu or .menu-item classes — target raw elements inside .la-topbar__nav. */

.la-topbar__nav > nav,
.la-topbar__nav > div {
  display: contents;
}

.la-topbar__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.la-topbar__nav li a {
  font-family: var(--la-font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: color var(--la-transition-base),
              border-color var(--la-transition-base);
  /* Mobile: stacked in off-canvas panel */
  padding: var(--la-space-md) 0;
  border-bottom: 1px solid var(--la-border-light);
  color: var(--la-text-secondary);
}

.la-topbar__nav li a:hover {
  color: var(--la-text-primary);
}

.la-topbar__nav li a.is-active {
  color: var(--la-green);
  font-weight: 600;
}

.la-topbar__nav li a:focus-visible {
  box-shadow: 0 0 0 3px rgba(74, 103, 65, 0.2);
  outline: none;
  border-radius: var(--la-radius-sm);
}

/* Desktop: horizontal items inside the dark topbar */
@media (min-width: 768px) {
  .la-topbar__nav ul {
    flex-direction: row;
    align-items: center;
    height: 100%;
  }

  .la-topbar__nav li a {
    color: rgba(245, 240, 232, 0.5);
    padding: 0 var(--la-space-md);
    height: 52px;
    border-bottom: 2px solid transparent;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
  }

  .la-topbar__nav li a:hover {
    color: rgba(245, 240, 232, 0.8);
    background: transparent;
  }

  .la-topbar__nav li a.is-active {
    color: var(--la-cream);
    border-bottom-color: var(--la-brass);
    background: transparent;
  }
}

/* =============================================================================
   Breadcrumbs
   ============================================================================= */
/* Drupal renders: <div id="block-learnabout-breadcrumbs">
     <nav><ol><li><a>…</a></li></ol></nav></div>
   Uses ID selector — no CSS class on the wrapper or inner nav. */

#block-learnabout-breadcrumbs {
  padding: var(--la-space-xs) 0;
  border-bottom: 1px solid var(--la-border-light);
}

#block-learnabout-breadcrumbs nav {
  margin: 0;
}

#block-learnabout-breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

#block-learnabout-breadcrumbs li {
  display: flex;
  align-items: center;
  font-family: var(--la-font-display);
  font-size: 0.6875rem;
  font-style: italic;
  color: var(--la-text-muted);
  letter-spacing: 0.2px;
  line-height: 1;
}

/* Separator: a small chevron between crumbs */
#block-learnabout-breadcrumbs li + li::before {
  content: "\203A";
  display: inline-block;
  margin: 0 6px;
  font-style: normal;
  font-size: 0.75rem;
  color: var(--la-text-hint);
}

#block-learnabout-breadcrumbs a {
  color: var(--la-text-muted);
  text-decoration: none;
  transition: color var(--la-transition-base);
  padding: 2px 0;
}

#block-learnabout-breadcrumbs a:hover {
  color: var(--la-green);
}

#block-learnabout-breadcrumbs a:focus-visible {
  box-shadow: 0 0 0 2px rgba(74, 103, 65, 0.2);
  outline: none;
  border-radius: 2px;
}

/* Current page (last crumb, typically no link) */
#block-learnabout-breadcrumbs li:last-child {
  color: var(--la-text-secondary);
  font-weight: 500;
  font-style: normal;
}

/* =============================================================================
   Specimen Cards
   ============================================================================= */

.la-specimen {
  position: relative;
  background: white;
  border-radius: var(--la-radius-md);
  padding: 22px 18px;
  text-align: center;
  box-shadow: var(--la-shadow-sm);
  border: 1px solid var(--la-border-light);
  transition: transform var(--la-transition-base),
              box-shadow var(--la-transition-base);
}

.la-specimen:hover {
  transform: translateY(-2px);
  box-shadow: var(--la-shadow-hover);
}

.la-specimen:focus-visible {
  box-shadow: 0 0 0 3px rgba(74, 103, 65, 0.2);
  outline: none;
}

.la-specimen__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--la-space-sm);
}

.la-specimen__name {
  font-family: var(--la-font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: var(--la-space-xs);
}

.la-specimen__type {
  font-size: 0.625rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--la-text-secondary);
}

.la-specimen__rarity {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 0.5rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--la-text-hint);
}

/* Rarity-specific borders */
.la-specimen--common { border-color: rgba(74, 103, 65, 0.15); }
.la-specimen--uncommon { border-color: rgba(196, 112, 75, 0.15); }
.la-specimen--rare { border-color: rgba(59, 89, 152, 0.15); }
.la-specimen--legendary {
  border-color: rgba(184, 146, 63, 0.25);
  box-shadow: 0 0 12px rgba(184, 146, 63, 0.08);
}

/* Locked specimen */
.la-specimen--locked {
  opacity: 0.4;
  filter: grayscale(0.6);
}

/* =============================================================================
   Collection Dots
   ============================================================================= */

.la-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--la-radius-round);
  flex-shrink: 0;
  display: inline-block;
}

.la-dot--music { background: var(--la-collection-music); }
.la-dot--math { background: var(--la-collection-math); }
.la-dot--science { background: var(--la-collection-science); }
.la-dot--language { background: var(--la-collection-language); }
.la-dot--history { background: var(--la-collection-history); }

/* =============================================================================
   Rarity Badge
   ============================================================================= */

.la-rarity-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--la-space-xs);
  font-family: var(--la-font-body);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--la-radius-sm);
}

.la-rarity-badge--common {
  color: var(--la-rarity-common);
  background: rgba(74, 103, 65, 0.08);
}

.la-rarity-badge--uncommon {
  color: var(--la-rarity-uncommon);
  background: rgba(196, 112, 75, 0.08);
}

.la-rarity-badge--rare {
  color: var(--la-rarity-rare);
  background: rgba(59, 89, 152, 0.08);
}

.la-rarity-badge--legendary {
  color: var(--la-rarity-legendary);
  background: rgba(184, 146, 63, 0.1);
}

/* =============================================================================
   Streak Counter
   ============================================================================= */

.la-streak {
  display: inline-flex;
  align-items: center;
  gap: var(--la-space-xs);
  font-family: var(--la-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--la-terracotta);
}

.la-streak__count {
  font-family: var(--la-font-display);
  font-size: 1.25rem;
  font-weight: 700;
}

/* =============================================================================
   Scroll-In Animations
   ============================================================================= */

.la-card,
.la-study-card,
.la-specimen,
.la-analytics-card,
.la-student-card,
.la-action-card,
.la-section {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--la-transition-slow), transform var(--la-transition-slow);
}

.la-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Skip animation when user prefers reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .la-card,
  .la-study-card,
  .la-specimen,
  .la-analytics-card,
  .la-student-card,
  .la-action-card,
  .la-section {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =============================================================================
   Volume-Up Celebration Overlay
   ============================================================================= */

.la-volume-up {
  position: fixed;
  inset: 0;
  z-index: var(--la-z-toast);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(44, 33, 25, 0.5);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.la-volume-up--visible {
  opacity: 1;
}

.la-volume-up__content {
  text-align: center;
  background: white;
  padding: var(--la-space-2xl) var(--la-space-xl);
  border-radius: var(--la-radius-xl);
  box-shadow: var(--la-shadow-lg);
  transform: scale(0.8);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.la-volume-up--visible .la-volume-up__content {
  transform: scale(1);
}

.la-volume-up__icon {
  font-size: 3.5rem;
  line-height: 1;
  margin-bottom: var(--la-space-sm);
}

.la-volume-up__title {
  font-family: var(--la-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--la-text-primary);
  margin-bottom: var(--la-space-xs);
}

.la-volume-up__level {
  font-family: var(--la-font-accent);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--la-gold);
}

/* =============================================================================
   Specimen Mini (Sidebar Icons)
   ============================================================================= */

.la-specimen-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.la-specimen-mini__icon {
  width: 32px;
  height: 32px;
}

.la-specimen-mini--locked {
  opacity: 0.35;
  filter: grayscale(0.7);
}

/* =============================================================================
   Specimen Detail Modal
   ============================================================================= */

.la-specimen-detail {
  position: fixed;
  inset: 0;
  z-index: var(--la-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--la-space-md);
}

.la-specimen-detail__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(44, 33, 25, 0.5);
}

.la-specimen-detail__card {
  position: relative;
  background: white;
  border-radius: var(--la-radius-md);
  box-shadow: var(--la-shadow-lg);
  padding: var(--la-space-2xl) var(--la-space-xl);
  width: 100%;
  text-align: center;
  animation: la-specimen-scale-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes la-specimen-scale-in {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.la-specimen-detail__close {
  position: absolute;
  top: var(--la-space-md);
  right: var(--la-space-md);
  background: none;
  border: none;
  color: var(--la-text-muted);
  cursor: pointer;
  padding: var(--la-space-xs);
  border-radius: var(--la-radius-sm);
  transition: color var(--la-transition-base);
}

.la-specimen-detail__close:hover {
  color: var(--la-text-primary);
}

.la-specimen-detail__icon {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--la-space-md);
}

.la-specimen-detail__icon img {
  width: 96px;
  height: 96px;
}

.la-specimen-detail__name {
  font-family: var(--la-font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--la-text-primary);
  margin-bottom: var(--la-space-sm);
}

.la-specimen-detail__rarity {
  margin-bottom: var(--la-space-md);
}

.la-specimen-detail__description {
  font-size: 0.875rem;
  color: var(--la-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--la-space-lg);
}

.la-specimen-detail__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--la-space-lg);
  font-size: 0.75rem;
  color: var(--la-text-muted);
}

.la-specimen-detail__earned::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: var(--la-space-xs);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239b8e7e' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-size: contain;
  vertical-align: middle;
}

.la-specimen-detail__xp {
  font-weight: 600;
  color: var(--la-gold);
}

@media (min-width: 768px) {
  .la-specimen-detail {
    padding: var(--la-space-lg);
  }

  .la-specimen-detail__card {
    max-width: 400px;
    border-radius: var(--la-radius-xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .la-specimen-detail__card {
    animation: none;
  }
}

/* =============================================================================
   Student Navigation (topbar / sidebar)
   ============================================================================= */

.la-student-nav {
  padding: var(--la-space-md);
}

.la-student-nav__header {
  margin-bottom: var(--la-space-md);
}

.la-student-nav__name {
  display: block;
  font-family: var(--la-font-display);
  font-size: 1rem;
  font-weight: 600;
}

.la-student-nav__rank {
  display: block;
  font-size: 0.75rem;
  color: var(--la-text-secondary);
  margin-top: 2px;
}

.la-student-nav__notes {
  color: var(--la-brass);
  font-family: var(--la-font-display);
  font-size: 0.6875rem;
}

.la-student-nav__switcher {
  margin-top: var(--la-space-sm);
}

.la-student-nav__select {
  font-size: 0.8125rem;
  padding: 6px 10px;
}

.la-student-nav__links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.la-student-nav__item {
  list-style: none;
}

.la-student-nav__link {
  display: flex;
  align-items: center;
  gap: var(--la-space-sm);
  padding: var(--la-space-sm) var(--la-space-md);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--la-text-secondary);
  border-radius: var(--la-radius-md);
  transition: all var(--la-transition-base);
}

.la-student-nav__link:hover {
  background: rgba(44, 33, 25, 0.04);
  color: var(--la-text-primary);
}

.la-student-nav__link:focus-visible {
  box-shadow: 0 0 0 3px rgba(74, 103, 65, 0.2);
  outline: none;
}

.la-student-nav__item.is-active .la-student-nav__link {
  background: rgba(74, 103, 65, 0.08);
  color: var(--la-green);
  font-weight: 600;
}

/* Nav children (course sub-links under Field Guide) */
.la-student-nav__children {
  list-style: none;
  margin: 0;
  padding: 0 0 0 calc(var(--la-space-md) + 20px);
}

.la-student-nav__child-item {
  list-style: none;
}

.la-student-nav__child-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--la-space-xs) var(--la-space-md);
  font-size: 0.75rem;
  color: var(--la-text-muted);
  border-radius: var(--la-radius-sm);
  transition: all var(--la-transition-base);
  text-decoration: none;
}

.la-student-nav__child-link:hover {
  color: var(--la-text-primary);
  background: rgba(44, 33, 25, 0.04);
}

.la-student-nav__child-item.is-active .la-student-nav__child-link {
  color: var(--la-green);
  font-weight: 600;
}

.la-student-nav__child-count {
  font-size: 0.6875rem;
  color: var(--la-text-hint);
  min-width: 16px;
  text-align: center;
}

.la-student-nav__footer {
  margin-top: var(--la-space-md);
  padding-top: var(--la-space-md);
  border-top: 1px solid var(--la-border-light);
}

/* Student nav in topbar context (desktop inline) */
@media (min-width: 768px) {
  .la-topbar .la-student-nav {
    display: flex;
    align-items: center;
    gap: var(--la-space-md);
    padding: 0;
    height: 100%;
  }

  .la-topbar .la-student-nav__header {
    margin-bottom: 0;
  }

  .la-topbar .la-student-nav__name {
    color: var(--la-cream);
    font-size: 0.875rem;
  }

  .la-topbar .la-student-nav__rank {
    color: var(--la-text-on-dark-secondary);
  }

  .la-topbar .la-student-nav__links {
    flex-direction: row;
    height: 100%;
  }

  .la-topbar .la-student-nav__link {
    color: rgba(245, 240, 232, 0.4);
    padding: 0 var(--la-space-md);
    height: 52px;
    border-bottom: 2px solid transparent;
    border-radius: 0;
  }

  .la-topbar .la-student-nav__link:hover {
    color: rgba(245, 240, 232, 0.7);
    background: transparent;
  }

  .la-topbar .la-student-nav__item.is-active .la-student-nav__link {
    color: var(--la-cream);
    border-bottom-color: var(--la-brass);
    background: transparent;
  }

  .la-topbar .la-student-nav__footer {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
    margin-left: var(--la-space-sm);
  }

  .la-topbar .la-student-nav__switcher {
    margin-top: 0;
  }

  .la-topbar .la-student-nav__select {
    background: rgba(245, 240, 232, 0.1);
    color: var(--la-cream);
    border-color: rgba(245, 240, 232, 0.2);
    font-size: 0.75rem;
    padding: 4px 8px;
  }
}