/* ==========================================================================
   VERTEXIX — Feature survey
   Built on the site's style.css: the same tokens (colours, radii, soft-UI
   shadows), the page-intro / topic-nav / video-topic sections of the Videos
   page. Only what the survey adds is here: idea cards, votes, the form.
   ========================================================================== */

.survey-stats {
  margin: calc(-1 * var(--space-sm)) 0 var(--space-lg);
  color: var(--text-muted);
  font-size: 0.95rem;
}

.survey-stats strong {
  color: var(--accent-dark);
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   Messages
   -------------------------------------------------------------------------- */
.notice {
  max-width: 720px;
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--surface-white);
  box-shadow: 4px 4px 10px var(--shadow-dark), -4px -4px 10px var(--shadow-light);
  border-left: 4px solid var(--accent);
  font-size: 0.95rem;
  text-align: left;
}

.page-intro .notice {
  margin: 0 auto var(--space-lg);
}

.notice--error {
  border-left-color: #d14343;
}

.notice ul {
  list-style: disc;
  padding-left: 1.2em;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Ranked ideas
   -------------------------------------------------------------------------- */
.ideas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}

.idea {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--surface-white);
  box-shadow: 8px 8px 20px var(--shadow-dark), -8px -8px 20px var(--shadow-light);
}

.idea__rank {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.idea--top .idea__rank {
  color: #fff;
  background: linear-gradient(145deg, var(--accent), var(--accent-dark));
  box-shadow: 0 6px 14px rgba(109, 40, 217, 0.3);
}

.idea__body {
  min-width: 0;
}

.idea__section {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.idea__text {
  overflow-wrap: anywhere;
}

.idea__meta {
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--text-subtle);
}

.idea__tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
}

.idea__tag--pending {
  background: rgba(209, 140, 30, 0.14);
  color: #94600f;
}

.idea__vote {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 84px;
}

.idea__count {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}

.idea__unit {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.vote-btn {
  margin-top: 6px;
  padding: 7px 18px;
  border: none;
  border-radius: var(--radius-full);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--accent-dark);
  background: var(--surface);
  box-shadow: 4px 4px 10px var(--shadow-dark), -4px -4px 10px var(--shadow-light);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.vote-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.vote-btn:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 2px;
}

.vote-btn:disabled {
  cursor: default;
  color: var(--text-subtle);
  box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light);
}

.vote-btn.is-voted {
  color: #fff;
  background: linear-gradient(145deg, var(--accent), var(--accent-dark));
  box-shadow: none;
}

/* "Voted" turns into "Take back" under the mouse (or keyboard focus): pressing it again removes the vote. */
.vote-btn__off {
  display: none;
}

.vote-btn.is-voted:hover .vote-btn__on,
.vote-btn.is-voted:focus-visible .vote-btn__on {
  display: none;
}

.vote-btn.is-voted:hover .vote-btn__off,
.vote-btn.is-voted:focus-visible .vote-btn__off {
  display: inline;
}

.vote-btn.is-voted:hover,
.vote-btn.is-voted:focus-visible {
  background: linear-gradient(145deg, #8b6fd6, #6a4fb8);
}

/* Shipped / Not planned: the label where the button was. */
.idea__closed {
  margin-top: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
}

.idea--done {
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   An area's list: sort buttons and pages
   -------------------------------------------------------------------------- */
.section-ideas {
  scroll-margin-top: 90px;
  transition: opacity var(--dur) var(--ease);
}

.section-ideas.is-loading {
  opacity: 0.5;
}

.list-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.list-tools__label {
  margin-right: 4px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.sort-pill {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  box-shadow: 3px 3px 8px var(--shadow-dark), -3px -3px 8px var(--shadow-light);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.sort-pill:hover {
  color: var(--accent-dark);
  transform: translateY(-1px);
}

.sort-pill.is-on {
  color: #fff;
  background: linear-gradient(145deg, var(--accent), var(--accent-dark));
  box-shadow: 0 6px 14px rgba(109, 40, 217, 0.25);
}

.list-tools__count {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--text-subtle);
}

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-md);
}

.pager__num,
.pager__step {
  min-width: 2.4em;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  box-shadow: 3px 3px 8px var(--shadow-dark), -3px -3px 8px var(--shadow-light);
}

a.pager__num:hover,
a.pager__step:hover {
  color: var(--accent-dark);
}

.pager__num.is-on {
  color: #fff;
  background: linear-gradient(145deg, var(--accent), var(--accent-dark));
  box-shadow: none;
}

.pager__step.is-off {
  opacity: 0.45;
  box-shadow: none;
}

.pager__gap {
  color: var(--text-subtle);
}

/* --------------------------------------------------------------------------
   Comments on votes
   -------------------------------------------------------------------------- */
.comments {
  margin-top: 8px;
}

.comments > summary {
  display: inline-block;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--accent-dark);
}

.comments__list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.comment {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border-left: 3px solid var(--shadow-dark);
}

.comment--mine {
  border-left-color: var(--accent);
}

.comment__text {
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.comment__meta {
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--text-subtle);
}

.vote-comment {
  margin-top: 8px;
}

.vote-comment > summary {
  display: inline-block;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--accent-dark);
}

.comment-form {
  margin-top: 8px;
}

.comment-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 0.92rem;
  color: var(--text);
  background: var(--bg);
  box-shadow: inset 3px 3px 7px var(--shadow-dark), inset -3px -3px 7px var(--shadow-light);
  resize: vertical;
}

.comment-form textarea:focus {
  outline: 3px solid var(--accent-soft);
  outline-offset: 1px;
}

.comment-form__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-top: 6px;
}

.comment-form__row .field__help {
  margin: 0;
}

.comment-form__buttons {
  display: flex;
  gap: var(--space-xs);
}

/* The site's .btn is display: inline-flex, which beats the browser's own [hidden] rule: Remove
   showed with no comment to remove. */
.comment-form__buttons .btn[hidden] {
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Status labels (planned / in progress / shipped / not planned)
   -------------------------------------------------------------------------- */
.progress {
  display: inline-block;
  padding: 1px 9px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.progress--planned { background: rgba(48, 120, 220, 0.13); color: #1f5fb8; }
.progress--in_progress { background: rgba(209, 140, 30, 0.16); color: #8a5a0c; }
.progress--shipped { background: rgba(34, 160, 90, 0.15); color: #1d7a47; }
.progress--declined { background: rgba(120, 120, 140, 0.18); color: #555b6b; }

.progress__note {
  color: var(--text-muted);
  font-weight: 600;
}

.ideas-done > summary {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   "Is it one of these?" -- similar ideas while typing
   -------------------------------------------------------------------------- */
.similar {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
}

.similar__head {
  margin-bottom: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent-dark);
}

.similar__list {
  display: grid;
  gap: 8px;
}

.similar__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-white);
  font-size: 0.9rem;
}

.idea__vote--mini {
  grid-auto-flow: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.idea__vote--mini .idea__count {
  font-size: 1.05rem;
}

.idea__vote--mini .vote-btn {
  margin-top: 0;
  padding: 5px 14px;
}

/* --------------------------------------------------------------------------
   "Which edition do you use?"
   -------------------------------------------------------------------------- */
.edition-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs) var(--space-sm);
  margin: 0 auto var(--space-lg);
  font-size: 0.9rem;
  color: var(--text-muted);
}

.edition-pick label {
  font-weight: 600;
}

.edition-pick select,
.field select {
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius-full);
  font: inherit;
  color: var(--text);
  background: var(--bg);
  box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
}

.field select {
  border-radius: var(--radius-md);
  padding: 11px 14px;
}

.edition-pick.is-live .edition-pick__save {
  display: none;
}

.edition-pick__done {
  min-width: 4em;
  font-weight: 600;
  color: #1d7a47;
}

.field--pair {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
}

/* --------------------------------------------------------------------------
   Privacy and "Your data" pages
   -------------------------------------------------------------------------- */
.survey-prose .container {
  max-width: 820px;
}

.survey-prose h2 {
  font-size: 1.25rem;
  margin: var(--space-lg) 0 var(--space-xs);
}

.survey-prose h2:first-child {
  margin-top: 0;
}

.survey-prose p,
.survey-prose li {
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

.survey-prose ul {
  list-style: disc;
  padding-left: 1.3em;
}

.survey-prose a:not(.btn) {
  color: var(--accent-dark);
  font-weight: 600;
}

.survey-prose code {
  font-size: 0.88em;
}

.survey-list {
  list-style: none !important;
  padding-left: 0 !important;
  display: grid;
  gap: var(--space-sm);
}

.survey-list li {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--surface-white);
  color: var(--text);
}

.survey-back {
  margin-top: var(--space-lg);
}

.ideas-empty {
  padding: var(--space-md) 0;
  color: var(--text-muted);
}

.ideas-more {
  margin-top: var(--space-sm);
}

.ideas-more > summary {
  display: inline-block;
  margin-bottom: var(--space-sm);
  cursor: pointer;
  font-weight: 600;
  color: var(--accent-dark);
}

/* --------------------------------------------------------------------------
   "Suggest an idea" form
   -------------------------------------------------------------------------- */
.suggest {
  margin-top: var(--space-lg);
}

.suggest > summary {
  list-style: none;
}

.suggest > summary::-webkit-details-marker {
  display: none;
}

.suggest[open] > summary {
  margin-bottom: var(--space-md);
}

.suggest__form {
  max-width: 760px;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--surface-white);
  box-shadow: 8px 8px 20px var(--shadow-dark), -8px -8px 20px var(--shadow-light);
}

.field {
  margin-bottom: var(--space-md);
}

.field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.95rem;
}

.field__req {
  color: var(--accent);
}

.field__opt {
  font-weight: 500;
  color: var(--text-subtle);
}

.field input[type="text"],
.field input[type="email"],
.field textarea,
.admin-filters input,
.admin-filters select {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: var(--radius-md);
  font: inherit;
  color: var(--text);
  background: var(--bg);
  box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
}

.field textarea {
  resize: vertical;
  min-height: 3.2em;
}

.field input:focus,
.field textarea:focus,
.admin-filters input:focus,
.admin-filters select:focus {
  outline: 3px solid var(--accent-soft);
  outline-offset: 1px;
}

.field__help {
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* the field only bots fill in */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.captcha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.captcha__img {
  width: 180px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.field--captcha input {
  max-width: 220px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.suggest__privacy {
  margin-bottom: var(--space-md);
  font-size: 0.8rem;
  color: var(--text-subtle);
}

/* --------------------------------------------------------------------------
   Vote toast
   -------------------------------------------------------------------------- */
.survey-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 200;
  max-width: calc(100% - 32px);
  padding: 12px 22px;
  border-radius: var(--radius-full);
  background: var(--text);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 10px 24px rgba(31, 36, 48, 0.3);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}

.survey-toast.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
}

.survey-toast--error {
  background: #b23636;
}

@media (max-width: 640px) {
  .idea {
    grid-template-columns: auto 1fr;
    padding: var(--space-sm) var(--space-md);
  }

  .idea__vote {
    grid-column: 1 / -1;
    grid-auto-flow: column;
    align-items: center;
    justify-content: end;
    gap: 8px;
  }

  .vote-btn {
    margin-top: 0;
  }

  .suggest__form {
    padding: var(--space-md);
  }

  .field--pair {
    grid-template-columns: 1fr;
  }

  .similar__item {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------
   Admin pages
   -------------------------------------------------------------------------- */
.admin-page {
  padding: var(--space-lg) 0 var(--space-xl);
}

.admin-page h1 {
  font-size: 1.8rem;
  margin-bottom: var(--space-sm);
}

.admin-page h2 {
  font-size: 1.15rem;
  margin: var(--space-lg) 0 var(--space-sm);
}

.admin-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}

.admin-tiles a,
.admin-tiles span {
  padding: 8px 14px;
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: 4px 4px 10px var(--shadow-dark), -4px -4px 10px var(--shadow-light);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.admin-tiles a.is-on {
  color: #fff;
  background: linear-gradient(145deg, var(--accent), var(--accent-dark));
}

.admin-tiles strong {
  color: var(--accent-dark);
}

.admin-tiles a.is-on strong {
  color: #fff;
}

.admin-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-md);
}

.admin-filters input,
.admin-filters select {
  width: auto;
  padding: 9px 14px;
}

.admin-filters input[type="search"] {
  min-width: 240px;
}

.admin-filters input[type="text"] {
  min-width: 340px;
}

.admin-card {
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--surface-white);
  box-shadow: 8px 8px 20px var(--shadow-dark), -8px -8px 20px var(--shadow-light);
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.admin-table th,
.admin-table td {
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

.admin-table th {
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.admin-table tr[data-href] {
  cursor: pointer;
}

.admin-table tr[data-href]:hover td {
  background: var(--accent-soft);
}

.admin-table td.num {
  text-align: right;
  font-weight: 700;
}

.admin-table a {
  color: var(--accent-dark);
  font-weight: 600;
}

.status {
  display: inline-block;
  padding: 1px 9px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
}

.status--visible { background: rgba(34, 160, 90, 0.14); color: #1d7a47; }
.status--pending { background: rgba(209, 140, 30, 0.14); color: #94600f; }
.status--hidden  { background: rgba(120, 120, 140, 0.18); color: #555b6b; }

.admin-dl {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 8px 16px;
  font-size: 0.92rem;
}

.admin-dl dt {
  font-weight: 600;
  color: var(--text-muted);
}

.admin-dl dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-dl a {
  color: var(--accent-dark);
  font-weight: 600;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.admin-actions form {
  margin: 0;
}

.admin-actions--tight {
  gap: 6px;
  margin-top: 6px;
}

.admin-actions--tight .btn--sm {
  padding: 5px 12px;
  font-size: 0.78rem;
}

.btn--danger {
  color: #fff;
  background: linear-gradient(145deg, #d14343, #a82e2e);
}

.admin-count {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: #d18c1e;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  text-align: center;
}

.admin-pager {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

@media (max-width: 640px) {
  .admin-dl {
    grid-template-columns: 1fr;
  }
}