/* The page behind the review links, in the style of the Secret Santa tool. */

body:has(.review-page) {
  background: white;
}

.review-page {
  --review-gutter: clamp(16px, 5vw, 64px);

  display: flex;
  flex-direction: column;
  color: var(--text-primary);
}

.review-page p,
.review-page h1,
.review-page h2 {
  margin: 0;
}

/* --- Hero: short, so the message box shows without scrolling on a phone --- */

.review-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: clamp(4px, 2vw, 28px) var(--review-gutter) 14px;
  text-align: center;
}

.review-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 24px;
  font-size: var(--font-sm);
  line-height: 20px;
  font-weight: var(--font-weight-semibold);
  color: var(--interactive-primary);
}

.review-chip .icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.review-chip--lime { background: var(--interactive-accent); }
.review-chip--soft { background: #e3f6d5; }

.review-hero__question {
  font-family: var(--font-family-bricolage);
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: var(--font-weight-semibold);
}

.review-hero__hint {
  font-size: var(--font-sm);
  line-height: 20px;
  color: var(--text-secondary);
}

/* --- Stars --- */

.review-rating {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-rating__value {
  font-family: var(--font-family-bricolage);
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 700;
  white-space: nowrap;
}

.review-stars {
  --review-star-color: #dcdce6;

  display: flex;
  gap: 4px;
}

.review-stars--1 { --review-star-color: #ff3722; }
.review-stars--2 { --review-star-color: #ff8622; }
.review-stars--3 { --review-star-color: #ffce00; }
.review-stars--4 { --review-star-color: #73cf11; }
.review-stars--5 { --review-star-color: #00b67a; }

.review-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: #dcdce6;
  color: white;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.review-star--on {
  background: var(--review-star-color);
}

.review-star:hover {
  filter: brightness(0.94);
}

.review-star:focus-visible {
  outline: 2px solid var(--interactive-primary);
  outline-offset: 2px;
}

.review-star .icon {
  width: 26px;
  height: 26px;
}

/* --- The note and the message --- */

.review-panel,
.review-sign {
  width: calc(100% - 2 * var(--review-gutter));
  max-width: 640px;
  box-sizing: border-box;
  margin: 0 auto 20px;
  padding: clamp(14px, 4vw, 32px);
  border-radius: clamp(24px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.review-panel {
  background: #effae6;
}

.review-note {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.review-note__author,
.review-composer__author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-sm);
  line-height: 18px;
  color: var(--text-secondary);
}

.review-note__author strong,
.review-composer__author strong {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.review-note__photo {
  flex-shrink: 0;
  border-radius: var(--rounded-full);
  object-fit: cover;
}

.review-note__bubble {
  padding: 10px 14px;
  border-radius: 2px 16px 16px;
  background: #d9f2c4;
  font-size: 15px;
  line-height: 1.45;
  text-wrap: pretty;
}

.review-composer__error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 14px 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fdecea;
  color: var(--color-danger);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-semibold);
}

.review-composer__error .icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

/* One box for the stars, the text, the photos and the send button. */
.review-composer {
  border: 1px solid #b7c7a8;
  border-radius: 20px;
  background: white;
  overflow: hidden;
}

.review-composer:has(.review-field:focus) {
  outline: 2px solid var(--interactive-primary);
  outline-offset: 1px;
}

.review-composer__author {
  padding: 10px 14px 0;
}

.review-composer__avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--rounded-full);
  background: var(--interactive-accent);
  color: var(--interactive-primary);
  font-weight: var(--font-weight-semibold);
}

.review-field {
  display: block;
  width: 100%;
  max-height: 240px;
  box-sizing: border-box;
  padding: 8px 14px 4px;
  border: none;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  overflow-y: auto;
  resize: none;
}

.review-composer__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 6px 6px 12px 14px;
}

.review-button {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  box-sizing: border-box;
  padding: 8px 16px;
  border: none;
  border-radius: var(--rounded-full);
  background: var(--interactive-primary);
  color: white;
  font: inherit;
  font-size: var(--font-sm);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.review-button:hover {
  background: #1e4700;
  color: white;
}

.review-button .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* --- The blue panel: the public review, before and after sending --- */

.review-page .review-page__overall {
  margin-bottom: 20px;
  text-align: center;
}

.review-sign {
  background: linear-gradient(180deg, #edf8ff 0%, #d8ecfd 100%);
}

.review-sign__title {
  font-family: var(--font-family-bricolage);
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.review-platforms {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review-platform {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid #bcd9f2;
  border-radius: 16px;
  background: white;
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.review-platform:hover {
  border-color: #b9bdb0;
  background: #f6f6f3;
  color: var(--text-primary);
}

.review-platform__logo {
  flex-shrink: 0;
  border-radius: 6px;
}

.review-platform__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.review-platform__text strong {
  font-size: 15px;
  line-height: 20px;
  font-weight: var(--font-weight-semibold);
}

.review-platform__text small {
  font-size: var(--font-sm);
  line-height: 16px;
  font-weight: normal;
  color: var(--text-secondary);
}

.review-platform .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
}

.review-sign__steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--font-sm);
}

.review-page .review-page__back {
  margin-bottom: 40px;
  text-align: center;
  font-size: var(--font-sm);
  font-weight: var(--font-weight-semibold);
}

.review-page__back a {
  color: var(--interactive-primary);
}

.review-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Stars in the box: radio buttons, filled up to the one chosen --- */

.review-rating {
  margin: 0;
  padding: 8px 14px 0;
  border: none;
}

.review-star {
  border-radius: 4px;
}

.review-star:has(input:focus-visible) {
  outline: 2px solid var(--interactive-primary);
  outline-offset: 2px;
}

.review-stars:has(.review-star:nth-child(1) input:checked) { --review-star-color: #ff3722; }
.review-stars:has(.review-star:nth-child(2) input:checked) { --review-star-color: #ff8622; }
.review-stars:has(.review-star:nth-child(3) input:checked) { --review-star-color: #ffce00; }
.review-stars:has(.review-star:nth-child(4) input:checked) { --review-star-color: #73cf11; }
.review-stars:has(.review-star:nth-child(5) input:checked) { --review-star-color: #00b67a; }

.review-stars:has(.review-star:nth-child(1) input:checked) .review-star:nth-child(-n+1),
.review-stars:has(.review-star:nth-child(2) input:checked) .review-star:nth-child(-n+2),
.review-stars:has(.review-star:nth-child(3) input:checked) .review-star:nth-child(-n+3),
.review-stars:has(.review-star:nth-child(4) input:checked) .review-star:nth-child(-n+4),
.review-stars:has(.review-star:nth-child(5) input:checked) .review-star:nth-child(-n+5) {
  background: var(--review-star-color);
}

/* --- The thread: every entry starts with its name and date --- */

.review-page__frame {
  display: flex;
  flex-direction: column;
}

.review-thread,
.review-reply-box {
  display: block;
  width: calc(100% - 2 * var(--review-gutter));
  max-width: 640px;
  box-sizing: border-box;
  margin: 0 auto 20px;
}

.review-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.review-entry {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 14px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.5;
}

/* The person's own words sit on a tinted ground, Georges's on his green. */
.review-entry--reviewer {
  margin-left: clamp(24px, 8vw, 64px);
  border-top-right-radius: 4px;
  background: #eef1ea;
}

.review-entry--founder {
  margin-right: clamp(24px, 8vw, 64px);
  border-top-left-radius: 4px;
  background: #d9f2c4;
}

.review-entry__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: var(--font-sm);
  line-height: 20px;
  color: var(--text-secondary);
}

.review-entry__who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.review-entry__who strong {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.review-entry__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--rounded-full);
  background: white;
  color: var(--interactive-primary);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-semibold);
}

.review-entry--founder .review-entry__avatar {
  background: var(--interactive-accent);
}

.review-entry__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review-entry__body p {
  margin: 0;
  overflow-wrap: anywhere;
}

.review-entry__note {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

/* Styled like the design system's link button (.btn--link). */
.review-entry__correct {
  align-self: flex-end;
  margin-top: -2px;
  font-size: var(--font-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--interactive-primary);
}

.review-mini {
  font-size: 17px;
  line-height: 1;
  letter-spacing: 2px;
  white-space: nowrap;
}

.review-mini__off { color: #7d8277; }
.review-mini--1 { color: #ff3722; }
.review-mini--2 { color: #ff8622; }
.review-mini--3 { color: #e0b400; }
.review-mini--4 { color: #5fb80b; }
.review-mini--5 { color: #00b67a; }

/* An organiser's payouts, folded when several follow each other. */
/* --- Tabs once a thread exists: a new review or an answer --- */

.review-tabs {
  display: flex;
  gap: 4px;
  margin: 8px 8px 0;
  padding: 4px;
  border-radius: 12px;
  background: var(--background-neutral);
}

.review-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  line-height: 1.25;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  text-decoration: none;
}

.review-tab[aria-current="page"] {
  border-color: #e4e4e0;
  background: white;
  color: var(--text-primary);
}

/* --- Photos --- */

.review-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.review-photos img {
  display: block;
  width: 88px;
  height: 88px;
  border: 1px solid rgb(0 0 0 / 0.06);
  border-radius: 10px;
  object-fit: cover;
}

.review-editing {
  scroll-margin-top: 96px;
}

.review-photos--kept {
  padding: 4px 14px 8px;
}

.review-photos--pending {
  padding: 0 14px;
}

.review-photos--pending:empty {
  display: none;
}

.review-photos--pending span {
  position: relative;
}

.review-photos--pending img {
  width: 56px;
  height: 56px;
}

.review-photos--pending button {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: var(--rounded-full);
  background: var(--text-primary);
  color: white;
  font-size: var(--font-sm);
  line-height: 20px;
  cursor: pointer;
}

.review-attach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  padding: 6px 10px;
  border: 1px solid #e4e4e0;
  border-radius: var(--rounded-full);
  color: var(--text-secondary);
  font-size: var(--font-sm);
  cursor: pointer;
}

.review-attach:hover {
  border-color: #b9bdb0;
  background: #f6f6f3;
  color: var(--text-primary);
}

.review-attach--icon {
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
}

.review-attach--icon .icon {
  width: 18px;
  height: 18px;
}

.review-attach--opening {
  border-color: var(--interactive-primary);
  background: #e3f6d5;
  color: var(--interactive-primary);
}

.review-attach--opening .icon {
  animation: review-attach-pulse 0.9s ease-in-out infinite;
}

@keyframes review-attach-pulse {
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .review-attach--opening .icon { animation: none; }
}

.review-attach:has(input:focus-visible) {
  outline: 2px solid var(--interactive-primary);
  outline-offset: 2px;
}

.review-attach .icon {
  width: 16px;
  height: 16px;
}

.review-composer__cancel {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

/* The privacy notice: a quiet strip along the bottom of the box. */
.review-composer__foot {
  margin: 0;
  padding: 9px 14px;
  border-top: 1px solid #f0f0ec;
  background: #f6f6f3;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  line-height: 1.4;
}

.review-composer__foot a {
  color: inherit;
  text-decoration: underline;
}

.review-composer__foot a:hover {
  color: var(--text-primary);
}

.review-tab:not([aria-current="page"]):hover {
  color: var(--text-primary);
}

.review-page__frame > .review-thread:first-child {
  margin-top: clamp(12px, 3vw, 28px);
}

/* Shown in place of the box right after sending. */
.review-sent {
  width: calc(100% - 2 * var(--review-gutter));
  max-width: 640px;
  box-sizing: border-box;
  margin: 8px auto 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-lg) var(--spacing-md);
  border: 1px solid var(--color-border-neutral);
  border-radius: 20px;
  background: white;
  text-align: center;
  scroll-margin-top: 96px;
}

.review-page .review-sent p {
  max-width: 460px;
}

.review-sent__badge {
  width: 52px;
  height: 52px;
  margin-bottom: var(--spacing-3xs);
}

.review-sent__badge::before {
  width: 52px;
  height: 52px;
}

.review-sent__badge .icon {
  width: 26px;
  height: 26px;
}

.review-sent__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-2xs);
  margin-top: var(--spacing-2xs);
}

/* --- An organiser's payouts, marked in the thread --- */

.review-payouts {
  margin: 4px 0;
  overflow: hidden;
  border: 1px solid var(--color-border-neutral);
  border-radius: 14px;
  background: #fff;
  font-size: var(--font-sm);
}

.review-payouts__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 14px;
  font-weight: var(--font-weight-semibold);
}

summary.review-payouts__title {
  cursor: pointer;
  list-style: none;
}

summary.review-payouts__title::-webkit-details-marker {
  display: none;
}

summary.review-payouts__title::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
  transform: rotate(45deg);
  transition: transform 0.15s;
}

.review-payouts[open] summary.review-payouts__title::after {
  transform: rotate(-135deg);
}

summary.review-payouts__title:hover {
  background: #f6f6f3;
}

.review-payouts__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.review-payouts__table th,
.review-payouts__table td {
  padding: 8px 14px;
  border-top: 1px solid var(--color-border-soft);
  text-align: left;
  white-space: nowrap;
}

.review-payouts__table th {
  white-space: normal;
  vertical-align: bottom;
  color: var(--text-secondary);
  font-weight: var(--font-weight-regular);
}

.review-payouts__amount {
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 480px) {
  .review-payouts__table th,
  .review-payouts__table td {
    padding: 8px 6px;
  }

  .review-payouts__table th:first-child,
  .review-payouts__table td:first-child {
    padding-left: 12px;
  }

  .review-payouts__table th:last-child,
  .review-payouts__table td:last-child {
    padding-right: 12px;
  }

  .review-payouts__table .badge {
    padding: 2px 8px;
  }
}

/* --- Feedback on everything clickable: a hover, then a press --- */

.review-button,
.review-platform,
.review-tab,
.review-photos a,
summary.review-payouts__title,
.review-page__back a,
.review-entry__correct,
.review-composer__cancel,
.review-composer__foot a {
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, text-decoration-color 0.15s;
}

.review-tab:not([aria-current="page"]):hover {
  background: rgb(255 255 255 / 0.6);
}

.review-photos a {
  display: block;
  border-radius: 10px;
}

.review-photos a:hover {
  opacity: 0.85;
}


.review-page__back a,
.review-entry__correct,
.review-composer__cancel {
  border-radius: 4px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}

.review-page__back a:hover,
.review-entry__correct:hover,
.review-composer__cancel:hover,
.review-composer__foot a:hover {
  color: var(--interactive-primary);
  text-decoration-color: currentColor;
}

/* Pressing returns to the resting look: a quick flash, nothing that moves. */
.review-button:active {
  background: var(--interactive-primary);
}

.review-platform:active {
  border-color: #bcd9f2;
  background: white;
}

.review-tab:not([aria-current="page"]):active {
  background: transparent;
  color: var(--text-secondary);
}

.review-attach:active {
  border-color: #e4e4e0;
  background: white;
  color: var(--text-secondary);
}

.review-photos a:active {
  opacity: 1;
}

summary.review-payouts__title:active {
  background: transparent;
}

.review-page__back a:active {
  color: var(--interactive-primary);
  text-decoration-color: transparent;
}

.review-entry__correct:active {
  color: var(--interactive-primary);
  text-decoration-color: transparent;
}

.review-composer__cancel:active,
.review-composer__foot a:active {
  color: var(--text-secondary);
  text-decoration-color: transparent;
}

.review-composer__foot a:active {
  text-decoration-color: currentColor;
}

/* --- The gift a participant's thread opens with --- */

.review-gift {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0;
  padding: 12px 14px;
  border: 1px solid var(--color-border-neutral);
  border-radius: 14px;
  background: white;
}

.review-gift__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.review-gift__title {
  font-weight: var(--font-weight-semibold);
}

.review-gift__meta {
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

.review-gift__amount {
  flex: none;
  font-family: var(--font-family-bricolage);
  font-size: var(--font-lg);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.review-gift__link {
  color: var(--interactive-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}

.review-gift__link:hover {
  text-decoration-color: currentColor;
}

.review-gift__link:active {
  text-decoration-color: transparent;
}