/* Start from: a feeling, a few words, the colours of a room. Lives in a sheet; var(--s5)
   between the three parts, var(--s3) under each label. */

.start {
  padding-top: var(--s2);
}

.start-section + .start-section {
  margin-top: var(--s5);
}

.start-label {
  display: block;
  margin: 0 0 var(--s3);
}

/* a 44px target around a 36px chip */
.start-chip {
  position: relative;
}

.start-chip::after {
  content: "";
  position: absolute;
  inset: calc(50% - 22px) 0;
}

/* "use these" with no colour left on */
.start-chip[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

/* ── words ───────────────────────────────────────────────────────────────── */

.start-words {
  position: relative;
}

.start-form {
  margin: 0;
}

.start-input {
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding-block: 0;
  padding-inline: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  background: transparent;
  color: var(--ink);
  font: var(--text-body);
  font-size: max(1rem, 16px); /* anything smaller and iOS zooms the page on focus */
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}

.start-input::placeholder {
  color: var(--ink-faint);
  opacity: 1;
}

.start-input::-webkit-search-decoration,
.start-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* "nothing yet" hangs under the input, on its text edge, and takes no room of its own:
   the input never moves under a hand that is typing. The room section gives way instead. */
.start-status {
  position: absolute;
  top: 100%;
  left: calc(var(--s4) + 1px);
  margin-top: var(--s1);
  pointer-events: none;
}

.start-none {
  margin: 0;
  color: var(--ink-soft);
  white-space: nowrap;
  animation: start-arrive 200ms ease-out both;
}

@keyframes start-arrive {
  from {
    opacity: 0;
  }
}

/* ── your room ───────────────────────────────────────────────────────────── */

/* a photo is being read */
.start-room[aria-busy="true"] .start-chip {
  opacity: 0.45;
}

/* swatches, then what to do with them: one line where there is room, two on a phone */
.start-picked {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
}

.start-picked.is-arriving {
  animation: start-arrive 200ms ease-out both;
}

.start-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.start-swatch {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: transform 90ms ease-out;
}

/* the colour */
.start-swatch::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: rgb(var(--start-rgb));
  forced-color-adjust: none; /* the colour is the content */
  transition: opacity 120ms ease-out;
}

/* a 44px target around a 40px swatch; its inner edge is the swatch's own */
.start-swatch::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid transparent;
  border-radius: 50%;
}

.start-swatch:active {
  transform: scale(0.94);
}

/* off: the colour steps back and a hairline holds its place */
.start-swatch[aria-pressed="false"]::before {
  opacity: 0.3;
}

.start-swatch[aria-pressed="false"]::after {
  box-shadow: inset 0 0 0 1px var(--line);
}

/* out of a photo, one after the other */
.start-swatch.is-fresh {
  animation: start-swatch 260ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--start-i) * 35ms);
}

@keyframes start-swatch {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* one width for both, so "clear" turning into "use these" moves nothing */
.start-use {
  justify-content: center;
  min-width: 104px;
}

/* ── with the keyboard up ────────────────────────────────────────────────── */

/* the sheet stands on the keyboard, inside what is still visible; its body scrolls */
.start-sheet.is-lifted {
  bottom: var(--start-lift);
  max-height: min(86dvh, 720px, calc(var(--start-space) - var(--s2)));
}

/* closed from up there, it goes from where it stands */
.start-sheet.is-leaving {
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease-out;
}

@media (min-width: 760px) {
  .start-sheet.is-lifted {
    bottom: calc(var(--start-lift) + var(--s3));
    max-height: min(86dvh, 720px, calc(var(--start-space) - var(--s3) - var(--s2)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .start-none,
  .start-picked.is-arriving,
  .start-swatch.is-fresh {
    animation: none;
  }

  .start-swatch,
  .start-swatch::before,
  .start-sheet.is-leaving {
    transition-duration: 1ms;
  }
}