/* =============================================================================
   fantasy/hubrail.css — the fantasy hub rail, one row, everywhere.

   Nineteen surfaces is too many for a wrapping row of pills: it built a wall of
   chips three rows deep above the content, four on a phone. So the rail keeps
   the research-desk pattern instead — a single line that scrolls sideways, the
   scrollbar hidden, the two edges faded, the current page's chip highlighted and
   scrolled into view on load.

   This file is the ONLY place the rail is styled. Page sheets that used to
   carry their own .fh-hubrail block now defer to it; the only thing they still
   say is where the rail sits on their page.
   ========================================================================== */

.fh-hubrail {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-padding-inline-start: 84px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0.7rem 0 1.1rem;
  padding: 4px 0 6px;
  /* The trailing fade, so a cut-off chip reads as "there is more". Only the
     right edge fades: the left edge is the sticky label's job, and a mask over
     it would eat the label's own first letter. */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
}
.fh-hubrail.is-end {
  -webkit-mask-image: none;
          mask-image: none;
}
.fh-hubrail::-webkit-scrollbar { display: none; }

/* the family name pins to the left edge and rides over the scroll */
.fh-hubrail .lbl {
  position: sticky;
  left: 0;
  z-index: 2;
  flex: 0 0 auto;
  font-family: var(--hi-mono, var(--fw-mono, ui-monospace, monospace));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hi-muted, #6b6355);
  white-space: nowrap;
  padding: 0 18px 0 0;
  /* opaque under the label itself, fading out over the last few pixels so a
     chip sliding under it does not stop dead at a hard edge */
  background: linear-gradient(90deg,
    var(--hi-surface-0) 0,
    var(--hi-surface-0) calc(100% - 14px),
    rgba(0, 0, 0, 0) 100%);
}

.fh-hubrail a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-family: var(--hi-mono, var(--fw-mono, ui-monospace, monospace));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--hi-line, #d7cbb7);
  background: var(--hi-surface-1, #fff);
  color: var(--hi-muted, #6b6355);
  white-space: nowrap;
  transition: color var(--mo-fast, .12s), border-color var(--mo-fast, .12s);
}
/* the glyph is decorative: it inherits the chip's own colour and is knocked
   back by opacity alone, never by a hue of its own */
.fh-hubrail a .g {
  display: inline-block;
  margin-right: 0.7ch;
  opacity: 0.6;
  font-weight: 400;
  letter-spacing: 0;
}
.fh-hubrail a:hover { color: var(--hi-ink, #1c1a17); border-color: var(--hi-blue-line, #bed3f2); }
.fh-hubrail a:hover .g { opacity: 0.9; }
.fh-hubrail a:focus-visible {
  outline: 2px solid var(--hi-blue, #1f5fbf);
  outline-offset: 2px;
}
.fh-hubrail a.here {
  background: var(--hi-ink, #1c1a17);
  border-color: var(--hi-ink, #1c1a17);
  color: var(--hi-surface-1, #fff);
}
.fh-hubrail a.here .g { opacity: 0.75; }
.fh-hubrail a.is-desk { border-color: var(--hi-blue-line, #bed3f2); color: var(--hi-blue, #1f5fbf); }
.fh-hubrail a.is-desk.here { border-color: var(--hi-ink, #1c1a17); color: var(--hi-surface-1, #fff); }

/* a phone gets the same one row, with targets a thumb can hit */
@media (max-width: 760px) {
  /* the rail keeps to the page gutter: a sticky label inside a padded
     scrollport pins to the scrollport edge, not the padding edge, and a
     full-bleed rail would leave the label hanging off the text column */
  .fh-hubrail { margin: 0.5rem 0 0.9rem; padding: 4px 0 6px; }
  .fh-hubrail a {
    min-height: 44px;
    padding: 5px 13px;
  }
}

@media print { .fh-hubrail { display: none !important; } }