/* Reader survey widget: shared by /subscribed/ and the members-only /survey/ page.
   Expects the page's .ys tokens (--ys-ink, --ys-tint, ...). */
/* ---------- Built-in reader survey (posts to the Google Form behind the scenes) ---------- */
.ys-sv-intro { margin-bottom: 1.25rem !important; }
.ys-sv [hidden] { display: none !important; }  /* theme button/input rules would otherwise override [hidden] */
.ys-sv {
  background: #fff; border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
  border-radius: 14px; padding: 1.25rem 1.25rem 1.4rem; margin-bottom: 1.1rem;
}
.ys-sv__top { display: flex; align-items: center; gap: 0.75rem; min-height: 1.6rem; font-size: 0.82rem; }
.ys-sv__back { flex: 0 0 auto; white-space: nowrap; background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--ys-muted); cursor: pointer; }
.ys-sv__back:hover { color: var(--ys-ink); }
.ys-sv__group { min-width: 0; line-height: 1.3; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ys-accent-ink); }
.ys-sv__count { margin-left: auto; white-space: nowrap; flex: 0 0 auto; color: var(--ys-muted); font-variant-numeric: tabular-nums; }
.ys-sv__bar { height: 4px; border-radius: 4px; background: var(--ys-line); margin: 0.6rem 0 1.25rem; overflow: hidden; }
.ys-sv__bar span { display: block; height: 100%; width: 0; background: var(--color-accent); border-radius: 4px; transition: width .35s ease; }

.ys-sv__q { font-size: 1.15rem; font-weight: 700; line-height: 1.35; color: var(--ys-ink); margin: 0 0 0.35rem !important; }
.ys-sv__help { font-size: 0.92rem; color: var(--ys-muted); margin: 0 0 0.9rem !important; white-space: pre-line; }
.ys-sv__opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; margin-top: 0.9rem; }
.ys-sv__opt {
  display: flex; align-items: flex-start; gap: 0.7rem; width: 100%;
  text-align: left; font: inherit; font-size: 0.98rem; line-height: 1.4; color: var(--ys-ink);
  white-space: normal;  /* theme buttons are nowrap; long answers must wrap */
  background: #fff; border: 1px solid var(--ys-line); border-radius: 10px;
  padding: 0.75rem 0.9rem; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ys-sv__opt:hover { border-color: var(--color-accent); }
.ys-sv__opt::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px;
  border: 2px solid var(--color-mid-grey); border-radius: 50%; box-sizing: border-box;
}
.ys-sv__opt[data-multi]::before { border-radius: 5px; }
.ys-sv__opt[aria-pressed="true"] { border-color: var(--color-accent); background: var(--ys-tint); }
.ys-sv__opt[aria-pressed="true"]::before {
  border-color: var(--color-accent);
  background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.ys-sv__opt[disabled] { opacity: 0.45; cursor: not-allowed; }
.ys-sv__other { margin-top: 0.5rem; }
.ys-sv input[type=text], .ys-sv input[type=email], .ys-sv textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; color: var(--ys-ink);
  border: 1px solid var(--ys-line); border-radius: 10px; padding: 0.75rem 0.9rem; background: #fff;
}
.ys-sv textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.ys-sv input:focus, .ys-sv textarea:focus, .ys-sv__opt:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: transparent; }
.ys-sv__field { margin-top: 0.9rem; }
.ys-sv__field label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--ys-ink); margin-bottom: 0.35rem; }

.ys-sv__foot { display: flex; align-items: center; gap: 1rem; margin-top: 1.1rem; }
.ys-sv__hint { font-size: 0.88rem; color: var(--ys-muted); }
.ys-sv__next {
  margin-left: auto; padding: 0.7rem 1.4rem; border: 0; border-radius: 999px;
  background: var(--color-accent); color: #fff; font: inherit; font-weight: 600; font-size: 0.98rem; cursor: pointer;
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
.ys-sv__next:hover:not([disabled]) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.14); }
.ys-sv__next[disabled] { opacity: 0.4; cursor: not-allowed; }

.ys-sv__done { text-align: center; padding: 1rem 0.5rem 0.5rem; }
.ys-sv__done-mark {
  width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 0.9rem; display: grid; place-items: center;
  background: color-mix(in srgb, var(--ys-green) 12%, #fff); color: var(--ys-green);
}
.ys-sv__done-mark svg { width: 24px; height: 24px; }
.ys-sv__done h3 { font-size: 1.25rem; margin-bottom: 0.4rem; }
.ys-sv__done p { color: var(--ys-muted); }
.ys-sv__error { color: #b42318; font-size: 0.92rem; margin-top: 0.75rem !important; }

@media (max-width: 600px) {
  .ys-sv { padding: 1rem 0.9rem 1.1rem; margin-left: -0.25rem; margin-right: -0.25rem; }
}