/* ============================================================ HyperDeck app shell — shared left nav rail + updates dropdown. Additive: pages keep their own topbar; this adds the left rail and offsets content. Uses the page's own theme tokens (--ink etc). ============================================================ */ /* cross-document view transitions keep the rail visually stable across page loads (progressive enhancement; browsers without support just navigate normally) */ @view-transition{navigation:auto} .hd-rail{view-transition-name:hd-rail} .topbar{view-transition-name:hd-topbar} .hd-rail{position:fixed;top:0;left:0;bottom:0;width:228px;z-index:30;display:flex;flex-direction:column; padding:18px 14px;border-right:1px solid var(--line);background:var(--paper);gap:4px} .hd-rail .hd-mark{display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);font-size:20px;letter-spacing:-.02em;color:var(--ink);padding:6px 10px 16px} .hd-rail .hd-mark svg{width:21px;height:21px} .hd-nav{display:flex;flex-direction:column;gap:2px} .hd-item{display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;border-radius:10px;color:var(--ink-2); font-size:15px;font-weight:500;cursor:pointer;transition:background .15s,color .15s;position:relative} .hd-item:hover{background:var(--paper-2);color:var(--ink)} .hd-item.on{background:var(--paper-2);color:var(--ink)} .hd-item.on::before{content:"";position:absolute;left:-14px;top:11px;bottom:11px;width:3px;border-radius:0 3px 3px 0;background:var(--ink)} .hd-item svg{width:20px;height:20px;flex:none} .hd-item .hd-lbl{flex:1} .hd-rail .hd-spacer{flex:1} .hd-acct{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;transition:background .15s} .hd-acct:hover{background:var(--paper-2)} .hd-acct .hd-ava{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;overflow:hidden;flex:none} .hd-acct .hd-ava img{width:100%;height:100%;object-fit:cover} .hd-acct .hd-who{min-width:0;flex:1} .hd-acct .hd-who b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hd-acct .hd-who small{display:block;font-family:var(--mono);font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hd-acct .hd-out{color:var(--faint)}.hd-acct .hd-out:hover{color:var(--red-ink)}.hd-acct .hd-out svg{width:16px;height:16px} /* offset page content to clear the rail. hd-rail-reserve is set in from cache so the space exists before first paint (no content jump); hd-has-rail is the real rail being present. */ body.hd-has-rail,html.hd-rail-reserve body{padding-left:228px} body.hd-has-rail .topbar{left:228px} /* the rail supplies the wordmark + nav, so hide any topbar duplicates when present */ body.hd-has-rail .topbar .wordmark, body.hd-has-rail .topbar #navAction{display:none} /* updates (platform news) dropdown — injected into the topbar */ .hd-updates{position:relative} .hd-upd-btn{position:relative} .hd-upd-btn .hd-dot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--red-ink,#9F3B2D);display:none} .hd-upd-btn .hd-dot.show{display:block} .hd-upd-pop{position:absolute;top:46px;right:0;width:340px;max-width:86vw;background:var(--white);border:1px solid var(--line); border-radius:13px;box-shadow:0 20px 50px -24px rgba(0,0,0,.5);padding:6px;z-index:50;display:none;max-height:420px;overflow:auto} .hd-upd-pop.show{display:block} .hd-upd-head{font-family:var(--serif);font-size:15px;font-weight:500;padding:10px 12px 8px} .hd-upd-item{display:flex;gap:10px;padding:11px 12px;border-top:1px solid var(--line)} .hd-upd-item .ut{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:999px;flex:none;margin-top:2px;height:fit-content} .hd-upd-item .ut.feature{background:var(--green-bg);color:var(--green-ink)} .hd-upd-item .ut.fix{background:var(--blue-bg);color:var(--blue-ink)} .hd-upd-item .ut.note{background:var(--amber-bg);color:var(--amber-ink)} .hd-upd-item .ub b{font-size:13.5px;font-weight:600} .hd-upd-item .ub p{font-size:12.5px;color:var(--muted);line-height:1.5} .hd-upd-item .ub .ud{font-family:var(--mono);font-size:10px;color:var(--faint)} @media(max-width:900px){ .hd-rail{width:64px;padding:14px 8px} .hd-rail .hd-mark{justify-content:center;padding:6px 0 16px}.hd-rail .hd-mark span{display:none} .hd-item{justify-content:center;padding:0}.hd-item .hd-lbl{display:none} .hd-item.on::before{left:-8px} .hd-acct{justify-content:center;padding:9px 0}.hd-acct .hd-who{display:none}.hd-acct .hd-out{display:none} body.hd-has-rail,html.hd-rail-reserve body{padding-left:64px}body.hd-has-rail .topbar{left:64px} } @media(max-width:560px){ .hd-rail{flex-direction:row;top:auto;bottom:0;left:0;right:0;width:auto;height:58px;padding:6px 8px;border-right:0;border-top:1px solid var(--line);gap:2px;justify-content:space-around} .hd-rail .hd-mark,.hd-rail .hd-spacer,.hd-acct{display:none} .hd-nav{flex-direction:row;flex:1;justify-content:space-around} .hd-item{height:46px;width:46px}.hd-item.on::before{display:none}.hd-item.on{background:var(--paper-2)} body.hd-has-rail,html.hd-rail-reserve body{padding-left:0;padding-bottom:58px}body.hd-has-rail .topbar{left:0} }