@layer layout {
.rail {
  background: var(--bg-0);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0 12px;
  gap: 6px;
}
.rail .logo { width: 36px; height: 36px; display: grid; place-items: center; margin-bottom: 10px; }
.rail .grow { flex: 1; }
.rail-sep { width: 24px; height: 1px; background: var(--line-2); margin: 8px 0; }

.proj { width: 38px; height: 38px; border-radius: var(--r-11); display: grid; place-items: center; position: relative; font-family: var(--f-display); font-weight: 800; font-size: var(--fs-13); }
.proj.next { background: var(--bg-3); color: var(--fg-3); border: 1px dashed var(--line-2); }
.proj.add { color: var(--fg-3); border: 1px solid var(--line-2); }
.proj.add:hover { color: var(--fg); border-color: var(--fg-4); }
.proj.on::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 var(--r-4) var(--r-4) 0; background: var(--loop); }

.rbtn { width: 38px; height: 38px; border-radius: var(--r-10); display: grid; place-items: center; color: var(--fg-3); position: relative; }
.rbtn:hover { background: var(--bg-3); color: var(--fg); }
.rbtn.on { background: var(--sel); color: var(--fg); }
.rbtn .badge {
  position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; border-radius: var(--r-8);
  background: var(--sev-critical); color: var(--fg); font-size: var(--fs-9-5); font-weight: 700;
  display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--bg-0);
}

/* Hover labels for icon-only rail buttons */
.tip {
  position: absolute; left: 46px; white-space: nowrap; background: var(--bg-5); color: var(--fg);
  font-size: var(--fs-11-5); padding: 4px 8px; border-radius: var(--r-6); pointer-events: none; opacity: 0;
  transform: translateX(-4px); transition: var(--t-base); z-index: var(--z-rail); font-family: var(--f-ui); font-weight: 500;
}
.rbtn:hover .tip, .proj:hover .tip, .rail-new:hover .tip { opacity: 1; transform: none; }
/* New ticket on the rail while the big sidebar is folded: small and white, so it reads as the main action. */
.rail-new { width: 30px; height: 30px; border-radius: var(--r-9); place-items: center; background: var(--fg); color: var(--bg-1); position: relative; margin-top: 2px; }
.rail-new:hover { background: var(--fg-2); }
.rail-new .i { stroke-width: 2.4; }

/* Project icon */
.picon {
  border-radius: var(--r-11); display: grid; place-items: center; flex: none; font-family: var(--f-display); font-weight: 800;
  color: var(--picon-eco-ink); background: var(--picon-eco);
  position: relative; overflow: hidden;
}
.picon::after { content: ""; position: absolute; width: 60%; height: 60%; right: -12%; top: -12%; border-radius: var(--r-round); background: rgb(var(--white-rgb) / 0.18); }
.picon.ember { background: var(--picon-ember); color: var(--picon-ember-ink); }
.picon.iris { background: var(--picon-iris); color: var(--picon-iris-ink); }
.picon.ocean { background: var(--picon-ocean); color: var(--picon-ocean-ink); }
.picon.rose { background: var(--picon-rose); color: var(--picon-rose-ink); }
.picon.slate { background: var(--picon-slate); color: var(--picon-slate-ink); }
.picon .i { width: 52%; height: 52%; stroke-width: 1.9; position: relative; z-index: 1; }
.picon.img { background: var(--bg-3); }
.picon.img::after { content: none; }
.picon img { width: 100%; height: 100%; object-fit: cover; }
.picon.size-s { width: 20px; height: 20px; border-radius: var(--r-6); font-size: var(--fs-8); letter-spacing: -0.02em; }
.picon.size-m { width: 34px; height: 34px; font-size: var(--fs-11); letter-spacing: -0.02em; }
.picon.size-l { width: 38px; height: 38px; font-size: var(--fs-12); letter-spacing: -0.02em; }
.picon.size-xl { width: 48px; height: 48px; font-size: var(--fs-15); border-radius: var(--r-13); }
}