/* ==========================================================================
   KRESTA TEXTILE — Edge rail (vertical section nav)
   --------------------------------------------------------------------------
   Collapsed, it is five hairline ticks against the left edge — a section
   indicator quiet enough to ignore. On approach it expands into a panel.

   Deliberately NOT invisible. A trigger with no affordance is undiscoverable,
   and the left edge is where people reach for the browser back button, so a
   bare hot zone fires by accident constantly. The ticks announce that
   something is there and mark where you are while it is shut.

   The hot zone starts at the true viewport edge (left: 0) so it catches a
   mouse thrown at the wall, but the visible marks sit inboard of --frame,
   in line with the card stack.
   ========================================================================== */

.rail {
  --rail-w: min(19rem, 82vw);
  --rail-shut: calc(var(--frame) + 2.25rem);

  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--rail-shut);
  /* Below the header (60) so the fixed bar keeps its rounded corner. */
  z-index: 55;
  display: flex;
  align-items: center;
}

/* Open state widens the hot zone to cover the panel, so the pointer sitting
   anywhere inside it counts as "still here" and it does not flicker shut. */
.rail.is-open {
  width: calc(var(--frame) + var(--rail-w));
}

/* ------------------------------------------------------------- the ticks - */

.rail__trigger {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.65rem;
  height: 100%;
  padding-left: calc(var(--frame) + 0.75rem);
  padding-right: 0.75rem;
  background: none;
  border: 0;
  cursor: pointer;
}

.rail__tick {
  display: block;
  width: 12px;
  height: 1px;
  background: var(--text-4);
  opacity: 0.5;
  transition: width var(--dur-mid) var(--ease-out),
    opacity var(--dur-mid) var(--ease-out),
    background var(--dur-mid) var(--ease-out);
}

.rail__tick.is-current {
  width: 22px;
  opacity: 1;
  background: var(--text);
}

.rail:hover .rail__tick,
.rail:focus-within .rail__tick {
  opacity: 0.85;
}

/* The ticks are the panel's own affordance; once it is open they would just
   sit on top of it. */
.rail.is-open .rail__trigger {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}

/* ---------------------------------------------------------------- panel -- */

.rail__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--frame);
  width: var(--rail-w);
  z-index: 1;

  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding: calc(6.5rem + var(--frame)) var(--s-6) var(--s-7);

  background: linear-gradient(
    170deg,
    var(--card-deep-top) 0%,
    var(--card-deep-bot) 100%
  );
  border-radius: var(--radius-card);
  border: 1px solid var(--hairline);
  box-shadow: 18px 0 48px rgba(12, 24, 22, 0.34);

  overflow-y: auto;
  overscroll-behavior: contain;

  transform: translateX(calc(-100% - var(--frame) - 4px));
  visibility: hidden;
  transition: transform var(--dur-mid) var(--ease-out),
    visibility var(--dur-mid) var(--ease-out);
}

.rail.is-open .rail__panel {
  transform: translateX(0);
  visibility: visible;
}

.rail__head {
  display: block;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--hairline);
}

/* ----------------------------------------------------------------- list -- */

.rail__list {
  display: flex;
  flex-direction: column;
}

.rail__link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-3) 0 var(--s-3) 0;
  border-bottom: 1px solid var(--hairline);
  /* The indent on hover — the one behaviour asked for by name. */
  transition: padding-left var(--dur-mid) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.rail__link:hover,
.rail__link:focus-visible {
  padding-left: var(--s-4);
}

/* Leading hairline that grows with the indent, so the movement reads as
   deliberate rather than as the text drifting. */
.rail__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--text-2);
  transition: width var(--dur-mid) var(--ease-out);
}

.rail__link:hover::before,
.rail__link:focus-visible::before,
.rail__link.is-current::before {
  width: 0.6rem;
}

.rail__link.is-current {
  padding-left: var(--s-4);
}

.rail__idx {
  flex: 0 0 auto;
  font-family: var(--font-ui);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-eyebrow);
  color: var(--text-4);
}

.rail__label {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 300;
  line-height: 1.2;
  color: var(--text-2);
  transition: color var(--dur-fast) var(--ease-out);
}

.rail__link:hover .rail__label,
.rail__link:focus-visible .rail__label,
.rail__link.is-current .rail__label {
  color: var(--text);
}

.rail__link.is-current .rail__idx {
  color: var(--text-2);
}

/* ----------------------------------------------------------------- foot -- */

.rail__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
}

/* Glass panes now, so no left inset to compensate for a drawn shape —
   they align flush with the section list above. */
.rail__foot .btn {
  align-self: stretch;
  justify-content: center;
}

.rail__foot .rail__close {
  margin-top: var(--s-2);
}

.rail__close {
  display: none;
}

/* ---------------------------------------------------------- breakpoints -- */

@media (max-width: 960px) {
  /* The header's centre nav is hidden at this width, so the rail becomes
     the only section navigation. Give the ticks a larger tap target and
     show an explicit close, since there is no pointer to leave with. */
  .rail__trigger {
    padding-right: 1.25rem;
  }

  .rail__tick {
    height: 2px;
  }

  .rail__close {
    display: inline-flex;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .rail {
    --rail-w: min(17rem, 86vw);
  }

  .rail__panel {
    padding-top: calc(5.5rem + var(--frame));
  }

  .rail__label {
    font-size: 1.25rem;
  }
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .rail__panel,
  .rail__tick,
  .rail__link,
  .rail__link::before {
    transition: none;
  }
}

/* Printing a slide-out panel makes no sense. */
@media print {
  .rail {
    display: none;
  }
}