/* ==========================================================================
   NCA — Vote page
   Built from Figma node 6:232 ("Desktop - 1", 1440x2157) via the local
   Figma Dev Mode MCP server.

   Desktop-first, max-width breakpoints — per DESIGN-SYSTEM.md.
   Breakpoints match global.css: 991 / 767 / 479.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens — values taken directly from the Figma node
   -------------------------------------------------------------------------- */
:root {
  --nca-gold:        #daa12f;
  --nca-card-bg:     #132321;
  --nca-input-bg:    #162826;
  --nca-text:        #efefef;
  --nca-text-muted:  rgba(239, 239, 239, 0.6);
  --nca-placeholder: #a49d8d;
  --nca-white:       #ffffff;
  --nca-black:       #000000;

  --font-display: "Amiri", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* Matches the darkest part of the photo, so nothing can ever flash white. */
  background-color: #0f1c1a;
}

body {
  min-height: 100%;
  font-family: var(--font-body);
  color: var(--nca-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; }

/* --------------------------------------------------------------------------
   Background — always exactly the height of the viewport, on every device
   --------------------------------------------------------------------------
   `position: fixed` + `inset: 0` is used deliberately here, in preference to
   height: 100vh / 100svh / 100dvh:

   - 100vh  on mobile resolves to the LARGEST viewport (toolbars retracted),
            so the image overflows and visibly shifts as the URL bar hides.
   - 100svh resolves to the SMALLEST viewport, so the moment the toolbar
            retracts the viewport grows and a strip of empty page shows
            underneath the image.
   - 100dvh tracks the viewport correctly but resizes the image on every
            toolbar show/hide, causing continuous reflow and repaint while
            scrolling — the jank this is meant to avoid.

   A fixed element with inset: 0 is laid out against the viewport itself, so
   it is always exactly viewport-sized, never resizes mid-scroll, and cannot
   leave a gap. `object-fit: cover` guarantees the photo fills that box at any
   aspect ratio without distortion. The page content scrolls over the top.
   -------------------------------------------------------------------------- */
.page-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;

  /* 24px-wide inline copy of the photo, scaled to cover. It is part of the
     render-blocking stylesheet, so the box is already filled with an
     approximation of the image at first paint — the full JPEG then replaces
     it in place. Without this the page paints flat #0f1c1a and the photo
     snaps in when it finishes decoding, which reads as a flash. */
  background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAJAAAAAD/wgARCAAkABgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAwIEAQUABgcICQoL/8QAwxAAAQMDAgQDBAYEBwYECAZzAQIAAxEEEiEFMRMiEAZBUTIUYXEjB4EgkUIVoVIzsSRiMBbBctFDkjSCCOFTQCVjFzXwk3OiUESyg/EmVDZklHTCYNKEoxhw4idFN2WzVXWklcOF8tNGdoDjR1ZmtAkKGRooKSo4OTpISUpXWFlaZ2hpand4eXqGh4iJipCWl5iZmqClpqeoqaqwtba3uLm6wMTFxsfIycrQ1NXW19jZ2uDk5ebn6Onq8/T19vf4+fr/xAAfAQADAQEBAQEBAQEBAAAAAAABAgADBAUGBwgJCgv/xADDEQACAgEDAwMCAwUCBQIEBIcBAAIRAxASIQQgMUETBTAiMlEUQAYzI2FCFXFSNIFQJJGhQ7EWB2I1U/DRJWDBROFy8ReCYzZwJkVUkiei0ggJChgZGigpKjc4OTpGR0hJSlVWV1hZWmRlZmdoaWpzdHV2d3h5eoCDhIWGh4iJipCTlJWWl5iZmqCjpKWmp6ipqrCys7S1tre4ubrAwsPExcbHyMnK0NPU1dbX2Nna4OLj5OXm5+jp6vLz9PX29/j5+v/bAEMABAQEBAQEBgQEBgkGBgYJDAkJCQkMDwwMDAwMDxIPDw8PDw8SEhISEhISEhUVFRUVFRkZGRkZHBwcHBwcHBwcHP/bAEMBBAUFBwcHDAcHDB0UEBQdHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHf/aAAwDAQACEQMRAAAB8qeDs2QKX0UwsayzV/TT0FV8p6vEdLzHT/RpcNZrvk/sf//aAAgBAQABBQJIaUvFoDAejDRFPMiK3iiiqAOXzIjJMHDrNHqrmqS//9oACAEDEQE/AdIi2PxueQunov4eTT//2gAIAQIRAT8B0kaTv3SrN/tXN5igB//aAAgBAQAGPwL75MSK/wBfy9WIQkJH8ocfm6tEqjy0pGJy/wBvzcizKqlKj1+xoB1GQaq+Sj/Wzjpxf//EADMQAQADAAICAgICAwEBAAACCwERACExQVFhcYGRobHB8NEQ4fEgMEBQYHCAkKCwwNDg/9oACAEBAAE/IQcuHF4Xeb3WFIO1WJF0NCXiSfhR0zFNV29qurizhiwDPOIE9vW1aUALGONcz27VGzgX5K06n+itoCA9Hs/8v//aAAwDAQACEQMRAAAQyTkleB//xAAzEQEBAQADAAECBQUBAQABAQkBABEhMRBBUWEgcfCRgaGx0cHh8TBAUGBwgJCgsMDQ4P/aAAgBAxEBPxDw271GCT82/pT/AHAPLf/aAAgBAhEBPxDxxxFMia9f9H9OPMgFL//aAAgBAQABPxAWAQdWHo2x2kR+auhBPFjSGdUHIUASHdYto2O8gxDyS3Ob0MD4LdLYFDIwIiK8MA+KmDEQ2kakRYRS8I3isIuJkBCDSArEFxAEhImwnY1AQJD3HzG82ciJSGUBRVcf7eb/AP/Z");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.page-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* --------------------------------------------------------------------------
   Header / logo
   Figma: 290x140 at x=65, y=59
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 1;
  padding: 59px 0 0 65px;
}

.site-logo {
  display: block;
  width: 290px;
  height: auto;
}

/* --------------------------------------------------------------------------
   Layout
   Figma: card top = 297; header occupies 59 + 140 = 199 -> 98px gap
   -------------------------------------------------------------------------- */
.page-main {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 98px 24px 96px;
}

/* --------------------------------------------------------------------------
   Vote card — Figma node 6:234
   -------------------------------------------------------------------------- */
.vote-card {
  width: 668px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  background: var(--nca-card-bg);
  border: 1px solid var(--nca-gold);
  border-radius: 12px;
}

.vote-card__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

/* Badge — node 6:236 */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 16px 4px 8px;
  background: var(--nca-card-bg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 32px;
  -webkit-backdrop-filter: blur(24.273px);
  backdrop-filter: blur(24.273px);
}

.badge svg {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
}

.badge__label {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--nca-white);
  white-space: nowrap;
}

/* Title — node 6:240 */
.vote-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 72px;
  line-height: 66px;
  letter-spacing: -2.88px;
  text-align: center;
  color: var(--nca-gold);
}

.vote-title em {
  display: block;
  font-style: italic;
}

/* Subtitle — node 6:241 */
.vote-subtitle {
  margin: 0;
  padding: 0 16px;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: var(--nca-text);
  /* Even out the line lengths whenever this wraps, instead of leaving a
     long first line and a short orphan second line. */
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Form — node 6:242
   -------------------------------------------------------------------------- */
.vote-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 24px;
  border-radius: 12px;
}

.vote-fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.field label {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  text-align: center;
  color: var(--nca-white);
}

.field input {
  width: 100%;
  height: 44px;
  padding: 8px 8px 8px 20px;
  font-family: inherit;
  font-size: 16px;   /* 16px minimum prevents iOS Safari zooming on focus */
  line-height: 24px;
  text-align: center;
  color: var(--nca-white);
  background: var(--nca-input-bg);
  border: 1px solid transparent;
  border-radius: 0;
  appearance: none;
}

.field input::placeholder {
  color: var(--nca-placeholder);
  opacity: 1;
}

.field input:focus-visible {
  outline: none;
  border-color: var(--nca-gold);
  box-shadow: 0 0 0 2px rgba(218, 161, 47, 0.35);
}

/* Web3Forms honeypot — must stay in the DOM but never be seen or focusable. */
.hp-field {
  display: none !important;
}

/* Note — node 6:252. 8px is the Figma value; see README note on legibility. */
.vote-note {
  margin: 0;
  font-size: 8px;
  line-height: 24px;
  color: var(--nca-text-muted);
}

/* Button — node 6:253 */
.btn-submit {
  width: 224px;
  max-width: 100%;
  height: 40px;
  padding: 8px 20px;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  text-align: center;
  color: var(--nca-black);
  background: var(--nca-gold);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-submit:hover { background: #c8912a; }
.btn-submit:active { background: #b88426; }

.btn-submit:focus-visible {
  outline: 2px solid var(--nca-white);
  outline-offset: 2px;
}

.vote-status {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  color: var(--nca-text);
}

/* --------------------------------------------------------------------------
   Submitting / submitted state
   -------------------------------------------------------------------------- */

/* The UA `hidden` attribute loses to the display rules above, so enforce it. */
[hidden] { display: none !important; }

.vote-card--busy { justify-content: center; }

.vote-state {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  padding: 24px;
  text-align: center;
}

/* Spinner — colours as supplied; --size drives every dimension so it can be
   scaled per breakpoint from one number. */
.loader {
  --color-1: #a2a1a1;
  --color-2: #c5a033;
  --size: 1px;

  box-sizing: border-box;
  display: inline-block;
  width: calc(48 * var(--size));
  height: calc(48 * var(--size));
  border: calc(5 * var(--size)) solid var(--color-1);
  border-bottom-color: var(--color-2);
  border-radius: 50%;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.vote-thanks {
  margin: 0;
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.18;
  color: var(--color-thanks, #a2a1a1);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Tablet — <= 991px
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .site-header { padding: 40px 0 0 32px; }
  .site-logo   { width: 230px; }
  .page-main   { padding: 64px 24px 80px; }

  .vote-title {
    font-size: 56px;
    line-height: 54px;
    letter-spacing: -2px;
  }

  .loader { --size: 0.92px; }
  .vote-thanks { font-size: 34px; }
}

/* --------------------------------------------------------------------------
   Mobile landscape — <= 767px
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .site-header { padding: 28px 0 0 24px; }
  .site-logo   { width: 190px; }
  .page-main   { padding: 48px 16px 64px; }

  .vote-card { gap: 20px; }
  .vote-card__body { padding: 20px 16px; }

  .vote-title {
    font-size: 46px;
    line-height: 46px;
    letter-spacing: -1.4px;
  }

  .vote-subtitle {
    font-size: 15px;
    line-height: 22px;
    padding: 0 8px;
  }

  .vote-state { gap: 20px; padding: 20px 16px; }
  .loader { --size: 0.85px; }
  .vote-thanks { font-size: 30px; }
}

/* --------------------------------------------------------------------------
   Mobile portrait — <= 479px  (the primary target: ~99% of traffic)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 479px) {
  .site-header { padding: 20px 0 0 16px; }
  .site-logo   { width: 155px; }
  .page-main   { padding: 32px 16px 56px; }

  .vote-card { gap: 16px; padding: 16px 0; }
  .vote-card__intro { gap: 12px; }
  .vote-card__body { padding: 16px 14px; gap: 10px; }
  .vote-fields { gap: 18px; }

  .vote-title {
    font-size: 36px;
    line-height: 36px;
    letter-spacing: -1px;
  }

  .vote-subtitle {
    font-size: 14px;
    line-height: 21px;
    padding: 0;
  }

  .field { gap: 8px; }

  /* Full-width tap target on phones; the 224px cap applies from 480px up. */
  .btn-submit { width: 100%; height: 44px; }

  .vote-state { gap: 16px; padding: 16px 14px; }
  .loader { --size: 0.75px; }
  .vote-thanks { font-size: 26px; }
}

/* --------------------------------------------------------------------------
   Accessibility / preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *:not(.loader) { transition: none !important; animation: none !important; }

  /* The spinner is a progress indicator, not decoration — a frozen ring reads
     as broken. Keep it turning, just slower and more gently. */
  .loader { animation-duration: 2.4s; }
}