/* ── Lios Rail: shared module (N1 — one rail, one source) ── */
/* Served at /assets/lios-rail.css by lios-store. */
/* Consumed by boards (dashboard.py render) and SPA views. */
/* 1a16364 docked-station fix: rail-col min-height:0 + overflow-y:auto (hidden */
/* scrollbar, overscroll contained), drawer min-height:0, drawer-body flex:1 */
/* min-height:0 overflow-y:auto, dvh fallbacks after each vh max-height. */
/* R2: the rail owns its palette. Host pages/skins MUST NOT restyle it via */
/* generic tokens (--text, --accent, --border leaked in from themed boards */
/* and produced invisible icons + white-on-white). A skin that wants to */
/* tint the rail sets the --rail-* hooks below — an explicit act, never */
/* an accident. */

.rail,.palette-overlay{
  --rail-text:rgba(255,255,255,.92);
  --rail-text2:rgba(255,255,255,.68);
  --rail-text3:rgba(255,255,255,.48);
  --rail-border:rgba(255,255,255,.11);
  --rail-accent:#5eead4;
  --rail-accent2:#38bdf8;
  --rail-tile-ink:#0f172a;
}

/* ---------- Rail: one morphing glass object (column ↔ zoned drawer) ---------- */
.rail{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:70;
display:flex;flex-direction:column;width:66px;max-height:92vh;max-height:92dvh;border-radius:30px;overflow:hidden;
background:linear-gradient(180deg,rgba(15,23,42,.78),rgba(15,23,42,.92));
backdrop-filter:blur(22px) saturate(155%);-webkit-backdrop-filter:blur(22px) saturate(155%);
border:1px solid var(--rail-border);
box-shadow:0 14px 48px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.16),0 0 26px rgba(94,234,212,.06);
transition:width .42s cubic-bezier(.2,.85,.2,1),max-height .42s cubic-bezier(.2,.85,.2,1),border-radius .42s,box-shadow .25s;
animation:railIn .5s cubic-bezier(.2,.8,.2,1) both}
.rail.morphing{backdrop-filter:none;-webkit-backdrop-filter:none;will-change:width,max-height}
@keyframes railIn{from{opacity:0;transform:translateY(-50%) translateX(18px)}to{opacity:1;transform:translateY(-50%) translateX(0)}}
.rail .spine{position:absolute;left:-6px;top:18px;bottom:18px;width:3px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden}
.rail .spine i{position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(180deg,var(--rail-accent),var(--rail-accent2));border-radius:3px;box-shadow:0 0 8px var(--rail-accent);transform:scaleY(0);transform-origin:top}
.rail-col{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.rail-col::-webkit-scrollbar{display:none}
.rail-div{width:26px;height:1px;background:var(--rail-border);margin:3px 0;flex-shrink:0}
.drawer{display:none;flex-direction:column;min-height:0}
.drawer-head{display:flex;align-items:center;gap:.7rem;padding:.8rem .9rem;border-bottom:1px solid var(--rail-border)}
.drawer-head .ws-tile{font-weight:800;font-size:1rem;color:var(--rail-tile-ink);width:36px;height:36px;border-radius:11px;
display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--rail-accent),var(--rail-accent2));box-shadow:0 0 16px rgba(94,234,212,.32);flex-shrink:0}
.drawer-title{font-weight:700;font-size:.96rem;letter-spacing:-.01em;color:var(--rail-text)}
.drawer-close{margin-left:auto;width:38px;height:38px;border:none;background:transparent;color:var(--rail-text3);font-size:1.5rem;line-height:1;cursor:pointer;border-radius:10px;transition:background .2s,color .2s;-webkit-tap-highlight-color:transparent}
.drawer-close:active{background:rgba(255,255,255,.07);color:var(--rail-text)}
.drawer-body{flex:1;min-height:0;overflow-y:auto;padding:.5rem .6rem 1rem;overscroll-behavior:contain}
.zone{padding:.4rem 0}
.zone+.zone{border-top:1px solid var(--rail-border);margin-top:.4rem;padding-top:.7rem}
.zone-label{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rail-text3);padding:.3rem .7rem .5rem}
.d-item{display:flex;align-items:center;gap:.7rem;padding:.62rem .7rem;border-radius:11px;color:var(--rail-text2);text-decoration:none;font-size:.9rem;font-weight:500;min-height:48px;cursor:pointer;transition:background .18s,color .18s;-webkit-tap-highlight-color:transparent}
.d-item svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;opacity:.85}
.d-item:active{background:rgba(255,255,255,.06)}
.d-item.current{color:var(--rail-accent);background:linear-gradient(135deg,rgba(94,234,212,.16),rgba(56,189,248,.08));box-shadow:inset 0 0 0 1px rgba(94,234,212,.3)}
.d-item.current svg{opacity:1;filter:drop-shadow(0 0 3px rgba(94,234,212,.5))}
.d-item.indent{padding-left:2.2rem;font-size:.85rem}
.d-item .soon{margin-left:auto;font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rail-text3);background:rgba(255,255,255,.05);border:1px solid var(--rail-border);padding:.18rem .45rem;border-radius:6px}
.d-item .na{margin-left:auto;font-size:.62rem;color:var(--rail-text3);font-style:italic}
.d-item.greymd{opacity:.45;cursor:default}
.nav-btn{position:relative;width:48px;height:48px;display:flex;align-items:center;justify-content:center;
border:none;background:transparent;cursor:pointer;color:var(--rail-text3);text-decoration:none;border-radius:13px;
transition:color .2s,background .2s,transform .12s,box-shadow .2s;-webkit-tap-highlight-color:transparent;flex-shrink:0}
.nav-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.nav-btn .ws-tile{font-weight:800;font-size:1rem;color:var(--rail-tile-ink);width:36px;height:36px;border-radius:11px;
display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--rail-accent),var(--rail-accent2));box-shadow:0 0 16px rgba(94,234,212,.32)}
.nav-btn:active{transform:scale(.9);background:rgba(255,255,255,.07)}
.nav-btn.active{color:var(--rail-accent);background:linear-gradient(135deg,rgba(94,234,212,.2),rgba(56,189,248,.1));
box-shadow:0 0 16px rgba(94,234,212,.3),inset 0 0 0 1px rgba(94,234,212,.35)}
.nav-btn.active svg{filter:drop-shadow(0 0 3px rgba(94,234,212,.5))}
.nav-btn .label{position:absolute;right:calc(100% + 11px);top:50%;transform:translateY(-50%) translateX(5px);
white-space:nowrap;font-size:.71rem;font-weight:600;color:var(--rail-text);background:rgba(15,23,42,.92);
border:1px solid var(--rail-border);padding:.3rem .65rem;border-radius:7px;opacity:0;pointer-events:none;
transition:opacity .2s,transform .2s;backdrop-filter:blur(8px)}
.nav-btn.active .label,.nav-btn:focus-visible .label{opacity:1;transform:translateY(-50%) translateX(0)}
.rail.expanded{width:344px;max-height:86vh;max-height:86dvh}
.rail.expanded .rail-col,.rail.expanded .spine{display:none}
.rail.expanded .drawer{display:flex;animation:drawerIn .26s ease .05s both}
@keyframes drawerIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.scrim{position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.show{opacity:1;pointer-events:auto}

/* ---------- Command center (packet 07 — Center Stage) ---------- */
/* The rail owns this surface too: host pages/skins never render or restyle
   a second palette. Labels/prose render via textContent; preview prose is
   never ellipsized. */
.palette-overlay{position:fixed;inset:0;z-index:80;display:none;align-items:flex-start;justify-content:center;padding-top:12vh;background:rgba(4,8,16,.5)}
.palette-overlay.open{display:flex}
.palette.cmd{width:720px;max-width:94vw;max-height:74vh;max-height:74dvh;display:flex;flex-direction:column;background:rgba(15,23,42,.96);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
border:1px solid rgba(255,255,255,.14);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.6);overflow:hidden;animation:paletteIn .2s ease both}
@keyframes paletteIn{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
.cmd-head{display:flex;flex-direction:column;gap:.55rem;padding:.75rem .9rem .65rem;border-bottom:1px solid var(--rail-border)}
.cmd-title-row{display:flex;align-items:center;gap:.6rem;min-height:44px}
.cmd-context{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rail-text3)}
.cmd-close{margin-left:auto;width:44px;height:44px;border:none;background:transparent;color:var(--rail-text3);font-size:1.4rem;line-height:1;cursor:pointer;border-radius:11px;transition:background .2s,color .2s;-webkit-tap-highlight-color:transparent}
.cmd-close:active{background:rgba(255,255,255,.07);color:var(--rail-text)}
.palette-input{width:100%;padding:.8rem 1rem;border:1px solid var(--rail-border);border-radius:11px;background:rgba(255,255,255,.04);color:var(--rail-text);
font-size:1rem;font-family:'Inter',-apple-system,sans-serif;outline:none}
.palette-input::placeholder{color:var(--rail-text3)}
.cmd-chips{display:flex;gap:.35rem;flex-wrap:wrap}
.cmd-chip{min-height:44px;padding:0 .9rem;border-radius:999px;border:1px solid var(--rail-border);background:transparent;color:var(--rail-text2);
font-size:.74rem;font-weight:600;font-family:inherit;cursor:pointer;transition:color .15s,border-color .15s,background .15s;-webkit-tap-highlight-color:transparent}
.cmd-chip.active{color:var(--rail-accent);border-color:rgba(94,234,212,.45);background:rgba(94,234,212,.1)}
.cmd-chip.text-chip{display:none}
.cmd-chip.text-chip.on{display:inline-block}
.cmd-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 300px}
.cmd-results{min-height:0;overflow-y:auto;padding:.35rem .5rem .55rem;border-right:1px solid var(--rail-border);overscroll-behavior:contain}
.cmd-group{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rail-text3);padding:.6rem .7rem .3rem}
.cmd-item{display:flex;align-items:center;gap:.65rem;min-height:44px;padding:.4rem .7rem;border-radius:10px;cursor:pointer;
color:var(--rail-text2);font-size:.88rem;transition:background .15s,color .15s;-webkit-tap-highlight-color:transparent}
.cmd-item:hover,.cmd-item.selected{background:rgba(94,234,212,.12);color:var(--rail-text)}
.cmd-item[aria-disabled="true"]{opacity:.55}
.cmd-item .cmd-ico{display:flex;flex-shrink:0}
.cmd-item .cmd-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.cmd-item .cmd-txt{display:flex;flex-direction:column;min-width:0}
.cmd-item .cmd-label{font-weight:600}
.cmd-item .cmd-sub{font-size:.72rem;color:var(--rail-text3)}
.cmd-item .kind{margin-left:auto;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rail-text3);flex-shrink:0}
.cmd-empty{padding:1.5rem;text-align:center;color:var(--rail-text3);font-size:.85rem}
.cmd-preview{min-height:0;overflow-y:auto;overflow-wrap:anywhere;padding:.9rem 1rem;overscroll-behavior:contain}
.cmd-kicker{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rail-text3)}
.cmd-p-title{margin:.25rem 0 .55rem;font-size:1.05rem;color:var(--rail-text);letter-spacing:-.01em}
.cmd-p-facts{display:flex;flex-direction:column;gap:.35rem;margin:.4rem 0 .65rem}
.cmd-p-fact{display:flex;gap:.55rem;font-size:.78rem;color:var(--rail-text2)}
.cmd-p-fact b{flex-shrink:0;min-width:80px;font-weight:600;color:var(--rail-text3)}
.cmd-p-prose{margin:0;font-size:.82rem;line-height:1.55;color:var(--rail-text2);white-space:pre-wrap}
.cmd-preview-empty{padding:1rem .2rem;color:var(--rail-text3);font-size:.85rem}
.cmd-foot{display:flex;align-items:center;padding:.5rem .95rem;border-top:1px solid var(--rail-border)}
.cmd-hint{font-size:.66rem;color:var(--rail-text3)}
.cmd-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Pin / dismiss buttons on drawer rows ---------- */
.d-item .pin-btn,.d-item .dismiss-btn{margin-left:auto;width:28px;height:28px;border:none;background:transparent;color:var(--rail-text3);
cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:color .2s,background .2s;flex-shrink:0}
.d-item .pin-btn:hover{color:var(--rail-accent);background:rgba(255,255,255,.06)}
.d-item .pin-btn.pinned{color:var(--rail-accent)}
.d-item .pin-btn svg,.d-item .dismiss-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.d-item .dismiss-btn:hover{color:var(--rail-text);background:rgba(255,255,255,.06)}
.d-item .pin-btn+.attn-badge,.d-item .dismiss-btn+.attn-badge{margin-left:0}

/* ---------- Status badges (open status entries per workspace) ---------- */
.attn-badge{margin-left:auto;font-size:.62rem;font-weight:700;font-family:'JetBrains Mono',monospace;
color:var(--rail-accent);background:rgba(94,234,212,.12);border:1px solid rgba(94,234,212,.25);
padding:.15rem .45rem;border-radius:6px;flex-shrink:0;min-width:20px;text-align:center}

/* ---------- Responsive ---------- */
/* phone: rail is a bottom pill; expanded = full-width bottom sheet */
@media(max-width:767px){
  .rail{top:auto;bottom:14px;left:14px;right:14px;transform:none;width:auto;align-items:stretch;max-height:120px;border-radius:30px;animation:railInM .5s cubic-bezier(.2,.8,.2,1) both}
  @keyframes railInM{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
  .rail-col{flex-direction:row;justify-content:center;overflow-x:auto}
  .rail-div{width:1px;height:26px;margin:0 3px}
  .rail .spine{display:none}
  .rail.expanded{left:0;right:0;bottom:0;top:auto;width:auto;max-height:85vh;max-height:85dvh;border-radius:26px 26px 0 0;box-shadow:0 -10px 50px rgba(0,0,0,.6)}
  .rail{backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%)}
  .scrim{backdrop-filter:none;-webkit-backdrop-filter:none}

  /* Command center: full-screen route-like overlay; the rail hides while
     it is open — never two active navigation layers. Explicit Close lives
     in the palette header (44px target). */
  body.lios-commands-open .rail{display:none}
  .palette-overlay{padding-top:0;align-items:stretch;background:rgba(15,23,42,1)}
  .palette.cmd{width:100%;max-width:none;height:100%;max-height:100dvh;border-radius:0;border:none;animation:none}
  .cmd-head{padding-top:max(.75rem,env(safe-area-inset-top))}
  .cmd-body{display:block;overflow-y:auto;overscroll-behavior:contain}
  .cmd-results{border-right:none;border-bottom:1px solid var(--rail-border);max-height:46vh;max-height:46dvh}
  .cmd-preview{border-top:none}
}
@media(prefers-reduced-motion:reduce){.rail,.rail *,.palette,.palette *,.scrim{animation:none!important;transition:none!important}}

/* Board embed mode (packet 12): the shell owns the only rail — the board
   drops its standalone gutter; content, skin, and anchors are untouched. */
.lios-embed main{padding-right:0;padding-bottom:0}
