/* The password dialog (src/client/gate.html; a form with access.password, Ola, 2026-10-09: "the
   dialog should look designed"). In front of a blurred still of the form's own start screen, a
   white card in the start screen's type: the heading set like the page's (caps, the part after
   the comma in the accent), the field as the start screen's fields, the button in START's colour
   and shape language. The accent and the ink come from form.json (colors) on <body>; the fonts
   and the greys from the theme when it names them (--f, --fh, --muted, --line, --pale, --red). */
body.gate{overflow:hidden; --ga:var(--gate-accent, #CD3A67); --gi:var(--gate-ink, #1B1F23)}

/* the start screen behind: a still, not a page; blurred and washed so the card reads first */
body.gate #intro{filter:blur(7px) saturate(.9); transform:scale(1.02); pointer-events:none; user-select:none;
  transition:filter .42s ease, transform .42s ease}
body.gate #startBtn{animation:none; cursor:default}
body.gate #intro input{pointer-events:none}

.gate-veil{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom)); overflow:auto;
  background:radial-gradient(120% 90% at 50% 40%, rgba(255,255,255,.42), rgba(255,255,255,.72));
  transition:opacity .42s ease}

.gate-card{position:relative; width:100%; max-width:400px; margin:auto; box-sizing:border-box;
  background:#fff; border-radius:24px; padding:30px 28px 20px; text-align:left; color:var(--gi);
  font-family:var(--f, "Figtree", "Helvetica Neue", Arial, sans-serif);
  box-shadow:0 34px 80px rgba(27,31,35,.20), 0 6px 18px rgba(27,31,35,.08), 0 0 0 1px rgba(27,31,35,.04);
  animation:gateIn .55s cubic-bezier(.2,.9,.3,1.12) both}

/* the padlock in the accent, START's soft glow under it */
.gate-icon{width:58px; height:58px; border-radius:50%; background:var(--ga); display:flex; align-items:center; justify-content:center;
  margin:0 0 20px; box-shadow:0 10px 24px color-mix(in srgb, var(--ga) 38%, transparent)}
.gate-icon svg{width:30px; height:30px; display:block}

.gate-card h2{font-family:var(--fh, var(--f, sans-serif)); font-feature-settings:"ss02" 1; text-transform:uppercase;
  font-weight:900; font-size:38px; line-height:.94; letter-spacing:0; margin:0 0 12px; color:var(--gi)}
.gate-card h2 em{font-style:normal; color:var(--ga); white-space:nowrap}
#gateText{font-size:14.5px; line-height:1.55; color:var(--muted, #4C535A); margin:0 0 22px;
  border-top:1px solid var(--pale, #E4E6E2); padding-top:12px}

.gate-card label{display:block; font-size:14px; font-weight:700; line-height:1.2; color:var(--gi); margin:0 0 6px}
.gate-field{position:relative}
.gate-field input{width:100%; box-sizing:border-box; font:inherit; font-size:17px; padding:14px 54px 14px 16px;
  border:1.5px solid var(--line, #B4B9B1); border-radius:10px; background:#fff; color:var(--gi); outline:none;
  transition:border-color .15s ease, box-shadow .15s ease}
.gate-field input:focus{border-color:var(--ga); box-shadow:0 0 0 4px color-mix(in srgb, var(--ga) 14%, transparent)}
.gate-field input[aria-invalid="true"], body[data-gate="wrong"] .gate-field input, body[data-gate="tooMany"] .gate-field input{
  border-color:var(--red, #E0433F)}
.gate-field input[aria-invalid="true"]:focus{box-shadow:0 0 0 4px color-mix(in srgb, var(--red, #E0433F) 14%, transparent)}
.gate-eye{position:absolute; right:5px; top:50%; transform:translateY(-50%); width:44px; height:44px; border:0; border-radius:8px;
  background:none; color:var(--muted, #4C535A); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0}
.gate-eye:hover, .gate-eye:focus-visible{color:var(--gi)}
.gate-eye svg{width:22px; height:22px; display:block}
.gate-eye .shut, .gate-eye[aria-pressed="true"] .open{display:none}
.gate-eye[aria-pressed="true"] .shut{display:block}

.gate-err{color:var(--red, #E0433F); font-size:13px; font-weight:700; line-height:1.4; margin:8px 0 0}
.gate-err:empty{margin:0}

/* the button: START's accent and weight, a pill */
.gate-go{position:relative; display:flex; align-items:center; justify-content:center; width:100%; min-height:54px; margin:20px 0 0;
  border:0; border-radius:999px; background:var(--ga); color:#fff; cursor:pointer;
  font-family:var(--f, sans-serif); font-weight:700; font-size:15px; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 12px 28px color-mix(in srgb, var(--ga) 36%, transparent); transition:transform .1s ease, box-shadow .2s ease}
.gate-go:hover{box-shadow:0 14px 32px color-mix(in srgb, var(--ga) 46%, transparent)}
.gate-go:active{transform:scale(.98)}
.gate-go:focus-visible{outline:3px solid var(--gi); outline-offset:3px}
.gate-go .dots{display:none; gap:6px}
.gate-go .dots i{width:7px; height:7px; border-radius:50%; background:#fff; display:block; animation:gateDot .9s ease-in-out infinite}
.gate-go .dots i:nth-child(2){animation-delay:.15s}
.gate-go .dots i:nth-child(3){animation-delay:.3s}
body.checking .gate-go .lbl, body.opening .gate-go .lbl{visibility:hidden}
body.checking .gate-go .dots, body.opening .gate-go .dots{display:flex; position:absolute}
.gate-go:disabled{cursor:default}

.gate-note{font-size:12px; color:var(--muted, #4C535A); text-align:center; margin:12px 0 0}
/* the card's foot: what the dialog keeps and where to ask, since the privacy page is behind the
   password too (2026-10-09); the same rule above it as the links had */
.gate-notice{margin:18px -28px 0; padding:14px 28px 0; border-top:1px solid var(--pale, #E4E6E2);
  font-size:12px; line-height:1.5; color:var(--muted, #4C535A); text-align:center}

/* wrong: the card shakes once; right: the card lifts away and the start screen comes into focus */
.gate-card.shake{animation:gateShake .42s cubic-bezier(.36,.07,.19,.97) both}
body.opening .gate-card{animation:gateOut .42s ease forwards}
body.opening .gate-veil{opacity:0}
body.opening #intro{filter:none; transform:none}

@keyframes gateIn{0%{opacity:0; transform:translateY(18px) scale(.97)}100%{opacity:1; transform:none}}
@keyframes gateOut{to{opacity:0; transform:translateY(-12px) scale(.97)}}
@keyframes gateShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
@keyframes gateDot{0%,100%{opacity:.35; transform:scale(.8)}50%{opacity:1; transform:scale(1)}}

@media (max-width:420px){
  .gate-card{padding:26px 22px 18px; border-radius:22px}
  .gate-notice{margin:16px -22px 0; padding:14px 22px 0}
  .gate-card h2{font-size:34px}
}
@media (max-height:620px){
  .gate-icon{width:46px; height:46px; margin-bottom:14px}
  .gate-icon svg{width:24px; height:24px}
  .gate-card h2{font-size:30px}
}
@media (prefers-reduced-motion:reduce){
  .gate-card, .gate-card.shake, body.opening .gate-card{animation:none}
  body.gate #intro, .gate-veil{transition:none}
  .gate-go .dots i{animation:none; opacity:1}
}