/* just julseon — shared chrome for world pages.
   Only styles .jj-* namespaced elements. Everything is themeable per page
   via CSS custom properties (set them in the page's own :root/body):
     --sb-bg, --sb-fg, --sb-accent, --sb-border   (sidebar)
     --star, --star-empty                          (rating stars)
     --box-bg, --box-fg, --box-border              (description box)
   Sensible fallbacks are baked in so an unstyled page still looks fine. */

/* ---------- Sidebar (desktop: fixed left rail; mobile: top strip) ---------- */
.jj-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 220px; z-index: 50;
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 1.1rem 0.9rem; overflow-y: auto;
  background: var(--sb-bg, rgba(0,0,0,0.35));
  color: var(--sb-fg, #fff);
  border-right: 1px solid var(--sb-border, rgba(255,255,255,0.14));
  font-family: ui-monospace, "Fira Code", monospace;
  backdrop-filter: blur(4px);
}
.jj-sidebar .jj-home {
  font-weight: 700; font-size: 1.05rem; text-decoration: none;
  color: var(--sb-fg, #fff); padding: 0.4rem 0.6rem; margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--sb-border, rgba(255,255,255,0.14));
}
.jj-sidebar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.jj-sidebar a {
  display: block; text-decoration: none; color: var(--sb-fg, #fff);
  opacity: 0.72; padding: 0.42rem 0.6rem; border-radius: 8px;
  font-size: 0.9rem; line-height: 1.2; transition: opacity .12s, background .12s;
}
.jj-sidebar a:hover { opacity: 1; background: var(--sb-border, rgba(255,255,255,0.10)); }
.jj-sidebar a.current {
  opacity: 1; font-weight: 700; color: var(--sb-accent, #fff);
  background: var(--sb-border, rgba(255,255,255,0.12));
}
.jj-sidebar a.current::before { content: "> "; }
.jj-sidebar a.locked { opacity: 0.55; }
.jj-sidebar a.locked::after {
  content: "soon"; margin-left: 0.5em; vertical-align: 0.12em;
  font-size: 0.58em; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.15em 0.55em; border: 1px solid currentColor; border-radius: 999px;
  opacity: 0.85;
}

/* Push page content clear of the rail on desktop. Pages opt in by putting
   their main content inside <main class="jj-main"> (or add the offset themselves). */
@media (min-width: 760px) {
  .jj-main { padding-left: 220px; }
}

/* Mobile: rail becomes a horizontal scrolling top strip, content flows below. */
@media (max-width: 759px) {
  .jj-sidebar {
    position: sticky; top: 0; left: 0; right: 0; bottom: auto; width: auto; height: auto;
    flex-direction: row; align-items: center; gap: 0.3rem;
    padding: 0.5rem 0.6rem; overflow-x: auto; overflow-y: hidden;
    border-right: none; border-bottom: 1px solid var(--sb-border, rgba(255,255,255,0.14));
  }
  .jj-sidebar .jj-home { margin: 0 0.4rem 0 0; padding: 0.3rem 0.4rem; border-bottom: none; white-space: nowrap; }
  .jj-sidebar ul { flex-direction: row; gap: 0.2rem; }
  .jj-sidebar a { white-space: nowrap; }
  .jj-main { padding-left: 0; }
}

/* ---------- Description box ---------- */
.jj-desc {
  max-width: 44ch; margin: 1.1rem auto; padding: 0.9rem 1.15rem;
  border: 1px solid var(--box-border, currentColor); border-radius: 12px;
  background: var(--box-bg, transparent); color: var(--box-fg, inherit);
  font-size: 0.95rem; line-height: 1.55;
}
.jj-desc p { margin: 0; }
.jj-desc .jj-desc-tag {
  display: inline-block; margin-bottom: 0.35rem; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7;
  font-family: ui-monospace, "Fira Code", monospace;
}

/* ---------- rating block: keeps the stars and their caption together ----------
   Wrap <form class="jj-rating"> + <p class="jj-rating-cap"> in this div so a
   flex-column page with a big gap doesn't drift them apart. */
.jj-rate-block {
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
}

/* ---------- 5-star rating (pure CSS, click to set, resets on reload) ----------
   Markup: a .jj-rating with inputs in 5..1 order, each followed by its label.
   flex-direction:row-reverse makes them read 1..5 left-to-right, and the
   ~ sibling selectors then fill from the left. */
.jj-rating {
  display: inline-flex; flex-direction: row-reverse; justify-content: center;
  gap: 0.1em; font-size: 2.1rem; line-height: 1; margin: 0.2rem 0;
}
.jj-rating input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.jj-rating label {
  color: var(--star-empty, rgba(127,127,127,0.35)); cursor: pointer;
  transition: color .12s ease, transform .12s ease;
}
.jj-rating label:hover { transform: scale(1.18); }
.jj-rating label:hover,
.jj-rating label:hover ~ label,
.jj-rating input:checked ~ label { color: var(--star, #ffd24a); }
.jj-rating input:focus-visible + label { outline: 2px solid var(--star, #ffd24a); outline-offset: 2px; }
.jj-rating-cap {
  font-family: ui-monospace, "Fira Code", monospace; font-size: 0.72rem;
  letter-spacing: 0.06em; opacity: 0.65; margin: 0; text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .jj-rating label { transition: none; }
  .jj-rating label:hover { transform: none; }
}