/* artifact-archive.css — the draggable board, phones and small windows only.
   From the 5-gems branch (PR #262), gated so the computer view never sees it.

   Two things hold that gate, and both must stay:

   - every rule below lives inside the max-width media query, and
   - every rule is keyed on `body.archive-board`, a class only
     artifact-archive.js adds.

   So a wide window keeps the cyber-goth hub exactly as it was, and a phone
   with scripting off keeps it too rather than being left with an empty
   viewport it cannot pan. The board takes the screen (100dvh, no page
   scroll) and moves the card grid through a camera transform instead —
   which is why the viewport itself must never scroll natively in board
   mode, only in list mode. */

.archive-app { display: none; }

@media (max-width: 1023.98px) {

.archive-app { display: none; }
body.archive-board .archive-app { display: grid; }
/* The board takes the whole screen, so the hub chrome that would otherwise
   paint over it goes with the page: the corner brackets sit on top of the
   card grid, and the corner cat has its own home link in the header. */
body.archive-board .page,
body.archive-board .corner,
body.archive-board .cat-nav,
body.archive-board .dpad-wrap { display: none; }

body.archive-board { height: 100dvh; min-height: 0; overflow: hidden; }
body.archive-board::before { display: none; }
body.archive-board [hidden] { display: none !important; }

body.archive-board .archive-app {
  position: relative; z-index: 3;
  height: 100dvh;
  grid-template-rows: auto auto minmax(0,1fr) auto;
  --archive-gutter: clamp(16px,3vw,40px);
}

.archive-header { display: flex; align-items: center; gap: 16px; padding: 12px var(--archive-gutter) 4px; }
.archive-header h1 { font: 400 clamp(20px,5vw,30px)/1.05 'RoyaleCouture', Georgia, serif; text-transform: uppercase; letter-spacing: .05em; color: var(--white); }
.archive-header .archive-home { margin-left: auto; font-size: 13px; color: var(--lavender); text-decoration-color: rgba(185,173,249,.4); }

body.archive-board button {
  font: 500 14px/1.2 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  min-height: 44px; padding: 8px 12px;
  border: 1px solid transparent; background: transparent; color: var(--white);
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
body.archive-board button:hover { color: var(--cyan); }
body.archive-board button:disabled { opacity: .45; cursor: default; }
body.archive-board :is(button,a,input,.archive-viewport):focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.archive-tools { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 8px; align-items: center; padding: 4px var(--archive-gutter) 8px; }
.archive-search-slot { grid-column: 1/-1; min-width: 0; }
.archive-filter-slot { min-width: 0; }

body.archive-board .search-wrap {
  width: 100%; max-width: none; margin: 0; padding: 0 12px; gap: 8px;
  min-height: 44px; border: 1px solid #716681; background: #0c0917; animation: none;
}
body.archive-board .search-icon { position: static; flex: none; transform: none; color: #c7bfd7; }
body.archive-board .search-input {
  min-width: 0; width: 100%; padding: 10px 4px;
  font: 400 16px/1.3 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--white); letter-spacing: 0;
}
body.archive-board .search-input::placeholder { color: #bcb2cd; font: inherit; letter-spacing: 0; }
body.archive-board .search-count { display: none; }
body.archive-board .search-clear { width: 32px; min-width: 32px; padding: 0; }

body.archive-board .filter-bar { justify-content: flex-start; gap: 4px; margin: 0; max-width: none; animation: none; }
body.archive-board .filter-group { gap: 4px; }
body.archive-board .filter-sep { display: none; }
body.archive-board .filter-btn {
  font: 500 14px/1.2 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: 0; text-transform: none; color: #c7bfd7; padding: 8px;
}
body.archive-board .filter-btn.is-active { border-color: var(--lavender); background: #20172f; color: var(--white); }
body.archive-board .dice-btn { width: 40px; height: 44px; padding: 10px; border-color: #716681; }
.archive-view-toggle { white-space: nowrap; padding-inline: 4px; }
body.archive-board .archive-view-toggle[aria-pressed="true"] { color: var(--cyan); }

/* A four-column world of 250px tiles. The viewport is a window onto it, and
   the grid moves under a transform — so this element must not scroll in board
   mode, or the camera and the scroll offset fight each other. */
.archive-viewport {
  position: relative; min-width: 0; min-height: 0;
  overflow: clip; touch-action: none;
  cursor: grab;
  background-image: linear-gradient(#ffffff12 1px,transparent 1px),
                    linear-gradient(90deg,#ffffff12 1px,transparent 1px);
  background-size: 40px 40px;
}
.archive-viewport.is-panning { cursor: grabbing; }

body.archive-board .card-grid {
  position: relative;
  display: grid; grid-template-columns: repeat(var(--board-columns,4),250px);
  grid-auto-rows: 250px; gap: 48px; padding: 40px;
  width: max-content; max-width: none; margin: 0;
  transform-origin: 0 0; will-change: transform;
}
body.archive-board .card {
  display: block; position: relative;
  aspect-ratio: auto; background: transparent;
  opacity: 1; animation: none; transition: none;
  cursor: grab; container-type: inline-size;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
body.archive-board .card:hover { transform: none; filter: none; }
body.archive-board .card-inner { position: relative; width: 100%; aspect-ratio: 1; }
body.archive-board .card-name { top: 20%; left: 18%; right: 18%; padding: 0; font-size: clamp(18px,10cqw,32px); letter-spacing: .025em; text-wrap: balance; }
body.archive-board :is([data-slug="antimemetics"],[data-slug="misalignment-map"]) .card-name { font-size: clamp(16px,8.3cqw,28px); }
body.archive-board .card.is-noimg .card-preview img { visibility: hidden; }
body.archive-board .card:focus-visible { outline-offset: 8px; }
body.archive-board .card:hover .card-name { filter: brightness(1.12); }

.archive-empty { position: absolute; inset: 0; display: grid; place-content: center; padding: 24px; text-align: center; font-size: 18px; line-height: 1.5; color: var(--white); pointer-events: none; }
body.archive-board .card-empty { display: none; }

.archive-board-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 8px var(--archive-gutter) max(8px,env(safe-area-inset-bottom)); background: #090711; color: #c7bfd7; }
.archive-board-footer p { width: 100%; font-size: 12px; }
.archive-count { font-size: 13px; white-space: nowrap; }
.archive-zoom { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.archive-zoom button { border-color: #716681; min-width: 44px; min-height: 44px; }
.archive-zoom button[data-zoom="in"], .archive-zoom button[data-zoom="out"] { font-size: 24px; }

/* List mode is the one place native scrolling is correct. */
.archive-viewport.is-list { overflow: auto; touch-action: pan-x pan-y pinch-zoom; cursor: auto; }
body.archive-board .archive-viewport.is-list .card-grid {
  width: 100%; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr));
  grid-auto-rows: auto; gap: 40px 32px; padding: 32px var(--archive-gutter);
  transform: none !important; will-change: auto;
}
body.archive-board .archive-viewport.is-list .card { max-width: 320px; width: 100%; justify-self: center; cursor: pointer; }
.archive-viewport.is-list .archive-empty { position: static; min-height: 200px; }

@media (prefers-reduced-motion: reduce) {
  body.archive-board *, body.archive-board *::before, body.archive-board *::after {
    animation: none !important; transition: none !important;
  }
}

}