/* Farm Index — waitlist campaign modal.
   Layout follows the quest-board pattern common to Galxe / Zealy / Layer3:
   a locked identity step, then a vertical task list where each row is
   (icon, label, reward, action), then a referral block and a points summary. */

.wl-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(34, 24, 16, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: wl-fade .18s ease-out;
}
@keyframes wl-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes wl-rise { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

.wl-modal {
  width: min(560px, 100%);
  /* Anchored to the top of the scrollable backdrop. Vertical auto margins
     would centre it and clip the header whenever the panel is taller than
     the viewport, which it is on most laptops. */
  margin: 0 auto;
  background: var(--paper);
  border: 4px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  animation: wl-rise .2s ease-out;
}

/* --- header ------------------------------------------------------------ */

.wl-head {
  position: relative;
  padding: 16px 16px 14px;
  background: linear-gradient(#6d9638, #4a7a2a);
  border-bottom: 4px solid var(--ink);
  color: var(--paper);
}
.wl-eyebrow { font: 900 8px/1 "Courier New", monospace; letter-spacing: 2px; opacity: .9; }
.wl-title { margin: 7px 0 0; font: 900 clamp(15px, 4vw, 20px)/1.15 "Courier New", monospace; letter-spacing: 1px; text-shadow: 2px 2px 0 var(--ink); }
.wl-sub { margin: 7px 0 0; font: 10px/1.55 Arial, sans-serif; opacity: .95; max-width: 44ch; }
.wl-close {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px;
  border: 3px solid var(--ink);
  background: var(--paper); color: var(--ink);
  font: 900 13px/1 "Courier New", monospace;
  cursor: pointer;
}
.wl-close:hover { background: var(--gold); }

/* --- score strip ------------------------------------------------------- */

.wl-score {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 4px solid var(--ink);
  background: var(--paper-2);
}
.wl-score div { padding: 11px 8px; text-align: center; border-right: 2px solid rgba(47, 33, 23, .18); }
.wl-score div:last-child { border-right: 0; }
.wl-score span { display: block; font: 900 7px/1 "Courier New", monospace; letter-spacing: 1.2px; color: #6b5a45; }
.wl-score strong { display: block; margin-top: 6px; font: 900 16px/1 "Courier New", monospace; color: var(--ink); }
.wl-score .wl-pending { font-size: 11px; color: #8a7a63; }

.wl-body { padding: 14px 16px 16px; }

/* --- generic section --------------------------------------------------- */

.wl-section + .wl-section { margin-top: 16px; }
.wl-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.wl-section-head h4 { margin: 0; font: 900 10px/1 "Courier New", monospace; letter-spacing: 1.2px; }
.wl-section-head small { font: 900 8px/1 "Courier New", monospace; color: #7d6c55; }

/* --- wallet step ------------------------------------------------------- */

.wl-addr-row { display: flex; gap: 8px; flex-wrap: wrap; }
.wl-input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 11px 10px;
  border: 3px solid var(--ink);
  background: #fffdf6;
  font: 700 11px/1 "Courier New", monospace;
  color: var(--ink);
}
.wl-input::placeholder { color: #a8977d; }
.wl-input.is-bad { border-color: var(--red); background: #fff1f2; }

.wl-btn {
  padding: 11px 13px;
  border: 3px solid var(--ink);
  background: var(--gold);
  color: var(--ink);
  font: 900 10px/1 "Courier New", monospace;
  letter-spacing: .6px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  white-space: nowrap;
}
.wl-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.04); }
.wl-btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.wl-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: 3px 3px 0 rgba(47, 33, 23, .35); }
.wl-btn.wl-primary { background: var(--grass); color: #fff; text-shadow: 1px 1px 0 var(--ink); }
.wl-btn.wl-ghost { background: var(--paper); }
.wl-btn.wl-block { width: 100%; text-align: center; margin-top: 12px; padding: 13px; font-size: 11px; }

.wl-hint { margin: 8px 0 0; font: 10px/1.5 Arial, sans-serif; color: #6b5a45; }
.wl-hint.wl-bad { color: var(--red); font-weight: 700; }

/* --- task list --------------------------------------------------------- */

.wl-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wl-task {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 3px solid var(--ink);
  background: #fffdf6;
}
.wl-task.is-done { background: #eef8e4; border-color: #3f6f23; }
.wl-task.is-locked { opacity: .5; }

.wl-check {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 3px solid var(--ink);
  background: var(--paper-2);
  font: 900 12px/1 "Courier New", monospace;
}
.wl-task.is-done .wl-check { background: var(--grass); color: #fff; border-color: #3f6f23; }

.wl-task-copy strong { display: block; font: 900 10px/1.3 "Courier New", monospace; letter-spacing: .4px; }
.wl-task-copy small { display: block; margin-top: 4px; font: 10px/1.4 Arial, sans-serif; color: #6b5a45; }
.wl-pts { font: 900 9px/1 "Courier New", monospace; color: #3f6f23; white-space: nowrap; }
.wl-task-action { display: flex; align-items: center; gap: 7px; }

/* --- referral ---------------------------------------------------------- */

.wl-ref-box { border: 3px solid var(--ink); background: #fffdf6; padding: 11px; }
.wl-ref-link {
  display: block;
  width: 100%;
  padding: 9px 8px;
  border: 2px dashed var(--muted);
  background: var(--paper-2);
  font: 700 10px/1.4 "Courier New", monospace;
  word-break: break-all;
  color: var(--ink);
}
.wl-ref-actions { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.wl-ref-actions .wl-btn { flex: 1 1 130px; text-align: center; }
.wl-ref-stats { display: flex; gap: 10px; margin-top: 10px; font: 900 9px/1 "Courier New", monospace; color: #6b5a45; }
.wl-ref-stats b { color: var(--ink); }

/* --- progress ---------------------------------------------------------- */

.wl-track { height: 14px; border: 3px solid var(--ink); background: var(--paper-2); overflow: hidden; }
.wl-track span { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--grass) 0 8px, #6aa032 8px 16px); transition: width .25s ease-out; }

/* --- disclosure -------------------------------------------------------- */

.wl-note {
  margin-top: 14px;
  padding: 10px;
  border: 2px solid var(--muted);
  background: #fdf6e6;
  font: 10px/1.55 Arial, sans-serif;
  color: #6b5a45;
}
.wl-note b { color: var(--ink); }

/* --- launcher button --------------------------------------------------- */

.wl-launcher {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 90;
  padding: 12px 14px;
  border: 3px solid var(--ink);
  background: var(--gold);
  color: var(--ink);
  font: 900 10px/1 "Courier New", monospace;
  letter-spacing: .8px;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
}
.wl-launcher:hover { transform: translateY(-1px); }

@media (max-width: 560px) {
  .wl-task { grid-template-columns: 26px 1fr; }
  .wl-task-action { grid-column: 1 / -1; justify-content: flex-end; }
  .wl-score strong { font-size: 13px; }
  .wl-launcher { right: 10px; bottom: 10px; padding: 10px 11px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .wl-backdrop, .wl-modal { animation: none; }
  .wl-btn:hover, .wl-launcher:hover { transform: none; }
}