/* Human check (captcha) modal */
@font-face { font-family: "Roboto"; src: url(../font/roboto-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Roboto"; src: url(../font/roboto-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Roboto"; src: url(../font/roboto-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
[hidden].hc-overlay, .hc-overlay [hidden] { display: none !important; }
.hc-overlay{
  --hc-blue:#4a90e2;
  --hc-green:#009e55;
  --hc-ink:#202124;
  --hc-mute:#5f6368;
  --hc-line:#dcdcdc;
  --hc-tile:#c9d0d8;
  position:fixed;inset:0;z-index:2147483000;display:flex;overflow:auto;
  padding:16px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px));
  padding-top:max(16px,env(safe-area-inset-top,0px));padding-bottom:max(16px,env(safe-area-inset-bottom,0px));
  background:rgba(0,0,0,.5);font-family:"Roboto","Helvetica Neue",Arial,sans-serif;color:var(--hc-ink);
  animation:hc-fade .15s ease-out;
}
@keyframes hc-fade{from{opacity:0}to{opacity:1}}
.hc-overlay *{box-sizing:border-box}
.hc-close{
  position:fixed;top:max(12px,env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));
  width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;cursor:pointer;display:grid;place-items:center;z-index:2;
}
.hc-close:hover{background:rgba(255,255,255,.32)}
.hc-close svg{width:22px;height:22px;fill:currentColor}
.hc-overlay button:focus-visible{outline:3px solid var(--hc-blue);outline-offset:2px}
.hc-close:focus-visible{outline-color:#fff}

/* step 1: checkbox card inside a small dialog (304px card + 24px padding each side) */
.hc-gate{margin:auto;width:352px;max-width:100%;background:#fff;border-radius:8px;padding:24px;box-shadow:0 8px 32px rgba(0,0,0,.35)}
.hc-title{margin:0 0 6px;font-size:18px;font-weight:500;line-height:1.3}
.hc-note{margin:0 0 18px;font-size:14px;line-height:1.45;color:var(--hc-mute)}
.hc-cbcard{
  width:304px;max-width:100%;height:78px;background:#f9f9f9;border:1px solid #d3d3d3;border-radius:3px;
  box-shadow:0 0 4px 1px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:space-between;padding:0 12px;
}
.hc-cb{display:flex;align-items:center;gap:12px;background:none;border:0;padding:8px 0;font:400 14px "Roboto",Arial,sans-serif;color:#000;cursor:pointer;text-align:left}
.hc-cbcard[data-state="checked"] .hc-cb{cursor:default}
.hc-box{position:relative;width:24px;height:24px;flex:none;border:2px solid #c1c1c1;border-radius:2px;background:#fff;transition:border-color .15s}
.hc-cbcard[data-state="idle"] .hc-cb:hover .hc-box{border-color:#b2b2b2}
.hc-okmark{position:absolute;left:-4px;top:-4px;width:28px;height:28px;overflow:visible}
.hc-okmark path{fill:none;stroke:var(--hc-green);stroke-width:3;stroke-linecap:square;stroke-dasharray:1;stroke-dashoffset:1}
.hc-cbcard[data-state="checked"] .hc-box{border-color:transparent;background:transparent}
.hc-cbcard[data-state="checked"] .hc-okmark path{animation:hc-draw .32s ease-out forwards}
@keyframes hc-draw{to{stroke-dashoffset:0}}
.hc-brand{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--hc-mute);font-size:10px;letter-spacing:.3px;flex:none}
.hc-brand svg{width:30px;height:30px;fill:var(--hc-blue)}

/* step 2: picture game. 400px wide, 24px header padding, 7px grid padding, 4px tile gap = 126px tiles, 60px footer */
.hc-panel{margin:auto;width:400px;max-width:100%;background:#fff;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,.2);animation:hc-rise .18s ease-out}
@keyframes hc-rise{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.hc-hdr{background:var(--hc-blue);color:#fff;padding:24px}
.hc-lead{font-size:16px;line-height:20px}
.hc-target{font-size:28px;font-weight:700;line-height:34px;text-wrap:balance}
.hc-sub{font-size:14px;line-height:18px}
.hc-gridwrap{padding:7px;background:#fff}
.hc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.hc-tile{position:relative;aspect-ratio:1;padding:0;border:0;background:#fff;overflow:hidden;cursor:pointer;min-width:0}
.hc-tile:focus-visible{outline:3px solid var(--hc-blue);outline-offset:-3px}
.hc-img{position:absolute;inset:0;background:var(--hc-tile);transition:opacity .3s}
.hc-img img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.hc-img img.hc-b{opacity:0}
.hc-img.morph img.hc-b{opacity:1;transition:opacity 2.5s ease-in-out}
.hc-tile.out .hc-img{opacity:0}
.hc-foot{height:60px;border-top:1px solid var(--hc-line);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 10px}
.hc-tools{display:flex;color:#5f6368}
.hc-tools span{width:40px;height:40px;display:grid;place-items:center}
.hc-tools svg{width:24px;height:24px;fill:currentColor}
.hc-verify{height:40px;min-width:96px;padding:0 22px;background:var(--hc-blue);color:#fff;border:0;border-radius:3px;font:500 14px "Roboto",Arial,sans-serif;text-transform:uppercase;letter-spacing:.6px;cursor:pointer}
.hc-verify:hover{background:#4285f4;box-shadow:0 1px 2px rgba(0,0,0,.25)}

@media (prefers-reduced-motion:reduce){
  .hc-overlay,.hc-panel{animation:none}
  .hc-img{transition:none}
  .hc-cbcard[data-state="checked"] .hc-okmark path{animation:none;stroke-dashoffset:0}
}

/* round login button in the nav */
.nav a.login {
	display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; margin-left: .35rem; align-self: center;
	border-radius: 50%; color: #fff; border: 0;
	background: linear-gradient(135deg, var(--magenta), var(--pink));
	box-shadow: 0 6px 18px -6px var(--pink), inset 0 1px 0 rgb(255 255 255 / .25);
	transition: transform .25s, box-shadow .25s;
}
.nav a.login:hover { background: linear-gradient(135deg, var(--magenta), var(--pink)); transform: translateY(-2px) scale(1.06); box-shadow: 0 10px 24px -6px var(--pink); }
.nav a.login svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* keep the site's global heading/section styles out of the modal */
.hc-overlay section { padding: 0; }
.hc-overlay .hc-gate { padding: 24px; }
.hc-overlay .hc-title { font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; font-weight: 500; letter-spacing: 0; }