/* ==========================================================================
   estimato — polls: the Polls tab (rows on the wall), the poll modal (vote,
   actions, results, voters) and the New poll modal.
   Source of truth: docs/design/planning-wall.md (§2 colour, §4 grid,
   §5 components, §6 motion); visual reference: mockup A «Стена».
   Loaded after styles.css, which owns tokens, buttons, fields, the modal frame
   and `.polls-tab-content` (the room-scroll-css contract keeps it there).
   Class names are the app.js contract: `.poll-card.closed[data-poll-id]`,
   `.poll-card-status.active/.closed`, `.poll-vote-card.selected/.disabled`,
   `.poll-choice-option.selected/.disabled`, `.poll-type-btn.active`;
   `#pollDetailStatus` and `#pollVoteIndicator` get their className rewritten.
   No animation is declared here; every transition takes its duration from the
   motion tokens, and the `reduce` block closes the file.

   1. Polls tab: header, list, empty state
   2. Poll rows and the status pill
   3. Poll modal: frame, status, progress, vote indicator
   4. The vote: index cards and options
   5. Actions
   6. Results and voters
   7. New poll modal
   8. Phones
   9. Reduced motion
   ========================================================================== */

/* 1. Polls tab -------------------------------------------------------------- */
.polls-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.polls-title {
  font-size: var(--fs-3);
  line-height: 1.3;
}

.polls-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* Empty state: a dashed slot on the wall, like a seat waiting for its card */
.polls-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  max-width: var(--form-max);
  margin: var(--s-5) auto;
  padding: var(--s-6) var(--s-5);
  border: 2px dashed var(--control);
  border-radius: var(--r-sheet);
  text-align: center;
}

.polls-empty-title {
  font-size: var(--fs-3);
  font-weight: 700;
  line-height: 1.3;
}

.polls-empty-text {
  max-width: 38ch;
  color: var(--muted);
}

.polls-empty .btn {
  margin-top: var(--s-2);
}

/* 2. Poll rows -------------------------------------------------------------- */
/* A row on the wall: a sheet with the red margin line of an index card; the
   row itself is the keyboard target (role="button", tabindex="0"). Closed
   polls keep the row, lose the red line and fade the title. */
.poll-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-5);
  border-radius: 12px;
  background-color: var(--sheet);
  background-image: linear-gradient(var(--marker-red), var(--marker-red));
  background-repeat: no-repeat;
  background-size: 2px 100%;
  background-position: 12px 0;
  box-shadow: var(--lift-1);
  cursor: pointer;
  transition: box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}

.poll-card:hover {
  box-shadow: var(--lift-2);
  transform: translateY(-2px);
}

.poll-card.closed {
  background-image: linear-gradient(var(--rule), var(--rule));
}

.poll-card.closed .poll-card-title {
  color: var(--muted);
}

.poll-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}

.poll-card-title {
  min-width: 0;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Meta: type, votes, age — separated by space, not by glyphs */
.poll-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--muted);
}

.poll-card-meta span:empty {
  display: none;
}

/* Status pill, in the row and in the modal; the text stays lowercase in the
   DOM (active / closed) and is capitalised here */
.poll-card-status,
.poll-detail-status {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-1);
  font-weight: 700;
  line-height: 1;
  text-transform: capitalize;
  white-space: nowrap;
}

.poll-card-status.active,
.poll-detail-status.active {
  background: var(--tint);
  color: var(--cobalt);
}

.poll-card-status.closed,
.poll-detail-status.closed {
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--muted);
}

/* 3. Poll modal ------------------------------------------------------------- */
.modal .modal-content.modal-medium {
  max-width: 560px;
}

.modal .modal-content.modal-small {
  max-width: 480px;
}

/* Status pill, then "N voted" and the voter chips, in one wrapping row */
.poll-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-bottom: var(--s-5);
}

.poll-detail-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--muted);
}

.voter-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.voter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--cobalt);
  font-size: var(--fs-1);
  font-weight: 600;
}

/* "You voted: 5" is marked with the highlighter; "not voted yet" stays muted */
.poll-vote-indicator {
  margin-bottom: var(--s-4);
  font-weight: 600;
  color: var(--muted);
}

.poll-vote-indicator.voted {
  display: inline-block;
  padding: 0 var(--s-1);
  background-image: linear-gradient(var(--highlighter), var(--highlighter));
  background-repeat: no-repeat;
  background-size: 100% 0.35em;
  background-position: 0 72%;
  color: var(--ink);
}

/* 4. The vote --------------------------------------------------------------- */
.poll-voting-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

/* Index card, as in the deck (styles.css .vote-card): paper ringed with --rule,
   the red line and two ruling lines, Numerals in cobalt, the value as a small
   index in the corner. Pressed = the yellow sticky. 56×78 (5:7), the seat size. */
.poll-vote-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 78px;
  padding: 0;
  border: 0;
  border-radius: var(--r-card);
  background-color: var(--paper);
  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 11px, 0 calc(100% - 12px), 0 calc(100% - 7px);
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--cobalt);
  font-family: var(--font-numerals);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-spring),
    transform var(--t-fast) var(--ease-spring);
}

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

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

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

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

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

/* A closed poll keeps the cards for reference: flat and faded, your pick still yellow */
.poll-vote-card:disabled {
  cursor: default;
  opacity: 0.55;
}

.poll-vote-card.selected:disabled {
  opacity: 1;
  box-shadow: var(--lift-1);
  transform: none;
}

/* Options of a choice poll: full-width rows with a radio mark; the chosen one
   sits on the tint with a cobalt ring (a yellow block this wide is not allowed) */
.poll-choice-options {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.poll-choice-option {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 48px;
  padding: var(--s-2) var(--s-4);
  border: 0;
  border-radius: var(--r-control);
  background: var(--sheet);
  box-shadow: inset 0 0 0 1px var(--control);
  color: var(--ink);
  font-size: var(--fs-2);
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}

.poll-choice-option:hover:not(:disabled) {
  box-shadow: inset 0 0 0 1px var(--cobalt);
}

.poll-choice-option.selected {
  background: var(--tint);
  box-shadow: inset 0 0 0 2px var(--cobalt);
  font-weight: 700;
}

.poll-choice-option:disabled {
  cursor: default;
  opacity: 0.55;
}

.poll-choice-option.selected:disabled {
  opacity: 1;
}

.poll-choice-radio {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--control);
  border-radius: 50%;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}

.poll-choice-option.selected .poll-choice-radio {
  border-color: var(--cobalt);
  background: var(--cobalt);
}

.poll-choice-option.selected .poll-choice-radio::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--on-cobalt);
}

.poll-choice-label {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 5. Actions ---------------------------------------------------------------- */
.poll-vote-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

/* Delete is the last, quiet action: an outlined red button, not a red block */
.poll-vote-actions .btn-danger {
  margin-left: auto;
  background: transparent;
  color: var(--marker-red);
  box-shadow: inset 0 0 0 1px var(--marker-red);
}

.poll-vote-actions .btn-danger:hover:not(:disabled) {
  background: var(--marker-red);
  color: var(--on-cobalt);
  box-shadow: none;
}

/* 6. Results and voters ----------------------------------------------------- */
.poll-results-area {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px dashed var(--rule);
}

.poll-results-heading {
  margin-bottom: var(--s-4);
}

.poll-results-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  margin-bottom: var(--s-5);
}

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

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

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

/* Distribution: one grid for every row, so the labels share a column that
   fits the longest value (capped at 40%) and the bars start on one line */
.poll-results-chart {
  display: grid;
  grid-template-columns: fit-content(40%) minmax(0, 1fr);
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-bottom: var(--s-5);
}

.poll-chart-row {
  display: contents;
}

.poll-chart-label {
  min-width: 0;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

.poll-chart-bar-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2);
}

.poll-chart-bar {
  height: 20px;
  min-width: 4px;
  border-radius: 3px;
  background: var(--cobalt);
  transition: width var(--t-base) var(--ease-out);
}

.poll-chart-count {
  font-size: var(--fs-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

.poll-voters-heading {
  margin-bottom: var(--s-2);
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--muted);
}

/* Voters: the answer column fits its content, capped at 60% of the row, so a
   Numeral never breaks while a long choice wraps instead of pushing the dialog */
.poll-voter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) fit-content(60%);
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--rule);
}

.poll-voter-row:last-child {
  border-bottom: 0;
}

.poll-voter-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.poll-voter-value {
  min-width: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--cobalt);
  overflow-wrap: anywhere;
}

/* 7. New poll modal --------------------------------------------------------- */
/* A caption for a group of controls, same as `.form-group label` (styles.css) */
.form-label {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

/* Poll type: a segmented control like the room tabs, on the paper track */
.poll-type-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-1);
  padding: var(--s-1);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.poll-type-btn {
  min-height: 44px;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.poll-type-btn:hover {
  color: var(--cobalt);
}

.poll-type-btn.active {
  background: var(--tint);
  color: var(--cobalt);
  font-weight: 700;
}

/* Option fields are `.form-group input` (styles.css); the list stacks them */
.choice-options-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.choice-options-list + .btn {
  align-self: flex-start;
}

/* 8. Phones ----------------------------------------------------------------- */
@media (max-width: 640px) {
  .poll-card {
    padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5);
  }

  .polls-empty {
    margin: var(--s-4) 0;
    padding: var(--s-5) var(--s-4);
  }

  /* the cards fill the sheet in two rows of six, like the deck tray */
  .poll-voting-cards {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px var(--s-2);
  }

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

  .poll-vote-actions .btn {
    flex: 1 1 auto;
  }

  .poll-vote-actions .btn-danger {
    margin-left: 0;
  }

  .poll-results-stats {
    gap: var(--s-3) var(--s-5);
  }
}

/* 9. Reduced motion (§6): no animation above; transitions take --t-fast /
   --t-base, which styles.css collapses to 0 ms. Hover no longer lifts. */
@media (prefers-reduced-motion: reduce) {
  .poll-card:hover,
  .poll-vote-card:hover:not(:disabled) {
    transform: none;
  }
}