/* ============================================================================
   Trang tạo bình chọn — Phase 2..6 của MASTER-PLAN-vote-create-redesign.md

   Mọi rule ở đây đều nằm dưới `.vc`. Không rule nào chạm tới trang bỏ phiếu,
   trang kết quả, trang khoá hay dashboard (§1.5).
   Mọi khoảng cách lấy từ --s1..--s6, mọi cỡ chữ từ --t-*, mọi transition dùng
   var(--dur) var(--ease) — trừ hai ngoại lệ §3.3 (dòng vào 260ms, panel 280ms).

   ĐI LỆCH CÓ CHỦ Ý khỏi acceptance của §3.3 ("không còn px nào ngoài thang"):
   vài padding/gap nhỏ giữ nguyên số của prototype (2/3/4/5/6/7/9px) vì chính
   prototype dùng những số đó, và §0 quy định "prototype thắng" khi mâu thuẫn.
   Chúng là khoảng đệm quanh icon và vùng chạm, dưới bậc nhỏ nhất của thang
   (--s1 = 8px); ép lên 8px sẽ làm nút xoá và chevron lệch khỏi bản vẽ.
   Mọi khoảng cách ở tầm bố cục đều dùng thang.
   ========================================================================= */

.vc {
  background: var(--bg);
  color: var(--ink);
  font-size: var(--t-body);
  line-height: 1.5;
}

/* ---------- Khung: một cột, khối chính ở 38.2% chiều cao (§4.2) ---------- */

.vc-stage {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 var(--s3);
}

/* 0.618 trên, 1 dưới ⇒ tâm quang học ở 0.618/1.618 = 38.2% */
.vc-pad-top {
  flex: 0.618 1 0;
  min-height: var(--s4);
}

.vc-pad-bottom {
  flex: 1 1 0;
  min-height: var(--s5);
}

/* Header, main và footer dùng chung đúng một container. Bản cũ để header căn
   theo viewport còn nội dung căn theo cột hẹp — hai hệ lưới cãi nhau (§4.1). */
.vc-col,
.vc-head,
.vc-foot {
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
}

/* ---------- Header (§4.3) ---------- */

.vc-head {
  padding: var(--s3) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vc-mark {
  display: flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}

.vc-head-link {
  font-size: var(--t-body);
  color: var(--ink-2);
  text-decoration: none;
  padding: 6px 2px;
  transition: color var(--dur) var(--ease);
}

.vc-head-link:hover {
  color: var(--ink);
}

/* ---------- Footer (§4.4) ---------- */

.vc-foot {
  padding: var(--s3) 0 var(--s4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  font-size: var(--t-cap);
  color: var(--ink-3);
  flex-wrap: wrap;
}

.vc-foot p {
  margin: 0;
}

.vc-foot a {
  color: inherit;
  text-decoration: none;
}

.vc-foot a:hover {
  color: var(--ink-2);
}

/* ---------- Thẻ nhập liệu (§5) ---------- */

.vc-sheet {
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--r-sheet);
  box-shadow: var(--shadow);
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.vc-sheet:focus-within {
  border-color: var(--line-2);
}

.vc-q-wrap {
  padding: var(--s4) var(--s4) var(--s3);
}

.vc-q {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  resize: none;
  overflow: hidden;
  font-family: inherit;
  font-size: var(--t-q);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.22;
  padding: 0;
  margin: 0;
  color: var(--ink);
  caret-color: var(--accent);
}

/* Placeholder giữ weight 600 để khớp cỡ chữ thật -- nếu nhẹ hơn, ô trống trông
   như cỡ chữ khác với ô đã gõ. */
.vc-q::placeholder {
  color: var(--ink-3);
  font-weight: 600;
}

.vc-q:focus {
  outline: none;
}

.vc-q-count {
  display: block;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-top: var(--s1);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.vc-q-count.on {
  opacity: 1;
}

.vc-q-count.warn {
  color: var(--accent);
}

/* ---------- Dòng lựa chọn (§5.2) ---------- */

/* Không viền quanh từng ô: chỉ hairline phân cách. Bản cũ lồng hộp trong hộp. */
.vc-rows {
  border-top: 1px solid var(--line);
}

.vc-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 0 var(--s4);
  height: 52px;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}

.vc-row:last-child {
  border-bottom: 0;
  border-radius: 0 0 var(--r-sheet) var(--r-sheet);
}

.vc-row:focus-within {
  background: var(--fill);
}

/* Vòng tròn giống hệt thứ người bỏ phiếu sẽ thấy: form chính là bản xem
   trước, nên không cần màn hình preview riêng. */
.vc-ring {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  display: grid;
  place-items: center;
  transition:
    border-color var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

.vc-row:focus-within .vc-ring {
  border-color: var(--accent);
}

.vc-row.is-add .vc-ring {
  border-style: dashed;
  opacity: 0.7;
}

.vc-ring svg {
  width: 9px;
  height: 9px;
  stroke: var(--ink-3);
  stroke-width: 2;
  opacity: 0;
}

.vc-row.is-add .vc-ring svg {
  opacity: 1;
}

.vc-row-in {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--t-opt);
  letter-spacing: -0.01em;
  color: var(--ink);
  caret-color: var(--accent);
}

.vc-row-in::placeholder {
  color: var(--ink-3);
}

.vc-row-in:focus {
  outline: none;
}

.vc-row-x {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 0;
  background: none;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  color: var(--ink-3);
  cursor: pointer;
  /* Hiện sẵn, không đợi hover: trên desktop nút này gần như vô hình nên không
     ai biết là có thể xoá một lựa chọn. Chỉ xuất hiện khi .can-remove, tức là
     khi còn nhiều hơn số lựa chọn tối thiểu — bấm mới có tác dụng thật. */
  opacity: 0;
  pointer-events: none;
  transition:
    color var(--dur) var(--ease),
    background var(--dur) var(--ease);
  transition:
    opacity var(--dur) var(--ease),
    color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.vc-row-x svg {
  width: 11px;
  height: 11px;
  stroke: currentcolor;
  stroke-width: 1.8;
}

.vc-row.can-remove .vc-row-x {
  opacity: 1;
  pointer-events: auto;
}

.vc-row-x:hover {
  color: var(--ink);
  background: var(--fill);
}

@keyframes vc-row-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* Ngoại lệ §3.3: 260ms cho dòng mới vào. */
.vc-row.enter {
  animation: vc-row-in 260ms var(--ease) both;
}

/* ---------- Gợi ý bàn phím (§5.5) ---------- */

/* Dạy hai hành vi vừa thay thế cho hai cái nút, đúng lúc người dùng đang
   thao tác, rồi biến mất khi họ chỉ đang nhìn. */
.vc-hint {
  /* Prototype để mono 11px, và §0 nói prototype thắng — nhưng nó vẽ bằng IBM
     Plex Mono, thứ CLAUDE.md cấm nạp. Rơi về mono hệ thống (SF Mono/Menlo) thì
     một CÂU VĂN giữa trang chữ tỉ lệ trông như đoạn code, và đó chính là chỗ
     lệch font dễ thấy nhất trang. Đổi về font chung, 13px cho khớp thang chữ —
     cũng là điều §3.2 của chính dự án này yêu cầu: mono chỉ dành cho dữ liệu
     thật (bộ đếm, mã poll), không dành cho nhãn hay câu văn. */
  font-size: var(--t-cap);
  color: var(--ink-3);
  text-align: center;
  margin-top: var(--s2);
  min-height: 16px;
  opacity: 0;
  transition: opacity 240ms var(--ease);
}

.vc-sheet:focus-within + .vc-hint {
  opacity: 1;
}

/* ---------- Panel tuỳ chọn (§7) ---------- */

.vc-more {
  margin-top: var(--s3);
}

.vc-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--t-body);
  color: var(--ink-2);
  padding: 5px 2px;
  transition: color var(--dur) var(--ease);
}

.vc-more-btn:hover {
  color: var(--ink);
}

.vc-more-btn svg {
  width: 11px;
  height: 11px;
  stroke: currentcolor;
  stroke-width: 1.9;
  transition: transform 240ms var(--ease);
}

.vc-more-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* 0fr → 1fr: mở mượt mà không cần JS đo chiều cao. */
.vc-more-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms var(--ease);
}

.vc-more-panel.open {
  grid-template-rows: 1fr;
}

.vc-more-inner {
  overflow: hidden;
}

.vc-more-body {
  margin-top: var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--fill);
  border-radius: var(--r-ctl);
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 220ms var(--ease) 40ms,
    transform 220ms var(--ease) 40ms;
}

.vc-more-panel.open .vc-more-body {
  opacity: 1;
  transform: none;
}

.vc-opt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) 0;
}

.vc-opt-row + .vc-opt-row {
  border-top: 1px solid var(--line);
}

.vc-opt-label {
  font-size: var(--t-body);
  color: var(--ink);
}

.vc-opt-sub {
  display: block;
  font-size: var(--t-cap);
  color: var(--ink-2);
  margin-top: 2px;
}

/* Track vẽ bằng ::before chứ không phải nền của chính nút. Nhờ vậy chiều cao
   vùng chạm phóng lên 44px trên cảm ứng mà track vẫn đúng 42x25 của bản vẽ —
   nếu để nền trên nút thì phóng vùng chạm sẽ phình luôn cả track. */
.vc-switch {
  flex: 0 0 auto;
  width: 42px;
  height: 25px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: none;
  position: relative;
}

.vc-switch::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -12.5px;
  width: 42px;
  height: 25px;
  border-radius: 99px;
  background: var(--line-2);
  transition: background var(--dur) var(--ease);
}

.vc-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -10px;
  left: 2.5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--switch-knob);
  box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
  transition: transform 220ms var(--ease);
}

.vc-switch[aria-checked="true"]::before {
  background: var(--accent);
}

.vc-switch[aria-checked="true"]::after {
  transform: translateX(17px);
}

/* Mọi control bên phải dùng chung một hộp: cùng chiều cao, cùng bo góc, cùng
   chữ. Trước đây select cao 34px còn ô mật khẩu 32px, và hai select rộng 162
   với 142 nên mép phải răng cưa — đó là thứ khiến bảng này trông "khác font"
   dù font-family/size tính ra đã giống nhau. Thủ phạm thật là appearance:auto:
   macOS vẽ widget riêng của nó, bezel và mũi tên stepper và tất cả. */
.vc-pick,
.vc-secret {
  appearance: none;
  box-sizing: border-box;
  height: var(--ctl-h);
  font-family: inherit;
  font-size: var(--t-body);
  line-height: normal;
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 0 9px;
  cursor: pointer;
}

/* Một bề rộng chung cho cả ba hàng, nên mép phải thẳng hàng: select chiếm trọn
   --ctl-w, còn ô mật khẩu chừa chỗ cho nút con mắt (4px gap + 26px nút). */
.vc-pick-wrap {
  flex: 0 0 auto;
  position: relative;
  display: block;
  width: var(--ctl-w);
}

.vc-pick {
  width: 100%;
  /* chừa chỗ cho mũi tên vẽ bằng ::after */
  padding-right: 28px;
}

/* Mũi tên chevron-down của Lucide, vẽ bằng mask + currentColor để tự đúng màu
   ở cả hai theme (quy ước icon của repo). background-image data-URI sẽ phải
   viết cứng một mã màu và sai ở theme còn lại. */
.vc-pick-wrap::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -4px;
  width: 11px;
  height: 8px;
  pointer-events: none;
  background-color: var(--ink-2);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m1.5 2.5 4.5 4 4.5-4"/></svg>')
    center / contain no-repeat;
}

.vc-secret-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: var(--ctl-w);
}

/* Ô nhập co giãn, nút con mắt thì không: trên cảm ứng nút phóng lên 44px và
   nếu nó cũng co được thì flex sẽ bóp nó còn 40px, phá đúng cái ngưỡng 44pt mà
   bản phóng to sinh ra để đạt (§9). */
.vc-secret {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  cursor: text;
}

.vc-secret:focus,
.vc-pick:focus {
  outline: none;
  border-color: var(--accent);
}

.vc-eye {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 0;
  background: none;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  color: var(--ink-3);
  cursor: pointer;
  transition:
    color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.vc-eye:hover {
  color: var(--ink);
  background: var(--sheet);
}

.vc-eye svg {
  width: 15px;
  height: 15px;
  stroke: currentcolor;
  stroke-width: 1.8;
  fill: none;
}

/* ---------- Nút chính (§8.1) ---------- */

.vc-cta {
  display: block;
  width: 100%;
  height: 52px;
  margin-top: var(--s4);
  border: 0;
  border-radius: var(--r-ctl);
  font-family: inherit;
  font-size: 16px;
  font-weight: 550;
  letter-spacing: -0.01em;
  /* Disabled: nhạt và không đổ bóng. Bản cũ dùng xám đậm nguyên khối, biến
     thứ chưa dùng được thành vật thể nặng nhất trang. */
  background: var(--fill);
  color: var(--ink-3);
  cursor: default;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform 120ms var(--ease);
}

.vc-cta.ready {
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  box-shadow: var(--shadow-accent);
}

.vc-cta.ready:hover {
  background: var(--accent-2);
}

.vc-cta.ready:active {
  transform: translateY(1px);
}

.vc-assure {
  margin: var(--s2) 0 0;
  text-align: center;
  font-size: var(--t-cap);
  color: var(--ink-3);
}

.vc-error {
  margin: var(--s2) 0 0;
  text-align: center;
  font-size: var(--t-cap);
  color: var(--accent);
}

.vc-error[hidden] {
  display: none;
}

/* ---------- Focus: một quy tắc duy nhất cho cả trang (§9) ---------- */

.vc :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Mobile (§4.5) ---------- */

@media (max-width: 680px) {
  .vc {
    --t-q: 26px;
    --s4: 21px;
    /* Nút con mắt rộng 44px thay vì 26px, nên hộp chung phải nới thêm chừng
       ấy — không thì ô mật khẩu hẹp lại và nuốt mất placeholder. */
    --ctl-w: 200px;
  }

  .vc-stage {
    padding: 0 16px;
  }

  .vc-q-wrap {
    padding: var(--s3) var(--s3) var(--s2);
  }

  .vc-row {
    padding: 0 var(--s3);
    height: 50px;
  }

  .vc-more-body {
    padding: var(--s3);
  }

  .vc-opt-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s1);
  }

  /* Con của .vc-opt-row bây giờ là .vc-pick-wrap chứ không phải .vc-pick —
     align-self phải đặt lên chính flex item. */
  .vc-opt-row .vc-switch,
  .vc-opt-row .vc-pick-wrap,
  .vc-opt-row .vc-secret-wrap {
    align-self: flex-start;
  }

  /* Mọi target chạm ≥44px (§9). */
  .vc-row-x,
  .vc-eye {
    width: 44px;
    height: 44px;
  }

  /* Ô nhập chỉ cao bằng dòng chữ (20px) nhưng nằm giữa hàng 50px, nên chạm
     vào phần trên/dưới của hàng không focus được. Cho ô cao bằng cả hàng. */
  .vc-row-in {
    align-self: stretch;
    height: auto;
  }

  .vc-switch {
    height: 44px;
  }

  .vc-pick,
  .vc-secret {
    min-height: 44px;
  }

  .vc-more-btn,
  .vc-head-link {
    min-height: 44px;
  }

  .vc-lang > * {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vc *,
  .vc *::before,
  .vc *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}