/* ============================================================================
   Vornyx glass — one frosted material for the whole site.

   Everything that looks like glass (top bar, project islands, slider controls)
   reads from the knobs below, so tuning here changes all of them at once.

   ▼▼▼  TUNING KNOBS — everything you'd want to touch lives right here  ▼▼▼
   ========================================================================= */
:root {
  /* --- Glass ------------------------------------------------------------ */
  --nav-blur:        7.5px;                 /* blur strength (was 16–24px)   */
  --nav-saturate:    250%;                 /* colour pop of what's behind   */
  --nav-tint:        rgba(0, 0, 0, 0.52);  /* dark-theme tint               */
  --nav-sheen:       0.035;                /* white top highlight, 0 = none */
  --nav-hairline:    rgba(255, 255, 255, 0.07); /* bottom edge line         */

  /* --- Grain ------------------------------------------------------------ */
  --nav-grain:       0.16;   /* HOW MUCH grain: 0 = off, 0.4 = heavy        */
  --nav-grain-size:  250px;  /* SIZE of the grain tile: smaller = finer     */
  --nav-grain-blend: soft-light;/* overlay | soft-light (softer) | screen      */

  /* --- Bar size --------------------------------------------------------- */
  --nav-height:      48px;   /* height of the bar                           */

  /* Glass sitting on a photo can't follow the theme — the backdrop is the
     photo, not the page. It uses the same recipe, permanently on the dark
     side of it, so white text stays readable over any image. */
  --glass-tint-photo:     rgba(14, 14, 16, 0.46);
  --glass-hairline-photo: rgba(255, 255, 255, 0.16);
  --glass-sheen-photo:    0.24;
}

html.light {
  --nav-tint:     rgba(255, 255, 255, 0.198); /* less milky than before      */
  --nav-sheen:    0.30;
  --nav-hairline: rgba(0, 0, 0, 0.07);
  --nav-grain:    0.35;                      /* grain reads stronger on white */
}
/* ▲▲▲  end of tuning knobs  ▲▲▲ ========================================== */


/* --------------------------------------------------------------------------
   The material. `isolation` gives the grain its own stacking context so the
   blend mode mixes with the blurred backdrop only — never the page below.
   -------------------------------------------------------------------------- */
.topbar,
.glass {
  position: relative;   /* only a fallback — .glass users may position freely */
  isolation: isolate;
  background: var(--nav-tint);
  -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(var(--nav-saturate));
  backdrop-filter: blur(var(--nav-blur)) saturate(var(--nav-saturate));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, var(--nav-sheen));
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Film grain. A tiled SVG noise tile, blended over the frosted backdrop, so
   colourful content behind it picks up texture instead of a flat wash. */
.topbar::after,
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--nav-grain);
  mix-blend-mode: var(--nav-grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: var(--nav-grain-size) var(--nav-grain-size);
  background-repeat: repeat;
}

/* Content sits above the grain layer. */
.topbar > *,
.glass > * {
  position: relative;
  z-index: 1;
}

/* Grain is a static texture — respect a user's reduced-transparency setting. */
@media (prefers-reduced-transparency: reduce) {
  .topbar::after,
  .glass::after { opacity: 0; }
}

/* Same material, fixed to the top, with the bottom hairline. */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  border-bottom: 1px solid var(--nav-hairline);
}

/* Bar height — set here so it's tunable from one place. */
.topbar > div {
  height: var(--nav-height);
}

/* The on-a-photo variant: same blur, saturation and grain, dark side only. */
.glass.on-photo {
  color: #fff;
  background: var(--glass-tint-photo);
  border: 1px solid var(--glass-hairline-photo);
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.7),
              inset 0 1px 0.5px rgba(255, 255, 255, var(--glass-sheen-photo));
}


/* --------------------------------------------------------------------------
   .nav-pill — the one pill used everywhere: nav buttons, card buttons,
   anything that needs a tappable label. `.on-photo` is the variant for pills
   sitting on an image, where the theme's foreground colours would vanish.
   -------------------------------------------------------------------------- */
:root {
  --pill-track: rgba(120, 120, 128, 0.28);
  --pill-track-hover: rgba(120, 120, 128, 0.44);
}
html.light {
  --pill-track: rgba(120, 120, 128, 0.16);
  --pill-track-hover: rgba(120, 120, 128, 0.26);
}

.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border: 1px solid var(--surface-border);
  border-radius: 9999px;
  background: var(--pill-track);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--fg-secondary);
  cursor: pointer;
  transition: color 0.3s ease,
              background-color 0.3s ease,
              transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav-pill:hover {
  color: var(--fg-primary);
  background: var(--pill-track-hover);
  transform: scale(1.06);
}
.nav-pill:active {
  transform: scale(0.98);
}
.nav-pill svg {
  width: 13px;
  height: 13px;
  opacity: 0.8;
}

.nav-pill.on-photo {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}
.nav-pill.on-photo:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.3);
}