/* ── Access-key gate (variant A) ───────────────────────────────
   Branded full-screen lock. Styles only; logic in gate.js. */

html.cl-pending body{visibility:hidden;}

.cl-gate{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(1100px 600px at 50% -10%, oklch(0.96 0.025 256), transparent 62%),
    oklch(0.985 0.004 260);
  font-family:'IBM Plex Sans', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}

.cl-card{
  width:100%; max-width:420px;
  background:#fff; border:1px solid oklch(0.915 0.008 262);
  border-radius:18px;
  box-shadow:0 1px 2px oklch(0.4 0.02 262 / .05), 0 30px 60px -30px oklch(0.4 0.02 262 / .35);
  padding:34px 30px 28px;
}
@media (prefers-reduced-motion:no-preference){
  .cl-card{animation:cl-rise .28s cubic-bezier(.32,.72,.28,1);}
  @keyframes cl-rise{from{opacity:0; transform:translateY(10px);}to{opacity:1; transform:none;}}
}

.cl-brand{
  display:flex; align-items:center; gap:9px;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:oklch(0.45 0.16 256); margin-bottom:22px;
}
.cl-brand .dot{width:9px; height:9px; border-radius:50%; background:oklch(0.55 0.16 256);}

.cl-lock{
  width:46px; height:46px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  background:oklch(0.965 0.025 256); color:oklch(0.45 0.16 256);
  margin-bottom:18px;
}
.cl-lock svg{width:22px; height:22px;}

.cl-card h1{
  font-size:23px; font-weight:600; letter-spacing:-.01em;
  margin:0 0 8px; color:oklch(0.26 0.018 262);
}
.cl-card p.cl-sub{
  font-size:14.5px; line-height:1.55; color:oklch(0.47 0.02 262);
  margin:0 0 22px;
}

.cl-field{display:flex; flex-direction:column; gap:8px;}
.cl-field label{
  font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:oklch(0.62 0.016 262);
}
.cl-input{
  width:100%; font-family:'IBM Plex Mono', monospace; font-size:15.5px;
  color:oklch(0.26 0.018 262);
  padding:13px 14px; border:1.5px solid oklch(0.9 0.01 262); border-radius:11px;
  background:oklch(0.985 0.004 260); outline:none;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.cl-input::placeholder{color:oklch(0.72 0.012 262); letter-spacing:.02em;}
.cl-input:focus{
  border-color:oklch(0.55 0.16 256); background:#fff;
  box-shadow:0 0 0 4px oklch(0.55 0.16 256 / .12);
}
.cl-gate.err .cl-input{
  border-color:oklch(0.6 0.18 25); box-shadow:0 0 0 4px oklch(0.6 0.18 25 / .12);
  animation:cl-shake .32s;
}
@keyframes cl-shake{
  0%,100%{transform:translateX(0);} 20%,60%{transform:translateX(-6px);} 40%,80%{transform:translateX(6px);}
}

.cl-err{
  font-size:13px; color:oklch(0.52 0.18 25); margin:10px 2px 0;
  min-height:18px; display:flex; align-items:center; gap:7px;
}
.cl-err svg{width:14px; height:14px; flex-shrink:0;}

.cl-btn{
  width:100%; margin-top:18px;
  font-family:'IBM Plex Sans', sans-serif; font-size:15px; font-weight:600;
  color:#fff; background:oklch(0.55 0.16 256);
  border:none; border-radius:11px; padding:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:9px;
  transition:background .15s, transform .06s;
}
.cl-btn:hover{background:oklch(0.5 0.16 256);}
.cl-btn:active{transform:translateY(1px);}
.cl-btn svg{width:16px; height:16px;}

.cl-foot{
  margin-top:22px; padding-top:18px; border-top:1px solid oklch(0.93 0.006 262);
  font-size:13.5px; color:oklch(0.47 0.02 262); line-height:1.5;
}
.cl-foot a{color:oklch(0.45 0.16 256); font-weight:600; text-decoration:none;}
.cl-foot a:hover{text-decoration:underline;}
.cl-links{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.cl-chip{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:600; color:oklch(0.45 0.16 256);
  background:oklch(0.965 0.025 256); border:1px solid oklch(0.9 0.03 256);
  padding:8px 13px; border-radius:9px; text-decoration:none;
  transition:background .15s, border-color .15s;
}
.cl-chip:hover{background:oklch(0.94 0.035 256); border-color:oklch(0.82 0.06 256);}
.cl-chip svg{width:15px; height:15px;}

html.cl-locked{overflow:hidden;}
html.cl-locked body{overflow:hidden;}

@media (max-width:520px){
  .cl-card{padding:28px 22px 24px; border-radius:16px;}
  .cl-card h1{font-size:21px;}
}