/* ============================================================================
   The Rooted Journal - persistent top menu ("the worn edge"), round 3.
   Binding directives: the strip sits at the CENTER of the top edge and is
   BIG enough to read instantly as THE menu - a torn strip of aged paper
   taped to the top of the page (two tape strips, paper-tab depth, typewriter
   tabs ~15-16px on desktop). Journey stations left-to-right, a pencil
   separator, then old pages / about / follow. menu.js builds the DOM.
   ============================================================================ */
:root {
  --rj-menu-h: 56px;
  --rj-paper: #E5D9BC;
  --rj-paper-tab: #E8D5B6;
  --rj-ink: #3E3A32;
  --rj-ink-dark: #2E2A24;
  --rj-ink-soft: #6D6251;
}

.rj-menu {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  z-index: 70;
  width: max-content; max-width: min(98vw, 1360px);
  padding-top: env(safe-area-inset-top, 0px);
  /* NB: the worn-paper background + torn clip live on .rj-menu__strip, NOT
     here - a clip-path on this box would clip its own children (the two tape
     strips at top:-3px and the 01/06 counter hanging below 100%). */
  filter: drop-shadow(0 3px 4px rgba(60, 44, 24, 0.30))
          drop-shadow(0 7px 14px rgba(60, 44, 24, 0.22));
}

/* the two tape strips holding the menu to the top edge of the screen */
.rj-menu::before,
.rj-menu::after {
  content: ""; position: absolute; top: -3px; z-index: 3;
  width: 64px; height: 17px;
  background:
    linear-gradient(180deg, rgba(255, 250, 234, 0.28), rgba(255, 250, 234, 0) 45%),
    linear-gradient(102deg, rgba(209, 190, 144, 0.42),
                            rgba(198, 177, 129, 0.56) 48%,
                            rgba(209, 190, 144, 0.4));
  clip-path: polygon(0 16%, 3% 0, 10% 7%, 95% 2%, 100% 20%, 97.5% 55%,
                     100% 82%, 94% 100%, 87% 93%, 5% 97%, 1.5% 78%, 2.5% 40%);
  pointer-events: none;
}
.rj-menu::before { left: 3%;  transform: rotate(-6deg); }
.rj-menu::after  { right: 3%; transform: rotate(5deg); }

.rj-menu__strip {
  display: flex; align-items: stretch;
  justify-content: flex-start; justify-content: safe center;
  gap: 4px; height: var(--rj-menu-h);
  padding: 0 clamp(14px, 2vw, 26px) 10px;  /* bottom padding rides above the torn edge */
  box-sizing: border-box;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  /* the strip itself: worn paper, stained, torn along its sides and bottom */
  background:
    radial-gradient(140% 90% at 8% 0%, rgba(199, 174, 129, 0.30), transparent 42%),
    radial-gradient(120% 80% at 84% 100%, rgba(180, 152, 105, 0.24), transparent 46%),
    linear-gradient(180deg, #EBE0C6 0%, var(--rj-paper) 76%, #DECFA9 100%);
  clip-path: polygon(0.4% 0, 99.6% 0,
    100% 30%, 99.3% 62%, 100% 84%,
    98.6% calc(100% - 2px), 96% calc(100% - 8px), 91% calc(100% - 3px),
    85% calc(100% - 9px), 78% calc(100% - 4px), 71% calc(100% - 10px),
    63% calc(100% - 4px), 55% calc(100% - 9px), 47% calc(100% - 3px),
    39% calc(100% - 10px), 31% calc(100% - 4px), 23% calc(100% - 9px),
    15% calc(100% - 3px), 8% calc(100% - 9px), 3% calc(100% - 4px),
    1.2% calc(100% - 8px),
    0 80%, 0.7% 55%, 0 26%);
}
.rj-menu__strip::-webkit-scrollbar { display: none; }

/* groups never shrink below their content - the strip scrolls instead */
.rj-menu__group { display: flex; align-items: stretch; gap: 2px; flex: 0 0 auto; }

/* pencil separator between the journey stations and the pages */
.rj-menu__sep {
  flex: 0 0 auto; align-self: center;
  width: 1.5px; height: 55%;
  margin: 0 clamp(8px, 1.2vw, 18px);
  background: rgba(62, 58, 50, 0.42);
  border-radius: 40% 60% 55% 45%;
  transform: rotate(3deg);
}

/* one paper tab - big enough to read instantly as the menu */
.rj-tab {
  position: relative; display: flex; align-items: center;
  font-family: "Courier Prime", "Courier New", Courier, ui-monospace, monospace;
  font-size: 0.95rem; letter-spacing: 0.04em; white-space: nowrap;
  color: var(--rj-ink); text-decoration: none;
  padding: 0 clamp(10px, 1.1vw, 15px); margin-top: 6px;
  background: transparent; border: 0; cursor: pointer;
}
/* alternate tiny rotations so the row reads hand-placed, not machined */
.rj-tab:nth-child(odd)  { transform: rotate(-0.6deg); }
.rj-tab:nth-child(even) { transform: rotate(0.5deg); }

.rj-tab:hover { color: var(--rj-ink-dark); }

/* the "you are here" mark: a lifted lighter tab + an irregular graphite dab */
.rj-tab::after {
  content: ""; position: absolute; left: 10%; right: 12%; bottom: 6px; height: 4px;
  background: var(--rj-ink-dark); opacity: 0;
  border-radius: 42% 58% 55% 45% / 60% 40% 62% 38%;
  transform: rotate(-0.8deg);
  transition: opacity 0.25s ease;
}
.rj-tab.is-here {
  color: var(--rj-ink-dark); font-weight: 700;
  background: linear-gradient(180deg, var(--rj-paper-tab), rgba(239, 230, 207, 0.55));
  clip-path: polygon(4% 10%, 30% 2%, 64% 8%, 97% 3%, 100% 46%, 97% 90%,
                     66% 98%, 33% 93%, 3% 98%, 0% 52%);
}
.rj-tab.is-here::after { opacity: 0.9; }

/* keyboard: obvious dashed-pencil focus ring */
.rj-tab:focus-visible {
  outline: 2px dashed var(--rj-ink); outline-offset: 3px;
  color: var(--rj-ink-dark);
}

/* the back-to-the-walking-page tab (sub-pages only): a lifted paper tag */
.rj-tab--back {
  background: var(--rj-paper-tab);
  margin: 8px 10px 0 0; padding: 0 14px 0 18px;
  clip-path: polygon(0 50%, 8% 12%, 100% 0, 97% 100%, 8% 88%);
  filter: drop-shadow(1px 1px 2px rgba(60, 44, 24, 0.3));
  font-weight: 700; font-size: 0.82rem;
}
.rj-tab--back::after { display: none; }
.rj-tab--back:focus-visible { outline-offset: 1px; }

/* the little station counter tag hanging under the strip (journey only) */
.rj-menu__count {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-3px) rotate(-1.5deg);
  font-family: "Courier Prime", "Courier New", Courier, ui-monospace, monospace;
  font-size: 0.64rem; letter-spacing: 0.2em; color: var(--rj-ink);
  background: var(--rj-paper-tab);
  padding: 3px 11px 4px;
  clip-path: polygon(3% 12%, 32% 0, 66% 8%, 98% 2%, 100% 55%, 96% 94%,
                     62% 100%, 30% 92%, 2% 99%, 0 48%);
  filter: drop-shadow(0 2px 3px rgba(60, 44, 24, 0.28));
  pointer-events: none;
}

/* sub-pages: give the document room so the strip never covers content */
body[data-rj-page]:not([data-rj-page="journey"]) {
  padding-top: calc(var(--rj-menu-h) + 18px + env(safe-area-inset-top, 0px));
}

/* the journey's graphite progress line tucks just under the worn edge */
body[data-rj-page="journey"] .sw-scrollbar {
  top: calc(var(--rj-menu-h) + env(safe-area-inset-top, 0px));
}
/* keep the engine's own topbar (unused but present) hidden */
body[data-rj-page="journey"] .sw-topbar { display: none; }

@media (max-width: 860px) {
  :root { --rj-menu-h: 46px; }
  .rj-menu { width: 100%; max-width: 100vw; left: 0; transform: none; }
  .rj-menu::before { left: 6%; }
  .rj-menu::after { right: 6%; }
  .rj-menu__strip { gap: 4px; padding-left: 10px; padding-right: 10px; padding-bottom: 9px; }
  .rj-menu__sep { margin: 0 7px; }
  .rj-tab { font-size: 0.78rem; padding: 0 8px; letter-spacing: 0.03em; margin-top: 4px; }
  .rj-tab--back { padding: 0 10px 0 14px; margin: 6px 6px 0 0; font-size: 0.72rem; }
  .rj-menu__count { font-size: 0.58rem; padding: 2px 9px 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .rj-tab::after { transition: none; }
}