/* Kept: the visitor's own pictures and their taste in a few words. Lives in a sheet;
   var(--s5) between the three parts, the same as the sheet's own edge. */

/* ── nothing kept ────────────────────────────────────────────────────────── */

.kept-empty {
  margin: 0;
  padding: var(--s6) 0;
  text-align: center;
  color: var(--ink-soft);
}

/* only when the last picture is let go while the sheet is open */
.kept-empty.is-arriving {
  animation: kept-arrive 240ms ease-out both;
}

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

/* ── the taste: a few words, five colours ────────────────────────────────── */

.kept-card {
  padding-top: var(--s2);
  text-align: center;
}

.kept-words {
  margin: 0;
  font-size: 1.25rem;
  text-wrap: balance;
}

.kept-bar {
  position: relative;
  display: flex;
  max-width: 220px;
  height: 10px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-chip);
}

.kept-words + .kept-bar {
  margin-top: var(--s3);
}

.kept-bar > span {
  flex: 1 1 0;
}

/* a hairline holds the shape when the taste runs dark */
.kept-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ── the pictures ────────────────────────────────────────────────────────── */

/* Every kept picture at its own shape, large enough to look at: the sheet is a wall of
   one's own, as tall and as wide as the screen allows, and it scrolls. */
.sheet[aria-label="kept"] {
  max-height: 94dvh;
}

@media (min-width: 760px) {
  .sheet[aria-label="kept"] {
    width: min(1180px, calc(100vw - 2 * var(--s5)));
    margin-left: calc(min(1180px, calc(100vw - 2 * var(--s5))) / -2);
  }
}

.kept-grid {
  columns: 2;
  column-gap: var(--wall-gap);
  margin: var(--s5) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .kept-grid {
    columns: 4;
  }
}

@media (min-width: 1100px) {
  .kept-grid {
    columns: 5;
  }
}

.kept-grid > li {
  break-inside: avoid;
  margin-bottom: var(--wall-gap);
}

.kept-grid .tile {
  display: block;
  width: 100%;
}

/* ── share, clear ────────────────────────────────────────────────────────── */

.kept-actions {
  justify-content: center;
  margin-top: var(--s5);
}

/* one width for both, so the pair sits on the centre line and "sure?" moves nothing */
.kept-actions .chip {
  position: relative;
  justify-content: center;
  min-width: 72px;
}

/* a 44px target around a 36px chip */
.kept-actions .chip::after {
  content: "";
  position: absolute;
  inset: calc(50% - 22px) 0;
}

.kept-clear.is-armed {
  color: var(--ink);
}

/* the field a link is copied from where there is no clipboard API; never seen */
.kept-copy {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .kept-empty.is-arriving {
    animation-duration: 1ms;
  }
}

/* pictures that came with a shared link */
.kept-sent {
  margin-bottom: var(--s5);
}

.kept-sent-label {
  display: block;
  margin-bottom: var(--s3);
  text-align: center;
}