/* Reviewer 2 Swipes: swipe-deck look. Rounded cards, brand gradient, round action buttons, colour-tinted swipes. */
:root {
  --bg: #f4f5f7;
  --card: #ffffff;
  --ink: #21262e;
  --ink-soft: #5c6470;
  --rule: #e3e5ea;
  --control-border: #c9ccd3;
  --accept: #12a15c;
  --reject: #e5383b;
  --gold-ink: #b77900;
  --highlight: #fff3cd;
  --focus: #2563eb;

  --brand-a: #d6145a;
  --brand-b: #e5392b;
  --brand: linear-gradient(135deg, var(--brand-a), var(--brand-b));

  --deck-top: #2b3042;
  --deck-bottom: #1a1d29;
  --stamp-accept: #3ee6a0;
  --stamp-reject: #ff5c6c;

  --font-sans: ui-rounded, "SF Pro Rounded", -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --gutter: max(16px, env(safe-area-inset-left));

  --radius: 22px;
  --radius-sm: 12px;
  --shadow-soft: 0 6px 18px rgba(33, 38, 46, 0.12);
  --shadow-card: 0 14px 34px rgba(33, 38, 46, 0.3);
  --duration-fast: 150ms;
  --duration-fly: 220ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.45;
  overscroll-behavior: none;
}

#app {
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--space-3) var(--gutter) var(--space-4);
}

.screen[hidden] { display: none; }

h1, h2, h3 { line-height: 1.08; margin: 0; }
h1 {
  font-size: clamp(2.75rem, 13vw, 4.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: var(--space-1) 0 var(--space-3);
  color: var(--brand-a);
  background: var(--brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
h2 { font-size: clamp(1.9rem, 8vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; }
h3 { font-size: 1.25rem; margin: var(--space-4) 0 var(--space-2); padding-bottom: 0.35rem; border-bottom: 2px solid var(--rule); }

.kicker, .progress, .hint, .fine, .note, small, summary, label, .chip, .community {
  font-family: var(--font-sans);
}
.kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; font-weight: 700; margin: var(--space-3) 0 0; color: var(--ink-soft); }
.lede { font-size: 1.2rem; margin: 0 0 var(--space-2); }
.fine { font-size: 0.875rem; color: var(--ink-soft); margin: 0 0 var(--space-3); }
.note { font-size: 0.875rem; color: var(--reject); min-height: 1.2em; }
.notice { padding: var(--space-2); background: var(--highlight); border-radius: var(--radius-sm); }

button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: progress; opacity: 0.6; }
button:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.primary, .secondary {
  display: inline-block;
  min-height: 3.5rem;
  padding: 0.75rem 2rem;
  border-radius: 999px;
  font-weight: 800;
  transition: transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.primary {
  border: 0;
  background: var(--brand);
  color: #fff;
  font-size: 1.2rem;
  box-shadow: 0 8px 20px rgba(214, 20, 90, 0.35);
}
.secondary {
  border: 2px solid var(--control-border);
  background: var(--card);
  font-size: 1rem;
}
.primary:hover:not(:disabled), .secondary:hover { transform: translateY(-2px); }
.primary:active:not(:disabled), .secondary:active { transform: scale(0.97); }

.privacy { margin-top: var(--space-3); font-size: 0.875rem; color: var(--ink-soft); }
.privacy summary { cursor: pointer; }

/* Deck */
.deck-header { margin-bottom: var(--space-1); }
.progress { margin: 0 0 0.4rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); }
.progress-track { height: 6px; border-radius: 999px; background: var(--rule); overflow: hidden; }
#progress-bar { display: block; height: 100%; border-radius: 999px; background: var(--brand); transform-origin: left; transform: scaleX(0); transition: transform 300ms var(--ease); }

.instruction { margin: var(--space-2) 0; text-align: center; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.instruction strong { color: var(--brand-a); }

.deck {
  position: relative;
  height: clamp(18rem, calc(100dvh - 22.5rem), 30rem);
  margin-bottom: var(--space-3);
  perspective: 1200px;
}

.card {
  position: absolute;
  inset: 0;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  transform: translateX(0) rotate(0);
  transition: transform var(--duration-fly) var(--ease);
  --lean: 0;
}
.card.dragging { transition: none; cursor: grabbing; }

/* Colour wash that grows with the drag: green towards accept, red towards reject. */
.card::before, .card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius);
  pointer-events: none;
}
.card::before { background: rgba(62, 230, 160, 0.28); opacity: max(0, var(--lean)); }
.card::after { background: rgba(255, 92, 108, 0.28); opacity: max(0, calc(var(--lean) * -1)); }

.face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  backface-visibility: hidden;
  transition: transform 400ms var(--ease);
}
.face.front {
  color: #fff;
  background:
    radial-gradient(120% 70% at 50% 115%, rgba(229, 57, 43, 0.55), transparent 62%),
    linear-gradient(170deg, var(--deck-top), var(--deck-bottom));
}
.face.back { background: var(--card); color: var(--ink); transform: rotateY(180deg); overflow-y: auto; }
.card.flipped .face.front { transform: rotateY(-180deg); }
.card.flipped .face.back { transform: rotateY(0); }

.face-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid var(--rule); padding-bottom: 0.5rem; margin: 0; }
.front .face-label { color: rgba(255, 255, 255, 0.75); border-bottom-color: rgba(255, 255, 255, 0.2); }
.title { flex: 1; display: flex; align-items: center; margin: 0; font-size: clamp(1.45rem, 6.2vw, 2rem); font-weight: 800; letter-spacing: -0.01em; line-height: 1.18; hyphens: auto; overflow-wrap: anywhere; }
.abstract { margin: var(--space-2) 0 0; font-size: 1rem; }
.flip-hint { font-size: 0.8125rem; color: var(--ink-soft); margin: 0; }
.front .flip-hint { color: rgba(255, 255, 255, 0.75); }

.stamp {
  position: absolute;
  top: 3.5rem;
  z-index: 2;
  padding: 0.1rem 0.7rem;
  border: 4px solid currentColor;
  border-radius: 10px;
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: 0.06em;
  pointer-events: none;
}
.stamp.accept { left: 1.25rem; color: var(--stamp-accept); transform: rotate(-14deg); opacity: max(0, var(--lean)); }
.stamp.reject { right: 1.25rem; color: var(--stamp-reject); transform: rotate(14deg); opacity: max(0, calc(var(--lean) * -1)); }

.controls { display: flex; justify-content: center; align-items: center; gap: var(--space-3); }
.round {
  display: grid;
  place-items: center;
  gap: 0.1rem;
  width: 4.5rem;
  height: 4.5rem;
  padding: 0;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--shadow-soft);
  font-size: 1.7rem;
  line-height: 1;
  transition: transform var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.round small { display: none; } /* icons carry the meaning; each button has an aria-label */
.round:hover:not(:disabled) { transform: scale(1.07); }
.round:active:not(:disabled) { transform: scale(0.93); }
.round.accept { color: var(--accept); }
.round.reject { color: var(--reject); }
.round.accept:active:not(:disabled) { background: var(--accept); color: #fff; }
.round.reject:active:not(:disabled) { background: var(--reject); color: #fff; }
.round.undo { width: 3.25rem; height: 3.25rem; font-size: 1.6rem; color: var(--gold-ink); }
.hint { text-align: center; font-size: 0.75rem; color: var(--ink-soft); margin: var(--space-2) 0 0; }

/* Reveal */
.bars { display: grid; gap: var(--space-2); margin: var(--space-3) 0 var(--space-1); }
.bar-row { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; font-size: 0.9375rem; }
.bar-track { grid-column: 1 / -1; height: 1.25rem; border-radius: 999px; background: var(--rule); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; transform-origin: left; transition: transform 700ms var(--ease); }
.bar-fill.real { background: var(--accept); }
.bar-fill.boring { background: #7b8494; }
.community { font-size: 0.8125rem; color: var(--ink-soft); margin: 0 0 var(--space-3); }

.experience { display: grid; gap: 0.4rem; margin: var(--space-3) 0; }
.experience label { font-size: 0.875rem; }
select { min-height: 2.75rem; padding: 0 0.75rem; border: 1.5px solid var(--control-border); border-radius: var(--radius-sm); background: var(--card); font-family: var(--font-sans); font-size: 1rem; }

.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.review { padding: var(--space-2); background: var(--card); border-radius: 16px; box-shadow: var(--shadow-soft); }
.review-head { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.chip { padding: 0.15rem 0.65rem; border: 1.5px solid var(--control-border); border-radius: 999px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.chip.accepted { background: var(--accept); color: #fff; border-color: var(--accept); }
.chip.rejected { background: var(--reject); color: #fff; border-color: var(--reject); }
.chip.fake { background: var(--highlight); border-color: #ecd48a; }
.review p { margin: 0 0 0.35rem; font-size: 0.9375rem; padding: 0.15rem 0.4rem; border-radius: 8px; }
.review .label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); display: block; }
.review .seen { background: var(--highlight); }
.review a { font-size: 0.8125rem; color: var(--ink); }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* Consent + links */
.consent { font-size: 0.875rem; margin: 0 0 var(--space-3); padding: var(--space-1) var(--space-2); border-left: 4px solid var(--brand-a); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--card); }
.consent a, .kicker a, .downloads a, .data-link { color: var(--ink); }

/* Data page */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#app.wide { max-width: 72rem; }
.data-title { font-size: clamp(2.25rem, 9vw, 3.25rem); margin-bottom: var(--space-2); }
.summary { font-size: 0.9375rem; padding: var(--space-1) var(--space-2); background: var(--highlight); border-radius: var(--radius-sm); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: var(--space-2) 0; font-size: 0.875rem; }
.toolbar input { flex: 1 1 12rem; min-height: 2.75rem; padding: 0 0.75rem; border: 1.5px solid var(--control-border); border-radius: var(--radius-sm); background: var(--card); font: inherit; }
.downloads { display: flex; gap: var(--space-2); margin-left: auto; }
.table-wrap { overflow-x: auto; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-soft); }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { padding: 0.55rem 0.75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
th { position: sticky; top: 0; background: var(--card); border-bottom: 2px solid var(--rule); white-space: nowrap; }
th button { padding: 0; border: 0; background: none; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
th[aria-sort="ascending"] button::after { content: " \25B2"; }
th[aria-sort="descending"] button::after { content: " \25BC"; }
td.num { font-variant-numeric: tabular-nums; font-size: 0.875rem; white-space: nowrap; }
td.strong { font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

@media (forced-colors: active) {
  h1 { -webkit-text-fill-color: CanvasText; background: none; }
}