/* ==========================================================================
   COMPONENTS & UI MODULES (NAVY SCHOLAR & DUAL THEME LOGO EDITION)
   ========================================================================== */

/* 1. Standalone Centered Logo Header (Clean, balanced size, no shadow) */
.standalone-logo-header {
  width: 100%;
  padding: 2.25rem 1.5rem 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 40;
}

.theme-logo {
  height: clamp(55px, 6.5vw, 82px);
  width: auto;
  max-width: 85vw;
  object-fit: contain;
  filter: none !important;
  box-shadow: none !important;
  display: block;
  margin: 0 auto;
  transition: opacity 0.3s ease;
}

/* Light / Dark Mode Logo Toggle */
html.light .light-mode-logo { display: block; }
html.light .dark-mode-logo { display: none; }
html.dark .light-mode-logo { display: none; }
html.dark .dark-mode-logo { display: block; }

/* 2. Apple-Inspired Floating Command Dock Navigation (Bottom Center) */
.floating-dock-nav {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 9999px;
  padding: 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 20px 45px rgba(10, 25, 47, 0.22), 0 0 1px rgba(37, 99, 235, 0.5);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 95vw;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Section icons scroll horizontally if they don't fit; the toggles after the
   divider stay outside this container so they're never scrolled out of view */
.dock-scroll {
  display: flex;
  align-items: center;
  gap: inherit;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-width: 0;
  /* Breathing room so the hover/active lift and glow (below) have room to
     render without being clipped by overflow-y: hidden above */
  padding: 8px 4px;
  margin: 0 -4px;
}

.dock-scroll::-webkit-scrollbar {
  display: none;
}

.dock-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--on-surface-variant);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  flex-shrink: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.dock-item .material-symbols-outlined {
  font-size: 22px;
}

.dock-item:hover {
  color: var(--secondary);
  background: rgba(37, 99, 235, 0.12);
  transform: translateY(-2px) scale(1.08);
}

.dock-item.active {
  color: #ffffff;
  background: var(--secondary);
  box-shadow: 0 3px 10px var(--secondary-glow);
}

.dock-divider {
  width: 1px;
  height: 20px;
  background: var(--outline-light);
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.dock-action-btn {
  background: transparent;
  border: none;
  color: var(--on-surface-variant);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.dock-action-btn .material-symbols-outlined {
  font-size: 20px;
}

.dock-action-btn:hover {
  color: var(--secondary);
  background: rgba(37, 99, 235, 0.12);
  transform: translateY(-2px);
}

.dock-tooltip {
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--primary);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.dock-item:hover .dock-tooltip,
.dock-action-btn:hover .dock-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Mobile Responsive Floating Dock */
@media (max-width: 768px) {
  .floating-dock-nav {
    bottom: 1rem;
    max-width: calc(100vw - 1rem);
    padding: 0 0.55rem;
    gap: 0.2rem;
    box-shadow: 0 14px 35px rgba(10, 25, 47, 0.35);
  }
  .dock-item {
    width: 44px;
    height: 44px;
  }
  .dock-item span.material-symbols-outlined {
    font-size: 21px !important;
  }
  .dock-action-btn {
    width: 40px;
    height: 40px;
  }
  .dock-action-btn span.material-symbols-outlined {
    font-size: 19px !important;
  }
  .dock-tooltip {
    display: none !important;
  }
  .dock-divider {
    height: 18px;
    margin: 0 0.1rem;
  }
  #sound-toggle-btn {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .floating-dock-nav {
    gap: 0.05rem;
    padding: 0 0.4rem;
  }
  .dock-item {
    width: 40px;
    height: 40px;
  }
  .dock-action-btn {
    width: 36px;
    height: 36px;
  }
}

/* 3. Black System Terminal & Interior Telemetry HUD */
.terminal-window {
  background: #060b13;
  border: 1px solid #1e293b;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(2, 6, 23, 0.7), 0 0 0 1px rgba(30, 41, 59, 0.8);
  display: flex;
  flex-direction: column;
}

.terminal-header {
  background: #0b1322;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #1c2a44;
}

.terminal-dots {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.terminal-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.terminal-dot-red { background: #ef4444; }
.terminal-dot-yellow { background: #eab308; }
.terminal-dot-green { background: #22c55e; }

/* Interior Telemetry Strip inside the black terminal chassis */
.terminal-telemetry-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 1.25rem;
  background: #090e18;
  border-bottom: 1px solid #162238;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #94a3b8;
}

.telemetry-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.telemetry-key {
  color: #64748b;
  font-weight: 500;
}

.telemetry-val {
  color: #e2e8f0;
  font-weight: 600;
}

.terminal-body {
  background: #060b13;
  padding: 1.25rem;
  height: 280px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: #cbd5e1;
  line-height: 1.6;
}

.terminal-body::-webkit-scrollbar {
  width: 6px;
}

.terminal-body::-webkit-scrollbar-track {
  background: #060b13;
}

.terminal-body::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 3px;
}

.terminal-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.terminal-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #f8fafc;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  outline: none;
}

.terminal-input::placeholder {
  color: #475569;
}

.terminal-shortcut-btn {
  background: #0f172a;
  border: 1px solid #1e293b;
  color: #94a3b8;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.terminal-shortcut-btn:hover {
  background: #1e293b;
  color: #60a5fa;
  border-color: #3b82f6;
}

/* 4. Apple-Style 3D Drum Wheel Carousel for Awards */
.apple-haptic-wheel-card {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-light);
  border-radius: 16px;
  padding: 2.5rem;
  position: relative;
  box-shadow: 0 15px 40px rgba(10, 25, 47, 0.06);
}

.wheel-viewport {
  position: relative;
  height: 300px;
  overflow: hidden;
  perspective: 1000px;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
}

.wheel-cylinder {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.wheel-slot {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 64px;
  margin-top: -32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1.15rem;
  gap: 0.5rem;
  border-radius: 10px;
  background: var(--surface-container-low);
  border: 1px solid transparent;
  transition: all 0.25s ease-out;
  cursor: pointer;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .wheel-slot {
    padding: 0.4rem 0.65rem;
    gap: 0.35rem;
    height: 56px;
    margin-top: -28px;
  }
}

.wheel-slot.selected {
  background: var(--surface-container-lowest);
  border-color: var(--secondary);
  box-shadow: 0 6px 20px var(--secondary-glow);
  transform: scale(1.01);
}

.wheel-lens-indicator {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 70px;
  margin-top: -35px;
  border-top: 1.5px solid var(--secondary);
  border-bottom: 1.5px solid var(--secondary);
  background: rgba(37, 99, 235, 0.04);
  pointer-events: none;
  border-radius: 8px;
}

/* 5. Editorial & Experience Cards */
.editorial-card,
.project-card {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-light);
  border-radius: 10px;
  padding: 2rem;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.editorial-card:hover,
.project-card:hover {
  border-color: var(--secondary);
  box-shadow: 0 16px 36px -12px var(--card-glow);
  transform: translateY(-3px);
}

/* Tech Corner Bracket Accents */
.corner-bracket-tl,
.corner-bracket-br {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.corner-bracket-tl {
  top: 0;
  left: 0;
  border-top: 2px solid var(--secondary);
  border-left: 2px solid var(--secondary);
  transform: translate(-3px, -3px);
}

.corner-bracket-br {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid var(--secondary);
  border-right: 2px solid var(--secondary);
  transform: translate(3px, 3px);
}

.editorial-card:hover .corner-bracket-tl,
.editorial-card:hover .corner-bracket-br,
.project-card:hover .corner-bracket-tl,
.project-card:hover .corner-bracket-br {
  opacity: 1;
  transform: translate(0, 0);
}

/* 6. Action Buttons */
.btn-primary-action {
  background-color: var(--secondary);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.85rem 1.75rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px var(--secondary-glow);
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn-primary-action:hover {
  background-color: var(--secondary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--secondary-glow);
}

.btn-secondary-action {
  background-color: transparent;
  color: var(--on-surface);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.85rem 1.75rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: all 0.3s ease;
  border: 1px solid var(--outline);
  text-decoration: none;
  cursor: pointer;
}

.btn-secondary-action:hover {
  border-color: var(--secondary);
  color: var(--secondary);
  background: rgba(37, 99, 235, 0.06);
  transform: translateY(-2px);
}

/* 7. Scroll Progress Bar */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #1e3a8a, #3b82f6, #60a5fa);
  z-index: 1000;
  width: 0%;
  transition: width 0.1s linear;
}

/* 8. Interactive Canvas */
#blueprint-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
}

/* 9. Copy Toast Notification */
.toast-notice {
  position: fixed;
  bottom: 6rem;
  right: 2rem;
  background: var(--primary);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  border-left: 4px solid var(--secondary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transform: translateY(100px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-notice.show {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 100000;
}

@media (max-width: 640px) {
  .toast-notice {
    bottom: 5.5rem;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(50px);
    width: calc(100vw - 2rem);
    max-width: 360px;
    text-align: center;
  }
  .toast-notice.show {
    transform: translateX(-50%) translateY(0);
  }
}

/* 10. Research Spotlight Deck & Projects Carousel */
/* On narrow screens the 3 tab labels don't fit on one line and used to wrap,
   orphaning the 3rd tab onto its own row. Scroll horizontally instead of
   wrapping, same fix as the floating dock nav. Padding + negative margin
   give the active tab's glow room so overflow-x:auto doesn't clip it. */
#research-tab-bar {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 4px;
  margin: -8px -4px;
  min-width: 0;
}

/* Below sm (640px) the parent row becomes flex-col with items-baseline, which
   never stretches this child to its own width — without an explicit width
   here, the bar sizes to its unwrapped (nowrap) content and overflows the
   whole page instead of scrolling internally within itself. Scoped to mobile
   only: at sm+ the parent is flex-row and auto-width already fits fine. */
@media (max-width: 639px) {
  #research-tab-bar {
    width: 100%;
    max-width: 100%;
  }
}

#research-tab-bar::-webkit-scrollbar {
  display: none;
}

.research-tab-btn {
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  background: var(--surface-container-low);
  color: var(--on-surface-variant);
  border: 1px solid var(--outline-light);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}

.research-tab-btn:hover {
  border-color: var(--secondary);
  color: var(--secondary);
}

.research-tab-btn.active {
  background: var(--secondary);
  color: #ffffff;
  border-color: var(--secondary);
  box-shadow: 0 2px 8px var(--secondary-glow);
}

.research-slide {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.research-slide.active {
  display: block;
  animation: fadeInSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.projects-carousel-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0.5rem 0;
}

.projects-carousel-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0.75rem 0.25rem 1.25rem 0.25rem;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.projects-carousel-track::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge */
  width: 0;
  height: 0;
}

.research-carousel-card,
.projects-carousel-card {
  flex: 0 0 310px;
  scroll-snap-align: start;
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-light);
  border-radius: 14px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(10, 25, 47, 0.04);
}

@media (min-width: 768px) {
  .research-carousel-card,
  .projects-carousel-card {
    flex: 0 0 380px;
  }
}

.research-carousel-card:hover,
.projects-carousel-card:hover {
  border-color: var(--secondary);
  box-shadow: 0 20px 40px -15px var(--card-glow);
  transform: translateY(-4px) scale(1.01);
}

/* 11. Upgraded Civic Integration Cards */
.civic-card-enhanced {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-light);
  border-radius: 14px;
  padding: 2rem 2.25rem;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 12px 32px rgba(10, 25, 47, 0.05);
}

.civic-card-enhanced:hover {
  border-color: var(--secondary);
  box-shadow: 0 20px 45px -12px var(--card-glow);
  transform: translateY(-3px);
}

.civic-accent-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--secondary), transparent);
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}

/* 12. Hero Transparent Manifesto Overlay */
.hero-manifesto-glass {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
}

html.dark .hero-manifesto-glass {
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
}

/* Terminal Mobile Optimization */
@media (max-width: 640px) {
  .terminal-telemetry-hud {
    padding: 0.5rem 0.75rem;
    font-size: 0.68rem;
    gap: 0.4rem;
  }
  .terminal-body {
    padding: 0.85rem;
    height: 220px;
    font-size: 0.75rem;
  }
}