/* vrc.dj  A tag's relations in a narrow viewport (tag-neighbors-nav.js): one
   full-bleed rail per relationship, in the page, scrolling away with it.
   Under 768px, which is a phone but also a small desktop window - so every
   rail carries arrows, since a mouse has no swipe. The wide layout keeps the
   Neighbors orbit instead. Colours are tokens, so both themes follow. */

.tag-rails,
.tag-peek { display: none; }

@media (max-width: 767.98px) {
  /* The orbit needs room a phone does not have: the rails replace it here. */
  .tag-neighbors-card { display: none; }

  .tag-rails { display: block; margin: 0 0 1.25rem; }
  .tag-rail + .tag-rail { margin-top: .85rem; }
  /* "More under X" hangs off the parent chip above it: tight spacing, an
     indent, and an elbow drawn from under the chip into the label. */
  .tag-rail + .tag-rail--kin { margin-top: .15rem; }
  .tag-rail--kin { position: relative; }
  .tag-rail--kin::before {
    content: '';
    position: absolute;
    left: .5rem;
    top: -.35rem;
    width: .6rem;
    height: 1.05rem;
    border-left: 2px solid color-mix(in srgb, var(--cat-color, var(--border-bright)) 55%, transparent);
    border-bottom: 2px solid color-mix(in srgb, var(--cat-color, var(--border-bright)) 55%, transparent);
    border-bottom-left-radius: 6px;
    pointer-events: none;
  }
  .tag-rail--kin .tag-rail-label { padding-left: 1.45rem; }
  .tag-rail--kin .tag-rail-scroll { padding-inline-start: calc(var(--bs-gutter-x, 1.5rem) * .5 + 1.45rem); }
  .tag-rail-label {
    margin: 0 0 .4rem;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    /* colour + shadow: shared with .tag-meta-label (components.css) */
  }
  /* Full bleed: the row runs edge to edge, the chips keep the page's gutter.
     --bs-gutter-x is the container's own padding, so this cannot drift from
     whatever width Bootstrap gives the page. */
  .tag-rail-viewport {
    position: relative;
    margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5);
  }
  .tag-rail-scroll {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-bottom: .15rem;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .tag-rail-scroll::-webkit-scrollbar { display: none; }
  /* The fade is a mask, not a gradient in the page's colour: the tag page
     paints its own background and a solid fade would show as a smear. */
  .tag-rail-viewport.can-next .tag-rail-scroll {
    mask-image: linear-gradient(90deg, #000 calc(100% - 42px), transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 42px), transparent);
  }
  .tag-rail-viewport.can-prev .tag-rail-scroll {
    mask-image: linear-gradient(90deg, transparent, #000 42px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 42px);
  }
  .tag-rail-viewport.can-prev.can-next .tag-rail-scroll {
    mask-image: linear-gradient(90deg, transparent, #000 42px, #000 calc(100% - 42px), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 42px, #000 calc(100% - 42px), transparent);
  }
  /* Arrows: clickable where there is no swipe (a narrow desktop window), and
     a standing hint that the row moves sideways on a phone. */
  .tag-rail-arrow {
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text);
    font-size: .8rem;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s var(--ease);
  }
  .tag-rail-arrow.is-prev { left: 2px; transform: translateY(-50%); }
  .tag-rail-arrow.is-next { right: 2px; transform: translateY(-50%); }
  .tag-rail-arrow:hover { border-color: var(--border-bright); background: var(--bg-elevated); }
  .tag-rail-viewport.can-prev .tag-rail-arrow.is-prev,
  .tag-rail-viewport.can-next .tag-rail-arrow.is-next { opacity: 1; pointer-events: auto; }
  .tag-rail-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    font-size: .82rem;
    padding: .42rem .8rem;
    text-decoration: none;
  }
  /* How many children that tag has, so a rail hints at what is behind a chip */
  .tag-rail-n {
    margin-left: .35rem;
    padding: 0 .3rem;
    border-radius: 99px;
    background: color-mix(in srgb, var(--cat-color) 28%, transparent);
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
  }
  /* Last chip of the siblings rail: the orbit, one tap away */
  .tag-rail-more {
    --cat-color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1px dashed var(--border-bright);
    border-radius: 9px;
    background: transparent;
    color: var(--text-dim);
    font-weight: 600;
  }
  .tag-rail-more:hover { color: var(--text); border-color: var(--text-muted); }

  /* Edge peek: where a swipe would land, while the finger is down */
  .tag-peek {
    position: fixed;
    inset: 0;
    z-index: var(--z-sticky);
    display: block;
    pointer-events: none;
  }
  .tag-peek-side {
    position: absolute;
    top: 45%;
    display: flex;
    align-items: center;
    gap: .25rem;
    max-width: 45vw;
    padding: .45rem .7rem;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
    color: var(--text);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .12s var(--ease), transform .12s var(--ease);
  }
  .tag-peek-side.is-prev { left: 0; border-left: 0; border-radius: 0 999px 999px 0; transform: translateX(-100%); }
  .tag-peek-side.is-next { right: 0; border-right: 0; border-radius: 999px 0 0 999px; transform: translateX(100%); }
  .tag-peek.is-live.to-prev .tag-peek-side.is-prev,
  .tag-peek.is-live.to-next .tag-peek-side.is-next { opacity: .85; transform: translateX(0); }
  .tag-peek.is-armed.to-prev .tag-peek-side.is-prev,
  .tag-peek.is-armed.to-next .tag-peek-side.is-next {
    opacity: 1;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  }

  :root[data-motion="reduce"] .tag-peek-side { transition: none; }
}