/* ==========================================================================
   estimato — table: seats and the flip, the deck of index cards, round results
   (§5 «Место участника», «Карточка голоса», «Результат раунда»). Loaded after
   styles.css and css/room.css; the scrolling frame stays in styles.css. States
   from app.js: .vote-card.selected, .participant.voted/.offline/.flip-in (--i),
   .vote-status[data-state], .vote-result (--count). Animations only under
   no-preference. 1 Seats; 2 Deck; 3 Phones; 4 Results; 5 Reduced motion.
   ========================================================================== */

/* 1. Seats and the flip (§5 «Место участника») ----------------------------- */
.participants-header {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--muted);
}

.participant-badge {
  padding: 0 var(--s-2);
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--cobalt);
}

.participants-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-5) var(--s-6);
}

/* Seat: slot above the name; the label under it comes from data-state (empty
   alt text — the .sr-only span is what a screen reader hears) */
.participant {
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  perspective: 600px;
}

.participant.offline {
  opacity: 0.5;
}

.participant-name {
  max-width: 100%;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.participant::after {
  margin-top: -4px;
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--muted);
}

.participant[data-state="waiting"]::after {
  content: "Waiting" / "";
}

.participant[data-state="voted"]::after {
  content: "Voted" / "";
  color: var(--success);
}

.participant[data-state="offline"]::after {
  content: "Reconnecting" / "";
}

.participant[data-state="none"]::after {
  content: "No vote" / "";
}

/* Slot (5:7): dashed until a vote; the glyph inside is transparent until revealed */
.vote-status {
  width: 84px;
  height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--control);
  border-radius: var(--r-card);
  font-family: var(--font-numerals);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  transition: all var(--t-base);
}

/* Card back: dense ruling and the mark (a voter who dropped offline keeps it) */
.participant.voted .vote-status:not([data-state="revealed"]) {
  border-color: transparent;
  background-color: var(--sheet);
  background-image: repeating-linear-gradient(0deg, var(--tint) 0 1px, transparent 1px 6px);
  box-shadow: var(--lift-1);
}

.participant.voted .vote-status:not([data-state="revealed"])::after {
  content: "";
  width: 52%;
  height: 37%;
  background: var(--cobalt);
  opacity: 0.6;
  -webkit-mask: url("/static/brand/mark-v2.svg") center / contain no-repeat;
  mask: url("/static/brand/mark-v2.svg") center / contain no-repeat;
}

/* Index-card ruling: red line near the top, two pale lines below */
.vote-card,
.vote-status[data-state="revealed"] {
  background-image: linear-gradient(var(--marker-red), var(--marker-red)), linear-gradient(var(--tint), var(--tint)), linear-gradient(var(--tint), var(--tint));
  background-repeat: no-repeat;
  background-size: 100% 2px, 100% 1px, 100% 1px;
  background-position: 0 13px, 0 calc(100% - 14px), 0 calc(100% - 8px);
}

.vote-status[data-state="revealed"] {
  border-color: transparent;
  background-color: var(--sheet);
  box-shadow: var(--lift-2);
  color: var(--cobalt);
}

.vote-status[data-state="revealed"].is-special {
  color: var(--marker-red);
}

@media (prefers-reduced-motion: no-preference) {
  .participant.flip-in .vote-status {
    animation: seat-flip var(--t-flip) var(--ease-out) calc(var(--i, 0) * 60ms) both;
  }

  @keyframes seat-flip {
    from { transform: rotateY(90deg); }
    to { transform: none; }
  }
}

/* 2. Deck: sticky tray at the bottom of the table; top padding for the lifted card */
.voting-section {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: grid;
  gap: var(--s-3);
  margin: auto calc(-1 * var(--s-4)) 0;
  padding: var(--s-4) var(--s-4) 0;
  padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  background: var(--sheet);
  box-shadow: 0 -1px 0 var(--rule), 0 -6px 16px rgb(20 27 61 / 0.06);
}

.deck-title {
  font-size: var(--fs-2);
}

.voting-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
}

/* Index card: paper ringed with --rule, Numerals in cobalt, index from data-value */
.vote-card {
  position: relative;
  width: 68px;
  height: 95px;
  padding: 0;
  border: 0;
  border-radius: var(--r-card);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--cobalt);
  font-family: var(--font-numerals);
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-spring);
}

.vote-card::before {
  content: attr(data-value) / "";
  position: absolute;
  top: 2px;
  left: 6px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
}

.vote-card:hover {
  box-shadow: inset 0 0 0 1px var(--control), var(--lift-1);
  transform: translateY(-3px);
}

.vote-card.is-special {
  color: var(--marker-red);
}

.vote-card.selected {
  background-color: var(--highlighter);
  box-shadow: var(--lift-2);
  color: var(--on-highlighter);
  transform: translateY(-6px) rotate(-1.5deg);
}

.vote-card.selected::before {
  color: var(--on-highlighter);
}

/* 3. Phones: three seat columns, a six-column deck ------------------------- */
@media (max-width: 640px) {
  .participants-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-4) var(--s-2);
  }

  .participant {
    width: auto;
  }

  .vote-status {
    width: 56px;
    height: 78px;
    font-size: 30px;
  }

  .voting-section {
    margin-inline: calc(-1 * var(--s-3));
    padding-top: var(--s-3);
    padding-inline: var(--s-3);
  }

  .voting-cards {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px var(--s-2);
  }

  .vote-card {
    width: auto;
    height: 72px;
    font-size: 26px;
  }
}

@media (max-width: 360px) {
  .voting-cards {
    gap: var(--s-2) 6px;
  }
}

/* 4. Results (§5 «Результат раунда») --------------------------------------- */
/* JS toggles display on the section itself, so the layout lives one level
   down: the Average sticky, then the sheet with Min / Max / Total votes and
   the spread of votes as stacks of mini cards. */
.results-section {
  flex: none;
}

.results-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-5) 28px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.stat-label {
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--muted);
}

.stat-value {
  font-family: var(--font-numerals);
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* The sticky: a rotated yellow note that grows for a wide average (22.7);
   every text on it is on-highlighter */
.stat--primary {
  min-width: 176px;
  height: 160px;
  justify-content: space-between;
  padding: var(--s-4) 18px;
  border-radius: var(--r-note);
  background: var(--highlighter);
  color: var(--on-highlighter);
  box-shadow: var(--lift-2);
  transform: rotate(-2deg);
}

.stat--primary .stat-label {
  font-size: 14px;
  font-weight: 700;
  color: inherit;
}

.stat--primary .stat-value {
  font-size: 80px;
  line-height: 0.85;
}

.results-sheet {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  padding: 20px 28px;
  border-radius: var(--r-sheet);
  background: var(--sheet);
  box-shadow: var(--lift-1);
}

.results-summary {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--s-1) 28px;
  align-content: center;
  align-items: end;
}

/* The spread: one stack per value. --count comes inline from JS; --l1…--l4
   turn 0 or 1 per layer behind the front card (five layers at most). */
.vote-distribution {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px;
  padding-left: var(--s-6);
  border-left: 1px solid var(--rule);
}

.vote-distribution:empty {
  display: none;
}

.vote-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.vote-result::before {
  content: "";
  --l1: clamp(0, var(--count, 1) - 1, 1);
  --l2: clamp(0, var(--count, 1) - 2, 1);
  --l3: clamp(0, var(--count, 1) - 3, 1);
  --l4: clamp(0, var(--count, 1) - 4, 1);
  width: 30px;
  height: 42px;
  margin-bottom: calc((var(--l1) + var(--l2) + var(--l3) + var(--l4)) * 12px);
  border-top: 2px solid var(--marker-red);
  border-radius: 4px;
  background: var(--sheet);
  box-shadow:
    0 0 0 1px var(--rule),
    0 calc(var(--l1) * 12px) 0 0 var(--sheet),
    0 calc(var(--l1) * 12px) 0 1px var(--rule),
    0 calc(var(--l2) * 24px) 0 0 var(--sheet),
    0 calc(var(--l2) * 24px) 0 1px var(--rule),
    0 calc(var(--l3) * 36px) 0 0 var(--sheet),
    0 calc(var(--l3) * 36px) 0 1px var(--rule),
    0 calc(var(--l4) * 48px) 0 0 var(--sheet),
    0 calc(var(--l4) * 48px) 0 1px var(--rule);
}

.vote-result-value {
  font-family: var(--font-numerals);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--cobalt);
}

.vote-result-count {
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--muted);
}

@media (prefers-reduced-motion: no-preference) {
  .results-section {
    animation: results-in var(--t-base) var(--ease-out) both;
  }

  @keyframes results-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
  }
}

@media (max-width: 640px) {
  .results-layout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-4);
  }

  .stat--primary {
    min-width: 104px;
    height: 92px;
    padding: 10px var(--s-3);
  }

  .stat--primary .stat-value {
    font-size: 48px;
  }

  .results-sheet {
    display: contents;
  }

  .results-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-1) var(--s-3);
  }

  .results-summary .stat-value {
    font-size: 28px;
  }

  .vote-distribution {
    grid-column: 1 / -1;
    justify-content: center;
    padding: var(--s-4) 0 0;
    border-left: 0;
    border-top: 1px dashed var(--rule);
  }
}

/* 5. Reduced motion (§6): the flip and the results entrance exist only under
   no-preference; transitions take the tokens, which styles.css collapses to
   0 ms. A card that would jump up on hover stays put instead. */
@media (prefers-reduced-motion: reduce) {
  .vote-card:hover:not(.selected) {
    transform: none;
  }
}