:root {
  --night: #0d0b14;
  --dusk: #17141f;
  --veil: #241f31;
  --mist: #a59fb8;
  --moon: #ece8f5;
  --glow: #b79cff;
  --ember: #ff8f8f;
  --radius: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% -10%, #2a2142 0%, var(--night) 60%) fixed;
  color: var(--moon);
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

header { padding: 1.25rem 1.5rem 0; }

.mark {
  color: var(--glow);
  font-size: 1.4rem;
  font-style: italic;
  letter-spacing: 0.08em;
  text-decoration: none;
}

main { max-width: 1200px; margin: 0 auto; padding: 1rem 1.5rem 4rem; }

.draw-form {
  max-width: 720px;
  margin: 0 auto 2rem;
  padding: 1rem;
  background: var(--dusk);
  border: 1px solid var(--veil);
  border-radius: var(--radius);
}

.draw-form.login { max-width: 360px; margin-top: 20vh; }

textarea, input, select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: var(--night);
  color: var(--moon);
  border: 1px solid var(--veil);
  border-radius: 10px;
  font: inherit;
}

textarea { resize: vertical; min-height: 4.5rem; }

textarea:focus, input:focus, select:focus { outline: 1px solid var(--glow); border-color: var(--glow); }

details { margin-top: 0.5rem; }
summary { color: var(--mist); cursor: pointer; font-size: 0.85rem; width: max-content; }

.fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.fields label { color: var(--mist); font-size: 0.8rem; display: grid; gap: 0.2rem; }
.fields .wide { grid-column: 1 / -1; }

.actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; margin-top: 0.75rem; }

button, .button {
  padding: 0.55rem 1.3rem;
  background: var(--glow);
  color: var(--night);
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

button:hover, .button:hover { filter: brightness(1.1); }
button.htmx-request { opacity: 0.6; }

.quiet { background: transparent; color: var(--mist); border: 1px solid var(--veil); font-weight: 400; }
.danger:hover { color: var(--ember); border-color: var(--ember); }

.form-error { color: var(--ember); font-size: 0.85rem; margin-right: auto; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  align-items: start;
}

.card {
  background: var(--dusk);
  border: 1px solid var(--veil);
  border-radius: var(--radius);
  overflow: hidden;
}

.card .frame { display: block; width: 100%; background: var(--night); }
.card img { display: block; width: 100%; height: 100%; object-fit: cover; }

.card .prompt {
  margin: 0;
  padding: 0.6rem 0.8rem;
  color: var(--mist);
  font-size: 0.85rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card button { margin: 0 0.8rem 0.8rem; padding: 0.25rem 0.9rem; font-size: 0.8rem; }

.haze {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  gap: 0.6rem;
  padding: 1rem;
  text-align: center;
  color: var(--mist);
  font-size: 0.85rem;
  background: linear-gradient(120deg, #1d1830, #2d2348, #1a2236, #1d1830);
  background-size: 300% 300%;
  animation: drift 6s ease-in-out infinite;
}

.haze.still { animation: none; background: var(--night); }
.haze.sunk { color: var(--ember); overflow-wrap: anywhere; }

@keyframes drift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

progress {
  width: 140px;
  height: 4px;
  appearance: none;
  border: 0;
  border-radius: 2px;
  background: var(--veil);
}
progress::-webkit-progress-bar { background: var(--veil); border-radius: 2px; }
progress::-webkit-progress-value { background: var(--glow); border-radius: 2px; }
progress::-moz-progress-bar { background: var(--glow); border-radius: 2px; }

.more { grid-column: 1 / -1; height: 1px; }

.detail { max-width: 720px; margin: 0 auto; }
.detail .card button { display: none; }
.detail .card .prompt { display: none; }

dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 1.25rem 0; }
dt { color: var(--mist); font-size: 0.85rem; }
dd { margin: 0; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) { .haze { animation: none; } }

.note { margin: 0.6rem 0 0; color: var(--mist); font-size: 0.85rem; }

/* The rough frame of an image still forming, under the progress */
.card .frame { position: relative; }
.card .forming { position: absolute; inset: 0; filter: blur(6px) saturate(0.8); opacity: 0.85; }
.card .forming + .haze { position: relative; background: rgb(13 11 20 / 0.35); animation: none; }