/* Fixed left-side rail listing the site's calculators/tools. Sits below the
   fixed header bar (top-header-bar, 90px) and collapses to icon-only. Zero
   drawn boxes on purpose — only a spine line and a top-border accent on the
   active row, same "no card" rule as the rest of the redesigned surfaces.

   The rail floats over the empty margin beside the centered .container —
   it does not reserve layout space, so collapsing/expanding it only resizes
   the rail itself and never shifts the page content. Below 860px there is
   no margin to float over, so it is hidden outright rather than overlapping
   the container. */

.tools-rail {
  position: fixed;
  top: 90px;
  left: 0;
  bottom: 0;
  width: 260px;
  display: flex;
  z-index: 9000;
  transition: width 0.2s ease;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.tools-rail.collapsed {
  width: 80px;
}

.tools-rail-spine {
  width: 4px;
  flex-shrink: 0;
  background: #2b2040;
}

.tools-rail-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tools-rail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 20px 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tools-rail.collapsed .tools-rail-header {
  justify-content: center;
  padding-left: 10px;
  padding-right: 10px;
}

.tools-rail-header .menu-label {
  font-size: 18px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #c77dff;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
}

.tools-rail.collapsed .tools-rail-header .menu-label {
  display: none;
}

.tools-rail-items {
  display: flex;
  flex-direction: column;
}

.tools-rail-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}

.tools-rail-item.current {
  background: #1a1622;
  border-top: 2px solid #7b2cbf;
}

.tools-rail-item .icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  object-fit: contain;
  image-rendering: pixelated;
}

.tools-rail-item .label {
  font-size: 17px;
  color: #e4e4e4;
  font-weight: 600;
  transition: color 0.15s ease;
}

.tools-rail-item:hover .label {
  color: #c77dff;
}

.tools-rail.collapsed .label {
  display: none;
}

/* Toggle button lives in the header now, not floating off an item row. */
.tools-rail-toggle {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #1a1622;
  border: 1px solid #7b2cbf;
  color: #c77dff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.tools-rail-toggle .arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.tools-rail.collapsed .tools-rail-toggle .arrow {
  transform: rotate(180deg);
}

@media (max-width: 860px) {
  .tools-rail { display: none; }
}