/* The rail in the app's look. Every rule sits under html[data-rail="3d"], so switching the mode in
   js/rail3d-mode.js to 'flat' leaves the earlier rail exactly as it was. Turn and rise are the founder's saved
   values (31 and 23 degrees); the icons were rendered with them, the divider lines lean with them. */

  html[data-rail="3d"] { --rail-rot: 31deg; --rail-elev: 23deg; --i3d: 56px; }
  html[data-rail="3d"] .railnav { gap: 3px; padding: 0 4px; top: calc(var(--hdr) + var(--c0x-sidebar-cutout-bottom) + 14px); }
  html[data-rail="3d"] .railnav a { width: 62px; gap: 0; }
  html[data-rail="3d"] .railnav .disc { position: relative; width: var(--i3d); height: var(--i3d); border-radius: 0; background: none; box-shadow: none; }
  html[data-rail="3d"] .railnav .disc svg { display: none; }
  html[data-rail="3d"] .disc .i3d { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 6px rgba(0,0,0,.5)); transition: transform .4s var(--ease), filter .4s var(--ease); }
  /* a pressed-up icon and a light on it, in place of the app's moving parts */
  html[data-rail="3d"] .railnav a:hover .disc, html[data-rail="3d"] .railnav a.on .disc { transform: none; box-shadow: none; }
  html[data-rail="3d"] .railnav a:hover .i3d { transform: translateY(-3px) scale(1.08); filter: brightness(1.18) drop-shadow(0 9px 10px rgba(0,0,0,.55)); }
  html[data-rail="3d"] .railnav a.on .i3d { filter: brightness(1.22) drop-shadow(0 0 9px rgba(8,223,247,.45)) drop-shadow(0 5px 6px rgba(0,0,0,.5)); }
  html[data-rail="3d"] .railnav a:active .i3d { transform: translateY(0) scale(.97); }

  /* the slanted lines. Without a perspective on the parent, turning a level line about both axes leans it by
     atan(tan(turn) * sin(rise)), about 13 degrees up to the right, and its width is stretched back by 1 / cos(turn)
     so it still reaches both edges of the rail: the same sum the app's divider does. */
  html[data-rail="3d"] .rail-div { flex: 0 0 auto; align-self: center; display: block; height: 1px; width: 82px; width: calc(var(--c0x-sidebar-rail-width) / cos(var(--rail-rot))); margin: 9px 0 10px; background: #5b6b84; pointer-events: none; transform: rotateX(var(--rail-elev)) rotateY(calc(-1 * var(--rail-rot))); }
  /* the names lean on the same plane as the lines and the icons (founder, 10-05: "the labels below the icons are not in
     perspective like the icons"). The turn narrows them by cos(turn), so the type is set a step larger. */
  html[data-rail="3d"] .railnav .rail-lab { display: block; font-size: 10.5px; line-height: 1.15; white-space: nowrap; transform: rotateX(var(--rail-elev)) rotateY(calc(-1 * var(--rail-rot))); transform-origin: 50% 0; margin-top: -3px; }
  html[data-rail="3d"] .rail-div:first-child { margin-top: 2px; }
  html[data-rail="3d"] .rail-div:last-child { margin-bottom: 0; }

  /* the station signs wear the same icons, a size up */
  html[data-rail="3d"] .sign .disc[data-i3d] { position: relative; width: 62px; height: 62px; margin: -6px -6px -6px 0; border-radius: 0; background: none; box-shadow: none; }
  html[data-rail="3d"] .sign .disc[data-i3d] svg { display: none; }

  @media (max-width: 1099px) {
    html[data-rail="3d"] { --i3d: 50px; }
    html[data-rail="3d"] .railnav { gap: 1px; top: calc(var(--hdr) + var(--c0x-sidebar-cutout-bottom) + 6px); }
    html[data-rail="3d"] .rail-div { margin: 6px 0 7px; }
  }
  /* phones: eight icons with their labels have to fit between the orb and the Join button without a scroll */
  @media (max-width: 760px) { html[data-rail="3d"] { --i3d: 45px; } html[data-rail="3d"] .railnav { gap: 0; } html[data-rail="3d"] .railnav .disc { width: var(--i3d); height: var(--i3d); } }
  @media (max-width: 760px) and (max-height: 800px) { html[data-rail="3d"] { --i3d: 40px; } html[data-rail="3d"] .railnav .disc { width: var(--i3d); height: var(--i3d); } }
  @media (prefers-reduced-motion: reduce) { html[data-rail="3d"] .disc .i3d { transition: none; } }