/* ROSINT project rail.
 *
 * Symmetric 2–1–2: two project buttons, the bare ROSINT mark, two more
 * slots. Every project is its own always-visible button — no dropdown, no
 * burger — and the tools link to their real subdomains.
 *
 * The centre mark is centred on the page, not merely between its
 * neighbours: the two side groups are equal-width grid tracks (1fr each),
 * so the middle column lands on the true centre line whatever the buttons
 * are called.
 */

/* Fixed, not sticky. `body` is height-constrained, which caps a sticky
 * element's containing block at roughly one viewport — the rail then
 * unsticks and scrolls away partway down the page. Fixed keeps it pinned
 * for the whole scroll.
 *
 * Because it is out of flow, `body` pads the rail's height back in
 * (--rail-h) so the bar reserves its own space and can never cover the
 * eagle, the title or a section heading. */
.rail {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 10;
  display: grid;
  /* Equal side tracks: minmax(0, 1fr) lets them resolve to the same width
   * even when one group's labels are wider, which is what actually puts the
   * centre mark on the page centre line. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.5rem, 2vmin, 1.5rem);
  /* Fixed height, not min-height: --rail-h is also what the page reserves
   * for the bar (body padding, --hero-h, scroll-padding). If the buttons
   * made the rail taller than --rail-h it would overlap the hero by the
   * difference, so the bar is bound to exactly that height and the buttons
   * are sized to fit inside it. */
  height: var(--rail-h);
  padding: 0 clamp(0.5rem, 1.6vmin, 1rem);
  background: var(--bg);
  border-bottom: 1px solid rgb(81 255 13 / 0.22);
}

.rail__list {
  display: flex;
  align-items: stretch;
  gap: clamp(0.4rem, 1.2vmin, 0.9rem);
  list-style: none;
  min-width: 0;
  /* Horizontal scroll is the mobile strategy — buttons stay individually
   * visible and reachable rather than collapsing into a menu. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 0.15rem;
  margin: 0;
}

/* Each side group hugs the centre mark, so the pair reads as one symmetric
 * unit rather than two clusters pinned to the window edges. */
.rail__list--left {
  justify-content: flex-end;
}

.rail__list--right {
  justify-content: flex-start;
}

.rail__list::-webkit-scrollbar {
  display: none;
}

/* Centre column: the mark with the language switch under it. It is the
 * grid's `auto` track, so its width is its content and the side tracks stay
 * equal — the switch cannot push the logo off the centre line. */
.rail__centre {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
}

/* Compact EN / RO pair. Small and quiet: it is a setting, not a
 * destination, so it must not compete with the project buttons. */
.rail__lang {
  display: flex;
  gap: 1px;
  border: 1px solid rgb(81 255 13 / 0.22);
}

.rail__lang-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgb(81 255 13 / 0.5);
  font: inherit;
  font-size: clamp(0.58rem, 1.1vmin, 0.7rem);
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  cursor: pointer;
  transition: color 120ms linear, background-color 120ms linear;
}

.rail__lang-btn:hover,
.rail__lang-btn:focus-visible {
  color: var(--matrix);
}

/* The active language is the pressed one — state lives in aria-pressed, so
 * the styling and the accessible state cannot drift apart. */
.rail__lang-btn[aria-pressed="true"] {
  color: var(--bg);
  background: var(--matrix);
}

/* Home mark: a link on the logo alone. Deliberately no label and no button
 * chrome — it is the identity at the centre of the bar, not a fifth
 * project. */
.rail__home {
  display: grid;
  place-items: center;
  /* Slightly larger than a project mark so the centre reads as the anchor
   * of the composition. */
  width: calc(var(--mark-size) * 1.45);
  height: calc(var(--mark-size) * 1.45);
  opacity: 0.9;
  transition: opacity 120ms linear;
}

.rail__home img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rail__home:hover,
.rail__home:focus-visible {
  opacity: 1;
}

.rail__link {
  display: flex;
  align-items: center;
  gap: 0.55em;
  /* Buttons must not shrink into unreadable slivers when the rail scrolls. */
  flex: 0 0 auto;
  /* Equal height for every button regardless of what its mark contains:
   * padding in rem (not em) so it cannot scale with a child's font-size, and
   * an explicit min-height keyed to the mark slot. */
  min-height: calc(var(--mark-size) + 1.4rem);
  /* Bounded by the bar so the buttons can never force it taller. */
  max-height: calc(var(--rail-h) - 1rem);
  padding: 0.7rem 1.15rem;
  border: 1px solid rgb(81 255 13 / 0.28);
  color: var(--matrix);
  text-decoration: none;
  font-size: clamp(0.85rem, 1.9vmin, 1.05rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgb(0 0 0 / 0.55);
  transition: border-color 120ms linear, background-color 120ms linear;
}

/* Uniform label sizing across every button. */
.rail__link > span:last-child {
  font-size: 1em;
  line-height: 1;
}

.rail__link:hover,
.rail__link:focus-visible {
  border-color: var(--matrix);
  background: rgb(81 255 13 / 0.1);
}

.rail__link[aria-current="page"] {
  border-color: var(--matrix);
  background: rgb(81 255 13 / 0.14);
}

/* Per-project mark slot. Sized in rem so a text mark's own font-size can
 * never shrink the box — that is what made Red String smaller than the
 * image-backed buttons. Every project gets the identical slot. */
.rail__mark {
  display: grid;
  place-items: center;
  width: var(--mark-size);
  height: var(--mark-size);
  flex: 0 0 auto;
  /* Neutralise the button's tracking/casing inside the slot. */
  letter-spacing: 0;
  line-height: 1;
}

.rail__mark img,
.rail__mark svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Text marks for projects with no logo asset in their repo. The slot stays
 * the same size as an image mark; only the glyph inside is scaled. */
.rail__mark--text {
  border: 1px solid currentColor;
  /* Two-letter marks sized to sit correctly inside the circle. */
  font-size: calc(var(--mark-size) * 0.38);
  font-weight: 600;
  border-radius: 50%;
  /* Optical centring — the uppercase pair sits slightly high otherwise. */
  padding-top: 0.05em;
}

/* ALIBI has no logo asset yet — restrained text mark, inherits the green.
 * ROSINT, URMA and Red String all use real logo files. */
.rail__mark--alibi {
  border-radius: 50%;
}

/* Reserved slot for the next project. It holds the exact geometry of a real
 * button so the 2–1–2 symmetry is structural rather than coincidental, but
 * it is dimmed, dashed and non-interactive so it cannot read as a live
 * destination. Not a link, so it is not focusable or announced. */
.rail__link--slot {
  border-style: dashed;
  border-color: rgb(81 255 13 / 0.16);
  background: transparent;
  color: rgb(81 255 13 / 0.32);
  cursor: default;
}

.rail__mark--slot {
  border: 1px dashed currentColor;
  border-radius: 50%;
}

/* Narrow screens: the labels are what overflow first, so drop them and keep
 * every project as its own visible mark. The 2–1–2 geometry survives intact
 * — five equal slots, centre mark still on the centre line — instead of
 * degrading into a horizontal scroll that hides destinations off-screen. */
@media (max-width: 34rem) {
  .rail {
    gap: clamp(0.35rem, 2vw, 0.9rem);
    padding-inline: 0.5rem;
  }

  .rail__link > span:last-child {
    /* Hidden visually; the accessible name still comes from the link text. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .rail__link {
    /* Square once the label is gone, so all four read as equal marks. */
    padding: 0.55rem;
    gap: 0;
  }

  .rail__list {
    gap: clamp(0.3rem, 1.5vw, 0.6rem);
    overflow: visible;
  }
}