/* Mindprint — the generation studio (D91).
 *
 * Rebuilt on the shared storefront sheets: the page shell is .wrap/.hero from storefront.css,
 * the submit is .genb, and everything here is the studio's own furniture — the glass console
 * (the homepage console's treatment, D88: dark glass, a peach edge, because peach marks the
 * generative moments) and the run library's cards. Tokens only; no --mp-* is redefined.
 *
 * The dev-harness grid this file used to style is gone: results stream into /patterns as a
 * run collection, so this page never renders a tile again.
 */

/* Narrower than the galleries' 1560px on purpose: the wall is a catalog and wants every
   column it can get, while this page is one console and a shelf of runs. At full width the
   console became a letterbox and the run cards marched off toward the horizon. */
.gen-studio { max-width: 1180px; padding-bottom: clamp(48px, 8vh, 80px); }

.gen-studio .hero { padding-top: clamp(26px, 5vh, 48px); }

/* ── the console ─────────────────────────────────────────────────────────────── */

/* Full width of the page's own column — it is the reason the page exists, and a console
   floating at 860px inside a wider page read as a stray card rather than the main event. */
.gen-console {
  margin-top: clamp(18px, 3vh, 30px);
  padding: clamp(18px, 3vw, 28px);
  background: rgba(10, 10, 15, .82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 201, 160, .3);
  border-radius: calc(var(--mp-r-card) + 8px);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7), 0 0 60px rgba(255, 201, 160, .07);
}

.gen-bar {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.gen-bar .plbl {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* The one place on this page a person writes prose, so it is the sans face at a
   prose size — the prompt bar's own rule. */
.gen-bar textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  /* Grows with the prompt (js/prompt-dock.js), so the scrollbars are furniture for a state
     that barely exists — and a platform that draws them permanently put a grey bar across
     an empty field that read as the text being cut off. */
  overflow: auto;
  scrollbar-width: none;
  min-height: 52px;
  padding: 13px 16px;
  background: var(--mp-surface);
  border: 1px solid var(--mp-line-soft);
  border-radius: 14px;
  color: var(--mp-ink);
  font-family: var(--mp-sans);
  font-size: 14px;
  line-height: 1.5;
}

.gen-bar textarea::placeholder { color: var(--mp-mute); }
.gen-bar textarea::-webkit-scrollbar { display: none; }

.gen-bar textarea:focus-visible {
  outline: none;
  border-color: rgba(255, 201, 160, .5);
  box-shadow: 0 0 0 3px rgba(255, 201, 160, .12);
}

.gen-bar .genb { height: 46px; padding: 0 26px; }

.gen-console-note { margin: 12px 0 0; }

/* The example chips (D91) — verbatim from the homepage console's own .exs (home.css), so the
   two consoles read as one idiom rather than two similar-looking controls. Left-aligned here
   rather than centred: the homepage's console is a narrow island on a full-bleed hero, this
   one is the page's own width, and a centred row of three short pills in that much room reads
   like something is missing either side of it. */
.gen-console .exs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.gen-console .exs button {
  font-family: var(--mp-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mp-dim);
  background: transparent;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-r-pill);
  padding: 6px 12px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

.gen-console .exs button:hover { color: var(--mp-peach); border-color: rgba(255, 201, 160, .5); }

.gen-notice {
  margin: 12px 0 0;
  color: var(--mp-peach);
  font-family: var(--mp-mono);
  font-size: 11px;
  letter-spacing: .04em;
}

/* ── the library ─────────────────────────────────────────────────────────────── */

.gen-library { margin-top: clamp(34px, 5vh, 56px); }

/* The real fault was a two-item baseline row with no wrapping rule: the heading kept its
   intrinsic width and the note kept wrapping into it until both were two ragged lines. The
   heading now refuses to break and the note takes whatever is left on the same line — or
   stands down entirely when there is not enough room to be worth the space it costs. */
.gen-library-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 16px;
  min-width: 0;
}

.gen-library-head h2 {
  margin: 0;
  flex: none;
  white-space: nowrap;
  font-size: clamp(19px, 2.2vw, 24px);
  letter-spacing: -.01em;
}

.gen-library-head .micro {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .gen-library-head .micro { display: none; }
}

.gen-rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.gen-card a {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 12px;
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-r-card);
  color: inherit;
  text-decoration: none;
  transition: transform .35s cubic-bezier(.22, .9, .26, 1), border-color .2s, box-shadow .35s;
}

.gen-card a:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, .28);
  box-shadow: 0 22px 50px -20px rgba(251, 94, 190, .35);
}

.gen-card a:focus-visible { outline: 2px solid var(--mp-pink); outline-offset: 3px; }

/* Up to four tiles stand for the run, best first. One tile fills the pane; more
   share it as a strip — recognising your own work is the pane's whole job. */
.gen-card-art {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  height: 92px;
  border-radius: 9px;
  overflow: hidden;
  background: #0B0B0D;
}

.gen-card-art img { width: 100%; height: 100%; object-fit: cover; }

.gen-card-wait,
.gen-card-void { display: grid; place-items: center; }

.gen-card-void {
  color: var(--mp-mute);
  font-family: var(--mp-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.gen-card-wait::after {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: var(--mp-r-pill);
  background: rgba(255, 201, 160, .22);
  animation: gen-wait 1.6s ease-in-out infinite;
}

@keyframes gen-wait {
  0%, 100% { transform: scale(.7); opacity: .5; }
  50% { transform: scale(1); opacity: 1; }
}

.gen-card-prompt {
  color: var(--mp-ink);
  font-family: var(--mp-sans);
  font-size: 13px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gen-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  color: var(--mp-mute);
  font-family: var(--mp-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.gen-card-count { margin-left: auto; font-variant-numeric: tabular-nums; }

.gen-live { display: inline-flex; align-items: center; gap: 5px; color: var(--mp-peach); }

.gen-live i {
  width: 7px;
  height: 7px;
  border-radius: var(--mp-r-pill);
  background: var(--mp-peach);
  animation: gen-wait 1.6s ease-in-out infinite;
}

.gen-rail-empty { margin: 0; }

/* ── small screens ───────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .gen-bar { flex-direction: column; align-items: stretch; }
  .gen-bar textarea { font-size: 16px; } /* under 16px, focusing zooms the page on iOS */
  .gen-bar .genb { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .gen-card a { transition-duration: .01ms !important; }
  .gen-card-wait::after,
  .gen-live i { animation: none !important; }
}