/* iPad & tablets (landscape & portrait) */
@media (max-width: 1180px){
  .main{grid-template-columns:1fr; height:auto}
  .board{order:1; overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; touch-action:pan-x}
  .weekbar{display:flex; flex-wrap:nowrap; gap:12px; min-width:min-content}
  .day-col{flex:0 0 280px; min-width:280px}
  .sidebar{order:2}
  .sticker-grid{grid-template-columns:repeat(5,38px)}
}
/* iPad portrait narrow (e.g., 834px) */
@media (max-width: 834px){
  .day-col{flex:0 0 260px; min-width:260px}
  .title{font-size:16px}
  .btn{padding:9px 10px; font-size:12px}
}
/* Phone-ish widths */
@media (max-width: 600px){
  .topbar{flex-wrap:wrap; gap:8px}
  .actions{width:100%; justify-content:flex-end}
}

/* Tablet-first layout for board + library */

/* iPad portrait and below: stack board above sidebar */
@media (max-width: 1023.98px) {
  .main {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    height: auto;
  }

  .board,
  .sidebar {
    min-height: auto;
  }

  .board {
    order: 1;
  }

  .sidebar {
    order: 2;
    margin-top: 8px;
  }
}

/* Desktop / wide: restore the two-column layout */
@media (min-width: 1024px) {
  .main {
    grid-template-columns: minmax(280px, 360px) 1fr;
    height: calc(100svh - 84px);
  }
}