/* Clips: the "Save clip" button over a selection in a message, and the
   /clips page of saved passages. */

/* The clipper button sits inside the message body, above the selection */

.entry__body[data-controller~="clipper"] { position: relative; }

.clipper-button {
  position: absolute;
  z-index: 8;
  width: 8.5em;
  margin-left: -4.25em;
  padding: 5.28px 0;
  border: 1px solid var(--popup-line);
  border-radius: 33px;
  background: var(--color-sheet);
  color: var(--color-ink);
  font: inherit;
  font-size: 15.4px;
  line-height: 21.56px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 10px rgb(var(--ink-rgb) / 0.12);
}

.clipper-button[hidden] { display: none; }
.clipper-button:hover { background: var(--color-soft); color: var(--color-ink); }
.clipper-button:focus-visible { outline: none; box-shadow: 0 0 0 2px #a4d2ff; }
.clipper-button--done, .clipper-button--done:hover { border-color: var(--color-accent); background: var(--color-accent); color: #fff; cursor: default; }

/* Page */

.app-main.app-main--clips { max-width: calc(1078px + 32px); padding: 17.2px 16px 88px; } /* 1078px of content, as HEY */

/* Divider heading: the title on a gradient rule */

.clips-heading { margin: 0 0 33px; }

.clips-heading__title {
  position: relative;
  margin: 0;
  font-size: 44px;
  line-height: 44px;
  font-weight: 700;
  text-align: center;
}

.clips-heading__title::before { content: ""; position: absolute; inset: 22px 0 auto; height: 1px; background: var(--color-rule); }
.clips-heading__title span { position: relative; padding: 0 11px; background: var(--color-bg); }

/* Cards, tilted alternately */

.clips { display: flex; flex-direction: column; gap: 33px; max-width: 770px; margin: 0 auto; }

.clip-card {
  display: flex;
  align-items: flex-start;
  gap: 17.6px;
  padding: 26.4px 26.4px 17.6px;
  border: 1px solid rgb(var(--ink-rgb) / 0.15);
  border-radius: 17.6px;
  background: var(--color-sheet);
  box-shadow: 0 0 33px rgb(var(--warm-rgb) / 0.5);
  rotate: -0.5deg;
}

.clip-card:nth-child(even) { rotate: 0.5deg; }

.avatar--clip { --avatar-size: 44px; font-size: 16px; }

.clip-card__content { flex: 1; min-width: 0; }

.clip-card__byline { margin: 0; color: var(--color-muted); font-size: 15.4px; line-height: 21.56px; }
.clip-card__byline strong { color: var(--color-ink); font-weight: 600; }

.clip-card__quote {
  margin: 8.8px 0 0;
  padding-left: 15.4px;
  border-left: 3px solid var(--color-accent);
  font-size: 19.8px;
  line-height: 27.72px;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.clip-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 11px; margin-top: 15.4px; }

.clip-card__thread {
  display: inline-flex;
  align-items: center;
  gap: 6.6px;
  min-width: 0;
  color: var(--color-accent);
  font-size: 15.4px;
  line-height: 21.56px;
  font-weight: 500;
  text-decoration: none;
}

.clip-card__thread span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-card__thread:hover span { text-decoration: underline; }
.clip-card__thread-icon { flex: none; width: 17px; height: 17px; }

.clip-card__delete-form { margin: 0; }

.clip-card__delete {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-muted);
  cursor: pointer;
}

.clip-card__delete svg { width: 20px; height: 20px; }
.clip-card__delete:hover { background: rgb(var(--ink-rgb) / 0.06); color: var(--color-ink); }
.clip-card__delete:focus-visible { outline: none; box-shadow: 0 0 0 2px #a4d2ff; }

/* Blank slate: Postboxey's own art behind a centred card */

.clips-blank {
  display: grid;
  place-items: center;
  min-height: 715px;
  border-radius: 46.2px;
  background:
    radial-gradient(circle at 18% 24%, rgb(214 211 209 / 0.55) 0 70px, transparent 71px),
    radial-gradient(circle at 84% 18%, rgb(48 114 221 / 0.18) 0 110px, transparent 111px),
    radial-gradient(circle at 78% 82%, rgb(48 114 221 / 0.16) 0 90px, transparent 91px),
    radial-gradient(circle at 12% 86%, rgb(246 194 28 / 0.25) 0 50px, transparent 51px),
    repeating-linear-gradient(-8deg, transparent 0 42px, rgb(var(--ink-rgb) / 0.04) 42px 43px),
    #faf8f5;
}

.clips-blank__card {
  width: 534px;
  max-width: 100%;
  padding: 61.6px;
  border-radius: 46.2px;
  background: var(--color-sheet);
  box-shadow: 0 0 33px rgb(var(--warm-rgb) / 0.3);
  text-align: center;
  rotate: -0.5deg;
}

.clips-blank__icon { width: 44px; height: 44px; color: var(--color-accent); }

.clips-blank__text { margin: 13.2px 0 0; font-size: 30.8px; line-height: 43.12px; }
.clips-blank__text strong { font-weight: 700; }

@media (max-width: 640px) {
  .clips-heading__title { font-size: 34px; line-height: 40px; }
  .clips-heading__title::before { inset: 20px 0 auto; }
  .clip-card { padding: 17.6px 17.6px 11px; gap: 11px; }
  .clips-blank { min-height: 480px; border-radius: 26px; }
  .clips-blank__card { padding: 33px 26px; border-radius: 26px; }
  .clips-blank__text { font-size: 22px; line-height: 30.8px; }
}