/* ==========================================================================
   Side rail navigation
   A plain-JS port of the React Bits "LineSidebar" look: marker lines from the screen edge,
   short ticks between items, index numbers, and a proximity effect driven by one
   custom property (--effect, 0..1) per item. Colours and type follow the Zeraya tokens.
   ========================================================================== */

:root {
  --rail: 0px;                 /* width reserved for the rail; set at the desktop breakpoint */
}

.rail { display: none; }

.line-sidebar {
  --accent-color: var(--mauve);
  --text-color: var(--ink-2);
  --marker-color: rgba(42, 30, 32, .34);
  --marker-length: 46px;
  --marker-gap: 14px;
  --tick-scale: .5;
  --max-shift: 16px;
  --item-gap: 17px;
  --font-size: .98rem;
  position: relative;
  display: flex;
  justify-content: flex-start;
  padding-left: calc(var(--marker-length) + var(--marker-gap));
}
.line-sidebar__list {
  list-style: none;
  margin: 0;
  padding: .5rem 0;
  display: flex;
  flex-direction: column;
  gap: var(--item-gap);
}
.line-sidebar__item { position: relative; }
.line-sidebar__link {
  position: relative;
  display: block;
  text-decoration: none;
  outline-offset: 6px;
}
/* widen the pointer target so items react a touch before the cursor arrives */
.line-sidebar__link::before { content: ""; position: absolute; inset: -7px -40px -7px calc(-1 * (var(--marker-length) + var(--marker-gap))); }
.line-sidebar__label {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  font-size: var(--font-size);
  line-height: 1.2;
  white-space: nowrap;
  color: color-mix(in srgb, var(--accent-color) calc(var(--effect, 0) * 100%), var(--text-color));
  transform: translateX(calc(var(--effect, 0) * var(--max-shift)));
}
.line-sidebar__index {
  margin-right: .6rem;
  font-size: .78em;
  font-weight: 500;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  opacity: calc(.5 + var(--effect, 0) * .5);
}
.line-sidebar__marker {
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--marker-length) - var(--marker-gap));
  width: var(--marker-length);
  height: 1px;
  background-color: color-mix(in srgb, var(--accent-color) calc(var(--effect, 0) * 100%), var(--marker-color));
  transform-origin: left center;
  transform: translateY(-50%) scaleX(calc(.62 + var(--effect, 0) * .38));
}
/* short tick centred in the gap between two items; it grows with proximity too */
.line-sidebar__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(100% + var(--item-gap) / 2);
  left: calc(-1 * var(--marker-length) - var(--marker-gap));
  width: calc(var(--marker-length) * var(--tick-scale));
  height: 1px;
  background-color: var(--marker-color);
  opacity: .55;
  transform-origin: left center;
  transform: translateY(-50%) scaleX(calc(.7 + var(--effect, 0) * .6));
  pointer-events: none;
}
.line-sidebar__link[aria-current="true"] .line-sidebar__text { font-weight: 500; }
/* without motion the label stays put; colour still shows the state */
html:not(.motion) .line-sidebar { --max-shift: 0px; }

/* ---------- Desktop: fixed column on the left ---------- */
@media (min-width: 1200px) {
  :root { --rail: 236px; --nav-h: 0px; }
  body { padding-left: var(--rail); }

  .rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: var(--rail);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px 0 26px;
    background: var(--bg);
    border-right: 1px solid var(--line);
  }
  .rail__logo { display: block; margin-left: calc(46px + 14px); width: 118px; }
  .rail__logo svg { width: 100%; height: auto; }
  .rail__foot { margin-left: calc(46px + 14px); display: grid; gap: 1.1rem; justify-items: start; }
  .rail__foot .btn { padding: .6rem .95rem; font-size: .88rem; gap: .45rem; }
  .rail__social { display: flex; gap: .9rem; }
  .rail__social a { display: inline-flex; color: var(--ink-2); transition: color .3s; }
  .rail__social a:hover, .rail__social a:focus-visible { color: var(--mauve); }
  .rail__social svg { width: 22px; height: 22px; }

  /* the top bar and the phone shortcut are replaced by the rail */
  .nav, .fab { display: none !important; }
}

/* short desktop screens: tighten the list so the rail never scrolls */
@media (min-width: 1200px) and (max-height: 760px) {
  .line-sidebar { --item-gap: 12px; --font-size: .93rem; }
  .rail { padding: 22px 0 18px; }
}