/* ============================================================================
   Side rail
   ----------------------------------------------------------------------------
   Round marks planted down the left edge of the scene. Each is an icon over a
   dark disc with its name on a plate beneath — the same signpost shape the
   hotspots in the scene use, so the two read as one family rather than as
   chrome bolted over artwork.

   It sits on the World UI layer, above the scene and below the HUD: these
   are things standing in the courtyard, not screen furniture.

   Depends on tokens.css and kit.css.
   ========================================================================== */

.rail-wrap {
  position: absolute;
  z-index: var(--z-world);
  top: var(--s2);
  left: 0;
  display: flex;
  align-items: flex-start;
  pointer-events: none;      /* the gap between buttons is still scene */
}

.rail {
  display: grid;
  gap: var(--s2);
  padding: var(--s2) 6px;
  pointer-events: auto;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
}

/* The painted strip carries its own edges, so the CSS padding hands the job
   over to the border it draws. */
.rail.is-painted { padding: 0 2px; }

.rail-btn {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform var(--t-quick) var(--ease-out);
}
.rail-btn:hover { transform: translateX(2px); }
.rail-btn:active { transform: translateX(0) scale(0.94); }

/* The disc. Dark enough that a painted icon reads on top of it whatever the
   scene behind happens to be doing. */
.rail-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(74% 74% at 38% 28%, var(--ink-600), var(--ink-900));
  box-shadow:
    inset 0 0 0 2px var(--gold-500),
    var(--bevel),
    var(--shelf-sm) var(--ink-900),
    var(--cast-sm);
}

.rail-label {
  padding: 1px 7px;
  border-radius: var(--rad-sm);
  border: 1px solid rgba(240, 192, 112, 0.38);
  background: linear-gradient(180deg, rgba(16, 20, 32, 0.95), rgba(8, 10, 16, 0.95));
  font-family: var(--font-display);
  font-size: 0.6rem;
  color: var(--gold-200);
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Not built yet. Quiet rather than hidden — a rail with gaps in it reads as
   broken, and a greyed entry at least tells the truth about what is there. */
.rail-btn.is-soon .rail-ico { filter: grayscale(0.7) brightness(0.72); }
.rail-btn.is-soon .rail-label { color: var(--text-dim); border-color: rgba(255, 255, 255, 0.14); }

.rail-btn .kit-badge { position: absolute; top: -3px; right: 2px; }

/* --- collapse --------------------------------------------------------------
   The rail covers a sixth of a 360dp scene. The player decides whether the
   shortcuts or the artwork win, and the choice is remembered. */

.rail-toggle {
  display: grid;
  place-items: center;
  width: 20px;
  height: 46px;
  margin-top: var(--s4);
  padding: 0;
  border: 0;
  border-radius: 0 var(--rad-sm) var(--rad-sm) 0;
  background: linear-gradient(180deg, rgba(20, 26, 42, 0.9), rgba(8, 11, 18, 0.9));
  box-shadow: var(--cast-sm);
  cursor: pointer;
  pointer-events: auto;
  transition: transform var(--t-base) var(--ease-out);
}
.rail-toggle .gi { transform: rotate(180deg); transition: transform var(--t-base) var(--ease-out); }

.rail-wrap.is-collapsed .rail {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}
.rail-wrap.is-collapsed .rail-toggle { transform: translateX(-100%); }
.rail-wrap.is-collapsed .rail-toggle .gi { transform: rotate(0deg); }

/* --- the not-yet sheet ---------------------------------------------------- */

.rail-soon-text {
  margin: 0;
  font-size: var(--fz-body);
  line-height: 1.5;
  color: var(--text-muted);
}
.rail-soon-actions { margin-top: var(--s4); }