/* Slide/collapse the left card deck column to free horizontal space */

:root{
  --cardsColW: 360px;
}

/* Make the left column width configurable so we can collapse it */
.main{
  grid-template-columns: var(--cardsColW) 1fr;
}

.left{
  transition: transform .18s ease, opacity .18s ease;
  will-change: transform;
}

body.cardsClosed{
  --cardsColW: 0px;
}

body.cardsClosed .left{
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  border-right: none;
  padding: 0;
}

/* Keep header controls compact */
#cardsBtn{
  padding: 10px 12px;
}

/* When left column is closed, remove the visual divider gap */
body.cardsClosed .left *{
  visibility: hidden;
}

@media (max-width: 980px){
  /* On smaller widths, default to closed unless user opens it */
  :root{ --cardsColW: 340px; }
}