/* ===========================================================================
   side-dot-nav.css
   ---------------------------------------------------------------------------
   Owner       : Agent 19 — Loading Overlay + Side-Dot Nav Implementer
   Spec        : architecture/transitions-and-nav.md §8–§16
   Constitution: §4 (logical properties — RTL-safe), §5 (palette via tokens),
                 §9 (visible focus rings), §10.2 (tokens are single source).
   ---------------------------------------------------------------------------
   Behavior
   - Vertical column of dots fixed on the RIGHT edge (RTL-leading via
     `inset-inline-end`). Hidden below 768px (mobile uses top-nav).
   - Each dot is a small circle outlined in brass; active state fills brass
     with a soft glow. Tooltip-on-hover shows the section name on the
     LEADING side (left in RTL, right in LTR).
   - When `[data-suppressed]` attribute is set on the nav (loading-overlay
     active), dots dim to ~0.4 opacity and pointer-events disabled.
   ========================================================================= */


/* --------------------------------------------------------------------------
   1. Container
   -------------------------------------------------------------------------- */

.side-dot-nav {
  /* Position: fixed on the visual RIGHT edge regardless of document
     direction. In RTL, `inset-inline-end` resolves to the visual LEFT
     edge — but the user wants right-edge anchoring for natural eye
     flow. We use the physical `right` property to lock it to right. */
  position: fixed;
  inset-block-start: 50%;
  right: var(--space-6);                 /* 24px from physical right edge */
  transform: translateY(-50%);
  z-index: var(--z-sticky);              /* 100 — below loading-overlay (1000) */

  /* Layout: vertical column with gaps */
  display: flex;
  flex-direction: column;
  gap: var(--space-4);                   /* 16px between dots */

  /* Default visible state */
  opacity: 1;
  pointer-events: auto;
  transition: opacity 240ms var(--ease-out-cinema);
}

/* Hide on mobile (< 768px) — top nav takes over there. */
@media (max-width: 767px) {
  .side-dot-nav {
    display: none;
  }
}

/* Suppressed: while loading-overlay is up, dim and disable. */
.side-dot-nav[data-suppressed] {
  opacity: 0.4;
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   2. Dot (each is an <a>)
   -------------------------------------------------------------------------- */

.side-dot-nav__dot {
  /* Box */
  inline-size: 12px;
  block-size: 12px;
  border-radius: var(--radius-circle);
  border: 1px solid var(--brass);
  background: transparent;

  /* Anchor positioning context */
  position: relative;
  display: block;

  /* Strip default <a> underline / text */
  text-decoration: none;
  color: inherit;

  /* Interaction */
  cursor: pointer;
  transition:
    transform var(--dur-base) var(--ease-out-cinema),
    background-color var(--dur-base) var(--ease-out-cinema),
    box-shadow var(--dur-base) var(--ease-out-cinema);
}

.side-dot-nav__dot:hover {
  transform: scale(1.3);
  background-color: color-mix(in srgb, var(--brass) 30%, transparent);  /* --brass at 30% */
}

/* Placeholder dots — target section not yet in DOM. Muted, non-interactive,
   tooltip suppressed. As soon as the section's id="…" lands and the user
   re-runs init (or just reloads), the dot loses [data-placeholder] and
   becomes a normal dot. */
.side-dot-nav__dot[data-placeholder] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.side-dot-nav__dot[data-placeholder]:hover {
  transform: none;
  background-color: transparent;
}

.side-dot-nav__dot[aria-current="true"] {
  background-color: var(--brass);
  box-shadow: 0 0 12px var(--brass-glow);
}

/* Focus ring per Constitution §9 — 3px brass, sits OUTSIDE the dot. */
.side-dot-nav__dot:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 4px;
}


/* --------------------------------------------------------------------------
   3. Tooltip (hover/focus label) — appears on LEADING side
   -------------------------------------------------------------------------- */

.side-dot-nav__label {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: calc(100% + var(--space-3));   /* 12px past dot LEADING side */
  transform: translateY(-50%) translateX(4px);

  /* Type */
  font-family: var(--font-display-he);
  font-size: var(--text-xs);                       /* 12px */
  letter-spacing: var(--tracking-wide);            /* 0.05em */
  white-space: nowrap;
  color: var(--brass-deep);

  /* Surface — ivory pill w/ hairline brass border, soft drop-shadow.
     Replaces the previous near-black surface that read as a "weird
     black stripe" against the ivory page (user feedback 2026-06-03). */
  background: var(--ivory);
  padding-inline: var(--space-3);                  /* 12px */
  padding-block: 6px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--brass);
  box-shadow: var(--shadow-soft);

  /* Hidden by default */
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms var(--ease-out-cinema),
              transform 200ms var(--ease-out-cinema);
}

.side-dot-nav__dot:hover .side-dot-nav__label,
.side-dot-nav__dot:focus-visible .side-dot-nav__label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}


/* --------------------------------------------------------------------------
   4. Reduced-motion overrides
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .side-dot-nav__dot {
    transition: none;
  }
  .side-dot-nav__label {
    transition: none;
  }
}