/* ============================================================
   Curiosity Current — Portal Nav (shared module)
   ------------------------------------------------------------
   Visual contract per spec 12_portal_architecture.md v0.1.3,
   "Portal nav (shared across ALL portal surfaces)".

   Rules:
     - Class names are namespaced `pn-*` so they cannot collide
       with per-surface chrome.
     - All four portal surfaces wear this nav identically. No
       surface-local overrides; if a surface needs to shift its
       own chrome down, it does so against `body.pn-mounted` /
       `body.pn-mounted-noback` (set by the JS module).
     - Tokens align with INSIGHT_CARD_DESIGN_TOKENS.md
       (Montserrat, dark glass, 10px-multiple radii).
   ============================================================ */

/* ---------------- Container ---------------- */
.pn-root {
  position: fixed;
  top: 10px;                                            /* breathing room from viewport edge */
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;                                          /* below modal/share toast (z=100), above viz chrome */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;                                 /* row opts back in; gaps stay clickthrough */
  font-family: 'Merriweather Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  width: max-content;
  max-width: calc(100vw - 24px);
}

/* The single nav row opts back into pointer events. */
.pn-row {
  pointer-events: auto;
}

/* ---------------- Single row — star | back-slot | entries | reserved ----------------
   The row is a 4-column grid so the centered Who/What/Why entries stay
   horizontally centered regardless of star/back-link widths:
     - .pn-left-slot   (auto, left)   — favorites star (anchored to leftmost edge)
     - .pn-back-slot   (1fr, left)    — variable-width smart back-link
     - .pn-entries     (auto, center) — Who / What / Why entries (justify-self: center)
     - .pn-right-slot  (1fr, right)   — reserved for future actions; balances the grid
   The 1fr/1fr balancing on the back + right slots keeps the centered cluster
   visually centered relative to the page. The star sits in its own auto track
   on the far left so it doesn't push the centered cluster around as the
   back-link label changes width.
   The back-link slot collapses to width:0 + visibility:hidden when the
   back-link is hidden — entries do not shift relative to the page.
*/
.pn-row-entries {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  align-items: center;
  position: relative;
  isolation: isolate;
  background: rgba(18, 18, 20, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 9999px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.30);
  height: 44px;
  padding: 0 16px;
  gap: 16px;
}

/* Gradient border ring — same inset-overflow technique as .sb-field::before */
.pn-row-entries::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 9999px;
  background: var(--grad-stat-pill, linear-gradient(90deg, #E8348C 0%, #8E3FB8 35%, #5B36A6 65%, #1F2E8C 100%));
  opacity: 0.70;
  pointer-events: none;
  z-index: -1;
}

.pn-entries {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-self: center;
}

/* Left-side slot — holds the favorites star button. Justifies to the start of
   the grid track so the star sits flush left, mirroring the slide-out panel
   that appears from the left edge. */
.pn-left-slot {
  justify-self: start;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pn-back-slot {
  display: flex;
  align-items: center;
  justify-self: start;
  min-width: 0;                                         /* allow truncation inside */
  overflow: hidden;
}

.pn-back-slot.pn-back-slot-hidden {
  visibility: hidden;
  width: 0;
  min-width: 0;
}

/* Right-side slot — shows the current page name on the right edge of the bar. */
.pn-right-slot {
  justify-self: end;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pn-page-name {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(180, 188, 204, 0.40);
  white-space: nowrap;
  user-select: none;
}

/* ---------------- Favorites star button ---------------- */
.pn-fav {
  position: relative;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9999px;
  color: rgba(220, 224, 232, 0.62);
  cursor: pointer;
  padding: 0;
  font: inherit;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.15s ease;
}
.pn-fav:hover {
  color: #f4f6fa;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}
.pn-fav:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: 2px;
}
.pn-fav .pn-icon-star {
  width: 18px; height: 18px;
}

/* When the visitor has favorites saved, tint the icon a touch warmer
   (subtle gold) to hint that the panel has content. */
.pn-fav.pn-fav-has-items {
  color: #f5b942;
}
.pn-fav.pn-fav-has-items:hover {
  color: #ffcd57;
}

/* Numeric badge in the top-right corner of the star.
   --------------------------------------------------------------
   Per spec 15_favorites.md v0.1.1 the badge is HIDDEN ENTIRELY in
   v1. Its semantics have been reserved for future "new since last
   visit" notifications (NOT favorite count). Wrapper element kept
   in the DOM so re-enabling later is a one-line CSS flip — change
   the rule below to `display: inline-flex` (or remove it) and the
   future notification module's `.pn-fav-badge-visible` toggle will
   begin to render. */
.pn-fav-badge {
  display: none !important;
  /* Style preserved below for the future notification reveal. */
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ec4360;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(10, 11, 16, 0.85);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* ---------------- Entry (Who / What / Why) ---------------- */
.pn-entry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  height: 32px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(220, 224, 232, 0.62);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.pn-entry .pn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
}

.pn-entry .pn-label {
  line-height: 1;
  /* Slight optical adjustment so the label baseline aligns with icon center. */
  transform: translateY(0.5px);
}

/* Inactive/enabled hover — brighter text + soft surface lift. */
.pn-entry:hover {
  color: #f4f6fa;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Active state — family-neutral highlight (white-toned glass + subtle ring).
   We keep it visually quiet so the nav doesn't shout louder than the page
   content; the active treatment is intentionally subtle. */
.pn-entry.pn-active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 6px rgba(0, 0, 0, 0.3);
  cursor: default;
}

.pn-entry.pn-active:hover {
  /* Active entries on their own page shouldn't lift further on hover. */
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.16);
}

/* Active entry on a DEPTH page — same selected visual, but navigable back to
   the portal home. The selected look (.pn-active) is intentionally unchanged;
   only the cursor and a subtle hover affordance are layered on top via this
   modifier class (.pn-active-link). */
.pn-entry.pn-active.pn-active-link {
  cursor: pointer;
}

.pn-entry.pn-active.pn-active-link:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.24);
}

.pn-entry.pn-active.pn-active-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: 2px;
}

/* Disabled state (Why is currently disabled per spec).
   - Visually present so the three-portal narrative stays intact.
   - Muted color, dashed bottom hint that this is "in the works,"
     `cursor: not-allowed`, native title tooltip via attr.
   - Hover does NOT brighten — explicitly inert. */
.pn-entry.pn-disabled {
  color: rgba(220, 224, 232, 0.32);
  background: transparent;
  border-color: transparent;
  cursor: not-allowed;
  position: relative;
}

.pn-entry.pn-disabled::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 4px;
  height: 1px;
  background-image: linear-gradient(
    to right,
    rgba(220, 224, 232, 0.20) 0,
    rgba(220, 224, 232, 0.20) 3px,
    transparent 3px,
    transparent 6px
  );
  background-size: 6px 1px;
  background-repeat: repeat-x;
  opacity: 0.7;
  pointer-events: none;
}

.pn-entry.pn-disabled:hover {
  color: rgba(220, 224, 232, 0.40);
  background: transparent;
  border-color: transparent;
  transform: none;
}

/* ---------------- Smart back-link (inline, left of WHO) ---------------- */
.pn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(180, 188, 204, 0.65);
  text-decoration: none;
  border-radius: 9999px;
  transition: color 0.15s ease, background-color 0.15s ease;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Match baseline visual alignment with the portal entries beside it. */
  line-height: 1;
}

.pn-back:hover {
  color: #f4f6fa;
  background: rgba(255, 255, 255, 0.04);
}

/* Back-link hidden state — no border adjustment needed with pill shape. */


/* ---------------- Hamburger button — mobile only ---------------- */
.pn-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 9999px;
  color: rgba(220,224,232,0.7);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.pn-hamburger:hover { background: rgba(255,255,255,0.10); color: #fff; }

/* ---------------- Mobile drawer ---------------- */
.pn-mob-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: transparent;
  z-index: 499;
}
.pn-mob-backdrop.pn-mob-open { display: block; }

.pn-mob-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 320px;
  max-width: 90vw;
  /* Liquid glass — opaque enough to not blur the viz behind it */
  background:
    linear-gradient(160deg,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.02) 40%,
      transparent 100%),
    rgba(12,14,24,0.93);
  border-right: 1px solid rgba(255,255,255,0.14);
  /* Gloss edge highlight */
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,0.10),
    8px 0 40px rgba(0,0,0,0.5);
  z-index: 500;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.32,0,0.12,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pn-mob-drawer.pn-mob-open { transform: translateX(0); }

.pn-mob-drawer-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  /* Subtle top gloss band */
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 100%);
  flex-shrink: 0;
}
.pn-mob-drawer-close {
  background: none; border: none;
  color: rgba(220,224,232,0.55);
  font-size: 20px; cursor: pointer;
  padding: 4px 8px;
  transition: color 0.15s;
}
.pn-mob-drawer-close:hover { color: #fff; }

.pn-mob-drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* On desktop, drawer and backdrop are always hidden regardless of JS state */
@media (min-width: 641px) {
  .pn-mob-drawer,
  .pn-mob-backdrop,
  .pn-hamburger { display: none !important; }
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  .pn-entry,
  .pn-back,
  .pn-fav {
    transition: none;
  }
}

/* ---------------- Narrow viewports — compact nav ---------------- */
@media (max-width: 640px) {
  .pn-root {
    top: 8px;
    max-width: calc(100vw - 16px);
  }
  .pn-row-entries {
    padding: 0 10px;
    gap: 8px;
  }
  .pn-entries {
    gap: 2px;
  }
  .pn-entry {
    padding: 6px 8px;
    gap: 6px;
    font-size: 10px;
  }
  .pn-entry .pn-icon {
    width: 16px;
    height: 16px;
  }
  .pn-back {
    font-size: 9px;
    padding: 4px 6px;
    max-width: 38vw;
  }
  .pn-fav {
    width: 28px; height: 28px;
  }
  .pn-fav .pn-icon-star {
    width: 16px; height: 16px;
  }
  .pn-page-name { display: none; }
}

/* ============================================================
   Per-surface offset hooks
   ------------------------------------------------------------
   The nav is `position: fixed` at the very top. Surfaces with
   their own fixed/absolute chrome that would collide with the
   nav can opt their chrome down by querying body classes:

     body.pn-mounted         — nav is mounted (always set)
     body.pn-mounted-noback  — also always set in the single-row layout

   Both classes are set at all times now that the nav has been
   collapsed to a single 44px row (smart back-link sits inline,
   left of WHO, instead of in a stacked row beneath the entries).
   Calling pages historically defined two offset rules — one for
   the 72px two-row state (`.pn-mounted`) and a tighter one for
   the 44px one-row state (`.pn-mounted-noback`). Because both
   classes are always present, the `.pn-mounted-noback` rule
   wins (later, equal specificity), giving the correct 44px
   offset across all surfaces without per-page edits.

   Mounted height (always): 44px.
   ============================================================ */