/* THE DECK (2026-09-27) — the dock's doors as live tiles. See showcase-deck.js.
   Scoped to #hud.deck so the compact dock (phones, no-JS) is untouched. */
#hud.deck{padding:8px;border-radius:24px}
#hud.deck #navTabs{gap:6px}
#hud.deck #navTabs .tab{position:relative;width:148px;min-width:0;height:88px;padding:0;border-radius:14px;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:0;text-align:left;
  background:#0b0d0f;border:1px solid rgba(255,255,255,.12);color:#fff;
  transition:width .55s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .35s}
#hud.deck #navTabs .tab.active{width:200px;border-color:var(--accent);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35),0 12px 34px rgba(0,0,0,.5)}
#hud.deck #navTabs .tab:hover,#hud.deck #navTabs .tab:focus-visible{transform:translateY(-3px);border-color:rgba(var(--accent-rgb),.7);outline:none}
#hud.deck #navTabs .tab:active{transform:translateY(0)}
#hud.deck #navTabs .tab .dk-face{position:absolute;inset:0;background:#0b0d0f center/cover no-repeat;opacity:.55;transition:opacity .35s,transform 1.4s ease;z-index:0}
#hud.deck #navTabs .tab.active .dk-face{opacity:.92}
#hud.deck #navTabs .tab:hover .dk-face{opacity:.85;transform:scale(1.04)}
#hud.deck #navTabs .tab::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(4,8,12,.92) 0%,rgba(4,8,12,.35) 55%,rgba(4,8,12,.05) 100%);pointer-events:none}
/* the icon keeps its place, small, top-left */
#hud.deck #navTabs .tab i{position:absolute;left:10px;top:9px;z-index:2;width:18px;height:18px;color:#fff;opacity:.85;transition:color .2s}
#hud.deck #navTabs .tab i svg{width:16px;height:16px}
#hud.deck #navTabs .tab.active i,#hud.deck #navTabs .tab:hover i{color:var(--accent);opacity:1}
#hud.deck #navTabs .tab span{position:relative;z-index:2;padding:0 12px;font:600 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#fff;white-space:nowrap}
#hud.deck #navTabs .tab.active span{color:var(--accent)}
#hud.deck #navTabs .tab .dk-ro{position:relative;z-index:2;display:block;padding:4px 12px 10px;font:400 9px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.68);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#hud.deck #navTabs .tab.dk-bare .dk-face{background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02))}
#hud.deck #navTabs .tab.dk-bare i{position:absolute;left:50%;top:22px;transform:translateX(-50%);width:26px;height:26px}
#hud.deck #navTabs .tab.dk-bare i svg{width:22px;height:22px}
/* the light that travels the active tile's edge */
@property --dk-a{syntax:'<angle>';inherits:false;initial-value:0deg}
#hud.deck #navTabs .tab.active::after{content:"";position:absolute;inset:-1px;height:auto;transform:none;box-shadow:none;border-radius:inherit;padding:1px;z-index:3;pointer-events:none;
  background:conic-gradient(from var(--dk-a),transparent 0 68%,rgba(var(--accent-rgb),.95) 82%,transparent 94%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:dkEdge 6s linear infinite}
@keyframes dkEdge{to{--dk-a:360deg}}
/* the glass shell's old active fill and underline step aside on tiles */
html[data-showcase-ui="glass"] #hud.deck #navTabs .tab.active{background:#0b0d0f;box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35),0 12px 34px rgba(0,0,0,.5)}
html[data-showcase-ui="glass"] #hud.deck #navTabs .tab{border-radius:14px}
#hud.deck .tab::after{left:auto;right:auto;bottom:auto}
#hud.deck #hudCtl .ctl,#hud.deck #dock .dockbtn{width:56px;height:56px;border-radius:50%;align-self:center;font-size:15px}
@media (max-width:1180px){#hud.deck #navTabs .tab{width:118px;height:78px}#hud.deck #navTabs .tab.active{width:160px}#hud.deck #navTabs .tab .dk-ro{display:none}}
@media (prefers-reduced-motion:reduce){#hud.deck #navTabs .tab,#hud.deck #navTabs .tab .dk-face{transition:none}#hud.deck #navTabs .tab.active::after{animation:none}}

/* NO FRAME (Michael, 2026-09-27: "the border around categories is the problem") — the tiles float */
#hud.deck,html[data-showcase-ui="glass"] #hud.deck{background:none;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}
#hud.deck .hud-div{display:none}
#hud.deck #hudCtl{margin-left:8px}
#hud.deck #navTabs .tab{box-shadow:0 10px 30px rgba(0,0,0,.45)}
/* the tiles lift and the active ring sits outside the box — the dock must not clip them (Michael: "buttons cut off on top") */
#hud.deck{overflow:visible;padding:6px 0 0}
#hud.deck #navTabs{padding:4px 2px 0}