/* ============================================================================
   v15.756 — FAVORITE CHARACTER: picker sheet, composer row, review display

   Editorial Dark, Söhne, 14.1px body. Only transform and opacity animate.
   The sheet opens over the shelf-log composer, so it clears the same band the
   sticker picker does.
   ========================================================================== */

.shelfd-character-sheet {
  position: fixed;
  inset: 0;
  z-index: 1000005;
  display: none;
}

.shelfd-character-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.shelfd-character-sheet.is-open .shelfd-character-backdrop { opacity: 1; }

.shelfd-character-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 68dvh;
  max-height: 68dvh;
  padding-bottom: max(var(--shelfd-safe-bottom, 0px), env(safe-area-inset-bottom, 0px));
  border-radius: 20px 20px 0 0;
  background: #161618;
  box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.5);
  transform: translate3d(0, 100%, 0);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.shelfd-character-sheet.is-open .shelfd-character-panel { transform: translate3d(0, 0, 0); }

.shelfd-character-grabber {
  flex: 0 0 auto;
  width: 36px;
  height: 4px;
  margin: 8px auto 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.shelfd-character-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 16px 4px;
}
.shelfd-character-title {
  color: #ffffff;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(15 * var(--shelfd-px, 1px));
  font-weight: 600;
  letter-spacing: 0.00em;
}
.shelfd-character-cancel {
  flex: 0 0 auto;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: #c4b5fd;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(14.1 * var(--shelfd-px, 1px));
  font-weight: 500;
  letter-spacing: 0.00em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.shelfd-character-search {
  flex: 0 0 auto;
  height: 36px;
  margin: 6px 16px 8px;
  padding: 0 14px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  color: #f2edf9;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-weight: 400;
  /* 16px floor — anything smaller zooms the page on iOS focus. */
  font-size: max(16px, calc(16 * var(--shelfd-px, 1px)));
  letter-spacing: 0.00em;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.shelfd-character-search::placeholder { color: rgba(255, 255, 255, 0.38); }
.shelfd-character-search::-webkit-search-cancel-button { -webkit-appearance: none; }

.shelfd-character-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 10px 14px;
}

.shelfd-character-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 6px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 140ms ease;
}
.shelfd-character-row:active { background: rgba(255, 255, 255, 0.07); }

.shelfd-character-avatar {
  /* v15.758: 44 -> 30. Source files are 185px+ wide either way, so this stays
     sharp well past a 3x display.
     v15.759: 30 -> 32 so the PICTURE is 30. box-sizing is border-box globally,
     so the 1px ring was being taken out of the 30 and only 28px of character
     was actually drawn. The ask was 30 of picture, so the box carries the ring
     on top of it rather than inside it.
     v15.760: picture 30 -> 39, box 41. Same +2 rule: the number here is always
     the requested picture size plus the ring. At 41 the avatar is finally taller
     than the 37px text block, so it is what sets the row height again. */
  flex: 0 0 41px;
  width: 41px;
  height: 41px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: #1e1e22;
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.shelfd-character-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shelfd-character-initial {
  color: #c4b5fd;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  /* Scaled with the circle it sits in. */
  font-size: calc(17 * var(--shelfd-px, 1px));
  font-weight: 600;
}

.shelfd-character-id { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
/* The CHARACTER is the thing being chosen, so it carries the title weight; the
   performer is attached information and reads as a subtitle. */
.shelfd-character-name {
  color: #ffffff;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(14.1 * var(--shelfd-px, 1px));
  font-weight: 500;
  letter-spacing: 0.00em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shelfd-character-actor {
  color: rgba(255, 255, 255, 0.44);
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(12.4 * var(--shelfd-px, 1px));
  font-weight: 400;
  letter-spacing: 0.00em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shelfd-character-row.is-skeleton {
  /* Matches the real row. At a 41px avatar box the PICTURE sets the height
     again (41 > the 37px text block), so it is 8+8 padding + 41 = 57. A
     skeleton that disagrees makes the list jump when results land, which is the
     whole reason it exists. */
  height: 57px;
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 6px;
  animation: shelfd-character-pulse 1.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shelfd-character-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

.shelfd-character-note {
  margin: 26px 0 0;
  color: rgba(255, 255, 255, 0.42);
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(14.1 * var(--shelfd-px, 1px));
  font-weight: 400;
  text-align: center;
}

/* ===================== the row inside the advanced panel ==================== */

.shelf-adv-favchar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: calc(4 * var(--shelfd-px, 1px));
  padding: calc(9 * var(--shelfd-px, 1px)) calc(4 * var(--shelfd-px, 1px));
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Separated from the criteria rows above it: this is a different KIND of answer
   (a pick, not a score), and without the rule it reads as an eighth star row. */
.shelf-adv-favchar-sep {
  height: 1px;
  margin: calc(10 * var(--shelfd-px, 1px)) 0 calc(2 * var(--shelfd-px, 1px));
  background: rgba(255, 255, 255, 0.08);
}
.shelf-adv-favchar-label {
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(255, 255, 255, 0.88);
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(14.1 * var(--shelfd-px, 1px));
  font-weight: 400;
  letter-spacing: 0.00em;
}
.shelf-adv-favchar-value {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 58%;
  color: rgba(255, 255, 255, 0.44);
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(14.1 * var(--shelfd-px, 1px));
  font-weight: 400;
}
.shelf-adv-favchar.is-set .shelf-adv-favchar-value { color: #ffffff; }
.shelf-adv-favchar-value img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 24px;
}
.shelf-adv-favchar-value span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shelf-adv-favchar-clear {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ================= how it reads on the full review page ==================== */

/* v15.761: now the LAST child inside .mylist-review-adv-body, under the craft
   rows. The rule above it separates a pick from a list of scores — the same job
   the separator does in the composer's panel. */
.mylist-review-favchar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: calc(10 * var(--shelfd-px, 1px));
  padding-top: calc(10 * var(--shelfd-px, 1px));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mylist-review-favchar-avatar {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: #1e1e22;
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.mylist-review-favchar-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mylist-review-favchar-id { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.mylist-review-favchar-kicker {
  color: rgba(255, 255, 255, 0.42);
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(11.5 * var(--shelfd-px, 1px));
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.mylist-review-favchar-name {
  color: #ffffff;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(14.1 * var(--shelfd-px, 1px));
  font-weight: 500;
  letter-spacing: 0.00em;
}
.mylist-review-favchar-actor {
  color: rgba(255, 255, 255, 0.44);
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(12.4 * var(--shelfd-px, 1px));
  font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
  .shelfd-character-backdrop,
  .shelfd-character-panel,
  .shelfd-character-row { transition-duration: 120ms; }
  .shelfd-character-row.is-skeleton { animation: none; }
}