/* /vote is always dark and gold, to match chantwise.com, which links here. */
:root .v-page.cw-practice {
  --p-bg: #0a0a0f;
  --p-ink: #f8f3eb;
  --p-body: #b8b0a5;
  --p-muted: #b8b0a5;
  --p-gold: #d4a84b;
  --p-gold-ink: #f0cf8a;
  --p-line: rgba(228, 184, 91, .15);
  --p-btn: #d4a84b;
  --p-btn-ink: #0a0a0f;
  --p-card: #1a1a24;
  --p-card-line: rgba(228, 184, 91, .15);
  --p-card-strong: rgba(228, 184, 91, .3);
  --p-card-shadow: none;
  --p-focus: #d4a84b;
  --p-field: #12121a;
  --p-ring: rgba(212, 168, 75, .22);
  --p-err: #e08a78;
  --p-font-display: 'Cormorant Garamond', Georgia, serif;
  --v-card-bg: linear-gradient(160deg, #1a1a24 0%, #242430 100%);
}
:root[data-theme]:has(body.v-page) {
  background: radial-gradient(110% 50% at 50% 0%, rgba(212, 168, 75, .09) 0%, rgba(212, 168, 75, 0) 70%) no-repeat, #0a0a0f;
}
body.v-page { max-width: 560px; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
.v-main { display: flex; flex-direction: column; gap: 14px; }

.v-head { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; text-align: center; }
.v-lbl { color: var(--p-gold); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.v-h { font: 700 clamp(30px, 8vw, 38px)/1.1 var(--p-font-display); color: var(--p-ink); text-wrap: balance; }
.v-sub { color: var(--p-body); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.v-left { color: var(--p-gold-ink); font-size: 15px; font-weight: 600; text-align: center; }
.v-status { color: var(--p-body); font-size: 14px; text-align: center; }
.v-err { color: var(--p-err); font-size: 14px; line-height: 1.45; text-align: center; }
.v-err[hidden], .v-share[hidden], .v-other[hidden], .v-lead[hidden] { display: none; }
.v-foot { color: var(--p-muted); font-size: 13px; text-align: center; overflow-wrap: anywhere; }
.v-foot:empty { display: none; }

.v-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.v-row {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; align-items: center;
  min-height: 64px; padding: 10px 10px 10px 16px; border-radius: 12px;
  border: 1px solid var(--p-card-line); background: var(--v-card-bg);
  scroll-margin: 24px; transition: border-color .2s;
}
.v-row.is-selected { border-color: var(--p-gold); box-shadow: 0 0 0 3px var(--p-ring); }
.v-fill {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(228, 184, 91, .22), rgba(228, 184, 91, .07));
  transform: scaleX(0); transform-origin: left; transition: transform .6s ease;
}
@media (prefers-reduced-motion: reduce) { .v-fill { transition: none; } }
.v-info, .v-ctl, .v-other { position: relative; }
.v-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.v-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--p-ink); overflow-wrap: anywhere; }
.v-row[data-option="other"] .v-name { color: var(--p-muted); font-weight: 500; }
.v-lead {
  padding: 2px 8px; border-radius: 20px;
  background: var(--p-gold); color: #0a0a0f;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.v-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 13px; line-height: 1.35; }
.v-meta:not(:has(span:not(:empty))) { display: none; }
.v-meta span:empty { display: none; }
.v-count { color: var(--p-gold-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.v-yours { color: var(--p-body); }
.v-ctl { display: flex; align-items: center; gap: 6px; }
.v-step {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 22px;
  border: 1px solid var(--p-card-strong); background: rgba(10, 10, 15, .4); color: var(--p-gold-ink);
  font: 500 22px/1 var(--p-font-body); cursor: pointer; transition: background .2s, color .2s;
}
.v-step.v-plus { background: var(--p-btn); border-color: var(--p-btn); color: var(--p-btn-ink); }
.v-step:disabled { opacity: .3; cursor: default; }

.v-other { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; margin: 2px 6px 4px 0; }
.v-label { font-size: 13.5px; font-weight: 500; color: var(--p-body); }
.v-input {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--p-card-strong); background: var(--p-field); color: var(--p-ink);
  font: 400 16px/1.4 var(--p-font-body);
}
.v-input::placeholder { color: #8a8378; }
.v-input:focus { outline: none; border-color: var(--p-gold); box-shadow: 0 0 0 3px var(--p-ring); }

.v-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px;
  padding: 12px 16px; border-radius: 12px; border: 1px solid var(--p-card-strong); background: none;
  color: var(--p-gold-ink); font: 600 15px/1.2 var(--p-font-body); text-align: center; text-decoration: none; cursor: pointer;
}
.v-btn.v-primary, .v-other .v-btn { background: var(--p-btn); border-color: var(--p-btn); color: var(--p-btn-ink); }
.v-btn:disabled { opacity: .4; cursor: default; }

.v-share {
  display: flex; flex-direction: column; gap: 10px; padding: 20px 16px 16px; border-radius: 14px;
  border: 1px solid var(--p-card-strong); background: var(--v-card-bg);
}
.v-share-h { font: 700 24px/1.2 var(--p-font-display); color: var(--p-ink); text-align: center; }
.v-linkrow {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 4px 4px 4px 14px; border-radius: 10px; border: 1px solid var(--p-line); background: var(--p-field);
  color: var(--p-body); font-size: 14px;
}
.v-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.v-copy {
  flex: none; min-height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: none;
  color: var(--p-gold-ink); font: 600 14px var(--p-font-body); cursor: pointer;
}