/* File: inc/top-links.css */
/* Description: Premium Top Links rows. Mobile-first. Subtle surface, hairline ring, strong typography. No title. */

.top-links,
.top-links-mobile {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* Mobile-first: inside container */
.top-links-mobile {
  margin-top: 14px;
}

/* Desktop rails are off by default */
.top-links { display: none; }

.top-links__list {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
}

/* One row = one “premium chip” */
.top-links__item {
  pointer-events: none; /* only link clickable */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  /* Vars filled from JS */
  --tl-py: 10px;
  --tl-px: 12px;
  --tl-opacity: 0.95;
  --tl-ring: 0.06;
  --tl-glow: 0.10;

  padding: var(--tl-py) var(--tl-px);
  border-radius: 14px;

  /* Subtle surface that matches your main page gradients */
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(10px);

  /* Hairline “ring” only. Not a border look. */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(0, 123, 255, var(--tl-ring)) inset,
    0 10px 28px rgba(0, 0, 0, 0.06),
    0 18px 60px rgba(0, 123, 255, var(--tl-glow));

  opacity: var(--tl-opacity);

  transition: filter 0.14s ease, transform 0.10s ease;
}

/* Interactive feel without “cards” */
.top-links__item:hover { filter: brightness(0.99); }
.top-links__item:active { transform: translateY(1px); }

.top-links__url {
  pointer-events: auto;
  text-decoration: none;
  word-break: break-all;
  line-height: 1.12;

  color: rgba(0, 86, 179, 0.96);

  /* Vars from JS */
  font-size: var(--tl-fs, 13px);
  font-weight: var(--tl-fw, 650);
  letter-spacing: var(--tl-ls, 0px);
  opacity: var(--tl-link-opacity, 0.92);

  transition: filter 0.12s ease;
}

.top-links__url:hover { filter: brightness(0.96); }

.top-links__meta {
  flex: 0 0 auto;
  white-space: nowrap;

  font-size: 11px;
  letter-spacing: 0.12px;
  color: rgba(29, 42, 53, 0.62);
  opacity: var(--tl-meta-opacity, 0.60);
}

/* Desktop rails */
@media (min-width: 901px) {
  .top-links-mobile { display: none; }

  .top-links {
    display: block;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);

    width: 320px;
    max-height: calc(100svh - 160px);
    overflow: hidden;

    pointer-events: none;
  }

  /* Visible offset from edges */
  .top-links--left  { left: 26px; }
  .top-links--right { right: 26px; }

  /* Inner padding so rows don't hug the edge */
  .top-links .top-links__list {
    padding: 10px 6px;
  }
}