/* Menu: the set cards. The page shell comes from design/chrome.css. */

.gpu-error {
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--magenta);
  color: var(--magenta);
}

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, var(--card-max));
  justify-content: start;
  gap: 2rem;
  align-content: safe center;
  --card-max: 34rem;
}

@media (min-width: 720px) {
  .cards { grid-template-columns: repeat(2, minmax(0, var(--card-max))); }
}

@media (min-width: 1100px) {
  .cards { grid-template-columns: repeat(3, minmax(0, var(--card-max))); }
}

.card {
  --wobble-scale: 1.06;
  --wobble-tilt: 2deg;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  transform: rotate(0deg) scale(1);
  transition: transform var(--motion);
}

/* A card carries the grip and Edit on the left, and a saved one a × and the
   question it opens on the right. All of them sit over the card, so the slot
   around it is the positioned box, and the wobble moves there too to carry
   them along. It stops while the question is up. */
.card-slot {
  --wobble-scale: 1.06;
  --wobble-tilt: 2deg;
  position: relative;
  transform: rotate(0deg) scale(1);
  transition: transform var(--motion);
}

.card-slot:hover,
.card-slot:focus-within {
  transform: scale(var(--wobble-scale));
  animation: wobble 900ms ease-in-out infinite;
}

.card-slot .card:hover,
.card-slot .card:focus-visible,
.card-slot.asking,
.card-slot.asking:hover,
.card-slot.asking:focus-within {
  transform: none;
  animation: none;
}

.card-tool {
  position: absolute;
  top: 0.5rem;
  display: grid;
  place-items: center;
  height: 2rem;
  color: var(--dim);
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: var(--glass);
  opacity: 0.6;
  transition: opacity var(--motion), color var(--motion), border-color var(--motion);
}

.card-tool[hidden],
.card-slot.asking .card-tool { display: none; }

.card-slot:hover .card-tool:not(:disabled),
.folder-head:hover .card-tool:not(:disabled),
.card-tool:focus-visible {
  opacity: 1;
}

.card-tool:hover:not(:disabled),
.card-tool:focus-visible {
  color: var(--magenta);
  border-color: var(--magenta);
}

/* A set the editor cannot write stays greyed and never lights up, but keeps
   enough of itself to be read over a bright thumbnail. It says why on hover. */
.card-tool:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Held to drag, or tabbed to and stepped with the arrow keys. It takes the
   pointer off the page's own scrolling so a touch drag carries the card. */
.card-grip {
  left: 0.5rem;
  width: 2rem;
  color: var(--ink);
  cursor: grab;
  touch-action: none;
}

.card-grip:active { cursor: grabbing; }

.card-edit {
  left: 2.9rem;
  padding: 0 0.6rem;
}

.card-delete {
  right: 0.5rem;
  width: 2rem;
  font-size: 1.3rem;
  line-height: 1;
}

.card-confirm {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.8rem;
  padding: 1rem;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--magenta);
  backdrop-filter: var(--glass);
}

.card-confirm[hidden] { display: none; }

.card-confirm-text {
  margin: 0;
  overflow-wrap: anywhere;
}

.card-confirm-row {
  display: flex;
  gap: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .card-tool { transition: none; }
  .card-slot { transition: none; }
  .card-slot:hover, .card-slot:focus-within { animation: none; transform: scale(1.03); }
}

.card-name {
  font-family: var(--display);
  font-stretch: condensed;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
}

.card-formula {
  color: var(--dim);
  white-space: pre-wrap;
  min-width: 0;
}

.card:hover,
.card:focus-visible {
  transform: scale(var(--wobble-scale));
  animation: wobble 900ms ease-in-out infinite;
}

.card:hover .card-name,
.card:focus-visible .card-name {
  color: var(--magenta);
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover, .card:focus-visible { animation: none; transform: scale(1.03); }
}

/* ---------- Folders ---------- */

/* A folder takes a row of its own across the grid: a head that names it, and
   a grid of its own underneath. Folders hold cards, never other folders. */
.folder {
  grid-column: 1 / -1;
  display: grid;
  /* An automatic track never shrinks below what is in it, and a long formula
     in a card would push the folder off a narrow screen. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.folder-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
  padding-left: 2.5rem;
}

.folder-head .card-grip { top: 0; left: 0; }

.folder-fold {
  width: 1.6rem;
  color: var(--dim);
  transition: color var(--motion);
}

.folder-fold:hover { color: var(--magenta); }

/* The name is an input the whole time; it only looks like one once you are
   on it, so a folder reads as a heading until you go to rename it. */
.folder-name {
  flex: 0 1 18rem;
  width: auto;
  padding: 0.15rem 0.35rem;
  font-family: var(--display);
  font-stretch: condensed;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  background: none;
  border-color: transparent;
}

.folder-name:hover { border-color: var(--line); }
.folder-name:focus { background: #000; border-color: var(--magenta); }

.folder-count {
  margin-right: auto;
  color: var(--dim);
  white-space: nowrap;
}

.folder-remove {
  position: static;
  width: 2rem;
  font-size: 1.3rem;
  line-height: 1;
}

.folder-cards {
  align-content: start;
  gap: 1.25rem;
}

/* An empty folder is still somewhere a card can land, so it keeps a box. */
.folder-cards:empty::after {
  content: "drop a fractal here";
  grid-column: 1 / -1;
  display: grid;
  place-content: center;
  min-height: 5.5rem;
  color: var(--dim);
  border: 1px dashed var(--line);
}

.folder-cards[hidden] { display: none; }

/* ---------- Dragging ---------- */

/* What follows the pointer is a copy. The slot it came from stays put, dimmed,
   as the gap the drop will fill, and the grid reflows around it on the way. */
.drag-ghost {
  position: fixed;
  z-index: 40;
  margin: 0;
  list-style: none;
  pointer-events: none;
  opacity: 0.92;
  rotate: -1.5deg;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.6));
}

.drag-ghost .card-tool,
.drag-ghost .card-confirm { display: none; }

.lifted {
  opacity: 0.25;
  outline: 1px dashed var(--magenta);
  outline-offset: -1px;
}

/* Nothing wobbles while something is being carried, and the card under the
   pointer must not grow and shove the grid about. */
body.dragging {
  cursor: grabbing;
  user-select: none;
}

body.dragging .card-slot:not(.drag-ghost),
body.dragging .card {
  transform: none;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .folder-fold { transition: none; }
  .drag-ghost { rotate: none; }
}

/* ---------- Menu notices ---------- */

/* Where a move says where it landed, and where storage says it refused. */
.menu-note {
  margin: 0;
  min-height: 1.4em;
  color: var(--dim);
}

/* Beside Create Fractal, in the same face a size down. */
.create-folder {
  padding: 0.55rem 1rem;
  font-family: var(--display);
  font-stretch: condensed;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.02em;
}