/* Exarh — Floating Action Bar + Side-dot nav
 * Lifted from legacy /design/index.html, made self-contained for v3 pages. */

/* ── Side-dot navigation (desktop only, right edge) ──────────────────────── */
#side-dots {
  position: fixed; right: 24px; top: 50%; transform: translateY(-50%);
  z-index: 85; display: flex; flex-direction: column; gap: 22px;
  padding: 10px 6px; border-radius: 20px;
}
@media (max-width: 900px) { #side-dots { display: none; } }
#side-dots a {
  display: flex; align-items: center; justify-content: flex-end;
  text-decoration: none; cursor: pointer; position: relative;
  width: 22px; height: 22px;
}
#side-dots .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(196,147,63,0.4); border: 1.5px solid rgba(196,147,63,0.6);
  transition: width 0.25s ease, height 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  flex-shrink: 0;
}
#side-dots a:hover .dot {
  background: rgba(196,147,63,0.7); border-color: var(--brand-gold);
  box-shadow: 0 0 0 3px rgba(196,147,63,0.14);
}
#side-dots a.active .dot {
  background: var(--brand-gold); border-color: var(--brand-gold);
  width: 15px; height: 15px;
  box-shadow: 0 0 0 4px rgba(196,147,63,0.18);
}
#side-dots .lbl {
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: 11px; font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: #FAF7F0; background: #1B3A5C;
  padding: 5px 9px; border-radius: 6px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  transform: translate(4px, -50%);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
#side-dots a:hover .lbl { opacity: 1; transform: translate(0, -50%); }

#fab-menu {
  position: fixed; right: 20px; bottom: 80px; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--brand-gold); color: #1B3A5C;
  border: 1px solid var(--brand-gold-line);
  box-shadow: 0 8px 24px rgba(196,147,63,0.32), 0 2px 6px rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-family: inherit;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
@media (hover: hover) {
  #fab-menu:hover { background: var(--brand-blue); color: var(--brand-cream); transform: scale(1.05); }
}
#fab-menu[aria-expanded="true"] { background: #1B3A5C; color: #FAF7F0; }
@media (min-width: 901px) { #fab-menu { display: none; } }

#back-to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--brand-blue); color: var(--brand-cream);
  border: 1px solid var(--brand-gold-line);
  box-shadow: 0 6px 20px rgba(27,58,92,0.22), 0 2px 6px rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-family: inherit;
  opacity: 0; pointer-events: none; transform: translateY(8px) scale(0.9);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
}
#back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
@media (hover: hover) {
  #back-to-top:hover { background: var(--brand-gold); color: #1B3A5C; }
}
@media (max-width: 600px) {
  #back-to-top { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); width: 44px; height: 44px; }
  #fab-menu  { right: 14px; bottom: max(76px, calc(env(safe-area-inset-bottom) + 62px)); }
  #fab-sheet { right: 14px; bottom: max(144px, calc(env(safe-area-inset-bottom) + 130px)); }
}

#fab-backdrop {
  position: fixed; inset: 0; z-index: 88;
  background: rgba(16, 24, 40, 0.4); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
#fab-backdrop.visible { opacity: 1; pointer-events: auto; }

#fab-sheet {
  position: fixed; right: 16px; bottom: 152px;
  z-index: 91; width: min(280px, calc(100vw - 32px));
  max-height: calc(100vh - 200px); overflow: auto;
  background: var(--brand-cream); color: var(--text-primary);
  border: 1px solid var(--brand-gold-line); border-radius: 18px;
  box-shadow: 0 20px 60px rgba(16,24,40,0.25);
  opacity: 0; pointer-events: none;
  transform: translateY(8px) scale(0.96); transform-origin: bottom right;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
#fab-sheet.open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
#fab-sheet-inner { padding: 14px; display: flex; flex-direction: column; gap: 2px; }
#fab-sheet-inner a, #fab-sheet-inner button {
  font-family: inherit; font-size: 15px; font-weight: 500;
  color: var(--text-primary); text-decoration: none;
  padding: 11px 14px; border-radius: 10px;
  background: transparent; border: none; cursor: pointer;
  text-align: left; transition: background 0.15s ease;
}
@media (hover: hover) {
  #fab-sheet-inner a:hover, #fab-sheet-inner button:hover { background: var(--brand-gold-soft); }
}
.fab-divider { height: 1px; background: var(--brand-gold-line); margin: 6px 0; }
#fab-theme-toggle {
  margin-top: 4px; display: flex !important; align-items: center !important;
  justify-content: space-between !important;
}
#fab-theme-toggle #fab-theme-state {
  font-size: 11px; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.06em;
}