/* ============================================================================
   UNIFIED COCKPIT RAIL — one sidebar for every page in the prototype
   Sana · 31 Jul 2026

   Khoa: "when i click on different designs they've all got different sidebars".
   True — there were three, because three page families grew their own. This is
   one component with its OWN colours and sizes, deliberately not inheriting from
   the host stylesheet, so it renders identically whether the page is built on
   tokens.css, pj.css or lb.css.

   Structure follows the product (CockpitFrame.tsx on origin/develop):
     PRIMARY  7 surfaces
     PRODUCTS the strip Khoa asked to work from — each carrying its own state,
              so the rail answers "do I need to look today?" before any click
     ADMIN    13 surfaces, owner/capability gated
   ============================================================================ */
:root{ --ur-w:58px }

.unirail{
  position:fixed;left:0;top:0;bottom:0;width:var(--ur-w);z-index:400;
  background:#0a0c11;border-right:1px solid #232a38;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:11px 0 9px;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;font-family:-apple-system,"SF Pro Text",ui-sans-serif,system-ui,sans-serif}
.unirail::-webkit-scrollbar{display:none}
/* every host page gets pushed clear of the fixed rail */
body.has-unirail{padding-left:var(--ur-w) !important}
body.has-unirail > .app,
body.has-unirail > .app3{min-height:100vh}

.unirail .u-logo{width:30px;height:30px;border-radius:9px;flex:none;
  background:linear-gradient(150deg,#7c8cff,#6d4bd0);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:12px;
  text-decoration:none;margin-bottom:5px}
.unirail a{text-decoration:none}
.unirail .u-i{width:36px;height:36px;border-radius:9px;flex:none;position:relative;
  display:grid;place-items:center;color:#5f6a7d;font-size:15px;line-height:1}
.unirail .u-i:hover{background:#171b25;color:#e7eaf1}
.unirail .u-i.on{background:#171b25;color:#e7eaf1}
.unirail .u-i.on::before{content:"";position:absolute;left:-9px;top:8px;bottom:8px;
  width:3px;border-radius:0 3px 3px 0;background:#7c8cff}

.unirail .u-div{width:22px;height:1px;background:#232a38;margin:7px 0 3px;flex:none}
.unirail .u-k{font-size:7px;letter-spacing:.13em;color:#5f6a7d;font-weight:800;
  margin-bottom:3px;flex:none}

/* PRODUCTS — the strip that made Khoa pick this rail. State lives on the chip. */
.unirail .u-p{width:32px;height:32px;border-radius:9px;flex:none;position:relative;
  display:grid;place-items:center;font-size:10.5px;font-weight:800;
  background:#12151d;color:#98a2b3;border:1px solid #232a38}
.unirail .u-p:hover{border-color:#2c3546;color:#e7eaf1}
.unirail .u-p.on{border-color:#7c8cff;color:#e7eaf1}
.unirail .u-p[data-s="quiet"]{opacity:.45}
.unirail .u-p[data-s="quiet"]:hover{opacity:1}
.unirail .u-p .u-dot{position:absolute;top:-3px;right:-3px;width:9px;height:9px;
  border-radius:50%;border:2px solid #0a0c11}
.unirail .u-p[data-s="wait"] .u-dot{background:#e3a008}
.unirail .u-p[data-s="live"] .u-dot{background:#39d0d8}

/* ADMIN — quieter tier; gated items carry a hairline so the prototype does not
   imply every operator sees them */
.unirail .u-i.adm{width:31px;height:31px;font-size:12.5px;opacity:.7}
.unirail .u-i.adm:hover,.unirail .u-i.adm.on{opacity:1}
.unirail .u-i.adm[data-cap="1"]::after{content:"";position:absolute;right:3px;bottom:3px;
  width:4px;height:4px;border-radius:50%;background:#5f6a7d}
.unirail .u-spring{margin-top:auto}

/* tooltip — the rail is icon-only, so the label has to be reachable somehow */
.unirail .u-i,.unirail .u-p{overflow:visible}
.unirail .u-tip{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);
  background:#1c212d;border:1px solid #2c3546;border-radius:7px;padding:5px 9px;
  font-size:11.5px;color:#e7eaf1;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .1s;z-index:10}
.unirail .u-tip s{text-decoration:none;display:block;color:#5f6a7d;font-size:9.5px;
  font-family:ui-monospace,Menlo,monospace;margin-top:1px}
.unirail a:hover .u-tip,.unirail a:focus-visible .u-tip{opacity:1}
.unirail a:focus-visible{outline:2px solid #7c8cff;outline-offset:2px}

/* the old per-family rails are replaced, not left to fight this one */
.unirail ~ .app > aside.rail,
body.has-unirail aside.rail,
body.has-unirail nav.rail{display:none !important}
body.has-unirail .app{grid-template-columns:minmax(0,1fr) !important}
/* .lay (Ship, Work items) is a THREE-column grid — 56px rail, 244px view-nav,
   content. Hiding the rail removes it from the grid flow, so every remaining
   child shifts one column left: the 244px view-nav got 56px and the content got
   244px. A hidden grid child does not leave its column behind — the track count
   has to come down with it. */
body.has-unirail .lay{grid-template-columns:244px minmax(0,1fr) !important}
@media(max-width:900px){ body.has-unirail .lay{grid-template-columns:minmax(0,1fr) !important} }
body.has-unirail .app3{grid-template-columns:246px minmax(0,1fr) 400px !important}
body.has-unirail .app3.drawer-closed{grid-template-columns:246px minmax(0,1fr) 0 !important}
@media(max-width:1200px){ body.has-unirail .app3{grid-template-columns:1fr !important} }