/**
 * Royal Sovereign Crown — shared shell styles.
 *
 * Provides:
 *   - Sidebar (non-expandable, left-border active, tooltip on hover)
 *   - Protocol background (fixed, behind everything, animated subtle mesh)
 *   - Scroll-reveal animation utility (.reveal → .is-visible)
 *   - Section-illustration utility (.section-art)
 *
 * Pages must define their own design tokens (--bg, --gold, etc.)
 * before this file loads. See public/index.html for the canonical
 * token set.
 *
 * LicenseRef-SovereignProtocol-1.0
 */

/* ════════════════════════════════════════════════════════════════
   PROTOCOL BACKGROUND — fixed, behind all content
════════════════════════════════════════════════════════════════ */
.protocol-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.55;
}
[data-theme="light"] .protocol-bg { opacity: 0.4; }

/* Hex / dot grid */
.protocol-bg::before {
  content: '';
  position: absolute;
  inset: -2px;
  background-image:
    radial-gradient(circle at 1px 1px, var(--gold-glow) 1px, transparent 0);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 80%);
}

/* Faint scan line that drifts vertically */
.protocol-bg::after {
  content: '';
  position: absolute;
  left: 0; right: 0; height: 280px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--gold-glow) 50%,
    transparent 100%);
  filter: blur(14px);
  animation: rsc-scan 22s linear infinite;
  opacity: 0.35;
}

@keyframes rsc-scan {
  0%   { transform: translateY(-300px); }
  100% { transform: translateY(110vh); }
}

/* Pulsing nodes */
.protocol-bg .node {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold);
  opacity: 0;
  animation: rsc-pulse 9s ease-in-out infinite;
}
.protocol-bg .node.n1 { top: 18%; left: 22%; animation-delay: 0s; }
.protocol-bg .node.n2 { top: 64%; left: 80%; animation-delay: 3s; }
.protocol-bg .node.n3 { top: 38%; left: 60%; animation-delay: 6s; }
.protocol-bg .node.n4 { top: 82%; left: 30%; animation-delay: 1.5s; }

@keyframes rsc-pulse {
  0%, 100% { opacity: 0;   transform: scale(0.6); }
  20%      { opacity: 0.7; transform: scale(1.4); }
  60%      { opacity: 0;   transform: scale(2.2); }
}

/* Body must allow content to layer over the bg */
body { position: relative; z-index: 1; }
.main-content, .sidebar { position: relative; z-index: 2; }
.protocol-bg { z-index: 0; }

/* ════════════════════════════════════════════════════════════════
   SIDEBAR — byte-for-byte restoration of the original
   from the very first index.html, with only these explicit changes
   layered on top:
     1. non-expandable (overflow visible so tooltips escape)
     2. active border on the LEFT (was right)
     3. tooltip on every icon (already present in original)
     4. group containers for categorization (no visible "divider" line)
     5. expand button removed
   Everything else — colors, spacing, padding, gap, hover, fonts — is
   the original verbatim.
════════════════════════════════════════════════════════════════ */
.sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sidebar-w, 56px);
  background: var(--bg-mid);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 100;
  overflow: visible;                /* CHANGED from hidden — tooltip needs escape */
}

/* Crown brand at top — centered crest, brand-text hidden completely */
.sidebar-brand {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow: hidden;
  text-decoration: none;
}

.sidebar-brand .glyph {
  font-size: 1.85rem;              /* bigger so the crown reads as a crest */
  color: var(--gold);
  font-family: 'Cormorant Garamond', serif;
  line-height: 1;
  text-align: center;
}

.sidebar-brand .brand-text {
  display: none;                   /* fully removed — was opacity:0 still in layout */
}

/* Nav rail — original verbatim */
.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  width: 100%;
  overflow-y: auto;
  overflow-x: visible;             /* CHANGED from hidden — tooltip needs escape */
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

/* Group container — categorization. Subtle separator between groups. */
.nav-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.nav-group + .nav-group {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
/* Hidden marker (legacy) */
.nav-group-divider { display: none; }

/* Nav items — original padding/font, BUT centered now that labels are gone */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;          /* center the icon — no label takes layout space */
  padding: 11px 0;
  color: var(--text-muted);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  width: 100%;
}

/* Original hover/active — gold-glow background, gold text */
.nav-item:hover, .nav-item.active {
  color: var(--gold);
  background: var(--gold-glow);
}

/* The ONLY change to the active indicator: LEFT instead of RIGHT */
.nav-item.active {
  border-left: 2px solid var(--gold);
  padding-left: 0;                  /* keep icon centered; border sits flush left */
}
/* Compensate so the icon doesn't shift right when active */
.nav-item.active .nav-icon { margin-right: 2px; }

/* Icon wrapper — original verbatim */
.nav-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Label — fully removed from layout (was opacity:0 + width 38px stealing space) */
.nav-label {
  display: none;
}

/* Tooltip — original verbatim */
.nav-item .tooltip {
  position: absolute;
  left: calc(var(--sidebar-w, 56px) + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-mid);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.75rem;
  padding: 5px 10px;
  border-radius: var(--radius, 6px);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
  z-index: 200;
}

.nav-item:hover .tooltip { opacity: 1; }

/* Sidebar bottom — theme toggle only. Original layout, no expand button. */
.sidebar-bottom {
  width: 100%;
  border-top: 1px solid var(--border);
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-btn {
  display: flex;
  align-items: center;
  justify-content: center;          /* center icon */
  padding: 10px 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  transition: color var(--transition);
  width: 100%;
  white-space: nowrap;
  border: none;
  background: none;
  cursor: pointer;
}

.sidebar-btn:hover { color: var(--gold); }

.sidebar-btn .nav-icon svg { width: 16px; height: 16px; }

.sidebar-btn .btn-label { display: none; }

/* Main content offset */
.main-content { margin-left: var(--sidebar-w, 56px); }

/* ════════════════════════════════════════════════════════════════
   SCROLL REVEAL — IntersectionObserver-driven
════════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s cubic-bezier(.2,.7,.2,1),
              transform 0.85s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}

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

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-stagger.is-visible > *           { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1)  { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2)  { transition-delay: 0.12s; }
.reveal-stagger.is-visible > *:nth-child(3)  { transition-delay: 0.19s; }
.reveal-stagger.is-visible > *:nth-child(4)  { transition-delay: 0.26s; }
.reveal-stagger.is-visible > *:nth-child(5)  { transition-delay: 0.33s; }
.reveal-stagger.is-visible > *:nth-child(6)  { transition-delay: 0.40s; }
.reveal-stagger.is-visible > *:nth-child(7)  { transition-delay: 0.47s; }
.reveal-stagger.is-visible > *:nth-child(8)  { transition-delay: 0.54s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  .protocol-bg { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   SECTION ILLUSTRATIONS — SVG art alongside content
════════════════════════════════════════════════════════════════ */
.section-art {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  opacity: 0.85;
}

.section-art svg {
  width: 100%;
  max-width: 320px;
  height: auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.section-with-art {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 3rem;
  align-items: center;
}

@media (max-width: 900px) {
  .section-with-art { grid-template-columns: 1fr; }
  .section-art { order: -1; max-width: 220px; margin: 0 auto 1.5rem; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE — sidebar transforms into a horizontal scrolling FOOTER
   Same items, same active state, same tooltips — just laid out as a
   horizontal bar pinned to the bottom of the viewport.
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Suppress any per-page legacy mobile nav (older pages had their own) */
  .mobile-nav { display: none !important; }

  /* Sidebar → bottom horizontal bar, full-width, scrollable */
  .sidebar {
    top: auto;
    left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 56px;
    flex-direction: row;
    align-items: stretch;
    border-right: none;
    border-top: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }

  /* Brand becomes a sticky-left chip */
  .sidebar-brand {
    width: 56px;
    height: 100%;
    border-bottom: none;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
  }
  .sidebar-brand .glyph { font-size: 1.6rem; }

  /* Nav rail flips to row */
  .sidebar-nav {
    flex: 1;
    flex-direction: row;
    height: 100%;
    width: auto;
    padding: 0;
    overflow: visible;
  }

  /* Groups become inline strips, separator on the LEFT instead of TOP */
  .nav-group {
    flex-direction: row;
    width: auto;
    height: 100%;
    align-items: stretch;
  }
  .nav-group + .nav-group {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    margin-left: 6px;
    padding-left: 6px;
    border-left: 1px solid var(--border);
  }

  /* Items: 56px wide squares laid horizontally */
  .nav-item {
    width: 56px;
    height: 100%;
    padding: 0;
    flex-shrink: 0;
  }

  /* Active indicator → top border (was left border) */
  .nav-item.active {
    border-left: none;
    border-top: 2px solid var(--gold);
    padding-top: 0;
  }
  .nav-item.active .nav-icon { margin-right: 0; margin-bottom: 2px; }

  /* Tooltip pops UP (above the icon) instead of right of it */
  .nav-item .tooltip {
    left: 50%;
    top: auto;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
  }

  /* Sidebar bottom → right-edge chip */
  .sidebar-bottom {
    border-top: none;
    border-left: 1px solid var(--border);
    flex-direction: row;
    width: 56px;
    height: 100%;
    padding: 0;
    flex-shrink: 0;
  }
  .sidebar-btn {
    width: 56px;
    height: 100%;
    padding: 0;
  }

  /* Main content: no left margin, but reserve bottom space for the bar */
  .main-content {
    margin-left: 0;
    padding-bottom: 56px;
  }

  /* For pages without .main-content wrapper, body padding handles it */
  body {
    padding-bottom: 56px;
  }
}