/* PeopleSay — dedicated statistics layout */

/* Disabled next-day navigation should communicate that no newer day exists. */
#nextButton:disabled { cursor: not-allowed; }

/* Answer button — shared here because this stylesheet is loaded after the main stylesheet. */
.prompt-card .answer-submit {
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background: #171717;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease, transform .15s ease;
}

.prompt-card .answer-submit:hover:not(:disabled) { background: #262626; }
.prompt-card .answer-submit:active:not(:disabled) { transform: translateY(1px); }
.prompt-card .answer-submit:disabled { opacity: .4; cursor: not-allowed; }

.stats-card .stats-tabs {
  width: 100%;
  margin-top: 14px;
  padding: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}

.stats-card .stats-tabs::-webkit-scrollbar { display: none; }

.stats-card .stats-tab {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #525252;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.stats-card .stats-tab:hover { background: #f5f5f5; }
.stats-card .stats-tab.active { background: #171717; color: #fff; }

.stats-card #statsContent,
.stats-card .stats-content {
  width: 100%;
  min-width: 0;
  padding-top: 14px;
  display: block;
}

/* Trending / Most Liked / All */
.stats-card .all-answers-scroll {
  width: 100%;
  max-height: 420px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.stats-card .all-answers-scroll .answer-row {
  width: 100%;
  min-height: 46px;
  margin: 0 0 8px;
  padding: 9px 12px 9px 14px;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.stats-card .all-answers-scroll .answer-row:last-child { margin-bottom: 0; }

.stats-card .all-answers-scroll .answer-text {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  color: #000;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.stats-card .all-answers-scroll .answer-like-button {
  flex: 0 0 auto;
  min-width: 44px;
  height: 30px;
  min-height: 30px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: #737373;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.stats-card .all-answers-scroll .answer-like-button:hover:not(:disabled) {
  border-color: #a3a3a3;
  background: #fafafa;
  color: #171717;
}

.stats-card .all-answers-scroll .answer-like-button.liked {
  border-color: #fecaca;
  background: #fef2f2;
  color: #dc2626;
}

/* Likes v2 rows used by All / Trending / Most Liked. */
.stats-card .likes-v2-answer-row {
  min-height: 46px;
  margin: 0 0 8px;
  padding: 9px 12px 9px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.stats-card .likes-v2-answer-row:last-child { margin-bottom: 0; }

.stats-card .likes-v2-answer-text {
  color: #000;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
}

/* Trending / Most Liked hierarchy: only ranked lists get the size treatment. */
.stats-card #statsContent:has(.likes-v2-rank) .likes-v2-answer-row:nth-child(1) {
  min-height: 58px;
  padding-top: 13px;
  padding-bottom: 13px;
}

.stats-card #statsContent:has(.likes-v2-rank) .likes-v2-answer-row:nth-child(2) {
  min-height: 53px;
  padding-top: 11px;
  padding-bottom: 11px;
}

.stats-card #statsContent:has(.likes-v2-rank) .likes-v2-answer-row:nth-child(3) {
  min-height: 49px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.stats-card #statsContent:has(.likes-v2-rank) .likes-v2-answer-row:nth-child(1) .likes-v2-answer-text {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.stats-card #statsContent:has(.likes-v2-rank) .likes-v2-answer-row:nth-child(2) .likes-v2-answer-text {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.32;
}

.stats-card #statsContent:has(.likes-v2-rank) .likes-v2-answer-row:nth-child(3) .likes-v2-answer-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.34;
}

/* Most Common */
.stats-card .stats-grid {
  width: 100%;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.stats-card .stats-grid .stat-row {
  width: 100%;
  height: 66px;
  min-height: 66px;
  box-sizing: border-box;
  margin: 0 0 8px;
  padding: 9px 12px 9px 14px;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.stats-card .stats-grid .stat-row:last-child { margin-bottom: 0; }

.stats-card .stats-grid .stat-row span {
  min-width: 0;
  margin: 0;
  color: #404040;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.stats-card .stats-grid .stat-row strong {
  min-width: 56px;
  margin: 0;
  color: #171717;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-align: right;
}

/* Most Common hierarchy: match the Trending / Most Liked top-three sizing exactly. */
.stats-card #statsContent .stats-grid .stat-row:nth-child(1) {
  height: 58px;
  min-height: 58px;
  padding-top: 13px;
  padding-bottom: 13px;
}

.stats-card #statsContent .stats-grid .stat-row:nth-child(2) {
  height: 53px;
  min-height: 53px;
  padding-top: 11px;
  padding-bottom: 11px;
}

.stats-card #statsContent .stats-grid .stat-row:nth-child(3) {
  height: 49px;
  min-height: 49px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.stats-card #statsContent .stats-grid .stat-row:nth-child(1) .stats-common-rank + span {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.stats-card #statsContent .stats-grid .stat-row:nth-child(2) .stats-common-rank + span {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.32;
}

.stats-card #statsContent .stats-grid .stat-row:nth-child(3) .stats-common-rank + span {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.34;
}

/* Word Cloud */
.stats-card .word-cloud {
  width: 100%;
  min-height: 190px;
  padding: 24px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fafafa;
}

.stats-card .word-cloud-word {
  display: inline-block;
  color: #404040;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;
  transform: rotate(var(--cloud-rotate, 0deg));
  transition: transform .15s ease, color .15s ease;
}

.stats-card .word-cloud-word[data-size="1"] { font-size: 13px; opacity: .55; }
.stats-card .word-cloud-word[data-size="2"] { font-size: 16px; opacity: .68; }
.stats-card .word-cloud-word[data-size="3"] { font-size: 20px; opacity: .8; }
.stats-card .word-cloud-word[data-size="4"] { font-size: 25px; opacity: .9; }
.stats-card .word-cloud-word[data-size="5"] { font-size: 31px; opacity: 1; }
.stats-card .word-cloud-word:hover { color: #171717; transform: rotate(0deg) scale(1.04); }

.stats-card .empty-stats {
  width: 100%;
  padding: 24px 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fafafa;
  color: #737373;
  text-align: center;
  font-size: 11px;
}

/* Dark mode */
html[data-theme="dark"] .stats-card .stats-tab { color: #a3a3a3; }
html[data-theme="dark"] .stats-card .stats-tab:hover { background: #222; color: #f5f5f5; }
html[data-theme="dark"] .stats-card .stats-tab.active { background: #242424; color: #f5f5f5; }

html[data-theme="dark"] .stats-card .all-answers-scroll,
html[data-theme="dark"] .stats-card .stats-grid,
html[data-theme="dark"] .stats-card .word-cloud { background: transparent; }

html[data-theme="dark"] .stats-card .all-answers-scroll .answer-row,
html[data-theme="dark"] .stats-card .likes-v2-answer-row,
html[data-theme="dark"] .stats-card .stats-grid .stat-row {
  background: #181818;
  border-color: #303030;
}

html[data-theme="dark"] .stats-card .all-answers-scroll .answer-text,
html[data-theme="dark"] .stats-card .likes-v2-answer-text,
html[data-theme="dark"] .stats-card .stats-grid .stat-row span { color: #d4d4d4; }

html[data-theme="dark"] .stats-card .stats-grid .stat-row strong { color: #f5f5f5; }

html[data-theme="dark"] .stats-card .word-cloud-word { color: #d4d4d4; }
html[data-theme="dark"] .stats-card .word-cloud-word:hover { color: #fff; }

html[data-theme="dark"] .stats-card .all-answers-scroll .answer-like-button {
  background: #202020;
  border-color: #404040;
  color: #a3a3a3;
}

html[data-theme="dark"] .stats-card .all-answers-scroll .answer-like-button.liked {
  background: #351d1d;
  border-color: #713333;
  color: #fca5a5;
}

html[data-theme="dark"] .stats-card .empty-stats {
  background: #171717;
  border-color: #303030;
  color: #8f8f8f;
}

html[data-theme="dark"] .prompt-card .answer-submit { background: #f5f5f5; color: #171717; }
html[data-theme="dark"] .prompt-card .answer-submit:hover:not(:disabled) { background: #fff; }

@media (max-width: 680px) {
  .stats-card .stats-tabs { gap: 3px; }

  .stats-card .stats-tab {
    min-height: 30px;
    padding: 0 9px;
    font-size: 10px;
  }

  .stats-card .all-answers-scroll .answer-row,
  .stats-card .likes-v2-answer-row {
    min-height: 44px;
    padding: 8px 10px 8px 11px;
    gap: 10px;
    border-radius: 9px;
  }

  .stats-card .all-answers-scroll .answer-text,
  .stats-card .likes-v2-answer-text,
  .stats-card .stats-grid .stat-row span { font-size: 12px; }

  .stats-card #statsContent:has(.likes-v2-rank) .likes-v2-answer-row:nth-child(1) {
    min-height: 54px;
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .stats-card #statsContent:has(.likes-v2-rank) .likes-v2-answer-row:nth-child(2) {
    min-height: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .stats-card #statsContent:has(.likes-v2-rank) .likes-v2-answer-row:nth-child(3) {
    min-height: 47px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .stats-card #statsContent:has(.likes-v2-rank) .likes-v2-answer-row:nth-child(1) .likes-v2-answer-text { font-size: 15px; }
  .stats-card #statsContent:has(.likes-v2-rank) .likes-v2-answer-row:nth-child(2) .likes-v2-answer-text { font-size: 14px; }
  .stats-card #statsContent:has(.likes-v2-rank) .likes-v2-answer-row:nth-child(3) .likes-v2-answer-text { font-size: 13px; }

  .stats-card .stats-grid .stat-row {
    height: 62px;
    min-height: 62px;
    padding: 8px 10px 8px 11px;
    column-gap: 10px;
    border-radius: 9px;
  }

  .stats-card #statsContent .stats-grid .stat-row:nth-child(1) {
    height: 54px;
    min-height: 54px;
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .stats-card #statsContent .stats-grid .stat-row:nth-child(2) {
    height: 50px;
    min-height: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .stats-card #statsContent .stats-grid .stat-row:nth-child(3) {
    height: 47px;
    min-height: 47px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .stats-card #statsContent .stats-grid .stat-row:nth-child(1) .stats-common-rank + span { font-size: 15px; }
  .stats-card #statsContent .stats-grid .stat-row:nth-child(2) .stats-common-rank + span { font-size: 14px; }
  .stats-card #statsContent .stats-grid .stat-row:nth-child(3) .stats-common-rank + span { font-size: 13px; }

  .stats-card .word-cloud {
    min-height: 160px;
    padding: 20px 14px;
    gap: 7px 10px;
  }

  .stats-card .word-cloud-word[data-size="1"] { font-size: 12px; }
  .stats-card .word-cloud-word[data-size="2"] { font-size: 14px; }
  .stats-card .word-cloud-word[data-size="3"] { font-size: 17px; }
  .stats-card .word-cloud-word[data-size="4"] { font-size: 21px; }
  .stats-card .word-cloud-word[data-size="5"] { font-size: 26px; }
}

/* Statistics answer hover preview — the JS swaps only the visible prompt text. */
.prompt-card #promptText .prompt-blank.stats-hover-preview {
  color: inherit;
}

/* Mobile answer preview: the selected statistics answer stays visibly active. */
@media (hover: none) and (pointer: coarse) {
  #statsContent .stats-answer-preview-active {
    outline: 2px solid currentColor;
    outline-offset: -2px;
  }
}

/* Unified podium sizing across Trending, Most Liked and Most Common. */
.stats-card #statsContent:has(.likes-v2-rank) .likes-v2-answer-row:nth-child(1),
.stats-card #statsContent .stats-grid .stat-row:nth-child(1) {
  height: 58px;
  min-height: 58px;
  padding-top: 13px;
  padding-bottom: 13px;
  box-sizing: border-box;
}

.stats-card #statsContent:has(.likes-v2-rank) .likes-v2-answer-row:nth-child(2),
.stats-card #statsContent .stats-grid .stat-row:nth-child(2) {
  height: 53px;
  min-height: 53px;
  padding-top: 11px;
  padding-bottom: 11px;
  box-sizing: border-box;
}

.stats-card #statsContent:has(.likes-v2-rank) .likes-v2-answer-row:nth-child(3),
.stats-card #statsContent .stats-grid .stat-row:nth-child(3) {
  height: 49px;
  min-height: 49px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
}

.stats-card #statsContent:has(.likes-v2-rank) .likes-v2-answer-row:nth-child(1) .likes-v2-answer-text,
.stats-card #statsContent .stats-grid .stat-row:nth-child(1) .stats-common-rank + span {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.stats-card #statsContent:has(.likes-v2-rank) .likes-v2-answer-row:nth-child(2) .likes-v2-answer-text,
.stats-card #statsContent .stats-grid .stat-row:nth-child(2) .stats-common-rank + span {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.32;
}

.stats-card #statsContent:has(.likes-v2-rank) .likes-v2-answer-row:nth-child(3) .likes-v2-answer-text,
.stats-card #statsContent .stats-grid .stat-row:nth-child(3) .stats-common-rank + span {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.34;
}

@media (max-width: 680px) {
  /* Keep the same podium dimensions on mobile across all three ranked tabs. */
  .stats-card #statsContent:has(.likes-v2-rank) .likes-v2-answer-row:nth-child(1),
  .stats-card #statsContent .stats-grid .stat-row:nth-child(1) { height: 54px; min-height: 54px; padding-top: 11px; padding-bottom: 11px; }
  .stats-card #statsContent:has(.likes-v2-rank) .likes-v2-answer-row:nth-child(2),
  .stats-card #statsContent .stats-grid .stat-row:nth-child(2) { height: 50px; min-height: 50px; padding-top: 10px; padding-bottom: 10px; }
  .stats-card #statsContent:has(.likes-v2-rank) .likes-v2-answer-row:nth-child(3),
  .stats-card #statsContent .stats-grid .stat-row:nth-child(3) { height: 47px; min-height: 47px; padding-top: 9px; padding-bottom: 9px; }
}