/* ───────────────────────────────────────────────────────────────────────────
   Railgrid motif.

   The name is a track plan, so the line art on the page follows one:

     · lines run at 0°, 45° or 90° — never a curve
     · a track is two rails with sleepers between them
     · tracks meet at a diamond, not a dot

   This sheet only reshapes line art the page already draws — the workspace
   trunk and its lead-ins, the closing rule, the open-source field. It adds
   nothing new, and leaves the photography, type and layout untouched.

   Loaded after the Connected Layers sheets so it overrides their plain rules
   rather than duplicating layout. Motion follows the site's existing
   contract: it runs only under [data-motion=on], and the global
   reduced-motion rules already stop it.
   ─────────────────────────────────────────────────────────────────────────── */

.gs-connected {
  --rg-gauge: 6px;                                                 /* rail to rail */
  --rg-pitch: 4px;                                                 /* sleeper spacing */
  --rg-rail: color-mix(in srgb, var(--gs-violet) 65%, transparent);
  --rg-sleeper: color-mix(in srgb, var(--gs-violet) 32%, transparent);
}

/* ── The workspace plan reads as a siding off a main line ───────────────────
   Same diagram, same copy: the trunk becomes track, each capability gets its
   own spur, and the points where they meet become junctions. */

.gs-connected .gs-plan-trunk {
  top: 34px;
  bottom: 35px;
  left: 8.5px;
  width: var(--rg-gauge);
  background: repeating-linear-gradient(to bottom, var(--rg-sleeper) 0 1px, transparent 1px var(--rg-pitch));
  border-inline: 1px solid var(--rg-rail);
  box-shadow: none;
  overflow: hidden;
}

/* One block occupies the main line at a time, top to bottom. */
.gs-connected .gs-plan-trunk::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: 0;
  height: 100%;
  background: linear-gradient(to bottom, transparent 72%, var(--gs-violet));
  opacity: 0;
}
:root[data-motion=on] .gs-connected .gs-plan-trunk::after {
  animation: rg-block 7s linear infinite;
}
/* Steady travel, then the line is clear again until the next one. */
@keyframes rg-block {
  0%        { transform: translateY(-100%); opacity: 0; }
  8%        { opacity: .85; }
  52%       { opacity: .85; }
  58%, 100% { transform: translateY(100%); opacity: 0; }
}

.gs-connected .gs-plan-room::before {
  top: 50%;
  height: var(--rg-gauge);
  margin-top: calc(var(--rg-gauge) / -2);
  background: repeating-linear-gradient(to right, var(--rg-sleeper) 0 1px, transparent 1px var(--rg-pitch));
  border-block: 1px solid var(--rg-rail);
}

/* The junction where each spur leaves the main line. */
.gs-connected .gs-plan-room::after {
  content: "";
  position: absolute;
  right: calc(100% + 41px);
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  background: var(--gs-violet);
  transform: rotate(45deg);
  box-shadow: 0 0 10px var(--gs-glow);
}
@media (max-width: 700px) {
  .gs-connected .gs-plan-room::after { right: calc(100% + 28px); }
}

/* Plan nodes and the frame's corner marks are junctions too. */
.gs-connected .gs-plan-node,
.gs-connected .gs-workspace::before,
.gs-connected .gs-workspace::after {
  transform: rotate(45deg);
}
.gs-connected .gs-workspace::before { left: -4.5px; top: -4.5px; }
.gs-connected .gs-workspace::after { right: -4.5px; bottom: -4.5px; }

/* ── The closing rule is the main line ─────────────────────────────────────
   Same 1px rule the page already drew, laid as track. */
.gs-connected .gs-close-line {
  height: var(--rg-gauge);
  background: repeating-linear-gradient(to right, var(--rg-sleeper) 0 1px, transparent 1px var(--rg-pitch));
  border-block: 1px solid var(--rg-rail);
  box-shadow: none;
}

/* ── Open source: a grid with part of it switched on ───────────────────────
   The dot field becomes junctions wired together; OSS is the lit part of the
   network. The extra selector clears `.railgrid-v2-oss svg { stroke: none }`
   in connected-open-source.css. */
.gs-connected .railgrid-v2-oss-art .railgrid-v2-oss-rail {
  fill: none;
  stroke: var(--oss-dots);
  stroke-width: .6;
  opacity: .3;
}
.gs-connected .railgrid-v2-oss-art .railgrid-v2-oss-accent-rail {
  fill: none;
  stroke: var(--oss-accent);
  stroke-width: .9;
  opacity: .3;
}