/* ============================================================
   ReferIt · Welcome + Gate
   One welcome door (Ticket Punch) over the board. The three
   DESIGN DIRECTIONS live on the board itself, not here.
   Not real security: a soft lock so the board is not casually
   browsable by anyone holding the URL.
   ============================================================ */

:root{
  --g-ink:#111111;
  --g-paper:#FFFFFF;
  --g-paper-2:#F1F2EF;
  --g-accent:#C4F82A;
  --g-accent-deep:#4E6B00;
  --g-muted:#57564e;
  --g-line:#d9dad4;
}

/* Board stays inert underneath until unlocked */
body.locked .toolbar,
body.locked .layers,
body.locked .layers-reveal,
body.locked .viewport,
body.locked .present{ visibility:hidden; }

.gate{
  position:fixed; inset:0; z-index:200;
  overflow-y:auto; overflow-x:hidden;
  background:var(--g-paper);
  color:var(--g-ink);
  font-family:'Space Grotesk','Inter',-apple-system,sans-serif;
  user-select:none;
}
.gate[hidden]{ display:none; }
.gate.leaving{ opacity:0; transition:opacity .42s ease; pointer-events:none; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.gv{ display:flex; min-height:100dvh; }

/* ---------- Shared form atoms ---------- */
.gate-form{ display:flex; flex-direction:column; gap:12px; }
.gate-input{
  width:100%;
  font-family:'Space Mono',ui-monospace,monospace;
  font-size:16px;              /* 16px+ so iOS Safari never auto-zooms */
  letter-spacing:.14em;
  color:var(--g-ink);
  background:var(--g-paper-2);
  border:1.5px solid var(--g-ink);
  border-radius:0;
  padding:16px;
  user-select:text;
  -webkit-appearance:none; appearance:none;
}
.gate-input::placeholder{ color:#9b9a91; letter-spacing:.14em; }
.gate-input:focus{ outline:none; box-shadow:inset 0 0 0 3px var(--g-accent); }
.gate-btn{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:15px; font-weight:700; letter-spacing:.02em;
  color:var(--g-ink); background:var(--g-accent);
  border:1.5px solid var(--g-ink); border-radius:0;
  padding:16px 18px; cursor:pointer;
  transition:transform .1s ease, background .16s ease;
}
.gate-btn:hover{ background:#d3ff45; }
.gate-btn:active{ transform:translateY(1px); }
.gate-btn:focus-visible{ outline:3px solid var(--g-accent-deep); outline-offset:2px; }
.gate-error{
  font-family:'Space Mono',ui-monospace,monospace;
  font-size:12px; letter-spacing:.04em;
  color:#b23a00; min-height:16px; padding-top:2px;
}
.shake{ animation:gate-shake .34s cubic-bezier(.36,.07,.19,.97); }
@keyframes gate-shake{
  10%,90%{ transform:translateX(-2px) }
  20%,80%{ transform:translateX(4px) }
  30%,50%,70%{ transform:translateX(-7px) }
  40%,60%{ transform:translateX(7px) }
}

/* ============================================================
   01 · TICKET PUNCH   (ticket counter: paper, physical, loud)
   Signature: the perforated ticket stub holding the code.
   ============================================================ */
.gv-ticket{
  align-items:center; justify-content:center;
  padding:64px 24px 112px;
  position:relative;
}
.gv-ticket::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(17,17,17,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,17,17,.045) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 42%, #000 0%, transparent 72%);
  mask-image:radial-gradient(circle at 50% 42%, #000 0%, transparent 72%);
  pointer-events:none;
}
.tk-inner{
  position:relative; width:100%; max-width:520px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.gate-brand{
  display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--g-muted); margin-bottom:34px;
}
.gate-brand svg{ display:block; color:var(--g-ink); }
.gate-stamp{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Space Mono',ui-monospace,monospace;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  background:var(--g-accent); color:var(--g-ink);
  border:1.5px solid var(--g-ink);
  padding:6px 12px; margin-bottom:22px;
}
.gv-ticket h1{
  font-size:clamp(34px,7.2vw,52px); line-height:1.02;
  letter-spacing:-.035em; font-weight:700; margin-bottom:18px;
}
.gv-ticket h1 .hl{
  background:linear-gradient(to bottom,
    transparent 52%, var(--g-accent) 52%, var(--g-accent) 88%, transparent 88%);
  padding:0 4px;
}
.gv-ticket .lede{
  font-size:16px; line-height:1.6; color:var(--g-muted);
  max-width:44ch; text-wrap:balance; margin-bottom:38px;
}
.ticket{
  position:relative; width:100%;
  background:var(--g-paper); border:1.5px solid var(--g-ink);
  padding:30px 26px 24px; text-align:left;
}
.ticket::before,.ticket::after{
  content:""; position:absolute; top:50%; width:22px; height:22px;
  background:var(--g-paper); border:1.5px solid var(--g-ink);
  border-radius:50%; transform:translateY(-50%);
}
.ticket::before{ left:-12px; clip-path:inset(0 0 0 50%); }
.ticket::after{ right:-12px; clip-path:inset(0 50% 0 0); }
.ticket-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin-bottom:20px;
}
.ticket-label,.ticket-serial{
  font-family:'Space Mono',ui-monospace,monospace;
  font-size:11px; letter-spacing:.14em; color:var(--g-muted);
}
.ticket-label{ text-transform:uppercase; }
.ticket-serial{ letter-spacing:.08em; }
.ticket-foot{
  margin-top:24px; padding-top:18px;
  border-top:1.5px dashed var(--g-line);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.ticket-foot span{
  font-family:'Space Mono',ui-monospace,monospace;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--g-muted);
}
.barcode{ display:flex; align-items:flex-end; gap:2px; height:20px; }
.barcode i{ display:block; width:2px; background:var(--g-ink); }
.gv-ticket .foot{ margin-top:30px; font-size:12.5px; color:var(--g-muted); }

@media (prefers-reduced-motion:reduce){
  .gate.leaving{ transition:none; }
  .shake{ animation:none; }
}