/* Sleeve-first sizing: keep 9-pocket pages in view at laptop heights without cropping scans. */
@media (min-width:1081px) {
  .studio-context-row { margin-bottom: 8px; }
  .workspace-top { margin-bottom: 9px; }
  .binder-surround { padding-top: 0; }
  .binder { width: min(100%, 650px, calc((100dvh - 210px) * .72)); padding: 14px 14px 17px 42px; border-width: 6px; }
  .binder .pocket-grid { gap: 8px; }
  .binder .metal-rings i { width: 18px; height: 24px; }
}
/* With 4 pockets retain the same card width as the matching 9-pocket page. */
.binder .pocket-grid[data-size='4'] {
  width: calc((100% - 2 * 8px) / 3 * 2 + 8px);
  max-width: none;
  grid-template-columns: repeat(2,minmax(0,1fr));
  margin: 0 auto;
}
/* Give the owned / wanted label its own sleeve margin below the full card image. */
.binder .pocket[data-card-id] { padding: 3px 3px 17px; }
.binder .pocket .card-status,
.binder .pocket .card-status.wish {
  top: auto;
  bottom: 1px;
  left: 0;
  right: 0;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .35px;
  background: #20252a;
  color: #b6dfc6;
  box-shadow: none;
}
.binder .pocket .card-status.wish { color: #edd1a1; }
.binder[data-color='white'] .pocket .card-status { background: #dfe4e4; color: #235039; }
.binder[data-color='white'] .pocket .card-status.wish { color: #67481f; }
.binder .pocket img { object-fit: contain; object-position: center; max-height: 100%; }
.binder .pocket .empty-pocket small { text-transform: none; font-weight: 500; letter-spacing: 0; }
@media (max-width:1080px) {
  .binder .pocket-grid[data-size='4'] { width: calc((100% - 2 * 8px) / 3 * 2 + 8px); }
}
/* Phone: Page controls open as a short, scrollable sheet above the bottom tabs. */
@media (max-width:690px) {
  .page-menu[open] .page-menu-content {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(67px + env(safe-area-inset-bottom) + 8px);
    top: auto;
    width: auto;
    max-height: min(40dvh, 330px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 12px;
    box-shadow: 0 12px 45px #000b;
    z-index: 50;
  }
  .binder .pocket-grid[data-size='4'] { width: calc((100% - 2 * 5px) / 3 * 2 + 5px); }
  .binder .pocket[data-card-id] { padding: 2px 2px 15px; }
  .binder .pocket .card-status,.binder .pocket .card-status.wish { height: 12px; font-size: 12px; }
}