/* Researcher verification gate, design D (owner's pick, Oct 1). Component: src/components/ResearcherGate.tsx.
   Loaded only while the gate shows. Colors and type from DESIGN.md (gold #d4ab5b, ink #f7f3ea, Inter). */
html:has(body.pp-gated), body.pp-gated { overflow: hidden !important; }

.pp-gate { position: fixed; inset: 0; z-index: 2147483000; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: radial-gradient(ellipse at 50% 45%, rgba(212, 171, 91, .10), transparent 60%), #080a0d;
  color: #f7f3ea; font-family: var(--font-body--family), Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.pp-gate *, .pp-gate *::before, .pp-gate *::after { box-sizing: border-box; }
.pp-gate__vials { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.pp-gate__vial { position: absolute; height: auto; max-width: none; user-select: none; }
.pp-gate__inner { position: relative; min-height: 100%; display: flex; flex-direction: column; align-items: center; padding: 28px 16px; }
/* centered when it fits, scrolls from the top when it doesn't (short phones, landscape) */
.pp-gate__logo { margin-top: auto; }
.pp-gate__exit { margin-bottom: auto !important; }

.pp-gate__logo { text-align: center; margin-bottom: 18px; }
.pp-gate__logo b { display: block; font-family: 'Prestige Space', 'Space Grotesk', var(--font-body--family), sans-serif; font-weight: 600;
  letter-spacing: .3em; padding-left: .3em; font-size: 30px; color: #d4ab5b; }
.pp-gate__logo span { display: block; letter-spacing: .45em; padding-left: .45em; font-size: 11px; margin-top: 5px; color: #aeb4bb; }

.pp-gate__card { position: relative; width: 100%; max-width: 470px; margin: 0; border-radius: 18px; padding: 30px 30px 24px;
  background: rgba(17, 21, 26, .92); border: 1px solid rgba(212, 171, 91, .25); box-shadow: 0 30px 90px rgba(0, 0, 0, .6); }
.pp-gate__card h2 { margin: 0 0 10px; font-size: 27px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: #f7f3ea; }
.pp-gate__intro { margin: 0 0 20px; font-size: 14px; line-height: 1.55; color: #aeb4bb; }
.pp-gate__error { margin: -8px 0 14px; font-size: 13.5px; color: #f1d99c; }

.pp-gate__row { position: relative; display: flex !important; width: 100%; gap: 13px !important; align-items: flex-start !important; margin: 0 0 10px; padding: 15px 16px; border-radius: 12px;
  border: 1px solid rgba(212, 171, 91, .22); background: #0b0f13; color: #e9e3d6; font-size: 14.5px; line-height: 1.45; cursor: pointer; }
.pp-gate__row b { color: #fff; font-weight: 600; }
.pp-gate__row input { position: absolute; left: 16px; top: 16px; width: 20px; height: 20px; margin: 0; opacity: 0; cursor: pointer; }
.pp-gate__box { flex: 0 0 20px; width: 20px; height: 20px; margin: 1px 0 0 !important; border-radius: 6px; border: 1.5px solid #d4ab5b; display: flex; align-items: center; justify-content: center; }
.pp-gate__row input:checked + .pp-gate__box { background: #d4ab5b; }
.pp-gate__row input:checked + .pp-gate__box::after { content: ""; width: 10px; height: 5px; border-left: 2px solid #101215; border-bottom: 2px solid #101215; transform: rotate(-45deg) translate(1px, -1px); }
.pp-gate__row input:focus-visible + .pp-gate__box { outline: 2px solid #f1d99c; outline-offset: 2px; }
.pp-gate__row:has(input:checked) { border-color: rgba(212, 171, 91, .5); }

/* dim until both boxes are ticked (the boxes are required, so it can't be sent without them either way) */
.pp-gate__enter { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; margin-top: 18px; border: 0; border-radius: 999px;
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .01em; cursor: pointer;
  background: rgba(212, 171, 91, .25); color: rgba(247, 243, 234, .55); transition: background .15s, color .15s; }
.pp-gate__card:has(input[name="age"]:checked):has(input[name="research"]:checked) .pp-gate__enter { background: #d4ab5b; color: #101215; }
.pp-gate__card:has(input[name="age"]:checked):has(input[name="research"]:checked) .pp-gate__enter:hover { background: #f1d99c; }
.pp-gate__enter:focus-visible { outline: 2px solid #f1d99c; outline-offset: 3px; }

.pp-gate__fine { margin: 16px 0 0; font-size: 11.5px; line-height: 1.55; color: #8f99a3; }
.pp-gate__fine a, .pp-gate__exit a { color: #e6c98a; text-decoration: underline; text-underline-offset: 3px; }
.pp-gate__exit { position: relative; margin: 18px 0 0; font-size: 13px; color: #8f99a3; }
.pp-gate__exit a { font-weight: 600; display: inline-block; padding: 10px 4px; margin: -10px -4px; }

@media (max-width: 749px) {
  .pp-gate__inner { padding: 24px 16px; }
  .pp-gate__card { padding: 24px 18px 18px; }
  .pp-gate__card h2 { font-size: 23px; }
  .pp-gate__logo { margin-bottom: 14px; }
  .pp-gate__logo b { font-size: 24px; }
  .pp-gate__intro { font-size: 13.5px; margin-bottom: 16px; }
  .pp-gate__row { font-size: 14px; padding: 13px 14px; }
  .pp-gate__row input { left: 14px; top: 14px; }
  /* phones: four vials in the corners */
  .pp-gate__vial--5, .pp-gate__vial--6, .pp-gate__vial--7 { display: none; }
  .pp-gate__vial--1 { left: -3% !important; top: 1% !important; width: 62px !important; }
  .pp-gate__vial--2 { left: 80% !important; top: 2% !important; width: 56px !important; transform: rotate(22deg) !important; }
  .pp-gate__vial--3 { left: 82% !important; top: 87% !important; width: 64px !important; transform: rotate(18deg) !important; }
  .pp-gate__vial--4 { left: -2% !important; top: 86% !important; width: 58px !important; transform: rotate(-20deg) !important; }
}