/* 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;
  width: 280px;
  display: flex;
  z-index: 9000;
  transition: width 0.2s ease;

  /* Browser zoom scales the rail along with everything else, so at 150% it
     took a third of the screen. --rail-k counters that: it tracks the viewport
     width, which zoom shrinks, so the rail keeps roughly its physical size
     while the content it sits beside grows as the reader asked. Set from JS --
     CSS cannot turn a viewport length into the unitless number scale() needs.

     The origin is the top-left corner the rail is anchored to, and the height
     is divided by the factor because transform does not affect layout: at
     scale 0.75 a 100% tall box would render three quarters of the way down
     and leave a gap. */
  transform: scale(var(--rail-k, 1));
  transform-origin: 0 0;
  height: calc((100vh - 90px) / var(--rail-k, 1));
  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: 12px;
  padding: 14px 16px;
  text-decoration: none;
}

.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: 15px;
  color: #e4e4e4;
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;
  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);
}

/* Phones do not lose it either, as of the mobile pass. There is no margin to
   float over at this width, so the rail stops being a rail and becomes a
   drawer: off-canvas until asked for, opened by a button at the bottom of the
   screen where a thumb reaches.

   Hiding it was the previous answer and it was the wrong one. Nothing else on
   the site links to the seven calculators -- not one href outside this file --
   so on a phone they were reachable by typing the URL and no other way. */
@media (max-width: 820px) {
  .tools-rail {
    /* Overrides the desktop scale(): a drawer slides, it does not shrink, and
       --rail-k has nothing to counter here because there is no zoom-vs-margin
       tension left at this width. */
    transform: translateX(-100%);
    transform-origin: 0 0;
    transition: transform 0.25s ease;

    top: 0;
    height: 100%;
    width: min(280px, 82vw);
    background: #171320;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 10050;              /* over the header, which is 10000 */
  }

  .tools-rail.drawer-open {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.65);
  }

  /* Seven items plus the header can outrun a short phone in landscape. */
  .tools-rail-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Roomier rows: 14px of padding is a fine mouse target and a poor thumb
     one. */
  .tools-rail-item {
    padding: 16px;
    min-height: 52px;
  }

  /* The collapsed width never applies in drawer mode -- the drawer is either
     off screen or showing its labels -- but the class can survive from a
     wider layout, so it is neutralised rather than trusted not to appear. */
  .tools-rail.collapsed {
    width: min(280px, 82vw);
  }

  .tools-rail.collapsed .tools-rail-header .menu-label,
  .tools-rail.collapsed .tools-rail-item .label {
    display: initial;
  }
}

/* The opener. Bottom left, within thumb reach, and out of the way of the
   header -- which is where a hamburger would have gone, and where nothing is
   meant to go. */
.tools-rail-launcher {
  display: none;
  position: fixed;
  left: 16px;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(199, 125, 255, 0.45);
  background: linear-gradient(145deg, #4b2a72, #2b1a44);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  color: #e9d4ff;
  cursor: pointer;
  z-index: 10040;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.tools-rail-launcher .bars,
.tools-rail-launcher .bars::before,
.tools-rail-launcher .bars::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.tools-rail-launcher .bars {
  position: relative;
}

.tools-rail-launcher .bars::before,
.tools-rail-launcher .bars::after {
  content: '';
  position: absolute;
  left: 0;
}

.tools-rail-launcher .bars::before { top: -6px; }
.tools-rail-launcher .bars::after  { top: 6px; }

.tools-rail-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 10045;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.tools-rail-backdrop.visible { opacity: 1; }

@media (max-width: 820px) {
  .tools-rail-launcher { display: flex; }
  .tools-rail-backdrop.shown { display: block; }

  /* The page must not scroll behind an open drawer. */
  body.rail-drawer-open { overflow: hidden; }
}