:root {
  --bg: #14121a;
  --bg-2: #1c1a25;
  --bg-3: #262331;
  --line: #363143;
  --text: #ece9f2;
  --dim: #a49dba;
  --accent: #e4577f;
  --accent-soft: #f0879f;
  --danger: #d9534f;
  --gap: 8px;
  --radius: 10px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent-soft); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- buttons and fields --------------------------------------------------- */

.btn {
  appearance: none;
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 12px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background .12s, border-color .12s, opacity .12s;
}
.btn:hover:not(:disabled) { background: #322d40; border-color: #4b4460; }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn:focus-visible, .search-input:focus-visible, .result:focus-visible,
.region:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: var(--accent-soft); }
.btn.danger:hover:not(:disabled) { background: #4a2530; border-color: var(--danger); }
.btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.select { padding-right: 8px; }
.select.tiny { padding: 7px 4px; min-width: 52px; }
.name-input { min-width: 150px; }

/* --- top bar -------------------------------------------------------------- */

.topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 10px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  position: sticky; top: var(--site-nav-offset, 0px); z-index: 30;
}
.brand { display: flex; align-items: center; gap: 9px; margin-right: auto; }
.brand h1 { font-size: 17px; margin: 0; letter-spacing: .2px; white-space: nowrap; }
.brand-mark {
  width: 20px; height: 20px; border-radius: 5px;
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  flex: none;
}
.binder-controls, .file-controls { display: flex; gap: 6px; flex-wrap: wrap; }

/* --- layout --------------------------------------------------------------- */

.layout {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  gap: 16px;
  padding: 16px;
  align-items: start;
}
.workspace { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* --- search panel --------------------------------------------------------- */

.panel {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  position: sticky; top: calc(74px + var(--site-nav-offset, 0px));
  max-height: calc(100vh - 96px - var(--site-nav-offset, 0px));
  display: flex; flex-direction: column; gap: 10px;
}
.panel-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.tab {
  flex: 1; background: none; border: 1px solid transparent; border-radius: 8px;
  color: var(--dim); font: inherit; font-size: 14px; padding: 7px 10px; cursor: pointer;
}
.tab:hover { background: var(--bg-3); color: var(--text); }
.tab[aria-selected="true"] { background: var(--bg-3); border-color: var(--line); color: var(--text); font-weight: 600; }
.panel-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }
.panel-body[hidden] { display: none; }

.search-head { display: flex; flex-direction: column; gap: 8px; }
.search-input {
  width: 100%;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
}
.search-input::placeholder { color: var(--dim); }
.filter-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip {
  background: var(--bg-3); color: var(--text);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px; font-size: 13px; cursor: pointer;
}
.chip:hover { background: #322d40; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
select.chip { border-radius: 999px; max-width: 190px; }

.rarity-wrap { position: relative; }
.rarity-wrap > summary { list-style: none; display: inline-block; }
.rarity-wrap > summary::-webkit-details-marker { display: none; }
.rarity-menu {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 8px;
  max-height: 300px; overflow-y: auto; width: 250px;
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
.rarity-item { display: flex; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.rarity-item:hover { background: #3a3449; }

.result-count { margin: 0; font-size: 12.5px; color: var(--dim); }

.results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  overflow-y: auto;
  padding: 2px;
  min-height: 120px;
}
.result {
  background: none; border: 1px solid transparent; border-radius: 8px;
  padding: 0; cursor: grab; display: flex; flex-direction: column; gap: 3px;
  transition: transform .1s, border-color .1s;
}
.result:hover { border-color: var(--accent); transform: translateY(-2px); }
.result.dragging { opacity: .4; }
.result img { width: 100%; aspect-ratio: 63/88; object-fit: cover; border-radius: 6px; display: block; background: var(--bg-3); }
.result.broken img { visibility: hidden; }
.result-cap {
  font-size: 10.5px; color: var(--dim); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- insert library ------------------------------------------------------- */

.drop-zone {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 22px 14px; text-align: center; cursor: pointer;
  border: 2px dashed var(--line); border-radius: var(--radius);
  background: var(--bg-3); color: var(--dim); font-size: 13px;
  transition: border-color .12s, background .12s, color .12s;
}
.drop-zone:hover, .drop-zone:focus-visible { border-color: var(--accent); color: var(--text); }
.drop-zone.over { border-color: var(--accent); background: #3a2733; color: var(--text); }
.drop-zone strong { font-size: 14.5px; color: var(--text); }

.results.inserts { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); align-items: start; }
.insert-tile { position: relative; }
.insert-art { width: 100%; }
.insert-art img {
  width: 100%; height: auto; object-fit: cover;
  border-radius: 6px; display: block; background: var(--bg-3);
}
.insert-del {
  position: absolute; top: 3px; right: 3px;
  width: 20px; height: 20px; line-height: 1; padding: 0;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,.66); color: #fff; font-size: 14px; cursor: pointer;
  opacity: 0; transition: opacity .12s;
}
.insert-tile:hover .insert-del, .insert-del:focus-visible { opacity: 1; }
.insert-del:hover { background: var(--danger); }

/* --- crop window ---------------------------------------------------------- */

.modal-back {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(8,7,12,.74);
  display: grid; place-items: center; padding: 16px;
}
.modal {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px;
  max-width: min(520px, 96vw); max-height: 94vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.modal h2 { margin: 0; font-size: 17px; }
.crop-size { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.crop-stage { display: flex; justify-content: center; }
.crop-frame {
  position: relative; overflow: hidden;
  border-radius: 6px; background: #0b0a0f;
  outline: 2px solid var(--accent); cursor: grab; touch-action: none;
}
.crop-frame.grabbing { cursor: grabbing; }
.crop-frame img {
  position: absolute; top: 50%; left: 50%;
  max-width: none; user-select: none; -webkit-user-drag: none;
}
.crop-guides { position: absolute; inset: 0; pointer-events: none; }
.crop-guides i { position: absolute; background: rgba(255,255,255,.7); mix-blend-mode: difference; }
.crop-v { top: 0; bottom: 0; width: 1px; }
.crop-h { left: 0; right: 0; height: 1px; }
.crop-zoom { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--dim); }
.crop-zoom input[type="range"] { flex: 1; accent-color: var(--accent); }
.crop-hint { margin: 0; font-size: 12.5px; color: var(--dim); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

.choice-list { display: flex; flex-direction: column; gap: 8px; }
.choice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; cursor: pointer;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius);
}
.choice:hover { border-color: #4b4460; }
.choice:has(input:checked) { border-color: var(--accent); background: #3a2733; }
.choice input { margin-top: 2px; accent-color: var(--accent); }
.choice strong { display: block; font-size: 14px; font-weight: 600; }
.choice small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--dim); }

/* --- toolbar -------------------------------------------------------------- */

.toolbar { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.tool-group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tool-label { font-size: 12.5px; color: var(--dim); min-width: 0; }
#selLabel { min-width: 130px; }
.times { color: var(--dim); }

.size-note {
  margin: 0; padding: 9px 12px; font-size: 13px;
  background: #3a2f1c; border: 1px solid #6b5323; border-radius: var(--radius); color: #f3dfae;
}

/* --- the page ------------------------------------------------------------- */

/* Page and its list of pages, side by side. */
.stage { display: flex; gap: 18px; align-items: flex-start; }
.page-list { flex: 0 0 200px; display: flex; flex-direction: column; gap: 8px; }
.page-list-title { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); font-weight: 700; }
@media (max-width: 720px) {
  .stage { flex-direction: column; align-items: stretch; }
  .page-list { flex: 1 1 auto; width: 100%; }
}

.canvas-wrap { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; gap: 22px; align-items: flex-start; }
.page-col { display: flex; flex-direction: column; gap: 8px; align-items: center; width: 100%; min-width: 0; }
.page-col[hidden] { display: none; } /* a class display rule would otherwise beat [hidden] */
.canvas { width: 100%; }
.page-caption { font-size: 12.5px; color: var(--dim); text-align: center; min-height: 1.1em; text-wrap: balance; }
/* Spread view: two facing pages share the row. */
.canvas-wrap:has(#colR:not([hidden])) .page-col { flex: 1 1 0; min-width: 0; }

/* The pages meet at the gutter so a picture can read across the opening. Each
   grid is normally centred in its half by an auto margin, so closing the gap
   means pushing them together as well as taking the gap out. Half the pocket
   spacing on each facing edge leaves the seam matching the rest of the page. */
.canvas-wrap:has(#colR:not([hidden])) { gap: 0; }
.canvas-wrap:has(#colR:not([hidden])) .page-col:first-child .page-grid {
  margin-right: 0;
  padding-right: calc(var(--gap) / 2);
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.canvas-wrap:has(#colR:not([hidden])) #colR .page-grid {
  margin-left: 0;
  padding-left: calc(var(--gap) / 2);
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/* With the pages touching, the marker on the active one has to hug it rather
   than stand off, or it draws over the facing page. */
.canvas-wrap:has(#colR:not([hidden])) .canvas.active-canvas .page-grid {
  outline-offset: 0;
}
.canvas.active-canvas .page-grid { outline: 2px solid var(--accent); outline-offset: 4px; }
.page-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: var(--gap);
  /* Cap the width so a tall page still fits the window; the row heights are
     set in JS to keep each pocket at true card proportions. */
  max-width: min(100%, calc(68vh * var(--cols, 3) * 63 / var(--rows, 3) / 88));
  margin: 0 auto;
  padding: var(--gap);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  width: 100%;
  user-select: none;
  touch-action: none;
}

.region {
  position: relative;
  border-radius: 7px;
  background: var(--bg-3);
  border: 1px dashed #4a4360;
  overflow: hidden;
  cursor: cell; /* drag from here to sweep a selection */
  min-width: 0; min-height: 0;
}
/* A card can be dragged to move it (grab); hold then drag to select instead. */
.region.filled { border-style: solid; border-color: transparent; cursor: grab; background: #0d0c12; }
.region.filled:active { cursor: grabbing; }
.region.source { opacity: .4; }
.region.dragging { opacity: .35; }
.region.selected { border-color: var(--accent); border-style: solid; box-shadow: 0 0 0 2px rgba(228,87,127,.45); }
.region.drop-target { border-color: var(--accent-soft); border-style: solid; background: #3a2733; }
.region.is-empty-by-design {
  background: repeating-linear-gradient(45deg, var(--bg-3), var(--bg-3) 7px, #2f2b3d 7px, #2f2b3d 14px);
  border-style: solid; border-color: #574f70;
}
.region-img { width: 100%; height: 100%; display: block; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.fit-cover .region-img { object-fit: cover; }
.fit-contain .region-img { object-fit: contain; }
/* One pocket's share of a picture covering a block of them. The gaps between
   pockets stand in for the sleeve edges, so the block reads as cut cards. */
.region-slice { position: absolute; inset: 0; pointer-events: none; }

.region-note {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 11px; color: var(--dim); letter-spacing: .3px; pointer-events: none;
}

/* --- page navigation ------------------------------------------------------ */

.page-nav { display: flex; flex-direction: column; gap: 10px; }
.page-nav-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row-spacer { flex: 1 1 auto; }
.page-label { font-size: 13px; color: var(--dim); min-width: 96px; }

/* The page list: a readable vertical column, number + name, drag to reorder. */
.page-strip { display: flex; flex-direction: column; gap: 4px; max-height: 70vh; overflow-y: auto; }
.page-pip {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 12px; border-radius: 8px; text-align: left;
  background: var(--bg-3); border: 1px solid var(--line);
  color: var(--text); font-size: 13px; cursor: grab;
}
.page-pip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.pip-num {
  flex: 0 0 auto; min-width: 1.6em; text-align: center;
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--dim);
}
.pip-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pip-name.unnamed { color: var(--dim); font-style: italic; }
.pip-size { flex: 0 0 auto; font-size: 11.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.page-pip[aria-pressed="true"] .pip-num,
.page-pip[aria-pressed="true"] .pip-size { color: rgba(255, 255, 255, .8); }
.page-pip[aria-pressed="true"] .pip-name.unnamed { color: rgba(255, 255, 255, .7); }
.page-pip.dragging { opacity: .4; cursor: grabbing; }
.page-pip.drop-into { border-color: var(--accent-soft); box-shadow: 0 0 0 2px rgba(228,87,127,.4); }

/* --- help and footer ------------------------------------------------------ */

.help {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 14px; font-size: 13.5px;
}
.help summary { cursor: pointer; color: var(--dim); }
.help ul { margin: 10px 0 4px; padding-left: 20px; }
.help li { margin-bottom: 6px; }
kbd {
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 5px; font-size: 11.5px; font-family: inherit;
}

.foot { padding: 8px 16px 24px; color: var(--dim); font-size: 12px; text-align: center; }
.foot p { margin: 0 auto; max-width: 760px; }

/* --- toast ---------------------------------------------------------------- */

.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px);
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 11px 18px;
  max-width: min(560px, 90vw); font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  z-index: 60; box-shadow: 0 12px 34px rgba(0,0,0,.55);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { border-color: var(--danger); background: #3a2126; }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .panel { position: static; max-height: 460px; }
  .brand { margin-right: 0; }
  .canvas { max-width: 100%; }
}

/* --- print ---------------------------------------------------------------- */
/* Pockets sit flush at true size so a panel stays continuous across the cards
   you cut out of it. */

.print-area { display: none; }

@media print {
  @page { size: A4 portrait; margin: 10mm; }

  body { background: #fff; color: #000; }
  .topbar, .layout, .foot, .toast, .help { display: none !important; }

  .print-area { display: block; }
  .print-page {
    display: flex; align-items: flex-start; justify-content: center;
    break-after: page; page-break-after: always;
  }
  .print-page:last-child { break-after: auto; page-break-after: auto; }

  .print-grid { display: grid; gap: 0; }
  .print-region { position: relative; overflow: hidden; outline: .2mm solid #999; border-radius: 1.2mm; }
  .print-img { width: 100%; height: 100%; display: block; }
  .print-img.fit-cover { object-fit: cover; }
  .print-img.fit-contain { object-fit: contain; }
  .print-slice { position: absolute; inset: 0; }

  .print-cut-h, .print-cut-v { position: absolute; background: #999; }
  .print-cut-h { left: 0; right: 0; height: .2mm; }
  .print-cut-v { top: 0; bottom: 0; width: .2mm; }

  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}