/* Everything sizes from the tokens; the shell's .is-stage centres #build. */
.build {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  width: min(92vw, 560px);
  transition: width var(--dur-slow) var(--ease);
}
.build.is-wide { width: min(94vw, 820px); }

.build-box {
  position: relative;
  width: 100%;
  height: 7.5rem;
  background: var(--surface);
  border: 1.5px solid var(--text);          /* the same line as an "on" pill's ring */
  border-radius: var(--radius-lg);
  transition: height var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease),
              box-shadow var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}
.build-box.is-log { height: min(60vh, 520px); }
/* while working: a soft outer glow that breathes (accent, low alpha) */
.build-box.is-working { animation: thon-glow 2.6s ease-in-out infinite; }
@keyframes thon-glow {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50%      { box-shadow: 0 0 28px 3px color-mix(in srgb, var(--accent) 38%, transparent); }
}

.build-input {
  display: block;
  width: 100%;
  height: 100%;
  padding: var(--space-4);
  background: transparent;
  border: 0;
  resize: none;
  outline: none;
  border-radius: inherit;
  transition: opacity var(--dur-slow) var(--ease);
}
.build-input::placeholder { color: var(--text-faint); }
.build-input.is-out { opacity: 0; }

.build-log {
  position: absolute;
  inset: 0;
  padding: var(--space-5);
  overflow-y: auto;
  border-radius: inherit;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--text);
  opacity: 0.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
  scrollbar-width: none;
  /* the text fades out towards every border */
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
              linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
                      linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
}
.build-log > div { animation: thon-rise var(--dur-slow) var(--ease) both; }
@keyframes thon-rise { from { opacity: 0; transform: translateY(4px); } }

.build-url, .build-fail {
  font-size: var(--step-0);
  text-align: center;
  overflow-wrap: anywhere;
}
.build-fail { color: var(--danger); max-width: 60ch; }
.build-hello { font-size: var(--step--1); color: var(--text-muted); }

@media (max-width: 480px) {
  .build { gap: var(--space-4); }
  .build-box.is-log { height: 65vh; }
}