/* Doorcode — Right-side sliding drawer for Channel/Category pages */

/* === TUNABLES === */
:root{
  --doorcode-bg:#0d1a20;
  --doorcode-ink:#e7eef0;
  --doorcode-panel:#0b1418;
  --doorcode-line:#244c57;
  --doorcode-accent:#173239;

  --doorcode-width: 100vw;
  --doorcode-top: 64px;
  --doorcode-height: calc(100vh - var(--doorcode-top));
  --doorcode-speed: 650ms;
  --doorcode-ease: cubic-bezier(.22,.61,.36,1);
  --doorcode-scrim: .6;
}

/* Fixed "Guide" button (top-right) */
.doorcode-button-wrap{
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 2000;
}
.doorcode-guide-btn{
  appearance:none; border:1px solid var(--doorcode-line); background:transparent; color:var(--doorcode-ink);
  padding:8px 14px; border-radius:999px; font-weight:700; cursor:pointer;
}
.doorcode-guide-btn:focus{ outline:2px solid var(--doorcode-ink); outline-offset:2px }

/* Drawer */
.doorcode-door-root{ position:fixed; inset:0; pointer-events:none; z-index:3000; }
.doorcode-door-scrim{
  position:absolute; inset:0; background:black; opacity:0; transition:opacity var(--doorcode-speed) linear;
}
.doorcode-door-panel{
  position:absolute; right:0; top:var(--doorcode-top); height:var(--doorcode-height); width:var(--doorcode-width);
  background:var(--doorcode-panel); border-left:1px solid var(--doorcode-line);
  transform:translateX(100%);
  transition:transform var(--doorcode-speed) var(--doorcode-ease);
  display:flex; flex-direction:column; color:var(--doorcode-ink);
}
.doorcode-door-head{ padding:12px 16px; border-bottom:1px solid var(--doorcode-line); display:flex; align-items:center; justify-content:space-between }
.doorcode-door-title{ font-weight:800 }
.doorcode-door-close{ appearance:none; background:transparent; color:var(--doorcode-ink); border:1px solid var(--doorcode-line); border-radius:999px; padding:6px 10px; cursor:pointer }
.doorcode-door-body{ flex:1; overflow:auto; padding:16px }

/* Open state */
.doorcode-door-root[data-open="true"]{ pointer-events:auto }
.doorcode-door-root[data-open="true"] .doorcode-door-panel{ transform:translateX(0) }
.doorcode-door-root[data-open="true"] .doorcode-door-scrim{ opacity:var(--doorcode-scrim) }

/* Small screens */
@media (max-width: 640px){
  :root{ --doorcode-top: 56px }
}